/* qrlink – styl. Mobile-first, světlý i tmavý režim podle systému. */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Variable.woff2") format("woff2"), url("../fonts/Manrope-Variable.ttf") format("truetype");
    font-weight: 200 800;
    font-display: block; /* v162: dřív swap = při každém načtení nejdřív náhradní písmo a pak přeskok (stránka „dvakrát blikla“); písmo je předem načtené (preload v head.php) */
}

:root {
    --bg: #EEF2EF;
    --surface: #FFFFFF;
    --surface-2: #F5F8F6;
    --ink: #17232A;
    --ink-2: #53636B;
    --line: #DAE2DD;
    --line-strong: #BCC9C2;
    --brand: #1D6B64;
    --brand-hover: #165850;
    --brand-soft: #DDEDE9;
    --on-brand: #FFFFFF;
    --warn-bg: #FBEEDA;
    --warn-ink: #7A4E0B;
    --danger: #B4473E;
    --danger-bg: #F8E4E1;
    --ok-bg: #DFF0E6;
    --ok-ink: #1E5C3A;
    --info-bg: #E2ECF3;
    --info-ink: #24506E;
    --focus: #E2A23B;
    --plate-a: #F7F9F8;
    --plate-b: #DCE3E0;
    --plate-edge: #C3CDC8;
    --plate-text: #5E6C68;
    --plate-shine: #FFFFFF;
    --logo-hole: var(--surface);
    --radius-s: 8px;
    --radius: 12px;
    --radius-l: 20px;
    --shadow: 0 1px 2px rgba(23, 35, 42, .06), 0 6px 20px -8px rgba(23, 35, 42, .14);
    --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #131918;
        --surface: #1B2322;
        --surface-2: #212B29;
        --ink: #E3EBE8;
        --ink-2: #9BACA6;
        --line: #2C3836;
        --line-strong: #3E4D4A;
        --brand: #5DB4A9;
        --brand-hover: #79C6BB;
        --brand-soft: #1E3431;
        --on-brand: #0B1615;
        --warn-bg: #3A2F1C;
        --warn-ink: #F0C27A;
        --danger: #E58176;
        --danger-bg: #3B2421;
        --ok-bg: #1C3326;
        --ok-ink: #8FD3A8;
        --info-bg: #1D2D38;
        --info-ink: #9CC6E3;
        --plate-a: #36403E;
        --plate-b: #252E2C;
        --plate-edge: #46524F;
        --plate-text: #AEBBB7;
        --plate-shine: rgba(255, 255, 255, .08);
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -10px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #131918;
    --surface: #1B2322;
    --surface-2: #212B29;
    --ink: #E3EBE8;
    --ink-2: #9BACA6;
    --line: #2C3836;
    --line-strong: #3E4D4A;
    --brand: #5DB4A9;
    --brand-hover: #79C6BB;
    --brand-soft: #1E3431;
    --on-brand: #0B1615;
    --warn-bg: #3A2F1C;
    --warn-ink: #F0C27A;
    --danger: #E58176;
    --danger-bg: #3B2421;
    --ok-bg: #1C3326;
    --ok-ink: #8FD3A8;
    --info-bg: #1D2D38;
    --info-ink: #9CC6E3;
    --plate-a: #36403E;
    --plate-b: #252E2C;
    --plate-edge: #46524F;
    --plate-text: #AEBBB7;
    --plate-shine: rgba(255, 255, 255, .08);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -10px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* --- Základ -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    font-feature-settings: "tnum" 0;
    -webkit-font-smoothing: antialiased;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: 1.75rem; font-weight: 750; }
h2 { font-size: 1.0625rem; font-weight: 700; margin-bottom: .875rem; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: .18em; }
a:hover { color: var(--brand-hover); }

img { max-width: 100%; display: block; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.block { display: block; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    left: 12px; top: -60px;
    background: var(--surface);
    padding: 8px 14px;
    border-radius: var(--radius-s);
    z-index: 100;
}
.skip:focus { top: 12px; }

.logo-mark { width: 1em; height: 1em; display: block; color: var(--brand); }
.logo-hole { fill: var(--logo-hole); }

/* --- Horní lišta ---------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
    padding-top: env(safe-area-inset-top, 0px);
}

.topbar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.1875rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    margin-right: auto;
}
.brand .logo-mark { font-size: 1.75rem; }
.brand:hover { color: var(--ink); }

.menu-toggle {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    position: relative;
}
.menu-icon, .menu-icon::before, .menu-icon::after {
    position: absolute;
    left: 12px; right: 12px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    content: "";
    transition: transform .2s ease, opacity .2s ease;
}
.menu-icon { top: 50%; margin-top: -1px; }
.menu-icon::before { left: 0; right: 0; top: -6px; }
.menu-icon::after { left: 0; right: 0; top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav a, .nav-logout button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-s);
    color: var(--ink-2);
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    font-size: .9375rem;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav a:hover, .nav-logout button:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.nav-logout { margin: 0 0 0 8px; }

/* JS přidá třídu .js – bez JS zůstává menu vždy viditelné. Menu se schová do tlačítka dřív, než by se zalomilo. */
@media (max-width: 1060px) {
    .js .menu-toggle { display: block; }
    .js .nav { display: none; }
    .js .nav.is-open { display: flex; }
    .nav {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 4px 0 14px;
    }
    .nav a, .nav-logout button { min-height: 48px; width: 100%; font-size: 1rem; }
    .nav-logout { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
}

/* --- Rozvržení stránky ----------------------------------------------------- */

.main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 16px calc(96px + env(safe-area-inset-bottom, 0px));
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.page-head .muted { margin: 4px 0 0; }

.head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 6px;
}
.back::before { content: "‹"; font-size: 1.3em; line-height: 1; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 20px;
    margin: 0 0 16px;
}

.narrow { max-width: 460px; }

/* --- Hlášky ---------------------------------------------------------------- */

.flash {
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 0 0 16px;
    font-weight: 550;
    background: var(--info-bg);
    color: var(--info-ink);
}
.flash-ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash-error { background: var(--danger-bg); color: var(--danger); }
.flash-warn { background: var(--warn-bg); color: var(--warn-ink); }

/* --- Formuláře ------------------------------------------------------------- */

.field { display: block; margin: 0 0 16px; }
.field > span:first-child {
    display: block;
    font-size: .875rem;
    font-weight: 650;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.field small, .check small { display: block; color: var(--ink-2); font-size: .8125rem; margin-top: 6px; line-height: 1.45; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    font: inherit;
    font-size: 1rem; /* 16px: iOS jinak při psaní přibližuje */
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select {
    appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
input[readonly] { background: var(--surface-2); color: var(--ink-2); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.field-error { color: var(--danger); font-size: .875rem; font-weight: 600; margin: 6px 0 0; }

input[type="file"] {
    width: 100%;
    font: inherit;
    font-size: .9375rem;
    color: var(--ink-2);
}
input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 650;
    margin-right: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-s);
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
}

.field-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.field-grid-tight { gap: 0 12px; align-items: end; }
@media (min-width: 560px) {
    .field-grid { grid-template-columns: 1fr 1fr; }
    .field-wide { grid-column: 1 / -1; }
}

.check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; cursor: pointer; font-weight: 600; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }

.input-code { text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: 1.125rem !important; }

/* --- Tlačítka -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 700;
    font-size: .9375rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); color: var(--on-brand); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-danger-ghost:hover { background: var(--danger-bg); color: var(--danger); }
.btn-small { min-height: 36px; padding: 0 12px; font-size: .875rem; }
.btn-large { min-height: 54px; font-size: 1.0625rem; border-radius: var(--radius); }
.btn-block { width: 100%; }
.btn-block + .btn-block { margin-top: 8px; }

.link-btn {
    background: none; border: 0; padding: 0;
    font: inherit; font-weight: 650;
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: .18em;
    cursor: pointer;
}

.icon-btn {
    width: 36px; height: 36px;
    display: inline-grid; place-items: center;
    border-radius: var(--radius-s);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 1rem;
    cursor: pointer;
}
.icon-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--line-strong); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn-danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 700;
    background: var(--brand-soft);
    color: var(--brand);
    white-space: nowrap;
}
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }

/* --- Přihlášení ------------------------------------------------------------ */

.login {
    display: grid;
    gap: 28px;
    align-items: center;
    width: 100%;
}
.login-mark { font-size: 3.5rem; margin-bottom: 16px; }
.login-intro h1 { font-size: 2.5rem; letter-spacing: -0.035em; margin-bottom: 10px; }
.login-intro p { color: var(--ink-2); font-size: 1.0625rem; max-width: 30ch; }
.login-card { padding: 24px; box-shadow: var(--shadow); margin: 0; }
.login-card h2 { font-size: 1.25rem; margin-bottom: 18px; }
.login-card .btn { margin-top: 4px; }

@media (min-width: 820px) {
    .layout-public .public-main:has(.login) { max-width: 920px; }
    .login { grid-template-columns: 1fr 400px; gap: 64px; }
    .login-intro h1 { font-size: 3.25rem; }
}

/* --- Seznam kódů ----------------------------------------------------------- */

.create-form { display: flex; gap: 8px; }
.create-form input { width: 76px; text-align: center; }

.search { margin: 0 0 16px; }
.search input { max-width: 420px; background: var(--surface); }

.code-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.code-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "chip main" "chip side";
    gap: 4px 14px;
    align-items: center;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease;
}
.code-row:hover { border-color: var(--brand); color: var(--ink); }
.code-row .code-chip { grid-area: chip; }
.code-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.code-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.code-side { grid-area: side; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code-type { font-size: .875rem; color: var(--ink-2); }
.type-none { color: var(--warn-ink); }
.scans { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
    .code-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "chip main side";
    }
    .code-side { justify-content: flex-end; }
}

.code-chip {
    display: inline-block;
    font-weight: 800;
    font-size: .9375rem;
    letter-spacing: .14em;
    padding: 6px 8px 6px 11px;
    border-radius: var(--radius-s);
    background: var(--brand-soft);
    color: var(--brand);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.empty {
    text-align: center;
    padding: 48px 20px;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-l);
    color: var(--ink-2);
}
.empty h2 { color: var(--ink); font-size: 1.25rem; }
.empty p { max-width: 46ch; margin: 0 auto 16px; }

/* --- Úprava kódu ------------------------------------------------------------ */

.edit-grid { display: grid; gap: 16px; align-items: start; }
.edit-grid > .edit-aside { order: 1; } /* v168: v HTML je pravý sloupec první, na telefonu patří pod obsah */
@media (min-width: 920px) {
    .edit-grid { grid-template-columns: minmax(0, 1fr) 344px; gap: 24px; }
    .edit-grid > .edit-main { grid-column: 1; grid-row: 1; }
    .edit-grid > .edit-aside { grid-column: 2; grid-row: 1; }
}

.type-picker { border: 1px solid var(--line); }
.type-picker legend {
    float: left;
    width: 100%;
    padding: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.type-options { clear: both; display: grid; gap: 10px; margin-bottom: 4px; }
@media (min-width: 640px) { .type-options { grid-template-columns: repeat(3, 1fr); } }

.type-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.type-option:hover { border-color: var(--line-strong); }
.type-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.type-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.type-option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.type-option-body strong { display: block; font-weight: 750; }
.type-option-body span { display: block; font-size: .875rem; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.type-picker .muted { clear: both; margin-top: 10px; }

.photo-row { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.photo-actions { flex: 1; min-width: 220px; }
.photo-actions .field { margin-bottom: 8px; }

.avatar {
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 800;
    letter-spacing: .02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 84px; height: 84px; font-size: 1.75rem; }
.avatar-xl { width: 116px; height: 116px; font-size: 2.5rem; box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--line); }

.file-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.file-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.file-body input { min-height: 40px; padding: 6px 10px; }
.file-body .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-actions { display: flex; gap: 4px; flex: none; }
@media (max-width: 480px) {
    .file-item { flex-wrap: wrap; }
    .file-actions { width: 100%; justify-content: flex-end; }
}

.file-icon {
    flex: none;
    width: 40px; height: 48px;
    display: grid; place-items: end center;
    padding-bottom: 7px;
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #FFFFFF;
    background: #C4473B;
    border-radius: 6px 14px 6px 6px;
}

.dropzone {
    padding: 16px;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    margin-bottom: 0;
}

.save-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: 0 -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
}
.save-bar .btn { width: 100%; min-height: 50px; }
@media (min-width: 640px) {
    .save-bar { position: static; margin: 0; padding: 0; background: none; border: 0; backdrop-filter: none; }
    .save-bar .btn { width: auto; }
}

/* --- Štítek s QR kódem -------------------------------------------------------- */

.tag { margin-bottom: 16px; }

.tag-plate {
    position: relative;
    padding: 42px 26px 20px;
    border-radius: 26px;
    background:
        linear-gradient(160deg, var(--plate-shine) 0%, transparent 38%),
        linear-gradient(135deg, var(--plate-a), var(--plate-b));
    border: 1px solid var(--plate-edge);
    box-shadow: inset 0 1px 0 var(--plate-shine), var(--shadow);
    text-align: center;
}
/* Otvor pro kroužek – štítek jako vygravírovaný přívěsek. */
.tag-plate::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    width: 16px; height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, .28), 0 1px 0 var(--plate-shine);
}

.qr-preview {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 12px;
    aspect-ratio: 1;
    max-width: 260px;
    margin: 0 auto;
    display: grid;
    place-items: center;
}
.qr-preview svg { width: 100%; height: auto; display: block; }

.tag-code {
    margin: 14px 0 0;
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: .32em;
    padding-left: .32em;
    color: var(--plate-text);
    text-shadow: 0 1px 0 var(--plate-shine);
}

/* v259: upozornění, že delší kód při zvolené odolnosti dává hustší QR (VIP kód, Nastavení QR kódu) */
.qr-dense { display: block; padding: 8px 10px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); line-height: 1.45; }
.qr-dense[hidden] { display: none; }

/* v256: doména pod kódem v náhledu štítku (volba Text pod kódem: Kód a qrlink.cz)
   v257: kód a doména v úpravě kódu větší, v poměru blíž staženému štítku; dlouhý VIP kód se zmenší na šířku štítku (--n = počet znaků, nastaví qr.js) */
.tag-promo { margin: 2px 0 0; font-weight: 700; font-size: .8125rem; letter-spacing: .04em; color: var(--plate-text); text-shadow: 0 1px 0 var(--plate-shine); }
.edit-aside .tag-plate { container-type: inline-size; }
.edit-aside .tag-plate .tag-code { margin-top: 16px; font-size: min(1.625rem, calc((100cqw - 52px) / (var(--n, 6) * 0.98))); line-height: 1.15; letter-spacing: .26em; padding-left: .26em; }
.edit-aside .tag-mid { --n: 10; }  /* do načtení qr.js (inline style zakazuje CSP) */
.edit-aside .tag-long { --n: 20; }
.edit-aside .tag-long .tag-plate .tag-code { font-size: min(1.625rem, calc((100cqw - 52px) / (var(--n, 20) * 0.78))); letter-spacing: .1em; padding-left: .1em; }
.edit-aside .tag-plate .tag-promo { margin-top: 4px; font-size: 1.125rem; }
.tag-code[hidden], .tag-promo[hidden] { display: none; }

.link-box { display: grid; gap: 6px; margin: 14px 0 10px; }
.link-box input { width: 100%; min-width: 0; text-overflow: ellipsis; text-align: center; }
.link-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.link-box input { min-height: 36px; font-size: .875rem !important; padding: 6px 10px; }

.export {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
}
.export summary, .collapsible > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.export summary::-webkit-details-marker, .collapsible > summary::-webkit-details-marker { display: none; }
.export summary::after, .collapsible > summary::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid var(--ink-2);
    border-bottom: 2px solid var(--ink-2);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .2s ease;
}
.export[open] summary::after, .collapsible[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.export-body { padding: 0 18px 18px; }
.export-buttons { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.export-buttons .btn { flex: 1; }

.stats .stat-total strong { font-size: 1.5rem; font-weight: 800; margin-right: 4px; }
.chart { width: 100%; height: 64px; display: block; margin: 12px 0; }
.chart .bar { fill: var(--brand); }
.chart .bar-zero { fill: var(--line); }

.device-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.device-list li { display: flex; justify-content: space-between; font-size: .9375rem; padding: 4px 0; border-bottom: 1px solid var(--line); }
.device-list li:last-child { border-bottom: 0; }

.danger-zone form { display: grid; gap: 8px; }
.danger-zone .btn-block + .btn-block { margin-top: 0; }

/* --- Účet a správa ------------------------------------------------------------ */

.account-grid { display: grid; gap: 16px; align-items: start; }
.account-grid .card { margin: 0; }
@media (min-width: 820px) { .account-grid { grid-template-columns: repeat(3, 1fr); } }

.usage { margin: 0; display: grid; gap: 10px; }
.usage div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.usage div:last-child { border-bottom: 0; }
.usage dt { color: var(--ink-2); }
.usage dd { margin: 0; font-weight: 700; text-align: right; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
    padding: 10px 14px;
    font-weight: 650;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.tabs a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }

.collapsible { padding: 0; }
.collapsible > summary { padding: 16px 20px; }
.collapsible > form, .collapsible > p { padding: 0 20px; }
.collapsible > form { padding-bottom: 20px; }

.inline-form { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; }
.inline-form .field { flex: 1 1 140px; }
.inline-form .field-grow { flex: 3 1 220px; }
.inline-form .btn { margin-bottom: 16px; }

.user-list { list-style: none; margin: 0; padding: 0; }
.user-item { padding: 16px 18px; }
.user-item.is-inactive { opacity: .7; }
.user-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.user-head strong { display: block; }
.user-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.user-item p { margin: 6px 0 0; }
.user-item details > summary { cursor: pointer; font-weight: 650; color: var(--brand); margin-top: 10px; width: max-content; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.user-forms { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.filters input { flex: 2 1 220px; width: auto; }
.filters select { flex: 1 1 160px; width: auto; }

.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
}
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 680px; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .8125rem; color: var(--ink-2); font-weight: 700; background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions form { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* --- Veřejné stránky (po načtení kódu) ------------------------------------------- */

.layout-public {
    display: flex;
    flex-direction: column;
    --logo-hole: var(--bg);
}
.public-main {
    flex: 1;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.public-footer {
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    text-align: center;
}
.public-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink-2);
    text-decoration: none;
}
.public-brand .logo-mark { font-size: 1.125rem; color: var(--ink-2); }

.message { text-align: center; padding: 32px 8px; }
.message-mark { font-size: 3.5rem; display: inline-block; margin-bottom: 18px; }
.message-mark .logo-mark { color: var(--line-strong); }
.message h1 { font-size: 1.5rem; margin-bottom: 10px; }
.message p { color: var(--ink-2); max-width: 38ch; margin: 0 auto 20px; }

/* Vizitka */
.vcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.vcard-head {
    text-align: center;
    padding: 36px 24px 22px;
    background:
        radial-gradient(120% 70% at 50% 0%, var(--brand-soft) 0%, transparent 70%);
}
.vcard-head .avatar { margin: 0 auto 18px; }
.vcard-head h1 { font-size: 1.75rem; letter-spacing: -0.025em; }
.vcard-role { margin: 8px 0 0; color: var(--ink-2); font-weight: 550; }
.vcard-role span { display: block; }
.vcard-org { font-weight: 700; color: var(--ink); }

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
    gap: 8px;
    padding: 0 20px 20px;
}
.quick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-size: .8125rem;
    font-weight: 700;
}
.quick:hover { border-color: var(--brand); color: var(--brand); }
.quick-ico { width: 22px; height: 22px; fill: var(--brand); }

.vcard-details { margin: 0; padding: 4px 24px 8px; border-top: 1px solid var(--line); }
.vcard-details div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.vcard-details div:last-child { border-bottom: 0; }
.vcard-details dt { font-size: .8125rem; color: var(--ink-2); font-weight: 650; }
.vcard-details dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.vcard-details a { color: var(--ink); text-decoration: none; }
.vcard-details a:hover { color: var(--brand); }

.vcard-save {
    position: sticky;
    bottom: 0;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
}

/* Dokumenty */
.docs h1 { font-size: 1.625rem; margin-bottom: 12px; }
.docs-body { color: var(--ink-2); margin-bottom: 24px; max-width: 60ch; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.doc-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
}
.doc-link:hover { border-color: var(--brand); color: var(--ink); }
.doc-text { flex: 1; min-width: 0; display: grid; }
.doc-text strong { font-weight: 700; overflow-wrap: anywhere; }
.doc-open { font-weight: 700; font-size: .875rem; color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .topbar, .save-bar, .edit-aside .card, .export, .link-box { display: none !important; }
}

/* --- Tarify ------------------------------------------------------------------- */

.plan-list { list-style: none; margin: 0; padding: 0; }
.plan-item { padding: 16px 18px; }
.plan-item.is-inactive { opacity: .75; }
.plan-item .user-head span { display: block; }
.plan-item details > summary { cursor: pointer; font-weight: 650; color: var(--brand); margin-top: 10px; width: max-content; }
.plan-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.request-box {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--warn-bg);
    color: var(--warn-ink);
}
.request-box p { margin: 0 0 10px; }

.plan-card { margin-bottom: 16px; }
.plan-choices {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.plan-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    align-items: flex-start;
}
.plan-choice.is-current { border-color: var(--brand); background: var(--brand-soft); }
.plan-choice > strong { font-size: 1.0625rem; }
.plan-limits { font-weight: 650; }
.plan-price { font-weight: 800; color: var(--brand); }
.plan-choice .badge, .plan-choice form { margin-top: auto; padding-top: 8px; width: 100%; }
.plan-choice .badge { width: auto; padding-top: 2px; margin-top: 8px; }

/* --- Zapomenuté heslo ------------------------------------------------------------- */
.login-forgot { text-align: center; margin: 14px 0 0; }
.message-form .login-card { text-align: left; margin: 20px auto 16px; max-width: 400px; }
.message-form > p { margin-left: auto; margin-right: auto; }

/* --- Hromadné akce a arch štítků --------------------------------------------------- */
.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 0 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    position: sticky;
    top: 68px;
    z-index: 5;
}
.bulk-bar select { width: auto; flex: 1 1 200px; }
.bulk-bar input[type="email"] { width: auto; flex: 2 1 220px; }
.bulk-count { font-weight: 650; margin-right: 4px; white-space: nowrap; }
.check-col { width: 44px; text-align: center !important; }
.check-col input { width: 20px; height: 20px; accent-color: var(--brand); vertical-align: middle; }

.sheet-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 920px) { .sheet-layout { grid-template-columns: 320px minmax(0, 1fr); } }
.sheet-settings h2 { margin-top: 18px; }
.sheet-settings h2:first-child { margin-top: 0; }
.sheet-info .export-buttons .btn { flex: 0 1 auto; }
.sheet-pager { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.sheet-preview {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
}
.sheet-preview svg { width: 100%; height: auto; display: block; outline: 1px dashed #C8D0CC; }
.print-area { display: none; }

@media print {
    @page { margin: 0; }
    body.layout-app > *:not(main), .main > *:not(.print-area) { display: none !important; }
    .main { padding: 0 !important; max-width: none; }
    .print-area { display: block !important; }
    .print-area svg { display: block; break-after: page; }
}

/* --- Statistiky -------------------------------------------------------------------- */
.period-tabs { display: flex; gap: 4px; margin: 0 0 14px; background: var(--surface-2); padding: 4px; border-radius: var(--radius-s); }
.period-tabs a { flex: 1; text-align: center; padding: 6px 8px; border-radius: 6px; font-size: .875rem; font-weight: 650; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.period-tabs a[aria-current="page"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.chart-axis { display: flex; justify-content: space-between; margin-top: -6px; margin-bottom: 14px; }
.breakdowns { display: grid; gap: 16px; margin-bottom: 14px; }
.breakdowns h3 { font-size: .875rem; color: var(--ink-2); margin: 0 0 6px; font-weight: 700; }
.bd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bd-list li { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr auto; gap: 8px; align-items: center; font-size: .875rem; }
.bd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.bd-fill { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 4px; }
.bd-list strong { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.stats-foot { display: grid; gap: 10px; justify-items: start; }
.stats-grid { display: grid; gap: 16px; align-items: start; }
.stats-grid .card { margin: 0; }
@media (min-width: 900px) {
    .stats-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .stats-grid .breakdowns { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.top-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.top-list a { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.top-list a:hover { background: var(--surface-2); color: var(--ink); }
.top-name { display: grid; min-width: 0; font-weight: 650; }
.top-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list strong { font-variant-numeric: tabular-nums; }

/* --- Odkazy v dokumentech a kopírování obsahu ---------------------------------------- */
.file-icon-link { background: #3A6EA5; border-radius: 6px; }
.file-icon-video { background: #1F2A30; border-radius: 6px; font-size: .5625rem; }
.input-small { min-height: 38px !important; padding: 6px 10px !important; font-size: .9375rem !important; }
.add-grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .add-grid { grid-template-columns: 1fr 1fr; } }
.add-grid .dropzone { margin: 0; }
.field-title { display: block; font-size: .875rem; font-weight: 650; color: var(--ink-2); margin-bottom: 6px; }
.field-last { margin-bottom: 8px; }
.add-grid .field { margin-bottom: 8px; }
.add-grid small { display: block; font-size: .8125rem; line-height: 1.45; }
.copy-card form { padding: 0 20px 20px; }
.copy-card .check-all { margin: 10px 0 6px; }
.copy-list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-s); }
.copy-list li { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.copy-list li:last-child { border-bottom: 0; }
.copy-list .check { margin: 0; font-weight: 550; align-items: center; }
.code-chip-small { font-size: .75rem; padding: 2px 6px 2px 8px; letter-spacing: .1em; }
.docs-body a, .vcard-details dd a { overflow-wrap: anywhere; }

/* --- Předplatné a kódy mimo tarif ----------------------------------------------------- */
.notice-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; }
.notice-bar a { font-weight: 700; color: inherit; white-space: nowrap; }
.billing-card { border-left: 4px solid var(--brand); }
.billing-overdue, .billing-expiring { border-left-color: #E2A23B; }
.billing-suspended { border-left-color: var(--danger); }
.billing-form input[type="date"] { min-width: 170px; }
.keep-bar {
    position: sticky; top: 68px; z-index: 5;
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.keep-bar.is-over strong { color: var(--danger); }
.keep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.keep-item {
    display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center;
    padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.keep-item:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.keep-item input { width: 20px; height: 20px; accent-color: var(--brand); }
.keep-item input:disabled + .code-chip { opacity: .5; }
.keep-name { display: grid; min-width: 0; }
.keep-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .keep-item { grid-template-columns: auto 1fr; } .keep-item .code-chip { grid-column: 2; justify-self: start; } .keep-name { grid-column: 2; } .keep-item .badge { grid-column: 2; justify-self: start; } }

/* --- Karta zařízení ------------------------------------------------------------------- */
.edit-main { display: grid; gap: 16px; align-content: start; min-width: 0; }
.edit-main > .card { margin: 0; }
.sub-h { font-size: .9375rem; font-weight: 700; margin: 18px 0 10px; display: flex; gap: 8px; align-items: center; }
.avatar-square { border-radius: 14px; }
.check-grid { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .check-grid { grid-template-columns: 1fr 1fr; } }
.check-grid .check { margin-bottom: 10px; font-weight: 550; }
.log-form { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: flex-end; }
.log-form .field { flex: 1 1 130px; }
.log-form .field-grow { flex: 3 1 220px; }
.log-form > .btn { margin-bottom: 16px; }
.log-list { list-style: none; margin: 8px 0 0; padding: 0; }
.log-item { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.log-date { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .875rem; padding-top: 1px; }
.log-body { display: grid; gap: 1px; min-width: 0; }
.log-body strong { font-size: .875rem; }
.log-report .log-body strong { color: var(--danger); }
.log-inspection .log-body strong { color: var(--brand); }
.transfer-form { padding: 0 20px 20px; display: grid; gap: 10px; }
.transfer-form p, .transfer-form .check { margin: 0; }

.asset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } /* v156: dlouhý obsah (galerie, e-mail) nesmí roztáhnout kartu */
.asset-head { display: flex; gap: 16px; align-items: center; }
.asset-photo { width: 84px; height: 84px; flex: none; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font-size: 2.2rem; color: var(--ink-2); }
.asset-photo img { width: 100%; height: 100%; object-fit: cover; }
.asset-title h1 { font-size: 1.5rem; }
.asset-title p { margin: 2px 0 6px; }
.state { display: inline-block; font-size: .8125rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.state-ok { background: var(--ok-bg); color: var(--ok-ink); }
.state-warn { background: var(--warn-bg); color: var(--warn-ink); }
.state-danger { background: var(--danger-bg); color: var(--danger); }
.state-muted { background: var(--surface-2); color: var(--ink-2); }
.asset-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 16px 18px; }
.asset-sec h2 { font-size: .8125rem; text-transform: none; color: var(--ink-2); margin: 0 0 8px; font-weight: 700; }
.kv { margin: 0; }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.kv div:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.asset-lost { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-l); padding: 16px 18px; display: grid; gap: 8px; }
.report summary { cursor: pointer; font-weight: 700; list-style: none; }
.report summary::-webkit-details-marker { display: none; }
.report[open] summary { margin-bottom: 12px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.asset-private { border-color: var(--brand); }
.asset-private .log-item { grid-template-columns: 6.5em 1fr; }
.asset-private .btn-block { margin-top: 8px; }

/* --- Výběr více souborů ------------------------------------------------------------- */
.pick-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pick-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); font-size: .875rem; }
.pick-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pick-list .icon-btn { width: 30px; height: 30px; flex: none; }

/* --- Okamžité nahrávání ----------------------------------------------------------------- */
.pick-list li { align-items: flex-start; }
.pick-body { display: grid; gap: 4px; flex: 1; min-width: 0; }
.pick-body input { min-height: 38px; padding: 6px 10px; }
.upload-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.upload-list li { padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); font-size: .875rem; }
.upload-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; }
.upload-pct { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.upload-bar { height: 6px; margin-top: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.upload-bar span { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 3px; transition: width .15s linear; }
.upload-list li.is-error { border-color: var(--danger); }
.upload-list li.is-error .upload-pct { color: var(--danger); white-space: normal; }
.upload-list li.is-error .upload-bar { display: none; }
.file-item.is-new { border-color: var(--brand); }
input.is-saved { border-color: var(--ok-ink) !important; box-shadow: 0 0 0 3px var(--ok-bg) !important; }

/* --- Volba typu kódu: mřížka 2 × 2 s ikonami ------------------------------------------- */
.type-options { grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .type-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.type-option { position: relative; align-items: center; gap: 14px; padding: 14px 16px; min-height: 76px; }
.type-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.type-icon {
    flex: none; width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--surface-2); color: var(--ink-2);
    transition: background-color .15s ease, color .15s ease;
}
.type-icon svg { width: 24px; height: 24px; }
.type-option-body { min-width: 0; }
.type-option-body strong { font-size: 1rem; }
.type-option-body span { margin-top: 1px; }
.type-option:has(input:checked) .type-icon { background: var(--brand); color: var(--on-brand); }
.type-option:has(input:checked)::after {
    content: ""; position: absolute; top: 10px; right: 10px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* --- Předávací PIN -------------------------------------------------------------------- */
.pin-box { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius); background: var(--brand-soft); border: 1.5px solid var(--brand); }
.pin-label { font-size: .8125rem; font-weight: 700; color: var(--brand); }
.pin-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pin-row strong { font-size: 1.5rem; letter-spacing: .2em; font-variant-numeric: tabular-nums; }

/* --- Plovoucí oznámení ------------------------------------------------------------------ */
.toast { display: flex; align-items: flex-start; gap: 10px; }
.toast-text { flex: 1; min-width: 0; }
.toast-close { flex: none; display: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: .875rem; cursor: pointer; opacity: .75; }
.toast-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
/* Bez JavaScriptu zůstávají hlášky v obsahu stránky, s ním plavou nad obsahem. */
.js .toasts {
    position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    width: min(560px, calc(100% - 24px));
    display: grid; gap: 8px; pointer-events: none;
}
.js .layout-public .toasts { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.js .toast { pointer-events: auto; margin: 0; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .12); animation: toast-in .2s ease-out; }
.js .toast-close { display: block; }
.toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- Import vCard ----------------------------------------------------------------------- */
.vcf-import { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 16px; padding: 12px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); }
.vcf-btn { position: relative; overflow: hidden; cursor: pointer; }
.vcf-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.vcf-import .muted { flex: 1 1 220px; }
.vcf-ok { color: var(--ok-ink) !important; font-weight: 650; }

/* =====================================================================================
   Úvodní stránka
   ===================================================================================== */
.layout-landing { --logo-hole: var(--bg); }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.lp-narrow { max-width: 760px; }

.lp-top {
    position: sticky; top: 0; z-index: 30;
    padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background-color .2s ease;
}
.lp-top.is-scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); --logo-hole: var(--surface); }
.lp-top-inner { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.lp-top .brand { margin-right: auto; }
.lp-nav { display: flex; gap: 4px; }
.lp-nav a { padding: 8px 12px; border-radius: var(--radius-s); color: var(--ink-2); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.lp-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lp-login { min-width: 96px; }
@media (max-width: 760px) { .lp-nav { display: none; } }

.lp-hero { padding: 48px 0 64px; }
.lp-hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .lp-hero-grid { grid-template-columns: 1.15fr 1fr; gap: 64px; } .lp-hero { padding: 72px 0 96px; } }
.lp-eyebrow { display: inline-block; font-size: .8125rem; font-weight: 750; color: var(--brand); background: var(--brand-soft); padding: 4px 12px; border-radius: 999px; margin-bottom: 18px; }
.lp-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 20px; }
.lp-lead { font-size: 1.125rem; color: var(--ink-2); max-width: 36em; margin-bottom: 28px; line-height: 1.6; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.lp-cta-center { justify-content: center; }
.lp-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--ink-2); font-size: .9375rem; }
.lp-checks li { display: flex; gap: 10px; align-items: center; }
.lp-checks li::before {
    content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%;
    background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D6B64' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.lp-hero-visual { position: relative; max-width: 380px; margin: 0 auto; padding: 24px 28px; }
.lp-plate { transform: rotate(-4deg); }
.lp-plate .qr-preview { max-width: 240px; }
.lp-chip {
    position: absolute; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px 8px 10px; border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink);
}
.lp-chip svg { width: 20px; height: 20px; color: var(--brand); }
.lp-chip-1 { top: 2%; left: -8%; }
.lp-chip-2 { bottom: 16%; right: -14%; }
.lp-chip-3 { bottom: -2%; left: 0; }
@media (max-width: 480px) { .lp-chip-1 { left: 0; } .lp-chip-2 { right: 0; bottom: 8%; } }

.lp-section { padding: 72px 0; }
.lp-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; text-align: center; margin-bottom: 12px; }
.lp-sub { text-align: center; color: var(--ink-2); font-size: 1.0625rem; max-width: 40em; margin: 0 auto 40px; }
.lp-sub-left { text-align: left; margin: 0 0 24px; }
.lp-split .lp-h2 { text-align: left; }

.lp-cards { display: grid; gap: 16px; }
@media (min-width: 640px) { .lp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lp-cards { grid-template-columns: repeat(4, 1fr); } }
.lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px; }
.lp-alt .lp-card { background: var(--bg); }
.lp-card h3 { font-size: 1.125rem; margin: 14px 0 8px; }
.lp-card p { color: var(--ink-2); font-size: .9375rem; margin: 0; }
.lp-card-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.lp-card-icon svg { width: 26px; height: 26px; }

.lp-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 28px; counter-reset: s; }
@media (min-width: 800px) { .lp-steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.lp-steps li { position: relative; }
.lp-step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 1.125rem; margin-bottom: 14px; }
.lp-steps h3 { font-size: 1.125rem; margin-bottom: 6px; }
.lp-steps p { color: var(--ink-2); margin: 0; }

.lp-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .lp-split { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.lp-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.lp-list li { padding-left: 18px; border-left: 3px solid var(--brand-soft); color: var(--ink-2); }
.lp-list strong { color: var(--ink); }
.lp-demo { display: grid; gap: 12px; max-width: 420px; justify-self: center; width: 100%; box-shadow: var(--shadow); }
.lp-demo-head { display: flex; gap: 12px; align-items: center; }
.lp-demo-head > div { display: grid; flex: 1; }
.lp-demo-photo { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.lp-demo-photo svg { width: 28px; height: 28px; }
.lp-demo-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.lp-demo-doc { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 650; }
.lp-demo-doc .file-icon { width: 34px; height: 40px; }

.lp-plans { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 760px) { .lp-plans { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.lp-plan { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.lp-plan.is-featured { border: 2px solid var(--brand); }
.lp-plan h3 { font-size: 1.125rem; }
.lp-price { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--brand); margin: 0; }
.lp-plan ul { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; color: var(--ink-2); }
.lp-plan ul strong { color: var(--ink); }
.lp-plan .btn { margin-top: auto; }

.lp-faq { display: grid; gap: 10px; }
.lp-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px; }
.lp-faq summary { cursor: pointer; list-style: none; font-weight: 700; padding: 16px 0; display: flex; justify-content: space-between; gap: 12px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--brand); }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq p { color: var(--ink-2); margin: 0 0 16px; }

.lp-final { text-align: center; }
.lp-final .lp-sub { margin-bottom: 24px; }

.lp-foot { border-top: 1px solid var(--line); padding: 28px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.lp-foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lp-foot .brand { margin-right: auto; font-size: 1rem; }
.lp-foot .brand .logo-mark { font-size: 1.4rem; }
.lp-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lp-foot-links a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.lp-foot-links a:hover { color: var(--brand); }
.js .layout-landing .toasts { top: calc(env(safe-area-inset-top, 0px) + 76px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Úvodní stránka: barevnější varianta ----------------------------------------------- */
.layout-landing {
    --lp-coral: #FF7A59; --lp-coral-soft: #FFE7DE;
    --lp-sky: #2E9BEA; --lp-sky-soft: #DDEFFD;
    --lp-amber: #F2A91E; --lp-amber-soft: #FFF1CF;
    --lp-violet: #7C5CE6; --lp-violet-soft: #ECE6FD;
    --lp-mint: #2BB38C; --lp-mint-soft: #D8F3EA;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .layout-landing {
        --lp-coral-soft: #3D2620; --lp-sky-soft: #172C3D; --lp-amber-soft: #3A2F16; --lp-violet-soft: #272040; --lp-mint-soft: #173328;
    }
}
:root[data-theme="dark"] .layout-landing {
    --lp-coral-soft: #3D2620; --lp-sky-soft: #172C3D; --lp-amber-soft: #3A2F16; --lp-violet-soft: #272040; --lp-mint-soft: #173328;
}
.lp-hero {
    background:
        radial-gradient(40rem 26rem at 88% 8%, var(--lp-sky-soft), transparent 70%),
        radial-gradient(34rem 24rem at 6% 92%, var(--lp-amber-soft), transparent 70%),
        radial-gradient(30rem 22rem at 60% 100%, var(--lp-coral-soft), transparent 70%);
}
.lp-eyebrow { background: var(--lp-mint-soft); color: var(--brand); }
.lp-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--lp-coral), var(--lp-amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero .btn-primary { background: var(--lp-coral); color: #fff; }
.lp-hero .btn-primary:hover { background: #F2643F; color: #fff; }

.lp-hero-visual { width: 100%; max-width: 460px; min-height: 460px; padding: 0; }
.lp-phone {
    position: relative; margin-left: auto; width: 230px; padding: 12px;
    border-radius: 34px; background: #17232A; box-shadow: 0 30px 60px -24px rgba(23, 35, 42, .45);
    transform: rotate(4deg);
}
.lp-phone-notch { width: 70px; height: 6px; border-radius: 3px; background: #31414A; margin: 2px auto 10px; }
.lp-phone-screen { background: #FFFFFF; color: #17232A; border-radius: 22px; padding: 14px; display: grid; gap: 8px; font-size: .75rem; }
.lp-ph-head { display: flex; gap: 10px; align-items: center; }
.lp-ph-head div { display: grid; line-height: 1.25; }
.lp-ph-head strong { font-size: .875rem; }
.lp-ph-head span { color: #53636B; }
.lp-ph-photo { width: 46px; height: 46px; border-radius: 12px; background: #DDF3EC; overflow: hidden; flex: none; display: grid; place-items: center; }
.lp-ph-photo img { width: 140%; max-width: none; }
.lp-phone-screen .state { justify-self: start; font-size: .6875rem; }
.lp-ph-row { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid #E6ECE9; color: #53636B; }
.lp-ph-row b { color: #17232A; }
.lp-ph-warn { background: #FFF1CF; color: #7A4E0B !important; padding: 0 6px; border-radius: 999px; }
.lp-ph-doc { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid #E6ECE9; border-radius: 10px; font-weight: 650; }
.lp-ph-doc .file-icon { width: 24px; height: 30px; font-size: .4375rem; padding-bottom: 4px; }
.lp-ph-btn { text-align: center; padding: 8px; border-radius: 10px; background: #1D6B64; color: #fff; font-weight: 700; }
.lp-hero-visual .lp-plate { position: absolute; left: 0; bottom: 6px; width: 200px; padding: 30px 18px 14px; transform: rotate(-7deg); }
.lp-hero-visual .lp-plate .qr-preview { max-width: none; padding: 8px; }
.lp-hero-visual .lp-plate .tag-code { font-size: .875rem; margin-top: 10px; }
.lp-beam { position: absolute; left: 30%; top: 24%; width: 30%; height: 20%; overflow: visible; }
.lp-beam path { fill: none; stroke: var(--lp-coral); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lp-chip-1 { top: 4%; left: 4%; bottom: auto; right: auto; }
.lp-chip-1 svg { color: var(--lp-coral); }
.lp-chip-3 { bottom: 4%; right: 2%; left: auto; top: auto; }
.lp-chip-3 svg { color: var(--lp-sky); }
@media (max-width: 480px) {
    .lp-hero-visual { min-height: 400px; }
    .lp-phone { width: 200px; }
    .lp-hero-visual .lp-plate { width: 170px; }
    .lp-chip-3 { right: 0; bottom: 0; }
}

.lp-card { position: relative; overflow: hidden; }
.lp-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--c); }
.lp-card .lp-card-icon { background: var(--c-soft); color: var(--c); }
.c-coral { --c: var(--lp-coral); --c-soft: var(--lp-coral-soft); }
.c-sky { --c: var(--lp-sky); --c-soft: var(--lp-sky-soft); }
.c-amber { --c: var(--lp-amber); --c-soft: var(--lp-amber-soft); }
.c-violet { --c: var(--lp-violet); --c-soft: var(--lp-violet-soft); }
.lp-step-n.c-coral, .lp-step-n.c-sky, .lp-step-n.c-amber { background: var(--c); color: #fff; }

.lp-alt { background: linear-gradient(180deg, var(--surface), var(--lp-mint-soft)); }
.lp-warm { background: linear-gradient(160deg, var(--lp-amber-soft), transparent 55%), var(--bg); }
.lp-list li { border-left-color: var(--lp-amber); }
.lp-illu { justify-self: center; width: 100%; max-width: 440px; }
.lp-illu img { width: 100%; height: auto; }

.lp-plan.is-featured { border-color: var(--lp-coral); box-shadow: 0 18px 40px -22px rgba(255, 122, 89, .55); }
.lp-plan.is-featured .lp-price { color: var(--lp-coral); }
.lp-plan.is-featured .btn-primary { background: var(--lp-coral); color: #fff; }

.lp-color { background: linear-gradient(135deg, #1D6B64, #2BB38C 55%, #2E9BEA); color: #fff; }
.lp-color .lp-sub { color: rgba(255, 255, 255, .85); }
.lp-color .btn-primary { background: #fff; color: #1D6B64; }
.lp-color .btn-primary:hover { background: #F0FAF6; color: #165850; }
.lp-color .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.lp-color .btn-ghost:hover { border-color: #fff; color: #fff; }

/* =====================================================================================
   Aplikace: barevnější varianta (stejné barvy jako úvodní stránka)
   ===================================================================================== */
:root {
    --coral: #FF7A59; --coral-soft: #FFE7DE; --coral-ink: #B8452A;
    --sky: #2E9BEA; --sky-soft: #DDEFFD; --sky-ink: #1D6AA6;
    --amber: #F2A91E; --amber-soft: #FFF1CF; --amber-ink: #8A5A06;
    --violet: #7C5CE6; --violet-soft: #ECE6FD; --violet-ink: #5A3FC0;
    --mint: #2BB38C; --mint-soft: #D8F3EA; --mint-ink: #1D6B64;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --coral-soft: #3D2620; --coral-ink: #FF9E85;
        --sky-soft: #172C3D; --sky-ink: #7CC3F7;
        --amber-soft: #3A2F16; --amber-ink: #F6C863;
        --violet-soft: #272040; --violet-ink: #B3A0F5;
        --mint-soft: #173328; --mint-ink: #6FD6B4;
    }
}
:root[data-theme="dark"] {
    --coral-soft: #3D2620; --coral-ink: #FF9E85;
    --sky-soft: #172C3D; --sky-ink: #7CC3F7;
    --amber-soft: #3A2F16; --amber-ink: #F6C863;
    --violet-soft: #272040; --violet-ink: #B3A0F5;
    --mint-soft: #173328; --mint-ink: #6FD6B4;
}
.layout-app {
    background:
        radial-gradient(48rem 18rem at 100% 0%, var(--sky-soft), transparent 70%),
        radial-gradient(40rem 16rem at 0% 0%, var(--mint-soft), transparent 70%),
        var(--bg);
    background-repeat: no-repeat;
}
.topbar { border-bottom: 0; }
.topbar::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--coral), var(--amber), var(--mint), var(--sky), var(--violet)); }

/* Typy kódů: barva podle typu */
.type-vcard { --tc: var(--coral); --tc-soft: var(--coral-soft); --tc-ink: var(--coral-ink); }
.type-documents { --tc: var(--sky); --tc-soft: var(--sky-soft); --tc-ink: var(--sky-ink); }
.type-asset { --tc: var(--amber); --tc-soft: var(--amber-soft); --tc-ink: var(--amber-ink); }
.type-redirect { --tc: var(--violet); --tc-soft: var(--violet-soft); --tc-ink: var(--violet-ink); }
.type-none { --tc: var(--line-strong); --tc-soft: var(--surface-2); --tc-ink: var(--ink-2); }

.type-option .type-icon { background: var(--tc-soft); color: var(--tc-ink); }
.type-option:has(input:checked) { border-color: var(--tc); background: color-mix(in srgb, var(--tc-soft) 70%, var(--surface)); }
.type-option:has(input:checked) .type-icon { background: var(--tc); color: #fff; }
.type-option:has(input:checked)::after { background-color: var(--tc); }

/* Seznam kódů */
.code-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico main" "ico side"; }
@media (min-width: 640px) { .code-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico main side"; } }
.code-type-ico { grid-area: ico; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tc-soft); color: var(--tc-ink); }
.code-type-ico svg { width: 24px; height: 24px; }
.code-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.code-type.type-vcard, .code-type.type-documents, .code-type.type-asset, .code-type.type-redirect { color: var(--tc-ink); font-weight: 650; }
.code-row:hover { border-color: var(--tc, var(--brand)); }

/* Přehledové dlaždice */
.stat-tiles { display: grid; gap: 12px; margin: 0 0 20px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-tile {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
    padding: 16px 18px; border-radius: var(--radius-l); text-decoration: none; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden;
}
.stat-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--t); }
.stat-tile:hover { border-color: var(--t); color: var(--ink); }
.stat-ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--t-soft); color: var(--t-ink); }
.stat-ico svg { width: 24px; height: 24px; }
.stat-num { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.stat-num small { font-size: .9375rem; font-weight: 650; color: var(--ink-2); }
.stat-label { font-size: .875rem; color: var(--ink-2); }
.tone-mint { --t: var(--mint); --t-soft: var(--mint-soft); --t-ink: var(--mint-ink); }
.tone-sky { --t: var(--sky); --t-soft: var(--sky-soft); --t-ink: var(--sky-ink); }
.tone-amber { --t: var(--amber); --t-soft: var(--amber-soft); --t-ink: var(--amber-ink); }
.tone-violet { --t: var(--violet); --t-soft: var(--violet-soft); --t-ink: var(--violet-ink); }

.empty-illu { width: 200px; height: auto; margin: 0 auto 8px; }
.empty { border-color: color-mix(in srgb, var(--mint) 45%, var(--line-strong)); background: color-mix(in srgb, var(--mint-soft) 35%, transparent); }

/* Grafy a statistiky v barvách */
.chart .bar { fill: var(--sky); }
.bd-fill { background: linear-gradient(90deg, var(--mint), var(--sky)); }
.period-tabs a[aria-current="page"] { color: var(--sky-ink); }

/* --- Koš, žádosti o obnovení, hlášení --------------------------------------------------- */
.trash { margin-top: 28px; }
.trash summary { cursor: pointer; font-weight: 700; color: var(--ink-2); padding: 8px 0; width: max-content; }
.trash-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.trash-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); opacity: .9; }
.trash-list .code-type-ico { width: 38px; height: 38px; filter: grayscale(.6); }
.tab-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--coral); color: #fff; font-size: .75rem; font-weight: 800; }
.request-panel { border-color: var(--amber); }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.req-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.req-list li:first-child { border-top: 0; padding-top: 0; }
.report-switch { max-width: 320px; }
.report-reason { margin-left: 8px; }
.report-text { margin: 10px 0 6px; }
.report-link { font-size: .8125rem; color: var(--ink-2); margin-left: 14px; }
.public-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; }
.tip-box { border-color: var(--sky); background: color-mix(in srgb, var(--sky-soft) 60%, var(--surface)); }
.tip-box h2 { color: var(--sky-ink); }
.tip-box ol { margin: 0 0 12px; padding-left: 20px; }
.asset-buy { text-align: center; margin: 4px 8px 0; }
.bulk-keep { margin: 0; flex: 1 1 100%; font-weight: 600; }

/* --- Karta majetku, mapa, inventura, import --------------------------------------------- */
.kind-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.kind-switch label { position: relative; cursor: pointer; }
.kind-switch input { position: absolute; opacity: 0; }
.kind-switch span { display: block; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); font-size: .8125rem; color: var(--ink-2); line-height: 1.35; }
.kind-switch strong { display: block; font-size: .9375rem; color: var(--ink); }
.kind-switch input:checked + span { border-color: var(--amber); background: color-mix(in srgb, var(--amber-soft) 70%, var(--surface)); }
.kind-switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.map-box { height: 260px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; z-index: 0; }
.map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.map-tools .muted { flex: 1 1 200px; }
.map-pin span { display: block; width: 30px; height: 30px; margin: 0 auto; border-radius: 50% 50% 50% 0; background: var(--coral); transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.map-pin span::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.public-map { height: 220px; border-radius: var(--radius); overflow: hidden; margin: 8px 0 10px; z-index: 0; }
.leaflet-container { font: inherit; font-size: .75rem; }
.nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.asset-loc { font-weight: 650; margin: 0 0 4px; }
.asset-funding { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-s); background: var(--sky-soft); color: var(--sky-ink); font-weight: 600; font-size: .875rem; }
.asset-owner-band { padding: 10px 14px; border-radius: var(--radius); background: var(--amber-soft); color: var(--amber-ink); }
.asset-photo-lg { width: 120px; height: 120px; }
.asset-photo a { display: block; width: 100%; height: 100%; }
.inv-check { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-l); background: var(--sky-soft); color: var(--sky-ink); font-weight: 650; }
.inv-check.is-done { grid-template-columns: 1fr auto; align-items: center; background: var(--ok-bg); color: var(--ok-ink); }

.inv-head { display: grid; gap: 10px; }
.inv-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.inv-title h2 { margin: 0; }
.inv-progress { height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.inv-progress .bd-fill { height: 100%; }
.inv-count { margin: 0; }
.inv-h { margin: 24px 0 12px; }
.inv-done { margin-top: 20px; }
.inv-done summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.inv-history { margin-top: 24px; }
.inv-history .device-list a { font-weight: 700; }

.import-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 860px) { .import-grid { grid-template-columns: 1fr 1fr; } }
.import-grid .card { margin: 0; }
.import-preview { margin: 8px 0 6px; }
.import-preview .table { min-width: 0; font-size: .8125rem; }
.import-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-color: var(--mint); }
.sheet-all { margin-top: 16px; }
.vip-body { padding: 0 20px 20px; display: grid; gap: 10px; }
.vip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-s); background: var(--violet-soft); }
.vip-row a { font-weight: 800; letter-spacing: .04em; color: var(--violet-ink); text-decoration: none; overflow-wrap: anywhere; }
.vip-inline { display: grid; gap: 8px; margin: 0 0 12px; padding: 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--violet-soft) 55%, var(--surface)); border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent); }
.vip-title { font-size: .8125rem; font-weight: 750; color: var(--violet-ink); }
.vip-add { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); overflow: hidden; }
.vip-add:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.vip-prefix { padding: 0 2px 0 10px; color: var(--ink-2); font-size: .875rem; white-space: nowrap; }
.vip-add input { border: 0 !important; box-shadow: none !important; min-height: 40px; padding-left: 0; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.vip-inline .field-error { margin: 0; }

/* --- Wi-Fi ----------------------------------------------------------------------------- */
.type-wifi { --tc: var(--mint); --tc-soft: var(--mint-soft); --tc-ink: var(--mint-ink); }
.field-check { align-self: end; margin-bottom: 16px; }
.wifi-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); padding: 28px 22px; display: grid; gap: 18px; }
.wifi-head { text-align: center; display: grid; gap: 12px; justify-items: center; }
.wifi-head h1 { font-size: 1.5rem; }
.wifi-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint-ink); }
.wifi-ico svg { width: 36px; height: 36px; }
.wifi-field { display: grid; gap: 6px; }
.wifi-label { font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.wifi-value { font-size: 1.375rem; font-weight: 800; letter-spacing: .01em; overflow-wrap: anywhere; }
.wifi-pass { width: 100%; padding: 10px 14px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); font-family: inherit; text-align: center; font-variant-ligatures: none; }
.wifi-open, .wifi-note { margin: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--sky-soft); color: var(--sky-ink); }
.wifi-help summary { cursor: pointer; font-weight: 700; }
.wifi-help ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.wifi-share { display: grid; justify-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.wifi-qr { width: 160px; }
.wifi-qr svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.save-bar { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 639px) { .save-bar .btn { flex: 1 1 140px; } }
.wifi-card input.wifi-pass { font-size: 1.375rem !important; font-weight: 800; min-height: 54px; }
.code-row.is-saved { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); animation: saved-pulse 1.6s ease-out 1; }
@keyframes saved-pulse { 0% { box-shadow: 0 0 0 8px var(--mint-soft); } 100% { box-shadow: 0 0 0 3px var(--mint-soft); } }
#code-list-anchor, .code-list li { scroll-margin-top: 90px; }
.addr-switch { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-s); background: var(--surface-2); }
.addr-switch label { flex: 1 1 auto; position: relative; cursor: pointer; }
.addr-switch input { position: absolute; opacity: 0; }
.addr-switch span { display: block; text-align: center; padding: 6px 10px; border-radius: 6px; font-size: .8125rem; font-weight: 750; letter-spacing: .06em; color: var(--ink-2); }
.addr-switch input:checked + span { background: var(--surface); color: var(--violet-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.addr-switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.vip-add input::placeholder { text-transform: none; font-weight: 400; letter-spacing: 0; }
.vip-old { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--violet) 30%, transparent); }
.vip-old .vip-row span { font-weight: 750; letter-spacing: .06em; color: var(--ink-2); }
.vip-old .vip-row { background: var(--surface); }
.more-fields summary { cursor: pointer; font-weight: 650; color: var(--brand); margin-bottom: 12px; }
.profile-form { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.row-deleted td { opacity: .65; }
.row-deleted td:first-child, .row-deleted td:last-child { opacity: 1; }
@media (min-width: 820px) { .account-grid .account-profile { grid-column: span 2; } }

/* --- Režim prohlížení kódu ------------------------------------------------------------ */
.edit-lock { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.edit-lock > .card { margin: 0; }
.edit-lock:disabled input, .edit-lock:disabled textarea, .edit-lock:disabled select {
    background: var(--surface-2); color: var(--ink); border-color: var(--line); cursor: default; opacity: 1; -webkit-text-fill-color: var(--ink);
}
.edit-lock:disabled .type-option:not(:has(input:checked)) { opacity: .45; }
.edit-lock:disabled .type-option, .edit-lock:disabled .kind-switch label { cursor: default; }
.edit-lock:disabled .dropzone, .edit-lock:disabled .add-grid, .edit-lock:disabled .file-actions, .edit-lock:disabled .photo-actions .field,
.edit-lock:disabled [data-geo], .edit-lock:disabled [data-clear-loc], .edit-lock:disabled .vcf-import { display: none; }
.is-viewing .vip-add { display: none; }
.edit-lock:disabled input::placeholder, .edit-lock:disabled textarea::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
.vip-view-hint { display: none; }
.is-viewing .vip-view-hint { display: block; }
.is-viewing .vip-edit-hint { display: none; }
.vip-old .vip-row { gap: 8px; }
.vip-old .vip-row span { flex: 1; }

/* --- Verze 42: tagy, zámek heslem, vizitka s více údaji, stav kódu, úložiště ------------- */

/* Barvy tagů */
.tag-c-mint { --g: var(--mint); --g-soft: var(--mint-soft); --g-ink: var(--mint-ink); }
.tag-c-sky { --g: var(--sky); --g-soft: var(--sky-soft); --g-ink: var(--sky-ink); }
.tag-c-violet { --g: var(--violet); --g-soft: var(--violet-soft); --g-ink: var(--violet-ink); }
.tag-c-amber { --g: var(--amber); --g-soft: var(--amber-soft); --g-ink: var(--amber-ink); }
.tag-c-coral { --g: var(--coral); --g-soft: var(--coral-soft); --g-ink: var(--coral-ink); }
.tag-c-slate { --g: var(--line-strong); --g-soft: var(--surface-2); --g-ink: var(--ink-2); }

.tag-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
    font-size: .8125rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    background: var(--g-soft, var(--surface-2)); color: var(--g-ink, var(--ink-2));
    border: 1.5px solid transparent;
}
.tag-chip-small { padding: 1px 8px; font-size: .75rem; }
a.tag-chip:hover { border-color: var(--g, var(--line-strong)); color: var(--g-ink, var(--ink)); }
.tag-chip[aria-current="true"] { border-color: var(--g, var(--brand)); background: var(--g, var(--brand)); color: #fff; }
.tag-chip[aria-current="true"] .tag-n { color: inherit; opacity: .8; }
.tag-all { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.tag-all[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tag-n { font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tag-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 16px; }
.tag-manage { font-size: .8125rem; font-weight: 650; margin-left: 6px; }
.tag-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--g); flex: none; }

.list-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.list-tools input[type="search"] { flex: 1 1 260px; }
.list-tools select { flex: 0 1 180px; width: auto; background: var(--surface); }

/* Výběr tagů u kódu */
.tag-field { margin: 4px 0 0; }
.tag-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag-pick { position: relative; cursor: pointer; }
.tag-pick input { position: absolute; opacity: 0; }
.tag-pick span {
    display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 700;
    border: 1.5px dashed var(--line-strong); color: var(--ink-2); background: var(--surface);
}
.tag-pick input:checked + span { border-style: solid; border-color: var(--g); background: var(--g-soft); color: var(--g-ink); }
.tag-pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.tag-new-input input { margin-bottom: 4px; }
.tag-none-view { display: none; margin: 0; }
.tag-picks:empty { display: none; }
.tag-x { border: 0; background: none; color: inherit; padding: 0 0 0 2px; margin-right: -4px; cursor: pointer; font-size: .75rem; line-height: 1; opacity: .7; }
.tag-x:hover { opacity: 1; }
.tag-add select { max-width: 320px; margin-bottom: 8px; }
.edit-lock:disabled .tag-x, .edit-lock:disabled .tag-add, .edit-lock:disabled .tag-new-input, .edit-lock:disabled .tag-edit-hint { display: none; }
.edit-lock:disabled .tag-field:not(:has([data-tag-chip])) .tag-none-view { display: block; }

/* Správa tagů */
.tag-new .field { margin-bottom: 16px; }
.tag-admin { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.tag-admin-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 130px); gap: 10px; align-items: center;
    padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.tag-admin-row input, .tag-admin-row select { min-height: 38px; }
.tag-admin-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
@media (min-width: 900px) {
    .tag-admin-row { grid-template-columns: auto minmax(0, 1fr) 140px auto; }
    .tag-admin-actions { grid-column: auto; }
}
.pick-codes { max-height: 60vh; }

/* Zámek heslem */
.lock-switch { grid-template-columns: 1fr; }
@media (min-width: 640px) { .lock-switch { grid-template-columns: repeat(3, 1fr); } }
.lock-switch input:checked + span { border-color: var(--violet); background: color-mix(in srgb, var(--violet-soft) 70%, var(--surface)); }
.lock-fields .field-last { margin-bottom: 0; }
.edit-lock:disabled .lock-fields { display: none; }
.edit-lock:disabled .lock-switch label:not(:has(input:checked)) { display: none; }
.edit-lock:disabled .lock-switch { grid-template-columns: 1fr; margin-bottom: 0; }
.lock-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--violet-soft); color: var(--violet-ink); }
.lock-badge svg { width: 14px; height: 14px; }
.lock-mark { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 20px; background: var(--violet-soft); color: var(--violet-ink); font-size: 1rem; }
.lock-mark svg { width: 34px; height: 34px; }
.lock-note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; max-width: 42ch; }
.lock-card .lock-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Vizitka: opakovaná pole */
.vc-names { margin-top: 4px; }
@media (min-width: 900px) { .vc-names { grid-template-columns: repeat(3, 1fr); } }
.multi { margin: 4px 0 18px; }
.multi-rows { display: grid; gap: 8px; }
.multi-row { display: grid; grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.multi-row select, .multi-row input { min-width: 0; }
.multi-adr { grid-template-columns: 1fr 1fr auto; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.multi-adr select { grid-column: 1 / 3; }
.multi-adr .icon-btn { grid-column: 3; grid-row: 1; }
.multi-adr .adr-street, .multi-adr .adr-region, .multi-adr .adr-country { grid-column: 1 / 3; }
.multi-adr .adr-zip { grid-column: 1; }
.multi-adr .adr-city { grid-column: 2; }
@media (min-width: 640px) {
    .multi-adr { grid-template-columns: 140px 2fr 110px 1fr auto; }
    .multi-adr select { grid-column: 1; }
    .multi-adr .icon-btn { grid-column: 5; }
    .multi-adr .adr-zip { grid-column: 2; grid-row: 2; }
    .multi-adr .adr-city { grid-column: 3 / 5; grid-row: 2; }
    .multi-adr .adr-street { grid-column: 2 / 5; grid-row: 1; }
    .multi-adr .adr-region { grid-column: 2 / 3; grid-row: 3; }
    .multi-adr .adr-country { grid-column: 3 / 5; grid-row: 3; }
}
.multi-add { margin-top: 8px; }
.multi-hint { display: block; margin-top: 6px; }
.edit-lock:disabled .multi-add, .edit-lock:disabled [data-multi-remove], .edit-lock:disabled .multi-hint, .edit-lock:disabled .multi-row.is-blank { display: none; }
.edit-lock:disabled .multi:not(:has(.multi-row:not(.is-blank))) { display: none; }
.edit-lock:disabled .multi-row { grid-template-columns: minmax(96px, 140px) minmax(0, 1fr); }
.edit-lock:disabled .photo-actions .btn { display: none; }

/* Veřejná vizitka */
.vcard-nick { margin: 4px 0 0; color: var(--ink-2); font-weight: 600; }
.vcard-socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; }
.social-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: .875rem; }
.social-chip span { color: var(--ink-2); font-weight: 550; }
.vcard-details .social-chip:hover { border-color: var(--brand); }

/* Stav kódu přímo pod QR kódem */
.code-state { display: flex; gap: 6px; margin: 0 0 12px; }
.code-state .btn { flex: 1; }

/* Úložiště */
.quota-bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.quota-bar .bd-fill { border-radius: 3px; }
.quota-bar.is-full .bd-fill { background: linear-gradient(90deg, var(--amber), var(--coral)); }
.usage .usage-bar { display: block; border-bottom: 0; padding: 0; margin-top: -4px; }

/* Koš */
.trash-list li > * { grid-area: auto; }
.trash-list .code-type-ico { grid-area: auto; }
.trash-main { color: var(--ink); text-decoration: none; min-width: 0; }
.trash-main:hover strong { color: var(--brand); }
.trash-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
    .trash-list li { grid-template-columns: auto minmax(0, 1fr); }
    .trash-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Správa: odkaz na veřejnou stránku vedle kódu */
.code-cell { white-space: nowrap; }
.public-link { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; vertical-align: middle; border-radius: 8px; color: var(--ink-2); }
.public-link:hover { background: var(--surface-2); color: var(--brand); }
.public-link svg { width: 16px; height: 16px; }
.lock-report summary { cursor: pointer; font-weight: 700; }
.lock-report form { margin-top: 14px; }
/* Přepínače typu, druhu karty a přístupu: skryté pole nesmí prosvítat ani v režimu prohlížení */
.kind-switch input, .edit-lock:disabled .kind-switch input,
.type-option input, .edit-lock:disabled .type-option input { opacity: 0 !important; width: 1px; height: 1px; margin: 0; pointer-events: none; }

/* Štítky v postranním panelu kódu: jedno pole s nabídkou */
.tag-box { margin: 0 0 14px; }
.tag-box .tag-picks { margin-bottom: 8px; }
.tag-combo { position: relative; }
.tag-combo input { min-height: 38px; font-size: .9375rem; }
.tag-menu {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto;
    list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tag-menu-head { padding: 6px 8px 2px; font-size: .75rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.tag-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-s); cursor: pointer; font-weight: 600; font-size: .9375rem; }
.tag-menu-item.is-active, .tag-menu-item:hover { background: var(--surface-2); }
.tag-menu-item.is-create { color: var(--brand); }
.tag-box small { display: block; margin-top: 6px; }

.pw-reveal { display: flex; gap: 6px; align-items: center; }
.pw-reveal input { flex: 1; min-width: 0; }

/* Počet kódů u štítku jako oddělená bublina */
.tag-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px;
    background: var(--surface); color: var(--ink-2); font-size: .6875rem; font-weight: 800; }
.tag-all .tag-n { background: var(--surface-2); }
/* Čtyři volby přístupu */
@media (min-width: 640px) { .lock-switch { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lock-switch { grid-template-columns: repeat(4, 1fr); } }
.vip-inline [data-vip-apply] { justify-self: start; }
.tag-pw { grid-column: 1 / -1; }
@media (min-width: 900px) { .tag-admin-row { grid-template-columns: auto minmax(0, 1fr) 140px minmax(0, 220px) auto; } .tag-pw { grid-column: auto; } }

/* Další barvy štítků (verze 49): světlý i tmavý režim */
.tag-c-pink   { --g: #E0529C; --g-soft: #FCE4F1; --g-ink: #A0306B; }
.tag-c-orange { --g: #F08A24; --g-soft: #FDEBD6; --g-ink: #9A5410; }
.tag-c-teal   { --g: #14A3A3; --g-soft: #D5F2F1; --g-ink: #0D6C6C; }
.tag-c-lime   { --g: #7CB518; --g-soft: #EBF6D3; --g-ink: #4D7410; }
.tag-c-indigo { --g: #4F5BD5; --g-soft: #E2E5FB; --g-ink: #343E9E; }
.tag-c-red    { --g: #C0392B; --g-soft: #F8DEDA; --g-ink: #8E2419; }
.tag-c-brown  { --g: #9B6B43; --g-soft: #F1E6DB; --g-ink: #6B4527; }
.tag-c-olive  { --g: #8A8A2E; --g-soft: #EEEEDA; --g-ink: #5E5E18; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tag-c-pink { --g-soft: #3D1E2E; --g-ink: #F59ACB; }
    :root:not([data-theme="light"]) .tag-c-orange { --g-soft: #3A2814; --g-ink: #F7B573; }
    :root:not([data-theme="light"]) .tag-c-teal { --g-soft: #123232; --g-ink: #6FD8D6; }
    :root:not([data-theme="light"]) .tag-c-lime { --g-soft: #26321A; --g-ink: #B5E06A; }
    :root:not([data-theme="light"]) .tag-c-indigo { --g-soft: #22264A; --g-ink: #A5ADF5; }
    :root:not([data-theme="light"]) .tag-c-red { --g-soft: #3B1C19; --g-ink: #F08B80; }
    :root:not([data-theme="light"]) .tag-c-brown { --g-soft: #33271D; --g-ink: #D9B08C; }
    :root:not([data-theme="light"]) .tag-c-olive { --g-soft: #2E2E18; --g-ink: #CFCF7A; }
}
:root[data-theme="dark"] .tag-c-pink { --g-soft: #3D1E2E; --g-ink: #F59ACB; }
:root[data-theme="dark"] .tag-c-orange { --g-soft: #3A2814; --g-ink: #F7B573; }
:root[data-theme="dark"] .tag-c-teal { --g-soft: #123232; --g-ink: #6FD8D6; }
:root[data-theme="dark"] .tag-c-lime { --g-soft: #26321A; --g-ink: #B5E06A; }
:root[data-theme="dark"] .tag-c-indigo { --g-soft: #22264A; --g-ink: #A5ADF5; }
:root[data-theme="dark"] .tag-c-red { --g-soft: #3B1C19; --g-ink: #F08B80; }
:root[data-theme="dark"] .tag-c-brown { --g-soft: #33271D; --g-ink: #D9B08C; }
:root[data-theme="dark"] .tag-c-olive { --g-soft: #2E2E18; --g-ink: #CFCF7A; }

/* Moje kódy: hromadný výběr */
.user-bulk { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.user-bulk select, .user-bulk input[type="text"] { width: auto; flex: 0 1 200px; min-height: 36px; }
.bulk-all { margin: 0; font-weight: 600; font-size: .875rem; }
.code-li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.row-pick { display: grid; place-items: center; width: 28px; cursor: pointer; }
.row-pick input { width: 18px; height: 18px; accent-color: var(--brand); }
.twofa-card .otp-qr { width: 200px; background: #fff; padding: 8px; border-radius: var(--radius); margin: 8px 0; }
.twofa-card .otp-qr svg { width: 100%; height: auto; display: block; }
.recovery-list { display: block; font-size: 1rem; letter-spacing: .05em; word-spacing: .4em; margin: 6px 0; }
.log-detail { max-width: 520px; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

.recovery-card { border-color: var(--amber); background: color-mix(in srgb, var(--amber-soft) 45%, var(--surface)); }
.recovery-card textarea { font-family: ui-monospace, Consolas, monospace; font-size: 1.0625rem; letter-spacing: .06em; max-width: 260px; min-height: 0; resize: none; }

/* Štítky v hlavní části stránky kódu (mezi zamykanými částmi formuláře, ukládají se hned) */
.edit-form { display: grid; gap: 16px; }
.edit-form > .tag-box { margin: 0; }
.tag-box h2 { margin-bottom: 10px; }

.schedule { margin-top: 4px; }
.schedule summary { cursor: pointer; font-weight: 650; font-size: .9375rem; color: var(--brand); margin-bottom: 10px; }
.schedule-note { display: block; padding: 8px 10px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); }
.edit-lock:disabled .valid-until:has(input:placeholder-shown) small { display: none; }

/* Veřejná mapa štítku */
.tagmap-head { text-align: center; margin-bottom: 14px; }
.tagmap-head h1 { margin: 0; }
.tagmap-map { height: min(60vh, 460px); border-radius: var(--radius-l); border: 1px solid var(--line); overflow: hidden; z-index: 0; }
.tagmap-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.tagmap-list a { display: flex; flex-direction: column; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.tagmap-list a:hover { border-color: var(--brand); }
.tagmap-pop { font-weight: 700; font-size: .875rem; }

/* Inventarizační zápis k tisku */
.layout-print { background: #fff; color: #111; padding: 24px; }
.print-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.inv-report { max-width: 1100px; margin: 0 auto; font-size: 13px; color: #111; }
.inv-report h1 { font-size: 22px; margin: 18px 0 8px; }
.report-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #111; padding-bottom: 10px; }
.report-head div { display: flex; flex-direction: column; }
.report-meta { text-align: right; display: block !important; }
.report-table { width: 100%; border-collapse: collapse; margin: 12px 0 24px; }
.report-table th, .report-table td { border: 1px solid #999; padding: 4px 6px; text-align: left; vertical-align: top; }
.report-table th { background: #eee; font-size: 12px; }
.report-table .num { text-align: right; white-space: nowrap; }
.report-table tr.is-missing td { background: #fde8e6; }
.inv-report input { border: 0; border-bottom: 1px dotted #999; background: transparent; color: #111; font: inherit; padding: 2px; min-height: 0; width: auto; }
.sign-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; margin-top: 28px; }
.sign { display: flex; flex-direction: column; gap: 4px; }
.sign input { border: 0; width: 100%; }
.sign-line { border-top: 1px solid #111; margin-top: 34px; }
@media print {
    .print-tools { display: none; }
    .layout-print { padding: 0; }
    @page { size: A4 landscape; margin: 12mm; }
    .report-table tr { break-inside: avoid; }
    .inv-report input::placeholder { color: transparent; }
}

.button-row-center { justify-content: center; margin: 12px 0; }

/* Hlášení závady s fotkou */
.report summary { color: var(--ink); }
.report-photo-hint { display: block; margin-top: 4px; }
.log-photo { display: inline-block; margin-top: 6px; }
.log-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); display: block; }

/* v58: tlačítka stejně vysoká jako pole vedle nich */
.btn { min-height: 46px; }
.btn-small { min-height: 36px; }
.log-form > .btn { min-height: 46px; }
.edit-lock:disabled .lock-switch { margin-bottom: 16px; }

/* v58: oko pro zobrazení hesla přímo v poli (místo tlačítka Zobrazit) */
.pw-reveal { position: relative; display: block; }
.pw-reveal input { width: 100%; padding-right: 48px; }
.pw-reveal input::-ms-reveal, .pw-reveal input::-ms-clear { display: none; }
.pw-eye {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: var(--radius-s); color: var(--ink-2); cursor: pointer;
}
.pw-eye:hover { color: var(--brand); background: var(--surface-2); }
.pw-eye:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye .pw-eye-slash { display: none; }
.pw-eye.is-on .pw-eye-slash { display: inline; }
.tag-pw.pw-reveal { display: block; }

/* v58: Nahlásit závadu jako výrazné rozbalovací tlačítko */
.report-box, .card.report-box { padding: 0; overflow: hidden; }
.report-box > summary {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 0;
    list-style: none; cursor: pointer; color: var(--ink);
    transition: background-color .15s ease;
}
.report-box > summary::-webkit-details-marker { display: none; }
.report-box > summary::after {
    content: ""; flex: none; margin-left: auto; width: 9px; height: 9px;
    border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
    transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.report-box[open] > summary { margin: 0; }
.report-box[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.report-box > summary:hover { background: var(--surface-2); }
.report-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); }
.report-ico svg { width: 20px; height: 20px; }
.report-label { display: grid; gap: 2px; min-width: 0; }
.report-label strong { font-weight: 700; font-size: 1rem; }
.report-label small { font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.report-missing .report-ico { background: var(--danger-bg); color: var(--danger); }
.report-box > form { margin: 0; padding: 16px 18px 18px; border-top: 1px solid var(--line); }
.report-box > form .btn { margin-top: 4px; }
/* v58: řádek štítku – pole i tlačítka v jedné výšce */
.tag-admin-row input[type="text"], .tag-admin-row input[type="password"], .tag-admin-row select { min-height: 40px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
.tag-admin-row .btn-small { min-height: 40px; }
.tag-admin-row .icon-btn { width: 40px; height: 40px; }
.tag-admin-row .pw-eye { width: 32px; height: 32px; right: 4px; }
.code-list-plain .code-li { grid-template-columns: minmax(0, 1fr); }

/* v59: přepínač účtu v horní liště */
.acct-switch { margin: 0; flex: 0 1 auto; min-width: 0; }
.acct-switch select {
    min-height: 36px; height: 36px; padding: 4px 34px 4px 12px; max-width: 240px;
    font-size: .875rem; font-weight: 650; background-color: var(--brand-soft); color: var(--brand);
    border-color: transparent; background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    text-overflow: ellipsis;
}
.brand + .acct-switch { margin-left: -8px; }
@media (max-width: 1060px) { .acct-switch select { max-width: 46vw; } }

/* v59: lidé v účtu */
.members-grid { display: grid; gap: 16px; align-items: start; margin-bottom: 16px; }
.members-grid .card { margin: 0; }
@media (min-width: 900px) { .members-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.role-pick { border: 0; padding: 0; margin: 0 0 16px; }
.role-pick legend { font-size: .875rem; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.role-pick .check { margin-bottom: 10px; }
.role-pick .check small { margin-top: 2px; font-weight: 500; }
.form-note { margin: 12px 0 0; }
.member-list { list-style: none; margin: 0; padding: 0; }
.member-item { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.member-item:last-child { border-bottom: 0; padding-bottom: 0; }
.member-who { display: grid; gap: 2px; min-width: 0; }
.member-who strong { overflow-wrap: anywhere; }
.member-who .badge { justify-self: start; margin-top: 4px; }
.member-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.member-actions form { margin: 0; }
.member-actions select { min-height: 36px; height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: .875rem; width: auto; }
.invite-card { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; border-color: var(--brand); }
.invite-card h2 { margin-bottom: 4px; }
.invite-card p { margin: 0; }
.invite-card form { margin: 0; }
.invite-actions { display: flex; gap: 8px; margin: 0; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; }
.members-card .btn { margin-top: 4px; }

/* v60: omezení člena na štítky */
.tag-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tag-check { display: inline-flex; cursor: pointer; }
.tag-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-check .tag-chip { opacity: .45; border: 1.5px solid transparent; transition: opacity .15s ease; }
.tag-check input:checked + .tag-chip { opacity: 1; border-color: currentColor; }
.tag-check input:focus-visible + .tag-chip { outline: 3px solid var(--focus); outline-offset: 2px; }
.member-scope { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.member-tags-box { flex-basis: 100%; }
.member-tags-box > summary { cursor: pointer; font-weight: 650; font-size: .875rem; color: var(--brand); width: max-content; }
.member-tags { margin-top: 10px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius); }

/* v60: správa uživatele rozdělená do oddílů, tlačítka v řádku s poli */
.user-forms { gap: 0; }
.uf-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.uf-sec:first-child { padding-top: 0; }
.uf-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.uf-sec h3 { font-size: .8125rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 0 0 10px; }
.uf-sec form { margin: 0; }
.uf-row { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: flex-end; }
.uf-row .field { flex: 1 1 140px; min-width: 0; }
.uf-row .field-grow { flex: 3 1 240px; }
.uf-row .uf-date { flex: 0 1 220px; }
.uf-row .btn { margin-bottom: 16px; }
.uf-row + .uf-row { margin-top: 2px; }
.uf-help { margin: -8px 0 8px !important; }
.uf-buttons { margin-top: 4px; }
.uf-danger .button-row form { margin: 0; }

/* v60: lidé v účtu ve správě */
.acct-members-body { margin-top: 12px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius); }
.acct-members-body .member-item { border-bottom-color: var(--line-strong); }
.acct-members-body .member-tags { background: var(--surface); }
.member-add { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.member-add .inline-form .field input, .member-add .inline-form .field select { background-color: var(--surface); }
.member-add-tags { display: grid; gap: 6px; }
.member-add p { margin: 0; }
.member-of { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.member-of .badge { text-decoration: none; }
.list-note { margin: 0 0 12px; }

/* v61: hlášení závad, upozornění, záznam změn */
.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.report-item { display: grid; gap: 12px 20px; padding: 16px 18px; margin: 0; }
@media (min-width: 820px) { .report-item { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.report-item.report-new { border-left: 4px solid var(--danger); }
.report-item.report-progress { border-left: 4px solid var(--focus); }
.report-item.report-done { opacity: .8; }
.report-top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.report-asset { color: var(--ink); text-decoration: none; }
.report-asset:hover { color: var(--brand); }
.report-body { margin: 8px 0 4px; font-size: 1rem; }
.report-main p { margin-bottom: 0; }
.report-resolution { margin-top: 6px !important; padding: 6px 10px; background: var(--ok-bg); color: var(--ok-ink); border-radius: var(--radius-s); }
.report-actions { display: grid; gap: 8px; margin: 0; }
.report-actions input[type="text"] { min-height: 40px; }
.report-actions .check, .check-small { margin: 0; font-size: .875rem; }
.check-small input { width: 18px; height: 18px; }
.notify-card { margin-top: 16px; }
.notify-head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.notify-head h2 { margin: 0; }
.log-table td { vertical-align: top; }
.nowrap { white-space: nowrap; }
.report-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .75rem; font-weight: 800; }
.log-report-state { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; }

/* v61: úvodní stránka – pět typů, sekce pro týmy, štítek s adresou */
.c-mint { --c: var(--lp-mint); --c-soft: var(--lp-mint-soft); }
@media (min-width: 1000px) { .lp-cards-5 { grid-template-columns: repeat(6, 1fr); } .lp-cards-5 .lp-card { grid-column: span 2; } .lp-cards-5 .lp-card:nth-child(4) { grid-column: 2 / span 2; } }
.lp-features { display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 640px) { .lp-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lp-features { grid-template-columns: repeat(4, 1fr); } }
.lp-feature { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 18px; transition: transform .2s ease, box-shadow .2s ease; }
.lp-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.lp-feature .lp-card-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--c-soft); color: var(--c); }
.lp-feature .lp-card-icon svg { width: 22px; height: 22px; }
.lp-feature h3 { font-size: 1rem; margin: 0 0 4px; }
.lp-feature p { margin: 0; color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
.lp-plate-promo { margin: 2px 0 0; text-align: center; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; color: var(--plate-text); }
.lp-ph-photo { color: var(--lp-amber, #E89B1A); background: var(--lp-amber-soft, #FFF0C7); }
.lp-ph-photo svg { width: 26px; height: 26px; }
.lp-illu img { filter: drop-shadow(0 18px 30px rgba(23, 35, 42, .08)); }


/* v62: ruční volba vzhledu (data-theme na <html>, cookie qrl_theme) */
:root[data-theme="light"] { color-scheme: light; }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-s); background: none; color: var(--ink-2); font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer; }
.theme-toggle:hover { color: var(--ink); background: var(--surface-2); }
.theme-toggle svg { width: 20px; height: 20px; display: none; }
.theme-toggle[data-mode="auto"] .ti-auto, .theme-toggle:not([data-mode]) .ti-auto, .theme-toggle[data-mode="light"] .ti-light, .theme-toggle[data-mode="dark"] .ti-dark { display: block; }
.theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1060px) {
    .nav .theme-toggle { min-height: 48px; width: 100%; font-size: 1rem; padding: 0 12px; }
    .nav .theme-toggle-label { position: static; width: auto; height: auto; clip: auto; }
}
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--radius); }
.theme-opt { min-height: 40px; border: 0; border-radius: var(--radius-s); background: none; color: var(--ink-2); font: inherit; font-weight: 650; font-size: .875rem; cursor: pointer; }
.theme-opt[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* v62: stránka Účet – hlavní sloupec a postranní panel, jednotné karty */
.account-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .account-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.account-main, .account-side { display: grid; gap: 16px; min-width: 0; }
.account-layout .card { margin: 0; }
.account-layout .card > h2 { margin-bottom: 14px; }
.acc-sub + .acc-sub { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.acc-sub h3 { font-size: .8125rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 0 0 12px; }
.side-actions .btn { flex: 1 1 auto; }
.plan-card { margin-bottom: 16px; }

/* v64: Upravit i v záhlaví kódu, při úpravách lišta s Uložit vždy na očích, VIP tlačítko jen v úpravách */
@media (min-width: 640px) {
    .is-editing .save-bar {
        position: sticky; bottom: 0; z-index: 10; margin: 0 -16px; padding: 12px 16px;
        background: color-mix(in srgb, var(--bg) 90%, transparent);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid var(--line);
    }
}
.is-viewing [data-vip-apply], .is-viewing [data-vip-msg] { display: none; }

/* v65: při úpravách je v záhlaví Uložit a Zrušit (na telefonu jen spodní plovoucí lišta) */
.is-editing .head-actions a[href="/app/codes/new"], .is-editing .head-actions a[href="/app"]:not([data-edit-only]) { display: none; }
@media (max-width: 639px) { .head-actions .head-edit { display: none !important; } }

/* v67: skener štítků */
.nav-scan { gap: 6px; }
.nav-scan svg { width: 18px; height: 18px; }
.scan-card { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.scan-view { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-l); overflow: hidden; background: #0d1414; display: grid; place-items: center; }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 16%; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); border: 3px solid rgba(255, 255, 255, .85); opacity: 0; transition: opacity .2s ease; }
.scan-card.is-live .scan-frame { opacity: 1; }
.scan-idle { position: relative; color: #cfd8d5; margin: 0; }
.scan-result { min-height: 1.5em; font-weight: 650; }
.scan-result.is-ok { color: var(--ok-ink); }
.scan-result.is-info { color: var(--info-ink); }
.scan-result.is-warn { color: var(--danger); }
.scan-buttons .btn { flex: 1 1 160px; }
.scan-manual { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.scan-manual .field { flex: 1; margin: 0; }

/* v67: rychlý zápis po naskenování (karta zařízení, přihlášený technik) */
.quick-actions form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0; }
.quick-btn { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 14px; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 750; font-size: 1rem; text-align: left; text-decoration: none; cursor: pointer; }
.quick-btn svg { width: 26px; height: 26px; flex: none; padding: 5px; border-radius: 10px; box-sizing: content-box; }
.quick-btn span { display: grid; line-height: 1.2; }
.quick-btn small { font-weight: 600; font-size: .75rem; color: var(--ink-2); }
.quick-btn:hover { border-color: var(--brand); color: var(--ink); }
.q-ok svg { background: var(--ok-bg); color: var(--ok-ink); }
.q-fix svg { background: var(--warn-bg); color: var(--warn-ink); }
.q-log svg { background: var(--info-bg); color: var(--info-ink); }

/* v67: náhled PDF a platnost dokumentu */
.file-icon.has-thumb { padding: 0; background: #fff; border: 1px solid var(--line); overflow: hidden; height: auto; min-height: 0; align-self: center; }
.file-icon.has-thumb canvas { display: block; width: 100%; height: auto; }
.doc-valid { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); }
.doc-valid.is-expired { background: var(--danger-bg); color: var(--danger); }
.file-valid { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: .8125rem; font-weight: 650; color: var(--ink-2); }
.file-valid input { min-height: 34px; height: 34px; width: auto; padding: 4px 8px; font-size: .875rem !important; }
.file-valid small { font-weight: 500; }
.dup-card { padding: 14px 18px; display: grid; gap: 6px; } .dup-card small { font-size: .8125rem; }

/* v67: Správa, stav služby */
.health-grid { display: grid; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (min-width: 900px) { .health-grid { grid-template-columns: repeat(2, 1fr); } }
.health-card { margin: 0; }
.health-list { list-style: none; margin: 0 0 12px; padding: 0; }
.health-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.health-list li:last-child { border-bottom: 0; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--ok-ink); }
.health-warn .health-dot { background: var(--focus); }
.health-error .health-dot { background: var(--danger); }
.health-label small { display: block; color: var(--ink-2); font-size: .8125rem; }
.health-value { font-weight: 650; text-align: right; overflow-wrap: anywhere; max-width: 60vw; }
.health-error .health-value { color: var(--danger); }
.health-log { white-space: pre-wrap; font-size: .75rem; background: var(--surface-2); padding: 12px; border-radius: var(--radius); max-height: 360px; overflow: auto; margin: 0; }

/* v67: podmínky a ochrana údajů */
.legal h1.lp-h2 { text-align: left; margin-bottom: 4px; }
.legal h2 { font-size: 1.125rem; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--ink-2); line-height: 1.6; }
.legal ul { padding-left: 1.2em; }
.legal-table td { vertical-align: top; font-size: .875rem; }
.sheet-presets { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.sheet-presets .field { margin-bottom: 8px; }
.preset-save { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-save input { flex: 1 1 160px; min-height: 36px; height: 36px; padding: 4px 10px; font-size: .875rem !important; }
.doc-text .doc-valid { justify-self: start; align-self: flex-start; width: max-content; margin: 4px 0 0; }

/* v68: položky menu se nikdy nelámou uprostřed slov */
.nav a, .nav-logout button, .theme-toggle { white-space: nowrap; }
@media (min-width: 1061px) { .nav { gap: 2px; } .nav a, .nav-logout button { padding: 0 10px; } }

/* v69: inventura – pokračovat a smazat */
.inv-hist-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; white-space: nowrap; }
.inv-hist-actions form { display: inline; margin: 0; }
.link-danger { color: var(--danger) !important; }
.inv-continue { margin-top: 12px; }
.inv-continue p { margin: 0 0 10px; }

/* v70: stav hlášení pro oznamovatele */
.report-status { max-width: 560px; }
.ok-mark { background: var(--ok-bg); color: var(--ok-ink); }
.ok-mark svg { width: 34px; height: 34px; }
.status-link { margin: 0 0 18px; }
.status-card { text-align: left; }
.status-text { font-size: 1.0625rem; margin: 6px 0 16px; }
.status-steps { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.status-steps li { display: grid; justify-items: center; gap: 6px; font-size: .875rem; font-weight: 650; color: var(--ink-2); text-align: center; position: relative; }
.status-dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line-strong); background: var(--surface); }
.status-steps .is-past .status-dot, .status-steps .is-current .status-dot { border-color: var(--brand); background: var(--brand); }
.status-steps .is-current { color: var(--brand); }
.status-done { padding: 10px 12px; border-radius: var(--radius); background: var(--ok-bg); color: var(--ok-ink); font-weight: 650; }
.ok-mark { width: 64px; height: 64px; border-radius: 20px; display: inline-grid; place-items: center; font-size: 1rem; }
.log-photo-field input[type="file"] { font-size: .875rem; }

/* v70: mapa majetku v aplikaci */
.asset-overview-map { height: min(70vh, 640px); padding: 0; overflow: hidden; }
.map-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; padding: 0; font-size: .875rem; }
.map-legend li { display: inline-flex; align-items: center; gap: 6px; }
.map-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.map-dot-pin span { display: block; width: 18px; height: 18px; margin: 2px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.tone-ok { --tone: #2E9E6A; } .tone-due { --tone: #E2A23B; } .tone-report { --tone: #E8743B; } .tone-missing { --tone: #C0392B; } .tone-off { --tone: #8A9A96; }
.map-dot, .map-dot-pin span { background: var(--tone); }
.pop-state { font-weight: 700; color: var(--tone); margin-top: 2px; }
.pop-sub { color: #555; font-size: 12px; }
.inv-report .wide-input { width: 60%; border: 0; border-bottom: 1px dotted #999; background: none; font: inherit; }
.bulk-retire { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .bulk-retire summary { cursor: pointer; font-weight: 650; color: var(--danger); margin-bottom: 10px; } .retire-card form { padding: 0 20px 20px; } .retire-card .field-grid { grid-template-columns: 1fr; }
.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px; display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.dropdown-menu a { padding: 9px 10px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.dropdown-menu a:hover { background: var(--surface-2); }

/* --- Poptávka štítků /stitky (v71) --- */
.lbl-hero { padding-bottom: 24px; }
.lbl-title { margin-bottom: 12px; }
.lbl-steps { list-style: none; counter-reset: s; padding: 0; margin: 32px auto 0; display: grid; gap: 12px; max-width: 980px; }
@media (min-width: 760px) { .lbl-steps { grid-template-columns: repeat(4, 1fr); } }
.lbl-steps li { counter-increment: s; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 14px 52px; position: relative; }
.lbl-steps li::before { content: counter(s); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 800; display: grid; place-items: center; font-size: .875rem; }
.lbl-steps strong { display: block; }
.lbl-steps span { color: var(--ink-2); font-size: .875rem; }
.lbl-section { padding-top: 24px; }
.lbl-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 980px) { .lbl-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; } .lbl-aside { position: sticky; top: 84px; } }
.lbl-form { display: grid; gap: 16px; min-width: 0; }
.lbl-group { border: 1px solid var(--line); margin: 0; min-width: 0; }
.lbl-group legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.125rem; margin: 0 0 14px; padding: 0; }
.lbl-group legend + * { clear: both; }
.lbl-num { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .875rem; flex: none; }
.lbl-mats { display: grid; gap: 10px; }
@media (min-width: 600px) { .lbl-mats { grid-template-columns: repeat(2, 1fr); } }
.lbl-mat { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.lbl-mat:hover { border-color: var(--brand); }
.lbl-mat:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.lbl-mat input { position: absolute; opacity: 0; pointer-events: none; }
.lbl-mat:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.lbl-mat strong { display: block; }
.lbl-mat small { color: var(--ink-2); font-size: .8125rem; line-height: 1.35; display: block; margin-top: 2px; }
.lbl-swatch { width: 38px; height: 38px; border-radius: 9px; flex: none; border: 1px solid rgba(0,0,0,.12); }
.mat-alu { background: linear-gradient(135deg, #f4f7f6, #d6dedb 55%, #c2ccc9); --engrave: #1d2528; }
.mat-black { background: linear-gradient(135deg, #3a4447, #1c2326); --engrave: #e9eef0; }
.mat-steel { background: repeating-linear-gradient(90deg, #cfd5d6 0 2px, #c3cacc 2px 4px); --engrave: #263034; }
.mat-wood { background: linear-gradient(135deg, #ebcb9d, #d6ab73 55%, #c79760); --engrave: #3a2412; }
.mat-acrylic { background: linear-gradient(135deg, #3b7fc4, #2a63a0); --engrave: #ffffff; }
.mat-sticker { background: #fff; --engrave: #111; box-shadow: inset 0 0 0 1px #d6dcd9; }
.lbl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.lbl-chip { position: relative; cursor: pointer; }
.lbl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lbl-chip span, .lbl-chip-btn { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 650; font-size: .9375rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.lbl-chip-btn { cursor: pointer; font: inherit; font-weight: 600; font-size: .875rem; padding: 6px 12px; }
.lbl-chip:hover span, .lbl-chip-btn:hover { border-color: var(--brand); }
.lbl-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.lbl-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.lbl-chips-sm span { font-size: .875rem; padding: 7px 12px; }
.lbl-custom { margin-bottom: 14px; max-width: 360px; }
.lbl-hint { margin: 0; }
.lbl-radios { display: grid; gap: 2px; margin-bottom: 6px; }
.lbl-radios .check small, .lbl-group .check small { display: block; font-weight: 450; color: var(--ink-2); }
.lbl-submit { width: 100%; margin-top: 4px; }
@media (min-width: 600px) { .lbl-submit { width: auto; } }
.lbl-preview-card { padding: 20px; }
.lbl-stage { min-height: 280px; display: grid; place-items: center; border-radius: var(--radius); background: radial-gradient(circle at 30% 20%, var(--surface), var(--surface-2)); border: 1px dashed var(--line); margin-bottom: 16px; padding: 16px; overflow: hidden; }
.lbl-plate { position: relative; width: 200px; height: 200px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3%; padding: 7%; box-shadow: 0 10px 24px rgba(23,35,42,.22); color: var(--engrave); transition: border-radius .2s; container-type: size; }
.lbl-plate.shape-square { border-radius: 2px; }
.lbl-plate.shape-round { border-radius: 50%; padding: 16%; }
.lbl-qr { flex: 1 1 0; min-height: 0; width: auto; aspect-ratio: 1; max-width: 100%; background: transparent; }
.lbl-texts { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; min-width: 0; }
.lbl-plate.is-wide { flex-direction: row; gap: 6%; padding: 6%; }
.lbl-plate.is-wide .lbl-qr { flex: none; height: 100%; }
.lbl-plate.is-wide .lbl-texts { flex: 1; }
.lbl-plate.is-wide .lbl-code { font-size: clamp(8px, 16cqh, 24px); }
.lbl-plate.is-wide .lbl-foot { font-size: clamp(6px, 10cqh, 15px); white-space: normal; }
.lbl-qr svg { width: 100%; height: 100%; display: block; }
.lbl-qr svg path { fill: var(--engrave); }
.lbl-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 800; letter-spacing: .08em; font-size: clamp(8px, 9cqmin, 22px); line-height: 1; }
.lbl-foot { font-size: clamp(6px, 6.5cqmin, 15px); font-weight: 600; opacity: .85; line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbl-hole { display: none; position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.mount-holes .lbl-hole { display: block; top: 50%; transform: translateY(-50%); }
.mount-holes .lbl-hole-a { left: 3.5%; }
.mount-holes .lbl-hole-b { right: 3.5%; }
.mount-tie .lbl-hole-a { display: block; top: 3.5%; left: 50%; transform: translateX(-50%); }
.mount-holes, .mount-tie { padding-left: 13%; padding-right: 13%; }
.mount-tie { padding-top: 13%; }
.lbl-sum { display: grid; gap: 8px; margin: 0 0 10px; }
.lbl-sum div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.lbl-sum dt { color: var(--ink-2); font-size: .875rem; }
.lbl-sum dd { margin: 0; font-weight: 650; text-align: right; }
.lbl-sum-wide dd { text-align: left; }
.lbl-sum-wide div { display: grid; grid-template-columns: 140px 1fr; }
.lbl-thanks { text-align: center; padding: 32px 24px; }
.lbl-thanks .lbl-sum { text-align: left; margin: 24px 0; }
.lbl-thanks-actions { justify-content: center; }
.lbl-orders { display: grid; gap: 12px; }
.lbl-order summary { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; cursor: pointer; list-style: none; }
.lbl-order summary::-webkit-details-marker { display: none; }
.lbl-order summary > .muted { grid-column: 2 / -1; }
@media (min-width: 760px) { .lbl-order summary { grid-template-columns: auto 1fr auto auto; } .lbl-order summary > .muted { grid-column: auto; } }
.lbl-order-id { font-weight: 800; color: var(--ink-2); }
.lbl-order-main strong { display: block; }
.lbl-order-state { font-size: .8125rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); }
.lbl-order.status-new .lbl-order-state { background: var(--lp-coral, #FF7A59); color: #fff; }
.lbl-order.status-quoted .lbl-order-state, .lbl-order.status-ordered .lbl-order-state { background: var(--brand-soft); color: var(--brand); }
.lbl-order-body { margin-top: 16px; }
.lbl-order-form { display: grid; gap: 10px; align-items: end; }
@media (min-width: 760px) { .lbl-order-form { grid-template-columns: 220px 1fr auto; } .lbl-order-form .field { margin: 0; } }
.lbl-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sheet-order { margin-top: 12px; }
@media (max-width: 979px) { .lbl-aside { order: -1; } .lbl-stage { min-height: 200px; } .lbl-preview-card .lbl-sum div:nth-child(n+3) { display: none; } }
.lbl-max { grid-column: 1 / -1; margin-top: -6px; }

/* v73: košík QR štítků v aplikaci */
.nav-cart { gap: 6px; }
.nav-cart svg { width: 18px; height: 18px; }
.nav-cart .tab-badge { margin-left: 0; }
.cart-empty .button-row { justify-content: center; }
.cart-all { margin-bottom: 16px; }
.cart-list { display: grid; gap: 12px; }
.cart-item { padding: 14px 16px; }
.cart-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.cart-item-head a { text-decoration: none; color: var(--ink); font-weight: 650; display: inline-flex; gap: 8px; align-items: center; min-width: 0; }
.cart-remove { margin-left: auto; }
.cart-swatch { width: 30px; height: 30px; border-radius: 7px; flex: none; border: 1px solid rgba(0,0,0,.12); }
.cart-swatch.shape-round { border-radius: 50%; }
.cart-swatch.shape-square { border-radius: 2px; }
.cart-row-fields { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.cart-row-fields .field { margin: 0; }
@media (min-width: 900px) { .cart-row-fields { grid-template-columns: 1.4fr 1fr 1fr 1.6fr 90px; } .cart-all .cart-row-fields { grid-template-columns: 1.4fr 1fr 1fr 1.6fr auto; } }
.cart-actions { align-items: center; }
.cart-order { margin-top: 8px; }
.cart-order h2 { margin-top: 0; }
.label-order-box { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.label-order-box > summary { display: flex; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.label-order-box > summary::-webkit-details-marker { display: none; }
.label-order-box > summary svg { width: 22px; height: 22px; color: var(--brand); flex: none; }
.label-order-box > summary small { display: block; color: var(--ink-2); font-size: .8125rem; }
.label-order-form { padding: 0 12px 12px; display: grid; gap: 8px; }
.label-order-form .field { margin: 0; }
.label-order-form .check { margin: 0; }

/* v77: výběr typu s náhledem jako na úvodní stránce */
.type-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 900px) { .type-options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.type-option { flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 10px 12px; padding: 10px 10px 14px; }
.type-preview { flex: 0 0 100%; height: 112px; border-radius: 10px; background: linear-gradient(160deg, var(--tc-soft), color-mix(in srgb, var(--tc-soft) 35%, var(--surface))); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding-top: 14px; }
.tp-screen { width: 64%; max-width: 150px; height: 100%; background: var(--surface); border-radius: 12px 12px 0 0; box-shadow: 0 4px 14px rgba(23,35,42,.12); padding: 10px 10px 0; display: flex; flex-direction: column; gap: 6px; border: 1px solid color-mix(in srgb, var(--tc) 18%, var(--line)); border-bottom: 0; transition: transform .2s ease; }
.type-option:hover .tp-screen, .type-option:has(input:checked) .tp-screen { transform: translateY(-4px); }
.tp-screen i, .tp-line { display: block; height: 6px; border-radius: 3px; background: var(--line); font-style: normal; }
.tp-title { height: 8px !important; background: color-mix(in srgb, var(--ink) 55%, transparent) !important; }
.w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; }
.tp-row { display: flex; gap: 8px; align-items: center; }
.tp-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--tc); flex: none; }
.tp-lines { flex: 1; display: grid; gap: 4px; }
.tp-btn { margin-top: auto; margin-bottom: 8px; display: block; text-align: center; font-size: .625rem; font-weight: 800; color: #fff; background: var(--tc); border-radius: 6px; padding: 4px 0; line-height: 1.2; }
.tp-btn-warn { background: var(--coral); }
.tp-file { display: flex; gap: 6px; align-items: center; }
.tp-file b { font-size: .5rem; font-weight: 800; color: #fff; background: var(--tc); border-radius: 3px; padding: 2px 3px; line-height: 1; min-width: 18px; text-align: center; }
.tp-video b { background: var(--coral); }
.tp-file i { flex: none; }
.tp-url { display: flex; align-items: center; height: 14px; border-radius: 7px; background: var(--surface-2); padding: 0 6px; border: 1px solid var(--line); }
.tp-url i { height: 4px; }
.tp-arrow { align-self: center; font-size: 1.25rem; font-weight: 800; color: var(--tc); line-height: 1; }
.tp-page { flex: 1; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--tc-soft) 60%, var(--surface)); padding: 8px 6px; display: grid; gap: 5px; align-content: start; }
.tp-chip { align-self: flex-start; font-size: .5625rem; font-weight: 800; color: var(--mint-ink); background: var(--mint-soft); border-radius: 999px; padding: 2px 7px; }
.tp-kv { display: flex; justify-content: space-between; }
.tp-center { align-items: center; color: var(--tc); }
.tp-center svg { width: 34px; height: 34px; margin-top: 4px; }
.tp-center .tp-line { width: 55%; }
.tp-center .tp-btn { align-self: stretch; }
.type-option .type-icon { width: 36px; height: 36px; border-radius: 10px; }
.type-option .type-icon svg { width: 20px; height: 20px; }
.type-option .type-option-body { flex: 1 1 0; }
.type-option:has(input:checked)::after { top: 16px; right: 16px; }
@media (max-width: 559px) { .type-preview { height: 92px; } .type-option .type-icon { display: none; } .type-option-body span { font-size: .8125rem; } }

.type-option { display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; }
.type-option .type-preview { grid-column: 1 / -1; }
@media (max-width: 559px) { .type-option { grid-template-columns: minmax(0, 1fr); } }
.tp-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; padding-right: 4px; }
@media (max-width: 559px) { .tp-screen { width: 78%; padding: 8px 8px 0; gap: 5px; } .tp-btn { font-size: .5625rem; } }

/* v78: otevření kódu opsaného ze štítku (úvodní stránka) */
.lp-open { padding: 8px 0 24px; }
.lp-open-card { display: grid; gap: 18px; align-items: center; padding: 22px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(23,35,42,.06); }
@media (min-width: 900px) { .lp-open-card { grid-template-columns: 1.1fr auto 1.2fr; gap: 28px; padding: 24px 28px; } }
.lp-open-text h2 { font-size: 1.25rem; margin: 0 0 4px; }
.lp-open-text p { margin: 0; color: var(--ink-2); }
.lp-open-demo { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 10px 14px; border-radius: 12px; background: linear-gradient(135deg, #f4f7f6, #d6dedb); color: #1d2528; box-shadow: 0 4px 12px rgba(23,35,42,.14); }
.lp-open-qr svg { width: 30px; height: 30px; display: block; }
.lp-open-url { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: .9375rem; letter-spacing: .02em; }
.lp-open-url mark { background: var(--lp-amber, #F2A91E); color: #1d2528; border-radius: 4px; padding: 1px 4px; box-shadow: 0 0 0 2px rgba(242,169,30,.35); }
.lp-open-form { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.lp-open-prefix { display: flex; align-items: center; padding: 0 0 0 14px; border: 1.5px solid var(--line-strong); border-right: 0; border-radius: 10px 0 0 10px; background: var(--surface-2); color: var(--ink-2); font-weight: 650; white-space: nowrap; margin-right: -8px; padding-right: 4px; }
.lp-open-form input { flex: 1; min-width: 0; border-radius: 0 10px 10px 0; text-transform: uppercase; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; letter-spacing: .08em; font-size: 1.0625rem; }
.lp-open-form input::placeholder { letter-spacing: .08em; opacity: .45; }
.lp-open-form .btn { flex: none; }
@media (max-width: 420px) { .lp-open-prefix { font-size: .875rem; padding-left: 10px; } .lp-open-form .btn { padding-left: 14px; padding-right: 14px; } }

/* v80: upozornění v patičce veřejné stránky a u hlášení */
.public-owner-note { flex-basis: 100%; text-align: center; font-size: .75rem; color: var(--ink-2); opacity: .8; }
.report-112 { text-align: center; margin: 8px 0 0; }

/* v81: stránka nedostupného kódu */
.message-icon { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; margin: 0 auto 18px; background: var(--tone-soft, var(--surface-2)); color: var(--tone-ink, var(--ink-2)); box-shadow: 0 8px 22px rgba(23,35,42,.08); }
.message-icon svg { width: 38px; height: 38px; }
.message-icon.tone-amber { --tone-soft: var(--amber-soft); --tone-ink: var(--amber-ink); }
.message-icon.tone-violet { --tone-soft: var(--violet-soft); --tone-ink: var(--violet-ink); }
.message-icon.tone-sky { --tone-soft: var(--sky-soft); --tone-ink: var(--sky-ink); }
.message-icon.tone-mint { --tone-soft: var(--mint-soft); --tone-ink: var(--mint-ink); }
.message-icon.tone-coral { --tone-soft: var(--coral-soft); --tone-ink: var(--coral-ink); }
.message-hint { color: var(--ink-2); }
.message-contact { max-width: 420px; margin: 8px auto 0; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.message-contact > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; text-align: center; color: var(--brand); list-style: none; }
.message-contact > summary::-webkit-details-marker { display: none; }
.message-contact form { padding: 0 16px 16px; }
.message-contact .muted { text-align: center; margin: 8px 0 0; max-width: none; }
.message-about { max-width: 420px; margin: 28px auto 0; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); display: grid; gap: 4px; font-size: .875rem; color: var(--ink-2); }
.message-about strong { color: var(--ink); }
.message-about a { font-weight: 700; }
.bulk-url { flex: 2 1 240px; width: auto; }
.export-card .button-row { margin-top: 8px; }

/* v84: verze dokumentů */
.file-version-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.file-version-btn { position: relative; cursor: pointer; }
.file-version-btn.is-busy { opacity: .6; pointer-events: none; }
.file-versions { margin-top: 8px; }
.file-versions > summary { cursor: pointer; font-size: .875rem; font-weight: 650; color: var(--brand); }
.file-versions ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.file-versions li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 6px 10px; border-radius: var(--radius-s); background: var(--surface-2); font-size: .875rem; }
.file-versions li a { font-weight: 650; }
.file-version-actions { margin-left: auto; display: inline-flex; gap: 10px; }
.logo-opts { display: grid; gap: 8px; }

/* v86: logo k poptávce štítků */
.logo-order { display: grid; gap: 6px; margin: -4px 0 12px 32px; }
.mat-alu { --plate-bg: #e3e9e7; } .mat-black { --plate-bg: #2a3235; } .mat-steel { --plate-bg: #cbd1d2; } .mat-wood { --plate-bg: #dfb47b; } .mat-acrylic { --plate-bg: #3474b6; }
.lbl-qr { position: relative; }
.lbl-qr-logo { display: none; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); background: var(--plate-bg, #fff) center / 78% no-repeat; border-radius: 12%; box-shadow: 0 0 0 3px var(--plate-bg, #fff); color: var(--engrave); font: 800 clamp(6px, 7cqmin, 13px)/1 ui-monospace, Menlo, monospace; align-items: center; justify-content: center; letter-spacing: .04em; }
.logo-qr .lbl-qr-logo { display: flex; }
.lbl-qr-logo:not(.has-img) { outline: 1.5px dashed var(--engrave); outline-offset: -4px; }
@media (max-width: 559px) { .logo-order { margin-left: 0; } }

/* v87: žádosti o znovuzapnutí a předání kódu */
.message-requests { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 8px; }
.code-request-form { max-width: 420px; margin: 0 auto; text-align: left; }
.code-request-form .lbl-radios { border: 0; padding: 0; margin: 0 0 8px; }
.request-kind small { display: block; font-weight: 450; color: var(--ink-2); }
.request-msg { max-width: 420px; margin: 0 auto 16px; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--radius-s) var(--radius-s) 0; text-align: left; color: var(--ink); }
.request-actions { justify-content: center; margin-top: 12px; }
.request-done { font-weight: 650; }

/* v88: plovoucí lišta akcí (Upravit, Zrušit/Uložit, Uložit změny v košíku). Lišta v obsahu je s JS statická,
   plovoucí kopie se ukáže, jen když originál není vidět. */
.js .save-bar[data-float] { position: static; margin: 0; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cart-items { display: grid; gap: 12px; }
body.has-fab .main { padding-bottom: 96px; }

.fab-dock {
    position: fixed; z-index: 40;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 8px;
    max-width: calc(100% - 24px);
    padding: 6px;
    border: 1px solid var(--line); border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .12);
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.fab-dock.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.fab-row { display: flex; gap: 6px; }
.fab-dock .btn { min-height: 42px; padding: 0 16px; }
.fab-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fab-note { display: none; align-items: center; gap: 7px; padding: 0 6px 0 10px; font-size: .8125rem; font-weight: 650; color: var(--warn-ink); white-space: nowrap; }
.fab-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--focus); }
.fab-dock.is-dirty .fab-note { display: inline-flex; }

/* Jediné tlačítko (Upravit) = kulaté plovoucí tlačítko. */
.fab-dock.is-fab { padding: 0; border: 0; border-radius: 999px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.fab-dock.is-fab .btn { min-height: 52px; padding: 0 22px 0 18px; border-radius: 999px; font-size: 1rem; }

@media (max-width: 639px) {
    .fab-dock:not(.is-fab) {
        left: calc(10px + env(safe-area-inset-left, 0px)); right: calc(10px + env(safe-area-inset-right, 0px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: none;
    }
    .fab-dock:not(.is-fab) .fab-row { flex: 1; }
    .fab-dock:not(.is-fab) .btn { flex: 1 1 0; min-height: 50px; padding: 0 12px; }
    .fab-dock:not(.is-fab) .fab-primary { flex-grow: 1.7; }
    .fab-dock.is-fab { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    /* v157: i na telefonu text „Neuložené změny“ (dřív jen tečka) – jako štítek nad lištou */
    .fab-dock.is-dirty .fab-note { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 12px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); }
}
@media (prefers-reduced-motion: reduce) { .fab-dock, .fab-dock.is-shown { transition: none; transform: none; } }
@media print { .fab-dock { display: none !important; } }

/* v89: potvrzovací dialog v designu aplikace (místo okna prohlížeče) */
.btn-danger { background: var(--danger); color: var(--on-brand); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 86%, var(--ink)); color: var(--on-brand); }
.qrl-dialog {
    width: min(440px, calc(100% - 32px)); max-width: none; padding: 0;
    border: 1px solid var(--line); border-radius: var(--radius-l);
    background: var(--surface); color: var(--ink);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .14);
}
.qrl-dialog[open] { animation: qrl-dialog-in .16s ease-out; }
.qrl-dialog::backdrop { background: rgba(12, 20, 19, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.qrl-dialog-body { padding: 24px 24px 4px; }
.qrl-dialog-title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 750; line-height: 1.3; }
.qrl-dialog-msg { margin: 0; color: var(--ink-2); line-height: 1.55; overflow-wrap: anywhere; }
.qrl-dialog-title[hidden] + .qrl-dialog-msg { color: var(--ink); font-size: 1rem; font-weight: 600; }
.qrl-dialog.is-danger { border-top: 4px solid var(--danger); }
.qrl-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 20px 24px 24px; }
@keyframes qrl-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
/* Na telefonu jako panel u spodního okraje, velká tlačítka pod palcem. */
@media (max-width: 639px) {
    .qrl-dialog { width: 100%; margin: auto 0 0; border-radius: var(--radius-l) var(--radius-l) 0 0; border-bottom: 0; }
    .qrl-dialog-actions { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    .qrl-dialog-actions .btn { flex: 1 1 140px; min-height: 50px; }
    @keyframes qrl-dialog-in { from { transform: translateY(24px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .qrl-dialog[open] { animation: none; } }

/* v90: platnost od–do, potvrzení seznámení, rozšířené funkce, hlídání štítků, obchůzky, Co je nového */
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
.validity { margin: 4px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.validity-dates { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .validity-dates { grid-template-columns: 1fr 1fr; } }
.validity .check { margin-bottom: 8px; }
.validity > small { display: block; margin-bottom: 10px; }
.validity-more > summary { cursor: pointer; font-weight: 650; padding: 6px 0; }
.validity-more[open] > summary { margin-bottom: 10px; }

.card-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.card-head-row h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.ack-rows { list-style: none; margin: 0; padding: 0; }
.ack-rows li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ack-who { min-width: 0; overflow-wrap: anywhere; }
.ack-when { grid-column: 1; overflow-wrap: anywhere; }
.ack-del { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
.ack-box { margin-top: 20px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.ack-box h2 { font-size: 1.0625rem; margin: 0 0 4px; }
.ack-box > p { margin: 0 0 14px; }
.ack-agree span { font-weight: 550; }

.module-list .module-opt { margin-bottom: 14px; }
.module-opt small { font-weight: 450; }
.stale-card .field-wide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.uf-modules { display: grid; gap: 4px; }
.uf-modules .check { margin-bottom: 6px; font-weight: 550; }

.news-bar { background: var(--brand-soft); color: var(--ink); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.news-actions { display: inline-flex; align-items: center; gap: 14px; }
.news-actions form { margin: 0; }
.changelog-ver { margin-bottom: 16px; }
.changelog-ver h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--ink-2); }
.changelog-ver.is-new { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.changelog-items { list-style: none; margin: 0; padding: 0; }
.changelog-items li { padding: 12px 0; border-top: 1px solid var(--line); }
.changelog-items li:first-child { border-top: 0; padding-top: 4px; }
.changelog-items p { margin: 4px 0; color: var(--ink-2); max-width: 70ch; }
.changelog-items a { font-weight: 700; }

/* Obchůzky */
.patrol-routes { display: grid; gap: 16px; margin-bottom: 20px; }
@media (min-width: 860px) { .patrol-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.patrol-route.is-over { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.patrol-route-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.patrol-route-head h2 { margin: 0; }
.patrol-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.patrol-facts dt { font-size: .75rem; font-weight: 700; color: var(--ink-2); }
.patrol-facts dd { margin: 2px 0 0; font-weight: 600; }
.patrol-late { color: var(--danger); }
.patrol-route .button-row form, .patrol-finish .button-row form { margin: 0; }
.patrol-runs { list-style: none; margin: 0; padding: 0; }
.patrol-runs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.patrol-runs a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); min-width: 0; }
.patrol-run-state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.patrol-progress { display: grid; gap: 6px; margin: 0 0 14px; }
.patrol-progress .quota-bar { height: 8px; margin: 0; }
.patrol-scan { margin-bottom: 14px; }
.patrol-scan svg { width: 20px; height: 20px; }
.patrol-checklist ul { margin: 0; padding: 0 20px 18px 40px; display: grid; gap: 4px; }
.patrol-checklist { margin-bottom: 14px; }
.patrol-places { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.patrol-place { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 90px; }
.patrol-place.is-ok { background: color-mix(in srgb, var(--ok-bg) 45%, var(--surface)); }
.patrol-place.is-defect { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.patrol-place.is-focus, .patrol-place:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); border-color: var(--brand); }
.patrol-place-head { display: flex; align-items: flex-start; gap: 10px; }
.patrol-dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; border: 2px solid var(--line-strong); }
.is-ok .patrol-dot { background: var(--ok-ink); border-color: var(--ok-ink); }
.is-defect .patrol-dot { background: var(--danger); border-color: var(--danger); }
.patrol-place-name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.patrol-note { margin: 8px 0 0 22px; }
.patrol-by { margin: 4px 0 0 22px; }
.patrol-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 22px; }
.patrol-actions > form { margin: 0; }
.patrol-actions .btn { min-height: 46px; }
.patrol-defect > summary { list-style: none; }
.patrol-defect > summary::-webkit-details-marker { display: none; }
.patrol-defect[open] { flex: 1 1 100%; }
.patrol-defect[open] > summary { margin-bottom: 10px; }
.patrol-defect form .field { margin-bottom: 10px; }
.patrol-undo { margin: 8px 0 0 22px; }
@media (max-width: 639px) {
    .patrol-actions { margin-left: 0; }
    .patrol-actions > form { flex: 1 1 0; }
    .patrol-actions > form .btn, .patrol-defect > summary.btn { width: 100%; min-height: 50px; }
    .patrol-defect { flex: 1 1 0; }
    .patrol-defect[open] { flex-basis: 100%; }
}
.patrol-delete { margin-top: 16px; }
.report-sign { display: flex; flex-wrap: wrap; gap: 24px 60px; margin-top: 40px; }
.patrol-report .report-table td, .patrol-report .report-table th { vertical-align: top; }

/* v91: v Moje kódy u každého kódu odkaz „Otevřít jako návštěvník“ (jako ve správě) */
.code-li { grid-template-columns: auto minmax(0, 1fr) auto; }
.code-list-plain .code-li { grid-template-columns: minmax(0, 1fr) auto; }
.code-open { width: 40px; height: 40px; margin: 0; border: 1px solid var(--line); background: var(--surface); }
.code-open:hover { border-color: var(--brand); }
.code-open svg { width: 18px; height: 18px; }

/* v92: veřejná a neveřejná část */
.vis-grid { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .vis-grid { grid-template-columns: 1fr 1fr; } }
.vis-field { margin-bottom: 12px; }
.file-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: .8125rem; font-weight: 650; color: var(--ink-2); }
.file-vis select { width: auto; min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: .875rem; }
.lock-scope-opts { margin: 4px 0 14px; }
.lock-scope-opts .field-label { display: block; font-size: .875rem; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; }
.lock-scope-opts .check { margin-bottom: 8px; }
.vis-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .01em; vertical-align: middle; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.vis-tag.vis-2 { background: var(--brand-soft); color: var(--brand); }
.doc-text .vis-tag { margin: 3px 0 2px; justify-self: start; }
.unlock-part { margin-top: 20px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.unlock-part-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.unlock-part-head h2 { font-size: 1.0625rem; margin: 0 0 2px; }
.unlock-part-head p { margin: 0; }
.unlock-part-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.unlock-part-ico svg { width: 22px; height: 22px; }
.unlock-part .lock-note { margin: 0 0 12px; }
/* Oprava: nápověda u „Nahrát novou verzi“ se na telefonu nezalamovala a stránka přetékala do šířky. */
.file-version-row .small { white-space: normal; overflow: visible; min-width: 0; flex: 1 1 160px; }

/* v93: proužek nahoře na webu (zkušební provoz, údržba) */
.site-banner { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 9px 16px; font-size: .875rem; font-weight: 600; line-height: 1.4; text-align: center; background: var(--brand-soft); color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.site-banner a { color: inherit; font-weight: 750; }
.site-banner-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.site-banner-warn { background: var(--warn-bg); color: var(--warn-ink); border-bottom-color: color-mix(in srgb, var(--warn-ink) 25%, transparent); }
.site-banner-warn .site-banner-dot { background: var(--focus); }
.banner-admin { margin-bottom: 20px; }
@media print { .site-banner { display: none; } }

/* v94: ceník s pěti tarify v jedné řadě na širokém displeji */
@media (min-width: 1080px) { .lp-plans { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .lp-plans .lp-price { font-size: 1.5rem; } }

.lp-price-unit { display: block; margin-top: 2px; font-size: .875rem; font-weight: 650; letter-spacing: 0; line-height: 1.3; color: var(--ink-2); }
.lp-plan > ul { margin-top: 4px; }

/* v95: náhled jako návštěvník, seznam toho, co odemkne heslo, dvě tlačítka ve zprávě */
.link-actions > :last-child:nth-child(3) { grid-column: 1 / -1; }
.preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); font-size: .875rem; background: var(--ink); color: var(--bg); text-align: center; box-shadow: 0 -6px 20px -10px rgba(0, 0, 0, .4); }
body:has(.preview-bar) { padding-bottom: 72px; }
.preview-bar a, .preview-bar .link-btn { color: inherit; font-weight: 750; }
.preview-actions { display: inline-flex; align-items: center; gap: 16px; }
.preview-actions form { margin: 0; }
.unlock-part-items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.unlock-part-items li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); font-weight: 600; overflow-wrap: anywhere; }
.unlock-part-items svg { flex: none; width: 16px; height: 16px; color: var(--brand); }
.message-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* v97: důvod blokace v potvrzovacím dialogu a historie blokací na kartě kódu (správce) */
.qrl-dialog-block { display: grid; gap: 10px; margin-top: 16px; }
.qrl-dialog-block[hidden] { display: none; }
.qrl-dialog-block .field { margin: 0; }
.qrl-dialog-block .check { margin: 0; }
.block-entry { padding: 10px 0; border-top: 1px solid var(--line); }
.block-entry:first-of-type { border-top: 0; }
.block-entry p { margin: 0 0 4px; overflow-wrap: anywhere; }
.block-snap { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius); background: var(--surface-2); font-size: .8125rem; }
.block-snap dt { color: var(--ink-2); font-weight: 600; }
.block-snap dd { margin: 0; overflow-wrap: anywhere; }

/* v98: proužek Upozornění přilepený nahoře (horní lišta se posune pod něj), křížek na zavření */
.site-banner { position: relative; }
.site-banner-text { min-width: 0; }
.site-banner-close { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -6px -8px -6px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .75; }
.site-banner-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.site-banner-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; opacity: 1; }
.site-banner-warn { position: sticky; top: 0; z-index: 40; }
.topbar, .lp-top { top: var(--banner-h, 0px); }
.bulk-bar, .keep-bar { top: calc(68px + var(--banner-h, 0px)); }
.user-bulk { top: calc(8px + var(--banner-h, 0px)); }
@media (min-width: 980px) { .lbl-aside { top: calc(84px + var(--banner-h, 0px)); } }
.site-banner.is-closed { display: none; }

/* v98: výsledek kontroly přesměrování na kartě kódu */
.link-check { margin: 10px 0 0; font-size: .875rem; line-height: 1.45; }
.link-check-bad { padding: 10px 12px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); }

/* v98: fotka závady z obchůzky */
.patrol-photo { margin: 2px 0 6px; }
.report-photo { display: block; width: 120px; height: 90px; margin-top: 4px; object-fit: cover; border: 1px solid #ccc; }

/* v98: naplánovaná výměna obsahu */
.swap-card summary .badge { margin-left: 6px; }
.swap-planned { margin: 0 0 12px; line-height: 1.5; }
.swap-planned a { color: inherit; }

/* v98: předávací karta zakázky s PINy */
.pin-card-all { display: flex; gap: 20px; align-items: flex-start; margin: 12px 0; padding: 14px; border: 1px solid #999; border-radius: 6px; }
.pin-card-all h2 { margin: 0 0 6px; font-size: 16px; }
.pin-card-all ol { margin: 0; padding-left: 20px; line-height: 1.5; }
.pin-card-qr { flex: none; width: 34mm; height: 34mm; }
.pin-card-qr svg { width: 100%; height: 100%; display: block; }
.pin-card-link { margin: 8px 0 0; font-size: 11px; word-break: break-all; }
.pin-mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; }
.pin-card-table td { font-size: 13px; }
.sheet-order-note { margin: 4px 0 0; color: var(--brand); font-weight: 650; }

/* v98: Moje poptávky štítků */
.my-orders { display: grid; gap: 14px; }
.my-order { display: grid; gap: 12px; }
.my-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.my-order-head h2 { margin: 0; font-size: 1.05rem; }
.my-order-head p { margin: 2px 0 0; }
.order-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.order-steps li { position: relative; padding-top: 12px; font-size: .8125rem; font-weight: 650; color: var(--ink-2); }
.order-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 3px; background: var(--line); }
.order-steps li.is-done::before, .order-steps li.is-current::before { background: var(--brand); }
.order-steps li.is-current { color: var(--ink); }
.my-order-note { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--brand-soft); line-height: 1.5; }
.my-order-detail summary { cursor: pointer; font-weight: 650; }
.my-order-detail .lbl-sum { margin-top: 10px; }
.lbl-production { margin: 14px 0; padding: 12px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.lbl-production h3 { margin: 0 0 8px; font-size: .9375rem; }
.lbl-produce-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.lbl-produce-form .field { margin: 0; }
.lbl-production-actions { margin-top: 8px; }
.lbl-notify { margin: 4px 0 10px; }

/* v98: převzetí více štítků najednou */
.claim-multi { margin-top: 16px; }
.claim-multi summary { cursor: pointer; font-weight: 700; }
.claim-multi form, .claim-multi .flash { margin-top: 12px; }
.claim-multi textarea { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.claim-results { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .875rem; }
.claim-results li { display: flex; gap: 8px; flex-wrap: wrap; }
.claim-results .is-ok a { color: var(--brand); }
.claim-results .is-bad span { color: var(--danger); }

/* v98: přihlášená zařízení */
.session-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.session-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.session-row.is-current { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.session-main { display: grid; gap: 2px; min-width: 0; }
.session-main .small { overflow-wrap: anywhere; }
@media (min-width: 760px) {
    .lbl-order-form .lbl-public-note { grid-column: 1 / 3; grid-row: 2; }
    .lbl-order-form .lbl-notify { grid-column: 1 / 3; grid-row: 3; margin: 0; }
    .lbl-order-form > button { grid-column: 3; grid-row: 1; }
}
.lbl-public-note small { font-weight: 500; }

/* v99: upozornění, že služba není záloha */
.backup-note { margin: 0 0 12px; padding: 8px 10px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); line-height: 1.45; }

/* v101: důvěryhodná zařízení pro dvoufázové ověření */
.trust-check { margin: 4px 0 14px; text-align: left; }
.trusted-box { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.trusted-box p { margin: 0 0 6px; }
.trusted-list { margin: 0 0 10px; padding-left: 18px; line-height: 1.6; }

/* v102: víc hesel u jednoho kódu */
@media (min-width: 640px) { .lock-switch { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lock-switch { grid-template-columns: repeat(2, 1fr); } }
.lock-summary { margin: -6px 0 14px; color: var(--ink-2); }
.lock-summary:empty { display: none; }
.lock-warn { display: block; padding: 8px 10px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); }
.lock-opt { margin-bottom: 10px; }
.lock-opt small { display: block; font-weight: 500; color: var(--ink-2); }
.lock-opt input:disabled + span { opacity: .6; cursor: default; }
.lock-own-field { margin-left: 32px; }
.lock-tags { margin: 6px 0 16px; }
.lock-tags .field-label { display: block; font-size: .875rem; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; }
.lock-tags .tag-checks { margin-bottom: 6px; }
.lock-tags small { display: block; }
.edit-lock:disabled .lock-summary { margin: 0; }

/* v103: volba v potvrzovacím dialogu (co s kódy bez dalšího hesla) */
.qrl-dialog-choice { display: grid; gap: 4px; margin-top: 14px; }
.qrl-dialog-choice[hidden] { display: none; }
.qrl-dialog-choice .check { margin: 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); }
.qrl-dialog-choice .check:has(input:checked) { border-color: var(--brand); }
.qrl-dialog-choice small { display: block; font-weight: 500; color: var(--ink-2); }

/* v104: řádek štítku ve dvou patrech – nahoře název, barva, heslo a Uložit, dole akce */
.tag-admin-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 130px); row-gap: 10px; }
.tag-admin-row .tag-pw { grid-column: 1 / 3; }
.tag-admin-save { grid-column: 3; justify-self: stretch; }
.tag-admin-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--line); }
.tag-admin-count { margin-right: auto; }
.tag-admin-actions .icon-btn-danger { margin-left: 4px; }
.tag-admin-row.is-dirty { border-color: var(--brand); }
@media (min-width: 900px) {
    .tag-admin-row { grid-template-columns: auto minmax(0, 1fr) 150px minmax(0, 240px) auto; }
    .tag-admin-row .tag-pw { grid-column: auto; }
    .tag-admin-save { grid-column: auto; }
    .tag-admin-actions { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
    .tag-admin-actions .btn { flex: 1 1 auto; }
    .tag-admin-count { margin-right: 0; }
}

/* v106: „Nový uživatel / tarif / dávka“ – zavřená sbalovací karta vypadá jako hlavní tlačítko, otevřená jako karta */
.collapsible-cta:not([open]) { background: none; border: 0; padding: 0; }
.collapsible-cta:not([open]) > summary {
    display: inline-flex; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: var(--radius-s);
    background: var(--brand); color: var(--on-brand); font-weight: 700;
}
.collapsible-cta:not([open]) > summary:hover { background: var(--brand-hover); }
.collapsible-cta:not([open]) > summary::before { content: "+"; font-size: 1.375rem; line-height: 1; font-weight: 600; }
.collapsible-cta:not([open]) > summary::after { display: none; }
.collapsible-cta > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* v106: Upravit / Lidé v účtu u uživatelů a tarifů jako malá tlačítka místo trojúhelníku */
.acct-members > summary, .user-edit > summary, .user-panels > summary, .plan-item > details > summary {
    list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); font-size: .875rem;
}
.acct-members > summary::-webkit-details-marker, .user-edit > summary::-webkit-details-marker, .user-panels > summary::-webkit-details-marker, .plan-item > details > summary::-webkit-details-marker { display: none; }
.acct-members > summary::after, .user-edit > summary::after, .user-panels > summary::after, .plan-item > details > summary::after {
    content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
.acct-members[open] > summary::after, .user-edit[open] > summary::after, .user-panels[open] > summary::after, .plan-item > details[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.acct-members > summary:hover, .user-edit > summary:hover, .user-panels > summary:hover, .plan-item > details > summary:hover { border-color: var(--brand); }
.user-item > .user-panels:not([open]), .user-item > .acct-members:not([open]), .user-item > .user-edit:not([open]) { display: inline-block; margin-right: 6px; }
/* v106: Moje kódy – Nový kód s ikonou, počet s jednotkou ks */
.btn-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.create-count { position: relative; display: inline-flex; align-items: center; margin: 0; }
/* v207: nativní šipky pryč (číslo na ně bylo nalepené), vlastní šipky s odstupem za „ks“ */
.create-form .create-count input { width: 92px; padding-right: 52px; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.create-count input::-webkit-inner-spin-button, .create-count input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.create-count > .create-unit { position: absolute; right: 30px; color: var(--ink-2); font-size: .875rem; pointer-events: none; }
.create-step { position: absolute; top: 4px; bottom: 4px; right: 4px; display: flex; flex-direction: column; width: 20px; border-left: 1px solid var(--line); }
.create-step button { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; border-radius: 4px; }
.create-step button:hover { color: var(--ink); background: var(--line); }
.create-step svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* v207: tlačítko má šířku nejdelšího textu (Vytvořit N kódů), řádek tedy při změně počtu neposkočí */
.create-label { display: inline-grid; justify-items: start; }
.create-label > span { grid-area: 1 / 1; white-space: nowrap; }
.create-label > .create-label-sizer { visibility: hidden; }

/* v106: náhled kulatého štítku – QR co největší uvnitř kruhu (jako arch pro laser), text pod ním */
.lbl-plate.shape-round { padding: 0; gap: 2%; justify-content: center; }
.lbl-plate.shape-round .lbl-qr { flex: none; width: 55%; height: auto; margin-top: 2%; }
.lbl-plate.shape-round .lbl-foot { max-width: 72%; font-size: clamp(6px, 5.5cqmin, 13px); }
.session-others { margin: 0 0 10px; }
.session-more > summary { cursor: pointer; font-weight: 650; color: var(--brand); margin: 8px 0; width: max-content; }
.session-main .badge { justify-self: start; width: max-content; }

/* v107: správa štítků viditelněji – tlačítko v Moje kódy a v kartě Štítky u kódu */
.tag-manage { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; margin-left: 6px; border: 1.5px dashed var(--line-strong); border-radius: 999px; font-size: .8125rem; font-weight: 650; color: var(--brand); text-decoration: none; white-space: nowrap; }
.tag-manage:hover { border-style: solid; border-color: var(--brand); background: var(--brand-soft); }
.tag-manage svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tag-box .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tag-box .card-head h2 { margin: 0; }
.tag-box .card-head .tag-manage { margin-left: 0; }

/* v109: Přehled účtu a správce – graf s bublinou, souhrn, skupiny, typy, kdy se načítá, tabulka účtů */
.tone-coral { --t: var(--coral); --t-soft: var(--coral-soft); --t-ink: var(--coral-ink); }
.tone-slate { --t: var(--line-strong); --t-soft: var(--surface-2); --t-ink: var(--ink-2); }

.dash-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.dash-periods { margin: 0; flex: 0 1 auto; }
.dash-periods a { flex: 0 0 auto; padding: 6px 12px; }
.dash-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 650; min-width: 0; }
.dash-trail > * + *::before { content: "›"; margin-right: 6px; color: var(--ink-2); font-weight: 500; }
.dash-trail > a { text-decoration: none; }
.dash-trail > a:hover { text-decoration: underline; }
.dash-trail > span[aria-current] { color: var(--ink); }
.trail-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--g-soft, var(--tc-soft, var(--surface-2))); color: var(--g-ink, var(--tc-ink, var(--ink))); }
.dash-trail > .trail-chip::before { margin-left: -4px; }
.trail-chip > i { width: 9px; height: 9px; border-radius: 50%; background: var(--g, var(--tc, var(--brand))); }
.trail-chip > a { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: inherit; text-decoration: none; font-size: 1.05rem; line-height: 1; }
.trail-chip > a:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

.dkpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); margin: 0 0 16px; overflow: hidden; }
.dkpi-item { display: grid; align-content: start; gap: 2px; padding: 16px 18px; color: var(--ink); text-decoration: none; background: var(--surface); min-width: 0; }
a.dkpi-item:hover { background: var(--surface-2); color: var(--ink); }
.dkpi-main ~ .dkpi-item:last-child:nth-child(even) { grid-column: 1 / -1; }
.dkpi-main { grid-column: 1 / -1; background: linear-gradient(120deg, color-mix(in srgb, var(--sky-soft) 75%, var(--surface)), var(--surface) 70%); }
.dkpi-label { font-size: .8125rem; font-weight: 650; color: var(--ink-2); }
.dkpi-num { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dkpi-num small { font-size: .9375rem; font-weight: 650; color: var(--ink-2); letter-spacing: 0; }
.dkpi-main .dkpi-num { font-size: 2.5rem; color: var(--sky-ink); }
.dkpi-sub { font-size: .8125rem; color: var(--ink-2); }
@media (min-width: 760px) {
    .dkpi { grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); }
    .dkpi-main, .dkpi-main ~ .dkpi-item:last-child:nth-child(even) { grid-column: auto; }
}
.delta { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: .75rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.is-up { background: var(--mint-soft); color: var(--mint-ink); }
.delta.is-down { background: var(--coral-soft); color: var(--coral-ink); }
.delta.is-new { background: var(--sky-soft); color: var(--sky-ink); }
.delta.is-flat { background: var(--surface-2); color: var(--ink-2); }

.dash-grid { display: grid; gap: 16px; align-items: start; }
.dash-grid > * { min-width: 0; }
.dash-grid .card, .d-side .card { margin: 0; }
.d-side { display: grid; gap: 16px; }
@media (min-width: 900px) {
    .dash-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .d-wide { grid-column: span 8; }
    .d-side { grid-column: span 4; }
    .d-half { grid-column: span 6; }
    .d-full { grid-column: 1 / -1; }
}
.dcard h2 { font-size: 1.0625rem; margin: 0 0 12px; }
.dcard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.dcard-head h2 { margin: 0; }
.dcard-link { font-size: .875rem; font-weight: 650; text-decoration: none; }
.dcard-link:hover { text-decoration: underline; }
.d-sub { font-size: .875rem; margin: 18px 0 8px; color: var(--ink-2); }
.d-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--t, var(--sky)); transition: width .5s ease; }
.dmeter { display: block; height: 4px; margin-top: 6px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.dmeter .d-fill { background: var(--brand); }
.dmeter.is-full .d-fill { background: var(--coral); }

/* graf */
.dchart { margin: 0; position: relative; outline: none; --t: var(--sky); }
.dchart.tone-mint { --t: var(--mint); }
.dchart.tone-violet { --t: var(--violet); }
.dchart:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 8px; }
.dchart-plot { position: relative; height: 220px; margin-left: 38px; margin-top: 8px; touch-action: pan-y; cursor: crosshair; }
.dchart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dchart-y { position: absolute; top: 0; bottom: 0; left: -38px; width: 32px; font-size: .75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dchart-y span { position: absolute; right: 0; transform: translateY(-50%); }
.dchart-y .y-top { top: 4%; } .dchart-y .y-mid { top: 52%; } .dchart-y .y-bot { top: 100%; }
.dchart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; fill: none; }
.dchart-stop-a { stop-color: var(--t); stop-opacity: .32; }
.dchart-stop-b { stop-color: var(--t); stop-opacity: 0; }
.dchart-line { fill: none; stroke: var(--t); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dchart-prev { fill: none; stroke: var(--ink-2); stroke-opacity: .5; stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.dash-js .dchart-plot svg { animation: d-reveal .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes d-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .dash-js .dchart-plot svg { animation: none; } .d-fill { transition: none; } }
.dchart-cursor { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-strong); pointer-events: none; }
.dchart-dot { position: absolute; left: -6px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--t); border: 2.5px solid var(--surface); box-shadow: 0 0 0 1px var(--t); }
.dchart-dot.is-prev { background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink-2); width: 10px; height: 10px; left: -5px; margin-top: -5px; border-width: 0; }
.dchart-tip { position: absolute; top: -4px; transform: translate(-50%, -100%); display: grid; gap: 1px; padding: 7px 11px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: .8125rem; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); z-index: 2; }
.dchart-tip.is-left { transform: translate(calc(-100% + 14px), -100%); }
.dchart-tip.is-right { transform: translate(-14px, -100%); }
.dchart-tip strong { font-weight: 700; }
.dchart-tip .tip-cur { font-weight: 650; }
.dchart-tip .tip-prev { opacity: .7; font-size: .75rem; }
.dchart-x { display: flex; justify-content: space-between; margin: 8px 0 0 38px; font-size: .75rem; color: var(--ink-2); white-space: nowrap; }
.dash-js .dchart-x { display: block; position: relative; height: 1.2em; }
.dash-js .dchart-x span { position: absolute; transform: translateX(-50%); }
.dash-js .dchart-x span:first-child { transform: none; }
.dash-js .dchart-x span:last-child { transform: translateX(-100%); }
.dchart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0 38px; font-size: .8125rem; color: var(--ink-2); }
.dchart-legend span { display: inline-flex; align-items: center; gap: 8px; }
.dchart-legend span::before { content: ""; width: 18px; border-top: 3px solid var(--t); border-radius: 2px; }
.dchart-legend .lg-prev::before { border-top: 2px dashed var(--ink-2); opacity: .7; }
.d-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-s); background: var(--surface-2); }
.d-switch button { border: 0; background: none; padding: 6px 10px; border-radius: 6px; font: inherit; font-size: .8125rem; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.d-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.d-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* pozornost, poslední načtení, účet */
.d-attn { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.d-attn a { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 6px 8px 6px 6px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.d-attn a:hover { background: var(--surface-2); color: var(--ink); }
.d-attn strong { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px; background: var(--t-soft); color: var(--t-ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.d-attn span { font-size: .875rem; font-weight: 600; }
.d-allgood { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 650; color: var(--mint-ink); }
.d-allgood svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--mint-soft); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.d-recent { list-style: none; margin: 0; padding: 0; }
.d-recent li + li { border-top: 1px solid var(--line); }
.d-recent a { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 2px; color: var(--ink); text-decoration: none; font-size: .875rem; }
.d-recent a:hover .d-recent-n { color: var(--brand); }
.d-recent-t { color: var(--ink-2); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.d-recent-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.d-recent-d { font-size: .75rem; }
.d-facts { display: grid; gap: 8px; margin: 0 0 14px; }
.d-facts div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; font-size: .875rem; }
.d-facts dt { color: var(--ink-2); }
.d-facts dd { margin: 0; font-weight: 600; }
.d-owner-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* skupiny */
.d-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.d-groups li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; border-radius: var(--radius); }
.d-groups li.is-on { background: var(--g-soft); }
.d-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "meta n" "bar n"; gap: 2px 14px; align-items: center; padding: 9px 10px; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
a.d-group:hover { background: var(--surface-2); color: var(--ink); }
li.is-on a.d-group:hover { background: transparent; }
.d-group-name { grid-area: name; display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-group-name i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--g); }
.d-group-meta { grid-area: meta; font-size: .75rem; color: var(--ink-2); padding-left: 18px; margin-bottom: 4px; }
.d-group-bar { grid-area: bar; display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
li.is-on .d-group-bar { background: color-mix(in srgb, var(--g) 18%, var(--surface)); }
.d-group-bar .d-fill { background: var(--g); }
.d-group-n { grid-area: n; display: grid; justify-items: end; gap: 2px; }
.d-group-n strong { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.d-group-none { opacity: .85; }
.d-group-list { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ink-2); }
.d-group-list:hover { background: var(--surface-2); color: var(--brand); }
.d-group-list svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (min-width: 480px) {
    .d-group { grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; grid-template-areas: "name bar n" "meta bar n"; }
    .d-group-meta { margin-bottom: 0; }
}

/* typy kódů a pásy */
.d-ribbon { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; margin: 2px 0 14px; }
.d-ribbon > span { flex: 1 1 0; min-width: 4px; background: var(--tc, var(--t, var(--line-strong))); }
.d-ribbon > .is-on { box-shadow: inset 0 0 0 2px var(--ink); }
.d-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.d-types li { color: var(--ink); }
.d-types a, .d-type-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 8px; border-radius: var(--radius); border: 1.5px solid transparent; color: var(--ink); text-decoration: none; }
.d-types a:hover { background: var(--surface-2); color: var(--ink); }
.d-types a[aria-current] { border-color: var(--tc); background: color-mix(in srgb, var(--tc-soft) 60%, var(--surface)); }
.d-type-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--tc-soft); color: var(--tc-ink); }
.d-type-ico svg { width: 20px; height: 20px; }
.d-type-name { display: grid; font-weight: 700; font-size: .9375rem; }
.d-type-name small, .d-type-n small { font-weight: 500; font-size: .75rem; color: var(--ink-2); }
.d-type-n { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.d-devices .d-fill { background: var(--sky); }
.d-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.d-legend a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-size: .875rem; }
.d-legend a:hover { background: var(--surface-2); color: var(--ink); }
.d-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--t); }
.d-legend strong { font-variant-numeric: tabular-nums; }

/* nejčtenější kódy */
.d-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.d-top-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.d-top-link:hover { background: var(--surface-2); color: var(--ink); }
.d-top-name { display: grid; min-width: 0; font-weight: 650; font-size: .9375rem; }
.d-top-name, .d-top-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-top-name small { font-weight: 500; font-size: .75rem; }
.d-spark { display: none; width: 72px; height: 24px; overflow: visible; }
.d-spark path { fill: none; stroke: var(--sky); stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.d-top-n { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; }
.d-top-owner { display: inline-block; margin: -4px 0 4px 8px; font-size: .75rem; font-weight: 650; text-decoration: none; }
.d-top-owner:hover { text-decoration: underline; }
@media (min-width: 440px) {
    .d-top-link { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .d-spark { display: block; }
}

/* kdy se načítá */
.dheat { display: grid; grid-template-columns: 22px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.dheat-day { font-size: .6875rem; font-weight: 650; color: var(--ink-2); }
.dheat-c { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); }
.dheat-c.l1 { background: color-mix(in srgb, var(--sky) 22%, var(--surface-2)); }
.dheat-c.l2 { background: color-mix(in srgb, var(--sky) 45%, var(--surface-2)); }
.dheat-c.l3 { background: color-mix(in srgb, var(--sky) 70%, var(--surface-2)); }
.dheat-c.l4 { background: var(--sky); }
.dheat-h { font-size: .625rem; color: var(--ink-2); padding-top: 2px; }
.dheat-scale { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin: 10px 0 0; }
.dheat-scale .dheat-c { width: 11px; }
.dheat-card .muted.small { margin-top: -6px; }

/* správa: tabulka účtů */
.d-tools input { width: min(280px, 100%); min-height: 38px; padding: 6px 12px; }
.d-acct-head, .d-accounts li { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.d-acct-head { margin: 0 0 4px; }
.d-acct-head button { border: 0; background: none; padding: 4px 0; font: inherit; font-size: .75rem; font-weight: 700; color: var(--ink-2); text-align: left; cursor: pointer; }
.d-acct-head button:first-child { grid-column: 1 / -1; }
.d-acct-head button[aria-pressed="true"] { color: var(--brand); }
.d-acct-head button[aria-pressed="true"]::after { content: " ▲"; font-size: .7em; }
.d-acct-head button.is-desc[aria-pressed="true"]::after { content: " ▼"; }
.d-acct-head button:focus-visible { outline: 3px solid var(--focus); border-radius: 4px; }
.d-accounts { list-style: none; margin: 0; padding: 0; }
.d-accounts li { padding: 12px 8px; border-top: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer; align-items: center; }
.d-accounts li:hover { background: var(--surface-2); }
.d-accounts li.is-inactive { opacity: .6; }
.d-acct-name { grid-column: 1 / -1; display: grid; gap: 2px; min-width: 0; }
.d-acct-name > a { font-weight: 750; text-decoration: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-acct-name > a:hover { color: var(--brand); }
.d-acct-name > .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-acct-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; }
.d-acct-badges .badge { font-size: .6875rem; padding: 1px 8px; }
.d-acct-codes, .d-acct-n, .d-acct-st { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 4px; font-variant-numeric: tabular-nums; min-width: 0; }
.d-acct-k { grid-column: 1 / -1; font-size: .6875rem; font-weight: 650; color: var(--ink-2); }
.d-acct-codes .dmeter, .d-acct-st .dmeter { grid-column: 1 / -1; }
.d-acct-n .delta { justify-self: start; }
@media (min-width: 760px) {
    .d-acct-head, .d-accounts li { grid-template-columns: minmax(0, 1fr) 120px 120px 110px; }
    .d-acct-head button:first-child, .d-acct-name { grid-column: auto; }
    .d-acct-k { display: none; }
}
/* v109: zarovnání sloupců v Nejčtenějších kódech a skupinách, správa – kód s odkazem na účet */
.d-top-link, .d-top-row { grid-template-columns: 5.6em minmax(0, 1fr) 4.4em; }
.d-top .code-chip { justify-self: start; }
.d-top-row { display: grid; gap: 10px; align-items: center; padding: 8px; border-radius: var(--radius-s); }
.d-top-row:hover { background: var(--surface-2); }
.d-top-row .d-top-name > a:first-child { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-top-row .d-top-name > a:first-child:hover { color: var(--brand); }
.d-top-row .d-top-owner { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 440px) {
    .d-top-link, .d-top-row { grid-template-columns: 5.6em minmax(0, 1fr) 72px 4.4em; }
}
.d-group-n { min-width: 4.2em; }
.d-stack { display: grid; gap: 16px; }
.d-acct-head { padding: 0 8px; }
.dchart-tip { top: 4px; transform: translateX(12px); }
.dchart-tip.is-left { transform: translateX(calc(-100% - 12px)); }
.d-top .code-chip { width: max-content; max-width: 100%; }
.d-top-link, .d-top-row { grid-template-columns: 6.6em minmax(0, 1fr) 4.4em; }
@media (min-width: 440px) { .d-top-link, .d-top-row { grid-template-columns: 6.6em minmax(0, 1fr) 72px 4.4em; } }
@media (max-width: 759px) { .d-acct-n .delta { grid-column: 1 / -1; margin-top: 2px; } }
@media (max-width: 520px) {
    .dash-js .dchart-x span:nth-child(even):not(:last-child), .dash-js .dchart-x span:nth-last-child(2) { display: none; }
}

/* v110: nápovědy ve vyhledávacích polích – kratší text, a když se přesto nevejde, končí třemi tečkami */
input[type="search"], input[type="search"]::placeholder { text-overflow: ellipsis; }
.filters input[type="search"] { min-width: 0; }
.d-tools { flex: 1 1 200px; display: flex; justify-content: flex-end; }
.d-tools input { width: min(320px, 100%); }

/* v111: API klíče a dokumentace */
.api-layout { display: grid; gap: 16px; align-items: start; }
.api-layout .card { margin: 0; }
@media (min-width: 900px) { .api-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.api-new { border-color: var(--mint); background: color-mix(in srgb, var(--mint-soft) 45%, var(--surface)); }
.api-token { display: flex; gap: 8px; margin: 10px 0; }
.api-token input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .875rem; }
.api-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.api-key { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 8px; }
.api-key.is-revoked, .api-key.is-expired { opacity: .65; }
.api-key-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.api-mask { font-size: .8125rem; color: var(--ink-2); }
.api-facts { display: grid; gap: 4px; margin: 0; }
.api-facts div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; font-size: .875rem; }
.api-facts dt { color: var(--ink-2); }
.api-facts dd { margin: 0; overflow-wrap: anywhere; }
.api-form { display: grid; gap: 14px; }
.api-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.api-form legend { font-weight: 650; margin-bottom: 4px; }
.api-tags { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-left: 28px; }
.api-form fieldset:has(input[name="limit_tags"]:not(:checked)) .api-tags { display: none; }
.api-docs pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; overflow-x: auto; font-size: .8125rem; line-height: 1.5; }
.api-docs code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .875em; overflow-wrap: anywhere; }
.api-docs pre code { overflow-wrap: normal; white-space: pre; }
.api-table { min-width: 640px; }
.api-m { font-weight: 800; font-size: .75rem; }
.api-m-get { color: var(--sky-ink); } .api-m-post { color: var(--mint-ink); } .api-m-patch { color: var(--amber-ink); } .api-m-delete { color: var(--coral-ink); }
.api-admin td { vertical-align: top; }
.api-admin tr.is-revoked, .api-admin tr.is-expired { opacity: .6; }
.api-table td:nth-child(-n+2) { white-space: nowrap; }
.api-table td:nth-child(2) code { overflow-wrap: normal; }
@media (max-width: 640px) {
    .api-table { min-width: 0; }
    .api-table thead { display: none; }
    .api-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
    .api-table td { border: 0; padding: 2px 0; }
    .api-table td:nth-child(3), .api-table td:nth-child(4) { grid-column: 1 / -1; white-space: normal; }
    .api-table td:nth-child(3) { color: var(--ink-2); font-weight: 650; }
    .api-table td:nth-child(2) { white-space: normal; }
    .api-table td:nth-child(2) code { overflow-wrap: anywhere; }
}

/* v112: návod k API (/app/api/navod) */
.api-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 880px; }
.api-guide > *, .guide-recipe { min-width: 0; }
.api-guide > .card h2 { margin-top: 0; }
.api-guide code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .875em; overflow-wrap: anywhere; }
.guide-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--info-bg); color: var(--info-ink); }
.guide-state.is-off { background: var(--warn-bg); color: var(--warn-ink); }
.guide-state.is-on { background: var(--ok-bg); color: var(--ok-ink); }
.guide-state span { flex: 1 1 260px; }
.guide-state a:not(.btn) { color: inherit; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-toc a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: .875rem; }
.guide-toc a:hover { border-color: var(--brand); color: var(--brand); }
.api-guide [id] { scroll-margin-top: 84px; }
.guide-uses, .guide-steps { display: grid; gap: 8px; padding-left: 1.3em; }
.guide-table { min-width: 0; }
.guide-table th, .guide-table td { vertical-align: top; }
.guide-table td:first-child { white-space: nowrap; }
.guide-code { margin: 10px 0 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); overflow: hidden; }
.guide-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 650; color: var(--ink-2); }
.guide-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-size: .8125rem; line-height: 1.5; }
.guide-code pre code { overflow-wrap: normal; white-space: pre; font-size: 1em; }
.guide-recipe { border-top: 1px solid var(--line); padding: 4px 0; }
.guide-recipe:last-child { border-bottom: 1px solid var(--line); }
.guide-recipe > summary { cursor: pointer; padding: 10px 0; font-weight: 650; line-height: 1.7; }
.guide-recipe > summary .badge { font-weight: 600; margin-left: 4px; vertical-align: 1px; }
.guide-recipe[open] > summary { color: var(--brand); }
@media (max-width: 640px) {
    .guide-table td:first-child { white-space: normal; }
    .guide-table th, .guide-table td { padding: 10px; }
    .guide-code pre { font-size: .75rem; }
}

/* v112: landing – sekce API */
.lp-list-violet li { border-left-color: var(--lp-violet); }
.lp-api-note { margin: 12px 0 0; }
.lp-api-demo { justify-self: center; width: 100%; max-width: 460px; min-width: 0; border-radius: var(--radius-l); background: #1B2230; color: #DCE3EE; box-shadow: 0 18px 30px rgba(23, 35, 42, .12); overflow: hidden; }
.lp-api-bar { display: flex; gap: 6px; padding: 10px 14px; background: #252E3F; }
.lp-api-bar span { width: 10px; height: 10px; border-radius: 50%; background: #3C4760; }
.lp-api-demo pre { margin: 0; padding: 16px 18px 20px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8125rem; line-height: 1.6; }
.lp-api-m { color: #A894FF; font-weight: 800; }
.lp-api-ok { color: #5FD3AE; font-weight: 800; }
@media (max-width: 640px) { .lp-api-demo pre { font-size: .75rem; padding: 14px; } }

/* v113: Správa – popisek pod tlačítky Rozšířených funkcí se nevtahuje do tlačítek */
.uf-modules + .uf-help { margin: 10px 0 8px !important; }

/* v115: Zakázka (karta zařízení druhu job) */
:root { --lime: #6E9F1A; --lime-soft: #ECF5D6; --lime-ink: #4A6A0D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lime-soft: #26301A; --lime-ink: #B5D96A; } }
:root[data-theme="dark"] { --lime-soft: #26301A; --lime-ink: #B5D96A; }
.type-job { --tc: var(--lime); --tc-soft: var(--lime-soft); --tc-ink: var(--lime-ink); }
.code-type.type-job { color: var(--tc-ink); font-weight: 650; }
.type-job .tp-chip { color: var(--tc-ink); background: var(--tc-soft); }
.tp-lock { display: flex; align-items: center; gap: 4px; border: 1px dashed var(--line-strong); border-radius: 4px; padding: 3px 4px; }
.tp-lock::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--tc); }
.tp-lock i { height: 4px; }
.job-intro { margin: -6px 0 14px; }
.asset-photo-ico { display: grid; place-items: center; width: 100%; height: 100%; color: var(--lime-ink); background: var(--lime-soft); border-radius: inherit; }
.asset-photo-ico svg { width: 44%; height: 44%; }
.job-no { font-variant-numeric: tabular-nums; }
.job-firm-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 4px; font-size: 1.0625rem; }
.job-service { margin: 0 0 10px; color: var(--ink-2); }
.job-firm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.job-firm-actions .btn { flex: 1 1 auto; justify-content: center; }
.job-firm-actions .btn svg { width: 16px; height: 16px; margin-right: 6px; flex: none; }
.job-scope { margin: 10px 0 0; line-height: 1.55; }
.log-public .log-item { grid-template-columns: 6.5em minmax(0, 1fr); }
.job-lock-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; }
.job-lock-cta[data-done] .btn { display: none; }

/* v116: zakázka – poznámky technika */
.job-note { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface-2); border-left: 3px solid var(--lime); }
.job-note strong { display: block; font-size: .8125rem; color: var(--ink-2); margin-bottom: 2px; }
.job-note p { margin: 0; line-height: 1.55; }

/* v117: upozornění – části „Po zadání hesla“ bez hesla */
.pw-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); font-size: .875rem; line-height: 1.45; }
.pw-gap[hidden] { display: none; }
.pw-gap svg { width: 18px; height: 18px; flex: none; }
.pw-gap span { flex: 1 1 220px; }

/* v121: landing pro firmy – tři hlavní typy, další funkce sbalené */
@media (min-width: 1000px) { .lp-cards-3 { grid-template-columns: repeat(3, 1fr); } }
.lp-also { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin: 22px 0 0; color: var(--ink-2); font-size: .9375rem; }
.lp-also span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: .875rem; }
.lp-also svg { width: 16px; height: 16px; color: var(--ink-2); }
@media (min-width: 1000px) { .lp-features-6 { grid-template-columns: repeat(3, 1fr); } }
.lp-allfeatures { max-width: 820px; margin: 22px auto 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.lp-allfeatures > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; text-align: center; color: var(--brand); }
.lp-allfeatures ul { margin: 0; padding: 4px 22px 18px 36px; display: grid; gap: 8px; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.lp-allfeatures strong { color: var(--ink); }
.lp-obce { margin-top: 22px !important; font-size: .9375rem !important; }
.lp-ph-locked { position: relative; }
.lp-ph-lock { margin-left: auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #FFF1CF; color: #7A4E0B; }
.lp-ph-lock svg { width: 13px; height: 13px; }

/* v123: Stránka a dokumenty – formátovaný text, tlačítka, fotky */
.rt-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 6px; }
.rt-tools .btn { padding: 4px 10px; min-height: 0; }
.doc-btns { display: grid; gap: 8px; margin-top: 8px; }
.doc-btn-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, .8fr); gap: 8px; align-items: start; }
.doc-btn-row .field-error, .doc-btn-row .error { grid-column: 1 / -1; }
@media (max-width: 640px) { .doc-btn-row { grid-template-columns: 1fr; padding-bottom: 8px; border-bottom: 1px dashed var(--line); } }
.docs-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.docs-btns .btn { flex: 1 1 140px; justify-content: center; }
.docs-rich h2 { font-size: 1.125rem; margin: 18px 0 6px; }
.docs-rich p { margin: 0 0 10px; }
.docs-rich ul { margin: 0 0 10px; padding-left: 1.3em; }
.docs-rich li { margin: 2px 0; }
.doc-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
@media (min-width: 640px) { .doc-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.doc-gallery.is-single { grid-template-columns: 1fr; }
.doc-photo { margin: 0; }
.doc-photo a { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.doc-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.doc-gallery.is-single .doc-photo img { aspect-ratio: auto; max-height: 70vh; object-fit: contain; }
.doc-photo figcaption { margin-top: 4px; font-size: .8125rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.file-icon-img { padding: 0 !important; overflow: hidden; background: var(--surface-2) !important; }
.file-icon-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.docs-rich { color: var(--ink); }
.docs-rich h2 { color: var(--ink); }

/* v125: lišta, která plave pořád – tlačítka v obsahu skrýt (texty v řádku zůstávají) */
.js .float-src-off > .btn { display: none !important; }
.js .save-bar.float-src-off { min-height: 0; margin: 0; }

/* v126: přihlášený na veřejné stránce kódu – náhled jako návštěvník a odhlášení */
.member-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; padding: 8px 16px; font-size: .8125rem; background: var(--surface-2); color: var(--ink-2); border-bottom: 1px solid var(--line); text-align: center; }
.member-bar strong { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.member-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.member-actions form { display: inline; margin: 0; }
.member-bar a, .member-bar .link-btn { color: var(--brand); font-weight: 700; font-size: inherit; }

/* v128: odsazení a přetékání */
.edit-aside .export + .export { margin-top: 16px; } /* Stáhnout QR kód a Blokace byly slepené */
.table-wrap { position: relative; } /* skrytý popisek v hlavičce tabulky rozšiřoval stránku na mobilu */
.asset > .unlock-part { margin-top: 0; } /* na kartě drží odstup mřížka (gap), jinak byla mezera dvojitá */

/* v130: pracovní deník – zápis práce na kartě, přehled, reporty */
.q-work svg { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.work-sec h2 { margin-bottom: 10px; }
.work-form textarea { min-height: 84px; }
.work-draft { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); }
.work-draft .link-btn { color: inherit; font-weight: 700; text-decoration: underline; }
.work-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 18px 0 0; font-size: 1rem; }
.work-lock { justify-self: start; margin-top: 4px; font-size: .75rem; }
.job-contact-edit { margin: 4px 0 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 10px 14px; }
.job-contact-edit summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.job-contact-edit[open] summary { margin-bottom: 10px; }
.work-periods { overflow-x: auto; scrollbar-width: none; }
.work-periods::-webkit-scrollbar { display: none; }
.work-filters .work-date { display: flex; align-items: center; gap: 6px; flex: 1 1 170px; font-size: .875rem; font-weight: 650; color: var(--ink-2); }
.work-filters .work-date input { flex: 1 1 auto; min-width: 0; }
.work-kpi .dkpi-label { overflow-wrap: anywhere; }
.work-table { min-width: 760px; }
.work-table td { vertical-align: top; }
.work-table .work-text { min-width: 220px; max-width: 46ch; overflow-wrap: anywhere; }
.work-table tr.is-locked td { color: var(--ink-2); }
.work-table tfoot th { background: var(--surface-2); border-top: 1px solid var(--line-strong); border-bottom: 0; }
.work-table a.state { text-decoration: none; }
.work-actions { width: 1%; white-space: nowrap; text-align: right; }
.work-edit summary { list-style: none; cursor: pointer; }
.work-edit summary::-webkit-details-marker { display: none; }
.work-edit[open] { white-space: normal; }
.work-edit-form { width: 280px; margin-top: 8px; text-align: left; }
.work-edit-form .field { margin-bottom: 10px; }
.work-sums { display: grid; gap: 16px; margin: 16px 0; }
@media (min-width: 760px) { .work-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work-sums .card { margin: 0; }
.work-sum-list { list-style: none; margin: 0; padding: 0; }
.work-sum-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.work-sum-list li:first-child { border-top: 0; }
.work-sum-list strong { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-report-card { margin-top: 16px; }
.work-report-card form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.work-reports { min-width: 620px; }
.work-rules { margin: 14px 0 0; padding-left: 1.2em; }
.work-rules li { margin: 4px 0; }
.work-auto .check-grid { margin-bottom: 6px; }
.work-notice { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); }
.work-notice a { color: inherit; font-weight: 700; }
.work-unlock-box { margin-top: 16px; }
.work-unlock-box summary { cursor: pointer; }
.work-unlock-box[open] summary { margin-bottom: 10px; }
.work-print .report-table td { font-size: 12px; }

/* v132: přihlášení svým účtem místo hesla kódu */
.unlock-login { margin: 12px 0 0; color: var(--ink-2); }
.unlock-login a { font-weight: 700; }
.lock-page .unlock-login { text-align: center; }
.login-back { margin: -4px 0 14px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--ink-2); }

/* v132: Servis se záložkami, filtr typu v seznamu kódů */
.service-tabs { margin-bottom: 18px; }
.service-tabs .tab-badge { height: 18px; min-width: 18px; font-size: .6875rem; }
.tab-badge-live { background: var(--ok-ink); }
.type-filter { margin-bottom: 10px; }
.type-hint { margin: -4px 0 14px; }

/* v133: filtr kódů – rozbalovací výběr typů a skupin se zaškrtáváním */
.code-filters { align-items: center; }
.code-filters input[type="search"] { flex: 2 1 220px; }
.filter-drop { flex: 0 1 auto; }
.filter-btn { gap: 6px; max-width: 280px; font-weight: 650; }
.filter-btn .filter-label { color: var(--ink-2); font-weight: 600; }
.filter-btn .filter-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.filter-btn.is-active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.filter-btn.is-active .filter-val { color: var(--brand); }
.filter-caret { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.filter-drop[open] .filter-caret { transform: rotate(180deg); }
.filter-menu { left: 0; right: auto; min-width: 250px; max-width: min(340px, calc(100vw - 32px)); gap: 2px; }
.filter-list { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.filter-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-s); cursor: pointer; font-weight: 600; font-size: .9375rem; }
.filter-opt:hover { background: var(--surface-2); }
.filter-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: none; }
.filter-opt-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.filter-n { color: var(--ink-2); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.filter-opt[hidden] { display: none; }
.code-type-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tc, var(--ink-2)); flex: none; }
.type-equipment, .type-property { --tc: var(--amber); --tc-soft: var(--amber-soft); --tc-ink: var(--amber-ink); }
.type-property { --tc: var(--coral); --tc-soft: var(--coral-soft); --tc-ink: var(--coral-ink); }
.filter-search { margin: 4px 4px 6px; width: auto; min-height: 38px; }
.filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 6px 4px; margin-top: 4px; border-top: 1px solid var(--line); }
.filter-manage { margin-left: auto; font-weight: 650; }
.filter-reset { white-space: nowrap; }
@media (max-width: 600px) {
    .filter-drop { flex: 1 1 140px; }
    .filter-btn { width: 100%; max-width: none; justify-content: space-between; }
    .filter-drop:nth-of-type(2) .filter-menu { left: auto; right: 0; }
}

/* v133: servisní deník na kartě – jedno tlačítko Přidat záznam, pod ním historie */
.log-add-top { margin: 0; }
.log-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 10px; }
.log-sec-head h2 { margin: 0; }
.log-add { margin: 0 0 6px; }
.log-add > summary { list-style: none; cursor: pointer; }
.log-add > summary::-webkit-details-marker { display: none; }
.log-add[open] > summary { display: none; }
.log-add form { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.log-more { margin-top: 4px; }
.log-more > summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: 8px 0; }
@media (max-width: 600px) { .filter-btn .filter-val { margin-left: auto; } }
@media (max-width: 600px) { .filter-drop .filter-menu, .filter-drop:nth-of-type(2) .filter-menu { left: 0; right: 0; max-width: none; min-width: 0; } }

/* v134: úprava záznamu deníku, volba hlášení závad */
.log-edit { margin-top: 4px; }
.log-edit > summary { list-style: none; cursor: pointer; justify-self: start; display: inline-block; }
.log-edit > summary::-webkit-details-marker { display: none; }
.log-edit[open] > summary { margin-bottom: 8px; }
.log-edit-form { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.log-edit-form .field { margin-bottom: 10px; }
.log-edit-cell { align-self: start; text-align: right; }
.log-edit-cell .log-edit[open] { text-align: left; }
.log-edit-cell .log-edit-form { width: min(340px, 80vw); }
.report-choice { border: 0; padding: 0; margin: 4px 0 12px; min-width: 0; }
.report-choice legend { padding: 0; margin-bottom: 8px; font-weight: 700; }

/* v135: report k fakturaci po zakázkách */
.work-invoice { margin-bottom: 16px; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.work-invoice h2 { margin-bottom: 4px; }
.work-open { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 14px; }
.work-open-m { padding: 4px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); }
.work-deliver { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.work-deliver legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.work-deliver .check { margin-bottom: 10px; }
.work-deliver-email { max-width: 360px; margin-left: 32px; }
.work-reports-box { margin-bottom: 16px; }
.work-reports-box > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.work-reports-box > summary::-webkit-details-marker { display: none; }
.work-reports-box > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: auto; transition: transform .15s; color: var(--ink-2); }
.work-reports-box[open] > summary::after { transform: rotate(-135deg); }
.work-reports-box > summary h2 { margin: 0; }
.work-reports-box[open] > summary { margin-bottom: 12px; }
.work-section-title { margin: 24px 0 12px; font-size: 1.25rem; }
.work-job { margin-bottom: 16px; }
.work-job-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.work-job-head h2 { margin: 0; font-size: 1.125rem; }
.work-job-head h2 a { color: inherit; }
.work-job-head p { margin: 2px 0 0; }
.work-job-sum { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--brand); }
.work-print-job h2 { font-size: 16px; margin: 18px 0 4px; }
@media print {
    .work-print-split .work-print-page + .work-print-page { break-before: page; }
    .work-print-job { break-inside: avoid-page; }
}
.work-auto-modes { display: grid; gap: 0; margin-bottom: 4px; }
.work-auto-modes .check { margin-bottom: 10px; }
.log-item:has(.log-edit-cell .log-edit[open]) .log-edit-cell { grid-column: 1 / -1; text-align: left; }
.log-item:has(.log-edit-cell .log-edit[open]) .log-edit-cell .log-edit-form { width: auto; }
/* v135: rychlá navigace v Účtu */
.account-nav { margin-bottom: 16px; }
.account-nav a { white-space: nowrap; }
.layout-app [id] { scroll-margin-top: 80px; }

/* v136: jednotný řádek filtrů v celé aplikaci (Moje kódy, Servis, Pracovní deník, záznam změn, správa).
   Hledání roste, výběry se roztáhnou do konce řádku, změna se použije hned (výběr po změně, hledání Enterem),
   výběr se zaškrtáváním vypadá stejně jako běžný výběr, Zrušit filtry je odkaz na konci. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.filters > input[type="search"] { flex: 3 1 260px; width: auto; min-width: 0; max-width: none; background-color: var(--surface);
    padding-left: 40px; background-repeat: no-repeat; background-position: 13px 50%; background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9A94' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
.filters > select, .filters > .filter-drop, .filters > .work-date { flex: 1 1 180px; width: auto; min-width: 0; }
.filters > .btn { flex: 0 0 auto; }
.filters-reset { flex: 0 0 auto; white-space: nowrap; }
.filters .filter-drop > .filter-btn { width: 100%; max-width: none; min-height: 46px; justify-content: flex-start; gap: 6px; padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-s); color: var(--ink); font-weight: 400; font-size: 1rem; }
.filters .filter-drop > .filter-btn:hover { border-color: var(--brand); color: var(--ink); }
.filters .filter-drop[open] > .filter-btn { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.filters .filter-btn .filter-label { color: var(--ink-2); font-weight: 400; }
.filters .filter-btn .filter-label::after { content: ":"; }
.filters .filter-btn .filter-val { font-weight: 600; margin-left: 0; }
.filters .filter-btn .filter-caret { margin-left: auto; color: var(--ink-2); }
.filters .filter-btn.is-active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.filters .filter-menu { left: 0; right: auto; min-width: 100%; }
.filters .work-date span { flex: none; }
.filters + .period-tabs, .period-tabs + .filters { margin-top: 0; }
@media (max-width: 600px) {
    .filters > select, .filters > .filter-drop, .filters > .work-date { flex: 1 1 100%; }
    .filters .filter-menu { right: 0; max-width: none; }
}
/* v136: hlavička stránky – akce vždy vpravo vedle nadpisu (dřív se u delšího popisu propadly pod něj) */
.page-head > div:first-child { flex: 1 1 380px; min-width: 0; }
.page-head > .head-actions { margin-left: auto; justify-content: flex-end; }
@media (max-width: 600px) { .page-head > .head-actions { margin-left: 0; justify-content: flex-start; } }
.collapsible > summary .badge { margin-left: 8px; margin-right: auto; }

/* ===== v137: responzivita a sjednocení ===== */

/* Moje kódy: řádek kódu je jedna karta – zaškrtávátko, obsah i „otevřít jako návštěvník“ uvnitř, okraje lícují s filtry */
.code-li { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s ease; }
.code-list-plain .code-li { grid-template-columns: minmax(0, 1fr) auto; }
.code-li:hover { border-color: var(--brand); }
.code-li .row-pick { width: auto; align-self: stretch; padding: 0 2px 0 16px; }
.code-li .code-row { border: 0; background: transparent; border-radius: 0; padding: 14px 12px; }
.code-li .code-row:hover { border-color: transparent; }
.code-li:has(.code-row.is-saved) { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
.code-li .code-row.is-saved { box-shadow: none; animation: none; }
.code-li .code-open { margin-right: 12px; }
.user-bulk { padding: 8px 12px 8px 16px; }
@media (max-width: 600px) {
    .code-li .row-pick { padding-left: 12px; }
    .code-li .code-row { padding: 12px 8px; gap: 4px 10px; }
    .code-li .code-type-ico { width: 38px; height: 38px; }
    .code-li .code-open { width: 36px; height: 36px; margin-right: 8px; }
}

/* Deník na kartě a v úpravě kódu: na mobilu datum nad záznamem, úprava přes celou šířku */
@media (max-width: 600px) {
    .log-list .log-item, .asset-private .log-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date edit" "body body"; gap: 2px 12px; }
    .log-list .log-item > .log-date { grid-area: date; }
    .log-list .log-item > .log-body { grid-area: body; }
    .log-list .log-item > .log-edit-cell, .log-list .log-item > form { grid-area: edit; }
    .log-edit-form { padding: 12px; margin-left: -4px; margin-right: -4px; }
    .log-edit-cell .log-edit-form { width: auto; }
    .log-edit-form .field-grid { grid-template-columns: 1fr 1fr; }
}
.log-edit-form input[type="file"] { max-width: 100%; }

/* Souhrnné dlaždice na mobilu kompaktní (dřív jedna dlaždice přes celou šířku) */
@media (max-width: 600px) {
    .dkpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dkpi-item { padding: 12px 14px; }
    .dkpi-num { font-size: 1.5rem; }
    .dkpi-main .dkpi-num { font-size: 2rem; }
    .dkpi-main ~ .dkpi-item:last-child:nth-child(even) { grid-column: auto; }
    .dkpi-main { grid-column: 1 / -1; }
    .empty { padding: 20px 16px; }
    .empty p { margin-bottom: 10px; }
    .card { padding: 16px; }
    .page-head h1 { font-size: 1.6rem; }
}

/* Tabulky na mobilu jako karty (data-label u buněk) */
@media (max-width: 700px) {
    .table.table-stack { min-width: 0; }
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    .table-stack td { border: 0; padding: 3px 0; text-align: left !important; }
    .table-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
    .table-stack td.check-col { position: absolute; right: 14px; width: auto; }
    .table-stack tr { position: relative; }
    .table-stack td:empty { display: none; }
    .table-stack tfoot { display: block; } .table-stack tfoot tr { display: flex; justify-content: space-between; }
    .table-stack tfoot th { border: 0; padding: 0; }
    .table-wrap:has(.table-stack) { overflow: visible; }
    .work-table .work-text { max-width: none; min-width: 0; }
    .work-actions { width: auto; text-align: left; }
}
.collapsible > summary { justify-content: flex-start; gap: 8px; text-align: left; }
.collapsible > summary::after { margin-left: auto; }
.collapsible > summary .badge { margin: 0; }
@media (max-width: 600px) {
    .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
    .stat-tile { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 12px 16px; }
    .stat-tile .stat-ico { display: none; }
    .stat-num { font-size: 1.35rem; }
    .stat-num small { font-size: .8125rem; }
    .head-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 600px) {
    .filters > select, .filters > .filter-drop, .filters > .work-date { flex: 1 1 calc(50% - 4px); }
    .filters .filter-btn .filter-label { display: none; }
    .filters > input[type="search"] { flex-basis: 100%; }
}

/* v138: nenápadné „i“ s upozorněním, co do obsahu nepatří */
.has-tip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field > span.field-label-row:first-child { display: flex; align-items: center; gap: 8px; }
.field-label-row label { font-size: .875rem; font-weight: 650; color: var(--ink-2); }
.info-btn {
    display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; flex: none;
    border: 1.5px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink-2);
    font: italic 700 .8125rem/1 Georgia, "Times New Roman", serif; cursor: pointer;
}
.info-btn:hover, .info-btn[aria-expanded="true"] { border-color: var(--info-ink); color: var(--info-ink); background: var(--info-bg); }
.info-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.info-note { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-s); background: var(--info-bg); color: var(--info-ink); font-size: .875rem; line-height: 1.5; }
.info-note p { margin: 0; }
.field-label-row + .info-note { margin: 4px 0 8px; }

/* v138: dlouhý seznam skupin k zaškrtnutí (nad 8) – hledání, počet vybraných, posuvný rámeček */
.group-pick { margin: 0 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); }
.group-pick-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px; border-bottom: 1px solid var(--line); }
.group-pick-tools input[type="search"] { flex: 1 1 160px; width: auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.group-pick-count { font-size: .8125rem; color: var(--ink-2); white-space: nowrap; }
.group-pick-tools .link-btn { font-size: .8125rem; }
.group-pick > .tag-checks, .group-pick > .api-tags {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 2px 8px;
    max-height: 264px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px;
}
.group-pick .tag-check, .group-pick .api-tags .check { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: var(--radius-s); min-width: 0; }
.group-pick .tag-check:hover, .group-pick .api-tags .check:hover { background: var(--surface-2); }
.group-pick .tag-check input { position: static; opacity: 1; width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--brand); }
.group-pick .tag-check input:disabled { opacity: .7; }
.group-pick .tag-check .tag-chip { opacity: 1; border-color: transparent; min-width: 0; overflow-wrap: anywhere; }
.group-pick .tag-check input:checked + .tag-chip { border-color: currentColor; }
.group-pick .tag-check[hidden], .group-pick .api-tags .check[hidden] { display: none; }
.group-pick-empty { margin: 0; padding: 10px 14px; font-size: .875rem; color: var(--ink-2); }
.api-form .group-pick { margin-left: 28px; }
.api-form fieldset:has(input[name="limit_tags"]:not(:checked)) .group-pick { display: none; }
.member-tags .group-pick, .member-add-tags .group-pick { background: var(--surface); }

/* v138: Lidé v účtu – pozvání jako hlavní tlačítko, seznam členů přes celou šířku */
.members-invite { margin-bottom: 16px; }
.members-invite > form { max-width: 720px; }
.member-search { margin: 0 0 8px; }
.member-search input { max-width: 360px; }
.member-item[hidden] { display: none; }
@media (min-width: 900px) {
    .member-list .member-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .member-list .member-tags-box { grid-column: 1 / -1; }
}

/* v139: návrat zpět po prokliku jinam (BackNav) – lišta nad obsahem stránky bez vlastního odkazu zpět */
.back-nav { margin: 0 0 4px; }
.back-nav .back { margin-bottom: 0; }
.member-actions a[data-no-from] { font-weight: 600; }

/* v139: odsazení textu a rámečků (kontrola skriptem: text těsně pod tlačítkem, nápověda nalepená na seznam souborů…) */
.btn-block + p, .btn-block + small, a.btn-block + .muted { margin-top: 8px; }
.type-panel > p + .file-list, .type-panel > div + .file-list, .type-panel > .pw-gap + .file-list, .type-panel > .pw-all-note + .file-list { margin-top: 12px; }
.type-panel > div[data-type-panel] > p:last-child { margin-bottom: 0; }
.pw-all-note { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); line-height: 1.45; }
.pw-all-note[hidden] { display: none; }
.pw-all-note a { color: inherit; font-weight: 650; }
.file-item .file-body { display: grid; gap: 6px; min-width: 0; }
.file-item .file-body > * { margin: 0; }
.file-vis { margin-top: 0; }
.file-vis.is-saved select { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
.file-vis.is-error select { border-color: var(--danger, #c0392b); }
.table-wrap + .card, .table-wrap + section, .work-table-wrap + .card { margin-top: 20px; }
.asset-title h1 { margin-bottom: 6px; }
.page-head h1:has(.tag-chip) { margin-bottom: 8px; }
.doc-photo figcaption { margin-top: 6px; }
.log-body .state { margin-top: 4px; }
.session-main .badge { margin: 2px 0; }
.notify-head + p { margin-top: 8px; }
@media (max-width: 700px) { .table-stack td { padding: 4px 0; } }
/* Deník na mobilu: otevřená úprava záznamu pod záznamem, ne přes datum */
@media (max-width: 600px) {
    .log-list .log-item:has(.log-edit-cell .log-edit[open]) > .log-edit-cell { grid-area: auto; grid-column: 1 / -1; grid-row: 3; }
    .log-list .log-item:has(> .log-edit-cell .log-edit[open]) { grid-template-areas: "date date" "body body"; }
}
.work-auto { margin-top: 24px; } /* v242: i jako form */
.small + .btn-block, small + .btn-block { margin-top: 10px; }
.file-item > .file-icon { align-self: start; margin-top: 2px; }
/* v139: úzký mobil (320 px) – výběr akce ve správě a přepínač zobrazení nepřetékají, úprava záznamu deníku v jednom sloupci */
.bulk-bar select { min-width: 0; max-width: 100%; }
.period-tabs { flex-wrap: wrap; }
@media (max-width: 360px) { .log-edit-form .field-grid { grid-template-columns: 1fr; } }

/* =====================================================================================
   v140: nová úvodní stránka (templates/landing.php, js/landing-fx.js). Třídy fx-*.
   Bez JS / s „omezit pohyb“ je vše vidět staticky.
   ===================================================================================== */
.c-mint { --c: var(--lp-mint); --c-soft: var(--lp-mint-soft); }
.layout-landing { --fx-ink: #0C211F; --fx-ease: cubic-bezier(.2, .75, .2, 1); --fx-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Postupné zobrazení */
.fx:not(.fx-still) [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--fx-ease), transform .75s var(--fx-ease); transition-delay: calc(var(--fx-i, 0) * 70ms); }
.fx:not(.fx-still) [data-reveal].is-in { opacity: 1; transform: none; }

.fx-kicker { text-align: center; margin: 0 0 10px; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-coral); }
.fx-kicker-left, .fx-left { text-align: left; }
.fx-split { display: grid; gap: 44px; align-items: center; }
@media (min-width: 920px) { .fx-split { grid-template-columns: 1fr 1fr; gap: 72px; } }
.fx-ticks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; color: var(--ink-2); }
.fx-ticks li { display: flex; gap: 12px; align-items: flex-start; }
.fx-ticks li > svg { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--lp-mint-soft); color: var(--brand); stroke-width: 3; }
.fx-ticks strong { color: var(--ink); }
.fx-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* --- Úvod (tmavý panel) ------------------------------------------------------------- */
.fx-hero {
    position: relative; isolation: isolate; overflow: hidden;
    margin: 8px 8px 0; border-radius: 28px; padding: 44px 0 0;
    color: #E6F0ED;
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(46, 155, 234, .22), transparent 60%),
        radial-gradient(50rem 30rem at -10% 110%, rgba(43, 179, 140, .25), transparent 60%),
        linear-gradient(160deg, #0F2A27 0%, #0A1B1A 60%, #0C1F24 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    --logo-hole: #0C211F;
}
@media (min-width: 700px) { .fx-hero { margin: 12px 16px 0; border-radius: 34px; padding-top: 72px; } }
.fx-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
    -webkit-mask-image: radial-gradient(70% 80% at 72% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 80% at 72% 40%, #000 0%, transparent 75%); }
.fx-hero-glow { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.fx-hero-glow::before, .fx-hero-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.fx-hero-glow::before { width: 380px; height: 380px; right: 8%; top: 10%; background: radial-gradient(circle, rgba(255, 122, 89, .55), transparent 70%); animation: fx-drift 14s ease-in-out infinite alternate; }
.fx-hero-glow::after { width: 420px; height: 420px; left: -6%; bottom: -10%; background: radial-gradient(circle, rgba(93, 180, 169, .55), transparent 70%); animation: fx-drift 18s ease-in-out infinite alternate-reverse; }
@keyframes fx-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.15); } }

.fx-hero-grid { display: grid; gap: 40px; align-items: center; position: relative; }
@media (min-width: 960px) { .fx-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.fx-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 750; color: #BFE7DF; background: rgba(93, 180, 169, .14); box-shadow: inset 0 0 0 1px rgba(93, 180, 169, .3); }
.fx-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #5EE0B9; }
.fx-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #5EE0B9; animation: fx-ping 1.8s ease-out infinite; }
@keyframes fx-ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.fx-hero h1 { color: #FFFFFF; font-size: clamp(2.3rem, 5.6vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; margin: 0 0 22px; text-wrap: balance; }
.fx-hero h1 em { position: relative; font-style: normal; white-space: normal; background: linear-gradient(90deg, #FF8A66, #FFB547 60%, #FFD37A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-scribble { position: absolute; left: 0; right: 0; bottom: -.16em; width: 100%; height: .3em; overflow: visible; }
.fx-scribble path { fill: none; stroke: #FF7A59; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 320; stroke-dashoffset: 320; animation: fx-draw 1.1s .6s var(--fx-ease) forwards; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
.fx-lead { font-size: 1.125rem; line-height: 1.62; color: rgba(230, 240, 237, .78); max-width: 34em; margin: 0 0 30px; }
.fx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.fx-btn-hot { background: linear-gradient(135deg, #FF7A59, #FF9A4A); color: #fff; box-shadow: 0 10px 30px -10px rgba(255, 122, 89, .8), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s var(--fx-ease), box-shadow .2s ease; }
.fx-btn-hot:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(255, 122, 89, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.fx-btn-hot svg { transition: transform .2s var(--fx-ease); }
.fx-btn-hot:hover svg { transform: translateX(4px); }
.fx-btn-glass { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fx-btn-glass:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); }
.fx-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .9375rem; color: rgba(230, 240, 237, .75); }
.fx-checks li { display: flex; align-items: center; gap: 10px; }
.fx-checks svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; flex: none; background: rgba(94, 224, 185, .15); color: #5EE0B9; stroke-width: 3; }
.fx-hero-text > * { animation: fx-rise .8s var(--fx-ease) both; }
.fx-hero-text > :nth-child(2) { animation-delay: .08s; }
.fx-hero-text > :nth-child(3) { animation-delay: .16s; }
.fx-hero-text > :nth-child(4) { animation-delay: .24s; }
.fx-hero-text > :nth-child(5) { animation-delay: .32s; }
@keyframes fx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Scéna: štítek → telefon */
.fx-stage { position: relative; width: 100%; max-width: 520px; height: 500px; margin: 0 auto; animation: fx-rise 1s .2s var(--fx-ease) both; }
.fx-plate-wrap { position: absolute; left: 0; bottom: 58px; width: 210px; z-index: 2; animation: fx-float 7s ease-in-out infinite; }
@keyframes fx-float { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-12px) rotate(-5deg); } }
.fx-plate {
    --plate-a: #F7F9F8; --plate-b: #CBD5D1; --plate-edge: #AEBBB6; --plate-text: #56645F; --plate-shine: #FFFFFF;
    padding: 32px 18px 14px; color: #0E1A1E;
    box-shadow: inset 0 1px 0 #fff, 0 30px 50px -20px rgba(0, 0, 0, .65);
}
.fx-plate::before { background: #0E2422; }
.fx-plate .tag-code { font-size: .875rem; margin-top: 10px; color: #56645F; }
.fx-plate-promo { margin: 2px 0 0; font-size: .6875rem; font-weight: 700; color: #7C8A86; }
.fx-qr-box { position: relative; overflow: hidden; padding: 9px; max-width: none; color: #0E1A1E; }
.fx-qr-box > div { width: 100%; }
.fx-qr-box svg, .fx-art-qr svg, .fx-mat-qr svg, .fx-final-qr svg { width: 100%; height: auto; display: block; }
.fx-scan { position: absolute; left: 0; right: 0; top: 0; height: 26%; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, transparent, rgba(255, 122, 89, .28) 70%, rgba(255, 122, 89, .95) 96%, transparent); }
.fx-stage.is-scan .fx-scan { animation: fx-scan 1.25s var(--fx-ease) both; }
@keyframes fx-scan { 0% { opacity: 0; transform: translateY(-100%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(390%); } }
.fx-plate-shadow { display: block; width: 70%; height: 18px; margin: 18px auto 0; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(10px); }

.fx-beam { position: absolute; left: 28%; top: 30%; width: 36%; height: 26%; overflow: visible; z-index: 1; }
.fx-beam path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fx-beam-track { stroke: rgba(255, 255, 255, .18); stroke-width: 2; stroke-dasharray: 2 8; }
.fx-beam-pulse { stroke: #FF8A66; stroke-width: 3; stroke-dasharray: 18 400; stroke-dashoffset: 18; opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 122, 89, .9)); }
.fx-stage.is-scan .fx-beam-pulse { animation: fx-beam 1s .95s ease-in both; }
@keyframes fx-beam { 0% { opacity: 1; stroke-dashoffset: 18; } 100% { opacity: 1; stroke-dashoffset: -150; } }

.fx-phone { position: relative; width: 252px; padding: 11px; border-radius: 38px; background: linear-gradient(160deg, #26343A, #121B1F); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .75), inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.fx-stage .fx-phone { position: absolute; right: 0; top: 0; z-index: 3; animation: fx-float-2 8s ease-in-out infinite; }
@keyframes fx-float-2 { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.fx-phone-notch { width: 72px; height: 20px; border-radius: 0 0 14px 14px; background: #121B1F; position: absolute; left: 50%; top: 11px; transform: translateX(-50%); z-index: 2; }
.fx-phone-screen { position: relative; height: 410px; border-radius: 28px; overflow: hidden; background: #FFFFFF; color: #17232A; font-size: .78rem; }
.fx-screen { position: absolute; inset: 0; padding: 38px 15px 16px; display: flex; flex-direction: column; gap: 9px; }
.fx .fx-screen { opacity: 0; visibility: hidden; transform: translateY(26px) scale(.97); filter: blur(4px); transition: opacity .55s var(--fx-ease), transform .65s var(--fx-ease), filter .55s ease, visibility 0s .7s; pointer-events: none; }
.fx .fx-screen.is-on { opacity: 1; visibility: visible; transform: none; filter: none; pointer-events: auto; transition-delay: .15s, .15s, .15s, 0s; }
.fx .fx-screen.is-off { opacity: 0; transform: translateY(-26px) scale(.97); filter: blur(4px); transition-delay: 0s, 0s, 0s, .7s; }
html:not(.fx) .fx-screen:not(.is-on) { display: none; }

/* Obsah obrazovek */
.fx-sc-head { display: flex; gap: 10px; align-items: center; padding-bottom: 4px; }
.fx-sc-head > div { display: grid; line-height: 1.25; min-width: 0; }
.fx-sc-head strong { font-size: .9rem; letter-spacing: -.01em; }
.fx-sc-head span { color: #5B6A70; font-size: .72rem; }
.fx-sc-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--c-soft); color: var(--c); }
.fx-phone-screen .fx-sc-ico { background: color-mix(in srgb, var(--c) 16%, #fff); }
.fx-sc-ico svg { width: 24px; height: 24px; }
.fx-sc-row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid #E6ECE9; color: #5B6A70; }
.fx-sc-row b { color: #17232A; text-align: right; }
.fx-sc-warn { background: #FFF1CF; color: #7A4E0B !important; padding: 0 7px; border-radius: 999px; }
.fx-sc-ok { color: #1E7A4E !important; }
.fx-sc-ok::before { content: "● "; color: #2BB38C; }
.fx-sc-doc { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 1px solid #E3EAE7; border-radius: 12px; font-weight: 650; background: #FAFCFB; }
.fx-sc-doc .file-icon { width: 24px; height: 30px; font-size: .45rem; padding-bottom: 4px; }
.fx-sc-doc .file-icon-video { display: grid; place-items: center; padding: 0; }
.fx-sc-doc .file-icon-video svg { width: 12px; height: 12px; fill: #fff; stroke: none; }
.fx-sc-doc.is-locked { color: #5B6A70; }
.fx-sc-lock { margin-left: auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #FFF1CF; color: #8A5A06; }
.fx-sc-lock svg { width: 13px; height: 13px; }
.fx-sc-grow { display: grid; line-height: 1.2; }
.fx-sc-grow small { font-weight: 600; color: #5B6A70; font-size: .66rem; }
.fx-sc-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #2BB38C; color: #fff; font-size: .62rem; font-weight: 800; }
.fx-sc-doc.is-new { border-color: #9EDCC8; background: #EFFAF6; }
.fx-screen.is-on .fx-sc-doc.is-new { animation: fx-newdoc 1.4s .5s var(--fx-ease) both; }
@keyframes fx-newdoc { 0% { transform: translateX(-14px); opacity: 0; box-shadow: 0 0 0 0 rgba(43, 179, 140, .5); } 40% { transform: none; opacity: 1; } 100% { box-shadow: 0 0 0 10px rgba(43, 179, 140, 0); } }
.fx-sc-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: 12px; background: #1D6B64; color: #fff; font-weight: 750; }
.fx-sc-btn svg { width: 15px; height: 15px; }
.fx-sc-btn.c-coral { background: #FF7A59; }
.fx-sc-btn.c-mint { background: #1F9E7A; }
.fx-sc-btn.is-soft { background: #E3F1EE; color: #1D6B64; }
.fx-sc-btns { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.fx-sc-btns .fx-sc-btn { margin: 0; }
.fx-sc-card { display: grid; justify-items: center; text-align: center; gap: 3px; padding: 12px 8px 14px; margin-top: 4px; border-radius: 16px; background: linear-gradient(160deg, #FFE7DE, #FFF5EF); }
.fx-sc-card strong { font-size: .98rem; }
.fx-sc-card span { color: #5B6A70; font-size: .7rem; }
.fx-sc-card.is-plain { background: #EAF6F2; }
.fx-sc-avatar { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; background: linear-gradient(135deg, #FF7A59, #F2A91E); color: #fff !important; font-weight: 800; font-size: 1.15rem !important; box-shadow: 0 8px 18px -8px rgba(255, 122, 89, .8); }
.fx-screen.is-on .fx-sc-avatar { animation: fx-pop .6s .35s var(--fx-spring) both; }
@keyframes fx-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.fx-sc-field { min-height: 70px; padding: 9px 10px; border: 1.5px solid #CFE0DA; border-radius: 12px; background: #FAFCFB; color: #17232A; font-weight: 600; }
.fx-sc-typed { display: inline; }
.fx .fx-screen.is-on .fx-sc-typed { display: inline-block; white-space: nowrap; overflow: hidden; max-width: 100%; border-right: 2px solid #FF7A59; animation: fx-type 1.2s .45s steps(26) both, fx-caret .7s step-end infinite; }
@keyframes fx-type { from { width: 0; } to { width: 100%; } }
@keyframes fx-caret { 50% { border-color: transparent; } }
.fx-sc-photo { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 12px; background: #F1F5F3; color: #5B6A70; font-weight: 650; }
.fx-sc-thumb { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #6D8A92, #34474E); }
.fx-sc-thumb svg { width: 20px; height: 20px; }
.fx .fx-screen.is-on .fx-sc-photo { animation: fx-pop .5s 1.55s var(--fx-spring) both; }
.fx-sc-send { position: relative; background: #FF7A59; overflow: hidden; }
.fx-sc-send-b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: #1F9E7A; opacity: 0; }
.fx .fx-screen.is-on .fx-sc-send-b { animation: fx-sent .45s 2s var(--fx-ease) both; }
@keyframes fx-sent { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
.fx-sc-log { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.fx-sc-log > span { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: #7C5CE6; box-shadow: 0 0 0 4px #ECE6FD; flex: none; }
.fx-sc-log div { display: grid; line-height: 1.25; }
.fx-sc-log small { color: #5B6A70; }
.fx-screen .state { align-self: flex-start; font-size: .68rem; }
.fx-phone-screen .state-ok { background: #DFF0E6; color: #1E5C3A; }
.fx-sc-url { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: #F1F5F3; font-weight: 750; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; margin-top: 8px; }
.fx-sc-url svg { width: 18px; height: 18px; flex: none; color: #1D6B64; }
.fx-sc-url.is-target { background: #ECE6FD; color: #4B33A8; margin-top: 0; }
.fx-sc-url.is-target svg { color: #7C5CE6; }
.fx-sc-arrow { display: grid; place-items: center; color: #9AA9A4; }
.fx-sc-arrow svg { width: 20px; height: 20px; transform: rotate(90deg); }
.fx .fx-screen.is-on .fx-sc-arrow svg { animation: fx-bob 1.2s ease-in-out infinite; }
@keyframes fx-bob { 50% { transform: rotate(90deg) translateX(4px); } }
.fx-sc-bar { height: 5px; border-radius: 3px; background: #ECEFEE; overflow: hidden; margin: 4px 0 6px; }
.fx-sc-bar span { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #7C5CE6, #2E9BEA); transform-origin: left; }
.fx .fx-screen.is-on .fx-sc-bar span { animation: fx-load 1.6s .4s var(--fx-ease) both; }
@keyframes fx-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fx-sc-wifi { display: grid; place-items: center; margin: 10px auto 2px; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle, #D8F3EA, #fff 70%); color: #1F9E7A; }
.fx-sc-wifi svg { width: 48px; height: 48px; }
.fx .fx-screen.is-on .fx-sc-wifi svg path { animation: fx-wave 1.8s ease-in-out infinite; }
.fx .fx-screen.is-on .fx-sc-wifi svg path:nth-child(1) { animation-delay: .4s; }
@keyframes fx-wave { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Popisky ve scéně */
.fx-stage-meta { position: absolute; right: 6px; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: #DDEBE7; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fx-stage-same { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; border-radius: 999px; background: rgba(94, 224, 185, .16); color: #8EF0D0; }
.fx-stage-same svg { width: 16px; height: 16px; }
.fx-stage-now { min-width: 9.5em; }
.fx-dots { display: inline-flex; gap: 5px; }
.fx-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); transition: width .4s var(--fx-ease), background-color .4s; }
.fx-dots i.is-on { width: 18px; background: #FF8A66; }
.fx-toast { position: absolute; left: 0; top: 34px; z-index: 5; display: flex; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; background: #FFFFFF; color: #17232A; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); font-size: .8125rem; opacity: 0; transform: translateY(-12px) scale(.9); pointer-events: none; }
.fx-toast div { display: grid; line-height: 1.25; }
.fx-toast small { color: #5B6A70; }
.fx-toast-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #FFE7DE; color: #E0583A; flex: none; }
.fx-toast-ico svg { width: 19px; height: 19px; }
.fx-toast.is-on { animation: fx-toast 3.3s var(--fx-spring) both; }
@keyframes fx-toast { 0% { opacity: 0; transform: translateY(-12px) scale(.9); } 14%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px) scale(.96); } }
.fx-float { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 9px; border-radius: 999px; font-size: .8125rem; font-weight: 750; white-space: nowrap; background: #FFFFFF; color: #17232A; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); }
.fx-float svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #D8F3EA; color: #1D6B64; }
.fx-float-1 { left: 4%; top: 6%; opacity: 0; transform: translateX(-10px); transition: opacity .4s ease, transform .5s var(--fx-spring); }
.fx-stage.is-edited .fx-float-1 { opacity: 1; transform: none; transition-delay: .9s; }
html:not(.fx) .fx-toast, html:not(.fx) .fx-float-1 { display: none; }
@media (max-width: 560px) {
    .fx-stage { height: 440px; max-width: 360px; }
    .fx-stage .fx-phone { width: 214px; padding: 9px; border-radius: 32px; }
    .fx-phone-screen { height: 358px; border-radius: 24px; font-size: .72rem; }
    .fx-plate-wrap { width: 148px; bottom: 74px; }
    .fx-plate { padding: 28px 14px 12px; }
    .fx-stage-meta { left: 0; right: 0; justify-content: center; font-size: .75rem; }
    .fx-stage-now { min-width: 8.5em; }
    .fx-toast { top: 8px; }
    .fx-float-1 { left: 0; top: 2%; }
}
@media (max-width: 360px) { .fx-stage { transform: scale(.9); transform-origin: top center; } }

/* v173: Kam se štítky hodí – pevná řada malých „štítků“ místo jezdícího pásu */
.fx-uses { position: relative; margin-top: 56px; padding-top: 26px; padding-bottom: 34px; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 14px; }
@media (min-width: 900px) { .fx-uses { grid-template-columns: auto 1fr; align-items: start; gap: 28px; } }
.fx-uses-h { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(221, 235, 231, .55); white-space: nowrap; }
.fx-uses-h svg { width: 16px; height: 16px; color: #5DB4A9; }
.fx-uses-list { display: flex; flex-wrap: wrap; gap: 8px 8px; list-style: none; margin: 0; padding: 0; }
.fx-uses-list li { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border-radius: 8px; font-size: .875rem; font-weight: 700; color: #DDEBE7; white-space: nowrap;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: background-color .25s, transform .25s var(--fx-ease), box-shadow .25s; }
/* „otvor“ štítku */
.fx-uses-list li::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #0A1B1A; box-shadow: 0 0 0 1.5px #5DB4A9; }
.fx-uses-list li:nth-child(3n+2)::before { box-shadow: 0 0 0 1.5px #FF8A66; }
.fx-uses-list li:nth-child(3n)::before { box-shadow: 0 0 0 1.5px #F2A91E; }
.fx-uses-list li:hover { transform: translateY(-2px) rotate(-1.5deg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 18px -10px rgba(0, 0, 0, .7); }
/* v174: postupné „načtení“ štítku – přejede světlo, otvor se rozsvítí, štítek povyskočí (landing-fx.js přidá .is-scan) */
.fx-uses-list li { overflow: hidden; --u: #5DB4A9; }
.fx-uses-list li:nth-child(3n+2) { --u: #FF8A66; }
.fx-uses-list li:nth-child(3n) { --u: #F2A91E; }
.fx-uses-list li::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--u) 45%, transparent), transparent); }
.fx-uses-list li.is-scan { animation: fx-use-lit 1.6s var(--fx-ease) both; }
.fx-uses-list li.is-scan::before { animation: fx-use-hole 1.6s ease-out both; }
.fx-uses-list li.is-scan::after { animation: fx-use-sweep .7s var(--fx-ease) both; }
@keyframes fx-use-sweep { 0% { left: -40%; opacity: 1; } 100% { left: 100%; opacity: 1; } }
@keyframes fx-use-hole { 0% { background: #0A1B1A; } 25%, 60% { background: var(--u); box-shadow: 0 0 0 1.5px var(--u), 0 0 10px 2px var(--u); } 100% { background: #0A1B1A; } }
@keyframes fx-use-lit { 0% { transform: none; color: #DDEBE7; } 20% { transform: translateY(-3px); color: #FFFFFF; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--u) 70%, transparent), 0 10px 22px -12px var(--u); }
    60% { transform: none; color: #FFFFFF; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--u) 45%, transparent); } 100% { transform: none; } }
@media (max-width: 560px) { .fx-uses { margin-top: 40px; padding-bottom: 24px; } .fx-uses-list li { font-size: .8125rem; padding: 5px 10px 5px 8px; } }

/* --- Otevřít kód ---------------------------------------------------------------------- */
.fx-open { padding: 28px 0 0; }
.fx-open-card { display: grid; gap: 18px; align-items: center; padding: 22px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (min-width: 860px) { .fx-open-card { grid-template-columns: 1fr minmax(360px, 440px); padding: 24px 28px; gap: 32px; } }
.fx-open-text h2 { font-size: 1.25rem; margin: 0 0 4px; }
.fx-open-text p { margin: 0; color: var(--ink-2); }
.fx-open-ex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; color: var(--ink); white-space: nowrap; }
.fx-open-ex mark { background: var(--lp-amber-soft); color: var(--warn-ink); padding: 1px 4px; border-radius: 5px; font-weight: 800; }
.fx-open-form { display: flex; align-items: stretch; min-width: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); padding: 4px; transition: border-color .2s, box-shadow .2s; }
.fx-open-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.fx-open-prefix { display: flex; align-items: center; padding: 0 2px 0 10px; color: var(--ink-2); font-weight: 650; white-space: nowrap; }
.fx-open-form input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 6px; font: inherit; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); outline: none; box-shadow: none; min-height: 0; }
.fx-open-form .btn { flex: none; }

/* --- Co může kód ukázat ------------------------------------------------------------ */
.fx-tabs { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .fx-tabs { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.fx-tablist { display: grid; gap: 8px; }
.fx-tab { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 14px 16px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border-radius: 16px; border: 1px solid transparent; background: transparent; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.fx-tab:hover { background: color-mix(in srgb, var(--c) 7%, transparent); }
.fx-tab.is-on { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.fx-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fx-tab-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--c-soft); color: var(--c); transition: transform .4s var(--fx-spring), background-color .3s, color .3s; }
.fx-tab-ico svg { width: 23px; height: 23px; }
.fx-tab.is-on .fx-tab-ico { background: var(--c); color: #fff; transform: rotate(-6deg) scale(1.06); }
.fx-tab-body { display: grid; gap: 4px; min-width: 0; padding-top: 9px; }
.fx-tab-body strong { font-size: 1.0625rem; }
.fx-tab-desc { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.fx-tabs.is-ready .fx-tab-body { grid-template-rows: auto 0fr; transition: grid-template-rows .45s var(--fx-ease); }
.fx-tabs.is-ready .fx-tab-desc { overflow: hidden; min-height: 0; opacity: 0; transition: opacity .35s ease; }
.fx-tabs.is-ready .fx-tab.is-on .fx-tab-body { grid-template-rows: auto 1fr; }
.fx-tabs.is-ready .fx-tab.is-on .fx-tab-desc { opacity: 1; transition-delay: .12s; }
.fx-tab-progress { position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; opacity: 0; }
.fx-tabs.is-running .fx-tab.is-on .fx-tab-progress { opacity: 1; animation: fx-progress var(--fx-tab-ms, 5200ms) linear both; }
@keyframes fx-progress { to { transform: scaleX(1); } }
.fx-tabs-stage { position: relative; display: grid; place-items: center; padding: 30px 0; }
@media (max-width: 899px) { .fx-tabs-stage { order: -1; padding: 10px 0; } }
.fx-phone-lg { width: 280px; z-index: 1; animation: fx-float-3 8s ease-in-out infinite; }
@keyframes fx-float-3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fx-phone-lg .fx-phone-screen { height: 420px; font-size: .82rem; }
@media (max-width: 899px) { .fx-phone-lg { width: 248px; } .fx-phone-lg .fx-phone-screen { height: 400px; } }
.fx-orbit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.fx-orbit span { position: absolute; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--brand) 28%, transparent); animation: fx-spin 40s linear infinite; }
.fx-orbit span:nth-child(1) { width: 380px; height: 380px; }
.fx-orbit span:nth-child(2) { width: 480px; height: 480px; animation-direction: reverse; animation-duration: 60s; border-color: color-mix(in srgb, var(--lp-coral) 25%, transparent); }
.fx-orbit span:nth-child(3) { width: 300px; height: 300px; border: 0; background: radial-gradient(circle, color-mix(in srgb, var(--lp-mint) 30%, transparent), transparent 70%); filter: blur(20px); animation: none; }
.fx-orbit span:nth-child(1)::after, .fx-orbit span:nth-child(2)::after { content: ""; position: absolute; top: 50%; left: -6px; width: 11px; height: 11px; border-radius: 3px; background: var(--lp-coral); }
.fx-orbit span:nth-child(2)::after { left: auto; right: -6px; background: var(--lp-sky); }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .fx-orbit span:nth-child(1) { width: 300px; height: 300px; } .fx-orbit span:nth-child(2) { width: 360px; height: 360px; } }
.fx-types { overflow: hidden; }

/* --- Jak to funguje --------------------------------------------------------------------- */
.fx-how { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fx-steps-wrap { position: relative; margin-top: 44px; }
.fx-steps-line { display: none; }
@media (min-width: 860px) {
    .fx-steps-line { display: block; position: absolute; left: 0; right: 0; top: 196px; width: 100%; height: 40px; overflow: visible; }
    .fx-steps-line path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; }
    .fx .fx-steps-line { opacity: 1 !important; transform: none !important; }
    .fx:not(.fx-still) .fx-steps-line path { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s .3s var(--fx-ease); }
    .fx .fx-steps-line.is-in path { clip-path: inset(0 0 0 0); }
}
.fx-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; position: relative; }
@media (min-width: 860px) { .fx-steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.fx-step { position: relative; }
.fx-step-art { position: relative; height: 176px; margin-bottom: 18px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 10px; padding: 20px; background: linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--bg) 60%, var(--surface))); border: 1px solid var(--line); }
.fx-step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--c); color: #fff; font-weight: 800; font-size: 1.125rem; margin-bottom: 14px; box-shadow: 0 0 0 6px var(--surface); }
.fx-step h3 { font-size: 1.1875rem; margin: 0 0 6px; }
.fx-step p { color: var(--ink-2); margin: 0; }
.fx-art-chips { display: flex; gap: 6px; }
.fx-art-chips span { padding: 5px 10px; border-radius: 999px; font-size: .75rem; font-weight: 750; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); animation: fx-chip 4.5s infinite; }
.fx-art-chips span:nth-child(2) { animation-delay: 1.5s; }
.fx-art-chips span:nth-child(3) { animation-delay: 3s; }
@keyframes fx-chip { 0%, 30% { background: var(--lp-coral); color: #fff; border-color: var(--lp-coral); } 34%, 100% { background: var(--surface); color: var(--ink-2); border-color: var(--line); } }
.fx-art-line { display: block; width: 210px; max-width: 100%; height: 10px; border-radius: 5px; background: var(--line); position: relative; overflow: hidden; }
.fx-art-line::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: color-mix(in srgb, var(--lp-coral) 55%, var(--surface)); transform-origin: left; animation: fx-fill 4.5s var(--fx-ease) infinite; }
.fx-art-line.is-short { width: 150px; } .fx-art-line.is-short::after { animation-delay: .3s; }
.fx-art-line.is-mid { width: 180px; } .fx-art-line.is-mid::after { animation-delay: .6s; }
@keyframes fx-fill { 0% { transform: scaleX(0); } 40%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.fx-art-place { grid-template-columns: auto auto; gap: 18px; }
.fx-art-qr { position: relative; overflow: hidden; width: 112px; padding: 8px; border-radius: 12px; background: #fff; color: #0E1A1E; box-shadow: var(--shadow); }
.fx-art-laser { position: absolute; left: 4px; right: 4px; height: 3px; top: 6px; border-radius: 2px; background: #FF7A59; box-shadow: 0 0 12px 2px rgba(255, 122, 89, .7); animation: fx-laser 2.6s ease-in-out infinite alternate; }
@keyframes fx-laser { from { transform: translateY(0); } to { transform: translateY(96px); } }
.fx-art-files { display: grid; gap: 7px; }
.fx-art-files i { font-style: normal; padding: 5px 10px; border-radius: 8px; font-size: .75rem; font-weight: 800; text-align: center; background: var(--lp-sky-soft); color: var(--info-ink); animation: fx-bounce-in 3.2s var(--fx-spring) infinite; }
.fx-art-files i:nth-child(2) { animation-delay: .25s; }
.fx-art-files i:nth-child(3) { animation-delay: .5s; background: var(--lp-amber-soft); color: var(--warn-ink); }
@keyframes fx-bounce-in { 0% { transform: scale(.6); opacity: 0; } 15%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.fx-art-bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; }
.fx-art-bars i { width: 18px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--lp-amber), color-mix(in srgb, var(--lp-amber) 50%, var(--surface))); transform-origin: bottom; animation: fx-bar 3.6s var(--fx-ease) infinite; }
.fx-art-bars i:nth-child(1) { height: 36%; } .fx-art-bars i:nth-child(2) { height: 58%; animation-delay: .1s; } .fx-art-bars i:nth-child(3) { height: 44%; animation-delay: .2s; }
.fx-art-bars i:nth-child(4) { height: 80%; animation-delay: .3s; } .fx-art-bars i:nth-child(5) { height: 62%; animation-delay: .4s; } .fx-art-bars i:nth-child(6) { height: 100%; animation-delay: .5s; } .fx-art-bars i:nth-child(7) { height: 72%; animation-delay: .6s; }
@keyframes fx-bar { 0% { transform: scaleY(.1); } 35%, 100% { transform: scaleY(1); } }
.fx-art-saved { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 999px; font-size: .75rem; font-weight: 750; background: var(--surface); border: 1px solid var(--line); color: var(--ok-ink); animation: fx-bounce-in 3.6s 1s var(--fx-spring) infinite; }
.fx-art-saved svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--ok-bg); stroke-width: 3; }
/* Animace v krocích běží až ve chvíli, kdy jsou vidět. */
.fx:not(.fx-still) .fx-step:not(.is-in) .fx-step-art *, .fx:not(.fx-still) .fx-step:not(.is-in) .fx-step-art *::after { animation-play-state: paused; }

/* --- Hlášení závad ---------------------------------------------------------------- */
.fx-report-art { position: relative; display: grid; place-items: center; padding: 18px 0; }
.fx-report-art::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lp-coral) 20%, transparent), transparent 70%); filter: blur(10px); }
.fx-flow { position: relative; display: grid; gap: 26px; width: 100%; max-width: 420px; }
.fx-flow::before { content: ""; position: absolute; left: 39px; top: 30px; bottom: 30px; border-left: 2px dashed var(--line-strong); }
.fx-flow-card { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fx-flow-card:nth-child(2) { margin-left: 28px; }
.fx-flow-card:nth-child(3) { margin-left: 8px; }
.fx-flow-card > div { display: grid; gap: 2px; }
.fx-flow-card small { color: var(--ink-2); }
.fx-flow-ico { position: relative; z-index: 1; width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--c); color: #fff; }
.fx-flow-ico svg { width: 23px; height: 23px; }
.fx-status { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.fx-status i { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 750; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.fx-status .is-c { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.fx:not(.fx-still) .fx-report-art.is-in .fx-flow-1 { animation: fx-flow-1 9s var(--fx-ease) infinite both; }
.fx:not(.fx-still) .fx-report-art.is-in .fx-flow-2 { animation: fx-flow-2 9s var(--fx-ease) infinite both; }
.fx:not(.fx-still) .fx-report-art.is-in .fx-flow-3 { animation: fx-flow-3 9s var(--fx-ease) infinite both; }
.fx:not(.fx-still) .fx-report-art.is-in .fx-flow::before { animation: fx-flow-1 9s var(--fx-ease) infinite both; }
@keyframes fx-flow-1 { 0% { opacity: 0; transform: translateY(16px) scale(.97); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes fx-flow-2 { 0%, 10% { opacity: 0; transform: translateY(16px) scale(.97); } 16%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes fx-flow-3 { 0%, 20% { opacity: 0; transform: translateY(16px) scale(.97); } 26%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-8px); } }
.fx:not(.fx-still) .fx-report-art.is-in .fx-status i { animation: fx-stat 9s infinite; }
.fx:not(.fx-still) .fx-report-art.is-in .fx-status .is-a { animation-name: fx-stat-a; }
.fx:not(.fx-still) .fx-report-art.is-in .fx-status .is-b { animation-name: fx-stat-b; }
.fx:not(.fx-still) .fx-report-art.is-in .fx-status .is-c { animation-name: fx-stat-c; background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
@keyframes fx-stat-a { 0%, 30% { background: var(--surface-2); color: var(--ink-2); } 32%, 48% { background: var(--lp-sky); color: #fff; border-color: transparent; } 50%, 100% { background: var(--surface-2); color: var(--ink-2); } }
@keyframes fx-stat-b { 0%, 48% { background: var(--surface-2); color: var(--ink-2); } 50%, 66% { background: var(--lp-amber); color: #fff; border-color: transparent; } 68%, 100% { background: var(--surface-2); color: var(--ink-2); } }
@keyframes fx-stat-c { 0%, 66% { background: var(--surface-2); color: var(--ink-2); } 68%, 96% { background: var(--lp-mint); color: #fff; border-color: transparent; } 100% { background: var(--surface-2); color: var(--ink-2); } }
@media (max-width: 919px) { .fx-report .fx-split > :first-child { order: 2; } }

/* --- Týmy (bento) ----------------------------------------------------------------- */
.fx-teams { background: linear-gradient(180deg, var(--bg), var(--surface) 40%, var(--bg)); }
.fx-bento { display: grid; gap: 14px; }
@media (min-width: 680px) { .fx-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fx-bento { grid-template-columns: repeat(3, 1fr); } .fx-feature-wide { grid-column: span 2; } .fx-feature-full { grid-column: 1 / -1; } }
@media (min-width: 680px) and (max-width: 999px) { .fx-feature-wide { grid-column: 1 / -1; } }
.fx-feature { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--fx-ease), border-color .3s, box-shadow .35s; }
.fx-feature::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(320px circle at var(--fx-mx, 50%) var(--fx-my, 0%), color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); }
.fx-feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--c) 70%, transparent); }
.fx-feature:hover::before { opacity: 1; }
.fx-feature > div { position: relative; }
.fx-feature h3 { font-size: 1.125rem; margin: 0 0 6px; }
.fx-feature p { color: var(--ink-2); margin: 0; font-size: .9375rem; }
.fx-feature-ico { position: relative; flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--c-soft); color: var(--c); transition: transform .45s var(--fx-spring); }
.fx-feature:hover .fx-feature-ico { transform: rotate(-8deg) scale(1.08); }
.fx-feature-ico svg { width: 26px; height: 26px; }
@media (min-width: 1000px) { .fx-feature-wide { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } .fx-feature-wide > div { flex: 1 1 260px; } }
.fx-roles, .fx-groups { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; flex-basis: 100%; }
.fx-roles span { padding: 6px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 750; background: var(--c-soft); color: var(--c); }
.fx-roles span.c-amber { color: var(--warn-ink); }
.fx:not(.fx-still) .fx-feature.is-in .fx-roles span { animation: fx-wave-up 3.2s ease-in-out infinite; }
.fx-roles span:nth-child(2) { animation-delay: .2s !important; } .fx-roles span:nth-child(3) { animation-delay: .4s !important; } .fx-roles span:nth-child(4) { animation-delay: .6s !important; }
@keyframes fx-wave-up { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }
.fx-groups span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-size: .8125rem; font-weight: 700; border: 1px dashed var(--line-strong); color: var(--ink-2); }
.fx-groups span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-sky); }
.fx-groups span:nth-child(2)::before { background: var(--lp-mint); } .fx-groups span:nth-child(3)::before { background: var(--lp-coral); } .fx-groups span:nth-child(4)::before { background: var(--lp-amber); }
.fx-allfeatures { margin-top: 22px; }
.fx-obce { margin-top: 26px; margin-bottom: 0; }

/* --- API (terminál) --------------------------------------------------------------- */
.fx-api { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fx-api-note { margin-top: 12px; }
.fx-term { position: relative; border-radius: 20px; overflow: hidden; background: #0E1A1E; color: #D6E2DF; box-shadow: 0 40px 60px -34px rgba(14, 26, 30, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.fx-term::after { content: ""; position: absolute; inset: auto -20% -50% auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 230, .35), transparent 70%); pointer-events: none; }
.fx-term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.fx-term-bar span { width: 11px; height: 11px; border-radius: 50%; background: #FF6159; }
.fx-term-bar span:nth-child(2) { background: #FFBD2E; } .fx-term-bar span:nth-child(3) { background: #28C941; }
.fx-term-bar b { margin-left: auto; font-size: .75rem; color: #7D8F8A; font-weight: 700; }
.fx-term pre { position: relative; z-index: 1; margin: 0; padding: 20px 22px 24px; font: .8125rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.fx-term code { font: inherit; background: none; padding: 0; color: inherit; }
.fx-t-m { color: #FFB547; font-weight: 700; } .fx-t-k { color: #8FD3FF; } .fx-t-s { color: #9FE3BE; } .fx-t-ok { color: #5EE0B9; font-weight: 700; }
.fx-term pre.is-typing code::after { content: ""; display: inline-block; width: 8px; height: 1.1em; vertical-align: text-bottom; background: #5EE0B9; animation: fx-caret .7s step-end infinite; }

/* --- Štítky (materiály) -------------------------------------------------------------- */
.fx-labels { background: linear-gradient(160deg, var(--lp-amber-soft), transparent 50%), var(--bg); overflow: hidden; }
.fx-mats { position: relative; height: 380px; perspective: 1000px; --fx-rx: 0deg; --fx-ry: 0deg; }
.fx-mat { position: absolute; width: 170px; padding: 30px 16px 14px; border-radius: 22px; text-align: center; transform-style: preserve-3d; transition: transform .5s var(--fx-ease); box-shadow: 0 30px 40px -24px rgba(23, 35, 42, .55); overflow: hidden; }
.fx-mat::before { content: ""; position: absolute; top: 12px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, .35); }
.fx-mat::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 60%); transform: translateX(-120%); animation: fx-shine 6s ease-in-out infinite; }
.fx-mat-black::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .18) 48%, transparent 60%); animation-delay: 2s; }
.fx-mat-wood::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 220, .35) 48%, transparent 60%); animation-delay: 4s; }
@keyframes fx-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.fx-mat-qr { padding: 7px; border-radius: 10px; }
.fx-mat-code { display: block; margin-top: 10px; font-weight: 800; letter-spacing: .26em; font-size: .8125rem; }
.fx-mat-name { display: block; margin-top: 2px; font-size: .625rem; font-weight: 750; letter-spacing: .06em; opacity: .7; }
.fx-mat-alu { left: 4%; top: 52px; background: linear-gradient(160deg, #FFFFFF 0%, transparent 40%), linear-gradient(135deg, #F3F6F5, #C7D1CD); border: 1px solid #B7C3BE; color: #56645F;
    transform: rotateX(var(--fx-rx)) rotateY(var(--fx-ry)) rotate(-8deg); animation: fx-mat-a 8s ease-in-out infinite; }
.fx-mat-alu .fx-mat-qr { background: #fff; color: #142026; }
.fx-mat-black { left: 33%; top: 8px; z-index: 2; background: linear-gradient(160deg, rgba(255, 255, 255, .1) 0%, transparent 40%), linear-gradient(135deg, #3A4447, #161D20); border: 1px solid #0F1517; color: #B9C4C1;
    transform: rotateX(var(--fx-rx)) rotateY(var(--fx-ry)) rotate(2deg); animation: fx-mat-b 9s ease-in-out infinite; }
.fx-mat-black .fx-mat-qr { background: transparent; color: #D9E1DE; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.fx-mat-wood { right: 3%; top: 86px; background: repeating-linear-gradient(97deg, rgba(120, 70, 30, .0) 0 7px, rgba(120, 70, 30, .1) 7px 9px), linear-gradient(135deg, #E6B98A, #B97B47); border: 1px solid #A06A3B; color: #5B3417;
    transform: rotateX(var(--fx-rx)) rotateY(var(--fx-ry)) rotate(9deg); animation: fx-mat-c 10s ease-in-out infinite; }
.fx-mat-wood .fx-mat-qr { background: transparent; color: #4A2A12; }
@keyframes fx-mat-a { 50% { translate: 0 -10px; } }
@keyframes fx-mat-b { 50% { translate: 0 -14px; } }
@keyframes fx-mat-c { 50% { translate: 0 -8px; } }
.fx-mats:hover .fx-mat-alu { left: 0; } .fx-mats:hover .fx-mat-wood { right: 0; }
@media (max-width: 520px) { .fx-mats { height: 330px; } .fx-mat { width: 132px; padding: 26px 12px 12px; } .fx-mat-black { left: 30%; } .fx-mat-code { font-size: .6875rem; letter-spacing: .18em; } }

/* --- Ceník ------------------------------------------------------------------------ */
.fx-pricing { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fx-plan { position: relative; overflow: visible; transition: transform .35s var(--fx-ease), box-shadow .35s; }
.fx-plan:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -28px rgba(23, 35, 42, .45); }
@property --fx-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.lp-plan.fx-plan.is-featured { border: 2px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(from var(--fx-a), var(--lp-coral), var(--lp-amber), var(--lp-mint), var(--lp-sky), var(--lp-coral)) border-box; animation: fx-ring 6s linear infinite; box-shadow: 0 24px 50px -30px rgba(255, 122, 89, .7); }
@keyframes fx-ring { to { --fx-a: 360deg; } }
.fx-plan-flag { position: absolute; top: -12px; left: 24px; padding: 3px 11px; border-radius: 999px; font-size: .75rem; font-weight: 800; color: #fff; background: linear-gradient(90deg, var(--lp-coral), var(--lp-amber)); box-shadow: 0 6px 16px -6px rgba(255, 122, 89, .8); }

/* --- Časté otázky ------------------------------------------------------------------- */
.fx-faq .lp-h2 { margin-bottom: 30px; }
.fx-faq .lp-faq details { transition: border-color .25s, box-shadow .25s, background-color .25s; }
.fx-faq .lp-faq details:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.fx-faq .lp-faq details[open] { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); box-shadow: var(--shadow); }
.fx-faq .lp-faq summary::after { transition: transform .3s var(--fx-ease); }
.fx-faq .lp-faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
    .fx-faq .lp-faq { interpolate-size: allow-keywords; }
    .fx-faq .lp-faq details::details-content { height: 0; overflow: clip; transition: height .35s var(--fx-ease), content-visibility .35s allow-discrete; }
    .fx-faq .lp-faq details[open]::details-content { height: auto; }
}

/* --- Závěr ------------------------------------------------------------------------ */
.fx-final { padding: 56px 0 72px; }
.fx-final-card { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 24px; align-items: center; padding: 40px 28px; border-radius: 30px; color: #fff;
    background: linear-gradient(120deg, #1D6B64, #22977A, #2E9BEA, #7C5CE6, #1D6B64); background-size: 300% 300%; animation: fx-grad 16s ease-in-out infinite; }
@keyframes fx-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (min-width: 820px) { .fx-final-card { grid-template-columns: 1fr auto; padding: 56px 60px; } .fx-final-text { order: -1; } }
.fx-final-card h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.035em; margin: 0 0 10px; }
.fx-final-card p { color: rgba(255, 255, 255, .86); font-size: 1.0625rem; margin: 0 0 26px; }
.fx-final-card .fx-cta { margin: 0; }
.fx-final-qr { width: 170px; justify-self: center; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transform: rotate(6deg); animation: fx-float-q 7s ease-in-out infinite; }
@keyframes fx-float-q { 50% { transform: rotate(2deg) translateY(-10px); } }
@media (max-width: 819px) { .fx-final-qr { width: 120px; justify-self: start; } }
.fx-btn-white { background: #fff; color: #1D6B64; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .5); transition: transform .2s var(--fx-ease); }
.fx-btn-white:hover { background: #F2FBF8; color: #165850; transform: translateY(-2px); }
@media (max-width: 480px) { .fx-btn-white { white-space: normal; word-break: break-all; } }

/* Tmavý režim: úvodní panel trochu odlišit od pozadí */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fx-hero { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); } }
:root[data-theme="dark"] .fx-hero { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }

/* Omezit pohyb: vše stojí, obsah zůstává vidět */
@media (prefers-reduced-motion: reduce) {
    .fx-hero *, .fx-hero *::before, .fx-hero *::after,
    .fx-types *, .fx-how *, .fx-how *::after, .fx-report *, .fx-teams *, .fx-labels *, .fx-labels *::after, .fx-pricing *, .fx-final * { animation: none !important; transition: none !important; }
    .fx-final-card { animation: none; }
    .fx-scribble path { stroke-dashoffset: 0; }
    .fx-scan, .fx-beam-pulse { display: none; }
}

/* =====================================================================================
   v141: živější aplikace a veřejné karty (js/app-fx.js přidá html.afx).
   Krátké nástupy, zpětná vazba na myš a kliknutí, grafy a pruhy dorůstají.
   ===================================================================================== */
:root { --afx-ease: cubic-bezier(.2, .75, .2, 1); --afx-spring: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes afx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes afx-pop { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: none; } }

/* Nástup obsahu stránky (jen při načtení, do půl sekundy) */
.afx .layout-app .main > *, .afx .layout-public .public-main > article > * { animation: afx-in .45s var(--afx-ease) both; }
.afx .layout-app .main > :nth-child(2), .afx .layout-public .public-main > article > :nth-child(2) { animation-delay: .04s; }
.afx .layout-app .main > :nth-child(3), .afx .layout-public .public-main > article > :nth-child(3) { animation-delay: .08s; }
.afx .layout-app .main > :nth-child(4), .afx .layout-public .public-main > article > :nth-child(4) { animation-delay: .12s; }
.afx .layout-app .main > :nth-child(5), .afx .layout-public .public-main > article > :nth-child(5) { animation-delay: .16s; }
.afx .layout-app .main > :nth-child(n+6), .afx .layout-public .public-main > article > :nth-child(n+6) { animation-delay: .2s; }
.afx .code-list > li { animation: afx-in .4s var(--afx-ease) both; }
.afx .code-list > li:nth-child(2) { animation-delay: .03s; } .afx .code-list > li:nth-child(3) { animation-delay: .06s; }
.afx .code-list > li:nth-child(4) { animation-delay: .09s; } .afx .code-list > li:nth-child(5) { animation-delay: .12s; }
.afx .code-list > li:nth-child(6) { animation-delay: .15s; } .afx .code-list > li:nth-child(7) { animation-delay: .18s; }
.afx .code-list > li:nth-child(8) { animation-delay: .21s; } .afx .code-list > li:nth-child(n+9) { animation-delay: .24s; }
/* Hlavička veřejné karty: ikona/fotka a avatar naskočí */
.afx .asset-photo, .afx .vcard-head .avatar, .afx .wifi-ico { animation: afx-pop .55s .1s var(--afx-spring) both; }

/* Horní lišta: barevná linka se pomalu přelévá */
.afx .topbar::after { background-size: 200% 100%; animation: afx-flow 14s linear infinite; background-image: linear-gradient(90deg, var(--coral), var(--amber), var(--mint), var(--sky), var(--violet), var(--coral)); }
@keyframes afx-flow { to { background-position: -200% 0; } }

/* Tlačítka: stisk a lesk */
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .2s ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary:hover:not(:disabled) { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--brand) 80%, transparent); }
.afx .btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); }
.afx .btn-primary:hover:not(:disabled)::after { transform: translateX(120%); transition: transform .7s var(--afx-ease); }
/* Odesílá se… */
.btn.is-busy { pointer-events: none; }
.btn.is-busy::before { content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: afx-spin .7s linear infinite; }
@keyframes afx-spin { to { transform: rotate(360deg); } }
/* Zkopírováno */
.btn.is-copied, .is-copied { border-color: var(--mint) !important; color: var(--mint-ink) !important; background: var(--mint-soft) !important; animation: afx-pop .35s var(--afx-spring); }

/* Seznam kódů a dlaždice: zvednutí pod myší */
.code-row { transition: border-color .2s ease, transform .25s var(--afx-ease), box-shadow .25s ease; }
.code-row:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(23, 35, 42, .45); }
.code-type-ico { transition: transform .4s var(--afx-spring), background-color .2s, color .2s; }
.code-row:hover .code-type-ico { transform: rotate(-8deg) scale(1.08); background: var(--tc); color: #fff; }
.stat-tile, .dkpi-item { transition: border-color .2s ease, transform .25s var(--afx-ease), box-shadow .25s ease; }
a.stat-tile:hover, a.dkpi-item:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(23, 35, 42, .5); }
.stat-ico { transition: transform .4s var(--afx-spring); }
.stat-tile:hover .stat-ico { transform: scale(1.1) rotate(-6deg); }
.d-types a { transition: background-color .15s ease, transform .2s var(--afx-ease); }
.d-types a:hover { transform: translateX(3px); }

/* Grafy: čára se vykreslí zleva, sloupce vyrostou */
.afx .dchart svg { animation: afx-reveal 1.1s .15s var(--afx-ease) both; }
@keyframes afx-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.afx svg.chart rect { transform-box: fill-box; transform-origin: 50% 100%; animation: afx-grow .6s var(--afx-ease) both; }
@keyframes afx-grow { from { transform: scaleY(0); } to { transform: none; } }
.chart .bar { transition: opacity .15s; }
.chart:hover .bar { opacity: .55; }
.chart .bar:hover { opacity: 1; }

/* Oznámení: odpočet do zavření */
.toast { position: relative; overflow: hidden; }
.js .toast { animation: afx-toast .4s var(--afx-spring) both; }
@keyframes afx-toast { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
.toast.has-timer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: .35; transform-origin: left; animation: afx-timer 6s linear both; }
.toast.has-timer:hover::after { animation-play-state: paused; }
@keyframes afx-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Štítek s QR v úpravě kódu: náklon a odlesk */
.tag-plate.afx-tilt { transform: perspective(900px) rotateX(var(--afx-rx, 0deg)) rotateY(var(--afx-ry, 0deg)); transition: transform .4s var(--afx-ease); overflow: hidden; }
.tag-plate.afx-tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 48%, transparent 60%); transform: translateX(-120%); animation: afx-shine 7s 1s ease-in-out infinite; }
@keyframes afx-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Rozbalovací části: plynule (kde to prohlížeč umí) */
@supports (interpolate-size: allow-keywords) {
    .layout-app, .layout-public { interpolate-size: allow-keywords; }
    .afx .layout-app details::details-content, .afx .layout-public details::details-content { height: 0; overflow: clip; transition: height .3s var(--afx-ease), content-visibility .3s allow-discrete; }
    .afx .layout-app details[open]::details-content, .afx .layout-public details[open]::details-content { height: auto; }
}
details > summary { transition: color .15s ease; }

/* Veřejná karta: tlačítka a rychlé akce reagují */
.quick-actions a, .quick-actions button { transition: transform .2s var(--afx-ease), box-shadow .2s ease, border-color .2s ease; }
.quick-actions a:hover, .quick-actions button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(23, 35, 42, .5); }
.quick-actions a:active, .quick-actions button:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
    .afx-still *, .afx-still *::before, .afx-still *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .code-row:hover, a.stat-tile:hover, a.dkpi-item:hover, .d-types a:hover { transform: none; }
    .btn.is-busy::before { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* =====================================================================================
   v142: jednotná okna. Jeden vnitřní okraj, jedna mezera mezi okny, stejná hlavička
   a podnadpis, okna vedle sebe stejně vysoká. Hodnoty jen přes tyto proměnné.
   ===================================================================================== */
:root { --panel-pad: 20px; --panel-gap: 16px; --panel-head: 14px; --panel-radius: var(--radius-l); }
@media (max-width: 480px) { :root { --panel-pad: 16px; --panel-gap: 12px; } }

/* Okno */
.card { padding: var(--panel-pad); margin: 0 0 var(--panel-gap); border-radius: var(--panel-radius); }
.dup-card { padding: 16px var(--panel-pad); }
/* V mřížkách dělá mezeru gap, ne okraj (dřív se sčítaly na 32 px) */
:where(.dash-grid, .d-side, .stats-grid, .health-grid, .api-guide) > .card { margin: 0; }
.dash-grid, .d-side, .stats-grid, .health-grid, .api-guide { gap: var(--panel-gap); }
.dkpi { margin-bottom: var(--panel-gap); }

/* Hlavička okna: nadpis (a případně odkaz/tlačítko vpravo) */
.card > h2, .dcard > h2 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 var(--panel-head); }
.card-head, .card-head-row, .dcard-head, .tag-box .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 var(--panel-head); }
.card-head h2, .card-head-row h2, .dcard-head h2 { margin: 0; }
.tag-box h2, .work-sec h2 { margin-bottom: var(--panel-head); }
/* Podnadpis hned pod nadpisem (šedý popis okna) */
.card > h2:has(+ p.muted), .dcard-head:has(+ p.muted), .card-head:has(+ p.muted) { margin-bottom: 4px; }
.card > h2 + p.muted, .dcard-head + p.muted, .card-head + p.muted { margin: 0 0 var(--panel-head); }
.dheat-card .muted.small { margin-top: 0; }

/* Mezinadpis uvnitř okna (Zařízení, Změna hesla…): jeden styl štítku */
.d-sub, .breakdowns h3 { font-size: .8125rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 18px 0 10px; }
.breakdowns h3 { margin-top: 0; }

/* Rozbalovací okna: stejný okraj hlavičky i obsahu */
.export, .label-order-box { border-radius: var(--panel-radius); }
.export summary, .collapsible > summary, .label-order-box > summary { padding: 16px var(--panel-pad); }
.export-body { padding: 0 var(--panel-pad) var(--panel-pad); }
.collapsible > form, .collapsible > p { padding-left: var(--panel-pad); padding-right: var(--panel-pad); }
.collapsible > form { padding-bottom: var(--panel-pad); }

/* Boční panel úpravy kódu: stejné mezery mezi okny jako vlevo */
.edit-aside .label-order-box, .edit-aside .vip-inline { margin-bottom: var(--panel-gap); }
.edit-aside .export + .export { margin-top: var(--panel-gap); }
.vip-inline { border-radius: var(--panel-radius); padding: 14px var(--panel-pad); }

/* Okna vedle sebe jsou stejně vysoká; obsah drží nahoře, poslední řádek (legenda, odkaz) dole */
.dash-grid, .stats-grid, .health-grid { align-items: stretch; }
.d-side { display: flex; flex-direction: column; }
.d-side > .card:last-child { flex: 1 1 auto; }
.dash-grid > .card, .stats-grid > .card, .d-side > .card, .health-grid > .card { display: flex; flex-direction: column; }
.dash-grid > .card > *, .stats-grid > .card > *, .d-side > .card > *, .health-grid > .card > * { flex: none; }
/* Graf načtení vyplní výšku okna (osa Y je v procentech) */
.dcard.d-wide > .dchart { flex: 1 1 auto; display: flex; flex-direction: column; }
.dcard.d-wide .dchart-plot { flex: 1 1 auto; height: auto; min-height: 220px; }
/* Mapa „Kdy se načítá“: stupnice u spodního okraje */
.dheat-card .dheat-scale { margin-top: auto; padding-top: 10px; }
.stats-grid > .card .stats-foot { margin-top: auto; }
/* v142: obal „Kdy se načítá“ v mřížce přehledu – okno vyplní výšku řádku, buňky mapy se roztáhnou */
.dash-grid > .d-half:not(.card) { display: flex; flex-direction: column; }
.dash-grid > .d-half:not(.card) > .card { flex: 1 1 auto; margin: 0; display: flex; flex-direction: column; }
.dash-grid .dheat-card > * { flex: none; }
.dash-grid .dheat-card > .dheat { flex: 1 1 auto; grid-template-rows: repeat(7, minmax(14px, 1fr)) auto; align-items: stretch; }
.dash-grid .dheat-card .dheat-c { aspect-ratio: auto; min-height: 14px; height: 100%; }
.dash-grid .dheat-card .dheat-day { align-self: center; }
.dash-grid .dheat-card .dheat-scale .dheat-c { height: 11px; min-height: 0; aspect-ratio: 1; }
/* v142: nadpis rozbalovacího okna stejně velký jako nadpis okna */
.export > summary, .collapsible > summary { font-size: 1.0625rem; }
/* v143: obsah dokumentace API, kotvy pod pevnou lištou */
.api-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.api-toc a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 650; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.api-toc a:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.api-docs h2[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) { .api-toc a { transition: none; } .api-toc a:hover { transform: none; } }
/* v143: chyba u pole „Nejde vám načíst QR kód?“ */
.fx-open-err { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius); background: var(--danger-bg); color: var(--danger); font-size: .9375rem; font-weight: 650; }
.fx-open-card:has(.fx-open-err) .fx-open-form { border-color: var(--danger); }
/* v145: adresa instalační firmy na kartě zakázky */
.job-firm-addr { margin: 0 0 6px; color: var(--ink-2); }
/* v145: české tlačítko pro výběr souboru (app.js), původní pole jen skryté */
.file-pick-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.file-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.file-pick-btn { flex: none; }
.file-pick-name { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); font-size: .9375rem; }
.file-pick.has-file .file-pick-name { color: var(--ink); font-weight: 650; }
.field .file-pick { margin-top: 2px; }
/* v145: části karty zařízení/zakázky jako samostatná okna, štítek v nadpisu */
.type-panel > h2 .badge { margin-left: 8px; vertical-align: middle; }
label:has(> .file-pick-input), .field:has(> .file-pick-input) { position: relative; }
/* v146: pravý sloupec úpravy kódu jako okna – stejné mezery, odsazení a nadpisy jako levý sloupec */
.edit-aside { display: flex; flex-direction: column; gap: var(--panel-gap); min-width: 0; }
.edit-aside > .tag { display: flex; flex-direction: column; gap: var(--panel-gap); }
.edit-aside > *, .edit-aside > .tag > * { margin: 0 !important; }
.edit-aside .link-box.card { padding: var(--panel-pad); gap: 8px; }
.edit-aside .link-box.card > h2 { margin: 0 0 4px; }
.edit-aside .link-box .code-state { margin: 2px 0 0; }
.edit-aside .label-order-box > summary { gap: 12px; }
.edit-aside .label-order-box > summary strong { display: block; font-size: 1.0625rem; font-weight: 700; }
.edit-aside .label-order-box > summary small { margin-top: 2px; }
.edit-aside .vip-inline { padding: var(--panel-pad); }
.edit-aside .vip-title { font-size: 1.0625rem; font-weight: 700; }
.edit-aside .dup-card { padding: var(--panel-pad); }
/* v146: QR štítek v okně „QR kód“ spolu s adresou a tlačítky */
.edit-aside .link-box .tag-plate { margin: 0 0 6px; }
.edit-aside .link-box-label { display: block; margin: 4px 0 0; font-size: .875rem; font-weight: 650; color: var(--ink-2); }
@media print {
    .edit-aside .link-box.card { display: block !important; padding: 0; border: 0; box-shadow: none; background: none; }
    .edit-aside .link-box.card > :not(.tag-plate) { display: none !important; }
}
/* v146: zvýraznění části odemčené heslem (app.js, #odemceno) */
main .vis-tag.vis-2 { scroll-margin-top: 96px; }
main section, main .asset-sec, main .doc-item { scroll-margin-top: 96px; } /* místo pro hlášku Odemčeno nahoře */
.just-unlocked { animation: unlocked-glow 2.4s ease-out; }
@keyframes unlocked-glow { 0%, 30% { box-shadow: 0 0 0 3px var(--brand), var(--shadow); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .just-unlocked { animation: none; outline: 3px solid var(--brand); outline-offset: 2px; } }

/* v148: Nápověda (/app/napoveda) a ikona v menu */
.nav-help { gap: 6px; }
.nav-help svg { width: 18px; height: 18px; }
@media (min-width: 1061px) {
    .nav-help { padding: 0 9px; }
    .nav-help-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.help-tools { display: grid; gap: 12px; margin-bottom: var(--panel-gap); }
.help-search { display: grid; gap: 4px; max-width: 520px; }
.help-search[hidden] { display: none; }
.help-search input { width: 100%; }
.help-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.help-toc a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: .875rem; font-weight: 600; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.help-toc a:hover { color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.help-toc a[hidden] { display: none; }
.help-grid { display: grid; gap: var(--panel-gap); }
.help-sec { scroll-margin-top: 96px; }
.help-sec[hidden] { display: none; }
.help-sec > p, .help-sec li, .help-sec dd { max-width: 72ch; line-height: 1.55; }
.help-sec h3 { margin: 22px 0 8px; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.help-sec > p:last-child, .help-sec > ul:last-child, .help-sec > ol:last-child { margin-bottom: 0; }
.help-steps { margin: 0; padding: 0; list-style: none; counter-reset: hs; display: grid; gap: 10px; }
.help-steps li { counter-increment: hs; position: relative; padding-left: 40px; }
.help-steps li::before { content: counter(hs); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .875rem; }
.help-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.help-list li { position: relative; padding-left: 20px; }
.help-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.help-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.help-types li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-s); background: var(--surface-2); transition: transform .25s, box-shadow .25s; }
.help-types li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.help-types .type-icon { flex: none; background: var(--tc-soft); color: var(--tc-ink); transition: background .25s, color .25s; }
.help-types li:hover .type-icon { background: var(--tc); color: #fff; }
.help-types p { margin: 2px 0 0; font-size: .9375rem; color: var(--ink-2); }
.help-dl { margin: 0; display: grid; gap: 4px; }
.help-dl dt { font-weight: 700; margin-top: 10px; }
.help-dl dd { margin: 0; color: var(--ink-2); }
.help-mod { margin-left: 6px; font-size: .75rem; font-weight: 600; color: var(--ink-2); }
.help-mod.is-on { padding: 2px 8px; border-radius: 999px; background: var(--mint-soft); color: var(--mint-ink); }
.help-q { border-top: 1px solid var(--line); }
.help-q:last-child { border-bottom: 1px solid var(--line); }
.help-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px 14px 0; font-weight: 600; border-radius: var(--radius-s); transition: color .2s; }
.help-q summary::-webkit-details-marker { display: none; }
.help-q summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translateY(-2px); transition: transform .2s ease, border-color .2s; }
.help-q[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.help-q summary:hover { color: var(--brand); }
.help-q summary:hover::after { border-color: var(--brand); }
.help-q summary:focus-visible, .help-toc a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.help-q p { margin: 0 0 16px; color: var(--ink-2); max-width: 72ch; }
.help-contact { margin-top: var(--panel-gap); }
.report-settings > summary .muted { margin-left: 8px; margin-right: auto; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .help-types li, .help-toc a { transition: none; } .help-types li:hover, .help-toc a:hover { transform: none; } }
/* v149: Nápověda – jednotné mezery mezi bloky v okně (poznámka pod seznamem se nelepí) */
.help-sec > h2 { margin-bottom: 12px; }
.help-sec > p { margin: 0; }
.help-sec > * + p, .help-sec > * + ul, .help-sec > * + ol, .help-sec > * + dl { margin-top: 12px; }
.help-sec > h3 + * { margin-top: 0; }
.help-sec > .muted.small { margin-top: 16px; }
.help-sec > h2 + .help-q { margin-top: 4px; }
/* v150: Nápověda podle stránky – téma, na které vede otazník z menu, se krátce zvýrazní */
.help-dl { gap: 4px; }
.help-dl-item { scroll-margin-top: 96px; margin: 0 -12px; padding: 8px 12px; border-radius: var(--radius-s); transition: background .3s; }
.help-dl-item dt { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.help-dl-item .help-mod { margin-left: 0; }
.help-dl-item dd { margin-top: 2px; }
.help-dl-item:target { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.help-sec:target { box-shadow: 0 0 0 2px var(--brand), var(--shadow); animation: help-target 2.4s ease-out 1; }
@keyframes help-target { 0% { box-shadow: 0 0 0 6px var(--brand-soft), var(--shadow); } 100% { box-shadow: 0 0 0 2px var(--brand), var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .help-sec:target { animation: none; } }


/* v151: úvodní stránka – Pro koho (obory) */
.fx-obory { background: linear-gradient(180deg, var(--bg), var(--surface) 50%, var(--bg)); }
.fx-move { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; flex-basis: 100%; }
.fx-move span { padding: 6px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 750; background: var(--c-soft); color: var(--c); white-space: nowrap; }
.fx-move span:nth-of-type(2) { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.fx-move span:nth-of-type(3) { background: var(--lp-mint-soft, var(--mint-soft)); color: var(--mint-ink); }
.fx-move svg { width: 16px; height: 16px; flex: none; color: var(--ink-3, var(--ink-2)); }
.fx:not(.fx-still) .fx-feature.is-in .fx-move svg { animation: fx-move-nudge 2.8s ease-in-out infinite; }
.fx-move svg:nth-of-type(2) { animation-delay: .4s !important; }
@keyframes fx-move-nudge { 0%, 55%, 100% { transform: none; } 25% { transform: translateX(4px); } }
.fx-obory-note { margin-top: 22px; margin-bottom: 0; font-size: .9375rem; }
@media (prefers-reduced-motion: reduce) { .fx-move svg { animation: none !important; } }
.fx-feature-wide > .fx-move { flex: 1 1 100%; }
.user-bulk [data-user-action] { flex: 0 1 250px; }

/* v152: Pro koho – šest stejných karet jako ostatní části úvodní stránky */
.fx-obory-grid .fx-move { margin-top: auto; flex-wrap: nowrap; gap: 6px; }
.fx-obory-grid .fx-move span { padding: 5px 10px; }

/* v153: karta Nemovitost a objekt (barva rose), vlastní osnovy stránky */
:root { --rose: #D2457A; --rose-soft: #FBE3EC; --rose-ink: #A02D5C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rose-soft: #3A1F2B; --rose-ink: #F49BBD; } }
:root[data-theme="dark"] { --rose-soft: #3A1F2B; --rose-ink: #F49BBD; }
.type-object { --tc: var(--rose); --tc-soft: var(--rose-soft); --tc-ink: var(--rose-ink); }
.code-type.type-object { color: var(--tc-ink); font-weight: 650; }
.type-object .tp-chip { color: var(--tc-ink); background: var(--tc-soft); }
.asset-price { margin: 6px 0 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.asset-offer { margin-right: 4px; }
.object-contact .job-firm-actions .btn svg { width: 18px; height: 18px; flex: none; }

.asset-photo-ico.is-object { color: var(--rose-ink); background: var(--rose-soft); }

/* v153: úvodní stránka – karty v mřížce stejně velké, ikona vždy nahoře */
@media (min-width: 1000px) { .fx-bento-4 { grid-template-columns: repeat(4, 1fr); } }
.fx-bento-even .fx-feature, .fx-bento-4 .fx-feature { flex-direction: column; }
.fx-bento-even .fx-roles, .fx-bento-even .fx-groups, .fx-bento-even .fx-move { margin-top: auto; }
.lp-allfeatures > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; border-radius: inherit; transition: background .2s ease; }
.lp-allfeatures > summary::-webkit-details-marker { display: none; }
.lp-allfeatures > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.lp-allfeatures[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.lp-allfeatures > summary:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.lp-allfeatures > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lp-allfeatures ul { list-style: none; padding-left: 22px; }
.lp-allfeatures li { position: relative; padding-left: 16px; }
.lp-allfeatures li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
@media (prefers-reduced-motion: reduce) { .lp-allfeatures > summary::after { transition: none; } }
@media (min-width: 680px) { .fx-bento-even, .fx-bento-4 { grid-auto-rows: 1fr; } }
.fx-bento-even .fx-roles, .fx-bento-even .fx-groups, .fx-bento-even .fx-move { flex: 0 0 auto; }


/* v154: Šablona v úpravě kódu (připravené i vlastní), odkaz na inzerát na kartě nemovitosti */
.tpl-card .card-head { align-items: baseline; }
.tpl-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--panel-gap); }
.tpl-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
.tpl-btn svg { width: 16px; height: 16px; flex: none; color: var(--brand); }
.tpl-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tpl-btn:focus-visible, .tpl-del:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tpl-own { display: inline-flex; align-items: stretch; transition: transform .2s ease, box-shadow .2s ease; border-radius: var(--radius-s, 10px); }
.tpl-own[hidden] { display: none; }
.tpl-own .tpl-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tpl-own .tpl-btn:hover { transform: none; box-shadow: none; }
.tpl-own:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tpl-del { display: inline-grid; place-items: center; width: 34px; min-height: 34px; padding: 0; border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--radius-s, 10px) var(--radius-s, 10px) 0; background: transparent; color: var(--ink-2); cursor: pointer; transition: color .2s ease, background .2s ease; }
.tpl-del svg { width: 14px; height: 14px; }
.tpl-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.tpl-empty { flex-basis: 100%; }
.tpl-save { display: grid; gap: 8px; margin-top: var(--panel-gap); }
.tpl-save > .link-btn { justify-self: start; }
.tpl-save-row { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-s, 10px); }
.tpl-save-row .field { margin: 0; }
.tpl-save-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .tpl-btn, .tpl-own { transition: none; } .tpl-btn:hover, .tpl-own:hover { transform: none; } }
.object-listing { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; }
.object-listing svg { width: 18px; height: 18px; flex: none; }
.object-listing-host { font-weight: 500; opacity: .8; font-size: .875rem; }
.edit-lock:disabled .tpl-card { display: none; }
/* v154: ikona druhu karty místo fotky v úpravě (zakázka, nemovitost) */
.avatar-ico { display: grid; place-items: center; width: 100%; height: 100%; color: var(--lime-ink); background: var(--lime-soft); border-radius: inherit; }
.avatar-ico[hidden] { display: none; }
.avatar-ico svg { width: 44%; height: 44%; }
.avatar-ico-object { color: var(--rose-ink); background: var(--rose-soft); }

/* v156: logické pořadí oken v úpravě kódu pro všechny typy: typ → šablony → obsah → soubory → interní → kdo co uvidí → přístup a platnost */
.edit-lock > .type-picker { order: 1; }
.edit-lock > .tpl-card { order: 2; }
.edit-lock > .type-panel { order: 3; }
.edit-lock > #asset, .edit-lock > #files { order: 3; }
.edit-lock > .as-contact { order: 4; } /* v166: kontakt před polohou jako na veřejné kartě */
.edit-lock > .as-loc { order: 5; }
.edit-lock > .as-insp { order: 6; }
.edit-lock > .as-specs { order: 7; }
.edit-lock > #files-list { order: 8; }
.edit-lock > .as-internal { order: 9; }
.edit-lock > .as-vis { order: 10; }
.edit-lock > #seznameni { order: 11; }
.edit-lock > #access { order: 12; }
/* Nemovitost: fotky a parametry hned po základních údajích, pak kontakt a adresa; bez revizí a prázdného deníku */
body[data-asset-kind="object"] .edit-lock > #files-list { order: 4; }
body[data-asset-kind="object"] .edit-lock > .as-specs { order: 5; }
body[data-asset-kind="object"] .edit-lock > .as-contact { order: 6; }
body[data-asset-kind="object"] .edit-lock > .as-loc { order: 7; }
body[data-asset-kind="object"] .as-insp,
body[data-asset-kind="object"] #log[data-object-empty] { display: none; }
/* připravené šablony u pole, které vyplní; zvýraznění vyplněných polí */
.tpl-inline { display: grid; gap: 6px; margin: 0 0 var(--panel-gap); }
.tpl-inline[hidden] { display: none; }
.tpl-inline .tpl-list { margin-top: 0; }
.tpl-flash { animation: tpl-flash 2.4s ease-out 1; border-radius: var(--radius-s, 10px); }
@keyframes tpl-flash { 0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--brand) 8%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tpl-flash { animation: none; box-shadow: 0 0 0 2px var(--brand); } }

/* v156: veřejná karta nemovitosti – pořadí: hlavička, inzerát, fotky, parametry, kontakt, adresa, dokumenty */
.asset-object > * { order: 8; }
.asset-object > .asset-lost, .asset-object > .asset-head { order: 0; }
.asset-object > .object-listing { order: 1; }
.asset-object > .obj-photos { order: 2; }
.asset-object > .obj-specs { order: 3; }
.asset-object > .object-contact { order: 4; }
.asset-object > .obj-loc { order: 5; }
.asset-object > .obj-docs { order: 6; }
.asset-object > .report { order: 7; }
.obj-photos .doc-gallery { margin-bottom: 0; }
.obj-photos-count { font-weight: 600; margin-left: 4px; }
.asset-object .object-listing { margin: 0; }
/* dlouhé e-maily, weby a názvy se zalomí, nikdy neroztáhnou kartu */
.asset .btn, .asset .job-firm-actions .btn { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.asset h1, .asset .kv dd, .asset .job-firm-addr, .asset .asset-loc { overflow-wrap: anywhere; }
.asset-head { min-width: 0; }
.asset-title { min-width: 0; }

/* v156: poznámka „Neuložené změny“ u Uložit ve formulářích (stejná jako v plovoucí liště) */
.dirty-note { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 650; color: var(--warn-ink); white-space: nowrap; }
.dirty-note[hidden] { display: none; }
.dirty-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--focus); }
/* v156: dům ve správě (bez nabídky): kontakt na správu hned pod hlavičkou */
.asset-object.is-admin > .object-contact { order: 1; }
.asset-object.is-admin > .obj-specs { order: 4; }
/* v156: kontakt u nemovitosti v pořadí jako na vizitce: jméno, funkce, telefon, e-mail, web, adresa */
body[data-asset-kind="object"] .as-contact .field-grid > .oc-name { order: 1; }
body[data-asset-kind="object"] .as-contact .field-grid > .oc-role { order: 2; }
body[data-asset-kind="object"] .as-contact .field-grid > .oc-phone { order: 3; }
body[data-asset-kind="object"] .as-contact .field-grid > .oc-email { order: 4; }
body[data-asset-kind="object"] .as-contact .field-grid > .oc-web { order: 5; }
body[data-asset-kind="object"] .as-contact .field-grid > .oc-addr { order: 6; }
/* v156: rozbalovací „Co ukázat mimo platnost“ a „Naplánovat změnu“ bez trojúhelníku prohlížeče, šipka vpravo jako .collapsible */
.session-more > summary, .validity-more > summary, .schedule > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; border-radius: var(--radius-s, 10px); }
.session-more > summary::-webkit-details-marker, .validity-more > summary::-webkit-details-marker, .schedule > summary::-webkit-details-marker { display: none; }
.session-more > summary::after, .validity-more > summary::after, .schedule > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; color: var(--ink-2); }
.session-more[open] > summary::after, .validity-more[open] > summary::after, .schedule[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.validity-more > summary:hover, .schedule > summary:hover { color: var(--brand); }
.validity-more > summary:focus-visible, .schedule > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .validity-more > summary::after, .schedule > summary::after { transition: none; } }

/* v157: zpráva makléře na kartě nemovitosti (po prodeji, prohlídky) */
.obj-note { margin: 0; padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; border-radius: var(--radius-l); background: var(--amber-soft); color: var(--ink); border: 2px solid var(--amber); font-size: 1.05rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 6px 18px -10px var(--amber); }
.obj-note > svg { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--amber-ink); }
.obj-note > span { min-width: 0; }
.asset-object.is-closed > .object-contact { order: 1; }
.asset-object > .obj-note { order: -1; } /* v198: zpráva nad hlavičkou karty */
/* v157: cena a měna vedle sebe */
.price-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.price-pair select { width: auto; min-width: 84px; }
/* v157: náhled fotky v seznamu vybraných souborů u nového kódu */
.pick-list .pick-thumb { width: 40px; height: 40px; padding-bottom: 0; place-items: center; border-radius: 8px; align-self: center; }
/* v157: jednotné Uložit – poznámka i u malých tlačítek (skupiny, deník, práce) */
.dirty-note-sm { font-size: .75rem; gap: 6px; }
.dirty-note-sm::before { width: 7px; height: 7px; }
.tag-admin-row > .dirty-note { grid-column: 1 / -1; justify-self: end; }
/* v183: v řádcích úprav uživatele (admin) má hláška stejnou výšku a spodní okraj jako tlačítko – jinak visela pod ním */
.uf-row > .dirty-note { min-height: 46px; margin-bottom: 16px; }
.uf-row > .dirty-note-sm { min-height: 36px; }
/* v157: u nemovitosti potvrzení seznámení nedává smysl (veřejná karta ho u nemovitosti nezobrazí) */
body[data-asset-kind="object"] #code-form:has(input[name="type"][value="asset"]:checked) .ack-panel { display: none; }
/* v157: zařízení a majetek bez fotky – ikona typu v jeho barvě (dřív znak kladívek) */
.asset-photo-ico.is-asset, .avatar-ico-asset { color: var(--amber-ink); background: var(--amber-soft); }

/* v160: revize proužku – obsah opravdu na středu (křížek má protějšek vlevo), ikona podle vzhledu na první řádek,
   tlačítko s odkazem, nahoře/dole, přilepení podle nastavení, jemný nástup */
.site-banner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px 16px; text-align: left; position: relative; }
.site-banner.is-closable { grid-template-columns: 32px minmax(0, 1fr) 32px; }
.site-banner-dot { display: none; }
.site-banner-body { grid-column: 1 / -1; justify-self: center; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; row-gap: 6px; max-width: 980px; min-width: 0; }
.site-banner.is-closable .site-banner-body { grid-column: 2; }
.site-banner-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--sb-accent, var(--brand)); }
.site-banner-text { flex: 1 1 0; min-width: min(220px, 100%); overflow-wrap: anywhere; }
.site-banner-link { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; margin: -3px 0; padding: 2px 10px 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--sb-accent, var(--brand)) 16%, transparent); color: inherit; font-weight: 750; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.site-banner-link svg { width: 14px; height: 14px; transition: transform .2s ease; }
.site-banner-link:hover { background: color-mix(in srgb, var(--sb-accent, var(--brand)) 26%, transparent); }
.site-banner-link:hover svg { transform: translateX(2px); }
.site-banner-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-banner-close { grid-column: 3; justify-self: end; margin: -4px -6px -4px 0; }
.site-banner-info { --sb-accent: var(--brand); }
.site-banner-new { --sb-accent: var(--violet); background: var(--violet-soft); color: var(--ink); border-bottom-color: color-mix(in srgb, var(--violet) 25%, transparent); }
.site-banner-new .site-banner-ico { color: var(--violet-ink); }
.site-banner-warn { --sb-accent: var(--warn-ink); }
.site-banner-warn:not(.is-sticky) { position: relative; top: auto; }
.site-banner-danger { --sb-accent: var(--danger); background: var(--danger-bg); color: var(--danger); border-bottom-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.site-banner.is-sticky { position: sticky; top: 0; z-index: 40; }
.site-banner.site-banner-bottom { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 44; border-bottom: 0; border-top: 1px solid color-mix(in srgb, var(--sb-accent, var(--brand)) 25%, transparent); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, .35); }
html.has-banner-bottom body { padding-bottom: var(--banner-bh, 0px); }
html.has-banner-bottom .fab-dock { margin-bottom: var(--banner-bh, 0px); }
html.has-banner-bottom .preview-bar { bottom: var(--banner-bh, 0px); }
@media (max-width: 639px) {
    /* i na telefonu symetricky (vlevo stejně místa jako pro křížek), blok textu je na středu */
    .site-banner { padding: 9px 10px; font-size: .8125rem; gap: 6px; }
    .site-banner.is-closable { grid-template-columns: 28px minmax(0, 1fr) 28px; }
    .site-banner-close { width: 28px; height: 28px; margin: -4px -4px -4px 0; }
    .site-banner-link { margin-left: 28px; }
}
/* náhled ve správě */
.banner-checks { display: grid; gap: 10px; align-content: center; }
.banner-checks .check { margin: 0; }
.banner-preview-wrap { display: grid; gap: 8px; }
.banner-preview { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px; background: var(--surface-2); }
.banner-preview .site-banner { position: static !important; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding-bottom: 10px; animation: none; }

/* v161: méně blikání při přechodu mezi stránkami. Třídu html.afx dává server hned (dřív ji přidal skript až po
   vykreslení: obsah se ukázal, zmizel a znovu naběhl). Nástup jen jednou vlnou (bez druhé vlny řádků seznamu
   kódů), kratší a bez velkého posunu; proužek nahoře se nevykresluje animovaně (je na každé stránce). */
.afx .layout-app .main > *, .afx .layout-public .public-main > article > * { animation: afx-in-soft .28s var(--afx-ease) both; }
.afx .layout-app .main > :nth-child(n+2), .afx .layout-public .public-main > article > :nth-child(n+2) { animation-delay: .03s; }
.afx .layout-app .main > :nth-child(n+3), .afx .layout-public .public-main > article > :nth-child(n+3) { animation-delay: .06s; }
.afx .code-list > li { animation: none; }
@keyframes afx-in-soft { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .afx *, .afx *::before, .afx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v162: přechod mezi stránkami bez blikání – žádný nástup obsahu (při každé navigaci a F5 působil jako probliknutí),
   ani vyskočení fotky na kartě; plovoucí lišta se poprvé ukáže bez animace. Pohyb zůstává u najetí myší a akcí. */
.afx .layout-app .main > *, .afx .layout-public .public-main > article > * { animation: none; }
.afx .asset-photo, .afx .vcard-head .avatar, .afx .wifi-ico { animation: none; }
.fab-dock.is-instant { transition: none !important; }
.afx .dchart svg, .afx svg.chart rect, .dash-js .dchart-plot svg { animation: none; }

/* v163: Arch štítků – počet kusů od každého kódu */
.sheet-qty-all { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 12px; }
.sheet-qty-all .field { flex: 1 1 auto; margin: 0; }
.sheet-qty-all .btn { flex: 0 0 auto; margin-bottom: 6px; }
.sheet-qty { margin: 0 0 18px; }
.sheet-qty-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0 0 8px; }
.sheet-qty-list.is-scroll { max-height: 296px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.sheet-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 5px 5px 5px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); transition: border-color .2s; }
.sheet-qty-row:hover, .sheet-qty-row:focus-within { border-color: var(--brand); }
.sheet-qty-code { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.sheet-qty-code strong { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sheet-qty-code small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-qty-row input { flex: 0 0 84px; width: 84px; min-height: 0; padding-top: 6px; padding-bottom: 6px; text-align: right; }
.sheet-qty > small { display: block; }
.sheet-preview.is-single svg { max-width: 360px; margin: 0 auto; }
@media print { .print-area svg:last-child { break-after: auto; } }

/* v164: úvodní stránka bez probliknutí při prvním načtení. Třídu .fx dává už server (layout landing),
   úvodní panel je vidět od prvního snímku: text a scéna jen jemně dojedou (translate, ne z průhlednosti 0). */
.fx-hero-text > *, .fx-stage { animation: none; } /* v168: ani posun – při načtení to působilo jako poskakování */
@media (prefers-reduced-motion: reduce) {
    .fx [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* v165: druh karty je na <body> už ze serveru: části jiného druhu skryté od prvního vykreslení (dřív až asset-map.js).
   Nemovitost: parametry v prvním okně pod cenou, pak fotky, makléř, adresa a mapa, interní údaje. */
body[data-asset-kind="equipment"] [data-kind-only]:not([data-kind-only~="equipment"]),
body[data-asset-kind="property"] [data-kind-only]:not([data-kind-only~="property"]),
body[data-asset-kind="job"] [data-kind-only]:not([data-kind-only~="job"]),
body[data-asset-kind="object"] [data-kind-only]:not([data-kind-only~="object"]) { display: none; }
body[data-asset-kind="object"] .edit-lock > .as-specs { display: none; }
body[data-asset-kind="object"] .edit-lock > .as-contact { order: 5; }
body[data-asset-kind="object"] .edit-lock > .as-loc { order: 6; }
.specs-slot > .sub-h { margin-top: 6px; }

/* v165: Prohlížení fotek s listováním (app.js, a[data-lightbox]). Záměrně tmavé v obou režimech, jako prohlížeč fotek. */
html.lb-lock { overflow: hidden; }
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 12, 11, .94); color: #FFFFFF; overflow: hidden; }
.lightbox::backdrop { background: rgba(8, 12, 11, .6); }
.lb-stage { position: absolute; inset: 56px 0 64px; display: flex; align-items: center; justify-content: center; padding: 0 64px; touch-action: pan-y; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7); }
.lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #FFFFFF; cursor: pointer; transition: background-color .2s, transform .2s; }
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn:hover { background: rgba(255, 255, 255, .2); }
.lb-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.lb-btn[hidden] { display: none; }
.lb-close { top: 8px; right: 8px; }
.lb-prev { left: 8px; top: 50%; margin-top: -24px; }
.lb-next { right: 8px; top: 50%; margin-top: -24px; }
.lb-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); font-size: .9375rem; }
.lb-count { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-cap { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .85); }
.lb-open { color: #FFFFFF; font-weight: 650; white-space: nowrap; text-underline-offset: 3px; }
@media (max-width: 640px) {
    .lb-stage { inset: 56px 0 60px; padding: 0 8px; }
    .lb-btn.lb-prev, .lb-btn.lb-next { width: 40px; height: 40px; margin-top: -20px; background: rgba(0, 0, 0, .45); }
    .lb-prev { left: 6px; } .lb-next { right: 6px; }
}
.lightbox[open] { animation: lb-in .18s ease-out; }
@keyframes lb-in { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } .lb-btn { transition: none; } }

/* v165: hlavní fotka nemovitosti v okně s fotkami */
.photo-slot { margin: 0 0 var(--panel-gap); }
.photo-slot > .sub-h:first-child { margin-top: 0; }

/* v166: hlavní fotka karty se vybírá hvězdičkou u fotky v okně Soubory */
.main-photo { display: flex; align-items: center; gap: 14px; }
.main-photo-img { flex: 0 0 96px; width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-s); background: var(--surface-2); border: 1px solid var(--line); }
.main-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.main-photo-empty { color: var(--ink-2); }
.main-photo-empty svg { width: 34px; height: 34px; }
.main-photo-body { min-width: 0; }
.main-photo-body p { margin: 0 0 8px; }
.main-photo-body p:last-child { margin-bottom: 0; }
.main-photo-body .button-row { margin: 0; }
.icon-btn-star svg { width: 18px; height: 18px; }
.icon-btn-star:hover, .icon-btn-star:focus-visible { color: var(--amber-ink, var(--amber)); }

/* v166: parametry nemovitosti jako řádky (object-card.js) */
.specs-edit { display: grid; gap: 8px; justify-items: start; }
.specs-edit[hidden] { display: none; }
.specs-head, .specs-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 34px; gap: 8px; width: 100%; align-items: center; }
.specs-head { font-size: .8125rem; font-weight: 650; color: var(--ink-2); padding: 0 2px; }
.specs-rows { display: grid; gap: 6px; width: 100%; }
.specs-row input { min-width: 0; }
.specs-row input[data-n] { font-weight: 600; }
@media (max-width: 480px) {
    /* telefon: název údaje nad hodnotou, ať se dlouhé názvy (Energetická náročnost) neořezávají */
    .specs-head { display: none; }
    .specs-rows { gap: 12px; }
    .specs-row { grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: "n del" "v v"; gap: 6px; }
    .specs-row [data-n] { grid-area: n; min-height: 34px; padding-top: 4px; padding-bottom: 4px; padding-left: 4px; background: transparent; border-color: transparent; font-size: .875rem; color: var(--ink-2); }
    .specs-row [data-n]:hover, .specs-row [data-n]:focus { border-color: var(--line); background: var(--surface); color: var(--ink); }
    .specs-row [data-v] { grid-area: v; }
    .specs-row [data-specs-del] { grid-area: del; }
}

/* v166: popis tarifu ve Správě – víc řádků, jde zvětšit */
textarea.plan-desc { min-height: 84px; resize: vertical; }

/* v167: přetažení souborů a odkazů za úchyt */
.file-drag { cursor: grab; touch-action: none; color: var(--ink-2); }
.file-drag svg { width: 18px; height: 18px; }
.file-drag:active { cursor: grabbing; }
.file-list.is-sorting { user-select: none; -webkit-user-select: none; }
.file-list.is-sorting .file-item:not(.is-dragging) { transition: transform .15s; }
.file-item.is-dragging { position: relative; z-index: 5; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .35); border-color: var(--brand); background: var(--surface); cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .file-list.is-sorting .file-item:not(.is-dragging) { transition: none; } }

/* v168: typ Nemovitost a nabídka na úvodní stránce */
.c-rose { --c: var(--rose); --c-soft: var(--rose-soft); }
.fx-sc-btn.c-rose { background: #D2457A; }
.fx-sc-gal { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 96px; border-radius: 12px; overflow: hidden; }
.fx-sc-gal span { background: linear-gradient(135deg, #C9B79C, #8C7A62); }
.fx-sc-gal span:first-child { grid-row: span 2; background: linear-gradient(160deg, #9FC3D6 0%, #E9DCC6 55%, #B79E7E 100%); }
.fx-sc-gal span:last-child { background: linear-gradient(135deg, #A9C4A0, #5F7F5A); }
.fx-sc-price { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: #1B2B2A; }

/* v169: Servis – tabulka se vejde: stav a datum revize nezalamovat, umístění užší (nejvýš 2 řádky), název má místo */
@media (min-width: 701px) {
    .assets-table th { white-space: nowrap; }
    .assets-table td:nth-last-child(2), .assets-table td:nth-last-child(3) { white-space: nowrap; }
    .assets-table td:nth-last-child(2) .state { white-space: nowrap; }
    .assets-table td:last-child { width: 30%; }
    .assets-table .loc-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* v170: rozbalovací části bez výchozího trojúhelníku prohlížeče – stejná šipka jako u ostatních oken */
.more-fields > summary, .bulk-retire > summary, .claim-multi > summary, .job-contact-edit > summary, .guide-recipe > summary {
    list-style: none; display: flex; align-items: center; gap: 10px; min-height: 34px;
}
.more-fields > summary::-webkit-details-marker, .bulk-retire > summary::-webkit-details-marker, .claim-multi > summary::-webkit-details-marker,
.job-contact-edit > summary::-webkit-details-marker, .guide-recipe > summary::-webkit-details-marker { display: none; }
.more-fields > summary::after, .bulk-retire > summary::after, .claim-multi > summary::after, .job-contact-edit > summary::after, .guide-recipe > summary::after {
    content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; opacity: .75;
}
.more-fields[open] > summary::after, .bulk-retire[open] > summary::after, .claim-multi[open] > summary::after,
.job-contact-edit[open] > summary::after, .guide-recipe[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.guide-recipe > summary { justify-content: flex-start; }
.guide-recipe > summary::after { margin-left: auto; color: var(--ink-2); }
.more-fields > summary:hover, .bulk-retire > summary:hover, .claim-multi > summary:hover, .job-contact-edit > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .more-fields > summary::after, .bulk-retire > summary::after, .claim-multi > summary::after, .job-contact-edit > summary::after, .guide-recipe > summary::after { transition: none; }
}

/* v170: Stav služby na telefonu – hodnota pod popiskem, dlouhé cesty se zalomí (dřív se tlačily do úzkého sloupce) */
.health-label small { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .health-list li { grid-template-columns: 12px minmax(0, 1fr); }
    .health-list li .health-value { grid-column: 2; text-align: left; max-width: none; }
}
/* v170: náhled typu Zakázka ve výběru typu – štítek čísla zakázky na jednom řádku */
.tp-chip { white-space: nowrap; }

/* v175: záložní adresy VIP kódu s počtem načtení */
.vip-old[hidden] { display: none; }
.vip-old .vip-row { flex-wrap: wrap; }
.vip-old .vip-row .vip-row-name { display: grid; gap: 2px; min-width: 9rem; }
.vip-row-name b { font-weight: 750; letter-spacing: .06em; color: var(--ink); }
.vip-row-name small { font-weight: 500; letter-spacing: 0; font-size: .8125rem; line-height: 1.35; }
.vip-row-name .vip-used { color: var(--amber-ink); }
[data-vip-msg]:empty { display: none; }

/* v178: rezervované kódy ve Správě */
.collapsible > .reserved-list { padding: 0 20px 20px; }
/* v179: hledání a výběr vlastníka u rezervovaných kódů */
.collapsible > .reserved-search { display: block; padding: 0 20px; margin: 12px 0 8px; }
.reserved-list li[hidden] { display: none; }
.reserved-owner select { min-height: 34px; padding-block: 4px; font-size: .875rem; max-width: 220px; }

/* v180: tlačítka v buňce akcí tabulky – při zalomení pod sebe stejně široká (vyplní řádek), vedle sebe stejně vysoká */
.table .actions form { align-items: stretch; }
.table .actions form > .btn { flex: 1 0 auto; justify-content: center; }
@media (max-width: 600px) {
    .reserved-list .button-row { width: 100%; }
    .reserved-owner { flex: 1 1 100%; }
    .reserved-owner select { width: 100%; max-width: none; }
    .reserved-list .button-row > .btn { flex: 1 1 0; justify-content: center; }
}

/* v181: hledání při psaní – oblast výsledků bez vlivu na rozvržení, pole během načítání jemně podbarvené */
.live-results { display: contents; }
.filters input[type="search"] { transition: background-color .2s; }
.filters.is-searching input[type="search"] { background-color: color-mix(in srgb, var(--brand) 7%, var(--surface)); }

/* v182: tlačítka v prázdném stavu – při zalomení pod sebe stejně široká (nikdy přes celou šířku na počítači) */
.empty .button-row-center { max-width: 34rem; margin-inline: auto; }
.empty .button-row-center > .btn { flex: 1 1 auto; justify-content: center; }

/* v183: na telefonu se tlačítka v řadě (Uložit / Zrušit apod.) roztáhnou na stejnou šířku, jako ve spodní liště.
   Tlačítko s delším textem se nezúží pod svůj text; když se nevejdou, zalomí se pod sebe přes celou šířku.
   :where() = nízká priorita, vlastní pravidla jednotlivých řad (skenování, košík, rezervace…) mají přednost. */
@media (max-width: 639px) {
    :where(.button-row) > .btn,
    :where(.button-row) > form { flex: 1 1 0; min-width: fit-content; }
    :where(.button-row) > form { display: flex; margin: 0; }
    :where(.button-row) > form > .btn { flex: 1 1 auto; }
}

/* v184: úprava kódu – pořadí oken: typ → název → skupiny → přístup k obsahu → šablony → obsah → poloha → interní → kdo co uvidí → platnost → potvrzení seznámení */
.edit-lock > .name-card { order: 2; }
.edit-lock > #access { order: 1; }
.edit-lock > .as-insp { order: 5; }
.edit-lock > .as-specs { order: 6; }
.edit-lock > #files-list { order: 7; }
.edit-lock > .as-loc { order: 8; }
.edit-lock > #platnost { order: 11; }
.edit-lock > #seznameni { order: 12; }
body[data-asset-kind="object"] .edit-lock > #files-list { order: 4; }
body[data-asset-kind="object"] .edit-lock > .as-contact { order: 5; }
body[data-asset-kind="object"] .edit-lock > .as-loc { order: 6; }

/* v184: volitelná okna jako rozbalovací (.opt-card): zavřená, dokud v nich nic není; v hlavičce stav (Bez omezení, Příští 3. 5. 2027…) */
.opt-card > summary { gap: 10px; min-height: 52px; border-radius: inherit; transition: background-color .2s ease; }
.opt-card > summary:hover { background: var(--surface-2); }
.opt-card > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.opt-card[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.opt-card > summary > .opt-title { flex: none; max-width: 70%; }
.opt-card > summary > .badge { flex: none; margin: 0; }
.opt-card > summary > .opt-state { flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.opt-card > summary::after { margin-left: 4px; flex: none; }
.opt-card > summary > .opt-state:empty { display: none; }
.opt-card[open] > summary > .opt-state { visibility: hidden; }
.opt-body { padding: 0 var(--panel-pad) var(--panel-pad); }
.opt-body > p.muted:first-child { margin-top: 0; }
.opt-body > :last-child { margin-bottom: 0; }
.opt-card .validity { margin: 0; padding-top: 0; border-top: 0; }
.opt-card .tpl-list { margin-top: 0; }
@media (max-width: 480px) { .opt-card > summary > .opt-title { max-width: 62%; } }
@media (prefers-reduced-motion: reduce) { .opt-card > summary { transition: none; } }

/* v184: mapa v úpravě karty až na klepnutí (Mapa ▸), stejný vzhled jako „Co ukázat mimo platnost“ */
.map-more { margin-top: 4px; }
.map-more > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 34px; cursor: pointer; font-weight: 650; border-radius: var(--radius-s, 10px); }
.map-more > summary::-webkit-details-marker { display: none; }
.map-more > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; color: var(--ink-2); }
.map-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.map-more[open] > summary { margin-bottom: 10px; }
.map-more > summary:hover { color: var(--brand); }
.map-more > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.map-more-state { font-weight: 500; font-size: .875rem; color: var(--ink-2); }
.map-more-note { margin: 0; }
@media (prefers-reduced-motion: reduce) { .map-more > summary::after { transition: none; } }

/* v184: veřejná karta – mapa až po klepnutí na Zobrazit na mapě (kromě nemovitosti) */
.public-map-btn[hidden] { display: none; }
.public-map[hidden] { display: none; }

/* v184: formátovaný text stránky (veřejně .docs-rich, v editoru .rt-editor): nadpis, podnadpis, malá poznámka,
   odrážky s vlastní tečkou, číslovaný seznam, zvýrazněný rámeček, oddělovací čára, kurzíva, odkazy */
.docs-rich h3, .rt-editor h3 { font-size: 1rem; margin: 14px 0 4px; color: var(--ink); }
.docs-rich h2:first-child, .docs-rich h3:first-child, .rt-editor > :first-child { margin-top: 0; }
.docs-rich .rt-small, .rt-editor .rt-small { font-size: .8125rem; color: var(--ink-2); }
.docs-rich ul, .rt-editor ul { list-style: none; padding-left: 0; margin: 0 0 10px; }
.docs-rich ul > li, .rt-editor ul > li { position: relative; padding-left: 1.15em; margin: 3px 0; }
.docs-rich ul > li::before, .rt-editor ul > li::before { content: ""; position: absolute; left: .2em; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.docs-rich ol, .rt-editor ol { margin: 0 0 10px; padding-left: 1.6em; }
.docs-rich ol > li, .rt-editor ol > li { margin: 3px 0; padding-left: .15em; }
.docs-rich ol > li::marker, .rt-editor ol > li::marker { color: var(--brand); font-weight: 700; }
.docs-rich .rt-box, .rt-editor blockquote { margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius-s, 10px); background: var(--warn-bg); color: var(--ink); border-left: 3px solid var(--warn-ink); }
.docs-rich hr, .rt-editor hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.docs-rich a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* v184: editor textu stránky – formátování je vidět rovnou, ukládá se jako text se značkami (bez JS zůstává obyčejné pole) */
.rt-wrap { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.rt-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.js .rt-wrap > textarea { display: none; }
.field > .rt-hint-nojs { display: none; }
/* skript editor nespustil (velmi starý prohlížeč): obyčejné pole jako bez JS */
.rt-wrap.rt-off { border: 0; background: none; overflow: visible; box-shadow: none; }
.rt-wrap.rt-off > textarea { display: block; }
.rt-wrap.rt-off > .rt-tools, .rt-wrap.rt-off > .rt-link, .rt-wrap.rt-off > .rt-editor { display: none; }
.rt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rt-tools .rt-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--line); }
.rt-tools .rt-btn { min-width: 34px; min-height: 34px; padding: 4px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: var(--radius-s, 10px); background: none; color: var(--ink); font: inherit; font-size: .875rem; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.rt-tools .rt-btn svg { width: 18px; height: 18px; flex: none; }
.rt-tools .rt-btn:hover { background: var(--surface); border-color: var(--line); }
.rt-tools .rt-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.rt-tools .rt-btn[aria-pressed="true"] { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.rt-tools select.rt-block { width: auto; min-height: 34px; padding-block: 4px; font-size: .875rem; }
.rt-editor { min-height: 180px; max-height: 70vh; overflow: auto; padding: 12px 14px; outline: none; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.rt-editor h2 { font-size: 1.125rem; margin: 18px 0 6px; }
.rt-editor p { margin: 0 0 10px; }
.rt-editor a { color: var(--brand); text-decoration: underline; }
.rt-link { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rt-link[hidden] { display: none; }
.rt-link .field { flex: 1 1 220px; margin: 0; }
.rt-link .button-row { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.edit-lock:disabled .rt-tools, .edit-lock:disabled .rt-link { display: none; }
.edit-lock:disabled .rt-wrap { border-color: transparent; background: none; }
.edit-lock:disabled .rt-editor { padding: 0; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .rt-tools .rt-btn { transition: none; } }
.rt-tools .rt-btn:disabled { opacity: .4; cursor: default; background: none; border-color: transparent; }
.card.opt-card { padding: 0; }
/* v184: veřejný kód – v okně Přístup k obsahu jsou jen dvě volby, bez prázdného místa pod nimi */
#access:has([data-lock-radio][value="none"]:checked) .lock-switch { margin-bottom: 0; }
.lock-redirect-note > p { margin: 0 0 var(--panel-gap); }
/* v184: dlouhý souhrn v zavřené hlavičce okna (adresa) nesmí roztáhnout sloupec formuláře */
.edit-lock { grid-template-columns: minmax(0, 1fr); }
.edit-lock > * { min-width: 0; }
/* v184: telefon – souhrn okna pod nadpisem (vedle by se nevešel spolu se štítkem „jen pro vás“) */
@media (max-width: 480px) {
    .opt-card > summary { flex-wrap: wrap; row-gap: 2px; }
    .opt-card > summary > .opt-title { max-width: none; flex: 0 1 auto; }
    .opt-card > summary::after { order: 2; margin-left: auto; }
    .opt-card > summary > .opt-state { order: 3; flex: 1 0 100%; margin-left: 0; white-space: normal; }
    .opt-card[open] > summary > .opt-state { display: none; }
    .rt-tools .rt-sep { display: none; }
}

/* v185: „Kdo uvidí“ přímo u části karty (pod nadpisem okna nebo podsekce) a štítek v hlavičce zavřeného okna */
.vis-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 var(--panel-gap); font-size: .875rem; color: var(--ink-2); }
.vis-inline > span { font-weight: 600; }
.vis-inline select { width: auto; max-width: 100%; min-height: 34px; padding-block: 4px; font-size: .875rem; }
.vis-inline[hidden], .vis-badge[hidden] { display: none; }
.vis-inline.tpl-flash { padding: 2px 6px; margin-left: -6px; }
.sub-h + .vis-inline { margin-top: -2px; }
#log > .vis-inline { margin-top: calc(var(--panel-head) * -0.5); }
.edit-lock:disabled .vis-inline select, .vis-inline select:disabled { opacity: 1; }
.as-vis .vis-grid { margin-top: 4px; }
/* v186: hlavička rozbalovacího okna má při najetí myší stejné zaoblení jako okno (dřív hranaté rohy); klepání neoznačuje text */
.card.opt-card > summary { border-radius: var(--panel-radius); -webkit-user-select: none; user-select: none; }
.card.opt-card[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.opt-body { padding-top: 8px; }
/* v187: volby vedle sebe (Veřejný / Chráněný heslem, Zařízení / Majetek) vždy stejně vysoké, i když má jedna delší popis */
.kind-switch label { display: flex; }
.kind-switch label > span { flex: 1 1 auto; min-width: 0; }
/* v187: výběr skupin s heslem jen se zaškrtnutým „Hesla skupin“ (stav je v HTML ze serveru, žádné problikávání) */
.lock-tags[data-off] { display: none; }
.lock-tags { margin: -2px 0 16px 32px; }
@media (max-width: 480px) { .lock-tags { margin-left: 0; } }
/* v188: chyba nad volbou Veřejný / Chráněný heslem nesmí být nalepená na volbách */
#access > .field-error { margin: 0 0 12px; }
/* v188: heslo zaškrtnuté napevno (hlavní heslo účtu, skupina, ve které kód je) není šedé jako nedostupná volba */
.lock-opt input:disabled:checked + span { opacity: 1; }
/* v189: přehled Kdo co uvidí – výběry ve dvou sloupcích vždy v jedné linii, i když se dlouhý popisek zalomí */
.vis-grid { align-items: end; }
/* v190: poznámka pod řádkem polí ve Správě (pole v řádku zůstanou zarovnaná) */
.uf-row > .uf-row-note { flex: 1 1 100%; margin: -8px 0 12px; }

/* v191: Správa → Kódy: stav a štítky (Heslo, Zablokovaný) pod sebou a vystředěné na sebe, ne odsazené pod textem */
.state-col { text-align: center; }
.state-stack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.state-col > .muted { display: block; text-align: center; }
.state-stack > .badge { margin: 0; }
/* v191: rozbalovací okno ve tvaru karty (Rezervované kódy) bez dvojího odsazení – výška hlavičky jako u ostatních oken */
details.card.collapsible { padding: 0; }
/* v192: Správa → Tarify: šipky pořadí přímo v řádku tarifu */
.plan-order { display: flex; gap: 4px; margin: 0; }
.plan-item .user-badges { align-items: center; }
@media (max-width: 600px) {
    .plan-item .user-badges { flex-direction: column; align-items: flex-end; flex: none; }
    .plan-item .plan-order { order: -1; }
}

/* v199: Správa v hlavním menu zvýrazněná, aby nezapadla */
.nav a.nav-admin { gap: 6px; color: var(--violet-ink); background: var(--violet-soft); box-shadow: inset 0 0 0 1.5px var(--violet); }
.nav a.nav-admin svg { width: 18px; height: 18px; flex: none; }
.nav a.nav-admin:hover { color: var(--violet-ink); background: var(--violet-soft); box-shadow: inset 0 0 0 2px var(--violet); }
.nav a.nav-admin[aria-current="page"] { color: #fff; background: var(--violet); box-shadow: none; }
.nav a.nav-admin:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* v200: štítek nad nadpisem úvodní stránky: při zalomení do dvou řádků ne „tableta“, tečka u prvního řádku */
.fx-eyebrow { align-items: flex-start; max-width: 100%; padding: 7px 14px 7px 12px; border-radius: 16px; line-height: 1.35; }
.fx-pulse { flex: none; margin-top: calc((1.35em - 8px) / 2); }

/* v201: Rychlé revize – panel na kartě a ve skeneru (velká tlačítka Vyhovělo / Nevyhovělo, rychlé volby závad) */
.revize-panel { display: grid; gap: 14px; margin: 0 0 18px; padding: 18px; border-radius: var(--radius-l); background: var(--surface); border: 2px solid var(--brand); box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--brand) 70%, transparent); scroll-margin-top: 16px; }
.revize-panel.is-busy { opacity: .7; }
.revize-panel.is-recorded.is-ok { border-color: var(--ok-ink); }
.revize-panel.is-recorded.is-fail { border-color: var(--danger); }
.revize-head { display: grid; gap: 4px; min-width: 0; }
.revize-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .8125rem; font-weight: 750; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }
.revize-kicker svg { width: 18px; height: 18px; flex: none; }
.revize-head h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; overflow-wrap: anywhere; }
.revize-code { font-size: .8125rem; font-weight: 650; color: var(--ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.revize-meta { margin: 0; color: var(--ink-2); font-size: .875rem; overflow-wrap: anywhere; }
.revize-status { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .9375rem; }
.revize-status > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.revize-note { margin: 0; padding: 10px 12px; border-radius: var(--radius-s); background: var(--info-bg); color: var(--info-ink); font-size: .875rem; }
.revize-form { display: grid; gap: 12px; margin: 0; }
.revize-interval { margin: 0; padding: 0; border: 0; min-width: 0; }
.revize-interval legend { margin: 0 0 8px; padding: 0; font-size: .875rem; font-weight: 650; color: var(--ink-2); }
.revize-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.revize-chip { position: relative; display: inline-flex; cursor: pointer; }
.revize-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.revize-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); font-weight: 650; font-size: .9375rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.revize-chip:hover span { border-color: var(--brand); }
.revize-chip input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.revize-chip input:focus-visible + span { outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; }
.revize-chip-fail input:checked + span { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.revize-chip input:checked + span::before { content: ""; width: 6px; height: 11px; margin: -3px 9px 0 1px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); flex: none; }
.revize-chip-fail:hover span { border-color: var(--danger); }
.btn.revize-ok, .revize-fail-btn { width: 100%; min-height: 60px; font-size: 1.125rem; border-radius: var(--radius); }
.btn.revize-ok svg, .revize-fail-btn svg { width: 24px; height: 24px; flex: none; }
.btn.revize-ok { background: var(--ok-ink); color: var(--on-brand); }
.btn.revize-ok:hover:not(:disabled) { background: color-mix(in srgb, var(--ok-ink) 85%, #000); }
.revize-fail { margin: 0; }
.revize-fail > summary { list-style: none; background: var(--surface); color: var(--danger); border: 2px solid color-mix(in srgb, var(--danger) 55%, transparent); }
.revize-fail > summary::-webkit-details-marker { display: none; }
.revize-fail > summary:hover { border-color: var(--danger); background: var(--danger-bg); }
.revize-fail > summary:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.revize-fail[open] > summary { background: var(--danger-bg); border-color: var(--danger); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.revize-fail-form { display: grid; gap: 12px; padding: 14px; border: 2px solid var(--danger); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.revize-fail-label { margin: 0; font-weight: 700; }
.revize-fail-label small { font-weight: 500; color: var(--ink-2); }
.revize-note-field { margin: 0; }
.btn.revize-fail-save { width: 100%; min-height: 52px; background: var(--danger); color: var(--on-brand); }
.btn.revize-fail-save:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 85%, #000); }
.revize-done { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius); background: var(--ok-bg); color: var(--ok-ink); }
.revize-done strong { font-size: 1.125rem; }
.is-fail .revize-done { background: var(--danger-bg); color: var(--danger); }
.revize-done span { color: var(--ink); overflow-wrap: anywhere; }
.revize-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.revize-actions form { margin: 0; }
.revize-actions .btn { min-height: 52px; }
.revize-hint { margin: 0; font-weight: 650; color: var(--ink-2); }
.revize-msg:empty { display: none; }
.revize-msg { margin: 0; padding: 10px 12px; border-radius: var(--radius-s); font-size: .875rem; font-weight: 600; }
.revize-msg.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.revize-msg.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.revize-slot:empty { display: none; }
.revize-slot .revize-panel { margin: 0; }
.revize-leave { margin: 16px 0 0; text-align: center; }
.revize-enter .message-mark { color: var(--brand); }
@media (max-width: 420px) { .revize-actions { grid-template-columns: 1fr; } .revize-actions .btn { width: 100%; } .revize-panel { padding: 16px 14px; } }
@media (prefers-reduced-motion: reduce) { .revize-chip span { transition: none; } }
/* v201: Servis → Revize */
.revize-filters .revize-scan-btn { margin-left: auto; }
@media (max-width: 600px) { .revize-filters .revize-scan-btn { flex: 1 1 100%; margin-left: 0; } }
.revize-kpi .dkpi-main { background: linear-gradient(120deg, color-mix(in srgb, var(--mint-soft) 75%, var(--surface)), var(--surface) 70%); }
.revize-kpi .dkpi-main .dkpi-num { color: var(--mint-ink); }
.dkpi-item.is-danger .dkpi-num { color: var(--danger); }
.dkpi-item.is-warn .dkpi-num { color: var(--warn-ink); }
.revize-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.revize-kpi .dkpi-item:last-child { grid-column: auto; }
@media (max-width: 420px) { .revize-kpi .dkpi-item:not(.dkpi-main) { padding: 12px; } .revize-kpi .dkpi-num { font-size: 1.5rem; } }
@media (min-width: 760px) { .revize-kpi { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); } .revize-kpi .dkpi-main { grid-column: auto; } }
.revize-todo-card h2, .revize-protocol-card h2, .revize-access-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.revize-todo { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.revize-todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.revize-todo li:first-child { border-top: 0; }
.revize-todo a { display: grid; gap: 2px; min-width: 0; color: var(--ink); text-decoration: none; }
.revize-todo a:hover strong { color: var(--brand); }
.revize-todo a strong { overflow-wrap: anywhere; }
.revize-todo .state { flex: none; white-space: nowrap; }
.revize-protocol-form, .revize-access-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 12px 0 0; }
.revize-protocol-form .field, .revize-access-form .field { margin: 0; }
.revize-protocol-form .button-row, .revize-access-form .button-row { grid-column: 1 / -1; margin: 0; }
@media (max-width: 700px) { .revize-protocol-form, .revize-access-form { grid-template-columns: 1fr; } }
.revize-settings { margin: 18px 0 0; border-top: 1px solid var(--line); }
.revize-settings > summary { padding: 14px 0 0; font-weight: 700; }
.revize-settings > form { display: grid; gap: 12px; padding: 12px 0 0; }
.revize-settings > form > p { margin: 0; }
.revize-settings .field { margin: 0; }
.revize-new-link { margin: 12px 0 0; }
.revize-access-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.revize-access-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.revize-access-list li > div:first-child { display: grid; gap: 2px; min-width: 0; }
.revize-access-list li.is-expired { opacity: .6; }
.revize-access-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.revize-access-actions form { margin: 0; }
/* v201: protokol revizí k tisku */
.revize-report h2 { margin: 24px 0 8px; font-size: 1.0625rem; }
.revize-report-text { white-space: normal; }
.revize-table tr.is-fail td { background: color-mix(in srgb, var(--danger-bg) 70%, transparent); }
.revize-table small { color: var(--ink-2); }
@media screen and (max-width: 700px) { .revize-report .report-table { display: block; overflow-x: auto; } }
@media print { .revize-table tr.is-fail td { background: #fbe9e7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.result-tag { margin-left: 6px; vertical-align: 1px; font-size: .75rem; padding: 1px 8px; }

/* v202: servisní deník v úpravě kódu – okraj tlačítka formuláře už nezasahuje do „Vyfotit nebo vybrat“
   (pole Fotka bylo o 16 px vyšší a celý druhý řádek se rozjel), Druh širší, ať se nezkracuje */
.log-form .field:has(> select) { flex: 1.4 1 190px; }
.log-form .file-pick-btn { margin-bottom: 0; }
/* v202: veřejná karta – Zobrazit na mapě přes celou šířku, pod ním Mapy.cz a Google Mapy s ikonou polohy a šipkou ven */
.nav-links { display: flex; flex-wrap: wrap; }
.nav-links .public-map-btn { flex: 1 1 100%; }
.nav-links .btn { gap: 8px; }
.nav-link { flex: 1 1 9.5rem; justify-content: center; white-space: nowrap; padding: 0 10px; } /* v203: bez zalomení „Google Mapy“; když se nevejdou, jdou pod sebe */
.nav-link-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--mint-soft); color: var(--mint-ink); }
.nav-link-google .nav-link-ico { background: var(--sky-soft); color: var(--sky-ink); }
.nav-link-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-link-ext { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: opacity .2s, transform .2s; }
.nav-link:hover .nav-link-ext { opacity: 1; transform: translate(1px, -1px); }
.public-map-btn .btn-ico { stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .nav-link-ext { transition: none; } .nav-link:hover .nav-link-ext { transform: none; } }

/* v203: rychlá revize mimo termín jen jako sbalený řádek nahoře na kartě (celý panel do 30 dní, po termínu, ve skeneru) */
.revize-panel.is-compact { display: block; padding: 0; border: 1px solid var(--line); box-shadow: none; }
.revize-panel.is-compact[open] { border: 2px solid var(--brand); }
.revize-compact { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; cursor: pointer; list-style: none; border-radius: inherit; }
.revize-compact::-webkit-details-marker { display: none; }
.revize-compact:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.revize-compact-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--brand-soft); color: var(--brand); }
.revize-compact-ico svg { width: 18px; height: 18px; }
.revize-compact-text { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .9375rem; }
.revize-compact-text > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-2); }
.revize-compact-act { display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 700; font-size: .875rem; color: var(--brand); }
.revize-compact-act::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.revize-panel[open] .revize-compact-act::after { transform: rotate(-135deg) translate(-2px, 0); }
.revize-compact:hover .revize-compact-act { text-decoration: underline; text-underline-offset: 3px; }
.revize-compact-body { display: grid; gap: 14px; padding: 4px 16px 16px; }
.revize-own { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface-2, var(--bg)); font-size: .875rem; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .revize-compact-act::after { transition: none; } }
/* v203: výsledek revize v deníku jen u druhu Revize / kontrola */
[data-show-kind][hidden] { display: none !important; }
/* v203: formulář deníku – pole zarovnaná nahoře (zalomené „Vyfotit nebo vybrat“ už neposouvá popisky), Popis širší;
   štítek výsledku v seznamu jen na šířku textu */
.log-form { align-items: flex-start; }
.log-form > .btn { align-self: flex-end; }
.log-form .field-grow:not(.log-photo-field) { flex-basis: 300px; }
.log-body .result-tag { justify-self: start; margin-left: 0; }

/* v205: prvky jen pro správce qrlink (blokace, VIP kód, úprava cizího kódu, upozornění na cron) fialově jako Správa v menu,
   se štítkem „Jen správce“ – na první pohled je vidět, co zákazník nevidí */
.admin-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--violet); color: #fff; font-size: .6875rem; font-weight: 750; letter-spacing: .02em; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.admin-tag svg { width: 13px; height: 13px; }
.admin-only { border: 1.5px solid var(--violet) !important; background: color-mix(in srgb, var(--violet-soft) 60%, var(--surface)) !important; }
.export.admin-only > summary { gap: 10px; }
.export.admin-only > summary > span:first-child { margin-right: auto; }
.vip-inline.admin-only .vip-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flash.admin-only { color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.revize-kicker .admin-tag, .revize-compact-text .admin-tag { text-transform: none; letter-spacing: .02em; margin-left: 4px; }
/* v206: ochrana heslem jantarově (zámek), fialová patří jen prvkům správce (Správa, Jen správce) */
.lock-switch input:checked + span { border-color: var(--amber); background: color-mix(in srgb, var(--amber-soft) 70%, var(--surface)); }
.lock-badge, .lock-mark { background: var(--amber-soft); color: var(--amber-ink); }

/* v208: Nový kód – ikona a text jako jeden celek uprostřed tlačítka (v207 měl justify-items: start, text byl vlevo a + mimo) */
.create-label { justify-items: center; align-items: center; }
.create-label > span { display: inline-flex; align-items: center; gap: 8px; }

/* ===== v211: živá ukázka (QR → telefon) a Příběh jednoho štítku ===================================== */
.layout-landing, .layout-public { --fx-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; }

/* Živá ukázka pod přepínačem typů – jen počítač (na telefonu nemá co skenovat) */
.fx-live { display: grid; grid-template-columns: 168px 1fr; gap: 28px; align-items: center; max-width: 820px; margin: 0 auto 40px; padding: 22px 26px; border: 1.5px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: var(--radius-l); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.fx-live-plate { padding: 30px 14px 12px; border-radius: 20px; transform: rotate(-3deg); }
.fx-live-plate::before { top: 10px; width: 12px; height: 12px; margin-left: -6px; }
.fx-live-plate .qr-preview { padding: 8px; border-radius: 10px; color: #0E1A1E; } /* v212: v tmavém režimu byly moduly světlé a kód nešel načíst */
.fx-live-plate .tag-code { margin-top: 8px; font-size: .75rem; letter-spacing: .26em; padding-left: .26em; }
.fx-live-kicker { margin: 0 0 4px; font: 800 .75rem/1.3 var(--fx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-coral); }
.fx-live h3 { margin: 0 0 6px; font-size: 1.1875rem; letter-spacing: -.01em; }
.fx-live p { margin: 0; color: var(--ink-2); }
.fx-live .fx-live-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: .875rem; }
.fx-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); opacity: .5; animation: fx-live-wait 1.6s ease-in-out infinite; }
@keyframes fx-live-wait { 50% { opacity: .15; } }
.fx-live .fx-live-status.is-on { background: color-mix(in srgb, var(--lp-mint) 18%, var(--surface)); color: var(--ink); }
.fx-live-status.is-on .fx-live-dot { background: var(--lp-mint); opacity: 1; animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-mint) 25%, transparent); }
.fx-live-status.is-pulse { animation: fx-live-pulse .5s var(--fx-ease); }
@keyframes fx-live-pulse { 40% { transform: scale(1.05); } }
.fx-live .fx-live-status.is-err { background: color-mix(in srgb, var(--lp-coral) 16%, var(--surface)); color: var(--ink); }
@media (max-width: 899px), (hover: none) { .fx-live { display: none; } }

/* Stránka ukázky v telefonu (public/demo.php) */
.fx-demo { max-width: 440px; margin: 0 auto; padding: 8px 0 24px; display: grid; gap: 16px; }
.fx-demo-note { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.fx-demo-badge { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; background: var(--lp-coral, #FF7A59); color: #fff; font: 800 .6875rem/1.6 var(--fx-mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.fx-demo-screen.fx-phone-screen { height: auto; display: grid; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .95rem; }
.fx-demo-screen .fx-screen { position: relative; inset: auto; grid-area: 1 / 1; padding: 22px 18px 18px; min-height: 420px; }
.fx-demo-screen .fx-sc-btn { margin-top: auto; }
.fx-demo.is-changed .fx-demo-screen { animation: fx-demo-ring .9s var(--fx-ease); }
@keyframes fx-demo-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.fx-demo-now { margin: 0; text-align: center; color: var(--ink-2); }
.fx-demo-now strong { color: var(--ink); }
.fx-demo-cta { justify-self: center; }

/* Příběh jednoho štítku – technický výkres v pozadí, kotel zůstává, kroky jedou do strany */
.fx-story { position: relative; background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--line) 55%, transparent) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 0 1px, transparent 1px 32px), var(--bg); }
.fx-story .lp-sub { margin-bottom: 28px; }
.fx-story-grid { display: grid; gap: 28px; }
.fx-story-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.fx-story-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fx-story-when { font: 700 .75rem/1.4 var(--fx-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lp-coral); }
.fx-story-step h3 { margin: 0; font-size: 1.125rem; letter-spacing: -.01em; }
.fx-story-step p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.fx-story-art { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px; align-items: flex-end; }
.fx-sa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: .8125rem; }
.fx-sa-chip svg, .fx-sa-ico svg, .fx-sa-check svg, .fx-sa-hand > svg { width: 16px; height: 16px; flex: none; }
.fx-sa-mail, .fx-sa-log { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.fx-sa-mail > span:last-child, .fx-sa-log > span:last-child { display: grid; line-height: 1.3; min-width: 0; }
.fx-sa-mail b, .fx-sa-log b { font-size: .8125rem; }
.fx-sa-mail small, .fx-sa-log small { color: var(--ink-2); font-size: .75rem; }
.fx-sa-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--c-soft); color: var(--c); flex: none; }
.fx-sa-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lp-mint); color: #fff; flex: none; }
.fx-sa-stamp { display: inline-block; padding: 6px 14px; border: 3px double var(--lp-mint); border-radius: 8px; color: var(--lp-mint); font: 800 1.125rem/1 var(--fx-mono); letter-spacing: .18em; text-transform: uppercase; transform: rotate(-7deg); opacity: .9;
    -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0,0,0,.55) 75%, #000 90%); mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0,0,0,.55) 75%, #000 90%); }
.fx-sa-hand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .875rem; }
.fx-sa-who { padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.fx-sa-who.is-new { background: color-mix(in srgb, var(--lp-mint) 18%, var(--surface)); border-color: color-mix(in srgb, var(--lp-mint) 45%, var(--line)); }
.fx-story-boiler { display: none; }

/* Kotel (kreslený v CSS) */
.fx-boiler { position: relative; width: 190px; height: 260px; margin: 0 auto; border-radius: 18px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fx-boiler-panel { display: flex; align-items: center; gap: 10px; margin: 18px 16px 0; padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.fx-boiler-panel i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); }
.fx-boiler-disp { flex: 1; display: grid; place-items: center; height: 30px; border-radius: 6px; background: #0C211F; font: 700 .875rem/1 var(--fx-mono); }
.fx-boiler-disp b { grid-area: 1 / 1; }
.fx-boiler-disp .is-ok { color: #6EE7B7; }
.fx-boiler-disp .is-err { color: #FF8A6B; visibility: hidden; }
.fx-boiler-grille { margin: 18px 30px 0; height: 54px; background: repeating-linear-gradient(0deg, var(--line) 0 3px, transparent 3px 9px); border-radius: 4px; }
.fx-boiler-tag { position: absolute; left: 50%; bottom: 22px; width: 74px; margin-left: -37px; padding: 7px; border-radius: 9px; background: linear-gradient(135deg, var(--plate-a, #D9DEDB), var(--plate-b, #AEB6B2)); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transform: rotate(-2deg); }
.fx-boiler-tag svg { display: block; width: 100%; height: auto; padding: 4px; background: #fff; border-radius: 4px; color: #17232A; }
.fx-boiler-pipes { display: flex; justify-content: center; gap: 26px; }
.fx-boiler-pipes i { width: 10px; height: 44px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--line), var(--surface-2), var(--line)); }
.fx-story-same { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font: 700 .75rem/1.3 var(--fx-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.fx-story-same svg { width: 16px; height: 16px; }

/* v212: na počítači kotel vlevo, pás kroků vpravo – posun šipkami, časovou osou, tažením / přejetím (scroll-snap); landing-fx.js data-fx-story.
   Dřív (v211) sticky scéna 300vh posouvaná kolečkem: nebylo poznat, že se má točit, a na vysoké obrazovce zbyla velká mezera. */
.fx-story-nav { display: none; }
@media (min-width: 900px) {
    .js .fx-story-grid { grid-template-columns: 230px minmax(0, 1fr); align-items: center; }
    .js .fx-story-boiler, .js .fx-story-year { display: block; }
    .fx-story-main { min-width: 0; }
    .js .fx-story-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 14px 4px 18px; cursor: grab;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .js .fx-story-viewport::-webkit-scrollbar { display: none; }
    .js .fx-story-viewport.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
    .js .fx-story-track { display: flex; gap: 20px; width: max-content; padding-right: max(0px, calc(100% - 320px)); }
    .js .fx-story-step { width: 300px; min-height: 290px; scroll-snap-align: start; opacity: .45; transform: scale(.96); transform-origin: left center; transition: opacity .35s ease, transform .45s var(--fx-ease), border-color .35s ease; }
    .js .fx-story-step.is-on { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--lp-coral) 45%, var(--line)); }
    .js .fx-story-step.is-past { opacity: .7; }
    .js .fx-story-step .fx-sa-stamp { transform: rotate(-7deg) scale(1.8); opacity: 0; transition: transform .3s cubic-bezier(.5, 0, .75, 0), opacity .2s ease; }
    .js .fx-story-step.is-on .fx-sa-stamp, .js .fx-story-step.is-past .fx-sa-stamp { transform: rotate(-7deg); opacity: .9; }
    .js .fx-story[data-step="3"] .fx-boiler-disp .is-ok { visibility: hidden; }
    .js .fx-story[data-step="3"] .fx-boiler-disp .is-err { visibility: visible; animation: fx-err-blink 1s steps(2) infinite; }
    .js .fx-story[data-step="3"] .fx-boiler { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-coral) 40%, transparent), var(--shadow); }
    .js .fx-story[data-step="5"] .fx-boiler-tag { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-mint) 55%, transparent), 0 2px 6px rgba(0, 0, 0, .18); }
    .js .fx-story-nav { display: flex; align-items: flex-start; gap: 14px; margin-top: 4px; }
}
.fx-story-arrow { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s; }
.fx-story-arrow:hover:not(:disabled) { border-color: color-mix(in srgb, var(--lp-coral) 55%, var(--line)); transform: translateY(-1px); }
.fx-story-arrow:disabled { opacity: .35; cursor: default; }
.fx-story-arrow:focus-visible, .fx-story-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.fx-story-line { position: relative; flex: 1; display: flex; list-style: none; margin: 0; padding: 0; --story-p: 0; }
.fx-story-line::before, .fx-story-line::after { content: ""; position: absolute; top: 19px; left: calc(100% / 12); height: 2px; border-radius: 2px; background: var(--line); }
.fx-story-line::before { right: calc(100% / 12); }
.fx-story-line::after { width: calc((100% - 100% / 6) * var(--story-p)); background: var(--lp-coral); transition: width .45s var(--fx-ease); }
.fx-story-line li { flex: 1; }
.fx-story-dot { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; width: 100%; padding: 12px 2px 4px; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer; border-radius: 10px; }
.fx-story-dot::before { content: ""; width: 14px; height: 14px; margin-bottom: 6px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); transition: background-color .25s, border-color .25s, transform .25s var(--fx-spring); }
.fx-story-dot-y { font: 700 .6875rem/1.2 var(--fx-mono); letter-spacing: .06em; }
.fx-story-dot-t { font-weight: 750; font-size: .8125rem; }
.fx-story-dot:hover { color: var(--ink); }
.fx-story-dot:hover::before { border-color: var(--lp-coral); }
.fx-story-dot.is-past::before { background: var(--lp-coral); border-color: var(--lp-coral); }
.fx-story-dot.is-on { color: var(--ink); }
.fx-story-dot.is-on::before { background: var(--lp-coral); border-color: var(--lp-coral); transform: scale(1.3); box-shadow: 0 0 0 5px color-mix(in srgb, var(--lp-coral) 22%, transparent); }
@keyframes fx-err-blink { 50% { opacity: .25; } }
.fx-story-year { display: none; margin: 0 0 18px; text-align: center; font: 800 3.25rem/1 var(--fx-mono); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 55%, transparent); }
.fx-story-year.is-tick { animation: fx-year .45s var(--fx-ease); }
@keyframes fx-year { from { opacity: 0; transform: translateY(10px); } }

/* v211: kódy jako motiv – nadpisky částí landingu neproporcionálním písmem jako na typovém štítku */
.layout-landing .fx-kicker { font-family: var(--fx-mono); letter-spacing: .12em; font-weight: 800; }
/* v211: kótovací čára u gravírovaných štítků */
.fx-dim { position: absolute; left: 6%; right: 6%; bottom: -4px; display: flex; align-items: center; gap: 10px; height: 12px; border-left: 1px solid; border-right: 1px solid; color: color-mix(in srgb, var(--ink-2) 75%, transparent); }
.fx-dim::before, .fx-dim::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.fx-dim i { font: 700 .75rem/1 var(--fx-mono); font-style: normal; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
/* v211: tarify jako visačky – dírka, provázek, lehce pootočené; po najetí se srovnají */
.fx-plans { padding-top: 34px; }
.lp-plan.fx-plan { padding-top: 46px; }
.fx-plan:nth-child(odd) { rotate: -1deg; } .fx-plan:nth-child(even) { rotate: 1.2deg; }
.fx-plan { transition: transform .35s var(--fx-ease), box-shadow .35s, rotate .35s var(--fx-ease); }
.fx-plan:hover { rotate: 0deg; }
.fx-plan-hole { position: absolute; top: 16px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, .3); }
.fx-plan-hole::before { content: ""; position: absolute; left: 6px; bottom: 7px; width: 1.5px; height: 46px; background: color-mix(in srgb, var(--ink-2) 55%, transparent); border-radius: 1px; transform-origin: bottom; transform: rotate(4deg); }
.fx-plan:nth-child(even) .fx-plan-hole::before { transform: rotate(-5deg); }
@media (max-width: 720px) { .fx-plan:nth-child(odd), .fx-plan:nth-child(even) { rotate: 0deg; } .fx-plans { gap: 44px; } }
.fx-plans .fx-plan-flag { top: 40px; left: auto; right: -12px; rotate: 6deg; } /* v211: u visačky jako nálepka vpravo, ne přes provázek */

/* v213: živá ukázka nad přepínačem typů, postup ve třech krocích */
.fx-live-steps { list-style: none; counter-reset: fxl; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.fx-live-steps li { counter-increment: fxl; position: relative; padding-left: 36px; color: var(--ink-2); line-height: 1.45; }
.fx-live-steps li b { color: var(--ink); }
.fx-live-steps li::before { content: counter(fxl); position: absolute; left: 0; top: -1px; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-coral); color: #fff; font: 800 .8125rem/1 var(--fx-mono); }

/* ===== v215: typ Zavazadlo (štítek na kufr) ============================================================ */
:root { --teal: #0E8FA0; --teal-soft: #DDF2F4; --teal-ink: #0A6672; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --teal-soft: #12313A; --teal-ink: #7FD3DE; } }
:root[data-theme="dark"] { --teal-soft: #12313A; --teal-ink: #7FD3DE; }
.type-luggage { --tc: var(--teal); --tc-soft: var(--teal-soft); --tc-ink: var(--teal-ink); }
.c-teal { --c: var(--teal); --c-soft: var(--teal-soft); }
/* Úprava kódu */
.lg-choice { border: 0; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.lg-choice legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.lg-choice .check { margin-bottom: 8px; }
.lg-choice small, .lg-lost-switch small { display: block; color: var(--ink-2); font-weight: 500; }
.lg-private { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--ink-2); }
.lg-lost-card.is-lost { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.lg-lost-switch { margin-bottom: 14px; }
/* Veřejná stránka – jako letecká jmenovka */
.lg { position: relative; display: grid; gap: 18px; padding: 30px 22px 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-top: 8px solid var(--teal); }
.lg::before { content: ""; position: absolute; top: 12px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, .25); }
.lg.is-lost { border-top-color: var(--danger); }
.lg-alert { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--radius-l); background: var(--danger-bg); color: var(--danger); }
.lg-alert strong { font-size: 1.125rem; }
.lg-alert span { color: var(--ink); }
.lg-alert-note { margin: 0; padding: 8px 10px; border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: .9375rem; }
.lg-head { display: flex; gap: 14px; align-items: center; }
.lg-ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--teal-soft); color: var(--teal-ink); }
.lg-kicker { margin: 0; font: 800 .75rem/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); }
.lg-head h1 { margin: 2px 0 0; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.15; }
.lg-route { position: relative; padding: 16px; border-radius: var(--radius-l); background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--teal) 45%, var(--line)); display: grid; gap: 12px; }
.lg-dir { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--teal); color: #fff; font-weight: 800; font-size: .75rem; }
.lg-legs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.lg-arrow { padding-bottom: 2px; }
.lg-leg { display: grid; gap: 2px; min-width: 0; }
.lg-leg strong { font: 800 clamp(1rem, 4.4vw, 1.375rem)/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: manual; }
.lg-leg-to { text-align: right; }
.lg-arrow { color: var(--teal); }
.lg-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 10px; border-top: 1px solid var(--line); }
.lg-meta b { font-size: 1.0625rem; }
.lg-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; }
.lg-deliver { padding: 14px 16px; border-radius: var(--radius-l); border: 1px solid var(--line); display: grid; gap: 8px; }
.lg-deliver.is-lost { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); } /* v219: mimo ztrátu neutrálně */
.lg-deliver h2, .lg-form h2 { margin: 0; font-size: 1.0625rem; }
.lg-deliver p { margin: 0; }
.lg-contact { display: grid; gap: 8px; }
.lg-contact .btn { justify-content: flex-start; overflow-wrap: anywhere; white-space: normal; }
.lg-mail-line { margin: 0; color: var(--ink-2); }
.lg-note { margin: 0; padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface-2); }
.lg-form { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.lg-form p { margin: 0 0 8px; }
/* v215: obrazovka Zavazadlo na landingu (partials/fx-screens.php) */
.fx-sc-btn.c-teal { background: #0E8FA0; }
.fx-sc-route { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px dashed #9FD3DA; background: #F1F9FA; font: 800 1.25rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; color: #0A4E57; }
.fx-sc-route svg { width: 20px; height: 20px; color: #0E8FA0; }
.fx .fx-screen.is-on .fx-sc-route svg { animation: fx-fly 1.4s ease-in-out infinite; }
@keyframes fx-fly { 50% { transform: translateX(4px); } }

/* ===== v218: landing – vyzkoušení na telefonu, Co se stane, když…, srovnání s obyčejným QR ================ */
.fx-try { display: grid; gap: 14px; max-width: 520px; margin: 0 auto 36px; padding: 20px 18px; border: 1.5px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: var(--radius-l); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.fx-try h3 { margin: 0; font-size: 1.125rem; letter-spacing: -.01em; }
.fx-try .fx-live-kicker { margin: 0; }
.fx-try-fields { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }
.fx-try-fields .field { margin-bottom: 0; }
.fx-try-stage { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; justify-items: center; }
.fx-try-plate { position: relative; padding: 30px 10px 12px; border-radius: 18px; transform: rotate(-3deg); width: 120px; }
.fx-try-plate::before { top: 10px; width: 12px; height: 12px; margin-left: -6px; }
.fx-try-plate .qr-preview { padding: 6px; border-radius: 9px; color: #0E1A1E; }
.fx-try-plate .tag-code { margin-top: 6px; font-size: .6875rem; letter-spacing: .18em; padding-left: .18em; }
.fx-try-same { position: absolute; left: 50%; bottom: -30px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: var(--lp-mint); color: #fff; font-size: .6875rem; font-weight: 800; transform: translateX(-50%) rotate(3deg); }
.fx-try-same svg { width: 12px; height: 12px; }
.fx-try-same.is-pulse { animation: fx-try-pop .6s var(--fx-spring); }
@keyframes fx-try-pop { 40% { transform: translateX(-50%) rotate(3deg) scale(1.18); } }
.fx-try-phone { width: 200px; padding: 9px; border-radius: 32px; }
.fx-try-phone .fx-phone-notch { width: 58px; height: 16px; top: 9px; }
.fx-try-phone .fx-phone-screen { height: 290px; border-radius: 24px; font-size: .72rem; }
.fx-try-phone .fx-screen { padding: 30px 12px 12px; }
.fx-try-phone .fx-sc-head strong { overflow-wrap: anywhere; }
.fx-try-saved { position: absolute; left: 50%; bottom: 52px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 5px 10px; border-radius: 999px; background: #17232A; color: #fff; font-size: .6875rem; font-weight: 750; opacity: 0; transform: translate(-50%, 6px); pointer-events: none; }
.fx-try-saved svg { width: 12px; height: 12px; color: #6EE7B7; }
.fx-try-saved.is-pulse { animation: fx-try-toast 1.8s var(--fx-ease); }
@keyframes fx-try-toast { 12%, 78% { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 900px) and (hover: hover) { .fx-try { display: none; } }
@media (max-width: 400px) { .fx-try-fields { grid-template-columns: 1fr; } .fx-try-stage { grid-template-columns: 104px 1fr; gap: 10px; } .fx-try-plate { width: 104px; } .fx-try-phone { width: 180px; } }
/* Srovnání s obyčejným QR kódem */
.fx-compare { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fx-cmp { max-width: 860px; margin: 0 auto; }
.fx-cmp table { width: 100%; border-collapse: separate; border-spacing: 0; }
.fx-cmp th, .fx-cmp td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fx-cmp thead th { font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-bottom-width: 2px; }
.fx-cmp tbody th { font-weight: 700; width: 40%; }
.fx-cmp td { width: 30%; }
.fx-cmp td small { display: block; margin-top: 3px; color: var(--ink-2); font-size: .8125rem; }
.fx-cmp .is-ours { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.fx-cmp thead .is-ours { color: var(--brand); border-radius: 14px 14px 0 0; }
.fx-cmp tbody tr:last-child .is-ours { border-radius: 0 0 14px 14px; }
.fx-cmp-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; vertical-align: -6px; }
.fx-cmp-mark.is-yes { background: color-mix(in srgb, var(--lp-mint) 20%, var(--surface)); color: color-mix(in srgb, var(--lp-mint) 80%, var(--ink)); }
.fx-cmp-mark.is-no { background: var(--surface-2); color: var(--ink-2); }
.fx-cmp-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; color: var(--ink); }
@media (max-width: 640px) {
    .fx-cmp thead { position: absolute; left: -10000px; }
    .fx-cmp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .fx-cmp tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 8px; border: 0; }
    .fx-cmp td { width: auto; padding: 8px 10px; border: 0; border-radius: 12px; }
    .fx-cmp td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
    .fx-cmp td:not(.is-ours) { background: var(--surface-2); }
    .fx-cmp tbody tr:last-child .is-ours { border-radius: 12px; }
}
/* Co se stane, když… */
.fx-what-grid { display: grid; gap: 14px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.fx-what-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--fx-ease), box-shadow .3s; }
.fx-what-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgba(23, 35, 42, .45); }
.fx-what-card h3 { margin: 4px 0 0; font-size: 1.0625rem; letter-spacing: -.01em; }
.fx-what-card p { margin: 0; color: var(--ink-2); }
.fx-what-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--c-soft); color: var(--c); }
.fx-what-ico svg { width: 22px; height: 22px; }
.fx-what-card:hover .fx-what-ico { background: var(--c); color: #fff; }
/* v219: úprava zavazadla – místo, datum a let na jednom řádku */
.lg-leg-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; padding-top: 4px; }
.lg-leg-row + .lg-leg-row { border-top: 1px dashed var(--line); padding-top: 14px; }
.lg-opt-note { margin: -6px 0 14px; }
@media (max-width: 640px) { .lg-leg-row { grid-template-columns: 1fr 1fr; } .lg-leg-row > .field:first-child { grid-column: 1 / -1; } }
/* v220: úprava zavazadla – volba viditelnosti nad polem (jako v ostatních kartách) */
.lg-vis { display: grid; gap: 0; padding: 12px 14px 0; margin-bottom: 12px; border-radius: var(--radius-s); background: var(--surface-2); }
.lg-vis .check { margin-bottom: 10px; }
.lg-vis .check small { display: block; color: var(--ink-2); font-weight: 500; }
.lg-vis .field { margin-bottom: 14px; }
.lg-panel .sub-h { margin-top: 6px; }
/* v221: Uložit vpravo za Uložit a zavřít (v HTML je první kvůli Enteru) */
.head-actions .head-save { order: 2; }

/* v222: Uložit a zavřít po změně orámované zeleně (hlavní Uložit je plně zelené) */
.btn[data-save-alt].is-dirty { border-color: var(--brand); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.btn[data-save-alt].is-dirty:hover { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
/* v222: přepínač vzhledu v patičce stránky štítku, s popisem (Vzhled: Podle systému / Světlý / Tmavý) */
.theme-toggle-labeled .theme-toggle-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.public-footer .theme-toggle { min-height: 36px; font-size: .8125rem; font-weight: 600; }
.public-footer .theme-toggle svg { width: 18px; height: 18px; }

/* =====================================================================================
   v224: typ kódu Výrobek (barva copper) – úprava (díly a příslušenství v řádcích) a veřejná stránka
   ===================================================================================== */
:root { --copper: #C2662D; --copper-soft: #FBE8DA; --copper-ink: #8E4513; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --copper-soft: #3A2517; --copper-ink: #F2B07F; } }
:root[data-theme="dark"] { --copper-soft: #3A2517; --copper-ink: #F2B07F; }
.type-product { --tc: var(--copper); --tc-soft: var(--copper-soft); --tc-ink: var(--copper-ink); }
.c-copper { --c: var(--copper); --c-soft: var(--copper-soft); }

/* Úprava: jedna položka = rámeček s poli v mřížce */
.pr-rows { gap: 10px; }
.pr-row .field { margin: 0; min-width: 0; }
.pr-row .field > span { font-size: .75rem; }
.pr-row input, .pr-row select { width: 100%; min-width: 0; }
.pr-f-name { grid-column: 1 / 4; }
.pr-f-no { grid-column: 4 / 6; }
.pr-f-price { grid-column: 6 / 7; }
.pr-f-url { grid-column: 1 / 4; }
.pr-f-grp { grid-column: 4 / 6; }
.pr-f-pos { grid-column: 6 / 7; }
.pr-f-photo { grid-column: 1 / 5; }
.pr-f-link { grid-column: 5 / 7; }
.pr-f-note { grid-column: 1 / 7; }
.pr-row:not(:has(.pr-f-pos)) .pr-f-grp { grid-column: 4 / 7; }
.pr-row .field-error { margin: 4px 0 0; }
.pr-hint { margin: 10px 0 0; }
.pr-drawing.field { margin: 14px 0 0; }
.pr-paste { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pr-paste > summary { cursor: pointer; font-weight: 700; color: var(--brand); width: max-content; max-width: 100%; list-style: none; padding: 6px 0; min-height: 34px; }
.pr-paste > summary::-webkit-details-marker { display: none; }
.pr-paste > summary::before { content: "+ "; }
.pr-paste[open] > summary::before { content: "− "; }
.pr-paste > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.pr-paste textarea { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; }
.pr-panel .card-head .muted { white-space: nowrap; }

/* Veřejná stránka výrobku */
.pr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pr-head { display: flex; gap: 16px; align-items: center; }
.pr-photo { width: 96px; height: 96px; flex: none; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.pr-photo a, .pr-photo img { display: block; width: 100%; height: 100%; }
.pr-photo img { object-fit: cover; }
.pr-photo.is-empty { border-color: transparent; }
.pr-photo-ico { display: grid; place-items: center; width: 100%; height: 100%; color: var(--copper-ink); background: var(--copper-soft); }
.pr-photo-ico svg { width: 46%; height: 46%; }
.pr-title { min-width: 0; }
.pr-title h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.pr-kicker { margin: 0 0 4px; font-size: .8125rem; font-weight: 700; color: var(--copper-ink); overflow-wrap: anywhere; }
.pr-desc { margin: 0; }
.pr-desc > :first-child { margin-top: 0; }
.pr-desc > :last-child { margin-bottom: 0; }
.pr-parents { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: .875rem; }
.pr-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border-radius: 999px; background: var(--copper-soft); color: var(--copper-ink); font-weight: 700; text-decoration: none; }
.pr-chip:hover { text-decoration: underline; }
.pr-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pr-jump.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-jump a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .875rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pr-jump a:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--copper) 45%, var(--line)); }
.pr-jump a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pr-jump svg { width: 20px; height: 20px; flex: none; color: var(--copper-ink); }
.pr-jump span { flex: 1; min-width: 0; overflow-wrap: break-word; }
.pr-jump b { flex: none; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--copper-soft); color: var(--copper-ink); font-size: .75rem; text-align: center; }
.pr-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.pr-sec-head h2 { margin: 0; }
.pr-drawing { margin: 0 0 12px; }
.pr-drawing a { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.pr-drawing img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.pr-drawing figcaption { margin-top: 6px; }
.pr-search { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.pr-search[hidden] { display: none; }
.pr-search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.pr-search svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.pr-search input { flex: 1; min-width: 0; min-height: 42px; border: 0; background: transparent; padding: 0; box-shadow: none; outline: none; }
.pr-grp { margin: 14px 0 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.pr-group:first-of-type .pr-grp, .pr-search + .pr-group .pr-grp, .pr-drawing + .pr-group .pr-grp { margin-top: 4px; }
.pr-group[hidden], .pr-item[hidden] { display: none; }
.pr-list { list-style: none; margin: 0; padding: 0; }
.pr-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) 96px; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pr-group:last-of-type .pr-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.pr-thumb { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--copper-soft); color: var(--copper-ink); }
.pr-thumb a, .pr-thumb img { display: block; width: 100%; height: 100%; }
.pr-thumb img { object-fit: cover; background: #fff; }
.pr-thumb svg { width: 24px; height: 24px; }
.pr-body { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
.pr-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.pr-name a { font-weight: 700; }
.pr-pos { flex: none; min-width: 26px; padding: 0 6px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: .75rem; line-height: 1.5; text-align: center; }
.pr-meta { display: grid; justify-items: start; gap: 1px; font-size: .8125rem; }
.pr-no { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pr-no-val { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; overflow-wrap: anywhere; }
.pr-copy { display: inline-grid; place-items: center; width: 34px; height: 34px; margin: -8px 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .2s ease, color .2s ease; }
.pr-copy[hidden] { display: none; }
.pr-copy svg { width: 16px; height: 16px; }
.pr-copy:hover { background: var(--surface-2); color: var(--ink); }
.pr-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.pr-copy.is-done { color: var(--ok-ink); }
.pr-note { overflow-wrap: anywhere; }
.pr-act { display: flex; justify-content: stretch; padding-top: 7px; }
.pr-price { font-size: .9375rem; font-weight: 800; white-space: nowrap; color: var(--ink); }
.pr-buy { width: 100%; min-height: 34px; justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.pr-buy svg { width: 16px; height: 16px; margin-right: 6px; flex: none; }
.pr-empty { margin: 8px 0 0; }
.pr-empty[hidden] { display: none; }
@media (max-width: 420px) {
    .pr-item { grid-template-columns: 40px minmax(0, 1fr) 88px; gap: 10px; }
    .pr-thumb { width: 40px; height: 40px; border-radius: 10px; }
    .pr-act { padding-top: 3px; }
    .pr-photo { width: 80px; height: 80px; border-radius: 18px; }
    .pr-title h1 { font-size: 1.3rem; }
    .pr-jump a { position: relative; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
    .pr-jump span { flex: none; }
    .pr-jump b { position: absolute; top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pr-jump a { transition: none; } .pr-jump a:hover { transform: none; } }
/* v224: řádek dílu sbalený na souhrn */
details.multi-row.pr-row { display: block; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.pr-sum { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 40px 8px 12px; cursor: pointer; list-style: none; position: relative; border-radius: inherit; }
.pr-sum::-webkit-details-marker { display: none; }
.pr-sum::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s ease; }
.pr-row[open] > .pr-sum::after { transform: rotate(-135deg); margin-top: -2px; }
.pr-sum:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.pr-sum:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pr-sum-pos { flex: none; min-width: 24px; padding: 0 6px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: .75rem; line-height: 1.5; text-align: center; }
.pr-sum-pos[hidden] { display: none; }
.pr-sum-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-sum-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-sum-tag { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--copper-soft); color: var(--copper-ink); font-weight: 700; }
.pr-sum-err { flex: none; color: var(--danger); font-weight: 700; }
.pr-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 10px; padding: 4px 12px 12px; }
.pr-row-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.pr-row:first-child .pr-row-actions [data-pr-up] { display: none; }
@media (max-width: 640px) {
    .pr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 10px 10px; }
    .pr-fields .pr-f-name, .pr-fields .pr-f-url, .pr-fields .pr-f-note { grid-column: 1 / 3 !important; }
    .pr-fields .pr-f-no, .pr-fields .pr-f-grp { grid-column: 1 / 2 !important; }
    .pr-fields .pr-f-price, .pr-fields .pr-f-pos { grid-column: 2 / 3 !important; }
    .pr-fields:not(:has(.pr-f-pos)) .pr-f-grp, .pr-fields .pr-f-photo, .pr-fields .pr-f-link { grid-column: 1 / 3 !important; }
    .pr-sum-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pr-sum::after { transition: none; } }
.fx-sc-btn.c-copper { background: #C2662D; } /* v224: obrazovka Výrobek na landingu */
/* v227: souhrn řádku dílu nesmí roztáhnout okno (položka mřížky má jinak min-width podle textu na jednom řádku) */
.pr-rows { grid-template-columns: minmax(0, 1fr); }
.pr-rows > .pr-row { min-width: 0; }
.pr-sum { min-width: 0; }
.pr-sum-name { flex: 0 1 auto; }
/* v228: fotka položky v řádku (náhled, Nahrát fotku, výběr z nahraných) */
.pr-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr-pick-img { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: var(--copper-soft); border: 1px solid var(--line); }
.pr-pick-img:empty::before { content: ""; width: 22px; height: 22px; border: 2px dashed color-mix(in srgb, var(--copper-ink) 55%, transparent); border-radius: 6px; }
.pr-pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-pick-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-pick-body select { flex: 1 1 160px; min-width: 0; width: auto; }
.pr-pick-up { flex: none; cursor: pointer; }
.pr-pick-up:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.pr-f-photo > small { display: block; margin-top: 4px; }
/* v229: úprava výrobku – miniatura v souhrnu řádku místo štítků, rozkres nad seznamem */
.pr-sum-img { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; overflow: hidden; background: var(--copper-soft); }
.pr-sum-img:empty::before { content: ""; width: 10px; height: 10px; border: 1.5px dashed color-mix(in srgb, var(--copper-ink) 55%, transparent); border-radius: 3px; }
.pr-sum-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-sum { padding-top: 7px; padding-bottom: 7px; }
.pr-panel > .pr-drawing { margin: 0 0 14px; }
.pr-f-photo > small[hidden], .pr-drawing > small[hidden] { display: none; }
.pr-drawing > small { display: block; margin-top: 4px; }
@media (max-width: 640px) {
    .pr-pick { align-items: flex-start; }
    .pr-pick-body { flex-direction: column; align-items: stretch; gap: 6px; }
    .pr-pick-body select { flex: none; width: 100%; }
    .pr-pick-up { justify-content: center; }
}
/* v230: pole fotky – náhled, Nahrát fotku a výběr stejně vysoké a se stejným zaoblením jako ostatní pole */
.pr-pick-img { width: 47px; height: 47px; border-radius: 8px; }
.pr-pick-up { min-height: 47px; padding-left: 16px; padding-right: 16px; border-radius: 8px; display: inline-flex; align-items: center; }
.pr-pick-body select { height: 47px; }
/* v230: tlačítko křížku vedle pole (vizitka: telefony, e-maily…; parametry nemovitosti) stejně vysoké jako pole; datum bez 2 px navíc */
.multi-row > .icon-btn[data-multi-remove] { width: 47px; height: 47px; min-width: 47px; min-height: 47px; border-radius: 8px; }
.specs-head, .specs-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 47px; }
.specs-row > .icon-btn { width: 47px; height: 47px; min-width: 0; border-radius: 8px; }
@media (max-width: 480px) {
    .specs-row { grid-template-columns: minmax(0, 1fr) 34px; }
    .specs-row > .icon-btn { width: 34px; height: 34px; }
}
input[type="date"], input[type="time"], input[type="datetime-local"] { height: calc(1.55em + 20px + 2px); }
/* v232: nápověda pod Uložit do kontaktů */
.vcard-save-hint { margin: 8px 0 0; text-align: center; }
/* v235: karty (typy kódů) v tarifu a u účtu */
.uf-cards { display: grid; gap: 10px 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .uf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .uf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uf-cards .field { margin: 0; min-width: 0; }
.uf-cards .button-row { grid-column: 1 / -1; }
.plan-cards .check-grid { margin-top: 4px; }
.type-option-body strong .admin-tag { display: inline-flex; margin: 0 0 0 6px; color: #fff; font-size: .6875rem; line-height: 1.5; vertical-align: 2px; }
.type-missing { margin: 12px 0 0; }
.plan-nocards { display: block; }
.uf-cards + .uf-help { margin: 10px 0 8px !important; }
/* v236: zarovnání seznamů údajů. Krátký řádek: popisek vlevo, hodnota vpravo. Dlouhý (kv_cls → .kv-stack): pod sebou,
   hodnota doleva. Když se řádek nevejde (větší písmo), hodnota spadne pod popisek a víceřádková je zarovnaná doleva,
   popisek se nemačká. */
.kv div, .usage div:not(.usage-bar), .lbl-sum:not(.lbl-sum-wide) div { flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 2px; }
.kv dt, .usage dt, .lbl-sum:not(.lbl-sum-wide) dt { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.kv dd, .usage dd, .lbl-sum:not(.lbl-sum-wide) dd { flex: 0 1 auto; max-width: 100%; min-width: 0; margin-left: auto; text-align: left; overflow-wrap: break-word; }
.kv div.kv-stack { display: block; }
.kv-stack dd { margin: 3px 0 0; text-wrap: pretty; }
.kv dd a { overflow-wrap: anywhere; }
/* v236: tlačítka kontaktu (e-mail, web) se zalomí, nepřetečou z okna */
.job-firm-actions .btn { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
/* v236: kontejnerové dotazy pro řádky kv-nX (helpers.php kv_cls): řádek je pod sebou, když je seznam užší než X em */
.kv { container-type: inline-size; }
@container (max-width: 10em) { .kv .kv-n10 { display: block; } .kv .kv-n10 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 11em) { .kv .kv-n11 { display: block; } .kv .kv-n11 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 12em) { .kv .kv-n12 { display: block; } .kv .kv-n12 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 13em) { .kv .kv-n13 { display: block; } .kv .kv-n13 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 14em) { .kv .kv-n14 { display: block; } .kv .kv-n14 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 15em) { .kv .kv-n15 { display: block; } .kv .kv-n15 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 16em) { .kv .kv-n16 { display: block; } .kv .kv-n16 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 17em) { .kv .kv-n17 { display: block; } .kv .kv-n17 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 18em) { .kv .kv-n18 { display: block; } .kv .kv-n18 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 19em) { .kv .kv-n19 { display: block; } .kv .kv-n19 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 20em) { .kv .kv-n20 { display: block; } .kv .kv-n20 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 21em) { .kv .kv-n21 { display: block; } .kv .kv-n21 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 22em) { .kv .kv-n22 { display: block; } .kv .kv-n22 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 23em) { .kv .kv-n23 { display: block; } .kv .kv-n23 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 24em) { .kv .kv-n24 { display: block; } .kv .kv-n24 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 25em) { .kv .kv-n25 { display: block; } .kv .kv-n25 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 26em) { .kv .kv-n26 { display: block; } .kv .kv-n26 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 27em) { .kv .kv-n27 { display: block; } .kv .kv-n27 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 28em) { .kv .kv-n28 { display: block; } .kv .kv-n28 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 29em) { .kv .kv-n29 { display: block; } .kv .kv-n29 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 30em) { .kv .kv-n30 { display: block; } .kv .kv-n30 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 31em) { .kv .kv-n31 { display: block; } .kv .kv-n31 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 32em) { .kv .kv-n32 { display: block; } .kv .kv-n32 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 33em) { .kv .kv-n33 { display: block; } .kv .kv-n33 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 34em) { .kv .kv-n34 { display: block; } .kv .kv-n34 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 35em) { .kv .kv-n35 { display: block; } .kv .kv-n35 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 36em) { .kv .kv-n36 { display: block; } .kv .kv-n36 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 37em) { .kv .kv-n37 { display: block; } .kv .kv-n37 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 38em) { .kv .kv-n38 { display: block; } .kv .kv-n38 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 39em) { .kv .kv-n39 { display: block; } .kv .kv-n39 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 40em) { .kv .kv-n40 { display: block; } .kv .kv-n40 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 41em) { .kv .kv-n41 { display: block; } .kv .kv-n41 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 42em) { .kv .kv-n42 { display: block; } .kv .kv-n42 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 43em) { .kv .kv-n43 { display: block; } .kv .kv-n43 dd { margin: 3px 0 0; text-wrap: pretty; } }
@container (max-width: 44em) { .kv .kv-n44 { display: block; } .kv .kv-n44 dd { margin: 3px 0 0; text-wrap: pretty; } }
/* v236: zavazadlo – Odkud a Kam zarovnané nahoru (u víceřádkového cíle nesedí Odkud dole), šipka u prvního řádku */
.lg-legs { align-items: start; }
.lg-arrow { padding-bottom: 0; align-self: start; margin-top: calc(1.29rem + (1.2 * clamp(1rem, 4.4vw, 1.375rem) - 28px) / 2); }
/* v236: sloupec Účtu se nerozšíří podle nejširšího prvku (větší písmo v telefonu přetékalo o pár px) */
.account-main, .account-side { grid-template-columns: minmax(0, 1fr); }
/* v236: skrytá tabulka pro čtečky (graf v Přehledu) – tabulka ignoruje overflow, jako blok nepřetéká */
table.visually-hidden { display: block; }
/* v236: Stav služby – krátká hodnota vpravo, dlouhá zalomená zarovnaná doleva (blok zůstává u pravého okraje) */
@media (min-width: 601px) { .health-value { text-align: left; justify-self: end; max-width: min(60vw, 32em); } }
/* v237 → v238: Správa → Karty jako tabulka zaškrtávátek (karta × tarif), výjimky účtů pod kartou */
.ct-matrix { padding: 0; overflow: hidden; }
.ct-grid { display: grid; }
.ct-row { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(var(--ct-cols, 5), minmax(64px, 1fr)); align-items: center; column-gap: 8px; padding: 10px var(--panel-pad); }
.ct-grid[data-cols="1"] { --ct-cols: 1; } .ct-grid[data-cols="2"] { --ct-cols: 2; } .ct-grid[data-cols="3"] { --ct-cols: 3; }
.ct-grid[data-cols="4"] { --ct-cols: 4; } .ct-grid[data-cols="5"] { --ct-cols: 5; } .ct-grid[data-cols="6"] { --ct-cols: 6; }
.ct-grid[data-cols="7"] { --ct-cols: 7; } .ct-grid[data-cols="8"] { --ct-cols: 8; } .ct-grid[data-cols="9"] { --ct-cols: 9; } .ct-grid[data-cols="10"] { --ct-cols: 10; }
.ct-head { background: var(--surface-2); font-size: .8125rem; font-weight: 700; color: var(--ink-2); padding-top: 12px; padding-bottom: 12px; }
.ct-plan-h { text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
.ct-plan-h small { display: block; font-weight: 600; font-size: .6875rem; }
.ct-item { border-top: 1px solid var(--line); }
.ct-item:target { background: var(--brand-soft); }
.ct-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct-name-text { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ct-nobody { flex-basis: 100%; color: var(--ink-2); }
.card-type-ico { flex: none; display: inline-grid; place-items: center; color: var(--tc-ink, var(--ink-2)); }
.card-type-ico svg { width: 20px; height: 20px; }
.ct-cell { position: relative; justify-content: center; align-items: center; gap: 8px; margin: 0; min-height: 34px; }
.ct-cell input { margin: 0; }
.ct-cell .ct-plan-m { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-acc { padding: 0 var(--panel-pad) 10px calc(var(--panel-pad) + 30px); }
.ct-acc > summary { cursor: pointer; width: max-content; font-size: .875rem; font-weight: 650; color: var(--brand); list-style: none; }
.ct-acc > summary::-webkit-details-marker { display: none; }
.ct-acc > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.ct-acc[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.ct-acc > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct-acc-body { margin-top: 10px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius); display: grid; gap: 12px; }
.ct-acc-list { display: grid; gap: 6px; }
.ct-acc-list .check { margin: 0; }
.ct-acc-h { font-size: .8125rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.ct-acc-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.ct-acc-add .field { margin: 0; }
.ct-acc-body > p { margin: 0; }
.ct-save { padding: 14px var(--panel-pad); border-top: 1px solid var(--line); margin: 0; }
.card-types-help { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .ct-acc > summary::after { transition: none; } }
/* telefon: karta nahoře, tarify jako zaškrtávátka s názvem pod ní */
@media (max-width: 699px) {
    .ct-head { display: none; }
    .ct-item:first-child { border-top: 0; }
    .ct-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; padding-top: 14px; }
    .ct-row > .ct-name { grid-column: 1 / -1; margin-bottom: 4px; }
    .ct-cell { justify-content: flex-start; }
    .ct-cell .ct-plan-m { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
    .ct-acc { padding-left: var(--panel-pad); }
    .ct-acc-add { grid-template-columns: minmax(0, 1fr); }
}
/* v239: zamčený formulář (data-lockform) – prohlížení, Upravit odemkne, změny zvýrazněné do uložení */
.lockform fieldset[data-lock-fields] { border: 0; margin: 0; padding: 0; min-width: 0; }
.lockform fieldset[data-lock-fields]:disabled .check { cursor: default; }
.lockform fieldset[data-lock-fields]:disabled input[type="checkbox"], .lockform fieldset[data-lock-fields]:disabled input[type="radio"] { opacity: 1; filter: grayscale(.35); }
.ct-matrix:not(.is-unlocked) .ct-acc-body { gap: 8px; }
/* v239: tarif a karty u uživatele ve Správě – vidět rovnou, zamčené */
.user-plan, .lock-panel { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.user-plan-head, .lock-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.user-plan-head h3, .lock-panel-head h3 { font-size: .8125rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 0; }
.user-plan-head .button-row { margin: 0; }
.user-plan .uf-row { margin: 0; }
.user-plan .uf-row-note { display: block; margin-top: 4px; }
.user-cards { margin-top: 12px; display: grid; gap: 6px; }
.user-cards-h { font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.user-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 12px; }
.user-cards-grid .check { margin: 0; padding: 4px 6px; align-items: center; gap: 10px; }
.user-cards-grid .check input { margin: 0; }
.user-cards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.user-cards-reset { font-size: .8125rem; }
.user-mods { padding-top: 12px; border-top: 1px dashed var(--line-strong); }
/* v240 → v241: decentní označení v zamčeném formuláři. Neuložená změna = jantarová tečka v rohu zaškrtávátka
   (u pole jantarový okraj), karta jinak než tarif = malá červená tečka za názvem (vysvětlení v title). */
.lockform .check.is-changed, .lockmarks .check.is-changed { position: relative; }
.lockform .check.is-changed::after, .lockmarks .check.is-changed::after { content: ""; position: absolute; left: 15px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.user-plan .check.is-changed::after, .lock-panel .check.is-changed::after { box-shadow: 0 0 0 2px var(--surface-2); }
.lockform .ct-cell.is-changed::after { left: calc(50% + 5px); top: 4px; }
.lockform .field.is-changed :is(input, select, textarea), .lockmarks .field.is-changed :is(input, select, textarea) { border-color: var(--amber); }
.ex-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-left: 7px; vertical-align: 2px; flex: none; }
.ex-dot[hidden] { display: none; }
.lock-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 6px 0 4px; }
.lock-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lock-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lock-legend .lg-ex { background: var(--danger); }
.lock-legend .lg-ch { background: var(--amber); }
@media (max-width: 699px) { .lockform .ct-cell.is-changed::after { left: 15px; top: 5px; } }
.user-cards-grid .check.is-changed::after { left: 21px; top: 2px; }
/* v242: jednotná tlačítka zamčeného formuláře (partials/lock-actions.php) */
.edit-actions { margin: 0; flex-wrap: nowrap; }
.ct-matrix > .ct-head-bar { padding: var(--panel-pad) var(--panel-pad) 0; }
/* v242: Lidé – role a skupiny člena v panelu pod jménem (lock-panel), Odebrat vpravo */
.member-access { flex-basis: 100%; order: 3; grid-column: 1 / -1; margin-top: 4px; }
.member-access .member-role { max-width: 280px; margin-bottom: 10px; }
.member-access .tag-checks { margin-top: 4px; }
.lock-panel fieldset[data-lock-fields] > :last-child { margin-bottom: 0; }
.revize-settings-card fieldset[data-lock-fields] { display: grid; gap: 12px; }
.revize-settings-card fieldset > p, .revize-settings-card .field { margin: 0; }
/* v242: řádek skupiny – pole v zamčeném fieldsetu se dál skládají do mřížky řádku */
.tag-admin-fields { display: contents; }
.tag-admin-row > .edit-actions { justify-self: end; }
/* v242: tarif ve Správě – nastavení vidět rovnou (lock-panel), Výchozí / Smazat pod ním */
.plan-form-panel .plan-form { margin: 0; }
.plan-extra { margin: 10px 0 0; }
.plan-extra:empty { display: none; }
.lockform :is(input, select, textarea).is-changed { border-color: var(--amber); }
.pay-row { align-items: flex-end; gap: 10px; margin: 0 0 6px; }
.pay-row .uf-date-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.pay-row .uf-date-set .field { margin: 0; }
.pay-quick { margin: 0; }
/* v242: zamčený formulář vypadá stejně jako prohlížení kódu (.edit-lock): pole šedě podložená, text čitelný */
.lockform fieldset[data-lock-fields]:disabled :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    background: var(--surface-2); color: var(--ink); border-color: var(--line); cursor: default; opacity: 1; -webkit-text-fill-color: var(--ink);
}
.lock-panel fieldset[data-lock-fields]:disabled :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.user-plan fieldset[data-lock-fields]:disabled :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { background: transparent; }
.pay-row { display: flex; flex-wrap: wrap; }
/* v243: výrobek – rozkres jen po Přidat rozkres (nebo když je nahraný), vysvětlení pod polem */
.pr-drawing-add { margin: 0 0 14px; }
.pr-drawing-add[open] > summary { margin-bottom: 10px; }
.pr-drawing-hint { margin: 6px 0 14px; }
.pr-drawing-add .pr-drawing-hint { margin-bottom: 0; }
/* v243: skupiny na telefonu – Upravit / Zrušit / Uložit na vlastním řádku vpravo, ne vedle hesla */
@media (max-width: 899px) { .tag-admin-row > .edit-actions { grid-column: 1 / -1; } .tag-admin-row .tag-pw { grid-column: 1 / -1; } }
/* v243: panely uživatele (tarif, karty, předplatné, údaje) – otevřené u hledaného uživatele, jinak po klepnutí */
.user-panels[open] { display: block; margin-bottom: 10px; }
.user-panels[open] > summary { margin-bottom: 0; }
/* v244: nápis typu kódu v barvě typu u všech karet (dřív chybělo Zavazadlo, Výrobek a Wi-Fi); nový typ stačí doplnit o --tc-ink */
.code-type[class*="type-"]:not(.type-none) { color: var(--tc-ink, var(--ink-2)); font-weight: 650; }
.type-luggage .tp-chip { color: var(--tc-ink); background: var(--tc-soft); }
/* v245: šablona – výběr, co uložit (okna formuláře, po rozbalení pole), a soubory, které se při uložení kódu zkopírují */
.tpl-pick { display: grid; gap: 2px; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s, 10px); background: var(--surface-2); }
.tpl-pick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.tpl-pick .check { margin: 0; font-weight: 600; min-width: 0; }
.tpl-pick .check span { min-width: 0; overflow-wrap: anywhere; }
.tpl-pick .check small { font-weight: 400; }
.tpl-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.tpl-sec:first-of-type .tpl-sec-head { border-top: 0; }
.tpl-sec-head [data-pick-toggle] { flex: none; white-space: nowrap; }
.tpl-sec-head [data-pick-toggle]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 2px 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.tpl-sec-head [data-pick-toggle][aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); margin-bottom: -3px; }
.tpl-sec-items { list-style: none; margin: 0 0 8px; padding: 0 0 0 32px; display: grid; gap: 8px; }
.tpl-sec-items .check { font-weight: 500; }
.tpl-pending { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-s, 10px); background: var(--surface-2); }
.tpl-pending[hidden] { display: none; }
/* v247: šablona Co uložit – celý řádek okna rozbaluje, zaškrtávátko vlevo s větší plochou pro prst */
.tpl-sec + .tpl-sec { border-top: 1px solid var(--line); }
.tpl-sec .tpl-sec-head { gap: 4px; margin: 2px -8px; padding: 0 8px 0 0; border: 0; border-radius: 8px; cursor: pointer; }
@media (hover: hover) { .tpl-sec-head:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } }
.tpl-sec-box { display: flex; align-items: center; padding: 8px 4px 8px 8px; cursor: pointer; flex: none; }
.tpl-sec-box input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
.tpl-sec-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
/* v248: filtr Typ a Skupiny – okno podle obsahu (ne jen šířka tlačítka), u pravého filtru k pravému okraji (app.js),
   počty v jednom sloupci u prvního řádku názvu, Použít a Zrušit výběr na řádku, Upravit skupiny samostatně pod nimi */
.filters .filter-drop .filter-menu { left: 0; right: auto; width: max-content; min-width: max(100%, 260px); max-width: min(360px, calc(100vw - 32px)); }
.filters .filter-drop .filter-menu.is-right { left: auto; right: 0; }
.filter-opt { align-items: flex-start; }
.filter-opt input { margin-top: 2px; }
.filter-opt .code-type-dot { margin-top: 5px; }
.filter-opt .tag-dot { margin-top: 4px; }
.filter-opt-name, .filter-n { line-height: 22px; }
.filter-n { flex: none; min-width: 2ch; text-align: right; }
/* v249: Použít přes celou šířku, pod ním Zrušit výběr vlevo a Upravit skupiny vpravo */
.filter-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; padding: 10px 4px 2px; }
.filter-actions > .btn { grid-column: 1 / -1; width: 100%; justify-content: center; min-height: 40px; }
.filter-actions [data-filter-clear] { justify-self: start; padding: 6px 0; }
.filter-actions .filter-manage { justify-self: end; margin: 0; padding: 6px 0; color: var(--brand); text-decoration: underline; text-underline-offset: .18em; font-weight: 650; border-radius: 0; }
.filter-actions .filter-manage:hover { background: none; }

/* v252: hlavní fotka a soubory hned pod hlavním oknem typu, jako je fotka na kartě nahoře: Výrobek (před díly a kontaktem)
   i karta zařízení, majetku a zakázky (před majitelem, revizemi a technickými údaji; nemovitost už od v184) */
.edit-lock:has(> #vyrobek:not([hidden])) > #files-list,
.edit-lock:has(> #asset:not([hidden])) > #files-list { order: 3; }

/* v263: generátor statických QR kódů (/generator-qr, templates/generator.php + js/qr-generator.js).
   Rozložení jako poptávka štítků (lbl-*), upozornění barvami ostatních upozornění (--warn-*) */
.gen-hero .lp-sub { margin-bottom: 24px; }
.gen-warn { display: flex; gap: 14px; align-items: flex-start; max-width: 860px; margin: 0 auto; background: var(--warn-bg); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn-ink) 25%, transparent); }
.gen-warn-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--warn-ink) 14%, transparent); }
.gen-warn h2 { font-size: 1.0625rem; margin: 6px 0 8px; color: inherit; line-height: 1.35; }
.gen-warn ul { margin: 0 0 10px; padding-left: 1.15em; display: grid; gap: 4px; line-height: 1.45; }
.gen-warn p { margin: 0; line-height: 1.45; }
.gen-warn a { color: inherit; font-weight: 700; }
@media (max-width: 520px) { .gen-warn { flex-direction: column; gap: 6px; } .gen-warn h2 { margin-top: 0; } }
.gen-color { display: flex; gap: 8px; align-items: stretch; }
.gen-color input[type="color"] { flex: none; width: 54px; min-height: 46px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; }
.gen-color input[type="text"] { font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: lowercase; min-width: 0; }
.lbl-group .field-title { margin-top: 2px; }
.gen-stage { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 18px 18px; }
.gen-qr { width: 100%; max-width: 260px; aspect-ratio: 1; box-shadow: 0 8px 22px rgba(23,35,42,.16); transition: opacity .2s; }
.gen-qr svg { display: block; width: 100%; height: 100%; }
.gen-qr.is-empty { opacity: .28; filter: grayscale(1); }
.gen-msgs { display: grid; gap: 8px; margin: 0 0 10px; }
.gen-msgs:empty { display: none; }
.gen-msgs p { margin: 0; }
.gen-actions { margin: 0 0 10px; }
.gen-actions .btn { flex: 1 1 auto; justify-content: center; }
.gen-upsell { margin-top: 16px; }
.gen-upsell p { margin: 6px 0 12px; }
.fx-cmp-more { margin: 24px auto 0; font-size: 1rem; }
.fx-cmp-more a { font-weight: 700; }
/* v265: v menu přibyl Generátor QR – užší mezery mezi položkami, ať se menu správce vejde vedle loga i na 1061 px */
@media (min-width: 1061px) { .nav a, .nav-logout button { padding: 0 8px; } }
@media (min-width: 1061px) and (max-width: 1199px) { .nav a, .nav-logout button { padding: 0 6px; } .nav-logout { margin-left: 4px; } }
/* v265: v aplikaci upozornění generátoru přes celou šířku obsahu a s mezerou nad okny (na webu je vystředěné) */
.main .gen-warn { max-width: none; margin: 0 0 var(--panel-gap, 16px); }
.gen-app > .lbl-form > .lbl-group, .gen-app .lbl-aside > .card { margin-bottom: 0; }