/* ============================================================
   ClaussTrade Wizard Modal Styles (ported from preview sandbox)
   Used by: #exchangeConfigModal (4-step) + #telegramConfigModal (3-step)
   ============================================================ */
    /* ============ V5 WIZARD (sandbox /preview only) ============ */
    /* Hide unused tab switch */
    .exchange-config-modal .ec-tab-switch[hidden] { display: none !important; }
    /* Hide all wallet-head when in wizard mode */
    .exchange-config-modal .wiz .wallet-head[hidden] { display: none !important; }

    /* Progress bar */
    .exchange-config-modal .wiz-progress {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(0,255,163,0.16);
      flex: none;
    }
    .exchange-config-modal .wiz-bars {
      display: flex; gap: 6px; margin-bottom: 8px;
    }
    .exchange-config-modal .wiz-bar {
      flex: 1; height: 3px;
      background: rgba(255,255,255,0.06);
      border-radius: 2px;
      transition: background 0.18s;
    }
    /* Step states */
    .exchange-config-modal .wiz[data-wiz-step="1"] .wiz-bar:nth-child(1),
    .exchange-config-modal .wiz[data-wiz-step="2"] .wiz-bar:nth-child(1),
    .exchange-config-modal .wiz[data-wiz-step="2"] .wiz-bar:nth-child(2),
    .exchange-config-modal .wiz[data-wiz-step="3"] .wiz-bar:nth-child(1),
    .exchange-config-modal .wiz[data-wiz-step="3"] .wiz-bar:nth-child(2),
    .exchange-config-modal .wiz[data-wiz-step="3"] .wiz-bar:nth-child(3),
    .exchange-config-modal .wiz[data-wiz-step="4"] .wiz-bar {
      background: #00ffa3;
      box-shadow: 0 0 6px #00ffa3;
    }
    .exchange-config-modal .wiz-label {
      display: flex; justify-content: space-between;
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 1px;
      color: #5b7468;
    }
    .exchange-config-modal .wiz-label b { color: #00ffa3; }

    /* Wizard panes — only one visible per step */
    .exchange-config-modal .wiz-pane { display: none; padding: 18px 14px; }
    .exchange-config-modal .wiz[data-wiz-step="1"] .wiz-pane-1,
    .exchange-config-modal .wiz[data-wiz-step="2"] .wiz-pane-2,
    .exchange-config-modal .wiz[data-wiz-step="3"] .wiz-pane-3,
    .exchange-config-modal .wiz[data-wiz-step="4"] .wiz-pane-4 { display: block; }

    /* Pane heading */
    .exchange-config-modal .wiz-h {
      font-family: 'Space Mono', monospace;
      font-size: 14px; font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      margin: 0 0 8px;
      color: #e8f4ee;
    }
    .exchange-config-modal .wiz-lead {
      font-size: 12px; color: #9ab5a6;
      margin: 0 0 18px;
      font-family: 'Space Mono', monospace;
      letter-spacing: 0.3px;
    }

    /* Step 1: pick options */
    .exchange-config-modal .wiz-pick {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .exchange-config-modal .wiz-opt {
      padding: 22px 14px;
      background: linear-gradient(140deg, rgba(0,255,163,0.05), transparent);
      background-color: #11241d;
      border: 1px solid rgba(0,255,163,0.16);
      border-radius: 12px;
      cursor: pointer;
      text-align: center;
      transition: all 0.18s;
    }
    .exchange-config-modal .wiz-opt:hover {
      border-color: rgba(0,255,163,0.40);
      transform: translateY(-2px);
    }
    .exchange-config-modal .wiz-opt.on {
      border-color: #00ffa3;
      background: rgba(0,255,163,0.08);
      box-shadow: 0 0 0 1px rgba(0,255,163,0.40);
    }
    .exchange-config-modal .wiz-opt .nm {
      font-family: 'Space Mono', monospace;
      font-size: 14px; font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-top: 10px;
    }
    .exchange-config-modal .wiz-opt .ds {
      font-family: 'Space Mono', monospace;
      font-size: 10px; color: #5b7468;
      letter-spacing: 0.4px; text-transform: uppercase;
      margin-top: 4px;
    }

    /* Wizard logo — smaller, cleaner */
    .exchange-config-modal .wiz-lg {
      width: 44px; height: 44px;
      border-radius: 10px;
      overflow: hidden;
      margin: 0 auto;
      display: block;
    }
    .exchange-config-modal .wiz-lg.wiz-lg-sm {
      width: 40px; height: 40px;
      border-radius: 9px;
    }
    .exchange-config-modal .wiz-lg svg {
      display: block;
      width: 100%; height: 100%;
    }

    /* Cleaner pick option (smaller, less padding) */
    .exchange-config-modal .wiz-opt {
      padding: 18px 12px !important;
      position: relative;
      overflow: hidden;
    }
    .exchange-config-modal .wiz-opt .nm {
      font-size: 14px !important;
      margin-top: 10px !important;
    }
    .exchange-config-modal .wiz-opt .ds {
      font-size: 9px !important;
      margin-top: 3px !important;
    }
    /* Selected: clean border + checkmark — NO heavy ring */
    .exchange-config-modal .wiz-opt.on {
      border-color: #00ffa3 !important;
      background: rgba(0,255,163,0.08) !important;
      box-shadow: none !important;
      transform: none !important;
    }
    /* Checkmark indicator (top-right corner) */
    .exchange-config-modal .wiz-opt.on::after {
      content: '✓';
      position: absolute;
      top: 8px; right: 8px;
      width: 22px; height: 22px;
      background: #00ffa3;
      color: #050d09;
      border-radius: 50%;
      display: grid; place-items: center;
      font-weight: 700; font-size: 12px;
      animation: wiz-check-pop-tiny 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes wiz-check-pop-tiny {
      0% { transform: scale(0); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* Ripple click effect (replaces heavy pulse) */
    .exchange-config-modal .wiz-opt.wiz-just-picked::before {
      content: '';
      position: absolute;
      left: 50%; top: 50%;
      width: 6px; height: 6px;
      background: rgba(0,255,163,0.50);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: wiz-ripple 0.55s ease-out;
      pointer-events: none;
    }
    @keyframes wiz-ripple {
      0% { width: 6px; height: 6px; opacity: 1; }
      100% { width: 320px; height: 320px; opacity: 0; }
    }

    /* Per-venue blocks shown by data-wiz-venue */
    .exchange-config-modal .wiz[data-wiz-venue=""] .ec-panel,
    .exchange-config-modal .wiz[data-wiz-venue=""] .wiz-trading-block,
    .exchange-config-modal .wiz[data-wiz-venue=""] .wiz-cta-block { display: none; }
    .exchange-config-modal .wiz[data-wiz-venue="bybit"] .ec-panel[data-ec-panel="mexc"],
    .exchange-config-modal .wiz[data-wiz-venue="bybit"] .wiz-trading-block[data-for="mexc"],
    .exchange-config-modal .wiz[data-wiz-venue="bybit"] .wiz-cta-block[data-for="mexc"] { display: none !important; }
    .exchange-config-modal .wiz[data-wiz-venue="mexc"] .ec-panel[data-ec-panel="bybit"],
    .exchange-config-modal .wiz[data-wiz-venue="mexc"] .wiz-trading-block[data-for="bybit"],
    .exchange-config-modal .wiz[data-wiz-venue="mexc"] .wiz-cta-block[data-for="bybit"] { display: none !important; }
    /* Force visible the opposite */
    .exchange-config-modal .wiz[data-wiz-venue="bybit"] .ec-panel[data-ec-panel="bybit"] { display: block !important; }
    .exchange-config-modal .wiz[data-wiz-venue="mexc"] .ec-panel[data-ec-panel="mexc"] { display: block !important; }

    /* Step 4: review summary */
    .exchange-config-modal .wiz-summary {
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(0,255,163,0.16);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 14px;
    }
    .exchange-config-modal .wiz-sum-row {
      display: flex; justify-content: space-between;
      padding: 6px 0;
      font-family: 'Space Mono', monospace;
      font-size: 11px;
    }
    .exchange-config-modal .wiz-sum-row + .wiz-sum-row {
      border-top: 1px solid rgba(0,255,163,0.08);
    }
    .exchange-config-modal .wiz-sum-row .lb {
      color: #5b7468; letter-spacing: 0.4px;
      text-transform: uppercase; font-weight: 700;
    }
    .exchange-config-modal .wiz-sum-row .vl {
      color: #00ffa3; font-weight: 600;
      font-family: 'JetBrains Mono', monospace;
    }

    /* Wizard footer nav (Next/Connect only — Back moved to top) */
    .exchange-config-modal .wiz-foot {
      padding: 14px 16px;
      border-top: 1px solid rgba(0,255,163,0.16);
      display: flex; gap: 8px;
      flex: none;
    }
    .exchange-config-modal .wiz-btn-next { flex: 1; }
    .exchange-config-modal .wiz-btn-next:disabled {
      opacity: 0.4; cursor: not-allowed;
    }

    /* ===== Back button — small chip ===== */
    .exchange-config-modal .wiz-back-icon {
      width: 24px; height: 24px;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 6px;
      color: rgba(255,255,255,0.55);
      display: grid; place-items: center;
      cursor: pointer;
      transition: all 0.15s;
      flex: none;
      margin: 0;
    }
    .exchange-config-modal .wiz-back-icon:hover {
      background: rgba(255,255,255,0.04);
      color: #ffffff;
      border-color: rgba(255,255,255,0.20);
    }
    .exchange-config-modal .wiz-back-icon[hidden] { display: none; }
    .exchange-config-modal .wiz-back-icon svg {
      width: 11px; height: 11px;
    }

    /* Telegram panes: back + title share a flex row (wiz-pane-head wrapper) */
    .exchange-config-modal .wiz-pane-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .exchange-config-modal .wiz-pane-head > .wiz-h {
      flex: 1 1 auto;
      margin: 0 !important;
      padding: 0 !important;
      min-width: 0;
    }

    /* Exchange panes: back-icon is a sibling above title (own line) */
    .exchange-config-modal .wiz-pane > .wiz-back-icon {
      display: inline-grid;
      margin: 0 0 10px 0;
    }
    /* Title flush left — same margin as lead/form below for symmetry */
    .exchange-config-modal .wiz .wiz-h {
      padding-left: 0 !important;
    }
    /* Hide back icon on EXCHANGE step 1 only (Telegram step 1 has back-to-exchange) */
    #exchangeConfigModal .wiz[data-wiz-step="1"] .wiz-back-icon { display: none; }
    /* Title takes remaining space */
    .exchange-config-modal .wiz-pane-head .wiz-h {
      flex: 1;
      margin: 0 !important;
      padding-left: 0 !important;
    }
    .exchange-config-modal .wiz-pane-head .wiz-saved-badge {
      flex: none;
    }

    /* HIDE FOOTER ENTIRELY at final step — primary action is in pane */
    /* Exchange wizard: 4 steps, Telegram wizard: 3 steps */
    #exchangeConfigModal .wiz[data-wiz-step="4"] .wiz-foot,
    #telegramConfigModal .wiz[data-wiz-step="3"] .wiz-foot {
      display: none !important;
    }

    /* Remove tiny color squares before labels (looked odd) */
    .exchange-config-modal .wiz[data-wiz-step="2"] .cfg-section .wcfg-row label::before {
      display: none;
    }

    /* Inline warning banner */
    .exchange-config-modal .wiz-warn {
      padding: 11px 13px;
      background: rgba(255,200,61,0.08);
      border: 1px solid rgba(255,200,61,0.30);
      border-radius: 8px;
      margin-bottom: 14px;
      display: flex; align-items: center; gap: 10px;
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: #ffc83d;
      letter-spacing: 0.3px;
      animation: wiz-warn-shake 0.4s ease;
    }
    .exchange-config-modal .wiz-warn .ic { font-size: 14px; }
    .exchange-config-modal .wiz-warn .msg { flex: 1; line-height: 1.4; }
    .exchange-config-modal .wiz-warn[hidden] { display: none; }
    @keyframes wiz-warn-shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-4px); }
      75% { transform: translateX(4px); }
    }
    /* Highlight invalid fields */
    .exchange-config-modal .acc-input.wiz-invalid {
      border-color: #ffc83d !important;
      box-shadow: 0 0 0 3px rgba(255,200,61,0.15) !important;
    }

    /* ============ MODAL BACKGROUND — match server gradient ============ */
    .exchange-config-modal .ec-modal-card.wiz {
      background: linear-gradient(180deg, #0f1916 0%, #0a1410 100%) !important;
      border: 1px solid rgba(255,255,255,0.06) !important;
      border-radius: 16px !important;
      box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,255,163,0.04) !important;
      position: relative;
    }
    /* Remove all decorative pseudo elements (was the "kotak melayang") */
    .exchange-config-modal .ec-modal-card.wiz::before,
    .exchange-config-modal .ec-modal-card.wiz::after {
      display: none !important;
    }
    .exchange-config-modal .ec-modal-card.wiz > * { position: relative; z-index: 1; }

    /* Force Space Mono everywhere inside wizard to match server typography */
    .exchange-config-modal .wiz,
    .exchange-config-modal .wiz * {
      font-family: 'Space Mono', monospace;
    }

    /* ============ COMPACT STATUS STRIP (Step 2) ============ */
    .exchange-config-modal .wiz-status {
      margin-top: 12px;
      padding: 8px 12px;
      background: rgba(0,0,0,0.30);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      display: flex; align-items: center; gap: 8px;
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.2px;
      color: #5b7468;
      transition: all 0.22s;
      line-height: 1.3;
    }
    .exchange-config-modal .wiz-status .dot {
      flex: 0 0 6px !important;
      width: 6px !important; height: 6px !important;
    }
    .exchange-config-modal .wiz-status .msg {
      flex: 1 1 auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .exchange-config-modal .wiz-status .dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #5b7468;
      flex: none;
      transition: all 0.22s;
    }
    .exchange-config-modal .wiz-status .msg { flex: 1; }
    .exchange-config-modal .wiz-status .meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; opacity: 0.7;
    }
    .exchange-config-modal .wiz-status[data-state="ready"] .dot {
      background: #00d4d4; box-shadow: 0 0 6px #00d4d4;
    }
    .exchange-config-modal .wiz-status[data-state="ready"] {
      color: #9ab5a6;
    }
    .exchange-config-modal .wiz-status[data-state="testing"] .dot {
      background: #ffc83d; box-shadow: 0 0 6px #ffc83d;
      animation: wiz-pulse-dot 0.9s ease-in-out infinite;
    }
    .exchange-config-modal .wiz-status[data-state="testing"] {
      color: #ffc83d;
      border-color: rgba(255,200,61,0.30);
      background: rgba(255,200,61,0.04);
    }
    .exchange-config-modal .wiz-status[data-state="success"] .dot {
      background: #00ffa3; box-shadow: 0 0 8px #00ffa3;
    }
    .exchange-config-modal .wiz-status[data-state="success"] {
      color: #6ee7a7;
      border-color: rgba(0,255,163,0.30);
      background: rgba(0,255,163,0.06);
    }
    .exchange-config-modal .wiz-status[data-state="fail"] .dot {
      background: #ff5e6c; box-shadow: 0 0 6px #ff5e6c;
    }
    .exchange-config-modal .wiz-status[data-state="fail"] {
      color: #ff5e6c;
      border-color: rgba(255,94,108,0.30);
      background: rgba(255,94,108,0.04);
    }
    @keyframes wiz-pulse-dot {
      50% { opacity: 0.4; transform: scale(0.85); }
    }
    @keyframes wiz-spin {
      to { transform: rotate(360deg); }
    }

    /* ============ MINIMALIST FOOTER BUTTON ============ */
    /* Clean, flat, no 3D, no shine — just smooth premium feel */
    .exchange-config-modal .wiz-btn-next {
      padding: 13px 18px !important;
      border-radius: 10px !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px !important;
      text-transform: uppercase !important;
      cursor: pointer !important;
      transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: none !important;
      border: none !important;
      animation: none !important;
      position: relative;
    }
    /* Remove any pseudo elements (no shine animation) */
    .exchange-config-modal .wiz-btn-next::before,
    .exchange-config-modal .wiz-btn-next::after {
      display: none !important;
    }

    /* IDLE — soft ghost */
    .exchange-config-modal .wiz-btn-next[data-action="idle"] {
      background: rgba(255,255,255,0.04) !important;
      color: rgba(154,181,166,0.55) !important;
      border: 1px solid rgba(255,255,255,0.06) !important;
      cursor: not-allowed !important;
      font-size: 13px !important;
    }

    /* VERIFY / CONTINUE — premium gradient with subtle inner shadow */
    .exchange-config-modal .wiz-btn-next[data-action="verify"],
    .exchange-config-modal .wiz-btn-next[data-action="continue"]:not([disabled]) {
      background: linear-gradient(180deg, #00ffa3 0%, #00d98a 100%) !important;
      color: #050d09 !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 6px 16px rgba(0,255,163,0.20) !important;
      padding: 16px 22px !important;
      border-radius: 14px !important;
      font-size: 14.5px !important;
      font-weight: 600 !important;
    }
    /* Add arrow icon after label */
    .exchange-config-modal .wiz-btn-next[data-action="verify"]::after,
    .exchange-config-modal .wiz-btn-next[data-action="continue"]:not([disabled])::after {
      content: '' !important;
      display: inline-block;
      width: 14px; height: 14px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050d09' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
      background-size: contain;
      background-repeat: no-repeat;
      transition: transform 0.18s ease;
    }
    .exchange-config-modal .wiz-btn-next[data-action="verify"]:hover:not(:disabled),
    .exchange-config-modal .wiz-btn-next[data-action="continue"]:not([disabled]):hover {
      background: linear-gradient(180deg, #1affb0 0%, #00e695 100%) !important;
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 8px 22px rgba(0,255,163,0.32) !important;
    }
    .exchange-config-modal .wiz-btn-next[data-action="verify"]:hover::after,
    .exchange-config-modal .wiz-btn-next[data-action="continue"]:not([disabled]):hover::after {
      transform: translateX(3px);
    }
    .exchange-config-modal .wiz-btn-next[data-action="verify"]:active:not(:disabled),
    .exchange-config-modal .wiz-btn-next[data-action="continue"]:not([disabled]):active {
      background: linear-gradient(180deg, #00d98a 0%, #00b377 100%) !important;
      transform: translateY(0);
      box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,255,163,0.20) !important;
    }

    /* TESTING — yellow flat */
    .exchange-config-modal .wiz-btn-next[data-action="testing"] {
      background: #ffc83d !important;
      color: #050d09 !important;
      cursor: wait !important;
    }

    /* RETRY — red flat */
    .exchange-config-modal .wiz-btn-next[data-action="retry"] {
      background: #ff5e6c !important;
      color: #fff !important;
    }
    .exchange-config-modal .wiz-btn-next[data-action="retry"]:hover {
      background: #e84e5c !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(255,94,108,0.25) !important;
    }

    /* Spinner */
    .exchange-config-modal .wiz-btn-next .spin {
      width: 14px !important;
      height: 14px !important;
      border: 2.5px solid rgba(5,13,9,0.20) !important;
      border-top-color: #050d09 !important;
      border-radius: 50% !important;
      animation: wiz-spin 0.7s linear infinite;
      display: inline-block;
    }

    /* ============ ENHANCED INPUT FIELDS (Step 2) ============ */
    /* Make API key inputs more prominent with icon prefix */
    .exchange-config-modal .wiz[data-wiz-step="2"] .cfg-section .wcfg-row {
      position: relative;
    }
    .exchange-config-modal .wiz[data-wiz-step="2"] .cfg-section .wcfg-row label {
      display: flex; align-items: center; gap: 6px;
    }
    .exchange-config-modal .wiz[data-wiz-step="2"] .cfg-section .wcfg-row label::before {
      content: ''; width: 10px; height: 10px; border-radius: 2px;
      background: rgba(0,255,163,0.40);
    }
    .exchange-config-modal .wiz[data-wiz-step="2"] .cfg-section .acc-input {
      padding: 12px 14px !important;
      font-size: 13px !important;
    }

    /* ============ STEP-SPECIFIC ACCENT TINTS ============ */
    /* Step 2: blue tint (credentials/security) */
    .exchange-config-modal .wiz[data-wiz-step="2"] .wiz-pane-2 .cfg-section {
      background: linear-gradient(135deg, rgba(0,212,212,0.03), transparent 70%);
      padding: 14px;
      border: 1px solid rgba(0,212,212,0.10);
      border-radius: 10px;
      margin-bottom: 10px;
    }
    /* Step 3: orange tint (trading) */
    .exchange-config-modal .wiz[data-wiz-step="3"] .wiz-pane-3 .cfg-section {
      background: linear-gradient(135deg, rgba(255,200,61,0.03), transparent 70%);
      padding: 14px;
      border: 1px solid rgba(255,200,61,0.10);
      border-radius: 10px;
      margin-bottom: 10px;
    }

    /* ============ ANIMATIONS ============ */
    /* Modal backdrop fade-in */
    @keyframes wiz-backdrop-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .exchange-config-modal:not([hidden]) {
      animation: wiz-backdrop-fade 0.22s ease-out;
    }

    /* Modal entrance — multi-stage spring + blur reveal */
    @keyframes wiz-modal-enter {
      0% {
        opacity: 0;
        transform: translateY(80px) scale(0.82) rotateX(-12deg);
        filter: blur(10px);
      }
      35% {
        opacity: 1;
        filter: blur(0);
      }
      70% {
        transform: translateY(-8px) scale(1.025) rotateX(0);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
        filter: blur(0);
      }
    }
    .exchange-config-modal:not([hidden]) .ec-modal-card.wiz {
      animation: wiz-modal-enter 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: center bottom;
      perspective: 1000px;
    }

    /* Expanding glow ring on modal entrance */
    @keyframes wiz-modal-ring {
      0% {
        box-shadow:
          0 0 0 0 rgba(0,255,163,0.50),
          0 24px 60px rgba(0,0,0,0.55),
          0 0 0 1px rgba(0,255,163,0.06),
          inset 0 1px 0 rgba(255,255,255,0.04);
      }
      100% {
        box-shadow:
          0 0 0 80px rgba(0,255,163,0),
          0 24px 60px rgba(0,0,0,0.55),
          0 0 0 1px rgba(0,255,163,0.06),
          inset 0 1px 0 rgba(255,255,255,0.04);
      }
    }
    .exchange-config-modal:not([hidden]) .ec-modal-card.wiz {
      animation: wiz-modal-enter 0.62s cubic-bezier(0.34, 1.56, 0.64, 1),
                 wiz-modal-ring 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Stagger entrance for children (header → progress → body → footer) */
    @keyframes wiz-child-fade {
      0% { opacity: 0; transform: translateY(14px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .exchange-config-modal:not([hidden]) .ec-modal-card.wiz > .ec-modal-head {
      animation: wiz-child-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
    }
    .exchange-config-modal:not([hidden]) .ec-modal-card.wiz > .wiz-progress {
      animation: wiz-child-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
    }
    .exchange-config-modal:not([hidden]) .ec-modal-card.wiz > .ec-panels {
      animation: wiz-child-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
    }
    .exchange-config-modal:not([hidden]) .ec-modal-card.wiz > .wiz-foot {
      animation: wiz-child-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both;
    }

    /* Pane transitions — forward/backward direction */
    @keyframes wiz-pane-fwd {
      0% { opacity: 0; transform: translateX(28px); }
      100% { opacity: 1; transform: translateX(0); }
    }
    @keyframes wiz-pane-back {
      0% { opacity: 0; transform: translateX(-28px); }
      100% { opacity: 1; transform: translateX(0); }
    }
    .exchange-config-modal .wiz-pane.wiz-anim-fwd {
      animation: wiz-pane-fwd 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .exchange-config-modal .wiz-pane.wiz-anim-back {
      animation: wiz-pane-back 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Pick option stagger entrance */
    @keyframes wiz-opt-pop {
      0% { opacity: 0; transform: translateY(16px) scale(0.92); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .exchange-config-modal .wiz-anim-fwd .wiz-opt:nth-child(1),
    .exchange-config-modal .wiz[data-wiz-step="1"] .wiz-pane-1 .wiz-opt:nth-child(1) {
      animation: wiz-opt-pop 0.40s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
    }
    .exchange-config-modal .wiz-anim-fwd .wiz-opt:nth-child(2),
    .exchange-config-modal .wiz[data-wiz-step="1"] .wiz-pane-1 .wiz-opt:nth-child(2) {
      animation: wiz-opt-pop 0.40s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
    }

    /* Old heavy pulse removed — using ripple effect now (defined above) */

    /* Section info — explanatory text between sections */
    .exchange-config-modal .wiz-section-info {
      margin: 18px 0 10px;
      padding: 12px 14px;
      background: rgba(55,187,254,0.04);
      border: 1px solid rgba(55,187,254,0.15);
      border-radius: 10px;
      border-left: 3px solid rgba(55,187,254,0.50);
    }
    .exchange-config-modal .wiz-section-info-title {
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: #37BBFE;
      margin-bottom: 4px;
      display: flex; align-items: center; gap: 8px;
    }
    .exchange-config-modal .wiz-section-info-title::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #37BBFE;
      flex: none;
      box-shadow: 0 0 6px rgba(55,187,254,0.5);
    }
    .exchange-config-modal .wiz-section-info-desc {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: #9ab5a6;
      line-height: 1.5;
      letter-spacing: 0.2px;
    }

    /* ============ ULTRA MINIMALIST (typography-only, no cards) ============ */
    /* Kill outer parent card containers (ec-card / wallet-card / settings-card) */
    .exchange-config-modal .wiz .ec-card,
    .exchange-config-modal .wiz .wallet-card,
    .exchange-config-modal .wiz .settings-card,
    .exchange-config-modal .wiz .tg-card {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    /* ===== UNIFIED FORM CARD: wallet-config wraps Network + API rows
       No outer border (modal card already provides edge); just dark bg
       + internal dividers between sections. */
    .exchange-config-modal .wiz .wallet-config {
      background: rgba(0,0,0,0.25) !important;
      border: none !important;
      border-radius: 12px !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      transition: background 0.18s ease;
    }
    .exchange-config-modal .wiz .wallet-config:focus-within {
      background: rgba(0,255,163,0.04) !important;
    }
    /* ===== MEXC mode-aware visibility (CSS — beats app.js inline display) ===== */
    /* REAL/MAINNET active → hide paper-only (Demo Balance + Reset) */
    .exchange-config-modal .wiz #mexcCard:has(#mxNetToggle .net-opt[data-net="mainnet"].active) .paper-only {
      display: none !important;
    }
    /* DEMO/TESTNET active → hide real-only (API Account section) */
    .exchange-config-modal .wiz #mexcCard:has(#mxNetToggle .net-opt[data-net="testnet"].active) .real-only {
      display: none !important;
    }
    .exchange-config-modal .wiz .wallet-config:focus-within {
      border-color: rgba(0,255,163,0.35) !important;
    }
    /* Each cfg-section becomes a flat row inside the unified card — no chrome */
    .exchange-config-modal .wiz .wallet-config > .cfg-section {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    /* Divider between sections */
    .exchange-config-modal .wiz .wallet-config > .cfg-section + .cfg-section {
      border-top: 1px solid rgba(255,255,255,0.06) !important;
    }

    /* Section = pure typography spacing, no borders */
    .exchange-config-modal .wiz .cfg-section {
      background: transparent !important;
      backdrop-filter: none !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      margin: 0 0 12px !important;
      overflow: visible;
      counter-increment: none;
    }
    .exchange-config-modal .wiz .cfg-section:last-child {
      margin-bottom: 0 !important;
    }
    .exchange-config-modal .wiz .cfg-section::before,
    .exchange-config-modal .wiz .cfg-section::after {
      display: none !important;
    }

    /* Section title — small subtle caption (not headline) */
    .exchange-config-modal .wiz .cfg-section-title {
      padding: 0 !important;
      margin: 0 0 8px !important;
      background: none !important;
      border: none !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: 1.2px !important;
      text-transform: uppercase !important;
      color: rgba(255,255,255,0.42) !important;
      display: block !important;
      line-height: 1.2 !important;
    }
    .exchange-config-modal .wiz .cfg-section-title::before,
    .exchange-config-modal .wiz .cfg-section-title::after {
      display: none !important;
    }

    /* Default row — transparent; chrome is applied selectively */
    .exchange-config-modal .wiz .wcfg-row {
      padding: 0 !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 !important;
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
    }
    .exchange-config-modal .wiz .wcfg-row + .wcfg-row {
      border-top: none !important;
      margin-top: 12px !important;
    }
    .exchange-config-modal .wiz .wcfg-row:last-child {
      margin-bottom: 0 !important;
    }
    .exchange-config-modal .wiz .wcfg-row label {
      font-family: 'Space Mono', monospace !important;
      font-size: 12px !important;
      font-weight: 400 !important;
      color: rgba(255,255,255,0.70) !important;
      letter-spacing: 0.2px !important;
      text-transform: none !important;
    }

    /* ===== Inside unified wallet-config card — rows have inner padding =====
       Each cfg-section gets horizontal padding; the section itself has
       NO border (the wallet-config card divider handles that).
       NOTE: Sections that ALSO contain a .net-toggle keep their 12px vertical
       padding (handled by the .net-toggle rule below) — :not() exclusion
       prevents this rule winning specificity over toggle rule. */
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row[style*="flex-direction:column"]):not(:has(.net-toggle)),
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row.paper-only):not(:has(.net-toggle)) {
      padding: 0 14px !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
    }
    /* Hide redundant caption inside unified credential card */
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row[style*="flex-direction:column"]) > .cfg-section-title,
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row.paper-only) > .cfg-section-title {
      display: none !important;
    }
    /* Hide redundant "NETWORK MODE" caption (segmented toggle is self-explanatory) */
    .exchange-config-modal .wiz .cfg-section:has(.net-toggle) > .cfg-section-title {
      display: none !important;
    }
    /* Each row INLINE — label left, input right */
    .exchange-config-modal .wiz .wcfg-row[style*="flex-direction:column"],
    .exchange-config-modal .wiz .wcfg-row.paper-only {
      flex-direction: row !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 12px 0 !important;
      margin: 0 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
    }
    /* Divider between rows */
    .exchange-config-modal .wiz .wcfg-row[style*="flex-direction:column"]
      + .wcfg-row[style*="flex-direction:column"],
    .exchange-config-modal .wiz .wcfg-row.paper-only
      + .wcfg-row.paper-only,
    .exchange-config-modal .wiz .wcfg-row + .wcfg-row.paper-only {
      border-top: 1px solid rgba(255,255,255,0.06) !important;
      margin-top: 0 !important;
    }
    /* Label on left — fixed width, uppercase, dim */
    .exchange-config-modal .wiz .wcfg-row[style*="flex-direction:column"] > label,
    .exchange-config-modal .wiz .wcfg-row.paper-only > label {
      font-family: 'Space Mono', monospace !important;
      font-size: 10px !important;
      color: rgba(255,255,255,0.50) !important;
      font-weight: 700 !important;
      letter-spacing: 1.2px !important;
      text-transform: uppercase !important;
      margin: 0 !important;
      flex: 0 0 90px !important;
      line-height: 1.2 !important;
    }
    /* Input on right — borderless, fills remaining space, right-aligned */
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row[style*="flex-direction:column"]) .acc-input,
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row.paper-only) .acc-input {
      flex: 1 1 auto !important;
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      color: #ffffff !important;
      box-shadow: none !important;
      text-align: right !important;
      min-width: 0 !important;
    }
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row[style*="flex-direction:column"]) .acc-input:focus,
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row.paper-only) .acc-input:focus {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row[style*="flex-direction:column"]) .acc-input::placeholder,
    .exchange-config-modal .wiz .cfg-section:has(> .wcfg-row.paper-only) .acc-input::placeholder {
      color: rgba(255,255,255,0.22) !important;
    }
    /* Focus highlight handled by .wallet-config:focus-within (parent card) */
    /* Reset Demo button (paper-only) — small chip, right side */
    .exchange-config-modal .wiz .wcfg-row.paper-only .acc-btn.reset[id$="PaperReset"] {
      flex: 0 0 auto !important;
      margin-left: 8px !important;
    }
    /* Paper-only input — keep it minimal text in unified card */
    .exchange-config-modal .wiz .wcfg-row.paper-only .acc-input.small {
      max-width: none !important;
      flex: 1 1 auto !important;
      text-align: right !important;
    }

    /* ===== NETWORK ROW: Network label left + segmented toggle right ===== */
    .exchange-config-modal .wiz .cfg-section:has(.net-toggle) {
      padding: 12px 14px !important;
    }
    .exchange-config-modal .wiz .cfg-section:has(.net-toggle) .wcfg-row {
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
    }
    .exchange-config-modal .wiz .cfg-section:has(.net-toggle) .wcfg-row > label {
      display: block !important;
      flex: 0 0 90px !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: 1.2px !important;
      text-transform: uppercase !important;
      color: rgba(255,255,255,0.50) !important;
      margin: 0 !important;
    }
    /* Segmented toggle on right */
    .exchange-config-modal .wiz .cfg-section:has(.net-toggle) .net-toggle {
      flex: 1 1 auto !important;
      display: flex !important;
      width: auto !important;
    }
    .exchange-config-modal .wiz .cfg-section:has(.net-toggle) .net-toggle .net-opt {
      flex: 1 1 0 !important;
    }

    /* Input — clean server style */
    .exchange-config-modal .wiz .acc-input {
      background: rgba(0,0,0,0.30) !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
      border-radius: 10px !important;
      padding: 11px 13px !important;
      color: #ffffff !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      letter-spacing: 0.2px !important;
      transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
      box-shadow: none !important;
      width: 100% !important;
    }
    .exchange-config-modal .wiz .acc-input::placeholder {
      color: rgba(255,255,255,0.25) !important;
      font-weight: 400 !important;
    }
    .exchange-config-modal .wiz .acc-input:focus {
      background: rgba(0,0,0,0.40) !important;
      border-color: rgba(0,255,163,0.45) !important;
      box-shadow: 0 0 0 2px rgba(0,255,163,0.10) !important;
    }
    /* Small input = card style with neon tint */
    .exchange-config-modal .wiz .acc-input.small {
      max-width: 110px !important;
      padding: 10px 14px !important;
      text-align: right !important;
      background: rgba(0,255,163,0.06) !important;
      border-color: rgba(0,255,163,0.18) !important;
      color: #00ffa3 !important;
      font-weight: 600 !important;
      border-radius: 10px !important;
    }

    /* Toggle = full-width segmented (premium) */
    .exchange-config-modal .wiz .net-toggle {
      background: rgba(255,255,255,0.04) !important;
      border: 1px solid rgba(255,255,255,0.06) !important;
      border-radius: 12px !important;
      padding: 4px !important;
      box-shadow: none !important;
      display: inline-flex !important;
    }
    .exchange-config-modal .wiz .net-toggle .net-opt {
      padding: 7px 14px !important;
      border-radius: 7px !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px !important;
      text-transform: uppercase !important;
      color: rgba(255,255,255,0.50) !important;
      border: none !important;
      background: transparent !important;
      transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .exchange-config-modal .wiz .net-toggle .net-opt:hover {
      color: rgba(255,255,255,0.85) !important;
    }
    .exchange-config-modal .wiz .net-toggle .net-opt.active {
      background: #00ffa3 !important;
      color: #050d09 !important;
      font-weight: 600 !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.30) !important;
    }
    .exchange-config-modal .wiz .net-toggle .net-opt.mainnet.active {
      background: #00ffa3 !important;
      color: #050d09 !important;
    }

    /* Reset button — subtle dim chip (not error red) */
    .exchange-config-modal .wiz .acc-btn.reset[id$="PaperReset"] {
      background: transparent !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      color: rgba(255,255,255,0.55) !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: 1px !important;
      text-transform: uppercase !important;
      padding: 6px 12px !important;
      border-radius: 6px !important;
      box-shadow: none !important;
      width: auto !important;
      align-self: flex-end;
      text-decoration: none !important;
      transition: all 0.15s;
    }
    .exchange-config-modal .wiz .acc-btn.reset[id$="PaperReset"]:hover {
      color: #ffffff !important;
      background: rgba(255,255,255,0.04) !important;
      border-color: rgba(255,255,255,0.20) !important;
    }

    /* Pane breathing room */
    .exchange-config-modal .wiz .wiz-pane {
      padding: 14px 16px !important;
    }
    /* Reset .ec-panels padding inside wizard — let wiz-pane control padding
       (style.css default .ec-panels has asymmetric 12/24 top/bottom) */
    .exchange-config-modal .ec-modal-card.wiz > .ec-panels {
      padding: 0 !important;
    }
    .exchange-config-modal .wiz .wiz-h {
      font-family: 'Space Mono', monospace !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      letter-spacing: 0.6px !important;
      text-transform: uppercase !important;
      margin: 0 0 8px !important;
      line-height: 1.2 !important;
      color: #e8f4ee !important;
      background: none !important;
      -webkit-text-fill-color: #e8f4ee !important;
    }
    .exchange-config-modal .wiz .wiz-lead {
      font-family: 'Space Mono', monospace !important;
      margin: 0 0 14px !important;
      font-size: 12px !important;
      line-height: 1.5 !important;
      color: rgba(255,255,255,0.50) !important;
      font-weight: 400 !important;
      opacity: 1 !important;
    }

    /* DEFENSIVE: force all [hidden] elements truly invisible (kill any "kotak melayang") */
    .exchange-config-modal .wiz [hidden],
    #exchangeConfigModal [hidden],
    #telegramConfigModal [hidden] {
      display: none !important;
    }
    /* Hide any leftover SVG icons in modal head (defensive, in case any added back) */
    .exchange-config-modal .wiz .ec-modal-head > svg {
      display: none !important;
    }
    /* ============ SYMMETRIC PADDING (all sections aligned to 20px) ============ */
    .exchange-config-modal .wiz .ec-modal-head {
      padding: 14px 16px !important;
      gap: 0 !important;
      border-bottom: 1px solid rgba(255,255,255,0.06) !important;
      background: linear-gradient(180deg, rgba(0,255,163,0.04), transparent) !important;
    }
    .exchange-config-modal .wiz-progress {
      padding: 14px 16px !important;
    }
    .exchange-config-modal .wiz .wiz-pane {
      padding: 14px 16px !important;
    }
    .exchange-config-modal .wiz-foot {
      padding: 14px 16px 16px !important;
    }
    .exchange-config-modal .wiz-status {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    /* Hide wallet-head/stats/error completely (no reserved space) */
    .exchange-config-modal .wiz .wallet-head,
    .exchange-config-modal .wiz .wallet-stats,
    .exchange-config-modal .wiz .wallet-stats[hidden],
    .exchange-config-modal .wiz .wallet-error[hidden],
    .exchange-config-modal .wiz .tg-status[hidden],
    .exchange-config-modal .wiz #tgTradeStatus[hidden],
    .exchange-config-modal .wiz [hidden][id$="Status"],
    .exchange-config-modal .wiz [hidden][id$="StatusBadge"] {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      width: 0 !important;
      overflow: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    /* Cleaner close button — no boxy border */
    .exchange-config-modal .wiz .venue-modal-close {
      background: transparent !important;
      border: none !important;
      color: #5b7468 !important;
      width: 36px !important;
      height: 36px !important;
      font-size: 22px !important;
      transition: color 0.15s, background 0.15s !important;
    }
    .exchange-config-modal .wiz .venue-modal-close:hover {
      color: #fff !important;
      background: rgba(255,255,255,0.05) !important;
      border-radius: 8px !important;
    }
    .exchange-config-modal .wiz .ec-modal-title {
      font-family: 'Space Mono', monospace !important;
      font-weight: 700 !important;
      letter-spacing: 0.6px !important;
      text-transform: uppercase !important;
      font-size: 13px !important;
      color: #e8f4ee !important;
      flex: 1;
    }

    /* Telegram wide option (full-width card with horizontal layout) */
    .exchange-config-modal .wiz-pick-extra .wiz-opt-wide {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 14px !important;
      text-align: left !important;
      padding: 14px 16px !important;
      width: 100%;
    }
    .exchange-config-modal .wiz-opt-wide .wiz-lg {
      margin: 0 !important;
      flex: none;
    }
    .exchange-config-modal .wiz-opt-wide .wiz-opt-info {
      flex: 1;
    }
    .exchange-config-modal .wiz-opt-wide .wiz-opt-info .nm {
      margin-top: 0 !important;
      font-size: 14px !important;
    }
    .exchange-config-modal .wiz-opt-wide .wiz-opt-info .ds {
      margin-top: 2px !important;
      font-size: 10px !important;
      text-transform: none !important;
      letter-spacing: 0.2px !important;
    }
    .exchange-config-modal .wiz-opt-arrow {
      color: #5b7468;
      font-size: 18px;
      transition: transform 0.2s, color 0.2s;
    }
    .exchange-config-modal .wiz-opt-wide:hover .wiz-opt-arrow {
      color: #00ffa3;
      transform: translateX(3px);
    }
    /* Telegram opt: blue-ish hover */
    .exchange-config-modal .wiz-opt-wide:hover {
      border-color: rgba(55,187,254,0.40) !important;
    }

    /* Progress bar — smooth fill on step change */
    .exchange-config-modal .wiz-bar {
      position: relative;
      overflow: hidden;
    }
    .exchange-config-modal .wiz-bar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: #00ffa3;
      box-shadow: 0 0 6px #00ffa3;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* Generic progress fill — works for 3-step (Telegram) and 4-step (Exchange) */
    .exchange-config-modal .wiz[data-wiz-step="1"] .wiz-bar:nth-child(-n+1)::before,
    .exchange-config-modal .wiz[data-wiz-step="2"] .wiz-bar:nth-child(-n+2)::before,
    .exchange-config-modal .wiz[data-wiz-step="3"] .wiz-bar:nth-child(-n+3)::before,
    .exchange-config-modal .wiz[data-wiz-step="4"] .wiz-bar::before {
      transform: scaleX(1);
    }
    .exchange-config-modal .wiz .wiz-bar {
      background: rgba(255,255,255,0.06);
      box-shadow: none;
    }

    /* Step label fade-update */
    @keyframes wiz-label-fade {
      0% { opacity: 0; transform: translateY(-4px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .exchange-config-modal .wiz-label.wiz-anim-update [data-wiz-num],
    .exchange-config-modal .wiz-label.wiz-anim-update [data-wiz-name],
    .exchange-config-modal .wiz-label.wiz-anim-update [data-wiz-pct] {
      animation: wiz-label-fade 0.3s ease-out;
      display: inline-block;
    }

    /* Saved badge pop-in */
    @keyframes wiz-badge-pop {
      0% { opacity: 0; transform: scale(0.6); }
      60% { transform: scale(1.12); }
      100% { opacity: 1; transform: scale(1); }
    }
    .exchange-config-modal .wiz-saved-badge:not([hidden]) {
      animation: wiz-badge-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ============ STEP 4 / TG STEP 3 ACTION BUTTONS ============ */
    /* Wallet actions container */
    .exchange-config-modal .wiz .wallet-actions {
      display: flex !important;
      flex-direction: column;
      gap: 10px !important;
      padding: 0 !important;
      margin: 14px 0 0 !important;
      background: transparent !important;
      border: none !important;
    }
    /* Disconnect button — secondary, slim, red outline */
    .exchange-config-modal .wiz .wallet-actions .acc-btn.reset {
      width: 100% !important;
      padding: 12px 18px !important;
      background: rgba(255,94,108,0.05) !important;
      border: 1px solid rgba(255,94,108,0.25) !important;
      border-radius: 10px !important;
      color: #ff5e6c !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 1px !important;
      text-transform: uppercase !important;
      cursor: pointer;
      transition: all 0.18s ease;
      box-shadow: none !important;
    }
    .exchange-config-modal .wiz .wallet-actions .acc-btn.reset:hover {
      background: rgba(255,94,108,0.12) !important;
      border-color: rgba(255,94,108,0.50) !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(255,94,108,0.15) !important;
    }
    /* Test Send (Telegram) — secondary outline */
    .exchange-config-modal .wiz .wallet-actions .acc-btn.tg-test {
      width: 100% !important;
      padding: 12px 18px !important;
      background: rgba(0,212,212,0.05) !important;
      border: 1px solid rgba(0,212,212,0.30) !important;
      border-radius: 10px !important;
      color: #00d4d4 !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 1px !important;
      text-transform: uppercase !important;
      box-shadow: none !important;
      transition: all 0.18s ease !important;
    }
    .exchange-config-modal .wiz .wallet-actions .acc-btn.tg-test:hover {
      background: rgba(0,212,212,0.12) !important;
      border-color: rgba(0,212,212,0.55) !important;
      transform: translateY(-1px);
    }

    /* Connect / Save (Telegram) — minimalist clean primary */
    .exchange-config-modal .wiz[data-wiz-step="4"] .wallet-actions .acc-btn.save,
    .exchange-config-modal .wiz .wallet-actions .acc-btn.tg-save {
      width: 100% !important;
      padding: 14px 20px !important;
      font-family: 'Space Mono', monospace !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      background: #00ffa3 !important;
      color: #050d09 !important;
      border: none !important;
      border-radius: 12px !important;
      box-shadow: none !important;
      transition: background 0.15s, transform 0.12s, box-shadow 0.15s !important;
      animation: none !important;
      cursor: pointer;
    }
    .exchange-config-modal .wiz[data-wiz-step="4"] .wallet-actions .acc-btn.save::before,
    .exchange-config-modal .wiz[data-wiz-step="4"] .wallet-actions .acc-btn.save::after,
    .exchange-config-modal .wiz .wallet-actions .acc-btn.tg-save::before,
    .exchange-config-modal .wiz .wallet-actions .acc-btn.tg-save::after {
      display: none !important;
    }
    .exchange-config-modal .wiz[data-wiz-step="4"] .wallet-actions .acc-btn.save:hover,
    .exchange-config-modal .wiz .wallet-actions .acc-btn.tg-save:hover {
      background: #00d98a !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,255,163,0.25) !important;
    }
    .exchange-config-modal .wiz[data-wiz-step="4"] .wallet-actions .acc-btn.save:active,
    .exchange-config-modal .wiz .wallet-actions .acc-btn.tg-save:active {
      background: #00b377 !important;
      transform: translateY(0);
      box-shadow: none !important;
    }

    /* ============ CONNECTING STATE — spinner + pulsing ============ */
    /* When app.js sets btn.disabled = true while connecting, show spinner */
    .exchange-config-modal .wiz[data-wiz-step="4"] .wallet-actions .acc-btn.save:disabled,
    .exchange-config-modal .wiz .wallet-actions .acc-btn.tg-save:disabled {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      background: linear-gradient(90deg, #00ffa3 0%, #00d98a 100%) !important;
      background-size: 200% 100% !important;
      animation: wiz-connect-shimmer 1.4s ease-in-out infinite !important;
      cursor: wait !important;
      transform: none !important;
      box-shadow: 0 0 18px rgba(0,255,163,0.35) !important;
    }
    .exchange-config-modal .wiz[data-wiz-step="4"] .wallet-actions .acc-btn.save:disabled::before,
    .exchange-config-modal .wiz .wallet-actions .acc-btn.tg-save:disabled::before {
      content: '' !important;
      display: inline-block !important;
      width: 14px !important;
      height: 14px !important;
      border: 2.5px solid rgba(5,13,9,0.20) !important;
      border-top-color: #050d09 !important;
      border-radius: 50% !important;
      animation: wiz-spin 0.7s linear infinite !important;
      flex-shrink: 0 !important;
    }
    @keyframes wiz-connect-shimmer {
      0%, 100% { background-position: 0% 50%; box-shadow: 0 0 12px rgba(0,255,163,0.30); }
      50% { background-position: 100% 50%; box-shadow: 0 0 24px rgba(0,255,163,0.50); }
    }

    /* Warning banner enhanced shake + slide */
    @keyframes wiz-warn-enter {
      0% { opacity: 0; transform: translateY(-8px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes wiz-warn-shake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-6px); }
      40% { transform: translateX(6px); }
      60% { transform: translateX(-4px); }
      80% { transform: translateX(4px); }
    }
    .exchange-config-modal .wiz-warn:not([hidden]) {
      animation: wiz-warn-enter 0.22s ease-out, wiz-warn-shake 0.4s ease-in-out 0.22s;
    }

    /* Saved badge — removed per user request */
    .exchange-config-modal .wiz-saved-badge { display: none !important; }

    /* Hide wallet-stats noise in wizard (cleaner step 2) */
    .exchange-config-modal .wiz .wallet-stats { display: none !important; }
    /* Hide wallet-head badge in wizard */
    .exchange-config-modal .wiz .wallet-head { display: none !important; }

    /* ============ FRESH LAYOUT REFRESH ============ */
    /* Cleaner card backgrounds with glass blur */
    .exchange-config-modal .wiz .cfg-section {
      background: rgba(0,0,0,0.20) !important;
      backdrop-filter: blur(8px);
      border-radius: 12px !important;
    }
    /* Better input focus: glow ring */
    .exchange-config-modal .wiz .acc-input {
      transition: all 0.18s ease !important;
    }
    .exchange-config-modal .wiz .acc-input:focus {
      border-color: #00ffa3 !important;
      box-shadow: 0 0 0 3px rgba(0,255,163,0.18), 0 4px 12px rgba(0,255,163,0.10) !important;
    }
    /* Heading — compact uppercase Space Mono (matches server convention) */
    .exchange-config-modal .wiz-h {
      font-size: 14px !important;
      font-weight: 700 !important;
      letter-spacing: 0.6px !important;
      text-transform: uppercase !important;
      color: #e8f4ee !important;
      background: none !important;
      -webkit-text-fill-color: #e8f4ee !important;
    }
    /* Lead text */
    .exchange-config-modal .wiz-lead {
      font-size: 12px !important;
      line-height: 1.5 !important;
      color: rgba(255,255,255,0.50) !important;
      opacity: 1 !important;
      font-weight: 400 !important;
    }

    /* ============ SUCCESS OVERLAY (auto-close after Connect) ============ */
    .exchange-config-modal .wiz-success-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(5,13,9,0.96), rgba(8,19,13,0.98));
      backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      z-index: 100;
      border-radius: inherit;
      animation: wiz-success-fade 0.32s ease-out;
    }
    .exchange-config-modal .wiz-success-overlay[hidden] { display: none; }
    @keyframes wiz-success-fade {
      0% { opacity: 0; backdrop-filter: blur(0); }
      100% { opacity: 1; backdrop-filter: blur(20px); }
    }
    .exchange-config-modal .wiz-success-check {
      width: 88px; height: 88px;
      border-radius: 50%;
      background: linear-gradient(135deg, #00ffa3, #00d98a);
      display: grid; place-items: center;
      box-shadow: 0 0 0 0 rgba(0,255,163,0.45);
      animation:
        wiz-check-bounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
        wiz-check-ring 1.2s ease-out;
    }
    @keyframes wiz-check-bounce {
      0% { transform: scale(0); opacity: 0; }
      55% { transform: scale(1.18); opacity: 1; }
      80% { transform: scale(0.95); }
      100% { transform: scale(1); }
    }
    @keyframes wiz-check-ring {
      0% { box-shadow: 0 0 0 0 rgba(0,255,163,0.55); }
      100% { box-shadow: 0 0 0 60px rgba(0,255,163,0); }
    }
    .exchange-config-modal .wiz-success-check svg {
      width: 44px; height: 44px;
      color: #050d09;
      stroke-width: 3;
      stroke-dasharray: 50;
      stroke-dashoffset: 50;
      animation: wiz-check-draw 0.5s 0.25s ease-out forwards;
    }
    @keyframes wiz-check-draw {
      to { stroke-dashoffset: 0; }
    }
    .exchange-config-modal .wiz-success-title {
      font-family: 'Space Mono', monospace;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      background: linear-gradient(135deg, #ffffff 0%, #00ffa3 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: wiz-child-fade 0.4s 0.4s both cubic-bezier(0.22, 1, 0.36, 1);
    }
    .exchange-config-modal .wiz-success-msg {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: #9ab5a6;
      letter-spacing: 0.4px;
      text-align: center;
      max-width: 280px;
      line-height: 1.5;
      animation: wiz-child-fade 0.4s 0.5s both cubic-bezier(0.22, 1, 0.36, 1);
    }
    .exchange-config-modal .wiz-success-close-hint {
      font-family: 'Space Mono', monospace;
      font-size: 9px;
      color: #5b7468;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      margin-top: 8px;
      animation: wiz-child-fade 0.4s 0.6s both cubic-bezier(0.22, 1, 0.36, 1);
    }
    .exchange-config-modal .wiz-success-bar {
      width: 200px;
      height: 2px;
      background: rgba(0,255,163,0.15);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 6px;
      animation: wiz-child-fade 0.4s 0.6s both cubic-bezier(0.22, 1, 0.36, 1);
    }
    .exchange-config-modal .wiz-success-bar::after {
      content: '';
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #00ffa3, #00d98a);
      box-shadow: 0 0 6px #00ffa3;
      animation: wiz-success-progress 1.4s 0.7s linear forwards;
      width: 0;
    }
    @keyframes wiz-success-progress {
      to { width: 100%; }
    }