/* APEX glass theme — frosted panels floating over a golden-hour penthouse backdrop. Loaded after the base styles; overrides only surfaces. */
:root{ --panel:rgba(18,20,26,.46); --panel-solid:#141720; --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.22);
  --glass:rgba(14,16,22,.36); --glass-hi:rgba(255,255,255,.16); --glass-shadow:0 24px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.04); }
html{ background:#0a0b0f; } body{ background:transparent!important; }
/* the backdrop: sky, sun, three mountain ranges, a lake and a warm interior floor seen through a glass wall — blurred like a photo behind frosted glass */
body::before{ content:""; position:fixed; inset:-40px; z-index:-2; pointer-events:none; background-size:cover; background-position:center 40%; filter:blur(14px) saturate(1.15) brightness(1.04); transform:scale(1.06);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='sky' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%232a3a66'/><stop offset='.28' stop-color='%237a6f9c'/><stop offset='.48' stop-color='%23e09868'/><stop offset='.62' stop-color='%23f5c994'/></linearGradient><radialGradient id='sun' cx='.3' cy='.62' r='.35'><stop offset='0' stop-color='%23fff0cf' stop-opacity='.95'/><stop offset='.35' stop-color='%23ffb36b' stop-opacity='.55'/><stop offset='1' stop-color='%23ffb36b' stop-opacity='0'/></radialGradient><linearGradient id='lake' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23c98f68'/><stop offset='1' stop-color='%234a5a7a'/></linearGradient><linearGradient id='floor' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23463a30'/><stop offset='1' stop-color='%23161318'/></linearGradient></defs><rect width='1600' height='1000' fill='url(%23sky)'/><rect width='1600' height='1000' fill='url(%23sun)'/><path d='M0 560 C 180 500 260 540 400 470 C 520 410 600 480 760 440 C 900 405 980 470 1120 430 C 1280 385 1380 460 1600 420 L1600 700 L0 700Z' fill='%234a4f7a' opacity='.9'/><path d='M0 620 C 150 585 240 610 380 560 C 520 510 640 590 780 545 C 920 500 1040 585 1200 540 C 1340 500 1460 560 1600 530 L1600 720 L0 720Z' fill='%23384066'/><path d='M0 680 C 200 650 320 690 470 640 C 640 585 760 660 920 630 C 1080 600 1220 660 1600 640 L1600 760 L0 760Z' fill='%23242b47'/><rect y='690' width='1600' height='110' fill='url(%23lake)' opacity='.75'/><rect y='780' width='1600' height='220' fill='url(%23floor)'/><rect x='0' y='0' width='1600' height='1000' fill='none'/><g fill='%230f0f12' opacity='.85'><rect x='520' y='0' width='14' height='800'/><rect x='1060' y='0' width='14' height='800'/><rect x='0' y='0' width='1600' height='46'/></g><ellipse cx='800' cy='930' rx='520' ry='70' fill='%23a98a6a' opacity='.25'/></svg>"); }
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(1400px 800px at 50% 10%, rgba(0,0,0,0), rgba(0,0,0,.22) 75%), linear-gradient(180deg, rgba(5,6,9,.12), rgba(5,6,9,.38)); }
/* frosted surfaces */
.card,.panel,.tile,.hub-hero,.hub-card,.ofc-det,.ofc-feed,.jv,.jv-dock,.lx-card,.op-panel,.sim-side,.acct-card,.dossier,.hub-g3>*,.hub-g2>*,.hub-news>*,.hub-ch>*,.hub-wk>*{
  background:var(--glass)!important; backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--line)!important; border-radius:18px; box-shadow:var(--glass-shadow); }
.card,.tile{ transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
.card:hover,.tile:hover{ transform:translateY(-4px); border-color:var(--glass-hi)!important; box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.06); }
/* floating pill header + nav */
.top{ background:transparent!important; border-bottom:0!important; backdrop-filter:none; padding:14px 22px!important; }
.top::before{ content:""; position:absolute; inset:8px 14px; border-radius:22px; background:rgba(12,14,20,.42); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border:1px solid var(--line); box-shadow:var(--glass-shadow); z-index:-1; }
.top{ position:sticky; }
.nav{ background:rgba(255,255,255,.05)!important; border:1px solid rgba(255,255,255,.1)!important; border-radius:999px!important; padding:4px!important; }
.nav a,.nav button,.nav .tab{ border-radius:999px!important; }
.nav a.on,.nav .on,.nav a[aria-current]{ background:rgba(255,255,255,.14)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.btn,button.btn{ border-radius:999px; backdrop-filter:blur(10px); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.btn:hover{ background:rgba(255,255,255,.13); }
input,select,textarea{ background:rgba(10,12,16,.5)!important; border-color:rgba(255,255,255,.12)!important; border-radius:12px; }
/* pages that paint their own stage keep their look; just soften their chrome */
.ofc{ background:transparent!important; }
.ofc-hud{ background:rgba(10,12,18,.5)!important; backdrop-filter:blur(18px); border-radius:18px; margin:10px 14px 0; border:1px solid var(--line)!important; }
.ofc-scene{ border-radius:18px; overflow:hidden; border:1px solid var(--line); }
/* mobile: lighter blur so scrolling stays smooth */
@media (max-width:760px){ body::before{ filter:blur(10px) saturate(1.1) brightness(.9); } .card,.panel,.tile,.hub-hero,.ofc-det,.ofc-feed,.jv{ backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); border-radius:14px; } .top::before{ inset:6px 8px; border-radius:16px; } .card:hover,.tile:hover{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .card,.tile{ transition:none; } }
/* secondary navigation inside Academy and Journal */
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);width:max-content;max-width:100%}
.subnav button{border:0;background:transparent;color:var(--muted);font:600 13px var(--font-body);padding:7px 14px;border-radius:999px;cursor:pointer} .subnav button[aria-current="page"]{background:rgba(255,255,255,.12);color:var(--ink)} .subnav button:hover{color:var(--ink)}
body.lx .subnav{margin:12px 0 0 12px}
/* phone: nothing below 11.5px (labels, pills, eyebrows, table heads); diagram text stays as drawn */
@media (max-width:760px){
  .label,.eyebrow,.pill,.tag,.dn,.hp-k,.cal-h,.lu-st,.op-spread,.op-keys,.vtag,.lx-ex,th,.rail h3,.sstrip span,.hh-sub em,.hub-wk em{font-size:11.5px!important}
  .small,.muted.small,small{font-size:12.5px!important}
  .sstrip b,.sstrip em,.hh-sub b,.hh-sub em{font-size:11.5px!important}
  .eyebrow,.label{letter-spacing:.5px}
  body{-webkit-text-size-adjust:100%}
}

/* ---- phone fit-ups: every tab visible, nothing wider than the screen ---- */
@media (max-width:560px){
  .nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px!important;overflow:visible!important;border-radius:16px!important;padding:4px!important;width:100%}
  .nav button{flex:none;width:100%;padding:8px 4px!important;font-size:12.5px!important;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:11px!important}
  .lesson,.card,.panel,.tile,.hub-hero,.jv{box-sizing:border-box;max-width:100%}
  .lesson .why,.lesson h2{overflow-wrap:anywhere}
  .jump,#jump-day,.lesson-head{max-width:100%;box-sizing:border-box;min-width:0}
  .lesson-wrap{grid-template-columns:minmax(0,1fr)!important}
  .lesson-wrap>*{min-width:0}
  .tbl,.jwrap,.arena-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.arena{min-width:560px}
  .wk-grid b{font-size:18px}
}
@media (max-width:1100px){
  .hub-hero{grid-template-columns:minmax(0,1fr)!important}
  .hub-hero>*{min-width:0}
  .hh-sub .sess,.hh-sub .sess span{white-space:normal}
  .hh-pulse .row>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .hh-pulse .hl,.hh-pulse .num{overflow-wrap:anywhere}
}
@media (max-width:560px){
  .top{position:relative}
  #signout{position:absolute;top:10px;right:12px;margin:0!important;padding:4px 9px!important;font-size:11px!important;border-radius:999px;opacity:.8}
  .hh-greet{font-size:22px}
}

/* Coach's trader profile card */
.pf .pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 18px;margin-top:8px}.pf .pf-ul{margin:4px 0 0;padding-left:18px;font-size:13.5px;line-height:1.45}.pf .pf-ul.good li::marker{color:#5eead4}.pf .pf-ul.bad li::marker{color:#fb7185}.pf .label .chip{margin-left:6px;font-size:11px;padding:2px 8px}

/* 24-hour Arena */
.gx-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.gx-strip{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}.gx-s{padding:5px 11px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--muted)}.gx-s.on{border-color:var(--accent);color:var(--text);background:rgba(94,234,212,.1);font-weight:700}table.gx td,table.gx th{white-space:nowrap}
