:root {
  --ink: #172033;
  --muted: #667085;
  --line: #eadcf4;
  --soft: #faf7ff;
  --surface: #ffffff;
  --navy: #3b0764;
  --blue: #7e22ce;
  --blue-dark: #581c87;
  --blue-soft: #f7edff;
  --cyan: #c084fc;
  --success: #067647;
  --success-soft: #ecfdf3;
  --warning: #b54708;
  --warning-soft: #fffaeb;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: "Sarabun", "Leelawadee UI", Tahoma, sans-serif; color: var(--ink); background: var(--soft); line-height: 1.55; }
button, input, select, textarea { font: inherit; }
a { color: var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.28; }
p { color: var(--muted); }
.hidden { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 50; color: #fff; background: linear-gradient(110deg, #2e1065, #6b21a8 62%, #7e22ce); box-shadow: 0 6px 24px rgba(59, 7, 100, .2); }
.topbar-main { width: min(1380px, calc(100% - 40px)); min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto; padding: 10px 0; }
.topbar-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.topbar-nav { background: rgba(255,255,255,.98); border-bottom: 1px solid #eadcf4; }
.brand { min-width: 0; display: inline-flex; align-items: center; gap: 15px; color: #fff; text-decoration: none; }
.brand-copy { display: grid; max-width: 780px; line-height: 1.28; }
.brand-copy > span { color: #f4eaff; font-size: .9rem; font-weight: 700; }
.brand strong { font-size: 1.05rem; line-height: 1.35; }
.brand small, .account-menu small { color: #eadcff; font-size: .78rem; }
.brand-logos { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 6px; border: 1px solid rgba(255,255,255,.3); border-radius: 16px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(36,3,64,.18); backdrop-filter: blur(6px); }
.brand-logo-tile { position: relative; display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; border: 1px solid rgba(107,33,168,.12); border-radius: 11px; background: linear-gradient(145deg, #fff, #fcf9ff); box-shadow: 0 3px 9px rgba(36,3,64,.14); }
.brand-logo-tile img { position: absolute; display: block; object-fit: contain; }
.brand-logo-primary img { inset: 3px 9px; width: calc(100% - 18px); height: calc(100% - 6px); }
.brand-logo-district img { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
.brand-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #08365f; background: linear-gradient(145deg, #fff, #a9e6f5); font-size: 1.45rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 5px 12px rgba(0,0,0,.18); }
.brand-mark.large { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; font-size: 2rem; }
.main-nav { width: min(1380px, calc(100% - 40px)); display: flex; align-items: center; gap: 4px; margin: 0 auto; padding: 7px 0; overflow-x: auto; }
.main-nav a { padding: 8px 12px; color: #65407f; border-radius: 9px; text-decoration: none; white-space: nowrap; font-size: .9rem; font-weight: 700; }
.main-nav a:hover { color: #6b21a8; background: #f7edff; }
.main-nav a.active { color: #fff; background: linear-gradient(115deg, var(--blue), var(--blue-dark)); box-shadow: 0 4px 10px rgba(88,28,135,.18); }
.account-menu { display: flex; align-items: center; gap: 11px; }
.account-menu > span { display: grid; text-align: right; }
.account-menu a, .link-button { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 7px 10px; text-decoration: none; cursor: pointer; }
.account-menu a:hover, .link-button:hover { background: rgba(255,255,255,.18); }
.account-menu form { margin: 0; }
.nav-toggle { display: none; width: 44px; height: 44px; align-content: center; justify-items: center; gap: 5px; padding: 0; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); border-radius: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 21px; height: 2px; border-radius: 999px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.page-shell { width: min(1380px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 56px; }
.site-footer { padding: 24px; text-align: center; color: #7b8799; font-size: .85rem; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin-bottom: 6px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.page-heading p { margin-bottom: 0; }
.heading-actions, .toolbar, .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.heading-actions form { display: inline-flex; margin: 0; }
.eyebrow { margin-bottom: 6px; color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.card { margin-bottom: 22px; padding: clamp(20px, 3vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.card-header h2 { margin-bottom: 4px; font-size: 1.22rem; }
.card-header p { margin-bottom: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card { position: relative; overflow: hidden; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-card::after { content: ""; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background: var(--blue-soft); }
.stat-card strong { display: block; color: #6b21a8; font-size: 2rem; line-height: 1.1; letter-spacing: -.04em; }
.stat-card span { color: var(--muted); font-size: .9rem; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 22px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature-card { display: block; padding: 20px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: linear-gradient(145deg, #fff, #f8fbff); text-decoration: none; transition: .18s ease; }
.feature-card:hover { transform: translateY(-2px); border-color: #c084fc; box-shadow: 0 9px 24px rgba(126, 34, 206, .12); }
.feature-card strong { display: block; margin-bottom: 5px; color: #6b21a8; }
.feature-card span { color: var(--muted); font-size: .9rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 16px; border: 1px solid transparent; border-radius: 9px; font-weight: 700; text-decoration: none; cursor: pointer; transition: .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(126,34,206,.24); outline-offset: 2px; }
.btn-primary { color: #fff; background: linear-gradient(120deg, var(--blue), var(--blue-dark)); box-shadow: 0 5px 12px rgba(126,34,206,.24); }
.btn-secondary { color: #344054; background: #fff; border-color: #cfd7e3; }
.btn-success { color: #fff; background: var(--success); }
.btn-danger { color: var(--danger); background: var(--danger-soft); border-color: #fda29b; }
.btn-ghost { color: var(--blue); background: var(--blue-soft); }
.btn-sm { min-height: 34px; padding: 6px 10px; font-size: .84rem; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.row-actions form { display: inline-flex; margin: 0; }
.btn-block { width: 100%; }
.text-link { display: inline-block; margin-top: 16px; text-decoration: none; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-group { min-width: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { display: block; margin-bottom: 7px; color: #344054; font-size: .9rem; font-weight: 700; }
.required::after { content: " *"; color: var(--danger); }
.form-control { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); background: #fff; border: 1px solid #cfd7e3; border-radius: 9px; }
.form-control:focus { border-color: #a855f7; box-shadow: 0 0 0 4px rgba(126,34,206,.1); outline: 0; }
textarea.form-control { min-height: 100px; resize: vertical; }
.help-text { display: block; margin-top: 5px; color: #7b8799; font-size: .8rem; }
.input-group { display: flex; gap: 8px; }
.input-group .form-control { flex: 1; }
.filter-bar { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(180px, auto) auto; gap: 10px; margin-bottom: 18px; }
.user-filter-bar { grid-template-columns: minmax(240px, 1fr) 170px 170px auto auto; }
.report-filter-bar, .audit-filter-bar { grid-template-columns: minmax(260px, 1fr) 210px auto auto; }
.user-actions { min-width: 230px; flex-wrap: wrap; }
.user-actions form { margin: 0; }
.school-name-input { margin-top: 7px; min-width: 260px; }
.schedule-grid { display: grid; grid-template-columns: repeat(2, minmax(145px, 1fr)); gap: 8px; }
.schedule-grid label { color: var(--muted); font-size: .78rem; font-weight: 700; }
.schedule-grid .form-control { margin-top: 4px; min-height: 38px; padding: 7px 9px; font-size: .82rem; }
.badge-window-open { color: var(--success); background: var(--success-soft); }
.badge-window-upcoming { color: var(--warning); background: var(--warning-soft); }
.badge-window-closed { color: var(--danger); background: var(--danger-soft); }
.badge-audit { color: #6b21a8; background: #f4e8ff; }
.audit-detail { display: block; min-width: 220px; max-width: 420px; overflow-wrap: anywhere; white-space: normal; color: #475467; background: #f8f5fb; border-radius: 7px; padding: 7px 8px; font-family: Consolas, monospace; font-size: .75rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.data-table th { color: #344054; background: #f8fafc; font-size: .82rem; white-space: nowrap; }
.data-table tbody tr:hover { background: #f8fbff; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .number { text-align: right; font-variant-numeric: tabular-nums; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.drag-handle { color: #98a2b3; cursor: grab; user-select: none; font-size: 1.2rem; }
.drag-row.dragging { opacity: .45; background: var(--blue-soft); }
.empty-state { padding: 42px 20px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: 5px; color: #344054; font-size: 1.06rem; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-open, .badge-active { color: var(--success); background: var(--success-soft); }
.badge-draft { color: var(--warning); background: var(--warning-soft); }
.badge-closed, .badge-cancelled, .badge-suspended { color: var(--danger); background: var(--danger-soft); }
.badge-admin { color: #5925dc; background: #f4f3ff; }
.badge-evaluator { color: #175cd3; background: #eff8ff; }
.badge-school { color: #026aa2; background: #f0f9ff; }
.progress { height: 8px; overflow: hidden; border-radius: 999px; background: #e9eef5; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }

.alert { margin-bottom: 18px; padding: 13px 15px; border: 1px solid; border-radius: 10px; }
.alert-success { color: var(--success); background: var(--success-soft); border-color: #abefc6; }
.alert-danger { color: var(--danger); background: var(--danger-soft); border-color: #fecdca; }
.alert-warning { color: var(--warning); background: var(--warning-soft); border-color: #fedf89; }
.notice { padding: 14px; color: #6b21a8; background: var(--blue-soft); border-left: 4px solid var(--blue); border-radius: 8px; }
.error-list { margin: 8px 0 0; padding-left: 20px; }

.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 28px; background: radial-gradient(circle at 10% 10%, #f3e8ff, transparent 34%), radial-gradient(circle at 90% 80%, #ead7ff, transparent 36%), #faf7ff; }
.login-card { width: min(520px, 100%); padding: 42px 40px; text-align: center; background: rgba(255,255,255,.98); border: 1px solid #eadcf4; border-radius: 22px; box-shadow: 0 26px 65px rgba(88,28,135,.16); }
.login-card form { margin-top: 24px; text-align: left; }
.login-title { display: grid; gap: 6px; margin: 0; color: #581c87; line-height: 1.42; }
.login-title span { display: block; }
.login-title-primary { font-size: clamp(1.35rem, 3vw, 1.65rem); font-weight: 800; }
.login-title-secondary { color: #6b21a8; font-size: clamp(1.05rem, 2.5vw, 1.25rem); font-weight: 750; }
.login-title-detail { color: #72548a; font-size: clamp(.88rem, 2vw, 1rem); font-weight: 600; }
.auth-logo-lockup { display: flex; align-items: center; gap: 12px; }
.auth-logo-lockup.centered { justify-content: center; margin-bottom: 20px; }
.login-logos { margin-bottom: 22px; }
.auth-logo-card { position: relative; display: grid; place-items: center; width: 92px; height: 92px; padding: 7px; overflow: hidden; border: 1px solid #dfd4e8; border-radius: 15px; background: #fff; box-shadow: 0 8px 20px rgba(88,28,135,.11); }
.auth-logo-card img { position: absolute; inset: 7px; display: block; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: contain; }
.auth-logo-district { width: 92px; height: 92px; padding: 7px; border-radius: 15px; background: #fff; }
.auth-logo-district img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
.setup-card { width: min(560px, 100%); padding: 46px; text-align: center; background: rgba(255,255,255,.97); border: 1px solid #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(8,31,56,.14); }

.exam-list { display: grid; gap: 12px; }
.exam-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(90px, .5fr)) auto; align-items: center; gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; }
.exam-row strong { display: block; }
.exam-row small { color: var(--muted); }
.metric { color: #344054; font-size: .85rem; }
.metric strong { color: #0b3964; font-size: 1.1rem; }
.danger-zone { border-color: #fecdca; background: #fffafa; }
.evaluation-context-card { padding: 18px 22px; }
.evaluation-context-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 12px; }
.evaluation-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: start; gap: 22px; }
.evaluation-sidebar { position: sticky; top: 96px; padding: 16px; }
.evaluation-sidebar nav { display: grid; gap: 5px; }
.evaluation-sidebar nav a { display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: 8px; padding: 10px; color: #475467; border-radius: 9px; font-size: .86rem; text-decoration: none; }
.evaluation-sidebar nav a:hover { color: var(--blue); background: var(--blue-soft); }
.evaluation-sidebar nav a.active { color: #fff; background: linear-gradient(115deg, var(--blue), var(--blue-dark)); box-shadow: 0 5px 12px rgba(21,94,239,.2); }
.evaluation-sidebar nav a span { display: inline-grid; place-items: center; min-height: 27px; padding: 2px 5px; border-radius: 7px; color: var(--blue); background: #eaf2ff; font-weight: 800; }
.evaluation-sidebar nav a.active span { color: #0b3964; background: #fff; }
.evaluation-form-card { min-width: 0; }
.form-section-title { margin: 30px 0 14px; padding: 10px 12px; color: #0b3964; background: linear-gradient(90deg, var(--blue-soft), transparent); border-left: 4px solid var(--blue); border-radius: 8px; font-size: 1.04rem; }
.form-section-title:first-of-type { margin-top: 0; }
.rubric-list { display: grid; gap: 13px; min-width: 0; padding: 0; border: 0; }
.rubric-list legend { margin-bottom: 12px; color: #344054; font-weight: 800; }
.rubric-choice { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 16px; padding: 18px; color: #344054; background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: .16s ease; }
.rubric-choice:hover { border-color: #84adff; background: #f8fbff; box-shadow: 0 6px 16px rgba(21,94,239,.07); }
.rubric-choice.selected { padding: 17px; border: 2px solid var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(21,94,239,.08); }
.rubric-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rubric-score { display: inline-flex; justify-content: center; padding: 6px 10px; color: #344054; background: #f2f4f7; border-radius: 999px; font-size: .83rem; font-weight: 800; }
.rubric-choice.selected .rubric-score { color: #fff; background: var(--blue); }
.rubric-criteria { white-space: normal; }
.evaluation-notes { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.large-textarea { min-height: 230px !important; }
.evaluation-save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 28px -30px -30px; padding: 15px 30px; color: var(--muted); background: rgba(255,255,255,.95); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); backdrop-filter: blur(8px); }
.evaluation-summary-table th:not(:first-child), .evaluation-summary-table td:not(:first-child) { white-space: nowrap; }
.score-pill { display: inline-grid; min-width: 34px; min-height: 30px; place-items: center; padding: 3px 7px; border-radius: 999px; font-size: .82rem; font-weight: 800; }
.score-pill.score-5 { color: #067647; background: #dcfae6; }.score-pill.score-4 { color: #3538cd; background: #e0eaff; }.score-pill.score-3 { color: #b54708; background: #fef0c7; }.score-pill.score-2 { color: #b93815; background: #ffead5; }.score-pill.score-1 { color: #b42318; background: #fee4e2; }
.section-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.section-check-grid label { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.section-check-grid label:hover { border-color: #84adff; background: #f8fbff; }
.section-check-grid input { margin-top: 4px; }
.section-check-grid span { display: grid; color: var(--muted); font-size: .82rem; }
.section-check-grid strong { color: #344054; }
.manual-reference { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding: 12px 14px; color: #6b21a8; background: #f7edff; border: 1px solid #e9d5ff; border-radius: 10px; }
.manual-reference span { color: #72548a; font-size: .86rem; }
.weighted-score { display: inline-flex; flex: 0 0 auto; padding: 8px 12px; color: #fff; background: linear-gradient(115deg, var(--blue), var(--blue-dark)); border-radius: 999px; font-size: .86rem; font-weight: 800; }
.assessment-meta { margin-bottom: 24px; }
.manual-overview-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 14px; margin-bottom: 24px; }
.manual-overview-card { padding: 18px; background: #fcfaff; border: 1px solid var(--line); border-radius: 12px; }
.manual-overview-card h3 { margin-bottom: 10px; color: #581c87; font-size: 1rem; }
.manual-overview-card ul, .guide-list { margin: 0; padding-left: 22px; color: #475467; }
.manual-overview-card li + li, .guide-list li + li { margin-top: 7px; }
.rubric-score { align-content: start; gap: 1px; }
.rubric-score small { display: block; font-size: .7rem; font-weight: 700; }
.evidence-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.evidence-check-grid label { display: flex; align-items: flex-start; gap: 10px; padding: 12px; color: #475467; background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.evidence-check-grid label:hover { border-color: #c084fc; background: #fcfaff; }
.evidence-check-grid input { flex: 0 0 auto; margin-top: 5px; accent-color: var(--blue); }
.evidence-notes { margin-top: 14px; }
.action-plan-card { margin-top: 24px; padding: 16px 18px; background: #fffaf5; border: 1px solid #fed7aa; border-radius: 12px; }
.action-plan-card summary { color: #9a3412; font-weight: 800; cursor: pointer; }
.action-plan-card .form-grid { margin-top: 16px; }
.action-plan-card.is-disabled { background: #f8fafc; border-color: #e4e7ec; }
.action-plan-card.is-disabled summary { color: #98a2b3; cursor: not-allowed; pointer-events: none; user-select: none; }
.action-plan-help { margin: 10px 0 0; color: #7c2d12; font-size: .86rem; }
.guidance-notes-grid { align-items: stretch; margin-top: 24px; }
.guidance-group { min-width: 0; padding: 16px; background: #fcfaff; border: 1px solid #e9d5ff; border-radius: 12px; }
.guidance-group h3 { margin: 0; color: #581c87; font-size: 1rem; }
.guidance-group > p { margin: 5px 0 12px; color: var(--muted); font-size: .82rem; }
.guidance-group.compact { padding: 13px; background: rgba(255,255,255,.78); border-color: #fed7aa; }
.guidance-group.compact h3 { min-height: 42px; color: #9a3412; font-size: .92rem; }
.guidance-options { display: grid; gap: 8px; }
.guidance-option { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px; color: #475467; background: #fff; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: .86rem; line-height: 1.45; transition: border-color .15s, background .15s; }
.guidance-option:hover { border-color: #c084fc; background: #faf5ff; }
.guidance-option:has(input:checked) { color: #581c87; background: #f4e8ff; border-color: #c084fc; }
.guidance-option input { flex: 0 0 auto; margin-top: 4px; accent-color: var(--blue); }
.guidance-custom { margin-top: 12px; }
.guidance-custom textarea { min-height: 92px; background: #fff; }
.quality-label { display: inline-flex; padding: 4px 9px; color: #6b21a8; background: #f4e8ff; border-radius: 999px; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.evaluation-summary-table th small { display: block; color: #98a2b3; font-weight: 600; }
.supervision-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.supervision-team-card { min-width: 0; }
.team-number { display: grid; width: 48px; height: 48px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue), #9333ea); border-radius: 14px; font-size: 1.35rem; font-weight: 900; box-shadow: 0 8px 18px rgba(109,40,217,.2); }
.committee-member-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: committee; }
.committee-member-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #fcfaff; border: 1px solid #eadcff; border-radius: 10px; counter-increment: committee; }
.committee-member-list li > div { display: grid; min-width: 0; }
.committee-member-list strong::before { content: counter(committee) ". "; color: #7e22ce; }
.committee-member-list span { color: #475467; font-size: .84rem; }
.committee-member-list small { color: #7c668f; overflow-wrap: anywhere; }
.supervision-schedule-table td { vertical-align: top; }
.supervision-schedule-table th:nth-child(1) { min-width: 130px; }
.supervision-schedule-table th:nth-child(2) { min-width: 92px; }

@media (max-width: 1100px) {
  .topbar-main { width: min(100% - 24px, 1380px); }
  .brand { flex: 1; }
  .account-menu > span { display: none; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-column { grid-template-columns: 1fr; }
  .exam-row { grid-template-columns: minmax(0, 1fr) repeat(2, auto); }
  .exam-row .metric:nth-of-type(3) { display: none; }
  .evaluation-layout { grid-template-columns: 1fr; }
  .evaluation-sidebar { position: static; }
  .evaluation-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-overview-grid { grid-template-columns: 1fr; }
  .supervision-team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .page-shell { width: min(100% - 24px, 1380px); padding-top: 22px; }
  .topbar-main { width: calc(100% - 24px); align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .brand { flex-basis: 100%; align-items: center; }
  .brand-logos { gap: 5px; padding: 4px; border-radius: 13px; }
  .brand-logo-tile { width: 43px; height: 43px; border-radius: 9px; }
  .brand-copy { max-width: none; }
  .brand strong { font-size: .9rem; line-height: 1.35; }
  .brand-copy > span { font-size: .78rem; }
  .brand small { font-size: .68rem; }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .account-menu a { display: none; }
  .nav-toggle { display: grid; }
  .topbar-nav { background: #fff; }
  .main-nav { width: calc(100% - 24px); display: none; grid-template-columns: 1fr; align-items: stretch; gap: 3px; max-height: calc(100vh - 145px); padding: 8px 0 12px; overflow-x: hidden; overflow-y: auto; }
  .main-nav.open { display: grid; }
  .main-nav a { width: 100%; padding: 11px 14px; border-radius: 8px; }
  .page-heading, .card-header { align-items: stretch; flex-direction: column; }
  .heading-actions .btn { flex: 1; }
  .stats-grid, .feature-grid, .form-grid, .form-grid.cols-3, .filter-bar { grid-template-columns: 1fr; }
  .form-group.full { grid-column: auto; }
  .auth-page { padding: 12px; }
  .login-card { padding: 30px 24px; }
  .setup-card { padding: 30px 22px; }
  .exam-row { grid-template-columns: 1fr 1fr; }
  .exam-row > div:first-child, .exam-row > a { grid-column: 1 / -1; }
  .exam-row .btn { width: 100%; }
  .evaluation-context-form { grid-template-columns: 1fr; }
  .evaluation-sidebar nav { grid-template-columns: 1fr; }
  .rubric-choice { grid-template-columns: 1fr; }
  .evaluation-save-bar { align-items: stretch; flex-direction: column; margin: 24px -18px -18px; padding: 14px 18px; }
  .evaluation-save-bar .btn { width: 100%; }
  .section-check-grid { grid-template-columns: 1fr; }
  .manual-reference { align-items: flex-start; flex-direction: column; }
  .evidence-check-grid { grid-template-columns: 1fr; }
}

@media print {
  .topbar, .site-footer, .no-print, .alert { display: none !important; }
  body { background: #fff; }
  .page-shell { width: 100%; padding: 0; }
  .card { border: 0; box-shadow: none; }
}