:root { --ink:#102a43; --muted:#5c6f82; --surface:#fff; --canvas:#f4f7fa; --line:#dbe4ec; --brand:#176b87; --brand-dark:#124f66; --accent:#f3a712; --danger:#b42318; --success:#19734b; }
* { box-sizing:border-box; }
html { font-size:16px; min-height:100%; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--canvas); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.55; }
.app-shell { width:min(1180px,calc(100% - 2rem)); margin-inline:auto; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:9999; padding:.75rem 1rem; background:#fff; color:var(--ink); border:2px solid var(--brand); border-radius:.5rem; }
.skip-link:focus { top:1rem; }
.app-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.brand { display:flex; flex-shrink:0; gap:.7rem; align-items:center; color:var(--ink); }
.brand:hover { color:var(--brand-dark); }
.brand span:last-child { display:flex; flex-direction:column; line-height:1.15; }
.brand small { color:var(--muted); font-size:.72rem; margin-top:.2rem; }
.brand-mark { display:grid; place-items:center; width:2.4rem; aspect-ratio:1; border-radius:.75rem; color:#fff; background:linear-gradient(135deg,var(--brand),#3aa6b9); font-weight:800; }
.nav-link { display:flex; align-items:center; min-height:2.75rem; white-space:nowrap; color:var(--muted); font-weight:650; border-radius:.55rem; padding:.55rem .8rem!important; }
.nav-link:hover,.nav-link.active { color:var(--brand-dark); background:#e7f4f7; }
.nav-button { border:0; background:transparent; }
.app-header .navbar-nav { gap:.25rem; }
.app-header .nav-item { flex-shrink:0; }
@media (min-width:992px) {
    .app-header .navbar > .app-shell { flex-wrap:wrap; }
    .app-header .navbar-collapse { flex-basis:100%; min-width:0; margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--line); }
    .app-header .navbar-nav { width:100%; flex-wrap:wrap; }
}
@media (max-width:991.98px) {
    .app-header .navbar-collapse { max-height:calc(100dvh - 5rem); overflow-y:auto; }
    .app-header .navbar-nav { padding-block:.75rem .25rem; }
    .app-header .nav-button { width:100%; text-align:left; }
}
@media (max-width:420px) {
    .app-header .brand { gap:.5rem; margin-right:.5rem; font-size:1rem; }
    .app-header .brand-mark { width:2rem; }
    .app-header .navbar-toggler { padding:.35rem .5rem; }
}
.auth-card { max-width:520px; margin:clamp(2rem,7vw,5rem) auto; }
.auth-card h1,.consent-card h1 { margin:.35rem 0 .5rem; }
.form-stack { display:grid; gap:1rem; margin-top:1.25rem; }
.class-list { display:grid; gap:.65rem; }
.class-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:.75rem; background:#fbfcfd; }
.class-row:hover { color:var(--brand-dark); border-color:#89b8c5; }
.class-row.static:hover { color:var(--ink); border-color:var(--line); }
.class-row span:first-child { display:flex; flex-direction:column; }
.class-row small { color:var(--muted); }
.action-row { display:flex; flex-wrap:wrap; gap:.65rem; }
.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.criteria-list,.history-list { display:grid; gap:.65rem; padding-left:1.25rem; }
.criteria-list li,.history-list li { padding:.55rem .25rem; border-bottom:1px solid var(--line); }
.criteria-list small,.history-list small { display:block; color:var(--muted); }
.status-chip.warning { color:#7a4b00; background:#fff1cf; }
.student-row { align-items:flex-start; }
.student-actions { display:grid; justify-items:end; gap:.5rem; }
.student-actions details { width:min(100%,360px); }
.student-actions summary { list-style:none; cursor:pointer; text-align:center; }
.student-actions summary::-webkit-details-marker { display:none; }
.student-actions details[open] { padding:.7rem; border:1px solid var(--line); border-radius:.75rem; background:#fbfcfd; }
.student-actions details[open] summary { margin-bottom:.7rem; }
.compact-form { min-width:min(320px,75vw); }
.end-membership-form { display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }
.end-membership-form .form-control { width:min(230px,100%); }
.former-heading { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.moderation-list { display:grid; gap:1rem; }
.moderation-card { padding:1rem; border:1px solid var(--line); border-radius:.85rem; background:#fbfcfd; }
.moderation-card header,.decision-form { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.moderation-card header div { display:flex; flex-direction:column; }
.moderation-card small { color:var(--muted); }
.decision-form { margin-top:.8rem; justify-content:flex-start; flex-wrap:wrap; }
.decision-form .form-control { flex:1 1 280px; }
.count-pill,.status-chip { padding:.28rem .65rem; border-radius:999px; background:#e7f4f7; color:var(--brand-dark); font-size:.82rem; font-weight:750; }
.credential-notice code { user-select:all; padding:.12rem .3rem; color:var(--ink); background:#fff; border-radius:.25rem; }
.page-content { padding-block:2rem 4rem; }
.hero { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding:1.5rem 0 1.75rem; }
.hero h1 { max-width:760px; margin:.3rem 0 .5rem; font-size:clamp(2rem,4vw,3.35rem); letter-spacing:-.04em; line-height:1.05; }
.hero p { max-width:720px; margin:0; color:var(--muted); font-size:1.05rem; }
.eyebrow { display:block; color:var(--brand); text-transform:uppercase; letter-spacing:.1em; font-weight:800; font-size:.75rem; }
.btn { min-height:2.75rem; border-radius:.7rem; font-weight:700; }
.btn-primary { background:var(--brand); border-color:var(--brand); }
.btn-primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-outline-primary { color:var(--brand-dark); border-color:#89b8c5; }
.notice { display:flex; align-items:flex-start; gap:.85rem; margin-bottom:1.4rem; padding:1rem 1.1rem; border:1px solid #b6dce5; border-radius:.85rem; background:#eaf7fa; }
.notice-icon { flex:0 0 1.7rem; display:grid; place-items:center; aspect-ratio:1; border-radius:50%; color:#fff; background:var(--brand); font-weight:800; }
.notice div { display:flex; flex-direction:column; }
.notice span:last-child { color:#31566a; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.metric-card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:1rem; box-shadow:0 8px 24px rgba(16,42,67,.05); }
.metric-card { padding:1.15rem; }
.metric-card span,.metric-card small { display:block; color:var(--muted); }
.metric-card strong { display:block; margin:.2rem 0; font-size:2rem; }
.metric-card.accent { border-top:4px solid var(--accent); }
.content-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr); gap:1rem; margin-bottom:1rem; }
.panel { padding:1.35rem; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.panel h2 { margin:.15rem 0 0; font-size:1.35rem; }
.empty-state { display:grid; justify-items:center; text-align:center; padding:2.4rem 1rem; border:1px dashed #b8c7d3; border-radius:.85rem; background:#fbfcfd; }
.empty-state.compact { padding:1.5rem .8rem; }
.empty-state h3 { margin:.7rem 0 .3rem; font-size:1.05rem; }
.empty-state p,.supporting-text { max-width:680px; margin:0; color:var(--muted); }
.empty-icon { display:grid; place-items:center; width:2.8rem; aspect-ratio:1; border-radius:.8rem; background:#e7f4f7; color:var(--brand); font-size:1.4rem; }
.empty-icon.success { background:#e8f5ee; color:var(--success); }
.connection-status { position:fixed; right:1rem; bottom:1rem; z-index:200; max-width:min(360px,calc(100% - 2rem)); padding:.8rem 1rem; color:#fff; background:var(--ink); border-radius:.75rem; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.connection-status[data-level="danger"] { background:var(--danger); }
.connection-status[data-level="success"] { background:var(--success); }
.app-footer { padding:1.5rem 0; color:var(--muted); border-top:1px solid var(--line); background:#fff; }
.validation-summary-errors,.field-validation-error,.alert-danger { color:#7a271a; }
.validation-summary-errors { margin-block:1rem; padding:1rem; border:1px solid #f0b4ad; border-left:5px solid var(--danger); border-radius:.65rem; background:#fff1ef; font-weight:600; }
.field-validation-error { display:block; margin-top:.35rem; font-size:.92rem; font-weight:650; }
.input-validation-error { border-color:var(--danger)!important; box-shadow:0 0 0 .2rem rgba(180,35,24,.12)!important; }
.error-card { max-width:760px; margin:clamp(2rem,8vw,6rem) auto; border-top:5px solid var(--danger); }
.error-card h1 { margin:.4rem 0 .6rem; font-size:clamp(1.8rem,4vw,2.8rem); }
.error-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin:1.4rem 0; }
.error-card details { padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); }
:focus-visible { outline:3px solid #ffbf47; outline-offset:3px; }
@media (max-width:900px) { .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .content-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .app-shell { width:min(100% - 1.25rem,1180px); } .page-content { padding-top:1rem; } .hero,.student-row { align-items:stretch; flex-direction:column; gap:1rem; } .hero .btn,.action-row .btn,.student-actions,.student-actions form,.student-actions details,.student-actions summary,.end-membership-form .form-control,.end-membership-form .btn { width:100%; } .compact-form { min-width:0; } .metric-grid,.form-pair { grid-template-columns:1fr; } .panel-heading { align-items:stretch; flex-direction:column; } .panel-heading .btn { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.message-list{display:flex;flex-direction:column;gap:.75rem;max-height:55vh;overflow:auto;padding:.5rem}.message-bubble{max-width:82%;padding:.8rem 1rem;border-radius:1rem;background:#eef3f7;overflow-wrap:anywhere}.message-bubble.mine{align-self:flex-end;background:#dceeff}.message-bubble.theirs{align-self:flex-start}.message-bubble p{margin:0 0 .25rem;white-space:pre-wrap}.message-bubble small{color:#52606d}
.message-status{display:inline-block;margin-left:.25rem;font-weight:800;letter-spacing:-.2rem;padding-right:.2rem;color:#687784}.message-status.read{color:#1687d9}.typing-status{display:block;min-height:1.4rem;color:var(--brand);font-size:.9rem;font-weight:700}
.message-attachment{display:block;margin:.35rem 0 .5rem;padding:.55rem .7rem;border-radius:.7rem;background:rgba(255,255,255,.72);color:inherit;font-weight:700;text-decoration:none}.message-attachment:hover{text-decoration:underline}
.photo-moderation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.photo-card>img{display:block;width:100%;height:260px;object-fit:cover;margin-bottom:1rem;border-radius:.7rem;background:#eef3f7}.photo-card .supporting-text{margin:.7rem 0}.photo-preview{display:flex;align-items:center;gap:1rem;margin-top:1rem}.photo-preview img{width:min(240px,50%);aspect-ratio:1;object-fit:cover;border-radius:1rem}.photo-preview div{display:flex;flex-direction:column}.photo-preview small{color:var(--muted)}
.announcement-list{display:grid;gap:1rem}.announcement-card{padding:1rem;border:1px solid var(--line);border-radius:.85rem;background:#fbfcfd}.announcement-card.archived{opacity:.72}.announcement-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.announcement-card header div,.target-summary{display:flex;flex-direction:column}.announcement-card small,.target-summary span{color:var(--muted)}.announcement-card p{white-space:pre-wrap;overflow-wrap:anywhere}.announcement-card form{margin-top:.8rem}.class-selector{display:grid;gap:.55rem;padding:1rem;border:1px solid var(--line);border-radius:.8rem}.class-selector legend{float:none;width:auto;padding:0 .35rem;font-size:1rem;font-weight:800}.check-row{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem;border-radius:.65rem;background:#f5f8fa}.check-row input{margin-top:.3rem}.check-row span{display:flex;flex-direction:column}.check-row small{color:var(--muted)}.all-classes{border:1px solid #b6dce5;background:#eaf7fa}
.announcement-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}.announcement-actions form{margin-top:0}.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}.read-report-list{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}.read-report-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem;border:1px solid var(--line);border-radius:.7rem;background:#fbfcfd}.read-report-list li>span:first-child{display:flex;flex-direction:column}.read-report-list small{color:var(--muted)}.status-chip.read{color:var(--success);background:#e8f5ee}
.announcement-card.pinned{border-top:4px solid var(--brand)}.announcement-card.important{border-left:5px solid var(--accent)}.announcement-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}.status-chip.pinned{color:#fff;background:var(--brand)}
.task-resources{margin-bottom:1rem}.resource-list{display:grid;gap:.65rem}.resource-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem;border:1px solid var(--line);border-radius:.75rem;background:#fbfcfd}.resource-row>span{display:flex;flex-direction:column}.resource-row small{color:var(--muted)}.resource-forms{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}.resource-forms h3{margin:0;font-size:1rem}@media(max-width:760px){.resource-row{align-items:stretch;flex-direction:column}.resource-row .btn,.resource-forms{width:100%}.resource-forms{grid-template-columns:1fr}}
.attachment-review{margin:.7rem 0;color:var(--ink);text-decoration:none}.attachment-review:hover{color:var(--brand-dark);border-color:#89b8c5}
.development-grid{grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr)}.request-filter{display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,.45fr) auto;gap:.65rem;margin-bottom:1rem}.request-list{display:grid;gap:.7rem}.request-card{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:.85rem;background:#fbfcfd}.request-card:hover{color:var(--ink);border-color:#89b8c5;box-shadow:0 6px 18px rgba(16,42,67,.07)}.request-card-main,.request-meta{display:flex;flex-direction:column;gap:.25rem}.request-number{color:var(--brand);font-size:.8rem;font-weight:800}.request-card small,.request-meta small{color:var(--muted)}.request-meta{align-items:flex-end;min-width:145px}.priority-3{color:#7a4b00;background:#fff1cf}.priority-4{color:#fff;background:var(--danger)}.request-status-6{color:#7a4b00;background:#fff1cf}.request-status-7{color:var(--success);background:#e8f5ee}.request-status-8{color:#7a271a;background:#fff1ef}.request-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.request-heading h1{margin:.3rem 0}.request-heading p{margin:0;color:var(--muted)}.request-heading-meta{display:flex;flex-wrap:wrap;gap:.5rem}.back-link{display:inline-block;margin-bottom:1rem;color:var(--brand-dark);font-weight:700;text-decoration:none}.request-detail-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.6fr);gap:1rem;align-items:start}.request-description>p,.timeline-content>p{white-space:pre-wrap;overflow-wrap:anywhere}.request-page-link{display:inline-block;margin:.5rem 0;color:var(--brand-dark);font-weight:700}.request-attachments{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.8rem}.request-attachments a{padding:.55rem .7rem;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:.7rem;background:#f5f8fa}.request-attachments a:hover{border-color:#89b8c5}.request-timeline{display:grid;gap:.8rem}.timeline-entry{display:grid;grid-template-columns:2rem 1fr;gap:.7rem}.timeline-marker{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#e7f4f7;color:var(--brand);font-size:.72rem}.timeline-entry.event .timeline-marker{background:#eef3f7;color:var(--muted)}.timeline-content{padding:.85rem 1rem;border:1px solid var(--line);border-radius:.8rem;background:#fbfcfd}.timeline-entry.event .timeline-content{padding:.55rem .8rem;background:transparent}.timeline-content header{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.45rem}.timeline-content time{color:var(--muted);font-size:.85rem}.timeline-content p{margin:0}.sticky-panel{position:sticky;top:6rem}.teacher-directory{display:grid;gap:.7rem}.teacher-directory-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:.8rem;background:#fbfcfd}.teacher-directory-card>div{display:flex;flex-direction:column}.teacher-directory-card>div:last-child{align-items:flex-end}.teacher-directory-card small{color:var(--muted)}
@media(min-width:992px){.sticky-panel{top:9rem}}
@media(max-width:900px){.development-grid,.request-detail-grid{grid-template-columns:1fr}.sticky-panel{position:static}.request-filter{grid-template-columns:1fr}.request-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.request-card,.teacher-directory-card{align-items:stretch;flex-direction:column}.request-meta,.teacher-directory-card>div:last-child{align-items:flex-start}.timeline-content header{flex-direction:column;gap:.2rem}}