:root{
  --canvas:#ECEFF3; --surface:#FFFFFF; --ink:#1B2530; --muted:#6B7785;
  --hair:#E2E7EC; --hair-strong:#CBD3DB; --accent:#21696E; --accent-soft:#E1F0F0;
  --shadow:0 1px 2px rgba(27,37,48,.05), 0 8px 24px rgba(27,37,48,.07);
  --radius:14px;
  --f-disp:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body:"Inter", ui-sans-serif, system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--canvas); color:var(--ink); font-family:var(--f-body); -webkit-font-smoothing:antialiased; padding:22px clamp(10px,3vw,34px) 60px}
.wrap{max-width:1180px; margin:0 auto}

/* header */
header.top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.brand{display:flex; align-items:center; gap:12px}
.mark{width:38px;height:38px;border-radius:10px;background:var(--accent);position:relative;flex:none}
.mark:before,.mark:after{content:"";position:absolute;background:#fff;border-radius:2px}
.mark:before{left:9px;top:9px;width:2px;height:11px}
.mark:after{left:9px;top:18px;width:13px;height:2px}
.title h1{font-family:var(--f-disp); font-weight:700; font-size:23px; letter-spacing:-.01em; margin:0; line-height:1}
.title p{margin:5px 0 0; color:var(--muted); font-size:13px}
.weeknav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.weeklabel{font-family:var(--f-disp); font-weight:600; font-size:15px; min-width:180px; text-align:center}
button,a.ghost{font-family:var(--f-body)}
.nav-btn,.ghost{border:1px solid var(--hair-strong); background:var(--surface); color:var(--ink); border-radius:9px; height:36px; padding:0 12px; font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer; transition:border-color .15s,color .15s,transform .05s}
.nav-btn{width:36px;padding:0;justify-content:center;font-size:18px}
.nav-btn:hover,.ghost:hover{border-color:var(--accent); color:var(--accent)}
.nav-btn:active,.ghost:active{transform:translateY(1px)}
.today-btn{font-weight:600}

/* summary */
.summary{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; margin-bottom:16px; display:flex; align-items:center; gap:10px 20px; flex-wrap:wrap}
.summary .lab{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:4px}
.stat{display:flex; align-items:center; gap:8px; font-size:13px}
.dot{width:11px;height:11px;border-radius:3px;flex:none}
.stat b{font-family:var(--f-mono); font-weight:500}
.summary .total{margin-left:auto; font-family:var(--f-disp); font-weight:600; font-size:15px}
.summary .total span{color:var(--muted); font-weight:500; font-size:12px; font-family:var(--f-body)}

/* controls */
.controls{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; font-size:13px; color:var(--muted)}
.controls label{display:flex; align-items:center; gap:6px}
select{font-family:var(--f-mono); font-size:12px; border:1px solid var(--hair-strong); border-radius:8px; height:30px; padding:0 6px; background:var(--surface); color:var(--ink)}
.hint{margin-left:auto; font-size:12px; color:var(--muted)}

/* grid */
.board{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.grid{width:100%; border-collapse:collapse; min-width:720px; table-layout:fixed}
.grid col.timecol{width:56px}
th.dayhead{font-family:var(--f-disp); font-weight:600; font-size:13px; padding:11px 6px 9px; text-align:center; border-bottom:1px solid var(--hair); border-left:1px solid var(--hair); background:#FBFCFD}
th.dayhead .dnum{display:block; font-family:var(--f-mono); font-size:11px; color:var(--muted); font-weight:400; margin-top:2px}
th.dayhead .dtot{display:block; font-family:var(--f-mono); font-size:10px; color:var(--accent); margin-top:3px; min-height:12px}
th.dayhead.is-today{background:var(--accent-soft)}
th.dayhead.is-today .dname{color:var(--accent)}
th.corner{background:#FBFCFD; border-bottom:1px solid var(--hair); position:sticky; left:0; z-index:4}
td.timecell{font-family:var(--f-mono); font-size:11px; color:var(--muted); text-align:right; padding:0 8px 0 4px; border-top:1px solid var(--hair); height:28px; vertical-align:top; white-space:nowrap; background:var(--surface); position:sticky; left:0; z-index:2}
td.timecell.onhour{color:var(--ink); font-weight:500}
td.slot{border-top:1px solid var(--hair); border-left:1px solid var(--hair); height:28px; padding:0; position:relative; cursor:pointer; transition:background .12s}
td.slot:hover{background:#F4F7F9}
td.slot.q{border-top:1px dashed #EFF3F6}
td.slot.todaycol{background:#F7FBFB}
td.slot.todaycol:hover{background:#EFF7F7}
.slotfill{position:absolute; inset:0; padding:1px 6px 1px 9px; overflow:hidden; display:flex; flex-direction:column; justify-content:center}
.slotfill:before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--spine)}
.slotfill .note{font-size:11px; line-height:1.1; color:var(--txt); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.slotfill .sub{font-size:9.5px; line-height:1.1; color:var(--txt); opacity:.78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px}
td.slot.sel{outline:2px solid var(--accent); outline-offset:-2px; z-index:2}
td.slot.cont{border-top-color:transparent}
.slotfill.contfill .note,.slotfill.contfill .sub{display:none}
.nowline{position:absolute; left:0; right:0; height:2px; background:var(--accent); z-index:3; pointer-events:none}
.nowline:before{content:""; position:absolute; left:-1px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* editor */
.scrim{position:fixed; inset:0; background:rgba(27,37,48,.28); backdrop-filter:blur(2px); z-index:40; display:none}
.scrim.show{display:block}
.editor{position:fixed; z-index:50; width:min(360px, calc(100vw - 24px)); background:var(--surface); border:1px solid var(--hair); border-radius:16px; box-shadow:0 12px 40px rgba(27,37,48,.22); padding:16px; display:none}
.editor.show{display:block; animation:pop .14s ease}
@keyframes pop{from{opacity:0; transform:scale(.97) translateY(-4px)} to{opacity:1}}
.editor .ehead{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px}
.editor .ehead .when{font-family:var(--f-mono); font-size:12px}
.editor .ehead .day{font-family:var(--f-disp); font-weight:600; font-size:13px; color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px}
.chip{border:1.5px solid var(--hair-strong); background:#fff; border-radius:999px; padding:5px 11px; font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:6px; color:var(--ink); cursor:pointer}
.chip .cdot{width:9px;height:9px;border-radius:3px}
.chip.on{border-color:var(--cc); background:var(--cct); color:var(--ccx)}
.field{margin-bottom:10px}
.field span{display:block; font-size:11px; color:var(--muted); margin-bottom:4px; font-weight:500}
.field input,.field select{width:100%; border:1px solid var(--hair-strong); border-radius:9px; height:38px; padding:0 11px; font-family:var(--f-body); font-size:13px; color:var(--ink); background:#fff}
.field input:focus,.field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.erow{display:flex; gap:8px; margin-top:6px}
.save{flex:1; border:none; background:var(--accent); color:#fff; border-radius:9px; height:38px; font-size:13px; font-weight:600; cursor:pointer; transition:filter .15s}
.save:hover{filter:brightness(1.06)}
.clear{color:#B23B3B; border-color:#E9C9C9}
.clear:hover{border-color:#B23B3B; color:#B23B3B}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; font-size:12.5px; padding:9px 15px; border-radius:10px; opacity:0; transition:opacity .2s,transform .2s; z-index:60; pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* auth pages */
.authbody{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.authcard{background:var(--surface); border:1px solid var(--hair); border-radius:18px; box-shadow:var(--shadow); padding:30px 28px; width:min(370px,100%); text-align:center}
.authmark{width:44px;height:44px;border-radius:12px;background:var(--accent);margin:0 auto 14px;position:relative}
.authmark:before,.authmark:after{content:"";position:absolute;background:#fff;border-radius:2px}
.authmark:before{left:11px;top:11px;width:2px;height:13px}
.authmark:after{left:11px;top:22px;width:15px;height:2px}
.authcard h1{font-family:var(--f-disp); font-size:22px; margin:0 0 4px}
.authsub{color:var(--muted); font-size:13px; margin:0 0 18px}
.authcard form{text-align:left; display:flex; flex-direction:column; gap:12px}
.authcard label{font-size:12px; color:var(--muted); font-weight:500; display:flex; flex-direction:column; gap:5px}
.authcard input{border:1px solid var(--hair-strong); border-radius:9px; height:40px; padding:0 12px; font-size:14px; font-family:var(--f-body)}
.authcard input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.authbtn{margin-top:4px; border:none; background:var(--accent); color:#fff; border-radius:9px; height:42px; font-size:14px; font-weight:600; cursor:pointer}
.authbtn:hover{filter:brightness(1.06)}
.autherr{background:#FBE9E9; color:#9A2A2A; border:1px solid #F1CFCF; border-radius:9px; padding:9px 12px; font-size:12.5px; margin-bottom:14px}
.authhint{color:var(--muted); font-size:11.5px; margin:16px 0 0; line-height:1.5}

/* mobile */
@media (max-width:560px){
  .title p{display:none}
  .weeklabel{min-width:120px; font-size:13px}
  .hint{display:none}
  /* editor as bottom sheet */
  .editor{left:0 !important; right:0; bottom:0; top:auto !important; width:100%; border-radius:18px 18px 0 0; max-height:88vh; overflow:auto}
  .editor.show{animation:sheet .18s ease}
}
@keyframes sheet{from{transform:translateY(100%)} to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}