/* Stick-to-it Tracker. No inline styles anywhere (CSP): per-element values
   come in as CSS variables set from JS (--c colour, --h height, --w width). */

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#f3f6fb; --card:#ffffff; --text:#0f1b2d; --muted:#5b6b82; --line:#e1e7f1; --accent:#0d9488; --soft:#eef3f9;
  --rest:#64748b; --danger:#dc2626;
  /* category palette, index 0–11 */
  --p0:#7c3aed; --p1:#0d9488; --p2:#d97706; --p3:#2563eb; --p4:#16a34a; --p5:#db2777;
  --p6:#78716c; --p7:#dc2626; --p8:#0891b2; --p9:#4f46e5; --p10:#65a30d; --p11:#c026d3;
  --c:var(--rest);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0b1320; --card:#121c2e; --text:#e6ecf5; --muted:#8a9bb4; --line:#22304a; --accent:#2dd4bf; --soft:#182339; --danger:#f87171; }
}
:root[data-theme="dark"]{ --bg:#0b1320; --card:#121c2e; --text:#e6ecf5; --muted:#8a9bb4; --line:#22304a; --accent:#2dd4bf; --soft:#182339; --danger:#f87171; }

.c-0{--c:var(--p0)} .c-1{--c:var(--p1)} .c-2{--c:var(--p2)} .c-3{--c:var(--p3)}
.c-4{--c:var(--p4)} .c-5{--c:var(--p5)} .c-6{--c:var(--p6)} .c-7{--c:var(--p7)}
.c-8{--c:var(--p8)} .c-9{--c:var(--p9)} .c-10{--c:var(--p10)} .c-11{--c:var(--p11)}
.c-none,.c-rest{--c:var(--rest)}

html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-tap-highlight-color:transparent; }
.hidden{ display:none !important; }
.wrap{ max-width:640px; margin:0 auto; padding:0 14px 48px; }
.top{ position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg); padding:12px 0 8px; }
.row{ display:flex; align-items:center; gap:10px; }
.row.wrap-row{ flex-wrap:wrap; gap:8px; }
.grow{ flex:1; min-width:0; }
h1{ font-size:19px; margin:0; letter-spacing:-.2px; }
.sub{ color:var(--muted); font-size:12.5px; }
.mb8{ margin-bottom:8px; }
.mt8{ margin-top:8px; }
.icon-btn{ border:1px solid var(--line); background:var(--card); color:var(--text); width:44px; height:44px; border-radius:12px; font-size:17px; cursor:pointer; }

/* hero */
.hero{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; margin:6px 0 12px; }
.hero .big{ font-size:17px; font-weight:700; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.chip{ background:var(--soft); border:1px solid var(--line); border-radius:99px; padding:3px 10px; font-size:12px; color:var(--muted); }
.chip b{ color:var(--text); }
.ring{ flex:0 0 68px; }
.ring-bg{ fill:none; stroke:var(--line); stroke-width:8; }
.ring-fg{ fill:none; stroke:var(--accent); stroke-width:8; stroke-linecap:round; }
.ring-txt{ font-size:15px; font-weight:800; fill:var(--text); }

/* tabs and day strip */
.tabs{ display:flex; gap:6px; background:var(--soft); padding:4px; border-radius:12px; margin-bottom:12px; }
.tab{ flex:1; min-width:0; min-height:44px; border:0; background:transparent; color:var(--muted); padding:8px 2px; border-radius:9px; font:600 13px inherit; font-family:inherit; cursor:pointer; }
.tab.on{ background:var(--card); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.days{ display:flex; gap:5px; margin-bottom:12px; }
.day{ flex:1; min-height:48px; border:1px solid var(--line); background:var(--card); border-radius:11px; padding:6px 0 7px; text-align:center; cursor:pointer; color:var(--text); font-family:inherit; }
.day .n{ font-size:11.5px; font-weight:700; color:var(--muted); }
.day .p{ font-size:12px; margin-top:2px; font-weight:700; }
.day.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.day.today .n::after{ content:" •"; color:var(--accent); }

/* cards and blocks */
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:12px; }
.card h3{ margin:0 0 8px; font-size:14px; }
.now{ border-left:4px solid var(--accent); }
.now .k{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--accent); font-weight:700; }
.now .v{ font-weight:700; margin-top:2px; overflow-wrap:anywhere; }
.blk{ display:flex; align-items:center; gap:11px; width:100%; min-height:56px; text-align:left; font:inherit; color:var(--text); background:var(--card); border:1px solid var(--line); border-left:5px solid var(--c); border-radius:12px; padding:11px 12px; margin-bottom:8px; cursor:pointer; user-select:none; }
.blk.cur{ box-shadow:0 0 0 2px var(--accent); }
.blk.lecture{ cursor:default; opacity:.7; background:var(--soft); }
.chk{ width:26px; height:26px; border-radius:50%; border:2px solid var(--c); display:grid; place-items:center; color:transparent; font-weight:800; flex:0 0 26px; }
.blk.lecture .chk{ border-style:dashed; }
.blk.done .chk{ background:var(--c); color:#fff; }
.blk.done .lb{ text-decoration:line-through; opacity:.55; }
.tm{ font-size:12px; color:var(--muted); }
.lb{ font-weight:650; overflow-wrap:anywhere; }
.tag{ font-size:11px; font-weight:700; color:var(--c); background:var(--soft); border-radius:99px; padding:2px 8px; flex:0 0 auto; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rest{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12.5px; padding:6px 12px; margin-bottom:8px; border:1px dashed var(--line); border-radius:10px; overflow-wrap:anywhere; }

/* progress */
.bars{ display:flex; align-items:flex-end; gap:8px; height:110px; margin-top:4px; }
.bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar i{ display:block; width:100%; height:var(--h,3%); background:var(--accent); border-radius:6px 6px 2px 2px; min-height:3px; opacity:.9; }
.bar span{ font-size:11px; color:var(--muted); margin-top:4px; }
.bar.today span{ color:var(--accent); font-weight:700; }
.cat{ margin-bottom:10px; }
.cat .h{ display:flex; justify-content:space-between; gap:8px; font-size:13px; margin-bottom:4px; }
.cat .h span:first-child{ overflow-wrap:anywhere; }
.track{ height:9px; background:var(--soft); border-radius:99px; overflow:hidden; }
.track i{ display:block; height:100%; width:var(--w,0%); background:var(--c); border-radius:99px; }
.counter{ display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--line); }
.counter:first-of-type{ border-top:0; }
.counter .num{ font-size:26px; font-weight:800; min-width:44px; text-align:center; }
.counter .name{ flex:1; min-width:0; font-weight:650; overflow-wrap:anywhere; }

/* controls */
.btn{ min-height:44px; border:1px solid var(--line); background:var(--soft); color:var(--text); border-radius:10px; padding:9px 14px; font:600 14px inherit; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.btn.pri{ background:var(--accent); color:#04201d; border-color:var(--accent); }
.btn.sq{ width:44px; padding:0; font-size:18px; }
select.btn{ appearance:auto; padding:8px 10px; }
input,textarea{ width:100%; min-height:44px; background:var(--soft); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; margin-bottom:8px; }
textarea{ min-height:64px; resize:vertical; }
.link{ background:none; border:0; color:var(--muted); font-size:12px; cursor:pointer; min-height:44px; padding:0 8px; text-decoration:underline; font-family:inherit; }
.proj{ border-top:1px solid var(--line); padding:10px 0; }
.proj:first-of-type{ border-top:0; }
.proj .t{ font-weight:700; overflow-wrap:anywhere; }
.proj .n{ color:var(--muted); font-size:13px; margin-top:2px; white-space:pre-wrap; overflow-wrap:anywhere; }
.proj .d{ color:var(--muted); font-size:11.5px; margin-top:3px; display:flex; align-items:center; }
.hist{ display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid var(--line); font-size:13.5px; }
.hist:first-of-type{ border-top:0; }
.foot{ text-align:center; color:var(--muted); font-size:12px; margin-top:16px; }
.done-msg{ text-align:center; padding:12px; border-radius:12px; background:var(--soft); margin-bottom:12px; font-weight:700; }

/* banners and toast */
.banner{ background:var(--card); border:1px solid var(--accent); border-radius:12px; padding:10px 12px; margin-bottom:12px; }
.banner.warn{ border-color:var(--danger); }
.toast{ position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:min(600px,calc(100% - 28px)); background:var(--text); color:var(--bg); border-radius:12px; padding:12px 14px; font-size:13.5px; white-space:pre-line; z-index:20; box-shadow:0 4px 16px rgba(0,0,0,.25); }

/* forms (Plan editor and setup wizard) */
.field{ display:block; margin-bottom:10px; }
.field > span{ display:block; font-size:12.5px; font-weight:650; color:var(--muted); margin-bottom:4px; }
.field input,.field select{ margin-bottom:0; width:100%; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.time-big{ font-size:20px; font-weight:650; min-height:52px; padding:8px 10px; }
.nomb{ margin-bottom:0; }
.errs{ margin:8px 0 0; padding-left:18px; color:var(--danger); font-size:13px; }
.errs li{ margin-bottom:2px; overflow-wrap:anywhere; }
.banner .errs{ margin-top:4px; }
.btn.danger{ color:var(--danger); }
.stack{ display:flex; flex-direction:column; gap:8px; }
.form{ border-color:var(--accent); scroll-margin-top:90px; }

/* Plan rows and subjects */
.prow{ border:1px solid var(--line); border-left:5px solid var(--c); border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.catrow{ border-top:1px solid var(--line); padding:10px 0; }
.catrow:first-of-type{ border-top:0; }
.dot{ width:14px; height:14px; border-radius:50%; background:var(--c); flex:0 0 14px; }
.swatches{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.swatch{ width:44px; height:44px; border-radius:50%; border:3px solid var(--card); background:var(--c); cursor:pointer; box-shadow:0 0 0 1px var(--line); }
.swatch.on{ box-shadow:0 0 0 3px var(--text); }

/* wizard */
.wz-dots{ display:flex; gap:6px; margin-top:6px; }
.wz-dots i{ flex:1; height:5px; border-radius:99px; background:var(--line); }
.wz-dots i.on{ background:var(--accent); }
.chiprow{ display:flex; gap:5px; }
.chipbtn{ flex:1; min-width:0; min-height:44px; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:10px; font:700 12px inherit; font-family:inherit; cursor:pointer; padding:0; }
.chipbtn.on{ background:var(--accent); border-color:var(--accent); color:#04201d; }
.wz-item{ display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); font-size:13.5px; overflow-wrap:anywhere; }
.wz-day{ padding:6px 0; border-top:1px solid var(--line); }
.wz-day:first-of-type{ border-top:0; }

/* step 7: update banner and status pills */
button.banner{ display:block; width:100%; min-height:48px; text-align:left; font:inherit; color:var(--text); cursor:pointer; }
.banner.update{ background:var(--accent); border-color:var(--accent); color:#04201d; }
.pill{ display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; background:var(--soft); color:var(--danger); border:1px solid var(--line); }
.pill.ok{ color:var(--accent); }

/* step 8: alarm overlay */
.alarm{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px)); background:var(--bg); }
.alarm-box{ width:min(480px,100%); text-align:center; }
.alarm-bell{ font-size:64px; line-height:1; animation:alarm-shake 1s ease-in-out infinite; }
.alarm-k{ margin-top:14px; font-size:13px; text-transform:uppercase; letter-spacing:1.5px; font-weight:800; color:var(--accent); }
.alarm-title{ margin-top:8px; font-size:28px; font-weight:800; line-height:1.2; overflow-wrap:anywhere; }
.alarm-time{ margin-top:6px; font-size:18px; color:var(--muted); }
.alarm-note{ margin-top:14px; font-size:13px; color:var(--danger); }
.alarm-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; }
.alarm-actions .btn{ min-height:60px; font-size:16px; }
.alarm-actions .btn.pri{ grid-column:1 / -1; min-height:68px; font-size:18px; }
body.alarm-open{ overflow:hidden; }
@keyframes alarm-shake{ 0%,100%{ transform:rotate(0) } 20%{ transform:rotate(-14deg) } 40%{ transform:rotate(12deg) } 60%{ transform:rotate(-8deg) } 80%{ transform:rotate(5deg) } }
@media (prefers-reduced-motion: reduce){ .alarm-bell{ animation:none; } }

/* Stage 2 step 1: sleep guard */
.srow{ display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid var(--line); font-size:13.5px; }
.srow:first-of-type{ border-top:0; }
.srow.warn{ color:var(--danger); font-weight:700; }
.warn-card{ border-left:4px solid var(--danger); }
.warn-card .k{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--danger); font-weight:700; margin-bottom:2px; }
.warn-card div{ overflow-wrap:anywhere; }

/* Stage 2 step 2: template chooser */
.tpl{ display:block; width:100%; min-height:56px; text-align:left; font:inherit; color:var(--text); background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
.tpl b{ display:block; }
.tpl .sub{ display:block; margin-top:2px; }

/* Stage 2 step 3: timetable import */
.imp-text{ min-height:150px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:14px; }
.imp-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.imp-row.off{ opacity:.5; }
.imp-row.bad .lb{ text-decoration:line-through; }
.imp-check{ width:44px; height:44px; flex:0 0 44px; border-radius:10px; border:2px solid var(--accent); background:var(--card); color:var(--accent); font-size:20px; font-weight:800; cursor:pointer; }
.imp-row.off .imp-check{ border-color:var(--line); }
.imp-err{ color:var(--danger); font-size:12.5px; overflow-wrap:anywhere; }
.imp-kind{ flex:0 0 auto; max-width:40%; }

/* Stage 2 step 4: study goals + generator */
.goal-row{ display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); }
.goal-row:first-of-type{ border-top:0; }
.goal-form{ border-top:1px solid var(--line); padding-top:10px; margin-top:4px; }
.btn.toggle.on{ border-color:var(--accent); color:var(--accent); }
.notes{ margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:12.5px; }

/* Stage 2 step 5: focus timer */
.focus-card{ border-left:5px solid var(--c); }
.focus-card .k{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--accent); font-weight:700; }
.focus-card .v{ font-weight:700; margin-top:2px; overflow-wrap:anywhere; }
.focus-time{ font-size:48px; font-weight:800; letter-spacing:1px; text-align:center; margin:8px 0; font-variant-numeric:tabular-nums; }
.focus-mini{ background:var(--soft); }
.focus-mini b{ font-variant-numeric:tabular-nums; }

/* Stage 2 step 6: catch-up */
.cu-card h3{ margin-bottom:2px; }
.cu-item{ border-top:1px solid var(--line); padding:10px 0; margin-top:8px; }
.cu-slot{ font-size:13px; padding:8px 10px; }
.cu-up{ border-top:1px solid var(--line); padding-top:10px; margin-top:8px; }