:root {
  --bg:#eef2f7; --bg2:#e2e8f2;
  --card:#ffffff; --ink:#0f1b2d; --muted:#64748b; --faint:#94a3b8;
  --accent:#0d9488; --accent2:#0f766e; --accent-ink:#ffffff;
  --line:#e6ebf2; --ok:#16a34a; --warn:#d97706; --danger:#dc2626;
  --shadow:0 1px 2px rgba(15,27,45,.06), 0 8px 24px rgba(15,27,45,.07);
  --shadow-sm:0 1px 2px rgba(15,27,45,.08);
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#070d17; --bg2:#0b1424;
    --card:#111b2e; --ink:#eaf1fb; --muted:#93a4bd; --faint:#5b6c85;
    --accent:#14b8a6; --accent2:#0d9488;
    --line:#1d2a41; --ok:#22c55e; --warn:#f59e0b;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.4);
    --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  }
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
body{
  margin:0; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg) 30%);
  min-height:100vh;
}

/* Header */
.topbar{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:var(--accent-ink); padding:16px 18px calc(16px + env(safe-area-inset-top,0));
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent);
}
.topbar .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; font-size:17px }
.topbar .brand .dot{ width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.22);
  display:grid; place-items:center; font-size:15px }
.topbar .sub{ opacity:.85; font-size:12.5px; margin-top:2px }

.wrap{ padding:14px 14px calc(96px + env(safe-area-inset-bottom,0)); max-width:680px; margin:0 auto }
.wrap.center{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding-bottom:14px }

h2{ margin:2px 0 12px; font-size:22px } h3{ margin:6px 2px 10px; font-size:16px; color:var(--muted); font-weight:700; letter-spacing:.2px }

/* Cards */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; margin:12px 0; box-shadow:var(--shadow);
}
.card.login{ padding:22px }
.card.login h2{ display:flex; align-items:center; gap:10px }
.card.login .logo{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:grid; place-items:center; color:#fff; font-size:18px }
.row{ display:flex; justify-content:space-between; align-items:center; gap:12px }

/* Session rows */
.session{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:9px 12px 9px 14px; border:1px solid var(--line); border-radius:12px;
  margin:6px 0; background:var(--card); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:transform .08s ease, box-shadow .12s ease;
}
.session::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--warn) }
.session.done::before{ background:var(--ok) }
.session:active{ transform:scale(.99); box-shadow:none }
.session .title{ font-weight:700; font-size:14px }
.session small{ color:var(--faint); font-size:12px }

/* Non-lesson / empty slot rows */
.slotrow{ display:flex; align-items:center; gap:10px; padding:5px 12px; margin:3px 0;
  border-radius:9px; border:1px dashed var(--line); background:transparent }
.slotrow .ic{ font-size:14px; width:20px; text-align:center; opacity:.8 }
.slotrow .title{ font-weight:500; font-size:12.5px }
.slotrow small{ color:var(--faint); font-size:11px }
.slotrow.act{ background:color-mix(in srgb,var(--accent) 4%,transparent); border-style:solid;
  border-color:color-mix(in srgb,var(--accent) 9%,transparent) }
.slotrow.act .title{ color:var(--muted); font-weight:600 }
.slotrow.empty{ justify-content:space-between; opacity:.5; border-color:transparent; padding:4px 12px }

/* Chips */
.chip{ font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px;
  background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); white-space:nowrap }
.chip.ok{ background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok) }
.chip.plain{ background:var(--line); color:var(--muted) }
.chip.wait{ background:color-mix(in srgb,#2563eb 16%,transparent); color:#2563eb }
.session.pending::before{ background:#2563eb }

/* Achievements */
.ach .achtop{ display:flex; align-items:center; gap:16px; margin:12px 0 }
.ring{ width:84px; height:84px; border-radius:50%; flex:none; display:grid; place-items:center }
.ringin{ width:64px; height:64px; border-radius:50%; background:var(--card); display:grid; place-items:center; text-align:center; line-height:1.1 }
.ringin b{ font-size:19px } .ringin small{ font-size:10px; color:var(--muted); display:block }
.achstat{ flex:1 } .streak{ font-size:15px; margin-bottom:4px } .streak b{ font-weight:800 }
.hmgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin:8px 0 }
.hm{ aspect-ratio:1; border-radius:7px; display:grid; place-items:center; font-size:11px; font-weight:700;
  color:var(--faint); background:var(--line) }
.hm.pad{ background:transparent } .hm.none,.hm.future{ background:var(--line); color:transparent }
.hm.empty{ background:color-mix(in srgb,var(--warn) 8%,transparent); color:var(--faint) }
.hm.partial{ background:color-mix(in srgb,var(--warn) 42%,transparent); color:#7c4a03 }
.hm.complete{ background:var(--ok); color:#fff }
.hmlegend{ display:flex; gap:14px; font-size:11px; color:var(--muted); margin-bottom:10px }
.hmlegend i.sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:4px; vertical-align:-1px }
.sw.complete{ background:var(--ok) } .sw.partial{ background:color-mix(in srgb,var(--warn) 42%,transparent) } .sw.none{ background:var(--line) }
.badges{ display:flex; flex-wrap:wrap; gap:8px }
.badge{ display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px dashed var(--line); color:var(--faint); background:transparent }
.badge.on{ border-style:solid; border-color:transparent; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent2) }
.badge .bi{ font-size:14px; filter:grayscale(1); opacity:.5 }
.badge.on .bi{ filter:none; opacity:1 }

/* Buttons */
.btn{
  display:block; width:100%; padding:14px; border:none; border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  font-size:16px; font-weight:700; letter-spacing:.2px; cursor:pointer;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:transform .08s ease, box-shadow .12s ease, opacity .12s;
}
.btn:active{ transform:translateY(1px) scale(.995); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent) }
.btn.sec{ background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-sm) }

/* Inputs */
label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin:14px 0 6px }
input,textarea,select{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--ink); font-size:16px; outline:none;
  transition:border-color .12s, box-shadow .12s;
}
input:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent) }

/* Attendance — compact one-line-per-student list */
.attsum{ position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:9px 4px; margin:8px 0 4px; font-size:12.5px; font-weight:700; color:var(--muted);
  background:linear-gradient(var(--bg),var(--bg) 70%, transparent) }
.mini{ padding:7px 12px; border:1px solid var(--line); border-radius:9px; background:var(--card);
  color:var(--accent2); font-size:12px; font-weight:700; cursor:pointer }
.stulist{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); box-shadow:var(--shadow-sm) }
.sturow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px 6px 12px; border-top:1px solid var(--line) }
.sturow:first-child{ border-top:none }
.sturow .nm{ font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.seg{ display:flex; gap:4px; flex:none }
.seg button{ width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--faint); font-size:12.5px; font-weight:800; cursor:pointer; transition:all .08s }
.seg button.on{ color:#fff; border-color:transparent }
.seg button.on[data-k="H"]{ background:var(--ok) }
.seg button.on[data-k="I"]{ background:#2563eb }
.seg button.on[data-k="S"]{ background:var(--warn) }
.seg button.on[data-k="A"]{ background:var(--danger) }

/* Sticky save bar (record screen) */
.savebar{ position:sticky; bottom:calc(84px + env(safe-area-inset-bottom,0)); z-index:6; margin-top:14px;
  padding:8px 0; background:linear-gradient(transparent, var(--bg) 40%) }

/* Status segmented control */
#st{ display:flex; gap:8px; margin:6px 0 4px }
#st button{ flex:1; padding:11px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--muted); font-weight:700; font-size:14px; cursor:pointer }
#st button.on{ background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent;
  box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 30%,transparent) }

/* Tab bar */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:10; display:flex;
  background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0));
  box-shadow:0 -6px 20px rgba(15,27,45,.06);
}
.tabbar button{ flex:1; padding:9px 4px; margin:0 3px; border:none; border-radius:12px;
  background:none; color:var(--faint); font-size:11.5px; font-weight:700; cursor:pointer; transition:all .12s }
.tabbar button .ic{ display:block; font-size:19px; line-height:1; margin-bottom:3px }
.tabbar button.active{ color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent) }

.err{ color:var(--danger); font-size:14px; font-weight:600; margin:10px 0 }
.muted{ color:var(--muted); font-size:13px }
.spacer{ height:12px }