/* BIZUB Docházka -- navy + amber from the BIZUB logo, cool light ground, blue actions. */
:root {
  color-scheme: light;
  --ground: #eef2f7;
  --panel: #ffffff;
  --panel-2: #f5f7fb;
  --line: #d9e0ea;
  --line-soft: #e8edf4;
  --ink: #0f1b2d;
  --ink-2: #44526a;
  --ink-3: #5d6a82;
  --navy: #0b1f3f;
  --navy-2: #13305e;
  --primary: #1463b5;
  --primary-ink: #ffffff;
  --primary-soft: rgba(20, 99, 181, 0.12);
  --amber: #ffb21e;
  --amber-deep: #e8890c;
  --hivis: #ffb21e;
  --hivis-soft: rgba(255, 178, 30, 0.2);
  --bar: #2a78d6;
  --in: #16924f;
  --in-soft: rgba(22, 146, 79, 0.12);
  --out: #647186;
  --out-soft: rgba(100, 113, 134, 0.13);
  --miss: #d13d39;
  --miss-soft: rgba(209, 61, 57, 0.1);
  --abs: #6d4fcf;
  --abs-soft: rgba(109, 79, 207, 0.12);
  --shadow: 0 1px 2px rgba(11, 31, 63, 0.06), 0 10px 28px -14px rgba(11, 31, 63, 0.25);
  --radius: 16px;
  --brand: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not(:where([data-theme="light"])) { color-scheme: dark;
    --ground: #0a1424;
    --panel: #111e33;
    --panel-2: #16253d;
    --line: #243552;
    --line-soft: #1b2b45;
    --ink: #edf2fa;
    --ink-2: #b3c0d6;
    --ink-3: #8393ad;
    --navy: #07111f;
    --navy-2: #102340;
    --primary: #5b9cf0;
    --primary-ink: #06101f;
    --primary-soft: rgba(91, 156, 240, 0.16);
    --amber: #ffbd3d;
    --amber-deep: #f0a020;
    --hivis: #ffbd3d;
    --hivis-soft: rgba(255, 189, 61, 0.14);
    --bar: #3987e5;
    --in: #3ccf7f;
    --in-soft: rgba(60, 207, 127, 0.14);
    --out: #97a5bb;
    --out-soft: rgba(151, 165, 187, 0.14);
    --miss: #ff6b66;
    --miss-soft: rgba(255, 107, 102, 0.13);
    --abs: #a58cf2;
    --abs-soft: rgba(165, 140, 242, 0.15);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.7); }
}
:root:where([data-theme="dark"]) { color-scheme: dark;
    --ground: #0a1424;
    --panel: #111e33;
    --panel-2: #16253d;
    --line: #243552;
    --line-soft: #1b2b45;
    --ink: #edf2fa;
    --ink-2: #b3c0d6;
    --ink-3: #8393ad;
    --navy: #07111f;
    --navy-2: #102340;
    --primary: #5b9cf0;
    --primary-ink: #06101f;
    --primary-soft: rgba(91, 156, 240, 0.16);
    --amber: #ffbd3d;
    --amber-deep: #f0a020;
    --hivis: #ffbd3d;
    --hivis-soft: rgba(255, 189, 61, 0.14);
    --bar: #3987e5;
    --in: #3ccf7f;
    --in-soft: rgba(60, 207, 127, 0.14);
    --out: #97a5bb;
    --out-soft: rgba(151, 165, 187, 0.14);
    --miss: #ff6b66;
    --miss-soft: rgba(255, 107, 102, 0.13);
    --abs: #a58cf2;
    --abs-soft: rgba(165, 140, 242, 0.15);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.7); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 40; background: var(--navy); color: #fff; box-shadow: 0 6px 24px -12px rgba(11, 31, 63, 0.6); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--amber), var(--amber-deep) 40%, var(--primary)); }
.top-in { max-width: 1440px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 22px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: none; line-height: 1; }
.brand-word { font-family: var(--brand); font-weight: 800; font-size: 1.65rem; letter-spacing: -0.01em; color: var(--amber); text-shadow: 0 2px 0 #06142b, 0 3px 10px rgba(255, 178, 30, 0.25); }
.brand-sub { display: inline-block; margin-left: 2px; padding: 3px 7px 2px; border-radius: 6px; background: var(--primary); color: #fff; font-family: var(--body); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: var(--navy); display: grid; place-items: center; font-size: 0.95rem; font-weight: 800; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.nav a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: #c3cfe4; font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.nav a:hover { background: var(--navy-2); color: #fff; }
.nav a.on { background: var(--amber); color: var(--navy); }
.top-right { display: flex; align-items: center; gap: 12px; flex: none; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #9fb0cc; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #3ccf7f; box-shadow: 0 0 0 0 #3ccf7f; animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 7px transparent; } }
.who { font-size: 0.85rem; color: #c3cfe4; }
.top .btn-ghost { color: #c3cfe4; }
.top .btn-ghost:hover { background: var(--navy-2); color: #fff; }
@media (max-width: 860px) {
  .top-in { flex-wrap: wrap; height: auto; padding: 10px 16px 0; gap: 8px 12px; }
  .nav { order: 3; flex-basis: 100%; padding-bottom: 10px; }
  .who, .live span { display: none; }
}

/* ---------- layout ---------- */
.page { max-width: 1440px; margin: 0 auto; padding: 24px 20px 60px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.page-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.page-head p { margin: 4px 0 0; color: var(--ink-3); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-pad { padding: 18px; }
.label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--primary); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--panel-2); border-color: transparent; color: var(--ink); }
.btn-danger { color: var(--miss); }
.btn-sm { height: 32px; padding: 0 10px; font-size: 0.84rem; border-radius: 8px; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.icon-btn { width: 36px; padding: 0; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.input, .select, textarea.input { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 0.95rem; width: 100%; }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; }
.input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line); }
.seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 0.86rem; cursor: pointer; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.err { color: var(--miss); font-size: 0.86rem; font-weight: 600; min-height: 1.2em; }

/* ---------- Dnes ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { padding: 16px 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.stat b { display: block; font-family: var(--display); font-size: 2.3rem; line-height: 1; font-weight: 700; color: var(--c); }
.stat span { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
.st-in { --c: var(--in); } .st-out { --c: var(--out); } .st-miss { --c: var(--miss); } .st-abs { --c: var(--abs); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .today-grid { grid-template-columns: 1fr; } }
.group + .group { margin-top: 18px; }
.group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.group-head h2 { font-size: 1.15rem; }
.group-head .dot { width: 12px; height: 12px; border-radius: 4px; background: var(--c, var(--ink-3)); }
.group-head .count { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; text-align: left; width: 100%; transition: border-color 0.15s, transform 0.15s; }
.person:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; flex: none; background: var(--ab, var(--panel-2)); color: var(--af, var(--ink-2)); }
.person .p-main { min-width: 0; flex: 1; }
.person .p-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.person .p-sub { font-size: 0.8rem; color: var(--ink-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .p-time { font-family: var(--mono); font-size: 0.82rem; font-weight: 600; text-align: right; line-height: 1.3; }
.person.is-in .avatar { --ab: var(--in-soft); --af: var(--in); }
.person.is-out .avatar { --ab: var(--out-soft); --af: var(--out); }
.person.is-miss { border-style: dashed; }
.person.is-miss .avatar { --ab: var(--miss-soft); --af: var(--miss); }
.person.is-abs .avatar { --ab: var(--abs-soft); --af: var(--abs); }
.person a.call { font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.site-tag { display: inline-flex; align-items: center; gap: 5px; }
.site-tag i { width: 8px; height: 8px; border-radius: 2px; background: var(--sc); flex: none; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.feed li:first-child { border-top: 0; }
.feed time { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); grid-row: span 2; padding-top: 2px; }
.feed b { font-size: 0.88rem; }
.feed q { font-size: 0.86rem; color: var(--ink-2); quotes: "„" "“"; }
.act { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-left: 6px; vertical-align: 1px; background: var(--panel-2); color: var(--ink-2); }
.act-arrive, .act-return, .act-arrive_fix { background: var(--in-soft); color: var(--in-ink); }
.act-leave { background: var(--out-soft); color: var(--out); }
.act-unknown_number, .act-unknown, .act-leave_invalid, .act-leave_no_arrive, .act-inactive { background: var(--miss-soft); color: var(--miss); }
.act-absence_sick, .act-absence_vacation, .act-absence_off { background: var(--abs-soft); color: var(--abs); }

/* ---------- Tabulka ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--ink-2); margin: 0 0 12px; }
.legend .chip-s { width: 18px; }
.sheet-wrap { overflow: auto; max-height: calc(100vh - 230px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.sheet { border-collapse: separate; border-spacing: 0; font-size: 0.8rem; min-width: 100%; }
.sheet th, .sheet td { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 0; }
.sheet thead th { position: sticky; top: 0; z-index: 3; background: var(--panel-2); font-weight: 600; color: var(--ink-3); height: 46px; min-width: 56px; text-align: center; line-height: 1.15; }
.sheet thead th b { display: block; font-family: var(--mono); font-size: 0.95rem; color: var(--ink); }
.sheet thead th.we { color: var(--ink-3); background: color-mix(in srgb, var(--panel-2) 80%, var(--line)); }
.sheet thead th.today { background: var(--hivis); color: #1a2026; }
.sheet thead th.today b { color: #1a2026; }
.sheet .name { position: sticky; left: 0; z-index: 2; background: var(--panel); text-align: left; min-width: 200px; max-width: 240px; padding: 6px 12px; font-weight: 600; font-size: 0.88rem; }
.sheet thead .name { z-index: 4; background: var(--panel-2); color: var(--ink-2); }
.sheet .name small { display: block; font-weight: 500; font-size: 0.74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .tot { position: sticky; right: 0; z-index: 2; background: var(--panel-2); min-width: 118px; white-space: nowrap; text-align: right; padding: 6px 12px; font-family: var(--mono); font-weight: 600; }
.sheet thead .tot { z-index: 4; }
.sheet .tot small { display: block; font-family: var(--body); font-weight: 500; font-size: 0.72rem; color: var(--ink-3); }
.cell { width: 100%; height: 48px; border: 0; background: transparent; cursor: pointer; padding: 3px; display: block; }
.cell:hover { background: var(--panel-2); }
td.we .cell { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
td.today { background: var(--hivis-soft); }
.c-work { height: 100%; border-radius: 6px; background: color-mix(in srgb, var(--sc, var(--in)) 16%, transparent); border-left: 3px solid var(--sc, var(--in)); display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: var(--mono); font-size: 0.72rem; line-height: 1.15; color: var(--ink); }
.c-work.open { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sc, var(--in)) 22%, transparent) 0 6px, color-mix(in srgb, var(--sc, var(--in)) 10%, transparent) 6px 12px); }
.c-work .h { color: var(--ink-3); font-size: 0.7rem; }
.c-abs { height: 100%; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; background: var(--abs-soft); color: var(--abs); }
.c-miss { height: 100%; display: grid; place-items: center; color: var(--miss); opacity: 0.55; font-size: 0.9rem; }
.chip-s { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }

/* ---------- lists (Lidé, Stavby, Zprávy) ---------- */
.list { width: 100%; border-collapse: collapse; }
.list th { text-align: left; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.list td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.list tr:last-child td { border-bottom: 0; }
.list tr.off td { opacity: 0.5; }
.list .actions { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.pill { display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--ink-2); }
.pill-ok { background: var(--in-soft); color: var(--in-ink); }
.pill-bad { background: var(--miss-soft); color: var(--miss); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }
.phone-mock { background: #0b141a; border-radius: 22px; padding: 14px; color: #e9edef; }
.phone-mock .bubble { max-width: 85%; padding: 8px 11px; border-radius: 10px; margin: 6px 0; font-size: 0.88rem; white-space: pre-wrap; line-height: 1.4; }
.bubble.me { margin-left: auto; background: #005c4b; }
.bubble.bot { background: #202c33; }
.bubble small { display: block; font-size: 0.68rem; opacity: 0.6; margin-top: 3px; text-align: right; }
.sim-form { display: flex; gap: 6px; margin-top: 10px; }
.sim-form .input { background: #2a3942; border-color: #2a3942; color: #e9edef; }
.quick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.quick button { border: 1px solid #2a3942; background: transparent; color: #aebac1; border-radius: 99px; font-size: 0.78rem; padding: 3px 10px; cursor: pointer; }
.quick button:hover { color: #fff; border-color: #53bdeb; }
.check { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.check:first-child { border-top: 0; }
.check i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.8rem; font-weight: 800; flex: none; }
.check i.ok { background: var(--in-soft); color: var(--in-ink); }
.check i.no { background: var(--miss-soft); color: var(--miss); }
.copy-row { display: flex; gap: 6px; margin-top: 4px; }
.copy-row code { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-family: var(--mono); font-size: 0.82rem; overflow-x: auto; white-space: nowrap; }
.steps { margin: 0; padding-left: 20px; }
.steps li { margin: 6px 0; }

/* ---------- dialog ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(12, 16, 20, 0.5); animation: fade 0.15s; }
@keyframes fade { from { opacity: 0; } }
.dialog { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); animation: rise 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 20px 6px; }
.dialog header h2 { font-size: 1.3rem; }
.dialog header p { margin: 2px 0 0; color: var(--ink-3); font-size: 0.88rem; }
.dialog .body { padding: 10px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog .full { grid-column: 1 / -1; }
.dialog footer { display: flex; justify-content: space-between; gap: 8px; padding: 12px 20px 18px; }
.dialog footer .right { display: flex; gap: 8px; margin-left: auto; }
.status-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.status-pick label { cursor: pointer; }
.status-pick input { position: absolute; opacity: 0; pointer-events: none; }
.status-pick span { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); font-weight: 600; font-size: 0.86rem; color: var(--ink-2); }
.status-pick input:checked + span { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.status-pick input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.meta { font-size: 0.76rem; color: var(--ink-3); }
.color-row { display: flex; gap: 6px; flex-wrap: wrap; }
.color-row label { cursor: pointer; }
.color-row input { position: absolute; opacity: 0; }
.color-row span { display: block; width: 28px; height: 28px; border-radius: 8px; background: var(--sc); border: 2px solid transparent; }
.color-row input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 2px var(--panel) inset; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--ground); padding: 10px 18px; border-radius: 99px; font-weight: 600; font-size: 0.9rem; transition: opacity 0.2s, transform 0.2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.empty { padding: 28px; text-align: center; color: var(--ink-3); }

/* ---------- login ---------- */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background:
  linear-gradient(135deg, transparent 0 46%, var(--hivis) 46% 50%, transparent 50% 56%, var(--hivis) 56% 60%, transparent 60%) no-repeat right -120px top -120px / 360px 360px, var(--ground); }
.login-card { width: min(380px, 100%); padding: 28px; }
.login-card h1 { font-size: 2rem; margin: 14px 0 4px; }
.login-card form { display: grid; gap: 12px; margin-top: 18px; }

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

/* ================= v2 ================= */
/* hero strip on Dnes */
.hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 20px 24px; margin-bottom: 18px; border-radius: 20px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 178, 30, 0.28), transparent 55%), linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, #1a4c8f 100%); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 26px solid rgba(255, 178, 30, 0.12); }
.hero h1 { font-family: var(--brand); font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1; color: #fff; }
.hero p { margin: 6px 0 0; color: #b9c8e2; }
.hero .clock { font-family: var(--mono); font-size: 1rem; color: var(--amber); font-weight: 600; }
.ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--amber) calc(var(--p) * 1%), rgba(255, 255, 255, 0.14) 0); position: relative; flex: none; }
.ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--navy); }
.ring b { position: relative; font-family: var(--brand); font-size: 1.5rem; font-weight: 800; line-height: 1; text-align: center; }
.ring b small { display: block; font-family: var(--body); font-size: 0.7rem; font-weight: 600; color: #b9c8e2; letter-spacing: 0.04em; }
.hero-tools { display: flex; gap: 8px; position: relative; z-index: 1; }
.hero-tools .btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.hero-tools .btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.35); }
.hero-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 178, 30, 0.2); color: var(--amber); font-size: 0.8rem; font-weight: 700; }
@media (max-width: 700px) { .hero { grid-template-columns: 1fr; } .ring { display: none; } }

/* small badges on people cards and cells */
.tag { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; white-space: nowrap; vertical-align: 1px; }
.tag-late { background: var(--miss-soft); color: var(--miss); }
.tag-gps { background: var(--in-soft); color: var(--in-ink); }
.tag-far { background: var(--hivis-soft); color: var(--amber-deep); }
.p-tags { display: flex; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
.c-work { position: relative; }
.c-work .dot-late { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--miss); }
.c-work .pin { position: absolute; bottom: 2px; right: 3px; font-size: 0.55rem; line-height: 1; }
.sheet thead th.hol { background: repeating-linear-gradient(135deg, var(--hivis-soft) 0 5px, transparent 5px 10px), var(--panel-2); color: var(--amber-deep); }
td.hol .cell { background: repeating-linear-gradient(135deg, var(--hivis-soft) 0 5px, transparent 5px 10px); }

/* "K doplnění" -- forgotten departures */
.fixlist { list-style: none; margin: 0; padding: 0; }
.fixlist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.fixlist li:first-child { border-top: 0; }
.fixlist .when { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); min-width: 54px; }
.fixlist .what { flex: 1; min-width: 0; font-size: 0.88rem; }
.fixlist .what small { display: block; color: var(--miss); font-weight: 600; font-size: 0.76rem; }
.side-stack { display: grid; gap: 18px; align-content: start; }
.panel-warn { border-color: color-mix(in srgb, var(--miss) 35%, var(--line)); }

/* Přehled */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.kpi span { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.kpi b { display: block; margin-top: 4px; font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi small { display: block; font-size: 0.78rem; color: var(--ink-3); margin-top: 2px; }
.kpi.is-bad b { color: var(--miss); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.charts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
@media (max-width: 1000px) { .charts { grid-template-columns: 1fr; } }
.chart-card h2 { font-size: 1.1rem; }
.chart-card .sub { margin: 2px 0 12px; font-size: 0.84rem; color: var(--ink-3); }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis text, .chart text.axis { fill: var(--ink-3); font-family: var(--mono); font-size: 10px; }
.chart .bar { fill: var(--bar); }
.chart .bar.we { fill: color-mix(in srgb, var(--bar) 45%, var(--panel)); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit:hover + .bar, .chart .bar.is-hover { fill: var(--primary); }
.tip { position: absolute; z-index: 5; pointer-events: none; padding: 7px 10px; border-radius: 10px; background: var(--ink); color: var(--ground); font-size: 0.8rem; line-height: 1.35; white-space: nowrap; box-shadow: var(--shadow); transform: translate(-50%, calc(-100% - 10px)); }
.tip b { font-family: var(--mono); }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-size: 0.88rem; }
.hbar .track { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--bar); min-width: 3px; }
.hbar .val { font-family: var(--mono); font-weight: 600; font-size: 0.84rem; color: var(--ink); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.list th.num { text-align: right; }
.list tfoot td { font-weight: 700; border-top: 2px solid var(--line); background: var(--panel-2); }

/* settings */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .settings-grid { grid-template-columns: 1fr; } }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.section-title h2 { font-size: 1.15rem; }
.form-row { display: grid; grid-template-columns: auto 120px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.form-row:first-of-type { border-top: 0; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background 0.15s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.note { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-2); }
.note code { font-family: var(--mono); font-size: 0.8rem; }
.pw-box { padding: 12px; border-radius: 12px; background: var(--hivis-soft); border: 1px dashed var(--amber-deep); font-family: var(--mono); font-size: 1rem; }

/* day editor history */
.history { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow: auto; }
.history li { font-size: 0.8rem; color: var(--ink-2); padding: 4px 0; border-top: 1px solid var(--line-soft); }
.history li:first-child { border-top: 0; }
.history time { font-family: var(--mono); color: var(--ink-3); margin-right: 6px; }

/* login in brand colours */
.login-page { background: radial-gradient(90% 70% at 100% 0%, rgba(255, 178, 30, 0.22), transparent 60%), linear-gradient(160deg, var(--navy), #163a70); }
.login-card .brand-word { font-size: 2.2rem; }
.login-card .brand { color: var(--ink); }
.settings-grid .body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .settings-grid .body, .dialog .body { grid-template-columns: 1fr; } }
/* keep the pinned name / total columns visibly separate from the scrolled days */
.sheet .name { box-shadow: 1px 0 0 var(--line), 8px 0 12px -8px rgba(11, 31, 63, 0.22); }
.sheet .tot { box-shadow: -1px 0 0 var(--line), -8px 0 12px -8px rgba(11, 31, 63, 0.22); }

/* ================= v3 ================= */
.tr { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--primary); }
.feed .tr { grid-column: 2; }
.bubble-tr { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.78rem; color: #9fd8ff; }
.bubble-img { display: block; max-width: 100%; border-radius: 8px; margin-bottom: 4px; }
.quick-file { border: 1px solid #2a3942; color: #aebac1; border-radius: 99px; font-size: 0.78rem; padding: 3px 10px; cursor: pointer; }
.quick-file:hover { color: #fff; border-color: #53bdeb; }
.thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.shot { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow); transition: transform 0.15s; }
.shot:hover { transform: translateY(-2px); }
.shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel-2); }
.shot figcaption { padding: 8px 10px 10px; font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.shot .cap { display: block; flex-basis: 100%; color: var(--ink-2); }
.shot .tr { flex-basis: 100%; }
.photo-big { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 12px; background: var(--panel-2); }
.btn.is-disabled { opacity: 0.5; pointer-events: auto; }
.dialog:has(#impT) { width: min(780px, 100%); }

/* ================= v4: BIZUB – sidebar shell, calendar tools, archive ================= */
:root { --ground: #f1f4f9; --radius: 18px; --side-w: 232px; }
@media (prefers-color-scheme: dark) {
  :root:not(:where([data-theme="light"])) { --ground: #08111f; }
}
:root:where([data-theme="dark"]) { --ground: #08111f; }
body { background: radial-gradient(1200px 500px at 110% -10%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 60%) no-repeat, var(--ground); }
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 22px 14px 16px; color: #fff;
  background: linear-gradient(180deg, var(--navy) 0%, #0e2749 100%); border-right: 1px solid rgba(255, 255, 255, 0.06); }
.side::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--amber), var(--amber-deep) 30%, transparent 70%); opacity: 0.8; }
.side .brand { padding: 0 8px; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.side .brand-word { font-family: var(--brand); font-weight: 800; font-size: 2rem; letter-spacing: 0.02em; color: var(--amber); line-height: 1; text-shadow: 0 2px 0 #06142b; }
.side .nav { display: flex; flex-direction: column; gap: 2px; overflow: visible; flex: 1; }
.side .nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #b9c7de; font-weight: 600; font-size: 0.93rem; text-decoration: none; transition: background 0.15s, color 0.15s; }
.side .nav svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.side .nav a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.side .nav a.on { background: var(--amber); color: var(--navy); box-shadow: 0 8px 20px -10px rgba(255, 178, 30, 0.8); }
.side .nav a.on svg { opacity: 1; }
.side-foot { display: grid; gap: 8px; padding: 12px 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.82rem; }
.side-foot .who { color: #c3cfe4; font-weight: 600; }
.side-foot .btn-ghost { color: #c3cfe4; justify-content: flex-start; padding: 0; height: auto; }
.side-foot .btn-ghost:hover { background: transparent; color: #fff; }
.page { max-width: 1560px; width: 100%; padding: 28px 28px 80px; margin: 0; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: sticky; top: 0; z-index: 40; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .side::after { top: auto; left: 0; width: auto; height: 3px; background: linear-gradient(90deg, var(--amber), var(--amber-deep) 40%, var(--primary)); }
  .side .brand-word { font-size: 1.5rem; }
  .side .nav { order: 3; flex-basis: 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .side .nav a { padding: 7px 11px; white-space: nowrap; gap: 7px; }
  .side .nav svg { width: 17px; height: 17px; }
  .side-foot { margin-left: auto; border: 0; padding: 0; display: flex; align-items: center; }
  .side-foot .who, .side-foot .live span { display: none; }
  .page { padding: 18px 16px 90px; }
}
.panel, .stat, .kpi { border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.btn { border-radius: 11px; transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.btn:active { transform: translateY(1px); }
.btn-on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.page-head h1 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }

/* calendar toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.toolbar .grow { flex: 1; }
.toolbar .search { width: 190px; height: 38px; }
.toolbar .site-filter { width: auto; max-width: 220px; height: 38px; }
.month-pick { width: 150px; height: 38px; }
@media (max-width: 700px) { .toolbar .search { flex: 1; width: auto; } .toolbar .grow { display: none; } }
.note-arch { margin-bottom: 12px; border-left: 4px solid var(--amber); }
.lg-abs { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; font-size: 0.7rem; font-weight: 800; margin-right: 2px; }
.abs-vacation { background: color-mix(in srgb, #1f9d74 16%, transparent); color: #178760; }
.abs-sick { background: var(--miss-soft); color: var(--miss); }
.abs-off { background: var(--abs-soft); color: var(--abs); }
.c-abs.abs-vacation { background: color-mix(in srgb, #1f9d74 16%, transparent); color: #178760; }
.c-abs.abs-sick { background: var(--miss-soft); color: var(--miss); }
@media (prefers-color-scheme: dark) {
  :root:not(:where([data-theme="light"])) .abs-vacation, :root:not(:where([data-theme="light"])) .c-abs.abs-vacation { color: #4fd3a3; }
}
:root:where([data-theme="dark"]) .abs-vacation, :root:where([data-theme="dark"]) .c-abs.abs-vacation { color: #4fd3a3; }
.c-work.paper { border: 1.5px dashed color-mix(in srgb, var(--sc) 70%, transparent); border-left: 3px solid var(--sc); }
.c-work .big { font-size: 0.92rem; font-weight: 600; }
.c-work .abbr { font-family: var(--body); font-size: 0.72rem; font-weight: 700; color: color-mix(in srgb, var(--sc) 70%, var(--ink)); }
.sheet .pname { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.sheet .pname:hover { color: var(--primary); text-decoration: underline; }
.sheet .name small { font-weight: 500; }
.sheet tfoot th, .sheet tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--panel-2); border-top: 2px solid var(--line); }
.sheet tfoot .name, .sheet tfoot .tot { z-index: 4; }
.dsum { text-align: center; font-family: var(--mono); padding: 4px 2px !important; line-height: 1.1; }
.dsum b { display: block; font-size: 0.86rem; color: var(--ink); }
.dsum small { font-size: 0.7rem; color: var(--ink-3); }
.sheet .tot small.arch { color: var(--amber-deep); font-weight: 700; }
.sheet.is-bulk .cell { cursor: cell; }
.sheet.is-bulk thead th[data-col] { cursor: pointer; }
td.sel .cell { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); border-radius: 6px; }
.bulkbar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: calc(100vw - 32px);
  padding: 8px 10px; border-radius: 16px; background: var(--ink); color: var(--ground); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.6); }
.bulkbar > span { padding: 0 6px; font-size: 0.86rem; }
.bulkbar .btn { background: transparent; border-color: color-mix(in srgb, var(--ground) 30%, transparent); color: var(--ground); }
.bulkbar .btn:hover { background: color-mix(in srgb, var(--ground) 14%, transparent); }
.bulkbar .btn-danger { color: #ff9b97; }
.select-sm { height: 32px; width: auto; font-size: 0.84rem; background: transparent; color: var(--ground); border-color: color-mix(in srgb, var(--ground) 30%, transparent); }
.select-sm option { color: var(--ink); background: var(--panel); }
/* week view: roomy cells with site and note */
.sheet-week thead th { min-width: 150px; text-transform: capitalize; }
.sheet-week .cell { height: 78px; padding: 4px; }
.sheet-week .c-work { align-items: flex-start; padding: 5px 8px; gap: 1px; font-family: var(--body); text-align: left; }
.sheet-week .w-time { font-family: var(--mono); font-size: 0.82rem; }
.sheet-week .w-site { font-size: 0.74rem; font-weight: 600; color: var(--ink-2); }
.sheet-week .w-note { font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sheet-week .c-abs { font-size: 0.8rem; }
/* dialogs */
.dialog.dialog-wide { width: min(640px, 100%); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 30px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); font-weight: 600; font-size: 0.8rem; cursor: pointer; }
.chip:hover { border-color: var(--primary); color: var(--primary); }
.range-sum { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--primary-soft); color: var(--ink); font-size: 0.86rem; font-weight: 600; }
.check-line { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--ink-2); cursor: pointer; }
.check-line input { width: 17px; height: 17px; accent-color: var(--primary); }
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.mini-kpis > div { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.mini-kpis span { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.mini-kpis b { font-family: var(--display); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.spark { display: flex; align-items: flex-end; gap: 4px; margin-top: 8px; overflow-x: auto; padding-bottom: 2px; min-height: 100px; }
.spark .sp { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 30px; }
.spark .sp i { display: block; width: 18px; border-radius: 4px 4px 0 0; background: var(--bar); }
.spark .sp b { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2); }
.spark .sp small { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
/* archive */
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mbars { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; min-height: 160px; padding-bottom: 2px; }
.mb { flex: 1; min-width: 34px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-2); }
.mb i { display: block; width: 70%; max-width: 38px; border-radius: 5px 5px 0 0; background: var(--bar); transition: filter 0.15s; }
.mb:hover i { filter: brightness(1.15); }
.mb b { font-family: var(--mono); font-size: 0.7rem; }
.mb small { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
.arch thead th { min-width: 58px; cursor: pointer; text-transform: capitalize; }
.arch thead th.yr { border-left: 2px solid var(--line); }
.arch td { padding: 2px !important; }
.acell { width: 100%; height: 38px; border: 0; border-radius: 7px; cursor: pointer; position: relative; font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--primary) var(--a), transparent); }
.acell.live { background: transparent; border: 1.5px dashed var(--primary); }
.acell:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
.acell .a-note { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.arch tr.off th.name { opacity: 0.6; }
.a-empty { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line-soft) 6px 7px); }
.arch-wrap { max-height: none; }
.login-card .brand-word { font-family: var(--brand); font-weight: 800; color: var(--amber-deep); letter-spacing: 0.02em; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .page { min-width: 0; }
  .sheet .name { min-width: 128px; max-width: 150px; padding: 6px 8px; font-size: 0.8rem; }
  .sheet .tot { min-width: 84px; padding: 6px 8px; }
  .toolbar { padding: 6px; }
  .page-head .tools { width: 100%; }
  .month-pick { flex: 1; min-width: 120px; }
}
.sheet-week thead th b { font-family: var(--body); font-size: 0.95rem; }

/* v5: WhatsApp group reader */
.settings-grid .full-row { grid-column: 1 / -1; }
.wg-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
@media (max-width: 800px) { .wg-grid { grid-template-columns: 1fr; } }
.wg-qr { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.wg-qr img { width: 300px; height: 300px; max-width: 100%; border-radius: 14px; background: #fff; padding: 8px; border: 1px solid var(--line); }
.wg-qr .steps { flex: 1; min-width: 200px; font-size: 0.9rem; }
.wg-form { display: grid; gap: 10px; }
.pill-group { background: color-mix(in srgb, #25d366 18%, transparent); color: #128c4a; }
.assign { margin-top: 6px; }
.select-xs { height: 30px; font-size: 0.8rem; padding: 0 8px; width: auto; max-width: 180px; }
.wg-pair { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.wg-pair summary { cursor: pointer; font-weight: 600; }
.pair-code { margin: 10px 0 0; font-size: 2rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink); }

/* v6: accounts & roles */
/* the menu follows the account's rights (set from JS: hidden links) */
.nav a[hidden], .tabbar a[hidden], .more-grid a[hidden] { display: none !important; }
body[data-edit="0"] #rangeBtn, body[data-edit="0"] #bulkBtn, body[data-edit="0"] .assign,
body[data-edit="0"] #simF, body[data-edit="0"] .quick { display: none; }
.role-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.role-help > div { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); font-size: 0.82rem; }
.role-help b { display: block; margin-bottom: 2px; }
.role-help span { color: var(--ink-3); }
@media (max-width: 700px) { .role-help { grid-template-columns: 1fr; } }
.role-pick { display: grid; gap: 6px; }
.role-pick label { cursor: pointer; }
.role-pick input { position: absolute; opacity: 0; pointer-events: none; }
.role-pick span { display: block; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.role-pick small { display: block; font-weight: 500; color: var(--ink-3); font-size: 0.8rem; }
.role-pick input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.role-pick input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.pill-role-admin { background: var(--hivis-soft); color: var(--amber-deep); }
pre.pw-box { white-space: pre-wrap; margin: 0; font-size: 0.95rem; line-height: 1.6; }
.side-foot .btn-ghost + .btn-ghost { margin-top: -4px; }

/* v7: group chat in Zprávy */
.msg-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.86rem; color: var(--ink-3); }
.msg-stats b { color: var(--ink); font-family: var(--mono); }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--miss); cursor: pointer; text-decoration: underline; }
.linkish b { color: var(--miss); }
.msg-main { overflow: hidden; }
.chat-wrap { max-height: calc(100vh - 250px); min-height: 360px; overflow-y: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px;
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 40%), var(--panel-2); }
.cm-day { align-self: center; margin: 10px 0 4px; }
.cm-day span { display: inline-block; padding: 3px 12px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 0.76rem; font-weight: 700; color: var(--ink-2); text-transform: capitalize; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.cm { align-self: flex-start; max-width: min(560px, 88%); padding: 7px 11px 6px; border-radius: 4px 14px 14px 14px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: 0 1px 2px rgba(11, 31, 63, 0.06); }
.cm.is-link { cursor: pointer; }
.cm.is-link:hover { border-color: var(--primary); }
.cm.is-unknown { border-style: dashed; border-color: color-mix(in srgb, var(--miss) 45%, var(--line)); }
.cm-head { font-size: 0.8rem; margin-bottom: 1px; }
.cm-head b { color: var(--nc); color: color-mix(in srgb, var(--nc) 80%, var(--ink)); }
.cm-head .mono { font-size: 0.72rem; margin-left: 4px; }
.cm-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.93rem; line-height: 1.4; }
.cm-tr { margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--line); font-size: 0.84rem; color: var(--primary); }
.cm-foot { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 2px; }
.cm-foot time { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
.cm-foot .act { margin: 0; }
.cm-photo img { display: block; max-width: 100%; width: 260px; max-height: 240px; object-fit: cover; border-radius: 10px; margin: 4px 0; }
.cm .assign { margin-top: 6px; }
.cm-more { text-align: center; padding: 6px 0 10px; }
.sim-aside { position: sticky; top: 16px; }
.nav a { position: relative; }
.nav-dot { position: absolute; top: 8px; left: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--navy); }
.day-msgs { display: grid; gap: 6px; max-height: 180px; overflow: auto; }
.dmsg { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 6px 10px; border-radius: 10px; background: var(--panel-2); font-size: 0.84rem; font-weight: 500; color: var(--ink); }
.dmsg time { font-family: var(--mono); color: var(--ink-3); font-size: 0.76rem; padding-top: 1px; }
.dmsg .tr { display: block; font-size: 0.8rem; }
@media (max-width: 1000px) { .sim-aside { position: static; } .chat-wrap { max-height: 70vh; } }
.cm:has(.act-ignored) { opacity: 0.75; }
.act-ignored { background: var(--panel-2); color: var(--ink-3); }

/* v8: settings -- prefs & security */
.pref-form { display: grid; gap: 14px; }
.pref-form fieldset { border: 1px solid var(--line-soft); border-radius: 14px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 8px; }
.pref-form legend { padding: 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pref-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .pref-row { grid-template-columns: 1fr; } }
.pref-sw { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.9rem; }
.pref-sw small { display: block; color: var(--ink-3); font-size: 0.8rem; }
.sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.86rem; color: var(--ink-2); }
.sec-sess { display: grid; gap: 6px; }
.sec-sess > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--panel-2); font-size: 0.88rem; }
.sec-log { max-height: 260px; overflow: auto; }
.sec-log .list td { padding: 7px 10px; font-size: 0.84rem; }

/* v8: login, Dnes tiles, settings jump nav */
.login-page { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px 16px; }
.login-shell { width: min(880px, 100%); display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6); }
.login-brand { position: relative; padding: 44px 40px; color: #fff; background: radial-gradient(120% 90% at 0% 100%, rgba(255, 178, 30, 0.28), transparent 55%), linear-gradient(160deg, #0b1f3f, #173f7a); overflow: hidden; }
.login-brand::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 34px solid rgba(255, 178, 30, 0.14); }
.login-brand .brand-word { font-family: var(--brand); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--amber); letter-spacing: 0.02em; text-shadow: 0 3px 0 #06142b; }
.login-tag { margin: 8px 0 28px; font-size: 1.05rem; color: #c9d6ec; font-weight: 600; }
.login-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; z-index: 1; }
.login-points li { display: flex; gap: 10px; align-items: center; color: #e4ecf8; font-size: 0.95rem; }
.login-points i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.72rem; font-weight: 800; background: var(--amber); color: var(--navy); flex: none; }
.login-card { border-radius: 0; border: 0; box-shadow: none; padding: 44px 40px; width: auto; }
.login-card h1 { font-size: 1.9rem; margin: 0 0 4px; }
.login-card form { display: grid; gap: 14px; margin-top: 20px; }
.btn-lg { height: 46px; font-size: 1rem; border-radius: 12px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 44px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; border: 0; background: none; cursor: pointer; opacity: 0.6; font-size: 1rem; }
.pw-eye:hover { opacity: 1; }
.login-card .err:empty { display: none; }
.login-foot { margin: 18px 0 0; font-size: 0.8rem; color: var(--ink-3); }
.login-foot a { color: var(--ink-3); }
@media (max-width: 720px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { padding: 26px 24px; }
  .login-brand .brand-word { font-size: 2.4rem; }
  .login-points, .login-brand::after { display: none; }
  .login-tag { margin-bottom: 0; }
  .login-card { padding: 26px 24px 30px; }
}
/* Dnes tiles: icon badge instead of the edge stripe */
.stat::before { display: none; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.st-ico { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 1.05rem; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.stat b { font-size: 2rem; }
/* nav: "new messages" dot at the end of the row */
.nav-dot { left: auto; right: 14px; top: 50%; transform: translateY(-50%); box-shadow: none; }
/* settings jump links */
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; position: sticky; top: 0; z-index: 20; padding: 8px 0; background: linear-gradient(var(--ground) 70%, transparent); }
.jump button { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-weight: 600; font-size: 0.84rem; cursor: pointer; }
.jump button:hover { border-color: var(--primary); color: var(--primary); }
.settings-grid > section { scroll-margin-top: 64px; }
@media (max-width: 900px) { .jump { position: static; } }

/* v9: Dnes -- who is where */
.site-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.site-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; border-top: 4px solid var(--sc); }
.site-card header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 2px; }
.site-card h3 { font-size: 1.05rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--sc); flex: none; }
.sc-n { font-family: var(--mono); font-weight: 700; font-size: 0.9rem; padding: 1px 9px; border-radius: 99px; background: color-mix(in srgb, var(--sc) 16%, transparent); color: var(--ink); }
.sc-sum { margin: 0; padding: 0 14px 8px; font-size: 0.8rem; color: var(--ink-3); }
.sc-sum .bad { color: var(--miss); }
.site-card ul { list-style: none; margin: 0; padding: 0 6px 8px; }
.site-card li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-size: 0.9rem; }
.site-card li:hover { background: var(--panel-2); }
.site-card li.left { opacity: 0.6; }
.sc-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-src { font-size: 0.8rem; }
.sc-time { font-family: var(--mono); font-size: 0.84rem; font-weight: 600; color: var(--in-ink); white-space: nowrap; }
.sc-time.late { color: var(--miss); }
.sc-time small { font-size: 0.7rem; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); position: relative; }
.tl li:first-child { border-top: 0; }
.tl time { font-family: var(--mono); font-weight: 700; font-size: 0.86rem; color: var(--in-ink); }
.tl li.late time { color: var(--miss); }
.tl b { display: block; font-size: 0.9rem; }
.tl small { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--ink-3); }
.tl small i { width: 8px; height: 8px; border-radius: 2px; background: var(--sc); }
.unk-panel { margin-bottom: 18px; border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 8%, var(--panel)), var(--panel) 60%); }
.unk-list { display: grid; gap: 8px; }
.unk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-soft); }
.unk-who b { display: block; }
.unk-who small { display: block; color: var(--ink-3); font-size: 0.74rem; }
.unk-who q { display: block; font-size: 0.82rem; color: var(--ink-2); quotes: "„" "“"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unk-row .select-xs { max-width: 210px; }
@media (max-width: 600px) { .unk-row { grid-template-columns: 1fr auto; } .unk-who { grid-column: 1 / -1; } }

/* v10: messages in the calendar, day overview */
.c-work .mi, .c-abs .mi { position: absolute; top: 1px; left: 3px; font-size: 0.55rem; line-height: 1; font-style: normal; }
.c-abs { position: relative; }
.c-msg { height: 100%; display: grid; place-items: center; font-size: 0.8rem; opacity: 0.8; }
.sheet-week .w-msg { font-size: 0.7rem; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sheet:not(.is-bulk) thead th[data-col] { cursor: pointer; }
.sheet:not(.is-bulk) thead th[data-col]:hover { background: var(--primary-soft); color: var(--primary); }
.do-body { padding: 4px 20px 10px; display: grid; gap: 14px; max-height: 65vh; overflow: auto; }
.do-group h3 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; margin: 0 0 6px; }
.do-group h3 i { width: 10px; height: 10px; border-radius: 3px; background: var(--sc); }
.do-group h3 span { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); }
.do-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft); margin-bottom: 6px; cursor: pointer; background: var(--panel); }
.do-row:hover { border-color: var(--primary); }
.do-main b { display: block; font-size: 0.92rem; }
.do-msg { display: grid; grid-template-columns: 40px 1fr; gap: 6px; font-size: 0.82rem; color: var(--ink-2); margin-top: 3px; }
.do-msg time { font-family: var(--mono); color: var(--ink-3); font-size: 0.76rem; }
.do-msg em { display: block; font-style: normal; color: var(--primary); }
.do-right { display: grid; justify-items: end; gap: 2px; text-align: right; }
.do-right .mono { font-weight: 700; font-size: 0.88rem; }
.do-right .ok { color: var(--in-ink); }
.do-right .bad, .do-right small.bad { color: var(--miss); }
.do-right small { font-size: 0.74rem; color: var(--ink-3); }
.do-none .do-row { border-style: dashed; }

/* v11: GPS & map */
.gps-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .gps-grid { grid-template-columns: 1fr; } }
.map-panel { overflow: hidden; }
.map { height: calc(100vh - 290px); min-height: 460px; background: var(--panel-2); }
@media (max-width: 700px) { .map { height: 60vh; min-height: 340px; } }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; font-size: 0.8rem; color: var(--ink-2); border-top: 1px solid var(--line-soft); }
.lg-kraj { display: inline-block; width: 16px; height: 10px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.lg-site { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ink-3); vertical-align: -2px; margin-right: 4px; }
.lg-car::before { content: "🚐"; margin-right: 4px; }
.site-pin span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--sc); color: #0f1b2d; font: 700 13px/1 var(--body); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.site-pin span.busy { background: var(--sc); color: #fff; }
.site-pin span.old { opacity: 0.55; width: 22px; height: 22px; border-width: 2px; margin: 4px; }
.car-pin span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--vc); font-size: 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); border: 2px solid #fff; }
.leaflet-container { font-family: var(--body); }
.leaflet-popup-content { font-size: 0.86rem; line-height: 1.45; }
.gps-site { padding: 8px 0; border-top: 1px solid var(--line-soft); cursor: pointer; }
.gps-site:first-of-type { border-top: 0; }
.gps-site h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 0.95rem; }
.gps-site h3 i { width: 10px; height: 10px; border-radius: 3px; background: var(--sc); }
.gps-site h3 span { margin-left: auto; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); }
.gps-site ul { list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; gap: 3px; }
.gps-site li { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; flex-wrap: wrap; }
.gps-site li time { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--in-ink); }
.car-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 99px; font-size: 0.72rem; font-weight: 700; background: color-mix(in srgb, var(--vc) 15%, transparent); color: color-mix(in srgb, var(--vc) 75%, var(--ink)); white-space: nowrap; }
.car-list { display: grid; gap: 8px; }
.car { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--vc); background: var(--panel); text-align: left; cursor: pointer; }
.car:hover { border-color: var(--vc); }
.car-ico { font-size: 1.3rem; }
.car-main b { display: block; }
.car-main small { display: block; color: var(--ink-3); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-gps { text-align: right; font-family: var(--mono); font-size: 0.84rem; font-weight: 700; }
.car-gps small { font-weight: 500; color: var(--ink-3); font-size: 0.72rem; }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.alerts li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 0.84rem; }
.alerts li.new { background: var(--miss-soft); }
.alerts time { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); }
.do-right .car-tag { margin-bottom: 2px; }
.car-pin.parked span { background: #fff; border: 3px solid var(--vc); }

/* v12: performance -- map interaction hint, lighter repaints */
.map { position: relative; touch-action: pan-y; }
.map-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 500; padding: 5px 12px; border-radius: 99px; background: rgba(15, 27, 45, 0.78); color: #fff; font-size: 0.8rem; pointer-events: none; transition: opacity 0.2s; }
.map.is-active .map-hint { opacity: 0; }
.site-card, .stat, .kpi { contain: layout style; }
.sheet-wrap { contain: paint; }

/* v13: group disconnected bar, summary preview */
.group-bar { position: sticky; top: 0; z-index: 90; padding: 10px 16px; background: var(--miss); color: #fff; font-weight: 600; font-size: 0.9rem; text-align: center; }
.group-bar a { color: #fff; text-decoration: underline; margin-left: 6px; }
.sum-prev { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); white-space: pre-wrap; font-family: var(--body); font-size: 0.84rem; line-height: 1.5; }

/* =====================================================================
   v14: colourful redesign -- light sidebar, every section has its own colour
   ===================================================================== */
:root {
  --ground: #f4f5f8;
  --panel: #ffffff;
  --panel-2: #f6f7fa;
  --line: #e3e6ec;
  --line-soft: #eef0f4;
  --ink: #161b26;
  --ink-2: #4a5263;
  --ink-3: #7b8394;
  --side-bg: #ffffff;
  --side-ink: #3b4252;
  --hero-a: #f97316; --hero-b: #e11d74; --hero-c: #7c3aed;
  /* one colour per section (nav icon, page title badge, primary buttons) */
  --c-dnes: #e8590c; --c-tabulka: #7c3aed; --c-prehled: #0d9488; --c-archiv: #a16207; --c-gps: #16a34a;
  --c-lide: #db2777; --c-stavby: #ea580c; --c-fotky: #0891b2; --c-zpravy: #059669; --c-nastaveni: #475569;
  --accent: var(--c-dnes);
  --primary: var(--accent);
  --primary-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --shadow: 0 1px 2px rgba(22, 27, 38, 0.05), 0 8px 24px -14px rgba(22, 27, 38, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not(:where([data-theme="light"])) { --ground: #0f1115; --panel: #181b22; --panel-2: #1f232c; --line: #2c313c; --line-soft: #242832;
    --ink: #eef0f4; --ink-2: #b8bfcc; --ink-3: #8a93a3; --side-bg: #14161c; --side-ink: #c9cfda;
    --c-dnes: #fb8c3c; --c-tabulka: #a78bfa; --c-prehled: #2dd4bf; --c-archiv: #eab308; --c-gps: #4ade80;
    --c-lide: #f472b6; --c-stavby: #fb923c; --c-fotky: #22d3ee; --c-zpravy: #34d399; --c-nastaveni: #94a3b8;
    --primary-ink: #0f1115; }
}
:root:where([data-theme="dark"]) { --ground: #0f1115; --panel: #181b22; --panel-2: #1f232c; --line: #2c313c; --line-soft: #242832;
    --ink: #eef0f4; --ink-2: #b8bfcc; --ink-3: #8a93a3; --side-bg: #14161c; --side-ink: #c9cfda;
    --c-dnes: #fb8c3c; --c-tabulka: #a78bfa; --c-prehled: #2dd4bf; --c-archiv: #eab308; --c-gps: #4ade80;
    --c-lide: #f472b6; --c-stavby: #fb923c; --c-fotky: #22d3ee; --c-zpravy: #34d399; --c-nastaveni: #94a3b8;
    --primary-ink: #0f1115; }
body[data-view="dnes"] { --accent: var(--c-dnes); }
body[data-view="tabulka"] { --accent: var(--c-tabulka); }
body[data-view="prehled"] { --accent: var(--c-prehled); }
body[data-view="archiv"] { --accent: var(--c-archiv); }
body[data-view="gps"] { --accent: var(--c-gps); }
body[data-view="lide"] { --accent: var(--c-lide); }
body[data-view="stavby"] { --accent: var(--c-stavby); }
body[data-view="fotky"] { --accent: var(--c-fotky); }
body[data-view="zpravy"] { --accent: var(--c-zpravy); }
body[data-view="nastaveni"] { --accent: var(--c-nastaveni); }
body { background: var(--ground); }

/* ---------- sidebar: light, colourful icons ---------- */
.side { background: var(--side-bg); color: var(--side-ink); border-right: 1px solid var(--line); }
.side::after { display: none; }
.side .brand { gap: 10px; }
.side .brand-word { font-size: 1.75rem; color: var(--ink); text-shadow: none; letter-spacing: 0.03em; }
.side .brand-word::first-letter { color: var(--c-dnes); }
.side .brand-sub { background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); color: #fff; }
.side .nav a { color: var(--side-ink); font-weight: 600; padding: 8px 10px; }
.side .nav a svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; stroke-width: 2; opacity: 1; color: var(--nc); background: color-mix(in srgb, var(--nc) 12%, transparent); transition: transform 0.15s; }
.side .nav a:hover { background: var(--panel-2); color: var(--ink); }
.side .nav a:hover svg { transform: scale(1.06); }
.side .nav a.on { background: color-mix(in srgb, var(--nc) 12%, transparent); color: var(--ink); box-shadow: inset 3px 0 0 var(--nc); }
.side .nav a.on svg { background: var(--nc); color: #fff; }
.nav a[href="#dnes"], .tabbar a[href="#dnes"], .more-grid a[href="#dnes"] { --nc: var(--c-dnes); }
.nav a[href="#tabulka"], .tabbar a[href="#tabulka"], .more-grid a[href="#tabulka"] { --nc: var(--c-tabulka); }
.nav a[href="#prehled"], .tabbar a[href="#prehled"], .more-grid a[href="#prehled"] { --nc: var(--c-prehled); }
.nav a[href="#archiv"], .tabbar a[href="#archiv"], .more-grid a[href="#archiv"] { --nc: var(--c-archiv); }
.nav a[href="#gps"], .tabbar a[href="#gps"], .more-grid a[href="#gps"] { --nc: var(--c-gps); }
.nav a[href="#lide"], .tabbar a[href="#lide"], .more-grid a[href="#lide"] { --nc: var(--c-lide); }
.nav a[href="#stavby"], .tabbar a[href="#stavby"], .more-grid a[href="#stavby"] { --nc: var(--c-stavby); }
.nav a[href="#fotky"], .tabbar a[href="#fotky"], .more-grid a[href="#fotky"] { --nc: var(--c-fotky); }
.nav a[href="#zpravy"], .tabbar a[href="#zpravy"], .more-grid a[href="#zpravy"] { --nc: var(--c-zpravy); }
.nav a[href="#nastaveni"], .tabbar a[href="#nastaveni"], .more-grid a[href="#nastaveni"] { --nc: var(--c-nastaveni); }
.nav a[href="#vyplaty"], .tabbar a[href="#vyplaty"], .more-grid a[href="#vyplaty"] { --nc: #16a34a; }
.side-foot { border-top-color: var(--line); }
.side-foot .who { color: var(--ink); }
.side-foot .btn-ghost { color: var(--ink-2); }
.side-foot .btn-ghost:hover { color: var(--ink); }
.live { color: var(--ink-3); }
.nav-dot { background: var(--c-dnes); }
@media (max-width: 900px) {
  .side { border-right: 0; border-bottom: 1px solid var(--line); box-shadow: 0 4px 16px -10px rgba(0, 0, 0, 0.2); }
  .side .nav a svg { width: 28px; height: 28px; padding: 5px; }
  .side .nav a.on { box-shadow: inset 0 -3px 0 var(--nc); }
}

/* ---------- page titles carry the section colour ---------- */
.page-head h1 { display: flex; align-items: center; gap: 12px; }
.page-head h1::before { content: ""; width: 10px; height: 34px; border-radius: 6px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff)); flex: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 14px -8px var(--accent); }
.btn-primary:hover { filter: brightness(1.07); border-color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not(:where([data-theme="light"])) .btn-primary { color: #0f1115; }
}
:root:where([data-theme="dark"]) .btn-primary { color: #0f1115; }
.seg button.on { color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 -2px 0 var(--accent); }
.toolbar, .panel, .kpi, .stat { border-color: var(--line); }
a { color: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-soft); }
:focus-visible { outline-color: var(--accent); }
.jump button:hover { border-color: var(--accent); color: var(--accent); }
.switch input:checked + span { background: var(--accent); }

/* ---------- Dnes hero: warm sunrise instead of navy ---------- */
.hero { background: radial-gradient(90% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(120deg, var(--hero-a) 0%, var(--hero-b) 55%, var(--hero-c) 100%); box-shadow: 0 18px 40px -22px rgba(225, 29, 116, 0.7); }
.hero::after { border-color: rgba(255, 255, 255, 0.14); }
.hero p { color: rgba(255, 255, 255, 0.85); }
.hero .clock { color: #fff; background: rgba(255, 255, 255, 0.18); padding: 1px 8px; border-radius: 8px; }
.ring { background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, 0.25) 0); }
.ring::before { background: color-mix(in srgb, var(--hero-a) 55%, var(--hero-b)); }
.ring b small { color: rgba(255, 255, 255, 0.85); }
.hero-note { background: rgba(255, 255, 255, 0.2); color: #fff; }
.hero-tools .btn { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); }

/* ---------- tiles and cards a bit livelier ---------- */
.stat, .kpi { border-radius: 18px; transition: transform 0.15s, box-shadow 0.15s; }
.stat:hover, .kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(22, 27, 38, 0.35); }
.kpi { border-top: 3px solid var(--accent); }
.kpis .kpi:nth-child(2) { border-top-color: var(--c-tabulka); }
.kpis .kpi:nth-child(3) { border-top-color: var(--c-prehled); }
.kpis .kpi:nth-child(4) { border-top-color: var(--c-lide); }
.kpis .kpi:nth-child(5) { border-top-color: var(--c-gps); }
.kpis .kpi:nth-child(6) { border-top-color: var(--c-fotky); }
.kpi.is-bad { border-top-color: var(--miss); }
.site-card { border-top-width: 5px; }
.group-head .dot { border-radius: 50%; }
.chart .bar { fill: var(--accent); }
.hbar .fill { background: var(--accent); }
.mb i, .spark .sp i { background: var(--accent); }
.acell { background: color-mix(in srgb, var(--c-archiv) var(--a), transparent); }
.acell.live { border-color: var(--c-archiv); }
.sheet thead th.today { background: color-mix(in srgb, var(--c-dnes) 85%, #fff); color: #fff; }
.sheet thead th.today b { color: #fff; }
td.today { background: color-mix(in srgb, var(--c-dnes) 7%, transparent); }
.bulkbar { background: #161b26; }
.pill-group { background: color-mix(in srgb, var(--c-zpravy) 16%, transparent); color: var(--c-zpravy); }
.cm-tr { color: var(--c-tabulka); }
.tr { color: var(--c-tabulka); }

/* ---------- login ---------- */
.login-page { background: radial-gradient(80% 60% at 0% 100%, rgba(249, 115, 22, 0.25), transparent 60%), radial-gradient(70% 60% at 100% 0%, rgba(124, 58, 237, 0.25), transparent 60%), #14161c; }
.login-brand { background: radial-gradient(90% 90% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(135deg, var(--hero-a), var(--hero-b) 55%, var(--hero-c)); }
.login-brand .brand-word { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
.login-tag, .login-points li { color: rgba(255, 255, 255, 0.92); }
.login-points i { background: #fff; color: var(--hero-b); }
.login-brand::after { border-color: rgba(255, 255, 255, 0.16); }
.login-page .btn-primary { background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); border: 0; }
.group-bar { background: linear-gradient(90deg, #dc2626, #e11d74); }

/* =====================================================================
   v16: liquid glass + glowing points -- the light version.
   No live backdrop blur while scrolling (only the open dialog), glows are
   static shadows, and the only animations use transform/opacity (GPU only).
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-line: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 10px 28px -18px rgba(40, 20, 80, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not(:where([data-theme="light"])) { --glass: rgba(30, 33, 42, 0.82);
    --glass-strong: rgba(30, 33, 42, 0.9);
    --glass-line: rgba(255, 255, 255, 0.09);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 30px -18px rgba(0, 0, 0, 0.7); }
}
:root:where([data-theme="dark"]) { --glass: rgba(30, 33, 42, 0.82);
    --glass-strong: rgba(30, 33, 42, 0.9);
    --glass-line: rgba(255, 255, 255, 0.09);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 30px -18px rgba(0, 0, 0, 0.7); }
/* colourful light behind everything: one fixed, GPU-composited layer that never repaints */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 45% at 10% 5%, color-mix(in srgb, var(--c-dnes) 24%, transparent), transparent 70%),
    radial-gradient(36% 42% at 95% 10%, color-mix(in srgb, var(--c-tabulka) 20%, transparent), transparent 70%),
    radial-gradient(42% 46% at 85% 95%, color-mix(in srgb, var(--c-prehled) 18%, transparent), transparent 70%),
    radial-gradient(34% 38% at 15% 92%, color-mix(in srgb, var(--c-lide) 16%, transparent), transparent 70%);
  will-change: transform; transform: translateZ(0);
}
@media (prefers-color-scheme: dark) {
  :root:not(:where([data-theme="light"])) body::before { opacity: 0.5; }
}
:root:where([data-theme="dark"]) body::before { opacity: 0.5; }

/* glass look without blur */
.side, .stat, .kpi, .toolbar, .bulkbar, .jump, .map-legend, .panel, .site-card, .person, .car, .unk-row, .cm, .do-row, .shot, .sheet-wrap {
  background: var(--glass-strong); border-color: var(--glass-line); box-shadow: var(--glass-shadow);
}
.side { background: var(--glass); border-right: 1px solid var(--glass-line); }
.stat, .kpi, .toolbar { background: var(--glass); }
/* light catching the edge -- only on the few big tiles (a mask per element costs) */
.stat, .kpi { position: relative; }
.stat::after, .kpi::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 38%); opacity: 0.8; }
@media (prefers-color-scheme: dark) {
  :root:not(:where([data-theme="light"])) .stat::after, :root:not(:where([data-theme="light"])) .kpi::after { opacity: 0.08; }
}
:root:where([data-theme="dark"]) .stat::after, :root:where([data-theme="dark"]) .kpi::after { opacity: 0.08; }
.sheet thead th, .sheet .tot, .sheet tfoot th, .sheet tfoot td { background: var(--panel-2); }
.sheet .name { background: var(--panel); }
.hero { border: 1px solid rgba(255, 255, 255, 0.35); }
.hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, 0.3), transparent 35%); }
.btn-primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #ff3d8b)); border-color: transparent; }
/* the open dialog is the one place with real frosted glass (nothing scrolls under it) */
.modal { background: rgba(16, 12, 30, 0.38); }
.dialog { background: var(--glass-strong); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }

/* glowing points: static glow + a GPU-only pulse ring on 2-3 dots */
@keyframes ring { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.6); opacity: 0; } }
.live i, .nav-dot { position: relative; animation: none; box-shadow: 0 0 8px 1px var(--g, #22c55e); }
.live i { --g: #22c55e; }
.nav-dot { --g: var(--c-dnes); position: absolute; }
.live i::after, .nav-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--g); animation: ring 2.2s ease-out infinite; will-change: transform, opacity; }
.side .nav a.on svg { box-shadow: 0 0 14px -3px var(--nc); }
.sc-dot, .gps-site h3 i, .do-group h3 i, .tl small i { border-radius: 50%; box-shadow: 0 0 7px 1px color-mix(in srgb, var(--sc) 65%, transparent); }
.st-ico { box-shadow: 0 0 16px -5px var(--c); animation: none; }
.group-head .dot { box-shadow: 0 0 8px 1px var(--c, var(--ink-3)); }
.sheet thead th.today { box-shadow: 0 0 16px -6px var(--c-dnes); }
/* no glow on things that exist hundreds of times (calendar cells, tags) */
.c-work, .lg-abs, .act, .pill, .tag, .chip-s, .site-tag i { box-shadow: none; }
.sc-time, .tl time { text-shadow: none; }
/* map: static glow, no animated shadows */
.site-pin span { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 10px 1px color-mix(in srgb, var(--sc) 60%, transparent); animation: none; }
.site-pin span.busy { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 16px 4px color-mix(in srgb, var(--sc) 75%, transparent); }
.car-pin span { box-shadow: 0 0 12px 2px color-mix(in srgb, var(--vc) 60%, transparent); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--ink); }
.map-legend { border-width: 1px 0 0 0; border-radius: 0; }
/* hover lift only where there are few items */
.stat, .kpi { transition: transform 0.15s; will-change: auto; }
.person, .car, .do-row, .shot { transition: border-color 0.15s; }
.person:hover, .shot:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .live i::after, .nav-dot::after { animation: none; } }
.site-card { border-top: 5px solid var(--sc); }
.kpi { border-top: 3px solid var(--accent); }

/* theme switch: a forced light theme keeps light form controls */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* theme switch in the sidebar */
.theme-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); width: max-content; }
.theme-seg button { width: 34px; height: 28px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 0.9rem; line-height: 1; opacity: 0.55; transition: opacity 0.15s, background 0.15s; }
.theme-seg button:hover { opacity: 1; }
.theme-seg button[aria-pressed="true"] { opacity: 1; background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
@media (max-width: 900px) { .theme-seg button { width: 30px; } }
/* adding a missing phone right where it's missing */
.phone-add { display: flex; gap: 6px; align-items: center; }
.phone-add .input { height: 32px; width: 170px; font-size: 0.85rem; border-style: dashed; border-color: color-mix(in srgb, var(--miss) 45%, var(--line)); }
.phone-add .input:focus { border-style: solid; }
.ph-edit { margin-left: 6px; font-family: var(--body); }

.add-ph { color: var(--accent); text-decoration: none; font-size: inherit; font-weight: 600; }
.add-ph:hover { text-decoration: underline; }
.phone-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* several numbers per person */
.ph-num { display: inline-block; margin-right: 8px; white-space: nowrap; }
.ph-line { display: flex; gap: 6px; align-items: center; }
.ph-line .input { flex: 1; }
.ph-row + .ph-row { margin-top: -4px; }
/* absent + unconfirmed departure */
.abs-absent, .c-abs.abs-absent { background: color-mix(in srgb, var(--miss) 14%, transparent); color: var(--miss); }
.lv-auto { color: var(--ink-3); font-style: italic; }
.do-note { max-width: 260px; white-space: normal; text-align: right; }
/* weather on sites */
.wx { margin-left: auto; font-style: normal; font-weight: 500; font-size: 0.78rem; color: var(--ink-2); }
.do-group h3 span + .wx { margin-left: 10px; }
.sc-wx { margin: 0; padding: 0 14px 4px; font-size: 0.8rem; color: var(--ink-2); }

/* second map: who was where, day by day */
.hist-panel { margin-top: 18px; }
.hist-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.hist-range { flex: 1; min-width: 180px; accent-color: var(--accent); }
.hist-day { min-width: 160px; text-transform: capitalize; font-family: var(--display); }
.hist-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
@media (max-width: 1000px) { .hist-grid { grid-template-columns: 1fr; } }
.hmap { height: 520px; min-height: 360px; border-radius: 14px; overflow: hidden; }
.hist-list { max-height: 520px; overflow: auto; display: grid; gap: 10px; align-content: start; }
.hl-day { margin: 0; text-transform: capitalize; font-size: 1rem; }
.hl-site { padding: 8px 10px; border-radius: 12px; background: var(--panel-2); border-left: 4px solid var(--sc); }
.hl-site b { display: flex; align-items: center; gap: 6px; }
.hl-site b span { margin-left: auto; font-family: var(--mono); color: var(--ink-3); font-size: 0.8rem; }
.hl-site small { display: block; color: var(--ink-2); font-size: 0.78rem; }
.hl-site p, .hl-away p { margin: 4px 0 0; font-size: 0.86rem; }
.hl-me { font-weight: 700; color: var(--accent); }
.hl-away { padding: 8px 10px; border-radius: 12px; background: var(--miss-soft); }
.hist-pin { overflow: visible; }
.hp-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sc); color: #fff; font: 700 13px/1 var(--body); border: 2px solid #fff; box-shadow: 0 0 12px 2px color-mix(in srgb, var(--sc) 60%, transparent); }
.hp-lbl { position: absolute; left: 34px; top: 0; white-space: nowrap; padding: 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: #161b26; font: 500 11px/1.3 var(--body); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.hp-lbl b { display: block; font-size: 11.5px; }
.hist-tools .select { width: auto; max-width: 240px; height: 38px; }

/* =====================================================================
   v17: phone layout -- slim top bar, bottom tabs, "Více" sheet, compact pages
   ===================================================================== */
.tabbar, .more-sheet, .m-only { display: none; }
@media (max-width: 760px) {
  body { font-size: 15px; }
  /* top bar: just the brand */
  .side { position: sticky; top: 0; z-index: 50; flex-direction: row; align-items: center; justify-content: center; height: auto;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; gap: 0; border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px -14px rgba(0, 0, 0, 0.35); }
  .side .nav, .side-foot { display: none !important; }
  .side .brand-word { font-size: 1.35rem; }
  .side .brand-sub { font-size: 0.58rem; padding: 2px 6px; }
  .page { padding: 14px 14px calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* bottom tabs */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--glass-strong, var(--panel)); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, 0.4); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border: 0; background: none;
    color: var(--ink-3); font: 600 0.68rem/1.1 var(--body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tabbar svg { width: 34px; height: 28px; padding: 4px 8px; border-radius: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a.on, .tabbar button.on { color: var(--ink); }
  .tabbar a.on svg, .tabbar button.on svg { background: color-mix(in srgb, var(--nc, var(--accent)) 16%, transparent); color: var(--nc, var(--accent)); }
  .tabbar .nav-dot { position: absolute; top: 3px; left: calc(50% + 8px); right: auto; transform: none; }

  /* "Více" sheet */
  .more-sheet { display: flex; position: fixed; inset: 0; z-index: 90; align-items: flex-end; background: rgba(12, 10, 24, 0.4); }
  .more-sheet[hidden] { display: none; }
  .more-card { width: 100%; padding: 8px 16px calc(84px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--panel);
    box-shadow: 0 -16px 40px -20px rgba(0, 0, 0, 0.5); animation: sheet-up 0.18s ease-out; }
  @keyframes sheet-up { from { transform: translateY(24px); opacity: 0.6; } }
  .more-grip { width: 42px; height: 5px; border-radius: 99px; background: var(--line); margin: 4px auto 14px; }
  .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .more-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 16px; background: var(--panel-2);
    color: var(--ink); font-weight: 600; font-size: 0.8rem; text-decoration: none; border: 1px solid var(--line-soft); }
  .more-grid a svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; fill: none; stroke: var(--nc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    background: color-mix(in srgb, var(--nc) 13%, transparent); }
  .more-grid a.on { border-color: var(--nc); }
  .more-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
  .more-row { flex-wrap: wrap; }
  .more-row .btn { flex: 1 1 calc(50% - 5px); }
  .who2 { font-weight: 700; }

  /* page heads: title + tools, no long explanations */
  .page-head { gap: 10px; margin-bottom: 12px; }
  .page-head h1 { font-size: 1.45rem; }
  .page-head h1::before { height: 24px; width: 7px; }
  .page-head > div > p { display: none; }
  .page-head .tools { width: 100%; gap: 6px; }
  .page-head .tools .btn { height: 36px; padding: 0 11px; font-size: 0.84rem; }
  .btn { height: 38px; }
  .input, .select { height: 42px; font-size: 16px; } /* 16px = iOS doesn't zoom into the field */

  /* Dnes */
  .hero { padding: 16px 16px; gap: 10px; border-radius: 18px; margin-bottom: 12px; }
  .hero h1 { font-size: 1.5rem; }
  .hero p { font-size: 0.85rem; }
  .hero-tools { flex-wrap: wrap; }
  .hero-tools .btn { height: 34px; }
  .stats { gap: 8px; margin-bottom: 12px; }
  .stat { padding: 10px 12px; column-gap: 10px; border-radius: 14px; }
  .st-ico { width: 32px; height: 32px; border-radius: 10px; font-size: 0.9rem; }
  .stat b { font-size: 1.5rem; }
  .stat span { font-size: 0.76rem; line-height: 1.25; }
  .site-board { grid-template-columns: 1fr; gap: 10px; }
  .today-grid { gap: 12px; }
  .unk-panel { padding: 14px; }

  /* KPI tiles everywhere */
  .kpis, .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .kpi { padding: 10px 12px; border-radius: 14px; }
  .kpi span { font-size: 0.7rem; }
  .kpi b { font-size: 1.35rem; }
  .kpi small { font-size: 0.72rem; }

  /* calendar: filters fold away behind one button */
  .m-only { display: inline-flex; }
  .flt-btn { width: 100%; margin-bottom: 10px; justify-content: flex-start; }
  .cal-flt:not(.flt-open) { display: none; }
  .toolbar { gap: 6px; }
  .toolbar .seg, .toolbar .search, .toolbar .site-filter { width: 100%; max-width: none; }
  .toolbar .seg button { flex: 1; }
  .toolbar .btn { flex: 1; }
  .sheet-wrap { max-height: calc(100vh - 250px); border-radius: 14px; }
  .sheet .name { min-width: 112px; max-width: 124px; font-size: 0.78rem; }
  .sheet .name small { display: none; }
  .sheet thead th { min-width: 46px; height: 40px; }
  .cell { height: 42px; }
  .sheet-week thead th { min-width: 118px; }
  .bulkbar { left: 8px; right: 8px; transform: none; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: none; }

  /* lists become cards (Zaměstnanci, Stavby, Přehled...) */
  .list thead { display: none; }
  .list, .list tbody, .list tr, .list td { display: block; width: 100%; }
  .list tr { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  .list td { padding: 3px 0; border: 0; text-align: left; }
  .list td.num { text-align: left; }
  .list .actions { text-align: left; margin-top: 6px; }
  .list tfoot tr { background: var(--panel-2); }
  .phone-add .input { width: 100%; }

  /* chat */
  .msg-stats { font-size: 0.8rem; }
  .chat-wrap { max-height: calc(100vh - 290px); min-height: 300px; padding: 10px; }
  .msg-main + .sim-aside { display: none; } /* the test phone is a desktop tool */
  .page-head .msg-stats { width: 100%; }
  .cm { max-width: 92%; }
  .two-col { gap: 12px; }

  /* dialogs slide up from the bottom, full width */
  .modal { align-items: end; padding: 0; }
  .dialog, .dialog.dialog-wide { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheet-up 0.18s ease-out; }
  .dialog footer { flex-wrap: wrap; }
  .dialog footer .right { width: 100%; }
  .dialog footer .right .btn { flex: 1; }

  /* maps */
  .map { height: 58vh; min-height: 320px; }
  .hmap { height: 50vh; }
  .hist-tools .select { max-width: none; width: 100%; }
  .hist-day { min-width: 0; width: 100%; }
  .gps-grid, .hist-grid { gap: 12px; }

  /* settings */
  .jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 12px; padding: 4px 14px; }
  .jump button { flex: none; }
  .role-help { grid-template-columns: 1fr; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 760px) {
  .settings-grid, .two-col, .gps-grid, .today-grid, .charts { grid-template-columns: minmax(0, 1fr) !important; }
  .settings-grid > *, .panel { min-width: 0; }
  .wg-grid { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: auto minmax(0, 1fr); }
  .form-row > :last-child { grid-column: 1 / -1; }
  .pref-row { grid-template-columns: minmax(0, 1fr); }
  .copy-row code { font-size: 0.74rem; }
  .section-title { flex-wrap: wrap; }
  .settings-grid .body { grid-template-columns: minmax(0, 1fr); }
  #moreBtn { --nc: var(--c-nastaveni); }
  /* messages: filters in two tidy rows */
  .toolbar:not(.cal-flt) { display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar:not(.cal-flt) .seg, .toolbar:not(.cal-flt) .search { grid-column: 1 / -1; }
  .toolbar:not(.cal-flt) .check-line { grid-column: 1 / -1; }
  .toolbar:not(.cal-flt) .month-pick { width: 100%; }
}

/* v18: groups of people (colours), notes, sorting */
.grp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.grp-chips button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-weight: 600; font-size: 0.84rem; cursor: pointer; }
.grp-chips button i { width: 10px; height: 10px; border-radius: 50%; background: var(--gc, var(--ink-3)); }
.grp-chips button b { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); }
.grp-chips button.on { border-color: var(--gc, var(--accent)); background: color-mix(in srgb, var(--gc, var(--accent)) 12%, var(--panel)); color: var(--ink); }
.people-tools { margin-bottom: 10px; }
.people-list tbody tr:not(.former-sep) { box-shadow: inset 4px 0 0 var(--gc); }
.people-list tbody tr:not(.former-sep) td:first-child { padding-left: 18px; }
.former-sep td { padding: 10px 18px !important; background: var(--panel-2); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.people-list tr.off td { opacity: 0.62; }
.p-note { display: block; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--ink-2); font: 500 0.8rem/1.35 var(--body); text-align: left; cursor: pointer; white-space: pre-wrap; max-width: 420px; }
.p-note.empty { color: var(--ink-3); }
.p-note:hover { color: var(--accent); }
.grp-sel { border-color: color-mix(in srgb, var(--gc) 55%, var(--line)); background: color-mix(in srgb, var(--gc) 10%, var(--panel)); font-weight: 600; max-width: 170px; }
.grp-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; }
.grp-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--gc); }
.grp-list { display: grid; gap: 8px; }
.grp-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); }
.grp-row .color-row span { width: 22px; height: 22px; }
.grp-add { display: flex; gap: 8px; }
.sheet .name { box-shadow: inset 4px 0 0 var(--gc, transparent), 1px 0 0 var(--line), 8px 0 12px -8px rgba(11, 31, 63, 0.22); }
@media (max-width: 760px) {
  .grp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 10px; padding: 0 14px; }
  .grp-chips button { flex: none; }
  .grp-row { grid-template-columns: 1fr auto; }
  .grp-row .color-row { grid-column: 1 / -1; }
  .people-list tbody tr:not(.former-sep) td:first-child { padding-left: 0; }
  .people-list tbody tr:not(.former-sep) { padding-left: 18px; }
}
.np-last { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 0.86rem; color: var(--ink-2); }
.unk-row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.cm-role { font-size: 0.74rem; font-weight: 500; }
@media (max-width: 600px) { .unk-row { grid-template-columns: 1fr auto; } .unk-row .unk-new { grid-column: 1 / -1; } }

/* v19: group colours much stronger */
.people-list tbody tr:not(.former-sep) { box-shadow: inset 7px 0 0 var(--gc); background: color-mix(in srgb, var(--gc) 9%, var(--panel)); }
.people-list tbody tr:not(.former-sep):hover { background: color-mix(in srgb, var(--gc) 15%, var(--panel)); }
.people-list tbody tr:not(.former-sep) td { border-bottom-color: color-mix(in srgb, var(--gc) 22%, var(--line-soft)); }
.people-list .p-name-cell b { font-size: 1rem; }
.grp-sel { background: var(--gc); color: #fff; border-color: var(--gc); font-weight: 700; box-shadow: 0 4px 12px -6px var(--gc);
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; appearance: none; -webkit-appearance: none; padding-right: 26px; }
.grp-sel option { color: var(--ink); background: var(--panel); }
.grp-chips button.on { background: var(--gc, var(--accent)); color: #fff; border-color: var(--gc, var(--accent)); }
.grp-chips button.on b { color: rgba(255, 255, 255, 0.85); }
.grp-chips button.on i { background: #fff; }
.grp-chips button i { width: 12px; height: 12px; }
.sheet .name { box-shadow: inset 6px 0 0 var(--gc, transparent), 1px 0 0 var(--line), 8px 0 12px -8px rgba(11, 31, 63, 0.22); background: color-mix(in srgb, var(--gc, transparent) 10%, var(--panel)); }
@media (max-width: 760px) {
  .people-list tbody tr:not(.former-sep) { box-shadow: inset 0 5px 0 var(--gc); border-radius: 0; padding-top: 16px; padding-left: 14px; }
  .people-list tbody tr:not(.former-sep) + tr:not(.former-sep) { margin-top: 0; }
}
.grp-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--gc); color: #fff; font-size: 0.68rem; font-weight: 700; vertical-align: 2px; }

/* v20: names stand out */
.p-ava { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%; background: var(--gc); color: #fff;
  font: 800 0.8rem/1 var(--body); letter-spacing: 0.02em; vertical-align: middle; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 25%, transparent), 0 4px 10px -4px var(--gc); flex: none; }
.p-ava.sm { width: 22px; height: 22px; margin-right: 7px; font-size: 0.6rem; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 25%, transparent); }
.p-nm { font-family: var(--display); font-size: 1.12rem !important; font-weight: 700; color: color-mix(in srgb, var(--gc) 35%, var(--ink)); vertical-align: middle; letter-spacing: -0.01em; }
.people-list .p-note { margin-left: 44px; }
.people-list .grp-badge { vertical-align: middle; }
.sheet .pname { display: inline-flex; align-items: center; font-weight: 700; font-size: 0.9rem; }
@media (max-width: 760px) {
  .p-nm { font-size: 1.15rem !important; }
  .people-list .p-note { margin-left: 0; }
  .sheet .pname { font-size: 0.8rem; }
  .p-ava.sm { display: none; }
}
/* "Co chybí" panel */
.chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chk li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 8px 10px; border-radius: 10px; font-size: 0.86rem; background: var(--panel-2); }
.chk li a { color: var(--ink); text-decoration: none; }
.chk li a:hover { text-decoration: underline; }
.chk-bad { background: var(--miss-soft) !important; }
.chk-warn { background: color-mix(in srgb, var(--amber) 14%, var(--panel)) !important; }
.chk-panel { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.rem-texts summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
/* QR / NFC */
.qr-sub { font-size: 0.84rem; }
.qr-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 22px; align-items: start; }
.qr-card { min-width: 0; display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); border-top: 5px solid var(--sc); }
.qr-card .select { width: 100%; }
.qr-img { display: grid; place-items: center; padding: 10px; border-radius: 14px; background: #fff; }
.qr-img img { display: block; width: 100%; max-width: 250px; height: auto; aspect-ratio: 1; }
.qr-link { display: flex; gap: 6px; min-width: 0; }
.qr-link .input { flex: 1; min-width: 0; height: 36px; font-size: 0.74rem; text-overflow: ellipsis; }
.qr-wide { width: 100%; }
.qr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qr-info { min-width: 0; display: grid; gap: 14px; }
.qr-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 0.9rem; color: var(--ink-2); }
.qr-steps b { color: var(--ink); }
.qr-box { padding: 12px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.qr-box .label { margin: 0 0 8px; }
.qr-empty { margin: 0; font-size: 0.86rem; }
.qr-today, .qr-dev { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qr-today li, .qr-dev li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel); font-size: 0.88rem; }
.qr-dev li span { min-width: 0; }
.qr-dev small { display: block; font-size: 0.76rem; }
@media (max-width: 900px) { .qr-grid { grid-template-columns: minmax(0, 1fr); } .qr-img img { max-width: 220px; } }
.rem-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.rem-pair textarea { font-size: 0.88rem; line-height: 1.4; }
@media (max-width: 760px) { .rem-pair { grid-template-columns: 1fr; } }

/* role Kancelář: no messages, GPS/maps, archive (the server refuses them too) */
body[data-zpravy="0"] .msg-feed-panel, body[data-zpravy="0"] .unk-panel, body[data-zpravy="0"] #chk { display: none !important; }
.pill-role-office { background: color-mix(in srgb, #0891b2 16%, transparent); color: #0e7490; }
.login-forgot { margin: 10px 0 0; font-size: 0.86rem; text-align: center; }
.login-forgot .linkish { color: var(--ink-2); text-decoration: underline; }
#reset { display: grid; gap: 12px; margin-top: 14px; }
#reset[hidden], #rstep2[hidden] { display: none; }
#rstep2 { display: grid; gap: 12px; }
.login-card .err:empty { display: none; }

/* v23: Stavby / Kancelář switch */
.team-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.team-switch button { height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: 700 0.86rem var(--body); cursor: pointer; white-space: nowrap; }
.team-switch button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14), inset 0 -3px 0 var(--tc); }
.team-switch button[data-team-set="stavby"] { --tc: #ea580c; }
.team-switch button[data-team-set="kancelar"] { --tc: #0891b2; }
body[data-team="kancelar"] :is(.nav, .tabbar, .more-grid) a:is([href="#zpravy"], [href="#gps"]),
body[data-team="kancelar"] :is(.nav, .more-grid) .nav-row:is([data-k="zpravy"], [data-k="gps"]) { display: none !important; }
body[data-team="kancelar"] .unk-panel, body[data-team="kancelar"] .msg-feed-panel, body[data-team="kancelar"] #chk { display: none !important; }
body[data-team="kancelar"] .hero { background: radial-gradient(90% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(120deg, #0891b2 0%, #2563eb 55%, #7c3aed 100%); }
@media (max-width: 760px) {
  .side { flex-wrap: wrap; justify-content: center; }
  .side .team-switch { order: 2; flex-basis: 100%; max-width: 360px; margin: 6px auto 0; }
  .team-switch button { height: 32px; }
  body[data-team="kancelar"] .tabbar { grid-template-columns: repeat(3, 1fr); }
}
#twofa { display: grid; gap: 12px; margin-top: 14px; }
#twofa[hidden] { display: none; }
.tf-msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); font-size: 0.9rem; }
.tf-code { text-align: center; letter-spacing: 0.45em; font-size: 1.5rem; height: 54px; }

/* Počasí teď */
.wx-now:empty { display: none; }
.wx-now { margin: 0 0 18px; min-width: 0; max-width: 100%; overflow: hidden; }
.wx-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.wx-card { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.wx-card.wx-alert { border-color: color-mix(in srgb, var(--amber, #f59e0b) 55%, var(--line)); }
.wx-card header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wx-card header i { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); flex: none; }
.wx-card header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-crew { margin-left: auto; font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; }
.wx-main { display: flex; align-items: center; gap: 10px; }
.wx-ico { font-size: 2.3rem; line-height: 1; }
.wx-t { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.wx-t small { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.wx-desc { display: grid; gap: 1px; min-width: 0; }
.wx-desc b { text-transform: capitalize; }
.wx-desc small { color: var(--ink-2); font-size: 0.78rem; }
.wx-warn { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.wx-warn span { padding: 3px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: color-mix(in srgb, var(--amber, #f59e0b) 18%, transparent); }
.wx-hours { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; text-align: center; }
.wx-hours li { display: grid; gap: 1px; font-size: 0.78rem; }
.wx-hours time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wx-hours b { font-variant-numeric: tabular-nums; }
.wx-hours small { color: var(--ink-3); font-size: 0.7rem; }
.wx-hours small.wet { color: #3b82f6; font-weight: 700; }
.wx-tmr { margin: 0; font-size: 0.78rem; color: var(--ink-2); }
.wx-off p { margin: 0; font-size: 0.85rem; }

/* Výplaty */
.pay-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.pay-bar #payOk { margin-left: auto; }
.pay-files { display: flex; flex-wrap: wrap; gap: 6px; }
.pill.pay-ok { background: color-mix(in srgb, var(--in, #16a34a) 16%, transparent); color: var(--in, #16a34a); font-weight: 700; }
.pill.pay-draft { background: color-mix(in srgb, var(--amber, #f59e0b) 20%, transparent); font-weight: 700; }
.pay-month { min-width: 120px; text-align: center; text-transform: capitalize; }
.pay-tabs { flex-wrap: wrap; margin-bottom: 12px; max-width: 100%; }
.pay-body { display: grid; gap: 12px; min-width: 0; }
.pay-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); max-width: 100%; }
.pay-t { border-collapse: collapse; width: 100%; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.pay-t th, .pay-t td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.pay-t thead th { position: sticky; top: 0; background: var(--panel-2); font-size: 0.74rem; font-weight: 700; color: var(--ink-2); white-space: normal; min-width: 64px; vertical-align: bottom; }
.pay-t .nm { text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 170px; font-weight: 600; }
.pay-t thead .nm { background: var(--panel-2); z-index: 2; }
.pay-t td.t2, .pay-t th.t2 { background: color-mix(in srgb, #f97316 9%, transparent); }
.pay-t td.mx, .pay-t th.mx { background: color-mix(in srgb, #3b82f6 8%, transparent); }
.pay-t .sum { font-weight: 700; }
.pay-t .pay { font-weight: 800; color: var(--ink); }
.pay-t tfoot td, .pay-t tfoot th { font-weight: 800; background: var(--panel-2); border-top: 2px solid var(--line); }
.pay-t tr.zero { opacity: 0.55; }
.pay-t td.nolevy { background: color-mix(in srgb, #bf8f00 22%, transparent); }
.pay-in { width: 64px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; text-align: right; }
.pay-in:hover { border-color: var(--line); }
.pay-in:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.pay-in.ov { background: color-mix(in srgb, var(--amber, #f59e0b) 22%, transparent); font-weight: 700; }
.pay-in::placeholder { color: var(--ink-3); }
.pay-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pay-tools .muted { font-size: 0.82rem; flex: 1 1 320px; }
.pay-inv { display: grid; gap: 0; max-width: 520px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.pay-inv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.pay-inv > div:last-child { border-bottom: 0; }
.pay-inv span { color: var(--ink-2); font-size: 0.9rem; }
.pay-inv b { font-variant-numeric: tabular-nums; }
.pay-inv .pay-in { width: 110px; border-color: var(--line); }
.pay-inv .tot { background: var(--panel-2); }
.pay-inv .tot b { font-size: 1.2rem; color: var(--accent); }
.pay-set h2 { font-size: 1.05rem; margin: 14px 0 8px; }
.pay-set h2:first-child { margin-top: 0; }
.pay-set .grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pay-suf { display: flex; align-items: center; gap: 6px; }
.pay-suf i { font-style: normal; color: var(--ink-3); font-size: 0.85rem; }
.pay-sites { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pay-t .nm .linkish { color: inherit; text-decoration: none; font-weight: 600; text-align: left; }
.pay-t .nm .linkish:hover { color: var(--accent); text-decoration: underline; }

/* ===== Výplaty – spreadsheet (like Google Sheets) ===== */
:root { --ps-green: #34a853; --ps-orange: #f4801f; --ps-blue: #4285f4; --ps-yellow: #f9ab00; --ps-grey: #80868b; --ps-grid: #e2e3e3; --ps-head: #f8f9fa; --ps-sel: #1a73e8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ps-grid: #3c4043; --ps-head: #2a2d31; --ps-sel: #8ab4f8; } }
:root[data-theme="dark"] { --ps-grid: #3c4043; --ps-head: #2a2d31; --ps-sel: #8ab4f8; }
.ps-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ps-title { display: flex; align-items: center; gap: 12px; }
.ps-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ps-green); color: #fff; font-size: 1.5rem; box-shadow: 0 6px 16px -6px var(--ps-green); }
.ps-title h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.ps-title p { margin: 0; color: var(--ink-3); font-size: 0.86rem; }
.ps-month { display: flex; align-items: center; gap: 8px; }
.ps-month b { min-width: 130px; text-align: center; text-transform: capitalize; font-size: 1.05rem; }
.ps-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 900px) { .ps-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ps-kpi { position: relative; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.ps-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--kc); }
.ps-kpi span { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc); }
.ps-kpi b { display: block; font-size: 1.55rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ps-kpi small { color: var(--ink-3); font-size: 0.78rem; }
.k-green { --kc: var(--ps-green); } .k-orange { --kc: var(--ps-orange); } .k-blue { --kc: var(--ps-blue); } .k-yellow { --kc: #d38b00; }
.ps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ps-bar #payOk { margin-left: auto; }
.ps-files { display: flex; flex-wrap: wrap; gap: 4px; }
.ps-xl { background: #188038 !important; color: #fff !important; border-color: #188038 !important; }
.ps-chip { padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 0.84rem; }
.ps-chip.ok { background: #e6f4ea; color: #137333; } .ps-chip.draft { background: #fef7e0; color: #b06000; }
.ps-book { border: 1px solid var(--ps-grid); border-radius: 12px; background: var(--panel); overflow: hidden; display: grid; min-width: 0; }
.ps-fx { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--ps-grid); background: var(--panel); font-size: 0.86rem; min-height: 34px; }
.ps-ref { width: 74px; padding: 0 10px; border-right: 1px solid var(--ps-grid); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ps-fxi { padding: 0 10px; color: var(--ink-3); font-style: italic; font-family: Georgia, serif; border-right: 1px solid var(--ps-grid); }
.ps-fxv { padding: 0 10px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-wrap { overflow: auto; max-height: min(68vh, 900px); outline: none; min-width: 0; }
.ps-wrap:focus-visible { box-shadow: none; }
.ps-grid { border-collapse: separate; border-spacing: 0; font-size: 0.86rem; font-variant-numeric: tabular-nums; user-select: none; }
.ps-grid th, .ps-grid td { border-right: 1px solid var(--ps-grid); border-bottom: 1px solid var(--ps-grid); padding: 0 8px; height: 28px; white-space: nowrap; }
.ps-letters th { position: sticky; top: 0; z-index: 3; height: 22px; background: var(--ps-head); color: var(--ink-3); font-weight: 600; font-size: 0.74rem; text-align: center; }
.ps-labels th { position: sticky; top: 22px; z-index: 3; height: 44px; background: var(--tone, var(--ps-head)); color: var(--ink, var(--ink-2)); font-size: 0.74rem; font-weight: 800; white-space: normal; line-height: 1.15; text-align: center; box-shadow: inset 0 -3px 0 var(--ink, transparent); }
.ps-labels th.strong { font-size: 0.8rem; }
.ps-labels th small { opacity: 0.7; }
.ps-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-right: 5px; vertical-align: 1px; }
.ps-corner, .ps-rn { position: sticky; left: 0; z-index: 2; width: 40px; min-width: 40px; background: var(--ps-head); color: var(--ink-3); font-weight: 600; font-size: 0.74rem; text-align: center; }
.ps-letters .ps-corner { z-index: 5; } .ps-labels .ps-rn { z-index: 5; }
.ps-grid th.hl { background: color-mix(in srgb, var(--ps-sel) 18%, var(--ps-head)); color: var(--ps-sel); }
.ps-labels th.hl { box-shadow: inset 0 -3px 0 var(--ps-sel); }
.ps-grid .ps-nm { position: sticky; left: 40px; z-index: 1; background: var(--panel); text-align: left; min-width: 190px; font-weight: 600; }
.ps-labels .ps-nm { z-index: 4; background: var(--ps-head); }
.ps-grid td { text-align: right; background: var(--tone, var(--panel)); color: var(--ink); cursor: cell; position: relative; }
.ps-grid td[style*="--tone"] { color: #1f2328; }
.ps-grid td.ed { background: var(--tone, var(--panel)); }
.ps-grid td.ed::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--ps-sel) 45%, transparent); }
.ps-grid td.ov { background: #fff2cc !important; color: #7f6000 !important; font-weight: 800; }
.ps-grid td.ov::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #f9ab00 transparent transparent; }
.ps-grid td.miss { background: #fce8e6 !important; color: #c5221f !important; font-weight: 800; }
.ps-grid td.sum { font-weight: 800; background: color-mix(in srgb, #fff2cc 55%, var(--panel)); color: #7f6000; }
.ps-grid td.pay { font-weight: 800; color: #188038; background: color-mix(in srgb, #e6f4ea 70%, var(--panel)); }
.ps-grid td.nolevy { background: #e8c872 !important; color: #3d2e00 !important; }
.ps-grid tr.zero td, .ps-grid tr.zero .ps-nm { color: var(--ink-3); }
.ps-grid tr.zero td.pay { background: var(--panel); }
.ps-grid tr.ps-foot td, .ps-grid tr.ps-foot .ps-nm { font-weight: 800; }
.ps-grid tr.total td, .ps-grid tr.total .ps-nm { background: #f8cbad; color: #5c2400; border-top: 2px solid #c55a11; }
.ps-grid tr.inv td, .ps-grid tr.inv .ps-nm { background: color-mix(in srgb, #fce4d6 40%, var(--panel)); }
.ps-grid tr.grand td, .ps-grid tr.grand .ps-nm { background: #fbe9e7; color: #b3261e; font-size: 0.92rem; border-top: 2px solid #b3261e; }
.ps-grid td.grandv { background: #d93025 !important; color: #fff !important; font-size: 1rem; }
.ps-grid td.inr { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--ps-sel) 12%, transparent); }
.ps-grid td.sel { outline: 2px solid var(--ps-sel); outline-offset: -2px; z-index: 1; }
.ps-name { margin-right: 6px; }
.ps-nm small { color: var(--ink-3); font-weight: 500; font-size: 0.72rem; margin-right: 6px; }
.ps-gear { opacity: 0; border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 0.9rem; padding: 0 2px; margin-left: 4px; }
.ps-grid tr:hover .ps-gear, .ps-grid td.sel .ps-gear { opacity: 1; }
.ps-edit { position: absolute; inset: 0; width: 100%; height: 100%; border: 2px solid var(--ps-sel); padding: 0 6px; font: inherit; font-weight: 700; text-align: right; background: var(--panel); color: var(--ink); outline: none; box-shadow: 0 2px 10px rgba(0,0,0,.2); z-index: 3; }
.ps-empty { text-align: center !important; color: var(--ink-3); padding: 20px !important; height: auto !important; }
.ps-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--ps-grid); background: var(--ps-head); font-size: 0.78rem; color: var(--ink-3); }
.ps-status b { color: var(--ink); }
.ps-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--ps-grid); }
.ps-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.78rem; color: var(--ink-3); margin-left: auto; }
.ps-legend .lg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; border: 1px solid var(--ps-grid); }
.lg.ov { background: #fff2cc; border-color: #f9ab00; } .lg.miss { background: #fce8e6; border-color: #c5221f; } .lg.ed { background: var(--panel); box-shadow: inset -3px -3px 0 -1px color-mix(in srgb, var(--ps-sel) 45%, transparent); } .lg.pay { background: #e6f4ea; border-color: #188038; }
.ps-tabs { display: flex; gap: 2px; padding: 0 8px; background: var(--ps-head); border-top: 1px solid var(--ps-grid); overflow-x: auto; }
.ps-tabs button { position: relative; border: 0; background: transparent; padding: 10px 16px 9px; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; border-radius: 0 0 8px 8px; }
.ps-tabs button::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--tc); opacity: 0.45; }
.ps-tabs button:hover { background: color-mix(in srgb, var(--tc) 10%, transparent); }
.ps-tabs button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ps-tabs button.on::before { opacity: 1; height: 4px; }
.ps-book .pay-set { border: 0; border-radius: 0; }
.ps-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.ps-letters th:nth-child(2) { position: sticky; left: 40px; z-index: 4; }
.ps-grid td.ps-nm { white-space: nowrap; }

.ps-src { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: #e8f0fe; color: #174ea6; border: 1px solid #aecbfa; font-size: 0.88rem; }
.ps-src span { color: #3c4043; }
.ps-notes { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #fef7e0; border: 1px solid #fbd46d; color: #5f370e; font-size: 0.86rem; }
.ps-notes summary { cursor: pointer; font-weight: 800; }
.ps-notes ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ps-src { background: #1e2a3d; color: #8ab4f8; border-color: #334a6e; } :root:not([data-theme="light"]) .ps-src span { color: var(--ink-2); } :root:not([data-theme="light"]) .ps-notes { background: #3a2f12; color: #fdd663; border-color: #5c4a1c; } }
:root[data-theme="dark"] .ps-src { background: #1e2a3d; color: #8ab4f8; border-color: #334a6e; } :root[data-theme="dark"] .ps-src span { color: var(--ink-2); } :root[data-theme="dark"] .ps-notes { background: #3a2f12; color: #fdd663; border-color: #5c4a1c; }
.ps-grid td.ps-nm[style*="--tone"] { background: var(--tone); color: #1f2328; }
.ps-grid td.ps-nm[style*="--tone"] small { color: #5f6368; }

/* Účty a přístupy */
.rh-title { font-size: 1rem; margin: 18px 0 8px; }
.rh-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
.rh-card { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.rh-card > span { font-size: 0.84rem; color: var(--ink-2); }
.rh-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rh-chips i { font-style: normal; font-size: 0.72rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.rh-chips i.on { background: #e6f4ea; color: #137333; } .rh-chips i.off { background: var(--panel); color: var(--ink-3); text-decoration: line-through; opacity: 0.7; }
.rh-flags i.on { background: #e8f0fe; color: #174ea6; }
.pill-role-owner { background: #fde68a; color: #78350f; } .pill-role-secretary { background: #fbcfe8; color: #831843; } .pill-role-assistant { background: #e9d5ff; color: #581c87; }
.own-ch { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.own-ch i { font-style: normal; font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.own-ch i.plus { background: #e6f4ea; color: #137333; } .own-ch i.minus { background: #fce8e6; color: #c5221f; }
.own-ch small { font-weight: 500; opacity: 0.8; }
.acc-t { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.acc-t th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); padding: 12px 6px 6px; }
.acc-t td { padding: 7px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.acc-t td small { display: block; color: var(--ink-3); font-size: 0.76rem; }
.acc-t tr.changed td { background: color-mix(in srgb, #f9ab00 10%, transparent); }
.acc-t input[type=date] { margin-top: 4px; max-width: 150px; }
.acc-t .st { white-space: nowrap; }
.pill-warn { background: #fef7e0; color: #b06000; }
.sw { position: relative; display: inline-block; width: 42px; height: 24px; }
.sw input { opacity: 0; width: 0; height: 0; }
.sw span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s; cursor: pointer; }
.sw span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.sw input:checked + span { background: #16a34a; }
.sw input:checked + span::after { transform: translateX(18px); }
.sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Funkce a hlídání ===== */
.feat-panel { border: 1px solid color-mix(in srgb, #7c3aed 30%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, #7c3aed 6%, var(--panel)), var(--panel) 120px); }
.feat-push { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: color-mix(in srgb, #2563eb 8%, var(--panel)); border: 1px solid color-mix(in srgb, #2563eb 25%, var(--line)); }
.feat-push small { display: block; color: var(--ink-3); font-size: 0.8rem; }
.feat-push-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.feat-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.feat-g { border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px 10px; background: var(--panel); }
.feat-g h3 { font-size: 0.95rem; margin: 8px 0 4px; }
.feat-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.feat-g h3 + .feat-row { border-top: 0; }
.feat-row .sw { margin-top: 2px; }
.feat-t b { display: block; font-size: 0.9rem; }
.feat-t small { display: block; color: var(--ink-3); font-size: 0.8rem; line-height: 1.35; }
.feat-row:not(.is-on) .feat-t b { color: var(--ink-3); }
.feat-res { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font: 500 0.8rem/1.45 var(--body, system-ui); white-space: pre-wrap; color: var(--ink); animation: fadeUp 0.25s ease; }
.jump .jump-all { margin-left: auto; opacity: 0.8; }
.jump .jump-all + .jump-all { margin-left: 0; }
/* folding settings sections */
.fold-h { cursor: pointer; user-select: none; }
.fold-h::after { content: "▾"; display: inline-block; margin-left: 8px; font-size: 0.8em; color: var(--ink-3); transition: transform 0.2s; }
.settings-grid > section.folded .fold-h::after { transform: rotate(-90deg); }
.settings-grid > section.folded > :not(.section-title):not(h2) { display: none !important; }
.settings-grid > section.folded { padding-bottom: 12px; }
/* payroll pre-flight */
.ps-check { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; font-size: 0.88rem; }
.ps-check.ok { background: #e6f4ea; color: #137333; border: 1px solid #a8dab5; }
.ps-check.warn { background: #fef7e0; color: #7a4a00; border: 1px solid #fbd46d; }
.ps-check ul { margin: 6px 0 0; padding-left: 20px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ps-check.ok { background: #16321f; color: #81c995; border-color: #2d5a3a; } :root:not([data-theme="light"]) .ps-check.warn { background: #3a2f12; color: #fdd663; border-color: #5c4a1c; } }
:root[data-theme="dark"] .ps-check.ok { background: #16321f; color: #81c995; border-color: #2d5a3a; } :root[data-theme="dark"] .ps-check.warn { background: #3a2f12; color: #fdd663; border-color: #5c4a1c; }

/* ===== pohyb a přechody (vypínatelné, respektuje „omezit pohyb“) ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
body.anim #view.v-enter > * { animation: fadeUp 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
body.anim #view.v-enter > *:nth-child(2) { animation-delay: 0.04s; } body.anim #view.v-enter > *:nth-child(3) { animation-delay: 0.08s; }
body.anim #view.v-enter > *:nth-child(4) { animation-delay: 0.12s; } body.anim #view.v-enter > *:nth-child(5) { animation-delay: 0.16s; }
body.anim #view.v-enter > *:nth-child(n+6) { animation-delay: 0.2s; }
body.anim .kpi, body.anim .ps-kpi, body.anim .stat, body.anim .site-card, body.anim .wx-card, body.anim .rh-card, body.anim .feat-g { transition: transform 0.18s ease, box-shadow 0.18s ease; }
@media (hover: hover) {
  body.anim .kpi:hover, body.anim .ps-kpi:hover, body.anim .stat:hover, body.anim .site-card:hover, body.anim .wx-card:hover, body.anim .rh-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.35); }
}
body.anim .btn { transition: transform 0.12s ease, background 0.15s, box-shadow 0.15s; }
body.anim .btn:active:not(:disabled) { transform: scale(0.96); }
body.anim .modal .dialog { animation: popIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
body.anim .nav a { transition: background 0.15s, color 0.15s, transform 0.15s; }
body.anim .nav a:hover svg { transform: scale(1.08) rotate(-3deg); }
body.anim #view.v-enter .chk li { animation: fadeUp 0.35s ease both; }
@media (prefers-reduced-motion: reduce) { body.anim *, body.anim *::before, body.anim *::after { animation: none !important; transition: none !important; } }

/* ===== telefon ===== */
@media (max-width: 760px) {
  .ps-top { gap: 8px; }
  .ps-month { width: 100%; justify-content: space-between; }
  .ps-kpi b { font-size: 1.2rem; }
  .ps-bar { gap: 6px; }
  .ps-bar #payOk, .ps-bar .ps-chip.draft { width: 100%; margin-left: 0; text-align: center; }
  .ps-files { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .ps-files .btn { flex: none; }
  .ps-wrap { max-height: 62vh; }
  .ps-fx .ps-fxv { font-size: 0.8rem; }
  .ps-status span { display: none; }
  .ps-tabs button { padding: 10px 12px 9px; font-size: 0.82rem; }
  .ps-legend { margin-left: 0; }
  .acc-t td, .acc-t th { padding: 6px 4px; }
  .acc-t td:first-child small { display: none; }
  .acc-t .st { display: none; }
  .table-wrap table.list td.actions { white-space: normal; }
  .table-wrap table.list td.actions .btn { margin: 2px 0; }
  .feat-row { grid-template-columns: auto 1fr; }
  .feat-row .feat-test { grid-column: 2; justify-self: start; }
  .rh-cards { grid-template-columns: 1fr !important; }
  .jump { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jump button { flex: none; }
  .modal .dialog { max-height: calc(100dvh - 24px); }
}

@media (max-width: 760px) {
  .tabbar { background: var(--panel) !important; backdrop-filter: none; }
  .gb-more { display: none; }
}

.wg-groups { display: grid; gap: 6px; }
.wg-g { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--panel); }
.wg-g.on { border-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, var(--panel)); }
.wg-g input { width: 18px; height: 18px; accent-color: #16a34a; }
.wg-g small { display: block; color: var(--ink-3); font-size: 0.78rem; }

/* ===== Hledat ve všem (Ctrl+K) ===== */
.side-search { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 10px 0 4px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink-3); font: 600 0.86rem var(--body, system-ui); cursor: pointer; text-align: left; }
.side-search:hover { border-color: var(--accent); color: var(--ink); }
.side-search kbd, .cmdk kbd { white-space: nowrap; flex: none; font: 600 0.7rem var(--mono, monospace); padding: 2px 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-3); }
.cmdk { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 8vh 12px 12px; }
.cmdk-box { width: min(680px, 100%); max-height: 80vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); overflow: hidden; animation: popIn 0.18s ease; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cmdk-in input { flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font: 600 1.05rem var(--body, system-ui); min-width: 0; }
.cmdk-res { overflow: auto; padding: 6px 8px 10px; }
.cmdk-hint { color: var(--ink-3); padding: 14px 10px; margin: 0; }
.cmdk-g h4 { margin: 10px 8px 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.cmdk-it { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.cmdk-it small { display: block; color: var(--ink-3); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-it.on, .cmdk-it:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cmdk-david { border: 0; border-top: 1px solid var(--line); padding: 12px; background: var(--panel-2); color: var(--ink); font: 700 0.9rem var(--body, system-ui); cursor: pointer; }
.cmdk-david:hover { background: color-mix(in srgb, #7c3aed 12%, var(--panel-2)); }

/* ===== David ===== */
.david-fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; font: 800 0.95rem var(--body, system-ui); cursor: pointer; box-shadow: 0 12px 28px -10px rgba(124, 58, 237, 0.7); transition: transform 0.15s; }
.david-fab:hover { transform: translateY(-2px); }
.dv-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #7c3aed; font-weight: 900; }
.dv-ava.big { width: 40px; height: 40px; background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; }
.help-fab { position: fixed; right: 18px; bottom: 74px; z-index: 90; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: 900 1.1rem var(--body, system-ui); cursor: pointer; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4); }
body:not(.help-on) .help-fab { display: none; }
body.help-mode .help-fab { background: #f59e0b; color: #1f1300; border-color: #f59e0b; }
body.help-mode [data-tip] { outline: 2px dashed color-mix(in srgb, #f59e0b 70%, transparent); outline-offset: 2px; }
.david { position: fixed; top: 0; right: 0; bottom: 0; z-index: 150; width: min(420px, 100%); display: grid; grid-template-rows: auto 1fr auto auto; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -20px 0 60px -30px rgba(0, 0, 0, 0.5); transform: translateX(105%); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); padding-top: env(safe-area-inset-top, 0px); }
.david.open { transform: none; }
.david header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.david header div { flex: 1; } .david header small { display: block; color: var(--ink-3); font-size: 0.78rem; }
.dv-log { overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.dv-m { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; animation: fadeUp 0.2s ease; }
.dv-m p { margin: 0; }
.dv-m .btn { margin: 8px 6px 0 0; }
.dv-d { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.dv-u { align-self: flex-end; background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; border-bottom-right-radius: 4px; }
.dv-ai { display: block; margin-top: 4px; color: #7c3aed; font-size: 0.72rem; font-weight: 700; }
.dv-typing p { display: flex; gap: 4px; } .dv-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dvDot 1s infinite ease-in-out; }
.dv-typing i:nth-child(2) { animation-delay: 0.15s; } .dv-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dvDot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.dv-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-top: 1px solid var(--line); }
.dv-chips button { flex: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-2); font: 600 0.78rem var(--body, system-ui); cursor: pointer; }
.dv-chips button:hover { border-color: #7c3aed; color: #7c3aed; }
.dv-f { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.dv-f input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--ink); font: 500 0.95rem var(--body, system-ui); }

/* ===== nápověda ===== */
.page-q { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 10px; vertical-align: middle; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink-3); font: 800 0.8rem var(--body, system-ui); cursor: pointer; }
.page-q:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
body:not(.help-on) .page-q { display: none; }
.tip-bubble { position: fixed; z-index: 300; max-width: min(340px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 12px; background: #1f2937; color: #f9fafb; font: 500 0.84rem/1.45 var(--body, system-ui); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5); animation: popIn 0.15s ease; pointer-events: none; }
.tip-bubble.sticky { pointer-events: auto; }
.tip-bubble p { margin: 6px 0 0; } .tip-bubble ul { margin: 6px 0 0; padding-left: 18px; }
.tip-bubble .tip-more { color: #c4b5fd; font-size: 0.78rem; }

/* ===== Učení ===== */
.learn-drop { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; border: 2px dashed color-mix(in srgb, #7c3aed 40%, var(--line)); background: color-mix(in srgb, #7c3aed 5%, var(--panel)); margin-bottom: 16px; transition: background 0.15s, border-color 0.15s; }
.learn-drop.over { background: color-mix(in srgb, #7c3aed 14%, var(--panel)); border-color: #7c3aed; }
.learn-ico { font-size: 2.6rem; }
.learn-drop p { margin: 6px 0 0; font-size: 0.84rem; }
.learn-prog { grid-column: 1 / -1; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); }
.learn-list { display: grid; gap: 8px; }
.learn-it { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.learn-t { flex: 1; min-width: 0; }
.learn-t small { display: block; color: var(--ink-3); font-size: 0.8rem; }
.learn-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.learn-tags i { font-style: normal; font-size: 0.74rem; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.learn-tags i.ok { background: #e6f4ea; color: #137333; border-color: #a8dab5; } .learn-tags i.warn { background: #fef7e0; color: #b06000; border-color: #fbd46d; }
.nav a[href="#uceni"], .tabbar a[href="#uceni"], .more-grid a[href="#uceni"] { --nc: #7c3aed; }

@media (max-width: 760px) {
  .side-search { order: 3; flex-basis: 100%; max-width: 360px; margin: 6px auto 0; padding: 7px 12px; }
  .side-search kbd { display: none; }
  .david-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 12px; padding: 5px; }
  .david-fab .dv-l { display: none; }
  .help-fab { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); right: 14px; width: 36px; height: 36px; }
  .david { width: 100%; border-left: 0; }
  .cmdk { padding-top: 12px; }
  .cmdk-box { max-height: calc(100dvh - 24px); }
  .learn-drop { grid-template-columns: 1fr; text-align: center; }
  .learn-ico { font-size: 2rem; }
}
@media print { .david-fab, .help-fab, .david { display: none !important; } }

/* phone: the sticky top bar must be solid – scrolled content showed through the glass */
@media (max-width: 900px) {
  .side { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Oznámení (zvoneček) */
.dialog:has(.nt) { width: min(680px, 100%); }
.dialog .body.nt { display: flex; flex-direction: column; gap: 18px; padding-bottom: 4px; }
.nt-dev { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.nt-dev.is-on { border-color: color-mix(in srgb, var(--in) 45%, var(--line)); background: color-mix(in srgb, var(--in) 8%, var(--panel-2)); }
.nt-dev.is-bad { border-color: color-mix(in srgb, var(--miss) 45%, var(--line)); }
.nt-dev .btn { flex: none; margin-left: auto; }
.nt-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--panel); font-size: 1.1rem; }
.nt-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-t b { font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.nt-t small { color: var(--ink-3); font-size: 0.8rem; line-height: 1.35; }
.nt-warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--miss) 10%, transparent); color: var(--miss); font-size: 0.86rem; }
.nt-sec h3 { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.nt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nt-h h3 { margin: 0; }
.nt-count { font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nt-all { margin-left: auto; display: flex; gap: 4px; }
.nt-list { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.nt-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; cursor: pointer; }
.nt-list > .nt-row + .nt-row, .nt-list > * + .nt-quiet, .nt-quiet + .nt-row, .nt-list > .nt-row + .nt-quiet { border-top: 1px solid var(--line); }
.nt-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.nt-row .sw { flex: none; }
.nt-q { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px; color: var(--ink-3); font-size: 0.86rem; }
.nt-q .input { width: 110px; padding: 6px 10px; }
.nt-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.nt-grp h4 { margin: 0 0 6px 2px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.nt-foot { margin: 0; color: var(--ink-3); font-size: 0.8rem; }
@media (max-width: 600px) {
  .nt-cols { grid-template-columns: 1fr; }
  .nt-row { padding: 11px 12px; }
}
@media (max-width: 900px) {
  /* the sticky top bar sits right under the red WhatsApp warning */
  .side { top: var(--gb-h, 0px); }
  /* one floating button on phones: "?" lives in Více */
  .help-fab { display: none; }
  body.help-mode .help-fab { display: block; }
}
/* the Více sheet has its own buttons at the bottom – David waits */
#moreSheet:not([hidden]) ~ .david-fab, body:has(#moreSheet:not([hidden])) .david-fab { display: none; }

/* Zabezpečení: klíč k zálohám */
.sec-key { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.sec-key > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sec-key small { color: var(--ink-3); font-size: 0.82rem; line-height: 1.35; }
.sec-key .btn { flex: none; margin-left: auto; }
.sec-keyout { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.sec-keyout code { font-family: var(--mono); font-size: 0.85rem; word-break: break-all; user-select: all; }
.sec-keyout p { margin: 0; color: var(--ink-3); font-size: 0.82rem; }
.sec-keyout .btn { justify-self: start; }
@media (max-width: 600px) { .sec-key { flex-wrap: wrap; } .sec-key .btn { margin-left: 0; } }

/* ===================== Tabulky (digitální Excel) ===================== */
.nav a[href="#listy"], .tabbar a[href="#listy"], .more-grid a[href="#listy"] { --nc: #0f766e; }
.gx-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding-bottom: 2px; }
.gx-tabs button { flex: none; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.gx-tabs button.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.gx-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--miss); color: #fff; font-size: 0.75rem; }
.gx-panel { padding: 14px; min-width: 0; }
.gx-panel .pad { padding: 14px 4px; margin: 0; }
.gx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.gx-pick { display: flex; align-items: center; gap: 4px; }
.gx-pick .select { max-width: 240px; }
.gx-pick .input[type="month"] { width: 150px; }
.gx-name { font-size: 1.05rem; }
.gx-title { max-width: 320px; font-weight: 600; }
.gx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.gx-grow { flex: 1; }
.gx-sw { display: inline-flex; gap: 4px; padding: 0 6px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.gx-dot { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.2); cursor: pointer; padding: 0; font-size: 0.7rem; color: var(--ink-3); background: var(--panel); }
.gx-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 0.8rem; }
.gx-legend i { font-style: normal; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); color: #1f2937; }
.gx-legend i.is-priv { color: var(--ink-3); background: var(--panel-2); }
.gx-host { min-width: 0; }
.gx-scroll { overflow: auto; max-height: calc(100vh - 250px); min-height: 240px; border: 1px solid var(--line); border-radius: 10px; background: #fff; outline: none; -webkit-overflow-scrolling: touch; }
.gx-scroll:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
.gx { border-collapse: collapse; table-layout: fixed; width: max-content; font: 13px/1.25 Calibri, Carlito, "Segoe UI", system-ui, sans-serif; color: #111827; }
.gx th.gx-cl, .gx th.gx-corner { position: sticky; top: 0; z-index: 3; height: 22px; background: #f1f3f6; color: #6b7280; font-weight: 500; font-size: 11px; border: 1px solid #d5d9e0; }
.gx th.gx-corner { left: 0; z-index: 4; }
.gx th.gx-rn { position: sticky; left: 0; z-index: 2; background: #f1f3f6; color: #6b7280; font-weight: 500; font-size: 11px; border: 1px solid #d5d9e0; text-align: center; }
.gx td.gx-c { border: 1px solid #1f2937; padding: 2px 5px; overflow: hidden; vertical-align: middle; background: #fff; white-space: normal; word-break: break-word; cursor: cell; position: relative; }
.gx td.is-b { font-weight: 700; }
.gx td.is-big { font-size: 16px; }
.gx td.al-center { text-align: center; } .gx td.al-right { text-align: right; } .gx td.al-left { text-align: left; }
.gx td.is-head { font-size: 11.5px; }
.gx td.is-dim { color: #8a94a6; font-size: 11px; }
.gx td.is-off { background: #eef0f3; }
.gx td.is-ed:hover { background: #f5f9ff; }
.gx td.lvl-ok, .gx-legend .lvl-ok { background: #d9f2e3; }
.gx td.lvl-bad, .gx-legend .lvl-bad { background: #f8d7d5; color: #9b1c1c; }
.gx td.lvl-warn, .gx-legend .lvl-warn { background: #ffe9c7; }
.gx td.lvl-off, .gx-legend .lvl-off { background: #eef0f3; color: #6b7280; }
.gx td.mk-yellow, .gx-dot.mk-yellow { background: #fff3b0; } .gx td.mk-green, .gx-dot.mk-green { background: #c9f0d6; } .gx td.mk-red, .gx-dot.mk-red { background: #fac9c6; }
.gx td.mk-blue, .gx-dot.mk-blue { background: #cfe3ff; } .gx td.mk-orange, .gx-dot.mk-orange { background: #ffddb3; }
.gx td.has-rep::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent #dc2626 transparent transparent; }
.gx td.is-priv { color: #6b7280; }
.gx td.sel { box-shadow: inset 0 0 0 999px rgba(37, 99, 235, 0.10); }
.gx td.cur { outline: 2px solid #2563eb; outline-offset: -2px; }
.gx-ph { color: #9ca3af; font-weight: 500; font-size: 12px; }
.gx-in { width: 100%; height: 100%; min-height: 22px; border: 0; outline: none; background: #fff; font: inherit; color: #111827; padding: 0; text-align: inherit; }
select.gx-in { font-size: 12px; }
.gx-trips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.gx-trip { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gx-trip:hover { border-color: var(--primary); }
.gx-trip small { color: var(--ink-3); }
.gx-all { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 0.86rem; color: var(--ink-2); }
.rep-list { display: grid; gap: 8px; }
.rep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.rep.is-open { border-left: 4px solid var(--miss); }
.rep.is-done { opacity: 0.75; border-left: 4px solid var(--in); }
.rep-t { flex: 1 1 320px; min-width: 0; }
.rep-t p { margin: 3px 0; }
.rep-t small { color: var(--ink-3); }
.rep-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rep-b .input { width: 220px; }
@media (max-width: 700px) {
  .gx-panel { padding: 10px; }
  .gx-scroll { max-height: calc(100vh - 290px); }
  .gx-pick .select { max-width: 190px; }
  .gx-bar { gap: 4px; }
  .rep-b .input { width: 100%; }
}
@media (max-width: 700px) { .gx { font-size: 12px; } .gx td.gx-c { padding: 2px 3px; } .gx td.is-head { font-size: 10px; } }
/* short pages on phones: the top bar keeps its height (the grid used to stretch it) */
@media (max-width: 900px) { .shell { align-content: start; } .side { align-content: flex-start; } }

/* David: plan of a task (confirm with "Provést") */
.dv-plan { margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.dv-plan.is-pending { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.dv-plan ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.88rem; }
.dv-plan li small { display: block; color: var(--ink-3); font-size: 0.8rem; }
.dv-plan li.ok small { color: var(--in-ink); }
.dv-plan li.bad small { color: var(--miss); }
.dv-plan-b { display: flex; gap: 6px; margin-top: 10px; }
.dv-plan-s { display: block; margin-top: 8px; color: var(--ink-3); }
.dv-slow { display: block; margin-top: 4px; color: var(--ink-3); font-size: 0.8rem; }
.dv-f textarea { flex: 1; min-width: 0; resize: none; min-height: 42px; max-height: 140px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; line-height: 1.35; }

/* ===== Můj boční panel (úprava) ===== */
.dialog:has(.nv) { width: min(560px, 100%); }
.dialog .body.nv { display: block; }
.nv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nv-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.nv-row.is-off { opacity: 0.55; }
.nv-row.drag { outline: 2px dashed var(--primary); }
.nv-grip { color: var(--ink-3); cursor: grab; font-size: 0.9rem; letter-spacing: -2px; }
.nv-ico svg { display: block; width: 32px; height: 32px; padding: 6px; border-radius: 10px; fill: none; stroke: var(--nc, var(--accent)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--nc, var(--accent)) 13%, transparent); }
.nv-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.93rem; }
.nv-name small { color: var(--ink-3); font-weight: 500; }
.nv-b { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); cursor: pointer; font: inherit; }
.nv-b:disabled { opacity: 0.35; cursor: default; }
.nv-tab { display: inline-flex; align-items: center; gap: 3px; font-size: 0.9rem; cursor: pointer; }
.nv-row[data-k="dnes"] { --nc: var(--c-dnes); } .nv-row[data-k="tabulka"] { --nc: var(--c-tabulka); } .nv-row[data-k="prehled"] { --nc: var(--c-prehled); }
.nv-row[data-k="archiv"] { --nc: var(--c-archiv); } .nv-row[data-k="gps"] { --nc: var(--c-gps); } .nv-row[data-k="lide"] { --nc: var(--c-lide); }
.nv-row[data-k="stavby"] { --nc: var(--c-stavby); } .nv-row[data-k="fotky"] { --nc: var(--c-fotky); } .nv-row[data-k="zpravy"] { --nc: var(--c-zpravy); }
.nv-row[data-k="nastaveni"] { --nc: var(--c-nastaveni); } .nv-row[data-k="vyplaty"] { --nc: #16a34a; } .nv-row[data-k="listy"] { --nc: #0f766e; } .nv-row[data-k="uceni"] { --nc: #7c3aed; }
.more-edit { display: none; }

/* ===== Telefon: spodní lišta a „Více“ ve stejném stylu jako boční panel ===== */
@media (max-width: 760px) {
  .tabbar { gap: 2px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .tabbar a, .tabbar button { gap: 3px; padding: 3px 0; color: var(--ink-2); font-size: 0.66rem; letter-spacing: 0.01em; min-width: 0; }
  .tabbar a span, .tabbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .tabbar svg { width: 38px; height: 30px; padding: 5px 9px; border-radius: 11px; stroke: var(--nc, var(--ink-2)); background: color-mix(in srgb, var(--nc, var(--ink-3)) 11%, transparent); transition: background 0.15s, transform 0.15s; }
  .tabbar a.on svg, .tabbar button.on svg { background: var(--nc, var(--accent)); color: #fff; stroke: #fff; transform: translateY(-1px); }
  .tabbar a.on, .tabbar button.on { color: var(--ink); font-weight: 700; }
  .tabbar button#moreBtn { --nc: var(--ink-2); }
  .more-card { max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; }
  .more-grid { display: flex; flex-direction: column; gap: 6px; }
  .more-grid a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: 0.95rem; }
  .more-grid a svg { width: 36px; height: 36px; padding: 8px; flex: none; }
  .more-grid a::after { content: "›"; margin-left: auto; color: var(--ink-3); font-size: 1.2rem; }
  .more-grid a[href="#nastaveni"] { margin-top: 6px; }
  .more-grid a.on { border-color: var(--nc); background: color-mix(in srgb, var(--nc) 9%, var(--panel-2)); }
  .more-edit { display: block; margin-top: 4px; padding: 10px; border-radius: 12px; border: 1px dashed var(--line); background: none; color: var(--ink-2); font: 600 0.88rem var(--body, system-ui); cursor: pointer; }
  .nv-row { gap: 6px; padding: 8px; }
  .nv-grip { display: none; }
}
.nv-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.nv-card h2 { margin: 0 0 4px; }
.nv-card p { margin: 0; max-width: 70ch; }

/* Ukrainian: hide the page until the dictionary is loaded (no Czech flash) */
html.i18n-wait body { visibility: hidden; }
.login-lang { display: flex; justify-content: flex-end; gap: 6px; margin: -6px 0 6px; }
.login-lang button { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); font: 600 0.8rem var(--body, system-ui); cursor: pointer; }
html[lang="uk"] .login-lang [data-lang-set="uk"], html[lang="cs"] .login-lang [data-lang-set="cs"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }

/* PC: the bottom of the side panel (theme, language, logout) is always on screen –
   the page list scrolls by itself when the window is low */
@media (min-width: 901px) {
  .side { overflow: hidden; gap: 14px; }
  .side .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-right: -6px; padding-right: 6px; }
  .side-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 4px 0; }
  .side-foot .live { order: 0; }
  .side-foot .who { order: 1; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-foot .theme-seg { order: 2; }
  .side-foot .lang-btn { order: 3; }
  .side-foot .btn-ghost { order: 4; flex: 1 1 calc(50% - 4px); min-width: 0; margin: 0 !important; padding: 5px 6px; border-radius: 8px; font-size: 0.78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-foot .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .side-foot .lang-btn { order: 3; flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); }
  .side-foot #logout { order: 5; flex-basis: 100%; justify-content: center; color: var(--miss); border: 1px solid color-mix(in srgb, var(--miss) 35%, var(--line)); }
}
@media (min-width: 901px) and (max-height: 860px) {
  .side { padding-top: 14px; padding-bottom: 10px; gap: 10px; }
  .side .nav a { padding: 6px 10px; gap: 10px; font-size: 0.9rem; }
  .side .nav a svg { width: 28px; height: 28px; padding: 5px; }
}

/* phone "Více": the bottom bar stays on top (Více closes it again), ✕ and a grip to swipe down */
@media (max-width: 760px) {
  .more-sheet { z-index: 75; }
  .more-card { padding-top: 0; }
  .more-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; height: 40px; margin: 0 -16px 8px; background: var(--panel); border-radius: 22px 22px 0 0; touch-action: none; }
  .more-top .more-grip { margin: 0; }
  .more-x { position: absolute; right: 12px; top: 6px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); font-size: 0.95rem; cursor: pointer; }
}
/* PC side panel: small buttons may wrap to two lines instead of being cut */
@media (min-width: 901px) {
  .side-foot .btn-ghost { white-space: normal; text-overflow: clip; font-size: 0.76rem; text-align: left; }
}

/* ===================== Nastavení (jako na iPhonu) ===================== */
.set-shell { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 22px; align-items: start; }
.set-list { position: sticky; top: 16px; display: flex; flex-direction: column; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; }
.set-gt { margin: 14px 12px 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.set-gt:first-child { margin-top: 0; }
.set-group { border-radius: 14px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.set-row.on { background: color-mix(in srgb, var(--primary) 13%, transparent); }
.set-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ic); font-size: 1rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.set-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-txt b { font-weight: 600; font-size: 0.94rem; }
.set-txt small { color: var(--ink-3); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-chev { flex: none; color: var(--ink-3); font-size: 1.3rem; line-height: 1; }
.set-detail { display: block !important; min-width: 0; }
.set-detail > section { margin: 0 0 16px; }
.set-detail > section[hidden] { display: none !important; }
.set-back { display: none; }
.ios-list { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.ios-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 14px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; flex-wrap: wrap; }
.ios-row + .ios-row { border-top: 1px solid var(--line); }
.ios-link { cursor: pointer; }
.ios-link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ios-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.ios-t b { font-weight: 600; font-size: 0.94rem; }
.ios-t small { color: var(--ink-3); font-size: 0.8rem; }
.set-seg { flex: none; }
.set-seg button { min-width: 44px; }
.bx-help { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 0.88rem; }
.bx-help p { margin: 0 0 6px; }
.bx-help ul { margin: 0 0 8px; padding-left: 18px; }
.bx-months { display: grid; gap: 8px; margin-top: 10px; }
.bx-m { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px 12px; }
.bx-m summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.bx-m summary::-webkit-details-marker { display: none; }
.bx-m summary .bx-main { margin-left: auto; }
.bx-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.bx-sub { margin: 8px 0 4px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.bx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bx-link { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-size: 0.8rem; text-decoration: none; white-space: nowrap; }
.bx-link:hover { border-color: var(--primary); }
.bx-where { margin: 10px 0 0; font-size: 0.84rem; opacity: 0.95; }
.bx-where a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bx-where-pay { margin: 0 0 10px; color: var(--ink-2); }
/* text size on this device (Moje nastavení) */
html[data-fs="s"] body { zoom: 0.92; }
html[data-fs="l"] body { zoom: 1.1; }
html[data-fs="xl"] body { zoom: 1.2; }
@media (max-width: 900px) {
  .set-shell { grid-template-columns: 1fr; gap: 0; }
  .set-list { position: static; max-height: none; overflow: visible; }
  .set-shell.is-detail .set-list { display: none; }
  .set-shell:not(.is-detail) .set-detail { display: none !important; }
  .set-back { display: inline-flex; align-items: center; margin: -4px 0 10px -6px; padding: 6px 8px; border: 0; background: none; color: var(--primary); font: 600 1rem var(--body, system-ui); cursor: pointer; }
  .set-row { padding: 12px 14px; }
}

/* Tabulky: formula bar, find, undo */
.gx-fx { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.gx-ref { flex: none; min-width: 64px; padding: 3px 8px; border-radius: 6px; background: var(--panel-2); font: 600 0.8rem var(--mono, monospace); text-align: center; }
.gx-fxi { color: var(--ink-3); font-style: italic; }
.gx-fxin { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; padding: 4px 0; }
.gx-fxin[readonly] { color: var(--ink-3); }
.gx-sum { flex: none; color: var(--ink-3); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-find { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gx-find .input { max-width: 260px; }
.gx td.is-found { box-shadow: inset 0 0 0 2px #f59e0b; }
.gx-ur { display: inline-flex; gap: 2px; padding-right: 6px; border-right: 1px solid var(--line); }
.gx-ur .btn { min-width: 32px; font-size: 1rem; }
@media (max-width: 700px) { .gx-sum { display: none; } .gx-fx { padding: 3px 6px; } }
.set-list > * { flex: none; }
.set-shell { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
.set-shell > * { min-width: 0; }
@media (max-width: 900px) { .set-shell { grid-template-columns: minmax(0, 1fr); } }

/* crew report with a name that fits more than one person */
.cm-warn { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: #fff4d6; color: #7a4b00; font-size: 13px; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cm-warn { background: #3d2e0a; color: #ffd27a; } }
:root:where([data-theme="dark"]) .cm-warn { background: #3d2e0a; color: #ffd27a; }

/* Nastavení – account card on top (like the Apple ID row) and iOS-style groups */
.set-me { padding-top: 14px; padding-bottom: 14px; }
.set-ava { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; color: #fff; background: linear-gradient(135deg, #ff8a1e, #e8463a); box-shadow: 0 4px 12px -4px rgba(232, 70, 58, 0.55); }
.set-me .set-txt b { font-size: 1.02rem; }
.ios-gt { margin: 18px 4px 6px; }
.ios-row .set-ico { margin-right: 10px; }
.ios-row.ios-link { display: flex; align-items: center; }
.ios-out { margin-top: 18px; }
.ios-out .ios-row { justify-content: center; font-weight: 700; color: var(--miss); }
/* side panel bottom: only appearance + language */
.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-foot .lang-btn { flex: none; padding: 5px 9px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.78rem; }
.ios-row.ios-link { flex-wrap: nowrap; gap: 0; cursor: pointer; }
.ios-row.ios-link .ios-t { flex: 1; min-width: 0; }
.ios-row.ios-link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.side-foot { flex-direction: column; align-items: stretch; }
.side-foot .theme-seg { display: flex; }
.side-foot .theme-seg button { flex: 1; }
.side-foot .lang-btn { justify-content: center; }

/* person dialog: own working hours */
.wh-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.wh-row label { display: grid; gap: 4px; font-size: 0.8rem; color: var(--ink-3); }
.wh-row .input { width: 120px; }
.wh-row > span { padding-bottom: 10px; color: var(--ink-3); }
.wh-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--ink-2); white-space: nowrap; }
.p-aka { font-size: 0.74rem; color: var(--ink-3); font-style: italic; }
body:not(.help-on) .more-help { display: none; }
body.help-mode .help-hover { outline: 2px solid #f59e0b !important; outline-offset: 2px; cursor: help; }
body.help-mode #view, body.help-mode .side, body.help-mode .tabbar { cursor: help; }
.tip-bubble .tip-dim { color: #9ca3af; font-size: 0.78rem; }
.tip-bubble .tip-how { color: #fcd34d; font-size: 0.8rem; }
.tip-bubble .tip-person p { margin: 5px 0 0; }
body.help-mode .tip-bubble { max-width: min(380px, calc(100vw - 16px)); }
/* phones: Uložit / Zrušit always visible at the bottom of a dialog, keyboard-safe height */
@media (max-width: 900px) {
  .dialog, .dialog.dialog-wide { max-height: 92dvh; }
  .dialog > footer { position: sticky; bottom: 0; z-index: 3; background: var(--glass-strong, var(--panel)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line-soft, var(--line)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* touch screens: big enough to hit with a finger */
@media (pointer: coarse) {
  .page-q { width: 30px; height: 30px; font-size: 0.9rem; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .check-line { min-height: 36px; }
  .linkish, .add-ph { padding-top: 6px; padding-bottom: 6px; }
  .hist-range { height: 30px; }
  .gx-dot { width: 32px; height: 32px; }
}
/* app: no signal banner + pull to refresh */
.net-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 400; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; background: #b45309; color: #fff; font: 600 0.88rem/1.35 var(--body, system-ui); text-align: center; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5); }
.net-bar[hidden] { display: none; }
.ptr { position: fixed; left: 50%; top: calc(6px + env(safe-area-inset-top, 0px)); z-index: 350; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); color: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4); font: 800 1.3rem var(--body, system-ui); transform: translate(-50%, -60px); opacity: 0; pointer-events: none; }
.ptr.on { opacity: 1; }
.ptr.ready { color: var(--accent, #e11d48); }
.ptr.spin span { display: inline-block; animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
/* installed app: no text selection on buttons, no grey tap flash, no rubber-band bounce of the page */
body.is-app { overscroll-behavior-y: contain; }
body.is-app button, body.is-app .tabbar a, body.is-app .nav a { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.load-err { display: grid; justify-items: center; gap: 12px; padding: 32px 18px; text-align: center; }
.load-err p { margin: 0; max-width: 420px; }
/* ---------- Moje nastavení: barva, hustota, rohy, kontrast, pozadí ---------- */
:root[data-accent] { --primary: var(--acc-l); --primary-soft: color-mix(in srgb, var(--acc-l) 13%, transparent); }
@media (prefers-color-scheme: dark) { :root[data-accent]:not([data-theme="light"]) { --primary: var(--acc-d); --primary-ink: #0b1220; --primary-soft: color-mix(in srgb, var(--acc-d) 16%, transparent); } }
:root[data-accent][data-theme="dark"] { --primary: var(--acc-d); --primary-ink: #0b1220; --primary-soft: color-mix(in srgb, var(--acc-d) 16%, transparent); }
:root[data-density="compact"] td, :root[data-density="compact"] th { padding-top: 4px; padding-bottom: 4px; }
:root[data-density="compact"] .panel-pad { padding: 12px 14px; }
:root[data-density="compact"] .ios-row { padding-top: 7px; padding-bottom: 7px; min-height: 0; }
:root[data-density="compact"] .btn { padding-top: 6px; padding-bottom: 6px; }
:root[data-density="compact"] .page, :root[data-density="compact"] #view { --gap: 10px; }
:root[data-density="comfy"] td, :root[data-density="comfy"] th { padding-top: 12px; padding-bottom: 12px; }
:root[data-density="comfy"] .panel-pad { padding: 24px 26px; }
:root[data-density="comfy"] .ios-row { padding-top: 15px; padding-bottom: 15px; }
:root[data-density="comfy"] .btn { padding-top: 11px; padding-bottom: 11px; }
:root[data-radius="square"] { --radius: 6px; }
:root[data-radius="square"] :is(.panel, .btn, .ios-list, .dialog, .input, .select, .stat, .site-card, .seg, .tabbar a, .nav a, .cm, .tip-bubble, .toast) { border-radius: 6px !important; }
:root[data-radius="round"] { --radius: 24px; }
:root[data-radius="round"] :is(.panel, .ios-list, .dialog, .stat, .site-card) { border-radius: 24px !important; }
:root[data-radius="round"] :is(.btn, .input, .select, .seg) { border-radius: 999px !important; }
:root[data-contrast="high"] { --ink-2: #1f2a3c; --ink-3: #3c4a61; --line: #9aa8bd; }
@media (prefers-color-scheme: dark) { :root[data-contrast="high"]:not([data-theme="light"]) { --ink-2: #e2e8f2; --ink-3: #c3cee0; --line: #4a5f82; } }
:root[data-contrast="high"][data-theme="dark"] { --ink-2: #e2e8f2; --ink-3: #c3cee0; --line: #4a5f82; }
:root[data-bg="off"] body::before { display: none; }
/* colour swatches in Moje nastavení */
.acc-row { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-sw { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line); background: var(--sw); cursor: pointer; padding: 0; }
.acc-sw.on { box-shadow: 0 0 0 3px var(--ink); }
.acc-sw:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.look-prev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ios-row.ios-col { flex-direction: column; align-items: stretch; gap: 10px; }
/* one colour for the whole app: also replaces the per-page colours of buttons, tabs, headings */
:root[data-accent] body, :root[data-accent] body[data-view] { --accent: var(--primary); }
/* new logo mark next to the wordmark (same as the app icon) */
.brand-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; box-shadow: 0 4px 12px -4px rgba(8, 24, 54, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.side .brand { gap: 10px; }
@media (max-width: 900px) { .brand-ico { width: 28px; height: 28px; border-radius: 8px; } }
/* Dnes header: the Box line spans the whole width (it used to push the title to the middle) */
.hero .bx-where { grid-column: 1 / -1; margin: 0; }
/* sidebar search on one line */
.side-search > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-mark { display: inline-flex; align-items: center; gap: 14px; }
.login-ico { width: 52px; height: 52px; border-radius: 14px; }
/* desktop sidebar: logo mark + BIZUB + DOCHÁZKA must fit the panel */
@media (min-width: 901px) {
  .side .brand { gap: 8px; }
  .side .brand-ico { width: 30px; height: 30px; border-radius: 9px; }
  .side .brand-word { font-size: 1.6rem; }
  .side .brand-sub { font-size: 0.56rem; padding: 3px 6px 2px; letter-spacing: 0.1em; }
}
/* breaks: calendar marker + day editor rows */
.c-work .brk-mark { position: absolute; bottom: 1px; left: 3px; font-size: 0.6rem; line-height: 1; font-style: normal; }
.br-list { display: grid; gap: 6px; margin: 6px 0; }
.br-list:empty { display: none; }
.br-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.br-row .input { padding-left: 8px; padding-right: 4px; min-width: 0; }
.br-edit > span small { display: block; font-weight: 400; margin-top: 2px; }
/* Dnes: end of the work day */
.de-bar { display: flex; height: 8px; border-radius: 99px; background: var(--panel-2, rgba(127,127,127,.15)); overflow: hidden; margin: 2px 0 10px; }
.de-bar i { width: var(--w); background: var(--in, #16a34a); }
.de-bar i.a { background: var(--miss, #f59e0b); }
.de-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.de-list li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: 0.9rem; }
.de-list li small { display: block; color: var(--ink-3); font-size: 0.78rem; }
.de-list li time { font-family: var(--mono); font-weight: 600; }
.de-list li.auto time { color: var(--miss, #d97706); }
.de-list li.open time { color: var(--ink-3); font-family: inherit; font-weight: 500; font-size: 0.8rem; }
/* Nastavení → QR: phone screen gallery */
.qr-screens { margin-top: 8px; }
.qr-rules-card { margin-bottom: 14px; }
.qr-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.qr-scr { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); align-items: start; }
.qr-scr.off { opacity: 0.55; }
.qr-scr.off .qr-phone { filter: grayscale(1); }
.qr-scr h3 { margin: 0 0 4px; font-size: 1rem; }
.qr-scr .meta { margin: 0 0 8px; }
.qr-always { color: var(--in, #16a34a); font-weight: 600; }
.qr-phone { width: 150px; height: 300px; border-radius: 20px; overflow: hidden; border: 4px solid #0b1220; background: #081836; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.6); position: relative; }
.qr-phone iframe { position: absolute; top: 0; left: 0; width: 375px; height: 750px; border: 0; transform: scale(0.4); transform-origin: 0 0; pointer-events: none; }
.qr-scr-body { min-width: 0; display: grid; gap: 6px; }
.qr-txt summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--accent, var(--primary)); padding: 4px 0; }
.qr-txt .field { margin-top: 6px; }
.qr-kinds { display: grid; gap: 8px; }
.qr-kind { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px; border-radius: 12px; background: var(--panel-2, rgba(127, 127, 127, 0.08)); }
.qr-kind .input-sm { padding: 5px 8px; font-size: 0.85rem; }
.qr-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; margin-top: 8px; max-height: 260px; overflow: auto; }
.qr-people.dim { opacity: 0.5; }
.qr-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0; background: linear-gradient(transparent, var(--bg, transparent) 30%); z-index: 2; }
@media (max-width: 560px) { .qr-scr { grid-template-columns: 1fr; } .qr-phone { margin: 0 auto; } }
/* ---------- David v3: look ---------- */
.dv-ava { position: relative; background: conic-gradient(from 210deg, #8b5cf6, #2563eb, #06b6d4, #8b5cf6); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); font-family: var(--brand); font-size: 1.05rem; }
.dv-ava > span { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.dv-ava.big { width: 44px; height: 44px; font-size: 1.25rem; background: conic-gradient(from 210deg, #8b5cf6, #2563eb, #06b6d4, #8b5cf6); box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
.dv-ava .dv-on { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid var(--panel); }
.david-fab { padding: 5px 18px 5px 5px; background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0891b2 100%); box-shadow: 0 14px 30px -12px rgba(76, 29, 149, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.david-fab .dv-ava { background: #fff; color: #6d28d9; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .david-fab::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(124, 58, 237, 0.45); animation: dvPulse 2.6s ease-out infinite; pointer-events: none; }
  @keyframes dvPulse { 0% { transform: scale(0.96); opacity: 0.9; } 70%, 100% { transform: scale(1.12); opacity: 0; } }
}
.david { background: var(--panel); }
.david header { padding: 14px 16px; background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 16%, var(--panel)), color-mix(in srgb, #0891b2 10%, var(--panel))); border-bottom: 1px solid var(--line); }
.david header b { font-family: var(--brand); font-size: 1.2rem; letter-spacing: 0.01em; }
.david header small { display: flex; align-items: center; gap: 6px; }
.dv-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.dv-log { padding: 16px 14px; gap: 12px; background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, #7c3aed 6%, transparent), transparent 60%); }
.dv-m { font-size: 0.92rem; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.45); }
.dv-d { position: relative; margin-left: 30px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px 16px 16px 6px; }
.dv-d::before { content: "D"; position: absolute; left: -32px; bottom: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 0.72rem var(--brand); color: #fff; background: conic-gradient(from 210deg, #8b5cf6, #2563eb, #06b6d4, #8b5cf6); }
.dv-typing::before { content: "D"; }
.dv-u { background: linear-gradient(135deg, #7c3aed, #2563eb); border-radius: 16px 16px 6px 16px; }
.dv-first { max-width: 94%; border: 1px solid color-mix(in srgb, #7c3aed 30%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, #7c3aed 9%, var(--panel-2)), var(--panel-2)); }
.dv-first p + p { margin-top: 8px; }
.dv-hello { font: 800 1.15rem var(--brand); }
.dv-cig { color: var(--ink-2); font-style: italic; }
.dv-chips { padding: 10px 12px; gap: 8px; }
.dv-chips button { padding: 7px 12px; background: var(--panel-2); font-weight: 600; transition: border-color 0.15s, color 0.15s, transform 0.1s; }
.dv-chips button:active { transform: scale(0.97); }
.dv-f { align-items: flex-end; }
.dv-f textarea { border-radius: 22px; padding: 11px 16px; background: var(--panel-2); }
.dv-f .btn-primary { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #7c3aed, #2563eb); border: 0; box-shadow: 0 8px 18px -8px rgba(76, 29, 149, 0.8); }
/* "Je čas jít na cigo" card above David's button */
.dv-nudge { position: fixed; right: 18px; bottom: 82px; z-index: 95; display: flex; gap: 10px; align-items: flex-start; width: min(330px, calc(100vw - 24px)); padding: 14px; border-radius: 20px 20px 6px 20px; background: var(--panel); border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--line)); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.55); animation: nudgeIn 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); }
.dv-nudge.out { opacity: 0; transform: translateY(10px) scale(0.96); transition: 0.25s; }
@keyframes nudgeIn { from { opacity: 0; transform: translateY(16px) scale(0.92); } }
.dv-nudge .dv-ava { flex: none; width: 34px; height: 34px; }
.dv-n-body { flex: 1; min-width: 0; display: grid; gap: 8px; position: relative; }
.dv-n-body p { margin: 0 22px 0 0; font-size: 0.95rem; }
.dv-n-x { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
.dv-n-timer { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, #f97316 14%, var(--panel-2)), var(--panel-2)); }
.dv-n-timer .smk { font-size: 2rem; line-height: 1; }
.dv-n-timer b { font: 800 2rem var(--mono); font-variant-numeric: tabular-nums; }
.dv-n-timer small { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.dv-n-timer[hidden] { display: none; }
.dv-n-cancel { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .dv-n-timer .smk { animation: smk 2.4s ease-in-out infinite; } @keyframes smk { 50% { transform: rotate(-8deg) translateY(-2px); } } }
@media (max-width: 760px) { .dv-nudge { right: 12px; bottom: calc(136px + env(safe-area-inset-bottom, 0px)); } }
/* QR settings v2: scope, demo, show */
.qr-scope { margin-bottom: 14px; }
.qr-scope-b { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.qr-demo-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; margin-bottom: 16px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, #0891b2 10%, var(--panel)), var(--panel)); border: 1px solid var(--line); }
.qr-demo-phone { width: 300px; height: 620px; border-radius: 34px; border: 8px solid #0b1220; overflow: hidden; background: #081836; box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.7); }
.qr-demo-phone { position: relative; }
.qr-demo-phone iframe { position: absolute; top: 0; left: 0; width: 375px; height: 755px; border: 0; display: block; transform: scale(0.757); transform-origin: 0 0; }
.qr-demo-info h3 { margin: 0 0 6px; font-size: 1.15rem; }
.qr-demo-tips { margin: 10px 0 14px; padding-left: 18px; display: grid; gap: 4px; font-size: 0.9rem; }
.qr-show { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--panel-2, rgba(127, 127, 127, 0.08)); }
.qr-sub { margin: 4px 0 0; font-weight: 600; font-size: 0.86rem; }
.qr-kind-in { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 760px) { .qr-demo-wrap { grid-template-columns: 1fr; } .qr-demo-phone { margin: 0 auto; } }
/* QR settings v3: compact tiles, one screen opens in a dialog */
.qr-gal-h { margin: 6px 0 8px; }
.qr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-bottom: 16px; }
.qr-tile { display: grid; gap: 6px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.qr-tile:hover, .qr-tile:focus-visible { transform: translateY(-2px); border-color: var(--accent, var(--primary)); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.5); }
.qr-tile.off .qr-mini { filter: grayscale(1); opacity: 0.55; }
.qr-mini { position: relative; display: block; width: 100%; aspect-ratio: 375 / 560; border-radius: 12px; overflow: hidden; background: #081836; border: 3px solid #0b1220; }
.qr-mini iframe { position: absolute; top: 0; left: 0; width: 375px; height: 700px; border: 0; transform-origin: 0 0; transform: scale(var(--qs, 0.3)); pointer-events: none; }
.qr-tile-t { display: grid; gap: 3px; }
.qr-tile-t b { font-size: 0.84rem; line-height: 1.2; }
.qr-badge { justify-self: start; padding: 1px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; }
.qr-badge.on { background: color-mix(in srgb, var(--in, #16a34a) 18%, transparent); color: var(--in, #16a34a); }
.qr-badge.no { background: color-mix(in srgb, var(--ink-3) 18%, transparent); color: var(--ink-3); }
.qr-badge.al { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.qr-tile-e { font-size: 0.76rem; color: var(--ink-3); font-weight: 600; }
.qr-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.qr-two .qr-box { margin: 0; }
.qr-dlg { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
.qr-dlg-phone { position: relative; width: 240px; height: 470px; border-radius: 26px; overflow: hidden; border: 6px solid #0b1220; background: #081836; }
.qr-dlg-phone iframe { position: absolute; top: 0; left: 0; width: 375px; height: 735px; border: 0; transform: scale(0.608); transform-origin: 0 0; pointer-events: none; }
.qr-dlg-set { display: grid; gap: 8px; min-width: 0; }
.dialog.dialog-wide:has(.qr-dlg) { width: min(780px, 100%); }
@media (max-width: 700px) {
  .qr-dlg { grid-template-columns: 1fr; } .qr-dlg-phone { margin: 0 auto; width: 200px; height: 330px; } .qr-dlg-phone iframe { transform: scale(0.512); }
  .qr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .qr-tile { padding: 6px; gap: 4px; border-radius: 12px; }
  .qr-mini { aspect-ratio: 375 / 520; border-width: 2px; border-radius: 9px; }
  .qr-tile-t b { font-size: 0.72rem; } .qr-badge { font-size: 0.7rem; padding: 0 6px; } .qr-tile-e { display: none; }
}
/* ---------- Nastavení v3: header with search and status, calmer list, card sections ---------- */
.page-head.set-ph { display: none; }
.set-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 22px; align-items: center; margin-bottom: 18px; padding: 20px 22px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, #8b5cf6 20%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--panel)), var(--panel)); border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.55); }
.set-hero-l { display: flex; align-items: center; gap: 14px; }
.set-hero-l b { display: block; font: 800 1.45rem/1.15 var(--brand); }
.set-hero-l small { color: var(--ink-3); font-size: 0.88rem; }
.set-hero-ava { width: 54px; height: 54px; flex: none; border-radius: 18px; display: grid; place-items: center; font: 800 1.2rem var(--brand); color: #fff; background: linear-gradient(135deg, #f97316, #e11d48); box-shadow: 0 10px 22px -10px rgba(225, 29, 72, 0.7); }
.set-search { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 16px -14px rgba(0, 0, 0, 0.5); }
.set-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.set-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: 500 0.98rem var(--body); outline: none; }
.set-search kbd { font: 600 0.72rem var(--mono); color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.set-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.set-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: 600 0.82rem var(--body); cursor: pointer; transition: transform 0.12s, border-color 0.12s; }
.set-chip:hover { transform: translateY(-1px); border-color: var(--primary); }
.set-chip.ok { background: color-mix(in srgb, var(--in, #16a34a) 12%, var(--panel)); border-color: color-mix(in srgb, var(--in, #16a34a) 35%, var(--line)); color: color-mix(in srgb, var(--in, #16a34a) 75%, var(--ink)); }
.set-chip.bad { background: color-mix(in srgb, #f59e0b 13%, var(--panel)); border-color: color-mix(in srgb, #f59e0b 40%, var(--line)); color: color-mix(in srgb, #b45309 80%, var(--ink)); }
.set-found { grid-column: 1 / -1; margin: -4px 2px 0; font-size: 0.85rem; color: var(--ink-3); }
/* category list */
.set-group { border-radius: 16px; box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.5); }
.set-row { position: relative; padding: 11px 14px; transition: background 0.12s; }
.set-row.on { background: color-mix(in srgb, var(--primary) 11%, var(--panel)); }
.set-row.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); }
.set-ico { width: 36px; height: 36px; border-radius: 11px; font-size: 1.05rem; background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 82%, #fff), var(--ic)); box-shadow: 0 6px 14px -8px var(--ic), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.set-row[hidden], .set-group[hidden], .set-gt[hidden] { display: none !important; }
/* detail: each section a calm card with a clear title */
.set-detail > section.panel { border-radius: 22px; padding: 22px 24px; box-shadow: 0 18px 40px -32px rgba(0, 0, 0, 0.55); }
.set-detail .section-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft, var(--line)); }
.set-detail .section-title h2 { font: 800 1.35rem var(--brand); margin: 0; }
.set-detail .label, .set-detail .ios-gt { letter-spacing: 0.07em; }
.ios-list { border-radius: 16px; background: var(--panel); }
.ios-row { min-height: 54px; }
.ios-row:is(button):hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ios-row.ios-col { display: grid; justify-content: stretch; align-items: start; gap: 12px; min-height: 0; }
.set-detail fieldset { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 16px; margin: 0 0 14px; background: var(--panel); }
.set-detail fieldset legend { padding: 0 6px; font-weight: 800; }
.pref-sw { padding: 8px 6px; border-radius: 12px; transition: background 0.12s; }
.pref-sw:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
@media (max-width: 900px) {
  .set-hero { grid-template-columns: 1fr; padding: 16px; border-radius: 18px; margin: 0 0 14px; }
  .set-hero-l b { font-size: 1.2rem; } .set-hero-ava { width: 44px; height: 44px; border-radius: 14px; font-size: 1rem; }
  .set-search kbd { display: none; }
  .set-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .set-chip { flex: none; }
  .set-detail > section.panel { padding: 16px; border-radius: 18px; }
  .set-row { padding: 9px 12px; } .set-ico { width: 32px; height: 32px; border-radius: 10px; }
  .set-shell.is-detail ~ .set-hero, .set-hero:has(+ .set-shell.is-detail) { display: none; }
}

/* Kalendář: own order of people (↕ Pořadí) */
.ord-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.sheet .ord-ctl { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; vertical-align: middle; }
.sheet .ord-grip { font-style: normal; color: var(--ink-3); cursor: grab; letter-spacing: -2px; padding: 0 4px 0 0; user-select: none; }
.sheet .ord-b { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 0.68rem; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; transition: background .15s, transform .1s; }
.sheet .ord-b:hover:not(:disabled) { background: var(--ground); border-color: var(--ink-3); }
.sheet .ord-b:active:not(:disabled) { transform: scale(.92); }
.sheet .ord-b:disabled { opacity: .3; cursor: default; }
.sheet tr.ord-row { cursor: grab; }
.sheet tr.ord-drag { opacity: .45; }
.sheet tr.ord-over-top > * { box-shadow: inset 0 3px 0 var(--in, #2563eb); }
.sheet tr.ord-over-bot > * { box-shadow: inset 0 -3px 0 var(--in, #2563eb); }
.sheet tr.ord-row .name { max-width: 300px; }
@media (max-width: 700px) {
  .sheet .ord-grip { display: none; }
  .sheet .ord-b { width: 30px; height: 30px; font-size: .75rem; }
  .sheet tr.ord-row .name { max-width: 210px; }
}
.qr-dlg-nav { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.qr-dlg-nav .icon-btn { width: 38px; height: 38px; font-size: 1.2rem; }
/* phones: the demo phone and its tips fit the screen (no sideways scrolling in QR settings) */
.qr-demo-wrap > * { min-width: 0; }
@media (max-width: 760px) { .qr-demo-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 440px) {
  .qr-demo-wrap { padding: 12px; gap: 14px; }
  .qr-demo-phone { width: 260px; height: 507px; border-radius: 30px; }
  .qr-demo-phone iframe { transform: scale(0.651); }
}
@media (max-width: 340px) {
  .qr-demo-phone { width: 230px; height: 446px; }
  .qr-demo-phone iframe { transform: scale(0.571); }
}

/* Tabulky: format bar like Google Sheets */
.gx-fmt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 2px 6px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.gx-fb { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--ink); font: 600 0.92rem/1 inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 1px; flex-direction: column; list-style: none; }
.gx-fb::-webkit-details-marker { display: none; }
.gx-fb:hover { background: var(--panel); border-color: var(--line); }
.gx-fb.on { background: color-mix(in srgb, var(--primary) 16%, var(--panel)); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); color: var(--primary); }
.gx-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.gx-a { font-weight: 800; line-height: 1; }
.gx-bar-c { display: block; width: 16px; height: 3px; border-radius: 2px; background: currentColor; opacity: .25; }
.gx-bar-c[class*="fcb-"], .gx-bar-c[class*="mk-"] { opacity: 1; }
.gx-pop { position: relative; }
.gx-pop > .gx-pal { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; grid-template-columns: repeat(6, 26px); gap: 5px; padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .35); }
.gx-pop > .gx-pal-t { grid-template-columns: 1fr; min-width: 170px; }
.gx-pop > .gx-pal-t .btn { justify-content: flex-start; }
.gx-pal .gx-dot { width: 26px; height: 26px; font-weight: 800; }
.gx-dot.fcd-yellow, .fcb-yellow { color: #b45309; background-color: #b45309; } .gx-dot.fcd-orange, .fcb-orange { color: #ea580c; background-color: #ea580c; }
.gx-dot.fcd-red, .fcb-red { color: #dc2626; background-color: #dc2626; } .gx-dot.fcd-pink, .fcb-pink { color: #db2777; background-color: #db2777; }
.gx-dot.fcd-purple, .fcb-purple { color: #7c3aed; background-color: #7c3aed; } .gx-dot.fcd-blue, .fcb-blue { color: #1d4ed8; background-color: #1d4ed8; }
.gx-dot.fcd-cyan, .fcb-cyan { color: #0e7490; background-color: #0e7490; } .gx-dot.fcd-green, .fcb-green { color: #15803d; background-color: #15803d; }
.gx-dot.fcd-gray, .fcb-gray { color: #6b7280; background-color: #6b7280; } .gx-dot.fcd-dark, .fcb-dark { color: #0f172a; background-color: #0f172a; }
.gx-pal .gx-dot[class*="fcd-"] { background-color: var(--panel); }
.gx td.mk-purple, .gx-dot.mk-purple, .gx-bar-c.mk-purple { background: #e6dafb; } .gx td.mk-pink, .gx-dot.mk-pink, .gx-bar-c.mk-pink { background: #fbd5e8; }
.gx td.mk-cyan, .gx-dot.mk-cyan, .gx-bar-c.mk-cyan { background: #ccf1f6; } .gx td.mk-gray, .gx-dot.mk-gray, .gx-bar-c.mk-gray { background: #e5e7eb; }
.gx td.mk-dark, .gx-dot.mk-dark, .gx-bar-c.mk-dark { background: #334155; } .gx td.mk-dark { color: #fff; }
.gx-bar-c.mk-yellow { background: #f5d84a; } .gx-bar-c.mk-green { background: #4ade80; } .gx-bar-c.mk-red { background: #f87171; } .gx-bar-c.mk-blue { background: #60a5fa; } .gx-bar-c.mk-orange { background: #fb923c; }
.gx td.f-b { font-weight: 700; } .gx td.f-i { font-style: italic; } .gx td.f-u { text-decoration: underline; } .gx td.f-s { text-decoration: line-through; } .gx td.f-u.f-s { text-decoration: underline line-through; }
.gx td.fc-yellow { color: #b45309; } .gx td.fc-orange { color: #ea580c; } .gx td.fc-red { color: #dc2626; } .gx td.fc-pink { color: #db2777; } .gx td.fc-purple { color: #7c3aed; }
.gx td.fc-blue { color: #1d4ed8; } .gx td.fc-cyan { color: #0e7490; } .gx td.fc-green { color: #15803d; } .gx td.fc-gray { color: #6b7280; } .gx td.fc-dark { color: #0f172a; }
.gx td.bd-all { box-shadow: inset 0 0 0 2px #0f172a; } .gx td.bd-bottom { box-shadow: inset 0 -3px 0 #0f172a; }
.gx td.bd-all.sel, .gx td.bd-bottom.sel { box-shadow: inset 0 0 0 2px #0f172a, inset 0 0 0 999px rgba(37, 99, 235, 0.10); }
.gx td.sz-s { font-size: 11px; } .gx td.sz-l { font-size: 15px; } .gx td.sz-xl { font-size: 18px; }
@media (max-width: 700px) { .gx-fmt { border: 0; padding: 0; order: 5; width: 100%; } .gx-fb { min-width: 36px; height: 36px; } .gx-pop > .gx-pal { grid-template-columns: repeat(5, 32px); } .gx-pal .gx-dot { width: 32px; height: 32px; } }
.gx-sum { display: inline-flex; gap: 10px; align-items: center; cursor: default; }
.gx-sum b { color: var(--ink); font-weight: 700; cursor: copy; }
@media (max-width: 700px) { .gx-fx { flex-wrap: wrap; } .gx-sum:not(:empty) { display: flex; flex-wrap: wrap; gap: 4px 10px; width: 100%; white-space: normal; padding-top: 2px; } }

/* Přehled: 🧾 Týden k fakturaci */
.inv { margin-bottom: 16px; }
/* head: title · Týden/Měsíc/Rok · ‹ period › */
.inv-head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.inv-head h2 { margin: 0; font-size: 1.1rem; }
.inv-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.inv-nav .icon-btn { width: 32px; height: 32px; }
.inv-per { min-width: 150px; text-align: center; font-size: .9rem; }
.inv-per::first-letter { text-transform: uppercase; }
/* totals: two numbers in a row, downloads at the end -- no boxes */
.inv-sum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 36px; margin: 16px 0 4px; }
.inv-tot { display: grid; gap: 1px; }
.inv-tot span { font-size: .78rem; color: var(--ink-3); font-weight: 600; }
.inv-tot b { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.inv-tot:first-child b { color: var(--orange, var(--accent)); }
.inv-tot small { color: var(--ink-3); font-size: .76rem; }
.inv-dl { display: flex; gap: 6px; margin-left: auto; }
.inv-warns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.inv-w { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #ffb4a8; background: #ff5a4a1c; border: 1px solid #ff5a4a40; }
.inv-w::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5a4a; }
.inv-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 12px; font-size: .82rem; color: var(--ink-3); }
.inv-s-ok { color: #5fd39a; } .inv-s-warn { color: #f5b04a; }
.inv-link { padding: 0; border: 0; background: none; color: var(--orange, var(--accent)); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.inv-link:hover { text-decoration: underline; }
.inv-empty { margin: 4px 0 0; }
.inv-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-list { display: grid; gap: 8px; }
.inv-site { border: 1px solid var(--line); border-left: 4px solid var(--sc); border-radius: 12px; background: var(--panel); overflow: hidden; }
.inv-sh { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.inv-sh b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-n { color: var(--ink-3); font-size: 0.86rem; white-space: nowrap; }
.inv-k { font-weight: 800; white-space: nowrap; min-width: 90px; text-align: right; }
.inv-sh .set-chev { transition: transform .2s; }
.inv-site.is-open .inv-sh .set-chev { transform: rotate(90deg); }
.inv-body { display: none; padding: 0 14px 14px; }
.inv-site.is-open .inv-body { display: block; animation: invIn .2s ease; }
@keyframes invIn { from { opacity: 0; transform: translateY(-4px); } }
.inv-t { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.inv-t th, .inv-t td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.inv-t th:first-child, .inv-t td:first-child { text-align: left; }
.inv-t th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 0.72rem; }
.inv-t tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
.inv-money { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-top: 12px; }
.inv-money .field { max-width: 150px; }
.inv-money dl { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font-size: 0.9rem; }
.inv-money dt { color: var(--ink-3); } .inv-money dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.inv-big { font-weight: 800; font-size: 1.05rem; }
.inv-set { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line); }
.inv-set > summary { cursor: pointer; font-weight: 600; font-size: .84rem; color: var(--ink-3); padding: 4px 0; }
.inv-set[open] > .inv-link { display: inline-block; margin: 10px 0 2px; font-size: .84rem; }
.inv-set-b { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; padding: 8px 0; }
.inv-set-b .field { max-width: 140px; }
.inv-recent { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-recent .pill { cursor: pointer; border: 1px solid var(--line); }
@media (max-width: 700px) { .inv-sh { flex-wrap: wrap; } .inv-sh b { flex-basis: calc(100% - 60px); } .inv-n { order: 3; } .inv-k { order: 4; margin-left: auto; } .inv-nav { margin-left: 0; width: 100%; justify-content: space-between; } .inv-per { flex: 1; } .inv-dl { margin-left: 0; width: 100%; } .inv-dl .btn { flex: 1; justify-content: center; } .inv-tot b { font-size: 1.45rem; } }

/* Fakturace: list of weekly statements */
.invl { display: grid; gap: 8px; }
.invl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.invl-row:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .45); }
.invl-main { flex: 1 1 420px; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.invl-no { flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; align-content: center; background: color-mix(in srgb, var(--primary) 14%, var(--panel-2)); color: var(--primary); font-weight: 800; font-size: 1.3rem; line-height: 1; }
.invl-no small { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .8; margin-top: 3px; }
.invl-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.invl-t small { color: var(--ink-3); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invl-t .chip-s { margin-right: 3px; }
.invl-n { display: grid; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invl-n small { color: var(--ink-2); font-weight: 700; }
.invl-s { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 210px; }
.invl-b { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-dlg { margin: 0; }
@media (max-width: 700px) {
  .invl-row { padding: 6px; }
  .invl-main { flex-wrap: wrap; gap: 10px; }
  .invl-t { flex-basis: calc(100% - 70px); }
  .invl-t small { white-space: normal; }
  .invl-n { text-align: left; }
  .invl-s { max-width: none; justify-content: flex-start; }
  .invl-b { width: 100%; padding: 0 8px 6px; }
  .invl-b .btn { flex: 1; justify-content: center; }
}
:root { --c-faktury: #0ea5e9; }
body[data-view="faktury"] { --accent: var(--c-faktury); }
.nav a[href="#faktury"], .tabbar a[href="#faktury"], .more-grid a[href="#faktury"] { --nc: var(--c-faktury); }

/* Zprávy: ✍️ Napsat do skupiny */
.wa-post { margin-bottom: 14px; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, #16a34a 30%, var(--line)); }
.wa-post-h { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, color-mix(in srgb, #16a34a 12%, var(--panel)), var(--panel)); border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.wa-post-h > span:nth-child(2) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.wa-post-h small { color: var(--ink-3); font-size: 0.82rem; }
.wa-post-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #16a34a; font-size: 1.2rem; flex: none; }
.wa-post-h .set-chev { transition: transform .2s; }
.wa-post.is-open .wa-post-h .set-chev { transform: rotate(90deg); }
.wa-post-b { display: none; gap: 10px; padding: 4px 16px 16px; }
.wa-post.is-open .wa-post-b { display: grid; animation: invIn .2s ease; }
.wa-post textarea { resize: vertical; min-height: 70px; }
.wa-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-quick .chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); font: inherit; font-size: 0.8rem; cursor: pointer; }
.wa-quick .chip:hover { border-color: #16a34a; color: var(--ink); }
.wa-uk { display: grid; gap: 6px; justify-items: start; }
.wa-uk .field { width: 100%; }
.wa-prev { display: grid; gap: 6px; }
.wa-bub { justify-self: end; max-width: min(520px, 100%); padding: 9px 12px 10px; border-radius: 12px 12px 4px 12px; background: #d9fdd3; color: #111b21; font-size: 0.92rem; line-height: 1.4; white-space: normal; word-break: break-word; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.wa-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.wa-act .muted { margin-right: auto; }
.cm.cm-out { margin-left: auto; background: color-mix(in srgb, #16a34a 14%, var(--panel)); border-color: color-mix(in srgb, #16a34a 35%, var(--line)); border-radius: 14px 14px 4px 14px; }
.act-outbound { background: color-mix(in srgb, #16a34a 18%, transparent); color: #15803d; }
.dialog header p { white-space: pre-line; }
@media (max-width: 700px) { .wa-act .btn { flex: 1; } .wa-act .muted { width: 100%; } }

/* ===== Tabulky v4: looks and feels like Google Sheets ===== */
.gx { font: 13px/1.3 Arial, Roboto, "Helvetica Neue", system-ui, sans-serif; color: #202124; }
.gx td.gx-c { border: 1px solid #e2e3e3; padding: 2px 6px; }
.gx td.is-head, .gx td.is-b.is-fix { border-color: #d0d4d9; }
.gx th.gx-cl, .gx th.gx-corner, .gx th.gx-rn { background: #f8f9fa; color: #5f6368; border: 1px solid #c4c7c5; font: 500 11px/1 Arial, Roboto, system-ui, sans-serif; transition: background .12s, color .12s; user-select: none; }
.gx th.gx-cl { cursor: s-resize; }
.gx th.gx-rn { cursor: e-resize; }
.gx th.gx-corner { cursor: se-resize; background: linear-gradient(135deg, #f8f9fa 50%, #e8eaed 50%); }
.gx th.hl { background: #d3e3fd; color: #0b57d0; font-weight: 700; }
.gx td.sel { box-shadow: inset 0 0 0 999px rgba(26, 115, 232, 0.10); }
.gx td.cur { outline: 2px solid #1a73e8; outline-offset: -2px; box-shadow: none; z-index: 1; }
.gx td.cur.sel { box-shadow: none; }
.gx td.is-ed:hover { background: inherit; }
.gx-fh { position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; background: #1a73e8; border: 1px solid #fff; cursor: crosshair; z-index: 3; }
.gx td.fill-pv { outline: 1px dashed #5f6368; outline-offset: -1px; }
.gx td.is-ref { box-shadow: inset 0 0 0 999px rgba(232, 113, 10, 0.12); outline: 2px dashed #e8710a; outline-offset: -2px; }
.gx td.is-fedit .gx-in { font-family: "Roboto Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; color: #1a73e8; }
.gx td.is-err { color: #d93025; font-weight: 600; }
.gx td.is-err::before { content: ""; position: absolute; top: 0; left: 0; border-style: solid; border-width: 6px 6px 0 0; border-color: #d93025 transparent transparent transparent; }
.gx td.is-tot { background: #f1f3f4; color: #202124; font-weight: 700; border-top: 2px solid #5f6368; }
.gx td.lvl-ok { background: #e6f4ea; } .gx td.lvl-bad { background: #fce8e6; color: #a50e0e; } .gx td.lvl-warn { background: #fef7e0; }
.gx-in { font-family: inherit; color: #202124; box-shadow: none; }
.gx-rs { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 5; }
.gx-rs:hover, .gx-rs.on { background: #1a73e8; opacity: .7; }
body.gx-resizing, body.gx-resizing * { cursor: col-resize !important; user-select: none !important; }
/* formula bar */
.gx-fx { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 8px 8px 0 0; border-bottom: 0; background: var(--panel); overflow: hidden; }
.gx-ref { min-width: 74px; padding: 7px 10px; font: 600 12.5px/1 "Roboto Mono", ui-monospace, Menlo, monospace; color: var(--ink); border-right: 1px solid var(--line); text-align: center; }
.gx-fxi { padding: 0 10px; color: var(--ink-3); font: italic 600 14px/1 Georgia, serif; border-right: 1px solid var(--line); align-self: stretch; display: grid; place-items: center; }
.gx-fxin { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); padding: 7px 10px; font: 13px/1.2 "Roboto Mono", ui-monospace, Menlo, monospace; }
.gx-scroll { border-radius: 0; border-color: var(--line); max-height: calc(100vh - 290px); }
/* status bar like at the bottom of Google Sheets */
.gx-status { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 6px 10px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: var(--panel-2); font-size: 0.78rem; color: var(--ink-3); min-height: 32px; }
.gx-st-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-st-l b { color: var(--primary); }
.gx-st-l .mono { color: var(--ink-2); }
.gx-status .gx-sum { margin-left: auto; padding: 3px 10px; border-radius: 6px; }
.gx-status .gx-sum:not(:empty) { background: var(--panel); border: 1px solid var(--line); }
/* toolbar: one rounded strip like Google */
.gx-bar { border-radius: 24px; padding: 6px 10px; background: color-mix(in srgb, #1a73e8 6%, var(--panel-2)); }
.gx-sigma { font-size: 1.05rem !important; font-weight: 800; }
.gx-fn i { font: italic 700 1.05rem/1 Georgia, serif; }
/* right-click menu and the ƒ list */
.gx-menu { position: fixed; z-index: 2000; min-width: 250px; max-width: min(420px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; padding: 6px 0; border-radius: 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 12px 32px -8px rgba(0, 0, 0, .35); animation: invIn .12s ease; }
.gx-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 7px 16px; background: none; border: 0; color: inherit; font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; }
.gx-menu button:hover:not(:disabled) { background: color-mix(in srgb, #1a73e8 10%, var(--panel)); }
.gx-menu button:disabled { opacity: .4; cursor: default; }
.gx-menu kbd { font: 0.74rem/1 "Roboto Mono", ui-monospace, monospace; color: var(--ink-3); background: none; border: 0; white-space: nowrap; }
.gx-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.gx-menu-h { margin: 2px 16px 6px; font-size: 0.75rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.gx-fnmenu button span b { color: #1a73e8; margin-right: 4px; }
/* Vlastní tabulky: start a new one */
.own-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
.own-tpl { display: grid; gap: 4px; justify-items: start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.own-tpl:hover { border-color: #1a73e8; transform: translateY(-2px); }
.own-tpl small { color: var(--ink-3); font-size: 0.8rem; }
.own-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, #1a73e8 14%, var(--panel)); color: #4f8ff0; font-size: 1.2rem; }
@media (max-width: 700px) { .gx-bar { border-radius: 14px; } .gx-status { flex-wrap: wrap; } .gx-st-l { white-space: normal; } .gx-ref { min-width: 56px; } }

/* Šichtovnice: everyone of the month as cards */
.sh-head { flex-wrap: wrap; }
.sh-people { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.sh-p { flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; transition: border-color .15s, background .15s, transform .15s; max-width: 240px; }
.sh-p:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); transform: translateY(-1px); }
.sh-p.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.sh-p.is-empty { opacity: .55; }
.sh-pt { display: grid; min-width: 0; }
.sh-pt b { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-pt small { color: var(--ink-3); font-size: 0.75rem; white-space: nowrap; }
.sh-open { font-style: normal; color: #d93025; font-weight: 700; }
.sh-all .p-ava { background: var(--primary); color: #fff; }

/* Výplaty: months as tabs + 📅 Po dnech */
.ps-months { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 6px 0 4px; }
.ps-mo { flex: none; display: grid; gap: 1px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; text-transform: capitalize; }
.ps-mo small { font-size: 0.72rem; color: var(--ink-3); text-transform: none; }
.ps-mo.is-cur small { color: #1a73e8; } .ps-mo.is-ok small { color: #188038; } .ps-mo.is-wait small { color: #b06000; }
.ps-mo.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.pd-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pd-list { display: grid; gap: 8px; }
.pd-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.pd-h { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pd-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-n { color: var(--ink-2); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-h .set-chev { transition: transform .2s; }
.pd-card.is-open .pd-h .set-chev { transform: rotate(90deg); }
.pd-b { display: none; padding: 0 14px 12px; }
.pd-card.is-open .pd-b { display: block; animation: invIn .2s ease; }
.pd-t { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.pd-t th, .pd-t td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.pd-t th { color: var(--ink-3); font-weight: 600; font-size: 0.78rem; }
.pd-t tbody tr { cursor: pointer; } .pd-t tbody tr:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.pd-t tr.is-we td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pd-t tr.is-abs td { color: var(--ink-3); }
.pd-t .pd-hrs { text-align: right; font-weight: 700; }
.pd-t .pd-miss { color: #d93025; font-weight: 700; }
.pd-t tfoot td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 0; }

/* Faktury */
.inv-tabs { margin: 4px 0 14px; }
.fa-form { display: grid; gap: 12px; }
.fa-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 14px; margin: 0; display: grid; gap: 8px; }
.fa-box legend { padding: 0 6px; font-weight: 700; color: var(--ink-2); font-size: 0.85rem; }
.fa-it { display: grid; grid-template-columns: 1fr 90px 70px 110px 120px 34px; gap: 6px; align-items: center; }
.fa-lt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fa-sum dl { display: grid; grid-template-columns: auto auto; gap: 3px 18px; justify-content: end; margin: 0; font-variant-numeric: tabular-nums; }
.fa-sum dt { color: var(--ink-3); } .fa-sum dd { margin: 0; text-align: right; }
.fa-sum .fa-pay { font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.fa-ppl summary { cursor: pointer; color: var(--ink-3); font-size: 0.85rem; }
.fa-ppl p { font-size: 0.82rem; color: var(--ink-2); }
@media (max-width: 700px) { .fa-it { grid-template-columns: 1fr 1fr; } .fa-it input:first-child { grid-column: 1 / -1; } }

/* 🛡️ Kontrola výpočtů */
.aud-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 12px 14px; border-radius: 12px; margin: 10px 0 12px; border: 1px solid var(--line); }
.aud-sum.ok { background: color-mix(in srgb, #16a34a 10%, var(--panel)); border-color: color-mix(in srgb, #16a34a 35%, var(--line)); }
.aud-sum.warn { background: color-mix(in srgb, #f59e0b 12%, var(--panel)); border-color: color-mix(in srgb, #f59e0b 40%, var(--line)); }
.aud-sum.bad { background: color-mix(in srgb, #dc2626 12%, var(--panel)); border-color: color-mix(in srgb, #dc2626 45%, var(--line)); }
.aud-sum b { font-size: 1.05rem; } .aud-sum span { color: var(--ink-3); font-size: 0.85rem; }
.aud-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.aud-area .label { margin: 0 0 4px; }
.aud-c { border-radius: 10px; padding: 2px 0; }
.aud-c summary { display: grid; grid-template-columns: 22px auto 1fr; gap: 6px; align-items: baseline; padding: 5px 8px; border-radius: 8px; cursor: pointer; list-style: none; }
.aud-c summary::-webkit-details-marker { display: none; }
.aud-c summary:hover { background: var(--panel-2); }
.aud-c summary i { font-style: normal; } .aud-c summary span { color: var(--ink-3); font-size: 0.8rem; grid-column: 2 / -1; }
.aud-c.lv-err summary b { color: #dc2626; } .aud-c.lv-warn summary b { color: #b06000; }
.aud-c ul { margin: 2px 0 6px 36px; padding: 0; font-size: 0.82rem; color: var(--ink-2); }
.aud-act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0 6px; }
.aud-set summary { cursor: pointer; font-weight: 600; color: var(--ink-2); padding: 6px 0; }
.aud-hist { display: flex; flex-wrap: wrap; gap: 6px; }
.nc { display: grid; gap: 10px; }
.nc-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.nc-t td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.nc-t td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.nc-t .muted { font-size: 0.78rem; }
.nc-net td { font-weight: 800; font-size: 1.08rem; background: color-mix(in srgb, #16a34a 12%, transparent); }
.nc-cost td { font-weight: 800; background: color-mix(in srgb, #f59e0b 12%, transparent); }
.nc-sep { color: var(--ink-3); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 14px !important; }
.body.fa-form, form.fa-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fa-box .pref-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fa-box .pref-row > .field { flex: 1 1 160px; min-width: 0; }
.fa-box > .field, .fa-box .field input { width: 100%; min-width: 0; }
.fa-it { grid-template-columns: minmax(0, 1fr) 84px 64px 100px 120px 34px; }
.dialog:has(.fa-form) { width: min(860px, 100%); }

/* who goes to work: the filter chips on every list of people */
.pf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); font: inherit; font-size: 0.84rem; cursor: pointer; transition: border-color .15s, background .15s; }
.pf-chip b { font-size: 0.75rem; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.pf-chip:hover { border-color: var(--primary); }
.pf-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pf-chip.on b { background: rgba(255, 255, 255, .25); color: #fff; }
.pf-sort { margin-left: auto; max-width: 210px; }
@media (max-width: 700px) { .pf-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .pf-chip { flex: none; } .pf-sort { flex: none; margin-left: 0; } }

/* ✍ Zaúčtovat zprávu */
.cm-book { margin-left: auto; padding: 3px 10px; font-size: 0.78rem; border-color: color-mix(in srgb, #16a34a 45%, var(--line)); color: #15803d; background: color-mix(in srgb, #16a34a 8%, var(--panel)); }
.cm-book:hover { background: #16a34a; color: #fff; }
.cm-booked { margin-top: 6px; padding: 5px 9px; border-radius: 8px; font-size: 0.78rem; color: #15803d; background: color-mix(in srgb, #16a34a 10%, transparent); }
.bk-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
.bk-msg { margin: 0; padding: 10px 14px; border-left: 4px solid #16a34a; border-radius: 8px; background: var(--panel-2); }
.bk-msg p { margin: 4px 0 0; }
.bk-ppl { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.bk-p { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.bk-p.on { border-color: #16a34a; background: color-mix(in srgb, #16a34a 10%, var(--panel)); }
.bk-p span { display: grid; } .bk-p small { color: var(--ink-3); font-size: 0.74rem; }
.bk-kind { flex-wrap: wrap; }
.bk-form .pref-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-form .pref-row .field { flex: 1 1 130px; }
.bk-form .field[hidden] { display: none; }
.bk-p { flex-wrap: wrap; gap: 6px 10px; }
.bk-pl { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.bk-own { display: inline-flex; gap: 4px; }
.bk-own .input { width: 92px; padding: 4px 8px; }
.bk-own .input[hidden] { display: none; }
.bk-ppl { flex-direction: column; align-items: stretch; }
.bk-p { justify-content: space-between; }

/* 📆 Měsíční faktury */
.inv-mt { min-width: 130px; text-align: center; text-transform: capitalize; }
.mi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.mi-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px; display: grid; gap: 8px; border-top: 4px solid var(--primary); }
.mi-card.is-done { border-top-color: #16a34a; } .mi-card.is-diff { border-top-color: #dc2626; }
.mi-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mi-h small { display: block; color: var(--ink-3); font-size: 0.8rem; }
.mi-tot { font-weight: 800; font-size: 1.2rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi-t { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.mi-t td { padding: 4px 0; border-bottom: 1px solid var(--line); } .mi-t td:last-child { text-align: right; white-space: nowrap; }
.mi-t .mi-sum td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--ink); }
.mi-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 📲 Aplikace a widgety */
.app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.app-card { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); }
.app-card small { color: var(--ink-3); font-size: 0.8rem; }
.app-card .btn { justify-self: start; }
.app-b { display: flex; flex-wrap: wrap; gap: 6px; }
.app-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.2rem; background: color-mix(in srgb, var(--primary) 14%, var(--panel)); }
.app-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* ===== New brand (2026-10): gold Didone wordmark, onyx ===== */
:root { --gold-1: #fbefc9; --gold-2: #e7c27a; --gold-3: #b8873b; --gold-4: #f2d595; --gold-5: #8c6324; --onyx: #0b0f1a; }
.brand-word, .side .brand-word, .login-card .brand-word {
  font-family: 'Playfair Display', 'Didot', 'Bodoni 72', Georgia, serif; font-weight: 700; letter-spacing: 0.14em; text-shadow: none;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 32%, var(--gold-3) 55%, var(--gold-4) 70%, var(--gold-5) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
}
.brand-sub { background: transparent; color: var(--gold-2); border: 1px solid color-mix(in srgb, var(--gold-2) 60%, transparent); border-radius: 4px; letter-spacing: 0.32em; font-weight: 600; padding: 3px 6px 2px 8px; font-size: 0.6rem; }
.brand-ico { border-radius: 9px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-2) 35%, transparent), 0 6px 16px -6px rgba(0, 0, 0, .6); }
:root:not(.dark) .login-card .brand-word { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15)); }
.side .brand-word, .login-brand .brand-word { font-family: 'Playfair Display', 'Didot', Georgia, serif; font-weight: 700; letter-spacing: 0.09em; font-size: 1.55rem; text-shadow: none;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 32%, var(--gold-3) 55%, var(--gold-4) 70%, var(--gold-5) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-brand .brand-word { font-size: 3rem; letter-spacing: 0.12em; }
.side .brand-word::first-letter { color: transparent; }
.side .brand-sub, .login-brand .brand-sub { background: transparent; color: var(--gold-2); border: 1px solid color-mix(in srgb, var(--gold-2) 55%, transparent); letter-spacing: 0.22em; font-size: 0.5rem; padding: 2px 4px 1px 6px; }
.side .brand { gap: 7px; min-width: 0; }
:root:not(.dark) .side .brand-word, :root:not(.dark) .brand-word { filter: drop-shadow(0 1px 0 rgba(90, 64, 20, .18)); }
@media (prefers-color-scheme: light) { :root:not(.dark) .brand-sub { color: #8c6324; border-color: rgba(140, 99, 36, .45); } }

/* Dnes – right column as one compact tabbed panel */
.side-stack.is-tabbed { position: sticky; top: 14px; align-self: start; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .6); }
.side-stack.is-tabbed > aside { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; max-height: calc(100vh - 150px); overflow: auto; padding-top: 10px; }
.side-stack.is-tabbed > aside .group-head h2 { font-size: 0.95rem; }
.st-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 6px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.st-tabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-3); font: inherit; font-size: 0.7rem; font-weight: 600; cursor: pointer; position: relative; min-width: 0; }
.st-tabs button .st-ic { font-size: 1.05rem; line-height: 1.1; }
.st-tabs button .st-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-tabs button b { position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink-3); color: var(--panel); font-size: 0.66rem; line-height: 18px; text-align: center; }
.st-tabs button.urgent b { background: #dc2626; color: #fff; }
.st-tabs button:hover { background: var(--panel); color: var(--ink); }
.st-tabs button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 -2px 0 var(--primary); }
/* tighter rows inside */
.side-stack.is-tabbed .chk li { padding: 7px 10px; font-size: 0.86rem; }
.side-stack.is-tabbed .fixlist li { padding: 6px 0; }
.side-stack.is-tabbed .feed li { padding: 6px 0; }
@media (max-width: 1100px) { .side-stack.is-tabbed { position: static; } .side-stack.is-tabbed > aside { max-height: 60vh; } }
.side-stack.is-tabbed .fixlist li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.side-stack.is-tabbed .fixlist .what { display: grid; min-width: 0; }
.side-stack.is-tabbed .fixlist .what b, .side-stack.is-tabbed .fixlist .what small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-stack.is-tabbed .fixlist .when { font-size: 0.74rem; }
.side-stack.is-tabbed > aside > p.muted { margin: -2px 0 6px !important; font-size: 0.78rem !important; }

/* ---- Zprávy → Jak psát / Otázky asistenta, Nastavení → Asistent, Zaměstnanci → Zápis ve zprávách ---- */
.seg-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--miss); color: #fff; font-size: .72rem; line-height: 18px; text-align: center; }
.hw-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hw-side { display: grid; gap: 16px; }
.hw-msg { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; overflow: hidden; background: var(--panel); }
.hw-msg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--primary-soft); color: var(--primary-ink); }
.hw-pre { margin: 0; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 1rem; line-height: 1.5; background: #e7f8e3; color: #12301a; }
.hw-rules { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: .92rem; }
.hw-send { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.hw-crew { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 12px; }
.hw-crew-h { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.hw-res { margin-top: 10px; }
.hw-verdict { font-weight: 700; padding: 8px 10px; border-radius: 10px; }
.hw-verdict.ok { background: var(--in-soft); color: var(--in-ink); }
.hw-verdict.bad { background: var(--miss-soft); color: var(--miss); }
.hw-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: .9rem; }
.hw-dl dt { color: var(--ink-3); }
.hw-dl dd { margin: 0; }
.hw-prob { margin: 8px 0 0; padding-left: 18px; color: var(--miss); font-size: .9rem; }
.hw-names td, .hw-names th { padding: 6px 8px; font-size: .88rem; }
.hw-sites { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-list { display: grid; gap: 12px; }
.bq-h { margin: 22px 0 10px; font-size: 1rem; color: var(--ink-2); }
.bq { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.bq-wait { border-left-color: var(--accent); }
.bq-ok { border-left-color: var(--in); }
.bq-bad { border-left-color: var(--miss); }
.bq-off { opacity: .7; }
.bq header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.bq-kind { font-weight: 700; }
.bq-st { padding: 1px 8px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-ink); }
.bq header time { margin-left: auto; color: var(--ink-3); }
.bq-why { margin: 8px 0; color: var(--ink-2); font-size: .92rem; }
.bq-msg { background: #e7f8e3; color: #12301a; border-radius: 10px; padding: 8px 10px; }
.bq-msg small { display: block; color: #3b5b43; margin-bottom: 4px; }
.bq-msg p { margin: 0; white-space: pre-wrap; }
.bq-msg textarea { width: 100%; background: #fff; color: #12301a; border-color: #b9dcb3; }
.dialog.dialog-wide { width: min(1040px, 96vw); max-width: none; }
.bq footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.as-rules { display: grid; gap: 8px; }
.as-rule { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.as-rule summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.as-rule summary .muted { font-size: .84rem; flex: 1 1 200px; }
.as-rule .field { margin-top: 8px; }
.mf-box { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; }
.mf-box summary { cursor: pointer; font-weight: 600; }
.mf-box .field { margin-top: 8px; }
.p-aka.mf-wait { background: var(--miss-soft); color: var(--miss); }
.p-aka.mf-ok { background: var(--in-soft); color: var(--in-ink); }
.mf-list { display: grid; gap: 8px; max-height: 64vh; overflow: auto; }
.mf-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.3fr) minmax(150px, 1.6fr) auto; gap: 8px; align-items: start; padding: 8px; border-radius: 10px; border: 1px solid var(--line-soft); }
.mf-row.wait { background: var(--miss-soft); border-color: transparent; }
.mf-row.off { opacity: .65; }
.mf-name small { display: block; color: var(--ink-3); font-size: .78rem; }
.mf-ok-l { display: flex; align-items: center; gap: 4px; padding-top: 8px; font-weight: 700; }
@media (max-width: 900px) {
  .hw-grid { grid-template-columns: minmax(0, 1fr); }
  .mf-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mf-row .mf-name { grid-column: 1 / -1; }
  .mf-row input, .mf-row textarea { grid-column: 1 / 2; }
}

/* =====================================================================
   AIOX design system (2026-10-07). Dark, calm navy-black UI; the brand gradient
   (blue → sky → mint) only where the eye should go: primary buttons, the active menu
   item, the logo and key numbers. States (success / warning / error / info) are kept
   apart from the brand colours. Inter everywhere. This layer is last on purpose.
   ===================================================================== */
:root {
  /* design tokens (as handed over) */
  --bg: #03070D; --bg-soft: #06101B;
  --surface: #081522; --surface-hover: #0D1D2D; --surface-elevated: #102335; --surface-input: #091827;
  --border: #1B3042; --border-soft: #112536;
  --brand-blue: #087BFF; --brand-sky: #00B8FF; --brand-cyan: #00E7E7; --brand-mint: #00F0C8; --brand-deep: #075BE8;
  --text: #F5F9FF; --text-secondary: #A8B7C7; --text-muted: #6F8193; --text-disabled: #475767; --link: #38CFFF; --placeholder: #607386;
  --success: #24D18F; --success-bg: #09291F; --warning: #FFB84D; --warning-bg: #30220B; --error: #FF5C70; --error-bg: #321018; --info: #38BDF8; --info-bg: #092436;
  --data-1: #087BFF; --data-2: #00E7E7; --data-3: #00F0C8; --data-4: #7C6CFF; --data-5: #B768FF; --data-6: #FFB84D; --data-7: #FF6685;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --gradient-brand: linear-gradient(135deg, #087BFF 0%, #00B8FF 48%, #00F0C8 100%);
  --gradient-button: linear-gradient(135deg, #087BFF, #00D9D2);
  --glow-brand: 0 0 20px rgba(0, 184, 255, 0.25), 0 0 50px rgba(0, 240, 200, 0.10);
  --ax-blue: #087BFF; --ax-cyan: #00E7E7; --ax-grad: var(--gradient-brand);

  /* the app's own variables, mapped onto the tokens (dark = the AIOX look) */
  color-scheme: dark;
  --ground: var(--bg); --panel: var(--surface); --panel-2: var(--bg-soft); --line: var(--border); --line-soft: var(--border-soft);
  --ink: var(--text); --ink-2: var(--text-secondary); --ink-3: var(--text-muted);
  --navy: var(--bg); --navy-2: var(--surface-elevated);
  --primary: var(--brand-sky); --primary-ink: #ffffff; --primary-soft: rgba(0, 184, 255, 0.12);
  --accent: var(--brand-sky);
  --in: var(--success); --in-ink: var(--success); --in-soft: var(--success-bg); --miss: var(--error); --miss-soft: var(--error-bg);
  --abs: var(--data-4); --abs-soft: rgba(124, 108, 255, 0.16); --out: var(--text-muted); --out-soft: rgba(111, 129, 147, 0.16);
  --amber: var(--warning); --amber-deep: var(--warning); --hivis: var(--warning); --hivis-soft: var(--warning-bg); --bar: var(--brand-blue);
  --side-bg: var(--bg); --side-ink: var(--text-secondary);
  --glass: rgba(8, 21, 34, 0.82); --glass-strong: rgba(8, 21, 34, 0.92); --glass-line: rgba(80, 160, 210, 0.14);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px -20px rgba(0, 0, 0, 0.9);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -20px rgba(0, 0, 0, 0.9);
  --radius: var(--radius-lg);
  /* no rainbow per page any more: every section uses the brand light */
  --c-dnes: var(--brand-sky); --c-tabulka: var(--brand-sky); --c-prehled: var(--brand-sky); --c-archiv: var(--brand-sky); --c-gps: var(--brand-sky);
  --c-lide: var(--brand-sky); --c-stavby: var(--brand-sky); --c-fotky: var(--brand-sky); --c-zpravy: var(--brand-sky); --c-nastaveni: var(--brand-sky);
  --brand: "Inter", system-ui, sans-serif; --display: "Inter", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* light theme (on request): same brand and states on a light ground */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F6FA; --bg-soft: #EAF0F6; --surface: #FFFFFF; --surface-hover: #F2F6FB; --surface-elevated: #FFFFFF; --surface-input: #FFFFFF;
  --border: #D5DFEA; --border-soft: #E6EDF4;
  --text: #0A1622; --text-secondary: #3D4F63; --text-muted: #687B8F; --text-disabled: #A3B1BF; --link: #0670E8; --placeholder: #8796A6;
  --success: #12A86E; --success-bg: #E2F7EE; --warning: #C97A0A; --warning-bg: #FFF2DD; --error: #E23A52; --error-bg: #FDE6EA; --info: #0B8FD1; --info-bg: #E1F3FC;
  --primary: var(--brand-blue); --accent: var(--brand-blue); --primary-soft: rgba(8, 123, 255, 0.10);
  --c-dnes: var(--brand-blue); --c-tabulka: var(--brand-blue); --c-prehled: var(--brand-blue); --c-archiv: var(--brand-blue); --c-gps: var(--brand-blue);
  --c-lide: var(--brand-blue); --c-stavby: var(--brand-blue); --c-fotky: var(--brand-blue); --c-zpravy: var(--brand-blue); --c-nastaveni: var(--brand-blue);
  --in-ink: #0F7A40; /* zelená pro TEXT na světlém (kontrast ≥ 4.5:1) */
  --abs-soft: rgba(124, 108, 255, 0.12); --out-soft: rgba(104, 123, 143, 0.12);
  --glass: rgba(255, 255, 255, 0.86); --glass-strong: #FFFFFF; --glass-line: #DCE5EF;
  --glass-shadow: 0 1px 2px rgba(10, 22, 34, 0.05), 0 10px 26px -18px rgba(10, 22, 34, 0.25); --shadow: var(--glass-shadow);
}
/* "automatic" follows the phone / computer */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --bg: #F3F6FA; --bg-soft: #EAF0F6; --surface: #FFFFFF; --surface-hover: #F2F6FB; --surface-elevated: #FFFFFF; --surface-input: #FFFFFF;
    --border: #D5DFEA; --border-soft: #E6EDF4;
    --text: #0A1622; --text-secondary: #3D4F63; --text-muted: #687B8F; --text-disabled: #A3B1BF; --link: #0670E8; --placeholder: #8796A6;
    --success: #12A86E; --success-bg: #E2F7EE; --warning: #C97A0A; --warning-bg: #FFF2DD; --error: #E23A52; --error-bg: #FDE6EA; --info: #0B8FD1; --info-bg: #E1F3FC;
    --primary: var(--brand-blue); --accent: var(--brand-blue); --primary-soft: rgba(8, 123, 255, 0.10);
    --c-dnes: var(--brand-blue); --c-tabulka: var(--brand-blue); --c-prehled: var(--brand-blue); --c-archiv: var(--brand-blue); --c-gps: var(--brand-blue);
    --c-lide: var(--brand-blue); --c-stavby: var(--brand-blue); --c-fotky: var(--brand-blue); --c-zpravy: var(--brand-blue); --c-nastaveni: var(--brand-blue);
    --in-ink: #0F7A40;
    --abs-soft: rgba(124, 108, 255, 0.12); --out-soft: rgba(104, 123, 143, 0.12);
    --glass: rgba(255, 255, 255, 0.86); --glass-strong: #FFFFFF; --glass-line: #DCE5EF;
    --glass-shadow: 0 1px 2px rgba(10, 22, 34, 0.05), 0 10px 26px -18px rgba(10, 22, 34, 0.25); --shadow: var(--glass-shadow);
  }
}
body, body[data-view] { --accent: var(--primary); font-family: var(--body); background: var(--ground); color: var(--ink); }
:root[data-accent] body, :root[data-accent] body[data-view] { --accent: var(--primary); }
h1, h2, h3 { font-family: var(--body); font-weight: 700; letter-spacing: -0.02em; }
.page-head h1 { font-weight: 700; }
a { color: var(--link); }
/* the old colourful glow behind everything: only a faint brand light at the top */
body::before { background: radial-gradient(60% 40% at 50% -10%, rgba(0, 184, 255, 0.08), transparent 70%); opacity: 1 !important; }

/* ---------- the AIOX name ---------- */
.aiox-word { display: inline-block; flex: none; width: 92px; aspect-ratio: 308 / 79; background: linear-gradient(90deg, #FFFFFF, #8DEEFF);
  -webkit-mask: url(/static/brand/aiox-word.png?v=7) center / contain no-repeat; mask: url(/static/brand/aiox-word.png?v=7) center / contain no-repeat; }
:root[data-theme="light"] .aiox-word { background: linear-gradient(90deg, #0A1622, #0B4FAF); }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .aiox-word { background: linear-gradient(90deg, #0A1622, #0B4FAF); } }
.brand-word, .brand-sub { display: none !important; }
.brand-ico { border-radius: 24%; box-shadow: 0 0 0 1px rgba(80, 160, 210, 0.25), 0 0 20px rgba(0, 184, 255, 0.18); }
.side .brand { gap: 11px; align-items: center; }
.side .brand .aiox-word { width: 84px; }
@media (min-width: 901px) { .side .brand-ico { width: 36px; height: 36px; } }
@media (max-width: 900px) { .side .brand .aiox-word { width: 64px; } .side .brand-ico { width: 30px; height: 30px; } }

/* ---------- surfaces: cards, panels (static -- no live blur while scrolling) ---------- */
.panel, .stat, .kpi, .toolbar, .site-card, .person, .car, .cm, .do-row, .shot, .sheet-wrap, .jump, .map-legend, .unk-row, .ios-list, .ps-kpi {
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); border-radius: var(--radius-lg);
}
.stat::after, .kpi::after, .kpi::before { display: none; }
.stat, .kpi { border-top: 1px solid var(--glass-line); }
.stat:hover, .kpi:hover, .site-card:hover { background: var(--surface-hover); transform: none; box-shadow: var(--glass-shadow); }
.dialog { background: var(--surface-elevated); border: 1px solid var(--glass-line); border-radius: var(--radius-xl); }
.modal { background: rgba(3, 7, 13, 0.6); }
/* the important card (Dnes header, settings greeting): a whisper of the brand on the surface */
.hero, body[data-team="kancelar"] .hero, .set-hero {
  background: linear-gradient(145deg, rgba(8, 123, 255, 0.10), rgba(0, 240, 200, 0.04)), var(--surface);
  border: 1px solid var(--glass-line); color: var(--ink); box-shadow: var(--glass-shadow);
}
.hero::before, .hero::after { display: none; }
.hero p, .hero .clock, .hero-note { color: var(--ink-2); }
.hero .clock { background: var(--surface-hover); }
.hero-note, .hero-tools .btn { background: var(--surface-hover); border-color: var(--border); color: var(--ink); }
.ring { background: conic-gradient(var(--brand-sky) calc(var(--p) * 1%), var(--border) 0); }
.ring::before { background: var(--surface); }
.ring b, .ring b small { color: var(--ink); }

/* ---------- sidebar: dark and calm; only the active item lights up ---------- */
.side { background: var(--side-bg); border-right: 1px solid var(--border-soft); box-shadow: none; }
.side .nav a { color: var(--text-secondary); font-weight: 500; border-radius: var(--radius-md); }
.side .nav a svg { color: var(--text-muted); background: transparent; border-radius: 10px; }
.side .nav a:hover { background: var(--surface-hover); color: var(--ink); }
.side .nav a:hover svg { color: var(--ink); }
.side .nav a.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand-sky); }
.side .nav a.on svg { background: var(--gradient-brand); color: #fff; box-shadow: 0 0 20px rgba(0, 184, 255, 0.25); }
.nav a, .tabbar a, .more-grid a { --nc: var(--brand-sky) !important; }
.nav-dot { --g: var(--brand-mint); background: var(--brand-mint); }
.team-switch { background: var(--surface); border-color: var(--border); }
.team-switch button { color: var(--text-secondary); }
.team-switch button.on { background: var(--surface-hover); color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand-sky); }
.side-search { background: var(--surface-input); border-color: var(--border); color: var(--placeholder); }
.side-foot { border-top-color: var(--border-soft); }
@media (max-width: 900px) {
  .side { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .side .nav a.on { box-shadow: inset 0 -2px 0 var(--brand-sky); }
  .tabbar { background: rgba(3, 7, 13, 0.94); border-top: 1px solid var(--border-soft); }
  .tabbar a, .tabbar button { color: var(--text-muted); }
  .tabbar a svg, .tabbar button svg { background: transparent !important; color: var(--text-muted) !important; stroke: currentColor; }
  .tabbar a.on, .tabbar button.on { color: var(--ink); }
  .tabbar a.on svg, .tabbar button.on svg { background: var(--gradient-brand) !important; color: #fff !important; stroke: #fff; box-shadow: 0 0 20px rgba(0, 184, 255, 0.25); }
}
:root[data-theme="light"] .tabbar { background: rgba(255, 255, 255, 0.95); }

/* ---------- headings: the page title line in brand light ---------- */
.page-head h1::before { width: 4px; height: 28px; border-radius: 4px; background: var(--gradient-brand); box-shadow: 0 0 14px rgba(0, 184, 255, 0.35); }
:root:not([data-theme="light"]) .page-head h1 { background: linear-gradient(90deg, #FFFFFF, #8DEEFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-theme="light"]) .page-head h1::before { -webkit-text-fill-color: initial; }

/* ---------- buttons ---------- */
.btn { border-radius: var(--radius-md); font-weight: 500; background: var(--surface-hover); color: var(--ink); border: 1px solid var(--border); }
.btn:hover { border-color: color-mix(in srgb, var(--brand-sky) 40%, var(--border)); }
.btn-primary, .login-page .btn-primary, .dv-f .btn-primary { background: var(--gradient-button); color: #FFFFFF; border: none; font-weight: 600; box-shadow: none; }
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 8px 30px rgba(0, 184, 255, 0.28); border: none; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--ink); }
.btn-danger, .btn-ghost.btn-danger { color: var(--error); }
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-ghost) { background: #FFFFFF; }

/* ---------- forms ---------- */
.input, .select, textarea.input { background: var(--surface-input); border: 1px solid var(--border); color: var(--ink); border-radius: 10px; }
.input::placeholder, textarea::placeholder { color: var(--placeholder); }
.input:focus, .select:focus, textarea.input:focus { border-color: var(--brand-sky); box-shadow: 0 0 0 3px rgba(0, 184, 255, 0.12); outline: none; }
:focus-visible { outline-color: var(--brand-sky); }
.switch input:checked + span { background: var(--gradient-button); }
.seg { background: var(--surface-input); border-color: var(--border); }
.seg button { color: var(--text-secondary); }
.seg button.on { background: var(--surface-hover); color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand-sky); }
.chip, .pill { background: var(--surface-hover); color: var(--text-secondary); border-color: var(--border); }

/* ---------- states: success / warning / error / info, apart from the brand ---------- */
.pill-ok, .tag-gps, .act-arrive, .act-return, .act-arrive_fix { background: var(--success-bg); color: var(--success); }
.pill-bad, .tag-far, .tag-miss { background: var(--error-bg); color: var(--error); }
.tag-late, .ps-chip.draft, .pill-warn { background: var(--warning-bg); color: var(--warning); }
.ps-chip.ok { background: var(--success-bg); color: var(--success); }
.note, .pill-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.err { color: var(--error); }
.group-bar { background: var(--error-bg); color: var(--error); border-bottom: 1px solid color-mix(in srgb, var(--error) 35%, transparent); }
.group-bar a { color: var(--error); }
.seg-n { background: var(--error); }

/* ---------- key numbers and charts ---------- */
.stat b, .kpi b, .ps-kpi b { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.ps-kpi.k-green b, .kpi.is-key b { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chart .bar { fill: var(--data-1); }
.hbar .fill, .mb i, .spark .sp i { background: var(--gradient-brand); }
.st-ico { box-shadow: none; }
.sheet thead th.today { background: var(--brand-blue); color: #fff; box-shadow: none; }
td.today { background: rgba(0, 184, 255, 0.06); }
.bulkbar { background: var(--surface-elevated); border: 1px solid var(--border); }
.toast { background: var(--surface-elevated); color: var(--ink); border: 1px solid var(--border); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8); }

/* ---------- David (assistant): brand light only on his button and my bubbles ---------- */
.david-fab { background: var(--gradient-button); box-shadow: 0 8px 30px rgba(0, 184, 255, 0.28); }
.dv-ava { color: var(--brand-blue); }
.dv-ava.big, .dv-u { background: var(--gradient-button); color: #fff; }
.dv-ai { color: var(--brand-sky); }
.dv-chips button:hover { border-color: var(--brand-sky); color: var(--brand-sky); }
.david header, .dv-log, .dv-first { background: var(--surface); border-color: var(--border); }
.cmdk-david:hover { background: var(--surface-hover); }
.set-hero-ava { background: var(--gradient-button); box-shadow: none; }
.feat-panel { background: var(--surface); border-color: var(--border); }
.ptr.ready { color: var(--brand-sky); }

/* ---------- login: the AIOX launch screen ---------- */
.login-page { background: radial-gradient(50% 40% at 50% 0%, rgba(0, 184, 255, 0.10), transparent 70%), var(--bg); }
.login-shell { border: 1px solid var(--glass-line); border-radius: var(--radius-xl); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9); }
.login-brand { display: grid; align-content: center; background: linear-gradient(145deg, rgba(8, 123, 255, 0.10), rgba(0, 240, 200, 0.04)), var(--bg-soft); color: var(--text); }
.login-brand::after { display: none; }
.login-mark { display: grid; justify-items: start; gap: 16px; }
.login-glyph { width: 140px; height: auto; filter: drop-shadow(0 0 20px rgba(0, 184, 255, 0.25)) drop-shadow(0 0 50px rgba(0, 240, 200, 0.10)); }
.login-brand .aiox-word { width: 180px; background: linear-gradient(90deg, #FFFFFF, #8DEEFF) !important; }
.login-tag { color: var(--text-secondary); font-weight: 500; margin: 14px 0 26px; }
.login-points li { color: var(--text-secondary); }
.login-points i { background: var(--gradient-brand); color: #fff; }
.login-card { background: var(--surface); }
.login-card-brand { display: none; align-items: center; gap: 12px; margin-bottom: 18px; }
.login-card-brand img { border-radius: 24%; box-shadow: 0 0 20px rgba(0, 184, 255, 0.18); }
.login-card-brand .aiox-word { width: 96px; }
@media (max-width: 720px) { .login-brand { display: none; } .login-card-brand { display: flex; } .login-shell { border-radius: var(--radius-xl); } }
/* the login page is always the dark AIOX screen */
.login-page { --surface: #081522; --surface-input: #091827; --border: #1B3042; --ink: #F5F9FF; --ink-2: #A8B7C7; --ink-3: #6F8193; --panel: #081522; --line: #1B3042; color-scheme: dark; }

/* =====================================================================
   AIOX – calm & simple (2026-10-07, after feedback "not so blue"): neutral graphite
   instead of navy, flat cards with a thin border, white text. Brand colour only on the
   primary button, the active menu item and the logo. Everything else is grey on grey.
   ===================================================================== */
:root {
  --bg: #0C0D0F; --bg-soft: #111214; --surface: #16171A; --surface-hover: #1D1F23; --surface-elevated: #1E2024; --surface-input: #121316;
  --border: #26282D; --border-soft: #1C1E22;
  --text: #F2F3F5; --text-secondary: #A3A8B0; --text-muted: #70757D; --text-disabled: #4A4E55; --link: #4DA3FF; --placeholder: #6B7078;
  --primary: #2F8CFF; --accent: #2F8CFF; --primary-soft: rgba(47, 140, 255, 0.12);
  --brand-sky: #2F8CFF;
  --glass: var(--surface); --glass-strong: var(--surface); --glass-line: var(--border);
  --glass-shadow: none; --shadow: none;
  --gradient-button: linear-gradient(135deg, #0A62DC, #0A6DE6); /* bílý text ≥ 4.5:1 */
}
:root[data-theme="light"] {
  --bg: #F6F7F9; --bg-soft: #EFF1F4; --surface: #FFFFFF; --surface-hover: #F3F4F6; --surface-elevated: #FFFFFF; --surface-input: #FFFFFF;
  --border: #E3E5E9; --border-soft: #ECEEF1;
  --text: #111317; --text-secondary: #4B5058; --text-muted: #626C80; --link: #0A6CE0; --placeholder: #6b7280;
  --primary: #0A72F0; --accent: #0A72F0; --brand-sky: #0A72F0; --primary-soft: rgba(10, 114, 240, 0.08);
  --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-line: #E3E5E9;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #F6F7F9; --bg-soft: #EFF1F4; --surface: #FFFFFF; --surface-hover: #F3F4F6; --surface-elevated: #FFFFFF; --surface-input: #FFFFFF;
    --border: #E3E5E9; --border-soft: #ECEEF1;
    --text: #111317; --text-secondary: #4B5058; --text-muted: #626C80; --link: #0A6CE0; --placeholder: #6b7280;
    --primary: #0A72F0; --accent: #0A72F0; --brand-sky: #0A72F0; --primary-soft: rgba(10, 114, 240, 0.08);
    --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-line: #E3E5E9;
  }
}
/* no coloured light behind the page */
body::before { display: none !important; }
/* flat cards: one thin border, no glow, no tint */
.panel, .stat, .kpi, .toolbar, .site-card, .person, .car, .cm, .do-row, .shot, .sheet-wrap, .jump, .map-legend, .unk-row, .ios-list, .ps-kpi, .hero, body[data-team="kancelar"] .hero, .set-hero, .side-stack.is-tabbed {
  background: var(--surface); border: 1px solid var(--border); box-shadow: none; border-radius: 14px;
}
.hero { color: var(--ink); }
.stat:hover, .kpi:hover, .site-card:hover { background: var(--surface-hover); }
.toolbar { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
/* titles: plain, strong, no gradient text and no coloured bar */
:root:not([data-theme="light"]) .page-head h1 { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
.page-head h1::before { display: none; }
.page-head p { color: var(--text-muted); }
/* sidebar: quiet; the active item is a light grey row with a brand icon */
.side { background: var(--bg); border-right: 1px solid var(--border-soft); }
.side .nav a.on { background: var(--surface-hover); box-shadow: none; color: var(--ink); }
.side .nav a.on svg { background: transparent; color: var(--primary); box-shadow: none; }
.side .nav a svg { width: 30px; height: 30px; padding: 5px; }
.nav-dot { background: var(--primary); --g: var(--primary); }
.nav-dot::after { display: none; }
.team-switch button.on { box-shadow: none; background: var(--surface-hover); }
@media (max-width: 900px) {
  .tabbar { background: var(--bg); }
  .tabbar a.on svg, .tabbar button.on svg { background: transparent !important; color: var(--primary) !important; stroke: var(--primary); box-shadow: none; }
}
:root[data-theme="light"] .tabbar { background: #FFFFFF; }
/* chips and tabs: neutral; the chosen one is white-on-dark / dark-on-light, not neon */
.pf-chip.on, .grp-chips button.on, .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pf-chip.on b, .grp-chips button.on b { background: color-mix(in srgb, var(--bg) 20%, transparent); color: var(--bg); }
.seg button.on { background: var(--surface-hover); color: var(--ink); box-shadow: none; }
.st-tabs button.on { box-shadow: none; }
/* buttons: one solid brand button, the rest grey */
.btn-primary, .login-page .btn-primary, .dv-f .btn-primary { background: var(--primary); box-shadow: none; }
.btn-primary:hover { filter: brightness(1.1); box-shadow: none; }
.switch input:checked + span { background: var(--primary); }
/* Dnes: the ring and big numbers in plain white, the brand only on the ring */
.ring { background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--border) 0); }
.ps-kpi.k-green b, .kpi.is-key b { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
.hbar .fill, .mb i, .spark .sp i { background: var(--primary); }
.sheet thead th.today { background: var(--primary); }
td.today { background: color-mix(in srgb, var(--primary) 6%, transparent); }
/* David and the logo keep a little of the brand, quietly */
.david-fab { background: var(--surface-elevated); color: var(--ink); border: 1px solid var(--border); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6); }
.dv-ava.big, .dv-u, .set-hero-ava { background: var(--primary); }
.brand-ico { box-shadow: none; }
.aiox-word { background: var(--ink) !important; }
.login-brand .aiox-word { background: #F2F3F5 !important; }
/* login: dark graphite, logo the only colour */
.login-page { background: #0C0D0F; --surface: #16171A; --surface-input: #121316; --border: #26282D; --panel: #16171A; --line: #26282D; }
.login-brand { background: #111214; }
.login-shell { box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9); border-color: #26282D; }
.login-points i { background: var(--primary); }
.login-glyph { filter: none; }
.hero, .hero h1, .hero h2, .hero b, .hero .hero-title { color: var(--ink); }
.hero p, .hero small, .hero .bx-where { color: var(--text-muted); }
.hero .clock { color: var(--ink); background: var(--surface-hover); }
.hero .bx-where a { color: var(--text-secondary); }
/* AIOX logos = the original files (Downloads/AIOX_logo_variants), only the background cut away */
.aiox-word, :root[data-theme="light"] .aiox-word { -webkit-mask: none !important; mask: none !important; background: url(/static/brand/aiox-word.png?v=7) center / contain no-repeat !important; aspect-ratio: 304 / 99; }
:root[data-theme="light"] .aiox-word { background-image: url(/static/brand/aiox-word-black.png?v=7) !important; aspect-ratio: 137 / 34; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .aiox-word { background-image: url(/static/brand/aiox-word-black.png?v=7) !important; aspect-ratio: 137 / 34; } }
.side .brand .aiox-word { width: 92px; }
:root[data-theme="light"] .side .brand .aiox-word { width: 74px; }
.brand-ico { border-radius: 0; box-shadow: none; background: none; }
.login-primary { width: 260px; height: auto; display: block; }
.login-card-brand img { width: 170px; height: auto; border-radius: 0; box-shadow: none; }
.as-tr { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .84rem; }
.as-prev { margin-top: 10px; display: grid; gap: 6px; }
.as-prev small { color: var(--ink-3); }
.as-bub { display: flex; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-hover); border: 1px solid var(--border); white-space: pre-wrap; font-size: .9rem; }
/* Nastavení → Asistent → Odpovědi na WhatsAppu: small WhatsApp preview (always dark, like the phone in Zprávy) */
.as-wa { margin-top: 18px; }
.as-wa .seg { align-self: flex-start; max-width: 100%; }
.as-wa-pv { max-width: 380px; padding: 10px 12px; border-radius: 16px; }
.as-wa-pv .bubble { position: relative; margin: 4px 0; }
.as-wa-pv .bubble.has-react { margin-bottom: 18px; }
.as-wa-n { display: block; font-size: .76rem; font-weight: 700; color: #53bdeb; }
.as-wa-react { position: absolute; left: 10px; bottom: -15px; padding: 0 5px; border-radius: 99px; background: #202c33; border: 2px solid #0b141a; font-size: .78rem; line-height: 1.45; }
.as-wa-q { display: block; margin: -2px -4px 5px; padding: 4px 8px; border-left: 3px solid #53bdeb; border-radius: 6px; background: rgba(0, 0, 0, .22); font-size: .8rem; color: #d1d7db; }
.as-wa-q b { display: block; font-size: .76rem; color: #53bdeb; }
.as-wa-none { margin: 6px 0 2px; font-size: .78rem; color: #8696a0; }
.as-wa .seg button { white-space: nowrap; }
@media (max-width: 560px) { .as-wa .seg { align-self: stretch; } .as-wa .seg button { flex: 1 1 auto; padding: 0 6px; font-size: .8rem; } }
/* Zprávy → Otázky: the question someone sent to David, as a chat bubble inside the card */
.bq-david .cm { margin: 8px 0; }
.secret-in { -webkit-text-security: disc; }
.secret-in:placeholder-shown { -webkit-text-security: none; }
/* Zprávy → Jak psát: readable message bubbles, Czech meaning under each */
.hw-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: var(--bg-soft); }
.hw-card.is-edit { border-color: var(--primary); }
.hw-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; color: var(--ink); }
.hw-h-tools, .hw-edit-tools, .hw-trs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hw-trs { margin: 6px 0 10px; font-size: .86rem; }
.hw-bubble { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: var(--surface-hover); border: 1px solid var(--border); border-left: 3px solid var(--primary); color: var(--ink); }
.hw-cs { display: flex; gap: 10px; padding: 8px 14px 2px; color: var(--ink-2); font-size: .92rem; }
.hw-cs small { display: block; color: var(--ink-3); font-size: .76rem; margin-bottom: 2px; }
.hw-flag { flex: none; line-height: 1.5; }
.hw-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; font-size: 1rem; }
.hw-cs .hw-text { font-size: .92rem; }
.hw-lbl { display: block; margin: 10px 0 4px; color: var(--ink-3); font-weight: 600; }
.hw-sites .chip { display: inline-flex; gap: 6px; align-items: baseline; }
/* ---- menu: blocks (Peníze, Firma) and a coloured tile for every icon ---- */
.nav-h { padding: 16px 12px 6px; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
:is(.nav, .more-grid) a[href="#dnes"] { --ic: #06b6d4; } :is(.nav, .more-grid) a[href="#tabulka"] { --ic: #8b5cf6; } :is(.nav, .more-grid) a[href="#prehled"] { --ic: #f59e0b; } :is(.nav, .more-grid) a[href="#gps"] { --ic: #10b981; }
:is(.nav, .more-grid) a[href="#lide"] { --ic: #ec4899; } :is(.nav, .more-grid) a[href="#stavby"] { --ic: #f97316; } :is(.nav, .more-grid) a[href="#fotky"] { --ic: #f43f5e; } :is(.nav, .more-grid) a[href="#zpravy"] { --ic: #10b981; }
:is(.nav, .more-grid) a[href="#faktury"] { --ic: #06b6d4; } :is(.nav, .more-grid) a[href="#vyplaty"] { --ic: #10b981; } :is(.nav, .more-grid) a[href="#listy"] { --ic: #8b5cf6; } :is(.nav, .more-grid) a[href="#doklady"] { --ic: #f97316; }
:is(.nav, .more-grid) a[href="#cestaky"] { --ic: #f59e0b; } :is(.nav, .more-grid) a[href="#banka"] { --ic: #3b82f6; } :is(.nav, .more-grid) a[href="#dane"] { --ic: #ef4444; } :is(.nav, .more-grid) a[href="#archiv"] { --ic: #64748b; }
:is(.nav, .more-grid) a[href="#byty"] { --ic: #0ea5a4; } :is(.nav, .more-grid) a[href="#sekurity"] { --ic: #f59e0b; } :is(.nav, .more-grid) a[href="#ofis"] { --ic: #6366f1; } :is(.nav, .more-grid) a[href="#nakup"] { --ic: #10b981; } :is(.nav, .more-grid) a[href="#posta"] { --ic: #e11d74; } :is(.nav, .more-grid) a[href="#dokumenty"] { --ic: #8b5cf6; } :is(.nav, .more-grid) a[href="#uceni"] { --ic: #ec4899; } :is(.nav, .more-grid) a[href="#nastaveni"] { --ic: #64748b; } :is(.nav, .more-grid) a[href="#web"] { --ic: #06b6d4; }
.tabbar a[href="#dnes"], .more-grid a[href="#dnes"] { --ic: #06b6d4; }
.side .nav a svg, .side .nav a:hover svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--ic, var(--ink-3)) !important; background: color-mix(in srgb, var(--ic, var(--ink-3)) 15%, transparent) !important; box-shadow: none !important; stroke-width: 1.9; }
.side .nav a.on { background: color-mix(in srgb, var(--ic, var(--primary)) 12%, var(--surface)) !important; box-shadow: inset 3px 0 0 #f5a524 !important; color: var(--ink); }
.side .nav a.on svg { color: var(--ic) !important; background: color-mix(in srgb, var(--ic) 22%, transparent) !important; }
.more-grid a svg { color: var(--ic, var(--ink-3)) !important; }
/* firm: name of the company / switcher for the AIOX admin */
.firm-bar { margin: 0 0 10px; }
.firm-bar label { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px 2px; }
.firm-bar select { width: 100%; }
.firm-bar .firm-name { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-weight: 600; }
.fm-list { display: grid; gap: 10px; }
.fm-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--bg-soft); }
.fm-card summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; padding: 4px 0; }
.fm-card summary .btn { margin-left: auto; }
.fm-h { margin: 14px 0 8px; font-size: .95rem; }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fm-chk { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.fm-chk small { display: block; color: var(--ink-3); font-size: .78rem; }
.fm-card .tools { margin-top: 12px; display: flex; gap: 8px; }
/* ---- Peníze a Firma pages ---- */
.mn-month { display: inline-flex; align-items: center; gap: 8px; }
.mn-month b { min-width: 130px; text-align: center; }
.mn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; }
.mn-kpi { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.mn-kpi span { color: var(--ink-3); font-size: .82rem; }
.mn-kpi b { font-size: 1.45rem; letter-spacing: -.02em; }
.mn-kpi small { color: var(--ink-3); font-size: .8rem; }
.mn-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.mn-table td, .mn-table th { vertical-align: top; }
.mn-table .num { text-align: right; white-space: nowrap; }
.mn-table tbody tr[data-dk], .mn-table tbody tr[data-ct] { cursor: pointer; }
.mn-table tbody tr:hover { background: var(--surface-hover); }
.mn-table tr.off td { opacity: .55; }
.mn-sum td { font-weight: 700; border-top: 2px solid var(--border); }
.mn-in { color: var(--success); } .mn-out { color: var(--error); }
.mn-bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 0 0 10px; font-size: .88rem; }
.mn-bar i { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--primary) var(--w), var(--border) var(--w)); }
.mn-calc { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; border-radius: 10px; background: var(--surface-hover); border: 1px solid var(--border); font-size: .9rem; }
.mn-calc .mn-total { margin-left: auto; font-size: 1rem; }
.mn-pick { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; margin: 0 0 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.mn-pick span { margin-left: auto; font-weight: 700; }
.mn-pick.hit { border-color: var(--success); background: var(--success-bg); }
.mn-dead { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.mn-dead li { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--surface-hover); font-size: .88rem; }
.mn-dead li.soon { background: var(--warning-bg); }
.mn-dead time { font-weight: 700; } .mn-dead time small { display: block; font-weight: 400; color: var(--ink-3); }
.mn-ddf { display: grid; grid-template-columns: 140px 1fr auto; gap: 6px; }
.mn-folder h2 { margin: 0 0 10px; }
.mn-docs { display: grid; gap: 8px; }
.mn-doc { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); }
.mn-doc small { display: block; margin: 2px 0 4px; }
.mn-doc-ico { font-size: 1.6rem; }
.mn-doc-t { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mn-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mn-link code { padding: 8px 10px; border-radius: 8px; background: var(--surface-hover); border: 1px solid var(--border); word-break: break-all; }
.mn-qr { display: block; margin: 14px 0; padding: 10px; background: #fff; border-radius: 12px; }
.mn-howto { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .88rem; color: var(--ink-2); }
.pill-warn { background: var(--warning-bg); color: var(--warning); } .pill-info { background: var(--info-bg); color: var(--info); }
@media (max-width: 900px) { .mn-two { grid-template-columns: minmax(0, 1fr); } .mn-doc { grid-template-columns: auto 1fr; } .mn-doc-t { grid-column: 1 / -1; justify-content: flex-start; } .mn-ddf { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.grid-2 > .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
.toolbar .select, .toolbar .input.search { width: auto; min-width: 180px; flex: 0 1 auto; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* ---- summary tiles with a coloured top edge (Stavby, Zaměstnanci, Fotky, Zprávy) ---- */
.st4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 18px; }
.st4-t { position: relative; display: grid; gap: 6px; padding: 20px 22px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.st4-t::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tc); }
.st4-t span { color: var(--ink-3); font-size: .9rem; }
.st4-t b { font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; }
.st4-t small { color: var(--ink-3); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- Stavby cards ---- */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.sc { position: relative; display: grid; gap: 10px; padding: 22px 22px 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); cursor: pointer; overflow: hidden; transition: border-color .15s, transform .15s; }
.sc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sc); }
.sc:hover, .sc:focus-visible { border-color: color-mix(in srgb, var(--sc) 55%, var(--border)); transform: translateY(-1px); outline: none; }
.sc header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc h3 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.sc-st { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.sc-st.st-ok { background: var(--success-bg); color: var(--success); }
.sc-st.st-wait { background: var(--warning-bg); color: var(--warning); }
.sc-st.st-done { background: transparent; color: var(--ink-3); }
.sc-sub { margin: -4px 0 4px; color: var(--ink-3); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-hrs { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .95rem; }
.sc-hrs b { font-size: 1rem; } .sc-hrs b.over { color: var(--error); }
.sc-bar { height: 7px; border-radius: 99px; background: var(--border); overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #06b6d4); }
.sc-bar.warn i { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sc-bar.over i { background: var(--error); }
.sc-over { margin: -4px 0 0; color: var(--error); font-size: .82rem; }
.sc-nobud { margin: -6px 0 0; color: var(--ink-3); font-size: .82rem; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 2px; }
.sc-chip { font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.sc-chip.c-crew { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #06b6d4 14%, transparent); color: #0891b2; }
.sc-chip.c-today { padding: 4px 10px; border-radius: 999px; background: var(--success-bg); color: var(--success); }
.sc-chip.c-warn { padding: 4px 10px; border-radius: 999px; background: var(--warning-bg); color: var(--warning); }
.sc footer { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--border-soft); color: var(--ink-3); font-size: .8rem; }
.sc footer b { color: var(--ink-2); }
.sc-table tbody tr { cursor: pointer; } .sc-table tbody tr:hover { background: var(--surface-hover); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .sc-chip.c-crew { color: #67e8f9; } }
:root[data-theme="dark"] .sc-chip.c-crew { color: #67e8f9; }
@media (max-width: 560px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } .st4 { grid-template-columns: 1fr 1fr; } .st4-t b { font-size: 1.6rem; } }
/* money pages: the same tiles as everywhere */
.mn-kpi { position: relative; overflow: hidden; border-radius: 18px; padding: 20px 22px 18px; }
.mn-kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tc, #3b82f6); }
.mn-kpis .mn-kpi:nth-child(1) { --tc: #10b981; } .mn-kpis .mn-kpi:nth-child(2) { --tc: #f59e0b; } .mn-kpis .mn-kpi:nth-child(3) { --tc: #8b5cf6; } .mn-kpis .mn-kpi:nth-child(4) { --tc: #f97316; }
.mn-kpi b { font-size: 1.8rem; }
/* ===== side menu, tidier: ask button, foldable blocks, user card ===== */
.side-ask { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), var(--surface)); color: var(--ink); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, transform .15s; }
.side-ask:hover { border-color: var(--primary); transform: translateY(-1px); }
.side-ask .ask-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--primary); color: #fff; font-size: .95rem; }
.side-ask .ask-t { display: grid; flex: 1; min-width: 0; }
.side-ask .ask-t b { font-size: .92rem; }
.side-ask .ask-t small { color: var(--ink-3); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-ask kbd { font: 600 .66rem var(--mono, monospace); padding: 2px 5px; border-radius: 6px; border: 1px solid var(--border); color: var(--ink-3); background: var(--surface); }
.team-switch { margin: 0 0 6px; }
button.nav-h { display: flex; align-items: center; gap: 8px; width: 100%; margin: 10px 0 2px; padding: 6px 12px; border: 0; background: none; cursor: pointer; font: 600 .7rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border-radius: 8px; }
button.nav-h:hover { color: var(--ink); background: var(--surface-hover); }
button.nav-h small { margin-left: auto; letter-spacing: 0; font-size: .7rem; padding: 0 6px; border-radius: 99px; background: var(--surface-hover); }
button.nav-h i { font-style: normal; transition: transform .15s; }
button.nav-h.folded i { transform: rotate(-90deg); }
.side .nav a { padding: 6px 10px; gap: 10px; }
.side .nav a svg, .side .nav a:hover svg { width: 30px !important; height: 30px !important; padding: 6px !important; }
.me-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.me-card:hover { border-color: var(--primary); }
.me-ava { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; font-weight: 700; font-size: .8rem; }
.me-t { display: grid; flex: 1; min-width: 0; }
.me-t b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-t small { color: var(--ink-3); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot { display: grid; gap: 6px; }
/* the ask window */
.cmdk-head { display: grid; gap: 2px; padding: 16px 18px 4px; }
.cmdk-head b { font-size: 1.1rem; } .cmdk-head small { color: var(--ink-3); }
.cmdk-ex { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.cmdk-ex .chip { cursor: pointer; border: 1px solid var(--border); padding: 5px 10px; border-radius: 99px; background: var(--surface-hover); color: var(--ink-2); font: inherit; font-size: .84rem; }
.cmdk-ex .chip:hover { border-color: var(--primary); color: var(--ink); }
.cmdk-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; padding: 0 10px 10px; }
.cmdk-q { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: .86rem; text-align: left; }
.cmdk-q svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; color: var(--ic, var(--primary)); background: color-mix(in srgb, var(--ic, var(--primary)) 15%, transparent); stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.cmdk-q:hover { border-color: var(--primary); }
.cmdk-go { display: flex !important; align-items: center; gap: 10px; }
.cmdk-go .go-arrow { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.cmdk-go.first { border: 1px solid color-mix(in srgb, var(--primary) 50%, var(--border)); }
.cmdk-go kbd { margin-left: auto; }
@media (max-width: 900px) { .side-ask { margin: 8px 0 4px; padding: 8px 10px; } .side-ask kbd { display: none; } .me-card { display: none; } }

/* =====================================================================
   AIOX – soft glass (2026-10-07, after the owner's reference shots): big rounded glass cards,
   pill buttons, round icon buttons, greeting with avatar, smooth curves, floating phone bar.
   Calm graphite stays; colour only as soft light.
   ===================================================================== */
:root { --r-card: 24px; --r-ctl: 14px; --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .06); --soft: 0 18px 40px -26px rgba(0, 0, 0, .75); }
:root[data-theme="light"] { --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9); --soft: 0 18px 40px -24px rgba(30, 40, 60, .22); --bg: #ECEEF1; --surface: rgba(255, 255, 255, .78); --surface-hover: #F6F7F9; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] { --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9); --soft: 0 18px 40px -24px rgba(30, 40, 60, .22); --bg: #ECEEF1; --surface: rgba(255, 255, 255, .78); --surface-hover: #F6F7F9; } }
/* soft light behind the page (static layer, no repaint while scrolling) */
body::before { display: block !important; content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 1 !important;
  background: radial-gradient(38% 32% at 12% 0%, rgba(139, 92, 246, .10), transparent 70%), radial-gradient(34% 30% at 92% 8%, rgba(34, 211, 238, .08), transparent 70%), radial-gradient(40% 36% at 80% 100%, rgba(16, 185, 129, .06), transparent 70%); }
:root[data-theme="light"] body::before { background: radial-gradient(40% 34% at 10% 0%, rgba(139, 92, 246, .10), transparent 70%), radial-gradient(36% 30% at 95% 6%, rgba(34, 211, 238, .12), transparent 70%), radial-gradient(42% 36% at 70% 100%, rgba(236, 72, 153, .07), transparent 70%); }
/* cards */
.panel, .stat, .kpi, .st4-t, .sc, .mn-kpi, .wx-card, .person, .hero, .trend-card, .ps-kpi, .site-card, .ios-list, .bq, .hw-card, .fm-card, .side-stack.is-tabbed, .set-hero, .mn-doc {
  border-radius: var(--r-card) !important; box-shadow: var(--glass-hi), var(--soft) !important; border-color: color-mix(in srgb, var(--border) 80%, transparent) !important; }
.st4-t::before, .sc::before, .mn-kpi::before { left: 18px; right: 18px; height: 3px; border-radius: 0 0 4px 4px; }
/* controls: pills and round buttons */
.btn { border-radius: 999px; padding-left: 16px; padding-right: 16px; box-shadow: var(--glass-hi); }
.btn-primary { box-shadow: 0 10px 24px -12px var(--primary), inset 0 1px 0 rgba(255, 255, 255, .25) !important; }
.icon-btn, .btn.icon-btn { border-radius: 50% !important; width: 40px; height: 40px; padding: 0 !important; display: inline-grid; place-items: center; }
.input, .select, textarea.input { border-radius: var(--r-ctl); }
.input.search, input[type=search].input { border-radius: 999px; padding-left: 16px; }
.seg { border-radius: 999px !important; padding: 4px; }
.seg button { border-radius: 999px !important; }
.seg button.on { box-shadow: var(--glass-hi), 0 4px 12px -6px rgba(0, 0, 0, .5) !important; }
.pf-chip, .chip, .pill, .sc-chip.c-crew { border-radius: 999px; }
.round-btn { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); box-shadow: var(--glass-hi), 0 6px 16px -10px rgba(0, 0, 0, .6); cursor: pointer; font: 600 1rem var(--body); text-decoration: none; transition: transform .15s, border-color .15s; }
.round-btn:hover { transform: translateY(-1px); border-color: var(--primary); }
/* light theme: soft "chrome" buttons like the reference */
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-ghost), :root[data-theme="light"] .round-btn { background: linear-gradient(180deg, #fff, #e9ebee); border-color: #d9dce1; box-shadow: inset 0 1px 0 #fff, 0 6px 14px -10px rgba(30, 40, 60, .45); }
/* dialogs */
.dialog { border-radius: 28px !important; }
.modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* side menu items as soft pills */
.side .nav a { border-radius: 14px; }
.side-ask, .me-card, .team-switch { border-radius: 18px !important; }
.team-switch button { border-radius: 14px !important; }

/* ---- Dnes: greeting ---- */
.greet { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.greet-ava { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; font-weight: 700; box-shadow: 0 0 0 3px var(--surface), 0 8px 20px -10px #ec4899; }
.greet-t { display: grid; } .greet-t small { color: var(--ink-3); font-size: .82rem; } .greet-t b { font-size: 1.35rem; letter-spacing: -.02em; }
.greet-act { margin-left: auto; display: flex; gap: 8px; }
.ring { background: conic-gradient(from 200deg, #8b5cf6, #22d3ee calc(var(--p) * 1%), var(--border) 0) !important; }
/* ---- Dnes: trend curve ---- */
.trend-card { position: relative; padding: 18px 20px 30px; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.tr-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tr-head > div:first-child { display: grid; gap: 2px; }
.tr-head small { color: var(--ink-3); font-size: .82rem; }
.tr-head b { font-size: 1.5rem; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.tr-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.tr-kpis > span { display: grid; gap: 2px; padding: 8px 14px; border-radius: 16px; background: var(--surface-hover); border: 1px solid var(--border); min-width: 110px; }
.tr-kpis b { font-size: 1.05rem; display: inline; }
.tr-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: 0; }
.tr-badge.up { background: var(--success-bg); color: var(--success); } .tr-badge.down { background: var(--error-bg); color: var(--error); }
.tr-svg { display: block; width: 100%; height: 150px; margin-top: 8px; color: var(--ink); overflow: visible; }
.tr-x { position: relative; height: 18px; margin-top: 6px; }
.tr-x span { position: absolute; transform: translateX(-50%); font-size: .74rem; color: var(--ink-3); white-space: nowrap; }
.tr-x span.on { padding: 1px 8px; border-radius: 999px; background: var(--surface-hover); color: var(--ink); font-weight: 600; }
/* ---- weather: sun arc ---- */
.wx-sun { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin: 8px 0 2px; color: var(--ink-3); font-size: .78rem; }
.wx-sun svg { grid-column: 1 / -1; width: 100%; height: 46px; color: var(--ink); }
.wx-sun span:last-child { text-align: right; }
.wx-card { background: linear-gradient(170deg, color-mix(in srgb, #3b82f6 14%, var(--surface)), var(--surface) 60%) !important; }
/* ---- profile card ---- */
.dialog.dialog-pc { width: min(440px, 96vw); background: linear-gradient(180deg, color-mix(in srgb, #f97316 10%, var(--surface-elevated)), var(--surface-elevated) 45%); }
.pc { display: grid; justify-items: center; gap: 10px; padding: 16px 20px 22px; text-align: center; }
.pc-top { display: flex; justify-content: space-between; width: 100%; }
.pc-ava { position: relative; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; font-size: 2rem; font-weight: 700; box-shadow: 0 0 0 5px var(--surface-elevated), 0 16px 36px -14px #ec4899; }
.pc-ava i { position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-3); border: 3px solid var(--surface-elevated); }
.pc-ava i.on { background: var(--success); }
.pc h2 { margin: 6px 0 0; font-size: 1.5rem; } .pc-sub { margin: -4px 0 6px; color: var(--ink-3); }
.pc-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.pc-act { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 600 .8rem var(--body); cursor: pointer; text-decoration: none; box-shadow: var(--glass-hi); }
.pc-act span { font-size: 1.3rem; } .pc-act:hover { border-color: var(--primary); } .pc-act.off { opacity: .4; cursor: default; }
.pc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.pc-stats span { display: grid; } .pc-stats b { font-size: 1.25rem; } .pc-stats small { color: var(--ink-3); font-size: .72rem; }
.pc-info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; width: 100%; margin: 0; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); text-align: left; font-size: .88rem; }
.pc-info dt { color: var(--ink-3); } .pc-info dd { margin: 0; }
/* ---- drop zone ---- */
.dz { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 16px 18px; border: 1.5px dashed var(--border); border-radius: 22px; background: var(--surface-hover); text-align: center; transition: border-color .15s, background .15s; }
.dz.over { border-color: var(--primary); background: var(--primary-soft); }
.dz-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--primary); font-size: 1.4rem; box-shadow: 0 10px 26px -10px var(--primary), var(--glass-hi); margin-bottom: 4px; }
.dz small { color: var(--ink-3); }
.dz-in { position: absolute !important; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dz-file { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 8px 8px 8px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); text-align: left; }
.dz-file .dz-fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.dz-file .round-btn { width: 30px; height: 30px; font-size: .8rem; }
.dz.has .dz-ico { background: var(--success-bg); color: var(--success); }
/* ---- phone: floating pill bar, the active item shows its name ---- */
@media (max-width: 900px) {
  .tabbar { left: 12px !important; right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; padding: 6px !important; border-radius: 999px !important; border: 1px solid var(--border) !important;
    background: color-mix(in srgb, var(--surface-elevated) 88%, transparent) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7), var(--glass-hi) !important;
    display: flex !important; justify-content: space-between; gap: 4px; }
  .tabbar a, .tabbar button { flex: 0 0 auto; flex-direction: row !important; gap: 6px !important; padding: 6px 10px !important; border-radius: 999px !important; min-width: 44px; justify-content: center; }
  .tabbar a span, .tabbar button span { display: none; font-size: .82rem !important; font-weight: 600; }
  .tabbar a.on, .tabbar button.on { flex: 1 1 auto; background: color-mix(in srgb, var(--primary) 18%, transparent) !important; }
  .tabbar a.on span, .tabbar button.on span { display: inline; color: var(--ink); }
  .tabbar a svg, .tabbar button svg { width: 24px !important; height: 24px !important; padding: 0 !important; }
  #view { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  .greet-t b { font-size: 1.15rem; }
  .pc-acts { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) { .david-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } }

/* =====================================================================
   AIOX – widgets & liquid glass (Leadly × SalesFlow × glass dials). Light content, dark side
   menu, colourful glass widgets with dotted numbers, a dark assistant panel with a glowing orb.
   ===================================================================== */
:root[data-theme="light"] { --bg: #EEF0F4; --surface: rgba(255, 255, 255, .72); --surface-hover: rgba(255, 255, 255, .9); --border: rgba(255, 255, 255, .85); --border-soft: #e6e9ee; }
:root[data-theme="light"] body { background: linear-gradient(160deg, #f4f6f9 0%, #eceff4 50%, #e9eef3 100%); }
:root[data-theme="light"] body::before { background: radial-gradient(36% 34% at 18% 6%, rgba(147, 197, 253, .35), transparent 70%), radial-gradient(30% 30% at 92% 10%, rgba(196, 181, 253, .32), transparent 70%), radial-gradient(40% 36% at 70% 96%, rgba(251, 207, 232, .30), transparent 70%), radial-gradient(30% 30% at 8% 90%, rgba(167, 243, 208, .25), transparent 70%) !important; }
/* liquid glass on cards: real blur (the page behind is a static layer) + bright rim */
:root[data-theme="light"] :is(.panel, .st4-t, .sc, .person, .site-card, .ios-list, .mn-kpi, .bq, .hw-card, .fm-card, .wg-glass, .set-hero, .side-stack.is-tabbed) {
  background: rgba(255, 255, 255, .62) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .9) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(15, 23, 42, .04), 0 20px 40px -28px rgba(30, 41, 59, .35) !important; }
/* the side menu stays dark (SalesFlow) */
:root[data-theme="light"] .side { background: #0E1013 !important; border-right: 0; color: #cfd3da; --ink: #f2f3f5; --ink-2: #b4b9c2; --ink-3: #7c828c; --surface: #17191d; --surface-hover: #1d2025; --border: #262a30; }
:root[data-theme="light"] .side .aiox-word { background-image: url(/static/brand/aiox-word.png?v=7) !important; aspect-ratio: 304 / 99 !important; width: 92px !important; }
:root[data-theme="light"] .side .nav a { color: #b4b9c2; }
:root[data-theme="light"] .side .nav a:hover { background: rgba(255, 255, 255, .05) !important; color: #fff; }
:root[data-theme="light"] .side .nav a.on { background: linear-gradient(90deg, rgba(190, 242, 100, .16), rgba(255, 255, 255, .04) 70%) !important; color: #fff; box-shadow: inset 2px 0 0 #bef264 !important; }
:root[data-theme="light"] .side :is(.side-ask, .me-card, .team-switch, .firm-bar select, .theme-seg, .lang-btn) { background: #17191d !important; border-color: #262a30 !important; color: #f2f3f5 !important; box-shadow: none !important; }
:root[data-theme="light"] .side .team-switch button { color: #b4b9c2; } :root[data-theme="light"] .side .team-switch button.on { background: #24272d !important; color: #fff; }
:root[data-theme="light"] .side button.nav-h { color: #6b717b; } :root[data-theme="light"] .side button.nav-h small { background: #1d2025; }
/* ---- dashboard head ---- */
.dash-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0 0 18px; }
.dh-l { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; min-width: 0; }
.dh-l small { color: var(--ink-3); font-size: .9rem; } .dh-l h1 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.03em; } .dh-l p { margin: 2px 0 0; color: var(--ink-3); font-size: .9rem; }
.dh-r { display: flex; flex-wrap: wrap; gap: 10px; }
.kp { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--glass-hi), 0 10px 22px -18px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.kp i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #111317; color: var(--t); font-style: normal; font-weight: 700; box-shadow: 0 0 0 2px color-mix(in srgb, var(--t) 45%, transparent), 0 0 14px -2px var(--t); }
.kp span { display: grid; line-height: 1.1; } .kp b { font-size: 1.05rem; } .kp small { color: var(--ink-3); font-size: .74rem; }
.dh-t { display: flex; gap: 8px; align-items: center; }
/* ---- bento grid of widgets ---- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 16px; margin: 0 0 22px; }
.wg { position: relative; border-radius: 28px; padding: 18px 20px; overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .25), 0 24px 44px -30px rgba(30, 41, 59, .55); }
.wg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 50% at 20% 0%, rgba(255, 255, 255, .35), transparent 60%); }
.wg header { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 500; letter-spacing: -.01em; }
.wg-x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); color: inherit; opacity: 0; cursor: pointer; transition: opacity .15s; }
.wg:hover .wg-x { opacity: .8; }
.wg-go { margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wg-blue { grid-row: span 2; color: #fff; background: radial-gradient(90% 70% at 80% 100%, #38bdf8 0%, transparent 60%), linear-gradient(165deg, #2d6f9b 0%, #2b84b5 45%, #3aa6cf 100%); }
.wg-violet { grid-column: span 2; color: #fff; background: radial-gradient(60% 70% at 55% 55%, #8b5cf6 0%, transparent 70%), linear-gradient(160deg, #b9a7fa 0%, #a78bfa 45%, #d8b4fe 100%); }
.wg-sky { color: #fff; background: radial-gradient(70% 70% at 50% 60%, #3b82f6 0%, transparent 70%), linear-gradient(160deg, #93c5fd, #60a5fa 55%, #bfdbfe); }
.wg-pink { color: #fff; background: radial-gradient(70% 70% at 50% 60%, #f43f5e 0%, transparent 70%), linear-gradient(160deg, #fda4af, #fb7185 55%, #fecdd3); }
.wg-rose { color: #fff; background: radial-gradient(70% 70% at 50% 60%, #a855f7 0%, transparent 70%), linear-gradient(160deg, #c4b5fd, #e879f9 55%, #f5d0fe); }
.wg-glass { grid-column: span 3; background: rgba(255, 255, 255, .62); color: var(--ink); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, .9); }
.wg-dark { grid-column: span 2; color: #e8eaee; background: radial-gradient(60% 60% at 50% 30%, rgba(34, 211, 238, .18), transparent 70%), #0E1013; }
.wg-big { margin: 18px 0 2px; color: #fff; } .wg-big .dotnum { height: 52px; }
.wg-sub { opacity: .85; font-size: .88rem; }
.wg-gwrap { position: relative; margin: 14px auto 4px; max-width: 230px; } .wg-gauge { width: 100%; display: block; }
.wg-gwrap span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 1.4rem; font-weight: 600; }
.wg-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; }
.wg-legend li { display: flex; align-items: center; gap: 10px; } .wg-legend i { width: 10px; height: 10px; border-radius: 3px; } .wg-legend b { margin-left: auto; font-weight: 600; }
.wg-cnt { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: #111317; color: #fff; font-size: .78rem; font-weight: 600; }
.wg-empty { color: var(--ink-3); margin: 18px 0 0; }
/* who is where */
.wh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.wh { position: relative; display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 16%, rgba(255, 255, 255, .8)), rgba(255, 255, 255, .55)); color: var(--ink); text-align: left; cursor: pointer; font: inherit; box-shadow: inset 0 1px 0 #fff, 0 12px 24px -20px rgba(30, 41, 59, .5); transition: transform .15s; }
.wh:hover { transform: translateY(-2px); }
.wh-h { display: flex; align-items: center; gap: 8px; min-width: 0; } .wh-h i { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 10px var(--sc); flex: none; } .wh-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-n { display: flex; align-items: flex-end; gap: 8px; color: color-mix(in srgb, var(--sc) 70%, #0f172a); } .wh-n .dotnum { height: 34px; } .wh-n small { color: var(--ink-3); font-size: .78rem; padding-bottom: 3px; }
.wh-ava { display: flex; } .wh-ava em { width: 28px; height: 28px; margin-right: -7px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; background: color-mix(in srgb, var(--sc) 70%, #334155); color: #fff; font-style: normal; font-size: .66rem; font-weight: 700; }
.wh-f { color: var(--ink-3); font-size: .78rem; }
/* small dial widgets */
.wg-s header { font-size: .95rem; }
.wg-dial { position: relative; display: grid; place-items: center; margin: 4px auto 0; width: min(150px, 100%); aspect-ratio: 1; }
.wg-ticks { position: absolute; inset: 0; width: 100%; height: 100%; }
.wg-dial span { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; } .wg-dial .dotnum { height: 36px; color: #fff; } .wg-dial small { font-size: .74rem; opacity: .9; max-width: 110px; }
/* the purple trend widget */
.wg-violet .trend-card { margin: 0; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; color: #fff; }
.wg-violet .tr-head small, .wg-violet .tr-head .muted, .wg-violet .tr-x span { color: rgba(255, 255, 255, .85) !important; }
.wg-violet .tr-kpis > span { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .35); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wg-violet .tr-svg path[stroke] { stroke: #fff; } .wg-violet .tr-svg path[fill^="url"] { opacity: .5; } .wg-violet .tr-svg circle { fill: #3b82f6; stroke: #fff; }
.wg-violet .tr-x span.on { background: rgba(255, 255, 255, .25); color: #fff; }
/* dark assistant panel with a glowing orb */
.wg-ai { display: grid; gap: 12px; justify-items: center; text-align: center; }
.wg-ai header { justify-self: stretch; }
.orb { position: relative; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #cffafe 0%, #22d3ee 25%, #0891b2 55%, #083344 80%); box-shadow: 0 0 40px 6px rgba(34, 211, 238, .45), inset 0 -10px 24px rgba(0, 0, 0, .35); animation: orb 6s ease-in-out infinite; }
.orb i { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(34, 211, 238, .25); }
@keyframes orb { 50% { transform: scale(1.04); box-shadow: 0 0 56px 10px rgba(34, 211, 238, .55), inset 0 -10px 24px rgba(0, 0, 0, .35); } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }
.wg-ai p { margin: 0; color: #b4b9c2; font-size: .9rem; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ai-chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid #2a2e35; background: #17191d; color: #e8eaee; font: inherit; font-size: .8rem; cursor: pointer; }
.ai-chips button:hover { border-color: #22d3ee; }
.ai-in { display: flex; gap: 6px; width: 100%; padding: 5px 5px 5px 14px; border-radius: 999px; background: #17191d; border: 1px solid #2a2e35; }
.ai-in input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; outline: none; }
.ai-in button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: #0E1013; cursor: pointer; font-size: .9rem; }
/* dotted numbers */
.dotnum { display: inline-block; height: 1em; width: auto; vertical-align: -0.1em; overflow: visible; }
/* summary tiles on other pages as colourful glass widgets */
.st4-t { color: #fff !important; border: 0 !important; background: radial-gradient(80% 80% at 70% 90%, color-mix(in srgb, var(--tc) 85%, #fff 0%) 0%, transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--tc) 45%, #fff), var(--tc) 60%, color-mix(in srgb, var(--tc) 55%, #fff)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 22px 40px -28px color-mix(in srgb, var(--tc) 80%, #000) !important; border-radius: 26px !important; }
.st4-t::before { display: none; }
.st4-t span, .st4-t small { color: rgba(255, 255, 255, .9) !important; }
.st4-t b { display: flex; align-items: flex-end; gap: 8px; min-height: 40px; } .st4-t b .dotnum { height: 36px; } .st4-t b em { font-style: normal; font-size: 1rem; opacity: .9; }
/* weather at the bottom, quieter */
.wx-bottom { margin-top: 26px; opacity: .95; }
/* dark theme: the same widgets on graphite */
:root[data-theme="dark"] .wg-glass { background: rgba(23, 25, 29, .72); border-color: #262a30; color: var(--ink); }
:root[data-theme="dark"] .wh { background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 18%, #17191d), #15171b); border-color: #262a30; color: var(--ink); box-shadow: none; }
:root[data-theme="dark"] .wh-ava em { border-color: #15171b; } :root[data-theme="dark"] .wh-n { color: color-mix(in srgb, var(--sc) 60%, #fff); }
@media (max-width: 1200px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wg-glass, .wg-violet, .wg-dark { grid-column: span 2; } .wg-blue { grid-row: span 1; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr 1fr; gap: 10px; } .wg { padding: 14px; border-radius: 22px; } .wg-blue, .wg-glass, .wg-violet, .wg-dark { grid-column: span 2; } .dh-r { width: 100%; } .kp { flex: 1 1 45%; } .wh-grid { grid-template-columns: 1fr 1fr; } }
:root[data-theme] .st4-t { background: radial-gradient(80% 80% at 70% 90%, var(--tc) 0%, transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--tc) 45%, #fff), var(--tc) 60%, color-mix(in srgb, var(--tc) 55%, #fff)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; }
.wg-dsub { display: block; text-align: center; margin-top: 6px; font-size: .78rem; opacity: .92; }
.wg-dial { width: min(130px, 100%); }
.wg-violet .trend-card { padding: 0 4px !important; }
.wg-violet .tr-x { margin: 6px 10px 0; }
:root[data-theme] body .st4 .st4-t { background-color: var(--tc) !important; background-image: radial-gradient(80% 80% at 70% 90%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(160deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .28) 100%) !important; }

/* ===== whole app in the widget style ===== */
/* summary tiles everywhere = colourful glass widgets with dotted numbers */
:root[data-theme] body :is(.kpi, .ps-kpi, .mn-kpi, .stat) { color: #fff !important; border: 0 !important; border-radius: 24px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background-color: var(--wc, #3b82f6) !important; background-image: linear-gradient(160deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .25) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 22px 40px -28px color-mix(in srgb, var(--wc, #3b82f6) 80%, #000) !important; }
:root[data-theme] body :is(.kpi, .ps-kpi, .mn-kpi, .stat)::before, :root[data-theme] body :is(.kpi, .ps-kpi, .mn-kpi, .stat)::after { display: none !important; }
:root[data-theme] body :is(.kpi, .ps-kpi, .mn-kpi, .stat) :is(span, small, .st-ico) { color: rgba(255, 255, 255, .92) !important; }
:root[data-theme] body :is(.kpi, .ps-kpi, .mn-kpi, .stat) b { color: #fff !important; display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
:root[data-theme] body :is(.kpi, .ps-kpi, .mn-kpi, .stat) b .dotnum { height: 30px; }
:root[data-theme] body :is(.kpi, .ps-kpi, .mn-kpi, .stat) b em { font-style: normal; font-size: .95rem; opacity: .9; }
:is(.kpis, .ps-kpis, .mn-kpis, .stats) > :nth-child(6n+1) { --wc: #10b981; } :is(.kpis, .ps-kpis, .mn-kpis, .stats) > :nth-child(6n+2) { --wc: #f59e0b; }
:is(.kpis, .ps-kpis, .mn-kpis, .stats) > :nth-child(6n+3) { --wc: #8b5cf6; } :is(.kpis, .ps-kpis, .mn-kpis, .stats) > :nth-child(6n+4) { --wc: #f97316; }
:is(.kpis, .ps-kpis, .mn-kpis, .stats) > :nth-child(6n+5) { --wc: #3b82f6; } :is(.kpis, .ps-kpis, .mn-kpis, .stats) > :nth-child(6n+6) { --wc: #ec4899; }
.kpi.is-bad { --wc: #f43f5e !important; }
.ps-kpi { border-left: 0 !important; }
/* page titles: big, clean */
.page-head h1 { font-size: clamp(1.7rem, 2.6vw, 2.3rem) !important; letter-spacing: -.03em; font-weight: 700; }
/* tables inside glass panels */
:root[data-theme="light"] table.list thead th { background: rgba(255, 255, 255, .5); }
:root[data-theme="light"] table.list tbody tr:hover td { background: rgba(255, 255, 255, .55); }
/* tab rows (Výplaty months, Tabulky, Fakturace) as glass pills */
:is(.ps-tabs, .gx-tabs, .inv-tabs, .ps-months) button { border-radius: 999px !important; }
/* login: light glass page, dark brand side, glass form */
.login-page { background: linear-gradient(160deg, #f4f6f9, #e9eef3) !important; --surface: rgba(255, 255, 255, .7); --surface-input: #fff; --border: #e3e6ec; --ink: #0f172a; --ink-2: #475569; --ink-3: #64748b; --panel: rgba(255, 255, 255, .7); --line: #e3e6ec; color-scheme: light; color: #0f172a; }
.login-page::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(36% 34% at 18% 10%, rgba(147, 197, 253, .45), transparent 70%), radial-gradient(30% 30% at 88% 12%, rgba(196, 181, 253, .45), transparent 70%), radial-gradient(40% 36% at 70% 95%, rgba(251, 207, 232, .45), transparent 70%); }
.login-shell { border: 1px solid rgba(255, 255, 255, .9) !important; border-radius: 32px !important; box-shadow: 0 40px 80px -40px rgba(30, 41, 59, .45) !important; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.login-brand { background: radial-gradient(60% 60% at 50% 40%, rgba(34, 211, 238, .18), transparent 70%), #0E1013 !important; color: #e8eaee; }
.login-card { background: rgba(255, 255, 255, .7) !important; color: #0f172a; }
.login-card .input { background: #fff !important; color: #0f172a !important; border: 1px solid #e3e6ec !important; }
.login-card h1 { color: #0f172a; }
.login-card-brand { background: #0E1013; padding: 12px 16px; border-radius: 20px; justify-content: center; }
.login-lang button { color: #0f172a; }
/* A quiet welcome on the same liquid-glass material as the app's floating panels. */
.welcome { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; box-sizing: border-box; padding: 20px; background: rgba(8, 13, 18, .12); opacity: 1; transition: opacity .18s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.welcome.out { opacity: 0; }
.welcome-card { position: relative; display: flex; flex-direction: column; align-items: center; width: min(448px, 100%); max-height: calc(100dvh - 40px); box-sizing: border-box; padding: 36px 32px 28px; overflow: auto; border: 0; border-radius: 28px; color: var(--ink); text-align: center; background: var(--panel); background: var(--gl-spec, linear-gradient(transparent, transparent)), var(--gl-sheen, linear-gradient(#ffffff14, #ffffff14)), color-mix(in srgb, var(--panel) var(--gl-k4, 44%), transparent); box-shadow: var(--gl-depth, 0 20px 48px -24px #0008), var(--gl-rim, inset 0 1px 0 #ffffff26); -webkit-backdrop-filter: var(--lg, var(--gl-fbf, blur(32px) saturate(160%))); backdrop-filter: var(--lg, var(--gl-fbf, blur(32px) saturate(160%))); animation: welcomeIn .32s cubic-bezier(.16, 1, .3, 1); overflow-wrap: anywhere; }
.welcome-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .15s; }
.welcome-close:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.welcome svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.welcome-mark { position: relative; flex: none; width: 60px; height: 60px; margin-bottom: 24px; border-radius: 14px; overflow: hidden; }
.welcome-mark img { display: block; width: 100%; height: 100%; }
/* One light pass over the brand; no loop or animation of the expensive glass filter. */
.welcome-mark::after { content: ""; position: absolute; inset: -35%; background: linear-gradient(110deg, transparent 36%, #ffffff52 49%, transparent 62%); opacity: 0; transform: translateX(100%); pointer-events: none; animation: welcomeLight .85s .12s cubic-bezier(.16, 1, .3, 1); }
.welcome-copy { width: 100%; }
:root[data-orbit] .welcome-copy h2 { margin: 0; color: var(--ink); font-size: clamp(1.65rem, 5vw, 2rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.18; text-wrap: balance; overflow-wrap: anywhere; }
.welcome-copy p { margin: 12px 0 0; color: var(--ink-2); font-size: .94rem; line-height: 1.55; text-wrap: balance; }
.welcome-company { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 26px 0 0; color: var(--ink-2); font-size: .78rem; line-height: 1.5; }
.welcome-company strong { color: var(--ink); font-size: 1rem; font-weight: 600; }
.welcome-continue { display: flex; justify-content: center; align-items: center; flex: none; gap: 12px; width: 100%; min-height: 48px; margin-top: 28px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--gl-lens, var(--primary)); color: #1f0e04; box-shadow: var(--gl-lens-sh, 0 6px 16px -8px #0006); font: 650 .9rem/1.4 var(--body); cursor: pointer; transition: filter .15s; }
.welcome-continue:hover { filter: brightness(1.07); }
.welcome-continue:active { filter: brightness(.95); }
.welcome :is(button):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.welcome-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes welcomeIn { 0% { opacity: 0; transform: scale(.84); } 75% { opacity: 1; transform: scale(1.012); } 100% { opacity: 1; transform: scale(1); } }
@keyframes welcomeLight { 0% { opacity: 0; transform: translateX(-100%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
@media (max-width: 480px) { .welcome { padding: 16px; } .welcome-card { max-height: calc(100dvh - 32px); padding: 32px 24px 24px; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .welcome { transition: none; } .welcome-card, .welcome-mark::after { animation: none; } }
:root[data-glass="off"] .welcome-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel); }
@media (prefers-reduced-transparency: reduce) { .welcome-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .welcome-card { background: var(--panel); } }
/* ===== phone: compact dark top bar, everything in one line ===== */
@media (max-width: 900px) {
  :root[data-theme] .side { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px !important; }
  .side .brand { grid-column: 1; margin: 0 !important; } .side .brand .aiox-word { width: 58px !important; }
  .side .side-ask { grid-column: 2; margin: 0 !important; padding: 6px 10px !important; } .side .side-ask .ask-t small { display: none; } .side .side-ask .ask-ico { width: 26px; height: 26px; }
  .side .firm-bar { grid-column: 1 / -1; margin: 0; }
  .side .team-switch { grid-column: 3; margin: 0 !important; padding: 3px !important; }
  .side .team-switch button { height: 30px !important; padding: 0 8px !important; font-size: 0 !important; } .side .team-switch button::first-letter { font-size: 1rem; }
  .side .nav, .side .side-foot { display: none !important; }
  .page { padding: 14px 12px 0 !important; }
  .page-head { gap: 10px; } .page-head p { font-size: .84rem; }
  :root[data-theme] body :is(.kpi, .ps-kpi, .mn-kpi, .stat) b .dotnum { height: 24px; }
  .st4-t b .dotnum { height: 28px !important; }
  .dialog { width: 100vw !important; max-width: 100vw !important; border-radius: 26px 26px 0 0 !important; align-self: end; max-height: 92vh; }
  .modal { align-items: end !important; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .toolbar { gap: 8px; } .toolbar .select, .toolbar .input.search { min-width: 0; flex: 1 1 140px; }
}
/* light theme: inputs need a visible edge (cards use a white rim) */
:root[data-theme="light"] :is(.input, .select, textarea.input) { border: 1px solid #dde2e9 !important; background: #fff !important; }
:root[data-theme="light"] .side :is(.input, .select) { background: #17191d !important; border-color: #262a30 !important; color: #f2f3f5 !important; }
@media (max-width: 900px) {
  .side .brand { overflow: visible; } .side .brand .aiox-word { width: 54px !important; min-width: 54px; } .side .brand-ico { width: 28px !important; height: 28px !important; }
  .side .side-ask .ask-t b { white-space: nowrap; font-size: .86rem; } .side .side-ask { min-width: 0; }
}
.more-grid a svg { color: var(--ic, var(--primary)) !important; background: color-mix(in srgb, var(--ic, var(--primary)) 16%, transparent) !important; stroke: currentColor; }
@media (max-width: 420px) { .side .side-ask .ask-t b { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; } }

/* =====================================================================
   AIOX – SalesFlow style for the whole app: dark frame + dark side menu, the page is one big
   light rounded canvas, clean white cards, accents lime / black / violet / light blue.
   ===================================================================== */
:root { --sf-lime: #c6f432; --sf-violet: #5b3df5; --sf-ice: #cfe7f2; --sf-black: #111317; --sf-card: #ffffff; --sf-canvas: #f2f3f5; --sf-line: #e8eaee; }
:root[data-theme="light"] body { background: #0E1013 !important; }
:root[data-theme="light"] body::before { display: none !important; }
@media (min-width: 901px) {
  :root[data-theme="light"] .page { background: var(--sf-canvas); border-radius: 30px; margin: 12px 12px 12px 0; min-height: calc(100vh - 24px); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8); }
}
@media (max-width: 900px) { :root[data-theme="light"] .page { background: var(--sf-canvas); border-radius: 26px 26px 0 0; } }
/* cards: clean white */
:root[data-theme="light"] :is(.panel, .sc, .person, .site-card, .ios-list, .bq, .hw-card, .fm-card, .wg-glass, .set-hero, .side-stack.is-tabbed, .mn-doc, .wx-card, .cm) {
  background: var(--sf-card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--sf-line) !important; border-radius: 22px !important; box-shadow: 0 1px 2px rgba(17, 19, 23, .04) !important; }
:root[data-theme="light"] .group-head h2, :root[data-theme="light"] .panel h2 { font-weight: 600; font-size: 1.02rem; }
/* summary tiles: white cards, a dark round icon dot in the tile colour, dark numbers */
:root[data-theme="light"] body .st4 .st4-t, :root[data-theme="light"] body :is(.kpi, .ps-kpi, .mn-kpi, .stat) {
  background: var(--sf-card) !important; background-image: none !important; color: var(--sf-black) !important; border: 1px solid var(--sf-line) !important; border-radius: 22px !important; box-shadow: 0 1px 2px rgba(17, 19, 23, .04) !important; position: relative; }
:root[data-theme="light"] body .st4 .st4-t::after, :root[data-theme="light"] body :is(.kpi, .ps-kpi, .mn-kpi, .stat)::after {
  content: "" !important; display: block !important; position: absolute; right: 14px; top: 14px; left: auto; bottom: auto; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--tc, var(--wc, var(--sf-violet))) 0 5px, transparent 6px), var(--sf-black); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc, var(--wc, var(--sf-violet))) 35%, transparent), 0 0 18px -4px var(--tc, var(--wc, var(--sf-violet))); opacity: 1 !important; }
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) :is(span, small) { color: #6b7280 !important; }
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) b { color: var(--sf-black) !important; }
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) .st-ico { display: none; }
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) b .dotnum { color: var(--sf-black); }
/* Dnes widgets in the SalesFlow palette */
:root[data-theme="light"] .wg { box-shadow: 0 1px 2px rgba(17, 19, 23, .05) !important; }
:root[data-theme="light"] .wg::after { display: none; }
:root[data-theme="light"] .wg-blue { background: var(--sf-card) !important; color: var(--sf-black); border: 1px solid var(--sf-line); }
:root[data-theme="light"] .wg-blue .wg-big, :root[data-theme="light"] .wg-blue .wg-big .dotnum { color: var(--sf-violet); }
:root[data-theme="light"] .wg-blue .wg-gauge path:first-of-type { stroke: #eceef2; }
:root[data-theme="light"] .wg-blue .wg-gauge path:nth-of-type(2) { stroke: var(--sf-violet); }
:root[data-theme="light"] .wg-blue .wg-go { background: var(--sf-black); color: #fff; }
:root[data-theme="light"] .wg-blue .wg-legend i { border-radius: 50%; }
:root[data-theme="light"] .wg-violet { background: var(--sf-card) !important; color: var(--sf-black); border: 1px solid var(--sf-line); }
:root[data-theme="light"] .wg-violet .trend-card, :root[data-theme="light"] .wg-violet .tr-head b { color: var(--sf-black); }
:root[data-theme="light"] .wg-violet .tr-head small, :root[data-theme="light"] .wg-violet .tr-head .muted, :root[data-theme="light"] .wg-violet .tr-x span { color: #6b7280 !important; }
:root[data-theme="light"] .wg-violet .tr-kpis > span { background: var(--sf-canvas); border-color: var(--sf-line); color: var(--sf-black); }
:root[data-theme="light"] .wg-violet .tr-svg path[stroke] { stroke: var(--sf-violet); }
:root[data-theme="light"] .wg-violet .tr-svg path[fill^="url"] { opacity: .35; }
:root[data-theme="light"] .wg-violet .tr-svg circle { fill: var(--sf-lime); stroke: var(--sf-black); }
:root[data-theme="light"] .wg-violet .tr-x span.on { background: var(--sf-black); color: #fff !important; }
:root[data-theme="light"] .wg-sky { background: var(--sf-lime) !important; color: var(--sf-black); }
:root[data-theme="light"] .wg-sky .wg-ticks line { stroke: var(--sf-black); } :root[data-theme="light"] .wg-sky .wg-dial .dotnum { color: var(--sf-black); }
:root[data-theme="light"] .wg-pink { background: var(--sf-black) !important; color: #fff; }
:root[data-theme="light"] .wg-rose { background: var(--sf-violet) !important; color: #fff; }
:root[data-theme="light"] .wg-glass { background: var(--sf-card) !important; }
:root[data-theme="light"] .wh { background: var(--sf-canvas) !important; border: 1px solid var(--sf-line) !important; box-shadow: none !important; }
:root[data-theme="light"] .wh-n { color: var(--sf-black); } :root[data-theme="light"] .wh-ava em { background: var(--sf-black); border-color: var(--sf-canvas); }
:root[data-theme="light"] .wg-cnt { background: var(--sf-lime); color: var(--sf-black); }
/* the assistant: black panel with a green orb */
.orb { background: radial-gradient(circle at 38% 30%, #f7fee7 0%, #bef264 22%, #65a30d 55%, #1a2e05 82%) !important; box-shadow: 0 0 46px 8px rgba(190, 242, 100, .45), inset 0 -10px 24px rgba(0, 0, 0, .35) !important; }
.orb i { border-color: rgba(190, 242, 100, .25) !important; }
.wg-dark { background: radial-gradient(60% 60% at 50% 30%, rgba(190, 242, 100, .14), transparent 70%), #0E1013 !important; }
.ai-chips button:hover { border-color: var(--sf-lime) !important; }
/* header KPI pills: dark icon circles, white pill */
:root[data-theme="light"] .kp { background: var(--sf-card); border-color: var(--sf-line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* buttons: black primary like SalesFlow, white secondary */
:root[data-theme="light"] .btn-primary { background: var(--sf-black) !important; color: #fff !important; box-shadow: none !important; }
:root[data-theme="light"] .btn-primary:hover { background: #24272d !important; }
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-ghost), :root[data-theme="light"] .round-btn { background: var(--sf-card) !important; border: 1px solid var(--sf-line) !important; box-shadow: none !important; }
:root[data-theme="light"] .seg { background: var(--sf-card) !important; border: 1px solid var(--sf-line) !important; }
:root[data-theme="light"] .seg button.on, :root[data-theme="light"] .pf-chip.on { background: var(--sf-black) !important; color: #fff !important; }
:root[data-theme="light"] .switch input:checked + span { background: var(--sf-violet) !important; }
/* status badges like SalesFlow (Active / Trial / Canceled) */
:root[data-theme="light"] :is(.pill-ok, .sc-st.st-ok) { background: #ecfccb !important; color: #3f6212 !important; }
:root[data-theme="light"] :is(.pill-bad) { background: #ffe4e6 !important; color: #be123c !important; }
/* tables */
:root[data-theme="light"] table.list thead th { background: var(--sf-canvas) !important; color: #6b7280; }
:root[data-theme="light"] .ps-grid, :root[data-theme="light"] .gx { background: var(--sf-card); }
/* side menu active item: lime glow like SalesFlow */
:root[data-theme="light"] .side .nav a.on { background: linear-gradient(90deg, rgba(198, 244, 50, .18), rgba(255, 255, 255, .03) 75%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }
:root[data-theme="light"] .side .nav a.on::after { content: ""; position: absolute; right: 10px; top: 50%; width: 36px; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--sf-lime); box-shadow: 0 0 12px var(--sf-lime); }
:root[data-theme="light"] .side .nav a { position: relative; }
:root[data-theme="light"] .side-ask .ask-ico { background: var(--sf-lime) !important; color: var(--sf-black) !important; }
/* login in the same look */
.login-page .btn-primary { background: var(--sf-black) !important; }
:root[data-theme="light"] body .stat::after { width: 20px !important; height: 20px !important; top: 10px !important; right: 10px !important; background: radial-gradient(circle, var(--tc, var(--wc, var(--sf-violet))) 0 3px, transparent 4px), var(--sf-black) !important; }

/* =====================================================================
   AIOX – one look for the whole app (like the SalesFlow photo): black side menu + black frame,
   the main page white. Cards white with a fine line, inner boxes light grey.
   ===================================================================== */
:root { --sf-black: #0b0b0d; --sf-canvas: #ffffff; --sf-soft: #f5f6f8; --sf-line: #e9eaee; }
.theme-seg { display: none !important; }
:root[data-theme="light"] body, :root[data-theme="light"] .side { background: #000 !important; }
:root[data-theme="light"] .side { --surface: #121316; --surface-hover: #1a1b1f; --border: #222328; }
:root[data-theme="light"] .side::after { display: none !important; }
:root[data-theme="light"] .page { background: #fff !important; }
:root[data-theme="light"] .page { --surface: #fff; --surface-2: var(--sf-soft); --bg: #fff; }
/* boxes inside cards: light grey, no line */
:root[data-theme="light"] :is(.wh, .wg-violet .tr-kpis > span, .ios-row-in, .hw-msg, .bq-q, .mn-row, .kp) { background: var(--sf-soft) !important; border-color: transparent !important; }
:root[data-theme="light"] table.list thead th { background: var(--sf-soft) !important; }
:root[data-theme="light"] :is(.panel, .sc, .person, .site-card, .ios-list, .bq, .hw-card, .fm-card, .wg-glass, .set-hero, .mn-doc, .wx-card, .cm, .wg-blue, .wg-violet) { box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 24px -18px rgba(0, 0, 0, .18) !important; }
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) { box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 24px -18px rgba(0, 0, 0, .18) !important; }
:root[data-theme="light"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { background: #fff; }
/* phone: black top bar, white page underneath */
@media (max-width: 900px) { :root[data-theme="light"] .page { border-radius: 24px 24px 0 0 !important; } }
@media (max-width: 900px) { :root[data-theme="light"] .page { overflow-x: clip; } }

/* =====================================================================
   AIOX – the main colour is blue (like the logo): blue + azure instead of lime and violet.
   Black menu and white page stay.
   ===================================================================== */
:root { --sf-blue: #1f6bff; --sf-azure: #19b8ff; --sf-lime: var(--sf-blue); --sf-violet: var(--sf-blue); --sf-blue-soft: #e9f1ff; }
:root[data-theme="light"] .wg-sky { background: linear-gradient(150deg, var(--sf-azure), var(--sf-blue) 70%) !important; color: #fff; }
:root[data-theme="light"] .wg-sky :is(h3, h2, b, small, span, .muted) { color: #fff !important; }
:root[data-theme="light"] .wg-sky .wg-ticks line { stroke: #fff; } :root[data-theme="light"] .wg-sky .wg-dial .dotnum { color: #fff; }
:root[data-theme="light"] .wg-rose { background: linear-gradient(150deg, #3b82f6, #1e40af) !important; }
:root[data-theme="light"] .wg-cnt { background: var(--sf-blue-soft); color: var(--sf-blue); }
:root[data-theme="light"] .wg-violet .tr-svg circle { fill: #fff; stroke: var(--sf-blue); stroke-width: 3; }
:root[data-theme="light"] .wg-violet .tr-x span.on { background: var(--sf-blue); }
.orb { background: radial-gradient(circle at 38% 30%, #f0f9ff 0%, #7dd3fc 22%, #1f6bff 55%, #0a1a40 82%) !important; box-shadow: 0 0 46px 8px rgba(31, 107, 255, .45), inset 0 -10px 24px rgba(0, 0, 0, .35) !important; }
.orb i { border-color: rgba(56, 160, 255, .28) !important; }
.wg-dark { background: radial-gradient(60% 60% at 50% 30%, rgba(31, 107, 255, .2), transparent 70%), #000 !important; }
:root[data-theme="light"] .side .nav a.on { background: linear-gradient(90deg, rgba(31, 107, 255, .26), rgba(255, 255, 255, .03) 75%) !important; color: #fff !important; }
:root[data-theme="light"] .side .nav a.on::after { background: var(--sf-azure); box-shadow: 0 0 12px var(--sf-azure); }
:root[data-theme="light"] .side-ask .ask-ico { background: linear-gradient(150deg, var(--sf-azure), var(--sf-blue)) !important; color: #fff !important; }
:root[data-theme="light"] .btn-primary { background: var(--sf-blue) !important; color: #fff !important; }
:root[data-theme="light"] .btn-primary:hover { background: #1557d6 !important; }
:root[data-theme="light"] .seg button.on, :root[data-theme="light"] .pf-chip.on { background: var(--sf-blue) !important; color: #fff !important; }
.login-page .btn-primary { background: var(--sf-blue) !important; }
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) { --tc: var(--sf-azure); --wc: var(--sf-azure); }
:root[data-theme="light"] .dv-ava { background: linear-gradient(150deg, var(--sf-azure), var(--sf-blue)) !important; color: #fff !important; }
:root[data-theme="light"] .david-fab { border-color: rgba(31, 107, 255, .35) !important; box-shadow: 0 10px 30px -12px rgba(31, 107, 255, .6) !important; }

/* =====================================================================
   AIOX – texts normal (white in the menu, dark on the page), blue only for details and
   backgrounds; liquid glass cards over soft blue light; the open menu item is a white tab
   that flows into the page (concave corners), so it is clear where you are.
   ===================================================================== */
:root[data-theme="light"] .side .nav a { color: #fff !important; }
:root[data-theme="light"] .side .nav a:hover:not(.on) { background: rgba(255, 255, 255, .07) !important; }
:root[data-theme="light"] .side :is(.nav-gh, .nav-group-h, .label) { color: rgba(255, 255, 255, .45); }
@media (min-width: 901px) {
  :root[data-theme="light"] .side .nav { margin-right: -14px !important; padding-right: 0 !important; overflow-x: hidden; }
  :root[data-theme="light"] .side .nav a { margin-right: 14px; }
  :root[data-theme="light"] .side .nav a.on { margin-right: 0 !important; background: #fff !important; color: var(--sf-black) !important; border-radius: 16px 0 0 16px !important; box-shadow: none !important; padding-right: 26px; z-index: 1; }
  :root[data-theme="light"] .side .nav a.on::before, :root[data-theme="light"] .side .nav a.on::after {
    content: "" !important; position: absolute !important; right: 0 !important; left: auto !important; width: 18px !important; height: 18px !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none; display: block !important; opacity: 1 !important; }
  :root[data-theme="light"] .side .nav a.on::before { top: -18px !important; bottom: auto !important; background: radial-gradient(circle at 0 0, transparent 17.5px, #fff 18px) !important; }
  :root[data-theme="light"] .side .nav a.on::after { top: 100% !important; bottom: auto !important; background: radial-gradient(circle at 0 100%, transparent 17.5px, #fff 18px) !important; }
  :root[data-theme="light"] .side .nav a.on svg { color: var(--sf-blue); opacity: 1; }
  :root[data-theme="light"] .page { border-top-left-radius: 30px; }
}
/* the page: white with soft blue light behind the glass (left edge stays white for the tab) */
:root[data-theme="light"] .page { background:
  radial-gradient(38% 30% at 88% 6%, rgba(25, 184, 255, .20), transparent 70%),
  radial-gradient(40% 36% at 70% 70%, rgba(31, 107, 255, .14), transparent 70%),
  radial-gradient(28% 26% at 38% 38%, rgba(110, 160, 255, .12), transparent 70%), #fff !important; background-attachment: fixed !important; }
/* liquid glass cards and tiles */
:root[data-theme="light"] :is(.panel, .sc, .person, .site-card, .ios-list, .bq, .hw-card, .fm-card, .wg-glass, .set-hero, .mn-doc, .wx-card, .cm, .wg-blue, .wg-violet),
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) {
  background: rgba(255, 255, 255, .58) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; backdrop-filter: blur(22px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(31, 107, 255, .04), 0 0 0 1px rgba(15, 30, 70, .06), 0 14px 34px -22px rgba(20, 60, 160, .35) !important; }
:root[data-theme="light"] :is(.wh, .wg-violet .tr-kpis > span, .hw-msg, .bq-q, .mn-row, .kp) { background: rgba(255, 255, 255, .55) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .8) !important; box-shadow: 0 0 0 1px rgba(15, 30, 70, .05) !important; }
:root[data-theme="light"] table.list thead th { background: rgba(240, 245, 252, .8) !important; }
/* coloured widgets: glass shine on top */
:root[data-theme="light"] :is(.wg-sky, .wg-rose, .wg-pink, .wg-dark) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 40px -24px rgba(20, 60, 160, .55) !important; }
:root[data-theme="light"] :is(.wg-sky, .wg-rose)::before { content: ""; position: absolute; inset: 0 0 55% 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent); pointer-events: none; }
:root[data-theme="light"] :is(.wg-sky, .wg-rose) { position: relative; }
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) :is(span, small, .st-ico):not(.dotnum):not(.mn-in):not(.mn-out) { color: #6b7280 !important; }
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) b span { color: inherit !important; }

/* departure taken from the time of the message (no time written) -- highlighted, may differ */
.lv-msg { background: #fff3c4; color: #8a5a00 !important; border-radius: 6px; padding: 0 4px; font-weight: 700; box-shadow: inset 0 0 0 1px #f3d36b; }

/* ---------- Stavební deník ---------- */
.banner { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; font-size: .9rem; background: #eef4ff; color: #1e3a8a; border: 1px solid #d6e4ff; }
.banner.warn { background: #fff8e1; color: #8a5a00; border-color: #f6e2a6; }
.banner.bad { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.dn-miss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: .9rem; color: var(--ink-2); }
.dn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dn-card { padding: 16px 18px; border-radius: 20px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 30, 70, .06), 0 14px 34px -22px rgba(20, 60, 160, .35); transition: transform .15s; }
.dn-card:hover, .dn-card:focus-visible { transform: translateY(-2px); }
.dn-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dn-card h3 { margin: 0; font-size: 1.05rem; }
.dn-card p { margin: 0; font-size: .86rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dn-card footer { display: flex; flex-wrap: wrap; gap: 10px; font-size: .82rem; margin-top: 4px; }
.dn-ok { color: #15803d; font-weight: 600; } .dn-diff { color: #b45309; font-weight: 700; }
.dn-body { display: grid; gap: 12px; }
.dn-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.dn-meta .field { flex: 1 1 150px; }
.dn-sum { margin: 0; padding: 12px 14px; border-radius: 14px; background: #f3f7ff; font-size: .93rem; }
.dn-body h4 { margin: 6px 0 2px; font-size: .9rem; }
.dn-tab .input-sm { height: 32px; padding: 0 8px; font-size: .86rem; min-width: 64px; }
.dn-tab td { vertical-align: middle; }
.dn-r-diff td { background: #fff8e6; } .dn-r-unk td { background: #f6f6f8; color: var(--ink-3); } .dn-r-ok td:last-child { color: #15803d; }
.dn-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dn-sec { padding: 10px 14px; border-radius: 14px; background: rgba(240, 245, 252, .8); }
.dn-sec h4 { margin: 0 0 6px; } .dn-sec ul { margin: 0; padding-left: 18px; font-size: .86rem; }
@media (max-width: 700px) { .dn-tab th:nth-child(6), .dn-tab td:nth-child(6) { display: none; } }
.dialog:has(.dn-body) { width: min(1000px, 96vw) !important; max-width: 96vw !important; }
.dialog .body.dn-body { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
.dn-tab td:nth-child(2) .input-sm { min-width: 150px; }

/* ---------- Dnes = own dashboard ---------- */
.bento > .wg[data-size="s"] { grid-column: span 1 !important; }
.bento > .wg[data-size="m"] { grid-column: span 2 !important; }
.bento > .wg[data-size="l"] { grid-column: 1 / -1 !important; }
.bento > .wg:not(.wg-blue) { grid-row: auto; }
@media (max-width: 1200px) { .bento > .wg[data-size="m"] { grid-column: 1 / -1 !important; } }
.wg-add { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: 22px; border: 2px dashed rgba(31, 107, 255, .3); background: rgba(255, 255, 255, .35); color: #1f6bff; font: inherit; font-weight: 600; cursor: pointer; }
.wg-add span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #1f6bff; color: #fff; font-size: 1.1rem; }
.wg-add:hover { background: rgba(233, 241, 255, .8); }
.dash-edit { white-space: nowrap; }
.wg-glass header small { font-weight: 400; }
.pin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.pin { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .7); font: inherit; font-size: .88rem; font-weight: 600; text-align: left; cursor: pointer; color: var(--ink); box-shadow: 0 0 0 1px rgba(15, 30, 70, .05); }
.pin i { font-style: normal; width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(150deg, #19b8ff, #1f6bff); color: #fff; }
.pin span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pin:hover { transform: translateY(-1px); background: #fff; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; }
.qa { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 16px; border: 0; background: #0b0b0d; color: #fff; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; text-align: left; }
.qa i { font-style: normal; font-size: 1.2rem; } .qa:hover { background: #1f6bff; }
.wg-note textarea { width: 100%; min-height: 130px; margin-top: 10px; border: 0; border-radius: 14px; padding: 12px; resize: vertical; font: inherit; font-size: .9rem; background: #fff8d6; color: #3b2f00; box-shadow: inset 0 0 0 1px #f3e2a0; }
.wg-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.wg-list li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .6); font-size: .86rem; }
.wg-list small { color: var(--ink-3); }
.wg-more { display: inline-block; margin-top: 10px; font-size: .84rem; font-weight: 600; color: #1f6bff; text-decoration: none; }
.wg-num { margin-top: 12px; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.wg-warn { margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; background: #fff3c4; color: #7a5200; font-size: .85rem; }
.wg-ok { margin: 10px 0 0; color: #15803d; font-size: .86rem; font-weight: 600; }
.wg-bars { display: grid; gap: 8px; margin-top: 12px; }
.wg-bars div { display: grid; grid-template-columns: minmax(0, 1.2fr) 1.5fr auto; align-items: center; gap: 10px; font-size: .84rem; }
.wg-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-bars i { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff)); width: var(--w); }
.wg-wx .wx-now { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.cmdk-pin { margin-left: auto; padding: 2px 6px; border-radius: 8px; opacity: .55; } .cmdk-pin:hover { opacity: 1; background: rgba(31, 107, 255, .12); }
/* the editor */
.dialog:has(.de-body) { width: min(760px, 96vw) !important; }
.dialog .body.de-body { display: block; }
.de-wlist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.de-wlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f6f7f9; opacity: .65; cursor: grab; }
.de-wlist li.on { opacity: 1; background: #eef4ff; }
.de-wlist li.drag { outline: 2px dashed #1f6bff; }
.de-sw { display: flex; align-items: center; gap: 10px; cursor: pointer; } .de-sw span { display: grid; } .de-sw small { color: var(--ink-3); font-size: .8rem; }
.de-sw input { width: 20px; height: 20px; accent-color: #1f6bff; }
.de-sz button { min-width: 34px; } .de-mv { display: flex; gap: 4px; } .de-mv .round-btn { width: 32px; height: 32px; }
.de-pinlist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.de-pinlist li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: #f6f7f9; font-size: .88rem; } .de-pinlist li span { flex: 1; }
.de-add { margin-top: 8px; } .de-sug { display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; } .de-sug:hover { border-color: #1f6bff; }
.de-pages { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 600px) { .de-wlist li { grid-template-columns: 1fr auto; } .de-sz { grid-column: 1 / -1; justify-self: start; } .dash-edit { order: 9; } }
.bento { grid-auto-flow: row dense; }
.bento > .wg[data-size="l"] { grid-column: span 3 !important; }
@media (max-width: 1200px) { .bento > .wg[data-size="l"] { grid-column: 1 / -1 !important; } }

/* =====================================================================
   AIOX – more liquid glass everywhere + a simple decorative background behind the page
   ===================================================================== */
:root { --gl-bg: rgba(255, 255, 255, .52); --gl-bg2: rgba(255, 255, 255, .68); --gl-line: rgba(255, 255, 255, .8); --gl-blur: blur(22px) saturate(185%);
  --gl-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(31, 107, 255, .05), 0 0 0 1px rgba(15, 30, 70, .06), 0 16px 36px -24px rgba(20, 60, 160, .38); }
/* the background: soft colour light + fine waves, only decoration */
:root[data-theme="light"] .page { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='%231f6bff' stroke-opacity='.07' stroke-width='1.5'%3E%3Cpath d='M0 640 C 300 560 520 760 820 660 S 1300 520 1600 600'/%3E%3Cpath d='M0 690 C 320 610 540 810 840 710 S 1320 570 1600 650'/%3E%3Cpath d='M0 740 C 340 660 560 860 860 760 S 1340 620 1600 700'/%3E%3Cpath d='M0 180 C 260 120 480 260 760 200 S 1260 80 1600 150'/%3E%3Cpath d='M0 225 C 280 165 500 305 780 245 S 1280 125 1600 195'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat fixed,
  radial-gradient(34% 30% at 92% 4%, rgba(25, 184, 255, .30), transparent 70%),
  radial-gradient(30% 34% at 8% 96%, rgba(124, 92, 255, .20), transparent 70%),
  radial-gradient(36% 32% at 70% 72%, rgba(31, 107, 255, .18), transparent 70%),
  radial-gradient(26% 24% at 30% 30%, rgba(120, 220, 255, .16), transparent 70%),
  linear-gradient(180deg, #f7f9fd, #eef3fb) !important; background-attachment: fixed !important; }
/* glass on everything that floats on the page */
:root[data-theme="light"] :is(.panel, .sc, .person, .site-card, .ios-list, .bq, .hw-card, .fm-card, .wg-glass, .set-hero, .mn-doc, .wx-card, .cm, .wg-blue, .wg-violet, .dn-card, .trend-card, .chk-panel, .day-end),
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) {
  background: var(--gl-bg) !important; -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important; border: 1px solid var(--gl-line) !important; box-shadow: var(--gl-shadow) !important; }
:root[data-theme="light"] :is(.btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger), .round-btn, .seg, .chip, .pf-chip, .kp, .select, .input, textarea.input) {
  background-color: var(--gl-bg2) !important; -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); border-color: rgba(255, 255, 255, .85) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 30, 70, .08), 0 6px 16px -12px rgba(20, 60, 160, .35) !important; }
:root[data-theme="light"] .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -12px rgba(31, 107, 255, .8) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent) !important; }
:root[data-theme="light"] table.list thead th { background: rgba(240, 245, 252, .55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="light"] table.list tbody tr:hover td { background: rgba(255, 255, 255, .45); }
:root[data-theme="light"] .dialog { background: rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: blur(30px) saturate(190%) !important; backdrop-filter: blur(30px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, .9) !important; box-shadow: inset 0 1px 0 #fff, 0 40px 90px -30px rgba(10, 30, 80, .55) !important; }
:root[data-theme="light"] .modal { background: rgba(8, 14, 30, .35) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme="light"] .cmdk-box { background: rgba(255, 255, 255, .74) !important; -webkit-backdrop-filter: blur(30px) saturate(190%) !important; backdrop-filter: blur(30px) saturate(190%) !important; }
/* phone: the bottom bar is a floating glass pill */
@media (max-width: 900px) {
  :root[data-theme="light"] .tabbar { left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 26px !important; background: rgba(255, 255, 255, .62) !important; -webkit-backdrop-filter: blur(26px) saturate(190%) !important; backdrop-filter: blur(26px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, .9) !important; box-shadow: inset 0 1px 0 #fff, 0 18px 40px -16px rgba(10, 30, 80, .45) !important; }
  :root[data-theme="light"] { --gl-blur: blur(16px) saturate(170%); }
}

/* =====================================================================
   Phone: clear and short
   ===================================================================== */
@media (max-width: 700px) {
  /* summary tiles: one swipeable row of small tiles instead of a screen of big ones */
  :root[data-theme] body :is(.st4, .mn-kpis, .ps-kpis, .kpis) { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -12px; margin-right: -12px; padding: 2px 12px 8px !important; scrollbar-width: none; grid-template-columns: none !important; }
  :root[data-theme] body :is(.st4, .mn-kpis, .ps-kpis, .kpis)::-webkit-scrollbar { display: none; }
  :root[data-theme] body :is(.st4-t, .mn-kpi, .ps-kpi, .kpi) { flex: 0 0 auto !important; min-width: 128px; max-width: 170px; min-height: 0 !important; padding: 10px 12px !important; border-radius: 16px !important; scroll-snap-align: start; }
  :root[data-theme] body :is(.st4-t, .mn-kpi, .ps-kpi, .kpi)::after { width: 14px !important; height: 14px !important; top: 10px !important; right: 10px !important; background: var(--tc, var(--sf-azure, #19b8ff)) !important; box-shadow: none !important; }
  :root[data-theme] body :is(.st4-t, .mn-kpi, .ps-kpi, .kpi) b { font-size: 1.15rem !important; margin: 2px 0 0 !important; display: block; }
  :root[data-theme] body :is(.st4-t, .mn-kpi, .ps-kpi, .kpi) b .dotnum { height: 22px !important; }
  :root[data-theme] body :is(.st4-t, .mn-kpi, .ps-kpi, .kpi) > span:first-child { font-size: .72rem !important; padding-right: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  :root[data-theme] body :is(.st4-t, .mn-kpi, .ps-kpi, .kpi) small { font-size: .7rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  /* page heads: title + main button on one line, the long description hidden */
  .page-head p, .page-head > div > p { display: none; }
  .page-head h1 { font-size: 1.55rem !important; }
  .bx-where, #dayBox { display: none !important; }
  /* Dnes: the 4 numbers in one row, tools in one row, no doubled "Kdo je kde" */
  .dash-head .dh-r { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; }
  .dash-head .kp { padding: 6px 4px !important; flex-direction: column; justify-content: center; text-align: center; gap: 2px !important; border-radius: 14px !important; min-width: 0; }
  .dash-head .kp i { width: 22px !important; height: 22px !important; font-size: .7rem !important; }
  .dash-head .kp b { font-size: 1rem !important; } .dash-head .kp small { font-size: .7rem !important; white-space: nowrap; }
  .dash-head .dh-l small { font-size: .78rem; } .dash-head h1 { font-size: 1.45rem !important; }
  .dash-head .dh-t { flex-wrap: nowrap !important; overflow-x: auto; gap: 6px !important; }
  .dash-edit { font-size: 0 !important; padding: 0 10px !important; } .dash-edit::before { content: "✏️"; font-size: 1rem; }
  .bento:has(> [data-w="where"]) ~ .today-grid :is(.wk-head, .site-board) { display: none !important; }
  .grp-fold > summary { list-style: none; cursor: pointer; } .grp-fold > summary::-webkit-details-marker { display: none; }
  .grp-fold .fold-ic { margin-left: auto; transition: transform .2s; } .grp-fold:not([open]) .fold-ic { transform: rotate(-90deg); }
  /* Zaměstnanci: one compact card per person */
  .people-list thead { display: none; }
  .people-list tbody tr { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 10px 12px !important; margin: 0 0 8px; border-radius: 18px; background: var(--gl-bg); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); border: 1px solid var(--gl-line); box-shadow: var(--gl-shadow); }
  .people-list tbody td { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; }
  .people-list td.p-name-cell { grid-column: 1 / -1; }
  .people-list .p-aka, .people-list .p-note.empty, .people-list .p-meta, .people-list .ph-edit { display: none !important; }
  .people-list .p-nm { font-size: 1rem; }
  .people-list td.mono { font-size: .86rem; } .people-list .phone-add .input { height: 34px; }
  .people-list td.actions { grid-row: 2; grid-column: 2; } .people-list td.actions .btn { height: 32px; padding: 0 12px; }
  .people-list .grp-sel { height: 30px; font-size: .78rem; max-width: 150px; }
  .people-list tr.former-sep { display: block !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px 4px !important; }
  /* Stavby: shorter cards */
  .sc .sc-nobud, .sc .sc-sub:empty { display: none !important; }
  .sc { padding: 14px !important; }
  /* filters: one swipeable row */
  .toolbar, .chips-row, .pf-bar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  /* a bit of air above the floating bottom bar */
  .page { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; }
}
:root[data-theme="light"] .wg-violet .trend-card { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (max-width: 700px) {
  .people-list tbody tr { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "n n" "p a" "g s"; align-items: center; }
  .people-list tbody td:nth-child(1) { grid-area: n; }
  .people-list tbody td:nth-child(2) { grid-area: p; min-width: 0; }
  .people-list tbody td:nth-child(3) { grid-area: g; }
  .people-list tbody td:nth-child(4) { grid-area: s; justify-self: end; text-align: right; font-size: .8rem; max-width: 190px; }
  .people-list tbody td:nth-child(5) { grid-area: a; grid-row: auto !important; grid-column: auto !important; }
  .people-list .p-note { display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: .78rem; text-align: left; }
  .people-list .phone-add { display: flex; gap: 6px; } .people-list .phone-add .input { flex: 1; min-width: 0; width: auto; }
  .people-list .ph-num { display: inline-block; margin-right: 8px; }
}

/* =====================================================================
   AIOX – liquid glass, stronger: light sheen on every pane, dark glass for the menu and dark
   widgets, blue glass for buttons and active tabs, a coloured dark frame behind the menu
   ===================================================================== */
:root { --sheen: linear-gradient(135deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .18) 38%, rgba(255, 255, 255, .06) 62%, rgba(255, 255, 255, .22) 100%);
  --gl-bg: rgba(255, 255, 255, .40); --gl-line: rgba(255, 255, 255, .78);
  --gl-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), inset 1px 0 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(31, 107, 255, .08), 0 0 0 1px rgba(15, 30, 70, .07), 0 18px 40px -26px rgba(20, 60, 160, .45); }
/* the frame behind the menu: dark with coloured light, so the menu is glass on it */
:root[data-theme="light"] body { background: radial-gradient(40% 50% at 0% 0%, rgba(31, 107, 255, .35), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(124, 92, 255, .28), transparent 70%), radial-gradient(30% 40% at 12% 55%, rgba(25, 184, 255, .16), transparent 70%), #04060b !important; background-attachment: fixed !important; }
:root[data-theme="light"] .side { background: rgba(255, 255, 255, .035) !important; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06) !important; }
:root[data-theme="light"] .side :is(.side-ask, .team-switch, .me-card, .lang-btn) { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-theme="light"] .side .nav a:hover:not(.on) { background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
/* panes: translucent with a sheen across */
:root[data-theme="light"] :is(.panel, .sc, .person, .site-card, .ios-list, .bq, .hw-card, .fm-card, .wg-glass, .set-hero, .mn-doc, .wx-card, .cm, .wg-blue, .wg-violet, .dn-card, .chk-panel, .day-end, .people-list tbody tr),
:root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat) {
  background: var(--sheen), var(--gl-bg) !important; }
:root[data-theme="light"] :is(.wh, .pin, .wg-list li, .dn-sec, .de-wlist li, .de-pinlist li) { background: var(--sheen), rgba(255, 255, 255, .38) !important; -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); border: 1px solid rgba(255, 255, 255, .8) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 30, 70, .05) !important; }
/* coloured widgets as tinted glass */
:root[data-theme="light"] .wg-sky { background: linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 45%), linear-gradient(150deg, rgba(25, 184, 255, .88), rgba(31, 107, 255, .9) 70%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, .45) !important; }
:root[data-theme="light"] .wg-rose { background: linear-gradient(160deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 45%), linear-gradient(150deg, rgba(59, 130, 246, .9), rgba(30, 64, 175, .92)) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, .35) !important; }
:root[data-theme="light"] :is(.wg-pink, .wg-dark) { background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 40%), radial-gradient(60% 60% at 50% 25%, rgba(31, 107, 255, .22), transparent 70%), rgba(8, 10, 16, .86) !important; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255, 255, 255, .12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 20px 44px -24px rgba(5, 10, 30, .7) !important; }
:root[data-theme="light"] .qa { background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%), rgba(10, 12, 18, .88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
:root[data-theme="light"] .qa:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 45%), rgba(31, 107, 255, .92); }
/* blue glass: main buttons and the chosen tab / filter */
:root[data-theme="light"] :is(.btn-primary, .seg button.on, .pf-chip.on, .chip.on) { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #2b8cff, #1f6bff) !important; color: #fff !important; border-color: rgba(255, 255, 255, .45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px -10px rgba(31, 107, 255, .75) !important; }
/* phone: the top bar is dark glass too */
@media (max-width: 900px) {
  :root[data-theme="light"] .side { background: rgba(6, 8, 14, .72) !important; -webkit-backdrop-filter: blur(22px) saturate(170%) !important; backdrop-filter: blur(22px) saturate(170%) !important; }
}
/* people who prefer less motion / weaker phones: same look, lighter blur */
@media (prefers-reduced-transparency: reduce) { :root { --gl-bg: rgba(255, 255, 255, .9); } }
/* the big dotted number never wider than its widget */
.wg-big { max-width: 100%; overflow: hidden; } .wg-big .dotnum { max-width: 100%; }
@media (max-width: 700px) { .wg-big .dotnum { height: auto !important; width: 100%; max-height: 40px; } }
/* the company under the AIOX logo */
.brand-firm { margin: -8px 0 0 52px; padding: 3px 10px; width: fit-content; max-width: calc(100% - 60px); border-radius: 99px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #cfe6ff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  :root[data-theme] .side .brand-firm { position: absolute; left: 58px; bottom: 3px; margin: 0; padding: 0 6px; font-size: .52rem; letter-spacing: .12em; background: none; border: 0; box-shadow: none; color: #9fc6ff; grid-column: auto; }
  :root[data-theme] .side { position: sticky; }
}

.ai-keys { display: grid; gap: 8px; }
.ai-key { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8); cursor: pointer; }
.ai-key.on { box-shadow: 0 0 0 2px #1f6bff; } .ai-key span { flex: 1; display: grid; } .ai-key small { color: var(--ink-3); }
/* phone: the firm switch (AIOX admin only) is one slim row; the select already says the firm */
@media (max-width: 900px) {
  :root[data-theme] .side:has(#firmBar:not([hidden])) .brand-firm { display: none !important; }
  :root[data-theme] .side .firm-bar { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 6px; margin: 0 !important; }
  :root[data-theme] .side .firm-bar > :not(select) { display: none !important; }
  :root[data-theme] .side .firm-bar select { height: 32px !important; padding: 0 10px !important; font-size: .82rem !important; border-radius: 10px !important; width: 100%; }
}
.side .brand-firm { flex: none; line-height: 1.5; margin-top: -10px; }

/* =====================================================================
   David – dark liquid glass with a living blue orb
   ===================================================================== */
.orb { position: relative; display: inline-block; border-radius: 50%; }
.orb-xs { width: 22px; height: 22px; flex: none; vertical-align: middle; margin-right: 8px; }
.orb-xs i { display: none; }
/* every "D" avatar becomes a small glowing orb */
.dv-ava, .dv-ava.big { font-size: 0 !important; color: transparent !important; background: radial-gradient(circle at 36% 30%, #f0f9ff 0%, #7dd3fc 22%, #1f6bff 55%, #0a1a40 85%) !important; box-shadow: 0 0 18px -2px rgba(31, 107, 255, .8), inset 0 -4px 10px rgba(0, 0, 0, .35) !important; border: 0 !important; }
.dv-ava span { display: none; }
.dv-ava.big { width: 42px !important; height: 42px !important; position: relative; }
.david-fab { background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 50%), rgba(8, 12, 22, .78) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .18) !important; -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 34px -14px rgba(31, 107, 255, .8) !important; }
.david-fab .dv-l { color: #fff !important; }
/* the panel */
.david { top: 12px !important; right: 12px !important; bottom: 12px !important; width: min(440px, calc(100% - 24px)) !important; border-radius: 30px !important; overflow: hidden;
  color: #e8edf6; background: radial-gradient(90% 40% at 50% -5%, rgba(31, 107, 255, .35), transparent 70%), radial-gradient(60% 30% at 100% 100%, rgba(124, 92, 255, .22), transparent 70%), rgba(7, 10, 18, .86) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important; backdrop-filter: blur(30px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 80px -40px rgba(31, 107, 255, .9) !important; --line: rgba(255, 255, 255, .1); --panel-2: rgba(255, 255, 255, .07); --ink: #e8edf6; --ink-2: #c7d0de; --ink-3: #8e9bb2; }
.david header { border-bottom: 1px solid rgba(255, 255, 255, .08) !important; padding: 14px 16px !important; }
.david header b { font-size: 1.08rem; color: #fff; } .david header small { color: #8fb6ff !important; }
.david header .btn-ghost { color: #c7d0de; }
.dv-hero { display: grid; place-items: center; padding: 18px 0 4px; }
.dv-hero .orb { width: 120px; height: 120px; }
.dv-m { font-size: .92rem !important; border-radius: 18px !important; }
.dv-d { background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)) !important; border: 1px solid rgba(255, 255, 255, .12) !important; color: #e8edf6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); border-bottom-left-radius: 6px !important; }
.dv-u { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%), linear-gradient(150deg, #2b8cff, #1f6bff) !important; border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 10px 24px -14px rgba(31, 107, 255, .9); border-bottom-right-radius: 6px !important; }
.dv-ai { color: #7dd3fc !important; }
.dv-d a, .dv-d .btn { color: #fff; }
.dv-d .btn { background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .18) !important; }
.dv-d .btn-primary { background: linear-gradient(150deg, #2b8cff, #1f6bff) !important; }
.dv-plan { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .14) !important; }
.dv-typing i { background: #7dd3fc !important; box-shadow: 0 0 10px #19b8ff; }
.dv-chips { border-top: 0 !important; padding: 8px 14px !important; }
.dv-chips button { background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: #dbe5f5 !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dv-chips button:hover { border-color: #19b8ff !important; color: #fff !important; box-shadow: 0 0 16px -6px #19b8ff; }
.dv-f { border-top: 0 !important; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
.dv-f textarea, .dv-f input { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .16) !important; color: #fff !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.dv-f textarea:focus { outline: 0; border-color: #19b8ff !important; box-shadow: 0 0 0 3px rgba(25, 184, 255, .25), 0 0 24px -8px #19b8ff !important; }
.dv-f textarea::placeholder { color: #8e9bb2; }
.dv-f .btn-primary { border-radius: 50% !important; width: 46px; height: 46px; padding: 0 !important; background: radial-gradient(circle at 35% 30%, #bfe6ff, #1f6bff 60%, #0b2a7a) !important; box-shadow: 0 0 20px -4px #1f6bff, inset 0 1px 0 rgba(255, 255, 255, .5) !important; }
/* thinking: the orbs breathe */
@media (prefers-reduced-motion: no-preference) {
  .david .dv-ava.big, .dv-hero .orb { animation: orbIdle 4s ease-in-out infinite; }
  .david.thinking .dv-ava.big { animation: orbThink 1s ease-in-out infinite; }
  @keyframes orbIdle { 50% { box-shadow: 0 0 30px 2px rgba(31, 107, 255, .7), inset 0 -4px 10px rgba(0, 0, 0, .35); } }
  @keyframes orbThink { 50% { transform: scale(1.12); box-shadow: 0 0 34px 6px rgba(25, 184, 255, .9), inset 0 -4px 10px rgba(0, 0, 0, .35); } }
  .david-fab .dv-ava { animation: orbIdle 4s ease-in-out infinite; }
}
@media (max-width: 700px) { .david { top: 8px !important; right: 8px !important; left: 8px !important; bottom: 8px !important; width: auto !important; border-radius: 26px !important; } }
/* the day summary widget */
.wg-aisum .aisum-t p { margin: 6px 0 0; font-size: .9rem; line-height: 1.45; color: #e8edf6; }
.wg-aisum .aisum-t small { display: block; margin-top: 8px; color: #8e9bb2; }
.wg-aisum header { color: #fff; }
.wg-re { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.ai-desc { display: block; margin-top: 4px; font-size: .8rem; color: #1f6bff; }
.bk-ai { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(31, 107, 255, .08); border: 1px solid rgba(31, 107, 255, .25); font-size: .88rem; }
.david header, .david .dv-log, .david .dv-chips, .david .dv-f { background: transparent !important; }
.david .dv-first { background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)) !important; color: #e8edf6 !important; }
.dv-d::before { content: "" !important; background: radial-gradient(circle at 36% 30%, #f0f9ff 0%, #7dd3fc 22%, #1f6bff 55%, #0a1a40 85%) !important; box-shadow: 0 0 12px -2px rgba(31, 107, 255, .9) !important; border: 0 !important; }
.david .dv-typing small { color: #8fb6ff; }
.study .study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.study h4 { margin: 10px 0 6px; font-size: .9rem; }
.study ul { margin: 0; padding-left: 18px; font-size: .85rem; display: grid; gap: 3px; }
.study-missed { list-style: none; padding: 0 !important; gap: 8px !important; }
.study-missed li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8); }
.study-missed li span { flex: 1; } .study-missed q { display: block; color: var(--ink-2); font-size: .84rem; }
/* ---- Přístupnost: viditelný klávesnicový fokus (dřívější průhledný prstenec a outline:none ho zakrývaly) ---- */
.btn:focus-visible, .input:focus-visible, .select:focus-visible, textarea.input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible, .seg button:focus-visible, .chip:focus-visible, .tabbar a:focus-visible, .tabbar button:focus-visible,
.theme-seg button:focus-visible, .pw-eye:focus-visible, .sc:focus-visible, .pay-in:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ps-wrap[tabindex]:focus-visible, .gx-scroll[tabindex]:focus-visible { outline-offset: -2px; }
.cmdk-in:focus-within, .set-search:focus-within, .ai-in:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; } /* vstup uvnitř má outline:none, ukáže se rámeček kolem */
.dialog:focus-visible, .cmdk-box:focus-visible, .more-card:focus-visible { outline: none; } /* okno dostává fokus jen programově */

/* načítání další stránky: starý obsah zůstává, nahoře běží tenký pruh */
#view[aria-busy="true"]::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; pointer-events: none; background: var(--primary); transform-origin: left; animation: viewBusy 1.1s ease-in-out infinite; }
@keyframes viewBusy { 0% { transform: scaleX(0.05); opacity: 0.4; } 60% { transform: scaleX(0.8); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #view[aria-busy="true"]::before { animation: none; opacity: 0.7; } }

/* telefon / tablet: dotykové cíle alespoň 44 px (desktop beze změny) */
@media (pointer: coarse) {
  .btn-sm, .chip, .seg button, .select-xs, .theme-seg button, .pw-eye { min-height: 44px; min-width: 44px; }
}

/* ---- Telefon / dotyk: lehčí sklo (stejný vzhled, mnohem levnější vykreslování) ----
   Karty, položky seznamů a ovladače leží na plynulém pozadí, kde rozmazání nic nezmění – tam backdrop-filter zmizí
   (průhlednost zůstává). Rozmazání zůstává jen u plovoucích ploch (lišty, okna) a s menším poloměrem. */
@media (pointer: coarse), (max-width: 760px) {
  :root, :root[data-theme="light"] { --gl-blur: blur(8px) saturate(140%); }
  :root[data-theme="light"] :is(.panel, .sc, .person, .site-card, .ios-list, .bq, .hw-card, .fm-card, .wg-glass, .set-hero, .mn-doc, .wx-card, .cm, .wg-blue, .wg-violet, .dn-card, .trend-card, .chk-panel, .day-end,
      .wh, .pin, .wg-list li, .dn-sec, .de-wlist li, .de-pinlist li, .hw-msg, .bq-q, .mn-row, .kp, .wg-violet .tr-kpis > span, .wg-sky, .wg-rose, .wg-pink, .wg-dark,
      .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger), .round-btn, .seg, .chip, .pf-chip, .select, .input, textarea.input, table.list thead th),
  :root[data-theme="light"] body :is(.st4-t, .kpi, .ps-kpi, .mn-kpi, .stat),
  .people-list tbody tr { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :root[data-theme="light"] .modal, .modal, .cmdk { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :root[data-theme="light"] :is(.dialog, .cmdk-box), :root[data-theme="light"] .side, :root[data-theme="light"] .tabbar, .dialog > footer {
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important; backdrop-filter: blur(12px) saturate(150%) !important; }
}

/* ---- Stavební deník 2.0 (dn-) – „Stavba jako cockpit“ ----
   Vlastní tmavá scéna jen uvnitř view deníku (.dn-scene) a tmavé okno dne (.dialog.dn-dlg).
   Barvy dat v grafech: oranžová #e0611c, zelenomodrá #1fa37c. UI akcent: #ff8a3d → #f05a14. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.dn-scene, .modal > .dialog.dn-dlg {
  --dn-ink: #f5efe9;
  --dn-ink2: rgba(245, 239, 233, .62);
  --dn-line: rgba(255, 255, 255, .10);
  --dn-acc: #ff8a3d;
  --dn-acc2: #f05a14;
  --dn-acc-ink: #1f0e04;
  --dn-focus: #ffb27a;
  /* proměnné aplikace, aby i sdílené kousky (chyby, .muted, .num) na tmavém fungovaly */
  --ink: #f5efe9; --ink-2: rgba(245, 239, 233, .78); --ink-3: rgba(245, 239, 233, .62); --text-muted: rgba(245, 239, 233, .62);
  --line: rgba(255, 255, 255, .10); --line-soft: rgba(255, 255, 255, .07); --panel-2: rgba(255, 255, 255, .06);
  --miss: #ffa196; --error: #ffa196; --primary: #ffb27a;
  color-scheme: dark;
  color: var(--dn-ink);
  font-variant-numeric: tabular-nums;
}
.dn-scene :focus-visible, .dn-dlg :focus-visible { outline: 2px solid var(--dn-focus); outline-offset: 2px; }

/* scéna + teplé záře */
.dn-scene { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: 22px; container: dn / inline-size;
  background: linear-gradient(160deg, #141110 0%, #1c1714 55%, #171210 100%);
  box-shadow: 0 40px 80px -44px rgba(20, 10, 4, .75), inset 0 1px 0 rgba(255, 255, 255, .06); }
.dn-scene::before, .dn-scene::after, .dn-glow3 { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(56px); will-change: transform; }
.dn-scene::before { width: 640px; height: 520px; left: 12%; top: 16%; background: radial-gradient(closest-side, rgba(255, 122, 47, .42), rgba(194, 65, 12, .2) 60%, transparent); animation: dnDrift 20s ease-in-out infinite alternate; }
.dn-scene::after { width: 520px; height: 480px; right: -10%; top: 46%; background: radial-gradient(closest-side, rgba(194, 65, 12, .45), rgba(194, 65, 12, .12) 60%, transparent); animation: dnDrift2 20s ease-in-out infinite alternate; }
.dn-glow3 { width: 420px; height: 320px; left: -8%; top: -6%; background: radial-gradient(closest-side, rgba(255, 122, 47, .26), transparent); animation: dnDrift 20s ease-in-out -8s infinite alternate-reverse; }
@keyframes dnDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(70px, -40px, 0) scale(1.12); } }
@keyframes dnDrift2 { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-80px, 30px, 0) scale(.92); } }

/* rozložení: hlavní plocha + pravý panel (na užší ploše pravý panel pod přehledem, nad seznamem dnů) */
.dn-shell { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "aside" "days"; }
.dn-main { grid-area: main; min-width: 0; container: dnmain / inline-size; }
.dn-aside { grid-area: aside; min-width: 0; display: grid; gap: 18px; align-content: start; }
.dn-days { grid-area: days; min-width: 0; }
@container dn (min-width: 1000px) {
  .dn-shell:not(.dn-shell-1) { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "main aside" "days aside"; grid-template-rows: auto 1fr; column-gap: 0; }
  .dn-shell:not(.dn-shell-1) .dn-main, .dn-shell:not(.dn-shell-1) .dn-days { padding-right: 22px; }
  .dn-aside { margin: -22px -22px -22px 0; padding: 22px 20px; border-left: 1px solid var(--dn-line); background: linear-gradient(180deg, rgba(10, 7, 5, .32), rgba(10, 7, 5, .14)); }
}

/* sklo */
.dn-glass { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); border-radius: 20px;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -30px rgba(0, 0, 0, .9); }
@media (hover: none) {
  .dn-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(40, 32, 28, .85); }
  .dn-scene::before, .dn-scene::after, .dn-glow3 { filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dn-glass { background: rgba(40, 32, 28, .85); } }

/* zvednutí při najetí */
.dn-lift { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s, background-color .2s; }
@media (hover: hover) {
  .dn-lift:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 46px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 138, 61, .14); }
}

/* vstupní animace (jen při prvním vykreslení) */
body.anim .dn-scene.is-enter .dn-rise { animation: dnRise .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes dnRise { from { opacity: 0; transform: translateY(12px); } }

/* hlavička */
.dn-demo-flag { margin: 0 0 16px; padding: 10px 14px; border-radius: 14px; font-size: .88rem; font-weight: 600; color: #ffd9bd;
  background: repeating-linear-gradient(135deg, rgba(255, 138, 61, .16) 0 12px, rgba(255, 138, 61, .07) 12px 24px); border: 1px solid rgba(255, 138, 61, .55); }
.dn-demo-flag b { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 6px; letter-spacing: .1em; color: var(--dn-acc-ink); background: linear-gradient(135deg, var(--dn-acc), var(--dn-acc2)); }
.dn-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px; margin-bottom: 12px; }
.dn-title { min-width: 0; }
.dn-eyebrow { margin: 0 0 4px; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dn-focus); }
.dn-title h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dn-ink); overflow-wrap: anywhere; }
.dn-title h1::before { display: none; }
.dn-sub { margin: 4px 0 0; font-size: .88rem; color: var(--dn-ink2); }
.dn-pillbox { display: flex; align-items: stretch; padding: 8px 6px; border-radius: 999px; }
.dn-pillbox > div { display: grid; gap: 1px; padding: 2px 16px; min-width: 0; }
.dn-pillbox > div + div { border-left: 1px solid var(--dn-line); }
.dn-pillbox small { font-size: .68rem; color: var(--dn-ink2); white-space: nowrap; }
.dn-pillbox b { font-size: 1rem; font-weight: 700; color: var(--dn-ink); }
.dn-headtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.dn-headtools:empty { display: none; }
@container dn (max-width: 560px) {
  .dn-pillbox { width: 100%; border-radius: 18px; padding: 8px 2px; }
  .dn-pillbox > div { flex: 1; padding: 2px 10px; }
}

/* tlačítka */
.dn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07); color: var(--dn-ink); font: 600 .88rem/1.1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s, filter .2s; }
.dn-btn:hover { background-color: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); color: var(--dn-ink); }
.dn-btn .dn-svgi { width: 18px; height: 18px; }
.dn-btn--ghost { background: transparent; }
.dn-btn--sm { min-height: 36px; padding: 0 12px; font-size: .8rem; }
.dn-btn--on { background: rgba(255, 138, 61, .14); border-color: var(--dn-acc); color: #ffd9bd; }
.dn-btn--pri { background: linear-gradient(135deg, var(--dn-acc), var(--dn-acc2)); color: var(--dn-acc-ink); border-color: rgba(255, 196, 150, .55); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -10px rgba(240, 90, 20, .75); }
.dn-btn--pri:hover { background: linear-gradient(135deg, #ff9a52, #f2661f); color: var(--dn-acc-ink); border-color: rgba(255, 210, 170, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -10px rgba(240, 90, 20, .9); }
.dn-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.dn-btn--pri.is-busy, .dn-btn--pri.is-busy:disabled { opacity: 1; cursor: progress; animation: dnPulse 1.6s ease-in-out infinite; }
@keyframes dnPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 0 rgba(255, 138, 61, .5), 0 10px 24px -10px rgba(240, 90, 20, .75); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 9px rgba(255, 138, 61, 0), 0 12px 36px -6px rgba(240, 90, 20, 1); }
}
.dn-rb { flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06); color: var(--dn-ink); font: 600 1.15rem/1 var(--body); cursor: pointer; transition: background-color .2s, border-color .2s; }
.dn-rb:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); }
.dn-rb:disabled { opacity: .3; cursor: default; }
.dn-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--dn-focus); font: 600 .82rem var(--body); text-decoration: none; cursor: pointer; }
.dn-link:hover { text-decoration: underline; color: #ffc89e; }
.dn-sel { min-width: 200px; border-radius: 999px !important; padding-left: 16px !important; background-color: rgba(255, 255, 255, .07) !important; font-weight: 600; }

/* záložky (segmented control) + měsíc */
.dn-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 0 16px; }
.dn-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--dn-line); }
.dn-tabs button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--dn-ink2); font: 600 .9rem var(--body); cursor: pointer; transition: color .2s, background-color .2s; }
.dn-tabs button:hover { color: var(--dn-ink); }
.dn-tabs button.on { color: var(--dn-acc-ink); background: linear-gradient(135deg, var(--dn-acc), var(--dn-acc2)); box-shadow: 0 6px 18px -6px rgba(240, 90, 20, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
.dn-month { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dn-month b { display: inline-block; min-width: 8.6em; text-align: center; font-size: .95rem; font-weight: 700; }
.dn-month b::first-letter { text-transform: uppercase; }

/* společné */
.dn-dim { color: var(--dn-ink2); }
.dn-amber { color: #f7c56b; }
.dn-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 8px 0; }
.dn-row .dn-field { flex: 1 1 220px; }
.dn-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; font-size: .86rem; background: rgba(255, 255, 255, .06); border: 1px solid var(--dn-line); color: var(--dn-ink); }
.dn-note.is-warn { background: rgba(245, 166, 35, .12); border-color: rgba(247, 197, 107, .38); color: #fde3b0; }
.dn-note.is-ai { background: rgba(255, 138, 61, .12); border-color: rgba(255, 138, 61, .42); color: #ffe0c8; }
#dnBusy:empty { display: none; }
.dn-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 8px; margin-left: 6px; border-radius: 99px; vertical-align: middle; background: rgba(255, 255, 255, .1); color: var(--dn-ink); font-size: .72rem; font-weight: 700; }
.dn-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .08); color: var(--dn-ink); font: 700 .74rem/1.3 var(--body); }
button.dn-tag { min-height: 36px; cursor: pointer; }
.dn-tag.is-ok { background: rgba(31, 163, 124, .18); border-color: rgba(126, 226, 191, .28); color: #7ee2bf; }
.dn-tag.is-bad { background: rgba(240, 82, 60, .16); border-color: rgba(255, 161, 150, .3); color: #ffa196; }
.dn-tag.is-warn { background: rgba(245, 166, 35, .14); border-color: rgba(247, 197, 107, .32); color: #f7c56b; }
.dn-tag.is-info { background: rgba(255, 138, 61, .14); border-color: rgba(255, 138, 61, .35); color: #ffc49a; }
.dn-loose { padding: 12px 14px; margin-bottom: 14px; font-size: .88rem; }
.dn-empty { padding: 18px 20px; max-width: 560px; }
.dn-empty h2 { margin: 0 0 6px; font-size: 1.1rem; color: var(--dn-ink); }

/* karta (box) */
.dn-box { padding: 16px 18px; min-width: 0; }
.dn-box-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.dn-box-h h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--dn-ink); }
.dn-box-h p { margin: 2px 0 0; font-size: .78rem; color: var(--dn-ink2); }
.dn-h3 { margin: 8px 0 10px; font-size: .9rem; font-weight: 700; color: var(--dn-ink); }

/* stat dlaždice */
.dn-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@container dnmain (min-width: 620px) { .dn-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dn-stat { display: grid; gap: 3px; align-content: start; padding: 14px 14px 12px; min-width: 0; }
.dn-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.dn-ring { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #ffa566; border: 1.5px solid rgba(255, 138, 61, .8);
  background: radial-gradient(circle at 50% 30%, rgba(255, 138, 61, .24), rgba(255, 138, 61, .04)); box-shadow: 0 0 18px -4px rgba(255, 122, 47, .65); }
.dn-ring .dn-svgi { width: 19px; height: 19px; }
.dn-stat-l { margin: 0; font-size: .78rem; font-weight: 500; color: var(--dn-ink2); }
.dn-stat small { font-size: .74rem; color: var(--dn-ink2); overflow-wrap: anywhere; }
/* upload straight from the Fotky tile (same picker as the quick action: goes to today) */
.dn-stat-add { justify-self: start; margin-top: 8px; }
.dn-big { display: flex; align-items: baseline; gap: 4px; margin: 0; font-size: clamp(1.4rem, 2.3vw, 1.85rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--dn-ink); font-variant-numeric: tabular-nums; }
.dn-big em { font-style: normal; font-size: .55em; font-weight: 600; letter-spacing: 0; color: var(--dn-ink2); }
.dn-chg { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.dn-chg.is-up { background: rgba(31, 163, 124, .2); border-color: rgba(126, 226, 191, .26); color: #7ee2bf; }
.dn-chg.is-down { background: rgba(240, 82, 60, .16); border-color: rgba(255, 161, 150, .28); color: #ffa196; }
.dn-chg.is-flat { background: rgba(255, 255, 255, .08); color: var(--dn-ink2); }

/* grafy */
.dn-charts { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
@container dnmain (min-width: 760px) { .dn-charts { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.dn-chart { position: relative; margin: 0 -4px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.dn-chart svg { display: block; overflow: visible; }
.dn-gl { stroke: rgba(255, 255, 255, .07); stroke-width: 1; shape-rendering: crispEdges; }
.dn-ax { fill: rgba(245, 239, 233, .62); font: 500 10.5px var(--body); font-variant-numeric: tabular-nums; }
.dn-xh { stroke: rgba(245, 239, 233, .38); stroke-width: 1; stroke-dasharray: 3 3; }
.dn-halo { opacity: .22; transform-box: fill-box; transform-origin: center; animation: dnHalo 2.4s ease-in-out infinite; }
@keyframes dnHalo { 50% { opacity: .07; transform: scale(1.55); } }
.dn-endpt { filter: drop-shadow(0 0 6px rgba(31, 163, 124, .95)); }
.dn-bar { transition: opacity .15s; transform-box: fill-box; transform-origin: 50% 100%; }
.dn-chart svg:has(.dn-bar.on) .dn-bar:not(.on) { opacity: .45; }
.dn-chart.is-draw .dn-bar { animation: dnGrow .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--d, 0ms); }
.dn-chart.is-draw .dn-area { animation: dnFade .9s ease .15s backwards; }
.dn-chart.is-draw .dn-endpt { animation: dnFade .3s ease .75s backwards; }
.dn-chart.is-draw .dn-halo { animation: dnFade .3s ease .75s backwards, dnHalo 2.4s ease-in-out 1s infinite; }
@keyframes dnGrow { from { transform: scaleY(0); } }
@keyframes dnFade { from { opacity: 0; } }
.dn-tip { position: absolute; z-index: 3; pointer-events: none; padding: 6px 10px; border-radius: 10px; white-space: nowrap; font-size: .78rem; color: var(--dn-ink);
  background: rgba(22, 17, 14, .94); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 10px 24px -10px #000; }
.dn-tip b { font-weight: 700; }
.dn-empty-chart { margin: 0; padding: 40px 0; text-align: center; color: var(--dn-ink2); font-size: .88rem; }
.dn-tbl { margin-top: 8px; }
.dn-tbl summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--dn-line); color: var(--dn-ink2); font-size: .76rem; font-weight: 600; cursor: pointer; list-style: none; }
.dn-tbl summary::-webkit-details-marker { display: none; }
.dn-tbl summary::before { content: "▸"; font-size: .7rem; }
.dn-tbl[open] summary::before { content: "▾"; }
.dn-tbl summary:hover { color: var(--dn-ink); border-color: rgba(255, 255, 255, .22); }
.dn-tblw { max-height: 260px; overflow: auto; margin-top: 8px; border-radius: 12px; border: 1px solid var(--dn-line); }
.dn-tblw table, .dn-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.dn-tblw th, .dn-tblw td { padding: 7px 10px; text-align: left; font-weight: 500; color: var(--dn-ink); border-bottom: 1px solid rgba(255, 255, 255, .06); background: transparent; }
.dn-tblw thead th { position: sticky; top: 0; z-index: 1; font-weight: 600; color: var(--dn-ink2); background: #241d19; }
.dn-tblw tfoot th, .dn-tblw tfoot td { font-weight: 700; border-bottom: 0; }
.dn-tblw .num { text-align: right; font-family: var(--body); }

/* postup stavby (goals) + nejvíc hodin */
.dn-duo { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container dnmain (min-width: 680px) { .dn-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.dn-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dn-goal { display: grid; gap: 10px; align-content: start; padding: 14px; min-width: 0; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.dn-goal-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dn-goal-ico { color: rgba(245, 239, 233, .38); }
.dn-goal p { margin: 0; display: grid; gap: 2px; }
.dn-goal p b { font-size: .86rem; }
.dn-goal p small { font-size: .74rem; color: var(--dn-ink2); }
.dn-goal .dn-link { justify-self: start; min-height: 36px; padding: 0; text-align: left; }
.dn-prog { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.dn-prog i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dn-acc2), var(--dn-acc)); box-shadow: 0 0 12px rgba(255, 122, 47, .6); }
body.anim .dn-scene.is-enter .dn-prog i { animation: dnW .9s cubic-bezier(.2, .8, .2, 1) .25s backwards; }
@keyframes dnW { from { width: 0; } }
.dn-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dn-hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 10px; }
.dn-hb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.dn-hb-n small { color: var(--dn-ink2); }
.dn-hbars b { font-size: .84rem; font-weight: 700; }
.dn-hb-t { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.dn-hb-t i { display: block; width: var(--w); height: 100%; border-radius: 4px; background: #e0611c; }
body.anim .dn-scene.is-enter .dn-hb-t i { animation: dnW .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.3s + var(--i, 0) * 60ms); }

/* pravý panel: hero karta */
.dn-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 2px; min-height: 200px; padding: 18px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 90% at 92% 0%, rgba(255, 190, 140, .75) 0%, transparent 42%), radial-gradient(90% 120% at 0% 100%, #4a1704 0%, transparent 62%), linear-gradient(140deg, #e2571a 0%, #a8380c 48%, #2a1007 100%);
  border: 1px solid rgba(255, 190, 140, .35); box-shadow: 0 26px 50px -26px rgba(240, 90, 20, .75), inset 0 1px 0 rgba(255, 255, 255, .3); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.dn-hero::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background: repeating-conic-gradient(from 20deg at 68% 38%, rgba(255, 255, 255, .0) 0deg 9deg, rgba(255, 255, 255, .22) 12deg 14deg, rgba(0, 0, 0, .18) 18deg 22deg); }
.dn-hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.dn-hero.has-ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(240, 90, 20, .6) 0%, rgba(120, 40, 10, .55) 45%, rgba(20, 10, 5, .9) 100%); }
.dn-hero.has-ph::before { display: none; }
.dn-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dn-hero-chip { padding: 4px 10px; border-radius: 99px; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: rgba(20, 8, 2, .38); border: 1px solid rgba(255, 255, 255, .26); }
.dn-hero-mark { width: 42px; height: 32px; display: grid; place-items: center; border-radius: 8px; font-size: 1.05rem; background: linear-gradient(135deg, rgba(255, 236, 200, .55), rgba(255, 255, 255, .1)); border: 1px solid rgba(255, 255, 255, .4); }
.dn-hero-name { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dn-hero-l { margin: 10px 0 0; font-size: .74rem; color: rgba(255, 255, 255, .88); }
.dn-hero-num { margin: 0; }
.dn-hero-num .dn-big { font-size: 2.15rem; color: #fff; }
.dn-hero-num .dn-big em { color: rgba(255, 255, 255, .85); }
.dn-hero-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .24); }
.dn-hero-foot > div { min-width: 0; }
.dn-hero-foot > div + div { text-align: right; }
.dn-hero-foot small { display: block; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.dn-hero-foot b { display: block; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* rychlé akce */
.dn-qas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dn-qa { display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--dn-ink2); font: 600 .72rem/1.2 var(--body); text-align: center; text-decoration: none; cursor: pointer; }
.dn-qa:hover { color: var(--dn-ink); }
.dn-qa-i { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--dn-ink); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s, border-color .2s, box-shadow .2s, color .2s; }
.dn-qa:hover .dn-qa-i { color: var(--dn-acc-ink); background: linear-gradient(135deg, var(--dn-acc), var(--dn-acc2)); border-color: rgba(255, 196, 150, .55); box-shadow: 0 10px 24px -8px rgba(240, 90, 20, .85); transform: translateY(-3px); }
.dn-qa:focus-visible { outline: none; }
.dn-qa:focus-visible .dn-qa-i { outline: 2px solid var(--dn-focus); outline-offset: 3px; }

/* poslední zápisy, kontakty */
.dn-side-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dn-side-h h2 { margin: 0; font-size: .98rem; font-weight: 700; color: var(--dn-ink); }
.dn-recent, .dn-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dn-rrow { width: 100%; min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 16px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); color: var(--dn-ink); font: inherit; text-align: left; cursor: pointer; }
.dn-date { flex: none; width: 42px; height: 42px; display: grid; place-content: center; text-align: center; line-height: 1; border-radius: 50%; background: rgba(255, 138, 61, .12); border: 1.5px solid rgba(255, 138, 61, .62); }
.dn-date b { font-size: .98rem; font-weight: 700; color: var(--dn-ink); }
.dn-date small { margin-top: 2px; font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dn-ink2); }
.dn-rtext { display: grid; min-width: 0; }
.dn-rtext b { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-rtext small { font-size: .76rem; color: var(--dn-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-hpill { padding: 4px 10px; border-radius: 99px; font-size: .74rem; font-weight: 700; white-space: nowrap; color: #ffc49a; background: rgba(255, 138, 61, .16); border: 1px solid rgba(255, 138, 61, .35); }
.dn-allrow { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .03); color: var(--dn-ink2); font: 600 .82rem var(--body); cursor: pointer; }
.dn-allrow:hover { color: var(--dn-ink); border-color: rgba(255, 255, 255, .2); }
.dn-contacts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.dn-contacts li:last-child { border-bottom: 0; padding-bottom: 0; }
.dn-av { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: .76rem; font-weight: 700; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .16); }
.dn-call { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--dn-acc-ink); text-decoration: none;
  background: linear-gradient(135deg, var(--dn-acc), var(--dn-acc2)); box-shadow: 0 6px 16px -6px rgba(240, 90, 20, .85), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .2s, box-shadow .2s; }
.dn-call:hover { color: var(--dn-acc-ink); transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(240, 90, 20, 1); }
.dn-call .dn-svgi { width: 18px; height: 18px; }

/* časová osa dnů */
.dn-days .dn-side-h h2 { font-size: 1.05rem; }
.dn-timeline { position: relative; display: grid; gap: 12px; padding-left: 22px; }
.dn-timeline::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 138, 61, .65), rgba(255, 255, 255, .08)); }
.dn-day { position: relative; display: grid; gap: 10px; min-width: 0; padding: 12px 14px; cursor: pointer; }
.dn-day::before { content: ""; position: absolute; left: -20px; top: 26px; width: 10px; height: 10px; border-radius: 50%; background: var(--dn-acc); box-shadow: 0 0 0 3px #1c1714, 0 0 12px rgba(255, 138, 61, .8); }
.dn-day.is-miss { border-color: rgba(247, 197, 107, .45); }
.dn-day.is-miss::before { background: #f7c56b; box-shadow: 0 0 0 3px #1c1714; }
.dn-day header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dn-open { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; padding: 0; border: 0; background: none; color: var(--dn-ink); font: inherit; font-size: .98rem; text-align: left; cursor: pointer; }
.dn-open > span:last-child b { font-weight: 700; }
.dn-wx { font-size: .8rem; color: var(--dn-ink2); }
.dn-ppl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dn-ppl li { padding: 4px 10px; border-radius: 99px; font-size: .8rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.dn-ppl small { color: var(--dn-ink2); }
.dn-hrs { margin: 0; font-size: .84rem; }
.dn-thumbs { display: flex; gap: 8px; overflow: hidden; }
.dn-thumbs img, .dn-thumbs .dn-demoph { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.dn-demoph { display: block; background: radial-gradient(circle at 30% 25%, hsl(calc(var(--h, 20) * 1deg) 75% 66% / .9), transparent 55%), linear-gradient(150deg, hsl(calc(var(--h, 20) * 1deg) 32% 40%), hsl(calc(var(--h, 20) * 1deg + 12deg) 24% 15%)) !important; }
.dn-more { flex: none; display: grid; place-items: center; min-width: 48px; height: 64px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: var(--dn-ink2); font-weight: 700; }
.dn-text { margin: 0; font-size: .86rem; color: rgba(245, 239, 233, .82); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dn-warn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border-radius: 99px; font-size: .82rem; font-weight: 700; color: #f7c56b; background: rgba(245, 166, 35, .14); border: 1px solid rgba(247, 197, 107, .35); }
.dn-day footer { display: flex; flex-wrap: wrap; gap: 6px; }

/* karta stavby */
.dn-karta { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container dn (min-width: 900px) { .dn-karta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.dn-kcol { display: grid; gap: 14px; align-content: start; min-width: 0; }
.dn-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.dn-kpi { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.dn-kpi small { font-size: .74rem; color: var(--dn-ink2); }
.dn-kpi .dn-big { font-size: 1.5rem; }
.dn-det { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .08); }
.dn-det summary { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.dn-det ul { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 4px; font-size: .86rem; overflow-wrap: anywhere; }
.dn-docs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.dn-doc { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.dn-doc-i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 1.3rem; background: rgba(255, 138, 61, .12); border: 1px solid rgba(255, 138, 61, .4); }
.dn-doc-n { padding: 0; border: 0; background: none; color: var(--dn-ink); font: 600 .88rem/1.3 var(--body); text-align: left; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.dn-doc-n:hover { color: var(--dn-ink); text-decoration: underline; }
.dn-doc small { font-size: .74rem; color: var(--dn-ink2); }
.dn-doc-x { position: absolute; top: 8px; right: 8px; font-size: .95rem; }

/* formuláře */
.dn-form { display: grid; gap: 12px; }
.dn-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.dn-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: .78rem; font-weight: 600; color: var(--dn-ink2); }
.dn-inp { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background-color: rgba(10, 7, 5, .4) !important; color: var(--dn-ink);
  font: 400 15px/1.4 var(--body); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.dn-inp::placeholder { color: rgba(245, 239, 233, .5); }
.dn-inp:hover { border-color: rgba(255, 255, 255, .26); }
.dn-inp:focus, .dn-inp:focus-visible { outline: none; border-color: var(--dn-acc); box-shadow: 0 0 0 3px rgba(255, 138, 61, .4); background-color: rgba(10, 7, 5, .55) !important; }
.dn-inp[readonly] { background-color: rgba(255, 255, 255, .03) !important; }
textarea.dn-inp { min-height: 70px; resize: vertical; }
select.dn-inp { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f5efe9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; }
select.dn-inp option { background: #241d19; color: #f5efe9; }
input[type=file].dn-inp { padding: 7px 8px; }
input[type=file].dn-inp::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .12); color: var(--dn-ink); font: 600 .82rem var(--body); cursor: pointer; }
.dn-crow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; gap: 10px; margin-bottom: 10px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.dn-clinks { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-height: 44px; }
.dn-clinks:not(:has(*)) { display: none; }
.dn-docf { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.dn-docfile, .dn-docf .err { grid-column: 1 / -1; }
.dn-switch { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.dn-switch input { flex: none; width: 24px; height: 24px; margin-top: 2px; accent-color: var(--dn-acc2); }
.dn-switch small { display: block; font-size: .8rem; color: var(--dn-ink2); }

/* okno dne – tmavé sklo (jen třída dn-dlg na tomto okně) */
.modal > .dialog.dn-dlg { width: min(900px, 96vw) !important; max-width: 96vw !important; border-radius: 24px !important; color: var(--dn-ink);
  background: radial-gradient(80% 60% at 88% 0%, rgba(255, 122, 47, .2), transparent 60%), radial-gradient(60% 50% at 0% 100%, rgba(194, 65, 12, .16), transparent 60%), linear-gradient(160deg, rgba(30, 24, 21, .95), rgba(20, 17, 16, .97)) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08) !important; }
.dn-dlg h2, .dn-dlg h3 { color: var(--dn-ink); }
.dn-dlg > header { align-items: center; padding: 16px 18px 8px; }
.dn-dlg > header p { color: var(--dn-ink2); }
.modal > .dialog.dn-dlg > footer { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #1b1613 !important; border-top: 1px solid rgba(255, 255, 255, .08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.dn-dlg footer .right { display: flex; gap: 8px; margin-left: auto; }
.dn-nav { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.dn-nav > div { flex: 1; min-width: 0; text-align: center; }
.dn-nav h2 { font-size: 1.2rem; }
.dn-blk { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px 16px; }
.dn-blk h3 { margin: 0; display: flex; align-items: center; gap: 4px; font-size: .95rem; font-weight: 700; }
.dn-blk p { margin: 0; }
.dn-blk2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .dn-blk2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.dn-wxbig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.dn-wxbig > span:first-child { font-size: 1.8rem; line-height: 1; }
.dn-wxbig b { font-size: 1.6rem; font-weight: 700; }
.dn-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
@media (max-width: 600px) { .dn-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dn-flab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.dn-flab small { font-weight: 500; }
.dn-ph { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s; }
.dn-ph img, .dn-ph .dn-demoph { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { a.dn-ph:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .28); } }
.dn-upl { cursor: pointer; }
.dn-upl.is-busy { opacity: .6; pointer-events: none; }
.dn-dayf { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .dn-dayf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dn-dayf h3, .dn-dayf .full { grid-column: 1 / -1; } }
.dn-papers { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.dn-papers a { display: inline-block; min-height: 32px; line-height: 32px; color: var(--dn-focus); }
.dn-dlg .dn-tblw { max-height: none; }

/* papírový deník (sdílené okno, světlé) */
.dialog:has(.dn-body) footer { flex-wrap: wrap; align-items: center; }
.dialog:has(.dn-body) footer > .btn { min-height: 44px; display: inline-flex; align-items: center; }
.dialog:has(.dn-body) footer .right .btn { min-height: 44px; }
.dn-body .table-wrap { overflow-x: auto; max-width: 100%; }

/* dotyk, telefon */
@media (pointer: coarse) {
  .dn-btn--sm, .dn-tbl summary, button.dn-tag, .dn-goal .dn-link { min-height: 44px; }
  .dn-inp { font-size: 16px; }
}
@media (max-width: 600px) {
  .dn-scene { padding: 14px; }
  .dn-tabs { display: flex; width: 100%; }
  .dn-tabs button { flex: 1; padding: 0 8px; }
  .dn-box { padding: 14px; }
  .dn-goal { padding: 12px; }
  .dn-thumbs img, .dn-thumbs .dn-demoph, .dn-more { width: 56px; height: 56px; }
  .dn-timeline { padding-left: 18px; }
  .dn-timeline::before { left: 5px; }
  .dn-day::before { left: -17px; }
  .dn-headtools .dn-btn, .dn-sitepick { flex: 1 1 auto; }
  .dn-sel { width: 100%; min-width: 0; }
  .dn-nav h2 { font-size: 1.02rem !important; }
  .dn-dlg footer .right { width: 100%; }
  .dn-dlg footer .right .dn-btn { flex: 1; }
  .dialog:has(.dn-body) footer .right { width: 100%; }
  .dialog:has(.dn-body) footer .right .btn { flex: 1; }
}

/* bez pohybu: systémové „omezit pohyb“ nebo vypnuté animace v aplikaci */
@media (prefers-reduced-motion: reduce) {
  .dn-scene::before, .dn-scene::after, .dn-glow3, .dn-halo, .dn-btn--pri.is-busy, .dn-scene .dn-rise, .dn-chart .dn-bar, .dn-chart .dn-area, .dn-chart .dn-endpt, .dn-prog i, .dn-hb-t i { animation: none !important; }
  .dn-lift, .dn-qa-i, .dn-ph, .dn-call { transition: none !important; }
  .dn-lift:hover, .dn-qa:hover .dn-qa-i, a.dn-ph:hover, .dn-call:hover { transform: none !important; }
}
body:not(.anim) .dn-scene::before, body:not(.anim) .dn-scene::after, body:not(.anim) .dn-glow3, body:not(.anim) .dn-halo, body:not(.anim) .dn-btn--pri.is-busy, body:not(.anim) .dn-chart .dn-bar, body:not(.anim) .dn-chart .dn-area { animation: none; }
body:not(.anim) .dn-lift:hover, body:not(.anim) .dn-qa:hover .dn-qa-i { transform: none; }

/* ===== Nastavení / rozvržení stránky – oprava ořezu a černé plochy ===== */
/* Why: help mode sets [data-tip]{position:relative} later in the file and won over .david-fab (fixed) –
   the button fell into the page flow, made the document ~46 px longer than .shell, so the sticky side menu
   slid up and a black strip showed under the light canvas. Higher specificity keeps it floating. */
.david-fab[data-tip], .help-fab[data-tip] { position: fixed; }
/* dynamic viewport (phone address bar) so the side menu and canvas end exactly at the window edge */
@supports (height: 100dvh) {
  .shell { min-height: 100dvh; }
  .side { height: 100dvh; }
  @media (max-width: 900px) { .side { height: auto; } }
}
/* the settings list scrolls with the page (own inner scroll cut it at "Data a zálohy" and hid the rest) */
.set-list { position: static; max-height: none; overflow: visible; }
/* the 26-item side menu scrolls inside; fade at the bottom says "there is more" (padding keeps the last item clear of it) */
@media (min-width: 901px) {
  .side .nav { padding-bottom: 26px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); }
}
/* phone: every tap target in the settings area at least 44 px */
@media (max-width: 900px) {
  .set-chip, .set-back, .team-switch button, .set-detail .btn, .set-detail button.btn { min-height: 44px; }
  .side .team-switch button { height: 44px; }
  .side .side-ask { min-height: 44px; }
  .set-seg button, .ios-row .btn { min-height: 44px; }
  .set-back { min-width: 44px; }
}
@media (max-width: 900px) {
  .tabbar a, .tabbar button { min-height: 44px; }
  .side .brand { min-height: 44px; }
}

/* saved invoice statements + Box state in the statement settings */
.inv-boxst { margin: 6px 0; font-size: .82rem; color: var(--ink-3); }
.inv-boxst.is-warn { color: var(--warn, #b45309); }
.inv-docs { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.inv-docs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .84rem; }
.inv-docs li a { font-weight: 600; word-break: break-word; }
.inv-docs li small { color: var(--ink-3); }