/* Shopify Hub - design systém.
   Light (výchozí barvy: tyrkys + limetka) + plnohodnotný DARK MODE.
   Všechny barvy jedou přes tokeny v :root - vlastní branding (admin /branding)
   přepisuje jen --accent/--accent2 inline <style> blokem; odvozené odstíny
   (--accent-ink/--accent-soft) si dark režim dopočítá z akcentu sám (color-mix).
   Podpis platformy: gradientová linka accent → accent2 pod hlavičkou. */

/* Inter (variable, self-hosted) - profesionální UI font místo systémového Segoe UI. */
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --bg: #eff3f7;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #e8f1f6 0%, rgba(232,241,246,0) 58%), #eff3f7;
  --card: #ffffff;
  /* Linky jsou PRŮSVITNÉ (ne plný hex): celý hub je prosklený, takže se hrana musí
     chovat stejně nad kartou, aurorou i tmavou lištou. --line-strong zůstává PLNÁ -
     používá se i jako výplň oddělovačů (.navsep, .onb-line, .promotl-bar). */
  --line: rgba(15, 42, 66, .11);
  --line-strong: #d6dde5;
  --text: #0d1621;
  --muted: #5b6a7a;
  --accent: #00b2d9;
  --accent-ink: #068aa8;
  --accent-soft: #e7f7fb;
  --accent-contrast: #ffffff; /* text na plném akcentu; branding přepíše dle světlosti barvy */
  /* Brandová barva JEDNOHO eshopu (karty na hlavní stránce). Kartě ji nastaví inline
     styl z stores.accent_color; bez ní je to prostě akcent hubu. */
  --brand-fill: var(--accent);
  --green: #7a9c1f;
  --accent2: var(--green); /* sekundární barva gradientů; branding ji může přepsat */
  --ok-soft: #f2f7e1;
  --ok-ink: #4f6b12;
  --ok-line: #dcecb0;
  --live: #16a34a; /* LED „živě běží" (live-sync tečka na tabech modulů) */
  --warn-soft: #fff7e6;
  --warn-ink: #8a5a00;
  --warn-line: #ffe2a8;
  --warn-strong: #d4921b;    /* sytá warn (stavové pruhy karet apod.) */
  --danger: #d64550;
  --danger-soft: #fcebed;
  /* Plná červená POD bílý text (navbadge, tabbadge.err). --danger je v dark tématu
     zesvětlená kvůli grafice a bílý text na ní má jen ~2,8:1. Jedna hodnota pro obě témata. */
  --danger-fill: #c8323d;
  --err-line: #f3c6cb;
  --surface-2: #f0f2f5;   /* tlačítka secondary, code, pruhy grafů */
  --surface-2h: #e6e9ee;
  --surface-3: #f8fafc;   /* podklady náhledů/obrázků */
  --hover: rgba(20, 30, 50, .05);
  --hover-weak: rgba(20, 30, 50, .018);
  --glass: rgba(255, 255, 255, .74);        /* skleněné karty (velín / celý hub) */
  --glass-edge: rgba(255, 255, 255, .85);
  /* Aurora skvrny na pozadí - odvozené z akcentů, ať reagují na branding (/branding).
     Ve světlém tématu jsou SLABŠÍ a sedí u okrajů (kompozice v .sky): střed stránky
     má zůstat čistý, karta má prosvítat, ne plavat v barevné louži. */
  --sky1: color-mix(in srgb, var(--accent) 20%, #ffffff);
  --sky2: color-mix(in srgb, var(--accent2) 22%, #ffffff);
  /* Třetí skvrna je TEPLÝ NEUTRÁL (protiváha ke dvěma studeným), ne třetí odstín značky:
     mix akcentu2 držím nízko, jinak z krémové vyjde oliva a stránka vypadá zaprášeně. */
  --sky3: color-mix(in srgb, var(--accent2) 7%, #f3ede4);
  --pill-on: #131c26;                        /* aktivní položka pilulkové navigace */
  --pill-on-ink: #ffffff;
  --mono: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
  /* Číselný hlas velína: Inter s tabulkovými číslicemi (čísla drží sloupec i bez
     psacístrojového monospace - ten na velká čísla vypadal jako terminál). */
  --num: 'InterVariable', -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --logo-chip: transparent;  /* podklad pod logy eshopů; v dark bílý chip (tmavá loga by zanikla) */
  --logo-pad: 0;
  --radius: 14px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --radius-pill: 99px;
  /* Síla vnitřního světla pod signature vláskovou linkou (.strip, .sc). */
  --lit: 15%;
  /* Stíny mají JEMNÝ barevný nádech z akcentu (color-mix), ne neutrální šeď: karta pak
     na barevném pozadí nesedí jako vystřižený papír. Neutrální vrstva zůstává jako
     první, aby stín držel tvar i u velmi světlého brandu. */
  --shadow-sm: 0 1px 2px rgba(16,34,52,.05), 0 2px 8px -3px color-mix(in srgb, var(--accent) 16%, transparent);
  --shadow-md: 0 2px 4px rgba(16,34,52,.06), 0 12px 28px -12px color-mix(in srgb, var(--accent) 24%, transparent);
  --shadow-lg: 0 4px 10px rgba(16,34,52,.07), 0 26px 54px -18px color-mix(in srgb, var(--accent) 30%, transparent);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  /* Pružinová křivka pro mikrointerakce (fajfka onboardingu, checkbox pop). */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Dark tokeny - JEDINÁ sada. data-theme razítkuje vždy themeInit (layout.js): explicitní
   volba přepínačem, jinak systémová preference (vč. živé změny). Žádný duplikovaný @media
   blok. Odvozené odstíny z --accent → funguje i s brandingem. */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* MODROČERNÁ s vnitřním světlem, ne čerň: plocha má barevnou hloubku, takže na ní
     sklo i barevné stíny něco dělají. Světlo přichází ZESPODU (podlaha velínu) a shora
     drží studená klenba - proto má --bg-grad dvě skvrny u dolní hrany a jednu nahoře.
     POZOR: branding.js přepisuje --bg-grad jen na :root (světlé téma). Tenhle blok má
     vyšší specificitu, takže si tmavou kompozici udrží i s vlastním brandingem. */
  --bg: #080d13;
  --bg-grad:
    radial-gradient(1100px 520px at 12% 108%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%),
    radial-gradient(900px 420px at 92% 104%, color-mix(in srgb, var(--accent2) 9%, transparent) 0%, transparent 60%),
    radial-gradient(1600px 640px at 50% -16%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 66%),
    #080d13;
  --card: #121a25;
  --line: rgba(146, 184, 214, .13);
  --line-strong: #38445a;
  --text: #e9f1f8;
  --muted: #9aaec1;
  --accent-ink: color-mix(in srgb, var(--accent) 62%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, #171b22);
  --green: #a5c94e;
  --ok-soft: rgba(165, 201, 78, .13);
  --ok-ink: #bcd97e;
  --ok-line: rgba(165, 201, 78, .35);
  --live: #34d399; /* LED „živě běží" - v tmavém tématu jasnější zelená */
  --warn-soft: rgba(240, 173, 45, .12);
  --warn-ink: #f0c065;
  --warn-line: rgba(240, 173, 45, .35);
  --warn-strong: #f0ad2d;
  --danger: #f2707a;
  --danger-soft: rgba(242, 112, 122, .13);
  --err-line: rgba(242, 112, 122, .35);
  --surface-2: #1b2433;
  --surface-2h: #222d3f;
  --surface-3: #101823;
  --hover: rgba(255, 255, 255, .06);
  --hover-weak: rgba(255, 255, 255, .03);
  --glass: rgba(19, 29, 41, .66);
  --glass-edge: rgba(146, 184, 214, .14);
  /* V tmavém tématu se skvrny míchají do PRŮHLEDNA, ne do barvy pozadí: mix do skoro
     černé dá zase skoro černou a aurora pak přes sklo není vidět vůbec. */
  --sky1: color-mix(in srgb, var(--accent) 24%, transparent);
  --sky2: color-mix(in srgb, var(--accent2) 10%, transparent);
  --sky3: color-mix(in srgb, var(--accent) 20%, transparent);
  --pill-on: rgba(255, 255, 255, .14);
  --pill-on-ink: #ffffff;
  --logo-chip: rgba(255, 255, 255, .92);
  --logo-pad: 3px 6px;
  --lit: 24%;
  /* Tmavé stíny NEJSOU černé díry: rozostřená vrstva jde přes color-mix akcentu do černé,
     takže pod kartou leží barevný nádech, ne inkoustová skvrna. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 4px 14px -8px color-mix(in srgb, var(--accent) 40%, #000);
  --shadow-md: 0 2px 6px rgba(0,0,0,.48), 0 18px 40px -24px color-mix(in srgb, var(--accent) 52%, #000);
  --shadow-lg: 0 4px 14px rgba(0,0,0,.5), 0 34px 70px -30px color-mix(in srgb, var(--accent) 62%, #000);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Výběr textu v barvě brandu (color-mix s transparentní složkou drží čitelnost i v dark). */
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* Trvalý svislý posuvník → konzistentní šířka obsahu napříč stránkami (žádný „skok"
   doleva mezi krátkou a dlouhou stránkou). */
html { overflow-y: scroll; }
body {
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font: 14px/1.6 'InterVariable', -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.004em;
  font-feature-settings: 'cv05' 1, 'ss01' 1; /* Inter: otevřenější l/číslice */
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

/* === Horní navigace ========================================================
   Podpis platformy: gradientová linka accent → accent2 úplně nahoře přes celou
   obrazovku (fixed, 2px - sedí na horní hraně sticky headeru). */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  pointer-events: none;
}
/* Aurora pozadí (vykresluje layout jako .sky) - měkké barevné skvrny pod sklem.
   Je STATICKÁ (žádná animace) a kompozice se mezi tématy LIŠÍ, není to jedna vrstva
   se dvěma průhlednostmi:
     světlé = skvrny u OKRAJŮ (tyrkys vlevo nahoře, limetka vpravo dole, teplý neutrál
              vpravo nahoře), střed stránky skoro čistý - karta má prosvítat;
     tmavé  = světlo přichází ZESPODU (podlaha velínu) a shora drží studená klenba.
   Rozměry jsou ve vmax, aby se kompozice chovala stejně na 13" i na 27". */
.sky { position: fixed; inset: 0; z-index: 0; filter: blur(70px); opacity: .55; pointer-events: none; }
.sky i { position: absolute; border-radius: 50%; }
.sky i:nth-child(1) { width: 54vmax; height: 36vmax; left: -16vmax; top: -14vmax; background: radial-gradient(closest-side, var(--sky1), transparent 72%); }
.sky i:nth-child(2) { width: 52vmax; height: 34vmax; right: -16vmax; bottom: -6vmax; background: radial-gradient(closest-side, var(--sky2), transparent 72%); }
.sky i:nth-child(3) { width: 40vmax; height: 24vmax; left: 62%; top: -16vmax; background: radial-gradient(closest-side, var(--sky3), transparent 72%); }
:root[data-theme="dark"] .sky { opacity: .9; }
:root[data-theme="dark"] .sky i:nth-child(1) { width: 76vmax; height: 40vmax; left: -8vmax; top: auto; bottom: -14vmax; }
:root[data-theme="dark"] .sky i:nth-child(2) { width: 54vmax; height: 34vmax; right: -6vmax; bottom: -10vmax; }
:root[data-theme="dark"] .sky i:nth-child(3) { width: 90vmax; height: 46vmax; left: 50%; top: -22vmax; transform: translateX(-50%); }
header, main, .buildinfo { position: relative; z-index: 2; }
header {
  position: sticky; top: 10px; z-index: 20;
  padding: 4px 16px;
  display: flex; justify-content: center;
}
header .header-inner {
  display: flex; gap: 6px; align-items: center;
  width: fit-content; max-width: 100%;
  padding: 8px 10px;
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--radius-pill);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-md);
}
header .brand { display: flex; align-items: center; margin: 0 8px 0 6px; }
header .brand img { height: 21px; display: block; }
header nav { display: flex; gap: 2px; align-items: center; }
header nav a {
  color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 590;
  padding: 8px 15px; border-radius: var(--radius-pill); transition: all .15s var(--ease); white-space: nowrap;
}
header nav a:hover { color: var(--text); background: var(--hover); }
header nav a.active { color: var(--pill-on-ink); background: var(--pill-on); box-shadow: 0 4px 14px rgba(19,28,38,.25); }
/* Dropdown „Eshopy" v hlavní navigaci: summary = pilulka jako ostatní odkazy,
   seznam = plovoucí karta (mechanika .tabmenu - hover-open a zavírání klikem
   mimo řeší layout skript). */
header nav .tabmenu summary {
  padding: 8px 15px; border-radius: var(--radius-pill); border-bottom: none; margin-bottom: 0;
  font-size: 13.5px; font-weight: 590; transition: all .15s var(--ease);
}
header nav .tabmenu summary:hover { background: var(--hover); }
header nav .tabmenu summary.active {
  color: var(--pill-on-ink); background: var(--pill-on);
  box-shadow: 0 4px 14px rgba(19,28,38,.25); border-bottom: none;
}
header nav .tabmenu-list { margin-top: 8px; max-height: min(62vh, 500px); overflow-y: auto; }
header nav .tabmenu-list a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--text); font-size: 14px; }
header nav .tabmenu-list a:hover { background: var(--hover); }
header nav .tabmenu-list a.active { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
/* Rozbalený přepínač eshopů PŘÍMO v liště (malý počet eshopů, skládá ho layout.js).
   Výchozí stav je schovaný a rozsvítí ho až široké okno - na užším desktopu by se
   lišta přeplnila a přetekla mimo stránku. Rozbalovačka .navshops.has-inline je jeho
   protějšek: kde svítí jedno, druhé se schová. */
.navshops-in { display: none; align-items: center; gap: 2px; margin-right: 6px; }
header nav .navshops-in a { display: inline-flex; align-items: center; gap: 7px; max-width: 160px; }
header nav .navshops-in a > span { overflow: hidden; text-overflow: ellipsis; }
/* Čtvereček v brandové barvě eshopu (stejná dvojice light/dark jako .vq-sw ve frontě úkolů). */
.ns-sw { width: 7px; height: 7px; border-radius: 2px; flex: none;
  background: var(--sw-l, var(--accent)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
:root[data-theme="dark"] .ns-sw { background: var(--sw-d, var(--accent)); }
@media (min-width: 1240px) {
  .navshops-in { display: inline-flex; }
  header nav details.navshops.has-inline { display: none; }
}
/* Krátká řada (jeden dva eshopy) se vejde i na užší okno - vlastní, nižší práh. */
@media (min-width: 1000px) {
  .navshops-in.is-tight { display: inline-flex; }
  header nav details.navshops.has-inline.is-tight { display: none; }
}
/* Jemné svislé oddělovače v navigaci: před admin sekcí a před blokem jméno/odhlásit/režim */
.navsep { flex: none; width: 1px; height: 18px; background: var(--line-strong); margin: 0 8px; align-self: center; }
.navbadge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 2px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  color: #fff; background: var(--danger-fill); border-radius: var(--radius-pill); vertical-align: middle;
}
header .spacer { width: 6px; }
header .muted { font-size: 13px; padding: 0 4px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkbtn {
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px;
  padding: 7px 10px; border-radius: 8px; transition: all .15s var(--ease);
}
.linkbtn:hover { color: var(--text); background: var(--hover); }

/* Přepínač světlý/tmavý režim (ikonu a text plní skript v layoutu) */
.themetoggle {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  width: 34px; height: 34px; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 9px;
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
  transition: all .15s var(--ease);
}
.themetoggle:hover { color: var(--text); border-color: var(--line-strong); background: var(--hover); }
.themetoggle .tt-label { display: none; font-size: 14px; }

/* Panel „Zobrazit jako" - admin kouká očima jiného uživatele (testování práv).
   PLOVOUCÍ pilulka vpravo dole, NIKDY ne v toku stránky: dřív to byl sticky banner pod
   headerem, který posouval celý obsah dolů a admin tím pádem neviděl stránku tak, jak ji
   vidí uživatel. Jde sbalit na samotné očko (třída .min, stav v localStorage). */
.viewdock {
  position: fixed; right: 16px; bottom: 16px; z-index: 150;
  font-size: 13px; color: var(--warn-ink);
}
.viewdock .vd-panel {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 12px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--warn-soft) 92%, var(--card));
  border: 1px solid var(--warn-line); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px) saturate(160%);
  animation: vddrop .2s var(--ease);
}
@keyframes vddrop { from { opacity: 0; transform: translateY(8px); } }
.viewdock .vd-eye { font-size: 15px; line-height: 1; }
.viewdock .vd-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.viewdock .vd-lbl { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.viewdock .vd-who b { font-size: 13px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tlačítka v panelu: kompaktní, v barvě upozornění (na skle nesmí splynout). */
.viewdock .vd-back, .viewdock .vd-min, .viewdock .vd-pick summary {
  border: 1px solid var(--warn-line); background: color-mix(in srgb, var(--card) 70%, transparent);
  color: var(--warn-ink); font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 11px; border-radius: var(--radius-pill); white-space: nowrap; list-style: none;
  transition: all .15s var(--ease);
}
.viewdock .vd-back:hover, .viewdock .vd-min:hover, .viewdock .vd-pick summary:hover {
  background: var(--card); border-color: var(--warn-strong);
}
.viewdock .vd-min { width: 28px; padding: 6px 0; text-align: center; font-size: 15px; line-height: 1; }
.viewdock .vd-pick { position: relative; margin: 0; }
.viewdock .vd-pick summary::-webkit-details-marker { display: none; }
/* Rychlé přepnutí na jiného uživatele: seznam se rozbalí NAD pilulkou (je u spodní hrany). */
.viewdock .vd-list {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 2;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  min-width: 230px; max-height: min(52vh, 420px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); animation: navdrop .18s var(--ease);
}
.viewdock .vd-u {
  display: flex; flex-direction: column; gap: 1px; text-align: left; width: 100%;
  padding: 7px 10px; border: none; border-radius: 9px; background: none;
  color: var(--text); font-size: 13px; cursor: pointer;
}
.viewdock .vd-u:hover { background: var(--hover); }
.viewdock .vd-u.on { background: var(--accent-soft); color: var(--accent-ink); }
.viewdock .vd-u-n { font-weight: 600; }
.viewdock .vd-u-a { font-style: normal; font-size: 10.5px; font-weight: 700; opacity: .6; }
.viewdock .vd-u-e { font-size: 11.5px; color: var(--muted); }
/* Sbalený stav = jen očko, ať nepřekáží v pravém dolním rohu. */
.viewdock .vd-open {
  display: none; width: 38px; height: 38px; border-radius: var(--radius-pill); cursor: pointer;
  font-size: 16px; line-height: 1;
  background: color-mix(in srgb, var(--warn-soft) 92%, var(--card));
  border: 1px solid var(--warn-line); box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px) saturate(160%);
}
.viewdock .vd-open:hover { border-color: var(--warn-strong); }
.viewdock.min .vd-panel { display: none; }
.viewdock.min .vd-open { display: block; }

/* Hamburger - schovaný na desktopu; navwrap se na desktopu chová jako by jeho děti
   byly přímo v header-inner (display:contents), na mobilu se z něj stane rozbalovací panel. */
.navtoggle {
  display: none; margin-left: auto; flex: none; width: 38px; height: 38px;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; border-radius: 9px; cursor: pointer; padding: 0;
}
.navtoggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s var(--ease), opacity .2s var(--ease); }
.navtoggle:hover { background: var(--hover); }
body.nav-open .navtoggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .navtoggle span:nth-child(2) { opacity: 0; }
body.nav-open .navtoggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.navwrap { display: contents; }

main { max-width: 1180px; margin: 0 auto; padding: 34px 24px 80px; animation: pagein .22s var(--ease); }
@keyframes pagein { from { opacity: 0; transform: translateY(4px); } }

/* === Plynulá navigace (cross-document View Transitions) =====================
   Chrome/Edge 126+ a Safari 18.2+ místo bílého bliknutí mezi stránkami udělají
   krátký crossfade; Firefox a starší prohlížeče se chovají přesně jako dřív.
   Hlavička, aurora a spodní lišta mají VLASTNÍ jméno, takže mezi stránkami stojí
   a "reloaduje" se jen obsah. POZOR: view-transition-name musí být na stránce
   UNIKÁTNÍ, jinak prohlížeč celý přechod tiše zahodí. */
@view-transition { navigation: auto; }
/* pagein je fallback pro prohlížeče BEZ View Transitions - s nimi by běžel NAVÍC
   ke crossfade (dvojité naskočení). themeInit dává <html> třídu has-vt. */
html.has-vt main { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
.sky { view-transition-name: hub-sky; }
.viewdock { view-transition-name: hub-viewdock; }
/* Hlavičku vyjímáme jen na desktopu - na mobilu s ní hýbe body.navhide (transform)
   a snapshot s transformem by ji nechal v půlce přechodu odletět. */
@media (min-width: 761px) { header .header-inner { view-transition-name: hub-header; } }
@media (max-width: 760px) { .bottomnav { view-transition-name: hub-bottomnav; } }
/* Globální reduced-motion blok (selektor *) na pseudo-strom ::view-transition-*
   NEDOSÁHNE - je mimo běžný DOM. Bez tohohle by se do hubu propašoval pohyb,
   který nejde vypnout. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Okamžitá odezva navigace: 150 ms po kliku na odkaz (layout.js) se obsah lehce
   ztlumí a nahoře jede tenký gradientní pruh. Rychlé přechody ho vůbec neuvidí. */
html.nav-busy main { opacity: .55; transition: opacity .25s var(--ease); }
html.nav-busy::after {
  content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 38%; z-index: 999;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 0 2px 2px 0; animation: navprog 1.1s var(--ease) infinite;
}
@keyframes navprog { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* Toast vrstva (layout.js přesouvá karty s data-flash). Vlevo dole - vpravo dole
   sedí .viewdock „Zobrazit jako" a nesmí se s ním prát. */
.toasts {
  position: fixed; left: 16px; bottom: 16px; z-index: 998;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
}
.toast { margin: 0; padding: 12px 16px; box-shadow: var(--shadow-lg); cursor: pointer;
  animation: toastin .25s var(--ease-out) backwards; }
.toast-out { opacity: 0; transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 760px) { .toasts { bottom: calc(78px + env(safe-area-inset-bottom)); } }

/* Typography */
h1 { font-size: 25px; font-weight: 680; margin: 0 0 20px; letter-spacing: -0.022em; }
h2 { font-size: 16px; font-weight: 620; margin: 28px 0 12px; letter-spacing: -0.012em; }
/* h3 dřív ve škále chybělo úplně - šablony si velikost psaly inline (14 i 15 px pro
   tutéž úroveň). 15px = nejčastější z těch variant; inline styly nepiš, tohle stačí. */
h3 { font-size: 15px; font-weight: 620; margin: 18px 0 6px; letter-spacing: -0.008em; }
/* Vyvážené zalamování nadpisů (žádné osiřelé slovo na druhém řádku) a hezčí
   zalamování delších vysvětlivek. Prohlížeč bez podpory hodnotu tiše ignoruje. */
h1, h2, .modhead-t { text-wrap: balance; }
.hint, .empty .empty-text { text-wrap: pretty; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-head h1 { margin: 0; }
/* Akce vpravo v hlavičce stránky (poslední je vždy „⚙ Nastavení modulu" - viz nav.js moduleHead). */
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-actions form.inline { margin: 0; }
/* Hlavička modulu: nadpis je h2 (h1 patří názvu eshopu ve storeHeader), ale vypadá jako h1. */
.modhead { margin: 2px 0 18px; gap: 12px; }
.modhead-t { font-size: 25px; font-weight: 680; letter-spacing: -0.022em; margin: 0; }
a.link { color: var(--accent-ink); text-decoration: none; font-weight: 500; overflow-wrap: anywhere;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.link:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.ok { color: var(--ok-ink); }
.err { color: var(--danger); }
/* Text jen pro čtečky: vizuálně skrytý, ale v přístupném stromu. Pro informace,
   které jinak nese jen barva nebo title (badge tabů, stav dlouhého běhu). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Cards */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(150%);
}
.card.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.card.err { background: var(--danger-soft); border-color: var(--err-line); }
.card.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
th {
  color: var(--muted); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom-color: var(--line-strong); /* hlavička opticky oddělená od řádků */
}
tbody tr, table tr { transition: background .12s var(--ease); }
/* Kompaktní admin tabulky (Uživatelé, Role) */
.utable th, .utable td { padding: 6px 10px; font-size: 13px; }
.utable td .pill, .utable td .pbadge { font-size: 11px; }
.utable td:first-child, .utable td .pill { white-space: nowrap; }
.utable .uact { white-space: nowrap; text-align: right; }
tr:hover td { background: var(--hover-weak); }
code { background: var(--surface-2); padding: 2px 7px; border-radius: 6px; font-size: 12.5px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: var(--accent-contrast); border: 1px solid transparent;
  border-radius: 8px; padding: 8px 16px; font-size: 13.5px; font-weight: 560;
  cursor: pointer; text-decoration: none; line-height: 1.25;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 25%, transparent);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease),
    transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { background: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: .65; cursor: default; transform: none; box-shadow: none; }
/* Fokus z klávesnice jednotně pro VŠECHNY interaktivní prvky (dřív ručně udržovaný
   seznam ~18 selektorů - každý nový komponent na něj zapomínal). */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* (input/select/textarea mají vlastní focus ring níže - border + soft shadow.) */
/* Checkbox po zaškrtnutí krátce pruží - drobné potvrzení, že klik prošel. */
input[type="checkbox"]:checked { animation: checkpop .18s var(--ease-spring); }
@keyframes checkpop { 50% { transform: scale(1.15); } }
.btn.secondary { background: var(--card); color: var(--text); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn.secondary:hover { background: var(--hover); border-color: var(--muted); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--err-line); box-shadow: var(--shadow-sm); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.mini { padding: 4px 10px; font-size: 12px; border-radius: 7px; box-shadow: none; }
.btn.mini:hover { transform: none; box-shadow: var(--shadow-sm); }
form.inline { display: inline; }

/* Forms */
label { display: block; margin: 13px 0 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
input, select, textarea {
  width: 100%; background: var(--card); border: 1px solid var(--line-strong); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; font-family: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input[type=file] { padding: 8px; background: var(--surface-3); cursor: pointer; }
/* Checkbox/radio nesmí dědit width:100% a jedou v barvě brandu (ne systémová modrá). */
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
input[type=color] { width: 52px; height: 36px; padding: 3px; cursor: pointer; }
/* Zamčená pole (např. vizitka: pole spravovaná firemní vizitkou) - viditelně zašedlá. */
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-3); color: var(--muted); border-color: var(--line);
  -webkit-text-fill-color: var(--muted); opacity: 1; cursor: not-allowed;
}
/* Checkbox a radio jsou z tohohle pravidla VYJMUTÉ: `outline: none` jim bralo i nativní
   prstýnek a zbylo po něm jen `--accent-soft` halo s kontrastem kolem 1,05:1, tedy
   prakticky neviditelné. Nejhorší to bylo v mřížce práv, kde jdou desítky checkboxů
   za sebou a následek omylu je, že někdo vidí cizí obraty. Fokus jim dává pravidlo
   `:focus-visible` výš. */
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Úzký KOMPAKTNÍ sloupec formuláře - textová pole přes celou šířku karty se špatně
   čtou a výchozí inputy/labely jsou na hustý nastavovací formulář moc velké.
   Jednotný vzhled pro nastavovací formuláře (výchozí hodnoty eshopu + moduly):
   labely VÝRAZNÉ (tmavé, tučnější - v šedé zanikaly), pole i hinty menší a hustší. */
.formnarrow { max-width: 560px; }
.formnarrow label { color: var(--text); font-weight: 650; font-size: 12.5px; margin: 13px 0 4px; }
.formnarrow > label:first-child, .formnarrow > :first-child label { margin-top: 0; }
.formnarrow input, .formnarrow select, .formnarrow textarea { padding: 7px 10px; font-size: 13.5px; }
.formnarrow input[type=checkbox], .formnarrow input[type=radio] { padding: 0; }
.formnarrow .hint { margin: 3px 0 0; font-size: 12px; }
.formnarrow .inhbox { padding: 7px 10px; font-size: 13.5px; min-height: 36px; }
.filters { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.filters > div { min-width: 190px; }
.filters label { margin-top: 0; }

/* Hromadné akce nad seznamy podání (messages/withdrawals) - lišta nad tabulkou,
   zvýrazní se, jakmile je něco vybrané (JS v casework.js bulkPanel). */
.bulkbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 14px;
  border: 1.5px dashed var(--line-strong); border-radius: 12px; margin: 0 0 12px;
  transition: border-color .15s ease, background .15s ease; }
.bulkbar.active { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.bulkbar .bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* Kompaktní tlačítka lišty (velikost dřív držel inline styl v casework.js a na
   mobilu nešla zvětšit - inline styl přebíjel mobilní pravidlo). */
.bulkbar .btn { padding: 5px 12px; font-size: 13px; }
.bulkbar button[disabled] { opacity: .55; cursor: not-allowed; }

/* Panel Zpracování případu (casework.js): řešitel vlevo, poznámka vpravo.
   Na mobilu (viz mobilní blok) se překlápí pod sebe - dřív inline grid s minimem
   220 px, které se na 360px telefon nevešlo a textarea přetékala z karty. */
.casework-grid { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 18px; align-items: start; }

/* Pills & badges */
.pill {
  font-size: 12px; padding: 2px 8px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 600;
}
.scopes { display: flex; flex-wrap: wrap; gap: 5px; max-width: 420px; }
.scope-chip {
  font-size: 11.5px; padding: 2px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.badge { font-size: 11.5px; font-weight: 620; padding: 2px 8px; border-radius: 6px; letter-spacing: .01em; }
.badge-ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge-err { background: var(--danger-soft); color: var(--danger); }
/* Neutrální stav (vypnuto, neaktivní, doplňková informace vedle stavových chipů).
   Dřív se na to v Notifikacích brala `pbadge draft` z rodiny produktových štítků,
   takže ve stejném sloupci stály dva různé tvary badge. `--surface-2`, ne `-3`:
   ten je skoro bílý a chip na světlé kartě splýval s okolím do prostého textu. */
.badge-off { background: var(--surface-2); color: var(--muted); }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; row-gap: 2px; gap: 2px; margin: 4px 0 22px; border-bottom: 1px solid var(--line); }
.tabs a {
  padding: 10px 15px; color: var(--muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; font-weight: 540; font-size: 14px;
  transition: color .15s var(--ease), border-color .15s var(--ease); margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* Stavový badge na tabu modulu (počet k vyřízení, ! = chyba běhu / varování).
   Plní storeHeader z core/overview.js tabBadgesFromOverview - stejné prahy jako chipy velínu. */
.tabbadge {
  display: inline-block; min-width: 17px; padding: 1px 5px; margin-left: 6px;
  font-size: 10.5px; font-weight: 700; line-height: 15px; text-align: center;
  border-radius: var(--radius-pill); vertical-align: 1px; font-variant-numeric: tabular-nums;
}
.tabbadge.err { color: #fff; background: var(--danger-fill); }
.tabbadge.warn { color: var(--warn-ink); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }

/* Live-sync LED: zelená pulzující tečka na tabu modulu = běží automatická synchronizace
   (feed/objednávky/štítky/omnibus/Ecomail/hlídání dostupnosti/notifikace). Plní storeHeader
   z core/overview.js liveSyncFromOverview. Čistě vizuální signál (title nese, co konkrétně jede). */
.livedot {
  display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%;
  background: var(--live); vertical-align: 1px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent);
  animation: livepulse 2.4s var(--ease) infinite;
}
/* Běh s varováním/chybou = tečka přebere barvu (přepisem lokálního --live se přebarví
   i pulz). Úrovně stejné jako badge modulu (.tabbadge warn/err). */
.livedot.warn { --live: var(--warn-strong); }
.livedot.err { --live: var(--danger); }
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
  70% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--live) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 0%, transparent); }
}
/* Ve spodní mobilní liště sedí tečka jako odznak v rohu ikony (bez pravého okraje). */
.livedot-bn {
  position: absolute; top: -2px; left: -8px; margin: 0; width: 6px; height: 6px;
}
@media (prefers-reduced-motion: reduce) { .livedot { animation: none; } }

/* Skupinové taby: server-rendered dropdown <details class="tabmenu"> uvnitř .tabs.
   Summary vypadá jako běžný tab (bez nativní šipky), seznam = plovoucí karta s pilulkami.
   Zavírání klikem mimo řeší delegovaný listener v layout.js. */
.tabmenu { position: relative; }
/* Mobilní navigace (spodní lišta .bottomnav ze storeHeader + chip podzáložek .modmenu
   ze settingsNav) - na desktopu skryté, styly v mobilním bloku. */
.modmenu, .bottomnav { display: none; }
.tabmenu summary {
  list-style: none; cursor: pointer; display: block; white-space: nowrap;
  padding: 10px 15px; color: var(--muted); font-weight: 540; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.tabmenu summary::-webkit-details-marker { display: none; }
.tabmenu summary:hover, .tabmenu[open] summary { color: var(--text); }
.tabmenu summary.active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tabmenu-list {
  position: absolute; top: 100%; left: 0; z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 6px; min-width: 230px;
  animation: navdrop .15s var(--ease);
}
/* Drop animace menu (sdílí desktop dropdowny i mobilní panel - proto definovaná globálně). */
@keyframes navdrop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.tabs .tabmenu-list a {
  display: block; padding: 9px 12px; margin: 0; border-radius: 9px; border-bottom: none;
  color: var(--text); font-size: 14px;
}
.tabs .tabmenu-list a:hover { background: var(--hover); color: var(--text); }
.tabs .tabmenu-list a.active { background: var(--accent-soft); color: var(--accent-ink); }

/* Podzáložky jednotného Nastavení eshopu (sekce Eshop / moduly / průvodce) -
   menší pilulky pod hlavními taby, sdílí je Nastavení eshopu, nastavení modulů i průvodce. */
.subtabs { border-bottom: none; gap: 8px; margin: -8px 0 20px; flex-wrap: wrap; }
.subtabs a {
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 6px 13px; font-size: 13px; margin-bottom: 0;
}
.subtabs a:hover { background: var(--hover); color: var(--text); }
.subtabs a.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* Záložky Statistik (Shopify / Návštěvnost / Dohromady). Sdílí vzhled .subtabs, ale NESMÍ
   se na mobilu schovat jako podzáložky Nastavení (ty mají náhradní .modmenu-sub, tyhle ne -
   uživatel by na telefonu přišel o přepínání pohledů). Jsou jen tři, na řádek se vejdou. */
/* .statstabs (samostatné záložky Statistik) nahradila sticky lišta .statnav, viz níž. */

/* Řádky přepínacích pilulek v galerii náhledů e-mailů (/stores/:id/emails).
   Vlastní třída, NE .tabs.subtabs - ta má záporný margin-top (řádky pod sebou by se
   překrývaly) a na mobilu se schovává za modmenu (galerie by ztratila ovládání). */
.pillrow { display: flex; flex-wrap: wrap; gap: 8px; row-gap: 8px; margin: 0 0 10px; align-items: center; }
.pillrow a {
  padding: 6px 13px; color: var(--muted); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-weight: 540; font-size: 13px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.pillrow a:hover { background: var(--hover); color: var(--text); }
.pillrow a.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.pillrow .pillsep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 4px; }

/* Sekce Štítky (badges settings): rozklik štítku = dva panely vedle sebe
   (Texty a vzhled / Automatika) s mřížkou zarovnaných polí. */
.lblpanels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.lblpanel {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin: 0;
}
.lblpanel h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.lblgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lblgrid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lblgrid label { margin: 0 0 4px; font-size: 12px; }
.lblgrid input, .lblgrid select { width: 100%; box-sizing: border-box; }
.lblfootrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.lblfootrow .muted { font-size: 12px; }
.lbldel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 900px) { .lblpanels { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .lblgrid, .lblgrid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Logo eshopu v h1 (podklad chipu řeší tmavá loga v dark tématu). Stará rodina
   .storecard/.storelogo* smazána 2026-08-01 - živá karta eshopu je .sc (velín). */
h1 img { background: var(--logo-chip); padding: var(--logo-pad); border-radius: 6px; }
/* stavové chipy modulů na kartě eshopu */
.scard-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.schip { font-size: 11px; font-weight: 620; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.schip-ok { background: var(--ok-soft); color: var(--ok-ink); }
.schip-warn { background: var(--warn-soft); color: var(--warn-ink); }
.schip-err { background: var(--danger-soft); color: var(--danger); }
.schip-muted { background: var(--surface-2); color: var(--muted); }

/* přehled eshopu (výchozí záložka detailu) - dlaždice modulů */
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.modcard {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--text);
  box-shadow: var(--shadow-sm); transition: all .15s var(--ease);
}
.modcard:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.modcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.modcard-head b { font-size: 15px; }
.modcard .muted { font-size: 13px; }
.modcard-kpi { display: flex; flex-direction: column; gap: 2px; }
.modcard-num { font-size: 22px; font-weight: 680; letter-spacing: -0.02em; }
.modcard-setup { border-style: dashed; }
/* Nadpis sekce přímo na stránce (ne v kartě) - domovská stránka instance s jediným
   eshopem: pod hero a frontou úkolů začínají dlaždice jeho modulů. */
.vsec-h { margin: 26px 0 12px; }

/* Shopify appky - karty (kompaktní: menší paddingy/fonty, Platí pro + Připojené vedle sebe) */
.appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 14px; align-items: start; }
.appgrid .card { margin-bottom: 0; }
.card.appcard { padding: 15px 17px; }
.appcard-add { scroll-margin-top: 84px; } /* sticky header pilulka - ať scrollIntoView nezajede pod ni */
.appcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.appcard-name { display: flex; align-items: center; gap: 6px; }
.appcard-name b { font-size: 15px; letter-spacing: -0.01em; }
.appcard-edit {
  background: none; border: none; cursor: pointer; font-size: 12px; line-height: 1;
  padding: 3px 5px; border-radius: 6px; opacity: .45; transition: opacity .15s var(--ease), background .15s var(--ease);
}
.appcard-edit:hover { opacity: 1; background: var(--hover); }
.appcard-rename { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.appcard-rename input { width: auto; flex: 1 1 160px; padding: 5px 9px; font-size: 13.5px; }
.appcard-cid { font-size: 11.5px; margin-top: 2px; }
.appcard-cid code { font-size: 11px; }
.appcard-sec { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 8px; }
.appcard-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 620; margin-bottom: 5px;
}
.appcard-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px;
  border-top: 1px solid var(--line); margin-top: 9px; padding-top: 8px;
}
.appcard-cols .appcard-sec { border-top: none; margin-top: 0; padding-top: 0; }
.appcard-sec select { max-width: 320px; padding: 6px 10px; font-size: 13px; }
.appcard .pcheck { font-size: 13px; }
.appcard .scope-chip { font-size: 10.5px; padding: 1px 7px; }
.appcard .schip { font-size: 10.5px; }
.appcard-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px;
}
.appcard-actions .btn.secondary { padding: 6px 13px; font-size: 13px; }
.btn.secondary .spinner { border-color: var(--accent-soft); border-top-color: var(--accent-ink); }
@media (max-width: 560px) { .appcard-cols { grid-template-columns: 1fr; gap: 0; } }

/* Feed card */
.feed-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
/* Akce karty feedu (Vygenerovat teď + ⚙ Nastavení): na úzkém displeji se zalomí
   pod sebe, ať tlačítka nepřetečou z karty. */
.feed-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Karta feedu na mobilu (naměřeno na 420 px): tlačítka POD text, ne vedle něj.
   Vedle textu ukrajovala pravou třetinu karty, takže levému sloupci zbylo ~260 px
   a lámalo se v něm datum od času („582 položek · 31. 7. 2026" / „22:03:05 · auto
   každé 2 hodiny") i poznámka u SK feedu od názvu. Roztažením tlačítek na půlku
   šířky se to spraví naráz a cíle jsou navíc větší pro prst. */
@media (max-width: 760px) {
  .feed-head { flex-direction: column; gap: 12px; }
  .feed-acts { width: 100%; justify-content: flex-start; }
  .feed-acts > .btn { flex: 1 1 0; }
  /* Adresa feedu: ⧉ na vlastní řádek. URL se láme `overflow-wrap: anywhere`
     (jinak by přeteklo z karty), takže na posledním řádku běžně zůstane jediné
     písmeno - a tlačítko vedle něj pak vypadá jako artefakt vykreslení. */
  .feedurl a { display: block; }
  .feedurl .copybtn { margin-top: 7px; }
  /* Poznámka „EUR z ceníku SK marketu" na vlastní řádek, ať se netrhá od názvu. */
  .mpnote { display: block; margin: 3px 0 0; }
}
.result { margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.result.ok { background: var(--ok-soft); color: var(--ok-ink); }
.result.warn { background: var(--warn-soft); color: var(--warn-ink); }
.result.err { background: var(--danger-soft); color: var(--danger); }

/* Spinner */
.spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 34px; width: 100%; max-width: 350px;
  border-top: 1px solid transparent;
  background-image: linear-gradient(var(--card), var(--card)), linear-gradient(90deg, var(--accent), var(--accent2));
  background-origin: border-box; background-clip: padding-box, border-box;
}
.login-card .logo { display: block; height: 24px; margin: 4px auto 6px; }
.login-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 24px; }
.login-card .btn { width: 100%; padding: 12px; margin-top: 22px; font-size: 15px; }

/* Stavové badge produktů (aktivní/koncept/archiv) + neutrální chipy */
.pbadge { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--accent-soft); color: var(--accent-ink); }
.pbadge.active { background: var(--ok-soft); color: var(--ok-ink); }
.pbadge.draft { background: var(--warn-soft); color: var(--warn-ink); }
.pbadge.archived { background: var(--surface-2); color: var(--muted); }
.pbadge.admin { background: var(--warn-soft); color: var(--warn-ink); }
.pbadge.warn { background: var(--warn-soft); color: var(--warn-ink); }

/* Products - detail */
.pgrid { display: grid; gap: 16px; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 14px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); font-weight: 550; }
.kv dd { margin: 0; word-break: break-word; }
.desc-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; max-height: 320px; overflow: auto; font-size: 14px; }
.ptable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.ptable th, .ptable td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ptable th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-bottom-color: var(--line-strong); }
.ptable tr:last-child td { border-bottom: none; }
.pthumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.pthumbs img { width: 72px; height: 72px; object-fit: contain; background: var(--surface-3); border-radius: 8px; border: 1px solid var(--line); padding: 3px; }

/* Products - dlaždice + filtry */
.pfilters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.pfilters input[name=q] { flex: 1; min-width: 200px; }
.pfilters select { width: auto; }
.pfilters input[type=date] { width: auto; }

/* Filtrační karta (statistiky) - logicky seskupené řádky s popisky nad poli */
.filterbar { display: flex; flex-direction: column; gap: 14px; }
.filt-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.filt-row + .filt-row { padding-top: 14px; border-top: 1px solid var(--line); }
.filt-field { display: flex; flex-direction: column; gap: 4px; }
.filt-field label { margin: 0; font-size: 12px; font-weight: 600; }
.filt-field select, .filt-field input { width: auto; }
.filt-row .btn { flex: none; }
.filt-hint { font-size: 12px; color: var(--muted); align-self: center; }
/* Nabídka formátů exportu (Excel / CSV / PDF) - viz exportLinks v modules/orders/shared.js.
   Vlastní řádek, ne pilulky: jsou to akce, ne filtr, a musí se vejít i pod sebe na mobilu. */
.expgrp { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.expgrp .btn { flex: none; }
/* `.filt-sheet-head` a `.filt-x` = hlavička plovoucího panelu. Původně patřily k „Dalším
   filtrům" (rozbalovací bottom-sheet), ten je pryč, ale hlavičku dnes používá `.snav-pop`
   ve Statistikách. Pravidla pro samotný sheet (`.filt-more`, `.filt-rest`,
   `.filt-sheet-inner`) byla smazána 2026-08-01, v žádné šabloně už nebyla. */
.filt-sheet-head { display: flex; justify-content: space-between; align-items: center; }
.filt-sheet-head b { font-size: 16px; }
.filt-x { background: none; border: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
/* Lišta filtrů seznamu objednávek: JEDEN formulář, všechna pole vedle sebe (hledání se
   roztahuje, selecty mají pevnější šířku). Zalamuje se do dalšího řádku podle šířky okna. */
.ordbar .filt-row { align-items: flex-end; row-gap: 12px; }
.ordbar .filt-field { min-width: 132px; }
/* `display:flex` na .filt-field by jinak přebilo výchozí [hidden] a datumová pole vlastního
   rozsahu by svítila i mimo něj. */
.ordbar .filt-field[hidden] { display: none; }
.ordbar .filt-field.filt-grow { flex: 1 1 260px; min-width: 220px; }
.ordbar .filt-field.filt-grow input { width: 100%; }
.ordbar select { max-width: 210px; text-overflow: ellipsis; }
.ordbar .filt-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; padding-bottom: 1px; }
.ordbar .filt-actions .link { font-size: 12.5px; white-space: nowrap; }
.ptiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 860px) { .ptiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .ptiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .ptiles { grid-template-columns: 1fr; } }
.buildinfo { max-width: 1180px; margin: 0 auto; padding: 0 24px 26px; color: var(--muted); font-size: 12px; text-align: center; }
.pcard {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pcard:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pcard-img { aspect-ratio: 1 / 1; background: var(--surface-3); display: flex; align-items: center; justify-content: center; padding: 6px; }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; }
.noimg-svg { color: var(--line-strong); }
.pcard-body { padding: 10px 12px; display: flex; flex-direction: column; flex: 1; }
.pcard-title { font-weight: 550; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-meta { font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.pcard-price { font-weight: 600; font-size: 13px; }
.rich { font-size: 14px; }
.rich p { margin: 4px 0; }
.rich h1, .rich h2, .rich h3 { margin: 8px 0 4px; font-size: 15px; }
.rich ul, .rich ol { margin: 4px 0; padding-left: 20px; }
.pthumbs img.zoomable, img.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; background: rgba(10,14,20,.85); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 95%; max-height: 95%; border-radius: 10px; box-shadow: var(--shadow-lg); }
.block-card { border-left: 3px solid var(--accent); }
.ptable td, .ptable th { word-break: break-word; vertical-align: top; }
.more-toggle { display: inline; margin-left: 2px; padding: 0; background: none; border: none; color: var(--accent-ink); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.more-toggle:hover { text-decoration: underline; }
.more-full:not([hidden]) { display: block; margin-top: 6px; }
/* copy tlačítko */
.copybtn { border: 1px solid var(--line); background: var(--surface-3); color: var(--muted); border-radius: 5px; padding: 0 6px; font-size: 12px; line-height: 18px; cursor: pointer; vertical-align: middle; }
.copybtn:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.warn-txt { color: var(--danger); font-weight: 600; }
/* obrázky s alt textem */
.pthumb { margin: 0; width: 92px; }
.pthumb img { width: 92px; height: 92px; object-fit: contain; background: var(--surface-3); border-radius: 8px; border: 1px solid var(--line); padding: 3px; display: block; }
.pthumb figcaption { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.3; word-break: break-word; max-height: 28px; overflow: hidden; }
/* completeness badge na dlaždici */
.pcard-sub { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
.pcard-todo { color: var(--danger); font-weight: 600; white-space: nowrap; }

/* === Průvodce zapojením eshopu (/stores/:id/setup) === */
.setup-intro ol { margin: 10px 0 12px; padding-left: 22px; }
.setup-intro li { margin: 5px 0; }
.setup-card { padding: 16px 20px; }
.setup-head { display: flex; align-items: center; gap: 10px; }
.setup-head h2 { margin: 0; flex: 1; }
.setup-note { margin: 8px 0 0; font-size: 13px; }
.setup-chip { font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.chip-ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip-part { background: var(--warn-soft); color: var(--warn-ink); }
.chip-off { background: var(--surface-2); color: var(--muted); }
.setup-list { margin-top: 10px; }
/* Rozbalovací panely v nastavení GA4 (klíč instance, návod) - vypadají jako karta,
   ale sbalí se, jakmile je napojení hotové, aby stránka zůstala kompaktní. */
.guidevar.ga4panel { background: var(--card); border-color: var(--line-strong); margin: 14px 0; }
.guidevar.ga4panel > summary { padding: 14px 16px; font-size: 15px; }
.guidevar.ga4panel .guidevar-body { padding: 0 16px 16px; }
/* Odkaz „Návod na napojení" nahoře stránky sem plynule odroluje - sticky hlavička
   by jinak překryla první řádky (stejná hodnota jako u #addAppCard). */
.ga4navod { scroll-margin-top: 84px; }

/* Návod na napojení GA4: dlouhé kroky s podkroky (klikací cesta konzolí Googlu).
   Vzdušnější řádkování + odsazené podkroky, ať se to dá číst při přepínání do jiného okna. */
.ga4guide > li { margin-bottom: 14px; line-height: 1.65; }
.ga4guide ul { margin: 6px 0 0; padding-left: 18px; }
.ga4guide ul li { margin-bottom: 5px; }
.ga4guide i { font-style: normal; font-weight: 600; color: var(--text); }
.setup-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.setup-item:last-child { border-bottom: none; }
.si-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; margin-top: 1px; }
.si-ok { background: var(--ok-soft); color: var(--ok-ink); }
.si-todo { background: var(--danger-soft); color: var(--danger); }
.si-warn { background: var(--warn-soft); color: var(--warn-ink); }
.si-off { background: var(--surface-2); color: var(--muted); }
.si-body { flex: 1; min-width: 0; font-size: 14px; }
.si-detail { font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.si-act { flex: none; white-space: nowrap; padding: 6px 12px; font-size: 13px; }
/* === Velín (hlavní stránka) ==============================================
   Stavba shora dolů, od celku k detailu: HERO s obratem celého portfolia a jeho
   grafem → PÁS ÚKOLŮ přes celou šířku → toolbar → mřížka malých KARET ESHOPŮ.
   Do 2026-08-17 tu byl tenký proužek mikrofaktů, velké karty se šesti vrstvami
   (dvě na řádek) a úzký sloupec fronty vpravo. Historie tvarů: `hub-ui-design`. */
/* SIGNATURE: 2px gradientní vlásková linka na HORNÍ hraně panelu + jemné vnitřní světlo
   pod ní. Je to JEDINÝ takový prvek v hubu vedle karty eshopu (.sc) - běžné .card ho
   schválně NEDOSTANOU, jinak by z podpisu byla tapeta. Na heru jde linka
   accent → accent2 (tyrkys → limetka), protože mluví za CELÉ portfolio.
   Vnitřní světlo je background-image PANELU, ne pseudoprvek: leží tak pod obsahem
   a nemusí se řešit z-index ani pointer-events. */
.vhero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 20px 40px; align-items: center;
  padding: 24px 26px; margin-bottom: 18px;
  background-color: var(--glass);
  background-image: radial-gradient(64% 120px at 26% 0%,
    color-mix(in srgb, var(--accent) var(--lit), transparent), transparent 74%);
  border: 1px solid var(--glass-edge); backdrop-filter: blur(14px);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
/* Bez grafu (jeden týden dat, nebo uživatel bez přístupu ke Statistikám) by druhá
   dráha jen ukusovala polovinu panelu na prázdno. */
.vhero-solo { grid-template-columns: minmax(0, 1fr); }
.vhero::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px;
  pointer-events: none; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 14%, var(--accent2) 62%, transparent);
}
/* V tmavém tématu linka SVÍTÍ ven (proto drop-shadow ve své barvě), ve světlém je to
   ostrá barevná hrana nad sklem - záře by tam byla jen špína. */
:root[data-theme="dark"] .vhero::before {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 50%, transparent));
}
.vhero-top { display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
  font-weight: 620; color: var(--muted); }
.vhero-top b { font-weight: 720; }
.vhero-top b.bad { color: var(--danger); }
.vhero-top b.wrn { color: var(--warn-ink); }
.vhero-top b.okv { color: var(--ok-ink); }
.vhero-top em { font-style: normal; }
/* Hlavní číslo stránky. Měna a delta jsou drobné - mají doplňovat, ne soutěžit. */
.vhero-total { margin-top: 9px; font: 750 42px/1 var(--num); font-variant-numeric: tabular-nums;
  letter-spacing: -.035em; }
.vhero-total .cur { font-size: .38em; font-weight: 700; color: var(--accent-ink); margin-left: .22em; }
.vhero-total .vdelta { font-size: 14px; vertical-align: 6px; }
.vhero-empty { font-size: 24px; color: var(--muted); letter-spacing: -.02em; }
.vhero-sub { display: block; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.vstats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; }
.vstat i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
  white-space: nowrap; }
.vstat b { font: 750 21px var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.026em; }
.vstat b .cur { font-size: .55em; font-weight: 600; color: var(--muted); margin-left: .2em; }
.vstat em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--muted); }
/* Provoz (synchronizace, feedy, datum) je servisní informace: patří pod čísla a šedě.
   V proužku měl stejnou velikost jako obrat, takže vršek stránky neměl žádný důraz. */
.vops { margin: 16px 0 0; font-size: 11.5px; color: var(--muted); }
/* Graf celého portfolia. Sedí v heru, ne v kartě, takže na popisky os je místo. */
.vchart { padding-bottom: 26px; }
.vchart svg { width: 100%; height: 176px; display: block; }
/* POZOR: legenda je nad SVG statický řádek, takže .vtrend je vyšší než graf. Překryvy
   (popisky pater, svislice) se proto kotví ke SPODKU a mají výšku grafu, ne 100 %. */
.vchart .vt-scale, .vchart .vtline { top: auto; bottom: 0; height: 176px; }
.vchart .vt-legend { position: static; justify-content: flex-start; gap: 14px; margin: 0 0 8px; }
.tdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  vertical-align: 1px; box-shadow: 0 0 0 3px var(--ok-soft); animation: tpulse 2.2s infinite; }
.tdot.bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.tdot.warn { background: var(--warn-strong); box-shadow: 0 0 0 3px var(--warn-soft); }
@keyframes tpulse { 50% { opacity: .45; } }

/* --- Pás „Co čeká na tebe" ------------------------------------------------
   Úkoly VŠECH eshopů pohromadě: člověk nemusí obcházet kartu po kartě a čtvrtý
   úkol eshopu se neztratí (na kartě byl strop 3 řádky). Pás je neutrální
   (akcent hubu), protože mluví za všechny eshopy - barvu eshopu nese až
   čtvereček u konkrétního úkolu.
   NALEŽATO, ne jako sloupec vpravo: sloupec ukusoval 320 px z šířky stránky pořád,
   i když v něm visely dva úkoly, a pod 1120 px stejně padal pod karty. Prázdná
   fronta se navíc scvrkne na jeden řádek (.vqueue-ok) místo panelu s nadpisem. */
.vqueue { position: relative; overflow: hidden; padding: 18px 20px 16px;
  background-image: radial-gradient(42% 92px at 22% 0%,
    color-mix(in srgb, var(--accent) var(--lit), transparent), transparent 72%); }
/* Signature vlásková linka jako na heru a kartách eshopů: pás je plnohodnotný panel
   velína, ne obsah karty. Jinde v hubu ji .card NEDOSTANE. */
.vqueue::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px;
  pointer-events: none; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 16%, var(--accent) 74%, transparent); }
:root[data-theme="dark"] .vqueue::before {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 50%, transparent)); }
.vq-head { display: flex; align-items: baseline; gap: 10px; }
.vq-lbl { font-size: 11.5px; color: var(--muted); }
.vq-head h2 { margin: 0; font-size: 16px; font-weight: 740; letter-spacing: -.02em; }
/* Dva sloupce (Blokuje | Nespěchá) jen dokud se do nich vejde věta úkolu. */
.vq-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px 24px; margin-top: 14px; }
.vq-group { display: flex; align-items: center; gap: 9px; margin: 0 0 9px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.vq-group.is-err { color: var(--danger); }
.vq-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.vq-n { font: 700 10.5px var(--num); font-variant-numeric: tabular-nums; color: var(--muted); }
.vq-list { display: grid; gap: 8px; }
/* Čistý velín: jeden zelený řádek místo panelu. Prázdné místo po úkolech, které
   nejsou, nemá být nejnápadnější věc na stránce. */
.vqueue-ok { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 13px; }
.vqueue-ok b { font-weight: 700; }
.vq { position: relative; overflow: hidden; display: flex; gap: 11px;
  padding: 10px 12px 11px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--surface-3);
  color: var(--text); text-decoration: none;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.vq::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn-strong); }
.vq.q-err::before { background: var(--danger); }
.vq:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
.vq-ic { flex: none; font-size: 15px; line-height: 1.4; }
.vq-b { min-width: 0; }
/* Titulek se NEOŘEZÁVÁ na jeden řádek (na kartě musel, tady je sloupec vysoký):
   „Kampaň běží, ale automatika je vypnutá" se zlomí a zůstane čitelná celá. */
.vq b { display: block; font-size: 13px; font-weight: 660; letter-spacing: -.012em;
  line-height: 1.35; text-wrap: pretty; }
.vq.q-err b { color: var(--danger); }
.vq-why { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); text-wrap: pretty; }
/* Stáří (SLA) je součástí věty „proč", ne vlastní sloupec - viz ageOf v routes.js */
.vq-why em { font-style: normal; font-weight: 700; }
.vq-why em::before { content: " · "; font-weight: 400; color: var(--muted); }
.vq-why em.lv-warn { color: var(--warn-ink); }
.vq-why em.lv-err { color: var(--danger); }
.vq-where { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 11px; font-weight: 620; color: var(--muted); }
/* Čtvereček v barvě eshopu. Dvojice -l/-d (světlé/tmavé téma) přichází inline,
   vybírá se tady - inline sloučená hodnota by výběr přebila (stejně jako u .sc). */
.vq-sw { width: 8px; height: 8px; border-radius: 2px; flex: none;
  background: var(--sw-l, var(--accent)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
:root[data-theme="dark"] .vq-sw { background: var(--sw-d, var(--accent)); }
.vq-clear { display: flex; align-items: center; gap: 9px; margin: 16px 0 0;
  padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px dashed var(--ok-line); background: var(--ok-soft); color: var(--ok-ink);
  font-size: 12.5px; font-weight: 600; }
.vq-tick { flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  color: var(--accent-contrast); background: linear-gradient(140deg, var(--accent), var(--accent2)); }
/* Pod 1120 px se hero srovná pod sebe: graf portfolia potřebuje šířku, na půlce
   panelu by z popisků os byla kaše. */
@media (max-width: 1120px) {
  .vhero { grid-template-columns: minmax(0, 1fr); }
}

/* --- Graf trendu ----------------------------------------------------------- */
.vdelta { margin-left: 10px; font: 700 12.5px var(--num); font-variant-numeric: tabular-nums; color: var(--ok-ink); white-space: nowrap; }
.vdelta.neg { color: var(--danger); }
/* Dvoupatrový graf kreslí JEN hero (celé portfolio), takže jede v akcentu hubu.
   Do 2026-08-17 byl i na kartě eshopu v jeho brandové barvě (`.sc-chart` přemapovalo
   `--accent` na `--brand-fill`); v kartě široké ~390 px z něj byla změť os a popisků
   a popisek „60 tis." přetékal z levého žlábku. Karta má od té doby sparkline (.spark).
   Graf NEBLEEDUJE ani na jednu stranu, drží se paddingu panelu: graf lepený na hranu
   vypadal uříznutě (koncová tečka běžícího týdne i poslední popisek měsíce seděly přesně
   v okraji). Vlastnost padL v routes.js se schválně NEMĚNÍ: je v procentech viewBoxu,
   takže by ubrala data i na širokém grafu. */

/* Osy, legenda i tooltip trendu jsou HTML overlay - text do roztaženého SVG nepatří */
.vtrend { position: relative; }
/* POZOR na specifičnost: barvy sérií MUSÍ být pod stejně silným selektorem jako
   výchozí .vt-legend .lg::before, jinak je přebije a celá legenda svítí šedě. */
.vt-legend { position: absolute; top: -20px; right: 20px; display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 600; color: var(--muted); z-index: 2; }
.vt-legend .lg { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.vt-legend .lg::before { content: ""; width: 18px; height: 3.5px; border-radius: 2px; background: var(--muted); }
.vt-legend .lg-rev { color: var(--accent-ink); }
.vt-legend .lg-rev::before { background: var(--accent); }
.vt-legend .lg-ord::before { background: var(--lane-ord); }
.vt-legend .lg-prev::before { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); }
.vt-legend .lg-run::before { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 9px); }
/* Dvě patra: OBRAT v barvě eshopu, OBJEDNÁVKY neutrálně. Neutrální neznamená bledá -
   jedna hodnota pro obě témata byla na bílé kartě sotva vidět, proto má dark vlastní. */
.vtrend { --lane-ord: #5b6878; }
:root[data-theme="dark"] .vtrend { --lane-ord: #9aa7b8; }
.vtrend .vt-rev { stroke: var(--accent); stroke-width: 2.6; }
.vtrend .vt-ord { stroke: var(--lane-ord); stroke-width: 2; }
.vtrend .vt-prev { stroke: var(--muted); stroke-opacity: .6; stroke-width: 1.6; }
/* Konec běžícího týdne: dutá tečka v barvě karty, ať je vidět, že hodnota ještě roste */
.vtrend circle.vt-end { fill: var(--card); }
/* Osa Y: popisek sedí NA své čáře, zarovnaný doprava do levého žlábku. Barva odlišuje,
   ke kterému patru dílek patří (obrat = brand, objednávky = neutrální). */
.vt-scale { position: absolute; inset: 0; pointer-events: none; }
.vt-scale span { position: absolute; transform: translateY(-50%);
  font: 600 10.5px var(--num); font-variant-numeric: tabular-nums; color: var(--muted);
  white-space: nowrap; opacity: .95; }
.vt-scale .tk-rev { color: var(--accent-ink); }
.vt-scale .tk-ord { color: var(--lane-ord); }
/* Měsíce pod grafem (hodnoty osy Y drží .vt-scale) */
.vt-x { position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
.vt-x span { position: absolute; transform: translateX(2px); font: 600 10.5px var(--num);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); opacity: .8; }
.vtline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); opacity: .28; display: none; pointer-events: none; }
.vtdot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--card); transform: translate(-50%, -50%); display: none; pointer-events: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.vtdot-o { background: var(--lane-ord); width: 8px; height: 8px; }
.vttip { position: absolute; top: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 7px 11px; font: 500 11.5px var(--num); font-variant-numeric: tabular-nums;
  color: var(--text); white-space: nowrap; pointer-events: none; display: none; z-index: 6; line-height: 1.45; }
.vttip b { display: block; font-weight: 700; }
.vttip span { display: block; color: var(--muted); }
.vttip .pv i { font-style: normal; font-weight: 700; color: var(--ok-ink); }
.vttip .pv i.dn { color: var(--danger); }
/* NAMĚŘENO vs. ODHAD v bublině. Skutečnost je hlavní řádek (barva textu, tučně, největší
   číslo v bublině), odhad je pod čarou, tlumený a s tou samou čárkovanou značkou, jakou
   má legenda - z toho je na první pohled jasné, které číslo se opravdu stalo. Předsazené
   „zatím" a „odhad celého týdne" jsou schválně slabší než čísla, jsou to jen popisky. */
.vttip .now { color: var(--text); font-weight: 700; font-size: 12.5px; }
.vttip .now i { font-style: normal; font-weight: 500; font-size: 11px; color: var(--muted); }
.vttip .est { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); }
.vttip .est::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle;
  background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 7px); }
.vttip .est i { font-style: normal; font-size: 11px; opacity: .85; }


.vtoolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 14px; }
.vtoolbar h2 { font-size: 18px; font-weight: 740; letter-spacing: -.02em; margin: 0 6px 0 0; }
.vsearch { flex: 1; max-width: 320px; min-width: 180px; border-radius: var(--radius-pill); padding: 9px 16px;
  background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(14px); }
.fpills { display: flex; gap: 8px; flex-wrap: wrap; }
.fpill { font-size: 12.5px; font-weight: 650; padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); color: var(--muted); background: var(--glass); cursor: pointer; font-family: inherit;
  transition: all .15s var(--ease); }
.fpill:hover { color: var(--text); }
.fpill.on { background: var(--pill-on); color: var(--pill-on-ink); border-color: var(--pill-on); }
.fpill .c { font: 600 11px var(--mono); opacity: .75; margin-left: 3px; }
.fpill.f-err { color: var(--danger); border-color: var(--err-line); }
.fpill.f-warn { color: var(--warn-ink); border-color: var(--warn-line); }
.fpill.f-err.on, .fpill.f-warn.on { color: var(--pill-on-ink); border-color: var(--pill-on); }
.vsort { margin-left: auto; font-size: 12.5px; color: var(--muted); background: none;
  border: 0; padding: 6px 10px; border-radius: var(--radius-pill); cursor: pointer; font-family: inherit; }
.vsort:hover { background: var(--hover); color: var(--text); }

/* --- Karty eshopů ---------------------------------------------------------
   Malé dlaždice: jméno, obrat letos s podílem, sparkline a jedna řádka pod ní.
   Detail portfolia je nahoře v heru, denní čísla eshopu jsou o proklik dál ve
   Statistikách - karta má říct „kolik a kam to jde", ne být druhý dashboard.
   Do 2026-08-17 to byly karty se šesti vrstvami, dvě na řádek (hero číslo, tři
   dlaždice v rámečcích, dvoupatrový graf s legendou a dvěma stupnicemi, patička
   s pruhem podílu). Historie tvarů: skill `hub-ui-design`. */
.vshops { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
/* „Nic nenalezeno" žije uvnitř mřížky karet, takže musí přes všechny dráhy - jinak
   by se schoulilo do prvního sloupce. */
.vshops > .empty { grid-column: 1 / -1; margin-bottom: 0; }
/* Karta nese BRANDOVOU barvu eshopu (--brand z inline stylu, viz routes.js), ale
   jen jako AKCENT: hrana vlevo, iniciála a sparkline. Nádech přes celé pozadí ani
   obarvené dlaždice tu byly a šly pryč - karta pak vypadala jako reklamní plocha
   a čísla se v barvě ztrácela. Čitelná varianta se vybírá podle tématu: na světlém
   pozadí ztmavená (--brand-l), na tmavém zesvětlená (--brand-d). Bez barvy = akcent hubu. */
.sc { --brand-fill: var(--brand-f-l, var(--accent)); --brand-ink: var(--brand-l, var(--accent-ink));
  display: flex; flex-direction: column; padding: 16px 16px 14px; position: relative; overflow: hidden;
  margin-bottom: 0; text-decoration: none; color: var(--text);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  animation: cardin .3s var(--ease) backwards; }
:root[data-theme="dark"] .sc { --brand-fill: var(--brand-f-d, var(--accent)); --brand-ink: var(--brand-d, var(--accent-ink)); }
/* Svislá hrana v barvě eshopu = podpis karty (u chyby/upozornění ji přebije stav).
   Vodorovná vlásková linka nahoře, kterou měla velká karta, na dlaždici vysoké
   ~150 px vypadala jako víčko. MUSÍ zůstat pointer-events:none, jinak ukousne
   proklik karty. */
.sc::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  pointer-events: none; background: var(--brand-fill); }
:root[data-theme="dark"] .sc::after {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--brand-fill) 45%, transparent)); }
.sc.st-err::after { background: var(--danger); }
.sc.st-warn::after { background: var(--warn-strong); }
/* Schodovitý nástup přes --i (inline z routes.js) se STROPEM - min() drží celkový
   nástup pod ~0,4 s i u dvaceti eshopů. */
.sc { animation-delay: min(calc(var(--i, 0) * .045s), .36s); }
@keyframes cardin { from { opacity: 0; transform: translateY(8px); } }
.sc:hover { transform: translateY(-2px); border-color: var(--brand-ink); box-shadow: var(--shadow-md); }
.sc-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sc-logo { max-height: 26px; max-width: 96px; object-fit: contain; background: var(--logo-chip);
  padding: var(--logo-pad); border-radius: 8px; flex: none; }
/* Iniciála na plné brandové barvě: světlá barva potřebuje tmavé písmo (--brand-on).
   Gradient jde do vlastní tmavší varianty, ne do limetky - jinak měl každý eshop
   v iniciále kus cizí barvy. */
.sc-ph { width: 26px; height: 26px; border-radius: 9px; color: var(--brand-on, #fff); font-weight: 750;
  font-size: 13px; flex: none; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-fill), var(--brand-ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-ink) 35%, transparent); }
.sc-n { font-weight: 720; font-size: 14.5px; letter-spacing: -.018em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* Obrat letos = hlavní číslo karty. Měna zůstává v barvě hubu: drobné písmo v brandové
   barvě by tlačilo barvy do kontrastu pro text (a z limetky by dělalo blátivou olivu).
   Brand nese grafika, ne písmo. */
.sc-v { display: block; margin-top: 13px; font: 750 24px var(--num); font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; white-space: nowrap; }
.sc-v .cur { font-size: .45em; font-weight: 700; color: var(--accent-ink); margin-left: .2em; }
.sc-v .vdelta { margin-left: 8px; font-size: 11.5px; vertical-align: 4px; }
.sc-l { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.sc-nodata { font-size: 15px; font-weight: 620; color: var(--muted); letter-spacing: 0; }
/* Sparkline: jedna čára týdenního obratu v barvě eshopu. `margin-top:auto` ji drží
   u spodní hrany, takže karty v řádku mají čáru ve stejné výšce i s různě dlouhým názvem. */
.sc-spark { display: block; margin-top: auto; padding-top: 14px; }
.spark { width: 100%; height: 44px; display: block; overflow: visible; }
.sp-line { stroke: var(--brand-fill); stroke-width: 2.2; }
.sp-dot { fill: var(--card); stroke: var(--brand-fill); stroke-width: 2; }
.sc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sc-foot em { font-style: normal; font-size: 11px; color: var(--muted); margin-right: auto; }
.sc .schip { font: 700 10px var(--num); text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; }
.sc.addcard { align-items: center; justify-content: center; min-height: 150px;
  border-style: dashed; border-color: var(--line-strong); color: var(--accent-ink); font-weight: 700; }
.sc.addcard::after { content: none; }
.sc.addcard:hover { background: var(--accent-soft); border-color: var(--accent); }

/* rozcestník srovnávačů (/categories) */
.feedtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 4px; }
.feedtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 132px; padding: 22px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); text-decoration: none; text-align: center;
  transition: all .15s var(--ease); }
.feedtile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feedtile-logo { height: 30px; display: block; }
.feedtile-sub { font-size: 12.5px; }
.feedtile-badge { font-size: 12px; font-weight: 600; color: var(--danger); }
.feedtile-badge.ok { color: var(--ok-ink); }
.feedtile.disabled { opacity: .5; cursor: default; }
.feedtile.disabled:hover { border-color: var(--line); box-shadow: var(--shadow-sm); transform: none; }
.feedtile-soon { font-size: 14px; font-weight: 600; line-height: 1.5; }
details.cat-defaults { margin-top: 6px; }
details.cat-defaults > summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); padding: 6px 0; }

/* Návody napojení modulů: varianty A/B jako rozbalovací bloky (kód defaultně skrytý) */
details.guidevar { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; background: var(--surface-2); }
details.guidevar > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 14px; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
details.guidevar > summary::-webkit-details-marker { display: none; }
details.guidevar > summary::before { content: '▸'; color: var(--muted); font-size: 12px; }
details.guidevar[open] > summary::before { content: '▾'; }
details.guidevar > summary .muted { font-weight: 400; font-size: 13px; }
.guidevar-body { padding: 2px 14px 14px; }

/* centrální mapování kategorií (/categories) - auto layout, svisle na střed, kompaktní form */
.cmap { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmap th, .cmap td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmap td b { font-weight: 500; }
.cmap th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; border-bottom-color: var(--line-strong); }
.cmap tr:last-child td { border-bottom: none; }
.cmap td:first-child { word-break: break-word; }
.cmap td:nth-child(2) { width: 60%; }
.cmap-form { display: flex; gap: 8px; align-items: flex-start; margin: 0; flex-wrap: wrap; }
.cmap-form input { flex: 1; min-width: 180px; }
.cmap-form .btn { white-space: nowrap; flex: none; }
/* Heuréčí cesta = zalamující se pole, výška roste s obsahem → celá cesta je vidět
   (ne ořez na jednom řádku). Auto-výšku řídí JS (layout.js) + field-sizing tam, kde
   ho prohlížeč umí; overflow:hidden = žádný vnitřní scrollbar. */
.cmap-path { flex: 1; min-width: 260px; resize: vertical; font: inherit;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word; min-height: 42px;
  overflow: hidden; field-sizing: content; }
.cmap-form.skuadd .cmap-sku { flex: 0 0 200px; min-width: 140px; }

/* Nápovědná ikonka „ⓘ" s OKAMŽITÝM tooltipem (bez prodlevy nativního title). Text
   je v data-tip; bublina se ukáže hned na hover i focus (klávesnice/čtečka). */
/* „i" nemá dolní dotah, takže při čistém centrování line-boxu sedí opticky výš -
   1px paddingu nahoře ho posadí doprostřed kolečka. */
.hinttip { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; padding-top: 1px; border-radius: 50%; cursor: help;
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent);
  vertical-align: middle; user-select: none; }
.hinttip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px); width: max-content; max-width: 320px;
  white-space: pre-wrap; text-align: left; font-size: 12px; font-weight: 400; line-height: 1.4;
  padding: 8px 10px; border-radius: 8px; background: var(--tip-bg, #1f2937); color: #fff;
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.18)); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity .1s, transform .1s; }
.hinttip::before {
  content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%) translateY(4px); border: 5px solid transparent;
  border-top-color: var(--tip-bg, #1f2937); z-index: 41;
  opacity: 0; pointer-events: none; transition: opacity .1s, transform .1s; }
.hinttip:hover::after, .hinttip:focus::after, .hinttip:hover::before, .hinttip:focus::before {
  opacity: 1; transform: translateX(-50%) translateY(0); }

/* Doprava ve feedu (nastavení feedů): kompaktní řádky sazba → dopravce Heuréky.
   Select se ukládá sám při změně, takže u něj není tlačítko - jen křížek na odebrání. */
/* Sloupce podle obsahu, tabulka jen tak široká, kolik potřebuje (ne přes celou
   kartu) - jinak se buď roztáhne název sazby, nebo poslední sloupec s výběrem. */
/* Tabulka drží celou šířku těla (plovoucí úzká tabulka vypadala jako výřez),
   ale sloupce mají pevné poměry a pole dopravce má strop, aby se neroztáhlo. */
.dtable { table-layout: fixed; width: 100%; max-width: 880px; }
.dtable th, .dtable td { white-space: nowrap; }
.dtable th:last-child, .dtable td:last-child { white-space: normal; }
.dtable col.c-rate { width: 27%; } .dtable col.c-price { width: 12%; }
.dtable col.c-free { width: 14%; }
/* Nastavení modulu = PRŮVODCE PO KROCÍCH (zvoleno 2026-07-28). Zapojení má daný
   sled: appka → kategorie → doprava → vygenerovat a vložit adresu. Hotový krok je
   sbalený na jeden řádek s hodnotou, první nehotový je otevřený. Tón je svěží:
   barevná kolečka, ikony sekcí, ukazatel postupu - ne enterprise šeď. */
/* Hlavička karty průvodce (helper wizHead v ui.js): nadpis vlevo, badge vpravo. */
.wizhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wizhead h2 { margin: 0; }
.wizhead-sub { margin: 4px 0 10px; }
.wizprog { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.wizbar { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.wizbar > i { display: block; height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }
.wizprog b { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }

.steps { margin-top: 10px; }
.step { position: relative; padding-left: 38px; }
/* Spojnice mezi kolečky - vede od kolečka dolů, u posledního kroku ne. */
.step::before { content: ''; position: absolute; left: 13px; top: 36px; bottom: -4px;
  width: 2px; background: var(--line-strong); }
.step:last-child::before { display: none; }
.step > summary { display: flex; align-items: center; gap: 10px; padding: 9px 4px 9px 0;
  cursor: pointer; list-style: none; }
.step > summary::-webkit-details-marker { display: none; }
.step-dot { position: absolute; left: 0; top: 8px; width: 27px; height: 27px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px;
  font-weight: 700; background: var(--surface-2); color: var(--muted);
  border: 2px solid var(--line); }
.step.done .step-dot { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--green); }
.step.now .step-dot { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft); }
.step-ico { font-size: 16px; line-height: 1; }
.step-t { font-weight: 600; font-size: 14px; }
.step.done .step-t { font-weight: 500; color: var(--muted); }
.step-val { margin-left: auto; font-size: 13px; color: var(--muted); text-align: right;
  font-family: var(--num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.step.done .step-val { color: var(--ok-ink); }
.step.todo .step-val { color: var(--warn-ink); font-weight: 600; }
.step > summary:hover .step-t { color: var(--accent-ink); }
.step-chev { color: var(--muted); font-size: 10px; flex: 0 0 auto; transition: transform .15s ease; }
.step[open] .step-chev { transform: rotate(180deg); color: var(--accent); }
.step[open] > summary .step-t { color: var(--accent-ink); font-weight: 600; }
.step-body { padding: 4px 0 18px; max-width: 900px; }
.step-body > :first-child { margin-top: 0; }

/* Doladění pod kroky (co nikdo měnit nemusí) - decentní, sbalené. */
.moreset { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.moreset > summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--muted);
  width: max-content; }
.moreset > summary::-webkit-details-marker { display: none; }
.moreset > summary::before { content: "⚙️  "; }
.moreset > summary:hover { color: var(--accent-ink); }
.setrow { border-bottom: 1px solid var(--line); }
.setrow:last-child { border-bottom: none; }
.setrow > summary { display: flex; align-items: center; gap: 12px; padding: 11px 4px;
  cursor: pointer; list-style: none; }
.setrow > summary::-webkit-details-marker { display: none; }
.setrow-label { font-weight: 600; font-size: 13.5px; }
.setrow-val { margin-left: auto; color: var(--muted); font-size: 13px; text-align: right;
  font-family: var(--num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.setrow-chev { color: var(--muted); font-size: 10px; flex: 0 0 auto; transition: transform .15s ease; }
.setrow[open] .setrow-chev { transform: rotate(180deg); color: var(--accent); }
.setrow[open] > summary .setrow-label { color: var(--accent-ink); }
.setrow-body { padding: 2px 0 14px; max-width: 900px; }

/* Adresa feedu: prosté pole + akce, žádný panel navíc. */
.urlbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.urlbox input { flex: 1; min-width: 240px; font-family: var(--mono); font-size: 12.5px; padding: 7px 9px; }

/* Pole dopravce + vlastní rozbalovátko. Nativní datalist neumí skupiny číselníku
   a roztahoval se přes celý displej; tenhle panel drží skupiny (na adresu / výdejní
   místa / boxy), má strop výšky a filtruje se psaním. */
.dsel { width: 250px; max-width: 100%; padding: 5px 8px; font-size: 13px; }
.dcombo-pop { position: fixed; z-index: 60; max-height: 300px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 11px;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16)); padding: 5px; }
.dcombo-pop[hidden] { display: none; }
.dgrp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  color: var(--muted); padding: 9px 10px 3px; }
.dgrp[hidden] { display: none; }
.dopt { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 6px 10px; border-radius: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.dopt[hidden] { display: none; }
.dopt:hover, .dopt:focus-visible { background: var(--accent-soft); color: var(--accent-ink); }
.dnone { padding: 10px; font-size: 13px; color: var(--muted); }
.dnone[hidden] { display: none; }
.dnote { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Křížek = akce v řádku, ne text: čtverec s vycentrovaným glyfem. */
.xbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-3); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.xbtn:hover { background: var(--err-soft, var(--surface-2)); color: var(--err-ink, var(--text)); border-color: var(--err, var(--line-strong)); }
.dadd { margin-top: 4px; }
.dadd > summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; width: max-content; }
.dadd > summary:hover { color: var(--accent-ink); }
.dadd > summary::-webkit-details-marker { display: none; }
.dadd > summary::before { content: "+ "; }
.dadd[open] > summary { color: var(--muted); }
.dfree { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.dfree-head { font-size: 13px; font-weight: 700; display: flex; align-items: center; margin-bottom: 2px; }
.dfree-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.dfree-form label { font-size: 13px; color: var(--muted); }
.dfree-form input[type=text] { max-width: 220px; padding: 5px 8px; font-size: 13px; }

/* Sbalený seznam produktů u nenamapované kategorie (kompaktní - defaultně jen počet). */
.prodlist { display: inline-block; margin-top: 2px; }
.prodlist > summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; }
.prodlist > summary::-webkit-details-marker { display: none; }
.prodlist > summary::before { content: "▸ "; }
.prodlist[open] > summary::before { content: "▾ "; }
.prodlist-in { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* funkce appky = checkboxy (1 appka může mít víc modulů) */
.pcheck { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; color: var(--text); white-space: nowrap; cursor: pointer; }
.pcheck input { width: auto; margin: 0; }
.rolepick { display: flex; flex-wrap: wrap; gap: 10px 18px; }
/* === Nastavení práv: KARTA NA ESHOP (detail uživatele i detail role) =======
   Nahradilo širokou mřížku eshop × modul (moduly byly sloupce, takže tabulka
   rostla doprava a lezla z karty ven). Panel roste jen DOLŮ - viz accessPanels
   ve web/routes.js. Skupiny modulů kopírují taby eshopu (MODULE_GROUPS). */
.apanels { display: grid; gap: 12px; }
.apanel { min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 14px 14px; background: var(--hover-weak); }
.ap-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.ap-id { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ap-id .muted { font-size: 12px; overflow-wrap: anywhere; }
.ap-count { margin-left: auto; font-size: 12px; color: var(--muted);
  font-family: var(--num); font-variant-numeric: tabular-nums; }
.ap-bulk { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.ap-mini { background: none; border: 0; padding: 3px 8px; border-radius: var(--radius-pill);
  font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.ap-mini:hover { color: var(--accent-ink); background: var(--accent-soft); }
/* Správce eshopu má všechny moduly, takže po zaškrtnutí jednotlivé moduly zamkne
   (JS je odškrtne a zašedne) - dvě zaškrtnutí s týmž významem mátla. */
.ap-admin { display: flex; gap: 8px; margin: 10px 0 0; padding: 8px 10px;
  border: 1px solid var(--warn-line); border-radius: var(--radius-sm); background: var(--warn-soft); }
.ap-admin .muted { font-size: 12px; }
.apanel.is-admin .ap-admin { background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ap-mods { display: grid; gap: 14px; margin-top: 12px; }
.apanel.is-admin .ap-mods { opacity: .42; pointer-events: none; }
.apg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.apg-t { font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.apg-head .ap-bulk { margin-left: auto; }
/* min() v minmax: bez něj by track držel 195px i v užší kartě a panel by přetekl. */
.apg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(195px, 100%), 1fr)); gap: 7px 14px; }
.ap-chip { white-space: normal; font-size: 13.5px; align-items: flex-start; }
.ap-chip input { margin-top: 2px; }

/* === Modul Přehledy (dashboard) === */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px; margin: 4px 0 22px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow-sm); }
/* Hero KPI: zvýraznění INSET linkou (ne borderem) → buňka má stejnou velikost jako ostatní */
.kpi.hero { box-shadow: inset 0 2px 0 var(--accent), var(--shadow-sm); background: linear-gradient(180deg, var(--accent-soft) 0%, var(--card) 85%); }
.kpi.hero .kpi-value { color: var(--accent-ink); }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
/* Čísla v KPI jedou stejným písmem jako karty na velíně (--num = Inter s tabulkovými
   číslicemi). Do 2026-07-28 tu byl --mono a velké částky vypadaly jako výpis z terminálu -
   ta samá změna, která se dřív udělala na velíně. --mono zůstává jen pro kód. */
.kpi-value { font: 750 22px/1.1 var(--num); letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi-value, .dstat-val, .csval, .barrow-val, .ptable .num, .modcard-num { font-variant-numeric: tabular-nums; }
.kpi-chg { margin-top: 8px; font-size: 12.5px; }
.chg { font-weight: 600; }
.chg.up { color: var(--ok-ink); }
.chg.down { color: var(--danger); }
.chg.muted { color: var(--muted); font-weight: 400; }

.dash2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
/* tři panely vedle sebe (Statistiky). Pod 1200px spadne na dva, pod 760 na jeden. */
/* align-items:start = karty jsou vysoké podle svého obsahu. Natažení na výšku nejvyšší
   karty v řádku dělalo pod krátkými panely velké prázdné plochy. */
.dash3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
@media (max-width: 1200px) { .dash3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Statistiky: sticky lišta sekcí + hustší panely -------------------------
   Stránka má desítky panelů, takže potřebuje vlastní hustotu (menší paddingy,
   menší nadpisy) a kotvy. Platí JEN uvnitř .statpage / .statnav, zbytek hubu
   zůstává v původním rytmu. */
/* Přepínač REPORTŮ Statistik (Shopify / GA4 / Shopify + GA4 / Clarity / Judge.me).
   Vlastní řádek NAD sticky lištou a schválně NENÍ sticky: je to navigace mezi stránkami,
   kdežto tmavý pruh pod ním ovládá tu stránku, na které stojíš. Do 2026-08-06 seděly oba
   přepínače v jednom nowrap pruhu a s každým dalším reportem ubíralo místo kotvám sekcí
   (poslední se ořízla na „Zd"). Tady se řada ZALAMUJE, takže unese libovolný počet reportů. */
.statsrc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.statsrc a, .setsrc a {
  display: inline-flex; align-items: center;
  padding: 7px 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--card);
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 620; white-space: nowrap;
  transition: all .15s var(--ease);
}
.statsrc a:hover, .setsrc a:hover { border-color: var(--accent); color: var(--accent-ink); }
.statsrc a.on, .setsrc a.on {
  background: var(--accent); border-color: transparent; color: var(--accent-contrast);
  box-shadow: 0 3px 12px -4px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Přepínač NAPOJENÍ na stránkách nastavení Statistik (GA4 / Clarity / Judge.me / Meta Ads).
   Schválně stejné pilulky jako přepínač reportů výš: obojí je „kde v řadě stojíš", jen
   jedno v provozu a druhé v nastavení. Tečka vlevo = zdroj je napojený (plná zelená),
   nebo ještě není (prázdný kroužek). Na aktivní pilulce se tečka kreslí bílá, protože
   zelená na akcentu není spolehlivě čitelná napříč tématy. */
.setsrc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.setsrc-l { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; margin-right: 2px; }
.setsrc-d { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: 8px;
  border: 1.5px solid var(--muted); }
.setsrc-d.ok { background: var(--green); border-color: var(--green);
  box-shadow: 0 0 0 3px var(--ok-soft); }
.setsrc a.on .setsrc-d { border-color: var(--accent-contrast); box-shadow: none; }
.setsrc a.on .setsrc-d.ok { background: var(--accent-contrast); }
@media (max-width: 760px) {
  .setsrc { gap: 5px; margin-bottom: 12px; }
  .setsrc a { padding: 7px 13px; font-size: 12.5px; }
  .setsrc-l { width: 100%; margin: 0 0 2px; }
}

/* Lišta je SCHVÁLNĚ tmavá i ve světlém tématu: proskleny je celý hub, takže glass verze
   s obsahem splývala (nahlášeno). Tmavý panel se čte jako ovládací prvek, ne jako karta.
   V tmavém tématu by tmavá na tmavé zmizela, proto je tam naopak SVĚTLEJŠÍ než pozadí. */
.statnav { position: sticky; top: 74px; z-index: 15; margin: 0 0 14px; }
.statnav-in {
  --bar-fg: #eef2f8;
  --bar-muted: rgba(238, 242, 248, .6);
  --bar-line: rgba(255, 255, 255, .16);
  --bar-hover: rgba(255, 255, 255, .1);
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  padding: 7px 9px; border-radius: 14px;
  background: #151c28; color: var(--bar-fg);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 10px 26px -12px rgba(10, 15, 25, .7), 0 2px 8px -3px rgba(10, 15, 25, .45);
}
:root[data-theme="dark"] .statnav-in {
  background: #232c3b;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 12px 28px -14px #000, 0 0 0 1px rgba(255, 255, 255, .03);
}
.snav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
/* Drilldown bez sekcí: místo pilulek nese lišta název stránky (jinak prázdný pruh). */
.snav-links.snav-title { align-items: center; color: var(--bar-fg); font-size: 13px; font-weight: 640; letter-spacing: -.01em; white-space: nowrap; }
.snav-links::-webkit-scrollbar { display: none; }
.snav {
  color: var(--bar-muted); text-decoration: none; font-size: 12.5px; font-weight: 600;
  padding: 6px 11px; border-radius: var(--radius-pill); white-space: nowrap; transition: all .15s var(--ease);
}
.snav:hover { color: var(--bar-fg); background: var(--bar-hover); }
.snav.on { color: var(--bar-fg); background: rgba(255, 255, 255, .16); }
.snav-period {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font: 650 12.5px/1 var(--num); color: var(--bar-fg);
  background: var(--bar-hover); border: 1px solid var(--bar-line); border-radius: var(--radius-pill);
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.snav-period:hover { border-color: var(--accent); color: #fff; }
.snav-caret { color: var(--bar-muted); font-size: 10px; }
/* Filtry visí POD lištou jako překryv (absolute uvnitř sticky .statnav), ne v toku -
   jinak by otevření filtru posunulo celou stránku pod sebou. */
.snav-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 16;
  width: min(620px, calc(100vw - 32px));
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.snav-pop[hidden] { display: none; }
.snav-pop-in { display: flex; flex-direction: column; gap: 10px; }
.snav-pop .filt-row { margin: 0; }

.stsec { scroll-margin-top: 132px; }
.stsec-t {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; margin: 20px 2px 8px;
}
/* Hustota: karty a nadpisy na Statistikách o kus těsnější než zbytek hubu. */
.statpage .dash2 { align-items: start; gap: 14px; }
.statpage .card { padding: 14px 16px; margin-bottom: 14px; }
.statpage .card h2 { font-size: 16px; margin-bottom: 10px; }
.statpage .card h3 { margin: 14px 0 5px !important; }
.statpage .barlist { gap: 7px 10px; font-size: 13px; }
.statpage .bartrack { height: 14px; }
.statpage .dstats { gap: 10px 26px; }
.statpage .dstat-val { font-size: 18px; }
.statpage th, .statpage td { padding: 7px 10px; }
.statpage .kpis { gap: 10px; }
.statpage .kpi { padding: 12px 14px; }
.statpage .kpi-value { font-size: 19px; }
.barsub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; }
/* Mobil (nahlášeno 2026-07-29): lišta se chytala na `top:8px`, tedy NAD spodní hranou
   sticky hlavičky (ta drží na 10px a je nad ní i v z-indexu) - po odrolování zajela pod
   hlavičku a nešlo v ní ani listovat, ani nic tuknout. Sedí proto na stejných 74px jako
   na desktopu (mobilní hlavička je stejně vysoká, dokládá to `.navwrap { top: 62px }`).
   Dvě řady tu byly do 2026-08-06, dokud lišta nesla i přepínač zdroje dat: ten s chipem
   filtru nechal na kotvy sekcí jednotky pixelů. Přepínač reportů je teď mimo lištu
   (`.statsrc`), takže se vrátila JEDNA řada - sekce scrollují ve zbytku šířky. */
@media (max-width: 760px) {
  .statnav-in { padding: 7px 8px; border-radius: 14px; }
  .snav-period { padding: 6px 10px; font-size: 12px; }
  .snav { padding: 7px 12px; }
  .statsrc { gap: 5px; margin-bottom: 10px; }
  .statsrc a { padding: 7px 13px; font-size: 12.5px; }
}

/* Rolování dolů = hlavička odjede, lišta modulu si sedne na její místo (mobil).
   Na telefonu drží hlavička + sticky lišta Statistik přes 160px z displeje trvale, což
   je při čtení tabulek půl obrazovky. Třídu `navhide` dává skript v layout.js: dolů
   schovat, nahoru hned vrátit (hlavička je jediná cesta do menu, takže se NESMÍ dobývat
   rolováním až na začátek stránky).
   Proč transform a ne `top`: hlavička ani lišta tím nehnou s layoutem, animace jede na
   GPU. Skript proto třídu nasazuje až po ~160px odrolování, kdy je lišta PROKAZATELNĚ
   přichycená - dokud stojí v toku, `top` na ni neplatí a posun by ji utrhl od obsahu. */
@media (max-width: 760px) {
  header, .statnav { transition: transform .22s var(--ease); }
  body.navhide header { transform: translateY(calc(-100% - 12px)); }
  body.navhide .statnav { transform: translateY(-66px); } /* 74px → 8px pod horní hranou */
}
@media (prefers-reduced-motion: reduce) {
  header, .statnav { transition: none; }
}

/* bar list (kategorie / země) - JEDEN sdílený grid (řádky = display:contents), aby všechny
   pruhy začínaly na stejném x (dřív měl každý řádek vlastní grid → kolísavá šířka sloupců). */
.barlist { display: grid; grid-template-columns: minmax(140px, 200px) 1fr auto auto; gap: 9px 10px; align-items: center; font-size: 13.5px; }
.barrow { display: contents; }
.barrow-label { line-height: 1.25; word-break: break-word; }
.bartrack { background: var(--surface-2); border-radius: 6px; height: 16px; overflow: hidden; }
.barfill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 130%); border-radius: 6px; }
.barrow-val { font-weight: 600; white-space: nowrap; text-align: right; }
.barrow-chg { font-size: 12px; min-width: 56px; text-align: right; }

/* Pruh „podrobnosti jsou v původním nástroji" nad statistikami (Clarity: nahrávky
   a heatmapy zůstávají u Microsoftu). Tlačítko VLEVO (je to hlavní akce pruhu, čte se
   dřív než vysvětlení), text za ním; na mobilu pod sebe a tlačítko přes celou šířku,
   ať je cíl pro prst velký. */
.srcbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.srcbar-t { flex: 1 1 320px; line-height: 1.45; }
.srcbar-t .muted { display: block; font-size: 13px; margin-top: 2px; }
@media (max-width: 760px) { .srcbar .btn { width: 100%; text-align: center; } }

/* Tentýž pruh rozdělený na půl: vlevo proklik do zdroje, vpravo stav synchronizace.
   GRID, ne wrapující flex - jen tak je jisté, KDE končí levá polovina, a dělicí linka
   se nakreslí právě mezi nimi. Pod 900 px jsou sloupce pod sebou a z linky je vodorovná
   (stejný důvod, proč se v `.odetail` linka nekreslí vůbec: u wrapu vyskočí, kam nepatří). */
.srcbar.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.srcbar.split > .srcbar-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.srcbar.split > .srcbar-side + .srcbar-side { border-left: 1px solid var(--line); padding-left: 18px; }
/* Pravá polovina je SLOUPEC (na záložce Shopify + GA4 jsou v ní dva zdroje pod sebou),
   takže musí přebít řádkový flex výš - proto stejně silný selektor, ne samotné .syncside. */
.srcbar.split > .srcbar-side.syncside { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
@media (max-width: 900px) {
  .srcbar.split { grid-template-columns: 1fr; gap: 12px; }
  .srcbar.split > .srcbar-side + .srcbar-side {
    border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px;
  }
}

/* Clarity, panel „Kde se lidé zasekávali": jedna metrika = jedna dlaždice v .dash3.
   Hlavní je PODÍL relací (velké číslo), pruh pod ním porovnává jevy MEZI SEBOU
   (škála na největší z nich) - při podílech v jednotkách procent by pruh ke 100 %
   byl neviditelný. Uvnitř je to těsnější než běžný panel: je to dlaždice, ne tabulka. */
.fcard-h { display: flex; align-items: center; gap: 7px; }
.fcard-h b { font-size: 13.5px; }
.fcard-h .chg { margin-left: auto; }
.fcard-ico { font-size: 15px; line-height: 1; }
.fcard .kpi-value { margin: 9px 0 0; }
.fcard-u { font-size: .6em; font-weight: 600; color: var(--muted); }
.fcard .bartrack { height: 8px; margin: 9px 0 7px; }
.fcard-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fcard-w { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 9px 0 0; text-wrap: pretty; }

/* Judge.me (záložka Statistik s recenzemi).
   Rozdělení hvězd: pruh je škálovaný na největší stupeň, ne na celek - u zdravého
   eshopu má pětihvězdička 80 % a zbylé čtyři řádky by byly neviditelný proužek.
   Negativní stupně mají vlastní barvu (`.barfill.bad`), ať jsou vidět bez čtení čísel. */
/* Hvězdy: teplá žlutá je konvence recenzí a nesmí splynout s akcentem hubu.
   V tmavém tématu se zesvětluje, jinak by na tmavém skle zhnědla. */
.jmstars { color: #e0940f; letter-spacing: 1px; white-space: nowrap; }
:root[data-theme="dark"] .jmstars { color: #ffc457; }
.kpi-value .jmstars { font-size: .58em; vertical-align: .12em; margin-left: 2px; }
.jmrow { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; margin: 7px 0; font-size: 13.5px; }
.jmrow .bartrack { height: 10px; }
.jmrow-n { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.barfill.bad { background: linear-gradient(90deg, var(--danger) 0%, #f5a623 160%); }

/* Recenze jako karty, ne řádky tabulky: text má proměnlivou délku a v tabulce
   by rozhazoval výšku řádků. Karta staví na `.card`, takže dědí sklo, radius i stín.
   PAST, opravená 2026-08-06: původní verze měla vlastní `background: var(--surface)`,
   jenže takový token NEEXISTUJE (jsou jen --surface-2/3) - karta byla průhledná a text
   ležel přímo na pozadí stránky. Uvnitř skla se navíc nedělají šedé výplně, takže
   správná cesta je vždycky `.card`, ne vlastní podklad. */
.jmrevs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
.jmrev { padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; }
/* Negativní recenze nese svislou hranu vlevo - stejný jazyk jako „objednávky
   k dořešení" v seznamu objednávek a stavová hrana karty eshopu na velíně. */
.jmrev.bad { border-left: 3px solid var(--danger); }
.jmrev-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jmrev-h b { font-size: 14px; }
.jmrev-t { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jmrev-b { margin: 0; font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.jmrev-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px;
  margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); }
.jmrev-p { font-weight: 600; }
.jmrev-w { color: var(--muted); }

/* Žebříček produktů: seznam, ne tabulka. Čtyři sloupce v úzké kartě `.dash2` stlačily
   název produktu do ~90px a dlouhé názvy se lámaly do osmi řádků. Tady má název celou
   šířku, hodnocení sedí vpravo a počet recenzí je drobný druhý řádek. */
.jmplist { display: flex; flex-direction: column; }
.jmp { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.jmp:last-child { border-bottom: none; }
.jmp:first-child { padding-top: 0; }
.jmp-n { font-size: 13.5px; line-height: 1.35; }
.jmp-r { text-align: right; white-space: nowrap; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.jmp-m { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

/* Hlavička podskupiny uvnitř sekce (Negativní / Poslední recenze) - h3 ve škále,
   vpravo počet nebo proklik. */
.jmhead { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; }
.jmhead-t { margin: 0; display: flex; align-items: center; gap: 7px; }
.jmhead-ico { font-size: 15px; line-height: 1; }
.jmhead .badge, .jmhead .link { margin-left: auto; }

/* histogram hodin (panel „Kdy se nakupuje") - 24 sloupců rostoucích od spodní hrany.
   Výška sloupce je v % kontejneru s pevnou výškou, proto `align-items: end`. */
.hourbars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 92px; margin-top: 6px; }
.hourbar { background: linear-gradient(180deg, var(--accent2) 0%, var(--accent) 100%); border-radius: 3px 3px 0 0; min-height: 2px; }
.hourbar:hover { filter: brightness(1.12); }
.hourax { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-top: 4px; font-size: 9.5px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

/* trend graf */
.trendsvg { width: 100%; height: 150px; display: block; }
.trendlegend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.trendlegend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }

/* customer split */
.csrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.csrow:last-child { border-bottom: none; }
.csdot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cslabel { flex: 1; }
.csval { font-weight: 680; font-size: 16px; }

/* synchronizační lišta (interval + poslední běh + stav + ruční tlačítko) */
.syncbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.syncbar-head { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.syncbar-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; margin-top: 5px; }
/* Obal na jeden nebo víc zdrojů pod sebou (záložka Shopify + GA4 má dva). */
.syncside { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1 1 320px; }
.syncside .syncbar-info { min-width: 0; }
.syncbar-note, .syncmsg { font-size: 12.5px; line-height: 1.4; color: var(--danger); }
.syncbar-note { margin-top: 5px; }

/* panel Slevy a daně - souhrnné statistiky */
.dstats { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.dstat-val { font-size: 20px; font-weight: 680; letter-spacing: -0.01em; margin-top: 2px; }

/* hlavička trendu s přepínačem granularity vpravo */
.trend-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.trend-gran { margin: 0; display: flex; align-items: center; gap: 6px; }
.trend-gran select { width: auto; }
/* osa X trendu: popisky dat absolutně umístěné pod grafem (zarovnané s body grafu) */
.trendaxis { position: relative; height: 15px; margin-top: 3px; }
.trendaxis span { position: absolute; top: 0; font-size: 10.5px; line-height: 1; color: var(--muted); white-space: nowrap; }
/* trend: překryvná vrstva (hodnoty osy Y, hover svislice + tečky + tooltip) */
.trendchart { position: relative; }
.trendyl { position: absolute; font-size: 10px; line-height: 1; padding: 0 2px; background: color-mix(in srgb, var(--card) 78%, transparent); transform: translateY(-50%); pointer-events: none; white-space: nowrap; }
.tyl-l { left: 2px; color: var(--accent-ink); }
.tyl-r { right: 2px; color: var(--ok-ink); }
.trendvline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); opacity: .35; display: none; pointer-events: none; }
.trenddot { position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--card); transform: translate(-50%, -50%); display: none; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.trenddot-r { background: var(--accent); }
.trenddot-o { background: var(--green); }
.trendtip { position: absolute; top: 2px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md); border-radius: 7px; padding: 5px 9px; font-size: 12px; line-height: 1.45; color: var(--text); white-space: nowrap; pointer-events: none; display: none; z-index: 6; }

/* top produkty - název max 2 řádky, číselné sloupce zarovnané doprava */
.topname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.ptable th.num, .ptable td.num { text-align: right; white-space: nowrap; }
.topprod td { vertical-align: middle; }

/* detailní seznamy objednávek/refundací (drilldown ze Statistik) */
.crumbs { margin: 0 0 12px; font-size: 13px; }
.subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 4px; font-size: 13.5px; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 18px 0 4px; flex-wrap: wrap; }
.pager .btn.disabled { opacity: .45; pointer-events: none; }
/* objednávka jako rozbalovací blok (summary = souhrn, uvnitř položky) */
/* Seznam objednávek (/orders/list): řádky se tváří jako tabulka, ale jsou to <details> -
   rozklik ukáže položky a fakta. Hlavička `.ordhead` sdílí grid s každým `summary` přes
   proměnnou `--ordcols`, takže sloupce nemůžou odskočit. Na mobilu se z gridu stane
   karta (viz blok ≤760px) - proto grid, ne tabulka. */
.ordlist { --ordcols: minmax(90px, .85fr) 110px minmax(140px, 1.4fr) minmax(104px, .95fr) minmax(140px, 1.5fr) 72px 124px; }
.ordhead, .ordrow > summary {
  display: grid; grid-template-columns: var(--ordcols); gap: 6px 12px;
  align-items: baseline; padding: 10px 14px;
}
.ordhead { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; padding: 0 14px 6px; }
.ordhead .num { text-align: right; }
.ordrow { border: 1px solid var(--line); border-radius: 10px; background: var(--card); margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.ordrow:hover { border-color: var(--line-strong); }
.ordrow > summary { cursor: pointer; list-style: none; }
.ordrow > summary::-webkit-details-marker { display: none; }
.oc { min-width: 0; font-size: 13.5px; }
.oc.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-name { font-weight: 680; }
.oc-name::before { content: '▸'; color: var(--muted); font-size: 11px; margin-right: 6px; }
.ordrow[open] > summary .oc-name::before { content: '▾'; }
.oc-cust { overflow-wrap: anywhere; }
.oc-ship { overflow-wrap: anywhere; font-size: 12.5px; color: var(--muted); }
.oc-state { display: flex; flex-wrap: wrap; gap: 4px; align-self: center; }
.oc-net { font-weight: 680; }
.ocsub { display: block; font-size: 11.5px; font-weight: 400; }
a.fpill { display: inline-flex; align-items: center; text-decoration: none; }
.ord-lines { padding: 0 14px 12px; }
.ord-lines .ptable { font-size: 13px; }
/* Detail objednávky = sloupce KDO · KAM · ZA KOLIK · SLEVY, oddělené linkou a mezerou.
   ŽÁDNÉ šedé kachlíky uvnitř prosklené karty (design systém hubu) - odděluje typografie:
   nadpis sloupce kapitálkami, hodnoty pod sebou, popisek jen tam, kde by se sám nepoznal. */
/* Sloupce dělí MEZERA, ne svislá linka: u auto-fit gridu se neví, který sloupec zrovna
   začíná nový řádek, takže by se linka objevila i tam, kde nemá co dělat. */
.odetail { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 32px; padding: 12px 0 4px; border-top: 1px solid var(--line); }
.ocard { padding: 2px 0 6px; min-width: 0; }
.ocard h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; }
.oline { margin: 0 0 5px; font-size: 13px; overflow-wrap: anywhere; }
.oline.lead { font-weight: 620; }
.oline.muted { font-size: 12px; }
.oline.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oline .pbadge { font-size: 11px; padding: 1px 7px; vertical-align: 1px; }
/* Účtenka: popisek vlevo, částka vpravo, čísla pod sebou (tabulkové číslice z --num).
   Součet a obrat bez DPH jsou oddělené linkou - je to jiná úroveň čtení než položky. */
.oreceipt { margin-top: 8px; font-size: 12.5px; }
.orow { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.orow > span { color: var(--muted); }
.orow > b { font-weight: 620; font-family: var(--num); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.orow.sub > span, .orow.sub > b { color: var(--muted); font-weight: 500; }
.orow.sum { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 5px; }
.orow.net > span, .orow.net > b { color: var(--text); font-weight: 700; }
.orow.neg > b { color: var(--danger); }
/* Sleva: kód je hlavní, druh (kupón / automatická) je doplněk. */
.odisc { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px;
  border-radius: 6px; font-size: 11.5px; background: var(--accent-soft); color: var(--accent-ink); }
.odisc .muted { font-size: 10.5px; }
/* Poznámka a doplňky: přes celou šířku pod sloupci, dvojice ve dvou až třech sloupcích. */
.onote { border-top: 1px solid var(--line); padding-top: 10px; margin-bottom: 4px; }
.onotetext { margin: 0 0 8px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.oattrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 24px; font-size: 12.5px; }
/* Kupón a akce ve SVINUTÉM řádku, pod obratem. Drobné chipy, ať sloupec nenaroste. */
.opromo { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-top: 3px; }
.ochip { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px;
  white-space: nowrap; }
.ochip.disc { background: var(--accent-soft); color: var(--accent-ink); }
.ochip.sale { background: var(--warn-soft); color: var(--warn-ink); }
.ordtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
/* Tagy objednávky: ve svinutém řádku vedle stavu, v rozbaleném bloku pod fakty.
   Klikací = filtr seznamu na daný tag (`.on` = právě filtrovaný). */
.otags { display: contents; }
.otag { font-size: 11px; padding: 1px 7px; font-weight: 600; text-decoration: none;
  background: var(--surface-2); color: var(--muted); max-width: 190px; overflow: hidden;
  text-overflow: ellipsis; }
a.otag:hover { background: var(--accent-soft); color: var(--accent-ink); }
.otag.on { background: var(--accent-soft); color: var(--accent-ink); }
.otag.more { cursor: default; }
/* Hlídaný tag (WARN_TAGS v orders/routes.js) = objednávka potřebuje ruční zásah. */
.otag.warn, a.otag.warn:hover { background: var(--danger-soft); color: var(--danger); }
.ordrow.warn { border-color: var(--err-line); box-shadow: inset 3px 0 0 var(--danger), var(--shadow-sm); }
.ordwarn { margin-bottom: 14px; }
.ordwarn ul { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; }
.ordwarn li { margin-bottom: 4px; }
.ordwarn .muted { color: inherit; opacity: .8; }
.ordact { margin: 10px 0 0; font-size: 13px; }
/* Šipka za číslem objednávky = odchod ven do Shopify adminu (číslo samo vede do hubu). */
a.link.exlink { color: var(--muted); font-weight: 400; }
a.link.exlink:hover { color: var(--accent-ink); }
/* Sloupec s číslem objednávky: hlavička ani dvojice číslo + šipka se nesmí zalomit
   (tabulka je table-layout:fixed, takže se šířka bere z colgroup, ne z obsahu). */
.ptable th.onum, .ptable td.onum { white-space: nowrap; word-break: normal; }

@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .dash2 { grid-template-columns: 1fr; }
  /* .dash3 musí spadnout na JEDEN sloupec spolu s .dash2: ve dvou sloupcích zbylo
     panelu na 420px ~187px a mřížka .barlist (110 + 40 + hodnota) z karty přetekla
     ven = vodorovný scroll celé stránky Statistik. */
  .dash3 { grid-template-columns: 1fr; }
  .barlist { grid-template-columns: minmax(110px, 1fr) minmax(40px, 1.3fr) auto; }
  .barrow-chg { display: none; }
}

/* Méně pohybu pro uživatele s omezenou animací.
   `animation-iteration-count: 1` je nutné: bez něj se NEKONEČNÉ animace (spinner
   generování, živé tečky na tabech) jen zrychlí na setinu milisekundy a točí se dál,
   takže pro člověka s vestibulární poruchou je výsledek horší než původní animace. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    /* Bez vynulování delaye by stagger (karty velína apod.) nechal obsah probliknout
       se zpožděním až čtvrt vteřiny, i když je samotná animace zkrácená. */
    animation-delay: 0s !important;
  }
}

/* === Mobil (telefony) === */
@media (max-width: 760px) {
  /* Dvousloupcové formuláře (Nastavení eshopu, přidání appky) pod sebe. */
  .grid2 { grid-template-columns: 1fr; }
  /* Hamburger menu */
  .navtoggle { display: flex; }
  header { padding: 4px 10px; }
  header .header-inner { width: 100%; padding: 6px 8px 6px 16px; gap: 0; }
  .navwrap {
    display: none; position: absolute; top: 62px; left: 10px; right: 10px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--glass-edge); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 10px;
    max-height: calc(100vh - 82px); overflow-y: auto;
  }
  body.nav-open .navwrap { display: flex; animation: navdrop .18s var(--ease); }
  /* Ztmavené pozadí pod otevřeným menu (zavírá ho tuknutí kamkoli mimo - JS v layoutu) */
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 10;
    background: rgba(12, 18, 28, .35); backdrop-filter: blur(3px);
    animation: navfade .18s var(--ease);
  }
  @keyframes navfade { from { opacity: 0; } }
  .navwrap nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .navwrap nav a { padding: 12px 14px; border-radius: 12px; font-size: 15px; }
  /* Dropdown Eshopy v mobilním panelu = inline rozbalení (žádná plovoucí karta) */
  .navwrap nav .tabmenu summary { padding: 12px 14px; border-radius: 12px; font-size: 15px; }
  /* Mobilní menu je svislý panel - rozbalený přepínač eshopů se do něj vejde vždy,
     takže tu má přednost před rozbalovačkou (o jedno tuknutí míň). */
  .navwrap nav .navshops-in { display: flex; flex-direction: column; align-items: stretch; margin-right: 0; }
  .navwrap nav .navshops-in a { max-width: none; padding: 12px 14px; border-radius: 12px; font-size: 15px; }
  .navwrap nav details.navshops.has-inline { display: none; }
  .navwrap nav .tabmenu-list {
    position: static; border: none; box-shadow: none; background: transparent;
    padding: 0 0 4px 14px; min-width: 0; max-height: none; animation: none;
  }
  /* Oddělovač admin sekce (uvnitř nav) = vodorovná linka; ten před jménem schovat -
     blok jméno/odhlásit už na mobilu odděluje border-top na .muted. */
  .navwrap nav .navsep { width: auto; height: 1px; margin: 8px 0 6px; align-self: stretch; }
  .navwrap > .navsep { display: none; }
  .navwrap .spacer { display: none; }
  .navwrap .muted { padding: 12px 14px 4px; margin-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; }
  .navwrap form.inline { display: block; }
  .navwrap .linkbtn { width: 100%; text-align: left; padding: 12px 14px; font-size: 15px; border-radius: 12px; }
  /* přepínač vzhledu = plnohodnotný řádek v mobilním menu (s textem) */
  .navwrap .themetoggle { width: 100%; height: auto; justify-content: flex-start; border: none; padding: 12px 14px; font-size: 15px; border-radius: 12px; }
  .navwrap .themetoggle .tt-label { display: inline; color: var(--text); }

  /* Obsah */
  main { padding: 22px 16px 64px; }
  h1, .modhead-t { font-size: 22px; }
  .card { padding: 16px; }
  .page-head { flex-wrap: wrap; gap: 12px; }

  /* Navigace modulů na mobilu = SPODNÍ LIŠTA jako v nativní appce: plovoucí sklo-pilulka
     dole (vzor hlavičky), 5 slotů s ikonou + mini labelem, „Více" vysune bottom sheet
     se zbylými moduly. Desktopové řady pilulek (hlavní taby) se schovají; doména
     eshopu v h1 taky (zbytečně lámala řádek). */
  .tabs.tabs-desktop { display: none; }
  .storeh1-dom { display: none; }
  h1.storeh1 { margin-bottom: 14px; }
  .bottomnav {
    display: flex; position: fixed; left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--glass-edge); border-radius: 18px;
    box-shadow: var(--shadow-lg); padding: 6px;
  }
  .bn-item {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 7px 2px 6px; border-radius: 12px; cursor: pointer;
    color: var(--muted); font-size: 10.5px; font-weight: 560; line-height: 1;
    border-bottom: none; margin: 0; text-align: center; white-space: nowrap;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .bn-item span:last-child { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bn-ico { font-size: 17px; line-height: 1; position: relative; display: inline-block; }
  /* Badge ve spodní liště sedí u ikony (odznak jako v nativní appce). */
  .tabbadge.bn-badge { position: absolute; top: -6px; left: calc(100% - 7px); margin: 0; }
  .bn-item.active { color: var(--accent-ink); background: var(--accent-soft); }
  /* Panel „Zobrazit jako" na mobilu: nad spodní lištou modulů, ať ji nepřekrývá. */
  .viewdock { right: 10px; left: 10px; bottom: calc(78px + env(safe-area-inset-bottom)); }
  .viewdock .vd-panel { flex-wrap: wrap; justify-content: flex-end; border-radius: 18px; }
  .viewdock .vd-who { flex: 1 1 auto; }
  .viewdock .vd-who b { max-width: 100%; }
  .viewdock.min { left: auto; }
  details.bn-more { display: block; flex: 1 1 0; min-width: 0; margin: 0; }
  .bn-more summary { list-style: none; }
  .bn-more summary::-webkit-details-marker { display: none; }
  .bn-more .bn-item { width: 100%; }
  .bn-sheet {
    position: fixed; left: 10px; right: 10px; z-index: 39;
    bottom: calc(72px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    background: var(--card);
    border: 1px solid var(--glass-edge); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 8px;
    max-height: 60vh; overflow-y: auto;
    animation: sheetup .16s var(--ease);
  }
  @keyframes sheetup { from { opacity: 0; transform: translateY(10px); } }
  .bn-sheet a {
    display: block; padding: 12px 13px; border-radius: 10px; border-bottom: none;
    margin: 0; color: var(--text); font-size: 14px; font-weight: 540; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; text-decoration: none;
    background: var(--surface-2, transparent);
  }
  .bn-sheet a.active { background: var(--accent); color: var(--accent-contrast); }
  /* Obsah nesmí končit pod lištou. (:has - Chrome 105+/Safari 15.4+; bez podpory
     zůstane základní padding 64px, lišta překryje jen úplný spodek stránky.) */
  body:has(.bottomnav) main { padding-bottom: 108px; }
  /* Podzáložky nastavení: desktopová řada pilulek se schová, místo ní malý chip
     s rozbalovací kartou (sekundární přepínač pod hlavičkou stránky). */
  .tabs.subtabs { display: none; }
  .modmenu.modmenu-sub { display: inline-block; position: relative; margin: -4px 0 16px; }
  .modmenu-sub summary {
    list-style: none; display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 560; color: var(--text); cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 7px 13px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    -webkit-tap-highlight-color: transparent;
  }
  .modmenu-sub summary::-webkit-details-marker { display: none; }
  .modmenu-sub[open] summary { border-color: var(--accent); }
  .modmenu-sub .modmenu-chev { font-size: 10px; color: var(--muted); transition: transform .15s var(--ease); }
  .modmenu-sub[open] .modmenu-chev { transform: rotate(180deg); }
  .modmenu-sub .modmenu-list {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--glass-edge); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 6px;
    animation: navdrop .15s var(--ease);
  }
  .modmenu-sub .modmenu-list a {
    display: block; padding: 10px 13px; border-radius: 10px; border-bottom: none;
    color: var(--text); font-size: 14px; margin: 0; white-space: nowrap;
  }
  .modmenu-sub .modmenu-list a.active { background: var(--accent); color: var(--accent-contrast); }

  /* Datové tabulky → rozpad na karty (label : hodnota), aby nikde nebyl scroll do stran.
     Hlavičkový řádek (<tr> s <th>) se schová, každý datový řádek = mini karta. */
  .ptable.resp { display: block; min-width: 0; }
  .ptable.resp colgroup, .ptable.resp thead { display: none; }
  .ptable.resp tr { display: block; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; }
  .ptable.resp tr:first-of-type { display: none; } /* řádek hlaviček (th) - :first-of-type, ne :first-child (před tr je colgroup) */
  .ptable.resp td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 3px 0; border: none; text-align: right; white-space: normal; }
  /* Popisek NESMÍ shrinkovat: `word-break: break-word` na td se jinak propíše i do něj
     a dlouhá hodnota (odkaz + e-mail) mu ukrojí místo → „Příp/ad", „Pro/duk/t". */
  .ptable.resp td::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 12px;
    text-align: left; flex: none; }
  .ptable.resp td:first-child { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; text-align: left; }
  .ptable.resp td:first-child::before { display: none; }
  .ptable.resp .topname { display: block; -webkit-line-clamp: unset; }

  /* Top produkty na mobilu: kompaktní karta = název + JEDEN řádek mini-statů vedle sebe
     (Obrat / Ks / Refund.), místo tří řádků pod sebou → výrazně nižší karta. */
  .ptable.resp.topprod tr { padding: 9px 12px; margin-bottom: 8px; }
  .ptable.resp.topprod td:first-child { margin-bottom: 6px; }
  .ptable.resp.topprod td:not(:first-child) {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    gap: 0; padding: 0; margin: 0 22px 0 0; border: none;
    text-align: left; white-space: nowrap; font-size: 13.5px; font-weight: 600;
  }
  .ptable.resp.topprod td:not(:first-child)::before { font-size: 10px; font-weight: 600; line-height: 1.4; }

  /* Seznam objednávek: z tabulkového gridu se stane karta. Pozice se přiřazují VÝSLOVNĚ
     (grid-column i grid-row) - jen sloupce by kvůli buňkám přes celou šířku rozhodilo
     automatické umisťování na řádky, které v HTML pořadí nejsou. */
  .ordlist { --ordcols: 1fr auto; }
  .ordhead { display: none; }
  .oc-name  { grid-column: 1; grid-row: 1; }
  .oc-net   { grid-column: 2; grid-row: 1; text-align: right; }
  .oc-when  { grid-column: 1; grid-row: 2; }
  .oc-units { grid-column: 2; grid-row: 2; text-align: right; }
  .oc-cust  { grid-column: 1 / -1; grid-row: 3; }
  .oc-ship  { grid-column: 1 / -1; grid-row: 4; }
  .oc-state { grid-column: 1 / -1; grid-row: 5; }
  .ocsub { display: inline; margin-left: 6px; }

  /* Ostatní široké tabulky (admin, varianty produktu) zůstávají se scrollem uvnitř karty.
     Scroll dostane JEN karta, která širokou tabulku opravdu má - plošné overflow-x:auto
     na .card ořezávalo i svisle (bublina .hinttip se uvnitř karet nikdy nezobrazila). */
  .card:has(.ptable:not(.resp)), .card:has(.cmap),
  .card:has(.utable) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ptable:not(.resp), .cmap { min-width: 520px; }
  .ptable:not(.resp) code { white-space: nowrap; }
  /* Dlouhá hodnota v <code> (seznam originů, endpoint, klíč) je jedno slovo bez mezery,
     takže neměla kde zlomit a vytlačila celou stránku do stran. V tabulkách výš platí
     opačné pravidlo (nowrap), to je specifičtější a zůstává. */
  code { overflow-wrap: anywhere; }
  /* .pcheck je nowrap kvůli krátkým pilulkám u appek; u dlouhého popisku (běh štítků
     „přepočítat i štítky s vlastním intervalem…") tím řádek přetekl mimo obrazovku.
     Zalomení neodděluje zaškrtávátko od textu - jsou to dvě flex položky. */
  .pcheck { white-space: normal; }

  /* Dotykové cíle: mini tlačítka a hromadné akce aspoň 40 px na výšku, checkboxy
     a radia 20 px - drobné cíle se prstem netrefovaly (naměřeno 20-28 px). */
  .btn.mini, .bulkbar .btn { min-height: 40px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* Panel Zpracování případu pod sebe (řešitel nad poznámkou). */
  .casework-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Klíč–hodnota (detail produktu) na úzkém displeji pod sebe */
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }

  /* KPI: 2 sloupce i na telefonu, menší hodnota ať se vejde */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { padding: 13px 13px 12px; }
  .kpi-value { font-size: 19px; }

  /* Souhrnné statistiky (Slevy a akce) - 2sloupcový grid místo volného toku */
  .dstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dstat-val { font-size: 17px; }

  /* Filtry plná šířka */
  .filters > div, .cmap-form input, .cmap-path { min-width: 0; width: 100%; }
  .cmap-form { flex-wrap: wrap; }
  .cmap td:nth-child(2) { width: auto; }
  .filt-field { flex: 1 1 100%; }
  .filt-field select, .filt-field input { width: 100%; }
  .filt-row .btn { width: 100%; }
  /* Lišta objednávek: sedm polí pod sebou by byl kilometr, na telefonu jedou po dvou. */
  .ordbar .filt-field { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .ordbar .filt-field.filt-grow { flex: 1 1 100%; }
  .ordbar select { max-width: none; }
  .ordbar .filt-actions { width: 100%; margin-left: 0; justify-content: space-between; }
  .ordbar .filt-actions .btn { width: auto; }
  /* Formáty exportu jsou krátká slova - na mobilu zůstávají vedle sebe, na celou
     šířku by z nich byl sloupec přes půl obrazovky (`.filt-row .btn` výš). */
  .expgrp .btn { width: auto; }
  .expgrp { gap: 6px; }

  /* Hlavička plovoucího panelu (dnes ji nosí `.snav-pop` Statistik, viz komentář
     u `.filt-sheet-head` výš). Pravidla mobilního bottom-sheetu „Další filtry"
     smazána 2026-08-01, v šablonách po něm nic nezbylo. */
  .filt-sheet-head b { font-size: 17px; }

  /* Průvodce zapojením: akční tlačítko pod text (ať se nemačká vedle) */
  .setup-item { flex-wrap: wrap; }
  .setup-item .si-act { margin-left: 34px; width: auto; }

  /* Velín na mobilu: hero pod sebe, karty eshopů jedna vedle druhé po dvou.
     Hlavní číslo se zmenší (42 px se na 360 px displeji láme přes celou šířku). */
  .vhero { padding: 18px 16px; gap: 16px; }
  .vhero-total { font-size: 34px; }
  .vstats { gap: 18px 22px; }
  .vstat b { font-size: 18px; }
  /* Graf portfolia je na telefonu nižší a s menšími popisky osy Y: levý žlábek je
     v procentech viewBoxu (~9 %), takže na 360 px z něj zbude ~30 px, zatímco popisek
     „100 tis." měří ~31 px. Menší písmo ubere ~3 px a vejde se. Vlastnost padL
     v routes.js se schválně NEMĚNÍ: je v procentech viewBoxu, takže by ubrala data
     i na desktopu a sáhla na přepočet hoveru. */
  .vchart svg { height: 150px; }
  .vchart .vt-scale, .vchart .vtline { height: 150px; }
  .vchart .vt-scale span { font-size: 9.5px; }
  /* Legenda na mobilu neplave nad grafem, ale teče v obsahu */
  .vt-legend { position: static; justify-content: flex-start; gap: 12px; margin: 0 0 8px; }
  /* Pás úkolů: jeden sloupec, dva se na 420 px nedají číst. */
  .vqueue { padding: 16px 14px 14px; }
  .vq-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* Dvě karty vedle sebe: dlaždice unese i 170 px, a seznam eshopů tak nezabere
     půl obrazovky rolování. Pod 380 px (staré iPhony SE) padá na jednu. */
  .vshops { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .sc { padding: 14px 13px 12px; }
  .sc-v { font-size: 21px; }

  /* Slevové kódy: karty ve 2sloupcovém gridu. Grid musí být na <tbody> (prohlížeč ho
     kolem <tr> vloží sám), ne na <table> - jinak je jediná grid-položka tbody → 1 sloupec. */
  .ptable.resp.cards2 tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ptable.resp.cards2 tr { margin: 0; }
}

/* Tmavý code-box pro návody a generované Liquid sekce (schválně tmavý v obou tématech,
   vzhled „terminálu"). Sdílený helper pre() ve web/ui.js. */
pre.codebox {
  background: #1f2937;
  color: #e2e8f0;
  padding: 14px 16px;
  border-radius: 10px;
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.5;
  font-family: Consolas, 'Courier New', monospace;
  white-space: pre;
  scrollbar-color: #475569 transparent;
}

/* Tenké posuvníky vnitřních scroll oblastí (systémové tlusté na glass kartách hrubnou). */
.desc-box, .aival, .card, .navwrap, .bn-sheet, .tabmenu-list {
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}

/* Sdílený prázdný stav: emoji ikona + tučný titulek + muted věta co dál (případně .btn CTA). */
.empty { text-align: center; padding: 36px 20px; color: var(--muted); }
.empty .empty-ico { font-size: 30px; display: block; margin-bottom: 8px; }
.empty b { display: block; color: var(--text); font-weight: 620; margin-bottom: 3px; font-size: 14.5px; }
/* `.empty-text` používaly tři šablony (webhooks, /emails, onboarding), ale v CSS
   nebyla - text tak dědil velikost okolí a prázdný stav vypadal pokaždé jinak. */
.empty .empty-text { font-size: 13.5px; line-height: 1.55; max-width: 46ch; margin: 0 auto; }
.empty .empty-cta { margin: 14px 0 0; }

/* Podtitulek v nadpisu karty (jednotná velikost místo inline 12/13/14px) a nápověda pod polem. */
.h2sub { font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
.hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* Chip trhu (CZ/SK) v hlavičce karty feedu - na první pohled odliší, o který
   marketplace jde (vlaječky ne - Chrome/Win emoji vlajky nezobrazí). Plná brandová
   barva: CZ = akcent (tyrkys), SK = druhá brandová (limetka) s tmavým textem. */
.mpchip { display: inline-block; min-width: 34px; text-align: center; padding: 4px 11px;
  border-radius: 10px; font-size: 13px; font-weight: 800; letter-spacing: .07em;
  background: var(--accent); color: var(--accent-contrast, #fff); vertical-align: 2px; margin-right: 10px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.mpchip.sk { background: var(--accent2); color: #1f2937;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent2) 40%, transparent); }

/* Karty feedů per trh - výrazné odlišení celé karty: barevná levá hrana + jemný
   barevný nádech pozadí zleva (CZ akcent, SK druhá brandová barva). */
.card.mp-cz, .card.mp-sk { border-left: 5px solid var(--accent); }
.card.mp-cz { background:
  linear-gradient(105deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 340px), var(--glass); }
.card.mp-sk { border-left-color: var(--accent2); background:
  linear-gradient(105deg, color-mix(in srgb, var(--accent2) 11%, transparent), transparent 340px), var(--glass); }

/* Chip „zděděno z eshopu" u polí nastavení modulů (odesílatel, originy, notifikace):
   na první pohled ukáže, že je pole předvyplněné z Nastavení eshopu a nemusí se
   vyplňovat. Sedí v řádku labelu, proklik vede na výchozí hodnoty eshopu. */
/* (funguje i mimo label - v poznámce pod formulářem) */
.inh {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 1px 8px; border-radius: var(--radius-pill); max-width: 100%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  text-decoration: none; vertical-align: middle;
}
.inh b { font-weight: 640; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.inh:hover { background: var(--accent); color: var(--accent-contrast); }
.inh.inh-off { background: var(--surface-2); color: var(--muted); }
a.inh.inh-off:hover { background: var(--hover); color: var(--text); }
/* Vlastní hodnota modulu (přebíjí eshop) - oranžový chip, ať je odchylka vidět. */
.inh.inh-own { background: var(--warn-soft); color: var(--warn-ink); }

/* Zděděná hodnota jako VYPLNĚNÉ pole (web/ui.js inheritField): zelený box s ✓ místo
   prázdného inputu s placeholderem - na první pohled „tohle už je vyplněné za tebe".
   Přepis pro modul je za rozklikem .inhdet (bez JS; prázdný input v něm = dál dědí). */
.inhbox {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--ok-soft) 60%, var(--card));
  border: 1px solid var(--ok-line); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 14px; min-height: 41px; box-sizing: border-box;
}
/* ✓ v zeleném kroužku - čte se jako „hotovo, vyplněno". Text ✓ v barvě karty
   (bílá v light, tmavá v dark - ok-ink je v dark světlý, bílá by zanikla). */
.inhbox-ok {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ok-ink); color: var(--card); font-size: 11px; font-weight: 700;
}
.inhbox-val { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.inhbox .inh { margin-left: auto; flex: none; }
/* Rozklik přepisu: tužka je součást textu summary (žádná flex mezera), otevřený stav
   = odsazená „editační zóna" s levou linkou, ať je vidět, k čemu input patří. */
.inhdet { margin-top: 6px; }
.inhdet > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--muted); padding: 2px 0; width: fit-content;
}
.inhdet > summary::-webkit-details-marker { display: none; }
.inhdet > summary:hover { color: var(--accent-ink); text-decoration: underline; }
.inhdet[open] { padding-left: 10px; border-left: 2px solid var(--line-strong); }
.inhdet[open] > summary { color: var(--text); font-weight: 600; margin-bottom: 6px; }
/* „vrátit z eshopu" - tlačítko vypadající jako odkaz (jen vyčistí pole, uloží se formem). */
.inhclear {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: inherit; color: var(--accent-ink); text-decoration: underline;
}
.inhclear:hover { color: var(--accent); }

/* Našeptávač povolených originů (web/ui.js originSuggest): pilulky s hotovými
   originy odvozenými z domény odesílatele - klik je doplní do pole. Prázdná zóna
   (neznámá doména) se nesmí projevit ani mezerou, proto :empty { display:none }. */
.origsug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.origsug:empty { display: none; }
.sug-lbl { font-size: 12px; color: var(--muted); }
/* Hlášku vidíš jen po AUTOMATICKÉM předvyplnění - „tohle jsem doplnil za tebe, potvrď". */
.sug-note { font-size: 12px; color: var(--ok-ink); font-weight: 600; }
.sugchip {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  border-radius: var(--radius-pill); padding: 3px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1.6;
}
.sugchip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
/* Už doplněný origin: potvrzení, ne nabídka - nekliká se. */
.sugchip.is-in, .sugchip.is-in:hover {
  background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink);
  cursor: default; opacity: .85;
}

/* === Modul Marketing: blokový editor kampaní ================================
   Dvousloupcový layout: vlevo editor (meta + bloky + odeslání), vpravo sticky
   živý náhled e-mailu v iframe. Na mobilu pod sebe. */
.mkgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 14px; align-items: start; }
.mkright { position: sticky; top: 78px; }
.mkprev { width: 100%; height: 72vh; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--surface-3); }
.mkfield { flex: 1; min-width: 140px; }
.mkfield > label { display: block; margin: 0 0 4px; font-size: 12px; }
.mkrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; flex: 1; }
.mkinput { width: 100%; }
.mkblock { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; margin: 0 0 10px; background: var(--surface-2, rgba(0,0,0,.015)); }
.mkblock-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line, #e5e7eb); }
.mkblock-type { font-weight: 600; font-size: 13px; }
.mkblock-body { padding: 10px; display: grid; gap: 10px; }
.mkitem { border: 1px dashed var(--line, #d1d5db); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; }
.mkitem-head { display: flex; align-items: center; margin: 0 0 6px; }
.mkaddbar { display: flex; gap: 6px; flex-wrap: wrap; }
.mkthumb { max-width: 180px; max-height: 90px; border-radius: 6px; border: 1px solid var(--line, #e5e7eb); }
@media (max-width: 980px) {
  .mkgrid { grid-template-columns: 1fr; }
  .mkright { position: static; }
  .mkprev { height: 60vh; }
}

/* Marketing editor: drag&drop, sbalené bloky, drag handle */
.mkdrag { cursor: grab; color: var(--muted, #9ca3af); font-size: 14px; user-select: none; }
.mkblock-head { cursor: default; }
.mkblock.collapsed { opacity: .92; }
.mkblock.mkdrop { outline: 2px dashed var(--accent, #00b2d9); outline-offset: 2px; }
.mkprev { transition: width .2s ease; max-width: 100%; }

/* AI asistent produktů: stav úkolu, průběh běhu a diff návrhu (staré → nové) */
.badge-run { background: var(--accent-soft); color: var(--accent-ink); }
.ailog { margin: 6px 0 0; padding-left: 18px; }
.ailog li { margin: 3px 0; }
.aival { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow-y: auto;
  font-size: 13px; }
.aidiff td { vertical-align: top; }
.aidiff td.old { background: var(--danger-soft); }
.aidiff td.new { background: var(--ok-soft); }
.aidiff details > summary { cursor: pointer; }

/* ── Builder vzhledu e-mailů (/stores/:id/emails): ovládání vlevo (sticky), náhled vpravo
   (taky sticky, kompaktní; velikost e-mailu řídí posuvník „Velikost" = transform:scale) ── */
.mailbuilder{display:grid;grid-template-columns:296px minmax(0,1fr);gap:20px;align-items:start}
.mailbuilder .mb-ctl{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:12.5px}
.mailbuilder .mb-ctl .grid2{grid-template-columns:1fr;gap:8px}
/* Kompaktní ovládání (menší labely/selecty/pilulky - stejný duch jako přepínače náhledu). */
.mailbuilder .mb-ctl label{margin:0 0 3px;font-size:11.5px}
.mailbuilder .mb-ctl select{padding:6px 9px;font-size:12.5px}
.mailbuilder .mb-ctl input[type=range]{margin:2px 0}
.mailbuilder .mb-ctl .pillrow{margin:0 0 8px;gap:5px;row-gap:6px}
.mailbuilder .mb-ctl .pillrow a{font-size:11.5px;padding:3px 9px}
/* Náhledová strana = sticky sloupec, kompaktní box (nescrolluje se za obzor).
   `min-width:0` je POVINNÉ: uvnitř je scéna s náhledem v PEVNÉ šířce (600 px × zoom),
   a bez toho by se ta šířka propsala jako min-content grid položky ven a rozjela celou
   stránku (na 420 px vycházel scrollWidth 487). Scéna má scrollovat SAMA, ne stránka. */
.mb-prev{position:sticky;top:84px;display:flex;flex-direction:column;min-width:0}
.mb-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 8px}
.mb-toolbar .pillrow{margin:0;gap:5px;row-gap:6px}
/* Kompaktnější přepínače náhledu (jazyk / zařízení / formát / klient). */
.mb-toggles a{padding:3px 9px;font-size:11.5px;font-weight:560}
.mb-toggles .pillsep{height:14px;margin:0 2px}
/* Výběr šablony = rozbalovací seznam (dřív carousel pilulek - nelíbil se). */
.mb-tplsel{max-width:100%;font-weight:600;min-width:190px}
.mb-meta{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 8px;font-size:13px}
.mb-meta .mb-subj{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-meta a{flex:none}
/* Posuvník velikosti náhledu (zoom e-mailu). */
.mb-viewbar{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:13px;color:var(--muted)}
.mb-viewbar input[type=range]{flex:1;max-width:220px;margin:0}
.mb-zoomval{font-variant-numeric:tabular-nums;min-width:40px;text-align:right;color:var(--text);font-weight:600}
/* Scéna = šedý „stůl", na kterém stojí e-mail; e-mail se zmenšuje/zvětšuje přes scale. */
.mb-stage{background:var(--surface-3);border:1px solid var(--line);border-radius:12px;padding:16px;
  overflow:auto;display:flex;justify-content:center;align-items:flex-start;height:clamp(380px,66vh,760px);
  min-width:0}
/* `safe center` = když je e-mail širší než scéna, přestane se centrovat a zarovná se
   doleva. Prosté `center` by přeteklo na OBĚ strany a k levému okraji e-mailu by se
   nešlo doscrollovat (na mobilu se to stane vždy, náhled je 600 px). */
.mb-stage{justify-content:safe center}
/* Obal drží ROZMĚR ZMENŠENÉHO e-mailu (scale mění jen vykreslení, ne layout box) → scéna
   scrolluje a centruje správně. Šířku/výšku i scale nastavuje JS podle zařízení a posuvníku. */
.mb-scaler{position:relative;flex:none;overflow:hidden;border-radius:8px;box-shadow:var(--shadow-sm)}
.mb-frame{position:absolute;top:0;left:0;border:0;background:#f4f5f7;transform-origin:top left}
.mb-test{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 0}
@media (max-width: 900px){
  /* minmax(0,1fr), ne holé 1fr: holé `1fr` je minmax(AUTO,1fr), takže by se šířka
     náhledu (pevných 600 px × zoom) propsala do šířky sloupce a stránka by scrollovala. */
  .mailbuilder{grid-template-columns:minmax(0,1fr)}
  .mailbuilder .mb-ctl{position:static;max-height:none}
  .mb-prev{position:static}
  .mb-stage{height:72vh}
}

/* === Onboarding noveho eshopu (web/onboarding.js) ========================= */
.onb-card { padding: 16px 20px 12px; }
.onb-stepper { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.onb-step { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.onb-num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; background: var(--surface-2); color: var(--muted); flex: none;
  border: 1.5px solid var(--line); transition: transform .2s; }
.onb-lab { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.onb-lab b { font-size: 13.5px; }
.onb-lab small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.onb-step.is-active .onb-num { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.onb-step.is-done .onb-num { background: var(--ok-soft); border-color: var(--ok-ink); color: var(--ok-ink); }
.onb-step.is-done:hover .onb-num { transform: scale(1.08); }
.onb-step.is-locked { opacity: .62; cursor: default; }
.onb-line { flex: 1 1 24px; height: 2px; background: var(--line); border-radius: 2px; min-width: 14px; }
.onb-line.is-done { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.onb-check { width: 15px; height: 15px; display: block; }
.onb-check path { stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 0; }
.onb-step.just-done .onb-check path { stroke-dashoffset: 16; animation: onbdraw .5s .15s ease forwards; }
.onb-step.just-done .onb-num { animation: onbpop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes onbdraw { to { stroke-dashoffset: 0; } }
@keyframes onbpop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.onb-foot { font-size: 12px; margin-top: 10px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.onb-skipf { display: inline; margin: 0; }
.linklike { background: none; border: none; padding: 0; color: var(--muted); text-decoration: underline;
  cursor: pointer; font: inherit; font-size: 12px; }
.linklike:hover { color: var(--accent-ink); }
.reqmark { color: var(--accent-ink); }
.dnshead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.dnshead b { font-size: 13.5px; }
/* V bočním panelu kroku 2 je dnshead hlavička karty, ne oddělovač sekce. */
.setupside .dnshead { margin: 0 0 10px; padding-top: 0; border-top: none; }

/* === Krok 2 onboardingu: průvodcovský setup e-mailů ========================
   Vlevo formulář, vpravo sticky sloupec, který průběžně odpovídá „co ještě
   zbývá" a „jak to dopadne" (checklist · náhled schránky · DNS). */
.setupgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: 20px; align-items: start; }
.setupside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; }
.sidecard { background: var(--surface-3); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.sidehead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sidehead b { font-size: 13.5px; }
.chkcount { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.chkbar { height: 5px; border-radius: var(--radius-pill); background: var(--surface-2h); margin: 9px 0 12px; overflow: hidden; }
.chkbar i { display: block; height: 100%; width: 0; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .35s ease; }
.chklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.chk { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font-size: 13px; }
.chk span { color: var(--muted); font-weight: 600; }
.chk small { grid-column: 2; color: var(--muted); font-size: 11.5px; opacity: .8; }
.chk::before { content: ''; width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box;
  border: 2px dashed var(--line-strong); margin-top: 1px; transition: background .2s, border-color .2s; }
.chk.is-on::before { content: '✓'; border: 0; background: var(--ok-ink); color: var(--card);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.chk.is-on span { color: var(--text); }

/* Náhled řádku ve schránce - abstraktní „Odesílatel: jméno / adresa" nikomu
   neřekne, jak to dopadne; tenhle řádek ano a mění se při psaní. */
.mailprev .mp-lab { font-size: 11.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; margin-bottom: 10px; }
.mp-row { display: flex; gap: 10px; align-items: flex-start; }
.mp-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 15px; }
.mp-body { min-width: 0; flex: 1; }
.mp-top { display: flex; align-items: baseline; gap: 8px; }
.mp-top b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-time { margin-left: auto; font-size: 11px; color: var(--muted); flex: none; }
.mp-subj { font-size: 13px; margin-top: 1px; overflow-wrap: anywhere; }
.mp-addr { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }

/* Stav pole (živá validace): chyba PŘÍMO pod polem, ne až po odeslání formuláře. */
.fld { display: block; }
.fld-msg { display: none; margin: 5px 0 0; font-size: 12.5px; font-weight: 600; color: var(--danger); }
.fld-msg::before { content: '⚠ '; }
.fld.is-err .fld-msg { display: block; }
.fld.is-err input { border-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 45%, var(--card)); }
.fld.is-err input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.fld.is-err .hint { display: none; }
.fld.is-ok input { border-color: var(--ok-line); }
.formnarrow .mailprev { margin-top: 12px; }
@media (max-width: 900px) {
  .setupgrid { grid-template-columns: 1fr; }
  .setupside { position: static; }
}

/* Oslava dokonceni (/setup?welcome=1) */
.onb-done { position: relative; overflow: hidden; text-align: center; padding: 26px 20px 22px; }
.onb-done-skip { text-align: left; }
.onb-done-check svg { width: 52px; height: 52px; display: inline-block; }
.onb-done-check circle { fill: var(--ok-soft); stroke: var(--ok-ink); stroke-width: 2; }
.onb-done-check path { stroke: var(--ok-ink); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34; animation: onbdraw2 .7s .25s ease forwards; }
@keyframes onbdraw2 { to { stroke-dashoffset: 0; } }
.onb-done-list { list-style: none; padding: 0; margin: 0; display: inline-flex; flex-direction: column; gap: 4px; text-align: left; }
.onb-done-list li { opacity: 0; transform: translateY(4px); animation: onbfade .4s ease forwards; font-size: 13.5px; }
.onb-done-list li:nth-child(1) { animation-delay: .35s; }
.onb-done-list li:nth-child(2) { animation-delay: .55s; }
.onb-done-list li:nth-child(3) { animation-delay: .75s; }
@keyframes onbfade { to { opacity: 1; transform: none; } }
.onb-confetti i { position: absolute; top: -12px; width: 6px; height: 11px; border-radius: 2px; opacity: .9;
  animation: onbfall 1.15s ease-in forwards; }
.onb-confetti i:nth-child(3n) { background: var(--accent); }
.onb-confetti i:nth-child(3n+1) { background: var(--accent2); }
.onb-confetti i:nth-child(3n+2) { background: var(--warn-ink); }
.onb-confetti i:nth-child(1) { left: 6%; animation-delay: 0s; }
.onb-confetti i:nth-child(2) { left: 14%; animation-delay: .12s; }
.onb-confetti i:nth-child(3) { left: 23%; animation-delay: .05s; }
.onb-confetti i:nth-child(4) { left: 31%; animation-delay: .2s; }
.onb-confetti i:nth-child(5) { left: 39%; animation-delay: .09s; }
.onb-confetti i:nth-child(6) { left: 48%; animation-delay: .16s; }
.onb-confetti i:nth-child(7) { left: 56%; animation-delay: .03s; }
.onb-confetti i:nth-child(8) { left: 64%; animation-delay: .22s; }
.onb-confetti i:nth-child(9) { left: 73%; animation-delay: .07s; }
.onb-confetti i:nth-child(10) { left: 81%; animation-delay: .18s; }
.onb-confetti i:nth-child(11) { left: 89%; animation-delay: .11s; }
.onb-confetti i:nth-child(12) { left: 95%; animation-delay: .25s; }
@keyframes onbfall { 0% { transform: translateY(0) rotate(0deg); opacity: .95; }
  100% { transform: translateY(150px) rotate(220deg); opacity: 0; } }

@media (max-width: 760px) {
  .onb-stepper { gap: 7px; }
  .onb-num { width: 27px; height: 27px; font-size: 12.5px; }
  .onb-lab small { display: none; }
  .onb-step:not(.is-active) .onb-lab b { display: none; }
  .onb-mods { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-step.just-done .onb-check path, .onb-step.just-done .onb-num,
  .onb-done-check path, .onb-done-list li { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
  .onb-confetti { display: none; }
}

/* ── Kompozitor odpovědi zákazníkovi (core/casework.js replyPanel) ────────────
   Vlevo se píše, vpravo stojí ŽIVÝ NÁHLED skutečného e-mailu (server ho vykresluje
   touž šablonou, kterou pošle). Formulář vypadá jako list mailu: hlavička Komu/Předmět
   a bezrámečkové pole zprávy; fokus rámuje celý list, ne jen textarea. Podpis se
   v kompozitoru NEPŘEDSTÍRÁ - je vidět doopravdy v náhledu (proto jen patka s chipem 🔒). */
.replygrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.mailwrap { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.mailwrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mailhead { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: baseline;
  padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--hover-weak); }
.mailhead span { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.mailhead b { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
textarea.mailbody { width: 100%; display: block; border: 0; border-radius: 0; background: transparent;
  padding: 16px; min-height: 240px; font-size: 14.5px; line-height: 1.65; resize: vertical; box-shadow: none; }
textarea.mailbody:focus { outline: none; border: 0; box-shadow: none; }
.mailfoot { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px dashed var(--line-strong); background: var(--surface-3);
  color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.mailfoot-tag { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px 8px; }

/* Náhledová strana kompozitoru: lišta (stav + Desktop/Mobil) nad scénou s e-mailem.
   Scéna, obal a rám sdílí mechaniku s galerií náhledů (.mb-stage/.mb-scaler/.mb-frame) -
   rám se kreslí v logické šířce klienta a zmenší se transformem, aby se vešel do sloupce. */
.rp-pane { position: sticky; top: 84px; }
.rp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.rp-bar b { font-size: 13.5px; }
.rp-state { font-size: 12px; color: var(--muted); }
.rp-dev { margin: 0 0 0 auto; gap: 5px; }
.rp-dev a { padding: 3px 10px; font-size: 11.5px; font-weight: 560; }
.rp-stage { height: clamp(420px, 62vh, 720px); padding: 16px; }
.rp-note { font-size: 12px; margin: 8px 0 0; }
/* Náhled se nenačetl (výpadek API): prázdný sedmisetpixelový šedý rám vypadá jako
   rozbitá stránka, takže se scéna scvrkne na hlášku. Třídu i odkrytí hlášky dělá JS
   v `replyPanel` - BEZ JS se nic z tohohle neuplatní a scéna zůstane jako dřív. */
.rp-stage.is-fail { height: auto; max-height: 120px; align-items: center; padding: 20px 16px; }
.rp-stage.is-fail .mb-scaler { display: none; }
.rp-fail { margin: 0; max-width: 360px; text-align: center; font-size: 13px; color: var(--muted); }
@media (max-width: 1100px) {
  .replygrid { grid-template-columns: 1fr; }
  .rp-pane { position: static; }
}

/* Přehled automatik (/automations + karta „Automatické běhy" v Přehledu eshopu).
   Řádek nese název přenosu + drobný podtitulek (co dělá / výsledek běhu), proto
   je buňka zarovnaná nahoru. */
.kpi-value.warn { color: var(--warn-ink); }
.amtable td { vertical-align: top; }
.amt-what, .amt-next, .amt-note { font-size: 12px; line-height: 1.4; margin-top: 3px; }
.amt-rt { font-weight: 620; color: var(--ok-ink); white-space: nowrap; }
.amcard .amtable { margin: 0; }
.amcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Roletky filtru v liště (eshop, přenos): stejná pilulková stylizace jako .vsearch,
   jinak by zdědily width:100% z globálního pravidla pro select a lištu rozbily. */
.vtoolbar select { width: auto; max-width: 230px; font-size: 13px; padding: 8px 12px;
  border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--glass-edge); }
@media (max-width: 620px) { .vtoolbar select { flex: 1 1 100%; max-width: none; } }

/* === Akce a bannery: globální přehled (/promotions) ======================== */
/* Časová osa: pruhy období kampaní a bannerů napříč eshopy. Pozice se počítají
   v procentech v routách (inline left/width) - tady je jen vzhled, ať se dá
   měnit bez zásahu do generátoru. */
.promotl { position: relative; overflow-x: auto; }
.promotl-grid { position: relative; min-width: 640px; }
.promotl-row { display: grid; grid-template-columns: 210px 1fr; gap: 10px; align-items: center; padding: 3px 0; }
.promotl-lbl { font-size: 13px; line-height: 1.3; overflow: hidden; }
.promotl-lbl .muted { font-size: 11px; }
.promotl-track {
  position: relative; height: 26px; border-radius: 7px;
  background: var(--surface-2); overflow: hidden;
}
.promotl-bar {
  position: absolute; top: 3px; bottom: 3px; min-width: 3px;
  border-radius: 5px; display: flex; align-items: center;
  padding: 0 7px; font-size: 11px; font-weight: 620; color: #fff;
  white-space: nowrap; overflow: hidden;
}
.promotl-bar.b-live { background: var(--warn-strong); }
.promotl-bar.b-plan { background: var(--accent); }
.promotl-bar.b-done { background: var(--line-strong); color: var(--muted); }
.promotl-bar.b-ban { background: var(--accent-ink); }
/* Období bez konce: pruh doběhne na okraj a vyšisuje, ať je vidět, že pokračuje. */
.promotl-bar.b-open { border-radius: 5px 0 0 5px; mask-image: linear-gradient(to right, #000 82%, transparent); }
.promotl-head { display: grid; grid-template-columns: 210px 1fr; gap: 10px; margin-bottom: 4px; }
.promotl-ticks { position: relative; height: 16px; font-size: 11px; color: var(--muted); }
.promotl-tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
/* Čára „dnes" přes CELOU mřížku, ne jen přes jeden řádek. Leží v překryvné vrstvě,
   která kopíruje grid časové osy (210px popisek + 1fr pruh), takže procento zleva
   se počítá ze stejné šířky jako pruhy kampaní. `inset` začíná pod pásem měsíců
   (16px ticks + 4px margin hlavičky). Token `--err-ink` NEEXISTUJE, drželo to jen
   fallbackem - barva patří na `--danger` jako zbytek hubu. */
.promotl-nowwrap { position: absolute; inset: 20px 0 0; display: grid;
  grid-template-columns: 210px 1fr; gap: 10px; pointer-events: none; z-index: 2; }
.promotl-nowtrack { position: relative; }
.promotl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); border-radius: 1px; }
.promotl-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin-top: 10px; }
.promotl-legend span { display: inline-flex; align-items: center; gap: 5px; }
.promotl-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
/* Náhledy bannerů: karta = jeden banner tak, jak ho uvidí zákazník. */
.banprev { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.banprev-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.banprev-stage { background: var(--surface-3); padding: 14px; }
.banprev-meta { padding: 10px 14px 12px; font-size: 12px; line-height: 1.5; border-top: 1px solid var(--line); }
.banprev-meta b { font-size: 13px; }
@media (max-width: 700px) {
  .promotl-row, .promotl-head { grid-template-columns: 120px 1fr; }
  .banprev { grid-template-columns: 1fr; }
}

/* Husté cenové tabulky (Akce a bannery, Omnibus): stovky řádků, takže menší
   padding, menší písmo a název produktu, který nekřičí. Ceny drží tabular-nums,
   aby se číslice svisle zarovnaly a šlo je porovnávat okem. */
.ptable.compact { font-size: 13px; }
.ptable.compact th, .ptable.compact td { padding: 4px 8px; }
.ptable.compact th { font-size: 11px; }
.ptable.compact td { vertical-align: middle; }
.pname { font-weight: 600; }
.pvar { color: var(--muted); font-weight: 400; }
.psku { font-size: 11px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pmoney { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pfrom { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.poff {
  display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 1.5;
  padding: 0 5px; border-radius: 5px; white-space: nowrap;
  background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn-line);
}
.pcell { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .ptable.resp.compact td:first-child { font-size: 13px; }
  .ptable.resp.compact .pcell { justify-content: flex-end; }
}

/* ── Kontrola cen: tabulka odchylek (.patable) ──────────────────────────────
   `.ptable` je `table-layout: fixed`, takže bez colgroup dostane každý sloupec
   stejnou šířku - název produktu se pak láme na čtyři řádky (nahlášeno). Název
   proto bere skoro polovinu a je useknutý na dva řádky (`.topname`); SKU sedí
   pod ním a očekávaná cena pod skutečnou, ať se dvě čísla, která se čtou proti
   sobě, nekoukají přes půl tabulky. */
.patable .pa-c-prod { width: 50%; }
.patable .pa-c-num { width: 14%; }
.patable .pa-c-dev { width: 10%; }
.patable .pa-c-act { width: 12%; }
.patable .pname { line-height: 1.3; }
.patable .psku { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
/* Chybějící SKU je poznámka, ne hodnota - proto BEZ monospace, jinak se „bez SKU"
   čte jako by to byl kód varianty. */
.patable .pa-nosku {
  display: flex; align-items: center; gap: 6px; margin-top: 1px;
  font-size: 11px; font-style: italic; color: var(--muted);
}
.patable td.pa-act { text-align: right; }
/* Zaškrtávátko hromadného výběru stojí VEDLE názvu ve stejné buňce (ve vlastním sloupci
   by z něj mobilní rozpad udělal titulek karty bez textu). `min-width: 0` na textové
   části je povinné: bez něj flexová položka neustoupí pod šířku obsahu a dlouhý název
   rozšíří buňku přes tabulku, takže `-webkit-line-clamp` nemá co ořezávat. */
.patable .pa-prod { display: flex; align-items: flex-start; gap: 8px; }
.patable .pa-prod .pcheck { padding-top: 2px; }
.patable .pa-prodtxt { min-width: 0; flex: 1; }
/* Skutečná a očekávaná cena jsou JEDEN blok pod sebou. V kartovém rozpadu na mobilu
   je `td` flex řádek „popisek : hodnota" - bez tohohle obalu by z nich byly dvě
   samostatné položky vedle sebe a řádek by přetekl z karty. */
.patable .pa-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }

/* Rozdíl proti kurzu: tišší a menší než `.badge`. Pilulka je na KAŽDÉM řádku
   a sto křiklavých plomb pod sebou přebije čísla, kvůli kterým se sem člověk dívá.
   Nulová cena je jediný nález, který si plnou barvu zaslouží. */
.pdev {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.6;
  padding: 0 6px; border-radius: 6px; white-space: nowrap;
  background: var(--danger-soft); color: var(--danger); border: 1px solid var(--err-line);
  font-variant-numeric: tabular-nums;
}
.pdev.zero { background: var(--danger-fill); color: #fff; border-color: transparent; }

/* Pás nad tabulkou: kopírovat / export. Drobný, ať nesoutěží s daty. */
.pa-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pa-barnote { font-size: 12px; }
.pa-note { font-size: 13px; margin: 10px 0 0; }

@media (max-width: 900px) {
  /* V kartovém rozpadu nemá tlačítko popisek, takže by prázdné `::before`
     jen dělalo mezeru. */
  .ptable.resp.patable td.pa-act::before { content: none; }
  .ptable.resp.patable td.pa-act { justify-content: flex-end; }
}

/* Buňka s adresou nebo jiným dlouhým jednořádkovým údajem, která nesmí zvýšit řádek:
   useknout mnohotečkou, celou hodnotu nechat v `title`. V kartovém rozpadu na mobilu
   se naopak zalomí - na šířku karty se mnohotečka nemá kam vejít. */
.tcell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .ptable.resp .tcell { white-space: normal; overflow: visible; } }
/* ── Seznam případů (.ctable): Odstoupení, Kontaktní formulář, Dotaz k produktu ─
   `.ptable` je `table-layout: fixed`, takže bez colgroup dostane každý sloupec
   stejnou šířku - jméno se lámalo na dva řádky, e-mail doprostřed slova na tři
   a vedle zely prázdné sloupce s jedním slovem (nahlášeno). Případ proto bere
   skoro polovinu, zbytek jsou úzké sloupce s krátkými hodnotami.
   Řádek je JEDNOŘÁDKOVÝ ve smyslu skenování: jméno + adresa pod ním, všechno
   ostatní vedle na jedné lince, ať se do okna vejde třikrát tolik případů. */
.ctable .ct-c-case { width: 38%; }
.ctable .ct-c-ctx { width: 22%; }
.ctable .ct-c-when { width: 14%; }
.ctable .ct-c-state { width: 15%; }
.ctable .ct-c-who { width: 11%; }
.ctable td { vertical-align: middle; padding-top: 7px; padding-bottom: 7px; }

/* Zaškrtávátko hromadného výběru stojí VEDLE jména ve stejné buňce (ve vlastním
   sloupci by z něj mobilní rozpad udělal titulek karty bez textu). `min-width: 0`
   na textové části je povinné: bez něj flexová položka neustoupí pod šířku obsahu
   a dlouhý e-mail rozšíří sloupec přes celou tabulku, takže nemá co useknout. */
.ct-case-in { display: flex; align-items: flex-start; gap: 8px; }
.ct-case-in .pcheck { padding-top: 2px; }
.ct-txt { min-width: 0; flex: 1; }
.ct-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ct-name { font-weight: 600; }
.ct-id { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Jazyk podání: dřív se poznal jen z přeloženého titulku případu („Contract
   withdrawal"), který jinak v řádku nemá co dělat. Česká podání pilulku nemají,
   jinak by svítila u každého řádku a nic neříkala. */
.ct-lang {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 0 4px; border-radius: 4px; background: var(--surface-2); color: var(--muted);
}
.ct-mail { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-ctx { font-size: 13px; }
.ct-ctx code { white-space: nowrap; }
.ct-when { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ct-when span { white-space: nowrap; }
/* Den a čas drží pohromadě: v kartovém rozpadu je `td` flex řádek "popisek : hodnota",
   takže bez obalu by se rozutekly ke dvěma protilehlým okrajům karty. */
.ct-dt { display: inline-flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.ct-time { opacity: .75; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* Dlouhá adresa řešitele nesmí zvýšit řádek - celé jméno visí v title. */
.ct-who { font-size: 13px; color: var(--muted); }
.ct-who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-dash { color: var(--muted); opacity: .55; }
/* Doplňková pilulka ke stavu (ověření, po lhůtě). Menší a tišší než `.pbadge`:
   stav případu musí zůstat to hlavní, co v buňce vidím. Ověřeno je schválně
   šedivé - je to normální stav, ne úspěch, o kterém se má křičet. */
.ct-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 1.7;
  padding: 0 6px; border-radius: 5px; white-space: nowrap;
}
.ct-tag.ok { background: var(--surface-2); color: var(--muted); }
.ct-tag.warn { background: var(--warn-soft); color: var(--warn-ink); }
.ct-tag.err { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 900px) {
  /* V kartovém rozpadu je titulkem karty jméno + adresa, takže adresa se smí
     zalomit (na šířku karty se ellipsis nemá kam vejít). */
  .ptable.resp.ctable .ct-mail { white-space: normal; overflow: visible; }
  .ptable.resp.ctable td.ct-state { justify-content: space-between; }
  .ptable.resp.ctable .ct-chips { justify-content: flex-end; }
}

/* ── Recenze z QR kódu: přehled hodnocení (.rvtable) ────────────────────────
   Řádek vede TEXT recenze, protože to je to, co se moderuje. Hvězdy mají vlastní
   úzký sloupec, aby se daly porovnat okem svisle. Recenze i název produktu jsou
   useknuté (`-webkit-line-clamp`), celá hodnota visí v `title`: bez toho jedna
   ukecaná recenze zvedne řádek na osm řádek textu a tabulka se nedá skenovat.
   Buňky jsou zarovnané NAHORU (`.compact` je jinak zarovnává na střed), jinak
   datum u třířádkového názvu produktu plave uprostřed a čte se jako by patřilo
   do sousední buňky. */
.rvtable .rv-c-rev { width: 33%; }
.rvtable .rv-c-stars { width: 7%; }
.rvtable .rv-c-prod { width: 19%; }
.rvtable .rv-c-who { width: 17%; }
.rvtable .rv-c-state { width: 14%; }
.rvtable .rv-c-when { width: 10%; }
.rvtable td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }

/* Zaškrtávátko hromadného výběru stojí VEDLE textu ve stejné buňce (ve vlastním
   sloupci by z něj mobilní rozpad udělal titulek karty bez obsahu). `min-width: 0`
   na textové části je povinné: bez něj flexová položka neustoupí pod šířku obsahu
   a dlouhé slovo rozšíří sloupec přes tabulku, takže clamp nemá co ořezávat. */
.rvtable .rv-rev-in { display: flex; align-items: flex-start; gap: 8px; }
.rvtable .rv-rev-in .pcheck { padding-top: 2px; }
.rvtable .rv-txt { min-width: 0; flex: 1; }
.rv-title {
  font-weight: 650; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-body {
  color: var(--muted); line-height: 1.45; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Hodnocení bez textu je normální stav, ne chyba - proto tiše, kurzívou. */
.rv-empty { color: var(--muted); font-style: italic; opacity: .8; }
.rv-pname {
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-dash { color: var(--muted); opacity: .55; }
.rvtable .rv-stars { white-space: nowrap; }
.rv-name { font-weight: 600; line-height: 1.35; }
/* Dlouhá adresa nesmí zvýšit řádek - celá visí v `title`. */
.rv-mail { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
/* Doplňková informace k odesílateli (kde koupil, souhlas s novinkami). Schválně
   tišší než `.badge`: hlavní je stav a ověření nákupu, tohle se čte až potom. */
.rv-tag {
  display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 1.7;
  padding: 0 6px; border-radius: 5px; max-width: 100%;
  background: var(--surface-2); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-coupon { margin-top: 4px; }
.rv-code { font-size: 11px; white-space: nowrap; }
.rv-when { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Den a čas drží pohromadě a stojí POD SEBOU: na deset procent šířky se vedle sebe
   nevejdou a lámaly se samy, každý k jinému okraji. V kartovém rozpadu je `td` flex
   řádek „popisek : hodnota", takže bez obalu by se rozutekly ke dvěma protilehlým
   okrajům karty - tam se z nich zase stane jeden řádek vpravo. */
.rv-dt { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.rv-dt span { white-space: nowrap; }
.rv-time { opacity: .75; }

@media (max-width: 900px) {
  /* V kartovém rozpadu je titulkem karty text recenze, takže se smí rozbalit celý
     a adresa se smí zalomit (na šířku karty se mnohotečka nemá kam vejít). */
  .ptable.resp.rvtable .rv-title, .ptable.resp.rvtable .rv-body,
  .ptable.resp.rvtable .rv-pname { -webkit-line-clamp: unset; display: block; }
  /* Titulek karty je tučný (základ `.resp`), text recenze pod ním ale ne - jinak
     je celá karta tučná a nepozná se v ní nadpis od těla. */
  .ptable.resp.rvtable .rv-body { font-weight: 400; }
  .ptable.resp.rvtable .rv-mail { white-space: normal; overflow: visible; }
  .ptable.resp.rvtable .rv-chips { justify-content: flex-end; }
  .ptable.resp.rvtable .rv-dt { flex-direction: row; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
  /* Odesílatel i stav jsou VÍCEŘÁDKOVÉ. Bez obalu by z každého řádku byla vlastní
     flex položka a rozutekly by se po kartě - proto jeden blok vpravo vedle popisku. */
  .ptable.resp.rvtable .rv-box { min-width: 0; text-align: right; }
  .ptable.resp.rvtable .rv-box .rv-chips { justify-content: flex-end; }
}

/* ── Návody (/guides) ───────────────────────────────────────────────────────
   Karta = jedno „co dělat, když…". Dlaždice mají pevnou výšku náhledu, ať mřížka
   nevypadá roztrhaně, a celá dlaždice je odkaz (ne jen nadpis). */
.gd-head { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.gd-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 16px; }
.gd-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.gd-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-left-color: var(--accent); }
.gd-card.pin { border-left-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft) 0%, var(--card) 60%); }
.gd-card-h { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.gd-card-h h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.gd-ex { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); flex: 1; }
.gd-card-f { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gd-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.gd-tag {
  display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); color: var(--muted); text-decoration: none;
}
a.gd-tag:hover, .gd-tag.on { background: var(--accent-soft); color: var(--accent-ink); }
.gd-tag i { font-style: normal; opacity: .6; }
.gd-tagbar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.gd-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.gd-src { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); word-break: break-word; }
.gd-io > summary { cursor: pointer; }
.gd-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.gd-body-input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }
.gd-file { margin-bottom: 8px; }

/* Vyrenderovaný text karty. Užší řádek (72 znaků) a větší řádkování - návod se ČTE,
   není to tabulka. Nadpisy uvnitř karty začínají na h2 (h1 je titulek stránky). */
.gd-body { max-width: 72ch; font-size: 14.5px; line-height: 1.7; }
.gd-body h2 { font-size: 17px; margin: 22px 0 8px; }
.gd-body h3 { font-size: 15px; margin: 18px 0 6px; }
.gd-body h4, .gd-body h5 { font-size: 14px; margin: 16px 0 6px; }
.gd-body > :first-child { margin-top: 0; }
.gd-body p { margin: 0 0 12px; }
.gd-body ul, .gd-body ol { margin: 0 0 12px; padding-left: 22px; }
.gd-body li { margin: 4px 0; }
.gd-body blockquote {
  margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text);
}
.gd-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.gd-body pre.codebox { margin: 0 0 12px; }
.gd-body hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.gd-box { color: var(--muted); }
.gd-box.on { color: var(--ok-ink); }
@media (max-width: 700px) {
  .gd-row { grid-template-columns: 1fr; }
  .gd-grid { grid-template-columns: 1fr; }
}

/* Rychlé odpovědi (/stores/:id/quick-replies): PŘEHLED = seznam řádků, text až po
   rozkliknutí. Jazyk a Kopírovat sedí přímo v řádku, aby se běžný případ obešel bez
   rozbalování. Text zalamuje (na rozdíl od pre.codebox, který je na kód). */
.qr-list { display: flex; flex-direction: column; gap: 10px; }
.qr-list .card { margin: 0; padding: 0; }
.qr-sum {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.qr-sum::-webkit-details-marker { display: none; }
.qr-sum::before {
  content: "▸"; color: var(--muted); font-size: 12px; flex: none;
  transition: transform .15s ease;
}
.qr-card[open] > .qr-sum::before { transform: rotate(90deg); }
.qr-sum:hover { background: var(--hover); border-radius: var(--radius-sm); }
.qr-title { font-weight: 600; font-size: 14.5px; flex: 1 1 240px; min-width: 0; }
.qr-scope { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.qr-sum .qr-lang { margin: 0; gap: 4px; }
.qr-sum .qr-lang a { padding: 3px 9px; font-size: 11.5px; }
.qr-copy { flex: none; padding: 6px 14px; }
.qr-body {
  margin: 0 16px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.qr-langgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.qr-summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
@media (max-width: 700px) {
  .qr-title { flex-basis: 100%; }
  .qr-langgrid { grid-template-columns: 1fr; }
}