/* Shared first paint, independent of the selected account's theme. */
#app>.boot-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;box-sizing:border-box;width:100%;min-height:100vh;min-height:100dvh;margin:0;padding:24px;background:#f5f4fb;color:#292f4d;font-family:Arial,Tahoma,sans-serif;text-align:center}
.boot-screen .boot-content{width:min(100%,340px);padding:32px 20px}.boot-screen .boot-logo{display:block;width:210px;max-width:100%;height:auto;aspect-ratio:3/1;object-fit:contain;margin:0 auto 26px}.boot-screen .boot-title{font-size:20px;line-height:1.7;font-weight:600;margin:0 0 8px;letter-spacing:0}.boot-screen .boot-title span{display:block;font-size:17px;font-weight:400;color:#77718f}.boot-screen .boot-message{font-size:12px;line-height:1.9;color:#77718f;margin:18px 0 0}.boot-screen .boot-message span{display:block}.boot-screen .boot-spinner{display:block;width:26px;height:26px;box-sizing:border-box;border:3px solid #e5dff4;border-top-color:#8270c8;border-radius:50%;margin:24px auto 0;animation:boot-turn 1s linear infinite}.boot-screen noscript{display:block;font-size:12px;line-height:1.8;color:#8b5366;margin-top:14px}@keyframes boot-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.boot-screen .boot-spinner{animation:none;border-color:#c2b5e8;border-top-color:#8270c8}}@media(max-height:430px){.boot-screen .boot-content{padding:12px}.boot-screen .boot-logo{width:150px;margin-bottom:12px}.boot-screen .boot-spinner{margin-top:14px}.boot-screen .boot-message{margin-top:12px}}

/* A visible, shared sign-out control in every account header. */
body .shell .topbar.has-logout .top-actions .logout-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;min-height:44px;min-width:104px;padding:9px 13px;border:1px solid #efb9c8;border-radius:12px;background:#fff0f4;color:#9f1745;font-size:13px;line-height:1.3;font-weight:800;white-space:nowrap;box-shadow:0 2px 6px #9f174509;cursor:pointer}
body .shell .topbar.has-logout .logout-button svg{width:18px;height:18px;flex-shrink:0}
body .shell .topbar.has-logout .top-actions .logout-button:hover{background:#ffe1eb;border-color:#dd8eaa;color:#85133a;filter:none}
body .shell .topbar.has-logout .logout-button:focus-visible{outline:3px solid #b381e0;outline-offset:3px}
@media(max-width:850px){
 body .shell .topbar.has-logout{display:grid;grid-template-columns:auto minmax(0,1fr);height:auto;min-height:0;gap:10px}
 body .shell .topbar.has-logout .mobile-menu{grid-column:1;grid-row:1}
 body .shell .topbar.has-logout .school-brand--header{grid-column:2;grid-row:1;max-width:none}
 body .shell .topbar.has-logout .top-actions{grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:flex-end;flex-wrap:wrap;gap:7px;min-width:0}
 body .shell .topbar.has-logout .searchbox{grid-column:1/-1;grid-row:3;max-width:none;width:100%;min-width:0}
 body .shell .topbar.has-logout .top-actions .logout-button{min-height:44px;padding:9px 12px;font-size:13px}
}

/* School grade identities are keyed by the stored grade, never the list position. */
.school-grade{--sg-color:#507c72;display:inline-flex;align-items:center;gap:8px;vertical-align:middle;padding:6px 10px;border:1px solid color-mix(in srgb,var(--sg-color) 20%,white);border-radius:12px;background:color-mix(in srgb,var(--sg-color) 8%,white);color:var(--sg-color);font:700 12px/1.35 system-ui,Tahoma,sans-serif;white-space:nowrap}.school-grade .sg-icon{width:23px;height:25px;flex:none}.school-grade .sg-number{font-size:15px;font-weight:850}.sg-4{--sg-color:#3c8770}.sg-5{--sg-color:#42848d}.sg-6{--sg-color:#a27424}.sg-7{--sg-color:#537caf}.sg-8{--sg-color:#7861ae}.sg-9{--sg-color:#9b6489}.sg-10{--sg-color:#5375b0}.sg-11{--sg-color:#ac6553}.sg-12{--sg-color:#8e7334}.sg-compact{flex-direction:column;gap:0;padding:4px 7px;line-height:1}.sg-compact .sg-icon{width:18px;height:19px}.sg-compact .sg-number{font-size:20px}.sg-unset{font-weight:500;color:#6f8090}.school-grade-catalog .list-row{gap:10px;flex-wrap:wrap}.school-grade-catalog .list-row>span{display:flex;align-items:center;gap:10px;flex-wrap:wrap}