:root{--bg:#0e1014;--card:#161920;--card2:#1d2129;--line:#272c36;--text:#e9ecf2;--muted:#8a91a1;--acc:#6c8cff;--acc2:#4c6ef5;--danger:#ef5350;--ok:#3ecf8e;--h0:#1b1f27;--h1:#24365f;--h2:#33529c;--h3:#4f74e0;--h4:#8aa6ff;--shadow:0 1px 2px rgba(0,0,0,.3)}
[data-theme=light]{--bg:#f4f6fa;--card:#fff;--card2:#f0f2f7;--line:#e2e6ee;--text:#1b2030;--muted:#6b7385;--acc:#4c6ef5;--acc2:#3b5bdb;--h0:#ebedf2;--h1:#c9d6ff;--h2:#93abff;--h3:#5c7cfa;--h4:#3b5bdb;--shadow:0 1px 3px rgba(20,30,60,.08)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.hid{display:none!important}.muted{color:var(--muted)}.small{font-size:13px}.err{color:var(--danger);min-height:1em;margin:0}
h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
input,select,button{font:inherit;color:var(--text)}
input,select{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;outline:none}
input:focus,select:focus{border-color:var(--acc)}label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px 16px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--acc)}.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}.btn.primary:hover{background:var(--acc2)}
.btn.danger{color:var(--danger)}.btn.xl{font-size:18px;padding:14px 30px;border-radius:14px;min-width:120px}
.icon{background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted);padding:6px}.icon:hover{color:var(--text)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.row{display:flex;gap:10px;align-items:center;margin-top:10px}.row>input,.row>div{flex:1}.sp{flex:1}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;padding:10px 20px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}.brand img{width:24px}.brand.big{font-size:22px;justify-content:center}.brand.big img{width:32px}
nav{display:flex;gap:4px;flex:1;justify-content:center}nav button{background:none;border:0;padding:8px 14px;border-radius:10px;cursor:pointer;color:var(--muted);font-weight:500}
nav button.on{background:var(--card2);color:var(--text)}.top-r{display:flex;gap:4px}
main{max-width:980px;margin:0 auto;padding:20px}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-card{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;text-align:center}
.timer-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;padding:10px 0 24px}
.ring-box{position:relative;width:min(320px,80vw);aspect-ratio:1}.ring{width:100%;height:100%;transform:rotate(-90deg)}.ring.sm{max-width:220px;display:block;margin:auto}
.ring-bg{fill:none;stroke:var(--card2);stroke-width:12}.ring-fg{fill:none;stroke:var(--acc);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .6s}
.ring-txt{transform:rotate(90deg);transform-origin:100px 100px;font-size:34px;font-weight:700;fill:var(--text)}.ring-sub{transform:rotate(90deg);transform-origin:100px 100px;font-size:13px;fill:var(--muted)}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.clock{font-size:clamp(40px,11vw,60px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.running .ring-fg{stroke:var(--ok)}.paused .clock{opacity:.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:640px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;cursor:pointer;display:flex;align-items:center;gap:8px}
.chip .dot,.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}.chip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,var(--card))}
.note{max-width:440px;text-align:center}.ctrl{display:flex;gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.grid2{display:grid;grid-template-columns:1fr 1.4fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow)}.stat b{display:block;font-size:24px;font-variant-numeric:tabular-nums}.stat span{color:var(--muted);font-size:13px}
.center{text-align:center}
.bar{height:8px;background:var(--card2);border-radius:4px;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;border-radius:4px}
.sbar{margin-bottom:12px}.sbar .row{margin:0;justify-content:space-between}
.chart svg{width:100%;height:200px;display:block}.chart text{fill:var(--muted);font-size:10px}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:13px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:6px}
.heat-scroll{overflow-x:auto;padding-bottom:4px}#heat svg{display:block}#heat rect{rx:2}#heat text{fill:var(--muted);font-size:9px}
.l0{fill:var(--h0);background:var(--h0)}.l1{fill:var(--h1);background:var(--h1)}.l2{fill:var(--h2);background:var(--h2)}.l3{fill:var(--h3);background:var(--h3)}.l4{fill:var(--h4);background:var(--h4)}
.heat-key{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:8px}.heat-key i{width:11px;height:11px;border-radius:2px;display:inline-block}
.filters{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.4fr auto;gap:8px;align-items:center}
.day{margin:18px 0 8px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:600}
.item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:6px;cursor:pointer}
.item:hover{border-color:var(--acc)}.item .grow{flex:1;min-width:0}.item .t{font-variant-numeric:tabular-nums;font-weight:600}.item .n{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .item{cursor:default}.subj-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.subj-row>span:first-child,.subj-row>input+span{flex:1;min-width:0}
.switch{display:flex;align-items:center;gap:10px;color:var(--text);font-size:15px}.switch input{width:auto}
dialog{border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text);padding:0;width:min(420px,92vw)}dialog::backdrop{background:rgba(0,0,0,.5)}
.dlg{padding:20px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:10px;opacity:0;transition:.3s;pointer-events:none}#toast.show{opacity:1}
pre{white-space:pre-wrap}.maps{margin:10px 0}
@media(max-width:760px){
  .top{flex-wrap:wrap;padding:8px 12px;gap:8px}.brand span{display:none}nav{order:3;width:100%;overflow-x:auto;justify-content:flex-start}nav button{padding:8px 10px;font-size:14px}
  main{padding:12px}.grid4{grid-template-columns:repeat(2,1fr)}.grid2,.grid3{grid-template-columns:1fr}.filters{grid-template-columns:1fr 1fr}.filters #fText,.filters #bAdd{grid-column:span 2}
  .btn.xl{padding:14px 20px;min-width:96px}
}

/* ---- v3 additions ---- */
.tabs{display:flex;gap:4px;background:var(--card2);border-radius:12px;padding:4px}.tabs button{flex:1;background:none;border:0;border-radius:9px;padding:8px 12px;cursor:pointer;color:var(--muted)}
.tabs button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.row.wrap{flex-wrap:wrap}.grow{flex:1}.gap{gap:8px}.mt{margin-top:12px}.right{text-align:right}.nowrap{white-space:nowrap}
.link{background:none;border:0;color:var(--acc);cursor:pointer;padding:0;font:inherit}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:var(--card2);border:1px solid var(--line)}
.pill.pending{color:#f59f00}.pill.approved{color:var(--ok)}.pill.rejected{color:var(--danger)}.pill.high{color:var(--danger)}.pill.low{color:var(--muted)}
.medal{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle}
.m-bronze{background:#cd7f32}.m-silver{background:#c0c0c0}.m-gold{background:#f5c518}.m-platinum{background:#a6e3ff}
.goalgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.goalgrid .ring{max-width:120px;display:block;margin:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th,.tbl td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}.tbl th{color:var(--muted);font-weight:500}.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}.heat-cell{cursor:default}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calgrid .dow{text-align:center;color:var(--muted);font-size:12px}
.cday{min-height:72px;background:var(--card2);border-radius:10px;padding:6px;cursor:pointer;border:1px solid transparent;font-size:12px;display:flex;flex-direction:column;gap:2px}
.cday:hover{border-color:var(--acc)}.cday.out{opacity:.35}.cday.today{border-color:var(--acc)}.cday b{font-size:13px}.cday .ex{color:var(--danger);font-weight:600}
.cday .bar{height:4px;margin-top:auto}
.trophies{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.trophy{background:var(--card2);border-radius:12px;padding:12px;text-align:center;opacity:.4}.trophy.on{opacity:1;border:1px solid var(--acc)}.trophy .t-ic{font-size:28px}
.steps{counter-reset:s;padding-left:0;list-style:none}.steps li{counter-increment:s;margin:8px 0;padding-left:30px;position:relative}.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;display:grid;place-items:center}
.wizard .step{display:none}.wizard .step.on{display:block}
.fs{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column}
.fs .ring-box{width:min(70vh,90vw)}.fs .clock{font-size:clamp(56px,14vw,120px)}
.phase{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--acc)}
.stars{display:flex;gap:4px}.stars button{background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted)}.stars button.on{color:#f5c518}
.chk{width:18px;height:18px;flex:none}.item.sel{border-color:var(--acc)}
.bulkbar{position:sticky;bottom:12px;display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--acc);border-radius:12px;padding:10px;margin-top:10px;box-shadow:var(--shadow)}
#toast{display:flex;gap:12px;align-items:center}#toast .link{color:var(--bg);text-decoration:underline;pointer-events:auto}#toast.show{pointer-events:auto}
textarea{font:inherit;color:var(--text);background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-height:80px}
.report{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;white-space:pre-wrap;word-break:break-word}
@media(max-width:760px){.calgrid{gap:2px}.cday{min-height:52px;padding:4px;font-size:11px}.cday .tx{display:none}}
nav{overflow-x:auto;min-width:0;justify-content:flex-start;scrollbar-width:none}nav::-webkit-scrollbar{display:none}nav button{white-space:nowrap;flex:none}
.goalgrid .ring{height:auto;aspect-ratio:1}.goalgrid>div{min-width:0}
main{overflow-x:hidden}
.timer-wrap .row{flex-wrap:wrap}.timer-wrap .row>select,.timer-wrap .row>input{flex:1 1 200px}

/* shared control sizing: every single-line control is the same height */
:root{--control-h:42px;--control-pad:0 12px;--control-fs:15px}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),select,.row>.btn,.bulkbar .btn,.filters .btn{height:var(--control-h);min-height:var(--control-h);padding:var(--control-pad);font-size:var(--control-fs);line-height:1.2;box-sizing:border-box;vertical-align:middle}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea{-webkit-appearance:none;appearance:none;font-family:inherit;margin:0}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px !important}
input[type=date],input[type=time],input[type=datetime-local]{display:flex;align-items:center;min-width:0}input::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=color]{height:var(--control-h);box-sizing:border-box}
textarea{padding:10px 12px;font-size:var(--control-fs);line-height:1.45;box-sizing:border-box}
.row{align-items:center}.row>select{flex:1}
/* Last 7 days */
.week7{display:flex;flex-direction:column}.w7-row{display:grid;grid-template-columns:64px 1fr 14px 64px;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}.w7-row:last-child{border-bottom:0}
.w7-lbl{white-space:nowrap}.w7-row.today .w7-lbl{font-weight:600}.w7-track{height:10px;border-radius:5px;background:var(--card2);overflow:hidden}.w7-track i{display:block;height:100%;border-radius:5px;background:var(--acc)}
.w7-val{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.w7-medal{display:flex;justify-content:center}
.medal{flex:none}
/* HTML column charts (text never scaled) */
.hcols{position:relative;display:flex;align-items:stretch;gap:4px;height:180px}.hcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.hcol-bar{flex:1;width:min(70%,28px);display:flex;flex-direction:column-reverse;justify-content:flex-start}.hcol-bar i{display:block;width:100%;border-radius:3px 3px 0 0}.stack .hcol-bar i{border-radius:0}.stack .hcol-bar i:last-child{border-radius:3px 3px 0 0}
.hcol>span{height:18px;font-size:11px;color:var(--muted);white-space:nowrap;line-height:18px}
.goal-line{position:absolute;left:0;right:0;border-top:1px dashed var(--muted);pointer-events:none}
#heatS text.dow{font-size:9px}
.t-prog{margin-top:8px;height:6px}.trophy{opacity:.55}.trophy.on{opacity:1}
@media(max-width:760px){.w7-row{grid-template-columns:56px 1fr 14px 56px;gap:8px}.hcols{height:150px;gap:2px}.hcol>span{font-size:10px}}

.t-prog i{background:var(--acc)}
#heatS text{fill:var(--muted);font-size:10px}

/* ================= Liquid Glass layer (v5) ================= */
:root{--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable","Segoe UI",system-ui,Roboto,sans-serif;
--spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,1,.36,1);--r-xl:28px;--r-lg:22px;--r-md:16px;--pad:16px;--control-h:44px}
[data-theme=dark]{--bg:#0b0d18;--card:rgba(24,27,40,.86);--card2:rgba(255,255,255,.07);--line:rgba(255,255,255,.10);--text:#f2f4fa;--muted:#a3aabd;--acc:#7c9bff;--acc2:#5b7cfa;
--glass:rgba(40,44,64,.42);--glass-strong:rgba(30,33,50,.72);--glass-edge:rgba(255,255,255,.22);--glass-hi:rgba(255,255,255,.14);--shadow:0 10px 30px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
--wp1:#4338ca;--wp2:#0e7490;--wp3:#9d174d}
[data-theme=light]{--bg:#eef1f8;--card:rgba(255,255,255,.86);--card2:rgba(20,30,70,.05);--line:rgba(20,30,70,.10);--text:#111827;--muted:#5b6478;--acc:#3a5bf0;--acc2:#2f4cd6;
--glass:rgba(255,255,255,.48);--glass-strong:rgba(255,255,255,.78);--glass-edge:rgba(255,255,255,.85);--glass-hi:rgba(255,255,255,.6);--shadow:0 10px 30px rgba(30,40,90,.12),0 1px 2px rgba(30,40,90,.08);
--wp1:#a5b4fc;--wp2:#67e8f9;--wp3:#f9a8d4}
html,body{font-family:var(--font);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;min-height:100dvh}
.wallpaper{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.wallpaper i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.55}
.wallpaper i:nth-child(1){background:var(--wp1);left:-15vmax;top:-20vmax}
.wallpaper i:nth-child(2){background:var(--wp2);right:-20vmax;top:10vh}
.wallpaper i:nth-child(3){background:var(--wp3);left:20vw;bottom:-30vmax;opacity:.4}
/* glass material: navigation and controls */
.glass,.top-r,#toast,dialog,.bulkbar,.tabs,.sheet{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.04),var(--shadow)}
[data-theme=dark] .glass,[data-theme=dark] .top-r,[data-theme=dark] .tabs{border-color:rgba(255,255,255,.14)}
/* content: more opaque for legibility */
.card,.stat,.item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.stat{border-radius:var(--r-md);padding:16px}.stat b{font-size:26px;letter-spacing:-.02em}
.item{border-radius:var(--r-md)}.card{padding:20px}
.cday,.trophy,.report{border-radius:12px}.trophy{background:var(--card);border:1px solid var(--line)}.trophy.on{border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 25%,transparent),var(--shadow)}
h3{text-transform:none;letter-spacing:-.01em;font-size:17px;color:var(--text);font-weight:600}
.large-title{font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.025em;margin:6px 4px 18px}
/* pill controls */
.btn{border-radius:999px;padding:0 18px;min-height:var(--control-h);background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi);font-weight:500;transition:transform .35s var(--spring),background .2s,box-shadow .2s}
.btn:hover{border-color:var(--glass-edge);background:var(--glass-strong)}.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 92%,#fff),var(--acc));border-color:color-mix(in srgb,var(--acc) 70%,#fff);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px color-mix(in srgb,var(--acc) 35%,transparent)}
.btn.primary:hover{background:var(--acc2)}.btn.ghost{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.xl{border-radius:999px;min-height:56px;font-size:18px;padding:0 30px}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),select,textarea{border-radius:14px;background:var(--card2);border:1px solid var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
.chip{border-radius:999px;background:var(--card);transition:transform .35s var(--spring)}.chip:active{transform:scale(.95)}
.tabs{border-radius:999px;padding:4px}.tabs button{border-radius:999px;transition:background .25s var(--ease)}.tabs button.on{background:var(--glass-strong);box-shadow:inset 0 1px 0 var(--glass-hi),0 2px 8px rgba(0,0,0,.12)}
.icon{border-radius:999px;width:40px;height:40px;display:inline-grid;place-items:center;padding:0;font-size:18px}
.icon:hover{background:var(--card2)}
dialog{border-radius:var(--r-xl);background:var(--glass-strong)}dialog[open]{animation:pop .45s var(--spring)}dialog::backdrop{background:rgba(5,8,20,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#toast{border-radius:999px;color:var(--text);background:var(--glass-strong);bottom:calc(24px + env(safe-area-inset-bottom));transition:opacity .3s,transform .45s var(--spring);transform:translate(-50%,12px)}#toast.show{transform:translate(-50%,0)}#toast .link{color:var(--acc)}
.bulkbar{border-radius:999px;border-color:var(--glass-edge)}
/* header + floating capsule tab bar */
.top{position:sticky;top:0;z-index:10;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:calc(12px + env(safe-area-inset-top)) 20px 8px;gap:14px;max-width:1240px;margin:0 auto}
.brand{font-weight:700;letter-spacing:-.01em}
.tabbar{flex:0 1 auto;margin:0 auto;border-radius:999px;padding:5px;gap:2px;display:flex;overflow-x:auto}
.tabbar button{display:flex;align-items:center;gap:6px;border-radius:999px;padding:8px 14px;color:var(--muted);transition:background .3s var(--ease),color .2s,transform .35s var(--spring)}
.tabbar button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tabbar button:active{transform:scale(.94)}
.tabbar button.on{color:var(--acc);background:var(--glass-strong);box-shadow:inset 0 1px 0 var(--glass-hi),0 2px 10px rgba(0,0,0,.12)}
.top-r{border-radius:999px;padding:3px;display:flex}
main{max-width:1040px;padding:8px 20px 40px}
main.enter{animation:enter .5s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
/* compact desktop: icons only on medium widths */
@media(max-width:1180px) and (min-width:761px){.tabbar button span{display:none}.tabbar button{padding:9px 12px}.tabbar button.on span{display:inline}}
/* timer */
.ring-bg{stroke:color-mix(in srgb,var(--text) 10%,transparent)}.ring-fg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--acc) 50%,transparent));transition:stroke-dashoffset .6s var(--ease)}
.ring-box{border-radius:50%;background:radial-gradient(circle at 50% 35%,var(--glass-hi),transparent 70%)}
.clock{font-weight:600;letter-spacing:-.03em}
.fs{background:var(--bg)}.fs::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60vmax 60vmax at 20% 10%,var(--wp1),transparent 60%),radial-gradient(60vmax 60vmax at 90% 80%,var(--wp2),transparent 60%);opacity:.5}
/* charts stay solid */
.w7-track,.bar{background:color-mix(in srgb,var(--text) 9%,transparent)}
.cday{background:color-mix(in srgb,var(--text) 5%,transparent)}
/* auth sheet + landing */
.auth{min-height:100dvh;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))}
.sheet{border-radius:var(--r-xl);padding:28px 24px;position:relative;animation:pop .5s var(--spring)}
.a-back{position:absolute;left:10px;top:10px;font-size:28px}
.landing{max-width:1160px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))}
.l-top{position:sticky;top:calc(10px + env(safe-area-inset-top));z-index:5;display:flex;align-items:center;gap:8px;border-radius:999px;padding:6px 6px 6px 18px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:72px 0 56px}
.hero h1{font-size:clamp(44px,7vw,76px);line-height:1;letter-spacing:-.04em;margin:0 0 18px;font-weight:800;background:linear-gradient(135deg,var(--text) 30%,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:30ch;margin:0 0 28px;line-height:1.4}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.mock{border-radius:var(--r-xl);padding:16px;display:flex;flex-direction:column;gap:12px;transform:perspective(1200px) rotateY(-6deg) rotateX(3deg);transition:transform .8s var(--spring)}
.mock:hover{transform:none}
.mock-bar{display:flex;gap:6px}.mock-bar i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--text) 25%,transparent)}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mock-stats .stat b{font-size:20px}
.mock-card{margin:0;padding:16px}.mock-card h3{margin-bottom:10px;font-size:15px}
.mock-cols{display:flex;gap:8px;height:110px;align-items:stretch}.mock-cols div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.mock-cols i{display:block;width:70%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 60%,transparent))}.mock-cols span{font-size:11px;color:var(--muted)}
.mock-sub{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;font-size:13px;margin:6px 0}.mock-sub .bar{margin:0}
.features h2{font-size:clamp(26px,3.5vw,36px);letter-spacing:-.025em;text-align:center;margin:0 0 28px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feat{margin:0}.feat b{display:block;font-size:17px;margin:10px 0 6px}.feat p{margin:0;color:var(--muted);font-size:14px}
.f-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}
.f-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.l-foot{max-width:1100px;margin:56px auto 0;padding:0 20px calc(18px + env(safe-area-inset-bottom));color:var(--muted);font-size:14px}
.lf-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);gap:32px;padding:32px 0 22px;border-top:1px solid var(--line)}
.lf-mark{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:var(--text);text-decoration:none}.lf-brand p{margin:8px 0 0;line-height:1.5}
.lf-oss a,.lf-cols a{color:var(--text);text-decoration:none}.lf-oss a{font-weight:600}
.lf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.lf-cols h2{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lf-cols a{display:block;padding:4px 0;opacity:.85;overflow-wrap:anywhere}.lf-cols a:hover,.lf-oss a:hover,.lf-cols a:focus-visible{opacity:1;text-decoration:underline;color:var(--acc)}
.lf-copy{margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
@media (max-width:720px){.lf-top{grid-template-columns:1fr;gap:22px}.lf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.lf-cols>div:last-child{grid-column:1/-1}}
@media(max-width:960px){.hero{grid-template-columns:1fr;padding:44px 0 36px;gap:32px}.mock{transform:none}.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}.l-top .btn.ghost{display:none}.l-top .brand span{display:inline}.hero-cta .btn{flex:1}.mock-sub{grid-template-columns:80px 1fr}}
/* phones: bottom floating capsule tab bar */
@media(max-width:760px){
 .top{padding:calc(8px + env(safe-area-inset-top)) 14px 4px;flex-wrap:nowrap}.brand span{display:inline}.top-r{margin-left:auto}
 .tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:15;order:0;width:auto;padding:5px;justify-content:flex-start}
 .tabbar button{flex-direction:column;gap:2px;padding:7px 10px;font-size:10.5px;min-width:64px}.tabbar button svg{width:22px;height:22px}
 main{padding:4px 14px calc(100px + env(safe-area-inset-bottom))}
 .large-title{font-size:30px;margin:4px 2px 14px}
 #toast{bottom:calc(96px + env(safe-area-inset-bottom))}.bulkbar{bottom:calc(90px + env(safe-area-inset-bottom))}
}
/* accessibility fallbacks */
@media (prefers-reduced-transparency:reduce){
 .glass,.top-r,#toast,dialog,.bulkbar,.tabs,.sheet,.btn,.card,.stat,.item{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 [data-theme=dark]{--glass:#1c2030;--glass-strong:#22263a;--card:#181b28}[data-theme=light]{--glass:#fff;--glass-strong:#fff;--card:#fff}
 .wallpaper i{display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){[data-theme=dark]{--glass:#1c2030;--glass-strong:#22263a}[data-theme=light]{--glass:#fff;--glass-strong:#fff}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.mock{transform:none}}
/* v5 polish */
body{background:transparent}
.brand{white-space:nowrap;flex:none}
@media(max-width:1400px) and (min-width:761px){.tabbar button span{display:none}.tabbar button{padding:9px 12px}.tabbar button.on span{display:inline}}
@media(max-width:520px){.mock-stats{gap:6px}.mock-stats .stat{padding:10px}.mock-stats .stat b{font-size:15px;white-space:nowrap}}
@media(max-width:1600px) and (min-width:761px){.tabbar button span{display:none}.tabbar button{padding:9px 12px}.tabbar button.on span{display:inline}}
.tabs{overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs button{white-space:nowrap;flex:1 0 auto}
/* v6: side rail navigation on tablet/desktop (never horizontal overflow) */
@media(min-width:700px){
 #app{padding-left:calc(84px + env(safe-area-inset-left))}
 .tabbar{position:fixed;left:calc(12px + env(safe-area-inset-left));right:auto;bottom:auto;top:50%;transform:translateY(-50%);z-index:15;margin:0;width:auto;
  flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;padding:6px;border-radius:30px;overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - 24px)}
 .tabbar button{flex:none;flex-direction:row;justify-content:center;min-width:0;padding:11px;font-size:14px}
 .tabbar button span,.tabbar button.on span{display:none!important}
 .top{padding-left:8px}
 main{padding-bottom:40px}
 #toast{bottom:calc(24px + env(safe-area-inset-bottom))}.bulkbar{bottom:12px}
}
@media(min-width:1280px){
 #app{padding-left:240px}
 .tabbar{top:76px;transform:none;width:212px;border-radius:26px}
 .tabbar button{justify-content:flex-start;padding:10px 14px;gap:10px}
 .tabbar button span,.tabbar button.on span{display:inline!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .top>.brand{position:fixed;left:30px;top:calc(26px + env(safe-area-inset-top))}
}
/* v6: toolbar with + Session pill */
.top-r{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0;gap:8px;align-items:center;flex:none;margin-left:auto}
.top-tools{display:flex;border-radius:999px;padding:3px}
.add-pill{min-height:40px;height:40px;padding:0 16px 0 12px;gap:6px;font-size:15px}
.add-pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media(max-width:1023px){.add-pill span{display:none}.add-pill{width:40px;padding:0}}
dialog .link{font-size:14px}
@media(min-width:1280px){.top{max-width:none;padding-right:24px}}
.dlg .row:has(.stars){flex-wrap:wrap}.dlg .stars button{padding:2px}
@media(max-width:520px){.dlg{padding:18px}.dlg label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* v7: add-session sheet rows wrap on narrow phones */
.dlg .row>div{min-width:0}.dlg input,.dlg select{min-width:0;max-width:100%}
@media(max-width:520px){.dlg .row{flex-wrap:wrap}.dlg .row>div{flex:1 1 130px}.dlg label{white-space:normal}}
/* v8: bigger goal rings with HTML (unscaled) labels */
.goalgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 28px}
.goalgrid>div{flex:0 1 190px;min-width:0}
.goal-ring{position:relative;width:160px;height:160px;margin:0 auto 10px}
.goalgrid .goal-ring .ring{width:100%;height:100%;max-width:none;margin:0}
.goal-ring .ring-bg,.goal-ring .ring-fg{stroke-width:16}
.goal-ring .ring-center{gap:2px}
.g-pct{font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.g-sub{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:699px){.goalgrid{gap:16px}.goalgrid>div{flex:0 1 150px}.goal-ring{width:140px;height:140px}.g-pct{font-size:31px}.g-sub{font-size:12px}}

/* v9: single clean edge on + Session pill */
.btn.primary.add-pill{border-color:transparent;background:var(--acc);box-shadow:0 4px 12px color-mix(in srgb,var(--acc) 28%,transparent)}
.btn.primary.add-pill:hover{background:var(--acc2)}

/* v11: mode tabs collapse while a timer runs */
.mode-tabs{transition:opacity .3s ease,transform .3s ease,max-height .35s ease,margin .35s ease,padding .35s ease;max-height:60px;overflow:hidden}
.mode-tabs.gone{opacity:0;transform:translateY(-8px) scale(.96);max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.mode-tabs{transition:none}}

/* v12: keyframe hide/show since the view is re-rendered */
@keyframes modeOut{from{opacity:1;transform:none;max-height:60px}to{opacity:0;transform:translateY(-10px) scale(.94);max-height:0}}
@keyframes modeIn{from{opacity:0;transform:translateY(-10px) scale(.94);max-height:0}to{opacity:1;transform:none;max-height:60px}}
.mode-tabs.anim-out{animation:modeOut .4s ease forwards}
.mode-tabs.anim-in{animation:modeIn .4s ease both}
@media (prefers-reduced-motion:reduce){.mode-tabs.anim-out,.mode-tabs.anim-in{animation:none}}

/* v14: timer ring uses the selected subject color */
.tring .ring-fg,.running .tring .ring-fg{stroke:var(--subj,var(--acc));filter:drop-shadow(0 0 6px color-mix(in srgb,var(--subj,var(--acc)) 45%,transparent))}

/* achievements categories */
main,.card{min-width:0}.ach-wrap{position:relative;max-width:100%;min-width:0}.ach-cats{display:flex;flex-wrap:nowrap;gap:6px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 14px 8px;scroll-padding-inline:14px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}.ach-cats::-webkit-scrollbar{display:none}
.ach-cats button{flex:0 0 auto;flex-shrink:0;box-sizing:border-box;white-space:nowrap;border:1px solid var(--line);background:var(--card2);color:inherit;border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;backdrop-filter:blur(12px)}
.ach-cats button span{opacity:.6;font-size:12px;margin-left:2px}.ach-cats button.on{background:var(--acc);border-color:var(--acc);color:#fff}.ach-cats button.on span{opacity:.85}
.ach-filter{margin:4px 0 6px}.t-head{margin:16px 0 8px;font-size:15px}.t-by{margin-top:6px;opacity:.75}
.trophy b{display:block;margin-top:4px}
@media (max-width:520px){.trophies{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* smooth achievements switching */
.ach-cats{position:relative}.ach-ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;background:var(--acc);box-shadow:0 2px 10px color-mix(in srgb,var(--acc) 35%,transparent);transition:transform .28s cubic-bezier(.3,.7,.2,1),width .28s cubic-bezier(.3,.7,.2,1);pointer-events:none;z-index:0}
.ach-cats button{position:relative;z-index:1;transition:color .2s}.ach-cats.has-ind button.on{background:transparent;border-color:transparent}
#achGrid{transition:opacity .12s ease,transform .12s ease}#achGrid.out{opacity:0;transform:translateY(4px) scale(.995)}
#achGrid.in .trophy{animation:achIn .26s cubic-bezier(.3,.7,.2,1) both}@keyframes achIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:var(--t-op,1);transform:none}}
#achGrid.in .trophy:not(.on){--t-op:.55}
@media (prefers-reduced-motion:reduce){.ach-ind,#achGrid{transition:none}#achGrid.in .trophy{animation:none}}
/* chart tooltips */
.chart-tip{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;max-width:min(280px,calc(100vw - 16px));padding:7px 11px;border-radius:12px;font-size:13px;line-height:1.35;color:var(--fg,inherit);background:color-mix(in srgb,var(--card) 78%,transparent);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;white-space:normal}
.chart-tip.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.chart-tip{transition:none}}
@media (prefers-reduced-transparency:reduce){.chart-tip{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}}
[data-tip]{cursor:default}[data-tip]:focus{outline:none}[data-tip]:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.hcol.tip-hot .hcol-bar,.hcol-bar i.tip-hot,.w7-row.tip-hot .w7-track i,.sbar.tip-hot .bar i{filter:brightness(1.15) saturate(1.1)}
.hcol.tip-hot,.w7-row.tip-hot,.sbar.tip-hot{background:color-mix(in srgb,var(--acc) 8%,transparent);border-radius:8px}
rect.tip-hot{stroke:var(--acc);stroke-width:1.5}path.tip-hot{filter:brightness(1.15);opacity:.92}.goal-ring.tip-hot{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--acc) 40%,transparent))}
.cday.tip-hot{box-shadow:0 0 0 1px var(--acc)}
.cum-wrap{position:relative}.cum-hit{position:absolute;inset:0;display:flex}.cum-hit i{flex:1;height:100%}.cum-hit i.tip-hot{background:linear-gradient(to right,transparent 45%,color-mix(in srgb,var(--acc) 45%,transparent) 50%,transparent 55%)}

/* wrap category tabs: all visible */
.ach-cats{flex-wrap:wrap;row-gap:6px;overflow:visible;padding:2px 0 8px;margin:0;-webkit-mask-image:none;mask-image:none}
@media (max-width:520px){.ach-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.ach-cats button{min-width:0;font-size:12px;padding:7px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.ach-cats button span{font-size:11px}}
@media (max-width:380px){.ach-cats button{font-size:11.5px;padding:6px 5px;letter-spacing:-.01em}.ach-cats button span{font-size:10.5px}}
@media (max-width:380px){.ach-cats button{white-space:normal;line-height:1.2;text-overflow:clip}}

/* nav/header robustness on long pages. The bottom/side nav lives inside .top, so .top must never get
   transform/filter/backdrop-filter/will-change (they would become the containing block of the fixed nav). */
.top{transform:none!important;filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;will-change:auto!important;isolation:auto}
.tabbar{z-index:100;isolation:isolate}.top{z-index:90}

.trophy{-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:760px){
 .card,.stat,.item,.trophy,.ach-cats button,.ach-filter{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 .top::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
}
@media(max-width:760px) and (prefers-reduced-transparency:reduce){.top::before{background:var(--bg)}}

/* data room table */
.tbl-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}.tbl.dr{table-layout:fixed;width:100%}.tbl.dr col.dr-first{width:30%}.tbl.dr th,.tbl.dr td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tbl.dr thead th.num{text-align:right}.tbl.dr th.dr-h,.tbl.dr tbody th,.tbl.dr tfoot th{text-align:left}.tbl.dr tfoot td,.tbl.dr tfoot th{border-top:1px solid var(--line);border-bottom:0}

/* goal ring text fits inside the ring */
.goal-ring{container-type:inline-size}
.goal-ring .ring-center{inset:17%;width:auto;height:auto;overflow:hidden;gap:1px}
.goal-ring .g-pct{font-size:clamp(16px,21cqi,36px);max-width:100%}
.goal-ring .g-sub{display:flex;flex-direction:column;align-items:center;font-size:clamp(9px,7.6cqi,13px);line-height:1.2;max-width:100%;overflow:hidden}
.goal-ring .g-sub>span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* study-mix wallpaper */
.wallpaper i{transition:background-color 1.2s var(--ease),left 1.2s var(--ease),top 1.2s var(--ease),width 1.2s var(--ease),height 1.2s var(--ease),opacity 1.2s var(--ease)}
.wallpaper i:nth-child(n+4){opacity:0;width:40vmax;height:40vmax;left:50%;top:50%}
.wallpaper.mix i{opacity:0}
.wallpaper.mix i.on{background:var(--c);left:calc(var(--x) - var(--s) / 2);top:calc(var(--y) - var(--s) / 2);right:auto;bottom:auto;width:var(--s);height:var(--s);opacity:.42}
[data-theme=light] .wallpaper.mix i.on{opacity:.38}
.wallpaper.drift i{animation:wpDrift 46s ease-in-out infinite alternate}
.wallpaper.drift i:nth-child(2){animation-duration:58s;animation-delay:-12s}.wallpaper.drift i:nth-child(3){animation-duration:52s;animation-delay:-25s}.wallpaper.drift i:nth-child(4){animation-duration:64s;animation-delay:-7s}.wallpaper.drift i:nth-child(5){animation-duration:70s;animation-delay:-33s}
@keyframes wpDrift{0%{translate:0 0}50%{translate:3vmax -2vmax}100%{translate:-2vmax 3vmax}}
@media (prefers-reduced-motion:reduce){.wallpaper i{transition:background-color .3s,opacity .3s}.wallpaper.drift i{animation:none}}
.mix-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--glass-edge);border-radius:999px;padding:6px 12px 6px 8px;margin:0 0 12px;color:inherit;font:inherit;font-size:13px;cursor:pointer;max-width:100%}
.mix-chip>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mix-dots{display:inline-flex}.mix-dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--bg);margin-left:-4px}.mix-dots i:first-child{margin-left:0}.mix-dots i.def{background:linear-gradient(135deg,var(--wp1),var(--wp2))}
.mix-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0}.mix-item{display:inline-flex;align-items:center;gap:6px;font-size:14px}

/* Stats range tabs: wrap instead of clipping; subject select drops to its own line when needed */
.tabs.range-tabs{flex:1 1 340px;flex-wrap:wrap;overflow:visible;row-gap:4px;border-radius:20px;min-width:0}.tabs.range-tabs button{flex:1 0 auto;white-space:nowrap}
.range-tabs+select,.range-tabs~select{flex:1 0 160px;max-width:100%}

/* MCAT practice-exam dashboard */
.px-chart{position:relative;height:200px;margin:6px 0 4px 30px}.px-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.px-gl{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}.px-gl i{position:absolute;right:100%;margin-right:6px;transform:translateY(-50%);font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.px-goal{position:absolute;left:0;right:0;border-top:2px dashed color-mix(in srgb,var(--acc) 70%,transparent)}.px-goal i{position:absolute;right:0;bottom:2px;font-style:normal;font-size:11px;color:var(--acc);font-weight:600}
.px-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--card);border:2.5px solid var(--c);cursor:pointer;transition:transform .15s var(--ease,ease)}.px-dot:hover,.px-dot.tip-hot,.px-dot:focus-visible{transform:scale(1.35);outline:none}
.px-secs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.px-sec{border-left:4px solid var(--c);min-width:0}.px-sec span{display:block}.px-ch{font-size:12px;margin-top:2px}
.px-d{font-weight:600;font-size:12px;white-space:nowrap}.px-d.up{color:var(--ok)}.px-d.down{color:var(--danger,#ef4444)}
.px-legs{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}.px-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.px-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.px-form label{margin-top:8px}
.px-foot{margin:4px 4px 16px;line-height:1.5}.stat small{font-size:13px;font-weight:500}
@media(max-width:700px){.px-secs,.px-form{grid-template-columns:repeat(2,minmax(0,1fr))}.px-chart{height:170px}}

/* MCAT card on dashboard */
.px-home{cursor:pointer}.px-home:focus-visible{outline:2px solid var(--acc);outline-offset:2px}.px-home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;align-items:center}
.px-home-nums{min-width:0}.px-home-nums>div{overflow-wrap:anywhere}.px-big{font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.mt-xs{margin-top:6px}
.px-gbar{height:6px;border-radius:99px;background:var(--card2);margin:8px 0 4px;overflow:hidden}.px-gbar i{display:block;height:100%;background:var(--acc);border-radius:inherit}
.px-spark .px-chart{height:96px;margin:4px 0 4px 26px}.px-spark .px-gl:nth-child(2n){display:none}.px-spark .px-dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-width:2px}
@media(max-width:600px){.px-home-grid{grid-template-columns:1fr;gap:8px}}

/* y-axes on charts (all widths) */
.yax{margin-left:44px}.yg{position:absolute;left:0;right:0;height:0;border-top:1px solid color-mix(in srgb,var(--muted) 22%,transparent);pointer-events:none;z-index:0}
.yg i{position:absolute;right:100%;top:0;margin-right:6px;transform:translateY(-50%);font-style:normal;font-size:10.5px;line-height:1;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.yax .hcol{position:relative;z-index:1}.cum-wrap.yax svg{position:relative;z-index:1}
.px-gl{border-top-style:solid;border-top-color:color-mix(in srgb,var(--muted) 22%,transparent)}.px-gl i{font-size:10.5px;line-height:1}

/* background period tabs + quicker recolor when ambient motion is off */
.tabs.bg-win,.tabs.bg-mode{flex-wrap:wrap;overflow:visible;max-width:100%;border-radius:20px;row-gap:4px}.tabs.bg-win button,.tabs.bg-mode button{flex:1 0 auto}
.wallpaper:not(.drift) i{transition-duration:.45s}

/* Dashboard to-dos card: fixed height, never overflows */
.todo-card{position:relative;max-height:360px;min-height:150px;display:flex;flex-direction:column;overflow:hidden}
.todo-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;margin-bottom:8px}.todo-add input[type=date],.todo-add select{width:auto;max-width:150px}
.todo-list{position:relative;flex:0 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.todo-it{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);min-width:0;flex:0 0 auto;transition:opacity .35s var(--ease,ease),transform .35s var(--ease,ease)}.todo-it[hidden]{display:none}
.todo-it:last-child{border-bottom:0}.todo-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.todo-it .dot{flex:0 0 auto}
.todo-when{flex:0 0 auto;white-space:nowrap}.todo-it.overdue{background:color-mix(in srgb,var(--danger,#ef4444) 9%,transparent);border-radius:8px;padding-left:8px;padding-right:8px}
.todo-it.done{opacity:.35;transform:translateX(8px)}.todo-it.done .todo-t{text-decoration:line-through}
.todo-more{flex:0 0 auto;padding-top:6px}.todo-empty{margin:8px 0}
@media(max-width:600px){.todo-card{max-height:400px}.todo-add{grid-template-columns:1fr 1fr auto}.todo-add #tdT{grid-column:1/-1}.todo-add input[type=date],.todo-add select{max-width:none;width:100%;min-width:0}}
@media (prefers-reduced-motion:reduce){.todo-it{transition:none}}

/* share-price chart hover: hit strips above the line, with a marker dot */
.cum-wrap .cum-hit{z-index:2;touch-action:pan-y}.cum-hit i{position:relative;cursor:crosshair}.cum-hit i b{position:absolute;left:50%;width:10px;height:10px;margin:0 0 -5px -5px;border-radius:50%;background:var(--card);border:2.5px solid var(--ok);opacity:0;transition:opacity .15s}
.cum-hit i.tip-hot b,.cum-hit i:focus-visible b{opacity:1}.cum-hit i:focus-visible{outline:none}
/* spacing under Stats header chips */
.px-link{margin:0 0 12px;vertical-align:top}.mix-chip{margin-right:6px;vertical-align:top}

/* One clean edge on every primary/pill button (generalizes the + Session pill fix from 031ceea):
   the old gradient + lighter border + inset highlight + glow read as two stacked layers. */
.btn.primary{border-color:transparent;background:var(--acc);box-shadow:0 4px 12px color-mix(in srgb,var(--acc) 28%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.primary:hover{background:var(--acc2)}.btn.primary:active{box-shadow:0 2px 6px color-mix(in srgb,var(--acc) 24%,transparent)}
/* stacked inputs in cards/dialogs get consistent spacing (the base input reset zeroed .mt) */
input.mt,select.mt,textarea.mt{margin-top:10px}
.card>input:not([type=checkbox]):not([type=radio]):not([type=color])+input:not([type=checkbox]):not([type=radio]):not([type=color]),.card>input+select,.card>select+input,.card>select+select{margin-top:10px}

/* calendar to-dos */
.cday .tk{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text);opacity:.85}.tk-box{flex:0 0 auto;width:9px;height:9px;border:1.5px solid var(--muted);border-radius:3px}
.tk-dot{display:none;width:6px;height:6px;border-radius:50%;background:var(--acc)}
@media(max-width:760px){.tk-dot{display:block}}
.cal-todos h4{margin:0 0 4px;font-size:14px}.cal-todos .todo-it{cursor:pointer}.cal-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;margin-top:8px}
@media(max-width:520px){.cal-add{grid-template-columns:1fr auto}.cal-add input{grid-column:1/-1}.cal-add select{width:100%;min-width:0}}

.calgrid{grid-template-columns:repeat(7,minmax(0,1fr))}.cday{min-width:0;overflow:hidden}

/* sign-out icon */
#logoutBtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 3D trophies */
.trophy[data-act]{cursor:pointer}.trophy[data-act]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.trophy .t-ic{height:84px;display:grid;place-items:center}.trophy .t-ic.has-3d{font-size:0}.trophy .t-ic canvas.t3d{width:84px;height:84px;display:block}
.trophy:not(.on) .t-ic canvas.t3d{filter:grayscale(1) brightness(.8)}
.t3d-host{display:grid;place-items:center;min-height:220px;margin:4px auto}.t3d-host canvas{max-width:100%;cursor:grab;border-radius:16px}.t3d-host canvas:active{cursor:grabbing}.t-ic.big{font-size:64px}
.no-3d .t3d-hint{display:none}

.t3dq .tabs{max-width:420px}.t3dq p{margin:6px 0 0}
.row.wrap>.tabs.grow{flex:1 1 180px}

.ach-cele{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:min(440px,calc(100vw - 24px));transform:translate(-50%,24px) scale(.96);opacity:0;transition:transform .35s var(--ease),opacity .3s;display:flex;gap:12px;align-items:center;padding:12px 40px 12px 12px;border-radius:18px;background:var(--glass-strong,var(--card));border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);box-shadow:0 12px 40px rgba(0,0,0,.25);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:pointer;overflow:hidden}
.ach-cele.show{transform:translate(-50%,0) scale(1);opacity:1}.ach-cele.still{transition:none}
.ach-cele .ach-ic{flex:0 0 64px;height:64px;display:grid;place-items:center;font-size:40px}.ach-cele .ach-ic canvas{width:64px;height:64px}
.ach-cele .ach-tx{display:flex;flex-direction:column;gap:2px;min-width:0}.ach-cele .ach-tx small{color:var(--acc);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:11px}.ach-cele .ach-tx b{font-size:15px}.ach-cele .ach-tx span{font-size:13px;overflow-wrap:anywhere}
.ach-cele .ach-x{position:absolute;top:6px;right:8px;background:none;border:0;font-size:20px;color:var(--muted);cursor:pointer;width:28px;height:28px}
.ach-cele:not(.still)::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:achShine 1.4s .3s ease-out;pointer-events:none}
@keyframes achShine{to{transform:translateX(100%)}}
.ach-conf{position:absolute;inset:0;pointer-events:none}.ach-conf i{position:absolute;top:-8px;left:var(--x);width:6px;height:10px;border-radius:2px;background:hsl(var(--h) 85% 60%);opacity:0;animation:achConf 1.6s var(--d) ease-in forwards}
@keyframes achConf{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(110px) rotate(320deg)}}
.ach-notif-set{margin-bottom:12px}.ach-notif-set p{margin:6px 0}
@media (prefers-reduced-motion:reduce){.ach-cele,.ach-cele::after,.ach-conf i{transition:none;animation:none}}
.ach-notif-set>label{display:flex;justify-content:flex-start;align-items:center;font-weight:600}
.ach-notif-set>label{gap:10px}.ach-notif-set>label>input{flex:0 0 auto;width:auto;margin:0}

.tour{position:fixed;inset:0;z-index:1000}.tour.out{opacity:0;transition:opacity .2s}
.tour-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 200vmax rgba(6,8,18,.58),0 0 0 2px var(--acc);transition:left .35s var(--ease),top .35s var(--ease),width .35s var(--ease),height .35s var(--ease);pointer-events:none}
.tour-hole.none{box-shadow:0 0 0 200vmax rgba(6,8,18,.58)}
.tour-card{position:fixed;left:50%;top:50%;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:16px 16px 12px;border-radius:18px;background:var(--card);color:var(--text);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);box-shadow:0 16px 48px rgba(0,0,0,.35);transition:left .35s var(--ease),top .35s var(--ease);outline:none}
.tour-card h4{margin:4px 0 6px;font-size:17px}.tour-card p{margin:0 0 10px;font-size:14px;line-height:1.45}
.tour-dots{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}.tour-dots i{width:7px;height:7px;border-radius:4px;background:color-mix(in srgb,var(--text) 22%,transparent);transition:width .25s}.tour-dots i.done{background:color-mix(in srgb,var(--acc) 55%,transparent)}.tour-dots i.on{width:18px;background:var(--acc)}
.tour-btns{gap:6px;flex-wrap:wrap}.tour-setup{display:grid;gap:6px;margin-bottom:10px}.tour-setup label{margin:0;font-size:13px}
.tour.still .tour-hole,.tour.still .tour-card,.tour.still .tour-dots i{transition:none}
@media (prefers-reduced-motion:reduce){.tour-hole,.tour-card,.tour-dots i{transition:none}}
.tour.init .tour-card,.tour.init .tour-hole{transition:none}

.oauth{display:flex;flex-direction:column;gap:8px}.oauth .or{margin:2px 0}.oauth-btn{text-decoration:none;text-align:center}

.consent{position:fixed;z-index:1100;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));width:min(560px,calc(100vw - 24px));display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;border-radius:16px;background:var(--glass-strong,var(--card));border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.25)}.consent p{margin:0;flex:1 1 260px;font-size:14px}.consent-btns{display:flex;gap:8px;margin-left:auto}
#app:not(.hid)~.consent,body:has(#app:not(.hid)) .consent{bottom:calc(84px + env(safe-area-inset-bottom))}
.privacy{max-width:760px;margin:0 auto;padding:24px 16px 120px;display:flex;flex-direction:column;gap:16px}.privacy .brand{text-decoration:none;color:inherit}.privacy article{padding:24px;line-height:1.6}.privacy h1{margin-top:0}.privacy h2{font-size:1.1rem;margin:1.4em 0 .4em}.privacy code{font-size:.9em}

.agree{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:14px;line-height:1.45;color:var(--text);cursor:pointer}.agree input{width:18px;height:18px;min-height:0;flex:0 0 auto;margin:2px 0 0;padding:0;accent-color:var(--acc)}.agree a{color:var(--acc);text-decoration:underline}
.terms-gate{position:fixed;inset:0;z-index:1200;background:rgba(5,8,20,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:auto}.terms-gate .auth-card{max-width:440px}.terms-gate h2{margin:0}
#aSubmit:disabled{opacity:.55;cursor:not-allowed}

.billbar{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 auto 12px;box-sizing:border-box;width:calc(100% - 40px);max-width:1000px;padding:8px 14px;border-radius:14px;background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);font-size:14px}.billbar .btn{min-height:32px;padding:4px 12px}@media(max-width:760px){.billbar{width:calc(100% - 24px)}}
.pricing{max-width:900px;margin:0 auto;padding:24px 16px 8px;text-align:center}.pricing h2{margin:0 0 6px}.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:18px 0}
.plan{position:relative;text-align:left;display:flex;flex-direction:column;gap:8px;padding:20px}.plan .price{font-size:34px;font-weight:800}.plan .price small,.plan-btn .price small{font-size:14px;font-weight:500;opacity:.7}.plan ul{margin:0 0 8px;padding-left:18px;line-height:1.6}.plan .btn{margin-top:auto}
.plan.best,.plan-btn.best{border:2px solid var(--acc)}.plan .pill,.plan-btn .pill{position:absolute;top:-11px;right:14px;background:var(--acc);color:#fff;font-size:12px;padding:2px 10px;border-radius:999px}
.pw-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}.plan-btn{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:16px 14px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;font:inherit;text-align:left}.plan-btn:hover{border-color:var(--acc)}.plan-btn .price{font-size:24px;font-weight:800}
.paywall h2{margin:4px 0 0}@media (max-width:360px){.pw-plans{grid-template-columns:1fr}}
.mock-card .h3{font-size:15px;font-weight:700;margin:0 0 10px}