:root{
  --bg:#F4F7F7; --paper:#FFFFFF; --ink:#12302F; --ink-2:#4B6462; --line:#C9D8D6;
  --teal:#0F5C5A; --teal-2:#178A86; --mint:#CDEDE7; --orange:#E8622A; --orange-soft:#FDE9DF;
  --hold:#B8860B; --hold-soft:#FBF1D6; --ok:#1F8A5A;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0E1F1E; --paper:#15302E; --ink:#E7F0EF; --ink-2:#A9C0BE; --line:#2F4D4A;
  --teal:#7FD1C4; --teal-2:#4FB3A9; --mint:#1D4A46; --orange:#F58A5A; --orange-soft:#4A2A1C; --hold:#E6B84A; --hold-soft:#443A1A; --ok:#5FD39A;
}}
:root[data-theme="dark"]{ --bg:#0E1F1E; --paper:#15302E; --ink:#E7F0EF; --ink-2:#A9C0BE; --line:#2F4D4A; --teal:#7FD1C4; --teal-2:#4FB3A9; --mint:#1D4A46; --orange:#F58A5A; --orange-soft:#4A2A1C; --hold:#E6B84A; --hold-soft:#443A1A; --ok:#5FD39A; }
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;line-height:1.5}
.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 70px}
header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--teal)}
.brand{display:inline-block;line-height:0}.brand img{height:58px;width:auto;display:block}.brand .logo-dark{display:none}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo-light{display:none}:root:not([data-theme="light"]) .brand .logo-dark{display:block}}:root[data-theme="dark"] .brand .logo-light{display:none}:root[data-theme="dark"] .brand .logo-dark{display:block}
.tag{font-size:13px;color:var(--ink-2)}
h1{font-size:clamp(26px,4.4vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:28px 0 8px}
.lede{color:var(--ink-2);margin:0 0 18px;max-width:64ch}
.plays{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.plays button{font:inherit;font-weight:600;font-size:15px;padding:9px 14px;border-radius:5px;border:1.5px solid var(--teal);background:transparent;color:var(--teal);cursor:pointer}
.plays button.primary{background:var(--teal);color:#fff}
.plays button:hover{background:var(--teal-2);color:#fff}
.plays button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.plays button:disabled{opacity:.45;cursor:default}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media (max-width:820px){ .grid{grid-template-columns:1fr} }
svg{width:100%;height:auto;display:block;background:var(--paper);border:1px solid var(--line);border-radius:8px}
.box{cursor:pointer}
.box rect{fill:var(--paper);stroke:var(--line);stroke-width:1.5;transition:fill .25s,stroke .25s}
.box text{fill:var(--ink);font-family:"IBM Plex Sans",sans-serif;font-size:14px;font-weight:500;pointer-events:none}
.box .sub{fill:var(--ink-2);font-size:11.5px;font-weight:400}
.box.sel rect{stroke:var(--teal);stroke-width:2.5}
.box.on rect{fill:var(--mint);stroke:var(--teal-2);stroke-width:2.5}
.box.bad rect{fill:var(--orange-soft);stroke:var(--orange);stroke-width:2.5}
.box.wait rect{fill:var(--hold-soft);stroke:var(--hold);stroke-width:2.5}
.box.impact rect{stroke-dasharray:5 4}
.gw{fill:var(--bg);stroke:var(--teal);stroke-width:2}
.gwlab{fill:var(--teal);font-family:"IBM Plex Sans",sans-serif;font-size:13px;font-weight:600}
.lane{fill:none;stroke:var(--line);stroke-width:2}
.lane.impact{stroke-dasharray:5 4}
.lane.lit{stroke:var(--teal-2);stroke-width:3}
.lane.bad{stroke:var(--orange);stroke-width:3}
.lane.wait{stroke:var(--hold);stroke-width:3}
.dot{fill:var(--orange);opacity:0}
.cap{fill:var(--ink-2);font-family:"IBM Plex Sans",sans-serif;font-size:12px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px 18px;min-height:220px}
.panel h2{font-size:18px;margin:0 0 8px;letter-spacing:-.01em}
.panel p{margin:0 0 10px;font-size:15px}
.panel .k{color:var(--ink-2);font-size:13.5px}
.status{margin-top:10px;padding:10px 12px;border-radius:5px;background:var(--mint);font-size:14.5px;min-height:44px}
.status.bad{background:var(--orange-soft)}
.status.wait{background:var(--hold-soft)}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:13px;color:var(--ink-2)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px;border:2px solid}
.tail{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.tail a{color:var(--teal)}
@media (prefers-reduced-motion:reduce){ .box rect,.lane{transition:none} }

/* Přebalení pro CSP: náhrady za inline style v SVG a v legendě. */
.lane.ghost{opacity:0}
.legend i.legend-ok{border-color:var(--teal-2);background:var(--mint)}
.legend i.legend-blocked{border-color:var(--orange);background:var(--orange-soft)}
.legend i.legend-hold{border-color:var(--hold);background:var(--hold-soft)}