/* =====================================================================
   Elektroniczna Tablica — Plan Lekcji
   Język wizualny: „Soft Structuralism" — jasne srebro/biel, miękkie
   rozproszone cienie, pływające panele (double-bezel), groteskowa
   typografia, ruch na własnych krzywych. Pełny tryb ciemny.
   ===================================================================== */

/* atrybut hidden MUSI wygrywać z każdym display ustawionym w klasach
   (bez tego np. spinner/panel z display:flex zostaje widoczny mimo hidden) */
[hidden]{display:none !important}

:root{
  --font:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --r-xl:24px; --r-lg:18px; --r-md:13px; --r-sm:9px; --r-pill:999px;

  /* akcenty (wspólne dla obu motywów) */
  --brand:#4f46e5; --brand-ink:#3730c4;
  --brand-glow:rgba(79,70,229,.35);
  --gradient-brand:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#a855f7 100%);
  --gradient-warm:linear-gradient(135deg,#f59e0b,#ef4444);
  --ok:#1f9d57; --err:#e23b3b; --warn:#e0962a; --note:#f0b73a;
}

/* ---------- MOTYW JASNY ---------- */
.theme-light{
  --bg:#e9edf2; --bg-2:#eef2f6;
  --surface:#ffffff; --surface-2:#f6f8fb; --shell:rgba(20,30,50,.035);
  --ink:#161f2b; --ink-2:#3b4654; --muted:#6c7785; --faint:#9aa6b2;
  --hair:rgba(20,30,50,.09); --hair-2:rgba(20,30,50,.05);
  --inset:inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-soft:0 1px 3px rgba(0,0,0,.04),0 4px 6px -1px rgba(0,0,0,.04),0 12px 32px -8px rgba(20,30,60,.14);
  --shadow-pop:0 4px 8px rgba(0,0,0,.06),0 20px 48px -12px rgba(20,30,60,.28),0 0 0 1px rgba(0,0,0,.03);
  --shadow-brand:0 8px 24px -6px rgba(79,70,229,.45),0 0 0 1px rgba(79,70,229,.15);
  --brand-soft:rgba(79,70,229,.10);
  --grain:.025;
}
/* ---------- MOTYW CIEMNY ---------- */
.theme-dark{
  --bg:#0a0e14; --bg-2:#0e131b;
  --surface:#161d27; --surface-2:#1b232f; --shell:rgba(255,255,255,.04);
  --ink:#eaf0f6; --ink-2:#c2cdd9; --muted:#8a97a5; --faint:#5c6776;
  --hair:rgba(180,200,220,.12); --hair-2:rgba(180,200,220,.06);
  --inset:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-soft:0 1px 3px rgba(0,0,0,.3),0 8px 20px -4px rgba(0,0,0,.5);
  --shadow-pop:0 4px 12px rgba(0,0,0,.5),0 32px 64px -16px rgba(0,0,0,.8);
  --shadow-brand:0 8px 24px -6px rgba(99,102,241,.5),0 0 0 1px rgba(99,102,241,.2);
  --brand-soft:rgba(99,102,241,.16);
  --grain:.04;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  height:100vh; overflow:hidden; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
  transition:background .5s var(--ease), color .5s var(--ease);
}
/* ziarno (fixed, pod interakcją) */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--hair);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}

.eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ===================== APP BAR ===================== */
.appbar{
  position:relative;z-index:6;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:10px 22px;
  background:var(--surface);
  border-bottom:1px solid var(--hair);
  box-shadow:var(--shadow-soft);
}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand-mark{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--gradient-brand);
  box-shadow:var(--shadow-brand);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.brand-mark:hover{transform:scale(1.05) rotate(-2deg)}
.brand-title{font-weight:800;font-size:15.5px;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* segmentowany przełącznik trybu kolumn */
.seg{display:inline-flex;gap:3px;padding:4px;background:var(--surface-2);border:1px solid var(--hair-2);
  border-radius:var(--r-pill);box-shadow:var(--inset)}
.seg-btn{border:none;background:transparent;color:var(--muted);font-size:13px;font-weight:600;
  padding:7px 16px;border-radius:var(--r-pill);cursor:pointer;transition:color .3s var(--ease),background .3s var(--ease),transform .2s var(--ease)}
.seg-btn:hover{color:var(--ink)}
.seg-btn.is-active{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-soft)}
.seg-btn:active{transform:scale(.96)}

.appbar-right{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.stats{display:flex;gap:8px}
.stat{
  min-width:58px;text-align:center;padding:5px 10px;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--hair-2);
  transition:all .25s var(--ease);
}
.stat:hover{border-color:var(--hair);transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.stat span{display:block;font-size:17px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.stat label{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.stat-warn.is-bad{background:color-mix(in srgb,var(--err) 14%,transparent);border-color:color-mix(in srgb,var(--err) 35%,transparent)}
.stat-warn.is-bad span{color:var(--err)}
.icon-btn{width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--surface-2);
  color:var(--ink);font-size:17px;cursor:pointer;transition:all .3s var(--ease)}
.icon-btn:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.icon-btn:active{transform:scale(.94)}

/* ===================== LAYOUT ===================== */
.layout{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:296px 1fr 344px;min-height:0}

/* panele = double-bezel: zewnętrzna powłoka + wewnętrzny rdzeń */
.rail,.inspector{background:var(--bg-2);padding:12px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.rail{border-right:1px solid var(--hair)}
.inspector{border-left:1px solid var(--hair)}

/* ---- lewa szyna ---- */
.rail-head{padding:6px 6px 10px}
.rail-head h2{margin:3px 0 0;font-size:19px;font-weight:800;letter-spacing:-.03em}
.search{position:relative;margin-bottom:10px}
.search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:15px}
.search input{width:100%;padding:10px 12px 10px 32px;border-radius:var(--r-md);border:1px solid var(--hair);
  background:var(--surface);color:var(--ink);font-size:13px;outline:none;transition:border .25s var(--ease),box-shadow .25s var(--ease)}
.search input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.search input::placeholder{color:var(--faint)}

.brush-hint{display:none;align-items:center;gap:5px;margin:0 0 10px;padding:8px 11px;font-size:12px;
  background:color-mix(in srgb,var(--warn) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
  border-radius:var(--r-md);color:var(--ink)}
.link{border:none;background:none;color:var(--brand);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;padding:0}

.palette{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding-right:2px;margin:0 -2px}
.pal-group{margin:6px 4px 2px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  display:flex;justify-content:space-between;align-items:center}
.pal-group .cnt{color:var(--faint);font-weight:600;letter-spacing:0}
.teacher-chip{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--hair-2);
  border-radius:var(--r-md);padding:6px 8px;
  transition:transform .2s var(--ease),border-color .2s var(--ease),
             background .2s var(--ease),box-shadow .2s var(--ease);
}
.teacher-chip:hover{
  border-color:color-mix(in srgb,var(--brand) 40%,var(--hair));
  transform:translateX(3px);
  box-shadow:var(--shadow-soft);
}
.teacher-chip.active{
  border-color:var(--brand);
  background:linear-gradient(90deg,var(--brand-soft),transparent);
  box-shadow:0 0 0 3px var(--brand-soft),var(--shadow-soft);
}
.chip-swatch{
  flex:0 0 30px;height:30px;border-radius:9px;
  background:var(--surface-2);display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 3px rgba(0,0,0,.15);
}
.chip-text{min-width:0;flex:1;font-size:12.5px;line-height:1.25}
.chip-text strong{font-weight:700}
.chip-text small{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-hours{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--hair-2);border-radius:99px;padding:2px 8px}
.chip-hours.over{color:var(--err);border-color:color-mix(in srgb,var(--err) 35%,transparent)}

.rail-foot{padding:10px 4px 2px;border-top:1px solid var(--hair-2);margin-top:8px}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.legend-item{
  font-size:10px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-2);background:var(--surface);
  border:1px solid var(--hair-2);border-radius:99px;
  padding:3px 9px;transition:all .2s var(--ease);
}
.legend-item:hover{border-color:var(--hair);box-shadow:var(--shadow-soft)}

/* ===================== STAGE ===================== */
.stage{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.stage-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--hair);
  box-shadow:0 1px 0 var(--hair-2);
}
.tool-switches{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--hair-2);
}
.tool-actions{
  display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap;
}
/* grupowanie przycisków akcji */
.tool-group{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--surface-2);border:1px solid var(--hair-2);
  border-radius:var(--r-pill);padding:3px;
}
.tool-group .pill{border:none;background:transparent;border-radius:calc(var(--r-pill) - 3px)}
.tool-group .pill:hover{background:var(--surface);box-shadow:var(--shadow-soft)}
.divider{width:1px;height:22px;background:var(--hair);margin:0 3px}

/* przełączniki */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;color:var(--ink-2);user-select:none}
/* input ukryty wizualnie, ale FOKUSOWALNY z klawiatury (dostępność) */
.switch input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;pointer-events:none}
.switch input:focus-visible + .switch-track{box-shadow:0 0 0 3px var(--brand-soft),0 0 0 1px var(--brand)}
.switch-track{width:38px;height:21px;border-radius:99px;background:var(--hair);position:relative;transition:background .3s var(--ease);flex:0 0 auto}
.switch-thumb{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .35s var(--ease)}
.switch input:checked + .switch-track{background:var(--brand)}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(17px)}

/* przyciski */
.pill{border:1px solid var(--hair);background:var(--surface-2);color:var(--ink);font-size:12.5px;font-weight:600;
  padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;transition:all .25s var(--ease)}
.pill:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.pill:active{transform:scale(.97)}
.pill.ghost{background:transparent;padding:8px 12px;color:var(--ink-2)}
.pill.ghost:hover{background:var(--brand-soft)}
.pill.danger{color:var(--err)}
.pill.danger:hover{border-color:var(--err);color:var(--err);background:color-mix(in srgb,var(--err) 10%,transparent)}

/* CTA z ikoną w ikonie (button-in-button) */
.cta{
  display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;
  background:var(--gradient-brand);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.01em;
  padding:9px 9px 9px 18px;border-radius:var(--r-pill);
  box-shadow:var(--shadow-brand),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);
}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -6px var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.25)}
.cta:active{transform:scale(.97)}
.cta .cta-ico{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.18);display:grid;place-items:center;
  transition:transform .3s var(--ease-out),background .2s var(--ease);
}
.cta:hover .cta-ico{transform:translate(2px,-2px) scale(1.08);background:rgba(255,255,255,.28)}
.cta.busy{filter:saturate(.5) brightness(.9);pointer-events:none}
.cta.busy .cta-ico{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- canvas ---- */
.canvas-wrap{flex:1;display:flex;flex-direction:row;overflow:hidden;background:var(--bg)}
/* Połówka — kontener dla jednej tablicy (lewa lub prawa) */
.canvas-half{position:relative;overflow:hidden;flex:1;min-width:0;min-height:0}
/* Separator między połówkami */
.split-divider{width:3px;flex-shrink:0;background:var(--hair);display:none}
/* Prawa połówka — domyślnie ukryta */
#canvas-right-wrap{display:none}
/* Aktywny tryb podzielony */
.canvas-wrap.split-active .split-divider,
.canvas-wrap.split-active #canvas-right-wrap{display:flex;flex-direction:column}
.canvas-wrap.split-active .split-divider{display:block}
/* Etykieta panelu (Klasy / Sale) — widoczna tylko w split-active */
.split-panel-label{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);
  padding:3px 11px;border-radius:var(--r-pill);border:1px solid var(--hair);
  pointer-events:none;white-space:nowrap;z-index:25;
  opacity:0;transition:opacity .3s var(--ease)}
.canvas-wrap.split-active .split-panel-label{opacity:1}
/* Prawy zoom-hud */
.zoom-hud-right{right:10px;bottom:10px}
#board{display:block;touch-action:none;user-select:none;outline:none}
#board-right{display:block;touch-action:none;user-select:none;outline:none;width:100%;height:100%}
#board:focus-visible{box-shadow:inset 0 0 0 2px var(--brand)}

.tooltip{position:fixed;display:none;z-index:50;background:var(--ink);color:var(--bg);font-size:12px;
  padding:8px 11px;border-radius:var(--r-sm);pointer-events:none;box-shadow:var(--shadow-pop);max-width:230px;line-height:1.45;letter-spacing:0}
.theme-light .tooltip{background:#10161f;color:#fff}
.theme-dark .tooltip{background:#fff;color:#10161f}
.tooltip b{font-weight:700}
.tooltip .t-note{color:var(--note)}
.tooltip .t-conf{color:#ff8d8d;font-weight:700}

.zoom-hud{position:absolute;right:16px;bottom:16px;z-index:20;display:flex;align-items:center;gap:3px;
  padding:5px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-pill);box-shadow:var(--shadow-pop)}
.zoom-hud button{width:32px;height:32px;border:none;background:transparent;border-radius:50%;font-size:17px;font-weight:700;
  color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:all .2s var(--ease)}
.zoom-hud button:hover{background:var(--brand);color:#fff}
.zoom-hud #zoom-val{min-width:48px;text-align:center;font-size:12px;font-weight:700;color:var(--muted)}
.hud-sep{width:1px;height:18px;background:var(--hair);margin:0 2px}
.pan-hint{position:absolute;left:16px;bottom:16px;z-index:20;background:color-mix(in srgb,var(--ink) 82%,transparent);
  color:var(--bg);font-size:11px;padding:6px 11px;border-radius:99px;pointer-events:none;letter-spacing:0}
.theme-light .pan-hint{background:rgba(16,22,31,.8);color:#fff}
.lock-pill{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:none;align-items:center;gap:7px;z-index:20;
  background:#10161f;color:#ffd96b;font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:99px;box-shadow:var(--shadow-pop)}
.theme-light .lock-pill,.theme-dark .lock-pill{background:#10161f;color:#ffd96b}

/* ===================== INSPECTOR ===================== */
.tabs{
  display:flex;gap:2px;padding:3px;
  background:var(--surface-2);border:1px solid var(--hair-2);
  border-radius:var(--r-pill);margin-bottom:14px;
}
.tab{
  flex:1;border:none;background:transparent;color:var(--muted);
  font-size:12px;font-weight:700;padding:7px 6px;border-radius:calc(var(--r-pill) - 3px);
  cursor:pointer;letter-spacing:.02em;
  transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
  text-transform:uppercase;
}
.tab:hover{color:var(--ink);background:var(--shell)}
.tab.is-active{
  background:var(--surface);color:var(--brand);
  box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.5);
}
.panel{flex:1;overflow-y:auto;min-height:0;padding-right:2px}

.muted{color:var(--muted);font-size:13px;line-height:1.55}
/* karta lekcji (double-bezel) */
.card{background:var(--shell);border:1px solid var(--hair-2);border-radius:var(--r-lg);padding:6px}
.card-core{background:var(--surface);border:1px solid var(--hair-2);border-radius:calc(var(--r-lg) - 6px);padding:14px;box-shadow:var(--inset)}
.prop-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.prop-chip{width:40px;height:40px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto}
.prop-head .ph-title{font-weight:800;font-size:15px;letter-spacing:-.01em}
.prop-head .ph-sub{font-size:12px;color:var(--muted)}
.prop-alert{display:flex;gap:7px;align-items:center;background:color-mix(in srgb,var(--err) 12%,transparent);
  color:var(--err);border:1px solid color-mix(in srgb,var(--err) 30%,transparent);border-radius:var(--r-md);padding:8px 11px;font-size:12.5px;font-weight:600;margin-bottom:12px}
.prop-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid var(--hair-2)}
.prop-row span{color:var(--muted)}
.prop-field{display:block;font-size:11px;font-weight:600;color:var(--muted);margin:12px 0 0;text-transform:uppercase;letter-spacing:.04em}
.prop-field select{width:100%;margin-top:5px;padding:9px 10px;border:1px solid var(--hair);border-radius:var(--r-md);
  font-size:13px;background:var(--surface-2);color:var(--ink);font-family:inherit;cursor:pointer}
.prop-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;margin-top:12px;line-height:1.4;cursor:pointer;color:var(--ink-2)}
.prop-check input{margin-top:2px;accent-color:var(--brand)}
.btn-block{width:100%;margin-top:12px;padding:10px;border-radius:var(--r-md);font-weight:700;font-size:13px;cursor:pointer;
  border:1px solid var(--hair);background:var(--surface-2);color:var(--ink);transition:all .25s var(--ease)}
.btn-block:hover{border-color:var(--brand);color:var(--brand)}
.btn-block.danger{color:var(--err)}
.btn-block.danger:hover{border-color:var(--err);background:color-mix(in srgb,var(--err) 10%,transparent)}
.subs{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.sub-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 9px;border:1px solid var(--hair-2);border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer;transition:all .2s var(--ease)}
.sub-row:hover{border-color:var(--brand);color:var(--brand)}
.sub-row .tag{margin-left:auto;font-size:10px;font-weight:700;color:var(--ok)}

.help{margin-top:16px;padding:14px;border:1px dashed var(--hair);border-radius:var(--r-lg)}
.help ul{margin:8px 0 0;padding-left:17px;font-size:12px;color:var(--ink-2);line-height:1.7}

/* analiza */
.an-sec{margin-bottom:18px}
.an-sec h3{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.bar-row{display:grid;grid-template-columns:88px 1fr 40px;align-items:center;gap:9px;margin-bottom:6px;font-size:12px}
.bar-row .bl{color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center}
.bar-track{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--hair-2)}
.bar-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),#8b5cf6);
  transition:width .7s var(--ease-out);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.bar-fill.over{background:linear-gradient(90deg,var(--warn),var(--err))}
.bar-val{text-align:right;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.conf-row{
  display:flex;align-items:center;gap:8px;font-size:12.5px;
  padding:8px 12px;
  border:1px solid color-mix(in srgb,var(--err) 22%,transparent);
  background:color-mix(in srgb,var(--err) 6%,transparent);
  border-radius:var(--r-md);margin-bottom:5px;cursor:pointer;
  transition:all .2s var(--ease);
}
.conf-row:hover{transform:translateX(3px);border-color:var(--err);background:color-mix(in srgb,var(--err) 10%,transparent)}
.conf-row .cgo{margin-left:auto;color:var(--err);font-weight:700}
.empty-good{
  display:flex;gap:9px;align-items:center;font-size:13px;color:var(--ok);font-weight:700;
  padding:12px 14px;
  background:color-mix(in srgb,var(--ok) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 22%,transparent);
  border-radius:var(--r-md);
}

/* analiza — wiersze feasibility */
.an-err{display:flex;align-items:center;gap:6px;font-size:12px;padding:7px 10px;border-radius:var(--r-sm);margin-bottom:4px;
  background:color-mix(in srgb,var(--err) 8%,transparent);border:1px solid color-mix(in srgb,var(--err) 22%,transparent);color:var(--ink-2)}
.an-warn{display:flex;align-items:center;gap:6px;font-size:12px;padding:7px 10px;border-radius:var(--r-sm);margin-bottom:4px;
  background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 28%,transparent);color:var(--ink-2)}
.an-stats{font-size:11.5px;color:var(--muted);padding:7px 0 0;border-top:1px solid var(--hair-2);margin-top:4px}
.an-stats b{color:var(--ink-2);font-weight:700}

/* wersje planu */
.ver-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  border:1px solid var(--hair);border-radius:var(--r-md);
  background:var(--surface-2);margin-bottom:6px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ver-row:hover{border-color:var(--hair);box-shadow:var(--shadow-soft)}
.ver-name{flex:1;font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver-date{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── wysuwany menadżer wersji ── */
.ver-overlay{
  position:fixed;inset:0;z-index:70;background:rgba(10,14,24,.35);
  opacity:0;transition:opacity .22s var(--ease);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.ver-overlay.is-open{opacity:1}
.ver-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:71;
  width:min(430px,92vw);
  background:var(--surface);border-left:1px solid var(--hair);
  box-shadow:-18px 0 50px rgba(10,14,24,.25);
  transform:translateX(102%);transition:transform .22s var(--ease);
  display:flex;flex-direction:column;padding:18px 18px 12px;overflow-y:auto;
}
.ver-drawer.is-open{transform:translateX(0)}
.ver-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.ver-head h2{font-size:18px;letter-spacing:-.01em}
.ver-actions-top{margin-bottom:10px}
.ver-actions-top .cta{width:100%;justify-content:center}
.ver-hint{font-size:11.5px;line-height:1.5;margin-bottom:12px}
.ver-list{display:flex;flex-direction:column}
.ver-card{align-items:flex-start;flex-direction:column}
.ver-main{width:100%;min-width:0}
.ver-line1{display:flex;align-items:center;gap:6px;min-width:0}
.ver-line2{display:flex;align-items:center;gap:10px;margin-top:2px}
.ver-cnt{font-size:11px;color:var(--muted)}
.ver-note{font-size:11.5px;color:var(--ink-2);margin-top:5px;padding:6px 8px;border-left:2px solid var(--hair);background:var(--surface-3,rgba(0,0,0,.03));border-radius:4px;line-height:1.45}
.ver-btns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ver-btns .pill{padding:4px 11px;font-size:12px}
.ver-tag{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;flex:0 0 auto}
.ver-tag-ai{background:color-mix(in srgb,#7c3aed 14%,transparent);color:#7c3aed;border:1px solid color-mix(in srgb,#7c3aed 30%,transparent)}
.ver-tag-prop{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent)}
.ver-tag-acc{background:color-mix(in srgb,var(--ok,#2e9e4f) 12%,transparent);color:var(--ok,#2e9e4f);border:1px solid color-mix(in srgb,var(--ok,#2e9e4f) 30%,transparent)}
.ver-badge{
  display:inline-grid;place-items:center;min-width:16px;height:16px;
  padding:0 4px;margin-left:4px;border-radius:99px;
  background:var(--warn);color:#fff;font-size:10px;font-weight:800;
}

/* liczba kopii w oknie druku */
.print-copies-label{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  font-size:12px;color:var(--ink-2);font-weight:600;
}
.print-copies-label input{
  width:58px;padding:5px 7px;border:1px solid var(--hair);border-radius:8px;
  background:var(--surface-2);color:var(--ink);font:inherit;text-align:center;
}

/* legenda kategorii */
.cat-legend{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--hair-2)}
.cat-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto;vertical-align:middle}

/* flash / toast */
.flash{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(14px);
  opacity:0;pointer-events:none;z-index:60;
  background:var(--ink);color:var(--bg);
  padding:12px 22px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 8px 32px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);
  transition:opacity .35s var(--ease),transform .35s var(--ease-out);
}
.theme-light .flash{background:#0f172a;color:#f8fafc}
.flash.show{opacity:1;transform:translateX(-50%) translateY(0)}
.flash.ok{background:var(--ok);color:#fff}
.flash.err{background:var(--err);color:#fff}

/* guard: atrybut hidden musi zawsze wygrywać z display klas CSS */
[hidden]{display:none!important}

/* wejście paneli */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.panel:not([hidden]){animation:fadeUp .4s var(--ease-out)}
.teacher-chip{animation:fadeUp .35s var(--ease-out) both}

@media(max-width:1180px){ .layout{grid-template-columns:248px 1fr 300px} .stats .stat{min-width:54px} }
@media(max-width:980px){
  .appbar{grid-template-columns:1fr auto;row-gap:10px}
  .seg{grid-column:1/-1;order:3;justify-content:center}
  .layout{grid-template-columns:1fr;grid-auto-rows:minmax(0,auto)}
  .rail,.inspector{max-height:30vh}
  .stage{min-height:44vh}
}

/* =================== IKONY SVG =================== */
.ic{display:inline-block;vertical-align:-0.18em;flex:0 0 auto}
[data-ic]{display:inline-flex;align-items:center}
[data-ic] .ic{vertical-align:0}
/* przyciski z ikoną + tekstem */
.pill,.seg-btn,.tab,.btn-block{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.switch-label{display:inline-flex;align-items:center;gap:5px}
.legend-item{display:inline-flex;align-items:center;gap:5px}
.brand-mark{color:#fff}
.icon-btn{display:grid;place-items:center}
.search-ico{display:inline-flex;align-items:center}
.pan-hint{display:inline-flex;align-items:center;gap:6px}
.flash{display:inline-flex;align-items:center;gap:9px}
.prop-alert,.empty-good{display:flex;align-items:center;gap:7px}
.cgo{display:inline-flex;align-items:center}
.prop-check span,.sub-row,.help li{}
.tag{display:inline-flex;align-items:center;gap:3px}
/* przycisk „tylko ikona" (Wyczyść) bez tekstu */
#btn-clear{padding:8px 11px}

/* =================== FOCUS-VISIBLE (dostępność) =================== */
.seg-btn:focus-visible,.tab:focus-visible,.pill:focus-visible,.cta:focus-visible,
.icon-btn:focus-visible,.teacher-chip:focus-visible,.btn-block:focus-visible,
.zoom-hud button:focus-visible,.link:focus-visible,.prop-field select:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--brand-soft);border-color:var(--brand)
}

/* =================== WSKAŹNIK ZAPISU =================== */
.save-status{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:99px;
  border:1px solid var(--hair-2);background:var(--surface-2);color:var(--muted);
  white-space:nowrap;letter-spacing:.02em;text-transform:uppercase;
  transition:all .3s var(--ease);
}
.save-status::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.7;transition:background .3s var(--ease);
}
.save-status.saving{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.save-status.saved{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.save-status.local{color:var(--muted)}

/* przyciski wyłączone (undo/redo) */
.pill:disabled{opacity:.38;cursor:default;transform:none;pointer-events:none}

/* =================== EMPTY-STATE =================== */
.empty-state{position:absolute;inset:0;z-index:15;display:grid;place-items:center;pointer-events:none}
.empty-state .es-card{
  pointer-events:auto;text-align:center;
  background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:36px 40px;box-shadow:var(--shadow-pop);max-width:360px;
  animation:scaleIn .4s var(--ease-out);
}
.es-ic{width:64px;height:64px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.es-card h3{margin:0 0 6px;font-size:18px;font-weight:800}
.es-card p{margin:0 0 18px;font-size:13px;color:var(--muted);line-height:1.5}
.es-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* =================== MODAL (wybór klas do druku) =================== */
.modal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(8,12,24,.6);backdrop-filter:blur(4px) saturate(1.2);
  animation:fadeIn .22s var(--ease-out);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  width:min(480px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-pop),0 0 0 1px var(--hair-2);
  overflow:hidden;animation:scaleIn .28s var(--ease-out);
}
@keyframes scaleIn{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.modal-head h3{margin:0;font-size:16px;font-weight:800}
.modal-tools{display:flex;gap:8px;padding:13px 18px 0}
.print-classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;padding:14px 18px;overflow-y:auto}
.pc-item{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:8px 9px;border:1px solid var(--hair-2);
  border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer;transition:border-color .2s var(--ease)}
.pc-item:hover{border-color:var(--brand)}
.pc-item input{accent-color:var(--brand)}
.modal-foot{display:flex;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--hair)}