:root { color-scheme: light; --ink:#162a46; --muted:#52627a; --blue:#235fce; --canvas:#f4f7fb; --line:#dce4ef; }
.notification-count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:20px; background:#b53640; color:#fff; font-size:12px; font-weight:650; }
.request-alert { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:24px 0; padding:18px; border:1px solid #eacb8d; border-radius:12px; background:#fff5df; font-size:14px; }
.request-tabs { display:flex; gap:22px; margin:26px 0; }
.request-tabs [aria-current=page] { font-weight:650; }
.password-request-row { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:22px; padding:22px 0; border-top:1px solid var(--line); font-size:14px; }
.password-request-row div > span,.password-request-row small { display:block; margin-top:6px; }
.password-request-row small { color:var(--muted); font-size:12px; }
.password-request-row .button { max-width:230px; font-size:13px; }
.close-request { margin-top:24px; }
.close-request > button { width:auto; }
@media (max-width:760px) { .password-request-row { grid-template-columns:1fr; gap:12px; } .request-alert { align-items:flex-start; flex-direction:column; } }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
a { color:var(--blue); text-underline-offset:3px; }
.site-header { padding:20px max(20px,calc((100vw - 1120px)/2)); background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--ink); font-weight:650; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:12px; color:#fff; background:var(--blue); font-size:23px; }
.brand small { display:block; font-size:12px; font-weight:400; color:var(--muted); }
nav { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
nav a { text-decoration:none; }
nav form { margin:0; }
.page { flex:1; width:100%; max-width:1120px; margin:0 auto; padding:48px 20px; }
.surface { background:#fff; border:1px solid var(--line); border-radius:22px; padding:32px; box-shadow:0 18px 55px rgb(22 42 70 / 7%); }
.auth-surface { max-width:540px; margin:0 auto; }
.home-surface { max-width:800px; margin:0 auto; padding:48px; }
h1 { margin:0 0 18px; font-size:30px; line-height:1.2; letter-spacing:-.025em; overflow-wrap:anywhere; }
.home-surface h1 { font-size:clamp(40px,7vw,70px); }
p { margin:0 0 18px; overflow-wrap:anywhere; }
.eyebrow { display:block; color:var(--blue); font-size:12px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.lead { font-size:22px; }
.muted { color:var(--muted); font-size:14px; }
form > div, form > p { margin-bottom:18px; }
label { display:block; font-size:14px; margin-bottom:6px; }
input,select,textarea { width:100%; padding:12px; min-height:46px; border:1px solid #cbd7e6; border-radius:10px; font:inherit; color:var(--ink); background:#fff; }
input[type=checkbox], input[type=radio] { width:auto; min-height:0; margin-right:7px; }
input[type=checkbox] + label { display:inline; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 18px; border:1px solid var(--blue); border-radius:10px; background:var(--blue); color:#fff; font:inherit; font-weight:550; text-decoration:none; cursor:pointer; }
button:hover,.button:hover { background:#1749a3; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #93baff; outline-offset:3px; }
form > button { width:100%; }
.text-button { min-height:0; border:0; padding:0; color:var(--muted); background:none; font-weight:400; }
.text-button:hover { color:var(--blue); background:none; }
.auth-links { margin-top:22px; font-size:14px; }
.helptext,form span,form ul { color:var(--muted); font-size:13px; }
.helptext { display:block; margin-top:5px; }
.helptext ul { padding-left:18px; margin:8px 0; }
.errorlist { color:#b53640; list-style:none; padding:0; margin:6px 0; font-size:14px; }
.messages { max-width:540px; margin:0 auto 18px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#eaf2ff; }
.messages p:last-child { margin-bottom:0; }
.verified { display:inline-block; border-radius:8px; color:#17634b; background:#e5f5ee; padding:5px 10px; font-size:13px; margin-bottom:22px; }
.account-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
footer { text-align:center; padding:20px; color:var(--muted); font-size:13px; }
@media (max-width:560px) { .site-header { padding:16px; } .site-header nav { font-size:14px; gap:10px; } .page { padding:28px 14px; } .surface,.home-surface { padding:24px 20px; } h1 { font-size:26px; } .lead { font-size:19px; } }
@media (max-width:360px) { .site-header { align-items:flex-start; flex-wrap:wrap; } }
.planner-surface { padding:0; border:0; background:none; box-shadow:none; }
.dashboard-heading,.subject-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.dashboard-heading h1 { margin-bottom:8px; }
.status-row { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 22px; }
.status-row .verified { margin:0; }
.pill,.status-warning { padding:5px 10px; border-radius:8px; background:#e9eef6; font-size:13px; }
.status-warning { color:#8a4900; background:#fff0d9; }
.view-banner { display:flex; justify-content:space-between; align-items:center; gap:16px; background:#eaf2ff; border:1px solid #bbd2fb; border-radius:14px; padding:16px 20px; margin-bottom:28px; }
.view-banner span { display:block; font-size:13px; margin-top:4px; }
.view-banner a { flex-shrink:0; font-size:14px; }
.subject-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.subject-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; min-width:0; }
h2 { font-size:21px; line-height:1.3; margin:0 0 14px; overflow-wrap:anywhere; }
.subject-heading h2 { margin-bottom:12px; }
.subject-heading a { flex-shrink:0; font-size:12px; }
.goal-info { font-size:14px; min-height:48px; color:var(--muted); margin-bottom:18px; overflow-wrap:anywhere; }
.goal-info strong,.goal-info span { display:block; }
.score-summary { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.score-summary small { display:block; color:var(--muted); font-size:12px; }
.score-summary strong { display:block; font-size:34px; letter-spacing:-.03em; }
.score-summary strong span { color:var(--muted); font-size:14px; font-weight:400; }
.progress-label { color:var(--blue); font-size:13px; margin:8px 0 14px; }
.goal-reached { color:#17634b; }
.progress-chart { display:block; width:100%; overflow:visible; margin-top:8px; }
.chart-grid { stroke:#e3eaf3; fill:none; }
.chart-target { stroke:#329273; stroke-width:1.5; stroke-dasharray:6 4; }
.chart-exam { stroke:#8094b0; stroke-width:1; stroke-dasharray:4 5; }
.chart-line { stroke:var(--blue); stroke-width:3; fill:none; stroke-linejoin:round; }
.chart-point { fill:var(--blue); stroke:#fff; stroke-width:2; }
.progress-chart a:hover .chart-point { fill:#f09544; }
.chart-label { font-size:12px; fill:var(--muted); }
.target-label { fill:#17634b; }
.chart-caption { font-size:11px; color:var(--muted); margin:0 0 18px; }
.empty-chart { display:grid; place-items:center; min-height:170px; padding:20px; margin-bottom:18px; background:#f6f8fc; border-radius:12px; color:var(--muted); font-size:14px; text-align:center; }
.attempt-history { margin-top:20px; font-size:13px; }
.attempt-history summary { cursor:pointer; color:var(--blue); }
.attempt-history ul { list-style:none; padding:0; margin:12px 0 0; }
.attempt-history li { padding:10px 0; border-top:1px solid var(--line); }
.attempt-history li div { display:flex; gap:14px; flex-wrap:wrap; }
.attempt-history li p { margin:5px 0 0; color:var(--muted); overflow-wrap:anywhere; }
.empty-plan { padding:32px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.empty-plan p { color:var(--muted); }
.dashboard-account { margin-top:32px; font-size:13px; }
.button-secondary { background:#fff; color:var(--blue); }
.button-secondary:hover { background:#eaf2ff; }
.back-link { display:block; margin-bottom:24px; font-size:14px; }
#id_subjects { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
#id_subjects label { display:flex; align-items:center; margin:0; }
.student-search { display:flex; gap:12px; align-items:center; margin:26px 0; }
.student-search input { flex:1; min-width:0; }
.student-search > button { width:auto; }
.student-search a { font-size:13px; }
.student-row { display:grid; grid-template-columns:1.05fr 1.1fr 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--line); font-size:14px; }
.student-row span,.student-row small,.student-row strong { display:block; overflow-wrap:anywhere; }
.student-row span { color:var(--muted); margin:4px 0; }
.student-row small { font-size:12px; color:var(--muted); margin-top:8px; }
.student-name { font-size:17px; font-weight:650; text-decoration:none; }
.pagination { justify-content:center; margin-top:25px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:760px) { .subject-grid { grid-template-columns:1fr; } .student-row { grid-template-columns:1fr; gap:12px; } .view-banner { align-items:flex-start; flex-direction:column; } }
@media (max-width:560px) { .dashboard-heading { flex-direction:column; margin-bottom:20px; } .subject-card { padding:20px 16px; } .subject-heading { flex-direction:column; gap:0; margin-bottom:12px; } .student-search { flex-wrap:wrap; } #id_subjects { grid-template-columns:1fr; } .staff-surface { padding:24px 18px; } }