/* ================================================================
       ROOT TOKENS — iOS-inspired dark palette
       Think of these like the brand colour swatches in a design tool.
    ================================================================ */
    :root {
      /* Backgrounds */
      --bg:         #08080c;
      --bg2:        #0d0d13;
      --surface:    #101016;
      --surface2:   #16161e;
      --surface3:   #1c1c26;

      /* Borders — one value, use opacity for hierarchy */
      --border:     rgba(255,255,255,.06);
      --border2:    rgba(255,255,255,.10);

      /* Brand — keep same tones */
      --green:      #2fd158;
      --green-glow: rgba(47,209,88,.20);
      --green-soft: rgba(47,209,88,.10);
      --red:        #ff453a;
      --red-soft:   rgba(255,69,58,.10);
      --red-glow:   rgba(255,69,58,.18);
      --gold:       #ff9f0a;
      --gold-soft:  rgba(255,159,10,.10);
      --blue:       #0a84ff;
      --blue-soft:  rgba(10,132,255,.10);
      --purple:     #bf5af2;
      --purple-soft:rgba(191,90,242,.10);

      /* Text */
      --text:       #f0f0f5;
      --text2:      #a0a0ab;
      --text3:      #55555e;

      /* Typography — DM Sans for display, system for body */
      --font-display: 'DM Sans', -apple-system, system-ui, sans-serif;
      --font: -apple-system, 'SF Pro Text', system-ui, sans-serif;

      /* Geometry — tighter, more intentional scale */
      --r:     14px;
      --r-sm:  10px;
      --r-lg:  18px;
      --r-xl:  24px;
      --r-pill:100px;
      --nav-h: 84px;
    }

    /* ══════════════════════════════════════════════════
       LIGHT MODE — editorial white, crisp fintech
    ══════════════════════════════════════════════════ */
    [data-theme="light"] {
      --bg:         #f7f7f9;
      --bg2:        #ffffff;
      --surface:    #ffffff;
      --surface2:   #f0f0f5;
      --surface3:   #e4e4eb;
      --glass:      rgba(255,255,255,.72);
      --glass-b:    rgba(255,255,255,.9);
      --border:     rgba(0,0,0,.07);
      --border2:    rgba(0,0,0,.11);
      --text:       #0a0a0f;
      --text2:      #3c3c43;
      --text3:      #8a8a8e;
      --green-glow: rgba(48,209,88,.14);
      --green-soft: rgba(48,209,88,.10);
      --red-soft:   rgba(255,69,58,.09);
      --red-glow:   rgba(255,69,58,.14);
      --gold-soft:  rgba(255,149,0,.10);
      --blue-soft:  rgba(10,132,255,.09);
      --purple-soft:rgba(191,90,242,.09);
    }
    /* Base */
    [data-theme="light"] body,
    [data-theme="light"] .view { background: var(--bg); }

    /* Topbar — frosted white */
    [data-theme="light"] .topbar {
      background: rgba(247,247,249,.9);
      border-bottom-color: rgba(0,0,0,.06);
    }

    /* Cards — clean white with precise shadow, no gimmicky borders */
    [data-theme="light"] .mkt-card,
    [data-theme="light"] .trade-card,
    [data-theme="light"] .stat-tile,
    [data-theme="light"] .lb-row,
    [data-theme="light"] .hist-card,
    [data-theme="light"] .ref-stat,
    [data-theme="light"] .sub-item,
    [data-theme="light"] .menu-row,
    [data-theme="light"] .tier-card,
    [data-theme="light"] .badge-wrap,
    [data-theme="light"] .wd-hero,
    [data-theme="light"] .balance-hero,
    [data-theme="light"] .profile-hero,
    [data-theme="light"] .ref-hero,
    [data-theme="light"] .lang-row {
      background: #fff;
      border-color: rgba(0,0,0,.07);
      box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    [data-theme="light"] .balance-hero { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
    [data-theme="light"] .menu-row:active { background: #f5f5f7; }

    /* Balance hero — gradient accent top edge */
    [data-theme="light"] .balance-hero {
      background: #fff;
      border: 1px solid rgba(0,0,0,.07);
      box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
    }
    [data-theme="light"] .bh-amount { color: #0a0a0f; }

    /* Inputs */
    [data-theme="light"] .field-input,
    [data-theme="light"] .wf-input,
    [data-theme="light"] .stake-input {
      background: #f7f7f9;
      border-color: rgba(0,0,0,.12);
      color: #0a0a0f;
    }

    /* Sheet */
    [data-theme="light"] .sheet {
      background: #f7f7f9;
      border-top-color: rgba(0,0,0,.1);
    }
    [data-theme="light"] .overlay { background: rgba(0,0,0,.4); }

    /* Auth / Age gate */
    [data-theme="light"] #authWrap,
    [data-theme="light"] #ageGate { background: #f7f7f9; }

    /* Seg control */
    [data-theme="light"] .seg-control,
    [data-theme="light"] .hist-segs { background: #e8e8ed; }
    [data-theme="light"] .seg-btn.on { background: #fff; color: #0a0a0f; }
    [data-theme="light"] .hist-seg.on { background: var(--green-soft); }

    /* Dock — white pill */
    [data-theme="light"] .dock-glass-layer1 {
      backdrop-filter: blur(24px) brightness(1.1) saturate(1.2);
      -webkit-backdrop-filter: blur(24px) brightness(1.1) saturate(1.2);
    }
    [data-theme="light"] .dock-glass-layer2 {
      background: linear-gradient(168deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 100%);
    }
    [data-theme="light"] .dock-glass-layer4 {
      box-shadow:
        0 0 0 0.5px rgba(0,0,0,.1),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -0.5px 0 rgba(0,0,0,.06);
    }
    [data-theme="light"] .dock-glass-layer5 {
      box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.1), 0 12px 32px rgba(0,0,0,.06);
    }
    [data-theme="light"] #bottomNav { background: linear-gradient(to top, rgba(247,247,249,.6) 0%, transparent 100%); }
    [data-theme="light"] #bottomNav .nav-btn { color: rgba(0,0,0,.4); }
    [data-theme="light"] #bottomNav .nav-btn svg { stroke: rgba(0,0,0,.38); }
    [data-theme="light"] #bottomNav .nav-btn.on { color: var(--green); }
    [data-theme="light"] #bottomNav .nav-btn.on svg { stroke: var(--green); }

    /* Chat bubble */
    [data-theme="light"] #vChat { background: #fff !important; border-color: rgba(0,0,0,.1); }
    [data-theme="light"] #vChat .topbar { background: rgba(247,247,249,.98) !important; }
    [data-theme="light"] #chatInputBar { background: rgba(247,247,249,.98); border-top-color: rgba(0,0,0,.07); }
    [data-theme="light"] #chatInput { background: #fff; border-color: rgba(0,0,0,.1); color: #0a0a0f; }
    [data-theme="light"] .bot-bubble { background: #f0f0f5; border-color: rgba(0,0,0,.06); color: #0a0a0f; }

    /* Toast */
    [data-theme="light"] #toast.inf { background: rgba(255,255,255,.95); color: #3c3c43; border-color: rgba(0,0,0,.1); }

    /* Profile sections */
    [data-theme="light"] .lang-row { background: #fff; border-color: rgba(0,0,0,.07); }
    [data-theme="light"] .lang-icon { background: #f0f0f5 !important; }
    [data-theme="light"] .tier-card { background: #fff; border-color: rgba(0,0,0,.07); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
    [data-theme="light"] .badge-wrap { background: #fff; border-color: rgba(0,0,0,.07); }
    [data-theme="light"] .ref-hero { background: linear-gradient(145deg,#f0eaf8,#eaf0ff); }
    [data-theme="light"] .mem-note { background: rgba(10,132,255,.06); }
    [data-theme="light"] .wd-note { background: rgba(255,149,0,.07); }
    [data-theme="light"] .bal-pill { border-color: rgba(0,0,0,.1); }
    [data-theme="light"] .profile-orb { display: none; }
    [data-theme="light"] .balance-hero::after { opacity: 0; }
    [data-theme="light"] #vProfile > div:first-child { box-shadow: 0 2px 16px rgba(0,0,0,.06); }
    [data-theme="light"] .prof-name { color: #0a0a0f !important; }
    [data-theme="light"] .av-hint { color: var(--text3); }

    /* ── THEME TOGGLE — premium pill switch ─────────── */
    .theme-toggle {
      position: relative;
      width: 56px; height: 32px;
      flex-shrink: 0;
      cursor: pointer;
    }
    .theme-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .theme-track {
      position: absolute; inset: 0;
      border-radius: 100px;
      background: var(--surface3);
      border: 1px solid var(--border2);
      transition: background .35s ease, box-shadow .35s ease;
      display: flex; align-items: center;
      padding: 3px;
      box-shadow: inset 0 1px 4px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.06);
    }
    .theme-toggle input:checked + .theme-track {
      background: var(--green);
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(48,209,88,.18), inset 0 1px 0 rgba(255,255,255,.2);
    }
    .theme-knob {
      width: 26px; height: 26px;
      border-radius: 50%;
      background: linear-gradient(145deg, #ffffff, #f0f0f0);
      box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.9);
      transition: transform .35s cubic-bezier(0.34,1.56,0.64,1);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; line-height: 1;
      flex-shrink: 0;
      user-select: none;
    }
    .theme-toggle input:checked + .theme-track .theme-knob {
      transform: translateX(24px);
    }

    /* ================================================================
       BASE RESET
    ================================================================ */
    *, *::before, *::after {
      box-sizing: border-box; margin: 0; padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    html, body { height: 100%; overflow: hidden; }
    body {
      font-family: var(--font-display);
      background: var(--bg);
      color: var(--text);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      /* iOS FIX: Prevent the body from accidentally blocking touch events.
         touch-action:manipulation disables double-tap-to-zoom which also
         causes a 300ms tap delay on older iOS Safari versions. */
      touch-action: manipulation;
    }
    /* iOS FIX: All buttons must have cursor:pointer and no default styling
       that could interfere with tap recognition on iPhone */
    button {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
      -moz-osx-font-smoothing: grayscale;
    }
    button { font-family: var(--font); cursor: pointer; border: none; background: none; }
    input, textarea, select { font-family: var(--font); }
    a { text-decoration: none; color: inherit; }
    ::-webkit-scrollbar { width: 0; height: 0; }

    /* ================================================================
       iOS SPRING ANIMATIONS
       cubic-bezier(0.34, 1.56, 0.64, 1) = spring overshoot
    ================================================================ */
    @keyframes springIn {
      from { opacity: 0; transform: scale(.94) translateY(16px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes sheetUp {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: .4; }
    }

    /* ================================================================
       SPINNER
    ================================================================ */
    .spinner {
      width: 24px; height: 24px;
      border: 2.5px solid var(--border2);
      border-top-color: var(--green);
      border-radius: 50%;
      animation: spin .65s linear infinite;
      margin: 48px auto;
    }

    /* ================================================================
       AGE GATE — fullscreen, shown first before anything
       Like iOS "Are you old enough?" with elegant blur background
    ================================================================ */
    #ageGate {
      position: fixed; inset: 0; z-index: 10000;
      background: var(--bg);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 40px 32px;
      /* Subtle radial glow in the center */
      background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(48,209,88,.06) 0%, transparent 60%);
      /* iOS FIX: when display:none is set, also kill pointer events so the
         z-index:10000 layer can NEVER eat touches even on older Safari */
      -webkit-touch-callout: none;
    }
    /* When gate is hidden (display:none set by JS), guarantee no touch interception */
    #ageGate[style*="display: none"],
    #ageGate[style*="display:none"] {
      pointer-events: none !important;
      visibility: hidden !important;
    }
    .age-gate-inner {
      text-align: center;
      animation: springIn .6s cubic-bezier(0.34,1.56,0.64,1) both;
      max-width: 340px; width: 100%;
    }
    .age-logo {
      font-size: 13px; font-weight: 700;
      color: var(--text3);
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 48px;
    }
    .age-icon {
      font-size: 64px; line-height: 1;
      margin-bottom: 24px;
      filter: drop-shadow(0 0 24px rgba(48,209,88,.3));
    }
    .age-title {
      font-size: 28px; font-weight: 800;
      color: var(--text);
      letter-spacing: -.5px;
      margin-bottom: 10px;
    }
    .age-sub {
      font-size: 15px; color: var(--text2);
      line-height: 1.6; margin-bottom: 40px;
    }
    .age-btn {
      width: 100%; padding: 17px;
      background: var(--green); color: #000;
      border-radius: var(--r-pill);
      font-size: 17px; font-weight: 700;
      font-family: var(--font-display);
      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s;
      margin-bottom: 12px;
      box-shadow: 0 6px 24px rgba(47,209,88,.3);
    }
    .age-btn:active { transform: scale(.96); box-shadow: 0 3px 12px rgba(47,209,88,.2); }
    .age-decline {
      width: 100%; padding: 17px;
      background: transparent;
      border: 1px solid var(--border2);
      color: var(--text2);
      border-radius: var(--r-pill);
      font-size: 17px; font-weight: 600;
      transition: transform .15s, background .15s;
    }
    .age-decline:active { transform: scale(.97); background: var(--surface2); }
    .age-note {
      margin-top: 24px;
      font-size: 12px; color: var(--text3);
      line-height: 1.6;
    }
    .age-blocked {
      text-align: center;
      animation: springIn .5s ease both;
    }
    .age-blocked-icon { font-size: 56px; margin-bottom: 20px; }
    .age-blocked-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
    .age-blocked-sub { font-size: 14px; color: var(--text2); line-height: 1.6; }

    /* ================================================================
       LANGUAGE SWITCHER PILL — shown inside the app
    ================================================================ */
    .lang-pill {
      display: inline-flex;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      padding: 3px;
      gap: 2px;
    }
    .lang-btn {
      padding: 6px 12px;
      border-radius: var(--r-pill);
      font-size: 11px; font-weight: 700;
      color: var(--text3);
      letter-spacing: .5px;
      text-transform: uppercase;
      transition: all .2s cubic-bezier(0.34,1.56,0.64,1);
    }
    .lang-btn.active {
      background: var(--surface3);
      color: var(--text);
      box-shadow: 0 1px 4px rgba(0,0,0,.35);
    }

    /* ================================================================
       TOAST
    ================================================================ */
    #toast {
      position: fixed;
      bottom: calc(var(--nav-h) + 20px);
      left: 50%; transform: translateX(-50%) translateY(10px);
      padding: 12px 20px;
      border-radius: 100px;
      font-size: 14px; font-weight: 600;
      display: none; z-index: 9000;
      white-space: nowrap; max-width: 90vw;
      overflow: hidden; text-overflow: ellipsis;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid transparent;
      transition: transform .3s, opacity .3s;
      box-shadow: 0 8px 32px rgba(0,0,0,.5);
    }
    #toast.ok  { background: rgba(48,209,88,.15);  border-color: rgba(48,209,88,.3);  color: var(--green); }
    #toast.bad { background: rgba(255,69,58,.15);  border-color: rgba(255,69,58,.3);  color: var(--red); }
    #toast.inf { background: rgba(30,30,40,.9);    border-color: var(--border2);       color: var(--text2); }

    /* ================================================================
       AUTH SCREEN
    ================================================================ */
    #authWrap {
      display: none;
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      z-index: 200;
      background: var(--bg);
      background-image: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(48,209,88,.06) 0%, transparent 60%);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .auth-sheet {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      padding: 60px 24px 80px;
    }
    /* Logo mark at top of auth */
    .auth-brand {
      text-align: center;
      margin-bottom: 40px;
      animation: fadeUp .5s ease both;
    }
    .auth-brand-mark {
      display: inline-flex; align-items: center; justify-content: center;
      width: 72px; height: 72px;
      background: linear-gradient(135deg, rgba(48,209,88,.2) 0%, rgba(48,209,88,.05) 100%);
      border: 1px solid rgba(48,209,88,.2);
      border-radius: 22px;
      font-size: 32px;
      margin-bottom: 16px;
      box-shadow: 0 0 40px rgba(48,209,88,.1);
    }
    .auth-brand-name {
      font-size: 22px; font-weight: 800;
      color: var(--text);
      letter-spacing: -.3px;
    }
    .auth-brand-tag { font-size: 14px; color: var(--text3); margin-top: 4px; }

    /* Segmented control: Sign Up / Login */
    .seg-control {
      display: grid; grid-template-columns: 1fr 1fr;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      padding: 4px; gap: 4px;
      margin-bottom: 28px;
      animation: fadeUp .5s .05s ease both;
    }
    .seg-btn {
      padding: 11px;
      border-radius: var(--r-pill);
      font-size: 15px; font-weight: 600;
      color: var(--text3);
      font-family: var(--font-display);
      transition: all .22s cubic-bezier(0.34,1.56,0.64,1);
    }
    .seg-btn.on {
      background: var(--surface3);
      color: var(--text);
      box-shadow: 0 1px 6px rgba(0,0,0,.35);
    }

    /* Field */
    .field { margin-bottom: 14px; animation: fadeUp .4s ease both; }
    .field-label {
      font-size: 12px; font-weight: 600;
      color: var(--text3);
      text-transform: uppercase; letter-spacing: .8px;
      margin-bottom: 7px;
    }
    .field-input {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1.5px solid var(--border2);
      border-radius: 0;
      padding: 12px 4px;
      color: var(--text);
      font-size: 17px;
      font-family: var(--font);
      outline: none;
      transition: border-color .2s;
      -webkit-appearance: none;
    }
    .field-input:focus { border-bottom-color: var(--green); }
    .field-input::placeholder { color: var(--text3); }
    .field-hint { font-size: 12px; color: var(--text3); margin-top: 5px; }

    /* Group selector */
    .group-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .group-opt {
      padding: 13px;
      background: var(--surface2);
      border: 1.5px solid var(--border);
      border-radius: var(--r-pill);
      font-size: 15px; font-weight: 600;
      color: var(--text3);
      transition: all .2s cubic-bezier(0.34,1.56,0.64,1);
      text-align: center;
    }
    .group-opt.selected {
      border-color: var(--green);
      background: var(--green-soft);
      color: var(--green);
      box-shadow: 0 0 0 3px rgba(47,209,88,.1);
    }

    /* Error box */
    .err-box {
      background: var(--red-soft);
      border: 1px solid var(--red-glow);
      color: var(--red);
      border-radius: var(--r-sm);
      padding: 12px 16px;
      font-size: 14px;
      display: none;
      margin-bottom: 16px;
    }

    /* Primary CTA button */
    .btn-cta {
      width: 100%; padding: 16px;
      background: var(--green); color: #000;
      border-radius: var(--r-pill);
      font-size: 16px; font-weight: 700;
      letter-spacing: -.1px;
      font-family: var(--font-display);
      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s;
      margin-top: 6px;
      box-shadow: 0 4px 20px rgba(47,209,88,.28);
    }
    .btn-cta:active { transform: scale(.96); box-shadow: 0 2px 8px rgba(47,209,88,.2); }
    .btn-cta:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

    /* Legal footer */
    .auth-legal {
      text-align: center;
      font-size: 12px; color: var(--text3);
      margin-top: 20px; line-height: 1.7;
    }
    .auth-legal a { color: var(--text3); text-decoration: underline; }

    /* ================================================================
       MULTI-STEP SIGNUP WIZARD — new styles
    ================================================================ */

    /* The 3 progress dots at the top of the signup form */
    .su-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 28px;
    }
    /* Each dot is a small circle */
    .su-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border2);
      transition: background .3s, transform .3s cubic-bezier(0.34,1.56,0.64,1), width .3s;
    }
    /* The active (current) dot turns green and gets a bit bigger */
    .su-dot.active {
      background: var(--green);
      width: 24px;
      border-radius: 4px;
      box-shadow: 0 0 8px rgba(47,209,88,.4);
    }

    /* Each step container */
    .su-step {
      animation: fadeUp .35s ease both;
    }

    /* Big heading on each step (e.g. "👋 What's your name?") */
    .su-step-title {
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
      letter-spacing: -.3px;
    }

    /* Small grey subtitle under the heading */
    .su-step-sub {
      font-size: 14px;
      color: var(--text3);
      margin-bottom: 24px;
    }

    /* The "← Back" button on steps 2 and 3 */
    .su-back-btn {
      background: none;
      border: none;
      color: var(--text3);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      margin-bottom: 20px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color .15s, transform .15s cubic-bezier(0.34,1.56,0.64,1);
    }
    .su-back-btn:hover { color: var(--text); }
    .su-back-btn:active { transform: scale(.9); }

    /* ================================================================
       APP SHELL
    ================================================================ */
    #appShell {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
    }
    #appShell.show { display: block; }

    /* ================================================================
       VIEWS
    ================================================================ */
    /* ── VIEWS ──────────────────────────────────────────────────────── */
    /* All views: fixed position, fills screen minus nav bar */
    .view {
      position: absolute;
      top: 0;
      left: 0; right: 0;
      bottom: var(--nav-h);
      overflow-y: auto;
      overflow-x: hidden;
      display: none;
      background: var(--bg);
      /* NOTE: -webkit-overflow-scrolling:touch removed — causes ghost tap bug on iOS 15+ */
      scroll-behavior: smooth;
    }
    .view.active { display: block; }

    /* ── MARKETS VIEW: flex column so topbar+pills are fixed, only list scrolls ── */
    /* vMarkets uses a special layout:
       - topbar and cat-filter-row are OUTSIDE the scroll — they stay fixed at top
       - only .mkt-list scrolls
       This is the only reliable way to do sticky pills when parent has overflow */
    #vMarkets {
      display: none;
      flex-direction: column;
      /* iOS FIX: overflow:hidden on flex parent creates a stacking context that
         clips touch events for horizontally-scrolling children (cat pills).
         overflow:clip does the visual clipping without blocking touches. */
      overflow: clip;
    }
    #vMarkets.active {
      display: flex;
    }
    /* The scrollable area inside vMarkets — only this part scrolls */
    #vMarketsScroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      /* NOTE: -webkit-overflow-scrolling:touch removed — ghost tap bug iOS 15+ */
      scroll-behavior: smooth;
    }

    /* ================================================================
       TOPBAR — frosted glass header, fully covers the notch/Dynamic Island
    ================================================================ */
    .topbar {
      position: sticky; top: 0; z-index: 10;
      background: rgba(5,5,7,.92);
      backdrop-filter: saturate(180%) blur(24px);
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      border-bottom: 1px solid var(--border);
      /* THE FIX: padding-top pushes logo BELOW the notch.
         env(safe-area-inset-top) = exact notch height on this device.
         iPhone 14 Pro = ~59px, older iPhone = ~20px, Android = 0px.
         We add 12px on top of that (the original padding). */
      padding: 12px 20px;
      padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
      display: flex; align-items: center;
      justify-content: space-between;
      min-height: 54px;
      gap: 12px;
    }
    .topbar-logo {
      font-size: 20px; font-weight: 800;
      color: var(--text);
      font-family: var(--font-display);
      letter-spacing: -.5px;
    }
    .topbar-logo span { color: var(--green); }
    .topbar-title {
      font-size: 17px; font-weight: 700;
      flex: 1; text-align: center;
      letter-spacing: -.2px;
    }
    /* Balance pill — top right */
    .bal-pill {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      padding: 7px 14px;
      font-size: 14px; font-weight: 700;
      font-family: var(--font-display);
      color: var(--text2);
      white-space: nowrap;
      display: flex; align-items: center; gap: 5px;
    }
    /* iOS back chevron button */
    .back-btn {
      width: 32px; height: 32px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: transform .18s cubic-bezier(0.34,1.56,0.64,1), background .15s;
    }
    .back-btn:active { transform: scale(.88); background: var(--surface3); }
    .back-btn svg { width: 13px; height: 13px; color: var(--blue); }

    /* Section label */
    .section-label {
      font-size: 11px; font-weight: 700;
      color: var(--text3);
      text-transform: uppercase; letter-spacing: 1.2px;
      padding: 20px 20px 8px;
    }

    /* ================================================================
       BOTTOM TAB BAR — iOS dock style
    ================================================================ */
    /* ── DOCK ────────────────────────────────────────────────────── */
    /* ── DOCK ──────────────────────────────────────────────────────── */
    #bottomNav {
      position: fixed; bottom: 0; left: 0; right: 0;
      height: var(--nav-h);
      background: linear-gradient(to top, rgba(0,0,0,.22) 0%, transparent 100%);
      z-index: 100;
      display: flex; align-items: flex-start; justify-content: center;
      padding: 8px 20px env(safe-area-inset-bottom, 10px);
      pointer-events: none;
    }
    /* Dark pill — matches the app's dark theme */
    .dock-inner {
      position: relative;
      display: grid; grid-template-columns: repeat(4,1fr);
      align-items: center;
      width: 100%; max-width: 360px;
      border-radius: 28px;
      padding: 5px 6px;
      pointer-events: all;
      background: transparent;
      overflow: hidden;
      isolation: isolate;
    }
    /* Layer 5: outer shadow — lifts pill off content */
    .dock-glass-layer5 {
      position:absolute; inset:0; border-radius:inherit; z-index:0;
      box-shadow:
        0 1px 2px rgba(0,0,0,.5),
        0 4px 16px rgba(0,0,0,.55),
        0 16px 40px rgba(0,0,0,.4);
    }
    /* Layer 1: dark tinted blur — matches dark app bg */
    .dock-glass-layer1 {
      position:absolute; inset:0; border-radius:inherit; z-index:1;
      backdrop-filter: blur(24px) brightness(0.6) saturate(1.8);
      -webkit-backdrop-filter: blur(24px) brightness(0.6) saturate(1.8);
      filter: url(#glass-distortion);
    }
    /* Layer 2: very subtle dark-tinted gradient body */
    .dock-glass-layer2 {
      position:absolute; inset:0; border-radius:inherit; z-index:2;
      background: linear-gradient(168deg,
        rgba(255,255,255,.07) 0%,
        rgba(255,255,255,.02) 40%,
        rgba(0,0,0,.04) 70%,
        rgba(0,0,0,.06) 100%);
    }
    /* Layer 3: micro-grain noise */
    .dock-glass-layer3 {
      position:absolute; inset:0; border-radius:inherit; z-index:3;
      opacity:.025;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size:96px 96px;
    }
    /* Layer 4: rim light — bright top edge, fades around */
    .dock-glass-layer4 {
      position:absolute; inset:0; border-radius:inherit; z-index:4;
      box-shadow:
        0 0 0 0.5px rgba(255,255,255,.12),
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 1px 0 0 rgba(255,255,255,.08),
        inset 0 -0.5px 0 rgba(255,255,255,.05),
        inset -1px 0 0 rgba(255,255,255,.04);
    }
    /* Nav buttons — light text on dark glass */
    #bottomNav .nav-btn {
      position:relative; z-index:10;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:3px; padding:10px 4px;
      color: var(--text3);
      font-size:9px; font-weight:700; letter-spacing:.4px;
      transition:color .2s, transform .2s cubic-bezier(0.34,1.56,0.64,1);
      /* iOS Safari tap fixes — without these, buttons can silently ignore taps */
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      background: none;
      border: none;
      /* Minimum 44x44pt touch target — Apple HIG requirement */
      min-width: 44px; min-height: 44px;
    }
    #bottomNav .nav-btn svg {
      width:24px; height:24px;
      stroke: var(--text3);
      stroke-width:1.8;
      transition: stroke .2s, filter .2s;
    }
    /* Active: bright green */
    #bottomNav .nav-btn.on { color: var(--green); }
    #bottomNav .nav-btn.on svg {
      stroke: var(--green);
      filter: drop-shadow(0 0 5px rgba(48,209,88,.5));
    }
    #bottomNav .nav-btn:active { transform:scale(.82); }

    /* ── FLOATING CHAT BUBBLE (bottom-right) ─────────────── */
    #chatBubble {
      position: fixed;
      bottom: calc(var(--nav-h) + 14px);
      right: 16px;
      left: auto;
      z-index: 500;
      width: 54px; height: 54px;
      border-radius: 50%;
      background: linear-gradient(145deg, #30d158 0%, #0a84ff 100%);
      border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow:
        0 4px 20px rgba(48,209,88,.4),
        0 2px 8px rgba(0,0,0,.45),
        inset 0 1.5px 0 rgba(255,255,255,.3);
      transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s;
    }
    #chatBubble:active { transform: scale(.86); }
    #chatBubble.open {
      background: linear-gradient(145deg, #636366, #3a3a3c);
      box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
    }
    #chatDot {
      position: absolute; top: 1px; right: 1px;
      width: 14px; height: 14px;
      background: #ff453a; border-radius: 50%;
      border: 2.5px solid var(--bg);
      display: none;
      animation: pulse .9s ease infinite;
    }
    @keyframes pulse {
      0%,100% { transform: scale(1); }
      50%      { transform: scale(1.15); }
    }

    /* Chat panel — slides up from bottom-right */
    #vChat {
      position: fixed !important;
      bottom: calc(var(--nav-h) + 78px) !important;
      right: 12px !important;
      left: auto !important;
      top: auto !important;
      width: min(340px, calc(100vw - 24px));
      height: min(540px, calc(100svh - var(--nav-h) - 110px));
      border-radius: 22px !important;
      overflow: hidden;
      background: var(--surface) !important;
      border-top: 1px solid rgba(255,255,255,.18);
      border-left: 1px solid rgba(255,255,255,.10);
      border-right: 1px solid rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.04);
      box-shadow:
        0 24px 64px rgba(0,0,0,.65),
        0 8px 24px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.12);
      transform: scale(.9) translateY(16px);
      transform-origin: bottom right;
      opacity: 0;
      /* iOS FIX: use visibility:hidden + pointer-events:none together.
         On iPhone, opacity:0 alone does NOT stop touch events from reaching
         the element — the invisible panel was eating all taps in the bottom-right.
         visibility:hidden is the only reliable way to truly hide from iOS touches. */
      pointer-events: none;
      visibility: hidden;
      transition:
        transform .35s cubic-bezier(0.34,1.56,0.64,1),
        opacity .25s ease,
        visibility 0s linear .25s; /* delay visibility change until after fade-out */
      display: flex !important;
      flex-direction: column !important;
    }
    #vChat.active {
      transform: scale(1) translateY(0);
      opacity: 1;
      pointer-events: all;
      visibility: visible;
      transition:
        transform .35s cubic-bezier(0.34,1.56,0.64,1),
        opacity .25s ease,
        visibility 0s linear 0s; /* show immediately on open */
    }
    /* Chat topbar — compact */
    #vChat .topbar {
      min-height: 48px !important;
      padding: 10px 14px !important;
      background: rgba(14,17,32,.98) !important;
      border-radius: 22px 22px 0 0 !important;
      flex-shrink: 0;
    }
    /* Messages area fills remaining space */
    #chatMessages {
      flex: 1 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 12px 12px 8px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
    }
    /* Input bar pinned to bottom */
    #chatInputBar {
      flex-shrink: 0;
      padding: 10px 12px;
      background: rgba(14,17,32,.98);
      border-top: 1px solid rgba(255,255,255,.07);
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }
    #chatInput {
      flex: 1;
      background: rgba(255,255,255,.07);
      border-top: 1px solid rgba(255,255,255,.14);
      border-left: 1px solid rgba(255,255,255,.08);
      border-right: 1px solid rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.03);
      border-radius: 14px;
      padding: 10px 14px;
      color: var(--text);
      font-family: var(--font);
      font-size: 14px;
      resize: none;
      outline: none;
      line-height: 1.4;
      max-height: 96px;
      overflow-y: auto;
      -webkit-appearance: none;
    }
    #chatInput::placeholder { color: var(--text3); }
    #chatInput:focus {
      border-top-color: rgba(48,209,88,.4);
      border-left-color: rgba(48,209,88,.25);
    }
    #chatSendBtn {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--green);
      border: none;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), opacity .15s;
    }
    #chatSendBtn:active { transform: scale(.85); opacity: .85; }

    /* ── QUICK REPLY CHIPS ──────────────────────────────── */
    .quick-chip {
      padding: 7px 13px;
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: var(--r-pill);
      color: var(--text2);
      font-size: 12px; font-weight: 600;
      cursor: pointer; white-space: nowrap;
      font-family: var(--font-display);
      transition: background .15s, transform .18s cubic-bezier(0.34,1.56,0.64,1), color .15s;
    }
    .quick-chip:active {
      background: var(--green-soft);
      border-color: rgba(47,209,88,.3);
      color: var(--green);
      transform: scale(.93);
    }

    /* ── OPINION PROMPT (post-trade) ────────────────────────── */
    #opinionModal {
      position: fixed; inset: 0; z-index: 4000;
      background: rgba(0,0,0,.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: flex-end; justify-content: center;
      opacity: 0; pointer-events: none;
      visibility: hidden; /* iOS FIX */
      transition: opacity .3s ease, visibility 0s linear .3s;
    }
    #opinionModal.open {
      opacity: 1; pointer-events: all;
      visibility: visible;
      transition: opacity .3s ease, visibility 0s linear 0s;
    }
    .opinion-sheet {
      width: 100%; max-width: 520px;
      background: var(--surface);
      border-top: 1px solid var(--border2);
      border-radius: 28px 28px 0 0;
      padding: 0 20px calc(env(safe-area-inset-bottom,0px) + 28px);
      transform: translateY(100%);
      transition: transform .4s cubic-bezier(0.32,.72,0,1);
      box-shadow: 0 -8px 40px rgba(0,0,0,.5);
    }
    #opinionModal.open .opinion-sheet { transform: translateY(0); }
    .opinion-handle {
      width: 36px; height: 4px;
      background: var(--border2); border-radius: 2px;
      margin: 12px auto 20px;
    }
    .opinion-side-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 14px; border-radius: var(--r-pill);
      font-size: 13px; font-weight: 700;
      margin-bottom: 14px;
    }
    .osb-yes { background: var(--green-soft); color: var(--green); }
    .osb-no  { background: var(--red-soft);   color: var(--red); }
    .osb-multi { background: var(--blue-soft); color: var(--blue); }
    .opinion-textarea {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: var(--r-lg);
      padding: 14px 16px;
      color: var(--text);
      font-family: var(--font-display);
      font-size: 15px;
      line-height: 1.5;
      resize: none;
      outline: none;
      min-height: 96px;
      transition: border-color .2s, box-shadow .2s;
      -webkit-appearance: none;
    }
    .opinion-textarea:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(47,209,88,.12);
    }
    .opinion-textarea::placeholder { color: var(--text3); }
    .opinion-char { font-size: 11px; color: var(--text3); text-align: right; margin-top: 5px; }

    /* ── OPINIONS FEED ────────────────────────────────────────── */
    .opinions-overlay {
      position: fixed; inset: 0; z-index: 3000;
      background: rgba(0,0,0,.65);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: flex-end; justify-content: center;
      opacity: 0; pointer-events: none;
      visibility: hidden; /* iOS FIX: opacity:0 alone doesn't block touches on iPhone */
      transition: opacity .3s ease, visibility 0s linear .3s;
    }
    .opinions-overlay.open {
      opacity: 1; pointer-events: all;
      visibility: visible;
      transition: opacity .3s ease, visibility 0s linear 0s;
    }
    .opinions-sheet {
      width: 100%; max-width: 520px;
      height: 75svh;
      background: var(--surface);
      border-top: 1px solid var(--border2);
      border-radius: 28px 28px 0 0;
      display: flex; flex-direction: column;
      transform: translateY(100%);
      transition: transform .4s cubic-bezier(0.32,.72,0,1);
      box-shadow: 0 -8px 40px rgba(0,0,0,.5);
    }
    .opinions-overlay.open .opinions-sheet { transform: translateY(0); }
    .opinions-header {
      padding: 0 20px 14px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .opinions-feed {
      flex: 1; overflow-y: auto;
      padding: 12px 16px 24px;
      display: flex; flex-direction: column; gap: 10px;
      -webkit-overflow-scrolling: touch;
    }
    .opinion-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 14px 16px;
      animation: fadeUp .2s ease both;
    }
    .opinion-top {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 8px;
    }
    .opinion-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--green));
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800; color: #fff;
      flex-shrink: 0;
    }
    .opinion-user { font-size: 13px; font-weight: 700; flex: 1; }
    .opinion-side {
      font-size: 11px; font-weight: 700;
      padding: 3px 10px; border-radius: var(--r-pill);
    }
    .os-yes { background: var(--green-soft); color: var(--green); }
    .os-no  { background: var(--red-soft);   color: var(--red); }
    .opinion-text {
      font-size: 14px; line-height: 1.55;
      color: var(--text2);
      margin-bottom: 10px;
    }
    .opinion-foot {
      display: flex; align-items: center; justify-content: space-between;
    }
    .opinion-time { font-size: 11px; color: var(--text3); }
    .upvote-btn {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 12px;
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      font-size: 12px; font-weight: 600;
      color: var(--text3);
      cursor: pointer;
      transition: all .18s cubic-bezier(0.34,1.56,0.64,1);
    }
    .upvote-btn.voted { background: var(--green-soft); border-color: rgba(47,209,88,.3); color: var(--green); }
    .upvote-btn:active { transform: scale(.92); }

    /* Opinion count badge on market cards */
    .mkt-opinions-btn {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 12px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      font-size: 12px; font-weight: 600;
      color: var(--text3);
      cursor: pointer;
      transition: all .18s;
    }
    .mkt-opinions-btn:active { background: var(--surface2); }

    /* ── WALLET SELECTOR ─────────────────────────────────────── */
    .wallet-opt {
      padding: 12px 8px;
      background: rgba(255,255,255,.04);
      border-top: 1px solid rgba(255,255,255,.14);
      border-left: 1px solid rgba(255,255,255,.08);
      border-right: 1px solid rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.03);
      border-radius: var(--r-sm);
      text-align: center;
      cursor: pointer;
      transition: all .2s;
    }
    .wallet-opt.selected {
      background: rgba(255,255,255,.09);
      border-top-color: rgba(255,255,255,.28);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    }

    /* ── SWIPE TO TRADE ───────────────────────────────────────── */
    /* ── SWIPE-TO-TRADE ───────────────────────────────────── */
    .swipe-track {
      position: relative;
      height: 60px;
      background: rgba(48,209,88,.08);
      border: 1px solid rgba(48,209,88,.2);
      border-radius: 100px;
      overflow: hidden;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-y;
      /* subtle pulse to invite interaction */
    }
    .swipe-track:active { cursor: grabbing; }
    /* Green fill that grows as thumb slides right */
    .swipe-fill {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 56px;
      background: linear-gradient(90deg, rgba(48,209,88,.35) 0%, rgba(48,209,88,.15) 100%);
      border-radius: 100px;
      /* NO transition during drag — purely JS driven for instant feel */
      will-change: width;
    }
    /* The draggable thumb */
    .swipe-thumb {
      position: absolute;
      left: 5px; top: 50%;
      transform: translateY(-50%);
      width: 50px; height: 50px;
      background: var(--green);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #000;
      box-shadow:
        0 2px 10px rgba(48,209,88,.5),
        0 1px 4px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.3);
      will-change: left;
      z-index: 2;
      touch-action: none;
    }
    .swipe-thumb svg {
      transition: opacity .15s;
    }
    .swipe-thumb.done {
      background: var(--green);
      box-shadow: 0 0 0 8px rgba(48,209,88,.15), 0 0 24px rgba(48,209,88,.5);
    }
    /* Label fades out as thumb moves right */
    .swipe-label {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      padding-left: 62px; /* offset for thumb */
      font-size: 13px; font-weight: 700;
      color: rgba(255,255,255,.55);
      pointer-events: none;
      letter-spacing: .5px;
      z-index: 1;
      gap: 6px;
    }

    /* ================================================================
       MARKETS VIEW
    ================================================================ */

    /* Balance hero card */
    .balance-hero {
      margin: 12px 16px 16px;
      padding: 28px 22px 22px;
      background: linear-gradient(160deg, var(--surface2) 0%, var(--surface) 100%);
      border: 1px solid var(--border2);
      border-radius: var(--r-xl);
      position: relative; overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,.4);
    }
    /* Glow blob top-right */
    .balance-hero::after {
      content: '';
      position: absolute; top: -40px; right: -40px;
      width: 160px; height: 160px;
      background: radial-gradient(circle, rgba(48,209,88,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .bh-label {
      font-size: 12px; font-weight: 600;
      color: var(--text3);
      text-transform: uppercase; letter-spacing: 1px;
      margin-bottom: 8px;
    }
    .bh-amount {
      font-size: 56px; font-weight: 800;
      color: var(--text);
      font-family: var(--font-display);
      line-height: 1; letter-spacing: -3px;
      margin-bottom: 4px;
      font-variant-numeric: tabular-nums;
    }
    .bh-sub { font-size: 13px; color: var(--text3); margin-bottom: 24px; }
    .bh-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .bh-btn {
      padding: 14px;
      border-radius: var(--r-pill);
      font-size: 15px; font-weight: 700;
      letter-spacing: -.1px;
      font-family: var(--font-display);
      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s;
    }
    .bh-btn:active { transform: scale(.95); }
    .bh-dep { background: var(--green); color: #000; box-shadow: 0 4px 16px rgba(47,209,88,.25); }
    .bh-dep:active { box-shadow: 0 2px 6px rgba(47,209,88,.15); }
    .bh-wd  { background: var(--surface3); color: var(--text); border: 1px solid var(--border2); }

    /* Market cards */
    .mkt-list { padding: 0 16px 120px; display: flex; flex-direction: column; gap: 12px; }
    .mkt-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 20px;
      transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .15s;
      animation: fadeUp .3s ease both;
    }
    .mkt-card:active { transform: scale(.985); border-color: var(--border2); }

    .mkt-top {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 12px;
      margin-bottom: 14px;
    }
    .mkt-q {
      font-size: 16px; font-weight: 600;
      line-height: 1.4; flex: 1;
      letter-spacing: -.2px;
    }
    /* Status badge */
    .status-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 10px;
      border-radius: 100px;
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .5px;
      flex-shrink: 0;
    }
    .status-badge::before {
      content: ''; width: 5px; height: 5px;
      border-radius: 50%; background: currentColor;
    }
    .sb-open    { background: var(--green-soft); color: var(--green); }
    .sb-closed  { background: var(--red-soft);   color: var(--red); }
    .sb-settled { background: rgba(99,99,102,.12); color: var(--text3); }

    /* Odds boxes */
    .odds-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
    .odds-box {
      border-radius: 12px; padding: 12px 14px; text-align: center;
      transition: transform .15s;
    }
    .odds-box:active { transform: scale(.97); }
    .ob-yes { background: var(--green-soft); border: 1px solid rgba(48,209,88,.15); }
    .ob-no  { background: var(--red-soft);   border: 1px solid rgba(255,69,58,.15); }
    .ob-label {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .5px;
      margin-bottom: 5px;
    }
    .ob-yes .ob-label { color: var(--green); }
    .ob-no  .ob-label { color: var(--red); }
    .ob-odds {
      font-size: 26px; font-weight: 800;
      line-height: 1; letter-spacing: -1px;
      font-variant-numeric: tabular-nums;
    }
    .ob-yes .ob-odds { color: var(--green); }
    .ob-no  .ob-odds { color: var(--red); }
    .ob-sub { font-size: 11px; color: var(--text3); margin-top: 3px; }

    /* Probability bar */
    .prob-bar {
      height: 3px; background: var(--surface3);
      border-radius: 2px; margin-bottom: 12px; overflow: hidden;
    }
    .prob-fill {
      height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, var(--green) 0%, var(--red) 100%);
      transition: width .6s cubic-bezier(0.34,1.56,0.64,1);
    }

    /* YES / NO action buttons */
    .mkt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .mkt-btn {
      padding: 12px;
      border-radius: var(--r-pill);
      font-size: 14px; font-weight: 700;
      letter-spacing: -.1px;
      font-family: var(--font-display);
      transition: transform .18s cubic-bezier(0.34,1.56,0.64,1), box-shadow .18s;
    }
    .mkt-btn:active { transform: scale(.94); }
    .mb-yes { background: var(--green); color: #000; box-shadow: 0 2px 12px rgba(47,209,88,.22); }
    .mb-no  { background: var(--red);   color: #fff; box-shadow: 0 2px 12px rgba(255,69,58,.22); }
    .mkt-btn:disabled { opacity: .25; cursor: not-allowed; transform: none; box-shadow: none; }

    .mkt-foot {
      display: flex; justify-content: space-between;
      align-items: center; margin-top: 12px;
      font-size: 12px; color: var(--text3);
    }
    /* Category chips on market cards */
    .cat-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px;
      border-radius: var(--r-pill);
      font-size: 10px; font-weight: 700;
      letter-spacing: .4px; text-transform: uppercase;
    }
    /* --- Category chip colors (one per category) --- */
    .cat-crypto      { background: rgba(249,115,22,.12);  color: #f97316; } /* orange  — Bitcoin/crypto */
    .cat-politics    { background: rgba(99,102,241,.12);  color: #6366f1; } /* indigo  — elections, bills */
    .cat-sports      { background: rgba(16,185,129,.12);  color: #10b981; } /* green   — NBA, NFL, soccer */
    .cat-geopolitics { background: rgba(239,68,68,.12);   color: #ef4444; } /* red     — wars, diplomacy */
    .cat-finance     { background: rgba(6,182,212,.12);   color: #06b6d4; } /* cyan    — stocks, oil, gold */
    .cat-ai-tech     { background: rgba(59,130,246,.12);  color: #3b82f6; } /* blue    — OpenAI, SpaceX */
    .cat-entertainment{ background: rgba(236,72,153,.12); color: #ec4899; } /* pink    — Oscars, TV, music */
    .cat-culture     { background: rgba(236,72,153,.12);  color: #ec4899; } /* pink    — same as entertainment */
    .cat-science     { background: rgba(139,92,246,.12);  color: #8b5cf6; } /* purple  — space, health */
    /* Keep old names as fallbacks so old DB data still displays a colour */
    .cat-war         { background: rgba(239,68,68,.12);   color: #ef4444; } /* same as geopolitics */
    .cat-stocks      { background: rgba(6,182,212,.12);   color: #06b6d4; } /* same as finance */
    .cat-news        { background: rgba(59,130,246,.12);  color: #3b82f6; } /* same as ai-tech */
    .cat-weather     { background: rgba(20,184,166,.12);  color: #14b8a6; } /* teal    — weather */
    .cat-general     { background: var(--surface3); color: var(--text3); }  /* grey    — catch-all */

    /* ── TAG CHIPS — small sub-tag pills on each market card ───────────────
       Think of these like hashtags: #Trump, #Bitcoin, #NBA
       They sit in their own row below the category chip + pool size.
       Clicking one filters the market list to just markets with that tag.
    ── */
    .tag-chips-row {
      display: flex;
      flex-wrap: wrap;        /* wrap to next line if lots of tags */
      gap: 5px;
      padding: 6px 14px 10px; /* a little breathing room below the card footer */
    }
    .tag-chip {
      display: inline-flex; align-items: center;
      padding: 3px 9px;
      border-radius: var(--r-pill);
      font-size: 11px; font-weight: 600;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text2);
      cursor: pointer;
      /* Spring-pop when tapped — same feel as category pills */
      transition: all .18s cubic-bezier(0.34,1.56,0.64,1);
      -webkit-tap-highlight-color: transparent;
    }
    .tag-chip:active {
      transform: scale(0.9);
      background: var(--blue-soft);
      color: var(--blue);
      border-color: rgba(10,132,255,.3);
    }
    /* When a tag is the active filter, keep it highlighted */
    .tag-chip.active {
      background: var(--blue-soft);
      color: var(--blue);
      border-color: rgba(10,132,255,.3);
    }

    /* MULTI-CHOICE MARKET STYLES (Polymarket-style option rows) */
    .mc-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .mc-option {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      transition: border-color .15s, transform .15s;
      /* iOS Safari fix: buttons always fire tap events reliably on iPhone.
         These extra props make it look and feel right as a <button> element. */
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      min-height: 44px;
      width: 100%;
      text-align: left;
      font-family: var(--font-display);
    }
    .mc-option:active { transform: scale(.98); }
    .mc-option:disabled { opacity: .45; cursor: not-allowed; transform: none; }
    /* The "Bet 2.4×" label inside the button row */
    .mc-bet-btn-label {
      padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 700;
      background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(10,132,255,.25);
      white-space: nowrap; flex-shrink: 0;
    }
    .mc-option:disabled .mc-bet-btn-label { opacity: .4; }
    .mc-option.mc-winner { background: var(--green-soft); border-color: rgba(47,209,88,.3); }
    .mc-option-label {
      font-size: 13px; font-weight: 600; flex: 1;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
    }
    .mc-bar-wrap { flex: 2; height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
    .mc-bar-fill { height: 100%; border-radius: 2px; background: var(--blue); transition: width .5s cubic-bezier(.34,1.56,.64,1); }
    .mc-winner .mc-bar-fill { background: var(--green); }
    .mc-pct { font-size: 12px; font-weight: 700; color: var(--text2); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
    .mc-winner-chip {
      display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
      border-radius: 10px; margin-bottom: 10px; background: var(--green-soft); color: var(--green);
      font-size: 13px; font-weight: 700;
    }
    .mc-sheet-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .mc-sheet-opt {
      padding: 10px 14px; border-radius: 12px; background: var(--surface2);
      border: 1px solid var(--border2); font-size: 14px; font-weight: 600;
      color: var(--text); text-align: left; transition: all .15s; width: 100%;
    }
    .mc-sheet-opt.selected { background: var(--blue-soft); border-color: rgba(10,132,255,.4); color: var(--blue); }
    .mc-sheet-opt:active { transform: scale(.98); }
    /* ── SCALAR MARKET STYLES ─────────────────────────────────────────────
       Scalar markets look like a list of threshold rows.
       Each row has: a label (e.g. "↑ $80,000"), a YES% probability bar,
       a percentage number, and YES / NO bet buttons.
       Think of it like a leaderboard where each row is its own mini-market.
    ── */
    .scalar-type-label {
      font-size: 11px; font-weight: 700; letter-spacing: .4px;
      color: var(--text3); text-transform: uppercase;
      padding: 0 14px 6px; margin-top: -4px;
    }
    .scalar-rows {
      display: flex; flex-direction: column; gap: 6px;
      padding: 0 14px 10px;
    }
    .scalar-row {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: border-color .15s;
    }
    .scalar-row:active { transform: scale(.98); }
    /* Label: the threshold text e.g. "↑ $80,000" */
    .scalar-label {
      font-size: 13px; font-weight: 600; color: var(--text);
      min-width: 90px; flex-shrink: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Thin progress bar showing YES probability */
    .scalar-bar-wrap {
      flex: 1; height: 4px;
      background: var(--surface3); border-radius: 2px; overflow: hidden;
    }
    .scalar-bar {
      height: 100%; border-radius: 2px;
      background: var(--blue); /* blue = neutral probability */
      transition: width .5s cubic-bezier(.34,1.56,.64,1);
    }
    /* Percentage number */
    .scalar-pct {
      font-size: 12px; font-weight: 700; color: var(--text2);
      min-width: 32px; text-align: right;
      font-variant-numeric: tabular-nums;
    }
    /* YES / NO buttons on each threshold row */
    .scalar-btns { display: flex; gap: 4px; flex-shrink: 0; }
    .scalar-bet-btn {
      padding: 4px 9px; border-radius: 100px;
      font-size: 11px; font-weight: 700;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .15s;
      white-space: nowrap;
    }
    .scalar-bet-btn:active { transform: scale(.9); }
    .scalar-bet-btn:disabled { opacity: .25; cursor: not-allowed; transform: none; }
    /* YES button = green tint */
    .sb-yes {
      background: var(--green-soft); color: var(--green);
      border-color: rgba(47,209,88,.25);
    }
    /* NO button = red tint */
    .sb-no {
      background: var(--red-soft, rgba(255,69,58,.1)); color: var(--red);
      border-color: rgba(255,69,58,.25);
    }
    /* Settled state chips */
    .scalar-result-chip {
      font-size: 11px; font-weight: 700; padding: 2px 7px;
      border-radius: 100px; flex-shrink: 0;
    }
    .scalar-yes-win { background: var(--green-soft); border-color: rgba(47,209,88,.3); }
    .scalar-yes-win .scalar-result-chip { background: var(--green); color: #fff; }
    .scalar-no-win  { background: var(--red-soft, rgba(255,69,58,.08)); border-color: rgba(255,69,58,.2); }
    .scalar-no-win  .scalar-result-chip { background: var(--red); color: #fff; }

    /* ── SCALAR button style in the type-toggle row ─── */
    /* active-scalar = orange/amber tint (distinct from green binary, blue multi) */
    .sq-type-btn.active-scalar {
      background: rgba(251,146,60,.15);
      border-color: rgba(251,146,60,.5);
      color: #f97316;
    }

    /* ── WATCHLIST STYLES ──────────────────────────────────────────────────
       ⭐ button lives in the top-right of each market card.
       ☆ = not watching.  ⭐ = watching (gold tint).
       Watchlist cards in the portfolio are slimmer than full market cards.
    ── */

    /* ⭐ Star button on market cards */
    .mkt-watch-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid var(--border);
      font-size: 16px; line-height: 1;
      cursor: pointer;
      /* spring-pop on tap */
      transition: all .2s cubic-bezier(0.34,1.56,0.64,1);
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      color: var(--text3);
    }
    .mkt-watch-btn:active  { transform: scale(0.82); }
    /* Active = gold background when starred */
    .mkt-watch-btn.watch-btn-active {
      background: rgba(251,191,36,.15);
      border-color: rgba(251,191,36,.5);
      color: #f59e0b;
    }

    /* ── Watchlist cards in the portfolio panel ── */
    .watch-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: transform .15s, border-color .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .watch-card:active { transform: scale(.98); border-color: var(--border2); }

    /* Top row: question text + remove star button */
    .watch-card-top {
      display: flex; align-items: flex-start; gap: 8px;
      margin-bottom: 10px;
    }
    .watch-q {
      font-size: 14px; font-weight: 600; color: var(--text);
      line-height: 1.4; flex: 1;
      /* Clamp to 2 lines max so the card stays compact */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    /* The ⭐ on a watchlist card — removing it unstars the market */
    .watch-remove-btn {
      background: none; border: none;
      font-size: 18px; cursor: pointer;
      flex-shrink: 0; padding: 0;
      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1);
      -webkit-tap-highlight-color: transparent;
    }
    .watch-remove-btn:active { transform: scale(0.78); }

    /* YES% bar row inside watchlist card */
    .watch-prob-row {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 10px;
    }
    .watch-yes-pct, .watch-no-pct {
      font-size: 12px; min-width: 44px; white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .watch-bar-wrap {
      flex: 1; height: 5px;
      background: var(--red-soft, rgba(255,69,58,.15));
      border-radius: 3px; overflow: hidden;
    }
    .watch-bar {
      height: 100%; border-radius: 3px;
      background: var(--green);
      transition: width .5s cubic-bezier(.34,1.56,.64,1);
    }

    /* Footer row: category chip + pool + status + closes date */
    .watch-foot {
      display: flex; align-items: center; gap: 6px;
      flex-wrap: wrap;
    }

    /* ── ACTIVITY FEED STYLES ──────────────────────────────────────────────
       The activity feed uses the same overlay sheet as opinions.
       Each row = one trade: avatar circle · name + time · side badge + pts
    ── */

    /* 📈 Activity button on market cards — tiny icon button next to opinions */
    .mkt-activity-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: var(--surface2);
      border: 1px solid var(--border);
      font-size: 14px;
      cursor: pointer;
      transition: all .18s cubic-bezier(0.34,1.56,0.64,1);
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .mkt-activity-btn:active {
      transform: scale(0.88);
      background: var(--surface3);
    }

    /* One trade row in the activity feed */
    .act-row {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 16px;
      border-bottom: 1px solid var(--border);
      transition: background .12s;
    }
    .act-row:last-child { border-bottom: none; }
    .act-row:active { background: var(--surface2); }

    /* Avatar circle — shows user's first letter or their avatar photo */
    .act-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--surface2);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700; color: var(--text2);
      flex-shrink: 0;
      overflow: hidden; /* clips avatar photo into circle */
    }

    /* Body: "@zeo bought YES" + "1,500 pts · 2m ago" */
    .act-body { flex: 1; min-width: 0; }
    .act-name {
      font-size: 13px; font-weight: 600; color: var(--text);
      display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
      line-height: 1.4;
    }
    .act-meta {
      font-size: 11px; color: var(--text3); margin-top: 2px;
    }

    /* Right side column — kept for backwards compat but now act-side is inline */
    .act-right {
      display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
      flex-shrink: 0;
    }
    /* YES / NO badge — used both inline (new) and in act-right (legacy) */
    .act-side {
      display: inline-flex; align-items: center;
      padding: 2px 8px; border-radius: 100px;
      font-size: 11px; font-weight: 700;
      flex-shrink: 0;
    }
    /* YES = green tint */
    .act-yes {
      background: var(--green-soft);
      color: var(--green);
    }
    /* NO = red tint */
    .act-no {
      background: var(--red-soft, rgba(255,69,58,.1));
      color: var(--red);
    }
    .act-stake {
      font-size: 12px; font-weight: 700;
      color: var(--text2);
      font-variant-numeric: tabular-nums;
    }

    /* ── RESOLUTION CRITERIA STYLES ───────────────────────────────────────
       The resolution panel lives inside the trade sheet.
       It's collapsed by default — user taps "How does this resolve?" to expand.
       Think of it like a spoiler tag: tap to reveal the resolution rules.
    ── */

    /* Small teaser line on market cards: "📋 Resolves via Reuters" */
    .mkt-res-source {
      font-size: 11px; font-weight: 600;
      color: var(--text3);
      padding: 2px 14px 8px;
      letter-spacing: .2px;
    }

    /* The toggle button inside the trade sheet */
    .res-toggle-btn {
      width: 100%;
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: 13px; font-weight: 600;
      color: var(--text2);
      cursor: pointer;
      /* Smooth expand */
      transition: background .15s, border-color .15s;
      -webkit-tap-highlight-color: transparent;
      text-align: left;
    }
    .res-toggle-btn:active {
      background: var(--surface3);
    }

    /* The expanded body — criteria text + source link */
    #resBody {
      padding: 10px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-top: none; /* flush with toggle button */
      border-radius: 0 0 10px 10px;
      margin-top: -2px; /* overlap with toggle button border */
    }

    /* The criteria text itself */
    .res-criteria {
      font-size: 13px;
      color: var(--text2);
      line-height: 1.55;
      margin-bottom: 8px;
    }

    /* Source link — e.g. "🔗 Reuters" */
    .res-source-link {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 700;
      color: var(--blue);
      text-decoration: none;
      padding: 4px 10px;
      background: var(--blue-soft);
      border-radius: 100px;
      border: 1px solid rgba(10,132,255,.2);
      transition: opacity .15s;
    }
    .res-source-link:active { opacity: .7; }

    /* ── POLYMARKET-STYLE RULES PANEL ────────────────────────────────── */

    /* Tab row — "Rules" | "Market Context" */
    .res-tab-row {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: 12px;
    }
    .res-tab {
      flex: 1;
      padding: 9px 0;
      font-size: 13px; font-weight: 700;
      color: var(--text3);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: color .15s, border-color .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .res-tab.active {
      color: var(--text);
      border-bottom-color: var(--green);
    }

    /* Resolver row — chip + source link side by side */
    .res-resolver-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .res-resolver-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .res-resolver-icon {
      font-size: 18px;
      line-height: 1;
    }

    /* Close date row inside Market Context tab */
    .res-close-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      padding: 8px 12px;
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 8px;
    }

    /* Upgraded toggle button — matches Polymarket look */
    .res-toggle-btn {
      width: 100%;
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: 13px; font-weight: 700;
      color: var(--text);
      cursor: pointer;
      transition: background .15s, border-color .15s;
      -webkit-tap-highlight-color: transparent;
      text-align: left;
    }
    .res-toggle-btn:active { background: var(--surface3); }

    /* Body gets round bottom corners when expanded */
    #resBody {
      padding: 14px 14px 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 10px 10px;
      margin-top: -2px;
    }

    /* ── BY-WHEN MARKET STYLES ────────────────────────────────────────────
       By-When markets look almost the same as Scalar but with date labels.
       Each row represents a deadline: "📅 30 April 2026 — 32%"
       The bar gets wider as the date gets further in the future.
       We reuse the scalar-bet-btn (YES/NO) styles — no need to repeat.
    ── */
    .bywhen-rows {
      display: flex; flex-direction: column; gap: 6px;
      padding: 0 14px 10px;
    }
    .bywhen-row {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: border-color .15s, transform .15s;
    }
    .bywhen-row:active { transform: scale(.98); }
    /* Date label — wider than scalar label to fit full date text */
    .bywhen-date {
      font-size: 12px; font-weight: 600; color: var(--text2);
      min-width: 110px; flex-shrink: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Same thin probability bar as scalar */
    .bywhen-bar-wrap {
      flex: 1; height: 4px;
      background: var(--surface3); border-radius: 2px; overflow: hidden;
    }
    .bywhen-bar {
      height: 100%; border-radius: 2px;
      /* Purple = time/deadline concept (different from blue scalar, green binary) */
      background: #8b5cf6;
      transition: width .5s cubic-bezier(.34,1.56,.64,1);
    }
    .bywhen-pct {
      font-size: 12px; font-weight: 700; color: var(--text2);
      min-width: 32px; text-align: right;
      font-variant-numeric: tabular-nums;
    }
    /* Settled result chips */
    .bywhen-result-chip {
      font-size: 13px; flex-shrink: 0;
    }
    .bywhen-yes-win { background: var(--green-soft); border-color: rgba(47,209,88,.3); }
    .bywhen-no-win  { background: var(--red-soft, rgba(255,69,58,.08)); border-color: rgba(255,69,58,.2); }

    /* ── By-When button active style — purple tint ─── */
    .sq-type-btn.active-bywhen {
      background: rgba(139,92,246,.15);
      border-color: rgba(139,92,246,.5);
      color: #8b5cf6;
    }

    /* ── Date input styling — make native date picker match app style ─── */
    .sq-bywhen-input[type="date"] {
      color-scheme: dark; /* tells browser to use dark date-picker on dark bg */
    }
    [data-theme="light"] .sq-bywhen-input[type="date"] {
      color-scheme: light;
    }

    /* Category filter pills */
    /* ── CATEGORY FILTER ROW ──
       No longer needs sticky — it lives OUTSIDE the scroll container now.
       The vMarkets flex layout keeps it pinned at the top naturally.
    ── */
    /* ── MARKET SEARCH BAR ────────────────────────────────────────── */
    /* Search icon button sitting in the topbar */
    .topbar-search-btn {
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 50%;
      color: var(--text2);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: background .15s, color .15s, transform .15s cubic-bezier(0.34,1.56,0.64,1);
      flex-shrink: 0;
    }
    .topbar-search-btn:active { transform: scale(.88); }
    .topbar-search-btn.active {
      background: var(--green-soft);
      border-color: rgba(47,209,88,.4);
      color: var(--green);
    }

    /* The expanding search bar below the topbar */
    .mkt-search-wrap {
      display: flex; align-items: center; gap: 10px;
      margin: 0 16px 4px;
      padding: 10px 14px;
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: var(--r-pill);
      flex-shrink: 0;
      /* Slide-down animation when it appears */
      animation: searchSlideDown .22s cubic-bezier(0.34,1.56,0.64,1) both;
      transition: border-color .2s;
    }
    @keyframes searchSlideDown {
      from { opacity: 0; transform: translateY(-8px) scaleY(.9); }
      to   { opacity: 1; transform: translateY(0)    scaleY(1);  }
    }
    .mkt-search-wrap:focus-within {
      border-color: rgba(47,209,88,.4);
      background: var(--surface);
    }
    .mkt-search-input {
      flex: 1; background: none; border: none; outline: none;
      font-size: 15px; font-family: var(--font-display);
      color: var(--text); caret-color: var(--green);
      -webkit-appearance: none;
    }
    .mkt-search-input::placeholder { color: var(--text3); }
    .mkt-search-input::-webkit-search-cancel-button { display: none; }
    [data-theme="light"] .mkt-search-wrap { background: #fff; }

    .cat-filter-row {
      display: flex; gap: 6px;
      padding: 10px 16px 12px;
      overflow-x: auto;
      scrollbar-width: none;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      transition: background .2s;
      /* iOS FIX: touch-action pan-x = only horizontal scroll, taps pass through */
      touch-action: pan-x;
      /* iOS FIX: z-index + isolation ensure this row sits ABOVE the scroll area
         below it in the stacking context — prevents scroll area eating pill taps */
      position: relative;
      z-index: 2;
      isolation: isolate;
    }
    .cat-filter-row::-webkit-scrollbar { display: none; }
    .cat-filter-btn {
      padding: 7px 14px;
      border-radius: var(--r-pill);
      font-size: 12px; font-weight: 700;
      white-space: nowrap;
      border: 1.5px solid var(--border2);
      background: transparent;
      color: var(--text3);
      cursor: pointer;
      font-family: var(--font-display);
      transition: all .22s cubic-bezier(0.34,1.56,0.64,1);
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      /* iOS FIX: 44px minimum touch target — Apple HIG requirement */
      min-height: 44px;
      /* iOS FIX: manipulation stops double-tap zoom delay on ALL browsers */
      touch-action: manipulation;
      /* iOS FIX: relative + z-index ensures the button itself is the hit target,
         not a sibling or parent element */
      position: relative;
      z-index: 1;
      /* iOS FIX: user-select none prevents text selection stealing the tap */
      -webkit-user-select: none;
      user-select: none;
    }
    .cat-filter-btn:active {
      transform: scale(0.92);
    }
    .cat-filter-btn.active {
      background: var(--green-soft);
      border-color: rgba(47,209,88,.4);
      color: var(--green);
      /* Subtle glow on active pill */
      box-shadow: 0 0 12px rgba(47,209,88,.15);
    }
    /* Light mode override for the sticky category row */
    [data-theme="light"] .cat-filter-row {
      background: rgba(247,247,249,.94);
      border-bottom-color: rgba(0,0,0,.07);
    }


    /* ================================================================
       WATCHLIST VIEW — dedicated tab for starred markets
    ================================================================ */
    #vWatchlist {
      display: none;
      flex-direction: column;
      overflow: hidden;
    }
    #vWatchlist.active {
      display: flex;
    }
    #vWatchlistScroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      scroll-behavior: smooth;
      padding-bottom: 40px;
    }
    .watchlist-empty-full {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center;
      padding: 60px 32px;
      text-align: center;
    }
    .watchlist-empty-full .we-icon { font-size: 52px; margin-bottom: 14px; }
    .watchlist-empty-full .we-title {
      font-size: 18px; font-weight: 800; color: var(--text);
      margin-bottom: 8px;
    }
    .watchlist-empty-full .we-sub {
      font-size: 14px; color: var(--text3); line-height: 1.5;
    }

    /* Settled result chip */
    .result-chip {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px; border-radius: 12px;
      font-size: 14px; font-weight: 700;
    }
    .rc-yes { background: var(--green-soft); color: var(--green); border: 1px solid rgba(48,209,88,.2); }
    .rc-no  { background: var(--red-soft);   color: var(--red);   border: 1px solid rgba(255,69,58,.2); }

    /* Empty state */
    .empty {
      text-align: center; padding: 60px 24px;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
    }
    .empty-icon { font-size: 52px; }
    .empty p { font-size: 15px; color: var(--text3); line-height: 1.6; }

    /* ================================================================
       TRADE SHEET — iOS bottom sheet with spring animation
    ================================================================ */
    .overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.65);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 400;
      display: flex; align-items: flex-end; justify-content: center;
      opacity: 0; pointer-events: none !important;
      visibility: hidden; /* iOS FIX: stops invisible overlay eating touches */
      transition: opacity .3s, visibility 0s linear .3s;
    }
    .overlay.open {
      opacity: 1; pointer-events: auto !important;
      visibility: visible;
      transition: opacity .3s, visibility 0s linear 0s;
    }
    .sheet {
      background: var(--surface);
      border-top: 1px solid var(--border2);
      border-radius: 28px 28px 0 0;
      padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 32px);
      width: 100%; max-width: 520px;
      transform: translateY(100%);
      transition: transform .4s cubic-bezier(0.32,.72,0,1);
      box-shadow: 0 -8px 40px rgba(0,0,0,.5);
    }
    .overlay.open .sheet { transform: translateY(0); }
    /* Pull handle */
    .sheet-handle {
      width: 36px; height: 4px;
      background: var(--border2);
      border-radius: 2px;
      margin: 12px auto 20px;
    }
    .sheet-title {
      font-size: 20px; font-weight: 800;
      letter-spacing: -.4px; margin-bottom: 6px;
    }
    .sheet-q {
      font-size: 14px; color: var(--text2);
      line-height: 1.5; margin-bottom: 22px;
    }
    /* YES / NO choice */
    .choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
    .choice-btn {
      padding: 14px; border-radius: var(--r-pill);
      font-size: 16px; font-weight: 700;
      border: 1.5px solid transparent;
      opacity: .4;
      font-family: var(--font-display);
      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), opacity .2s, box-shadow .2s;
    }
    .choice-btn.yes { background: var(--green-soft); color: var(--green); border-color: rgba(47,209,88,.25); }
    .choice-btn.no  { background: var(--red-soft);   color: var(--red);   border-color: rgba(255,69,58,.25); }
    .choice-btn.selected { opacity: 1; transform: scale(1.03); }
    .choice-btn.yes.selected { border-color: var(--green); box-shadow: 0 4px 20px rgba(47,209,88,.25); }
    .choice-btn.no.selected  { border-color: var(--red);   box-shadow: 0 4px 20px rgba(255,69,58,.25); }

    .stake-label {
      font-size: 12px; font-weight: 600;
      color: var(--text3); text-transform: uppercase; letter-spacing: .8px;
      margin-bottom: 8px;
    }
    .stake-input {
      width: 100%;
      background: var(--surface2);
      border: 1.5px solid var(--border2);
      border-radius: var(--r-lg);
      padding: 16px 18px;
      color: var(--text);
      font-size: 28px; font-weight: 800;
      font-family: var(--font-display);
      letter-spacing: -1px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      font-variant-numeric: tabular-nums;
      -webkit-appearance: none;
    }
    .stake-input:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(47,209,88,.12);
    }
    .stake-hint { font-size: 12px; color: var(--text3); margin: 5px 0 16px; }
    /* Quick amounts */
    .quick-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 16px; }
    .q-btn {
      padding: 10px 4px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      color: var(--text2); font-size: 13px; font-weight: 600;
      transition: transform .18s cubic-bezier(0.34,1.56,0.64,1), background .15s, color .15s;
    }
    .q-btn:active { transform: scale(.88); background: var(--green-soft); color: var(--green); border-color: rgba(47,209,88,.3); }

    /* Payout preview */
    .payout-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 16px 18px;
      margin-bottom: 18px;
      display: flex; justify-content: space-between; align-items: center;
    }
    .pc-label {
      font-size: 12px; font-weight: 600;
      color: var(--text3); text-transform: uppercase; letter-spacing: .8px;
      margin-bottom: 3px;
    }
    .pc-odds { font-size: 13px; color: var(--text3); }
    .pc-amount {
      font-size: 30px; font-weight: 800;
      color: var(--green); letter-spacing: -1px;
      font-variant-numeric: tabular-nums;
    }

    /* Confirm button */
    .confirm-btn {
      width: 100%; padding: 17px;
      background: var(--green); color: #000;
      border-radius: var(--r-lg);
      font-size: 17px; font-weight: 700;
      letter-spacing: -.2px;
      transition: transform .15s cubic-bezier(0.34,1.56,0.64,1), opacity .15s;
    }
    .confirm-btn:active { transform: scale(.97); }
    .confirm-btn:disabled { opacity: .4; transform: none; }
    .cancel-link {
      width: 100%;
      padding: 16px;
      margin-top: 8px;
      color: var(--text3);
      font-size: 16px;
      font-weight: 600;
      font-family: var(--font-display);
      border-radius: var(--r-lg);
      background: var(--surface2);
      border: 1px solid var(--border2);
      transition: background .15s, color .15s, transform .15s cubic-bezier(0.34,1.56,0.64,1);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .cancel-link:active {
      background: var(--red-soft);
      border-color: rgba(255,69,58,.3);
      color: var(--red);
      transform: scale(.97);
    }

    /* ================================================================
       PORTFOLIO (My Trades)
    ================================================================ */
    .stats-row {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 10px; padding: 16px;
    }
    .stat-tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 18px 12px; text-align: center;
      animation: springIn .4s ease both;
    }
    .st-val {
      font-size: 24px; font-weight: 800;
      color: var(--text); letter-spacing: -1px;
      font-variant-numeric: tabular-nums;
    }
    .st-lbl {
      font-size: 10px; font-weight: 600;
      color: var(--text3);
      text-transform: uppercase; letter-spacing: .6px;
      margin-top: 4px;
    }
    .trade-list { padding: 0 16px 120px; display: flex; flex-direction: column; gap: 10px; }
    .trade-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 18px;
      animation: fadeUp .25s ease both;
    }
    .tc-q { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 12px; }
    .tc-row { display: flex; justify-content: space-between; align-items: center; }
    .tc-left { display: flex; gap: 8px; align-items: center; }
    .tc-badge {
      font-size: 12px; font-weight: 700;
      padding: 4px 10px; border-radius: 100px;
    }
    .tcb-yes { background: var(--green-soft); color: var(--green); }
    .tcb-no  { background: var(--red-soft);   color: var(--red); }
    /* Multi-choice option badge — blue neutral, can be longer text */
    .tcb-multi {
      background: var(--blue-soft); color: var(--blue);
      max-width: 140px; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap;
    }
    .tc-stake { font-size: 12px; color: var(--text3); }
    .tc-payout { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .tp-won    { color: var(--green); }
    .tp-lost   { color: var(--red); }
    .tp-active { color: var(--text2); }
    .tc-cancel {
      margin-top: 10px; width: 100%;
      padding: 10px;
      background: var(--red-soft);
      border: 1px solid rgba(255,69,58,.2);
      border-radius: var(--r-pill);
      color: var(--red); font-size: 13px; font-weight: 600;
      font-family: var(--font-display);
      transition: transform .18s cubic-bezier(0.34,1.56,0.64,1);
    }
    .tc-cancel:active { transform: scale(.96); }

    /* ── AI CHAT ──────────────────────────────────────────────── */
    .chat-msg { display: flex; }
    .chat-msg.user { justify-content: flex-end; }
    .chat-msg.bot  { justify-content: flex-start; }
    .chat-bubble {
      max-width: 80%;
      padding: 11px 15px;
      border-radius: 18px;
      font-size: 14px; line-height: 1.55;
      word-break: break-word;
    }
    .bot-bubble {
      background: rgba(255,255,255,.07);
      border-top: 1px solid rgba(255,255,255,.14);
      border-left: 1px solid rgba(255,255,255,.08);
      border-right: 1px solid rgba(255,255,255,.03);
      border-bottom: 1px solid rgba(255,255,255,.03);
      color: var(--text);
      border-radius: 4px 18px 18px 18px;
    }
    .user-bubble {
      background: var(--green);
      color: #000;
      font-weight: 500;
      border-radius: 18px 4px 18px 18px;
    }
    .chat-typing {
      display: flex; gap: 4px; align-items: center;
      padding: 14px 16px;
    }
    .chat-typing span {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--text3);
      animation: typingDot 1.2s infinite;
    }
    .chat-typing span:nth-child(2) { animation-delay: .2s; }
    .chat-typing span:nth-child(3) { animation-delay: .4s; }
    @keyframes typingDot { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

    /* ================================================================
       LEADERBOARD
    ================================================================ */
    .podium-stage {
      display: flex; align-items: flex-end; justify-content: center;
      gap: 8px; padding: 28px 16px 0;
    }
    .pod { display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 120px; }
    .pod-av {
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 800; color: #000;
      overflow: hidden; position: relative;
      flex-shrink: 0;
    }
    .pod-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .pod.p1 .pod-av { width: 66px; height: 66px; font-size: 22px; background: linear-gradient(135deg,#ff9500,#ff6b00); box-shadow: 0 0 24px rgba(255,149,0,.35); }
    .pod.p2 .pod-av { width: 52px; height: 52px; background: linear-gradient(135deg,#c0c0c0,#888); }
    .pod.p3 .pod-av { width: 44px; height: 44px; font-size: 15px; background: linear-gradient(135deg,#cd7f32,#8b4513); }
    .pod-medal  { font-size: 20px; margin-bottom: 6px; }
    .pod-name   { font-size: 12px; font-weight: 700; text-align: center; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 8px; }
    .pod-pts    { font-size: 11px; color: var(--gold); font-weight: 700; margin-top: 2px; }
    .pod-base   { width: 80px; border-radius: 8px 8px 0 0; margin-top: 8px; }
    .pod.p1 .pod-base { height: 48px; background: linear-gradient(to top, #ff9500, #ff6b00); }
    .pod.p2 .pod-base { height: 32px; background: linear-gradient(to top, #c0c0c0, #888); }
    .pod.p3 .pod-base { height: 22px; background: linear-gradient(to top, #cd7f32, #8b4513); }
    .pod.p1 { order: 2; }
    .pod.p2 { order: 1; }
    .pod.p3 { order: 3; }

    .lb-list { padding: 12px 16px 120px; display: flex; flex-direction: column; gap: 8px; }
    .lb-row {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      animation: fadeUp .25s ease both;
    }
    .lb-row.me {
      background: var(--green-soft);
      border-color: rgba(48,209,88,.2);
    }
    .lb-rank  { font-size: 13px; font-weight: 700; color: var(--text3); width: 24px; text-align: center; flex-shrink: 0; }
    .lb-av {
      width: 40px; height: 40px; border-radius: 50%;
      background: linear-gradient(135deg, #0a84ff 0%, #30d158 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 800; color: #000;
      flex-shrink: 0; overflow: hidden; position: relative;
    }
    .lb-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .lb-info { flex: 1; min-width: 0; }
    .lb-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lb-sub  { font-size: 12px; color: var(--text3); margin-top: 2px; }
    .lb-pts  { font-size: 16px; font-weight: 800; color: var(--gold); flex-shrink: 0; font-variant-numeric: tabular-nums; }
    .lb-row.me .lb-name::after { content: " · you"; color: var(--green); font-size: 11px; font-weight: 700; }

    /* ================================================================
       PROFILE
    ================================================================ */
    .profile-hero {
      margin: 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 28px 20px 22px;
      text-align: center;
    }
        .avatar-wrap {
      width: 88px; height: 88px; border-radius: 50%;
      background: linear-gradient(135deg, #0a84ff 0%, #2fd158 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 32px; font-weight: 800; color: #fff;
      margin: 0 auto 12px;
      position: relative; cursor: pointer; overflow: hidden;
      border: 2px solid var(--border2);
      box-shadow: 0 4px 20px rgba(10,132,255,.2);
      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1);
    }
    .avatar-wrap:active { transform: scale(.91); }
    .avatar-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .avatar-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.5);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; font-size: 22px;
      transition: opacity .2s;
    }
    .avatar-wrap:active .avatar-overlay { opacity: 1; }
    #avatarInput { display: none; }
    .av-hint { font-size: 11px; color: var(--text3); margin-bottom: 12px; }
    .prof-name { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 3px; }
    .prof-user { font-size: 14px; color: var(--blue); font-weight: 600; margin-bottom: 4px; }
    .prof-mail { font-size: 13px; color: var(--text3); margin-bottom: 16px; }
    .tier-chip {
      display: inline-block; padding: 6px 18px;
      border-radius: 100px;
      font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1px;
    }
    .tc-free  { background: rgba(99,99,102,.15); color: var(--text3); }
    .tc-basic { background: var(--blue-soft); color: var(--blue); }
    .tc-pro   { background: var(--green-soft); color: var(--green); }
    .tc-elite { background: var(--purple-soft); color: var(--purple); }

    /* Language toggle inside profile */
    .lang-row {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      margin-bottom: 8px;
    }
    .lang-row-left { display: flex; align-items: center; gap: 12px; }
    .lang-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: var(--blue-soft); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
    }
    .lang-row-label { font-size: 15px; font-weight: 600; }
    .lang-row-sub   { font-size: 12px; color: var(--text3); margin-top: 1px; }

    /* Menu list */
    .menu-list { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 120px; }
    .menu-row {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 16px 18px;
      display: flex; align-items: center; gap: 14px;
      cursor: pointer;
      transition: background .15s, transform .15s cubic-bezier(.34,1.56,.64,1);
    }
    .menu-row:active { background: var(--surface2); transform: scale(.98); }
    .menu-icon {
      width: 38px; height: 38px; border-radius: var(--r-sm);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-size: 18px;
    }
    .mi-green  { background: var(--green-soft); }
    .mi-gold   { background: var(--gold-soft); }
    .mi-blue   { background: var(--blue-soft); }
    .mi-purple { background: var(--purple-soft); }
    .mi-red    { background: var(--red-soft); }
    .menu-info { flex: 1; }
    .mi-title  { font-size: 15px; font-weight: 600; }
    .mi-sub    { font-size: 12px; color: var(--text3); margin-top: 2px; }
    .mi-chevron { color: var(--text3); font-size: 18px; }

    /* ================================================================
       REFERRALS
    ================================================================ */
    .ref-hero {
      margin: 16px;
      background: var(--surface);
      border: 1px solid rgba(191,90,242,.18);
      border-radius: var(--r-xl); padding: 28px 20px;
      text-align: center; position: relative; overflow: hidden;
    }
    .ref-hero::after {
      content: '';
      position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
      width: 200px; height: 130px;
      background: radial-gradient(ellipse, rgba(191,90,242,.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .ref-hero-icon { font-size: 44px; margin-bottom: 12px; position: relative; z-index: 1; }
    .ref-code-lbl {
      font-size: 11px; font-weight: 700; color: var(--text3);
      text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px;
      position: relative; z-index: 1;
    }
    .ref-code-val {
      font-size: clamp(30px, 11vw, 44px); font-weight: 800;
      color: var(--gold); letter-spacing: 5px; margin-bottom: 20px;
      word-break: break-all; position: relative; z-index: 1;
    }
    .ref-share-btn {
      background: var(--purple); color: #fff;
      border-radius: var(--r-pill); padding: 13px 36px;
      font-size: 15px; font-weight: 700;
      font-family: var(--font-display);
      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s;
      position: relative; z-index: 1;
      box-shadow: 0 4px 16px rgba(191,90,242,.3);
    }
    .ref-share-btn:active { transform: scale(.94); box-shadow: 0 2px 8px rgba(191,90,242,.2); }
    .ref-stats {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 10px; padding: 0 16px; margin-bottom: 6px;
    }
    .ref-stat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 16px 10px; text-align: center;
    }
    .ref-stat-val { font-size: 28px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
    .ref-stat-lbl {
      font-size: 10px; font-weight: 600; color: var(--text3);
      text-transform: uppercase; letter-spacing: .6px; margin-top: 4px;
    }
    .badge-wrap {
      margin: 0 16px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 20px;
    }
    .badge-row { margin-bottom: 16px; }
    .badge-row:last-child { margin-bottom: 0; }
    .badge-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
    .badge-name { font-size: 14px; font-weight: 700; }
    .badge-req  { font-size: 12px; color: var(--text3); }
    .badge-bar  { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
    .badge-fill { height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(0.34,1.56,0.64,1); }

    /* ================================================================
       HISTORY
    ================================================================ */
    .hist-segs {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 8px; padding: 16px 16px 0;
    }
    .hist-seg {
      padding: 11px;
      border: 1.5px solid var(--border2);
      border-radius: var(--r-pill);
      background: transparent; color: var(--text3);
      font-size: 14px; font-weight: 600;
      font-family: var(--font-display);
      transition: all .2s cubic-bezier(0.34,1.56,0.64,1);
    }
    .hist-seg.on {
      background: var(--green-soft);
      border-color: rgba(47,209,88,.35);
      color: var(--green);
    }
    .hist-list { padding: 12px 16px 120px; display: flex; flex-direction: column; gap: 10px; }
    .hist-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 16px 18px;
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 12px;
    }
    .hist-left { flex: 1; }
    .hist-type { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
    .hist-date { font-size: 12px; color: var(--text3); }
    .hist-right { text-align: right; flex-shrink: 0; }
    .hist-amt  { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .hist-eur  { font-size: 12px; color: var(--text3); margin-top: 2px; }
    .hist-pill {
      display: inline-block; padding: 3px 8px;
      border-radius: 100px; font-size: 10px; font-weight: 700;
      text-transform: uppercase; margin-top: 5px;
    }
    .hp-done    { background: var(--green-soft); color: var(--green); }
    .hp-pending { background: var(--blue-soft);  color: var(--blue); }
    .hp-active  { background: var(--green-soft); color: var(--green); }
    .hp-cancel  { background: rgba(99,99,102,.12); color: var(--text3); }

    /* ================================================================
       MEMBERSHIP
    ================================================================ */
    .mem-note {
      margin: 16px;
      background: var(--blue-soft);
      border: 1px solid rgba(10,132,255,.2);
      border-radius: var(--r);
      padding: 16px; font-size: 14px; color: var(--text2); line-height: 1.6;
    }
    .tier-cards { padding: 0 16px 120px; display: flex; flex-direction: column; gap: 14px; }
    .tier-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 26px 22px 22px;
      position: relative; overflow: hidden;
      transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s;
    }
    .tier-card:active { transform: scale(.98); }
    .tier-glow {
      position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
      width: 140px; height: 80px; border-radius: 50%; pointer-events: none;
    }
    .t-basic .tier-glow { background: radial-gradient(circle, rgba(10,132,255,.2) 0%, transparent 70%); }
    .t-pro   .tier-glow { background: radial-gradient(circle, rgba(48,209,88,.2) 0%, transparent 70%); }
    .t-elite .tier-glow { background: radial-gradient(circle, rgba(191,90,242,.2) 0%, transparent 70%); }
    .tier-popular {
      position: absolute; top: 18px; right: 18px;
      background: var(--green); color: #000;
      font-size: 9px; font-weight: 800;
      padding: 4px 10px; border-radius: 100px;
      text-transform: uppercase; letter-spacing: .8px;
    }
    .tier-name  { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 4px; }
    .t-basic .tier-name { color: var(--blue); }
    .t-pro   .tier-name { color: var(--green); }
    .t-elite .tier-name { color: var(--purple); }
    .tier-price { font-size: 14px; color: var(--text3); margin-bottom: 18px; }
    .perks { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
    .perk  { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text2); }
    .perk-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .t-basic .perk-dot { background: var(--blue); }
    .t-pro   .perk-dot { background: var(--green); }
    .t-elite .perk-dot { background: var(--purple); }
    .tier-btn {
      width: 100%; padding: 14px; border-radius: var(--r-pill);
      font-size: 15px; font-weight: 700;
      font-family: var(--font-display);
      transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s;
    }
    .tier-btn:active { transform: scale(.96); }
    .tier-btn:disabled { opacity: .4; transform: none; box-shadow: none; }
    .tbt-basic { background: var(--blue); color: #fff; box-shadow: 0 4px 16px rgba(10,132,255,.25); }
    .tbt-pro   { background: var(--green); color: #000; box-shadow: 0 4px 16px rgba(47,209,88,.25); }
    .tbt-elite { background: var(--purple); color: #fff; box-shadow: 0 4px 16px rgba(191,90,242,.25); }

    /* ================================================================
       WITHDRAW
    ================================================================ */
    .wd-hero {
      margin: 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 24px 20px;
    }
    .wd-lbl { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
    .wd-amt {
      font-size: 40px; font-weight: 800;
      color: var(--text); line-height: 1; letter-spacing: -1.5px;
      margin-bottom: 4px; font-variant-numeric: tabular-nums;
    }
    .wd-eur { font-size: 14px; color: var(--text3); }
    .wd-note {
      margin: 0 16px 16px;
      background: var(--gold-soft);
      border: 1px solid rgba(255,214,10,.2);
      border-radius: var(--r); padding: 14px 16px;
      font-size: 14px; color: var(--text2); line-height: 1.6;
    }
    .form-pad { padding: 0 16px 120px; }
    .ff { margin-bottom: 16px; }
    .ff label {
      display: block; font-size: 12px; font-weight: 600;
      color: var(--text3); text-transform: uppercase;
      letter-spacing: .8px; margin-bottom: 7px;
    }
    .wf-input {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1.5px solid var(--border2);
      border-radius: 0;
      padding: 12px 4px; color: var(--text);
      font-size: 16px; outline: none;
      font-family: var(--font);
      transition: border-color .2s;
      -webkit-appearance: none;
    }
    .wf-input:focus { border-bottom-color: var(--green); }
    .wf-input::placeholder { color: var(--text3); }
    .wf-hint { font-size: 12px; color: var(--text3); margin-top: 5px; }

    /* ================================================================
       SUBMIT QUESTION
    ================================================================ */
    .notice-card {
      margin: 16px;
      background: var(--blue-soft);
      border: 1px solid rgba(10,132,255,.2);
      border-radius: var(--r); padding: 16px;
      display: flex; gap: 14px; align-items: flex-start;
    }
    .notice-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
    .notice-txt  { font-size: 14px; color: var(--text2); line-height: 1.6; }
    .char-count  { font-size: 12px; color: var(--text3); text-align: right; margin-top: 5px; }

    /* ── SUBMIT QUESTION: market-type toggle pills ── */
    .sq-type-row { display: flex; gap: 8px; margin-bottom: 20px; }
    .sq-type-btn {
      flex: 1; padding: 11px 8px;
      border-radius: var(--r); border: 1.5px solid var(--border2);
      background: transparent; color: var(--text2);
      font-family: var(--font-display); font-size: 13px; font-weight: 700;
      cursor: pointer; transition: all .18s; text-align: center;
    }
    .sq-type-btn.active-binary {
      border-color: var(--green); background: var(--green-soft); color: var(--green);
    }
    .sq-type-btn.active-multi {
      border-color: var(--blue); background: var(--blue-soft); color: var(--blue);
    }

    /* ── SUBMIT QUESTION: option input rows ── */
    .sq-opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .sq-opt-row .wf-input { flex: 1; }
    .sq-opt-del {
      width: 30px; height: 30px; border-radius: 50%;
      background: var(--red-soft); color: var(--red);
      border: none; cursor: pointer;
      font-size: 14px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .sq-add-opt {
      width: 100%; padding: 10px;
      border: 1.5px dashed var(--border2);
      border-radius: var(--r); background: transparent;
      color: var(--text3); font-family: var(--font-display);
      font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px;
    }
    .sub-item {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: var(--r);
      padding: 16px; margin-bottom: 10px;
    }
    .sub-q { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; }
    .sub-foot { display: flex; justify-content: space-between; align-items: center; }
    .ss-pending  { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; background: var(--blue-soft); color: var(--blue); }
    .ss-approved { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; background: var(--green-soft); color: var(--green); }
    .ss-rejected { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; background: var(--red-soft); color: var(--red); }
    .sub-pts { font-size: 12px; color: var(--text3); }

    /* ══ USERNAME LIVE CHECK ══ */
    @keyframes usernameSpinner {
      to { transform: translateY(-50%) rotate(360deg); }
    }
    #usernameStatus.checking {
      width: 18px; height: 18px;
      border: 2px solid var(--border2);
      border-top-color: var(--green);
      border-radius: 50%;
      animation: usernameSpinner .6s linear infinite;
      font-size: 0;
    }