/* SchoolPilot – wspólne tokeny strony i demo. Kolory pochodzą z panelu (granat menu, żółta czapka, niebieski akcent).
   Układ: jasne tło z granatowymi pasami, karty tylko tam, gdzie oznaczają osobny obiekt. */
:root{
 --navy:#123d5a;--navy-2:#1d4f70;--navy-fg:#d7e8f2;--navy-muted:#9fc0d3;
 --sun:#ffc857;--sun-ink:#123d5a;
 --bg:#f5f8fb;--card:#ffffff;--fg:#193348;--heading:#173c54;--muted:#64798a;--faint:#8a9daa;
 --border:#dce7ee;--line:#edf2f5;--soft:#eaf2f7;--soft-2:#f3f7fa;
 --primary:#165f8b;--primary-fg:#ffffff;--link:#177ba4;--ring:#76bbd8;
 --ok:#2f8a63;--ok-bg:#e5f5ec;--warn:#9a6a12;--warn-bg:#fff4dc;--bad:#b93639;--bad-bg:#fbe9e9;--info-bg:#e8f5fa;--online:#7c3aed;--online-bg:#f2ecff;
 --shadow:0 4px 16px rgba(21,65,91,.05);
 --font-display:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
 --font-body:'Source Sans 3','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
 --radius:12px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --navy:#0b2436;--navy-2:#163a52;--navy-fg:#c5dae8;--navy-muted:#8fb0c4;
 --bg:#0d1722;--card:#172737;--fg:#e7f0f7;--heading:#f1f7fb;--muted:#adbfcb;--faint:#8ea3b2;
 --border:#33495a;--line:#24384a;--soft:#213648;--soft-2:#1b2e3f;
 --primary:#76c8eb;--primary-fg:#0f2b3c;--link:#8fd3f0;--ring:#78c7e6;
 --ok:#6fd3a3;--ok-bg:#163a2c;--warn:#f1c46b;--warn-bg:#3a2f15;--bad:#f08083;--bad-bg:#3d1d22;--info-bg:#173a4d;--online:#b9a2ff;--online-bg:#2b2346;
 --shadow:0 4px 16px rgba(0,0,0,.25);color-scheme:dark}}
:root[data-theme="dark"]{
 --navy:#0b2436;--navy-2:#163a52;--navy-fg:#c5dae8;--navy-muted:#8fb0c4;
 --bg:#0d1722;--card:#172737;--fg:#e7f0f7;--heading:#f1f7fb;--muted:#adbfcb;--faint:#8ea3b2;
 --border:#33495a;--line:#24384a;--soft:#213648;--soft-2:#1b2e3f;
 --primary:#76c8eb;--primary-fg:#0f2b3c;--link:#8fd3f0;--ring:#78c7e6;
 --ok:#6fd3a3;--ok-bg:#163a2c;--warn:#f1c46b;--warn-bg:#3a2f15;--bad:#f08083;--bad-bg:#3d1d22;--info-bg:#173a4d;--online:#b9a2ff;--online-bg:#2b2346;
 --shadow:0 4px 16px rgba(0,0,0,.25);color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.55}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}

/* Znak marki – ta sama „S” w żółtym kafelku co w panelu. */
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.04em;color:inherit;text-decoration:none}
.brand-mark{height:32px;width:32px;display:inline-grid;place-items:center;border-radius:10px;background:var(--sun);color:var(--sun-ink);font-size:21px;font-weight:800;transform:rotate(-6deg);flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid transparent;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-sun{background:var(--sun);color:var(--sun-ink)}
.btn-sun:hover{background:#ffd47a}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--fg)}
.btn-ghost:hover{background:var(--soft)}
.btn-ghost-dark{background:transparent;border-color:rgba(215,232,242,.35);color:#fff}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08)}

.theme-toggle{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 11px;border-radius:9px;background:var(--soft);border:1px solid var(--border);color:var(--fg);font-size:13px;font-weight:700}
.theme-toggle:hover{background:var(--soft-2)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}