/* Nyxium Tabule */

/* `hidden` je jen pravidlo v UA stylu, takze ho kterakoli trida s `display`
   prebije — a dialog i deska by svitily pres sebe hned po nacteni. */
.wb-body [hidden]{ display:none!important; }

.wb-body{ margin:0; background:var(--sol-base); color:var(--tx-1); font-family:var(--fnt-ui); }
.wb-main{ position:relative; }

/* ── seznam ─────────────────────────────────────────────────── */

.wb-seznam{ max-width:1080px; margin:0 auto; padding:28px 22px 80px; }
.wb-seznam-hl{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.wb-seznam-hl h1{ margin:0; font-size:28px; font-weight:600; letter-spacing:.2px; }
.wb-skupina{ margin-bottom:30px; }
.wb-skupina h2{ margin:0 0 12px; font-size:14px; font-weight:600; color:var(--tx-3); text-transform:uppercase; letter-spacing:1.1px; }
.wb-karty{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:12px; }

.wb-karta{ position:relative; display:flex; flex-direction:column; gap:8px; padding:14px 14px 12px;
  border:1px solid var(--stroke-2); border-radius:10px; background:var(--layer); cursor:pointer;
  transition:background .12s, border-color .12s; }
.wb-karta:hover{ background:var(--subtle-hover); border-color:var(--acc); }
.wb-karta-nahled{ aspect-ratio:16/9; border-radius:7px; overflow:hidden; background:var(--sol-quart);
  border:1px solid var(--stroke); }
.wb-karta-nahled img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Dokud tabule nemá náhled (nikdo na ni od té doby nekreslil), je tu jen
   tichá plocha — prázdný rámeček vypadá líp než rozbitý obrázek. */
.wb-karta-nahled-prazdny{ background:
  repeating-linear-gradient(135deg, var(--sol-quart) 0 10px, var(--layer) 10px 20px); }

.wb-karta-jm{ font-weight:600; font-size:15px; word-break:break-word; }
.wb-karta-pod{ font-size:12px; color:var(--tx-3); }
.wb-karta-znacky{ display:flex; gap:6px; flex-wrap:wrap; }
.wb-znacka{ display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600;
  background:rgba(var(--acc-rgb,76,194,255),.16); color:var(--acc); }
.wb-karta-akce{ position:absolute; top:8px; right:8px; display:flex; gap:4px; opacity:0; transition:opacity .12s; }
.wb-karta:hover .wb-karta-akce, .wb-karta:focus-within .wb-karta-akce{ opacity:1; }
.wb-karta-akce button{ width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:6px;
  background:var(--sol-quart); color:var(--tx-2); cursor:pointer; font-size:13px; }
.wb-karta-akce button:hover{ background:var(--ctrl-hover); color:var(--tx-1); }

.wb-prazdno{ padding:40px 10px; text-align:center; color:var(--tx-3); }
.wb-prazdno p{ margin:0 0 12px; }
.wb-tisene{ font-size:12px; color:var(--tx-3); margin:4px 0 0; }

/* ── deska ──────────────────────────────────────────────────── */

.wb-deska{ display:flex; flex-direction:column; height:calc(100dvh - var(--wb-hlavicka,64px)); min-height:420px; }

.wb-lista{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--divider); flex:0 0 auto; }
.wb-zpet{ text-decoration:none; }
.wb-nazev{ flex:0 1 280px; min-width:90px; padding:6px 8px; border:1px solid transparent; border-radius:6px;
  background:none; color:var(--tx-1); font:600 15px var(--fnt-ui); }
.wb-nazev:hover:not(:disabled){ border-color:var(--stroke-2); }
.wb-nazev:focus{ outline:none; border-color:var(--acc); background:var(--layer); }
.wb-nazev:disabled{ color:var(--tx-2); }
.wb-stav{ font-size:12px; color:var(--tx-3); white-space:nowrap; }
.wb-stav.chyba{ color:#ff8fa6; }

.wb-lide{ display:flex; align-items:center; gap:-6px; margin-left:auto; }
.wb-clovek{ width:30px; height:30px; margin-left:-6px; border-radius:50%; border:2px solid var(--sol-base);
  display:grid; place-items:center; font-size:12px; font-weight:700; color:#06121c; }
.wb-clovek[data-kresli]{ box-shadow:0 0 0 2px var(--acc); }

/* ── papír ──────────────────────────────────────────────────── */

/* Papír se řídí volným místem, které mu zbyde, ne počítáním z výšky obrazovky.
   Dřív se od `100dvh` odečítala natvrdo 150 px na lištu s nástroji — na širokém
   okně papír zbytečně zmenšovala a na mobilu, kde se nástroje zalomí do dvou řad,
   zase nestačila. `100cqh` je skutečná výška téhle plochy, takže papír vyjde vždy
   největší možný a nic se nemusí dopočítávat v JS. */
.wb-plocha{ flex:1 1 auto; container-type:size; display:grid; place-items:center;
  padding:6px; overflow:hidden; background:var(--sol-base); }
.wb-papir{ position:relative; background:#fff; border-radius:4px; box-shadow:0 6px 26px rgba(0,0,0,.42);
  width:min(100%, calc(100cqh * 16 / 9)); aspect-ratio:16/9; }

/* Otevřená tabule: hlavička webu do jednoho řádku, ať je papír co největší.
   Logo i přepínač témat zůstávají, jen se nerozvalují přes čtvrtinu obrazovky. */
/* Sdílený vzhled drží obsah webu ve sloupci `max-width:1180px`. Na seznamu
   tabulí to dává smysl, na otevřené tabuli ale papír zbytečně ořezával na
   necelé dvě třetiny okna — tady z toho sloupce vystupujeme. */
body.wb-tabule main.wb-main{ max-width:none !important; margin:0 !important; padding:0 !important; }
body.wb-tabule header{ min-height:0; padding:3px 14px; }
body.wb-tabule header .brand{ gap:9px; }
body.wb-tabule header .brand svg{ width:26px !important; height:26px !important; }
body.wb-tabule header .brand-sub{ display:none; }
body.wb-tabule header .brand-main{ font-size:14px; }
.wb-papir canvas{ position:absolute; inset:0; width:100%; height:100%; border-radius:4px; }
#prekryv{ touch-action:none; cursor:crosshair; }
.wb-papir[data-cteni] #prekryv{ cursor:default; }

.wb-textvstup{ position:absolute; z-index:3; padding:2px 6px; border:2px solid var(--acc); border-radius:4px;
  background:#fff; color:#111; font:500 20px var(--fnt-ui); min-width:160px; }

/* ── nástroje ───────────────────────────────────────────────── */

.wb-nastroje{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:8px 12px 12px; border-top:1px solid var(--divider); }
.wb-nast-skup{ display:flex; align-items:center; gap:4px; padding:3px; border-radius:9px; background:var(--layer); }
.wb-nast{ width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:7px;
  background:none; color:var(--tx-2); font-size:17px; line-height:1; cursor:pointer; transition:background .1s; }
.wb-nast:hover{ background:var(--ctrl-hover); color:var(--tx-1); }
.wb-nast.je{ background:var(--acc-deep); color:#fff; }
.wb-nast.wb-nebezpecne:hover{ background:#c42b1c; color:#fff; }
.wb-nast:disabled{ opacity:.35; cursor:not-allowed; }
.wb-nast:disabled:hover{ background:none; color:var(--tx-2); }

.wb-barva{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.wb-barva.je{ border-color:var(--tx-1); box-shadow:0 0 0 2px var(--sol-base) inset; }
.wb-sila{ width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:7px;
  background:none; cursor:pointer; }
.wb-sila i{ display:block; border-radius:50%; background:var(--tx-2); }
.wb-sila.je{ background:var(--ctrl-hover); }
.wb-sila.je i{ background:var(--tx-1); }

.wb-hlaska{ position:fixed; left:50%; bottom:92px; transform:translateX(-50%); z-index:40;
  padding:9px 16px; border-radius:8px; background:var(--sol-quart); color:var(--tx-1);
  border:1px solid var(--stroke-2); box-shadow:0 8px 24px rgba(0,0,0,.42); font-size:13px; }

/* ── dialog ─────────────────────────────────────────────────── */

.wb-zaclona{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:16px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
.wb-dialog{ width:min(520px,100%); max-height:90dvh; overflow:auto; border:1px solid var(--stroke-2);
  border-radius:12px; background:var(--sol-quart); box-shadow:0 24px 64px rgba(0,0,0,.5); }
.wb-dialog-hl{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--divider); }
.wb-dialog-hl h2{ margin:0; font-size:17px; font-weight:600; }
.wb-dialog-cast{ padding:16px; border-bottom:1px solid var(--divider); }
.wb-dialog-cast:last-child{ border-bottom:0; }
.wb-radek{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wb-radek-tesny{ justify-content:flex-start; margin-top:10px; }
.wb-radek-tesny .wb-vstup{ flex:1 1 auto; min-width:0; }
.wb-vstup{ padding:8px 10px; border:1px solid var(--stroke-2); border-radius:6px;
  background:var(--layer); color:var(--tx-1); font:14px var(--fnt-ui); }
.wb-vstup:focus{ outline:none; border-color:var(--acc); }
.wb-uzky{ flex:0 0 auto; width:auto; }
.wb-odkaz{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12.5px; }
.wb-volby{ display:flex; gap:16px; margin-top:10px; font-size:13px; color:var(--tx-2); }
.wb-volby label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.wb-siroke{ width:100%; margin-top:10px; }
.wb-zrus{ margin-left:auto; border:0; background:none; color:var(--tx-3); font:inherit;
  cursor:pointer; text-decoration:underline; padding:0; }
.wb-zrus:hover{ color:#ff8fa6; }
.wb-chyba{ margin-top:8px; font-size:13px; color:#ff8fa6; }

.wb-prepinac{ position:relative; flex:0 0 auto; width:42px; height:24px; cursor:pointer; }
.wb-prepinac input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.wb-prepinac span{ position:absolute; inset:0; border-radius:12px; background:var(--ctrl-hover);
  border:1px solid var(--stroke-2); transition:background .14s; pointer-events:none; }
.wb-prepinac span::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:var(--tx-2); transition:transform .14s, background .14s; }
.wb-prepinac input:checked + span{ background:var(--acc-deep); border-color:transparent; }
.wb-prepinac input:checked + span::after{ transform:translateX(18px); background:#fff; }

.wb-sdileni{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.wb-sdileni li{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px; background:var(--layer); }
.wb-sdileni b{ font-weight:600; font-size:14px; }
.wb-sdileni span{ font-size:12px; color:var(--tx-3); margin-left:auto; }
.wb-sdileni button{ width:26px; height:26px; border:0; border-radius:6px; background:none;
  color:var(--tx-3); cursor:pointer; font-size:14px; }
.wb-sdileni button:hover{ background:#c42b1c; color:#fff; }

@media (max-width:720px){
  .wb-lista{ flex-wrap:wrap; }
  .wb-nazev{ flex:1 1 140px; }
  .wb-lide{ order:3; margin-left:0; }
  .wb-nastroje{ gap:8px; }
  .wb-nast{ width:34px; height:34px; font-size:15px; }
}
@media (pointer:coarse){
  .wb-nast{ width:44px!important; height:44px!important; }
  .wb-barva{ width:30px!important; height:30px!important; }
  .wb-karta-akce{ opacity:1!important; }
}

.theme-picker{ position:relative; }
.theme-pop{ position:absolute; top:calc(100% + 8px); right:0; z-index:300; width:214px; display:none; }
.theme-pop.open{ display:block; }
.theme-btn.open{ color:var(--akcent, #4cc2ff); }

.confirm-overlay{ position:fixed; inset:0; z-index:600; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); }
.confirm-overlay.active{ display:flex; }
.confirm-box{ width:min(420px, calc(100vw - 32px)); padding:22px 22px 18px; text-align:left; }
.confirm-title{ font-weight:600; font-size:17px; margin-bottom:6px; }
.confirm-msg{ line-height:1.5; }
.confirm-btns{ display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
.wb-dlg-vstup{ width:100%; margin-top:14px; padding:9px 11px; border-radius:8px;
  border:1px solid var(--stroke-2, rgba(255,255,255,.14)); background:rgba(0,0,0,.25);
  color:inherit; font:inherit; }
.wb-dlg-vstup:focus{ outline:none; border-color:var(--akcent, #4cc2ff); }

/* Clear, labelled tools. Scope everything to the whiteboard, including shared UI overrides. */
body.wb-tabule { overflow:hidden; }
.wb-body .wb-deska { min-height:0; }
.wb-body .wb-lista { padding:9px 16px; gap:12px; }
.wb-body .wb-zpet, .wb-body .wb-share { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; }
.wb-body .wb-zpet { color:var(--tx-1)!important; }
.wb-body .wb-lista svg, .wb-body .wb-help svg { width:18px; height:18px; flex-shrink:0; }
.wb-body .wb-nazev { font-size:15px; }
.wb-body .wb-stav { display:inline-flex; align-items:center; gap:6px; }
.wb-body .wb-stav { max-width:220px; overflow:hidden; }
.wb-body .wb-stav:empty { display:none; }
.wb-body .wb-stav:not(:empty)::before { content:''; width:6px; height:6px; border-radius:50%; background:#62b991; flex-shrink:0; }
.wb-body .wb-stav.chyba::before { background:#e6a453; }
.wb-body .wb-plocha { min-height:0; min-width:0; padding:12px 16px; }
.wb-body .wb-papir { width:min(100%,calc((100cqh - 4px) * 16 / 9)); border-radius:6px; box-shadow:0 3px 16px #0003; }
.wb-body .wb-nastroje { display:block; padding:10px 16px max(8px,env(safe-area-inset-bottom)); background:var(--sol-base); }
.wb-dock { display:flex; justify-content:center; align-items:flex-start; gap:20px; max-width:1500px; margin:0 auto; }
.wb-tool-scroll, .wb-settings { display:flex; gap:12px; min-width:0; }
.wb-tools-wrap { display:contents; }
.wb-more-tools { display:none; }
.wb-tool-scroll { overflow-x:auto; scrollbar-width:thin; padding:2px 2px 5px; }
.wb-tool-group { flex:0 0 auto; min-width:0; }
.wb-group-label { display:flex; align-items:center; gap:8px; padding:0 5px 6px; font-size:12px; line-height:16px; color:var(--tx-2); font-weight:500; }
.wb-group-label>span+span { color:var(--tx-3); font-weight:400; }
.wb-body .wb-nast-skup { gap:3px; padding:4px; border:1px solid var(--stroke-2); border-radius:12px; background:var(--layer); }
.wb-body .wb-nast { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:auto!important; min-width:52px; height:54px!important; padding:6px 8px; border:1px solid transparent; border-radius:8px; font:500 12px/1.15 var(--fnt-ui); letter-spacing:normal; text-transform:none; }
.wb-body .wb-nast svg { display:block; width:22px; height:22px; flex-shrink:0; }
.wb-body .wb-nast span { white-space:nowrap; }
.wb-body .wb-nast.je { color:var(--tx-1); border-color:var(--acc); background:color-mix(in srgb,var(--acc) 17%,var(--layer)); box-shadow:inset 0 -2px var(--acc); }
.wb-body .wb-nast.je svg { color:var(--acc); }
.wb-body .wb-nast:disabled { opacity:.4; }
.wb-body .wb-nebezpecne { color:var(--tx-3); }
.wb-body :is(.wb-nast,.wb-barva,.wb-sila,.wb-help):focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
.wb-body .wb-settings .wb-nast-skup { height:64px; box-sizing:border-box; }
.wb-body .wb-barva { position:relative; display:grid; place-items:center; width:30px!important; height:40px!important; border:0; border-radius:7px; background:transparent!important; }
.wb-body .wb-barva::before { content:''; width:24px; height:24px; border-radius:50%; background:var(--wb-color); box-shadow:inset 0 0 0 1px #80808050; }
.wb-body .wb-barva.je { box-shadow:none; background:var(--ctrl-hover)!important; }
.wb-body .wb-barva.je::before { outline:2px solid var(--tx-1); outline-offset:2px; }
.wb-body .wb-barva svg { position:absolute; width:14px; height:14px; color:var(--wb-check,#fff); visibility:hidden; }
.wb-body .wb-barva.je svg { visibility:visible; }
.wb-body .wb-sila { width:36px; height:54px; display:flex; flex-direction:column; justify-content:center; gap:6px; color:var(--tx-2); border:1px solid transparent; font:500 12px/1 var(--fnt-ui); }
.wb-body .wb-sila i { height:16px!important; width:24px!important; border-radius:0; background:none; display:flex; align-items:center; }
.wb-body .wb-sila i::before { content:''; display:block; width:24px; height:var(--wb-width); background:currentColor; border-radius:10px; }
.wb-body .wb-sila.je { color:var(--tx-1); background:var(--ctrl-hover); border-color:var(--stroke-strong); }
.wb-body .wb-settings button:disabled { opacity:.4; cursor:not-allowed; }
.wb-tool-context { max-width:1500px; margin:4px auto 0; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:26px; color:var(--tx-3); font-size:12px; }
.wb-current { display:flex; gap:10px; align-items:baseline; min-width:0; }
.wb-current strong { color:var(--tx-2); font-weight:600; white-space:nowrap; }
.wb-help { display:inline-flex; align-items:center; gap:7px; flex-shrink:0; border:0; background:none; color:var(--tx-2); font:inherit; padding:5px; border-radius:5px; cursor:pointer; }
.wb-help:hover { background:var(--subtle-hover); color:var(--tx-1); }
.wb-body .wb-hlaska { bottom:calc(var(--wb-dock-height,132px) + 12px); max-width:calc(100vw - 32px); box-sizing:border-box; }
.wb-body .confirm-msg { white-space:pre-line; }
.wb-body .confirm-box { max-height:calc(100dvh - 32px); overflow:auto; }
@media(max-width:1500px) {
  .wb-dock { flex-wrap:wrap; gap:7px; }
  .wb-tool-scroll { justify-content:center; flex:1 1 100%; }
  .wb-settings { justify-content:center; }
  .wb-body .wb-settings .wb-nast-skup { height:48px; }
  .wb-body .wb-sila { height:38px; flex-direction:row; gap:5px; width:48px; }
  .wb-body .wb-sila i, .wb-body .wb-sila i::before { width:16px!important; }
  .wb-settings .wb-group-label { padding-bottom:3px; }
}
@media(max-width:720px) {
  .wb-body .wb-lista { padding:7px 10px; gap:6px; flex-wrap:nowrap; }
  .wb-body .wb-nazev { flex:1; width:0; min-width:60px; }
  .wb-body .wb-lide { display:none; }
  .wb-body .wb-stav { font-size:0; }
  .wb-body .wb-stav::before { width:7px; height:7px; }
  .wb-body .wb-plocha { padding:8px; }
  .wb-body .wb-nastroje { padding:8px 8px max(5px,env(safe-area-inset-bottom)); }
  .wb-tool-scroll { justify-content:flex-start; gap:8px; }
  .wb-tools-wrap { position:relative; display:block; width:100%; min-width:0; padding-right:36px; box-sizing:border-box; }
  .wb-body .wb-more-tools { display:grid; place-items:center; position:absolute; top:6px; right:0; width:32px; height:54px; border:1px solid var(--stroke-2); border-radius:8px; background:var(--layer); color:var(--tx-1); cursor:pointer; }
  .wb-more-tools svg { width:20px; height:20px; }
  .wb-more-tools[data-back] svg { transform:rotate(180deg); }
  .wb-tool-scroll .wb-group-label { display:none; }
  .wb-body .wb-nast { min-width:54px; height:54px!important; }
  .wb-settings { width:100%; justify-content:space-between; gap:8px; }
  .wb-body .wb-settings .wb-nast-skup { padding:2px; gap:0; height:74px; }
  .wb-body .wb-barvy { display:grid; grid-template-columns:repeat(7,29px); }
  .wb-body .wb-barva { width:29px!important; height:34px!important; }
  .wb-body .wb-sila { width:30px; height:38px; flex-direction:column; gap:4px; }
  .wb-body .wb-sila i { height:12px!important; }
  .wb-settings .wb-group-label>span+span { display:none; }
  .wb-tool-context { margin-top:3px; font-size:12px; }
  .wb-current { gap:6px; }
  #radaNastroje { display:none; }
  .wb-help { min-height:30px; }
}
@media(max-width:380px) {
  .wb-body .wb-barvy { grid-template-columns:repeat(7,23px); }
  .wb-body .wb-barva { width:23px!important; }
  .wb-body .wb-barva::before { width:18px; height:18px; }
  .wb-body .wb-sila { width:26px; }
}
@media(max-height:520px) and (min-width:721px) {
  .wb-body .wb-nastroje { padding-top:5px; }
  .wb-tool-scroll .wb-group-label, .wb-tool-context { display:none; }
  .wb-body .wb-nast { height:44px!important; flex-direction:row; }
  .wb-body .wb-settings .wb-nast-skup { height:36px; }
  .wb-settings .wb-group-label { display:none; }
}

.wb-history { width:min(620px,calc(100vw - 32px)); max-height:80dvh; box-sizing:border-box; padding:24px; border:1px solid var(--stroke-2); border-radius:14px; background:var(--sol-base,#252525); color:var(--tx-1,#fff); box-shadow:0 16px 64px #0006; font:14px/1.5 var(--fnt-ui); }
.wb-history::backdrop { background:#0007; backdrop-filter:blur(3px); }
.wb-history-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wb-history h2 { font-size:20px; margin:0; }
.wb-history-info { color:var(--tx-2); margin:16px 0; }
.wb-history-list { display:grid; gap:10px; }
.wb-history-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid var(--stroke-2); border-radius:8px; background:var(--layer); }
.wb-history-row strong,.wb-history-row span { display:block; }
.wb-history-row span { margin-top:3px; color:var(--tx-2); overflow-wrap:anywhere; }
.wb-history-row .btn { flex-shrink:0; }
@media(max-width:480px) { .wb-history { padding:16px; } .wb-history-row { align-items:flex-start; flex-direction:column; gap:10px; } }

/* Put controls on the perimeter and give the writing surface the remaining space. */
.wb-body .wb-lista { padding:4px 8px; gap:8px; min-width:0; }
.wb-body .wb-lista :is(.wb-zpet,.wb-share,.wb-view-button,.wb-help) { min-height:34px; height:34px; box-sizing:border-box; }
.wb-body .wb-view-button,.wb-body .wb-lista .wb-help { width:34px; padding:7px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.wb-body .wb-lista .wb-help span { display:none; }
.wb-body .wb-lista .wb-help { border:1px solid var(--stroke-2); background:var(--layer); }
.wb-body .wb-view-button[aria-pressed=true] { color:var(--acc); border-color:var(--acc); }
.wb-body .wb-tool-context { display:none; }
.wb-body .wb-plocha { padding:3px; }
.wb-body .wb-papir { width:min(100%,calc(100cqh * 16 / 9)); border-radius:3px; }
.wb-body .wb-papir canvas { border-radius:3px; }
.wb-body .wb-nastroje { padding:4px 8px max(4px,env(safe-area-inset-bottom)); }
.wb-body .wb-group-label { padding-bottom:3px; }
.wb-body .wb-dock { gap:4px; }
.wb-body.wb-focus > header,.wb-body.wb-focus > .nyx-hl { display:none!important; }
.wb-body.wb-focus .wb-deska { height:100dvh; }
.wb-body.wb-tools-hidden .wb-nastroje { display:none; }
.wb-body.wb-tabule .wb-hlaska { bottom:16px; }
@media(min-width:1100px), (min-width:721px) and (orientation:landscape) {
  .wb-body .wb-deska { display:grid; grid-template-columns:92px minmax(0,1fr) 90px; grid-template-rows:auto minmax(0,1fr); grid-template-areas:'top top top' 'tools paper settings'; }
  .wb-body .wb-lista { grid-area:top; }
  .wb-body .wb-plocha { grid-area:paper; }
  .wb-body .wb-nastroje,.wb-body .wb-dock { display:contents; }
  .wb-body .wb-tools-wrap { grid-area:tools; display:block; position:relative; min-width:0; min-height:0; padding:4px 3px 30px; box-sizing:border-box; border-right:1px solid var(--divider); }
  .wb-body .wb-tool-scroll { height:100%; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; display:flex; flex-direction:column; justify-content:flex-start; gap:8px; padding:0 2px; scrollbar-width:thin; }
  .wb-body .wb-tool-scroll .wb-nast-skup { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:3px; }
  .wb-body .wb-tool-scroll .wb-group-label { display:none; }
  .wb-body .wb-tool-scroll .wb-nast { min-width:0; width:100%!important; height:44px!important; padding:3px 2px; flex-direction:column; gap:2px; }
  .wb-body .wb-tool-scroll .wb-nast svg { width:20px; height:20px; }
  .wb-body .wb-more-tools { display:grid; place-items:center; position:absolute; bottom:3px; top:auto; right:3px; left:3px; width:calc(100% - 6px); height:25px; padding:2px; border:1px solid var(--stroke-2); border-radius:6px; background:var(--layer); color:var(--tx-2); }
  .wb-body .wb-more-tools svg { width:18px; height:18px; transform:rotate(90deg); }
  .wb-body .wb-more-tools[data-back] svg { transform:rotate(-90deg); }
  .wb-body .wb-settings { grid-area:settings; flex-direction:column; align-items:stretch; justify-content:flex-start; width:auto; overflow-y:auto; gap:16px; padding:8px 5px; border-left:1px solid var(--divider); }
  .wb-body .wb-settings .wb-group-label { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:0 1px 6px; }
  .wb-body .wb-settings .wb-group-label>span+span { display:none; }
  .wb-body .wb-settings .wb-nast-skup { height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:4px; }
  .wb-body .wb-barva { width:30px!important; height:34px!important; justify-self:center; }
  .wb-body .wb-sila { width:30px; height:46px; flex-direction:column; gap:5px; justify-self:center; }
  .wb-body .wb-sila i,.wb-body .wb-sila i::before { width:22px!important; }
  .wb-body.wb-tools-hidden .wb-deska { grid-template-columns:0 minmax(0,1fr) 0; }
  .wb-body.wb-tools-hidden :is(.wb-tools-wrap,.wb-settings) { display:none; }
}
@media(max-width:720px) {
  .wb-body .wb-lista { padding:4px; gap:4px; }
  .wb-body .wb-nazev { min-width:50px; padding:5px; }
  .wb-body .wb-share { width:34px; padding:7px; }
  .wb-body .wb-share span { display:none; }
  .wb-body .wb-settings .wb-group-label { display:none; }
  .wb-body .wb-nast { height:48px!important; }
  .wb-body .wb-more-tools { height:48px; }
}

.wb-body .wb-lista .wb-view-button { padding:7px!important; min-width:34px; }
.wb-body .wb-lista .wb-view-button svg { width:18px!important; min-width:18px; height:18px!important; }
.wb-body .wb-more-tools:disabled { visibility:hidden; }
@media(max-width:720px) { .wb-body .wb-lista .wb-share { padding:7px!important; } .wb-body .wb-share svg { width:18px!important; min-width:18px; } }

/* Grouped tool cards: same rail widths, clearer hierarchy and selected states. */
.wb-body .wb-nast,.wb-body .wb-sila,.wb-body .wb-barva { transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease; }
.wb-body .wb-nast.je { background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 24%,var(--layer)),color-mix(in srgb,var(--acc) 10%,var(--layer))); border-color:color-mix(in srgb,var(--acc) 65%,transparent); box-shadow:inset 0 1px 0 #ffffff15,0 2px 8px #0002; }
.wb-body .wb-nast:not(:disabled):hover { background:color-mix(in srgb,var(--acc) 10%,var(--layer)); border-color:color-mix(in srgb,var(--acc) 30%,var(--stroke-2)); }
.wb-body .wb-nast.je svg { filter:drop-shadow(0 1px 3px color-mix(in srgb,var(--acc) 25%,transparent)); }
.wb-body .wb-barva { border-radius:9px; }
.wb-body .wb-barva::before { box-shadow:inset 0 1px 1px #ffffff26,inset 0 0 0 1px #80808050,0 2px 3px #0002; }
.wb-body .wb-barva:not(:disabled):hover { background:var(--ctrl-hover)!important; }
.wb-body .wb-barva.je { background:color-mix(in srgb,var(--acc) 12%,var(--layer))!important; }
.wb-body .wb-barva.je::before { outline-color:var(--tx-1); outline-width:2px; outline-offset:2px; }
.wb-body .wb-sila { border-radius:8px; }
.wb-body .wb-sila.je { border-color:color-mix(in srgb,var(--acc) 60%,transparent); color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,var(--layer)); box-shadow:inset 0 1px 0 #ffffff10; }
.wb-body .wb-nebezpecne:not(:disabled):hover { color:#e97c7c; background:color-mix(in srgb,#d13438 12%,var(--layer)); border-color:color-mix(in srgb,#d13438 35%,var(--stroke-2)); }
@media(min-width:1100px), (min-width:721px) and (orientation:landscape) {
  .wb-body .wb-tools-wrap { padding:8px 4px 30px; background:linear-gradient(90deg,var(--sol-base),color-mix(in srgb,var(--layer) 45%,var(--sol-base))); border-right-color:var(--stroke-2); }
  .wb-body .wb-tool-scroll { gap:10px; padding:0 1px 3px; scrollbar-width:thin; scrollbar-color:var(--stroke-strong) transparent; }
  .wb-body .wb-tool-scroll>.wb-tool-group,.wb-body .wb-settings>.wb-tool-group { border:1px solid var(--stroke-2); border-radius:12px; background:linear-gradient(155deg,var(--layer),color-mix(in srgb,var(--layer) 65%,var(--sol-base))); box-shadow:inset 0 1px 0 #ffffff08,0 3px 8px #00000014; overflow:hidden; }
  .wb-body .wb-tool-scroll .wb-group-label { display:flex; justify-content:center; padding:9px 2px 6px; color:var(--tx-2); font-size:12px; font-weight:600; line-height:16px; }
  .wb-body .wb-tool-scroll .wb-nast-skup { padding:3px; gap:2px; border:0; border-radius:0; background:transparent; }
  .wb-body .wb-tool-scroll .wb-nast { position:relative; border-radius:8px; }
  .wb-body .wb-tool-scroll .wb-nast.je::after { content:''; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:2px; background:var(--acc); }
  .wb-body .wb-tool-scroll .wb-actions .wb-nast:last-child { margin-top:4px; border-top-color:var(--stroke-2); }
  .wb-body .wb-settings { gap:12px; padding:8px 4px; background:linear-gradient(270deg,var(--sol-base),color-mix(in srgb,var(--layer) 45%,var(--sol-base))); border-left-color:var(--stroke-2); }
  .wb-body .wb-settings .wb-group-label { align-items:center; text-align:center; padding:9px 2px 7px; gap:5px; color:var(--tx-2); font-weight:600; }
  .wb-body .wb-settings .wb-group-label>span+span { display:block; max-width:100%; color:var(--tx-2); line-height:16px; font-weight:400; overflow-wrap:anywhere; }
  .wb-body .wb-settings #barvaNazev { font-size:12px; padding:3px 4px; border:1px solid var(--stroke-2); border-radius:6px; background:var(--sol-base); box-sizing:border-box; }
  .wb-body .wb-settings #barvaNazev::before { content:''; display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:50%; background:var(--wb-current-color,#111111); box-shadow:0 0 0 1px #80808060; }
  .wb-body .wb-settings #silaHodnota { color:var(--acc); }
  .wb-body .wb-settings .wb-nast-skup { border:0; border-radius:0; background:transparent; padding:4px 3px 7px; }
  .wb-body .wb-more-tools { border-radius:8px; background:var(--layer); box-shadow:0 -4px 8px var(--sol-base); }
}
@media(prefers-reduced-motion:reduce) { .wb-body .wb-nast,.wb-body .wb-sila,.wb-body .wb-barva { transition:none; } }

/* Shared button styles must not wash out the tool labels in the light theme. */
.wb-body #nastroje .wb-nast { color:var(--tx-1)!important; }
.wb-body #nastroje .wb-nast:disabled { opacity:.6; color:var(--tx-2)!important; }
.wb-body #nastroje .wb-nebezpecne:not(:disabled):hover { color:#d65656!important; }
.wb-body #nastroje .wb-sila { color:var(--tx-2)!important; }
.wb-body #nastroje .wb-sila.je { color:var(--acc)!important; }
.wb-body .wb-lista :is(.wb-view-button,.wb-zpet,.wb-help) { color:var(--tx-1)!important; }
.wb-body .wb-lista .wb-view-button[aria-pressed=true] { color:var(--acc)!important; }

/* Saved versions show the actual drawing before it is restored. */
.wb-history { width:min(800px,calc(100vw - 32px)); }
.wb-history-row { display:grid; grid-template-columns:200px minmax(0,1fr) auto; align-items:center; gap:16px; }
.wb-history-preview { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16/9; padding:0!important; overflow:hidden; border:1px solid var(--stroke-2); border-radius:7px; background:#fff!important; color:#444!important; cursor:zoom-in; }
.wb-history-preview img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.wb-history-preview:hover { border-color:var(--acc); box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 25%,transparent); }
.wb-history-preview:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
.wb-history-preview .wb-history-preview-status { margin:0; padding:12px; color:#555; font:12px/1.5 var(--fnt-ui); text-align:center; }
.wb-history-preview[data-state=loading] { cursor:progress; }
.wb-history-preview[data-state=error] { cursor:pointer; }
.wb-history-row.is-expanded { grid-template-columns:minmax(0,1fr) auto; }
.wb-history-row.is-expanded .wb-history-preview { grid-column:1/-1; cursor:zoom-out; }
@media(max-width:600px) {
  .wb-history-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .wb-history-preview { grid-column:1/-1; }
  .wb-history-row .btn { align-self:center; }
}