:root {
  --bg: #0e0e0d;
  --surface: #171714;
  --surface-2: #22211d;
  --gold: #b79a5c;
  --gold-2: #d9c18c;
  --text: #f7f3ea;
  --muted: #b7b0a2;
  --danger: #d86161;
  --success: #59a77a;
  --warning: #d8a84e;
  --border: rgba(255,255,255,.09);
  --shadow: 0 18px 50px rgba(0,0,0,.26);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 480px);
  background: radial-gradient(circle at 15% 10%, rgba(183,154,92,.18), transparent 35%), var(--bg);
}
.hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(90deg, rgba(14,14,13,.05), rgba(14,14,13,.9)), url('/assets/teacher.jpg') center/cover no-repeat;
}
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,8,8,.85),transparent 45%); }
.hero-copy { position:absolute; z-index:1; right:8%; left:8%; bottom:8%; }
.hero-copy h1 { margin:0; font-size:clamp(2.2rem,5vw,5rem); line-height:1; }
.hero-copy p { color:var(--gold-2); font-size:1.25rem; margin:.8rem 0 0; }
.login-panel { display:flex; align-items:center; padding:32px; }
.login-card { width:100%; background:rgba(23,23,20,.94); border:1px solid var(--border); border-radius:28px; padding:32px; box-shadow:var(--shadow); }
.brand-mini { display:flex; gap:14px; align-items:center; margin-bottom:24px; }
.brand-mini img { width:62px; height:62px; object-fit:cover; border-radius:18px; border:2px solid var(--gold); }
.brand-mini h2 { margin:0; }
.brand-mini small { color:var(--muted); }
.label { display:block; color:var(--muted); margin:14px 0 8px; }
.input, .select, .textarea {
  width:100%; border:1px solid var(--border); background:#0f0f0d; color:var(--text); border-radius:14px; padding:14px 16px; outline:none;
}
.input:focus, .select:focus, .textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(183,154,92,.13); }
.primary, .secondary, .danger-btn, .ghost {
  border:none; border-radius:14px; padding:13px 18px; transition:.2s; font-weight:700;
}
.primary { width:100%; background:linear-gradient(135deg,var(--gold),#8e743d); color:#111; margin-top:18px; }
.primary:hover { transform:translateY(-1px); filter:brightness(1.06); }
.secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
.danger-btn { background:rgba(216,97,97,.15); color:#ffb3b3; border:1px solid rgba(216,97,97,.3); }
.ghost { background:transparent; color:var(--muted); }
.help { color:var(--muted); font-size:.9rem; margin-top:14px; line-height:1.8; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:260px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; padding:22px 16px; border-left:1px solid var(--border); background:#11110f; }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:8px; margin-bottom:24px; }
.sidebar-brand img { width:48px; height:48px; object-fit:cover; border-radius:14px; }
.sidebar-brand strong { display:block; }
.sidebar-brand small { color:var(--muted); }
.nav { display:grid; gap:8px; }
.nav button { text-align:right; border:none; border-radius:13px; padding:12px 14px; color:var(--muted); background:transparent; }
.nav button.active, .nav button:hover { background:rgba(183,154,92,.12); color:var(--gold-2); }
.sidebar-footer { position:absolute; bottom:20px; right:16px; left:16px; }
.content { padding:28px; min-width:0; }
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:24px; }
.topbar h1 { margin:0; font-size:clamp(1.4rem,3vw,2.2rem); }
.topbar p { margin:6px 0 0; color:var(--muted); }
.user-chip { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--gold); color:#111; display:grid; place-items:center; font-weight:900; }

.grid { display:grid; gap:16px; }
.grid.cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { background:linear-gradient(180deg,rgba(35,34,29,.92),rgba(23,23,20,.96)); border:1px solid var(--border); border-radius:20px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.14); }
.metric .value { font-size:2rem; font-weight:900; color:var(--gold-2); margin-top:8px; }
.metric .label { margin:0; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:26px 0 12px; gap:12px; }
.section-title h2 { margin:0; font-size:1.2rem; }
.two-col { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
.table-wrap { overflow:auto; border-radius:18px; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; min-width:650px; background:var(--surface); }
th, td { padding:13px 14px; text-align:right; border-bottom:1px solid var(--border); }
th { color:var(--gold-2); background:#1d1c18; font-size:.9rem; }
td { color:#e9e3d7; }
.badge { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; font-size:.8rem; border:1px solid var(--border); }
.badge.present, .badge.published, .badge.sent { color:#9ee0b7; background:rgba(89,167,122,.12); }
.badge.absent, .badge.failed { color:#ffb1b1; background:rgba(216,97,97,.12); }
.badge.late, .badge.draft, .badge.queued { color:#f0cb82; background:rgba(216,168,78,.12); }
.badge.excused { color:#9fc8ff; background:rgba(77,132,204,.12); }
.list { display:grid; gap:10px; }
.list-item { padding:14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.02); }
.list-item strong { display:block; margin-bottom:4px; }
.list-item small { color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.form-actions { display:flex; gap:10px; margin-top:16px; }
.form-actions .primary { width:auto; margin:0; }
.empty { padding:28px; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:16px; }
.notice { padding:14px 16px; border-right:4px solid var(--gold); background:rgba(183,154,92,.08); border-radius:12px; color:var(--gold-2); }
.toast { position:fixed; left:24px; bottom:24px; z-index:999; background:#1f1e1a; color:white; border:1px solid var(--border); padding:14px 18px; border-radius:14px; box-shadow:var(--shadow); max-width:360px; }
.toast.error { border-color:rgba(216,97,97,.5); color:#ffc0c0; }

.mobile-nav { display:none; }
@media (max-width: 980px) {
  .login-shell { grid-template-columns:1fr; }
  .hero { min-height:42vh; }
  .login-panel { padding:18px; margin-top:-26px; position:relative; z-index:2; }
  .app-shell { display:block; padding-bottom:72px; }
  .sidebar { display:none; }
  .content { padding:18px; }
  .grid.cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .two-col { grid-template-columns:1fr; }
  .mobile-nav { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; right:0; left:0; bottom:0; z-index:40; background:#11110f; border-top:1px solid var(--border); padding:7px env(safe-area-inset-right) calc(7px + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
  .mobile-nav button { border:none; background:transparent; color:var(--muted); padding:8px 4px; font-size:.78rem; }
  .mobile-nav button.active { color:var(--gold-2); }
}
@media (max-width: 580px) {
  .login-card { padding:22px; border-radius:22px; }
  .hero-copy h1 { font-size:2.35rem; }
  .grid.cards { grid-template-columns:1fr 1fr; gap:10px; }
  .card { padding:15px; border-radius:16px; }
  .metric .value { font-size:1.55rem; }
  .form-grid { grid-template-columns:1fr; }
  .topbar { align-items:flex-start; }
  .user-chip span { display:none; }
}
.full { width:100%; }
.compact { width:auto; margin-top:0; }
.top-gap { margin-top:18px; }
.small-notice { font-size:.92rem; }
.no-margin { margin:0; }
.align-end { display:flex; align-items:end; }
.center { justify-content:center; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.search-box { display:flex; gap:8px; flex:1; min-width:280px; }
.search-box .input { flex:1; }
.file-button { display:inline-flex; align-items:center; }
.counter { color:var(--gold-2); font-weight:700; }
.cell-sub { display:block; color:var(--muted); margin-top:4px; }
.row-actions { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.mini { padding:8px 10px; border-radius:10px; font-size:.82rem; }
.form-card { max-width:1100px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.quick-card { text-align:right; border:1px solid var(--border); background:linear-gradient(180deg,rgba(35,34,29,.92),rgba(23,23,20,.96)); color:var(--text); border-radius:18px; padding:18px; }
.quick-card:hover { border-color:rgba(183,154,92,.55); transform:translateY(-1px); }
.quick-card b { display:block; color:var(--gold-2); margin-bottom:7px; }
.quick-card span { color:var(--muted); line-height:1.6; font-size:.9rem; }
.qr-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.qr-mini-card { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; }
.qr-mini-card .row-actions { grid-column:1/-1; }
.avatar.large { width:48px; height:48px; font-size:1.2rem; }
.modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.78); backdrop-filter:blur(8px); }
.modal-card { position:relative; width:min(92vw,460px); background:#171714; border:1px solid var(--border); border-radius:24px; padding:24px; box-shadow:var(--shadow); }
.modal-close { position:absolute; left:14px; top:12px; width:36px; height:36px; border:none; border-radius:50%; background:#292820; color:white; font-size:1.5rem; }
.qr-print-card { text-align:center; }
.teacher-mark { width:72px; height:72px; object-fit:cover; border-radius:20px; border:2px solid var(--gold); }
.qr-print-card h2 { margin:10px 0 4px; }
.qr-print-card p { margin:0 0 14px; color:var(--muted); }
.qr-image { width:min(72vw,270px); background:white; padding:10px; border-radius:18px; }
.qr-print-card h3 { margin:12px 0 5px; }
.qr-print-card small { display:block; color:var(--muted); margin-top:5px; }
.scanner-box { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:18px; background:#080808; border:1px solid var(--border); }
.scanner-box video { width:100%; height:100%; object-fit:cover; }
.scanner-overlay { position:absolute; inset:18%; border:3px solid var(--gold); border-radius:18px; box-shadow:0 0 0 999px rgba(0,0,0,.28); }
.attendance-list { display:grid; gap:9px; max-height:560px; overflow:auto; padding-left:4px; }
.attendance-row { display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,.7fr); align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.02); }
.attendance-row small { display:block; color:var(--muted); margin-top:4px; }
.score-fields { display:grid; grid-template-columns:120px 1fr; gap:8px; }
@media (max-width:1200px) {
  .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .qr-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px) {
  .mobile-nav { display:flex; overflow-x:auto; justify-content:flex-start; }
  .mobile-nav button { min-width:92px; flex:0 0 auto; }
  .form-grid.three { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .toolbar { align-items:stretch; }
  .search-box { min-width:100%; }
  .quick-grid, .qr-grid { grid-template-columns:1fr; }
  .form-grid.three { grid-template-columns:1fr; }
  .attendance-row { grid-template-columns:1fr; }
  .score-fields { grid-template-columns:1fr; }
}
@media print {
  body { background:#fff !important; color:#000 !important; }
  .modal { position:static; inset:auto; background:#fff; color:#000; }
  .modal-card { border:none; box-shadow:none; background:#fff; color:#000; }
  .modal-close, .form-actions, .no-print { display:none !important; }
}

/* V0.3 administration and security UI */
.update-banner{position:fixed;inset:0 0 auto 0;z-index:9999;background:#171717;color:#fff;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:16px;box-shadow:0 4px 16px #0003}.update-banner button{border:0;border-radius:8px;padding:8px 14px;background:#d1b36b;color:#171717;font-weight:800;cursor:pointer}.version-pill,.version-foot{display:inline-flex;align-items:center;border:1px solid #ffffff36;border-radius:999px;padding:4px 10px;font-size:12px}.version-foot{color:#a9a9a9;margin-bottom:8px}.admin-wide{grid-template-columns:minmax(360px,.9fr) minmax(420px,1.1fr)}.subsection{margin:18px 0;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}.checkbox-grid label,.check-row label{display:flex;align-items:flex-start;gap:8px;font-size:14px}.permissions-grid{max-height:350px;overflow:auto;padding-inline-end:6px}.check-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:14px 0}.check-row>input{margin-inline-end:8px}.assistant-list{max-height:75vh;overflow:auto}.profile-line{display:flex;align-items:center;gap:14px}.compact-select{width:auto;min-width:210px}.align-end{display:flex;align-items:flex-end}.teacher-mark{width:72px;height:72px;border-radius:18px;object-fit:cover;margin:auto}.qr-print-card{max-width:520px;margin:20px auto;text-align:center}.qr-image{width:min(290px,90%);margin:15px auto;display:block}.student-own-card h3{margin-bottom:4px}.small-notice{font-size:13px}.file-label{cursor:pointer}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.toolbar .search-box{flex:1;min-width:260px}.table-wrap code{font-size:11px;word-break:break-all;white-space:normal}.child-card .mini-stats{display:grid;gap:8px;margin-top:14px}.child-card .mini-stats span{display:flex;justify-content:space-between;background:var(--surface-2);padding:9px 12px;border-radius:10px}.list-item p{white-space:pre-wrap}.badge{display:inline-flex;margin:2px}.assistant-list .row-actions{max-width:280px;justify-content:flex-end}
@media(max-width:980px){.admin-wide{grid-template-columns:1fr}.checkbox-grid{grid-template-columns:1fr}.toolbar{align-items:stretch}.toolbar .row-actions{width:100%}.compact-select{width:100%}}
@media print{.sidebar,.topbar,.mobile-nav,.no-print,.update-banner{display:none!important}.content{padding:0!important}.qr-print-card{box-shadow:none;border:0}.app-shell{display:block}.card{box-shadow:none}}

.profile-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.profile-hero>div:nth-child(2){flex:1;min-width:220px}.avatar.huge{width:76px;height:76px;font-size:30px}.profile-hero h2{margin:0 0 5px}.profile-hero p{margin:0 0 4px}.version-foot{opacity:.75}

/* V0.4 operational management */
.account-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.account-card{border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--surface-2)}.phone-row{display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:12px;align-items:center;border:1px solid var(--border);border-radius:13px;padding:12px;margin-top:9px}.phone-row small{display:block;color:var(--muted);margin-top:4px}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:6px;background:#777}.status-dot.ok{background:#3dbb75}.status-dot.warn{background:#f0b84d}.status-dot.bad{background:#e26363}.priority-urgent{border-inline-start:4px solid #e26363}.priority-high{border-inline-start:4px solid #f0b84d}.priority-normal{border-inline-start:4px solid #6ea7ff}.priority-low{border-inline-start:4px solid #777}.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.filter-bar .input,.filter-bar .select{width:auto;min-width:180px}.system-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.system-check{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.inline-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}.danger-note{border-color:#7b2d2d;background:#2a1717}.print-help{font-size:.86rem;color:var(--muted)}
@media(max-width:900px){.account-grid,.system-checks{grid-template-columns:1fr}.inline-form{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.mobile-nav,.no-print,.update-banner,.toolbar{display:none!important}.content{padding:0!important}.qr-print-card,.card{box-shadow:none!important}.app-shell{display:block!important}.qr-print-card{max-width:none!important;border:0!important;background:#fff!important;color:#000!important}.qr-print-card p,.qr-print-card small{color:#333!important}.qr-image{width:55mm!important}.teacher-mark{width:22mm!important;height:22mm!important}}

.install-app-button { margin-top:16px; border-color:rgba(183,154,92,.45); color:var(--gold-2); }
@media (display-mode: standalone) {
  .install-app-button { display:none !important; }
  body { padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
}