:root{
  color-scheme:dark;
  --bg:#0C1119; --bg-2:#111823; --panel:#1A2230; --panel-2:#222C3B; --panel-hi:#2A3546;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --ink:#E9EEF5; --muted:#8D98A9; --faint:#5F6A7B;
  --white:#F4F6FA; --on-white:#141B26;
  --cyan:#35E6D0; --magenta:#FF3FB4; --violet:#8B6CFF; --lav:#B9B2F2;
  --red:#FF6B7D; --red-bg:rgba(255,107,125,.12); --amber:#FFC266; --amber-bg:rgba(255,194,102,.12); --green:#6EE7B7; --green-bg:rgba(110,231,183,.12);
  /* class colors — validated (dark, adjacent CVD ΔE ≥ 9) */
  --c0:#199E86; --c1:#9085E9; --c2:#C98500; --c3:#E0407A; --c4:#3987E5; --c5:#D95926; --c6:#C052C0; --c7:#3C9A2E;
  --r:18px;
  --hero:var(--display); --hero-fill:linear-gradient(90deg,#B7A6FF,#8B6CFF 55%,#FF3FB4);
  --chart-line:#B9B2F2; --chart-fill:#8B6CFF; --chart-mark:#FF3FB4; --clk-a:#35E6D0; --clk-b:#8B6CFF; --clk-c:#FF3FB4; --knob-ring:#1A2230;
  --btn-radius:999px;
  --display:"Sora","Poppins",ui-sans-serif,system-ui,sans-serif;
  --body:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* the app redraws its content often; stop the browser from "scroll anchoring" to a removed element (caused jumps) */
html,body,#app{overflow-anchor:none}
html{background:var(--bg)}
body{background:
  radial-gradient(900px 600px at -10% 10%, rgba(53,230,208,.10), transparent 60%),
  radial-gradient(900px 700px at 110% 30%, rgba(255,63,180,.10), transparent 60%),
  radial-gradient(1200px 800px at 50% 120%, rgba(139,108,255,.10), transparent 60%),
  var(--bg);
  background-attachment:fixed;
  color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;padding-inline:16px;padding-block:16px 96px;min-height:100vh}
/* neon edge strips, like the light bars behind the frame */
body::before,body::after{content:"";position:fixed;top:12vh;bottom:12vh;width:4px;border-radius:4px;z-index:0;pointer-events:none}
body::before{left:6px;background:var(--cyan);box-shadow:0 0 12px 2px var(--cyan),0 0 60px 12px rgba(53,230,208,.35)}
body::after{right:6px;background:var(--magenta);box-shadow:0 0 12px 2px var(--magenta),0 0 60px 12px rgba(255,63,180,.35)}
@media (max-width:900px){body::before,body::after{display:none}}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.9em}
.muted{color:var(--muted)}

/* app frame */
.frame{position:relative;z-index:1;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:232px minmax(0,1fr);background:rgba(20,27,38,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:28px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);min-height:calc(100vh - 32px);overflow:hidden}
.side{background:linear-gradient(180deg,#1C2838,#172130);border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;gap:22px}
.logo{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:6px}
.logo svg,.logo .logo-mark{width:44px;height:44px}
.logo .logo-mark{border-radius:11px;display:block;box-shadow:0 4px 12px -4px rgba(224,80,47,.45)}
.logo b{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:13px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:10px 12px 4px}
.nav button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-radius:10px;padding:9px 12px;color:var(--ink);text-align:left;font-size:14px}
.nav button:hover{background:rgba(255,255,255,.05)}
.nav button[aria-current="page"]{background:var(--white);color:var(--on-white);font-weight:600}
.nav svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--cc);box-shadow:0 0 10px var(--cc)}
.nav .count{margin-left:auto;min-width:20px;height:20px;border-radius:99px;background:var(--red);color:#1a0b0e;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.nav .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13px}
.me img{width:52px;height:52px;border-radius:50%;border:2px solid var(--line-2);box-shadow:0 0 0 4px rgba(255,255,255,.03)}
.main{padding:28px 32px 40px;display:flex;flex-direction:column;gap:22px;min-width:0}
@media (max-width:900px){
  body{padding-inline:0;padding-top:0}
  .frame{grid-template-columns:1fr;grid-template-rows:auto 1fr;border-radius:0;border:0;min-height:100vh}
  .side{flex-direction:row;align-items:center;gap:12px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:0;padding-top:calc(10px + env(safe-area-inset-top,0px));z-index:30}
  .logo{flex-direction:row;padding:0}
  .logo svg,.logo .logo-mark{width:30px;height:30px}
  .logo .logo-mark{border-radius:8px}
  .logo b{display:none}
  .me{display:none}
  .mtitle{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-weight:700;font-size:17px}
  .mtitle span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .burger{display:grid;place-items:center;position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer}
  .burger .bars{display:flex;flex-direction:column;gap:5px;width:20px}
  .burger .bars i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .burger .bars.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger .bars.x i:nth-child(2){opacity:0}
  .burger .bars.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .burger .count{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #1C2838}
  .nav{display:none}
  .side.open .nav{display:flex;flex-direction:column;gap:4px;position:fixed;left:0;right:0;bottom:0;top:calc(65px + env(safe-area-inset-top,0px));overflow-y:auto;padding:14px 16px calc(28px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,#1C2838,#141C28);border-top:1px solid var(--line);z-index:30}
  .side.open .nav-label{margin:12px 4px 4px}
  .side.open .nav button{padding:13px 14px;font-size:16px;border-radius:14px}
  .m-email{margin:16px 4px 0;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
  html.menu-open,html.menu-open body{overflow:hidden}
  html.menu-open .fab{display:none}
  .main{padding:20px 16px 40px}
}

/* top bar */
.topbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 20px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--muted)}
.hello{font-family:var(--hero);font-weight:800;font-size:clamp(30px,4.2vw,46px);letter-spacing:-.03em;line-height:1.02;margin:6px 0 0;text-wrap:balance}
.hello .grad{background:var(--hero-fill);background-size:cover;background-position:center 70%;-webkit-background-clip:text;background-clip:text;color:transparent}
.hello .pt{color:var(--magenta)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);border-radius:var(--btn-radius);padding:9px 16px;font-weight:500;font-size:13.5px;color:var(--ink)}
.btn:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.btn.primary{background:var(--white);border-color:var(--white);color:var(--on-white);font-weight:600}
.btn.primary:hover{background:#fff}
.btn.ghost{background:transparent;border-color:transparent;padding-inline:6px}
.btn.danger{color:var(--red);border-color:rgba(255,107,125,.5)}
.btn.small{padding:5px 12px;font-size:12.5px}
.banner{border-radius:12px;padding:10px 14px;font-size:13.5px;background:var(--amber-bg);color:var(--amber);border:1px solid rgba(255,194,102,.25)}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat.bad .v{color:var(--red)}
.stat.bad{border-color:rgba(255,107,125,.3);box-shadow:0 0 30px -12px var(--red) inset}

/* panels */
.panel-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;min-width:0}
.panel-box h3{font-family:var(--body);font-weight:500;font-size:15px;margin:0 0 4px}
.panel-box .sub{font-size:12px;color:var(--muted)}
.charts{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px}
@media (max-width:1000px){.charts{grid-template-columns:1fr}}
.chart-wrap{position:relative;margin-top:10px}
.chart-wrap svg{display:block;width:100%;height:auto;overflow:visible}
.axis text{fill:var(--muted);font-size:10.5px;font-family:var(--body)}
.grid line{stroke:rgba(255,255,255,.06)}
.tip{position:absolute;pointer-events:none;background:#0B1018;border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;font-size:12px;white-space:nowrap;transform:translate(-50%,-110%);box-shadow:0 10px 30px -10px #000}
.tip b{font-weight:600}
.donut-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}
.donut-row svg{width:170px;height:170px;flex:none}
.legend{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}
.legend div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:start;font-size:13px}
.legend .dot{margin-top:5px}
.legend small{grid-column:2;color:var(--muted);font-size:12px}

/* section heading */
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-h h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0}

/* class cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:16px;align-items:start}
.card{--cc:var(--c0);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;position:relative}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;background:radial-gradient(420px 120px at 0% 0%, color-mix(in srgb,var(--cc) 26%,transparent), transparent 70%);pointer-events:none}
.card-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px 10px;background:none;border:0;text-align:left;width:100%}
.card-head:hover .cname{text-shadow:0 0 18px var(--cc)}
.cname{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1.1;display:flex;align-items:center;gap:10px}
.ctitle{font-size:12.5px;color:var(--muted);margin-top:3px}
.grade-pill{flex:none;text-align:right}
.grade-pill .letter{font-family:var(--display);font-weight:800;font-size:24px;line-height:1}
.grade-pill .pct{font-size:11.5px;color:var(--muted)}
.card-body{position:relative;display:flex;flex-direction:column;gap:10px;padding:8px 18px 16px}
.label{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.label.red{color:var(--red)}

.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start}
.item .t{font-weight:500;overflow-wrap:anywhere;background:none;border:0;padding:0;text-align:left;color:var(--ink)}
.item .t:hover{text-decoration:underline;text-underline-offset:3px}
.item.big .t{font-size:16.5px;font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--muted);margin-top:2px;align-items:center}
.meta .due{color:var(--ink)}
.meta .late{color:var(--red);font-weight:600}
.meta .soon{color:var(--amber);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap;border:0}
.chip.start,.chip.tba{background:var(--amber-bg);color:var(--amber)}
.chip.red{background:var(--red-bg);color:var(--red)}
.chip.green{background:var(--green-bg);color:var(--green)}
.chip.star{background:color-mix(in srgb,var(--cc) 22%,transparent);color:var(--ink)}
.item.overdue{background:var(--red-bg);border:1px solid rgba(255,107,125,.25);border-radius:12px;padding:10px;margin-inline:-10px}

.check{width:24px;height:24px;border-radius:8px;border:2px solid var(--cc);background:transparent;display:grid;place-items:center;padding:0;flex:none;margin-top:1px;box-shadow:0 0 10px -2px var(--cc)}
.check svg{width:15px;height:15px;opacity:0;stroke:var(--ink);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.check:hover svg{opacity:.4}
.check.on{background:var(--cc)}
.check.on svg{opacity:1;stroke:#fff}

.more{background:none;border:0;padding:0;color:var(--ink);font-weight:500;font-size:13px;text-align:left;text-decoration:underline;text-decoration-color:var(--cc);text-underline-offset:4px;text-decoration-thickness:2px}
.list{display:flex;flex-direction:column;gap:10px}
.divider{height:1px;background:var(--line);margin:2px 0}
.done-strip{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.done-chip{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line-2);border-radius:999px;padding:3px 10px 3px 5px;background:rgba(255,255,255,.03);font-size:12.5px;text-decoration:line-through;color:var(--muted)}
.done-chip:hover{border-color:var(--cc);color:var(--ink)}
.done-chip .x{text-decoration:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:6px;background:var(--cc);color:#fff;font-size:11px}
.foot{position:relative;padding:12px 18px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.bar{height:6px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--cc);border-radius:99px;box-shadow:0 0 12px var(--cc)}
.foot-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.empty-next{font-size:13.5px;color:var(--muted)}

.welcome{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;max-width:640px}
.welcome h2{font-family:var(--display);font-size:24px;margin:0 0 6px;text-wrap:balance}
.welcome p{margin:0 0 16px;color:var(--muted);max-width:60ch}

/* class view */
.cv-head{--cc:var(--c0);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.cv-head h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;margin:4px 0 0;line-height:1.02;display:flex;align-items:center;gap:14px}
.cv-head h2 .dot{width:14px;height:14px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;align-self:flex-start;max-width:100%}
.tab{background:none;border:0;border-radius:999px;padding:7px 16px;font-weight:500;color:var(--muted);white-space:nowrap}
.tab[aria-selected="true"]{background:var(--white);color:var(--on-white)}
.panel{--cc:var(--c0);display:flex;flex-direction:column;gap:18px;max-width:820px}
.section{display:flex;flex-direction:column;gap:10px}
.row{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.row.overdue{background:var(--red-bg);border-color:rgba(255,107,125,.25)}
.row .item{align-items:center}
.score{width:88px;border:1px solid var(--line-2);border-radius:10px;padding:6px 9px;background:var(--bg-2);text-align:right}
.textarea{width:100%;min-height:260px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel);line-height:1.6;resize:vertical}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.bigstat{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bigstat .letter{font-family:var(--display);font-weight:800;font-size:56px;line-height:1;color:var(--ink);text-shadow:0 0 30px var(--cc)}
.need-ok{color:var(--green);font-weight:600}
.need-no{color:var(--faint)}

/* forms + modal */
.overlay{position:fixed;inset:0;background:rgba(5,8,12,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;z-index:30}
.sheet{background:linear-gradient(180deg,#1F2938,#18212E);border:1px solid var(--line-2);width:100%;max-width:600px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;box-shadow:0 -20px 60px -20px #000}
@media (min-width:700px){.overlay{align-items:center;padding:24px}.sheet{border-radius:22px;padding:26px}}
.sheet h3{font-family:var(--display);font-weight:700;font-size:22px;margin:0}
.field{display:flex;flex-direction:column;gap:5px}
.field label,.lbl{font-size:12.5px;font-weight:500;color:var(--muted)}
.input,.select{border:1px solid var(--line-2);border-radius:12px;padding:9px 12px;background:var(--bg-2);width:100%}
.input:disabled{opacity:.5}
.fields2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}
.inline{display:flex;align-items:center;gap:8px;font-size:13.5px}
input[type=checkbox]{accent-color:var(--cyan);width:16px;height:16px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:32px;height:32px;border-radius:10px;border:2px solid transparent;padding:0}
.sw[aria-pressed="true"]{border-color:var(--white);box-shadow:0 0 14px currentColor}
.sheet-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding-top:4px}
.sheet-actions .spacer{flex:1}
.hint{font-size:12.5px;color:var(--muted)}
.review-item{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.review-item.off{opacity:.5}
.review-fields{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.review-fields .input{padding:6px 10px}
.tpl{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.03);text-align:left;width:100%}
.tpl:hover{border-color:var(--cyan)}
.notice{background:var(--amber-bg);color:var(--amber);border:1px solid rgba(255,194,102,.2);border-radius:12px;padding:10px 12px;font-size:13px}
.notice ul{margin:4px 0 0;padding-left:18px}

.fab{position:fixed;right:22px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:10;padding:13px 20px;font-size:14px;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 40px -8px rgba(255,63,180,.6),0 0 30px -6px rgba(53,230,208,.5)}
@media (min-width:901px){.fab{display:none}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--white);color:var(--on-white);border-radius:14px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);font-size:13.5px;box-shadow:0 10px 30px -8px #000}
.toast button{background:var(--on-white);border:0;color:var(--white);border-radius:999px;padding:5px 12px;font-weight:600}
.loading{color:var(--muted);padding:40px 0}
@media (prefers-reduced-motion:no-preference){.bar i{transition:width .4s ease}.check{transition:background .15s}.card{transition:border-color .2s}.card:hover{border-color:var(--line-2)}}

/* readings */
.read-block{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:14px;padding:12px}
.read-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.chip.read{background:rgba(185,178,242,.14);color:#CFC9FF}
/* focus timer */
.charts.two{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:1000px){.charts.two{grid-template-columns:1fr}}
.focus-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-top:12px}
@media (max-width:620px){.focus-grid{grid-template-columns:1fr;justify-items:center}.focus-side{width:100%}}
.clock-wrap{position:relative;width:min(240px,70vw);aspect-ratio:1;max-width:100%}
.clock{width:100%;height:100%;display:block;filter:drop-shadow(0 0 18px rgba(139,108,255,.25))}
.clock-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 22%}
.clk-mode{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.clk-mode.brk{color:var(--green)}
.clk-time{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,44px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.clk-sub{font-size:11.5px;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.focus-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.clk-set{flex-wrap:wrap;gap:12px;color:var(--muted);font-size:12.5px}
.clk-num{display:inline-flex;align-items:center;gap:6px}
.clk-num .input{width:64px;padding:6px 8px;text-align:center}
.focus-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.focus-stats div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column}
.focus-stats b{font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums}
.focus-stats span{font-size:11.5px;color:var(--muted)}
.cg{display:grid;grid-template-columns:repeat(7,16px);gap:4px}
.cg-h{font-size:9.5px;color:var(--faint);text-align:center}
.cg-cell{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.05)}
.cg-cell.l1{background:rgba(110,231,183,.28)}
.cg-cell.l2{background:rgba(110,231,183,.5)}
.cg-cell.l3{background:rgba(110,231,183,.75)}
.cg-cell.l4{background:#6EE7B7;box-shadow:0 0 8px rgba(110,231,183,.6)}
.cg-cell.fut{background:transparent;border:1px dashed rgba(255,255,255,.07)}
.cg-cell.now{outline:1.5px solid var(--white);outline-offset:1px}
.cg-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--faint);margin-top:6px}
.cg-legend .cg-cell{width:11px;height:11px;border-radius:3px}
.play{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink);font-size:11px;display:grid;place-items:center;padding:0 0 0 2px;flex:none}
.play:hover{border-color:var(--cc);box-shadow:0 0 12px -2px var(--cc)}
.side-timer{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--cyan);font-variant-numeric:tabular-nums}
.nav button[aria-current="page"] .side-timer{color:#0E6F63}
@media (prefers-reduced-motion:no-preference){.clk-arc{transition:stroke-dashoffset .25s linear}}

/* look picker */
.looks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.look{border:2px solid var(--line-2);border-radius:16px;padding:0;overflow:hidden;background:none;text-align:left;display:flex;flex-direction:column}
.look[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 30%,transparent)}
.look .pv{height:120px;position:relative;display:flex;align-items:flex-end;padding:12px}
.look .pv b{font-size:26px;line-height:1}
.look .cap{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.look .cap span{font-size:12px;color:var(--muted)}
.pv.neon{background:radial-gradient(160px 90px at 0% 0%,rgba(53,230,208,.35),transparent 70%),radial-gradient(160px 90px at 100% 100%,rgba(255,63,180,.35),transparent 70%),#111823}
.pv.neon b{font-family:"Sora",sans-serif;font-weight:800;background:linear-gradient(90deg,#B7A6FF,#8B6CFF 55%,#FF3FB4);-webkit-background-clip:text;background-clip:text;color:transparent}
.pv i{position:absolute;top:10px;right:10px;font-style:normal;font-size:11px;padding:3px 8px;border-radius:99px;color:#fff}
.pv.neon i{background:#F4F6FA;color:#141B26}

/* upload drop zone */
.drop{position:relative;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:22px 16px;border:2px dashed var(--line-2);border-radius:16px;background:rgba(255,255,255,.03);cursor:pointer;font-size:13px}
.drop b{font-size:15px}
.drop span{color:var(--muted)}
.drop.over,.drop:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
.drop-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop:focus-within{outline:2px solid var(--cyan);outline-offset:2px}
.chosen{display:flex;flex-wrap:wrap;gap:6px}
.file-chip{background:rgba(255,255,255,.06);color:var(--ink);font-weight:500;max-width:100%}
.file-chip button{background:none;border:0;color:var(--muted);font-size:15px;line-height:1;padding:0 0 0 4px}
.help ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}

/* ---------- sign-in screen ---------- */
.signin{position:relative;z-index:1;min-height:calc(100vh - 32px);display:grid;place-items:center;padding:24px 0}
.signin-card{width:min(440px,100%);background:rgba(20,27,38,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:28px;padding:36px 28px;display:flex;flex-direction:column;gap:18px;text-align:center;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.signin-card svg.mark{width:64px;height:64px;margin:0 auto}
.signin-card h1{font-family:var(--hero);font-weight:800;font-size:40px;letter-spacing:-.02em;margin:0;line-height:1}
.signin-card p{margin:0;color:var(--muted)}
.signin-btns{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.signin-btns .btn{justify-content:center;padding:13px 18px;font-size:15px}
.signin-btns svg{width:18px;height:18px}
.signin-err{color:var(--red);font-size:13px;min-height:1em}
.signin-legal{font-size:12px;color:var(--faint)}
.boot{position:fixed;inset:0;display:grid;place-items:center;color:var(--muted);z-index:2}

/* delete confirm + update checklist */
.notice.danger-box{background:var(--red-bg);color:var(--ink);border-color:rgba(255,107,125,.35);display:flex;flex-direction:column;gap:6px}
.notice.danger-box .input{max-width:320px}
.red-text{color:var(--red)}
label.review-item{cursor:pointer}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* plans page */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;align-items:start;margin:8px 0 22px}
.plan{border:1px solid var(--line-2);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.plan.featured{border:2px solid var(--cyan);box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 14%,transparent)}
.plan.current{outline:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);outline-offset:3px}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan-name{font-size:20px;font-weight:800}
.plan-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-price b{font-size:34px;line-height:1}
.plan-price span,.plan-sub{color:var(--muted);font-size:13px;margin:0}
.plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.plan-list li{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start}
.plan-list li.soon{color:var(--muted)}
.plan-list .tick{color:var(--green);font-weight:800}
.plan .btn{width:100%;justify-content:center}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;align-self:flex-start}
.seg button{border:0;background:none;color:var(--muted);padding:6px 14px;border-radius:999px;font-weight:600;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--cyan);color:#0C1119}
.faq{border-bottom:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:6px 0 0;color:var(--muted);font-size:14px}

.inapp{background:var(--amber-bg);color:var(--ink);border:1px solid rgba(255,194,102,.35);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;text-align:left;font-size:14px}
.inapp b:first-child{color:var(--amber)}
.inapp .btn{justify-content:center}
.signin-legal a{color:var(--cyan);text-decoration:none;font-weight:600;white-space:nowrap}

.signin-card{width:min(520px,100%)}
.signin-card .hello{font-weight:700;color:var(--cyan);font-size:15px;letter-spacing:.02em}
.perks{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left}
.perks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.45;color:var(--muted)}
.perks li b{color:var(--ink)}
.perks .pk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--ink);background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 45%,transparent),color-mix(in srgb,var(--magenta) 45%,transparent))}
.signin-card .free-note{font-size:13px;font-weight:600;color:var(--ink)}

.mtitle,.burger,.m-email{display:none}
@media (max-width:900px){.mtitle{display:flex}.burger{display:grid}.m-email{display:block}}

.legal-links{display:flex;gap:14px;margin:10px 4px 0;font-size:12.5px}
.legal-links a{color:var(--muted);text-decoration:none}
.legal-links a:hover{color:var(--ink)}
.me .legal-links{justify-content:center;margin-top:6px}
@media (min-width:901px){.nav .legal-links{display:none}}

/* survey */
.survey-card{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent);border-radius:18px;padding:14px 16px}
.sfield{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sfield legend{font-weight:600;font-size:14.5px;margin-bottom:8px;padding:0}
.sq{display:flex;flex-wrap:wrap;gap:8px}
.sq .opt{border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink);border-radius:999px;padding:8px 13px;font-size:13.5px;cursor:pointer;font-family:inherit}
.sq .opt[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#0C1119;font-weight:600}

.sheet.wide{max-width:760px}
.res{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.res-row{display:grid;grid-template-columns:minmax(120px,1.2fr) 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.res-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.res-bar i{display:block;height:100%;background:var(--cyan);border-radius:99px}
.res-note{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;display:flex;flex-direction:column;gap:4px}

.m-email,.me div{overflow-wrap:break-word;min-width:0}
.me-email{font-size:11.5px;line-height:1.45}
.me{min-width:0;max-width:100%}
.legal-links{display:flex;gap:14px}

/* ================= Pro looks ================= */
:root{--dunes:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 1000%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22k%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%232A1638%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%237A2E4A%22/%3E%3Cstop offset=%22.72%22 stop-color=%22%23E0663A%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F7B26A%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22u%22 cx=%22.5%22 cy=%22.5%22 r=%22.5%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFE3A3%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23FFB45E%22/%3E%3Cstop offset=%221%22 stop-color=%22%23FF8A3D%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width=%221600%22 height=%221000%22 fill=%22url(%23k)%22/%3E%3Ccircle cx=%221080%22 cy=%22640%22 r=%22170%22 fill=%22url(%23u)%22/%3E%3Cpath d=%22M0 700 C260 610 470 640 700 690 S1150 600 1600 660 V1000 H0Z%22 fill=%22%23B8502F%22/%3E%3Cpath d=%22M0 800 C300 720 560 760 820 800 S1300 720 1600 770 V1000 H0Z%22 fill=%22%238A3424%22/%3E%3Cpath d=%22M0 890 C340 840 640 860 960 900 S1400 850 1600 880 V1000 H0Z%22 fill=%22%235A1F1C%22/%3E%3C/svg%3E");--woodgrain:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22600%22 viewBox=%220 0 600 600%22%3E%3Crect width=%22600%22 height=%22600%22 fill=%22%23231811%22/%3E%3Cg fill=%22none%22 stroke=%22%232E2016%22 stroke-width=%223%22 opacity=%22.9%22%3E%3Cpath d=%22M0 40 C150 30 300 55 600 35%22/%3E%3Cpath d=%22M0 110 C200 125 380 95 600 115%22/%3E%3Cpath d=%22M0 190 C140 175 350 205 600 185%22/%3E%3Cpath d=%22M0 270 C220 285 400 255 600 275%22/%3E%3Cpath d=%22M0 350 C160 335 330 368 600 345%22/%3E%3Cpath d=%22M0 430 C210 445 420 415 600 438%22/%3E%3Cpath d=%22M0 510 C150 498 360 525 600 505%22/%3E%3Cpath d=%22M0 580 C230 592 410 568 600 585%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%231B120C%22 stroke-width=%221.5%22 opacity=%22.8%22%3E%3Cpath d=%22M0 75 C180 85 360 62 600 78%22/%3E%3Cpath d=%22M0 230 C190 218 370 245 600 228%22/%3E%3Cpath d=%22M0 390 C170 402 390 378 600 395%22/%3E%3Cpath d=%22M0 545 C200 535 380 558 600 540%22/%3E%3C/g%3E%3Cellipse cx=%22420%22 cy=%22300%22 rx=%2226%22 ry=%229%22 fill=%22none%22 stroke=%22%232B1D14%22 stroke-width=%223%22/%3E%3C/svg%3E")}

/* ---- Sunset Desert: warm dusk, dunes, orange + coral ---- */
:root[data-skin="sunset"]{
  --bg:#1B0F1C; --bg-2:rgba(30,14,28,.6); --panel:rgba(40,18,34,.66); --panel-2:rgba(56,26,44,.7); --panel-hi:rgba(70,32,52,.8);
  --line:rgba(255,220,200,.10); --line-2:rgba(255,220,200,.20);
  --ink:#FFF1E8; --muted:#E0B7A6; --faint:#A67E72;
  --white:#FFB057; --on-white:#2A1210;
  --cyan:#FFB057; --magenta:#FF6F7F; --violet:#E0663A; --lav:#FFD2A6;
  --red:#FF7A85; --red-bg:rgba(255,122,133,.16); --amber:#FFD27A; --amber-bg:rgba(255,210,122,.14); --green:#9EE6B0; --green-bg:rgba(158,230,176,.14);
  --hero:"Sora","Poppins",sans-serif; --hero-fill:linear-gradient(90deg,#FFD27A,#FF9A4D 45%,#FF5E7E);
  --chart-line:#FFB057; --chart-fill:#E0663A; --chart-mark:#FF6F7F; --clk-a:#FFD27A; --clk-b:#FF8A4D; --clk-c:#FF5E7E; --knob-ring:#2A1210;
  --btn-radius:999px;
}
:root[data-skin="sunset"] body{background:var(--dunes) center bottom/cover fixed,#2A1638}
:root[data-skin="sunset"] body::before,:root[data-skin="sunset"] body::after{display:none}
:root[data-skin="sunset"] .frame{background:rgba(32,14,30,.55);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,210,170,.28)}
:root[data-skin="sunset"] .side{background:linear-gradient(180deg,rgba(42,18,40,.75),rgba(30,12,28,.75));border-right-color:rgba(255,210,170,.14)}
:root[data-skin="sunset"] .btn.primary{background:linear-gradient(90deg,#FFB057,#FF7A6A);border-color:transparent;color:#2A1210}
:root[data-skin="sunset"] .nav button[aria-current="page"],:root[data-skin="sunset"] .tab[aria-selected="true"]{background:linear-gradient(90deg,#FFB057,#FF7A6A);color:#2A1210}
:root[data-skin="sunset"] .sheet,:root[data-skin="sunset"] .signin-card{background:linear-gradient(180deg,rgba(48,20,40,.96),rgba(30,12,26,.97));border:1px solid rgba(255,210,170,.3)}
:root[data-skin="sunset"] .side.open .nav{background:linear-gradient(180deg,#2E1430,#1E0E1E)}
:root[data-skin="sunset"] .stat,:root[data-skin="sunset"] .panel-box,:root[data-skin="sunset"] .card,:root[data-skin="sunset"] .row,:root[data-skin="sunset"] .tabs{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
:root[data-skin="sunset"] .fab{box-shadow:0 10px 36px -8px rgba(255,120,80,.6)}
:root[data-skin="sunset"] .chip.read{background:rgba(255,176,87,.16);color:#FFD9AE}
:root[data-skin="sunset"] .nav button[aria-current="page"] .side-timer{color:#7A2E1A}

/* ---- Minimal Mono: light, black & white, clean ---- */
:root[data-skin="mono"]{
  color-scheme:light;
  --bg:#F4F4F1; --bg-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#F6F6F3; --panel-hi:#EDEDEA;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.16);
  --ink:#141414; --muted:#6A6A66; --faint:#9A9A95;
  --white:#141414; --on-white:#FFFFFF;
  --cyan:#141414; --magenta:#141414; --violet:#555; --lav:#333;
  --red:#D1242F; --red-bg:rgba(209,36,47,.08); --amber:#9A6700; --amber-bg:rgba(191,135,0,.12); --green:#1A7F37; --green-bg:rgba(26,127,55,.10);
  --hero:"Inter","Poppins",sans-serif; --hero-fill:linear-gradient(90deg,#141414,#141414);
  --display:"Inter","Poppins",sans-serif; --body:"Inter","Poppins",ui-sans-serif,system-ui,sans-serif;
  --chart-line:#141414; --chart-fill:#9A9A95; --chart-mark:#D1242F; --clk-a:#141414; --clk-b:#555; --clk-c:#141414; --knob-ring:#FFFFFF;
  --btn-radius:8px; --r:12px;
}
:root[data-skin="mono"] body{background:#F4F4F1}
:root[data-skin="mono"] body::before,:root[data-skin="mono"] body::after{display:none}
:root[data-skin="mono"] .frame{background:#FAFAF8;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 50px -30px rgba(0,0,0,.25)}
:root[data-skin="mono"] .side{background:#F1F1EE;border-right-color:rgba(0,0,0,.08)}
:root[data-skin="mono"] .btn{background:#fff}
:root[data-skin="mono"] .btn.primary{background:#141414;color:#fff;border-color:#141414}
:root[data-skin="mono"] .sheet,:root[data-skin="mono"] .signin-card{background:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 30px 80px -30px rgba(0,0,0,.35)}
:root[data-skin="mono"] .overlay{background:rgba(20,20,20,.35)}
:root[data-skin="mono"] .side.open .nav{background:#F7F7F4}
:root[data-skin="mono"] .hello .grad{color:#141414;background:none;-webkit-text-fill-color:#141414}
:root[data-skin="mono"] .hello .pt{color:#D1242F}
:root[data-skin="mono"] .fab{box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
:root[data-skin="mono"] .chip.read{background:rgba(0,0,0,.06);color:#333}
:root[data-skin="mono"] .card-head:hover .cname{text-shadow:none}
:root[data-skin="mono"] .dot{box-shadow:none}
:root[data-skin="mono"] .stat.bad{box-shadow:none;border-color:rgba(209,36,47,.35)}
:root[data-skin="mono"] .burger{background:#fff}
:root[data-skin="mono"] .burger .count{box-shadow:0 0 0 2px #F1F1EE}
:root[data-skin="mono"] .nav button[aria-current="page"] .side-timer{color:#ddd}
:root[data-skin="mono"] .plan{background:#fff}
:root[data-skin="mono"] .seg button[aria-pressed="true"],:root[data-skin="mono"] .sq .opt[aria-pressed="true"]{background:#141414;color:#fff;border-color:#141414}
:root[data-skin="mono"] .survey-card{background:#fff;border-color:rgba(0,0,0,.14)}
:root[data-skin="mono"] .inapp{color:#141414}
:root[data-skin="mono"] .card-doc,:root[data-skin="mono"] .card-h,:root[data-skin="mono"] .doc{background:#fff;border-color:rgba(0,0,0,.1)}
:root[data-skin="mono"] .perks .pk{background:#141414;color:#fff}
:root[data-skin="mono"] input::placeholder,:root[data-skin="mono"] textarea::placeholder{color:#9A9A95}


/* look picker previews */
.pv.sunset{background:var(--dunes) center bottom/cover}
.pv.sunset b{font-family:"Sora",sans-serif;font-weight:800;color:#FFF1E8;text-shadow:0 2px 14px rgba(60,10,20,.5)}
.pv.sunset i{background:linear-gradient(90deg,#FFB057,#FF7A6A);color:#2A1210}
.pv.mono{background:#F4F4F1;border-bottom:1px solid rgba(0,0,0,.1)}
.pv.mono b{font-family:"Inter",sans-serif;font-weight:800;color:#141414;letter-spacing:-.03em}
.pv.mono i{background:#141414;color:#fff;border-radius:6px}
.look .pro-badge{display:inline-block;margin-left:6px;font-family:var(--body);font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:2px 8px;border-radius:99px;background:#FFC266;color:#1A1208;vertical-align:2px}
.look.locked .pv{filter:saturate(.85)}

:root[data-skin="mono"]{--logo-check:#141414}
:root[data-skin="mono"] .cg-cell{background:rgba(0,0,0,.07)}
:root[data-skin="mono"] .cg-cell.l1{background:#C9E9D2}
:root[data-skin="mono"] .cg-cell.l2{background:#8FD1A3}
:root[data-skin="mono"] .cg-cell.l3{background:#3FAE62}
:root[data-skin="mono"] .cg-cell.l4{background:#1A7F37;box-shadow:none}
:root[data-skin="mono"] .cg-cell.fut{background:transparent;border:1px dashed rgba(0,0,0,.14)}
:root[data-skin="mono"] .clock{filter:none}

/* support inbox */
.ticket{gap:8px}
.ticket.done{opacity:.8}
.ticket .reply{border-left:3px solid var(--line-2);padding-left:10px;margin-top:4px}
.ticket .select{max-width:260px}
/* phone footer links */
.m-foot{display:none}
@media (max-width:900px){
  .m-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:26px 0 8px;margin-top:10px;border-top:1px solid var(--line);font-size:13px}
  .m-foot a,.m-foot button{color:var(--muted);text-decoration:none;background:none;border:0;padding:4px 2px;font:inherit;cursor:pointer}
}

/* daily email card */
.email-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.email-card .ec-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--cyan) 16%,transparent);color:var(--cyan);flex:none}
.email-card .ec-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.email-card .ec-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.email-card .ec-txt b{font-size:14.5px;display:flex;align-items:center;gap:6px}
.email-card .ec-act{display:flex;align-items:center;gap:8px;flex:none}
.pro-tag{font-size:10px;font-weight:800;letter-spacing:.06em;padding:1px 7px;border-radius:99px;background:#FFC266;color:#1A1208}
.switch{width:52px;height:30px;border-radius:99px;border:1px solid var(--line-2);background:rgba(255,255,255,.08);position:relative;cursor:pointer;padding:0;flex:none;transition:background .2s}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s}
.switch.on{background:var(--green);border-color:var(--green)}
.switch.on i{transform:translateX(22px)}
.switch[disabled]{opacity:.5}
:root[data-skin="mono"] .switch{background:rgba(0,0,0,.08)}
:root[data-skin="mono"] .switch.on{background:#1A7F37;border-color:#1A7F37}

/* ---- Pink Bloom: light blush pink, rose accents ---- */
:root[data-skin="pink"]{
  color-scheme:light;
  --bg:#FFF0F5; --bg-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#FFF6F9; --panel-hi:#FFE4EE;
  --line:rgba(190,24,93,.10); --line-2:rgba(190,24,93,.20);
  --ink:#3B1224; --muted:#8C5A70; --faint:#B98CA0;
  --white:#E0457B; --on-white:#FFFFFF;
  --cyan:#E0457B; --magenta:#F472B6; --violet:#C0266A; --lav:#F9A8D4;
  --red:#D1242F; --red-bg:rgba(209,36,47,.08); --amber:#A15C00; --amber-bg:rgba(245,158,11,.14); --green:#1A7F4E; --green-bg:rgba(26,127,78,.10);
  --hero:"Sora","Poppins",sans-serif; --hero-fill:linear-gradient(90deg,#F472B6,#E0457B 55%,#BE185D);
  --chart-line:#E0457B; --chart-fill:#F9A8D4; --chart-mark:#BE185D; --clk-a:#F9A8D4; --clk-b:#F472B6; --clk-c:#BE185D; --knob-ring:#FFFFFF;
  --btn-radius:999px; --logo-check:#3B1224;
}
:root[data-skin="pink"] body{background:radial-gradient(900px 600px at 0% 0%,rgba(249,168,212,.45),transparent 60%),radial-gradient(900px 700px at 100% 100%,rgba(244,114,182,.28),transparent 60%),#FFF0F5}
:root[data-skin="pink"] body::before,:root[data-skin="pink"] body::after{display:none}
:root[data-skin="pink"] .frame{background:rgba(255,250,252,.9);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(190,24,93,.14);box-shadow:0 20px 60px -30px rgba(190,24,93,.35)}
:root[data-skin="pink"] .side{background:#FFE8F0;border-right-color:rgba(190,24,93,.12)}
:root[data-skin="pink"] .btn{background:#fff}
:root[data-skin="pink"] .btn.primary{background:#E0457B;border-color:#E0457B;color:#fff}
:root[data-skin="pink"] .sheet,:root[data-skin="pink"] .signin-card{background:#fff;border:1px solid rgba(190,24,93,.16);box-shadow:0 30px 80px -30px rgba(190,24,93,.4)}
:root[data-skin="pink"] .overlay{background:rgba(59,18,36,.3)}
:root[data-skin="pink"] .side.open .nav{background:#FFF0F5}
:root[data-skin="pink"] .hello .pt{color:#E0457B}
:root[data-skin="pink"] .fab{box-shadow:0 10px 30px -8px rgba(224,69,123,.5)}
:root[data-skin="pink"] .chip.read{background:rgba(224,69,123,.10);color:#9D174D}
:root[data-skin="pink"] .card-head:hover .cname{text-shadow:none}
:root[data-skin="pink"] .dot{box-shadow:none}
:root[data-skin="pink"] .stat.bad{box-shadow:none;border-color:rgba(209,36,47,.35)}
:root[data-skin="pink"] .burger{background:#fff}
:root[data-skin="pink"] .burger .count{box-shadow:0 0 0 2px #FFE8F0}
:root[data-skin="pink"] .plan,:root[data-skin="pink"] .survey-card,:root[data-skin="pink"] .card-h,:root[data-skin="pink"] .doc{background:#fff}
:root[data-skin="pink"] .seg button[aria-pressed="true"],:root[data-skin="pink"] .sq .opt[aria-pressed="true"]{color:#fff}
:root[data-skin="pink"] .cg-cell{background:rgba(190,24,93,.07)}
:root[data-skin="pink"] .cg-cell.l1{background:#FBCFE8}
:root[data-skin="pink"] .cg-cell.l2{background:#F9A8D4}
:root[data-skin="pink"] .cg-cell.l3{background:#F472B6}
:root[data-skin="pink"] .cg-cell.l4{background:#DB2777;box-shadow:none}
:root[data-skin="pink"] .cg-cell.fut{background:transparent;border:1px dashed rgba(190,24,93,.18)}
:root[data-skin="pink"] .clock{filter:none}
:root[data-skin="pink"] .switch{background:rgba(190,24,93,.10)}
:root[data-skin="pink"] .switch.on{background:#E0457B;border-color:#E0457B}
:root[data-skin="pink"] .nav button[aria-current="page"] .side-timer{color:#fff}
:root[data-skin="pink"] input::placeholder,:root[data-skin="pink"] textarea::placeholder{color:#B98CA0}
.pv.pink{background:radial-gradient(160px 90px at 0% 0%,rgba(249,168,212,.8),transparent 70%),radial-gradient(160px 90px at 100% 100%,rgba(244,114,182,.5),transparent 70%),#FFF0F5}
.pv.pink b{font-family:"Sora",sans-serif;font-weight:800;background:linear-gradient(90deg,#F472B6,#E0457B 55%,#BE185D);-webkit-background-clip:text;background-clip:text;color:transparent}
.pv.pink i{background:#E0457B;color:#fff}

/* ---------- Today card, check-in, calendar, attendance, office hours ---------- */
.today-box{display:flex;flex-direction:column;gap:10px}
.today-box .label{margin-top:4px}
.forgot{display:flex;flex-direction:column;gap:8px;background:var(--amber-bg);border:1px solid rgba(255,194,102,.22);border-radius:14px;padding:10px 12px}
.sess-list{display:flex;flex-direction:column;gap:8px}
.sess{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--cc);border-radius:12px;padding:9px 12px}
.sess-h{display:flex;align-items:flex-start;gap:10px;min-width:0}
.sess-h .dot{margin-top:6px}
.next-class{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--cc);border-radius:14px;padding:12px 14px;margin:2px 0 6px}
.next-class .nc-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.next-class .nc-t b{font-size:16px}
.next-class .chip{flex:none}
.sess-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sess-t b{font-weight:600}
.ci{display:flex;flex-wrap:wrap;gap:4px}
.ci-b{border:1px solid var(--line-2);background:transparent;color:var(--muted);border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:600;line-height:1.2;min-height:32px}
.ci-b:hover{color:var(--ink);border-color:var(--ink)}
.ci-b[aria-pressed="true"]{color:#0C1119;border-color:transparent}
.ci-b.went[aria-pressed="true"]{background:var(--green)}
.ci-b.late[aria-pressed="true"]{background:var(--amber)}
.ci-b.missed[aria-pressed="true"]{background:var(--red)}
.ci-b.excused[aria-pressed="true"],.ci-b.none[aria-pressed="true"]{background:var(--muted)}
.due-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px}
.upsell{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--panel-2);border:1px dashed var(--line-2);border-radius:14px;padding:12px 14px}
.upsell b{display:inline-flex;gap:8px;align-items:center}
/* class times editor */
.meet{display:flex;flex-direction:column;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px}
.meet-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.meet-top .input[type="time"]{width:auto}
.dtogs{display:flex;flex-wrap:wrap;gap:4px}
.dtog{width:36px;height:34px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-weight:600;font-size:12.5px}
.dtog[aria-pressed="true"]{background:var(--cc,var(--cyan));border-color:transparent;color:#fff}
/* calendar */
.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:1100px){.cal-wrap{grid-template-columns:minmax(0,1fr)}}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0}
.cal-d{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:96px;padding:6px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);min-width:0;overflow:hidden}
.cal-d:hover{border-color:var(--line-2)}
.cal-d.out{opacity:.45}
.cal-d .n{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.cal-d.now .n{background:var(--ink);color:var(--bg);border-radius:999px;padding:0 7px;align-self:flex-start}
.cal-d.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.cal-d.exam{background:color-mix(in srgb,var(--red) 10%,var(--panel));border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.cal-circ{display:flex;flex-wrap:wrap;gap:3px}
.cc-c{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;border:2px solid var(--cc)}
.cc-c.f{background:var(--cc)}
.cc-c.o{background:transparent}
.cc-c.m{background:var(--red);border-color:var(--red)}
.cc-c.x{background:transparent;border:2px dashed var(--faint)}
.cal-its{display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-it{display:block;font-size:11px;line-height:1.3;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,var(--cc) 22%,transparent);border-left:3px solid var(--cc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-it.ex{background:var(--cc);color:#fff;font-weight:700}
.cal-it.done{opacity:.5;text-decoration:line-through}
.cal-more,.cal-oh{font-size:10.5px;color:var(--muted)}
.cal-oh::before{content:"● ";color:var(--cyan)}
.cal-detail{display:flex;flex-direction:column;gap:10px}
.cal-legend{display:flex;flex-wrap:wrap;gap:8px 16px}
.cal-legend > span{display:inline-flex;align-items:center;gap:6px}
.cal-legend .cal-it{display:inline-block}
.oh-v{display:flex;flex-direction:column;gap:4px}
.oh-v .dot{display:inline-block;margin-right:6px}
@media (max-width:600px){
  .cal{gap:2px}
  .cal-d{min-height:64px;padding:4px 3px;border-radius:8px;gap:2px}
  .cal-d .n{font-size:11.5px}
  .cc-c{width:8px;height:8px;border-width:1.5px}
  .cal-it{font-size:9px;line-height:1.35;padding:0 2px 0 3px;border-left-width:2px;border-radius:3px;text-overflow:clip;letter-spacing:-.1px}
  .cal-it.ex{box-shadow:0 0 0 1px var(--red)}
  .cal-more,.cal-oh{font-size:9.5px}
  .cal-oh{font-size:0}.cal-oh::before{font-size:10px}
  .sess{padding:8px 10px}
  .sess .ci{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:4px}
  .ci-b{padding:6px 2px;font-size:11.5px;min-height:36px;white-space:nowrap}
  .cal-legend .cal-it{font-size:11px;height:auto;padding:1px 5px;background:var(--cc)}
}
:root[data-skin="mono"] .ci-b[aria-pressed="true"],:root[data-skin="pink"] .ci-b[aria-pressed="true"]{color:#141414}

/* Pro lock */
.lock{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;background:var(--panel);border:1px dashed var(--line-2);border-radius:var(--r);padding:18px 20px}
.lock.big{grid-template-columns:1fr;justify-items:start;padding:26px}
.lock-ic{font-size:26px;line-height:1}
.lock-t b{display:inline-flex;align-items:center;gap:8px;font-size:16px}
.lock-list{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;display:flex;flex-direction:column;gap:4px}
@media (max-width:600px){.lock{grid-template-columns:1fr}}

/* phone menu: a blurred .frame turns the fixed menu into a page-tall box that can't scroll.
   Drop the blur while the menu is open and size the menu to the screen. */
@media (max-width:900px){
  html.menu-open .frame{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .side.open .nav{bottom:auto;height:calc(100vh - 65px - env(safe-area-inset-top,0px));height:calc(100dvh - 65px - env(safe-area-inset-top,0px));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* celebration */
.celebrate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:opacity .5s}
.celebrate.out{opacity:0}
.cel-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cel-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--panel);border:1px solid var(--line-2);border-radius:22px;padding:22px 28px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:celpop .45s cubic-bezier(.2,1.4,.4,1) both;max-width:min(360px,calc(100vw - 32px))}
.cel-card b{font-family:var(--display);font-size:26px;letter-spacing:-.02em}
.cel-card span{color:var(--muted);font-size:14px}
@keyframes celpop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.cel-card{animation:none}}

/* pricing extras: founding price, free trial */
.plan-price s.was{color:var(--muted);font-size:16px}
.trial-box{display:flex;flex-direction:column;gap:2px;border:1px dashed var(--line-2);border-radius:12px;padding:8px 12px;font-size:13px}
.trial-box b{color:var(--green)}
.trial-box span{color:var(--muted)}
.founding{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 16%,transparent),transparent);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);border-radius:var(--r);padding:14px 18px}
.founding .f-badge{font:800 11px/1 var(--body);letter-spacing:.14em;background:var(--amber);color:#1A1208;border-radius:999px;padding:7px 12px;white-space:nowrap}
.founding b{font-size:15px}

/* referral page */
.invite{display:flex;flex-direction:column;gap:8px}
.linkrow{display:flex;gap:8px;flex-wrap:wrap}
.linkrow .input{flex:1 1 260px;min-width:0}
.share-msg{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.5}
.ladder{display:flex;flex-direction:column;gap:8px}
.rung{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.rung-n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;border:2px solid var(--line-2)}
.rung.done .rung-n{background:var(--green);color:#0C1119;border-color:transparent}
.rung-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rung-t span{color:var(--muted);font-size:13px}
.rung .bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
.rung .bar i{display:block;height:100%;background:var(--green)}
.rules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13.5px}

/* ===== Sep 30 fixes: text overflow, collapsible menu, wider calendar, timer ===== */
/* long words / class names wrap instead of running out of their box */
h1,h2,h3,p,.cname,.ctitle,.hello,.cv-head h2,.notice,.hint,.muted,.label,.stat .k,td,th,.sess-row,.oh-v,.clk-sub,.mtitle{overflow-wrap:anywhere}
.topbar > div,.cv-head > div,.card-head > div,.sec-h > *,.meet-top > *,.focus-side,.cal-detail,.stat{min-width:0}
.cname{flex-wrap:wrap;row-gap:2px}
.cv-head h2{flex-wrap:wrap;row-gap:4px}
.main img,.main svg,.main table{max-width:100%}
.meet-top .input{min-width:0}
@media (max-width:600px){.meet-top .input[style]{max-width:none!important;flex:1 1 140px}}

/* use more of wide screens */
.frame{max-width:1560px}

/* collapsible left menu (laptop/desktop) */
.logo{position:relative}
.mini-tog{display:none}
@media (min-width:901px){
  .mini-tog{display:grid;place-items:center;position:absolute;top:-14px;right:-8px;width:28px;height:28px;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-size:15px;line-height:1;padding:0}
  .mini-tog:hover{color:var(--ink);background:rgba(255,255,255,.06)}
  .frame{transition:grid-template-columns .2s}
  html.side-mini .frame{grid-template-columns:68px minmax(0,1fr)}
  html.side-mini .side{padding:22px 8px;align-items:center}
  html.side-mini .logo b,html.side-mini .nav .name,html.side-mini .nav-label,html.side-mini .me,html.side-mini .side-timer,html.side-mini .pro-tag{display:none!important}
  html.side-mini .logo svg{width:34px;height:34px}
  html.side-mini .mini-tog{position:static;margin-top:8px}
  html.side-mini .nav{align-items:center;gap:6px}
  html.side-mini .nav button{width:44px;height:40px;padding:0;justify-content:center;position:relative}
  html.side-mini .nav .count{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;font-size:10px;padding:0 4px}
  html.side-mini .nav .dot{width:12px;height:12px}
}

/* calendar: bigger month grid, slimmer side panel and assignment chips */
.cal-wrap{grid-template-columns:minmax(0,1fr) 270px}
@media (max-width:1250px){.cal-wrap{grid-template-columns:minmax(0,1fr)}}
.cal-d{min-height:108px}
@media (min-width:601px){.cal-it{font-size:10.5px;line-height:1.25;padding:0 4px;border-left-width:2px}}
.cal-detail .item{font-size:13px}

/* timer: scroll lands below the sticky phone bar */
.focus-box{scroll-margin-top:84px}
.clk-arc{transition:stroke-dashoffset .25s linear,opacity .2s}

/* ---------- inside the iPhone/iPad/Mac app only (html.native-app is set in index.html) ---------- */
.native-app{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.native-app,.native-app body{overscroll-behavior:none}
.native-app button,.native-app .btn,.native-app a,.native-app .side,.native-app nav{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Big screens in the app (Mac, iPad in landscape): use the whole window instead of a centered column. */
.native-app .frame{max-width:none}
@media (min-width:1800px){.native-app body{font-size:15px}.native-app .frame{grid-template-columns:260px minmax(0,1fr)}}

/* ===== White looks: Daylight, Cloud, Notebook (Pro) and Flow (free) =====
   They share Minimal Mono's light-mode fixes (copied below), then add their own colors and type. */
:root[data-skin="daylight"] body,:root[data-skin="cloud"] body,:root[data-skin="notebook"] body,:root[data-skin="flow"] body{background:#F4F4F1}
:root[data-skin="daylight"] body::before,:root[data-skin="daylight"] body::after,:root[data-skin="cloud"] body::before,:root[data-skin="cloud"] body::after,:root[data-skin="notebook"] body::before,:root[data-skin="notebook"] body::after,:root[data-skin="flow"] body::before,:root[data-skin="flow"] body::after{display:none}
:root[data-skin="daylight"] .frame,:root[data-skin="cloud"] .frame,:root[data-skin="notebook"] .frame,:root[data-skin="flow"] .frame{background:#FAFAF8;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 50px -30px rgba(0,0,0,.25)}
:root[data-skin="daylight"] .side,:root[data-skin="cloud"] .side,:root[data-skin="notebook"] .side,:root[data-skin="flow"] .side{background:#F1F1EE;border-right-color:rgba(0,0,0,.08)}
:root[data-skin="daylight"] .btn,:root[data-skin="cloud"] .btn,:root[data-skin="notebook"] .btn,:root[data-skin="flow"] .btn{background:#fff}
:root[data-skin="daylight"] .btn.primary,:root[data-skin="cloud"] .btn.primary,:root[data-skin="notebook"] .btn.primary,:root[data-skin="flow"] .btn.primary{background:#141414;color:#fff;border-color:#141414}
:root[data-skin="daylight"] .sheet,:root[data-skin="daylight"] .signin-card,:root[data-skin="cloud"] .sheet,:root[data-skin="cloud"] .signin-card,:root[data-skin="notebook"] .sheet,:root[data-skin="notebook"] .signin-card,:root[data-skin="flow"] .sheet,:root[data-skin="flow"] .signin-card{background:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 30px 80px -30px rgba(0,0,0,.35)}
:root[data-skin="daylight"] .overlay,:root[data-skin="cloud"] .overlay,:root[data-skin="notebook"] .overlay,:root[data-skin="flow"] .overlay{background:rgba(20,20,20,.35)}
:root[data-skin="daylight"] .side.open .nav,:root[data-skin="cloud"] .side.open .nav,:root[data-skin="notebook"] .side.open .nav,:root[data-skin="flow"] .side.open .nav{background:#F7F7F4}
:root[data-skin="daylight"] .hello .grad,:root[data-skin="cloud"] .hello .grad,:root[data-skin="notebook"] .hello .grad,:root[data-skin="flow"] .hello .grad{color:#141414;background:none;-webkit-text-fill-color:#141414}
:root[data-skin="daylight"] .hello .pt,:root[data-skin="cloud"] .hello .pt,:root[data-skin="notebook"] .hello .pt,:root[data-skin="flow"] .hello .pt{color:#D1242F}
:root[data-skin="daylight"] .fab,:root[data-skin="cloud"] .fab,:root[data-skin="notebook"] .fab,:root[data-skin="flow"] .fab{box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
:root[data-skin="daylight"] .chip.read,:root[data-skin="cloud"] .chip.read,:root[data-skin="notebook"] .chip.read,:root[data-skin="flow"] .chip.read{background:rgba(0,0,0,.06);color:#333}
:root[data-skin="daylight"] .card-head:hover .cname,:root[data-skin="cloud"] .card-head:hover .cname,:root[data-skin="notebook"] .card-head:hover .cname,:root[data-skin="flow"] .card-head:hover .cname{text-shadow:none}
:root[data-skin="daylight"] .dot,:root[data-skin="cloud"] .dot,:root[data-skin="notebook"] .dot,:root[data-skin="flow"] .dot{box-shadow:none}
:root[data-skin="daylight"] .stat.bad,:root[data-skin="cloud"] .stat.bad,:root[data-skin="notebook"] .stat.bad,:root[data-skin="flow"] .stat.bad{box-shadow:none;border-color:rgba(209,36,47,.35)}
:root[data-skin="daylight"] .burger,:root[data-skin="cloud"] .burger,:root[data-skin="notebook"] .burger,:root[data-skin="flow"] .burger{background:#fff}
:root[data-skin="daylight"] .burger .count,:root[data-skin="cloud"] .burger .count,:root[data-skin="notebook"] .burger .count,:root[data-skin="flow"] .burger .count{box-shadow:0 0 0 2px #F1F1EE}
:root[data-skin="daylight"] .nav button[aria-current="page"] .side-timer,:root[data-skin="cloud"] .nav button[aria-current="page"] .side-timer,:root[data-skin="notebook"] .nav button[aria-current="page"] .side-timer,:root[data-skin="flow"] .nav button[aria-current="page"] .side-timer{color:#ddd}
:root[data-skin="daylight"] .plan,:root[data-skin="cloud"] .plan,:root[data-skin="notebook"] .plan,:root[data-skin="flow"] .plan{background:#fff}
:root[data-skin="daylight"] .seg button[aria-pressed="true"],:root[data-skin="daylight"] .sq .opt[aria-pressed="true"],:root[data-skin="cloud"] .seg button[aria-pressed="true"],:root[data-skin="cloud"] .sq .opt[aria-pressed="true"],:root[data-skin="notebook"] .seg button[aria-pressed="true"],:root[data-skin="notebook"] .sq .opt[aria-pressed="true"],:root[data-skin="flow"] .seg button[aria-pressed="true"],:root[data-skin="flow"] .sq .opt[aria-pressed="true"]{background:#141414;color:#fff;border-color:#141414}
:root[data-skin="daylight"] .survey-card,:root[data-skin="cloud"] .survey-card,:root[data-skin="notebook"] .survey-card,:root[data-skin="flow"] .survey-card{background:#fff;border-color:rgba(0,0,0,.14)}
:root[data-skin="daylight"] .inapp,:root[data-skin="cloud"] .inapp,:root[data-skin="notebook"] .inapp,:root[data-skin="flow"] .inapp{color:#141414}
:root[data-skin="daylight"] .card-doc,:root[data-skin="daylight"] .card-h,:root[data-skin="daylight"] .doc,:root[data-skin="cloud"] .card-doc,:root[data-skin="cloud"] .card-h,:root[data-skin="cloud"] .doc,:root[data-skin="notebook"] .card-doc,:root[data-skin="notebook"] .card-h,:root[data-skin="notebook"] .doc,:root[data-skin="flow"] .card-doc,:root[data-skin="flow"] .card-h,:root[data-skin="flow"] .doc{background:#fff;border-color:rgba(0,0,0,.1)}
:root[data-skin="daylight"] .perks .pk,:root[data-skin="cloud"] .perks .pk,:root[data-skin="notebook"] .perks .pk,:root[data-skin="flow"] .perks .pk{background:#141414;color:#fff}
:root[data-skin="daylight"] input::placeholder,:root[data-skin="daylight"] textarea::placeholder,:root[data-skin="cloud"] input::placeholder,:root[data-skin="cloud"] textarea::placeholder,:root[data-skin="notebook"] input::placeholder,:root[data-skin="notebook"] textarea::placeholder,:root[data-skin="flow"] input::placeholder,:root[data-skin="flow"] textarea::placeholder{color:#9A9A95}
:root[data-skin="daylight"],:root[data-skin="cloud"],:root[data-skin="notebook"],:root[data-skin="flow"]{--logo-check:#141414}
:root[data-skin="daylight"] .cg-cell,:root[data-skin="cloud"] .cg-cell,:root[data-skin="notebook"] .cg-cell,:root[data-skin="flow"] .cg-cell{background:rgba(0,0,0,.07)}
:root[data-skin="daylight"] .cg-cell.l1,:root[data-skin="cloud"] .cg-cell.l1,:root[data-skin="notebook"] .cg-cell.l1,:root[data-skin="flow"] .cg-cell.l1{background:#C9E9D2}
:root[data-skin="daylight"] .cg-cell.l2,:root[data-skin="cloud"] .cg-cell.l2,:root[data-skin="notebook"] .cg-cell.l2,:root[data-skin="flow"] .cg-cell.l2{background:#8FD1A3}
:root[data-skin="daylight"] .cg-cell.l3,:root[data-skin="cloud"] .cg-cell.l3,:root[data-skin="notebook"] .cg-cell.l3,:root[data-skin="flow"] .cg-cell.l3{background:#3FAE62}
:root[data-skin="daylight"] .cg-cell.l4,:root[data-skin="cloud"] .cg-cell.l4,:root[data-skin="notebook"] .cg-cell.l4,:root[data-skin="flow"] .cg-cell.l4{background:#1A7F37;box-shadow:none}
:root[data-skin="daylight"] .cg-cell.fut,:root[data-skin="cloud"] .cg-cell.fut,:root[data-skin="notebook"] .cg-cell.fut,:root[data-skin="flow"] .cg-cell.fut{background:transparent;border:1px dashed rgba(0,0,0,.14)}
:root[data-skin="daylight"] .clock,:root[data-skin="cloud"] .clock,:root[data-skin="notebook"] .clock,:root[data-skin="flow"] .clock{filter:none}
:root[data-skin="daylight"] .switch,:root[data-skin="cloud"] .switch,:root[data-skin="notebook"] .switch,:root[data-skin="flow"] .switch{background:rgba(0,0,0,.08)}
:root[data-skin="daylight"] .switch.on,:root[data-skin="cloud"] .switch.on,:root[data-skin="notebook"] .switch.on,:root[data-skin="flow"] .switch.on{background:#1A7F37;border-color:#1A7F37}
:root[data-skin="daylight"] .ci-b[aria-pressed="true"],:root[data-skin="cloud"] .ci-b[aria-pressed="true"],:root[data-skin="notebook"] .ci-b[aria-pressed="true"],:root[data-skin="flow"] .ci-b[aria-pressed="true"]{color:#141414}
:root[data-skin="daylight"],:root[data-skin="cloud"],:root[data-skin="notebook"],:root[data-skin="flow"]{
  color-scheme:light;
  --bg:#F4F4F1; --bg-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#F6F6F3; --panel-hi:#EDEDEA;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.16);
  --ink:#141414; --muted:#6A6A66; --faint:#9A9A95;
  --white:#141414; --on-white:#FFFFFF;
  --cyan:#141414; --magenta:#141414; --violet:#555; --lav:#333;
  --red:#D1242F; --red-bg:rgba(209,36,47,.08); --amber:#9A6700; --amber-bg:rgba(191,135,0,.12); --green:#1A7F37; --green-bg:rgba(26,127,55,.10);
  --hero:"Inter","Poppins",sans-serif; --hero-fill:linear-gradient(90deg,#141414,#141414);
  --display:"Inter","Poppins",sans-serif; --body:"Inter","Poppins",ui-sans-serif,system-ui,sans-serif;
  --chart-line:#141414; --chart-fill:#9A9A95; --chart-mark:#D1242F; --clk-a:#141414; --clk-b:#555; --clk-c:#141414; --knob-ring:#FFFFFF;
  --btn-radius:8px; --r:12px;
}
/* Daylight: white glass with the brand gradient (teal → violet → pink) */
:root[data-skin="daylight"]{--bg:#F7F8FC;--panel:#FFFFFF;--panel-2:#F4F5FA;--line:rgba(30,40,90,.08);--line-2:rgba(30,40,90,.14);--ink:#141A33;--muted:#5D6482;--white:#141A33;
  --cyan:#14B8A6;--magenta:#E0359B;--violet:#7C5CFF;--hero:"Sora","Poppins",sans-serif;--display:"Sora","Poppins",sans-serif;--body:"Poppins",ui-sans-serif,system-ui,sans-serif;--r:18px;--btn-radius:999px;
  --chart-line:#7C5CFF;--chart-fill:#B9A8FF;--chart-mark:#E0359B;--clk-a:#14B8A6;--clk-b:#7C5CFF;--clk-c:#E0359B;--logo-check:#7C5CFF}
:root[data-skin="daylight"] body{background:radial-gradient(500px 400px at 0% 0%,rgba(20,184,166,.30),transparent 60%),radial-gradient(520px 420px at 100% 35%,rgba(224,53,155,.24),transparent 60%),radial-gradient(600px 500px at 30% 100%,rgba(124,92,255,.24),transparent 60%),#F7F8FC;background-attachment:fixed}
:root[data-skin="daylight"] .frame{background:rgba(255,255,255,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(255,255,255,.9)}
:root[data-skin="daylight"] .side{background:rgba(255,255,255,.7)}
:root[data-skin="daylight"] .hello .grad{background:linear-gradient(90deg,#14B8A6,#7C5CFF 50%,#E0359B);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:root[data-skin="daylight"] .hello .pt{color:#E0359B}
:root[data-skin="daylight"] .btn.primary,:root[data-skin="daylight"] .seg button[aria-pressed="true"]{background:linear-gradient(90deg,#14B8A6,#7C5CFF 55%,#E0359B);border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px rgba(124,92,255,.55)}
:root[data-skin="daylight"] .card,:root[data-skin="daylight"] .stat,:root[data-skin="daylight"] .panel-box{background:rgba(255,255,255,.85);box-shadow:0 10px 30px -18px rgba(40,50,120,.35);border-color:#fff}
:root[data-skin="daylight"] .stat.bad{background:linear-gradient(135deg,#fff,#FFF0F3);border-color:rgba(224,53,155,.25)}
:root[data-skin="daylight"] .switch.on{background:#7C5CFF;border-color:#7C5CFF}
/* Cloud: Apple-like white and blue, italic serif headline */
:root[data-skin="cloud"]{--bg:#F2F4F8;--panel:#FFFFFF;--panel-2:#F5F7FA;--line:rgba(0,30,80,.07);--line-2:rgba(0,30,80,.13);--ink:#0F172A;--muted:#64748B;--white:#0F172A;
  --cyan:#0A6CFF;--magenta:#0A6CFF;--violet:#5E8BFF;--red:#FF3B30;--hero:"Inter",system-ui,sans-serif;--display:"Inter",system-ui,sans-serif;--body:"Inter",ui-sans-serif,system-ui,sans-serif;--r:16px;--btn-radius:12px;
  --chart-line:#0A6CFF;--chart-fill:#9CC3FF;--chart-mark:#FF3B30;--clk-a:#0A6CFF;--clk-b:#5E8BFF;--clk-c:#0A6CFF;--logo-check:#0A6CFF}
:root[data-skin="cloud"] body{background:linear-gradient(180deg,#EAF2FF 0,#F2F4F8 320px);background-attachment:fixed}
:root[data-skin="cloud"] .frame{background:rgba(255,255,255,.4);border-color:rgba(0,30,80,.06)}
:root[data-skin="cloud"] .side{background:rgba(255,255,255,.85)}
:root[data-skin="cloud"] .hello .grad{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;color:#0A6CFF;-webkit-text-fill-color:#0A6CFF;background:none}
:root[data-skin="cloud"] .hello .pt{color:#0A6CFF}
:root[data-skin="cloud"] .btn.primary,:root[data-skin="cloud"] .seg button[aria-pressed="true"]{background:#0A6CFF;border-color:#0A6CFF;color:#fff;box-shadow:0 6px 16px -6px rgba(10,108,255,.6)}
:root[data-skin="cloud"] .card,:root[data-skin="cloud"] .stat,:root[data-skin="cloud"] .panel-box{background:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -14px rgba(15,23,42,.18)}
:root[data-skin="cloud"] .stat.bad{background:#fff;box-shadow:inset 3px 0 0 #FF3B30,0 8px 24px -14px rgba(15,23,42,.18)}
:root[data-skin="cloud"] .switch.on{background:#34C759;border-color:#34C759}
/* Notebook: warm cream paper, navy ink, coral, serif */
:root[data-skin="notebook"]{--bg:#FBF6EC;--panel:#FFFDF8;--panel-2:#F7F0E2;--line:rgba(60,40,10,.10);--line-2:rgba(60,40,10,.18);--ink:#1D2B4F;--muted:#6B6458;--white:#1D2B4F;--on-white:#FBF6EC;
  --cyan:#1D2B4F;--magenta:#F2665C;--violet:#3D4F80;--red:#E04B3F;--hero:"Playfair Display",Georgia,serif;--display:"Playfair Display",Georgia,serif;--body:"Poppins",ui-sans-serif,system-ui,sans-serif;--r:14px;--btn-radius:10px;
  --chart-line:#1D2B4F;--chart-fill:#9AA6C4;--chart-mark:#F2665C;--clk-a:#F2665C;--clk-b:#1D2B4F;--clk-c:#F2665C;--logo-check:#1D2B4F}
:root[data-skin="notebook"] body{background:#FBF6EC;background-image:radial-gradient(rgba(29,43,79,.07) 1px,transparent 1px);background-size:18px 18px}
:root[data-skin="notebook"] .frame{background:rgba(255,253,248,.7);border-color:rgba(60,40,10,.12)}
:root[data-skin="notebook"] .side{background:#F7EFDF}
:root[data-skin="notebook"] .hello{font-weight:700;letter-spacing:-.01em}
:root[data-skin="notebook"] .hello .grad{font-style:italic;color:#F2665C;-webkit-text-fill-color:#F2665C;background:none}
:root[data-skin="notebook"] .hello .pt{color:#F2665C}
:root[data-skin="notebook"] .btn.primary,:root[data-skin="notebook"] .seg button[aria-pressed="true"]{background:#1D2B4F;border-color:#1D2B4F;color:#FBF6EC}
:root[data-skin="notebook"] .card,:root[data-skin="notebook"] .stat,:root[data-skin="notebook"] .panel-box{background:#FFFDF8;border-color:rgba(60,40,10,.14);box-shadow:3px 3px 0 rgba(29,43,79,.08)}
:root[data-skin="notebook"] .stat.bad{background:#FFF1EC;border-color:rgba(242,102,92,.4)}
:root[data-skin="notebook"] .switch.on{background:#F2665C;border-color:#F2665C}
/* look picker previews */
.pv.daylight{background:radial-gradient(160px 90px at 0% 0%,rgba(20,184,166,.35),transparent 70%),radial-gradient(160px 90px at 100% 100%,rgba(224,53,155,.30),transparent 70%),#F7F8FC}
.pv.daylight b{font-family:"Sora",sans-serif;font-weight:800;background:linear-gradient(90deg,#14B8A6,#7C5CFF 50%,#E0359B);-webkit-background-clip:text;background-clip:text;color:transparent}
.pv.daylight i{background:linear-gradient(90deg,#14B8A6,#7C5CFF,#E0359B);color:#fff}
.pv.cloud{background:linear-gradient(180deg,#EAF2FF,#F7F9FC)}
.pv.cloud b{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;color:#0A6CFF}
.pv.cloud i{background:#0A6CFF;color:#fff;border-radius:8px}
.pv.notebook{background:#FBF6EC;background-image:radial-gradient(rgba(29,43,79,.12) 1px,transparent 1px);background-size:12px 12px}
.pv.notebook b{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;color:#F2665C}
.pv.notebook i{background:#1D2B4F;color:#FBF6EC;border-radius:6px}

/* ---------- phone tab bar: floating glass capsule (Today · Calendar · Classes · Focus) ---------- */
.tabbar{display:none}
@media (max-width:900px){
  .tabbar{display:block;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:25;pointer-events:none}
  .tabbar[hidden]{display:none}
  .tb-glass{pointer-events:auto;display:flex;max-width:520px;margin:0 auto;padding:6px;border-radius:999px;
    background:color-mix(in srgb,var(--panel) 52%,transparent);
    -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
    border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
    box-shadow:0 14px 40px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14)}
  .tb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:var(--muted);padding:7px 2px 6px;border-radius:999px;font:600 11px/1.1 var(--body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s,background .15s}
  .tb svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tb.on{color:var(--ink)}
  .tb.on svg{stroke-width:2.1}
  .tb.on:first-child svg{fill:currentColor}
  .tb:active{background:color-mix(in srgb,var(--ink) 8%,transparent)}
  .tb-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tb-ic{position:relative;display:grid}
  .tb-live{position:absolute;top:0;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
  .main{padding-bottom:120px}
  .fab{bottom:calc(94px + env(safe-area-inset-bottom,0px))}
  html.menu-open .tabbar{display:none}
}
@media (max-width:360px){.tb{font-size:10px}.tb svg{width:22px;height:22px}}

/* "Next 7 days" beside the focus timer: bigger donut, class list below it (no empty space) */
.charts.two > .panel-box:not(.focus-box){display:flex;flex-direction:column}
.charts.two .donut-row{flex:1;flex-direction:column;align-items:stretch;justify-content:center;gap:22px;margin-top:14px}
.charts.two .donut-row svg{width:min(250px,100%);height:auto;aspect-ratio:1;align-self:center}
.charts.two .legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px 18px}
.charts.two .legend div{font-size:14px}
.charts.two .legend{flex:none;align-content:start}
.charts.two .legend div{row-gap:2px}

/* ---------- CLUBS (see CLUBS-PLAN.md) ---------- */
.beta-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:1px 6px;border-radius:99px;background:var(--violet);color:#fff;vertical-align:middle}
.beta-tag.big{font-size:12px;padding:3px 9px}
.busy{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r);padding:14px 16px;background:var(--amber-bg);border:1px solid rgba(255,194,102,.3)}
.busy-ic{font-size:20px;line-height:1}
.busy b{display:block;margin-bottom:4px}
.busy-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0;font-size:13.5px}
.busy-tag{--cc:var(--c0);display:inline-flex;align-items:center;border:0;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--cc) 28%,transparent);cursor:default;white-space:normal;text-align:left;max-width:100%}
.busy>div{min-width:0}
button.busy-tag{cursor:pointer}
.clubs-week{display:flex;flex-direction:column;gap:10px}
.next-meet{--cc:var(--c0);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;text-align:left;width:100%;border:1px solid var(--line);border-left:4px solid var(--cc);border-radius:12px;padding:10px 14px;background:rgba(255,255,255,.03);color:var(--ink)}
button.next-meet{cursor:pointer}
.cw-list{display:flex;flex-direction:column;gap:2px}
.cw-ev{--cc:var(--c0);display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--ink);text-align:left;padding:6px 4px;border-radius:8px;cursor:pointer;font-size:13.5px}
.cw-ev:hover{background:rgba(255,255,255,.04)}
.cw-ev .mono{min-width:96px;color:var(--muted);font-size:12px}
.cw-row{display:flex;gap:8px;font-size:13.5px;align-items:baseline}
.cw-row.lead{color:var(--amber)}
.cw-row.lead b{color:var(--ink)}
.club-next{display:flex;flex-direction:column;gap:2px}
.club-ann-1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.demo-role{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ann{border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.02)}
.ann.pinned{border-color:color-mix(in srgb,var(--cc) 55%,transparent)}
.ann-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.ann-top .spacer,.ann-new .spacer{flex:1}
.ann-new{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.club-date{display:flex;gap:12px;align-items:flex-start}
.club-date .t{font-weight:600;background:none;border:0;padding:0;color:var(--ink);text-align:left;cursor:pointer}
.cd-em{font-size:20px;line-height:1.2}
.seat-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.seat-box h3{margin:0;font-size:15px}
.links{display:flex;flex-wrap:wrap;gap:8px}
.link-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;font-size:13px}
.link-chip a{color:var(--ink);text-decoration:none}
.link-chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px}
.fly-row{display:grid;grid-template-columns:auto minmax(0,1fr) 160px 135px 170px;gap:8px;align-items:center}
@media (max-width:700px){.fly-row{grid-template-columns:auto 1fr 1fr}.fly-row .muted{display:none}}

.cal-it.club{font-style:italic}

.cw-ev>span:last-child{flex:1;min-width:0}

/* president's main message + group chat (beta) */
.main-msg{--cc:var(--c0);position:relative;border-radius:20px;padding:18px 20px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 92%,#000),color-mix(in srgb,var(--cc) 55%,var(--magenta)));
  box-shadow:0 18px 50px -18px var(--cc),inset 0 1px 0 rgba(255,255,255,.25);display:flex;flex-direction:column;gap:8px}
.mm-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px}
.mm-top .spacer{flex:1}
.mm-badge{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:11px;background:rgba(255,255,255,.22);padding:3px 10px;border-radius:999px}
.mm-by{opacity:.85}
.mm-text{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.4vw,23px);line-height:1.3;letter-spacing:-.01em}
.mm-foot{font-size:12px;opacity:.8}
.mm-btn{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer}
.main-add{align-self:flex-start;border-style:dashed}
.chat{display:flex;flex-direction:column;gap:10px}
.bub{max-width:min(560px,88%);align-self:flex-start;border:1px solid var(--line);background:var(--panel);border-radius:16px 16px 16px 4px;padding:9px 13px;display:flex;flex-direction:column;gap:4px}
.bub.mine{align-self:flex-end;border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--cc) 22%,var(--panel));border-color:color-mix(in srgb,var(--cc) 40%,transparent)}
.bub.lead{border-left:3px solid var(--cc)}
.bub-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px}
.bub-text{font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.bub-act{display:flex;gap:10px}
.bub-act button{border:0;background:none;color:var(--muted);font-size:12px;padding:0;cursor:pointer}
.bub-act button:hover{color:var(--ink)}
.section .bub{max-width:100%;align-self:stretch}
.chat-new{display:flex;gap:8px;align-items:flex-end}
.chat-new .input{flex:1}
.seg-l{align-self:center;padding:0 6px 0 8px;font-size:12px;color:var(--muted)}
/* events: RSVP + check-in (beta) */
.ev-sheet{gap:14px}
.ev-head{display:flex;gap:12px;align-items:flex-start;border-left:4px solid var(--cc);padding-left:12px}
.ev-head .cd-em{font-size:28px}
.ev-stats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.seg.rsvp button{padding:8px 16px}
.ev-code{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border:1px dashed var(--line-2);border-radius:14px;padding:12px 16px}
.ev-code b{font-size:40px;letter-spacing:.2em;color:var(--ink)}
.ev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;max-height:300px;overflow:auto;padding:2px}
.ev-p{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13.5px;cursor:pointer}
.ev-p.here{border-color:color-mix(in srgb,var(--green) 50%,transparent);background:var(--green-bg)}
.ev-p .ev-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.club-date>div{flex:1;min-width:0}

/* chat channels + teams (beta) */
.chat-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.ch-list{display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}
.ch{display:flex;align-items:center;gap:8px;border:1px solid transparent;background:none;color:var(--muted);border-radius:12px;padding:9px 11px;text-align:left;cursor:pointer;font-weight:600;font-size:13.5px}
.ch:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.ch.on{background:var(--panel);border-color:color-mix(in srgb,var(--cc) 50%,transparent);color:var(--ink)}
.ch-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-c{font-size:11px;color:var(--muted);background:rgba(255,255,255,.06);border-radius:99px;padding:1px 7px}
.ch-add{border-style:dashed;border-color:var(--line-2);justify-content:center}
.ch-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.ch-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:10px}
.ch-head b{font-size:16px}
@media (max-width:700px){.chat-wrap{grid-template-columns:1fr}.ch-list{position:static;flex-direction:row;overflow-x:auto;padding-bottom:4px}.ch{flex:0 0 auto}}
.row-act{white-space:nowrap}.row-act .btn{margin-left:4px}

.cc-switch{margin-bottom:-4px}
.warn-box{border-color:rgba(255,194,102,.35);background:color-mix(in srgb,var(--amber) 6%,var(--panel))}
.warn-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13.5px}
.warn-row .btn{margin-left:auto}
.share-row{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.share-row input{margin-top:4px}
/* availability heatmap */
.fh{display:flex;flex-direction:column;gap:10px}
.fh-wrap{overflow-x:auto;max-width:100%}
.fh-grid{display:grid;grid-template-columns:44px repeat(7,minmax(34px,1fr));gap:2px;min-width:300px}
.fh-h{font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding-bottom:2px}
.fh-t{font-size:10px;color:var(--muted);text-align:right;padding-right:4px;line-height:1;align-self:start}
.fh-c{border:0;border-radius:4px;height:22px;font-size:10.5px;font-weight:700;color:#0b0f14;cursor:pointer;padding:0}
.fh-c:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.fh-grid.mini .fh-c{height:9px;cursor:default;background:rgba(255,255,255,.06)}
.fh-grid.mini .fh-c.busy{background:var(--cc,var(--cyan))}
.fh-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.fh-sw{display:inline-block;width:14px;height:10px;border-radius:3px}
.share-row>span{display:flex;flex-direction:column}

/* phones: no see-through blur on the big app box, cards or pop-up backdrop. Blurring the whole screen
   made switching tabs slow on iPhone. Each look keeps its colors; the tab bar keeps its small glass. */
@media (max-width:900px){
  .frame,.overlay,.stat,.panel-box,.card,.row,.tablewrap,.tabs,.textarea{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  /* looks with a picture behind the app: a more solid box, so the picture doesn't show through sharp */
  :root[data-skin="sunset"] .frame{background:rgba(32,14,30,.86)}
}

/* How it works / Terms / Privacy pop-up */
.sheet.reader{max-width:820px;height:92vh;height:92dvh;padding-top:0;gap:0;overscroll-behavior:contain}
.reader-bar,.reader-body{flex-shrink:0}
.reader-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 12px;background:inherit;border-bottom:1px solid var(--line-2)}
.reader-bar h3{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-body main{padding:16px 0 8px!important;max-width:none!important}

/* ---------- sign-in screen: always white with the Sunrise logo, whatever look is saved on the device ----------
   html:root.signin-on beats the looks' :root[data-skin] rules. Removed as soon as the app opens. */
html:root.signin-on{color-scheme:light;
  --bg:#FFFFFF; --ink:#1D1D1F; --muted:#6E6E73; --faint:#8E8E93; --line:rgba(0,0,0,.06); --line-2:rgba(0,0,0,.12);
  --white:#1D1D1F; --on-white:#FFFFFF; --cyan:#E0502F; --magenta:#FF8A3D; --red:#D92D20; --amber:#B45309; --amber-bg:#FFF4E0;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; --hero:var(--display);
  background:#FFFFFF}
html:root.signin-on body{margin:0;background:radial-gradient(760px 420px at 50% -120px,#FFE3BE 0,#FFF3E6 45%,rgba(255,255,255,0) 75%),#FFFFFF;background-attachment:scroll;color:var(--ink)}
html:root.signin-on body::before,html:root.signin-on body::after{display:none}
html:root.signin-on .boot{color:var(--muted)}
html:root.signin-on .signin-card{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:28px 8px}
html:root.signin-on .signin-card img.mark{width:88px;height:88px;margin:0 auto;border-radius:20px;box-shadow:0 12px 28px -10px rgba(224,80,47,.45)}
html:root.signin-on .signin-card h1{font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:-.03em;text-transform:none;color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
html:root.signin-on .signin-card .hello{color:#E0502F}
html:root.signin-on .perks li{color:var(--muted)}
html:root.signin-on .perks li b{color:var(--ink)}
html:root.signin-on .perks .pk{background:#FFF0E3;color:#C2410C;box-shadow:none;border:0}
html:root.signin-on .signin-btns .btn{background:#FFFFFF;border:1px solid rgba(0,0,0,.14);color:#1D1D1F;font-weight:600;border-radius:14px;box-shadow:none}
html:root.signin-on .signin-btns .btn.primary{background:#1D1D1F;border-color:#1D1D1F;color:#FFFFFF}
html:root.signin-on .signin-btns .btn:hover{background:#F5F5F7}
html:root.signin-on .signin-btns .btn.primary:hover{background:#000}
html:root.signin-on .signin-legal a{color:#C2410C}

/* ===== Flow (free, white): premium minimal. Neutral paper, ink lines, ONE accent (vermilion).
   No glass, glow or gradients; thin lines instead of heavy boxes. Fonts: Geist + Geist Mono. ===== */
:root[data-skin="flow"]{--bg:#FAFAF8;--bg-2:#FFFFFF;--panel:#FAFAF8;--panel-2:#F3F2EE;--panel-hi:#ECEBE6;
  --line:#E3E2DC;--line-2:#D5D4CE;--ink:#111111;--muted:#6B6B66;--faint:#9C9B95;--white:#111111;--on-white:#FAFAF8;
  --cyan:#111111;--magenta:#C9361B;--violet:#6B6B66;--lav:#6B6B66;--accent:#C9361B;
  --red:#C9361B;--red-bg:rgba(201,54,27,.08);--amber:#C9361B;--amber-bg:rgba(201,54,27,.08);
  --hero:"Geist",system-ui,sans-serif;--display:"Geist",system-ui,sans-serif;--body:"Geist",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --hero-fill:linear-gradient(90deg,#6B6B66,#6B6B66);
  --chart-line:#111111;--chart-fill:#D5D4CE;--chart-mark:#C9361B;--clk-a:#111111;--clk-b:#111111;--clk-c:#C9361B;--knob-ring:#FAFAF8;--logo-check:#111111;
  --r:14px;--btn-radius:999px}
:root[data-skin="flow"] body{background:#FAFAF8;font-size:14.5px}
:root[data-skin="flow"] .frame{background:#FAFAF8;border:1px solid #E3E2DC;box-shadow:none}
:root[data-skin="flow"] .side{background:#FAFAF8;border-right-color:#E3E2DC}
:root[data-skin="flow"] .side.open .nav{background:#FAFAF8}
:root[data-skin="flow"] .btn{background:transparent;border-color:#111111;color:#111111;font-weight:500}
:root[data-skin="flow"] .btn:hover{background:rgba(17,17,17,.04)}
:root[data-skin="flow"] .btn.primary,:root[data-skin="flow"] .seg button[aria-pressed="true"],:root[data-skin="flow"] .sq .opt[aria-pressed="true"]{background:#111111;border-color:#111111;color:#FAFAF8}
:root[data-skin="flow"] .card,:root[data-skin="flow"] .stat,:root[data-skin="flow"] .panel-box,:root[data-skin="flow"] .card-doc,:root[data-skin="flow"] .card-h,:root[data-skin="flow"] .plan,:root[data-skin="flow"] .survey-card{background:transparent;border-color:#E3E2DC;box-shadow:none}
:root[data-skin="flow"] .stat.bad{background:transparent;border-color:var(--line)}
:root[data-skin="flow"] .sheet{background:#FAFAF8;border:1px solid #E3E2DC;box-shadow:0 30px 80px -30px rgba(0,0,0,.28)}
:root[data-skin="flow"] .overlay{background:rgba(17,17,17,.28)}
:root[data-skin="flow"] .hello{font-weight:300;letter-spacing:-.02em;line-height:1.1}
:root[data-skin="flow"] .hello .grad{color:#6B6B66;-webkit-text-fill-color:#6B6B66;background:none}
:root[data-skin="flow"] .hello .pt{color:#C9361B}
:root[data-skin="flow"] h2,:root[data-skin="flow"] h3{font-weight:400;letter-spacing:-.01em}
:root[data-skin="flow"] .eyebrow::before{background:#111111}
:root[data-skin="flow"] .burger{background:transparent;border-color:#D5D4CE}
:root[data-skin="flow"] .burger .count{box-shadow:0 0 0 2px #FAFAF8;background:#C9361B}
:root[data-skin="flow"] .fab{box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
:root[data-skin="flow"] .switch.on{background:#111111;border-color:#111111}
:root[data-skin="flow"] .cg-cell.l1{background:#E3E2DC}
:root[data-skin="flow"] .cg-cell.l2{background:#B5B4AD}
:root[data-skin="flow"] .cg-cell.l3{background:#6B6B66}
:root[data-skin="flow"] .cg-cell.l4{background:#111111}
:root[data-skin="flow"] .tb-glass{background:rgba(250,250,248,.96);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#E3E2DC;box-shadow:0 10px 30px -14px rgba(0,0,0,.25)}
:root[data-skin="flow"] .tb.on{color:#111111}
/* look picker preview */
.pv.flow{background:#FAFAF8;border-bottom:1px solid #E3E2DC}
.pv.flow b{font-family:"Geist",system-ui,sans-serif;font-weight:300;color:#111111;letter-spacing:-.02em}
.pv.flow i{background:#111111;color:#FAFAF8}
.pv.flow::after{content:"";position:absolute;left:12px;right:40%;bottom:14px;height:1px;background:#111111}

/* ---------- Flow Home (piece 5b): sections without boxes, one thin line through Today ---------- */
.flow-sec{display:flex;flex-direction:column;gap:6px;margin-top:22px}
.flow-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.flow-h h2{margin:0;font-size:26px;font-weight:300;letter-spacing:-.01em}
.flow-h .mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.flow-today .fline{position:relative;padding-left:36px;margin-top:12px;display:flex;flex-direction:column}
.flow-today .fline::before{content:"";position:absolute;left:10px;top:8px;bottom:44px;width:1px;background:var(--ink)}
.flow-today .fl-end{position:relative;height:30px;margin-left:-26px}
.flow-today .fl-end::before{content:"";position:absolute;left:0;top:-14px;width:60px;height:44px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);border-bottom-left-radius:30px}
.flow-today .fl-then{align-self:flex-start;margin:-8px 0 0 46px;background:none;border:0;padding:4px 0;font:inherit;font-size:13px;color:var(--muted);text-align:left;cursor:pointer}
.flow-today .fl-then:hover{color:var(--ink)}
.flow-today .fl-node{position:relative;padding-bottom:16px}
.flow-today .fl-node::before{content:"";position:absolute;left:-30px;top:6px;width:9px;height:9px;border-radius:50%;border:1px solid var(--ink);background:var(--bg)}
.flow-today .fl-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:4px 0 8px}
.flow-today .fl-label.late{color:var(--accent)}
.flow-today .fl-empty{font-size:13px;color:var(--muted);padding:0 0 14px}
.flow-today .fl-item{margin-left:-36px;padding-bottom:6px}
.flow-today .fl-item .item{padding:4px 0;border:0;background:none}
.flow-today .fl-item .check{background:var(--bg)}
.flow-today .fl-item.soon .check,.flow-today .fl-item.late .check{border-color:var(--accent)}
.flow-today .fl-item.soon .play,.flow-today .fl-item.late .play{border-color:var(--accent);color:var(--accent)}
.flow-today .next-class,.flow-today .sess,.flow-today .forgot{background:none;border:0;box-shadow:none;padding:0}
.flow-today .next-class > .dot,.flow-today .sess .dot{display:none}
.flow-today .upsell{margin-top:18px}
/* Focus track */
.fl-track{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:14px;margin-top:14px;background:linear-gradient(var(--line-2),var(--line-2)) 0 7px/100% 1px no-repeat}
.fl-slot{position:relative;border-left:1px solid transparent}
.fl-slot i{position:absolute;left:4%;top:5px;height:4px;background:var(--ink);border-radius:1px}
.fl-slot.now::after{content:"";position:absolute;right:0;top:0;width:1px;height:14px;background:var(--accent)}
.fl-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font-size:10.5px;color:var(--muted);margin-top:6px;letter-spacing:.03em}
.fl-days span{text-align:left}
.fl-days .now{color:var(--accent);font-weight:500}
/* Work due this week: dots on stems */
.fl-lolli{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;height:96px;margin-top:10px;border-bottom:1px solid var(--line-2)}
.fl-lolli + .fl-days span{text-align:center}
.fl-pin{display:flex;flex-direction:column;align-items:center;gap:4px}
.fl-pin .n{font-size:10px;color:var(--muted)}
.fl-pin .b{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.fl-pin .s{width:1px;background:var(--ink)}
.fl-pin.zero .b{background:transparent;border:1px solid var(--ink)}
.fl-pin.peak .n{color:var(--accent)}
.fl-pin.peak .b,.fl-pin.peak .s{background:var(--accent)}
/* Your classes as rows */
.fl-classes{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid var(--ink)}
.fl-class{font:inherit;color:inherit;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:14px 0;display:flex;flex-direction:column;gap:10px;cursor:pointer}
.fl-class:hover .fl-cname{color:var(--accent)}
.fl-class-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%}
.fl-cname{display:block;font-size:20px;font-weight:300}
.fl-ctitle{font-size:13px;color:var(--muted)}
.fl-cright{text-align:right;flex-shrink:0}
.fl-grade{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.fl-next{font-size:12px;color:var(--muted)}
.fl-next.soon{color:var(--accent)}
.fl-prog{position:relative;display:block;width:100%;height:1px;background:var(--line-2)}
.fl-prog i{position:absolute;left:0;top:0;height:1px;background:var(--ink)}
/* Flow stats: a hairline grid instead of boxes, big light numbers on top */
:root[data-skin="flow"] .stats{gap:0;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin-top:26px}
:root[data-skin="flow"] .stat{border:0;border-left:1px solid var(--line);border-radius:0;padding:12px 0 12px 14px;background:none}
:root[data-skin="flow"] .stat:first-child{border-left:0;padding-left:0}
:root[data-skin="flow"] .stat .v{order:-1;font-family:var(--display);font-weight:300;font-size:30px;letter-spacing:-.01em}
:root[data-skin="flow"] .stat.bad .v{color:var(--accent)}
@media (max-width:700px){
  :root[data-skin="flow"] .stats{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:0}
  :root[data-skin="flow"] .stat{border-bottom:1px solid var(--line)}
  :root[data-skin="flow"] .stat:nth-child(4){border-left:0;padding-left:0}
}
/* Flow: the semester chart's labels in mono */
:root[data-skin="flow"] .flow-sec .chart-wrap text{font-family:var(--mono);font-size:10px}
:root[data-skin="flow"] .flow-sec .chart-wrap .grid line{stroke-dasharray:2 4}
:root[data-skin="flow"] .check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);box-shadow:none}
:root[data-skin="flow"] .check.on{background:var(--ink);border-color:var(--ink)}
:root[data-skin="flow"] .play{width:32px;height:32px;border-color:var(--line-2);background:transparent}

/* ---------- Flow (piece 5c): class page, Classes tab, Calendar week, Focus timer ---------- */
.fl-cv{display:flex;flex-direction:column;min-width:0}
.fl-back{align-self:flex-start;font:inherit;font-size:14px;color:var(--muted);background:none;border:0;padding:0;min-height:40px;cursor:pointer}
.fl-back:hover{color:var(--ink)}
.fl-cv-name{margin:0;font-size:clamp(34px,5vw,44px);font-weight:300;line-height:1.05;letter-spacing:-.01em}
.fl-cv-sub{font-size:14px;color:var(--muted);margin-top:4px}
.fl-cv-stats{display:flex;gap:18px;margin-top:14px;font-size:14px;color:var(--muted)}
.fl-cv-stats b{color:var(--ink);font-weight:600}
.fl-cv-prog{position:relative;height:9px;margin-top:10px;width:min(520px,100%);background:linear-gradient(var(--line-2),var(--line-2)) 0 4px/100% 1px no-repeat}
.fl-cv-prog i{position:absolute;left:0;top:4px;height:1px;background:var(--ink)}
.fl-cv-prog b{position:absolute;top:0;width:9px;height:9px;border-radius:50%;background:var(--accent)}
:root[data-skin="flow"] .cv-head:has(.fl-cv){align-items:flex-end}
:root[data-skin="flow"] .tabs{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:22px;box-shadow:none}
:root[data-skin="flow"] .tab{background:none!important;border:0;border-radius:0;padding:10px 0;color:var(--muted);box-shadow:none!important;font-weight:400}
:root[data-skin="flow"] .tab[aria-selected="true"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -1px 0 var(--ink)!important}
:root[data-skin="flow"] .panel{background:none;border:0;padding:6px 0 0;box-shadow:none}
:root[data-skin="flow"] .row{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0}
.flow-list .fline{margin-top:4px}
.flow-list .fline::before{background:var(--line-2);bottom:16px}
.flow-list .fl-then{margin:6px 0 0 36px}
/* Calendar week */
.fl-cal-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.fl-cal-h h1{margin:0;font-size:clamp(32px,5vw,42px);font-weight:300;letter-spacing:-.01em}
.fl-cal-h h1 span{color:var(--muted)}
.fl-link{font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);padding:0;min-height:32px;cursor:pointer}
.fl-cal-h .inline{gap:14px;align-items:center}
.fl-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:18px;border-bottom:1px solid var(--line);padding-bottom:8px}
.fl-wd{font:inherit;color:var(--ink);background:none;border:0;padding:0;min-height:64px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.fl-wd .k{font-size:11px;color:var(--muted)}
.fl-wd .n{font-size:18px;font-weight:300}
.fl-wd.now .n{font-weight:600}
.fl-wd.past .n{color:var(--muted)}
.fl-dot{width:5px;height:5px;border-radius:50%;background:var(--ink)}
.fl-dot.exam{background:var(--accent)}
.fl-dot.ring{background:none;border:1px solid var(--ink)}
.fl-dot.none{background:none}
.fl-agenda{position:relative;display:flex;flex-direction:column;gap:18px;margin-top:20px;padding-left:32px}
.fl-agenda::before{content:"";position:absolute;left:4px;top:6px;bottom:40px;width:1px;background:var(--ink)}
.fl-agenda .fl-end{position:relative;height:20px;margin:-18px 0 0 -28px}
.fl-agenda .fl-end::before{content:"";position:absolute;left:0;top:-20px;width:60px;height:40px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);border-bottom-left-radius:30px}
.fl-day{position:relative;scroll-margin:90px}
.fl-day::before{content:"";position:absolute;left:-32px;top:4px;width:9px;height:9px;border-radius:50%;border:1px solid var(--ink);background:var(--bg);box-sizing:border-box}
.fl-day.now::before{left:-33px;top:3px;width:11px;height:11px;background:var(--ink);border-width:1.5px}
.fl-day.soon:not(.now)::before{border:1.5px solid var(--accent)}
.fl-day.past{opacity:.6}
.fl-day-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fl-day.now .fl-day-h{color:var(--ink);font-weight:600}
.fl-ag{display:flex;gap:14px;margin-top:6px;font:inherit;color:inherit;text-align:left;background:none;border:0;padding:0}
.fl-ag-btn{cursor:pointer}
.fl-ag-btn:hover b{color:var(--accent)}
.fl-ag-btn.done b{text-decoration:line-through;color:var(--muted)}
.fl-ag b{font-weight:500}
.fl-ag .tm{flex:none;width:70px;padding-top:2px;font-size:12px;color:var(--muted)}
.fl-ag .tm.acc{color:var(--accent)}
.fl-none{font-size:13px;margin-top:4px}
/* Focus timer */
:root[data-skin="flow"] .clock{filter:none}
:root[data-skin="flow"] .clock > circle:first-of-type{fill:none}
:root[data-skin="flow"] .clk-time{font-weight:200;letter-spacing:-.02em}
:root[data-skin="flow"] .clk-mode{color:var(--muted);letter-spacing:.14em}
:root[data-skin="flow"] .focus-box{background:none;border:0;padding:0}
:root[data-skin="flow"] .focus-stats > div{background:none;border:0;border-top:1px solid var(--line);border-radius:0}

/* ---------- Flow (piece 5d): menu, phone tab bar, notices, clubs, grades ---------- */
/* menu: current page = bold ink text with a small accent dot (no black block) */
:root[data-skin="flow"] .nav button[aria-current="page"]{background:transparent;color:var(--ink);font-weight:600;position:relative}
:root[data-skin="flow"] .nav button[aria-current="page"]::after{content:"";position:absolute;right:12px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--accent)}
:root[data-skin="flow"] .nav button[aria-current="page"] .side-timer{color:var(--muted)}
:root[data-skin="flow"] .nav button:hover{background:rgba(17,17,17,.04)}
/* phone tab bar: flat bar along the bottom, like the approved design; active tab = ink + accent dot */
@media (max-width:900px){
  :root[data-skin="flow"] .tabbar{left:0;right:0;bottom:0}
  :root[data-skin="flow"] .tb-glass{max-width:none;border-radius:0;border:0;border-top:1px solid var(--line);background:var(--bg);box-shadow:none;padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px))}
  :root[data-skin="flow"] .tb{border-radius:0;position:relative;padding-bottom:10px}
  :root[data-skin="flow"] .tb.on{background:none;font-weight:600}
  :root[data-skin="flow"] .tb.on::after{content:"";position:absolute;bottom:2px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent)}
  :root[data-skin="flow"] .tb svg{stroke-width:1.5}
}
/* notices and banners: a thin accent rule instead of a filled box */
:root[data-skin="flow"] .notice,:root[data-skin="flow"] .banner{background:none;border:0;border-left:2px solid var(--accent);border-radius:0;color:var(--ink);padding:4px 0 4px 14px}
:root[data-skin="flow"] .notice.danger-box{border-left-color:var(--accent)}
/* cards (clubs list, Neon-style class cards if shown): no tint, hairline */
:root[data-skin="flow"] .card::before,:root[data-skin="flow"] .card::after{display:none}
:root[data-skin="flow"] .card-head{background:none}
:root[data-skin="flow"] .card .cname{font-weight:400;font-size:20px}
:root[data-skin="flow"] .btn.ghost{border-color:transparent;text-decoration:underline;text-underline-offset:3px}
/* grades: big light letter, no glow */
:root[data-skin="flow"] .bigstat .letter{font-family:var(--display);font-weight:200;text-shadow:none;background:none;-webkit-text-fill-color:var(--ink);color:var(--ink)}
:root[data-skin="flow"] .tablewrap{background:none;border:0;border-top:1px solid var(--ink);border-radius:0}
:root[data-skin="flow"] .chip{border-radius:999px}
/* sign-in screen: keep the logo clear of the iPhone clock / notch */
html:root.signin-on .signin{padding-top:calc(24px + env(safe-area-inset-top,0px))}

/* ---------- Owner dashboard ---------- */
.own-status{border:1px solid var(--line-2);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.own-status.ok{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.own-status.need{border-color:color-mix(in srgb,var(--red) 55%,transparent)}
.own-status-h{font-family:var(--display);font-size:22px;font-weight:600}
.own-status.ok .own-status-h{color:var(--green)}
.own-status.need .own-status-h{color:var(--red)}
.own-status ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.own-meter{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.own-meter-t{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.own-meter-t b{color:var(--ink);font-variant-numeric:tabular-nums}
.own-bar{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.own-bar i{display:block;height:100%;background:var(--ink);border-radius:99px}
.own-meter.hot .own-bar i{background:var(--red)}
.own-chart{width:100%;height:110px;display:block;margin-top:8px}
.own-chart rect{fill:var(--muted)}
.own-chart rect.now{fill:var(--magenta)}
.own-chart .base{stroke:var(--line-2);stroke-width:1}
.own-chart-x{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.own-split{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:2px;margin:10px 0 4px;background:var(--line)}
.own-split i{display:block;min-width:4px}
.own-split .f{background:var(--line-2)}.own-split .a{background:var(--ink)}.own-split .c{background:var(--c4)}.own-split .r{background:var(--magenta)}.own-split .o{background:var(--muted)}
.own-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.own-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.own-list li:last-child{border-bottom:0}
.own-list b{font-variant-numeric:tabular-nums}

/* ---------- Public homepage: shown under the sign-in card to signed-out web visitors only ---------- */
html.native-app .home-only{display:none!important}
html:root.signin-on .signin{display:block;min-height:0;padding-bottom:0}
.hero{min-height:calc(100vh - 40px);display:grid;place-items:center;gap:28px}
.hero-shot{margin:0 auto 24px;width:min(280px,72vw)}
.hero-shot img,.h-phone img{display:block;width:100%;height:auto;border-radius:34px;border:7px solid #1D1D1F;background:#FAFAF8;box-shadow:0 30px 70px -28px rgba(29,29,31,.45)}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,520px) 300px;justify-content:center;column-gap:72px;min-height:calc(100vh - 40px)}
  .hero-shot{margin:0;width:300px}
}
.home{max-width:1040px;margin:0 auto;padding:0 20px 24px;color:var(--ink)}
.h-sec{padding:64px 0;border-top:1px solid var(--line-2)}
.h-sec h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.6vw,42px);letter-spacing:-.025em;line-height:1.08;margin:0 0 16px;max-width:20ch}
.h-sec p{color:var(--muted);font-size:17px;line-height:1.55;margin:0}
.h-kicker{font-size:13px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C2410C!important;margin:0 0 10px!important}
.h-steplist{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:28px}
@media (min-width:760px){.h-steplist{grid-template-columns:repeat(3,1fr)}}
.h-steplist li{display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.5;color:var(--muted)}
.h-steplist b{color:var(--ink);font-size:18px}
.h-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#FFF0E3;color:#C2410C;font-weight:800;font-size:15px}
.h-feat{display:grid;gap:32px;align-items:center}
.h-phone{margin:0 auto;width:min(270px,72vw)}
@media (min-width:760px){
  .h-feat{grid-template-columns:1fr 290px;column-gap:72px}
  .h-feat.flip{grid-template-columns:290px 1fr}
  .h-feat.flip .h-txt{order:2}
  .h-phone{width:290px}
}
.h-plans{display:grid;gap:16px;margin-top:28px}
@media (min-width:760px){.h-plans{grid-template-columns:1fr 1fr}}
.h-plan{border:1px solid var(--line-2);border-radius:22px;padding:26px 24px;background:#fff}
.h-plan.pro{border:2px solid #1D1D1F}
.h-plan h3{margin:0 0 6px;font-size:20px;font-family:var(--display)}
.h-plan .h-cost{color:var(--ink);font-size:16px}
.h-plan .h-cost b{font-size:34px;letter-spacing:-.02em}
.h-plan .h-alt{font-size:14px;margin-top:4px}
.h-plan ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px}
.h-plan li{padding-left:24px;position:relative}
.h-plan li::before{content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;border-left:2px solid #E0502F;border-bottom:2px solid #E0502F;transform:rotate(-45deg)}
.h-note{font-size:14px!important;margin-top:16px!important}
.h-sec a,.h-foot a{color:#C2410C;font-weight:600;text-decoration:none}
.h-sec a:hover,.h-foot a:hover{text-decoration:underline}
.h-faq details{border-bottom:1px solid var(--line-2);padding:18px 0}
.h-faq details:first-of-type{margin-top:12px}
.h-faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"+";color:var(--muted);font-weight:400;font-size:22px;line-height:1}
.h-faq details[open] summary::after{content:"–"}
.h-faq details p{margin-top:10px;font-size:16px}
.h-end{text-align:center;display:flex;flex-direction:column;align-items:center}
.h-end h2{margin-left:auto;margin-right:auto}
.h-start{margin-top:12px;padding:14px 26px;font-size:16px;border-radius:14px;background:#1D1D1F!important;border-color:#1D1D1F!important;color:#fff!important;justify-content:center}
.h-start:hover{background:#000!important}
.h-foot{border-top:1px solid var(--line-2);padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-size:14px;color:var(--muted)}
.h-foot img{border-radius:7px}
.h-foot nav{display:flex;flex-wrap:wrap;gap:16px;margin-left:auto}
@media (max-width:600px){.h-foot nav{margin-left:0;width:100%}}

/* ---------- Homepage motion (home.js adds .hm-anim only when motion is allowed) ---------- */
.home{--ease:cubic-bezier(.22,.61,.36,1);--accent:#E0502F;--accent-ink:#C2410C;--soft:#FFF0E3}
/* hero: card and phone ease in on load */
@media (prefers-reduced-motion:no-preference){
  html:root.signin-on .hero .signin-card{animation:hm-up .8s var(--ease,cubic-bezier(.22,.61,.36,1)) both}
  html:root.signin-on .hero .hero-shot{animation:hm-up .9s cubic-bezier(.22,.61,.36,1) .18s both}
}
@keyframes hm-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
html.hm-anim .home [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.hm-anim .home [data-reveal].in{opacity:1;transform:none}
/* phones slide in from their own side, a beat after the text */
html.hm-anim .home .h-feat .h-phone[data-reveal]{transform:translate(36px,24px);transition-delay:.12s}
html.hm-anim .home .h-feat.flip .h-phone[data-reveal]{transform:translate(-36px,24px)}
html.hm-anim .home .h-feat .h-phone[data-reveal].in{transform:none}
html.hm-anim .home [data-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms),box-shadow .3s,border-color .3s}
html.hm-anim .home [data-stagger].in>*{opacity:1;transform:none}
/* hover: small lifts, never big moves */
.h-phone img,.hero-shot img{transition:transform .5s var(--ease,ease),box-shadow .5s}
@media (hover:hover){
  .h-phone img:hover,.hero-shot img:hover{transform:translateY(-6px);box-shadow:0 40px 80px -30px rgba(29,29,31,.5)}
  html.hm-anim .home .h-plans.in .h-plan:hover,.h-plan:hover{transform:translateY(-4px);box-shadow:0 22px 50px -28px rgba(29,29,31,.35)}
  .h-start:hover,html:root.signin-on .signin-btns .btn:hover{transform:translateY(-1px)}
  .h-steplist li:hover .h-n{transform:scale(1.08);background:var(--accent);color:#fff}
}
.h-plan{transition:transform .35s var(--ease),box-shadow .35s}
.h-start,html:root.signin-on .signin-btns .btn{transition:transform .2s,background .2s}
.h-n{transition:transform .3s var(--ease),background .3s,color .3s}
.h-start:active,html:root.signin-on .signin-btns .btn:active{transform:scale(.98)}
/* FAQ answers ease open */
.h-faq details[open] p{animation:hm-fade .4s var(--ease) both}
@keyframes hm-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Demo 1: syllabus → What's due ---------- */
.demo-syl{margin-top:44px;display:grid;gap:18px;align-items:center}
@media (min-width:760px){.demo-syl{grid-template-columns:1fr 56px 1fr}}
.ds-paper,.ds-out{background:#fff;border:1px solid var(--line-2);border-radius:20px;padding:22px 22px 18px;position:relative;overflow:hidden}
.ds-paper{background:#FFFDF9}
.ds-h{font-size:12px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)!important;margin:0 0 12px!important;display:flex;justify-content:space-between;gap:10px}
.ds-status{text-transform:none;letter-spacing:0;font-weight:600;color:var(--accent-ink)}
.ds-l{font-size:15px!important;line-height:1.5!important;padding:7px 10px;margin:0 -10px!important;border-radius:8px;transition:background .45s var(--ease),color .45s}
.ds-l.hit{background:var(--soft);color:var(--ink)!important}
.ds-scan{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,rgba(224,80,47,0),rgba(224,80,47,.14),rgba(224,80,47,0));opacity:0;pointer-events:none}
.demo-syl.reading .ds-scan{opacity:1;animation:ds-scan 2.6s linear 0.6s 1 both}
@keyframes ds-scan{from{transform:translateY(30px)}to{transform:translateY(230px)}}
.ds-arrow{display:grid;place-items:center}
.ds-arrow span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:#1D1D1F;transition:transform .4s var(--ease),background .4s}
.demo-syl.reading .ds-arrow span{background:var(--accent);animation:ds-pulse 1.3s ease-in-out infinite}
@keyframes ds-pulse{50%{transform:scale(1.08)}}
@media (max-width:759px){.ds-arrow{transform:rotate(90deg)}.ds-arrow span{transform:rotate(-90deg)}}
.ds-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ds-list li{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ds-list li:last-child{border-bottom:0}
html.ds-wait .ds-list li:not(.show){opacity:0;transform:translateX(-14px)}
.ds-d{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;color:var(--muted)}
.ds-t{font-weight:600}
.ds-c{font-size:12.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:99px;padding:2px 9px}
.ds-c.big{color:var(--accent-ink);border-color:#F6C9B5;background:var(--soft);font-weight:700}
.ds-btn{margin-top:12px;background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- Demo 2: check it off ---------- */
.demo-todo,.demo-grade{margin-top:26px;background:#fff;border:1px solid var(--line-2);border-radius:20px;padding:18px 20px;max-width:420px}
.dt-head{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.dt-head span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.dt-bar,.dg-bar{height:5px;border-radius:99px;background:var(--line-2);overflow:hidden;margin:10px 0 6px}
.dt-bar i,.dg-bar i{display:block;height:100%;width:40%;background:var(--accent);border-radius:99px;transition:width .6s var(--ease)}
.dt-list{list-style:none;margin:0;padding:0}
.dt-list li{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease),opacity .45s}
.dt-list li>div{min-height:0;overflow:hidden;display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.dt-list li.gone{grid-template-rows:0fr;opacity:0}
.dt-list li span{display:flex;flex-direction:column;font-size:15px}
.dt-list small{font-size:13px;color:var(--muted)}
.dt-check{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid #1D1D1F;background:#fff;cursor:pointer;position:relative;transition:background .25s,border-color .25s,transform .2s}
.dt-check:hover{transform:scale(1.08);border-color:var(--accent)}
.dt-check::after{content:"";position:absolute;left:7px;top:4px;width:7px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease) .05s}
.checked .dt-check{background:var(--accent);border-color:var(--accent)}
.checked .dt-check::after{transform:rotate(45deg) scale(1)}
.checked b{text-decoration:line-through;color:var(--muted)}
.dt-foot{display:flex;justify-content:space-between;margin-top:10px!important;font-size:13.5px!important}
.dt-reset{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- Demo 3: what do I need on the final? ---------- */
.dg-now{font-size:15px!important}
.dg-now b{color:var(--ink)}
.dg-pick{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:15px;color:var(--muted)}
.dg-pick button{width:44px;height:38px;border-radius:12px;border:1px solid var(--line-2);background:#fff;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .2s,border-color .2s}
.dg-pick button:hover{transform:translateY(-1px);border-color:#1D1D1F}
.dg-pick button[aria-pressed="true"]{background:#1D1D1F;border-color:#1D1D1F;color:#fff}
.dg-out{font-size:16px!important;color:var(--ink)!important}
.dg-out b{font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent-ink)}
.dg-bar i{transition:none}

@media (prefers-reduced-motion:reduce){
  .home *,.home *::before,.home *::after{transition-duration:0s!important;animation:none!important}
}

/* ---------- Clubs: swipeable cards (home.js sets --s, --o, --x from each card's distance to the middle) ---------- */
.dg-how{font-size:13px!important;margin-top:10px!important;font-variant-numeric:tabular-nums}
.h-clubs{overflow:visible}
.cs-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.cs-nav{display:flex;align-items:center;gap:10px}
.cs-count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.cs-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:#fff;font-size:24px;line-height:1;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding-bottom:3px;transition:transform .2s var(--ease),border-color .2s,background .2s}
.cs-arrow:hover:not(:disabled){border-color:#1D1D1F;transform:translateY(-1px)}
.cs-arrow:active:not(:disabled){transform:scale(.94)}
.cs-arrow:disabled{opacity:.35;cursor:default}
.cs-track{--cw:min(300px,76vw);display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:30px calc(50% - 50vw) 0;padding:16px calc(50vw - var(--cw) / 2) 22px;cursor:grab;outline:none;-webkit-overflow-scrolling:touch}
.cs-track::-webkit-scrollbar{display:none}
.cs-track:focus-visible .cs-card.on .cs-img{outline:2px solid #E0502F;outline-offset:4px}
.cs-track.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.cs-card{flex:0 0 var(--cw);scroll-snap-align:center;scroll-snap-stop:normal;transform:scale(var(--s,1));opacity:var(--o,1);transform-origin:50% 60%;will-change:transform}
.cs-img{border-radius:24px;overflow:hidden;border:1px solid var(--line-2);background:#FAFAF8;aspect-ratio:600/746;box-shadow:0 18px 40px -26px rgba(29,29,31,.4);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.cs-img img{display:block;width:calc(100% + 20px);height:100%;margin-left:-10px;object-fit:cover;object-position:top;transform:translateX(var(--x,0px));pointer-events:none;user-select:none}
.cs-card h3{margin:18px 2px 6px;font-family:var(--display);font-size:20px;letter-spacing:-.01em}
.cs-card p{margin:0 2px;font-size:15px!important;line-height:1.5!important;max-width:34ch}
.cs-card.on .cs-img{box-shadow:0 28px 60px -28px rgba(29,29,31,.5)}
@media (hover:hover){.cs-card:not(.on):hover{cursor:pointer}.cs-card:not(.on):hover .cs-img{transform:translateY(-4px)}}
.cs-dots{height:3px;border-radius:99px;background:var(--line-2);max-width:220px;margin:6px auto 0;overflow:hidden}
.cs-dots i{display:block;height:100%;width:12.5%;background:#1D1D1F;border-radius:99px;transition:width .45s var(--ease)}
@media (max-width:600px){.cs-nav .cs-arrow{display:none}.cs-track{gap:14px}}
html:root.signin-on .signin{overflow-x:clip}