/* app-shell.css — shared native-app shell for PantherPick
   Dark header + sport/page strip, light content, dark bottom tabs.
   Used by app.html, app-sports.html, app-record.html, app-account.html. */
:root{
  --navy:#060B19;--navy-2:#0A1228;--navy-3:#111C3A;
  --blue:#1E6FFF;--blue-2:#4A8DFF;
  --orange:#FF5A2D;
  --bg:#F4F6FA;            /* light content */
  --card:#FFFFFF;
  --ink:#0B1326;--ink-2:#5A6478;--ink-3:#9AA3B5;
  --line:#E6EAF2;
  --green:#16A34A;--red:#DC2626;
  --radius:18px;
  --shadow:0 1px 2px rgba(6,11,25,.05), 0 6px 18px rgba(6,11,25,.05);
  --font-disp:"Satoshi",system-ui,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Space Mono","SF Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}

/* ---------- Accessibility: visible keyboard focus (WCAG 2.4.7) ----------
   The shell sets -webkit-tap-highlight-color:transparent and uses :active-only
   feedback, leaving keyboard users with no focus cue. Restore a brand-blue ring
   for keyboard/AT focus only (:focus-visible), covering brand link, upgrade
   button, sport scroller, filter chips, picks, bottom tabs and inputs. */
:where(a,button,input,select,textarea,summary,[tabindex],.sport,.chip,.tab,.pick,.tcard,.locktag span):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:8px;
}
/* (input-specific :focus-visible ring lives next to its base :focus rule below,
   so it can outrank that rule's outline:none) */

/* ---------- Accessibility: respect reduced-motion (WCAG 2.3.3) ----------
   Stops the live-dot pulse and press/scale transitions for opt-out users.
   JS-driven behavior (if any) is out of scope for CSS — see handoff report. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}
body{font-family:var(--font-body);background:#070D1C;color:var(--ink);display:flex;justify-content:center}
.mono{font-family:var(--font-mono)}

.phone{width:100%;max-width:460px;min-height:100vh;background:var(--bg);position:relative;display:flex;flex-direction:column;box-shadow:0 0 60px rgba(0,0,0,.4)}

/* ---------- Header (DARK) ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(6,11,25,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:calc(14px + env(safe-area-inset-top)) 18px 12px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand .mark{width:28px;height:30px;flex-shrink:0;background-color:#fff;
  -webkit-mask:url('../assets/brand/pantherpick-panther.svg') center/contain no-repeat;
  mask:url('../assets/brand/pantherpick-panther.svg') center/contain no-repeat}
.brand .name{font-family:var(--font-disp);font-weight:900;font-size:20px;letter-spacing:-.5px;color:#fff}
.brand .name b{color:var(--blue-2);font-weight:900}
.btn-upgrade{background:var(--blue);color:#fff;border:none;font-family:var(--font-body);font-weight:700;font-size:14.5px;padding:9px 18px;border-radius:999px;cursor:pointer;transition:transform .12s,background .12s;text-decoration:none}
.btn-upgrade:active{transform:scale(.95);background:#1559d6}

/* ---------- Sport scroller (DARK) ---------- */
.sports{display:flex;gap:4px;overflow-x:auto;padding:12px 14px 14px;scrollbar-width:none;background:var(--navy)}
.sports::-webkit-scrollbar{display:none}
.sport{flex:0 0 auto;width:70px;display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;cursor:pointer;font-family:var(--font-body);color:#7E8DA8;font-size:12.5px;font-weight:600;text-decoration:none}
.sport .ico{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:25px;background:rgba(255,255,255,.04);transition:background .15s,transform .12s}
.sport.active{color:#fff}
.sport.active .ico{background:var(--blue);box-shadow:0 8px 20px rgba(30,111,255,.4)}
.sport:active .ico{transform:scale(.94)}

/* ---------- Page head (DARK) — sub-page title strip ---------- */
.pagehead{background:var(--navy);padding:14px 20px 22px;color:#fff}
.pagehead h1{font-family:var(--font-disp);font-size:26px;font-weight:900;letter-spacing:-.5px}
.pagehead p{font-size:14px;color:#9DB0D4;margin-top:5px;max-width:320px}
.pagehead .ph-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pagehead .ph-date{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:#7E8DA8;text-transform:uppercase}

/* ---------- Scroll area (LIGHT) ---------- */
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:120px;background:var(--bg)}

/* ---------- Hero banner (DARK) ---------- */
.hero-wrap{padding:16px 18px 4px}
.hero{position:relative;overflow:hidden;border-radius:22px;
  background:radial-gradient(140% 160% at 85% 20%, #1E6FFF 0%, #0E2F7E 42%, var(--navy) 78%);
  color:#fff;padding:26px 22px 22px;min-height:178px;display:flex;flex-direction:column;justify-content:space-between}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.10);pointer-events:none}
.hero::before{width:420px;height:420px;right:-140px;top:-180px}
.hero::after{width:300px;height:300px;right:-90px;top:-120px;border-color:rgba(255,255,255,.16)}
.hero .kicker{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9DC0FF;margin-bottom:6px}
.hero h2{font-family:var(--font-disp);font-size:27px;font-weight:900;letter-spacing:-.5px;line-height:1.1}
.hero h2 .num{color:var(--orange)}
.hero p{font-size:14px;color:#C7D6F5;margin-top:6px;max-width:240px}
.hero .ball{position:absolute;right:-26px;bottom:-38px;font-size:128px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));transform:rotate(-12deg);user-select:none}
.hero .dots{display:flex;gap:7px;margin-top:18px;position:relative;z-index:2}
.hero .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.hero .dots i.on{background:#fff;outline:4px solid rgba(255,255,255,.18)}

/* ---------- Section headers ---------- */
.sec{display:flex;align-items:baseline;justify-content:space-between;padding:22px 18px 12px}
.sec h3{font-family:var(--font-disp);font-size:20px;font-weight:800;letter-spacing:-.3px}
.sec a{font-size:14px;font-weight:700;color:var(--blue);text-decoration:none}

/* ---------- Trending ---------- */
.trend{display:flex;gap:12px;overflow-x:auto;padding:2px 18px 8px;scrollbar-width:none}
.trend::-webkit-scrollbar{display:none}
.tcard{flex:0 0 258px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;cursor:pointer;transition:transform .12s}
.tcard:active{transform:scale(.97)}
.tcard .thead{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:10px;border-bottom:1.5px dashed var(--line);font-size:13px;font-weight:700}
.tcard .live{color:var(--red);display:flex;align-items:center;gap:6px}
.tcard .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tcard .lg{color:var(--ink-3);font-family:var(--font-mono);font-size:11px}
.trow{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:16px;font-weight:600}
.trow .logo{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:16px;background:#F0F3F9;flex-shrink:0}
.trow .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .sc{font-family:var(--font-disp);font-weight:800;font-size:17px}
.trow.lose .nm,.trow.lose .sc{color:var(--ink-3)}

/* ---------- Top Pick (orange) ---------- */
.toppick{margin:6px 18px 0;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.toppick .tp-head{background:linear-gradient(95deg,var(--orange),#FF7A48);color:#fff;padding:11px 18px;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.toppick .tp-head .edge{background:rgba(255,255,255,.22);padding:4px 10px;border-radius:999px;font-size:12px;letter-spacing:.02em;text-transform:none;font-weight:700}
.toppick .tp-body{background:var(--card);padding:16px 18px}

/* ---------- Pick rows ---------- */
.picklist{display:flex;flex-direction:column}
.pick{background:var(--card);margin:0 18px 12px;border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 16px;cursor:pointer;transition:transform .12s;position:relative}
.pick:active{transform:scale(.98)}
.pmeta{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;margin-bottom:11px}
.pmeta .live{color:var(--red);display:flex;align-items:center;gap:6px}
.pmeta .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
.pmeta .when{color:var(--ink-2)}
.pmeta .lg{color:var(--ink-3);font-weight:600}
.prow{display:flex;align-items:center;gap:12px;padding:7px 0}
.prow .logo{width:38px;height:38px;border-radius:11px;background:#F0F3F9;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.prow .nm{flex:1;font-family:var(--font-disp);font-size:17px;font-weight:700;letter-spacing:-.2px}
.prow .nm small{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--ink-3);margin-top:2px;letter-spacing:0}
.prow .picked .bar{height:3px;border-radius:3px;background:var(--blue);width:54px;margin-top:5px}
.pill{min-width:84px;text-align:center;padding:11px 14px;border-radius:14px;font-family:var(--font-disp);font-weight:800;font-size:16px;flex-shrink:0}
.pill.blue{background:var(--blue);color:#fff}
.pill.orange{background:var(--orange);color:#fff}
.pill.ghost{background:#EEF1F7;color:var(--ink-2)}
.conf{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink-2)}
.conf .track{flex:1;height:6px;border-radius:6px;background:#EEF1F7;overflow:hidden}
.conf .fill{height:100%;border-radius:6px;background:var(--blue)}
.conf .fill.hot{background:var(--orange)}
.conf b{color:var(--ink)}

/* ---------- Locked ---------- */
.pick.locked .prow .nm,.pick.locked .pmeta .when{filter:blur(5px);user-select:none}
.pick.locked .pill{background:#EEF1F7;color:var(--ink-3)}
.locktag{position:absolute;inset:0;border-radius:var(--radius);background:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center}
.locktag span{background:var(--navy);color:#fff;padding:9px 18px;border-radius:999px;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;box-shadow:0 8px 20px rgba(6,11,25,.25);cursor:pointer}

/* ---------- Filter chips (Sports / Record) ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 18px 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--card);border:1.5px solid var(--line);color:var(--ink-2);font-family:var(--font-body);font-weight:700;font-size:13.5px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:transform .12s,background .12s,color .12s,border-color .12s}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- KPI cards (Record) ---------- */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px 4px}
.kpi{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 16px}
.kpi .kl{font-size:12.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.kpi .kv{font-family:var(--font-disp);font-size:26px;font-weight:900;letter-spacing:-.5px;margin-top:6px}
.kpi .kv.up{color:var(--green)}
.kpi .kv.down{color:var(--red)}

/* ---------- Record list ---------- */
.reclist{display:flex;flex-direction:column;gap:10px;padding:4px 18px 8px}
.rec{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:13px 15px;display:flex;align-items:center;gap:12px}
.rec .rlogo{width:34px;height:34px;border-radius:10px;background:#F0F3F9;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.rec .rmid{flex:1;min-width:0}
.rec .rmatch{font-family:var(--font-disp);font-weight:700;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec .rsub{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.rec .rsub b{color:var(--ink-2);font-weight:700}
.rec .rres{text-align:right;flex-shrink:0}
.rec .tag{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.04em}
.rec .tag.won{background:rgba(22,163,74,.12);color:var(--green)}
.rec .tag.lost{background:rgba(220,38,38,.12);color:var(--red)}
.rec .runits{display:block;font-family:var(--font-disp);font-weight:800;font-size:15px;margin-top:4px}
.rec .runits.pos{color:var(--green)}
.rec .runits.neg{color:var(--ink-3)}

/* ---------- Account cards ---------- */
.acards{display:flex;flex-direction:column;gap:14px;padding:16px 18px 4px}
.acard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.acard h3{font-family:var(--font-disp);font-size:17px;font-weight:800;letter-spacing:-.2px}
.acard .sub{font-size:13.5px;color:var(--ink-3);margin-top:4px}
.acard.span .plan-now{font-family:var(--font-disp);font-size:22px;font-weight:900;margin:14px 0}
.acard.span .plan-now small{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink-3)}
.btn-blue{display:inline-block;background:var(--blue);color:#fff;border:none;font-family:var(--font-body);font-weight:700;font-size:14.5px;padding:11px 18px;border-radius:12px;cursor:pointer;text-decoration:none;text-align:center}
.btn-blue:active{transform:scale(.97)}
.btn-orange{display:inline-block;background:var(--orange);color:#fff;border:none;font-family:var(--font-body);font-weight:700;font-size:14.5px;padding:11px 18px;border-radius:12px;cursor:pointer;text-decoration:none;text-align:center}
.btn-soft{display:inline-block;background:#EEF1F7;color:var(--ink);border:none;font-family:var(--font-body);font-weight:700;font-size:14.5px;padding:11px 18px;border-radius:12px;cursor:pointer;text-decoration:none;text-align:center}
.arow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
.arow:first-of-type{border-top:none}
.arow .k{color:var(--ink-2);font-weight:600}
.arow .v{font-weight:700}
.arow .v.link{color:var(--blue);text-decoration:none}
.field{margin:12px 0}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.field input{width:100%;background:#F7F9FC;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:var(--font-body);font-size:15px;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--blue);background:#fff}
/* keyboard focus must still show a ring (placed after the :focus rule so equal
   specificity resolves in its favor; overrides the outline:none above) */
.field input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(30,111,255,.16)}
.toggle{width:46px;height:27px;border-radius:999px;background:#D7DDE9;position:relative;cursor:pointer;flex-shrink:0;transition:background .15s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.toggle.on{background:var(--blue)}
.toggle.on::after{left:22px}
.fstatus{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--green);display:none}
.fstatus.show{display:block}

/* ---------- Study score (out of 10) ---------- */
.score{display:inline-flex;align-items:baseline;gap:1px;font-family:var(--font-disp);font-weight:900;line-height:1}
.score .sv{font-size:22px;letter-spacing:-1px}
.score .so{font-size:13px;color:var(--ink-3);font-weight:800}
.score.hi .sv{color:var(--green)}
.score.mid .sv{color:var(--blue)}
.score.low .sv{color:var(--ink-2)}
/* score badge that sits on a pick row */
.scorebadge{display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:58px;text-align:center}
.scorebadge .ring{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-disp);font-weight:900;font-size:17px;color:#fff;background:conic-gradient(var(--blue) var(--p,70%),#E7ECF5 0)}
.scorebadge .ring i{width:38px;height:38px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--ink);font-style:normal}
.scorebadge.hi .ring{background:conic-gradient(var(--green) var(--p,80%),#E7ECF5 0)}
.scorebadge.hot .ring{background:conic-gradient(var(--orange) var(--p,80%),#E7ECF5 0)}
.scorebadge .lbl{font-size:10px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-top:5px}

/* "Most probable winner" callout (kept from How-it-works mockup) */
.mpw{background:linear-gradient(135deg,#0E2F7E,var(--navy));color:#fff;border-radius:16px;padding:14px 16px;margin:0 0 4px;display:flex;align-items:center;gap:13px}
.mpw .mpw-ico{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.mpw .mpw-l{flex:1}
.mpw .mpw-k{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9DC0FF}
.mpw .mpw-v{font-family:var(--font-disp);font-size:18px;font-weight:900;margin-top:2px}
.mpw .mpw-pct{font-family:var(--font-disp);font-size:24px;font-weight:900;color:var(--orange)}

/* ---------- Bottom tabs (DARK) ---------- */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:60;width:100%;max-width:460px;
  background:rgba(6,11,25,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.07);display:flex;padding:8px 6px calc(10px + env(safe-area-inset-bottom))}
.tab{flex:1;background:none;border:none;cursor:pointer;font-family:var(--font-body);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:#6E7E9C;position:relative;padding:4px 0;text-decoration:none}
.tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab.active{color:var(--blue-2)}
.tab:active{opacity:.6}
.tab .badge{position:absolute;top:-2px;left:calc(50% + 6px);background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:999px;border:2px solid var(--navy)}

/* =========================================================
   DESKTOP (web): full-width logged-in dashboard. The same
   app pages expand into a real web layout — top bar, a
   horizontal nav, and multi-column content. Mobile unchanged.
   ========================================================= */
@media (min-width:820px){
  body{display:block;background:var(--bg);}
  .phone{max-width:1120px;width:100%;margin:0 auto;min-height:100vh;height:auto;
    border:none;border-radius:0;box-shadow:none;background:var(--bg);
    display:flex;flex-direction:column;}

  /* header = full top bar */
  .top{order:-2;padding:16px 32px;}

  /* bottom tabs become a horizontal nav under the header */
  .tabs{order:-1;position:static;transform:none;left:auto;bottom:auto;
    width:100%;max-width:none;justify-content:flex-start;gap:4px;
    padding:0 24px;border-top:none;border-bottom:1px solid rgba(255,255,255,.07);
    background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .tab{flex:0 0 auto;flex-direction:row;gap:8px;padding:14px 20px;font-size:13.5px;}
  .tab svg{width:18px;height:18px;}
  .tab.active{box-shadow:inset 0 -3px 0 var(--blue-2);}
  .tab .badge{position:static;top:auto;left:auto;margin-left:2px;border:none;}

  /* content flows with the page (no inner scroll box) */
  .scroll{overflow:visible;height:auto;flex:none;padding-bottom:56px;}

  /* sport scroller spans the width */
  .sports{padding:14px 24px;gap:8px;}

  /* wider section paddings */
  .sec{padding:26px 24px 14px;}
  .hero-wrap{padding:20px 24px 6px;}
  .toppick{margin:6px 24px 0;}
  .trend{padding:2px 24px 10px;}
  .chips{padding:16px 24px 8px;}

  /* picks in a responsive multi-column grid */
  .picklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 24px;}
  .pick{margin:0;}

  /* record + account use the width */
  .kpis{grid-template-columns:repeat(4,1fr);padding:18px 24px 6px;}
  .reclist{padding:6px 24px 10px;}
  .acards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;padding:18px 24px;}
}

/* wider screens: 3 columns of picks */
@media (min-width:1180px){
  .picklist{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* =========================================================
   WIDE / LAPTOP: left sidebar nav (web-app, Rithmm-style).
   Converts the top horizontal nav into a fixed left sidebar.
   ========================================================= */
@media (min-width:1000px){
  .phone{max-width:none;margin:0 0 0 244px;}

  /* the tab bar becomes a fixed left sidebar */
  .tabs{position:fixed;left:0;top:0;bottom:0;width:244px;height:100vh;z-index:60;
    order:0;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:3px;
    border-bottom:none;border-right:1px solid rgba(255,255,255,.08);
    padding:22px 14px;overflow-y:auto;background:var(--navy);}
  .tabs::before{content:"PantherPick";display:block;font-family:var(--font-disp);font-weight:900;
    font-size:20px;letter-spacing:-.5px;color:#fff;padding:2px 14px 20px;}
  .tab{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:13px;width:100%;
    padding:12px 14px;border-radius:12px;font-size:14.5px;color:#93A3C4;}
  .tab svg{width:21px;height:21px;}
  .tab.active{box-shadow:none;background:rgba(30,111,255,.16);color:#fff;}
  .tab:hover{background:rgba(255,255,255,.05);color:#fff;opacity:1;}
  .tab .badge{position:static;margin-left:auto;left:auto;top:auto;border:none;}

  /* top bar keeps only the Upgrade action (brand now lives in the sidebar) */
  .top{justify-content:flex-end;padding:14px 40px;}
  .top .brand{display:none;}
  .pagehead{padding-left:40px;padding-right:40px;}
  .sec,.chips,.hero-wrap,.toppick,.trend,.kpis,.reclist,.acards,.picklist{padding-left:40px;padding-right:40px;}
}