/* Codelab School OS — design tokens (omborx-inspired) */
:root{
  --bg:#F6F7FB; --bg-alt:#EEF0F7; --surface:#FFFFFF; --surface-2:#F8F9FC;
  --ink:#0F1222; --ink-2:#394058; --muted:#667089; --line:#E3E6EF; --line-2:#D5D9E5;
  --brand:#6246EA; --brand-hover:#5236D6; --brand-ink:#4F35CF; --brand-soft:#EFEBFF;
  --ok:#12925E; --ok-soft:#E3F6EE; --warn:#C27A06; --warn-soft:#FDF3E1;
  --rose:#D6336C; --rose-soft:#FCE8EF; --cyan:#0891B2; --cyan-soft:#E3F6FA;
  --grey-soft:#EEF0F5;
  --grad:linear-gradient(120deg,#6246EA 0%,#8B5CF6 55%,#06B6D4 100%);
  --glow:radial-gradient(900px 520px at 85% 0%,rgba(98,70,234,.10),transparent 65%),radial-gradient(700px 480px at 0% 10%,rgba(6,182,212,.08),transparent 60%);
  --shadow-sm:0 1px 2px rgba(15,18,34,.05),0 1px 1px rgba(15,18,34,.03);
  --shadow:0 12px 32px -12px rgba(15,18,34,.14),0 2px 6px rgba(15,18,34,.04);
  --shadow-lg:0 40px 80px -30px rgba(40,30,110,.30),0 8px 24px -8px rgba(15,18,34,.10);
  --r:18px; --r-sm:12px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-d:'Manrope','Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.32,.72,.33,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0C15; --bg-alt:#0F1220; --surface:#141827; --surface-2:#191E30;
  --ink:#EEF0F8; --ink-2:#C4C9D8; --muted:#8F96AC; --line:#252A3E; --line-2:#323851;
  --brand:#7C66FF; --brand-hover:#8F7CFF; --brand-ink:#AE9FFF; --brand-soft:rgba(124,102,255,.14);
  --ok:#34C98A; --ok-soft:rgba(52,201,138,.12); --warn:#F2B141; --warn-soft:rgba(242,177,65,.12);
  --rose:#F2688F; --rose-soft:rgba(242,104,143,.12); --cyan:#38BDD8; --cyan-soft:rgba(56,189,216,.12);
  --grey-soft:#1E2336;
  --glow:radial-gradient(900px 520px at 85% 0%,rgba(124,102,255,.16),transparent 65%),radial-gradient(700px 480px at 0% 10%,rgba(56,189,216,.08),transparent 60%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 12px 32px -12px rgba(0,0,0,.6); --shadow-lg:0 40px 80px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0A0C15; --bg-alt:#0F1220; --surface:#141827; --surface-2:#191E30;
  --ink:#EEF0F8; --ink-2:#C4C9D8; --muted:#8F96AC; --line:#252A3E; --line-2:#323851;
  --brand:#7C66FF; --brand-hover:#8F7CFF; --brand-ink:#AE9FFF; --brand-soft:rgba(124,102,255,.14);
  --ok:#34C98A; --ok-soft:rgba(52,201,138,.12); --warn:#F2B141; --warn-soft:rgba(242,177,65,.12);
  --rose:#F2688F; --rose-soft:rgba(242,104,143,.12); --cyan:#38BDD8; --cyan-soft:rgba(56,189,216,.12);
  --grey-soft:#1E2336;
  --glow:radial-gradient(900px 520px at 85% 0%,rgba(124,102,255,.16),transparent 65%),radial-gradient(700px 480px at 0% 10%,rgba(56,189,216,.08),transparent 60%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 12px 32px -12px rgba(0,0,0,.6); --shadow-lg:0 40px 80px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);background-image:var(--glow);background-attachment:fixed;color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4{font-family:var(--font-d);margin:0;letter-spacing:-.02em;line-height:1.2}
h1{font-size:28px;font-weight:800}
h2{font-size:20px;font-weight:700}
h3{font-size:16px;font-weight:700}
p{margin:0}
a{color:var(--brand-ink);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.strong{font-weight:600}
.row{display:flex;align-items:center;gap:12px}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.stack{display:flex;flex-direction:column;gap:16px}
.stack.tight{gap:8px}
.grid{display:grid;gap:16px}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 20px -8px rgba(98,70,234,.6)}
.btn.primary:hover{background:var(--brand-hover);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.danger{color:var(--rose)}
.btn.danger:hover{border-color:var(--rose);background:var(--rose-soft)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:10px}
.btn.lg{height:56px;padding:0 24px;font-size:17px;border-radius:16px}
.btn.block{width:100%}
.btn.icon{width:40px;padding:0}
.btn.sm.icon{width:32px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:20px}
.card.flat{box-shadow:none}
.card.pad-0{padding:0}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card-h h3{flex:1}
.card.link{cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.card.link:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.kpi .lbl{color:var(--muted);font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px}
.kpi .val{font-family:var(--font-d);font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:2px}
.kpi .dot{width:8px;height:8px;border-radius:50%}
.kpi.accent{background:var(--grad);color:#fff;border-color:transparent}
.kpi.accent .lbl,.kpi.accent .sub{color:rgba(255,255,255,.8)}

/* ---------- Status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--grey-soft);color:var(--ink-2)}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.rose{background:var(--rose-soft);color:var(--rose)}
.pill.brand{background:var(--brand-soft);color:var(--brand-ink)}
.pill.cyan{background:var(--cyan-soft);color:var(--cyan)}
.pill.live .d{animation:blink 1.4s ease-in-out infinite;box-shadow:0 0 0 0 currentColor}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background .15s}
table.t tbody tr.click{cursor:pointer}
table.t tbody tr.click:hover{background:var(--surface-2)}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.input,select.input,textarea.input{height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
textarea.input{height:auto;min-height:84px;padding:12px 14px;resize:vertical}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.input.search{padding-left:40px}
.search-box{position:relative}
.search-box svg{position:absolute;left:12px;top:11px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer}
.check:hover{background:var(--surface-2)}
.check input{width:18px;height:18px;accent-color:var(--brand)}

/* Tabs / segmented */
.seg{display:inline-flex;background:var(--bg-alt);border-radius:12px;padding:4px;gap:2px}
.seg button{border:0;background:transparent;height:32px;padding:0 14px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.seg button .c{margin-left:6px;opacity:.7}

/* Avatars */
.av{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex:none;font-family:var(--font-d)}
.av.sm{width:28px;height:28px;font-size:11px}
.av.lg{width:52px;height:52px;font-size:18px}
.emoji-badge{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex:none}

/* Progress bar */
.bar{height:8px;background:var(--bg-alt);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--brand);width:0;transition:width .9s var(--ease)}
.bar.ok>i{background:var(--ok)}.bar.warn>i{background:var(--warn)}.bar.rose>i{background:var(--rose)}

/* Empty state */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .ill{width:64px;height:64px;border-radius:20px;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;margin:0 auto 14px}
.empty .ill svg{width:30px;height:30px}
.empty h3{color:var(--ink);margin-bottom:4px}

/* Skeleton */
.sk{background:linear-gradient(90deg,var(--bg-alt) 25%,var(--surface-2) 50%,var(--bg-alt) 75%);background-size:200% 100%;animation:sk 1.4s linear infinite;border-radius:10px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- Motion: reveal on appear (staggered) ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i,0) * 55ms)}
.rv.in{opacity:1;transform:none}
.page-in{animation:pageIn .32s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .page-in,.pill.live .d,.sk{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- Overlay: modal / drawer / sheet ---------- */
.ov{position:fixed;inset:0;background:rgba(10,12,21,.45);backdrop-filter:blur(3px);z-index:50;display:flex;opacity:0;transition:opacity .2s}
.ov.in{opacity:1}
.modal{margin:auto;width:min(560px,calc(100% - 32px));max-height:calc(100vh - 48px);overflow:auto;background:var(--surface);border-radius:22px;box-shadow:var(--shadow-lg);transform:translateY(16px) scale(.98);transition:transform .3s var(--ease)}
.ov.in .modal{transform:none}
.modal.wide{width:min(760px,calc(100% - 32px))}
.m-h{display:flex;align-items:center;gap:12px;padding:20px 24px 0}
.m-h h2{flex:1}
.m-b{padding:20px 24px}
.m-f{display:flex;gap:10px;justify-content:flex-end;padding:0 24px 22px}
.drawer{margin-left:auto;height:100%;width:min(520px,100%);background:var(--surface);box-shadow:var(--shadow-lg);overflow:auto;transform:translateX(40px);transition:transform .32s var(--ease)}
.ov.in .drawer{transform:none}
.sheet{margin-top:auto;width:100%;max-height:92vh;overflow:auto;background:var(--surface);border-radius:24px 24px 0 0;padding:8px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .34s var(--ease)}
.ov.in .sheet{transform:none}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--line-2);margin:4px auto 14px}

/* Toast */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);display:flex;gap:8px;align-items:center;animation:toastIn .3s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}}

/* ================= DESKTOP SHELL (admin / curator) ================= */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:20px 14px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 22px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--font-d);box-shadow:0 8px 18px -6px rgba(98,70,234,.6)}
.brand b{font-family:var(--font-d);font-size:15px;display:block;line-height:1.1}
.brand span{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:12px;color:var(--ink-2);font-weight:500;font-size:14px;transition:background .15s,color .15s}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a:hover svg{animation:swing .5s ease-in-out}
@keyframes swing{0%,100%{transform:rotate(0)}25%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}}
.nav a.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.nav a .cnt{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--rose);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.nav .sep{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:16px 12px 6px}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}
.me{display:flex;align-items:center;gap:10px;padding:8px}
.me b{font-size:14px;display:block;line-height:1.2}
.me div span{font-size:12px;color:var(--muted)}
.main{min-width:0;padding:28px 36px 60px}
.top{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.top .t{flex:1;min-width:200px}
.top .eyebrow{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:4px}
.mob-top{display:none}

.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:20px;align-items:start}
.attn-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;cursor:pointer;transition:background .15s}
.attn-item:hover{background:var(--surface-2)}
.attn-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}
.attn-ic.rose{background:var(--rose-soft);color:var(--rose)}
.attn-ic.warn{background:var(--warn-soft);color:var(--warn)}
.attn-ic.brand{background:var(--brand-soft);color:var(--brand-ink)}
.attn-count{min-width:26px;height:26px;border-radius:99px;background:var(--rose);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 8px}

.circle-card .emoji-badge{width:48px;height:48px;font-size:24px;border-radius:14px}
.stat-mini{display:flex;gap:18px;margin-top:14px}
.stat-mini div b{display:block;font-family:var(--font-d);font-size:18px}
.stat-mini div span{font-size:12px;color:var(--muted)}

.chart{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:10px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0}
.chart .col i{display:block;width:100%;max-width:26px;border-radius:6px 6px 3px 3px;background:var(--brand);height:0;transition:height .9s var(--ease)}
.chart .col i.low{background:var(--warn)}
.chart .col span{font-size:10px;color:var(--muted);white-space:nowrap}
.chart .col:hover i{filter:brightness(1.15)}

.dots{display:flex;gap:4px;flex-wrap:wrap}
.dots i{width:12px;height:12px;border-radius:4px;background:var(--line)}
.dots i.p{background:var(--ok)}.dots i.a{background:var(--rose)}.dots i.l{background:var(--warn)}.dots i.e{background:var(--cyan)}

.kv{display:grid;grid-template-columns:130px 1fr;gap:8px 16px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block;cursor:zoom-in}
.comment{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}

@media (max-width:1100px){.cols{grid-template-columns:1fr}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:40;width:270px;transform:translateX(-100%);transition:transform .3s var(--ease);background:var(--surface)}
  .side.open{transform:none;box-shadow:var(--shadow-lg)}
  .main{padding:16px 16px 60px}
  .mob-top{display:flex;align-items:center;gap:10px;margin:-4px 0 16px}
  .form-grid{grid-template-columns:1fr}
  h1{font-size:24px}
  .kv{grid-template-columns:110px 1fr}
}

/* ================= MOBILE APP (teacher) ================= */
.app{max-width:560px;margin:0 auto;min-height:100vh;padding:0 16px calc(96px + env(safe-area-inset-bottom))}
.app-top{display:flex;align-items:center;gap:12px;padding:18px 0 14px;position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg) 70%,transparent)}
.app-top h1{font-size:24px;flex:1}
.app-top .back{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.tabbar nav{display:flex;width:100%;max-width:560px}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11px;font-weight:600;color:var(--muted);border-radius:12px;position:relative}
.tabbar a svg{width:24px;height:24px}
.tabbar a.on{color:var(--brand-ink)}
.tabbar a .cnt{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--rose);color:#fff;font-size:10px;display:grid;place-items:center;padding:0 5px}

.now-card{background:var(--grad);color:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.now-card:after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.1)}
.now-card .time{font-family:var(--font-d);font-size:15px;font-weight:700;opacity:.9}
.now-card .name{font-family:var(--font-d);font-size:26px;font-weight:800;margin:6px 0 2px;letter-spacing:-.02em}
.now-card .meta{opacity:.85;font-size:14px}
.now-card .btn{background:#fff;color:#3b2aa6;border:0;margin-top:18px;height:54px;font-size:16px;width:100%;border-radius:16px;box-shadow:0 10px 24px -10px rgba(0,0,0,.4)}
.now-card .pill{background:rgba(255,255,255,.2);color:#fff}

.s-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:transform .15s,box-shadow .2s}
.s-item:active{transform:scale(.985)}
.s-item .tm{font-family:var(--font-d);font-weight:700;font-size:15px;min-width:48px}
.s-item .tm small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.s-item .bd{flex:1;min-width:0}
.s-item .bd b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mini-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mini-kpis .kpi{padding:14px 16px;border-radius:16px}
.mini-kpis .kpi .val{font-size:24px;margin-top:2px}

/* Session screen */
.sess-head{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 18px}
.att-summary{display:flex;align-items:center;gap:12px;margin:18px 0 10px}
.att-summary .big{font-family:var(--font-d);font-size:22px;font-weight:800}
.att-list{display:flex;flex-direction:column;gap:8px}
.att{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px 10px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s,transform .12s}
.att:active{transform:scale(.985)}
.att .nm{flex:1;font-weight:600;font-size:15px;line-height:1.25}
.att .nm small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.att .st{height:34px;min-width:96px;padding:0 12px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:700;transition:background .2s,color .2s}
.att[data-s="present"] .st{background:var(--ok-soft);color:var(--ok)}
.att[data-s="absent"]{border-color:var(--rose);background:color-mix(in srgb,var(--rose-soft) 50%,var(--surface))}
.att[data-s="absent"] .st{background:var(--rose);color:#fff}
.att[data-s="late"]{border-color:var(--warn)}
.att[data-s="late"] .st{background:var(--warn);color:#fff}
.att[data-s="excused"]{border-color:var(--cyan)}
.att[data-s="excused"] .st{background:var(--cyan);color:#fff}
.att .more{width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.sec-title{font-family:var(--font-d);font-weight:800;font-size:17px;margin:28px 0 10px;display:flex;align-items:center;gap:8px}
.sec-title .opt{font-family:var(--font);font-size:12px;font-weight:600;color:var(--muted);background:var(--bg-alt);padding:2px 8px;border-radius:99px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:40px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface);font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;-webkit-tap-highlight-color:transparent}
.chip.on{border-color:var(--rose);background:var(--rose-soft);color:var(--rose)}
.chip-group{margin-bottom:12px}
.chip-group .g{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.photo-add{display:flex;gap:8px;flex-wrap:wrap}
.photo-add label,.photo-add .ph{width:84px;height:84px;border-radius:14px;flex:none}
.photo-add label{border:1.5px dashed var(--line-2);display:grid;place-items:center;color:var(--muted);cursor:pointer;background:var(--surface)}
.photo-add .ph{position:relative}
.photo-add .ph img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.photo-add .ph button{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);cursor:pointer;display:grid;place-items:center}
.photo-add .ph button svg{width:14px;height:14px}
.finish-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%)}
.finish-bar .btn{max-width:528px;margin:0 auto;display:flex;width:100%;height:60px;font-size:17px;border-radius:18px}
.done-screen{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
.done-check{width:96px;height:96px;border-radius:50%;background:var(--ok);display:grid;place-items:center;color:#fff;animation:pop .5s var(--ease);box-shadow:0 20px 40px -12px rgba(18,146,94,.6)}
.done-check svg{width:48px;height:48px;stroke-width:2.6;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .25s ease forwards}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
.opt-list{display:flex;flex-direction:column;gap:8px}
.opt-list button{height:54px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:16px;display:flex;align-items:center;gap:12px;padding:0 16px;cursor:pointer}
.opt-list button i{width:12px;height:12px;border-radius:50%}

/* ================= LOGIN ================= */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-art{background:var(--grad);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-art:before,.login-art:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.login-art:before{width:520px;height:520px;right:-180px;top:-160px}
.login-art:after{width:340px;height:340px;left:-120px;bottom:-140px}
.login-art h1{font-size:44px;line-height:1.08;max-width:520px;position:relative;z-index:1}
.login-art p{opacity:.85;font-size:17px;max-width:460px;margin-top:16px;position:relative;z-index:1}
.flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;position:relative;z-index:1}
.flow span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:99px;font-size:13px;font-weight:600;backdrop-filter:blur(4px)}
.login-form{display:flex;align-items:center;justify-content:center;padding:32px 20px}
.login-box{width:min(400px,100%)}
.demo-accts{display:flex;flex-direction:column;gap:8px}
.demo-acct{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;text-align:left;transition:border-color .2s,transform .2s,box-shadow .2s;width:100%}
.demo-acct:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--shadow)}
.demo-acct b{display:block;font-size:14px}
.demo-acct div span{font-size:12px;color:var(--muted)}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:20px 0}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.lang-sw{display:inline-flex;gap:2px;background:var(--bg-alt);border-radius:10px;padding:3px}
.lang-sw button{border:0;background:transparent;height:28px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.lang-sw button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-art{padding:28px 20px}.login-art h1{font-size:30px}.login-art .foot{display:none}}
table.t td .pill{white-space:nowrap}
table.t td:last-child{white-space:nowrap}
.side .btn.block{white-space:normal;height:auto;min-height:32px;padding:6px 10px;text-align:left;line-height:1.3}
@media (max-width:860px){.side:not(.open){visibility:hidden}}