/* 同行 — MCAT study, together.  Design system matches the 醫學-魏 deck + study guide. */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;src:url("assets/Geist-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;src:url("assets/Geist-Bold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;src:url("assets/GeistMono-Regular.ttf") format("truetype");font-display:swap}

:root{
  --bg:#FDF8E9; --card:#FFFFFF; --card2:#FBF6E4; --ink:#2A2A2A; --soft:#6B6B6B; --faint:#9C9481;
  --line:#E7DFC9; --line2:#D8CDAF;
  --teal:#0F8892; --pink:#DB147D; --amber:#A6761D; --violet:#7B1FA2; --coral:#E65100;
  --ok:#2E7D32; --warn:#B25E00; --bad:#C62828;
  --s0:#BDB49C; --s1:#C08A1E; --s2:#0F8892; --s3:#7B1FA2;   /* unseen · shaky · solid · mastered */
  --shadow:0 1px 2px rgba(60,50,20,.06),0 4px 14px rgba(60,50,20,.05);
  --r:14px; --tap:44px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16150E; --card:#211F16; --card2:#1B1A12; --ink:#F1EBDA; --soft:#A9A18C; --faint:#7C7561;
    --line:#332F21; --line2:#453F2C;
    --teal:#3BC6D2; --pink:#FF56A8; --amber:#E0B93E; --violet:#C08BE8; --coral:#FF8A3D;
    --ok:#6FCF74; --warn:#E8A33D; --bad:#FF6B6B;
    --s0:#4A4534; --s1:#E0B93E; --s2:#3BC6D2; --s3:#C08BE8;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#16150E; --card:#211F16; --card2:#1B1A12; --ink:#F1EBDA; --soft:#A9A18C; --faint:#7C7561;
  --line:#332F21; --line2:#453F2C;
  --teal:#3BC6D2; --pink:#FF56A8; --amber:#E0B93E; --violet:#C08BE8; --coral:#FF8A3D;
  --ok:#6FCF74; --warn:#E8A33D; --bad:#FF6B6B;
  --s0:#4A4534; --s1:#E0B93E; --s2:#3BC6D2; --s3:#C08BE8;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.28);
}
:root[data-theme="light"]{
  --bg:#FDF8E9; --card:#FFFFFF; --card2:#FBF6E4; --ink:#2A2A2A; --soft:#6B6B6B; --faint:#9C9481;
  --line:#E7DFC9; --line2:#D8CDAF;
  --teal:#0F8892; --pink:#DB147D; --amber:#A6761D; --violet:#7B1FA2; --coral:#E65100;
  --ok:#2E7D32; --warn:#B25E00; --bad:#C62828;
  --s0:#BDB49C; --s1:#C08A1E; --s2:#0F8892; --s3:#7B1FA2;
  --shadow:0 1px 2px rgba(60,50,20,.06),0 4px 14px rgba(60,50,20,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Geist","PingFang TC","Heiti TC",system-ui,sans-serif;font-size:15px;line-height:1.45;
  letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));overscroll-behavior-y:none}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line);
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px}
.top-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:12px}
.brand{font-family:"Geist Mono",monospace;font-size:16px;font-weight:700;color:var(--teal);letter-spacing:.02em}
.brand small{display:block;font-family:"Geist",sans-serif;font-weight:400;font-size:10.5px;
  color:var(--faint);letter-spacing:.04em;margin-top:1px}
.top .spacer{flex:1}
.iconbtn{width:var(--tap);height:36px;display:grid;place-items:center;border-radius:9px;color:var(--soft);
  border:1px solid transparent}
.iconbtn:hover{background:var(--card);border-color:var(--line);color:var(--ink)}
.whobar{display:flex;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:3px}
.whobar button{font-size:12px;padding:5px 11px;border-radius:999px;color:var(--soft);font-weight:700}
.whobar button[aria-pressed="true"]{background:var(--teal);color:#fff}

/* ---------- layout ---------- */
.wrap{max-width:760px;margin:0 auto;padding:14px 14px 24px}
.view{display:none}.view.on{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:15px;margin-bottom:13px}
h2.sec{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:20px 4px 9px;font-weight:400}
h2.sec:first-child{margin-top:2px}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.muted{color:var(--soft)}.tiny{font-size:12px}

/* ---------- countdown hero ---------- */
.hero{background:linear-gradient(155deg,var(--card) 0%,var(--card2) 100%);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:17px;margin-bottom:13px}
.cd{display:flex;align-items:baseline;gap:10px}
.cd .n{font-family:"Geist Mono",monospace;font-size:44px;font-weight:700;line-height:1;color:var(--teal);
  font-variant-numeric:tabular-nums}
.cd .u{font-size:13px;color:var(--soft)}
.cd .date{margin-left:auto;text-align:right;font-size:12px;color:var(--faint)}
.pace{margin-top:13px;padding-top:12px;border-top:1px dashed var(--line2)}
.pacebar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;display:flex;margin:7px 0 6px}
.pacebar i{display:block;height:100%}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:999px;font-family:"Geist Mono",monospace}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pill.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}

/* ---------- progress bars ---------- */
.pbar{height:9px;border-radius:99px;background:var(--line);overflow:hidden;display:flex}
.pbar i{display:block;height:100%}
.subj{margin-bottom:11px}
.subj .lab{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.subj .lab b{font-size:13.5px}
.subj .lab .ct{margin-left:auto;font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--faint)}

/* ---------- topics ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:11px;
  overflow:hidden;box-shadow:var(--shadow)}
.acc>summary{list-style:none;cursor:pointer;padding:13px 15px;display:flex;align-items:center;gap:10px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary b{font-size:14.5px}
.acc>summary .lab{display:flex;align-items:baseline;gap:8px}
.acc>summary .ct{margin-left:auto;font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--faint)}
.acc>summary .pbar{margin-top:7px;height:7px}
.acc>summary .chev{color:var(--faint);transition:transform .18s}
.acc[open]>summary .chev{transform:rotate(90deg)}
.acc .body{border-top:1px solid var(--line);padding:5px 0}
.tp{display:flex;align-items:center;gap:11px;padding:9px 15px;min-height:var(--tap);width:100%;text-align:left;
  border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.tp:last-child{border-bottom:none}
.tp:active{background:var(--card2)}
.dot{width:13px;height:13px;border-radius:50%;flex:none;border:2px solid var(--s0);background:transparent;
  transition:background .15s,border-color .15s}
.tp[data-s="1"] .dot{background:var(--s1);border-color:var(--s1)}
.tp[data-s="2"] .dot{background:var(--s2);border-color:var(--s2)}
.tp[data-s="3"] .dot{background:var(--s3);border-color:var(--s3);box-shadow:0 0 0 3px color-mix(in srgb,var(--s3) 22%,transparent)}
.tp .nm{flex:1;font-size:14px;min-width:0}
.tp[data-s="3"] .nm,.tp[data-s="2"] .nm{color:var(--soft)}
.tp .buddy{width:9px;height:9px;border-radius:50%;flex:none;opacity:.85}
.tp .idx{font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--faint);width:22px;flex:none}
.legend{display:flex;flex-wrap:wrap;gap:12px;padding:2px 4px 10px;font-size:11.5px;color:var(--soft)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;border-radius:50%;display:inline-block}

/* ---------- calendar ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:12px}
.day{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:7px 4px;text-align:center;
  min-height:58px;display:flex;flex-direction:column;align-items:center;gap:3px}
.day.today{border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 18%,transparent)}
.day .dw{font-family:"Geist Mono",monospace;font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.day .dn{font-family:"Geist Mono",monospace;font-size:15px;font-weight:700}
.day .dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.day .dots i{width:5px;height:5px;border-radius:50%}
.blk{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);
  border-radius:11px;background:var(--card);margin-bottom:7px}
.blk.done{opacity:.55}
.blk.done .bt{text-decoration:line-through}
.blk .who{width:8px;align-self:stretch;border-radius:99px;flex:none}
.blk .bt{font-size:14px;font-weight:700}
.blk .bm{font-size:11.5px;color:var(--faint);font-family:"Geist Mono",monospace}
.chk{width:23px;height:23px;border-radius:7px;border:2px solid var(--line2);flex:none;display:grid;place-items:center;
  color:transparent;font-size:13px;font-weight:700}
.blk.done .chk{background:var(--teal);border-color:var(--teal);color:#fff}

/* ---------- goals & streaks ---------- */
.goal{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.goal:last-child{border-bottom:none}
.ring{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:"Geist Mono",monospace;font-size:11.5px;font-weight:700}
.streak{display:flex;gap:3px;margin-top:9px}
.streak i{flex:1;min-width:0;height:16px;border-radius:4px;background:var(--line)}
.streak i.hit{background:var(--teal)}
.streak i.today{outline:2px solid var(--pink);outline-offset:1px}
.big{font-family:"Geist Mono",monospace;font-size:28px;font-weight:700;line-height:1}

/* ---------- forms ---------- */
label.f{display:block;margin-bottom:10px}
label.f span{display:block;font-size:11.5px;color:var(--soft);margin-bottom:4px;font-family:"Geist Mono",monospace;
  letter-spacing:.05em}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;
  background:var(--card2);color:var(--ink);min-height:var(--tap)}
input:focus,select:focus{outline:none;border-color:var(--teal);background:var(--card)}
.btn{background:var(--teal);color:#fff;border-radius:10px;padding:11px 16px;font-weight:700;font-size:14px;
  min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--teal);border:1px solid var(--line2)}
.btn.wide{width:100%}
.btn.sm{padding:7px 12px;min-height:34px;font-size:13px}

/* ---------- bottom nav ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.nav-in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.nav button{padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--faint);
  font-size:10.5px;font-family:"Geist Mono",monospace;letter-spacing:.04em;min-height:var(--tap)}
.nav button svg{width:21px;height:21px;stroke-width:1.9}
.nav button[aria-pressed="true"]{color:var(--teal)}
.nav button[aria-pressed="true"] svg{stroke-width:2.4}

/* ---------- misc ---------- */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(20,16,6,.45);display:none;align-items:flex-end}
.sheet.on{display:flex}
.sheet-in{background:var(--bg);width:100%;max-width:760px;margin:0 auto;border-radius:18px 18px 0 0;
  padding:18px 16px calc(20px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;
  animation:up .22s cubic-bezier(.2,.8,.3,1)}
@keyframes up{from{transform:translateY(24px)}to{transform:none}}
.sheet h3{margin:0 0 14px;font-size:16px}
.empty{text-align:center;color:var(--faint);font-size:13px;padding:22px 10px}
.toast{position:fixed;left:50%;bottom:calc(74px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--bg);padding:9px 15px;border-radius:999px;font-size:13px;z-index:70;
  opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
.seg{display:flex;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;padding:8px;border-radius:8px;font-size:13px;color:var(--soft);font-weight:700}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
@media(min-width:700px){ body{font-size:15.5px} .wrap{padding:20px 18px 30px} }