:root { --ink:#15251f; --muted:#5e6e67; --surface:#fff; --canvas:#f3f5ef; --accent:#e46f3d; --accent-dark:#b94b22; --green:#164c3a; --line:#d9dfd8; --danger:#a62f2f; }
* { box-sizing:border-box; }
html { font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--canvas); color:var(--ink); }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 0%, #f6decf 0, transparent 30rem), var(--canvas); }
a { color:inherit; } button, input { font:inherit; }
.page-shell { min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; }
.site-header { min-height:5rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1rem clamp(1.25rem, 5vw, 5rem); border-bottom:1px solid color-mix(in srgb, var(--line) 75%, transparent); }
.site-header > * { display:contents; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; font-weight:800; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:2.25rem; aspect-ratio:1; border-radius:.7rem; background:var(--green); color:white; }
.primary-nav { display:flex; align-items:center; gap:1.25rem; }
.primary-nav a { text-decoration:none; font-weight:650; }
.primary-nav a:focus-visible, .button:focus-visible, input:focus-visible { outline:3px solid #1a6fbd; outline-offset:3px; }
.primary-nav .nav-login { padding:.7rem 1rem; border:1px solid var(--ink); border-radius:999px; }
.logout-form { margin:0; }
.nav-logout { padding:.7rem 1rem; border:1px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); font-weight:650; cursor:pointer; }
.nav-logout:hover { background:var(--surface); }
.nav-logout:focus-visible { outline:3px solid #1a6fbd; outline-offset:3px; }
.main-content { width:min(1180px, calc(100% - 2.5rem)); margin:0 auto; padding:clamp(3rem, 8vw, 7.5rem) 0; }
.hero { max-width:780px; }
.eyebrow { margin:0 0 .8rem; color:var(--accent-dark); font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; max-width:14ch; font-family:Georgia, "Times New Roman", serif; font-size:clamp(3rem, 8vw, 6.6rem); font-weight:500; line-height:.94; letter-spacing:-.055em; }
h2 { margin:.8rem 0 .5rem; font-size:1.3rem; }
.lead { max-width:650px; margin:1.5rem 0 0; color:var(--muted); font-size:clamp(1.1rem, 2vw, 1.35rem); line-height:1.6; }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.button { display:inline-flex; min-height:3rem; align-items:center; justify-content:center; padding:.75rem 1.25rem; border:1px solid transparent; border-radius:.65rem; cursor:pointer; text-decoration:none; font-weight:750; }
.button.primary { background:var(--accent); color:#1f160f; }
.button.primary:hover { background:#ef8351; }
.button.secondary { border-color:var(--line); background:rgba(255,255,255,.7); }
.button.full { width:100%; }
.button:disabled { cursor:wait; opacity:.65; }
.feature-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:clamp(4rem, 9vw, 8rem); }
.card, .form-card, .status-panel { border:1px solid var(--line); border-radius:1rem; background:rgba(255,255,255,.82); box-shadow:0 16px 50px rgba(26,49,38,.06); }
.card { min-height:15rem; padding:1.5rem; }
.card p { color:var(--muted); line-height:1.55; }
.step { color:var(--accent-dark); font-size:.75rem; font-weight:850; letter-spacing:.12em; }
.auth-layout { display:grid; grid-template-columns:1.15fr .85fr; align-items:start; gap:clamp(2rem, 8vw, 7rem); }
.auth-layout h1, .status-panel h1 { font-size:clamp(2.8rem, 6vw, 5rem); }
.form-card { padding:clamp(1.4rem, 4vw, 2.4rem); }
.field { display:grid; gap:.45rem; margin-bottom:1.25rem; }
.field label { font-weight:750; }
.field input { width:100%; min-height:3rem; padding:.7rem .8rem; border:1px solid #aab7b0; border-radius:.55rem; background:white; color:var(--ink); }
.validation-message { color:var(--danger); font-size:.9rem; }
.alert { margin-bottom:1.25rem; padding:.8rem 1rem; border-radius:.55rem; }
.alert.error { border:1px solid #e5b0b0; background:#fff1f0; color:#792323; }
.status-panel { max-width:780px; padding:clamp(1.5rem, 5vw, 3.5rem); }
.status-panel p:not(.eyebrow) { color:var(--muted); line-height:1.6; }
.site-footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem clamp(1.25rem, 5vw, 5rem); color:var(--muted); font-size:.85rem; border-top:1px solid var(--line); }
.culture-selector { display:flex; align-items:center; gap:.5rem; }
.culture-option { display:inline-flex; align-items:center; justify-content:center; min-width:3.5rem; min-height:2.75rem; padding:.35rem .5rem; border:1px solid var(--line); border-radius:.7rem; background:var(--surface); line-height:1; text-decoration:none; box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent); }
.culture-option img { display:block; width:2.25rem; height:2.25rem; object-fit:contain; }
.culture-option:hover { background:var(--surface); border-color:var(--line); }
.culture-option:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
h1:focus { outline:none; }
#blazor-error-ui { display:none; position:fixed; right:1rem; bottom:1rem; z-index:1000; max-width:30rem; padding:1rem; border-radius:.6rem; background:#652626; color:white; box-shadow:0 12px 40px rgba(0,0,0,.2); }
#blazor-error-ui .dismiss { margin-left:1rem; cursor:pointer; }
#blazor-error-ui a { color:white; font-weight:700; }
@media (max-width:760px) { .site-header { min-height:4.5rem; } .primary-nav a:first-child { display:none; } .main-content { width:min(100% - 2rem, 42rem); padding:3.5rem 0; } .feature-grid, .auth-layout { grid-template-columns:1fr; } .feature-grid { margin-top:4rem; } .card { min-height:auto; } .site-footer { flex-direction:column; } }
@media (prefers-reduced-motion:no-preference) { .button { transition:background-color .15s ease, transform .15s ease; } .button:hover { transform:translateY(-1px); } }
.workspace-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:3rem; }
.workspace-heading h1 { font-size:clamp(3rem, 6vw, 5rem); }
.muted, .empty-state p { color:var(--muted); }
.empty-state { margin-top:1rem; padding:2rem; border:1px dashed #aab7b0; border-radius:1rem; }
.notice-list { display:grid; gap:.8rem; margin-top:1rem; }
.notice-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1.5rem; padding:1.25rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(255,255,255,.78); }
.notice-card.unread { border-left:4px solid var(--accent); }
.notice-card h3, .notice-card p { margin:.3rem 0; }
.notice-date { color:var(--muted); font-size:.8rem; }
.acknowledged { color:var(--green); font-size:.9rem; font-weight:800; }
@media (max-width:620px) { .notice-card { grid-template-columns:1fr; } .notice-card .button { justify-self:start; } }
.flow-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 7vw, 6rem); align-items:start; }
.student-summary { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:2rem; padding:1.5rem; border-bottom:1px solid var(--line); }
.student-summary h2 { margin:.2rem 0; font-family:Georgia, serif; font-size:2rem; }
.state-pill { padding:.5rem .8rem; border-radius:999px; background:#dfe9df; color:var(--green); font-size:.85rem; font-weight:800; }
.pickup-current, .pickup-form { max-width:660px; }
fieldset { display:grid; gap:.7rem; margin:0 0 1.25rem; padding:0; border:0; }
legend { margin-bottom:.7rem; font-weight:800; }
.choice { display:flex; gap:.6rem; align-items:center; }
@media (max-width:760px) { .flow-grid { grid-template-columns:1fr; } .student-summary { align-items:flex-start; flex-direction:column; } }
.section-heading { display:flex; justify-content:space-between; align-items:end; }
.section-heading h2, .workspace-section h2 { margin-bottom:.2rem; font-size:1.65rem; }
.workspace-section { margin-top:4rem; }
.pickup-list { display:grid; gap:.75rem; margin-top:1rem; }
.pickup-card { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.15rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(255,255,255,.86); }
.pickup-person { display:flex; align-items:center; gap:1rem; }
.pickup-person h3, .pickup-person p { margin:.15rem 0; }
.pickup-person p { color:var(--muted); font-size:.9rem; }
.avatar { display:grid; flex:0 0 auto; place-items:center; width:2.8rem; aspect-ratio:1; border-radius:50%; background:#dfe9df; color:var(--green); font-weight:850; }
.pickup-actions { display:flex; gap:.6rem; }
@media (max-width:680px) { .pickup-card { align-items:flex-start; flex-direction:column; } .pickup-actions { width:100%; } .pickup-actions .button { flex:1; } }
.alert.success { border:1px solid #a9c9b6; background:#edf8f0; color:var(--green); }
.admin-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,380px); gap:2rem; align-items:start; }
.account-list { display:grid; gap:.75rem; margin-top:1rem; }
.account-card { display:grid; grid-template-columns:1fr auto; gap:1.5rem; padding:1.1rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(255,255,255,.82); }
.account-card h3, .account-card p { margin:.15rem 0; }
.account-controls { display:flex; align-items:end; gap:.7rem; }
.account-controls > label:not(.choice) { display:grid; gap:.35rem; font-size:.8rem; font-weight:750; }
.account-controls select { min-height:2.75rem; padding:.5rem; border:1px solid #aab7b0; border-radius:.5rem; background:white; }
.invitation-result { display:grid; gap:.6rem; margin-top:1rem; padding:1rem; border-radius:.6rem; background:#f0eee4; overflow-wrap:anywhere; }
.invitation-result code { user-select:all; }
.invitation-result p { margin:0; color:var(--muted); font-size:.85rem; }
@media (max-width:900px) { .admin-grid { grid-template-columns:1fr; } .account-card { grid-template-columns:1fr; } .account-controls { align-items:flex-start; flex-wrap:wrap; } }
.admin-nav { display:flex; gap:.5rem; margin:-1.5rem 0 2.5rem; border-bottom:1px solid var(--line); }
.admin-nav a { padding:.75rem .9rem; color:var(--muted); text-decoration:none; font-weight:750; }
.admin-nav a.active { border-bottom:3px solid var(--accent); color:var(--ink); }
.device-filter { margin-bottom:1.25rem; }
.pairing-admin { display:grid; grid-template-columns:1.2fr 1fr .7fr 1fr auto; align-items:end; gap:1rem; max-width:none; margin-bottom:1.5rem; }.pairing-admin .field { margin:0; }.pairing-admin p { margin:.25rem 0; }
.device-list { display:grid; gap:.75rem; }
.device-card { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.2rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(255,255,255,.82); }
.device-title { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; }
.device-title h2, .device-card p { margin:.15rem 0; }
.device-metadata { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin:1rem 0 0; }
.device-metadata div { display:grid; gap:.15rem; }
.device-metadata dt { color:var(--muted); font-size:.75rem; font-weight:750; }
.device-metadata dd { margin:0; font-size:.9rem; }
@media (max-width:980px) { .pairing-admin { grid-template-columns:1fr 1fr; }.pairing-admin > div:first-child { grid-column:1/-1; } }
@media (max-width:680px) { .admin-nav { overflow-x:auto; } .admin-nav a { white-space:nowrap; } .device-card { align-items:flex-start; flex-direction:column; }.pairing-admin { grid-template-columns:1fr; }.pairing-admin > div:first-child { grid-column:auto; } }
.audit-filters { display:flex; align-items:end; flex-wrap:wrap; gap:.75rem; margin-bottom:1.5rem; }
.audit-filters label { display:grid; gap:.35rem; min-width:12rem; font-size:.8rem; font-weight:750; }
.audit-filters input, .audit-filters select { min-height:2.8rem; padding:.55rem .7rem; border:1px solid #aab7b0; border-radius:.5rem; background:white; }
.audit-list { display:grid; border:1px solid var(--line); border-radius:.8rem; overflow:hidden; }
.audit-row { display:grid; grid-template-columns:11rem minmax(12rem,1fr) minmax(12rem,1fr) 6rem; align-items:center; gap:1rem; padding:1rem; background:rgba(255,255,255,.82); }
.audit-row + .audit-row { border-top:1px solid var(--line); }
.audit-row div { display:grid; gap:.15rem; }.audit-row span, .audit-row time { color:var(--muted); font-size:.85rem; }.audit-row code { overflow:hidden; text-overflow:ellipsis; }
.audit-more { margin-top:1rem; }
@media (max-width:780px) { .audit-row { grid-template-columns:1fr; gap:.35rem; } }
.content-tabs { display:flex; gap:.5rem; margin-bottom:1.5rem; }
.content-tabs button { padding:.7rem 1rem; border:1px solid var(--line); border-radius:.6rem; background:white; cursor:pointer; font-weight:750; }
.content-tabs button.active { border-color:var(--accent); background:#f9e4d8; }
.content-list { display:grid; gap:.75rem; }.content-card { display:grid; grid-template-columns:1fr auto; gap:1rem; padding:1.1rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(255,255,255,.82); }.content-card.inactive { opacity:.7; }.content-card h2, .content-card p { margin:.15rem 0; }.content-card small { color:var(--muted); }.content-actions { display:flex; align-items:center; gap:.5rem; }
.field textarea { width:100%; min-height:6rem; padding:.7rem .8rem; border:1px solid #aab7b0; border-radius:.55rem; resize:vertical; background:white; color:var(--ink); }
@media (max-width:680px) { .content-card { grid-template-columns:1fr; }.content-actions { flex-wrap:wrap; } }
.pairing-screen { display:grid; justify-items:center; max-width:54rem; margin:4rem auto; text-align:center; }.pairing-screen h1 { max-width:12ch; }.pairing-screen p { max-width:38rem; color:var(--muted); font-size:1.15rem; }.pairing-code { margin:2rem 0; font-size:clamp(4rem,14vw,9rem); font-weight:850; letter-spacing:.14em; color:var(--green); }
.board-loading { font-size:1.4rem; }.board-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2rem; }.board-heading h1 { max-width:none; }.board-heading time { font-size:2.5rem; font-weight:800; }.board-messages { display:grid; gap:.75rem; margin-bottom:2rem; }.board-message { padding:1.25rem 1.5rem; border-left:6px solid #477b68; border-radius:.7rem; background:white; }.board-message.tone-warning { border-color:#d69a25; }.board-message.tone-danger { border-color:#b73c3c; }.board-message.tone-success { border-color:#2f895d; }.board-message h2, .board-message p { margin:.2rem 0; }.board-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.board-student { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:8rem; padding:1.5rem; border:1px solid var(--line); border-radius:1rem; background:white; }.board-student h2 { font-family:Georgia,serif; font-size:2rem; }.board-student h2, .board-student p { margin:.15rem 0; }.board-status { padding:.55rem .8rem; border-radius:999px; background:#dfe9df; color:var(--green); font-weight:800; }.board-empty { text-align:center; }
@media (max-width:760px) { .board-grid { grid-template-columns:1fr; }.board-heading { align-items:flex-start; flex-direction:column; }.pairing-code { letter-spacing:.08em; } }
.notification-settings { max-width:760px; }.notification-actions { margin:1rem 0; }.subscription-list { display:grid; gap:.65rem; margin-top:1rem; }.subscription-list article { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:.75rem; background:white; }.subscription-list article > div:first-child { display:grid; gap:.25rem; }.subscription-list span { color:var(--muted); font-size:.85rem; }
@media (max-width:680px) { .subscription-list article { align-items:flex-start; flex-direction:column; } }
.guardian-preferences, .pickup-history { max-width:760px; }.preference-form { display:grid; grid-template-columns:1fr 10rem 1fr auto; align-items:end; gap:1rem; padding:1.25rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(255,255,255,.82); }.preference-form .field, .preference-form fieldset { margin:0; }.history-list { display:grid; gap:.5rem; }.history-list article { display:flex; justify-content:space-between; gap:1rem; padding:.9rem 1rem; border-bottom:1px solid var(--line); }.history-list article div { display:grid; gap:.2rem; }.history-list span, .history-list time { color:var(--muted); font-size:.85rem; }
@media (max-width:760px) { .preference-form { grid-template-columns:1fr; } }
.attendance-summary { display:flex; gap:1rem; margin-bottom:1.5rem; }.attendance-summary article { display:grid; min-width:9rem; padding:1rem; border:1px solid var(--line); border-radius:.7rem; background:white; }.attendance-summary strong { font-size:1.8rem; }.attendance-summary span { color:var(--muted); font-size:.8rem; }.attendance-search { max-width:28rem; }.attendance-list { display:grid; gap:.65rem; }.attendance-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(255,255,255,.82); }.attendance-row.present { border-left:5px solid #2f895d; }.attendance-row h2 { margin:.1rem 0; }
@media (max-width:620px) { .attendance-row { align-items:flex-start; flex-direction:column; }.attendance-summary { flex-wrap:wrap; } }
.stack, .student-list { display:grid; gap:1rem; }
.student-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:.75rem; background:rgba(255,255,255,.82); }
.student-row h3, .student-row p { margin:.15rem 0; }
.student-actions { display:flex; align-items:center; gap:.6rem; }
.field select { width:100%; min-height:3rem; padding:.7rem .8rem; border:1px solid #aab7b0; border-radius:.55rem; background:white; }
@media (max-width:600px) { .student-row { align-items:flex-start; flex-direction:column; } }
.status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.health-card { display:flex; align-items:flex-start; gap:1rem; padding:1.25rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(255,255,255,.82); }
.health-card h2, .health-card p { margin:.1rem 0 .4rem; }
.health-dot { flex:0 0 auto; width:.75rem; height:.75rem; margin-top:.4rem; border-radius:50%; background:#a6a6a6; }
.health-dot.healthy { background:#2f895d; box-shadow:0 0 0 4px #dcefe4; }
.health-dot.warning { background:#d69a25; box-shadow:0 0 0 4px #f8ebcb; }
.health-dot.failed { background:#b73c3c; box-shadow:0 0 0 4px #f7dada; }
.metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; margin-top:1rem; }
.metrics article { display:grid; gap:.25rem; padding:1rem; border:1px solid var(--line); border-radius:.7rem; background:white; }
.metrics strong { font-size:1.5rem; }.metrics span { color:var(--muted); font-size:.8rem; }
@media (max-width:800px) { .status-grid { grid-template-columns:1fr; } .metrics { grid-template-columns:repeat(2,1fr); } }
.opening-row { display:grid; grid-template-columns:1fr 7rem 7rem; gap:.6rem; align-items:center; margin-bottom:.7rem; }.opening-row input[type=time] { min-height:2.6rem; padding:.4rem; border:1px solid #aab7b0; border-radius:.45rem; }@media(max-width:560px){.opening-row{grid-template-columns:1fr 1fr}.opening-row label{grid-column:1/-1}}