/* Quantum Leap - client portal
   Palette off the logo family: near-black to deep navy, white, #F8F088, Incubator blue. */

:root{
  --ink:#04060A; --navy:#0A1B2E; --navy-2:#0E2A45;
  --yellow:#F8F088; --yellow-dim:#B8B15C; --blue:#3FA9F5;
  --text:#EDF1F6; --muted:#8A9AAC; --faint:#5C6B7C;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.035); --card-hi:rgba(255,255,255,.06);
  /* Anton belongs to the logo. Inside the app the display face is the serif. */
  --logo:'Anton','Haettenschweiler','Arial Narrow',sans-serif;
  --head:'Outfit',-apple-system,'Segoe UI',sans-serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r:16px; --bar:64px; --wrap:1120px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--ink); color:var(--text); font-family:var(--ui);
      font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
      min-height:100vh; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; border-radius:6px; }

/* ---------------------------------------------------------------- backdrop */
.bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
     background:radial-gradient(120% 80% at 50% -10%,#0A1A2C 0%,#05080D 48%,#04060A 100%); }
.bg i{ position:absolute; display:block; border-radius:50%; filter:blur(90px); }
.glow-navy{ width:900px; height:700px; left:-180px; top:-260px;
            background:radial-gradient(circle,rgba(31,90,150,.30),transparent 70%); }
.glow-yellow{ width:680px; height:520px; right:-160px; top:-180px;
              background:radial-gradient(circle,rgba(248,240,136,.10),transparent 70%); }
.grain{ inset:0; width:100%; height:100%; border-radius:0; filter:none; opacity:.035;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ topbar */
.topbar{ position:sticky; top:0; z-index:40; height:var(--bar); display:flex;
         align-items:center; gap:18px; padding:0 22px; background:rgba(4,6,10,.72);
         backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand img{ width:30px; height:30px; object-fit:contain; }
.brand span{ font-family:var(--logo); font-size:19px; letter-spacing:.06em;
             text-transform:uppercase; line-height:1; }
.brand i{ font-style:normal; color:var(--yellow); }

.mainnav{ display:flex; gap:3px; margin-inline:auto; padding:4px; min-width:0;
          border:1px solid var(--line); border-radius:999px;
          background:rgba(255,255,255,.025); overflow-x:auto; scrollbar-width:none; }
.mainnav::-webkit-scrollbar{ display:none; }
.mainnav a{ padding:7px 13px; border-radius:999px; font-size:11.5px; font-weight:600;
            letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
            white-space:nowrap; transition:color .18s,background .18s; }
.mainnav a:hover{ color:var(--text); }
.mainnav a.on{ color:var(--ink); background:var(--yellow); }

.who{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.tierpick{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
           color:var(--yellow); border:1px solid rgba(248,240,136,.32); border-radius:999px;
           padding:5px 12px; background:rgba(248,240,136,.06); }
.tierpick:hover{ background:rgba(248,240,136,.13); }
.avatar{ width:34px; height:34px; border-radius:50%; font-weight:700; font-size:13px;
         background:linear-gradient(150deg,#1B4870,#0C2038); border:1px solid var(--line-2); }
.tabbar{ display:none; }

.menuwrap{ position:relative; }
.usermenu{ position:absolute; right:0; top:calc(100% + 10px); width:268px; z-index:50;
  background:rgba(9,13,20,.97); backdrop-filter:blur(20px); border:1px solid var(--line-2);
  border-radius:14px; padding:8px; box-shadow:0 26px 60px -20px rgba(0,0,0,.9); }
.usermenu .head{ display:flex; align-items:center; gap:12px; padding:10px 12px 14px;
                 border-bottom:1px solid var(--line); margin-bottom:6px; }
.usermenu .head .av{ width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-weight:700;
  background:linear-gradient(150deg,#1B4870,#0C2038); border:1px solid var(--line-2); }
.usermenu .head b{ display:block; font-size:14.5px; font-weight:600; }
.usermenu .head small{ color:var(--faint); font-size:12px; }
.usermenu a,.usermenu button{ display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border-radius:9px; font-size:14px; text-align:left; color:var(--text);
  transition:background .14s; }
.usermenu a:hover,.usermenu button:hover{ background:rgba(255,255,255,.06); }
.usermenu .ic{ width:18px; text-align:center; color:var(--faint); font-size:13px; }
.usermenu .sep{ height:1px; background:var(--line); margin:6px 4px; }
.usermenu .rolehint{ padding:6px 12px 8px; font-size:11px; color:var(--faint); }

/* -------------------------------------------------------------------- page */
main{ max-width:var(--wrap); margin:0 auto; padding:38px 22px 110px; }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
          color:var(--faint); margin:0 0 10px; }
h1.page{ font-family:var(--head); font-weight:700; font-size:clamp(30px,4.4vw,44px);
         letter-spacing:-.03em; margin:0 0 8px; line-height:1.06; }
h1.page em{ font-style:normal; color:var(--yellow); }
.lede{ color:var(--muted); margin:0 0 30px; max-width:62ch; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); }
.grid{ display:grid; gap:14px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:11px 24px; border-radius:999px; background:var(--yellow); color:#0A0C10;
      font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
      white-space:nowrap; box-shadow:0 8px 26px -12px rgba(248,240,136,.7);
      transition:transform .15s,filter .15s; }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line-2);
            box-shadow:none; }
.btn.ghost:hover{ border-color:var(--yellow); color:var(--yellow); }

.meter{ height:4px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; }
.meter i{ display:block; height:100%; border-radius:999px;
          background:linear-gradient(90deg,var(--yellow-dim),var(--yellow)); transition:width .4s; }
.meterline{ display:flex; justify-content:space-between; gap:12px; margin-top:8px;
            font-size:11.5px; letter-spacing:.06em; color:var(--faint);
            text-transform:uppercase; font-weight:600; }

.chip{ display:inline-block; font-size:11px; letter-spacing:.06em; color:var(--muted);
       border:1px solid var(--line); border-radius:999px; padding:2px 9px; }
.chip.link{ color:var(--blue); border-color:rgba(63,169,245,.3); }
.chip.link:hover{ background:rgba(63,169,245,.1); }
.chip.soon{ color:var(--faint); }
.chip.late{ color:#FF8F8F; border-color:rgba(255,107,107,.35); }
.tag{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.14em;
      text-transform:uppercase; padding:3px 9px; border-radius:999px;
      background:rgba(248,240,136,.14); color:var(--yellow); }
.tag.live{ background:rgba(255,90,90,.16); color:#FF8F8F; animation:pulse 2s infinite; }
@keyframes pulse{ 50%{ opacity:.55; } }

.sec-h{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
        margin:38px 0 14px; }
.sec-h h2{ font-family:var(--ui); font-size:12.5px; letter-spacing:.2em;
           text-transform:uppercase; color:var(--text); margin:0; font-weight:600; }
.sec-h a{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
          color:var(--yellow); }
.empty{ padding:38px 22px; text-align:center; color:var(--faint);
        border:1px dashed var(--line); border-radius:var(--r); }

/* -------------------------------------------------------------------- home */
.hero{ text-align:center; padding:26px 0 34px; }
.hero h1{ font-family:var(--head); font-weight:700; font-size:clamp(34px,5.6vw,56px);
          letter-spacing:-.035em; line-height:1.02; margin:0; }
.hero h1 em{ font-style:normal; color:var(--yellow); }
.hero p{ color:var(--muted); margin:0; }

.tiles{ grid-template-columns:repeat(3,1fr); }
.tile{ position:relative; padding:22px; border-radius:var(--r); overflow:hidden;
       display:flex; flex-direction:column; gap:6px; min-height:140px;
       background:linear-gradient(155deg,rgba(248,240,136,.20),rgba(248,240,136,.05) 62%);
       border:1px solid rgba(248,240,136,.30);
       transition:border-color .22s,transform .22s,box-shadow .22s,background .22s; }
.tile::after{ content:''; position:absolute; inset:0; opacity:.6; pointer-events:none;
              transition:opacity .22s;
              background:radial-gradient(90% 70% at 100% 0,rgba(248,240,136,.22),transparent 62%); }
.tile:hover{ transform:translateY(-3px); border-color:rgba(248,240,136,.62);
             box-shadow:0 0 0 1px rgba(248,240,136,.2),0 20px 54px -24px rgba(248,240,136,.7); }
.tile:hover::after{ opacity:1; }
.tile .ic{ font-size:19px; line-height:1; margin-bottom:8px; color:var(--yellow);
           position:relative; z-index:1; }
.tile b{ font-size:16px; font-weight:600; letter-spacing:-.1px; position:relative; z-index:1; }
.tile small{ color:rgba(255,255,255,.78); font-size:12.5px; line-height:1.45;
             position:relative; z-index:1; }

.dash{ grid-template-columns:repeat(3,1fr); }
.dashcard{ padding:20px; border-radius:var(--r); border:1px solid var(--line);
           background:var(--card); display:flex; flex-direction:column; gap:6px; }
.dashcard b{ font-family:var(--head); font-size:19px; font-weight:700; letter-spacing:-.02em; }
.dashcard small{ color:var(--faint); font-size:12.5px; flex:1; margin-bottom:12px; }
.dashcard .btn{ align-self:flex-start; }

.nextup{ display:flex; align-items:center; gap:16px; padding:16px 20px; }
.nextup .n{ font-family:var(--ui); font-weight:700; font-size:14px; color:var(--yellow-dim);
            min-width:38px; }
.nextup .body{ flex:1; min-width:0; }
.nextup b{ display:block; font-weight:600; font-size:15px; }
.nextup small{ color:var(--faint); font-size:12.5px; }

.replay{ display:flex; align-items:center; gap:18px; padding:14px 18px; }
.replay .thumb{ width:132px; aspect-ratio:16/9; object-fit:cover; border-radius:10px;
                flex:0 0 auto; border:1px solid var(--line); }
.replay .body b{ display:block; margin-top:7px; font-size:15.5px; }
.replay .body small{ color:var(--faint); font-size:12.5px; }

/* -------------------------------------------------------------------- todo */
.todolist .row:last-child{ border-bottom:0; }
.row{ display:flex; align-items:flex-start; gap:14px; padding:14px 20px;
      border-bottom:1px solid rgba(255,255,255,.045); transition:background .15s; }
.row:hover{ background:rgba(255,255,255,.028); }
.row .t{ flex:1; min-width:0; }
.row .t b{ display:block; font-weight:500; font-size:14.5px; letter-spacing:-.1px; }
.row .t small{ color:var(--faint); font-size:12.5px; display:block; margin-top:2px; }
.row.done .t b{ color:var(--faint); text-decoration:line-through; }
.row .meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.row .wk{ font-family:var(--ui); font-weight:700; font-size:13px; color:var(--yellow-dim);
          min-width:96px; }
.tick{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-2);
       flex:0 0 auto; display:grid; place-items:center; font-size:11px; color:transparent;
       transition:.16s; margin-top:1px; }
.tick:hover{ border-color:var(--yellow); }
.tick.done{ background:var(--yellow); border-color:var(--yellow); color:#0A0C10; }
.flag{ font-size:14px; line-height:1.4; flex:0 0 auto; }
.del{ color:var(--faint); font-size:12px; padding:2px 6px; border-radius:6px; opacity:0;
      transition:.15s; }
.row:hover .del{ opacity:1; }
.del:hover{ color:#FF8F8F; background:rgba(255,107,107,.1); }

.addtodo{ padding:18px 20px; margin-bottom:8px; display:grid; gap:10px; }
.addtodo input,.addtodo select{ width:100%; padding:11px 14px; border-radius:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--text);
  font:inherit; outline:none; }
.addtodo input:focus,.addtodo select:focus{ border-color:rgba(248,240,136,.5); }
.addtodo .fields{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.addtodo label{ font-size:10.5px; font-weight:700; letter-spacing:.14em;
                text-transform:uppercase; color:var(--faint); display:grid; gap:5px; flex:1;
                min-width:130px; }
.addtodo .btn{ flex:0 0 auto; }

/* ----------------------------------------------------------------- modules */
.pills{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 26px; }
.pill{ padding:8px 16px; border-radius:999px; border:1px solid var(--line); font-size:12.5px;
       font-weight:600; color:var(--muted); background:rgba(255,255,255,.02); transition:.16s; }
.pill:hover{ color:var(--text); border-color:var(--line-2); }
.pill.on{ color:var(--ink); background:var(--yellow); border-color:var(--yellow); }
.pill .c{ opacity:.55; margin-left:6px; font-weight:500; }

.mods{ grid-template-columns:repeat(3,1fr); gap:18px; }
.mod{ border-radius:var(--r); border:1px solid var(--line); background:var(--card);
      overflow:hidden; display:flex; flex-direction:column;
      transition:border-color .25s,transform .25s,box-shadow .25s; }
.mod:hover{ transform:translateY(-4px); border-color:rgba(248,240,136,.55);
            box-shadow:0 0 0 1px rgba(248,240,136,.22),
                       0 0 34px -6px rgba(248,240,136,.30),
                       0 26px 60px -28px rgba(248,240,136,.7); }
.mod.locked{ opacity:.5; }
.mod.locked:hover{ transform:none; border-color:var(--line-2); box-shadow:none; }
.cover{ position:relative; aspect-ratio:16/9; display:block; border-bottom:1px solid var(--line);
        background:linear-gradient(145deg,#0D2842,#060E18 70%); }
.cover img{ width:100%; height:100%; object-fit:cover; }
.cover .lock{ position:absolute; top:10px; right:10px; font-size:11px; font-weight:700;
              letter-spacing:.1em; text-transform:uppercase; padding:4px 10px;
              border-radius:999px; background:rgba(4,6,10,.82);
              border:1px solid var(--line-2); color:var(--muted); }
.mod .b{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:7px; flex:1; }
.mod h3{ font-family:var(--head); font-size:20px; font-weight:700; margin:0;
         letter-spacing:-.02em; line-height:1.25; color:#fff; }
.mod p{ color:var(--text); opacity:.72; font-size:12.5px; margin:0; flex:1; line-height:1.5; }
.mod .foot{ margin-top:8px; }

.back{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
       letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:22px; }
.back:hover{ color:var(--yellow); }
.back.hot{ color:var(--yellow); border:1px solid rgba(248,240,136,.32); border-radius:999px;
           padding:7px 14px; background:rgba(248,240,136,.07); }
.back.hot:hover{ background:rgba(248,240,136,.15); }

.sect{ border:1px solid var(--line); border-radius:var(--r); background:var(--card);
       margin-bottom:12px; overflow:hidden; }
.sect > summary{ list-style:none; cursor:pointer; padding:16px 20px; display:flex;
                 align-items:center; gap:14px; }
.sect > summary::-webkit-details-marker{ display:none; }
.sect summary .t{ flex:1; min-width:0; }
.sect summary b{ display:block; font-size:14.5px; font-weight:600; }
.sect summary small{ color:var(--faint); font-size:12px; }
.sect summary .cnt{ font-size:11.5px; font-weight:600; letter-spacing:.08em;
                    color:var(--faint); text-transform:uppercase; }
.sect summary .chev{ color:var(--faint); transition:transform .2s; font-size:11px; }
.sect[open] summary .chev{ transform:rotate(90deg); }
.sect .rows{ border-top:1px solid var(--line); }

/* ------------------------------------------------------------------ lesson */
.lessonwrap{ display:grid; grid-template-columns:268px 1fr; gap:26px; align-items:start; }
.lessonnav{ position:sticky; top:calc(var(--bar) + 18px); }
.navbox{ border:1px solid var(--line); border-radius:var(--r); background:var(--card);
         overflow:hidden; }
.navbox > summary{ list-style:none; cursor:pointer; padding:14px 16px; display:flex;
                   align-items:center; gap:10px; font-size:13px; font-weight:600; }
.navbox > summary::-webkit-details-marker{ display:none; }
.navbox summary .chev{ color:var(--faint); font-size:10px; transition:transform .2s; }
.navbox[open] summary .chev{ transform:rotate(90deg); }
.navbox summary .cnt{ margin-left:auto; font-size:11px; color:var(--faint); }
.navbody{ border-top:1px solid var(--line); max-height:62vh; overflow-y:auto; padding:6px; }
.navsec{ padding:8px 4px; }
.navsec b{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em;
           text-transform:uppercase; color:var(--faint); padding:0 10px 6px; }
.navsec a{ display:flex; gap:9px; padding:8px 10px; border-radius:9px; font-size:13px;
           line-height:1.35; color:var(--muted); transition:.14s; }
.navsec a:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.navsec a.on{ background:rgba(248,240,136,.12); color:var(--yellow); font-weight:600; }
.navsec a.done i{ color:var(--yellow); }
.navsec a i{ font-style:normal; color:var(--faint); font-size:11px; flex:0 0 auto;
             margin-top:1px; }

.player{ aspect-ratio:16/9; border-radius:var(--r); border:1px solid rgba(248,240,136,.38);
         background:linear-gradient(150deg,#0C2438,#05090F); display:grid; place-items:center;
         margin-bottom:26px; box-shadow:0 0 30px -14px rgba(248,240,136,.35); }
.player .play{ width:64px; height:64px; border-radius:50%; background:rgba(248,240,136,.14);
               border:1px solid rgba(248,240,136,.4); display:grid; place-items:center;
               color:var(--yellow); font-size:22px; margin:0 auto; }
.player small{ display:block; text-align:center; color:var(--faint); margin-top:12px;
               font-size:12px; }
.prose{ max-width:70ch; color:var(--muted); }
.prose p{ margin:0 0 14px; }
.lessonfoot{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:30px;
             padding-top:24px; border-top:1px solid var(--line); }

/* ----------------------------------------------------------------- roadmap */
.phasetabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.phasetab{ padding:9px 18px; border-radius:999px; border:1px solid var(--line);
           font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
           color:var(--muted); display:inline-flex; align-items:center; gap:8px; }
.phasetab:hover{ color:var(--text); border-color:var(--line-2); }
.phasetab.on{ color:var(--ink); background:var(--yellow); border-color:var(--yellow); }
.phasetab.locked{ opacity:.45; }
.phasehead{ padding:24px 26px; margin:18px 0 22px;
            background:linear-gradient(120deg,rgba(31,90,150,.16),rgba(255,255,255,.02) 60%);
            border:1px solid var(--line); border-radius:var(--r); }
.phasehead h2{ font-family:var(--head); font-weight:700; font-size:clamp(24px,3.4vw,34px);
               letter-spacing:-.03em; margin:4px 0 6px; line-height:1.1; }
.phasehead .range{ color:var(--yellow); font-weight:600; font-size:13px; letter-spacing:.08em;
                   text-transform:uppercase; }
.phasehead p{ color:var(--muted); margin:10px 0 18px; max-width:72ch; }
.task .num{ font-family:var(--ui); font-weight:700; font-size:12px; color:var(--yellow-dim);
            min-width:34px; padding-top:2px; }
.note{ margin:9px 0 0; padding:11px 14px; border-left:2px solid rgba(248,240,136,.35);
       background:rgba(248,240,136,.045); border-radius:0 9px 9px 0; color:var(--muted);
       font-size:13px; line-height:1.55; }
.notetog{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
          color:var(--yellow-dim); margin-top:6px; }
.notetog:hover{ color:var(--yellow); }

/* ------------------------------------------------------------------- calls */
.callrow .when{ min-width:74px; flex:0 0 auto; }
.callrow .when b{ display:block; font-size:14.5px; font-weight:600; }
.callrow .when small{ color:var(--faint); font-size:11.5px; }

.monthbar{ display:flex; align-items:center; justify-content:center; gap:16px;
           margin-bottom:16px; }
.monthbar b{ font-family:var(--head); font-weight:600; font-size:20px; letter-spacing:-.01em;
             min-width:220px; text-align:center; color:#fff; }

/* Skool-style: a plain sentence you can click, not a bubble. */
.monthgrid{ display:grid; grid-template-columns:repeat(7,1fr);
            border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
            background:var(--card); }
.monthgrid .dow{ font-size:10.5px; font-weight:700; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--faint); text-align:center;
                 padding:12px 0; border-bottom:1px solid var(--line);
                 background:rgba(255,255,255,.025); }
.cell{ min-height:112px; padding:8px; display:flex; flex-direction:column; gap:3px;
       border-right:1px solid rgba(255,255,255,.05);
       border-bottom:1px solid rgba(255,255,255,.05); }
.cell:nth-child(7n+7){ border-right:0; }
.cell.blank{ background:rgba(0,0,0,.14); }
.dnum{ font-style:normal; font-size:11.5px; font-weight:600; color:var(--faint);
       padding:0 2px 2px; }
.cell.today .dnum{ color:var(--ink); background:var(--yellow); border-radius:999px;
                   width:21px; height:21px; display:grid; place-items:center; padding:0; }
.ev{ display:flex; align-items:baseline; gap:5px; font-size:11px; line-height:1.35;
     padding:2px 3px; border-radius:4px; color:var(--text); white-space:nowrap;
     overflow:hidden; text-overflow:ellipsis; }
.ev .dot{ width:6px; height:6px; border-radius:50%; background:var(--yellow);
          flex:0 0 auto; align-self:center; }
.ev em{ font-style:normal; color:var(--muted); flex:0 0 auto; }
.ev:hover{ background:rgba(255,255,255,.07); }
.ev.past{ opacity:.45; }
.ev.past .dot{ background:var(--faint); }

/* modal */
.modalwrap{ position:fixed; inset:0; z-index:60; display:grid; place-items:center;
            padding:20px; background:rgba(2,4,8,.72); backdrop-filter:blur(6px);
            animation:fade .16s ease-out; }
@keyframes fade{ from{ opacity:0; } }
.modal{ position:relative; width:min(520px,100%); max-height:90vh; overflow-y:auto;
        background:#0A0E15; border:1px solid var(--line-2); border-radius:18px;
        box-shadow:0 40px 90px -30px rgba(0,0,0,.95); }
.modal .x{ position:absolute; top:12px; right:12px; z-index:2; width:32px; height:32px;
           border-radius:50%; background:rgba(4,6,10,.7); color:var(--text);
           display:grid; place-items:center; font-size:13px; }
.modal .x:hover{ background:rgba(4,6,10,.95); color:var(--yellow); }
.mcover{ width:100%; aspect-ratio:1460/752; object-fit:cover;
         border-bottom:1px solid var(--line); }
.mbody{ padding:22px 24px 24px; }
.mbody h2{ font-family:var(--head); font-weight:700; font-size:26px; margin:0 0 12px;
           line-height:1.12; letter-spacing:-.02em; }
.mwhen{ display:grid; gap:2px; margin-bottom:16px; }
.mwhen b{ font-size:14.5px; font-weight:600; }
.mwhen span{ font-size:13px; color:var(--muted); }
.mwhen .mut{ color:var(--faint); font-size:12px; }
.mbody p{ color:var(--muted); margin:0 0 18px; }
.mbody .mut{ color:var(--faint); font-size:13px; }
.precall{ display:grid; gap:4px; padding:14px 16px; margin-bottom:18px; border-radius:12px;
          border:1px solid rgba(248,240,136,.22); background:rgba(248,240,136,.05); }
.precall b{ font-size:13.5px; font-weight:600; }
.precall span{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.precall .btn{ justify-self:start; }
.mfoot{ display:flex; gap:10px; flex-wrap:wrap; }

/* ------------------------------------------------------------------- forms */
.form{ display:grid; gap:18px; max-width:760px; }
.field label{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.14em;
              text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.field .hint{ font-size:12px; color:var(--faint); font-weight:400; letter-spacing:0;
              text-transform:none; margin-left:8px; }
.field input,.field textarea{ width:100%; padding:12px 15px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--text);
  font:inherit; outline:none; transition:border-color .16s; }
.field input:focus,.field textarea:focus{ border-color:rgba(248,240,136,.5); }
.field textarea{ min-height:96px; resize:vertical; }
.metrics{ grid-template-columns:repeat(2,1fr); }
.metricrow{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:12px;
            border:1px solid var(--line); background:rgba(255,255,255,.028); }
.metricrow .t{ flex:1; min-width:0; }
.metricrow b{ display:block; font-size:14px; font-weight:500; }
.metricrow small{ color:var(--faint); font-size:12px; }
.metricrow input{ width:112px; text-align:right; padding:9px 12px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--text);
  font:inherit; outline:none; }

/* ---------------------------------------------------------------------- AI */
.chat{ display:flex; flex-direction:column; min-height:56vh; }
.thread{ flex:1; display:flex; flex-direction:column; gap:16px; padding:6px 0 22px; }
.msg{ max-width:74ch; }
.msg.me{ align-self:flex-end; background:rgba(63,169,245,.10);
         border:1px solid rgba(63,169,245,.24); padding:12px 16px;
         border-radius:16px 16px 4px 16px; }
.msg.ai b{ display:block; font-size:11px; font-weight:700; letter-spacing:.16em;
           text-transform:uppercase; color:var(--yellow); margin-bottom:6px; }
.msg.ai p{ margin:0; }
.composer{ display:flex; gap:10px; align-items:flex-end; padding:12px 14px;
           border-radius:18px; border:1px solid var(--line-2);
           background:rgba(255,255,255,.04); position:sticky; bottom:16px; }
.composer textarea{ flex:1; background:none; border:0; resize:none; color:var(--text);
                    font:inherit; max-height:160px; outline:none; }
.composer textarea::placeholder{ color:var(--faint); }

/* --------------------------------------------------------- profile/members */
.profhead{ display:flex; align-items:center; gap:20px; margin-bottom:30px; }
.profhead .av{ width:76px; height:76px; border-radius:50%; flex:0 0 auto; font-size:25px;
               display:grid; place-items:center; font-weight:700;
               background:linear-gradient(150deg,#1B4870,#0C2038); border:1px solid var(--line-2); }
.profhead h1{ font-family:var(--head); font-weight:700; font-size:32px; margin:0;
              letter-spacing:-.03em; line-height:1.1; }
.profhead .sub{ color:var(--faint); font-size:13.5px; margin-top:3px; }
.stats{ grid-template-columns:repeat(4,1fr); margin-bottom:30px; }
.stat{ padding:18px 20px; border-radius:var(--r); background:var(--card);
       border:1px solid var(--line); }
.stat span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
            text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.stat b{ font-family:var(--head); font-size:28px; font-weight:700; line-height:1;
         letter-spacing:-.02em; }
.stat b em{ font-style:normal; font-size:15px; color:var(--faint); }

.mtable{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
         background:var(--card); }
.mrow{ display:grid; grid-template-columns:1.5fr .8fr 1fr .7fr auto; gap:16px;
       align-items:center; padding:14px 20px;
       border-bottom:1px solid rgba(255,255,255,.045); }
.mrow:last-child{ border-bottom:0; }
.mrow.head{ background:rgba(255,255,255,.03); border-bottom:1px solid var(--line); }
.mrow.head span{ font-size:10.5px; font-weight:700; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--faint); }
.mrow .person{ display:flex; align-items:center; gap:12px; min-width:0; }
.mrow .person .av{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; font-size:12px;
                   display:grid; place-items:center; font-weight:700;
                   background:linear-gradient(150deg,#1B4870,#0C2038);
                   border:1px solid var(--line-2); }
.mrow .person b{ display:block; font-size:14.5px; font-weight:500; }
.mrow .person small{ color:var(--faint); font-size:12px; }
.mrow .last{ font-size:12.5px; color:var(--faint); }
.badge{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.1em;
        text-transform:uppercase; padding:3px 10px; border-radius:999px; }
.badge.academy{ background:rgba(255,255,255,.07); color:var(--muted); }
.badge.incubator{ background:rgba(248,240,136,.14); color:var(--yellow); }
.badge.mastermind{ background:rgba(63,169,245,.16); color:var(--blue); }

.upsell{ padding:26px; border:1px solid rgba(248,240,136,.24); border-radius:var(--r);
         background:linear-gradient(120deg,rgba(248,240,136,.07),rgba(255,255,255,.02) 60%); }
.upsell h3{ font-family:var(--head); font-weight:700; font-size:24px; letter-spacing:-.02em;
            margin:0 0 8px; }
.upsell p{ color:var(--muted); margin:0 0 18px; max-width:56ch; }

/* -------------------------------------------------------------- responsive */
@media (max-width:1040px){
  .tiles,.dash,.mods{ grid-template-columns:repeat(2,1fr); }
  .lessonwrap{ grid-template-columns:1fr; }
  .lessonnav{ position:static; }
  .navbody{ max-height:44vh; }
}
@media (max-width:720px){
  :root{ --bar:56px; }
  main{ padding:22px 16px 108px; }
  .topbar{ padding:0 14px; gap:10px; }
  .mainnav{ display:none; }
  .brand span{ font-size:17px; }
  .tierpick{ padding:4px 10px; font-size:10px; }

  .tabbar{ display:grid; grid-template-columns:repeat(5,1fr); position:fixed; z-index:40;
    left:0; right:0; bottom:0; padding:7px 4px calc(7px + env(safe-area-inset-bottom));
    background:rgba(4,6,10,.92); backdrop-filter:blur(18px);
    border-top:1px solid var(--line); }
  .tabbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:7px 2px; min-height:48px; font-size:9.5px; font-weight:600;
    letter-spacing:.03em; text-transform:uppercase; color:var(--faint); text-align:center; }
  .tabbar a .ic{ font-size:17px; line-height:1; }
  .tabbar a.on{ color:var(--yellow); }

  .tiles,.dash,.mods,.metrics,.stats{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .hero{ padding:14px 0 26px; }
  .sec-h{ margin:30px 0 12px; }

  /* touch targets */
  .row{ padding:14px 16px; gap:12px; }
  .tick{ width:26px; height:26px; }
  .del{ opacity:1; padding:6px 8px; }
  .sect > summary{ padding:15px 16px; }
  .chip{ padding:3px 10px; }
  .btn{ padding:12px 22px; }
  .pill{ padding:9px 16px; }
  .phasetab{ padding:10px 16px; }
  .usermenu{ position:fixed; left:12px; right:12px; top:calc(var(--bar) + 8px); width:auto; }

  /* calendar: dots only, the day opens the list */
  .cell{ min-height:66px; padding:5px 3px; }
  .ev{ font-size:0; padding:0; gap:0; justify-content:center; }
  .ev em{ display:none; }
  .ev .dot{ width:5px; height:5px; margin:2px auto 0; }
  .monthbar b{ min-width:150px; font-size:20px; }

  .replay{ gap:12px; padding:12px 14px; }
  .replay .thumb{ width:96px; }
  .mrow{ grid-template-columns:1fr auto; gap:10px 14px; padding:14px 16px; }
  .mrow.head{ display:none; }
  .mrow .prog,.mrow .last,.mrow .act{ grid-column:1 / -1; }
  .addtodo .fields{ gap:8px; }
  .addtodo label{ min-width:110px; }
  .modal{ max-height:88vh; }
  .mbody{ padding:18px 18px 20px; }
  .mbody h2{ font-size:25px; }
  .composer{ bottom:8px; }
}

/* ==========================================================================
   Second pass: bluish panels, readable text, premium controls.
   Everything below intentionally overrides the rules above.
   ========================================================================== */

/* Panels replace the flat .card - a dark blue gradient with a visible edge. */
.panel{
  background:linear-gradient(165deg,rgba(24,58,96,.44),rgba(10,24,42,.62) 62%,rgba(7,15,26,.72));
  border:1px solid rgba(120,175,230,.24);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.card{ background:linear-gradient(165deg,rgba(24,58,96,.40),rgba(8,18,32,.66));
       border:1px solid rgba(120,175,230,.22); }
.sect{ background:linear-gradient(165deg,rgba(24,58,96,.34),rgba(8,18,32,.6));
       border-color:rgba(120,175,230,.22); }
.emptyrow{ padding:26px 20px; text-align:center; color:var(--muted); font-size:13.5px; }

/* Text that was too dark to read. */
.lede{ color:rgba(255,255,255,.72); }
.row .t small{ color:rgba(255,255,255,.62); }
.row .meta .chip{ color:rgba(255,255,255,.80); border-color:rgba(255,255,255,.18); }
.dashcard small{ color:rgba(255,255,255,.76); }
.nextup .body small{ color:rgba(255,255,255,.66); }
.replay .body small{ color:rgba(255,255,255,.66); }
.callrow .when small{ color:rgba(255,255,255,.60); }
.sect summary small{ color:rgba(255,255,255,.60); }
.mwhen span{ color:rgba(255,255,255,.80); }
.mwhen .mut{ color:rgba(255,255,255,.58); }
.mbody p{ color:rgba(255,255,255,.80); }
.precall span{ color:rgba(255,255,255,.72); }
.meterline{ color:rgba(255,255,255,.62); }
.eyebrow{ color:rgba(255,255,255,.52); }
.metricrow small{ color:rgba(255,255,255,.62); }
.mrow .person small,.mrow .last{ color:rgba(255,255,255,.62); }
.field label{ color:rgba(255,255,255,.88); }
.field .hint{ color:rgba(255,255,255,.55); }
.addtodo label{ color:#fff; }
.navsec b{ color:rgba(255,255,255,.62); }
.prose{ color:rgba(255,255,255,.82); }
.msg.ai p,.msg.ai li{ color:rgba(255,255,255,.88); }

/* Home fade-in, desktop only. */
@media (min-width:721px) and (prefers-reduced-motion:no-preference){
  .rise{ animation:rise .6s cubic-bezier(.22,.8,.3,1) both; }
  .rise.d1{ animation-delay:.07s; } .rise.d2{ animation-delay:.14s; }
  .rise.d3{ animation-delay:.21s; } .rise.d4{ animation-delay:.28s; }
  .rise.d5{ animation-delay:.35s; }
  @keyframes rise{ from{ opacity:0; transform:translateY(16px); } }
}

/* Native controls on brand. */
select,input[type=date],input[type=time],input[type=number]{ color-scheme:dark; }
input[type=date],input[type=time]{ accent-color:var(--yellow); }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(89%) sepia(35%) saturate(590%) hue-rotate(2deg) brightness(105%);
  cursor:pointer; opacity:.9;
}
input[type=checkbox]{ accent-color:var(--yellow); width:16px; height:16px; }
.check{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:#fff;
        text-transform:none; letter-spacing:0; font-weight:500; }
.checks{ display:flex; gap:18px; flex-wrap:wrap; }

/* Premium scrollbars. */
.navbody,.modal,.mainnav{ scrollbar-width:thin;
  scrollbar-color:rgba(248,240,136,.4) transparent; }
.navbody::-webkit-scrollbar,.modal::-webkit-scrollbar{ width:8px; }
.navbody::-webkit-scrollbar-track,.modal::-webkit-scrollbar-track{ background:transparent; }
.navbody::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(248,240,136,.55),rgba(248,240,136,.22));
  border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.navbody::-webkit-scrollbar-thumb:hover,.modal::-webkit-scrollbar-thumb:hover{
  background:var(--yellow); background-clip:padding-box; }

/* Lesson sidebar: wider, white, one line per title. */
.lessonwrap{ grid-template-columns:330px 1fr; }
.navsec a{ color:rgba(255,255,255,.88); align-items:center; }
.navsec a span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.navsec a:hover{ color:#fff; }
.navsec a.on{ color:var(--yellow); }
.navbox > summary{ color:#fff; }
.navbox summary .cnt{ color:rgba(255,255,255,.6); }

/* Roadmap rows. */
.row.task{ align-items:flex-start; }
.status{ appearance:none; font:inherit; font-size:11px; font-weight:700; letter-spacing:.08em;
         text-transform:uppercase; padding:3px 26px 3px 10px; border-radius:999px;
         border:1px solid currentColor; background:transparent; cursor:pointer;
         background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
         background-repeat:no-repeat; background-position:right 9px center; }
.status option{ background:#0A121D; color:#fff; }
.status.todo{ color:#8A9AAC; } .status.progress{ color:var(--blue); }
.status.done{ color:var(--yellow); } .status.stuck{ color:#FF6B6B; }
.status.na{ color:#5C6B7C; }
.row.st-done .t > b{ color:rgba(255,255,255,.55); }
.chip.res{ color:rgba(255,255,255,.35); border-color:rgba(255,255,255,.12); }
.chip.res.on{ color:var(--yellow); border-color:rgba(248,240,136,.45);
              background:rgba(248,240,136,.08); }
.chip.res.on:hover{ background:rgba(248,240,136,.18); }
.notes{ display:grid; gap:6px; margin-top:12px; padding:14px 16px; border-radius:12px;
        background:rgba(4,10,18,.5); border:1px solid rgba(120,175,230,.2); }
.notes label{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
              color:rgba(255,255,255,.6); margin-top:6px; }
.notes textarea,.notes input{ width:100%; min-height:64px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:#fff; font:inherit;
  outline:none; resize:vertical; }
.notes input{ min-height:0; }
.notes textarea:focus,.notes input:focus{ border-color:rgba(248,240,136,.5); }
.notesave{ display:flex; gap:10px; align-items:center; margin-top:10px; }

/* Sort bar. */
.sortbar{ display:flex; align-items:center; gap:8px; margin:0 0 16px; }
.sortbar span{ font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
               color:rgba(255,255,255,.55); margin-right:4px; }

/* Calendar: lighter frame, white text, yellow times. */
.monthgrid{ border-color:rgba(120,175,230,.30);
            background:linear-gradient(165deg,rgba(24,58,96,.30),rgba(8,18,32,.55)); }
.monthgrid .dow{ color:rgba(255,255,255,.80); border-bottom-color:rgba(120,175,230,.28);
                 background:rgba(255,255,255,.04); }
.cell{ border-right-color:rgba(120,175,230,.18); border-bottom-color:rgba(120,175,230,.18); }
.dnum{ color:rgba(255,255,255,.80); }
.ev{ color:#fff; }
.ev em{ color:var(--yellow); font-weight:600; }
.ev.past{ opacity:.55; }
.ev.past em{ color:rgba(248,240,136,.6); }

/* Add-to-calendar menu. */
.addwrap{ position:relative; }
.addmenu{ position:absolute; left:0; bottom:calc(100% + 8px); min-width:180px; z-index:5;
  background:#0A121D; border:1px solid var(--line-2); border-radius:12px; padding:6px;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.9); }
.addmenu a,.addmenu button{ display:block; width:100%; text-align:left; padding:9px 12px;
  border-radius:8px; font-size:13.5px; color:#fff; }
.addmenu a:hover,.addmenu button:hover{ background:rgba(255,255,255,.07); }
.modal .dots{ position:absolute; top:12px; right:52px; z-index:2; width:32px; height:32px;
  border-radius:50%; background:rgba(4,6,10,.7); color:#fff; display:grid; place-items:center;
  font-size:15px; }
.modal .dots:hover{ background:rgba(4,6,10,.95); color:var(--yellow); }
.modal.wide{ width:min(640px,100%); }

/* Coaching-calls chooser. */
.two{ grid-template-columns:repeat(2,1fr); }
.choice{ padding:26px; display:flex; flex-direction:column; gap:8px;
         transition:transform .2s,border-color .2s,box-shadow .2s; }
.choice:hover{ transform:translateY(-3px); border-color:rgba(248,240,136,.5);
               box-shadow:0 0 0 1px rgba(248,240,136,.18),0 22px 56px -26px rgba(248,240,136,.6); }
.choice.locked{ opacity:.55; }
.choice .ic{ font-size:22px; color:var(--yellow); margin-bottom:6px; }
.choice b{ font-family:var(--head); font-size:21px; font-weight:700; letter-spacing:-.02em; }
.choice small{ color:rgba(255,255,255,.74); font-size:13px; line-height:1.5; flex:1; }
.choice .chip{ align-self:flex-start; margin-top:10px; }

.tierpickrow{ font-size:10.5px; padding:3px 24px 3px 10px; }
.mrow .act{ display:flex; gap:6px; flex-wrap:wrap; }
.msg.ai.thinking p{ color:var(--faint); }
.msg.ai ul{ margin:0 0 10px; padding-left:20px; }

@media (max-width:1040px){
  .lessonwrap{ grid-template-columns:1fr; }
  .two{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .tiles{ grid-template-columns:1fr; }
  .addmenu{ left:auto; right:0; }
  .modal .dots{ right:50px; }
}

/* ==========================================================================
   Third pass: lighter display weight, visible native date control.
   ========================================================================== */
h1.page,.hero h1,.phasehead h2,.profhead h1,.mbody h2,.upsell h3{ font-weight:600; }
.hero h1{ letter-spacing:-.022em; }
h1.page{ letter-spacing:-.02em; }
.mod h3,.choice b,.dashcard b{ font-weight:600; letter-spacing:-.015em; }
.stat b,.monthbar b{ font-weight:600; }

/* The date field's own picker button was invisible on the dark panel. */
input[type=date]{ position:relative; }
input[type=date]::-webkit-calendar-picker-indicator{
  filter:none; opacity:1; cursor:pointer;
  width:18px; height:18px; padding:0; margin:0;
  background:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F088' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  background-size:18px 18px; background-repeat:no-repeat; background-position:center;
}
input[type=date]::-webkit-calendar-picker-indicator:hover{ opacity:.75; }

/* ==========================================================================
   Fourth pass: the AI chat, and the 1:1 booking page.
   ========================================================================== */
.ailayout{ display:grid; grid-template-columns:262px 1fr; gap:24px; align-items:start; }
.aiside{ position:sticky; top:calc(var(--bar) + 18px); }
.sidebox{ border:1px solid rgba(120,175,230,.24); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(165deg,rgba(24,58,96,.40),rgba(8,18,32,.62)); }
.sidebox > summary{ list-style:none; cursor:pointer; padding:14px 16px; display:flex;
  align-items:center; gap:10px; font-size:13px; font-weight:600; color:#fff; }
.sidebox > summary::-webkit-details-marker{ display:none; }
.sidebox summary .chev{ color:var(--faint); font-size:10px; transition:transform .2s; }
.sidebox[open] summary .chev{ transform:rotate(90deg); }
.sidebox summary .cnt{ margin-left:auto; font-size:11px; color:rgba(255,255,255,.55); }
.sidebody{ border-top:1px solid var(--line); padding:10px; max-height:64vh; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(248,240,136,.4) transparent; }
.sidebody::-webkit-scrollbar{ width:8px; }
.sidebody::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(248,240,136,.5),
  rgba(248,240,136,.2)); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.newchat{ width:100%; margin-bottom:8px; }
.mini{ font-size:11.5px; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.72);
  padding:7px 10px; border-radius:8px; border:1px solid var(--line); width:100%;
  text-align:left; margin-bottom:10px; }
.mini:hover{ color:var(--yellow); border-color:rgba(248,240,136,.4); }
.mini.sel{ width:auto; }
.folder{ margin-bottom:6px; }
.folder > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:8px; font-size:12px; font-weight:600;
  color:rgba(255,255,255,.78); }
.folder > summary::-webkit-details-marker{ display:none; }
.folder > summary:hover{ background:rgba(255,255,255,.05); }
.folder summary .chev{ font-size:9px; color:var(--faint); transition:transform .2s; }
.folder[open] summary .chev{ transform:rotate(90deg); }
.folder .fname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder summary .cnt{ font-size:10.5px; color:rgba(255,255,255,.45); }
.folderbody{ padding-left:10px; }
.fempty{ display:block; font-size:11.5px; color:rgba(255,255,255,.42); padding:6px 8px; }
.recents{ margin-top:10px; }
.recents > b{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.45); padding:8px 8px 6px; }
.chatrow{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  font-size:13px; color:rgba(255,255,255,.82); }
.chatrow span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatrow:hover{ background:rgba(255,255,255,.06); color:#fff; }
.chatrow.on{ background:rgba(248,240,136,.12); color:var(--yellow); font-weight:600; }
.chatrow .del{ opacity:0; }
.chatrow:hover .del{ opacity:1; }

.aihead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
         margin-bottom:18px; }
.aihead h1{ margin:0; }
.aitools{ display:flex; gap:8px; align-items:center; }
.aitools .mini{ margin:0; }
.aimain .thread{ min-height:46vh; max-height:none; }
.aiblank{ padding:40px 0 24px; }
.aiblank h2{ font-family:var(--head); font-weight:600; font-size:24px; margin:0 0 8px;
             letter-spacing:-.02em; }
.aiblank p{ color:rgba(255,255,255,.66); margin:0; max-width:52ch; }

/* Readable answers: white, with real space between blocks. */
.msg.ai{ background:rgba(255,255,255,.028); border:1px solid rgba(120,175,230,.18);
  border-radius:4px 16px 16px 16px; padding:16px 18px; }
.msg.ai b{ margin-bottom:10px; }
.msg.ai p{ color:#fff; margin:0 0 12px; line-height:1.65; }
.msg.ai p:last-child{ margin-bottom:0; }
.msg.ai h4{ font-family:var(--head); font-weight:600; font-size:15.5px; color:#fff;
            margin:18px 0 8px; letter-spacing:-.01em; }
.msg.ai ul{ margin:0 0 12px; padding-left:20px; }
.msg.ai li{ color:#fff; margin-bottom:7px; line-height:1.6; }
.msg.ai strong{ color:var(--yellow); font-weight:600; }
.msg.ai code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:rgba(255,255,255,.08); padding:1px 5px; border-radius:5px; }
.msg.me{ background:rgba(63,169,245,.13); border-color:rgba(63,169,245,.3); color:#fff; }

/* 1:1 booking. */
.checklist .row{ align-items:flex-start; }
.checklist .row.done .t b{ color:rgba(255,255,255,.5); text-decoration:line-through; }
.booking{ padding:0; overflow:hidden; }
.booking iframe{ width:100%; height:760px; border:0; display:block; background:#fff; }

@media (max-width:1040px){
  .ailayout{ grid-template-columns:1fr; }
  .aiside{ position:static; }
  .sidebody{ max-height:40vh; }
}
@media (max-width:720px){
  .aihead{ flex-direction:column; align-items:flex-start; gap:10px; }
  .booking iframe{ height:620px; }
  .chatrow .del{ opacity:1; }
}

/* Real lesson video. */
.player{ position:relative; padding:0; overflow:hidden; display:block; }
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.player.empty{ display:grid; place-items:center; }
.navsec a em{ font-style:normal; font-size:10.5px; color:rgba(255,255,255,.4);
              flex:0 0 auto; margin-left:auto; padding-left:8px; }

/* ==========================================================================
   Fifth pass: module cards lift off the background.
   Neutral dark grey, white text, light grey edge - not the navy gradient,
   which was too close to the page behind it.
   ========================================================================== */
.mod{
  background:#14171C;
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.9);
}
.mod .b{ background:#14171C; }
.mod h3{ color:#fff; }
.mod p{ color:rgba(255,255,255,.66); opacity:1; }
.mod .cover{ background:#0E1116; border-bottom-color:rgba(255,255,255,.12); }
.mod .foot .meterline{ color:rgba(255,255,255,.52); }
.mod:hover{
  background:#181C22; border-color:rgba(248,240,136,.55);
  box-shadow:0 0 0 1px rgba(248,240,136,.22),
             0 0 34px -6px rgba(248,240,136,.30),
             0 26px 60px -28px rgba(248,240,136,.7);
}
.mod:hover .b{ background:#181C22; }
.mod.locked{ opacity:.6; }
.mod.locked:hover{ background:#14171C; border-color:rgba(255,255,255,.17);
                   box-shadow:0 14px 34px -22px rgba(0,0,0,.9); transform:none; }
.mod.locked:hover .b{ background:#14171C; }

/* ==========================================================================
   Sixth pass: lesson page reordered, title sized for one line,
   admin reorder and rename in the course nav.
   ========================================================================== */
.lessontitle{ font-family:var(--head); font-weight:600; font-size:clamp(19px,2vw,26px);
              letter-spacing:-.02em; line-height:1.22; margin:0 0 16px; }
.lessonbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 20px; }
.lessonbody{ margin-top:26px; max-width:74ch; }
.lessonbody p{ margin:0 0 13px; line-height:1.68; }
.lessonbody h4{ font-family:var(--head); font-weight:600; font-size:16px; color:#fff;
                margin:22px 0 9px; letter-spacing:-.01em; }
.lessonbody ul{ margin:0 0 13px; padding-left:20px; }
.lessonbody li{ margin-bottom:7px; line-height:1.6; }
.lessonbody a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px;
               word-break:break-word; }
.lessonbody a:hover{ color:var(--yellow); }
.lessonbody strong{ color:#fff; font-weight:600; }
.reslist{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.reslist .chip{ font-size:12px; padding:6px 13px; }

/* course nav with admin controls */
.navhead{ display:flex; align-items:center; gap:6px; padding:0 4px 6px 10px; }
.navhead b{ flex:1; min-width:0; padding:0; overflow:hidden; text-overflow:ellipsis;
            white-space:nowrap; }
.navrow{ display:flex; align-items:center; gap:2px; }
.navrow > a{ flex:1; min-width:0; }
.ctrls{ display:flex; gap:1px; flex:0 0 auto; opacity:0; transition:opacity .15s; }
.navhead .ctrls{ opacity:.55; }
.navrow:hover .ctrls,.navhead:hover .ctrls{ opacity:1; }
.ctrls button{ width:20px; height:22px; border-radius:5px; font-size:9px; line-height:1;
               color:rgba(255,255,255,.62); }
.ctrls button:hover:not([disabled]){ background:rgba(248,240,136,.16); color:var(--yellow); }
.ctrls button[disabled]{ opacity:.2; cursor:default; }

/* ==========================================================================
   Seventh pass: home simplified, dashboards as pills, AI chat in a window,
   the wordmark off Anton, tier switcher hidden from students.
   ========================================================================== */

/* The header wordmark now matches the display face used everywhere else. */
.brand span{ font-family:var(--head); font-weight:700; font-size:18px;
             letter-spacing:-.02em; text-transform:none; }
.brand img{ width:32px; height:32px; }
.tierpick[hidden]{ display:none; }

/* Home */
.tiles.two{ grid-template-columns:repeat(2,1fr); }
.dashpills{ display:flex; gap:10px; flex-wrap:wrap; }
.dashpill{ display:inline-flex; align-items:center; gap:7px; padding:9px 17px;
  border-radius:999px; font-size:13px; font-weight:600; color:#fff;
  border:1px solid rgba(120,175,230,.32);
  background:linear-gradient(165deg,rgba(24,58,96,.5),rgba(10,24,42,.62));
  transition:border-color .18s,background .18s,transform .18s; }
.dashpill:hover{ border-color:rgba(248,240,136,.55); transform:translateY(-1px);
                 background:linear-gradient(165deg,rgba(40,74,112,.6),rgba(14,30,50,.7)); }
.dashpill.empty{ color:rgba(255,255,255,.52); border-style:dashed; }
.sec-h .mini{ width:auto; margin:0; }

/* AI: white heading, a real bordered chat window, roomier input. */
h1.page.plain em{ color:inherit; }
h1.page.plain{ color:#fff; }
.aiblank h2{ color:#fff; }
.chatwindow{ display:flex; flex-direction:column; border:1px solid rgba(120,175,230,.26);
  border-radius:18px; background:linear-gradient(165deg,rgba(18,40,66,.34),rgba(7,15,26,.6));
  overflow:hidden; min-height:60vh; }
.chatwindow .thread{ flex:1; overflow-y:auto; max-height:62vh; padding:22px 22px 10px;
  scrollbar-width:thin; scrollbar-color:rgba(248,240,136,.35) transparent; }
.chatwindow .thread::-webkit-scrollbar{ width:8px; }
.chatwindow .thread::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(248,240,136,.45),rgba(248,240,136,.18));
  border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
.chatwindow .composer{ position:static; border:0; border-top:1px solid rgba(120,175,230,.22);
  border-radius:0; background:rgba(4,10,18,.5); padding:14px 16px; align-items:flex-end; }
.chatwindow .composer textarea{ min-height:64px; max-height:220px; line-height:1.6;
  font-size:15px; }
.aiblank{ padding:16px 0 10px; }

@media (max-width:720px){
  .tiles.two{ grid-template-columns:1fr; }
  .chatwindow{ min-height:0; }
  .chatwindow .thread{ max-height:46vh; padding:16px 16px 6px; }
  .dashpill{ width:100%; justify-content:center; }
}