/* ===========================================================================
   Design tokens
   =========================================================================== */
:root{
  --bg:#f8fafc;  --surface:#ffffff;  --surface-2:#f1f5f9;  --surface-3:#e2e8f0;
  --text:#0f172a; --text-dim:#475569; --text-faint:#64748b;
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:120ms; --dur-norm:200ms; --dur-slow:350ms;
  --brand:#2563eb; --brand-strong:#1d4ed8; --brand-bg:#0f172a; --brand-soft:#eff6ff;
  --on-brand:#ffffff; --on-brand-dim:#93c5fd;
  --accent:#f59e0b; --accent-soft:#fef3c7;
  --danger:#ef4444; --danger-soft:#fef2f2;
  --line:#e2e8f0;  --line-soft:#f1f5f9;  --dot-off:#cbd5e1;
  --overlay:rgba(15,23,42,.65);
  --toast-bg:#0f172a; --toast-fg:#f8fafc;
  --ring:rgba(37,99,235,.25);
  --shadow-1:0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03);
  --shadow-2:0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.05), 0 12px 24px -4px rgba(15,23,42,.08);
  --shadow-3:0 20px 40px -8px rgba(15,23,42,.22), 0 1px 3px rgba(15,23,42,.08);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Naskh Arabic",Tahoma,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Naskh Arabic",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --dir-flip:1;
  --tap:44px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#090d16;  --surface:#111827;  --surface-2:#172033;  --surface-3:#1f293d;
    --text:#f1f5f9; --text-dim:#94a3b8; --text-faint:#64748b;
    --brand:#3b82f6; --brand-strong:#60a5fa; --brand-bg:#090d16; --brand-soft:rgba(59,130,246,.12);
    --on-brand:#ffffff; --on-brand-dim:#93c5fd;
    --accent:#fbbf24; --accent-soft:rgba(251,191,36,.12);
    --danger:#f87171; --danger-soft:rgba(248,113,113,.12);
    --line:#1e293b;  --line-soft:#172033;  --dot-off:#334155;
    --overlay:rgba(0,0,0,.75);
    --toast-bg:#1e293b; --toast-fg:#f1f5f9;
    --ring:rgba(59,130,246,.35);
    --shadow-1:0 1px 3px rgba(0,0,0,.5);
    --shadow-2:0 4px 12px rgba(0,0,0,.6), 0 10px 28px rgba(0,0,0,.45);
    --shadow-3:0 24px 60px rgba(0,0,0,.85);
  }
}
html[dir="rtl"]{ --dir-flip:-1; }

/* ===========================================================================
   Base
   =========================================================================== */
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  min-height:100vh; min-height:100dvh;
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.02em; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--brand); color:var(--on-brand); }

/* ===========================================================================
   Top bar
   =========================================================================== */
.topbar{
  background:var(--brand-bg); color:var(--on-brand);
  padding:calc(16px + env(safe-area-inset-top,0px)) 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 20px -2px rgba(0,0,0,.22);
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.topbar-inner{ max-width:920px; margin:0 auto; display:flex; align-items:flex-start; gap:12px; }
.brand{ min-width:0; flex:1; cursor:pointer; user-select:none; }
.brand h1{ font-size:1.55rem; line-height:1.15; font-weight:800; letter-spacing:-.025em; display:inline-block; transition:opacity .15s ease, transform .15s ease; }
.brand:hover h1{ opacity:.88; }
.brand:active h1{ transform:scale(0.98); }
.brand:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.brand p{
  margin:4px 0 0; color:var(--on-brand-dim);
  font-family:var(--sans); font-size:.84rem; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar-actions{ display:flex; gap:6px; flex:none; }
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:inherit;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-sm);
  cursor:pointer; transition:background .15s, border-color .15s;
}
.icon-btn:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.35); }
.icon-btn svg{ width:19px; height:19px; }

main{ max-width:920px; margin:0 auto; padding:22px 20px 0; }

/* ===========================================================================
   Cards, forms, buttons
   =========================================================================== */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:22px; margin-bottom:18px;
  box-shadow:var(--shadow-1);
}
.card > h2{ font-size:1.12rem; margin-block-end:14px; font-weight:700; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-block-end:14px; flex-wrap:wrap; }
.card-head h2{ margin:0; font-size:1.12rem; font-weight:700; }

.muted{ color:var(--text-dim); font-family:var(--sans); font-size:.87rem; line-height:1.55; }
.tiny{ font-family:var(--sans); font-size:.78rem; color:var(--text-faint); }
.err{ color:var(--danger); font-family:var(--sans); font-size:.87rem; margin:10px 0 0; }
.err:empty{ display:none; }
.hint{ color:var(--text-dim); font-family:var(--sans); font-size:.8rem; margin:8px 0 0; }

label{ display:block; font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--text-dim); margin-block-end:5px; }
.field{ margin-block-end:14px; }
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],select{
  width:100%; padding:10px 13px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-2);
  font-family:var(--sans); font-size:.95rem;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }
input::placeholder{ color:var(--text-faint); }
/* Names may be Arabic or Latin — let the field follow what is being typed. */
input[data-autodir],.autodir{ text-align:start; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:.88rem; font-weight:600;
  border:1px solid transparent; border-radius:var(--r-sm);
  padding:10px 18px; min-height:var(--tap); cursor:pointer;
  background:linear-gradient(135deg, var(--brand), var(--brand-strong)); color:var(--on-brand);
  box-shadow:0 2px 8px color-mix(in srgb, var(--brand) 28%, transparent);
  transition:background .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s;
  white-space:nowrap;
}
.btn:hover{ box-shadow:0 4px 16px color-mix(in srgb, var(--brand) 40%, transparent); transform:translateY(-1px); filter:brightness(1.05); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn svg{ width:16px; height:16px; flex:none; }
.btn.ghost{ background:var(--surface); color:var(--text); border-color:var(--line); box-shadow:var(--shadow-1); }
.btn.ghost:hover{ background:var(--surface-2); border-color:var(--brand); color:var(--brand); }
.btn.danger{ background:transparent; color:var(--danger); border-color:var(--line); }
.btn.danger:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn.danger-solid{ background:var(--danger); color:#fff; }
.btn.danger-solid:hover{ filter:brightness(1.1); background:var(--danger); }
.btn.quiet{ background:transparent; color:var(--brand); border-color:transparent; padding:6px 8px; min-height:34px; box-shadow:none; }
.btn.quiet:hover{ background:var(--surface-3); }
.btn.sm{ padding:7px 12px; min-height:36px; font-size:.82rem; }
.btn.block{ width:100%; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-row.end{ justify-content:flex-end; }
.form-row{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.form-row > .grow{ flex:1 1 200px; min-width:0; }
.form-row > .btn{ flex:none; }

/* ===========================================================================
   Notices
   =========================================================================== */
.notice{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-3); padding:14px 16px; margin-bottom:18px;
  font-family:var(--sans); font-size:.87rem; color:var(--text-dim);
}
.notice svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.notice.warn{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.notice.bad{ background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }
.notice strong{ display:block; color:var(--text); margin-block-end:3px; font-size:.9rem; }
.notice .btn{ margin-block-start:10px; }

/* ===========================================================================
   Auth + config
   =========================================================================== */
.narrow{ max-width:430px; margin:0 auto; }
.seg{ display:flex; gap:4px; padding:4px; background:var(--surface-3); border-radius:var(--r-sm); margin-block-end:18px; }
.seg button{
  flex:1; padding:9px 10px; min-height:38px; border:none; border-radius:4px;
  background:transparent; color:var(--text-dim);
  font-family:var(--sans); font-size:.86rem; font-weight:600; cursor:pointer;
  transition:background .15s, color .15s;
}
.seg button[aria-pressed="true"]{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-1); }
.auth-divider{ display:flex; align-items:center; text-align:center; margin:14px 0; color:var(--text-faint); font-family:var(--sans); font-size:.8rem; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; border-bottom:1px solid var(--line-soft); }
.auth-divider span{ padding:0 12px; }
.google-btn{ display:inline-flex !important; align-items:center; justify-content:center; gap:10px; width:100%; font-weight:600; }
.google-btn svg{ flex:none; }

/* ===========================================================================
   Class list
   =========================================================================== */
.list{ display:flex; flex-direction:column; }
.list-row{
  display:flex; align-items:center; gap:12px;
  padding:13px 2px; border-bottom:1px solid var(--line-soft);
}
.list-row:last-child{ border-bottom:none; }
.list-main{ flex:1; min-width:0; }
.list-main .name{ font-size:1.05rem; font-weight:600; }
.list-main .meta{ font-family:var(--sans); font-size:.78rem; color:var(--text-faint); margin-top:2px; }
.list-actions{ display:flex; gap:6px; flex:none; }
.empty{
  text-align:center; padding:30px 16px; color:var(--text-dim);
  font-family:var(--sans); font-size:.9rem;
}
.empty svg{ width:34px; height:34px; opacity:.35; margin-block-end:10px; }

/* ===========================================================================
   Roster
   =========================================================================== */
.crumb{ display:inline-flex; align-items:center; gap:6px; margin-block-end:14px; }
.crumb svg{ width:15px; height:15px; transform:scaleX(var(--dir-flip)); }
.crumb button{
  background:none; border:none; padding:6px 2px; background:none;
  color:var(--brand); font-family:var(--sans); font-size:.87rem; font-weight:600;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.crumb button:hover{ color:var(--brand-strong); }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-block-end:18px; }
.stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px 14px; box-shadow:var(--shadow-1);
}
.stat.clickable{
  cursor:pointer; user-select:none;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.stat.clickable:hover{
  border-color:var(--brand); transform:translateY(-1px); box-shadow:var(--shadow-2);
}
.stat.clickable:active{
  transform:translateY(0);
}
.stat .n{ font-size:1.55rem; font-weight:700; color:var(--brand); line-height:1.1; }
.stat .k{ font-family:var(--sans); font-size:.74rem; color:var(--text-dim); margin-top:3px; line-height:1.3; }

.toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-block-end:14px; }
.search{ position:relative; flex:1 1 200px; min-width:0; }
.search svg{ position:absolute; inset-inline-start:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-faint); pointer-events:none; }
.search input{ padding-inline-start:34px; }
.spacer{ flex:1; }

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px; }
table{ width:100%; border-collapse:collapse; }
th{
  text-align:start; font-family:var(--sans); font-size:.73rem; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.5px; padding:9px 10px;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
td{ padding:11px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background .12s; }
tbody tr:hover{ background:var(--surface-2); }
th.center,td.center{ text-align:center; }
.name-link{
  background:none; border:none; padding:4px 0; min-height:34px;
  color:var(--brand); font-family:inherit; font-size:1rem; font-weight:600;
  text-align:start; cursor:pointer; text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--brand) 35%, transparent);
  text-underline-offset:3px; text-decoration-thickness:1.5px;
}
.name-link:hover{ color:var(--brand-strong); text-decoration-color:currentColor; }
.dots{ display:flex; gap:3px; justify-content:center; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--dot-off); flex:none; }
.dot.on{ background:var(--brand); }
.dots-btn{
  background:none; border:none; padding:4px 6px; border-radius:var(--r-sm);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; transition:background .15s, transform .1s;
}
.dots-btn:hover{
  background:var(--surface-3);
  transform:scale(1.05);
}
.dots-btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.sessions-list{
  display:flex; flex-direction:column; gap:8px; margin-block-start:12px;
  max-height:55vh; max-height:55dvh; overflow-y:auto; padding-inline-end:2px;
}
.session-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:var(--r-md); background:var(--surface-3);
  border:1px solid var(--line-soft); transition:background .15s, border-color .15s;
}
.session-item:hover{
  background:var(--surface-2); border-color:var(--line);
}
.session-item.is-attended{
  border-inline-start:3px solid var(--brand);
}
.session-meta{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.session-title{
  font-weight:700; font-size:.95rem; color:var(--text);
}
.session-time{
  font-size:.78rem; font-family:var(--sans); color:var(--text-dim);
}
.session-status{
  display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:600;
}
.session-status.attended{
  color:#047857;
}
html[data-theme="dark"] .session-status.attended{
  color:#34d399;
}
.session-status.absent{
  color:var(--text-faint);
}
.session-toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.fraction{ display:none; font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--text-dim); }
.chk{ width:26px; height:26px; cursor:pointer; accent-color:var(--brand); }
.chk.paid{ accent-color:var(--accent); }
/* Payment status cell and badges */
.pay-cell{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; user-select:none;
  padding:3px 6px; border-radius:var(--r-sm);
  transition:background .15s;
}
.pay-cell:hover:not(.disabled){ background:var(--surface-3); }
.pay-cell.disabled{ cursor:not-allowed; opacity:.65; }
.chk-paid{
  width:22px; height:22px; cursor:pointer;
  accent-color:#10b981;
}
.pay-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.76rem; font-weight:700;
  padding:3px 10px; border-radius:999px;
  line-height:1.2; text-transform:none;
  transition:all .15s ease;
}
.pay-badge.paid{
  background:rgba(16,185,129,.14); color:#047857;
  border:1px solid rgba(16,185,129,.35);
}
html[data-theme="dark"] .pay-badge.paid{
  background:rgba(16,185,129,.22); color:#34d399;
  border-color:rgba(16,185,129,.45);
}
.pay-badge.unpaid{
  background:rgba(239,68,68,.12); color:#b91c1c;
  border:1px solid rgba(239,68,68,.3);
}
html[data-theme="dark"] .pay-badge.unpaid{
  background:rgba(239,68,68,.2); color:#f87171;
  border-color:rgba(239,68,68,.4);
}
.chk:disabled{ opacity:.55; cursor:progress; }

/* ===========================================================================
   Dialogs
   =========================================================================== */
dialog{
  border:none; padding:0; background:var(--surface); color:var(--text);
  border-radius:var(--r-lg); box-shadow:var(--shadow-3);
  width:min(440px, calc(100vw - 24px)); max-height:min(86vh, 800px);
  max-height:min(86dvh, 800px); overflow:visible;
}
dialog.dlg-wide{
  width:min(640px, calc(100vw - 24px));
}
dialog::backdrop{ background:var(--overlay); backdrop-filter:blur(2px); }
dialog[open]{ animation:pop .18s ease-out; }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }

/* Month history view in sheet */
.month-tabs{
  display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px;
  margin-block-end:14px; -webkit-overflow-scrolling:touch;
}
.month-tab{
  flex:none; padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-3); color:var(--text-dim); font-family:var(--sans);
  font-size:.85rem; font-weight:600; cursor:pointer;
  transition:all .15s ease;
}
.month-tab:hover{
  background:var(--surface); color:var(--text); border-color:var(--brand);
}
.month-tab[aria-pressed="true"]{
  background:var(--brand); color:var(--on-brand); border-color:var(--brand);
  box-shadow:var(--shadow-1);
}
.month-tab .badge-cur{
  font-size:.7rem; padding:1px 6px; border-radius:999px; margin-inline-start:6px;
  background:rgba(255,255,255,.25); color:inherit; font-weight:700;
}
.month-summary{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:10px; padding:10px 14px; background:var(--surface-3); border-radius:var(--r-md);
  margin-block-end:14px; font-family:var(--sans); font-size:.86rem; color:var(--text-dim);
}
.month-summary-stat{
  font-weight:700; color:var(--text);
}
.history-table-wrap{
  overflow-x:auto; max-height:48vh; max-height:48dvh; border:1px solid var(--line-soft);
  border-radius:var(--r-md); margin-block-end:14px;
}
.history-table{
  width:100%; border-collapse:collapse; font-size:.9rem;
}
.history-table th{
  position:sticky; top:0; background:var(--surface-2); padding:10px 12px;
  text-align:start; font-size:.76rem; font-family:var(--sans); font-weight:700;
  color:var(--text-dim); border-bottom:1px solid var(--line); z-index:1;
}
.history-table td{
  padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle;
}
.history-table tr:last-child td{
  border-bottom:none;
}
.history-table tr:hover{
  background:var(--surface-2);
}
.sheet{ padding:22px; }
.sheet-head{ display:flex; align-items:flex-start; gap:12px; margin-block-end:4px; }
.sheet-head h3{ font-size:1.2rem; flex:1; min-width:0; }
.sheet-body{ margin-block-start:10px; }
.sheet-actions{ display:flex; gap:10px; margin-block-start:20px; }
.sheet-actions .btn{ flex:1; }
.row-line{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-family:var(--sans); font-size:.9rem; }
.row-line:last-of-type{ border-bottom:none; }
.row-line .v{ font-weight:600; text-align:end; }
.row-line .v.big{ font-size:1.5rem; color:var(--brand); line-height:1; }
.hist{ list-style:none; margin:8px 0 0; padding:0; font-family:var(--sans); font-size:.84rem; }
.hist li{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line-soft); }
.hist li:last-child{ border-bottom:none; }
.hist .when{ color:var(--text-faint); white-space:nowrap; }
.section-label{ font-family:var(--sans); font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); margin-block:18px 0 4px; }
.danger-zone{ border:1px solid color-mix(in srgb, var(--danger) 35%, transparent); background:var(--danger-soft); border-radius:var(--r-md); padding:14px; margin-block-start:18px; }
.danger-zone .btn-row{ margin-block-start:10px; }
.lang-pick{ display:flex; gap:8px; }
.lang-pick .btn{ flex:1; }
.lang-pick .btn[aria-pressed="true"]{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }

/* ===========================================================================
   Landing / waiting / admin desk
   =========================================================================== */
.hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; align-items:center; padding:12px 0 36px; }
.hero-title{
  font-size:clamp(1.85rem, 5.5vw, 3.1rem); line-height:1.12; margin:16px 0 14px;
  letter-spacing:-.03em; font-weight:800;
  background:linear-gradient(135deg, var(--text) 25%, var(--brand) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub{ font-size:1.02rem; max-width:46ch; line-height:1.6; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  background:var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  color:var(--brand); font-family:var(--sans); font-size:.82rem; font-weight:600;
  box-shadow:0 1px 2px rgba(37,99,235,0.06);
}
.ticks{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.ticks li{ position:relative; padding-inline-start:28px; color:var(--text-dim); font-size:.95rem; line-height:1.45; }
.ticks li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.32em;
  width:18px; height:18px; border-radius:50%; background:var(--brand-soft);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 45%, transparent);
}
.ticks li::after{
  content:""; position:absolute; inset-inline-start:5.5px; inset-block-start:.62em;
  width:7px; height:4px; border-inline-start:2px solid var(--brand);
  border-block-end:2px solid var(--brand); transform:rotate(-45deg);
}
.callout{ background:var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-radius:var(--r-md); padding:16px 18px; }
.callout .steps{ margin:10px 0 0; padding-inline-start:20px; color:var(--text-dim); font-size:.9rem; display:grid; gap:6px; }
.callout code, .hint code{ font-family:var(--mono); font-size:.92em; background:var(--surface-2); padding:1px 5px; border-radius:5px; }
.center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.center .muted{ max-width:44ch; }

.hero-art{ display:flex; justify-content:center; }
.phone{
  width:min(260px, 76%); aspect-ratio:9/18; border-radius:32px; padding:10px;
  background:linear-gradient(160deg, #1e293b, #0f172a);
  box-shadow:0 30px 65px -15px rgba(15,23,42,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
  transform:rotate(-2deg);
  transition:transform .3s var(--ease-out);
}
.phone:hover{ transform:rotate(0deg) scale(1.02); }
.phone-notch{ width:36%; height:6px; border-radius:4px; background:rgba(255,255,255,.2); margin:2px auto 10px; }
.phone-body{ background:var(--surface); border-radius:24px; height:calc(100% - 20px); padding:13px 11px; display:flex; flex-direction:column; gap:8px; box-shadow:inset 0 0 0 1px var(--line); }
.ph-row{ display:flex; align-items:center; gap:7px; }
.ph-row span{ height:8px; border-radius:4px; background:var(--surface-3); flex:1; }
.ph-row.head span{ background:var(--line); }
.ph-row.head span:first-child{ flex:0 0 42%; }
.ph-row.stat span{ background:var(--brand-soft); height:28px; border-radius:6px; }
.ph-row b{ width:26px; height:13px; border-radius:4px; background:var(--line); flex:0 0 auto; }
.ph-row .dot{ width:9px; height:9px; border-radius:50%; background:var(--dot-off); flex:0 0 auto; }
.ph-row .dot.on{ background:var(--brand); }
.ph-row .dot.late{ background:var(--accent); }

.waiting-art{ display:flex; gap:7px; margin-bottom:20px; }
.waiting-art span{ width:9px; height:9px; border-radius:50%; background:var(--brand); opacity:.32; animation:bob 1.25s ease-in-out infinite; }
.waiting-art span:nth-child(2){ animation-delay:.16s; }
.waiting-art span:nth-child(3){ animation-delay:.32s; }
@keyframes bob{ 0%,100%{ opacity:.28; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-5px); } }
@media (prefers-reduced-motion: reduce){
  .waiting-art span{ animation:none; opacity:.6; }
}

.admin-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.row-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px; background:var(--surface-2); }
.row-card + .row-card{ margin-top:10px; }
.pill{ font-family:var(--sans); font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px; letter-spacing:.02em; }
.pill.owner{ background:var(--accent-soft); color:color-mix(in srgb, var(--accent) 72%, var(--text)); }
.pill.admin{ background:var(--brand-soft); color:var(--brand); }
.pill.teacher{ background:var(--surface-3); color:var(--text-dim); }
.pill.pending{ background:var(--accent-soft); color:color-mix(in srgb, var(--accent) 78%, var(--text)); }
.pill.live{ background:var(--brand-soft); color:var(--brand); }
.pill.off{ background:var(--surface-3); color:var(--text-faint); }
.pill.spent{ background:var(--surface-3); color:var(--text-faint); }
.code-chip{
  font-family:var(--mono); font-size:.95rem; font-weight:600; letter-spacing:.06em;
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
  padding:5px 10px; display:inline-flex; align-items:center; gap:8px;
}
.empty{ padding:26px 14px; text-align:center; color:var(--text-faint); font-size:.9rem; }
.spin{ display:inline-block; width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:sp .7s linear infinite; }
@keyframes sp{ to{ transform:rotate(360deg); } }

@media (max-width: 820px){
  .hero{ grid-template-columns:1fr; gap:28px; }
  .hero-art{ order:-1; }
  .phone{ width:min(190px, 52%); transform:none; }
}

/* ===========================================================================
   Toasts
   =========================================================================== */
.toasts{
  position:fixed; inset-inline:0; bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:0 14px; z-index:60; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:14px;
  background:var(--toast-bg); color:var(--toast-fg);
  padding:12px 16px; border-radius:var(--r-md); box-shadow:var(--shadow-2);
  font-family:var(--sans); font-size:.88rem; max-width:460px; width:max-content;
  pointer-events:auto; animation:rise .2s ease-out;
}
.toast.out{ animation:sink .2s ease-in forwards; }
.toast .msg{ flex:1; min-width:0; }
.toast .act{
  background:none; border:none; padding:4px 2px; color:inherit;
  font-weight:700; font-size:.85rem; cursor:pointer; flex:none;
  text-decoration:underline; text-underline-offset:3px; opacity:.95;
}
.toast .act:hover{ opacity:.7; }
.toast.bad{ background:var(--danger); color:#fff; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes sink{ to{ opacity:0; transform:translateY(10px); } }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width:560px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .fraction{ display:inline; }
  .dots{ display:none; }
  .toolbar .btn{ flex:1; }
  .topbar{ padding-inline:16px; }
  main{ padding:16px 12px 0; }
  .card{ padding:16px; }
  th,td{ padding:9px 6px; }
  .name-link{ font-size:.98rem; }
  .list-row{ flex-wrap:wrap; }
  .list-actions{ width:100%; }
  .list-actions .btn{ flex:1; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media print{
  .topbar-actions,.toolbar,.btn,.toasts{ display:none !important; }
  .card{ border:none; box-shadow:none; }
}

/* Accessibility: Skip link */
.skip-link{
  position:absolute; top:-50px; left:0; z-index:100;
  background:var(--brand); color:var(--on-brand);
  padding:10px 18px; font-family:var(--sans); font-size:.9rem;
  text-decoration:none; border-radius:0 0 var(--r-sm) 0;
  transition:top .15s;
}
.skip-link:focus{ top:0; }

/* Theme support via data-theme attribute */
html[data-theme="dark"]{
  --bg:#090d16;  --surface:#111827;  --surface-2:#172033;  --surface-3:#1f293d;
  --text:#f1f5f9; --text-dim:#94a3b8; --text-faint:#64748b;
  --brand:#3b82f6; --brand-strong:#60a5fa; --brand-bg:#090d16; --brand-soft:rgba(59,130,246,.12);
  --on-brand:#ffffff; --on-brand-dim:#93c5fd;
  --accent:#fbbf24; --accent-soft:rgba(251,191,36,.12);
  --danger:#f87171; --danger-soft:rgba(248,113,113,.12);
  --line:#1e293b;  --line-soft:#172033;  --dot-off:#334155;
  --overlay:rgba(0,0,0,.75);
  --toast-bg:#1e293b; --toast-fg:#f1f5f9;
  --ring:rgba(59,130,246,.35);
  --shadow-1:0 1px 3px rgba(0,0,0,.5);
  --shadow-2:0 4px 12px rgba(0,0,0,.6), 0 10px 28px rgba(0,0,0,.45);
  --shadow-3:0 24px 60px rgba(0,0,0,.85);
}
html[data-theme="light"]{
  --bg:#f8fafc;  --surface:#ffffff;  --surface-2:#f1f5f9;  --surface-3:#e2e8f0;
  --text:#0f172a; --text-dim:#475569; --text-faint:#64748b;
  --brand:#2563eb; --brand-strong:#1d4ed8; --brand-bg:#0f172a; --brand-soft:#eff6ff;
  --on-brand:#ffffff; --on-brand-dim:#93c5fd;
  --accent:#f59e0b; --accent-soft:#fef3c7;
  --danger:#ef4444; --danger-soft:#fef2f2;
  --line:#e2e8f0;  --line-soft:#f1f5f9;  --dot-off:#cbd5e1;
  --overlay:rgba(15,23,42,.65);
  --toast-bg:#0f172a; --toast-fg:#f8fafc;
  --ring:rgba(37,99,235,.25);
  --shadow-1:0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03);
  --shadow-2:0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.05), 0 12px 24px -4px rgba(15,23,42,.08);
  --shadow-3:0 20px 40px -8px rgba(15,23,42,.22), 0 1px 3px rgba(15,23,42,.08);
}

/* Skeletons */
.skeleton{
  background:linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size:200% 100%; animation:shimmer 1.5s ease-in-out infinite;
  border-radius:var(--r-sm); min-height:18px;
}
.skeleton-row{ display:flex; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line-soft); }
.skeleton-row .sk-name{ flex:1; height:18px; }
.skeleton-row .sk-dots{ width:90px; height:18px; }
.skeleton-row .sk-check{ width:26px; height:18px; border-radius:4px; }
@keyframes shimmer{ to{ background-position:-200% 0; } }

/* Progress rings */
.progress-ring{ width:30px; height:30px; display:inline-block; vertical-align:middle; flex:none; }
.progress-ring circle{ fill:none; stroke-width:3; }
.progress-ring .track{ stroke:var(--dot-off); }
.progress-ring .fill{ stroke:var(--brand); stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dashoffset var(--dur-norm) var(--ease-out); }

/* View transitions */
::view-transition-old(root){ animation:fade-out .15s ease-out; }
::view-transition-new(root){ animation:fade-in .15s ease-out; }
@keyframes fade-out{ to{ opacity:0; } }
@keyframes fade-in{ from{ opacity:0; } }


.att-group { display: inline-flex; align-items: center; gap: 4px; }
.att-btn { background: transparent; border: 1px solid #ccc; border-radius: 4px; padding: 4px 8px; cursor: pointer; color: #555; font-size: 14px; }
.att-btn:hover { background: #f0f0f0; }
.att-btn.present-btn { border-color: #28a745; color: #28a745; }
.att-btn.present-btn.active { background: #28a745; color: #fff; }
.att-btn.absent-btn { border-color: #dc3545; color: #dc3545; }
.att-btn.absent-btn.active { background: #dc3545; color: #fff; }
.att-btn.makeup-btn { border-color: #007bff; color: #007bff; border-radius: 12px; }
.att-btn.makeup-btn.active { background: #007bff; color: #fff; }