/* === Academy core styles (extracted from academy.html) === */
:root{
  --ink:#0a0a0c; --ink-2:#13131a; --ink-3:#1c1c25;
  --gold:#C5A572; --gold-soft:#d8c298; --cream:#E8D8A8;
  --white:#fafaf7; --muted:#8a8a96; --border:#2a2a36;
  --success:#7BC97D; --danger:#E27B7B;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--white);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
.serif{font-family:'Cormorant Garamond',serif}

/* ── Layout ───────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:280px 1fr 380px;min-height:100vh}
@media (max-width:1100px){.shell{grid-template-columns:1fr;}.sidebar,.tutor-panel{display:none}}

/* Sidebar */
.sidebar{background:linear-gradient(180deg,#08080b,#0e0e14);border-right:1px solid var(--border);padding:28px 22px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:24px}
.brand-mark{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--cream));display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:22px;color:#000;letter-spacing:-1px}
.brand-text{font-family:'Cormorant Garamond',serif;font-size:20px;letter-spacing:1px;color:var(--cream)}
.brand-text small{display:block;font-family:'Inter',sans-serif;font-size:9px;letter-spacing:3px;color:var(--gold);font-weight:600;margin-top:2px}
.nav-label{font-size:10px;letter-spacing:2.5px;color:var(--muted);font-weight:600;margin:24px 0 10px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:8px;color:#c2c2cc;font-size:13.5px;font-weight:500;cursor:pointer;transition:all .25s;margin-bottom:3px;position:relative}
.nav-item:hover{background:var(--ink-3);color:var(--white)}
.nav-item.active{background:linear-gradient(90deg,rgba(197,165,114,.16),rgba(197,165,114,.04));color:var(--cream);font-weight:600}
.nav-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--gold);border-radius:0 3px 3px 0}
.nav-item .lc{width:16px;height:16px;flex-shrink:0}
.nav-item .badge{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:1px;padding:2px 7px;border-radius:10px;background:var(--gold);color:#000}
.nav-item .lock{margin-left:auto;width:13px;height:13px;color:var(--muted)}

/* Main content */
.main{padding:40px 56px;overflow-y:auto;background:radial-gradient(ellipse at top right,#15151e 0%,var(--ink) 50%)}
.greet-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:38px}
.greet h1{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:600;letter-spacing:-.5px;line-height:1.1;margin-bottom:6px}
.greet p{color:var(--muted);font-size:14px}
.upgrade-pill{padding:10px 18px;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--cream));color:#000;font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer;border:none;transition:transform .2s}
.upgrade-pill:hover{transform:translateY(-1px)}
.upgrade-pill[data-adept="true"]{background:linear-gradient(90deg,var(--success),#5eba62);color:#fff}

/* Stats row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:42px}
.stat{background:var(--ink-2);border:1px solid var(--border);border-radius:12px;padding:18px}
.stat .lbl{font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:600;margin-bottom:8px}
.stat .val{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:600;color:var(--cream)}
.stat .sub{font-size:11px;color:#777;margin-top:2px}

/* Roadmap section */
.section-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.section-h h2{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;letter-spacing:-.3px}
.section-h .filter{font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:600;cursor:pointer}

.roadmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.div-card{background:var(--ink-2);border:1px solid var(--border);border-radius:14px;padding:20px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.div-card:hover{border-color:var(--gold);transform:translateY(-2px);background:var(--ink-3)}
.div-card.locked{opacity:.55}
.div-card.locked:hover{transform:none;border-color:var(--border)}
.div-card .icon-wrap{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,rgba(197,165,114,.2),rgba(197,165,114,.05));display:grid;place-items:center;margin-bottom:14px;border:1px solid rgba(197,165,114,.2)}
.div-card .icon-wrap .lc{width:20px;height:20px;color:var(--gold)}
.div-card h3{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;margin-bottom:6px;color:var(--cream)}
.div-card p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:14px;min-height:38px}
.div-card .progress-track{height:4px;background:var(--ink-3);border-radius:2px;overflow:hidden;margin-bottom:8px}
.div-card .progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--cream));transition:width .8s ease}
.div-card .progress-row{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-weight:500}
.div-card .lock-overlay{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.5);padding:6px;border-radius:6px}
.div-card .lock-overlay .lc{width:14px;height:14px;color:var(--gold)}
.div-card .recommend-tag{position:absolute;top:46px;right:14px;font-size:9px;letter-spacing:1.5px;color:var(--gold);font-weight:700;background:rgba(197,165,114,.12);padding:3px 8px;border-radius:99px;border:1px solid rgba(197,165,114,.3);z-index:1;}

/* ── Tutor panel ────────────────────────────────────────── */
.tutor-panel{background:linear-gradient(180deg,#0e0e14,#08080b);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.tutor-header{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.tutor-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--cream));display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-weight:600;color:#000;font-size:18px}
.tutor-info h3{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--cream);font-weight:600}
.tutor-info span{font-size:10px;color:var(--gold);letter-spacing:1.5px;font-weight:600}
.tutor-status{margin-left:auto;font-size:10px;letter-spacing:1.5px;color:var(--success);font-weight:600;display:flex;align-items:center;gap:5px}
.tutor-status .pulse{width:6px;height:6px;background:var(--success);border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.tutor-msgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.55}
.msg.user{align-self:flex-end;background:var(--gold);color:#000;border-bottom-right-radius:4px;font-weight:500}
.msg.assistant{align-self:flex-start;background:var(--ink-3);color:#e0e0e8;border-bottom-left-radius:4px;border:1px solid var(--border)}
.msg.assistant.typing{font-style:italic;color:var(--muted)}

.tutor-input{padding:16px 18px;border-top:1px solid var(--border);background:var(--ink-2);display:flex;gap:8px;align-items:center}
.tutor-input input{flex:1;background:var(--ink);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--white);font-size:13px;outline:none;transition:border-color .2s}
.tutor-input input:focus{border-color:var(--gold)}
.tutor-input button{background:var(--gold);color:#000;border:none;border-radius:10px;padding:11px 14px;cursor:pointer;font-weight:600;font-size:12px;transition:transform .15s}
.tutor-input button:hover{transform:translateY(-1px)}
.tutor-input button.voice{background:var(--ink-3);color:var(--gold);padding:11px 12px}
.tutor-input button.voice.active{background:var(--danger);color:#fff;animation:pulse 1.5s infinite}

.tutor-switcher{display:flex;gap:6px;padding:0 20px 14px;border-bottom:1px solid var(--border)}
.tutor-pill{flex:1;padding:7px 0;border-radius:8px;background:var(--ink-3);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;text-align:center;transition:all .2s;letter-spacing:.5px}
.tutor-pill:hover{color:var(--cream)}
.tutor-pill.active{background:linear-gradient(90deg,rgba(197,165,114,.2),rgba(197,165,114,.05));border-color:var(--gold);color:var(--cream)}

/* ── Lesson modal ───────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.open{display:flex}
.modal-content{background:var(--ink-2);border:1px solid var(--border);border-radius:16px;max-width:780px;width:100%;max-height:88vh;overflow-y:auto;padding:36px 44px;position:relative}
.modal-content:has(#squadBody){max-width:1180px}
.modal-content:has(#squadBody) #squadBody [data-squad-detail-grid]{grid-template-columns:200px 1fr 260px}
.modal-close{position:absolute;top:16px;right:16px;background:var(--ink-3);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.modal-close:hover{color:var(--white);border-color:var(--gold)}
.lesson-h-meta{font-size:10.5px;letter-spacing:2px;color:var(--gold);font-weight:600;margin-bottom:8px}
.lesson-h{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:600;line-height:1.15;margin-bottom:6px;color:var(--cream)}
.lesson-h-sub{color:var(--muted);font-size:14px;margin-bottom:32px}
.lesson-body{font-size:15px;line-height:1.75;color:#e8e8ee}
.lesson-body h2{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;margin:24px 0 12px;color:var(--cream)}
.lesson-body p{margin-bottom:14px}
.lesson-body ul,.lesson-body ol{margin:0 0 14px 24px}
.lesson-body li{margin-bottom:6px}
.lesson-body strong{color:var(--cream);font-weight:600}
.lesson-body em{color:var(--muted);font-style:italic}
.lesson-actions{margin-top:32px;display:flex;gap:10px;align-items:center}
.btn{padding:12px 22px;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:1px;cursor:pointer;border:none;transition:transform .15s}
.btn-primary{background:var(--gold);color:#000}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--white);border-color:var(--gold)}

/* ── Loading skeleton ──────────────────────────────────── */
.skel{background:linear-gradient(90deg,var(--ink-2),var(--ink-3),var(--ink-2));background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:14px;margin:6px 0}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* Hidden auth panel (login fallback) */
.auth-gate{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px;z-index:200;visibility:hidden;opacity:0;transition:opacity .4s ease}
.auth-gate.ready{visibility:visible;opacity:1}
.auth-gate h1{font-family:'Cormorant Garamond',serif;font-size:42px;color:var(--cream);margin-bottom:12px}
.auth-gate p{color:var(--muted);max-width:420px;line-height:1.6;margin-bottom:24px}
.auth-gate input{background:var(--ink-2);border:1px solid var(--border);border-radius:8px;padding:12px 16px;color:var(--white);width:300px;margin-bottom:8px;font-size:13px}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION — premium responsive layout
   ═══════════════════════════════════════════════════════════════ */
:root{ --safe-bot: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); }

/* Mobile-only chrome (hidden on desktop) */
.mobile-topbar, .mobile-bottomnav, .mobile-tutor-fab, .drawer-backdrop { display:none; }

/* === Tablet & below (≤1100px) === */
@media (max-width: 1100px){
  /* Hide static panels; convert to drawers */
  .shell{ grid-template-columns:1fr; padding-top: calc(56px + var(--safe-top)); padding-bottom: calc(64px + var(--safe-bot)); }
  .sidebar{ display:block; }
  .tutor-panel{ display:flex; }

  /* Sidebar → left drawer */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:300;
    width:min(86vw, 320px); padding:calc(20px + var(--safe-top)) 22px 24px;
    transform:translateX(-100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
    overflow-y:auto; box-shadow:0 0 60px rgba(0,0,0,.6);
  }
  .sidebar.open{ transform:translateX(0); }

  /* Tutor → bottom sheet */
  .tutor-panel{
    position:fixed; left:0; right:0; bottom:0; z-index:301;
    height:min(85vh, 720px); border-left:0; border-top:1px solid var(--border);
    border-radius:18px 18px 0 0; padding-bottom:var(--safe-bot);
    transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 -12px 40px rgba(0,0,0,.6);
  }
  .tutor-panel.open{ transform:translateY(0); }
  .tutor-panel::before{
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:44px; height:4px; background:var(--border); border-radius:2px;
  }
  .tutor-header{ padding-top:18px; }

  /* Drawer backdrop */
  .drawer-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
    backdrop-filter:blur(6px); z-index:299; opacity:0; transition:opacity .25s;
  }
  .drawer-backdrop.open{ display:block; opacity:1; }

  /* Mobile top bar */
  .mobile-topbar{
    display:flex; position:fixed; top:0; left:0; right:0; z-index:200;
    padding:calc(12px + var(--safe-top)) 16px 12px;
    background:rgba(10,10,12,.92); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    align-items:center; gap:14px;
  }
  .mobile-topbar .menu-btn{
    width:42px; height:42px; border-radius:10px; background:var(--ink-3);
    border:1px solid var(--border); color:var(--cream);
    display:grid; place-items:center; cursor:pointer;
  }
  .mobile-topbar .brand-mark{ width:34px; height:34px; font-size:19px; margin-bottom:0; border-radius:8px; }
  .mobile-topbar .title{ font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--cream); letter-spacing:.5px; flex:1; }
  .mobile-topbar .upgrade-pill{ padding:7px 12px; font-size:10.5px; }

  /* Mobile bottom nav */
  .mobile-bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200;
    padding:8px 8px calc(8px + var(--safe-bot));
    background:rgba(10,10,12,.95); backdrop-filter:blur(12px);
    border-top:1px solid var(--border); justify-content:space-around;
  }
  .mobile-bottomnav .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 4px; border-radius:8px; cursor:pointer; color:var(--muted);
    font-size:10px; letter-spacing:.5px; font-weight:600;
    transition:color .2s; min-height:48px;
  }
  .mobile-bottomnav .tab.active{ color:var(--gold); }
  .mobile-bottomnav .tab .lc{ width:20px; height:20px; }

  /* Floating tutor FAB */
  .mobile-tutor-fab{
    display:flex; position:fixed; right:16px; bottom:calc(78px + var(--safe-bot));
    z-index:198; width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--cream));
    color:#000; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 8px 24px rgba(197,165,114,.4); border:0;
    transition:transform .2s;
  }
  .mobile-tutor-fab:active{ transform:scale(.94); }
  .mobile-tutor-fab .lc{ width:22px; height:22px; }

  /* Hide desktop greet upgrade pill (we have it in topbar) */
  .greet-row .upgrade-pill{ display:none; }

  /* Main padding */
  .main{ padding:24px 18px 32px; }
  .greet h1{ font-size:30px; }
  .greet p{ font-size:13px; }

  /* Stats: 2x2 */
  .stats{ grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:28px; }
  .stat{ padding:14px; }
  .stat .val{ font-size:24px; }

  /* Roadmap cards: 1 column on phones */
  .roadmap{ grid-template-columns:1fr; gap:12px; }
  .div-card{ padding:18px; }
  .div-card h3{ font-size:18px; }
  .div-card p{ min-height:auto; }

  /* Modal goes near full-screen on mobile */
  .modal{ padding:0; align-items:flex-end; }
  .modal-content{
    max-width:100%; max-height:96vh; min-height:96vh;
    border-radius:18px 18px 0 0; padding:24px 18px calc(28px + var(--safe-bot));
    animation:modalUp .35s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes modalUp{ from{ transform:translateY(40px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
  .modal-close{ width:36px; height:36px; top:12px; right:12px; }
  .lesson-h{ font-size:26px; line-height:1.18; }
  .lesson-h-sub{ font-size:13px; margin-bottom:20px; }
  .lesson-body{ font-size:15px; line-height:1.72; }
  .lesson-body h2{ font-size:20px; margin:22px 0 10px; }
  .lesson-actions{ flex-direction:column; align-items:stretch; gap:10px; }
  .lesson-actions .btn{ width:100%; padding:14px 22px; font-size:13px; }

  /* TTS bar more compact + bigger taps */
  #ttsBar{ flex-wrap:wrap; }
  #ttsBar button{ padding:10px 14px !important; font-size:11px !important; min-height:40px; }

  /* Section heading */
  .section-h h2{ font-size:20px; }

  /* Auth gate */
  .auth-gate{ padding:24px 20px; }
  .auth-gate h1{ font-size:32px; }
  .auth-gate input{ width:100%; max-width:340px; padding:14px 16px; font-size:14px; }

  /* Hide desktop scrollbar styling on touch devices */
  ::-webkit-scrollbar{ width:0; }
}

/* === Phone (≤640px) — finer tuning === */
@media (max-width: 640px){
  .greet h1{ font-size:26px; }
  .stat .val{ font-size:22px; }
  .lesson-h{ font-size:23px; }
  .modal-content{ padding:20px 16px calc(24px + var(--safe-bot)); }

  /* Calibration onboarding grid → single column */
  #createAccountModal .modal-content > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
  #onboardingModal .modal-content > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }

  /* Tutor msgs density */
  .tutor-msgs{ padding:14px; }
  .msg{ font-size:13.5px; }
  .tutor-input{ padding:12px 14px; }
  .tutor-input input{ font-size:14px; }

  /* Quiz options bigger */
  [data-testid^="quiz-q"]{ min-height:52px !important; padding:12px 14px !important; }

  /* YouTube embed */
  iframe[src*="youtube"]{ aspect-ratio:16/9; }
}

/* === Touch device — replace hover with active === */
@media (hover: none){
  .nav-item:hover{ background:transparent; color:#c2c2cc; }
  .nav-item:active{ background:var(--ink-3); color:var(--white); }
  .div-card:hover{ transform:none; border-color:var(--border); background:var(--ink-2); }
  .div-card:active{ transform:scale(.98); }
  .btn:hover{ transform:none; }
  .btn:active{ transform:scale(.97); }
  .upgrade-pill:hover{ transform:none; }
}

/* === Reduce motion === */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* === Legal viewer + disclaimer + footer + avatar styles === */
.lg-tab{padding:9px 16px;background:transparent;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:11.5px;letter-spacing:1px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;}
.lg-tab:hover{border-color:var(--gold-soft);color:var(--cream);}
.lg-tab.active{background:linear-gradient(135deg,rgba(197,165,114,.18),rgba(197,165,114,.04));border-color:var(--gold);color:var(--cream);}
.lg-ack{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:8px;border-radius:8px;transition:background .15s;}
.lg-ack:hover{background:rgba(197,165,114,.04);}
.lg-ack input{margin-top:3px;width:18px;height:18px;accent-color:var(--gold);cursor:pointer;flex-shrink:0;}
.lg-ack span{color:#d8d8e0;font-size:13.2px;line-height:1.55;}

/* Persistent academy disclaimer banner */
.lx-disclaimer{position:relative;width:100%;padding:10px 18px;background:linear-gradient(90deg,rgba(197,165,114,.10),rgba(96,165,250,.06));border-bottom:1px solid var(--border);color:#c8c8d0;font-size:11.5px;letter-spacing:.3px;text-align:center;line-height:1.5;}
.lx-disclaimer strong{color:var(--gold);font-weight:600;}
@media (max-width:1100px){ .lx-disclaimer{font-size:11px;padding:8px 14px;} }

/* Global academy footer */
.lx-footer{padding:28px 36px 32px;border-top:1px solid var(--border);background:#06070a;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-top:48px;}
.lx-footer .col h4{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--cream);margin-bottom:8px;}
.lx-footer a, .lx-footer button.linkbtn{color:var(--muted);background:none;border:0;padding:4px 0;cursor:pointer;font-family:inherit;font-size:12px;display:block;text-decoration:none;text-align:left;transition:color .15s;}
.lx-footer a:hover, .lx-footer button.linkbtn:hover{color:var(--gold);}
@media (max-width:1100px){ .lx-footer{padding:24px 18px calc(80px + var(--safe-bot));flex-direction:column;} }

/* Avatar */
.avatar-wrap{position:relative;display:inline-block;}
.avatar-img{width:96px;height:96px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;background:var(--ink-3);display:block;}
.avatar-fallback{width:96px;height:96px;border-radius:50%;border:2px solid var(--gold);background:linear-gradient(135deg,var(--ink-2),var(--ink-3));display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:600;}
.avatar-edit{position:absolute;bottom:-2px;right:-2px;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#000;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* === Onboarding calibration form styles === */
.ca-lbl{display:block;font-size:10.5px;letter-spacing:1.5px;color:var(--muted);font-weight:600;margin-bottom:6px;text-transform:uppercase}
.ca-input{width:100%;background:var(--ink);border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:var(--white);font-size:13.5px;outline:none;transition:border-color .2s;font-family:inherit}
.ca-input:focus{border-color:var(--gold)}
.ob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px;}
.ob-pick{padding:14px 16px;background:var(--ink);border:1px solid var(--border);border-radius:10px;color:#d8d8e0;cursor:pointer;text-align:left;transition:all .2s;font-family:inherit;font-size:13.5px;}
.ob-pick:hover{border-color:var(--gold-soft);background:var(--ink-3);}
.ob-pick.active{border-color:var(--gold);background:linear-gradient(135deg,rgba(197,165,114,.15),rgba(197,165,114,.04));color:var(--cream);}
.ob-pick .h{font-weight:600;display:block;margin-bottom:3px;color:var(--cream);}
.ob-pick .d{font-size:11.5px;color:var(--muted);}
.ob-multi{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.ob-chip{padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--ink);color:#d8d8e0;cursor:pointer;font-size:12.5px;transition:all .2s;font-family:inherit;}
.ob-chip:hover{border-color:var(--gold-soft);}
.ob-chip.active{border-color:var(--gold);background:rgba(197,165,114,.12);color:var(--cream);}
.ob-num{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.ob-num button{width:42px;height:42px;border-radius:8px;background:var(--ink);border:1px solid var(--border);color:#d8d8e0;cursor:pointer;font-weight:600;transition:all .15s;font-family:inherit;}
.ob-num button:hover{border-color:var(--gold-soft);}
.ob-num button.active{background:var(--gold);color:#000;border-color:var(--gold);}
.ob-tutor{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;}
.ob-tutor-card{padding:16px;background:var(--ink);border:1px solid var(--border);border-radius:12px;cursor:pointer;text-align:left;transition:all .2s;}
.ob-tutor-card:hover{border-color:var(--gold-soft);}
.ob-tutor-card.active{border-color:var(--gold);background:linear-gradient(135deg,rgba(197,165,114,.15),rgba(197,165,114,.04));}
.ob-tutor-card h4{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--cream);font-weight:600;margin-bottom:2px;}
.ob-tutor-card .tt{font-size:11px;color:var(--gold);letter-spacing:1.5px;font-weight:600;margin-bottom:8px;}
.ob-tutor-card .ds{font-size:12px;color:var(--muted);line-height:1.5;}
.ob-text{width:100%;background:var(--ink);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--white);font-size:13.5px;outline:none;font-family:inherit;resize:vertical;min-height:80px;}
.ob-text:focus{border-color:var(--gold);}
.ob-row{display:flex;gap:10px;align-items:center;margin-top:8px;}
.ob-row input[type="number"]{width:120px;background:var(--ink);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:#fff;font-size:13.5px;font-family:inherit;}

/* === Cinematic splash styles === */
@keyframes splashFadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes splashImg{0%{opacity:0;transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@keyframes splashHint{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes splashFadeOut{0%{opacity:1}100%{opacity:0;visibility:hidden}}
#splash.dismiss{animation:splashFadeOut .8s ease forwards}
.splash-skip{
  position:absolute;top:24px;right:28px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
  border:1px solid rgba(197,165,114,.4);color:var(--gold);
  padding:9px 18px;border-radius:999px;
  font-size:10.5px;letter-spacing:2.5px;font-weight:700;font-family:'Inter',sans-serif;
  cursor:pointer;transition:all .25s;
  animation:splashSkipFadeIn 1.6s ease 1s both;
}
.splash-skip:hover{background:var(--gold);color:#000;border-color:var(--gold);transform:translateY(-1px)}
@keyframes splashSkipFadeIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}
@media (max-width:640px){.splash-skip{top:16px;right:16px;padding:7px 14px;font-size:10px}}


/* === Community Phase A/B/C — Mobile optimisation === */
@media (max-width:1100px){
  /* Stack feed + sidebar; profile sidebar slides above the feed for quick access */
  .comm-grid{ grid-template-columns:1fr !important; gap:14px !important; }
  /* Compact composer chip-row on mobile */
  #commCompose select, #commCompose input{ font-size:12.5px !important; }
  #commCompose textarea{ font-size:14px !important; min-height:90px; }
  /* Composer image URL field shouldn't push action chips off-screen */
  #commImgUrl{ min-width:0 !important; flex:1 1 100% !important; }
}
@media (max-width:640px){
  .comm-grid{ gap:12px !important; }
  /* Action bar buttons wrap cleanly */
  [data-testid^="act-"]{ font-size:11px !important; padding:7px 10px !important; }
  /* Top trader sidebar avatars compact */
  #commProfileCard{ padding:14px !important; }
}

/* === Edit Profile builder (Phase C) — mobile optimisation === */
@media (max-width:1100px){
  /* Step pills wrap to 2 columns with icon + truncated label */
  [data-testid="ep-modal"] [data-testid^="ep-step-"]{
    flex:1 1 calc(50% - 6px);
    text-align:center;
    padding:9px 8px !important;
    font-size:10px !important;
    letter-spacing:.6px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  [data-testid="ep-modal"] > div:nth-child(2){ /* the pill row */
    display:flex !important;
    gap:6px !important;
  }
  [data-testid="ep-modal"] input, [data-testid="ep-modal"] textarea{
    font-size:14px !important; /* prevent iOS auto-zoom */
  }
  /* Action buttons full-width row */
  [data-testid="ep-modal"] > div:last-child{
    gap:8px;
  }
  [data-testid="ep-prev-btn"], [data-testid="ep-next-btn"], [data-testid="ep-preview-btn"]{
    flex:1 1 auto;
    padding:12px 14px !important;
  }
}
@media (max-width:640px){
  /* 1-column pill grid feels cleaner under 380px */
  [data-testid="ep-modal"] [data-testid^="ep-step-"]{
    font-size:11px !important;
  }
}

/* === Float Tutor FAB should not overlap modal action buttons === */
@media (max-width:1100px){
  /* When any modal is open, hide the FAB to free up the bottom-right corner */
  body:has(.modal.open) .mobile-tutor-fab,
  body:has(.modal[style*="display:flex"]) .mobile-tutor-fab,
  body:has(.modal[style*="display: flex"]) .mobile-tutor-fab{
    display:none !important;
  }
}

/* === Ticker autocomplete dropdown — mobile clamp === */
@media (max-width:640px){
  [data-testid="ticker-autocomplete"]{
    left:12px !important;
    right:12px !important;
    min-width:auto !important;
    max-width:none !important;
  }
}