/* =========================================
     WIFI QR CODE MAKER — PREMIUM UI
     ========================================= */
  .da-wrapper {
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      justify-content: center;
      padding: clamp(0px, 5vw, 0px) 20px;
  }

  .da-panel {
      position: relative;                
      width: 100%;
      max-width: 1200px;
      border-radius: 28px;
      padding: clamp(28px, 5vw, 56px);
  }

  /* ---------- OPTIONS BAR ---------- */
  .options-bar { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 12px 20px; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.02); flex-wrap: wrap; }
  
  .ob-lbl { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
  .f-btn { background: transparent; border: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-muted); outline: none; cursor: pointer; padding: 6px 12px; border-radius: 8px; transition: all 0.2s; }
  .f-btn:hover { background: var(--bg-body); color: var(--text-main); }
  .f-btn.on { background: rgba(16, 185, 129, 0.1); color: #10b981; }
  
  .ob-sep { width: 1px; height: 24px; background: var(--border-color); margin: 0 4px; }
  
  .dir-toggle { display: flex; align-items: center; gap: 8px; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 12px; font-size: 11px; font-weight: 800; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
  .dir-toggle:hover { border-color: #10b981; }
  .d-ltr, .d-rtl { transition: color 0.2s; }
  .dir-toggle.rtl .d-rtl { color: #10b981; }
  .dir-toggle:not(.rtl) .d-ltr { color: #10b981; }
  
  .usage-meter { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .usage-pips { display: flex; gap: 4px; }
  .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color); }
  .pip.used { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
  .usage-lbl { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #10b981; }

  /* ---------- RENDER STAGE & QUANTUM CARD ---------- */
  .render-stage { display: flex; justify-content: center; perspective: 1000px; margin-bottom: 50px; }
  
  .quantum-card { width: 100%; max-width: 440px; position: relative; transition: transform 0.8s var(--ease-spring); transform-style: preserve-3d; }
  .quantum-card.is-flipped { transform: rotateY(180deg); }
  
  .card-face { width: 100%; backface-visibility: hidden; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; }
  .card-front { padding: 30px; }
  .card-back { position: absolute; top: 0; left: 0; height: 100%; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: space-between; }
  
  /* Front Face Details */
  .cf-header { text-align: center; margin-bottom: 24px; }
  .cf-icon { width: 60px; height: 60px; background: rgba(16,185,129,0.1); color: #10b981; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px auto; }
  .cf-title { font-size: 18px; font-weight: 900; color: var(--text-main); margin-bottom: 4px; }
  .cf-sub { font-size: 12px; font-weight: 700; color: var(--text-muted); }
  
  .input-stack { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .input-wrap { display: flex; flex-direction: column; gap: 6px; position: relative; }
  .input-label { font-size: 12px; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
  .input-label i { width: 14px; height: 14px; color: #10b981; }
  .c-input { width: 100%; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-main); outline: none; transition: border-color 0.2s; }
  .c-input:focus { border-color: #10b981; }
  
  .pw-toggle { position: absolute; right: 12px; bottom: 10px; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 4px; }
  .pw-toggle:hover { color: var(--text-main); background: var(--border-color); }
  
  /* Toggle Switch */
  .switch-wrap { display: flex; align-items: center; justify-content: space-between; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color 0.2s; }
  .switch-wrap:hover { border-color: #10b981; }
  .switch-label { display: flex; flex-direction: column; }
  .sl-main { font-size: 13px; font-weight: 800; color: var(--text-main); }
  .sl-sub { font-size: 11px; font-weight: 700; color: var(--text-muted); }
  .toggle-switch { width: 36px; height: 20px; background: var(--border-color); border-radius: 20px; position: relative; transition: background 0.3s; }
  .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
  input:checked + .switch-wrap .toggle-switch { background: #10b981; }
  input:checked + .switch-wrap .toggle-switch::after { transform: translateX(16px); }

  .forge-btn { width: 100%; padding: 14px; background: var(--primary-color); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); }
  .forge-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.4); }
  .forge-btn:disabled { background: var(--border-color); color: var(--text-muted); cursor: not-allowed; box-shadow: none; }
  
  /* Back Face Details (Print Area) */
  .cb-header { text-align: center; padding: 24px 20px; background: var(--primary-color); color: #fff; border-bottom: 2px solid rgba(0,0,0,0.1); }
  .cb-net-name { font-size: 22px; font-weight: 900; word-break: break-all; margin-bottom: 4px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
  .cb-net-sub { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; }
  
  .cb-qr-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; background: #fff; }
  .qr-frame { background: #fff; padding: 10px; border-radius: 12px; border: 1px solid #eaeaea; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
  .scan-instruction { margin-top: 20px; font-size: 13px; font-weight: 800; color: #555; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
  
  .cb-footer { padding: 20px; background: var(--bg-body); border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 10px; }
  .cb-btn { padding: 12px; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; border: none; }
  .cb-btn.primary { background: #10b981; color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,0.2); }
  .cb-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,185,129,0.3); }
  .cb-btn.secondary { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border-color); }
  .cb-btn.secondary:hover { border-color: var(--primary-color); color: var(--primary-color); }
  
  .cb-reset { background: transparent; border: none; font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; margin-top: 5px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: color 0.2s; }
  .cb-reset:hover { color: #ef4444; }

  /* ---------- STATS STRIP ---------- */
  .stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 40px; }
  .sc { background: var(--card-bg); border-radius: 16px; padding: 20px; border: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.2s; box-shadow: 0 4px 20px rgba(0,0,0,0.02); }
  .sc:hover { transform: translateY(-2px); }
  .sc-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
  
  .sc-ico.r { background: rgba(16, 185, 129, 0.1); color: #10b981; }
  .sc-ico.b { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
  .sc-ico.g { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
  .sc-ico.p { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
  
  .sc-val { font-size: 28px; font-weight: 900; color: var(--text-main); line-height: 1; margin-bottom: 4px; transition: transform 0.3s; font-family: 'Space Mono', monospace; }
  .sc-lbl { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
  .sc-val.popped { transform: scale(1.3); color: var(--primary-color); }

  /* Toast */
  /* ── Comparison Panel & Analytics ── */
  .comparison-panel {
      background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 24px;
      padding: 28px; margin-top: 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); margin-bottom: 40px;
  }
  .cp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
  .cp-title { font-size: 16px; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
  .cp-badge { font-size: 12px; font-weight: 800; padding: 6px 14px; border-radius: 100px; }
  .badge-high { background: color-mix(in srgb, var(--success, #10b981) 15%, transparent); color: var(--success, #10b981); border: 1px solid color-mix(in srgb, var(--success, #10b981) 30%, transparent); }

  .cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
  .cp-card { background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
  .cpc-header { display: flex; justify-content: space-between; align-items: center; }
  .cpc-title { font-size: 13.5px; font-weight: 800; color: var(--text-main); }
  .cpc-tag { font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 6px; }
  .cpc-tag.success { background: color-mix(in srgb, var(--success, #10b981) 15%, transparent); color: var(--success, #10b981); }

  .cpc-body { display: flex; flex-direction: column; gap: 10px; }
  .cpc-stat-row { font-size: 13px; color: var(--text-muted); display: flex; justify-content: space-between; }
  .cpc-stat-row strong { color: var(--text-main); font-weight: 700; }
  .cpc-progress-bar { width: 100%; height: 8px; background: var(--border-color); border-radius: 100px; overflow: hidden; margin-top: 4px; }
  .cpc-progress-fill { height: 100%; background: var(--primary-color); border-radius: 100px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .cpc-progress-fill.bg-gradient { background: linear-gradient(90deg, var(--primary-color), var(--primary-gradient-end)); }
  .toast { position: fixed; bottom: 24px; right: 24px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--text-main); box-shadow: 0 10px 30px rgba(0,0,0,0.1); z-index: 100000; opacity: 0; pointer-events: none; transform: translateY(20px); transition: all 0.3s var(--ease-spring); }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.success { border-left: 4px solid #10b981; }
  .toast.error { border-left: 4px solid #ef4444; }
  .toast.warn { border-left: 4px solid #f59e0b; }
  .toast.info { border-left: 4px solid #3b82f6; }

  /* =========================================
     ZERO INLINE STYLES EXTENSIONS
     ========================================= */
  #bgCv {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
  }

  .rw-hero-badge i {
      width: 14px;
      height: 14px;
  }

  .icon-type-muted {
      width: 12px;
      height: 12px;
      color: var(--text-muted);
  }

  .dir-divider {
      opacity: 0.3;
  }

  .cf-icon i {
      width: 28px;
      height: 28px;
  }

  .pw-toggle i {
      width: 16px;
      height: 16px;
  }

  .cd-header i {
      width: 14px;
      height: 14px;
  }

  .hidden-label {
      display: none;
  }

  .forge-btn i {
      width: 20px;
      height: 20px;
  }

  .scan-instruction i {
      width: 14px;
      height: 14px;
      color: #555;
  }

  .cb-btn i {
      width: 16px;
      height: 16px;
  }

  .cb-reset i {
      width: 12px;
      height: 12px;
  }

  .sc-ico i {
      width: 18px;
      height: 18px;
  }

  .info-div-t {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 20px;
      margin-top: 40px;
  }

  .icon-star-primary {
      width: 16px;
      height: 16px;
      color: var(--primary-color);
  }

  .toast i {
      width: 18px;
      height: 18px;
  }

  .toast.success i {
      color: #10b981;
  }

  .toast.error i {
      color: #ef4444;
  }

  .toast.warn i {
      color: #f59e0b;
  }

  .toast.info i {
      color: #3b82f6;
  }