:root{
  --bg:#0f1b2d; --surface:#17273d; --surface2:#1f3350;
  --line:#2b4160; --ink:#eaf1fb; --muted:#9bb0cc; --accent:#ff7a45; --accent2:#3ea0ff;
  --good:#39d98a; --bad:#ff6b6b; --radius:14px;
  --cat-table:#3ea0ff; --cat-warmup:#ffcf5c; --cat-physical:#ff7a45; --cat-cooldown:#39d98a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  display:flex; flex-direction:column; min-height:100dvh;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 10px; position:sticky; top:0; background:var(--bg); z-index:5;
}
.topbar h1{font-size:1.5rem; margin:0; letter-spacing:-.02em}
.badge{font-size:.7rem; color:var(--muted); border:1px solid var(--line);
  padding:3px 8px; border-radius:999px}
.badge.online{color:var(--good); border-color:var(--good)}
main{flex:1; overflow-y:auto; padding:4px 16px 90px}
.loading{color:var(--muted); text-align:center; padding:40px}

/* tab bar */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; display:flex;
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1; background:none; border:0; color:var(--muted); font-size:.72rem;
  padding:9px 0 11px; display:flex; flex-direction:column; align-items:center; gap:3px;
}
.tabbar button span{font-size:1.2rem; line-height:1}
.tabbar button.active{color:var(--accent)}

/* cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin:12px 0}
.card h3{margin:0 0 6px; font-size:1.05rem}
.row{display:flex; gap:10px; align-items:center}
.spread{justify-content:space-between}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.pill{font-size:.68rem; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--surface2); color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.pill.table{background:rgba(62,160,255,.16); color:var(--cat-table)}
.pill.warmup{background:rgba(255,207,92,.16); color:var(--cat-warmup)}
.pill.physical{background:rgba(255,122,69,.16); color:var(--cat-physical)}
.pill.cooldown{background:rgba(57,217,138,.16); color:var(--cat-cooldown)}
.code-chip{font-weight:700; font-size:.78rem; background:var(--surface2);
  border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:2px 7px}

/* filters */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 4px}
.filters button{background:var(--surface); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:6px 14px; font-size:.85rem}
.filters button.active{background:var(--accent); border-color:var(--accent); color:#1a1205; font-weight:600}

/* drill list item */
.drill{display:flex; align-items:center; gap:12px; cursor:pointer}
.drill .bar{width:4px; align-self:stretch; border-radius:4px; background:var(--cat-table)}
.drill.warmup .bar{background:var(--cat-warmup)} .drill.physical .bar{background:var(--cat-physical)}
.drill.cooldown .bar{background:var(--cat-cooldown)}
.drill .meta{flex:1; min-width:0}
.drill .meta .nm{font-weight:600}
.lvl-dot{font-size:.7rem; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.lvl-dot.Foundation{color:var(--cat-warmup); border-color:var(--cat-warmup)}
.lvl-dot.Competitor{color:var(--cat-table); border-color:var(--cat-table)}
.lvl-dot.Advanced{color:var(--good); border-color:var(--good)}

/* drill detail */
.section{margin:14px 0}
.section .lab{font-size:.72rem; letter-spacing:.08em; color:var(--accent); font-weight:700; text-transform:uppercase}
.section p{margin:4px 0 0}
.levels .lv{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:7px 0}
.levels .lv.cur{border-color:var(--accent); background:rgba(255,122,69,.08)}
.levels .lv .h{font-weight:700; font-size:.85rem; display:flex; justify-content:space-between}
a.btn,button.btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent);
  color:#1a1205; font-weight:700; text-decoration:none; border:0; border-radius:10px;
  padding:12px 16px; width:100%; justify-content:center; margin-top:6px; font-size:1rem}
button.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line); font-weight:600}
.back{background:none;border:0;color:var(--accent);font-size:.95rem;padding:8px 0;margin-bottom:2px}

/* forms */
label.fld{display:block; margin:12px 0 0; font-size:.85rem; color:var(--muted)}
select,textarea,input[type=number],input[type=date],input[type=text],input:not([type]){
  width:100%; margin-top:5px; background:var(--surface2); border:1px solid var(--line);
  color:var(--ink); border-radius:10px; padding:12px; font-size:1rem; font-family:inherit}
textarea{resize:vertical}

/* reference video embeds */
.video{position:relative; width:100%; aspect-ratio:16/9; margin:10px 0 2px;
  border-radius:10px; overflow:hidden; background:#000}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.result{margin-top:14px; padding:12px; border-radius:10px; text-align:center; font-weight:700}
.result.met{background:rgba(57,217,138,.15); color:var(--good)}
.result.miss{background:rgba(255,107,107,.15); color:var(--bad)}

/* session checklist */
.sess .task{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line)}
.sess .task:last-child{border-bottom:0}
.sess .task.fixed{opacity:.92}
.sess .task.fixed .codelink{color:var(--cat-warmup)}
.sess .task input{width:22px;height:22px;margin-top:1px;accent-color:var(--accent)}
.codelink{color:var(--accent2); font-weight:600; text-decoration:underline; cursor:pointer}

/* progress bars */
.prog{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
.prog:last-child{border-bottom:0}
.prog .track{flex:1; height:8px; background:var(--surface2); border-radius:6px; overflow:hidden}
.prog .fill{height:100%; background:var(--accent); border-radius:6px}
.prog .fill.met{background:var(--good)}
.empty{color:var(--muted); text-align:center; padding:30px 10px}

/* daily notes history */
.note-item{padding:12px 0; border-bottom:1px solid var(--line)}
.note-item:last-child{border-bottom:0}
button.mini{background:var(--surface2); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:5px 12px; font-size:.8rem; font-weight:600}
button.mini.danger{color:var(--bad); border-color:rgba(255,107,107,.4)}