/* viewer-controls.css — KANONICKÉ OVLÁDACÍ PRVKY VIEWERU (slider · pole-slider ·
   dropdown · přepínač · sekce panelu). 1:1 ../Profilab/app_UI/shell.css.

   ⚓ JEDEN ZDROJ PRO VŠECHNY HOSTITELE. Do 2026-08-04 tenhle blok žil JEN v inline
      <style> stránky `3D_viewer.html`, jenže flyouty staví `env-controls.js` na
      <body> HOSTITELE — a galerie ta pravidla neměla. Změřeno na produkci: slidery,
      `<select>` i checkboxy se v galerii vykreslily NATIVNĚ (bílé lišty, systémová
      šipka), protože je nestylovalo vůbec nic.
   ⛔ Nekopírovat do stránek — kdo hostuje `<viewer-3d>` s `env-controls`, linkuje
      TENHLE soubor.
   ⚓ Paletu (`--accent`, `--bg-button`, …) sem NEPATŘÍ: tokeny nese komponenta v
      `:host` (`3D_viewer.js`) a `env-controls.js` je kopíruje na flyout.
   ⚠️ Nese i pár selektorů chrome samostatné stránky (`#pvSidePanels`, `#stage`,
      `.side-tab`) — na hostiteli, který ty prvky nemá, jsou neúčinné; drží se tu,
      aby řez zůstal doslovný a nic se cestou neztratilo. */

/* ══ SLIDER + POLE-SLIDER (.proto-field) — 1:1 ../Profilab/app_UI/shell.css ř. 463–606.
     Týž důvod jako u `.cs-*` níž: `env-controls.js` staví řádky env panelu jako
     `.envp-row.proto-field` a STYLY čeká ze `shell.css`, který tahle samostatná stránka
     nenačítá. Bez nich měl každý slider `appearance:auto` a rozměr **0×0** — změřeno.
     ⚠️ Při aktualizaci vieweru z konventoru srovnej i tenhle blok. ══ */
/* ⚠️ OTEVÍRACÍ ZNAČKA KOMENTÁŘE TU DO 2026-08-04 CHYBĚLA a byla to živá závada,
   ne kosmetika: komentář nad tímhle řádkem se zavřel už u značky ══ a následující
   prózu vzal parser jako SELEKTOR — podle pravidel zotavení ji polykal až po první
   složenou závorku, tedy i s celým pravidlem input[type=range]. Základní deklarace
   slideru (appearance:none, výška 20px) proto NIKDY neplatila ani v samostatném
   vieweru: mezi pravidly v document.styleSheets vůbec nebyla a slidery se kreslily
   nativně. ⛔ V komentářích tady nepiš značky komentáře — zavřou ho předčasně.
   Tvarově i barevně je to totéž co pole-slider `.proto-field` níž; ten je jen jeho
   podoba s popiskem a hodnotou uvnitř. Nativní `input[type=range]` tak vypadá stejně
   všude, i v panelech, které na .proto-field ještě nepřešly.
   Výplň: WebKit nemá progress pseudo → jede přes `--fill` (0–100 %), kterou dopisuje
   `range-fill.js` (a appky, co si paintRange dělají samy); Firefox má ::-moz-range-progress.
   Slider NIKDY neukazuje focus obrys při tažení. */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 0; cursor: ew-resize;   /* výška = .proto-field */
  background: transparent; border: none; outline: none;
}
input[type=range]:focus,
input[type=range]:focus-visible,
input[type=range]:active                { outline: none; }
input[type=range]::-moz-focus-outer     { border: 0; }        /* kill Firefox dotted focus border */
/* Dráha = zápust, výplň = tělo tlačítka mezi `--fill-a` a `--fill` (u obousměrné
   hodnoty sedí `--fill-a` na nule stupnice, jinak je nula = levý kraj — viz .proto-field) */
input[type=range]::-webkit-slider-runnable-track {
  height: 20px; border: none; outline: none; border-radius: var(--radius-sm);
  background: linear-gradient(to right,
              var(--bg-primary) var(--fill-a, 0%), var(--bg-button) var(--fill-a, 0%),
              var(--bg-button) var(--fill, 0%), var(--bg-primary) var(--fill, 0%));
  box-shadow: var(--cell-shadow);
}
input[type=range]:hover::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
              var(--bg-primary) var(--fill-a, 0%), var(--bg-tertiary) var(--fill-a, 0%),
              var(--bg-tertiary) var(--fill, 0%), var(--bg-primary) var(--fill, 0%));
}
input[type=range]::-moz-range-track {
  height: 20px; border: none; outline: none; border-radius: var(--radius-sm);
  background: var(--bg-primary); box-shadow: var(--cell-shadow);
}
input[type=range]::-moz-range-progress {       /* Firefox: nativní výplň */
  height: 20px; border: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--bg-button);
}
input[type=range]:hover::-moz-range-progress { background: var(--bg-tertiary); }
/* Bez palce — hodnotu nese hrana výplně (jako u .proto-field) */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1px; height: 20px; border: none; background: transparent; box-shadow: none;
}
input[type=range]::-moz-range-thumb {
  width: 1px; height: 20px; border: none; background: transparent; box-shadow: none;
}

/* ── SLIDER — VARIANTA „pole" (.proto-field) ────────────────────────────────
   Druhá kanonická podoba slideru: celý řádek je JEDNO tažitelné pole (popisek
   vlevo, hodnota + jednotka vpravo), místo dráhy s palcem. Používá se tam, kde
   je panel úzký a řádků hodně (transformace: X/Y/Z ×3) — pruh je čitelnější než
   90px popisek + krátká dráha. Původ: Panelario `.proto-field`
   (panelario-theme.css §CANONICAL UI ADDITIONS), metrika převzatá 1:1, barvy
   přepsané na naše tokeny.
   Chování si zapojí APPKA (tažení = hodnota, klik bez pohybu = editace):
     · tažení přes celou šířku pole = celý rozsah min…max (min. 120 px dráhy)
     · klik bez pohybu -> .editing (ukáže se .proto-field-edit, Enter/blur zapíše)
   Dva rezervované pravé sloupce po --pf-gutter: vnitřní = dropdown (chevron
   uvnitř pole), vnější = zámek (vně pole) — hodnota tak lícuje ve všech variantách.

   DRÁHA V POLI: nevyplněná část je zapuštěná plocha (--bg-primary + inset --cell-shadow
   = táž hloubka jako krabička checkboxu), vyplněná část je vyvýšené tělo tlačítka
   (--bg-button) — pole se tak s hodnotou viditelně HÝBE a nemusí se číst číslo. Šířku
   výplně dává `--fill` (0–100 %), kterou nastavuje appka při každém přemalování; bez ní
   je pole plné = původní podoba (pole bez rozsahu, třeba posun v transformacích, tak
   zůstává beze změny). */
/* ⚓ POLE SAMO NIC NEREZERVUJE (sesouhlaseno se zdrojem 2026-08-02): pravý sloupec
   `--pf-gutter` rezervuje POUZE řádek, který zámek opravdu má (`.proto-row`). Dřív si ho
   pole drželo napevno (36 px) a zdroj k tomu píše přesně náš případ: „v panelu bez zámků
   a dropdownů (transformace, prostředí) končilo hluboko před hranou karty" — naměřeno
   232 px pole v 280 px panelu. Zdroj to opravil PŘESUNEM rezervy na řádek; naše kopie
   toho bloku byla starší, proto se to sem propsalo se čtyřmi pravidly najednou. */
.proto-field { position: relative; display: flex; align-items: center; height: 20px;
  border-radius: var(--radius-sm);
  background: var(--bg-primary); border: 0.5px solid transparent; box-sizing: border-box;
  box-shadow: var(--cell-shadow); overflow: hidden;   /* dráha = zápust; výplň se do ní ořízne */
  font-size: 11px; cursor: ew-resize; user-select: none; }
/* Výplň = pás od `--fill-a` po `--fill` (obojí 0–100 % šířky pole). U jednosměrné
   hodnoty (0…max) je `--fill-a` nula a pás roste zleva; u OBOUSMĚRNÉ (min < 0 < max,
   třeba posun ±400 mm) sedí `--fill-a` na nule stupnice, takže hodnota 0 nevyplní NIC
   a záporná roste doleva. Bez obou proměnných je pole plné = podoba bez dráhy.
   Na maximu jde výplň AŽ NA HRANU pole — rezervované sloupce (--pf-gutter ×2) jsou vně
   pole (margin-right), takže uvnitř není co chránit. */
.proto-field::before { content: ''; position: absolute; top: 0; bottom: 0;
  left: var(--fill-a, 0%); right: calc(100% - var(--fill, 100%));
  background: var(--bg-button); pointer-events: none; }
/* Výjimka: `.pf-drop` má chevron UVNITŘ pole — tam se pruh před jeho sloupec zastaví,
   aby tlačítko nebylo napůl jinak tmavé. */
.proto-field.pf-drop::before { right: max(var(--pf-gutter), calc(100% - var(--fill, 100%))); }
.proto-field:hover::before { background: var(--bg-tertiary); }
/* Pole-slider v RADKU nastaveni (.mat-row) doroste do sirky radku — jinak se srazi na obsah
   a popisek s hodnotou se dotykaji („Mezera8 mm"). Sirku pole urcuje jeho misto, ne pole samo. */
.mat-row > .proto-field { flex: 1; min-width: 0; margin-right: 0; }
/* editace = čistá zápust bez výplně (kánon buněk: hloubka, nikdy obrys) */
.proto-field.editing { cursor: text; background: var(--bg-primary); border-color: transparent;
  box-shadow: var(--cell-shadow); }
.proto-field.editing::before { display: none; }
.proto-field-label { position: relative; padding-left: 9px; color: var(--text-secondary);
  font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 1; }
.proto-field-val { position: relative; margin-left: auto; padding-right: 9px;
  font-family: var(--font-mono); color: var(--text-primary); white-space: nowrap;
  pointer-events: none; z-index: 1; }
.proto-field-unit { color: var(--text-muted); margin-left: 3px; font-size: 9px; }
.proto-field-edit { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 60px; height: 16px; z-index: 3; display: none; padding: 0; border: none;
  background: transparent; color: var(--text-primary); font-family: var(--font-mono);
  font-size: 11px; text-align: right; outline: none; }
.proto-field.editing .proto-field-edit { display: block; }
.proto-field.editing .proto-field-val { visibility: hidden; }
.proto-field.locked { cursor: not-allowed; }
.proto-field.locked .proto-field-val { color: var(--text-muted); }
/* řádek s vnějším zámkem · dvojice polí vedle sebe (2px svislý rytmus) */
.proto-row { position: relative; display: flex; align-items: center; }
.proto-row > .proto-field { flex: 1; min-width: 0; margin-right: var(--pf-gutter); }
.proto-split { display: flex; gap: 3px; }
.proto-split > .proto-field, .proto-split > .proto-row { flex: 1; min-width: 0; }
.proto-field, .proto-row, .proto-split { margin-top: 2px; }
.proto-field:first-child, .proto-row:first-child, .proto-split:first-child { margin-top: 0; }
.proto-split > .proto-field { margin-top: 0; }
/* zámek = NEJZAZŠÍ pravý sloupec, vně pole */
.proto-lock { position: absolute; right: 0; top: 0; bottom: 0; width: var(--pf-gutter);
  display: flex; align-items: center; justify-content: center; z-index: 2; padding: 0;
  background: none; border: none; color: var(--text-muted); cursor: pointer; opacity: .55;
  transition: opacity var(--t-base), color var(--t-base); }
.proto-lock:hover { opacity: .85; color: var(--text-secondary); }
/* ZAMCENO = CERVENA, ne accent. Accent v celem produktu znamena "tohle je zvolene / zapnute",
   kdezto zamek rika "tudy nejde" — je to zakaz, ne volba. Tyz slovnik jako u zaviraciho ✕
   a mazani (--red). */
.proto-lock.active { opacity: 1; color: var(--red); }
/* dropdown uvnitř pole (.pf-drop) — chevron zabere vnitřní sloupec, pole pak odsazuje jen 1× gutter */
.proto-field.pf-drop { margin-right: 0; }   /* dropdown sedí UVNITŘ pole — má vlastní sloupec */
.proto-field.pf-drop .proto-field-edit { right: calc(var(--pf-gutter) + 9px); }
.proto-field:not(.pf-drop) .proto-field-drop { display: none !important; }
.proto-field-drop { flex-shrink: 0; align-self: stretch; width: var(--pf-gutter);
  display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2;
  /* BARVA TLACITKA (--bg-button), ne prusvitne: pres pruhledne pozadi prosvitala
     vypln slideru, takze tlacitko menilo odstin podle hodnoty. */
  border: none; border-left: 1px solid var(--border); background: var(--bg-button);
  color: var(--text-muted); cursor: pointer; line-height: 1;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color var(--t-base), background var(--t-base); }
.proto-field-drop:hover { color: var(--text-primary); background: var(--bg-button); }
/* CHEVRON = KANONICKY GLYF V KANONICKE VELIKOSTI (--chev-w/h, tedy 6 × 5,2). Rucne psane
   <svg> bez rozmeru se vykreslilo 10 × 10 — trojuhelnik ma pritom pomer 10 : 8,66, takze
   ho ctverec ROZTAHL a v poli sedel jiny tvar nez u dropdownu a u vlozeni parametru. */
.proto-field-drop svg, .proto-field-drop > i { width: var(--chev-w); height: var(--chev-h); display: block; }
.proto-field.menu-open .proto-field-drop { color: var(--accent); }
.proto-field-drop svg { transition: transform var(--t-base); }   /* rozmer drzi token vys — 10×10
   trojuhelnik o pomeru 10 : 8,66 ROZTAHOVALO do ctverce */
.proto-field.menu-open .proto-field-drop svg { transform: rotate(90deg); }
  /* ══ CUSTOM DROPDOWN (.cs-*) — 1:1 ../Profilab/app_UI/shell.css ř. 677–715.
     csel.js obalí <select> do .cs-wrap, ale STYLY čeká ze shell.css. Bez nich zůstal
     nativní select vidět a .cs-chev se roztáhl přes celý řádek (obří trojúhelník). ══ */
  .cs-wrap{position:relative;display:inline-flex;width:100%;min-width:0}
  .cs-btn{display:flex;align-items:center;gap:6px;width:100%;height:var(--btn-h);padding:0 8px 0 10px;
    background:var(--bg-button);border:none;border-radius:var(--radius-sm);
    color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-base);
    text-align:left;cursor:pointer;outline:none;box-sizing:border-box;
    box-shadow:var(--btn-shadow);
    transition:background var(--t-base),color var(--t-base),box-shadow var(--t-base);
    /* přebíjí obecné `button{}` téhle stránky — jinak VERZÁLKY („ČEŠTINA") a prostrkání */
    text-transform:none;letter-spacing:normal;font-weight:400}
  .cs-btn:hover{background:var(--bg-tertiary);box-shadow:none}
  .cs-wrap.open .cs-btn,.cs-btn:focus-visible{background:var(--bg-tertiary);box-shadow:none}
  .cs-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cs-chev{flex:none;display:inline-flex;align-items:center;color:var(--text-muted);transition:transform var(--t-base),color var(--t-base)}
  .cs-chev svg{width:var(--chev-w);height:var(--chev-h);display:block}
  .cs-wrap.open .cs-chev{transform:rotate(180deg);color:var(--text-secondary)}
  .cs-drop{position:fixed;z-index:10000;overflow-y:auto;padding:4px;
    background:var(--bg-secondary);border:none;border-radius:var(--radius-sm);
    box-shadow:0 8px 24px var(--shadow)}   /* ⛔ bez obrysu — `border:none` je ve zdroji EXPLICITNĚ */
  .cs-drop[hidden]{display:none}
  .cs-opt + .cs-opt{margin-top:2px}
  .cs-opt{display:flex;align-items:center;width:100%;padding:6px 8px;background:none;border:none;
    border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--fs-base);
    text-align:left;cursor:pointer;white-space:nowrap;box-sizing:border-box;
    transition:background var(--t-base),color var(--t-base);
    text-transform:none;letter-spacing:normal;font-weight:400}
  .cs-opt:hover{background:var(--ui-hover);color:var(--text-primary)}
  .cs-opt.active{background:var(--accent-dim);color:var(--accent)}
  /* ══ PŘEPÍNAČ (.toggle) — 1:1 ../Profilab/app_UI/shell.css ř. 986–1002.
     Týž případ jako .proto-field a .cs-* výš: `env-controls.js` staví „kanonický toggle
     (.toggle ze shell.css)" (ř. 212/603, přepínač tmavé/světlé pozadí mezi měsícem a
     sluncem), jenže tahle stránka shell.css NENAČÍTÁ — bez pravidel zůstal viditelný
     NATIVNÍ checkbox (naměřeno 20 × 21,33 px, modrý systémový, input opacity 1) místo
     dráhy s knoflíkem. Zápust jde na --bg-primary (nejtmavší povrch, jako buňka). ══ */
  .toggle{position:relative;width:30px;height:14px;flex-shrink:0;display:inline-block}
  .toggle input{opacity:0;width:0;height:0;position:absolute}
  .toggle .slider{position:absolute;inset:0;cursor:pointer;
    background:var(--bg-primary);border:none;border-radius:7px;
    box-shadow:var(--cell-shadow);   /* vypnuto = zápust (inset stín, bez obrysu) */
    transition:background .2s,border-color .2s,box-shadow .2s}
  .toggle .slider::before{content:'';position:absolute;left:1px;top:1px;
    width:10px;height:10px;border-radius:50%;background:var(--text-muted);
    transition:transform .15s,background .15s}
  .toggle input:checked + .slider{background:var(--bg-button);border-color:transparent;box-shadow:none}
  .toggle input:checked + .slider::before{transform:translateX(16px);background:var(--text-primary)}
  /* ══ SIDE TABY + SEKCE PANELU — 1:1 ../Profilab/app_UI/shell.css ř. 836–984
     (+ `.pl-btn` ř. 444–453/824, `.prop-section` z datapanel.css ř. 59).
     Panel Transformace bydlí v HOSTITELI (v konventoru `app_conventor/web/index.html`),
     ne ve web komponentě — proto s portem vieweru nepřišel ANI markup, ani tyhle třídy.
     Táž past jako `.proto-field`, `.cs-*` a `.toggle` výš: bez nich by z tabu byl
     neostylovaný `<button>`. Text tabu čte ZDOLA NAHORU (`vertical-lr` + `rotate(180deg)`),
     tab je SAMOSTATNÁ pilulka (radius dokola), takže levá a pravá varianta se liší JEN stranou. ══ */
  .side-tabs{position:absolute;right:var(--gutter-gap);top:var(--gutter-gap);z-index:30;
    display:flex;flex-direction:column;align-items:flex-end;gap:var(--gutter-gap);
    pointer-events:auto;background:transparent}
  .side-tab{width:var(--side-tab-w);padding:6px 0 6px 1px;cursor:pointer;
    font-size:8px;font-weight:600;color:var(--text-secondary);letter-spacing:.6px;
    text-transform:uppercase;writing-mode:vertical-lr;transform:rotate(180deg);
    text-orientation:mixed;text-align:center;
    background:var(--bg-button);border:none;
    border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.45);
    user-select:none;touch-action:none;
    transition:color .12s,background .12s,box-shadow .12s}
  .side-tab:hover{color:var(--text-primary);background:var(--bg-tertiary);box-shadow:none}
  .side-tab.active{color:var(--accent);background:var(--bg-tertiary)}
  .side-tab.active:hover{color:var(--accent)}
  .side-tabs.left{right:auto;left:var(--gutter-gap);align-items:flex-start}
  .side-panels{position:absolute;right:calc(var(--side-tab-w) + var(--gutter-gap)*2);top:var(--gutter-gap);z-index:29;
    display:flex;flex-direction:column;gap:var(--gutter-gap);
    max-height:calc(100% - var(--gutter-gap)*2);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--border) transparent;
    pointer-events:none}   /* mezera mezi panely nesmí brát klik plátnu */
  .side-panels.left{right:auto;left:calc(var(--side-tab-w) + var(--gutter-gap)*2)}
  .side-panels > .side-content{pointer-events:auto}
  .side-content{position:absolute;right:calc(var(--side-tab-w) + var(--gutter-gap)*2);top:var(--gutter-gap);z-index:29;
    width:var(--side-content-w);max-height:calc(100% - var(--gutter-gap)*2);
    display:flex;flex-direction:column;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .side-content.left{right:auto;left:calc(var(--side-tab-w) + var(--gutter-gap)*2)}
  .side-panels > .side-content{position:static;width:var(--side-content-w);
    max-height:none;overflow:visible;flex:none}
  .side-content[hidden]{display:none}
  .side-content::-webkit-scrollbar{width:4px}
  .side-content::-webkit-scrollbar-track{background:transparent}
  .side-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  /* ⚓ STRIP STOJÍ POD LOGEM — konventor ho ze stejného důvodu odsazuje pod tlačítko
     otevření outlineru („nikdy se s ním nepřekrývá"). ⚠️ NAMĚŘENO: `.viewer-logo` sedí
     na `top:9px` a je vysoké **30 px** (nese i wordmark „3D Viewer", ⛔ ne jen obrázek
     17 px), takže jeho spodek je na 39 — odsazení je 39 + `--gutter-gap`. */
  #pvSideTabs, #pvSidePanels{top:42px}
  #pvSidePanels{max-height:calc(100% - 46px)}
  /* hlavička sekce = kanonický `.cs-btn` (JE to dropdown trigger), tohle přidává JEN
     sekční metriku + spojení s tělem do JEDNÉ karty; chevron jde PŘED text (`order:-1`). */
  .sec-label{padding:0 8px;margin-top:4px;border-radius:var(--radius-sm);
    font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
    user-select:none;flex-shrink:0;position:relative;z-index:1}
  .sec-label:hover{background:var(--bg-button);box-shadow:0 1px 3px rgba(0,0,0,.45)}   /* sekce NEHOVERUJE */
  .sec-label:first-child{margin-top:0}
  .cs-btn.sec-label{padding:0 8px;font-size:9px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--text-secondary)}
  .sec-label.open{border-radius:var(--radius-sm) var(--radius-sm) 0 0;box-shadow:none}
  .sec-label.open .cs-chev{transform:rotate(180deg);color:var(--text-secondary)}
  .sec-label .cs-chev{order:-1}
  .sec-body{display:none;padding:4px 4px 2px;background:var(--bg-button);
    border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:0 1px 3px rgba(0,0,0,.45);flex-shrink:0}
  .sec-body.open{display:block}
  /* SIDE TAB varianta: podkladem je tmavý viewport, ne panel → sekce = BAR (barva top
     barů, ŽÁDNÁ elevace — stín pod hlavičkou by se četl jako dělící linka). */
  .side-content .sec-label,
  .side-content .sec-label:hover{background:var(--bg-secondary);box-shadow:none}
  /* ⚓ BOKY BEZ ODSAZENÍ (shell.css ř. 987–988): pruh hlavičky jde přes celou šířku panelu,
     takže i obsah sekce musí lícovat s jeho hranami — jinak má každá vrstva (bar 0, tělo 4,
     sekce 6) jiný okraj a panel se „schodovitě" zužuje. Svislý rytmus zůstává. */
  .side-content .sec-body{background:var(--bg-secondary);box-shadow:none;
    padding-left:0;padding-right:0}
  /* ⚓ ODSTUP OD BOKŮ DRŽÍ JEDNO MÍSTO — tady (1:1 konventor `#cvSidePanels .prop-section`).
     ⛔ NE datapanelové `6px 10px`: s ním se odsazení SČÍTALO (tělo + sekce) a pole končilo
     dál od hrany než hlavička nad ním. */
  #pvSidePanels .prop-section{padding:4px 6px}
  .pl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:var(--btn-h);padding:0 14px;line-height:1;font-family:var(--font-sans);font-size:var(--fs-base);
    color:var(--text-primary);background:var(--bg-button);
    border:none;border-radius:var(--radius-sm);
    box-shadow:0 1px 3px rgba(0,0,0,.45);
    cursor:pointer;transition:background var(--t-base),color var(--t-base),box-shadow var(--t-base)}
  .pl-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:transparent;box-shadow:none}
  .pl-btn:disabled{opacity:.4;cursor:not-allowed}
  /* bez výběru panel ztlumí pole (1:1 konventor `#cvSidePanels .side-content.is-off`) */
  #pvSidePanels .side-content.is-off .proto-field{opacity:.5;cursor:default}
  .xf-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  /* patka lícuje s hranou karet sekcí (ty jdou od 0) — tlačítko tedy bez bočního
     odsazení; přebíjí `#pvSidePanels .prop-section` výš, proto tatáž specificita */
  #pvSidePanels .prop-section.xf-foot{padding-left:0;padding-right:0}
  /* ⚓ BEZ MODELU NENÍ CO TRANSFORMOVAT (1:1 konventor `#cvStage:not(.hasmodel)`) —
     `#stage.hasmodel` už na téhle stránce existuje (schovává `.drop-hint`). */
  #stage:not(.hasmodel) #pvSideTabs,
  #stage:not(.hasmodel) #pvSidePanels{display:none}
  select.cs-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
    margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;
    clip-path:inset(50%)!important;overflow:hidden!important}
