:root {
  --bg: #f4f0e8;
  --surface: #fffaf2;
  --surface-soft: #fff7ed;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --primary: #1d4ed8;
  --primary-dark: #1e40af;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #f59e0b;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(135deg, #f4f0e8 0%, #eef2ff 58%, #f8fafc 100%); color: var(--text); }
.hidden { display: none !important; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, #fdecc8, #eef2ff 45%, #f8fafc); }
.auth-card { width: min(460px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 30px; box-shadow: var(--shadow); }
.brand-row { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 48px; height: 48px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #1d4ed8, #0f172a); color: #fff; font-weight: 900; letter-spacing: -0.05em; }
.eyebrow { margin: 0 0 6px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.12em; color: var(--primary); font-weight: 800; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
.muted { color: var(--muted); line-height: 1.6; }
.auth-form, .form-grid { display: grid; gap: 14px; margin-top: 18px; }
label { display: grid; gap: 7px; color: #334155; font-size: 14px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; font: inherit; background: #fff; color: var(--text); }
textarea { resize: vertical; }
.button { border: 0; border-radius: 14px; padding: 12px 16px; font-weight: 800; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button.primary { color: white; background: var(--primary); }
.button.primary:hover { background: var(--primary-dark); }
.button.secondary { color: var(--text); background: #e0e7ff; }
.button.danger { color: white; background: var(--danger); }
.link-button { background: transparent; border: 0; color: var(--primary); font-weight: 800; cursor: pointer; margin-top: 12px; padding: 0; }
.security-note, .security-banner { margin-top: 18px; padding: 14px; border-radius: 18px; background: #eff6ff; border: 1px solid #bfdbfe; line-height: 1.55; color: #1e3a8a; }
.app-shell { display: grid; min-height: 100vh; grid-template-columns: 290px 1fr; }
.sidebar { background: #0f172a; color: white; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.sidebar-brand span, .term-card span, .term-card small { color: #cbd5e1; display: block; }
.nav-list { display: grid; gap: 10px; }
.nav-item { border: 1px solid rgba(255,255,255,.08); color: #e2e8f0; background: rgba(255,255,255,.06); border-radius: 16px; padding: 13px 14px; text-align: left; font-weight: 800; cursor: pointer; }
.nav-item.active, .nav-item:hover { background: #1d4ed8; color: white; }
.term-card { margin-top: auto; background: rgba(255,255,255,.08); border-radius: 20px; padding: 16px; }
main { padding: 24px; overflow: auto; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.language-picker { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.language-picker select { width: auto; min-width: 116px; border-radius: 12px; padding: 10px 12px; }
.security-banner { margin: 0 0 18px; }
.view { display: none; }
.view.active { display: grid; gap: 18px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); }
.metric span { color: var(--muted); font-weight: 700; }
.metric strong { display: block; margin-top: 8px; font-size: 30px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 20px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); }
.panel-header, .section-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.progress-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.pill { border-radius: 999px; padding: 7px 11px; background: #e0e7ff; color: #1e3a8a; font-size: 12px; font-weight: 900; }
.stack-list, .card-grid { display: grid; gap: 12px; }
.stack-item, .progress-card { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: var(--surface-soft); }
.progress-card { display: grid; gap: 10px; }
.progress-card header { display: flex; justify-content: space-between; gap: 10px; }
.progress-overview-controls { display: grid; grid-template-columns: minmax(180px, 260px) minmax(220px, 1fr); gap: 12px; align-items: end; margin: 0 0 12px; }
.progress-overview-controls label { margin: 0; }
.progress-overview-controls input, .progress-overview-controls select { border-radius: 12px; padding: 10px 12px; }
.progress-overview-output { display: grid; gap: 10px; }
.progress-overview-table table { min-width: 820px; }
.progress-overview-table th, .progress-overview-table td { padding: 9px 10px; vertical-align: middle; }
.progress-overview-table tbody tr:hover { background: #fff4df; }
.progress-overview-table .pill { padding: 5px 9px; }
.progress-overview-table .status-badge { padding: 4px 8px; font-size: .76rem; }
.muted-cell { color: var(--muted); font-size: .84rem; font-weight: 700; }
.compact-empty { padding: 12px 14px; }
.checklist { margin: 0; padding-left: 20px; display: grid; gap: 12px; line-height: 1.6; }
.toast { position: fixed; right: 22px; bottom: 22px; background: #0f172a; color: white; padding: 14px 16px; border-radius: 16px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; max-width: 360px; }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .metric-grid, .two-column, .compact-form, .progress-form { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .progress-overview-controls { grid-template-columns: 1fr; }
}

.small-note { margin: 6px 0 0; font-size: 13px; }
.filter-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.filter-row label { min-width: 240px; }

/* Class Overview + NA-aware score dashboard upgrade */
.inline-filter{display:flex;align-items:center;gap:10px;font-weight:800;color:#334155}
.inline-filter select{min-width:220px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;background:#fff}
.compact-metrics{margin:18px 0}.compact-metrics .metric{min-height:86px}.calculation-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;border-radius:16px;padding:14px 16px;margin:14px 0 18px}.wide-table{overflow:auto}.wide-table table{min-width:1050px}.score-badge,.score-empty,.status-badge,.mini-alert{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:.82rem;font-weight:900;white-space:nowrap}.score-badge{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}.score-empty{background:#f8fafc;color:#94a3b8;border:1px solid #e2e8f0}.status-na{background:#f1f5f9;color:#475569;border-color:#cbd5e1}.status-absent{background:#fef3c7;color:#92400e;border-color:#fde68a}.status-missing{background:#fee2e2;color:#991b1b;border-color:#fecaca}.status-pending{background:#e0f2fe;color:#075985;border-color:#bae6fd}.status-retake{background:#fae8ff;color:#86198f;border-color:#f5d0fe}.status-badge{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}.status-watch{background:#fffbeb;color:#92400e;border-color:#fde68a}.status-at-risk,.status-urgent-support{background:#fef2f2;color:#991b1b;border-color:#fecaca}.status-no-data{background:#f8fafc;color:#64748b;border-color:#e2e8f0}.mini-alert{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;margin:2px}.batch-form .wide{grid-column:1/-1}.batch-form table input,.batch-form table select{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;background:#fff}.batch-form table th,.batch-form table td{vertical-align:middle}.small-note{font-size:.92rem;margin:.25rem 0 0}.progress-form select{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 14px;font:inherit;background:white}@media(max-width:900px){.inline-filter{align-items:stretch;flex-direction:column}.inline-filter select{width:100%}}

/* Student detail + quick action upgrade */
.student-link{border:0;background:transparent;color:var(--primary);font:inherit;font-weight:900;cursor:pointer;padding:0;text-align:left;text-decoration:underline;text-underline-offset:3px}.student-link:hover{color:var(--primary-dark)}.strong-link{font-size:1rem}.action-cell{display:flex;gap:8px;flex-wrap:wrap}.button.tiny{border-radius:10px;padding:7px 10px;font-size:.78rem}.student-detail-grid{display:grid;gap:14px}.topbar-actions .button{white-space:nowrap}@media(max-width:720px){.action-cell{min-width:220px}.button.tiny{flex:1}.panel-header,.section-title{align-items:flex-start;flex-direction:column}.topbar-actions{width:100%}.topbar-actions .button{flex:1}}
.pin-code{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#111827;color:white;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1rem;font-weight:900;letter-spacing:1px;padding:7px 10px}
.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.summary-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fffdf8}.summary-card strong{display:block;color:var(--ink);margin-bottom:6px}.summary-card p{margin:0;color:var(--muted)}.import-preview-good{border-color:#bbf7d0;background:#f0fdf4}.import-preview-warn{border-color:#fed7aa;background:#fff7ed}.status-below-average{background:#fef2f2;color:#991b1b;border-color:#fecaca}.status-on-track{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}@media(max-width:760px){.summary-grid{grid-template-columns:1fr}}
.insight-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:18px}.skill-table{width:100%;border-collapse:collapse}.skill-table th,.skill-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.skill-bar{height:12px;border-radius:999px;background:#e2e8f0;overflow:hidden;min-width:120px}.skill-bar span{display:block;height:100%;border-radius:999px;background:#2563eb}.skill-bar.strong span{background:#16a34a}.skill-bar.watch span{background:#f59e0b}.skill-bar.weak span{background:#dc2626}.recommendation-list{display:grid;gap:12px}.recommendation-card{border:1px solid var(--line);border-radius:16px;background:#fffdf8;padding:14px}.recommendation-card strong{display:block;margin-bottom:5px}.recommendation-card p{margin:0;color:var(--muted)}@media(max-width:900px){.insight-grid{grid-template-columns:1fr}}
.performance-box{border:1px solid #bfdbfe;border-radius:16px;padding:16px;background:linear-gradient(180deg,#eff6ff 0,#fffdf8 38%)}.compact-header{margin-bottom:10px}.compact-header h4{margin:0}.monthly-comment-field{display:block;border:2px solid #2563eb;border-radius:16px;background:#f8fbff;padding:14px;margin:10px 0 14px}.monthly-comment-field.translation-field{border-color:#16a34a;background:#f7fef9}.monthly-comment-field>span{display:block;margin-bottom:8px;color:#1d4ed8;font-size:1rem;font-weight:950}.monthly-comment-field.translation-field>span{color:#166534}.monthly-comment-field textarea{min-height:150px;border:1px solid #93c5fd;background:#fff;box-shadow:0 8px 22px rgba(37,99,235,.08)}.monthly-comment-field.translation-field textarea{border-color:#86efac;box-shadow:0 8px 22px rgba(22,163,74,.08)}.monthly-comment-field textarea:focus{outline:3px solid rgba(37,99,235,.18);border-color:#2563eb}.monthly-comment-field.translation-field textarea:focus{outline-color:rgba(22,163,74,.18);border-color:#16a34a}.translated-comment{border:1px solid #bbf7d0;border-radius:14px;background:#f0fdf4;padding:12px 14px;margin:8px 0}.translated-comment strong,.original-comment strong{display:block;margin-bottom:5px;color:#166534}.original-comment{border:1px solid #e2e8f0;border-radius:14px;background:#fffdf8;padding:12px 14px;margin:8px 0}.original-comment strong{color:#475569}.rating-grid{display:grid;gap:6px;margin-top:12px}.rating-row{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(360px,1.2fr);align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);overflow:hidden}.rating-row>span{padding:9px 10px;font-weight:900}.rating-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:100%}.rating-options>span,.rating-options label{display:flex;align-items:center;justify-content:center;min-height:38px;border-left:1px solid var(--line);font-size:.76rem;font-weight:900;text-align:center}.rating-options input{position:absolute;opacity:0;pointer-events:none}.rating-options label span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:7px 5px;cursor:pointer}.rating-options label:hover span{background:#dbeafe}.rating-options input:checked+span{background:#2563eb;color:white}.rating-head{background:#fff7ed}.rating-head .rating-options>span{color:#1d4ed8}.comment-meta{display:flex;gap:8px;flex-wrap:wrap;margin:.35rem 0}.comment-review textarea,.comment-review input{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit}.comment-review{display:grid;gap:10px}.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.tag-list span{border-radius:999px;background:#eff6ff;color:#1d4ed8;padding:5px 9px;font-size:.8rem;font-weight:900}.history-details{border:1px solid var(--line);border-radius:14px;background:#fffdf8;padding:10px}.history-details summary{cursor:pointer;font-weight:900;color:var(--primary)}.history-details .stack-list{margin-top:10px}@media(max-width:860px){.rating-row{grid-template-columns:1fr}.rating-options>span,.rating-options label{border-left:0;border-top:1px solid var(--line);font-size:.7rem}.rating-head{display:none}}
.collapsible-body{margin-top:14px}.collapse-toggle{min-width:72px}
.translate-action-row{display:flex;justify-content:flex-end;margin:-4px 0 8px}.translate-action-row .button{white-space:nowrap}
.inline-filter{display:flex;align-items:center;gap:8px;font-weight:900}.inline-filter input{width:150px}@media(max-width:720px){.inline-filter{width:100%;align-items:flex-start;flex-direction:column}.inline-filter input{width:100%}}
.rating-chart{display:grid;gap:8px;margin-top:12px}.rating-bar-row{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(140px,1.4fr) minmax(92px,.7fr);align-items:center;gap:10px}.rating-bar-label{font-weight:900;color:var(--ink);font-size:.84rem}.rating-bar-track{height:12px;border-radius:999px;background:#e5e7eb;overflow:hidden}.rating-bar-fill{display:block;height:100%;border-radius:999px}.rating-bar-fill.needs-work{background:#dc2626}.rating-bar-fill.below{background:#f97316}.rating-bar-fill.average{background:#facc15}.rating-bar-fill.strong{background:#16a34a}.rating-bar-fill.na{background:#94a3b8}.rating-bar-value{font-size:.78rem;font-weight:900;color:var(--muted)}@media(max-width:720px){.rating-bar-row{grid-template-columns:1fr}.rating-bar-value{margin-top:-4px}}
.level-rec{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:.78rem;font-weight:900;white-space:nowrap}.level-rec.up{background:#dcfce7;color:#166534;border-color:#bbf7d0}.level-rec.review{background:#fef9c3;color:#854d0e;border-color:#fde68a}.level-rec.stay{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.level-rec.down{background:#fff7ed;color:#9a3412;border-color:#fed7aa}.level-rec.neutral{background:#f8fafc;color:#475569}
.translation-note{border-top:1px solid #bbf7d0;color:#3f6212;font-size:.84rem;line-height:1.55;margin:10px 0 0;padding-top:9px}

/* Compact student report actions */
#studentDetailPrint,#studentDetailDownload{min-width:132px}
.class-export-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.class-export-controls .button{white-space:nowrap}@media(max-width:900px){.class-export-controls{align-items:stretch;width:100%}.class-export-controls .inline-filter,.class-export-controls .button{width:100%}}

/* 2026 portal visual/readability refresh */
:root{--bg:#f7f9fd;--surface:#ffffff;--surface-soft:#f8fbff;--line:#dbe4f0;--primary:#2563eb;--primary-dark:#1d4ed8;--shadow:0 24px 70px rgba(15,23,42,.10)}
body{background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 54%,#fff7ed 100%);letter-spacing:-.01em}.auth-screen{position:relative;overflow:hidden;padding:34px;background:radial-gradient(circle at 12% 12%,rgba(245,158,11,.18),transparent 32%),radial-gradient(circle at 88% 8%,rgba(37,99,235,.16),transparent 34%),linear-gradient(135deg,#f8fbff 0%,#eef5ff 48%,#fff7ed 100%)}.auth-screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(180deg,#000,transparent 78%);pointer-events:none}.auth-card{position:relative;width:min(920px,100%);padding:0;overflow:hidden;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid rgba(219,228,240,.95);box-shadow:0 30px 90px rgba(15,23,42,.14)}.auth-hero{position:relative;padding:32px 34px 24px;background:linear-gradient(135deg,#ffffff 0%,#f8fbff 56%,#fff7ed 100%);border-bottom:1px solid var(--line)}.auth-hero:after{content:"";position:absolute;right:-50px;top:-70px;width:220px;height:220px;border-radius:50%;background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(245,158,11,.14))}.auth-hero .brand-row{position:relative;z-index:1}.brand-mark{width:52px;height:52px;border-radius:18px;box-shadow:0 16px 34px rgba(37,99,235,.22)}.auth-hero h1{font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:-.06em}.auth-hero .muted{position:relative;z-index:1;max-width:680px;margin:18px 0 0;font-size:1.07rem;color:#475569}.auth-benefits{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.auth-benefits span{display:inline-flex;align-items:center;gap:6px;border:1px solid #dbeafe;background:#fff;border-radius:999px;padding:8px 12px;color:#1d4ed8;font-size:.86rem;font-weight:900}.auth-benefits span:before{content:"✓"}.auth-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}.login-panel,.parent-pin-login{padding:28px 30px}.login-panel{border-right:1px solid var(--line)}.form-heading{display:grid;gap:4px;margin-bottom:2px}.form-heading strong{font-size:1.15rem;color:#0f172a}.form-heading span{color:#64748b;font-size:.94rem;line-height:1.55}.auth-form{gap:16px;margin-top:16px}label{color:#1e293b}.auth-card input,.auth-card select,.auth-card textarea{min-height:50px;border-color:#dbe4f0;background:#fff;border-radius:16px;transition:border-color .18s ease,box-shadow .18s ease}.auth-card input:focus,.auth-card select:focus,.auth-card textarea:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}.button{min-height:46px;border-radius:16px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.button:hover{transform:translateY(-1px)}.button.primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 16px 34px rgba(37,99,235,.22)}.button.secondary{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}.parent-pin-login{margin:0;background:linear-gradient(180deg,#f8fbff,#eff6ff);border:0;border-radius:0;color:#1e3a8a}.parent-pin-login .button.secondary{width:100%;background:#dbeafe;color:#1e3a8a}.portal-note{display:flex;gap:10px;align-items:flex-start;margin:0 30px 30px;background:#f8fbff;border-color:#dbeafe}.portal-note strong{white-space:nowrap}.portal-note span{color:#1e3a8a}.link-button{font-size:.94rem;text-align:left}.app-shell{background:#f7f9fd}.sidebar{background:linear-gradient(180deg,#0b1220,#101d36);box-shadow:18px 0 50px rgba(15,23,42,.10)}main{padding:30px}.topbar{padding:20px 22px;background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:26px;box-shadow:0 14px 40px rgba(15,23,42,.05)}.security-banner{border-radius:20px;background:#eff6ff}.metric,.panel{background:#fff;border-color:#dbe4f0;box-shadow:0 14px 36px rgba(15,23,42,.055)}.panel{border-radius:26px}.metric{border-radius:22px}.stack-item,.progress-card{background:#f8fbff}.nav-item{transition:.18s ease}.nav-item.active,.nav-item:hover{background:#2563eb;box-shadow:0 10px 24px rgba(37,99,235,.20)}
@media(max-width:760px){.auth-screen{padding:18px}.auth-layout{grid-template-columns:1fr}.login-panel{border-right:0;border-bottom:1px solid var(--line)}.auth-hero,.login-panel,.parent-pin-login{padding:24px}.portal-note{display:grid;margin:0 24px 24px}.auth-hero h1{font-size:2rem}.auth-benefits span{flex:1;justify-content:center}.app-shell{grid-template-columns:1fr}main{padding:18px}.topbar{border-radius:20px}}