/* Shared visual layer: all pages, without changing existing school content. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--navy:#0f172a;--ink:#1e293b;--muted:#64748b;--surface:#f8fafc;--line:#dce4ee;--blue:#2563eb;--purple:#6d28d9;--cyan:#06b6d4;--radius:16px;color-scheme:light}
html{scroll-padding-top:24px}body{font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif!important;background-color:var(--surface)!important;color:var(--ink)!important;overflow-wrap:anywhere}
input,select,textarea,button{font:inherit}input,select,textarea{max-width:100%;box-sizing:border-box;background:#fff;color:var(--ink);border:1px solid #cbd5e1;border-radius:12px;padding:12px}
[hidden]{display:none!important}*,*::before,*::after{box-sizing:border-box}
body>header,.topbar,.site-header{background:var(--navy)!important;color:#f8fafc!important;border-bottom:1px solid #334155!important}body>header a,.topbar a,.site-header a{color:#f8fafc!important}body>header p,.topbar p{color:#cbd5e1!important}
body>header small,.site-header .brand small{color:#cbd5e1!important}body>header .home-link,.site-header .admin-link{background:#1e293b!important;border-color:#475569!important;color:#f8fafc!important}body>header .home-link:hover,.site-header .admin-link:hover{background:#334155!important}
h1,h2,h3{font-family:inherit!important}h1{color:#1e1b4b;background:linear-gradient(110deg,#1e1b4b,#2563eb 55%,#4c1d95);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.panel,.card,.record,.room-summary,.slot,.stat-card,.teacher-stat,dialog{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 28px #0f172a06;color:var(--ink)}
.panel,.card,.slot{transition:border-color .2s,box-shadow .2s}.panel:hover,.card:hover,.slot:hover{border-color:#67d7e5;box-shadow:0 6px 24px #06b6d412,0 0 0 1px #ec48990a}
button,.button,.btn{border-radius:12px}button:not(.secondary):not(.danger):not(.close):not(.free),.primary{background:linear-gradient(110deg,#0891b2,#2563eb);color:#fff;border:1px solid transparent}
button.secondary,.secondary{background:#f1f5f9;color:#25365a;border:1px solid #cbd5e1}.danger{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}
:focus-visible{outline:3px solid #06b6d4;outline-offset:3px}.admin-nav a.active{background:linear-gradient(110deg,#2563eb,#6d28d9)!important;color:#fff!important}.admin-nav a{border-radius:12px}.admin-nav{border-color:var(--line)!important}.main-content>section{scroll-margin-top:20px}
.record{flex-wrap:wrap;gap:14px;padding:18px;margin:12px 0}.record>div{min-width:0}.inline-editor{flex:0 0 100%;width:100%;padding:16px;background:#f1f5f9;border:1px solid #93c5fd;border-radius:12px;display:grid;gap:12px}.inline-editor label{display:grid;gap:6px}.inline-editor button{margin-right:8px}.inline-editor textarea{min-height:100px}
.teacher-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:18px;margin:10px 0}.teacher-stat small{display:block;color:var(--muted);margin-top:5px}.usage-bar{grid-column:1/-1;height:7px;background:#e2e8f0;border-radius:20px;overflow:hidden}.usage-bar span{display:block;height:100%;width:var(--usage);background:linear-gradient(90deg,#7c3aed,#06b6d4);border-radius:inherit;animation:grow .8s ease both}
.stats-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.stats-heading h2{flex:1;margin:0}.stats-heading label{display:grid;gap:5px}.stats-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.stat-card{padding:20px;background:#f1f5f9}.stat-card strong{display:block;font-size:2rem;color:#312e81;font-variant-numeric:tabular-nums}.stat-card span{font-size:.85rem;color:#475569}
.champion{position:relative;overflow:hidden;padding:24px;border-radius:16px;color:#fff;background:linear-gradient(110deg,#1d4ed8,#6d28d9);margin:16px 0}.champion h3{color:#fff;font-size:1.5rem;margin:10px 0}.champion::after{content:'';position:absolute;right:-40px;top:-70px;width:180px;height:180px;border-radius:50%;background:#ffffff16;animation:float 6s ease-in-out infinite;pointer-events:none}.rankings{overflow-x:auto;padding:16px 0;margin-bottom:4px}.ranking-track{display:flex;gap:14px;width:max-content;max-width:none;animation:ranking 22s ease-in-out infinite alternate}.ranking-track span{white-space:nowrap;padding:12px 18px;border:1px solid #c4b5fd;border-radius:30px;background:#f5f3ff;color:#4c1d95}.rankings:hover .ranking-track,.rankings:focus-within .ranking-track,.rankings:active .ranking-track{animation-play-state:paused!important}
#teacher-statistics{margin:24px 0;padding:24px}#teacher-statistics>label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}#teacher-preview-box{max-height:300px;overflow:auto}#teacher-preview-box p{padding:6px;border-bottom:1px solid #e2e8f0}#teacher-search{width:100%;margin:12px 0}
@keyframes grow{from{width:0}to{width:var(--usage)}}@keyframes float{50%{transform:translate(-30px,35px)}}@keyframes ranking{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(min(0px,calc(680px - 100%)))}}
@media(max-width:700px){.stats-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-heading{align-items:stretch}.stats-heading h2{flex-basis:100%}#teacher-statistics{padding:16px}.record>div,.inline-editor{max-width:100%}.inline-editor input,.inline-editor textarea{width:100%}.record{display:flex}.record>div:first-child{flex-basis:100%}.ranking-track{animation-name:ranking-mobile}@keyframes ranking-mobile{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(min(0px,calc(280px - 100%)))}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:#fff!important}h1{-webkit-text-fill-color:#111;background:none}.champion{background:#fff;color:#111}.champion h3{color:#111}.ranking-track{animation:none}button,.admin-nav{display:none!important}}