/* PrivATE P-AileR — sdílené styly (paleta, layout, komponenty)
   Načítané ze všech UI obrazovek (index.php, kontakty.php, ftp.php).
   Stránkově specifické styly zůstávají v jednotlivých PHP souborech.

   Vizuální jazyk převzatý z veřejné prezentace (pailer.cz, index3): font Sora
   (+ JetBrains Mono na technické akcenty), modrá #4361ee s gradientem do
   #5e7bff, tmavě modrý (navy) sidebar jako hero prezentace, jemné vrstvené
   stíny, měkčí radiusy. Architektura světlé/tmavé palety (data-tema +
   prefers-color-scheme) zůstává zachována — design funguje v obou režimech. */

/* Fonty Sora + JetBrains Mono — od 2.29.0 hostované LOKÁLNĚ (assets/fonty/,
   stejné woff2 jako na prezentaci). Dřívější @import z fonts.googleapis.com byl
   poslední externí závislost aplikace a posílal IP každého návštěvníka Googlu
   (GDPR). system-ui fallback pro případ nedostupných souborů zůstává. */
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonty/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonty/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Paleta — světlé téma (default) ===== */
:root {
    --bg: #f5f6fb;
    --card: #ffffff;
    --card-alt: #f0f3fb;
    --border: #e6e9f2;
    --border-strong: #d3dbf0;
    --text: #3a4256;
    --text-muted: #5b6377;
    --heading: #0f1320;
    --primary: #4361ee;
    --primary-hover: #3550d6;
    --primary-soft: #eef2ff;
    --primary-strong: #2f44c4;
    /* Barva odkazů v obsahu (2.30.0) — bez ní platil výchozí prohlížečový
       odstín, který v tmavém tématu skoro nebyl vidět. Ve světlém = primary,
       tmavé téma ji přebíjí světlejší modří (viz tmavé bloky níže). */
    --odkaz: var(--primary);
    --odkaz-hover: var(--primary-hover);
    --gray: #646d82;
    --gray-hover: #4b5468;
    --success: #10b981;
    --success-hover: #059669;
    --danger: #e11d48;
    --danger-hover: #be123c;
    --warning: #f59e0b;
    --warning-hover: #d97706;
    --ok-bg: #e6f7f0; --ok-text: #0c6b47;
    --err-bg: #fdeceb; --err-text: #a32e27;
    --info-bg: #fff7e6; --info-text: #92560a;
    --pending-bg: #fff7e6; --pending-text: #92560a;
    --sending-bg: #eef2ff; --sending-text: #2f44c4;
    --sent-bg: #e6f7f0; --sent-text: #0c6b47;
    --failed-bg: #fff1e6; --failed-text: #9a4a12;
    --perm-bg: #fdeceb; --perm-text: #a32e27;
    --cancel: #646d82;
    --progress-bg: #e7eaf3;
    /* Stíny — měkké a vrstvené (paleta inkoust rgba(14,20,36)). */
    --stin: 0 1px 2px rgba(14,20,36,.05), 0 4px 12px rgba(14,20,36,.06);
    --stin-lift: 0 4px 10px rgba(14,20,36,.05), 0 14px 34px rgba(14,20,36,.12);
    --stin-modal: 0 20px 50px rgba(14,20,36,.22);
    --overlay: rgba(14,20,36,.55);
    --ring: 0 0 0 4px rgba(67,97,238,.18);
    /* Brandový gradient — primární tlačítka, aktivní nav, akcenty. */
    --gr-primary: linear-gradient(135deg, #4361ee 0%, #5e7bff 100%);
    --gr-primary-hover: linear-gradient(135deg, #3550d6 0%, #4f6bff 100%);
    --shadow-primary: 0 8px 20px rgba(67,97,238,.30);
    --shadow-primary-lift: 0 14px 30px rgba(67,97,238,.42);
    --font: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display',
            'Segoe UI', Roboto, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --radius: 16px;
    --radius-sm: 11px;
    --sidebar-w: 220px;
    /* Sidebar — ve světlém tématu světlý (bílá s jemným nádechem do modra),
       navy gradient hero má jen tmavé téma (bloky níže). */
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f4f6ff 100%);
    --sidebar-text: var(--text);
    --sidebar-text-strong: var(--heading);
    --sidebar-muted: var(--text-muted);
    --sidebar-border: var(--border);
    --sidebar-hover: var(--primary-soft);
    --sidebar-hover-text: var(--primary-strong);
    --sidebar-akcent: var(--primary);
    --sidebar-btn-bg: transparent;
    --sidebar-active-glow: var(--shadow-primary);
    /* Aliasy pro login obrazovku — login UI používá zjednodušenou paletu. */
    --danger-bg: var(--err-bg);
    --danger-text: var(--err-text);
}

/* ===== Tmavé téma — auto (prefers-color-scheme) ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="svetly"]) {
        --bg: #0a0e24;
        --card: #121936;
        --card-alt: #0d1229;
        --border: #263056;
        --border-strong: #39436a;
        --text: #d7ddf0;
        --text-muted: #9aa6c4;
        --heading: #ffffff;
        --primary: #5e7bff;
        --primary-hover: #7d93ff;
        --primary-soft: #1e2b57;
        --primary-strong: #a9bcff;
        /* Odkazy světlejší než --primary — na navy kartách musí být čitelné. */
        --odkaz: #8ba0ff;
        --odkaz-hover: #b4c3ff;
        --gray: #39436a;
        --gray-hover: #4d588a;
        --success: #34d399;
        --success-hover: #10b981;
        --danger: #f87171;
        --danger-hover: #ef4444;
        --warning: #fbbf24;
        --warning-hover: #f59e0b;
        --ok-bg: #0d3b2e; --ok-text: #6ee7b7;
        --err-bg: #3f1d22; --err-text: #fca5a5;
        --info-bg: #3a2b0a; --info-text: #fcd34d;
        --pending-bg: #3a2b0a; --pending-text: #fcd34d;
        --sending-bg: #1e2b57; --sending-text: #bcc8ff;
        --sent-bg: #0d3b2e; --sent-text: #6ee7b7;
        --failed-bg: #3f2a12; --failed-text: #fdba74;
        --perm-bg: #3f1d22; --perm-text: #fca5a5;
        --cancel: #9aa6c4;
        --progress-bg: #283150;
        --stin: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);
        --stin-lift: 0 6px 16px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.5);
        --stin-modal: 0 20px 50px rgba(0,0,0,.6);
        --overlay: rgba(3,6,15,.7);
        --ring: 0 0 0 4px rgba(94,123,255,.30);
        --gr-primary: linear-gradient(135deg, #4361ee 0%, #5e7bff 100%);
        --gr-primary-hover: linear-gradient(135deg, #5468ff 0%, #7d93ff 100%);
        --shadow-primary: 0 8px 22px rgba(67,97,238,.45);
        --shadow-primary-lift: 0 14px 32px rgba(67,97,238,.55);
        /* Sidebar — navy gradient jako hero prezentace (jen tmavé téma). */
        --sidebar-bg: linear-gradient(180deg, #0a0f2e 0%, #141a5c 62%, #1d2f9e 100%);
        --sidebar-text: rgba(255,255,255,.72);
        --sidebar-text-strong: #fff;
        --sidebar-muted: rgba(255,255,255,.48);
        --sidebar-border: rgba(255,255,255,.14);
        --sidebar-hover: rgba(255,255,255,.09);
        --sidebar-hover-text: #fff;
        --sidebar-akcent: #8ba0ff;
        --sidebar-btn-bg: rgba(255,255,255,.06);
        --sidebar-active-glow: 0 0 22px rgba(94,123,255,.55);
    }
}

/* ===== Tmavé téma — explicitní volba uživatele ===== */
:root[data-tema="tmavy"] {
    --bg: #0a0e24;
    --card: #121936;
    --card-alt: #0d1229;
    --border: #263056;
    --border-strong: #39436a;
    --text: #d7ddf0;
    --text-muted: #9aa6c4;
    --heading: #ffffff;
    --primary: #5e7bff;
    --primary-hover: #7d93ff;
    --primary-soft: #1e2b57;
    --primary-strong: #a9bcff;
    /* Odkazy světlejší než --primary — na navy kartách musí být čitelné. */
    --odkaz: #8ba0ff;
    --odkaz-hover: #b4c3ff;
    --gray: #39436a;
    --gray-hover: #4d588a;
    --success: #34d399;
    --success-hover: #10b981;
    --danger: #f87171;
    --danger-hover: #ef4444;
    --warning: #fbbf24;
    --warning-hover: #f59e0b;
    --ok-bg: #0d3b2e; --ok-text: #6ee7b7;
    --err-bg: #3f1d22; --err-text: #fca5a5;
    --info-bg: #3a2b0a; --info-text: #fcd34d;
    --pending-bg: #3a2b0a; --pending-text: #fcd34d;
    --sending-bg: #1e2b57; --sending-text: #bcc8ff;
    --sent-bg: #0d3b2e; --sent-text: #6ee7b7;
    --failed-bg: #3f2a12; --failed-text: #fdba74;
    --perm-bg: #3f1d22; --perm-text: #fca5a5;
    --cancel: #9aa6c4;
    --progress-bg: #283150;
    --stin: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);
    --stin-lift: 0 6px 16px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.5);
    --stin-modal: 0 20px 50px rgba(0,0,0,.6);
    --overlay: rgba(3,6,15,.7);
    --ring: 0 0 0 4px rgba(94,123,255,.30);
    --gr-primary: linear-gradient(135deg, #4361ee 0%, #5e7bff 100%);
    --gr-primary-hover: linear-gradient(135deg, #5468ff 0%, #7d93ff 100%);
    --shadow-primary: 0 8px 22px rgba(67,97,238,.45);
    --shadow-primary-lift: 0 14px 32px rgba(67,97,238,.55);
    /* Sidebar — navy gradient jako hero prezentace (jen tmavé téma). */
    --sidebar-bg: linear-gradient(180deg, #0a0f2e 0%, #141a5c 62%, #1d2f9e 100%);
    --sidebar-text: rgba(255,255,255,.72);
    --sidebar-text-strong: #fff;
    --sidebar-muted: rgba(255,255,255,.48);
    --sidebar-border: rgba(255,255,255,.14);
    --sidebar-hover: rgba(255,255,255,.09);
    --sidebar-hover-text: #fff;
    --sidebar-akcent: #8ba0ff;
    --sidebar-btn-bg: rgba(255,255,255,.06);
    --sidebar-active-glow: 0 0 22px rgba(94,123,255,.55);
}

/* ===== Klasik — původní vzhled (stavy „St. světlé" / „St. tmavé" přepínače) =====
   Bez data-vzhled platí nový vzhled podle prezentace; s data-vzhled="klasik"
   se paleta, font, radiusy i sidebar vrátí k původní podobě. Přepíná
   prepniTema() v app.js (klíč localStorage 'mailer_vzhled'). */
:root[data-vzhled="klasik"] {
    --bg: #fbfcff;
    --card-alt: #f3f5fc;
    --border: #e7eaf3;
    --text-muted: #646d82;
    --heading: #0e1424;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display',
            'Segoe UI', Roboto, system-ui, sans-serif;
    --radius: 14px;
    --radius-sm: 10px;
    --sidebar-bg: var(--card);
    --sidebar-text: var(--text);
    --sidebar-text-strong: var(--heading);
    --sidebar-muted: var(--text-muted);
    --sidebar-border: var(--border);
    --sidebar-hover: var(--primary-soft);
    --sidebar-hover-text: var(--primary-strong);
    --sidebar-akcent: var(--primary);
    --sidebar-btn-bg: transparent;
    --sidebar-active-glow: var(--shadow-primary);
}
:root[data-vzhled="klasik"][data-tema="tmavy"] {
    --bg: #0b1020;
    --card: #161d33;
    --card-alt: #11172a;
    --border: #283150;
    --heading: #f4f6fc;
}
/* Pojistka: klasik + auto téma (bez data-tema) v systémovém dark módu
   dostane původní tmavou paletu, ne novou navy. */
@media (prefers-color-scheme: dark) {
    :root[data-vzhled="klasik"]:not([data-tema="svetly"]) {
        --bg: #0b1020;
        --card: #161d33;
        --card-alt: #11172a;
        --border: #283150;
        --heading: #f4f6fc;
    }
}
/* Klasik detaily: podtitulek brandu bez mono fontu, původní prostrkání h1. */
:root[data-vzhled="klasik"] .sidebar-brand small {
    font-family: inherit;
    font-size: .7em;
    color: var(--text-muted);
    letter-spacing: .06em;
}
:root[data-vzhled="klasik"] h1 { letter-spacing: -.02em; }

/* ===== Base ===== */
* { box-sizing: border-box; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02','cv03','cv04','cv11';
}
h1, h2, h3, h4 { color: var(--heading); letter-spacing: -.02em; line-height: 1.2; }
h1 { letter-spacing: -.03em; }
small { color: var(--text-muted); font-weight: normal; }
code, kbd, pre { font-family: var(--font-mono); font-size: .93em; }
/* Odkazy v obsahu (2.30.0) — do teď bez pravidla, takže platila výchozí
   prohlížečová modř, v tmavém tématu skoro neviditelná. Barva z palety
   (--odkaz, per téma); specifičtější pravidla (sidebar, .btn, tabulky
   s vlastní barvou) tímhle zůstávají nedotčená. */
a { color: var(--odkaz); }
a:hover { color: var(--odkaz-hover); }

/* ===== Layout — sidebar vlevo, hlavní obsah vpravo ===== */
.layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}
/* B5/3: trvalý pruh „účet pozastaven" — první potomek .layout, roztažený přes
   oba sloupce (vlastní řádek nad sidebarem i obsahem). Vykresluje render_sidebar()
   jen pozastavenému klientovi. */
.ucet-pozastaven-pruh {
    grid-column: 1 / -1;
    background: var(--err-bg);
    color: var(--err-text);
    border-bottom: 2px solid var(--danger);
    padding: .7em 1.4em;
    font-size: .95em;
    line-height: 1.5;
}
.ucet-pozastaven-pruh strong { color: var(--danger); margin-right: .3em; }
.ucet-pozastaven-pruh a { color: inherit; font-weight: 600; }
/* Impersonace (2.19.0) — varovný pruh „prohlížíte očima klienta", stejné
   umístění jako pruh pozastaveného účtu. Výrazná varovná barva: vlastník
   nesmí přehlédnout, že vidí cizí data (read-only režim). */
.impersonace-pruh {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .8em;
    flex-wrap: wrap;
    background: var(--info-bg);
    color: var(--info-text);
    border-bottom: 2px solid var(--warning);
    padding: .7em 1.4em;
    font-size: .95em;
    line-height: 1.5;
}
.impersonace-pruh .impersonace-text { flex: 1; }
.impersonace-pruh strong { color: inherit; }
.impersonace-konec { margin: 0; }
.impersonace-konec button {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    padding: .25em .8em;
    font: inherit;
    font-size: .9em;
    cursor: pointer;
    white-space: nowrap;
}
.impersonace-konec button:hover { background: var(--warning); color: #fff; }
/* Oznámení klientům (2.17.0) — pruh nad aplikací, stejné umístění jako pruh
   pozastaveného účtu; barvu řídí modifikátor -info / -vystraha. Panel
   Systém → Oznámení klientům ho používá i jako náhled (.oznameni-nahled). */
.oznameni-pruh {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: .8em;
    padding: .7em 1.4em;
    font-size: .95em;
    line-height: 1.5;
}
.oznameni-pruh .oznameni-text { flex: 1; }
.oznameni-info {
    background: var(--info-bg);
    color: var(--info-text);
    border-bottom: 2px solid color-mix(in srgb, var(--info-text) 45%, transparent);
}
.oznameni-vystraha {
    background: var(--err-bg);
    color: var(--err-text);
    border-bottom: 2px solid var(--danger);
}
.oznameni-zavrit {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25em;
    line-height: 1;
    cursor: pointer;
    padding: 0 .15em;
    opacity: .65;
}
.oznameni-zavrit:hover { opacity: 1; }
.oznameni-nahled {
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    margin-bottom: 1em;
}
.oznameni-nahled .oznameni-zavrit { cursor: default; }
/* Kontextová nápověda (2.23.0) — malý kroužek „?" vedle nadpisu či popisku,
   odkazuje na napoveda.php#kotva příslušné sekce. Záměrně decentní (šedý
   obrys, do modra až na najetí); barvy jen z proměnných palety, takže funguje
   ve světlém i tmavém tématu. Používat střídmě — jen kde má klient co hledat. */
a.napoveda-otaznik {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin-left: .35em;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--card-alt);
    color: var(--text-muted);
    font-size: .8em;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    vertical-align: text-top;
}
a.napoveda-otaznik:hover,
a.napoveda-otaznik:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    text-decoration: none;
}
.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding: 1.5em 1em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar-brand {
    font-size: 1.05em;
    font-weight: 800;
    padding: 0 .8em;
    letter-spacing: -.02em;
    color: var(--sidebar-text-strong);
}
.sidebar-brand small {
    display: block;
    font-family: var(--font-mono);
    font-size: .68em;
    font-weight: 600;
    color: var(--sidebar-akcent);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: .25em;
}
.sidebar-nav { display: flex; flex-direction: column; gap: .15em; flex: 1; }
.sidebar-nav a {
    padding: .6em .9em;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 500;
    font-size: .92em;
    display: flex;
    align-items: center;
    gap: .6em;
    transition: background .15s, color .15s;
}
.sidebar-nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-hover-text); }
.sidebar-nav a.active {
    background: var(--gr-primary);
    color: #fff;
    box-shadow: var(--sidebar-active-glow);
}
.sidebar-nav a.active:hover { color: #fff; }
.sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Submenu — podsekce pod aktivním modulem. Server-side render: zobrazí se
   jen pro modul, na kterém uživatel je. Žádný JS toggle. */
.sidebar-submenu {
    list-style: none;
    padding: .2em 0 .4em 2.1em;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .05em;
}
.sidebar-submenu li { margin: 0; }
.sidebar-submenu a {
    display: block;
    padding: .35em .7em;
    border-radius: var(--radius-sm);
    color: var(--sidebar-muted);
    text-decoration: none;
    font-size: .87em;
    font-weight: 400;
    transition: background .15s, color .15s;
}
.sidebar-submenu a:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-hover-text);
}
/* 2.47.2: zvýrazněná položka submenu (Administrace → Klienti). Barvu drží
   i po najetí myší, aby zvýraznění nezmizelo právě ve chvíli, kdy na položku
   míříš.
   Cílí DVĚMA způsoby schválně:
     a) třídou 'duraz' (nastavuje ji 'trida' => 'duraz' v sidebar.php) —
        obecný mechanismus použitelný na kteroukoli položku submenu,
     b) přímo podle adresy odkazu — tahle větev funguje i tam, kde běží starší
        sidebar.php (např. dokud server drží zkompilovanou verzi v OPcache),
        protože ke svému účinku potřebuje jen tenhle CSS soubor. */
.sidebar-submenu a.duraz,
.sidebar-submenu a.duraz:hover,
.sidebar-submenu a[href$="#klienti-panel"],
.sidebar-submenu a[href$="#klienti-panel"]:hover {
    color: var(--danger);
    font-weight: 600;
}
.sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: .35em;
    padding-top: .8em;
    border-top: 1px solid var(--sidebar-border);
}
.sidebar-foot small { color: var(--sidebar-muted); font-size: .75em; padding: 0 .9em .3em; }
/* Právní odkazy v patičce (2.13.0) — tlumená barva místo výchozí modré,
   která v tmavém sidebaru nesedí. */
.sidebar-foot .pravni-odkazy { display: block; }
.sidebar-foot .pravni-odkazy a { color: var(--sidebar-muted); text-decoration: underline; }
.sidebar-foot .pravni-odkazy a:hover { color: var(--sidebar-text); }
.sidebar-foot .akce-radek { display: flex; gap: .35em; }
.sidebar-foot .akce-radek > * { flex: 1; }
.sidebar-foot button {
    width: 100%;
    padding: .5em .8em;
    background: var(--sidebar-btn-bg);
    color: var(--sidebar-text);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    font-size: .85em;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    margin: 0;
    font-weight: 500;
    box-shadow: none;
    transition: background .15s, border-color .15s, color .15s;
}
.sidebar-foot button:hover {
    background: var(--sidebar-hover);
    border-color: var(--sidebar-akcent);
    color: var(--sidebar-hover-text);
    transform: none;
    box-shadow: none;
}
.sidebar-foot button svg { width: 14px; height: 14px; }
.sidebar-foot form { background: transparent; padding: 0; box-shadow: none; margin: 0; border-radius: 0; }

/* ===== Widget běžící kampaně v sidebaru (varianta C — gradientová karta) =====
   Naplňuje a aktualizuje ho app.js přes endpoint index.php?fronta_stav_json=1.
   Sedí nad patičkou (sidebar-nav má flex:1 a stlačí ho dolů). Když se nic
   neodesílá, kontejner je [hidden]. Smysl: živý stav rozesílky BEZ celostránkového
   refreshe — uživatel může dál psát další kampaň. */
.kampan-widget { display: block; }
.kampan-widget[hidden] { display: none; }

.kw-karta {
    display: block;
    text-decoration: none;
    border-radius: var(--radius);
    padding: .85em .85em .8em;
    position: relative;
    overflow: hidden;
    background: var(--gr-primary);
    box-shadow: var(--shadow-primary);
    color: #fff;
    transition: box-shadow .2s, transform .2s;
}
.kw-karta:hover { box-shadow: var(--shadow-primary-lift); transform: translateY(-1px); }
/* Jemný světelný kruh v rohu — „prémiový" dojem varianty C. */
.kw-karta::before {
    content: ''; position: absolute; top: -40%; right: -20%;
    width: 130px; height: 130px; border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}
.kw-hlav { display: flex; align-items: center; gap: .5em; margin-bottom: .25em; position: relative; }
.kw-stitek {
    font-size: .68em; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.kw-nazev {
    font-weight: 700; font-size: .9em; margin-bottom: .7em; position: relative;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kw-drazka {
    height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .28);
    overflow: hidden; position: relative;
}
.kw-plneni {
    height: 100%; width: 0; border-radius: 999px; background: #fff;
    position: relative; overflow: hidden;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
/* Lesklý přejezd po pruhu — působí, že se „odesílá". */
.kw-plneni::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(67, 97, 238, .5), transparent);
    animation: kw-shimmer 1.8s infinite;
}
.kw-dole {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: .65em; position: relative;
}
.kw-pocet { font-size: .92em; font-weight: 800; }
.kw-eta { font-size: .76em; color: rgba(255, 255, 255, .85); font-weight: 600; }
.kw-vic { font-size: .72em; color: var(--sidebar-muted); text-align: center; margin-top: .5em; font-weight: 600; }

/* Pulzující „živě" tečka. */
.kw-tecka {
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    position: relative; flex: 0 0 auto;
}
.kw-tecka::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    background: #fff; opacity: .35; animation: kw-puls 1.6s ease-out infinite;
}
@keyframes kw-puls { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes kw-shimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
/* Zarovnaná čísla (neposkakují při změně číslic). */
.cislo { font-variant-numeric: tabular-nums; }
/* Ohleduplnost k uživatelům, co nechtějí animace. */
@media (prefers-reduced-motion: reduce) {
    .kw-plneni::after, .kw-tecka::after { animation: none; }
    .kw-karta { transition: none; }
}
/* Na mobilním baru (sidebar = horní lišta) se karta nevejde — schováme ji. */
@media (max-width: 720px) { .kampan-widget { display: none; } }

/* ===== Hlavní obsah (wrapper kolem stránkového obsahu) ===== */
.hlavni { padding: 2em 2.5em; max-width: 920px; margin: 0 auto; width: 100%; }
.hlavni-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.5em;
    gap: 1em;
    flex-wrap: wrap;
}
.hlavni-head h1 { margin: 0; font-size: 1.7em; font-weight: 800; }
.hlavni-head small { color: var(--text-muted); font-size: .85em; }

/* ===== Panel — sdílený obal pro kartu/sekci ===== */
.panel {
    background: var(--card);
    padding: 1.5em;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    margin-bottom: 1em;
}

/* ===== Hlášky (status banner) ===== */
.ok   { background: var(--ok-bg);   color: var(--ok-text);   border: 1px solid color-mix(in srgb, var(--ok-text) 22%, transparent);   padding: 1em; border-radius: var(--radius-sm); margin-bottom: 1em; }
.err  { background: var(--err-bg);  color: var(--err-text);  border: 1px solid color-mix(in srgb, var(--err-text) 22%, transparent);  padding: 1em; border-radius: var(--radius-sm); margin-bottom: 1em; }
.info { background: var(--info-bg); color: var(--info-text); border: 1px solid color-mix(in srgb, var(--info-text) 20%, transparent); padding: .8em; border-radius: var(--radius-sm); margin-bottom: 1em; font-size: .9em; }

/* ===== Formulářové prvky (base) ===== */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], textarea, select {
    width: 100%;
    padding: .65em .85em;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1em;
    background: var(--card);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .8; }
input[type="file"] { font-family: inherit; font-size: .95em; color: var(--text); }
textarea { resize: vertical; }

/* ===== Tlačítka (base) — gradient + lift jako na prezentaci =====
   Brandová identita primárního tlačítka je v gradientovém POZADÍ, ne v barevném
   stínu. Stín na hoveru je proto neutrální — aby se barevný glow nepropisoval na
   utilitní tlačítka (Edit, +, Test), která si v stránkových stylech přebíjejí
   pozadí na šedou/zelenou, ale dědí stín z base. */
button, .btn {
    padding: .6em 1.3em;
    background: var(--gr-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .95em;
    font-family: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    justify-content: center;
    text-decoration: none;
    box-shadow: none;
    transition: background .15s, transform .15s, box-shadow .15s;
}
button:hover, .btn:hover {
    background: var(--gr-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--stin-lift);
}
button:active, .btn:active { transform: translateY(0); box-shadow: var(--stin); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--ring); }
button svg, .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Tlačítkové varianty — plné barvy se sémantikou stavu (stín dědí z base hoveru). */
.btn-sm   { padding: .35em .8em; font-size: .85em; margin: 0; }
.btn-red,    button.btn-red    { background: var(--danger); }
.btn-red:hover, button.btn-red:hover { background: var(--danger-hover); }
.btn-gray,   button.btn-gray   { background: var(--gray); }
.btn-gray:hover, button.btn-gray:hover { background: var(--gray-hover); }
.btn-green,  button.btn-green  { background: var(--success); }
.btn-green:hover, button.btn-green:hover { background: var(--success-hover); }
/* Černá varianta — odlišení akcí se zvláštní vahou (např. „Zobrazit jako klient"
   v administraci vedle šedého „Spravovat"). */
.btn-black,  button.btn-black  { background: #16181d; color: #fff; border: 1px solid transparent; }
.btn-black:hover, button.btn-black:hover { background: #2e323c; }
/* Tmavé téma: černá by na navy kartách zanikla — světlý rámeček ji zvedne. */
:root[data-tema="tmavy"] .btn-black,
:root[data-tema="tmavy"] button.btn-black { border-color: rgba(255,255,255,.45); }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="svetly"]) .btn-black,
    :root:not([data-tema="svetly"]) button.btn-black { border-color: rgba(255,255,255,.45); }
}

/* ===== Tabulky (base) ===== */
table { width: 100%; border-collapse: collapse; }

/* ===== Mobile breakpoint — sidebar collapse na horní bar ===== */
@media (max-width: 720px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar {
        position: static;
        height: auto;
        overflow: visible;
        flex-direction: row;
        align-items: center;
        padding: .7em 1em;
        gap: .6em;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .sidebar-brand { flex: 1; padding: 0; font-size: 1em; min-width: 0; }
    .sidebar-brand small { display: none; }
    .sidebar-nav { flex-direction: row; flex: none; gap: .3em; }
    .sidebar-nav a { padding: .4em .6em; font-size: .85em; }
    /* Na mobilu se sidebar smrští na horní bar — submenu by se sem nevešlo,
       skryjeme ho. Uživatel se na podsekci dostane po scrollování na stránku. */
    .sidebar-submenu { display: none; }
    .sidebar-foot {
        flex-direction: row;
        flex: none;
        padding: 0;
        border: none;
        gap: .35em;
        align-items: center;
    }
    .sidebar-foot .akce-radek { display: contents; }
    .sidebar-foot button { padding: .4em .65em; font-size: .8em; width: auto; }
    .hlavni { padding: 1.2em 1em; }
}

/* ===== Login obrazovka (zjednodušený layout bez sidebaru) ===== */
.login-wrap { max-width: 380px; margin: 5em auto; padding: 0 1em; }
.login-wrap h1 { font-size: 1.4em; margin: 0 0 .6em; }

/* Navy gradient pozadí přihlašování — stejné jako hero prezentace.
   Vše gated přes :has(): starší prohlížeč zůstane u běžného tématu.
   V klasik vzhledu se nepoužije (login vypadá jako dřív). */
:root:not([data-vzhled="klasik"]) body:has(> .login-wrap) {
    background: linear-gradient(165deg, #0a0f2e 0%, #141a5c 48%, #2036b8 100%);
    background-attachment: fixed;
}
:root:not([data-vzhled="klasik"]) body:has(> .login-wrap) .login-wrap h1 {
    color: #fff;
    text-align: center;
    letter-spacing: -.03em;
}
:root:not([data-vzhled="klasik"]) body:has(> .login-wrap) .login-wrap .panel {
    box-shadow: 0 20px 50px rgba(5, 8, 24, .45);
    border-color: rgba(255, 255, 255, .14);
}
.login-wrap .panel label {
    display: block;
    margin-bottom: .8em;
    font-weight: 600;
    color: var(--text-muted);
}
.login-wrap .panel button { width: 100%; margin-top: .5em; }

/* ===== Quill WYSIWYG editor =====
   Snow theme přepisujeme na barvy z palety, ať se chová stejně v dark/light. */
#quill-wrap {
    background: var(--input-bg, var(--card));
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
#quill-wrap .ql-toolbar.ql-snow,
#quill-wrap .ql-container.ql-snow {
    border-color: var(--border);
}
#quill-wrap .ql-toolbar.ql-snow {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    background: var(--card-alt);
}
#quill-wrap .ql-container.ql-snow {
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    min-height: 320px;
    font-size: 1em;
}
#quill-wrap .ql-editor {
    min-height: 320px;
    color: var(--text);
}
#quill-wrap .ql-editor.ql-blank::before {
    color: var(--text-muted);
    font-style: normal;
}
/* Tmavý režim — Quill default ikony jsou tmavé, invertujeme stroke/fill.
   Zapojeno pro oba zdroje tmavého tématu (explicitní data-tema i auto). */
[data-tema="tmavy"] #quill-wrap .ql-snow .ql-stroke { stroke: var(--text); }
[data-tema="tmavy"] #quill-wrap .ql-snow .ql-fill,
[data-tema="tmavy"] #quill-wrap .ql-snow .ql-stroke.ql-fill { fill: var(--text); }
[data-tema="tmavy"] #quill-wrap .ql-snow .ql-picker { color: var(--text); }
[data-tema="tmavy"] #quill-wrap .ql-snow .ql-picker-options {
    background: var(--card);
    border-color: var(--border);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="svetly"]) #quill-wrap .ql-snow .ql-stroke { stroke: var(--text); }
    :root:not([data-tema="svetly"]) #quill-wrap .ql-snow .ql-fill,
    :root:not([data-tema="svetly"]) #quill-wrap .ql-snow .ql-stroke.ql-fill { fill: var(--text); }
    :root:not([data-tema="svetly"]) #quill-wrap .ql-snow .ql-picker { color: var(--text); }
    :root:not([data-tema="svetly"]) #quill-wrap .ql-snow .ql-picker-options {
        background: var(--card);
        border-color: var(--border);
    }
}