/* Overrides on top of the base School OS design tokens — keeps the same layout
   system (shell/nav/cards/tables/modals) but re-skins it so Control can never
   be mistaken for the staff-facing app at a glance. */
:root{--gold:#ff5d6c;--gold2:#ff8a92;--bg:#0f0709;--panel:#1a0d10;--panel2:#1f1013;--line:#3a1e24}
html,body{background:radial-gradient(900px 500px at 70% -10%,#3a1420 0,transparent 60%),var(--bg)}
.brandmark{background:linear-gradient(135deg,#ff8a92,#a42230)!important;color:#1a0709!important}
.avatar{background:linear-gradient(135deg,#5d2330,#a42230)!important}
/* Primary buttons red. No !important, so .ghost / .danger / nav buttons keep their own styles. */
button{background:linear-gradient(135deg,#ff8a92,#c9384a);color:#1a0709}
button.ghost,.ghost{background:#231015;color:#ffe3e6;border:1px solid var(--line)}
button.danger{background:#3a1218;color:#ffb7bd;border:1px solid #6b2029}
/* Menu: plain rows, clear highlight for the current page */
.nav button{background:transparent;color:#d9b8bd;border:1px solid transparent}
.nav button:hover{background:#231015;color:#fff}
.nav button.active{background:#3a1520;color:#fff;border-color:#8a2b38;box-shadow:inset 3px 0 0 #ff5d6c}
/* Surfaces in the red theme instead of the old navy */
.side{background:rgba(15,7,9,.94)}
.top{background:rgba(15,7,9,.86)}
.card{background:linear-gradient(180deg,rgba(34,15,19,.95),rgba(22,10,13,.95));border-color:var(--line)}
.modalbox{background:#1a0b0f;border-color:#4a2028}
th{background:#1c0c10;color:#d9a3aa}
td{border-bottom-color:#2e151a}
tr:hover td{background:#211014}
.field input,.field select,.field textarea,.cardhead input,select{background:#0f0608!important;border-color:#4a2028!important;color:#fff}
.alert{background:#2a1015;border-color:#5a2430;color:#ffd0d5}
.muted{color:#c29aa0}
.tabs button.active{background:var(--gold)!important;color:#1a0709!important}
.controlbar{background:#2a1015;border-bottom:1px solid #5a2430;color:#ffc9ce;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:7px;position:sticky;top:0;z-index:6}
.gate{min-height:100vh;display:grid;place-items:center;padding:20px}
.gatebox{width:min(420px,100%);background:linear-gradient(180deg,rgba(26,13,16,.96),rgba(15,7,9,.96));border:1px solid #4a2028;border-radius:20px;padding:30px;box-shadow:0 30px 100px rgba(0,0,0,.5);text-align:center}
.gatebox .brandmark{width:52px;height:52px;margin:0 auto 16px;font-size:20px}
.gatebox input{width:100%;background:#0a0405;border:1px solid #4a2028;color:#fff;border-radius:10px;padding:12px;margin:14px 0;text-align:center;letter-spacing:.1em;outline:none}
.gatebox .warn-note{font-size:11px;color:#e2a0a6;background:#2a1015;border:1px solid #5a2430;border-radius:10px;padding:10px;margin-top:16px;text-align:left;line-height:1.5}
.dangerzone{border:1px solid #6b2029!important;background:linear-gradient(180deg,rgba(60,16,22,.5),rgba(20,8,10,.6))!important}
.editable{cursor:pointer;border-bottom:1px dashed #5a2430}
.editable:hover{color:var(--gold)}
/* Crest images (sidebar, top bar, login) */
.crest{width:40px;height:40px;border-radius:11px;object-fit:cover;border:1px solid #5a2430;flex-shrink:0}
.crest.small{width:36px;height:36px;border-radius:50%}
.gatecrest{width:88px;height:88px;border-radius:22px;display:block;margin:0 auto 16px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
/* Pop-up messages ("Saved", "Incorrect password") — previously unstyled and invisible */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:100;background:#2a1015;color:#ffe3e6;border:1px solid #6b2029;border-radius:12px;padding:12px 18px;font-weight:700;box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:calc(100vw - 32px);text-align:center;animation:toastin .18s ease-out}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
/* Phones: numbers in a 2-column grid instead of one tall column */
@media(max-width:800px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric b{font-size:24px}.card.metric{padding:14px}.hero .actions button{padding:9px 12px}}