/* Self-hosted fonts (OFL). Outfit has no Cyrillic -> Onest covers Cyrillic under the same family name. */
@font-face{font-family:"Outfit";src:url(../fonts/Outfit-VF.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}
@font-face{font-family:"Outfit";src:url(../fonts/Onest-cyrillic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Outfit";src:url(../fonts/Onest-cyrillic-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/JetBrainsMono-VF.woff2) format("woff2");font-weight:100 800;font-display:swap}
/* ---- v8 carrier CSS below, verbatim from previews/by-references/ref-1-ship-fast.html ---- */

    :root {
      --bg-canvas: #F4F6F9;
      --bg-card: #FFFFFF;
      --bg-subtle: #F1F5F9;
      --bg-hover: #F8FAFC;
      --border-subtle: #E2E8F0;
      --border-focus: #CBD5E1;
      --text-main: #0F172A;
      --text-muted: #64748B;
      --text-light: #94A3B8;
      
      --brand-orange: #FF5722;
      --brand-orange-hover: #F4511E;
      --brand-orange-subtle: #FFF3E0;
      --brand-orange-border: #FFCCBC;
      --brand-navy: #0F172A;
      --brand-pill-active: #0F172A;
      --brand-pill-active-text: #FFFFFF;
      
      --success: #10B981;
      --success-bg: #ECFDF5;
      --success-border: #A7F3D0;
      
      --warning: #F59E0B;
      --warning-bg: #FFFBEB;
      --warning-border: #FDE68A;
      
      --danger: #EF4444;
      --danger-bg: #FEF2F2;
      --danger-border: #FECACA;
      
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
      --shadow-card: 0 4px 16px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
      --shadow-hover: 0 12px 28px -6px rgba(15, 23, 42, 0.10);
      
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-pill: 9999px;
      
      --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    html.dark {
      --bg-canvas: #0B0F19;
      --bg-card: #111827;
      --bg-subtle: #1F2937;
      --bg-hover: #1E293B;
      --border-subtle: #1F2937;
      --border-focus: #374151;
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
      --text-light: #64748B;
      
      --brand-orange: #FF6E40;
      --brand-orange-hover: #FF5722;
      --brand-orange-subtle: rgba(255, 110, 64, 0.15);
      --brand-orange-border: rgba(255, 110, 64, 0.35);
      --brand-navy: #0B0F19;
      --brand-pill-active: #FF6E40;
      --brand-pill-active-text: #FFFFFF;
      
      --success: #34D399;
      --success-bg: rgba(16, 185, 129, 0.15);
      --success-border: rgba(16, 185, 129, 0.3);
      
      --warning: #FBBF24;
      --warning-bg: rgba(245, 158, 11, 0.15);
      --warning-border: rgba(245, 158, 11, 0.3);
      
      --danger: #F87171;
      --danger-bg: rgba(239, 68, 68, 0.15);
      --danger-border: rgba(239, 68, 68, 0.3);
      
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
      --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
      --shadow-hover: 0 14px 32px -4px rgba(0, 0, 0, 0.6);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font-sans);
      background-color: var(--bg-canvas);
      color: var(--text-main);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      -webkit-font-smoothing: antialiased;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    /* Motion & Elevation */
    button, input, select, textarea, .nav-pill-btn, .interactive-row {
      transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }
    button:active, .nav-pill-btn:active {
      transform: scale(0.97);
    }
    .stat-card, .chart-card, .table-card, .budget-item-card {
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .stat-card:hover, .budget-item-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
    }

    /* Top Bar */
    header.app-topbar {
      background: var(--bg-card);
      border-bottom: 1px solid var(--border-subtle);
      position: sticky;
      top: 0;
      z-index: 40;
      padding: 10px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      backdrop-filter: blur(8px);
      transition: background 0.25s ease, border-color 0.25s ease;
    }

    .brand-section {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    .brand-logo-badge {
      width: 38px;
      height: 38px;
      background: linear-gradient(135deg, #FF6E40 0%, #FF3D00 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    .brand-titles h1 {
      font-size: 15px;
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1.1;
      text-transform: uppercase;
      color: var(--text-main);
    }
    .brand-titles span {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    /* Top Segmented Pill Nav */
    nav.nav-pill-container {
      display: flex;
      align-items: center;
      gap: 4px;
      background: var(--bg-subtle);
      padding: 4px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-subtle);
      overflow-x: auto;
      scrollbar-width: none;
    }
    nav.nav-pill-container::-webkit-scrollbar { display: none; }

    .nav-pill-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 16px;
      border-radius: var(--radius-pill);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text-muted);
      border: none;
      background: transparent;
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
    }
    .nav-pill-btn:hover {
      color: var(--text-main);
      background: rgba(125, 125, 125, 0.08);
    }
    .nav-pill-btn.active {
      background: var(--brand-pill-active);
      color: var(--brand-pill-active-text);
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    .nav-pill-btn .counter-badge {
      font-family: var(--font-mono);
      font-size: 11px;
      padding: 1px 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.2);
    }
    html:not(.dark) .nav-pill-btn:not(.active) .counter-badge {
      background: #E2E8F0;
      color: #475569;
    }

    /* Topbar Right Controls */
    .topbar-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .balance-pill {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--bg-subtle);
      padding: 6px 13px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-subtle);
      font-size: 12px;
      font-weight: 600;
    }
    .balance-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
      animation: pulseDot 2s infinite;
    }
    @keyframes pulseDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.9); }
    }
    .balance-value {
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--text-main);
    }

    .period-select {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      color: var(--text-main);
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      outline: none;
    }
    .period-select:focus {
      border-color: var(--brand-orange);
    }

    .icon-btn {
      width: 34px;
      height: 34px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
      background: var(--bg-subtle);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .icon-btn:hover {
      color: var(--text-main);
      background: var(--bg-hover);
      border-color: var(--border-focus);
    }

    /* User Profile & Auth in Topbar */
    .user-profile-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px 4px 4px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-pill);
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
    }
    .user-profile-badge:hover {
      border-color: var(--border-focus);
    }
    .user-avatar-circle {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366F1, #8B5CF6);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
    }

    .btn-sync {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--brand-orange);
      color: white;
      font-size: 12px;
      font-weight: 700;
      padding: 7px 16px;
      border-radius: var(--radius-sm);
      border: none;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    .btn-sync:hover {
      background: var(--brand-orange-hover);
    }

    /* Main Container & Tabs */
    main.app-viewport {
      flex: 1;
      padding: 24px;
      max-width: 1680px;
      width: 100%;
      margin: 0 auto;
    }

    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
      animation: tabFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes tabFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

        /* =========================================
       SHOWCASE: VIRTUAL CARD & MULTI-PROVIDER BALANCE
       ========================================= */
    .card-balance-showcase {
      display: grid;
      grid-template-columns: 380px minmax(0, 1fr);
      gap: 20px;
      margin-bottom: 20px;
      align-items: stretch;
    }
    @media (max-width: 1200px) {
      .card-balance-showcase {
        grid-template-columns: 1fr;
      }
    }

    .virtual-card-wrap {
      perspective: 1000px;
      display: flex;
    }
    .virtual-card {
      width: 100%;
      max-width: 380px;
      min-height: 226px;
      border-radius: 20px;
      padding: 22px 24px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease;
      user-select: none;
      cursor: default;
    }
    .virtual-card:hover {
      transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
      box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    }

    /* Bybit Theme */
    .virtual-card.theme-bybit {
      background: linear-gradient(135deg, #10141E 0%, #1A2234 45%, #0B0E17 100%);
      border: 1px solid rgba(245, 158, 11, 0.25);
    }
    .virtual-card.theme-bybit::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -25%;
      width: 260px;
      height: 260px;
      background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(255, 87, 34, 0.1) 50%, transparent 70%);
      pointer-events: none;
    }

    /* Bank / Revolut Theme */
    .virtual-card.theme-bank {
      background: linear-gradient(135deg, #09172B 0%, #132A4A 45%, #07111F 100%);
      border: 1px solid rgba(56, 189, 248, 0.3);
    }
    .virtual-card.theme-bank::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -25%;
      width: 260px;
      height: 260px;
      background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(37, 99, 235, 0.1) 50%, transparent 70%);
      pointer-events: none;
    }

    /* Web3 Theme */
    .virtual-card.theme-web3 {
      background: linear-gradient(135deg, #18092B 0%, #29134A 45%, #0E051C 100%);
      border: 1px solid rgba(168, 85, 247, 0.3);
    }
    .virtual-card.theme-web3::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -25%;
      width: 260px;
      height: 260px;
      background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(139, 92, 246, 0.1) 50%, transparent 70%);
      pointer-events: none;
    }

    .card-glare {
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 60%);
      pointer-events: none;
    }

    .card-row-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 2;
    }
    .card-brand-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .card-brand-title {
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.12em;
      color: #F8FAFC;
      text-transform: uppercase;
    }
    .card-brand-divider {
      width: 1px;
      height: 14px;
      background: rgba(255, 255, 255, 0.25);
    }
    .card-brand-sub {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #94A3B8;
      text-transform: uppercase;
    }
    .card-status-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.35);
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      color: #34D399;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .card-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
      animation: pulse-dot-anim 2s infinite;
    }
    @keyframes pulse-dot-anim {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }

    .card-row-chip {
      display: flex;
      align-items: center;
      gap: 14px;
      z-index: 2;
      margin: 8px 0;
    }
    .emv-chip {
      width: 42px;
      height: 30px;
      border-radius: 6px;
      background: linear-gradient(135deg, #FDE68A 0%, #D97706 50%, #92400E 100%);
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.35);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .chip-line.horizontal {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(0,0,0,0.4);
      transform: translateY(-50%);
    }
    .chip-line.vertical {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      background: rgba(0,0,0,0.4);
      transform: translateX(-50%);
    }
    .chip-core {
      position: absolute;
      inset: 7px 11px;
      border: 1px solid rgba(0,0,0,0.4);
      border-radius: 3px;
    }
    .contactless-icon {
      width: 18px;
      height: 18px;
      color: rgba(255, 255, 255, 0.7);
      transform: rotate(90deg);
    }

    .card-row-number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 2;
      margin-bottom: 8px;
    }
    .card-pan-number {
      font-family: var(--font-mono);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #FFFFFF;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .card-copy-btn {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.75);
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }
    .card-copy-btn:hover {
      background: rgba(255,255,255,0.2);
      color: #FFFFFF;
    }

    .card-row-bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      z-index: 2;
    }
    .card-meta-label {
      display: block;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #94A3B8;
      margin-bottom: 2px;
    }
    .card-holder-name {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #F1F5F9;
      text-transform: uppercase;
    }
    .card-expiry-val {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #F1F5F9;
    }
    .card-network-logo {
      display: flex;
      align-items: center;
      height: 26px;
    }
    .mc-circle {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: inline-block;
    }
    .mc-red {
      background: #EB001B;
    }
    .mc-amber {
      background: #F79E1B;
      margin-left: -10px;
      mix-blend-mode: screen;
    }
    .visa-text {
      font-family: var(--font-sans);
      font-size: 18px;
      font-weight: 900;
      font-style: italic;
      color: #FFFFFF;
      letter-spacing: -0.04em;
    }

    /* Balance Panel Card */
    .balance-panel-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 20px;
      padding: 22px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: var(--shadow-card);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .balance-panel-card:hover {
      border-color: var(--border-focus);
    }
    .balance-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .balance-panel-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .balance-panel-subtitle {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-main);
      margin-top: 2px;
    }

    .provider-switch-pills {
      display: flex;
      align-items: center;
      background: var(--bg-subtle);
      padding: 3px;
      border-radius: 10px;
      gap: 2px;
      border: 1px solid var(--border-subtle);
    }
    .provider-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      border-radius: 7px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .provider-pill:hover {
      color: var(--text-main);
    }
    .provider-pill.active {
      background: var(--bg-card);
      color: var(--text-main);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .provider-pill:active {
      transform: scale(0.97);
    }
    .provider-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }
    .provider-dot.bybit { background: #F59E0B; }
    .provider-dot.bank { background: #38BDF8; }
    .provider-dot.web3 { background: #A855F7; }

    .btn-refresh-balance {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 9px;
      border: 1px solid var(--border-subtle);
      background: var(--bg-card);
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .btn-refresh-balance:hover {
      background: var(--bg-hover);
      color: var(--text-main);
      border-color: var(--border-focus);
    }
    .btn-refresh-balance:active {
      transform: scale(0.97);
    }

    .balance-amount-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-top: 10px;
      margin-bottom: 4px;
      flex-wrap: wrap;
    }
    .balance-hero-val {
      font-family: var(--font-mono);
      font-size: 34px;
      font-weight: 900;
      color: var(--text-main);
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .balance-currency-pill {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 800;
      color: var(--brand-orange);
    }
    .balance-equiv-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .balance-desc {
      font-size: 12px;
      line-height: 1.45;
      color: var(--text-muted);
      margin: 0 0 12px 0;
    }

    .balance-assets-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px 0;
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
    }
    .asset-coin-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 11px;
    }
    .asset-coin-bullet {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .asset-coin-name {
      font-weight: 700;
      color: var(--text-main);
    }
    .asset-coin-usd {
      color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .asset-add-chip {
      display: flex;
      align-items: center;
      gap: 4px;
      background: transparent;
      border: 1px dashed var(--border-focus);
      color: var(--text-muted);
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }
    .asset-add-chip:hover {
      background: var(--bg-subtle);
      color: var(--brand-orange);
      border-color: var(--brand-orange);
    }

    .balance-footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      font-size: 11px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .balance-sync-status {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text-muted);
      font-weight: 500;
    }
    .pulse-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
    }
    .balance-settings-link {
      background: none;
      border: none;
      padding: 0;
      color: var(--brand-orange);
      font-weight: 700;
      font-size: 11px;
      cursor: pointer;
    }
    .balance-settings-link:hover {
      text-decoration: underline;
    }

/* Cards Layout */
    .cards-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 20px;
    }

    .stat-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 18px 20px;
      box-shadow: var(--shadow-card);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .stat-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .stat-label {
      font-size: 11.5px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .stat-icon-wrap {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--bg-subtle);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .stat-value {
      font-family: var(--font-mono);
      font-size: 27px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text-main);
      line-height: 1.1;
      margin-bottom: 8px;
    }
    .stat-footer {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      color: var(--text-muted);
    }

    .pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: var(--radius-pill);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
    }
    .pill-badge.positive {
      background: var(--success-bg);
      color: var(--success);
      border: 1px solid var(--success-border);
    }
    .pill-badge.warning {
      background: var(--warning-bg);
      color: var(--warning);
      border: 1px solid var(--warning-border);
    }
    .pill-badge.danger {
      background: var(--danger-bg);
      color: var(--danger);
      border: 1px solid var(--danger-border);
    }
    .pill-badge.neutral {
      background: var(--bg-subtle);
      color: var(--text-muted);
      border: 1px solid var(--border-subtle);
    }

    /* Mid Row 3-Analytics Cards */
    .mid-analytics-grid {
      display: grid;
      grid-template-columns: 1fr 1.05fr 0.95fr;
      gap: 16px;
      margin-bottom: 20px;
    }

    .chart-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 18px 20px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .chart-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .chart-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--text-main);
    }
    .chart-subtitle {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 1px;
    }

    /* Category Donut Card Controls */
    .donut-mode-toggle {
      display: flex;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-pill);
      padding: 2px;
      gap: 2px;
    }
    .donut-toggle-btn {
      border: none;
      background: transparent;
      padding: 3px 8px;
      border-radius: var(--radius-pill);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      cursor: pointer;
    }
    .donut-toggle-btn.active {
      background: var(--bg-card);
      color: var(--text-main);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .donut-chart-container {
      display: flex;
      align-items: center;
      gap: 14px;
      height: 220px;
    }
    .donut-canvas-wrap {
      position: relative;
      width: 170px;
      height: 170px;
      flex-shrink: 0;
    }
    .donut-center-info {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      text-align: center;
      padding: 10px;
    }
    .donut-center-amount {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.1;
      transition: color 0.15s ease, transform 0.15s ease;
    }
    .donut-center-label {
      font-size: 9.5px;
      font-weight: 700;
      color: var(--text-muted);
      margin-top: 2px;
      max-width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color 0.15s ease;
    }

    .donut-legend-list {
      flex: 1;
      overflow-y: auto;
      max-height: 200px;
      padding-right: 4px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      scrollbar-width: thin;
    }
    .donut-legend-list::-webkit-scrollbar {
      width: 4px;
    }
    .donut-legend-list::-webkit-scrollbar-thumb {
      background: var(--border-focus);
      border-radius: 4px;
    }
    .category-legend-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 8px;
      border-radius: var(--radius-sm);
      font-size: 11.5px;
      cursor: pointer;
      transition: background 0.12s ease, transform 0.12s ease;
      border: 1px solid transparent;
    }
    .category-legend-item:hover, .category-legend-item.highlighted {
      background: var(--bg-subtle);
      border-color: var(--border-subtle);
      transform: translateX(2px);
    }
    .category-legend-left {
      display: flex;
      align-items: center;
      gap: 7px;
      overflow: hidden;
    }
    .category-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .category-legend-name {
      font-weight: 700;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .category-legend-right {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      flex-shrink: 0;
    }
    .category-legend-amount {
      font-weight: 700;
      color: var(--text-main);
    }
    .category-legend-pct {
      color: var(--text-muted);
      font-size: 10px;
      background: var(--bg-subtle);
      padding: 1px 5px;
      border-radius: 4px;
    }

    /* Redesigned Monthly Budget Card */
    .budget-gauge-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding-top: 4px;
      margin-bottom: 8px;
    }
    .budget-arch-svg {
      width: 230px;
      height: 120px;
      overflow: visible;
    }
    .budget-gauge-center {
      margin-top: -56px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 2;
    }
    .budget-gauge-amount {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 800;
      color: var(--text-main);
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .budget-gauge-sub {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .budget-tracks-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
      border-top: 1px solid var(--border-subtle);
      padding-top: 12px;
    }
    .budget-track-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .budget-track-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
    }
    .budget-track-name {
      font-weight: 700;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .budget-track-spent {
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--text-muted);
    }
    .progress-track {
      height: 5px;
      background: var(--bg-subtle);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }
    .progress-fill {
      width: 100%;
      height: 100%;
      border-radius: 999px;
      transform-origin: left center;
      transform: scaleX(0);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
      will-change: transform;
    }

    /* Tab 1 Layout (Table + Right Fixed Inspector Panel) */
    .overview-split-layout {
      display: grid;
      grid-template-columns: 1fr 390px;
      gap: 16px;
      align-items: start;
    }

    .table-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
      overflow: hidden;
    }
    .table-card-header {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .table-search-box {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 6px 12px;
      width: 240px;
    }
    .table-search-box input {
      border: none;
      background: transparent;
      outline: none;
      font-size: 12px;
      color: var(--text-main);
      width: 100%;
    }

    table.data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
      text-align: left;
    }
    table.data-table th {
      background: var(--bg-subtle);
      color: var(--text-muted);
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 10px 18px;
      border-bottom: 1px solid var(--border-subtle);
    }
    table.data-table td {
      padding: 12px 18px;
      border-bottom: 1px solid var(--border-subtle);
      color: var(--text-main);
      vertical-align: middle;
    }
    table.data-table tbody tr {
      cursor: pointer;
      transition: background 0.12s ease;
    }
    table.data-table tbody tr:hover {
      background: var(--bg-hover);
    }
    table.data-table tbody tr.active-row {
      background: var(--bg-hover);
      box-shadow: inset 2px 0 0 var(--brand-orange);
      position: relative;
    }

    .merchant-cell {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .merchant-avatar {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      color: var(--brand-orange);
      font-weight: 800;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .merchant-name {
      font-weight: 700;
      color: var(--text-main);
      line-height: 1.2;
    }
    .merchant-meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .amount-cell {
      font-family: var(--font-mono);
      font-weight: 700;
      text-align: right;
    }
    .amount-sub {
      font-size: 10.5px;
      color: var(--text-light);
      font-weight: 500;
    }

    /* Inspector Panel (Tab 1 Right Column) */
    .inspector-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .inspector-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-subtle);
      padding-bottom: 14px;
    }
    .inspector-title {
      font-size: 17px;
      font-weight: 800;
      color: var(--text-main);
    }
    .inspector-meta {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .currency-dual-box {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .currency-col {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .currency-col-label {
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .currency-col-val {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 800;
      color: var(--text-main);
    }

    /* Digital Receipt Ticket */
    .receipt-ticket {
      background: var(--bg-hover);
      border: 1px dashed var(--border-focus);
      border-radius: var(--radius-sm);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .receipt-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-main);
    }
    .receipt-items-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 11.5px;
    }
    .receipt-item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0;
      border-bottom: 1px dotted var(--border-subtle);
    }
    .receipt-item-name {
      font-weight: 600;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .receipt-item-price {
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .receipt-item-del {
      color: var(--text-light);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
    }
    .receipt-item-del:hover {
      color: var(--danger);
    }

    .receipt-coverage {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .receipt-coverage-header {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .receipt-actions-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 6px;
    }
    .btn-brand {
      background: var(--brand-orange);
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-brand:hover {
      background: var(--brand-orange-hover);
    }
    .btn-secondary {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      color: var(--text-main);
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-secondary:hover {
      background: var(--bg-hover);
      border-color: var(--border-focus);
    }

    .notes-box textarea {
      width: 100%;
      height: 60px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 8px;
      font-family: var(--font-sans);
      font-size: 11.5px;
      color: var(--text-main);
      outline: none;
      resize: none;
    }
    .notes-box textarea:focus {
      border-color: var(--brand-orange);
    }

    .timeline-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      padding-left: 18px;
    }
    .timeline-list::before {
      content: '';
      position: absolute;
      left: 6px;
      top: 4px;
      bottom: 4px;
      width: 2px;
      background: var(--border-subtle);
    }
    .timeline-step {
      position: relative;
    }
    .timeline-dot {
      position: absolute;
      left: -18px;
      top: 3px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 2px solid var(--brand-orange);
    }
    .timeline-dot.done { border-color: var(--success); }
    .timeline-dot.info { border-color: #3B82F6; }
    .timeline-title {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-main);
    }
    .timeline-meta {
      font-size: 10.5px;
      color: var(--text-muted);
      margin-top: 1px;
    }

    /* Global Slide-Out Drawer (For Tab 2 & Mobile) */
    .drawer-backdrop {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s ease;
    }
    .drawer-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }
    .drawer-panel {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: 520px;
      background: var(--bg-card);
      border-left: 1px solid var(--border-subtle);
      box-shadow: -12px 0 40px rgba(0,0,0,0.25);
      transform: translateX(100%);
      transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .drawer-backdrop.show .drawer-panel {
      transform: translateX(0);
    }
    .drawer-header {
      padding: 18px 24px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .drawer-body {
      padding: 20px 24px;
      overflow-y: auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* Budgets Tab Grid */
    .budgets-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }
    .budget-item-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 18px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .budget-item-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .budget-item-name {
      font-size: 13.5px;
      font-weight: 800;
      color: var(--text-main);
    }
    .budget-item-vals {
      display: flex;
      justify-content: space-between;
      font-size: 11.5px;
    }

    /* Modals & Dialogs */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 110;
      background: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .modal-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }
    .modal-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-hover);
      max-width: 460px;
      width: 100%;
      padding: 24px;
      transform: translateY(12px) scale(0.98);
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .modal-backdrop.show .modal-card {
      transform: translateY(0) scale(1);
    }
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }
    .modal-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text-main);
    }

    /* Auth Modal Tabs & OAuth Buttons */
    .auth-tabs {
      display: flex;
      gap: 6px;
      background: var(--bg-subtle);
      padding: 3px;
      border-radius: var(--radius-pill);
      margin-bottom: 18px;
    }
    .auth-tab-btn {
      flex: 1;
      padding: 7px;
      border: none;
      background: transparent;
      border-radius: var(--radius-pill);
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      cursor: pointer;
    }
    .auth-tab-btn.active {
      background: var(--bg-card);
      color: var(--text-main);
      box-shadow: var(--shadow-sm);
    }

    .oauth-btn-group {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 18px;
    }
    .oauth-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
      background: var(--bg-subtle);
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main);
      cursor: pointer;
      width: 100%;
    }
    .oauth-btn:hover {
      background: var(--bg-hover);
      border-color: var(--border-focus);
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 14px 0;
      font-size: 11px;
      color: var(--text-light);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .auth-divider::before, .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border-subtle);
    }

    /* Toast Notification */
    .toast-box {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 200;
      background: #0F172A;
      color: white;
      padding: 12px 18px;
      border-radius: var(--radius-md);
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      font-size: 12.5px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .toast-box.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
      .mid-analytics-grid { grid-template-columns: 1fr; }
      .overview-split-layout { grid-template-columns: 1fr; }
    }
  
    /* =========================================
       ACCESSIBILITY, FOCUS & HIGH-CRAFT MOTION
       ========================================= */
    :focus-visible {
      outline: 2px solid var(--brand-orange) !important;
      outline-offset: 2px !important;
    }
    button:focus:not(:focus-visible), 
    select:focus:not(:focus-visible), 
    input:focus:not(:focus-visible) {
      outline: none;
    }

    /* Tabular numbers for financial accuracy & zero layout jitter */
    .stat-value, 
    .balance-hero-val, 
    .card-pan-number, 
    .budget-gauge-amount, 
    .merchant-meta, 
    .mono, 
    table.data-table td:last-child,
    .budget-gauge-sub {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
    }

    /* GPU Hardware-accelerated Motion primitives */
    .drawer-panel {
      transform: translate3d(100%, 0, 0);
      will-change: transform;
    }
    .drawer-backdrop.show .drawer-panel {
      transform: translate3d(0, 0, 0);
    }
    .modal-card {
      transform: translate3d(0, 8px, 0) scale(0.97);
      will-change: transform, opacity;
    }
    .modal-backdrop.show .modal-card {
      transform: translate3d(0, 0, 0) scale(1);
    }

    /* Respect user prefers-reduced-motion preference */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .virtual-card:hover {
        transform: none !important;
      }
    }

  
    /* SVG sizing & utility rules */
    svg.w-3, .w-3 { width: 12px; height: 12px; }
    svg.w-3\.5, .w-3\.5 { width: 14px; height: 14px; }
    svg.w-4, .w-4 { width: 16px; height: 16px; }
    svg.w-5, .w-5 { width: 20px; height: 20px; }
    svg.w-6, .w-6 { width: 24px; height: 24px; }
    svg.h-3, .h-3 { height: 12px; }
    svg.h-3\.5, .h-3\.5 { height: 14px; }
    svg.h-4, .h-4 { height: 16px; }
    svg.h-5, .h-5 { height: 20px; }
    svg.h-6, .h-6 { height: 24px; }
    .hidden { display: none !important; }

    /* Tactile physics per Emil Kowalski */
    button:active, .nav-pill-btn:active, .interactive-row:active, .asset-coin-chip:active, .provider-pill:active {
      transform: scale(0.97) !important;
    }
    .pro-pill-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: linear-gradient(135deg, rgba(255, 87, 34, 0.12) 0%, rgba(245, 158, 11, 0.12) 100%);
      border: 1px solid rgba(255, 87, 34, 0.35);
      border-radius: var(--radius-pill);
      color: #FF5722;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(255, 87, 34, 0.1);
      transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, border-color 0.15s ease;
    }
    html.dark .pro-pill-btn {
      background: linear-gradient(135deg, rgba(255, 87, 34, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
      border-color: rgba(255, 87, 34, 0.45);
      color: #FF8A65;
    }
    .pro-pill-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
      border-color: #FF5722;
    }
    /* Card themes for Binance and RedotPay */
    .virtual-card.theme-binance {
      background: linear-gradient(135deg, #181A20 0%, #0B0E11 55%, #2D2405 100%);
      border-color: rgba(240, 185, 11, 0.35);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    }
    .virtual-card.theme-redotpay {
      background: linear-gradient(135deg, #1F172E 0%, #100C1B 55%, #3B122D 100%);
      border-color: rgba(235, 47, 150, 0.35);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    }
    .provider-dot.binance { background: #F0B90B; }
    .provider-dot.redotpay { background: #EB2F96; }
    

    /* Header Nav Pill Optimization */
    nav.nav-pill-container {
      flex-shrink: 0;
      gap: 3px;
      padding: 3px;
    }
    .nav-pill-btn {
      padding: 6px 12px;
      font-size: 12px;
      gap: 6px;
    }

    /* Unified ISO 7810 Physical Virtual Card */
    .virtual-card-wrap {
      width: 100%;
      max-width: 370px;
      perspective: 1000px;
    }
    .virtual-card {
      width: 100%;
      aspect-ratio: 1.586; /* Standard ISO/IEC 7810 ID-1 card format */
      border-radius: 16px;
      padding: 22px 24px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
      cursor: pointer;
    }
    .virtual-card:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 20px 42px -6px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    }
    .virtual-card.theme-bybit {
      background: linear-gradient(135deg, #131722 0%, #0B0E14 55%, #1C2230 100%);
      border-color: rgba(255, 87, 34, 0.35);
    }
    .virtual-card.theme-binance {
      background: linear-gradient(135deg, #1E2329 0%, #12161A 55%, #2B240A 100%);
      border-color: rgba(240, 185, 11, 0.4);
    }
    .virtual-card.theme-redotpay {
      background: linear-gradient(135deg, #20142C 0%, #110A1A 55%, #38122D 100%);
      border-color: rgba(235, 47, 150, 0.4);
    }
    .virtual-card.theme-bank {
      background: linear-gradient(135deg, #1C2028 0%, #11141A 55%, #1A2433 100%);
      border-color: rgba(56, 189, 248, 0.35);
    }
    .virtual-card.theme-web3 {
      background: linear-gradient(135deg, #0D1F1B 0%, #071310 55%, #13332C 100%);
      border-color: rgba(16, 185, 129, 0.4);
    }

    .card-row-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 24px;
    }
    .card-brand-title {
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.12em;
      color: #FFFFFF;
      text-transform: uppercase;
      line-height: 1;
    }
    .card-brand-divider {
      width: 1px;
      height: 12px;
      background: rgba(255, 255, 255, 0.3);
    }
    .card-brand-sub {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #94A3B8;
      text-transform: uppercase;
      line-height: 1;
    }
    .card-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.35);
      color: #34D399;
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .card-row-chip {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 4px 0 2px 0;
      height: 32px;
    }
    .emv-chip {
      width: 38px;
      height: 28px;
      border-radius: 6px;
      background: linear-gradient(135deg, #FCD34D 0%, #D97706 60%, #B45309 100%);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
    }
    .card-row-number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 28px;
    }
    .card-pan-number {
      font-family: var(--font-mono);
      font-size: 16.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #FFFFFF;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
      font-variant-numeric: tabular-nums;
    }
    .card-row-bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      height: 30px;
    }
    .card-meta-label {
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #64748B;
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .card-holder-name, .card-expiry-val {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: #F8FAFC;
      letter-spacing: 0.05em;
    }
    .card-network-logo {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 50px;
      height: 26px;
    }

    /* Rules Studio Styles */
    .rules-studio-grid {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 20px;
      align-items: start;
    }
    @media (max-width: 1024px) {
      .rules-studio-grid { grid-template-columns: 1fr; }
    }
    .rule-builder-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
      padding: 24px;
    }
    .rule-preset-card {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease;
    }
    .rule-preset-card:hover {
      border-color: var(--brand-orange);
      transform: translateY(-1px);
    }

    /* Budgets & FX Combined Styles */
    .budgets-fx-grid {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 20px;
      align-items: start;
    }
    @media (max-width: 1024px) {
      .budgets-fx-grid { grid-template-columns: 1fr; }
    }
    .fx-intel-box {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .fx-currency-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border-radius: 10px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
    }
    

    /* ================= AI BUDGET PLANNING COPILOT ================= */
    .ai-budget-copilot-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 22px;
      margin-top: 24px;
      box-shadow: var(--shadow-card);
    }
    .ai-copilot-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .ai-copilot-icon-badge {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
      flex-shrink: 0;
    }
    .ai-mode-toggle-pill {
      display: inline-flex;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-pill);
      padding: 3px;
      gap: 2px;
    }
    .ai-mode-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: var(--radius-pill);
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-muted);
      border: none;
      background: transparent;
      cursor: pointer;
      transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .ai-mode-btn.active {
      background: var(--brand-pill-active);
      color: var(--brand-pill-active-text);
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }
    .ai-insights-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }
    .ai-insight-card {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .ai-insight-card:hover {
      border-color: rgba(139, 92, 246, 0.4);
      transform: translateY(-2px);
      box-shadow: 0 8px 22px -4px rgba(0,0,0,0.25);
    }
    .ai-insight-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .ai-insight-title {
      font-weight: 800;
      font-size: 13px;
      color: var(--text-main);
    }
    .ai-insight-icon {
      font-size: 15px;
    }
    .ai-insight-text {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.48;
      margin-bottom: 12px;
      flex-grow: 1;
    }
    .ai-insight-recom {
      background: rgba(139, 92, 246, 0.08);
      border: 1px solid rgba(139, 92, 246, 0.2);
      border-radius: 8px;
      padding: 9px 12px;
      font-size: 11.5px;
      color: var(--text-main);
      line-height: 1.4;
      margin-bottom: 14px;
    }
    .ai-insight-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .ai-card-lock-overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(5px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: opacity 0.25s ease;
      z-index: 2;
    }
    html:not(.dark) .ai-card-lock-overlay {
      background: rgba(255, 255, 255, 0.75);
    }
    .ai-lock-content {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 16px;
    }
    .ai-copilot-bottom-banner {
      background: linear-gradient(135deg, rgba(255, 87, 34, 0.09) 0%, rgba(245, 158, 11, 0.09) 100%);
      border: 1px solid rgba(255, 87, 34, 0.28);
      border-radius: 12px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    

    /* ================= ENHANCED BUDGETS & FX COCKPIT ================= */
    .budgets-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
      flex-wrap: wrap;
      gap: 14px;
    }
    .budgets-pacing-banner {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 14px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-pill);
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 6px;
    }
    .pacing-dot-pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10B981;
    }

    /* Financial Cockpit Grid */
    .cockpit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }
    .cockpit-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 18px 20px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .cockpit-card:hover {
      border-color: var(--border-focus);
      box-shadow: var(--shadow-hover);
    }
    .cockpit-card-title {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: 0.02em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .cockpit-card-val {
      font-family: var(--font-mono);
      font-size: 26px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
    }
    .cockpit-card-sub {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 8px;
      line-height: 1.45;
    }

    /* Pacing Meter Bar (GPU Accelerated) */
    .pacing-track {
      width: 100%;
      height: 6px;
      background: var(--bg-subtle);
      border-radius: 3px;
      overflow: hidden;
      margin-top: 10px;
      display: flex;
    }
    .pacing-fill-spent {
      background: #10B981;
      height: 100%;
      width: 100%;
      transform-origin: left;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .pacing-fill-remaining {
      background: var(--border-subtle);
      height: 100%;
      flex-grow: 1;
    }

    /* Envelopes Control Bar */
    .envelopes-control-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      flex-wrap: wrap;
      gap: 12px;
    }
    .envelope-filter-group {
      display: inline-flex;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-pill);
      padding: 3px;
      gap: 2px;
    }
    .envelope-filter-btn {
      padding: 5px 12px;
      border-radius: var(--radius-pill);
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text-muted);
      border: none;
      background: transparent;
      cursor: pointer;
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .envelope-filter-btn.active {
      background: var(--brand-pill-active);
      color: var(--brand-pill-active-text);
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }
    .envelope-search-input {
      padding: 6px 12px;
      font-size: 12px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      color: var(--text-main);
      outline: none;
      width: 180px;
      transition: border-color 0.15s ease;
    }
    .envelope-search-input:focus {
      border-color: var(--brand-orange);
    }

    /* Enhanced Envelope Cards Grid */
    .enhanced-envelopes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 16px;
      margin-bottom: 28px;
    }
    .envelope-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 16px 18px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    .envelope-card:hover {
      border-color: var(--border-focus);
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
    }
    .envelope-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .envelope-icon-wrap {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      color: var(--text-main);
      flex-shrink: 0;
    }
    .envelope-name {
      font-weight: 800;
      font-size: 13.5px;
      color: var(--text-main);
    }
    .envelope-meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 1px;
    }
    .envelope-status-badge {
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: var(--radius-pill);
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
    }
    .envelope-status-badge.ok {
      background: rgba(16, 185, 129, 0.12);
      color: #10B981;
      border: 1px solid rgba(16, 185, 129, 0.25);
    }
    .envelope-status-badge.warning {
      background: rgba(245, 158, 11, 0.12);
      color: #F59E0B;
      border: 1px solid rgba(245, 158, 11, 0.25);
    }
    .envelope-status-badge.danger {
      background: rgba(239, 68, 68, 0.12);
      color: #EF4444;
      border: 1px solid rgba(239, 68, 68, 0.25);
    }

    /* Envelope Progress Bar (GPU Accelerated) */
    .envelope-progress-wrap {
      margin: 10px 0 12px 0;
    }
    .envelope-progress-track {
      width: 100%;
      height: 8px;
      background: var(--bg-subtle);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    .envelope-progress-fill {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      transform-origin: left;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .envelope-amounts-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 6px;
    }
    .envelope-amt-val {
      font-family: var(--font-mono);
      font-weight: 800;
      color: var(--text-main);
    }

    /* Envelope Card Actions */
    .envelope-card-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid var(--border-subtle);
      margin-top: 6px;
      gap: 6px;
    }
    .envelope-stepper {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: var(--bg-subtle);
    }
    .envelope-step-btn {
      padding: 4px 8px;
      background: transparent;
      border: none;
      color: var(--text-main);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .envelope-step-btn:hover {
      background: var(--border-subtle);
    }

    /* ================= MULTI-CURRENCY & FX INTELLIGENCE ================= */
    .fx-showcase-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 20px 22px;
      box-shadow: var(--shadow-card);
      margin-bottom: 28px;
    }
    .fx-currency-stacked-bar {
      width: 100%;
      height: 12px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      margin: 14px 0 16px 0;
      background: var(--bg-subtle);
    }
    .fx-bar-seg {
      height: 100%;
      transition: opacity 0.2s ease;
      cursor: pointer;
    }
    .fx-bar-seg:hover {
      opacity: 0.85;
    }

    /* FX Simulator Widget */
    .fx-sim-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-subtle);
    }
    .fx-sim-box {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 14px;
    }