/* Odměny – základ vzhledu, zamykací obrazovka a QR kartička. */

@font-face { font-family: "Plex"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow SC"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow SC"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow SC"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow SC"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-semi-condensed-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --bg: #f4f3ee;
  --bg-deep: #ebe9e1;
  --surface: #fdfdfb;
  --surface-2: #f3f2ec;
  --surface-3: #e8e6dd;
  --line: #deddd4;
  --line-2: #c6c4b8;
  --ink: #1b1f1d;
  --ink-2: #555c58;
  --ink-3: #858b86;
  --acc: #0e6b5d;
  --acc-2: #0a5449;
  --acc-ink: #ffffff;
  --acc-soft: #dcebe6;
  --acc-line: #9bc5bb;
  --tab: #b06f12;
  --tab-soft: #f6e8cf;
  --kafe: #7a4b2a;
  --kafe-soft: #efe3d6;
  --good: #2e7d46;
  --good-soft: #dfeee3;
  --warn: #9c6a12;
  --warn-soft: #f4ead4;
  --crit: #b0392b;
  --crit-soft: #f6e1dd;
  --wknd: #6a57a6;
  --wknd-soft: #e8e3f4;
  /* Série grafů: ověřeno validátorem palet (světlost, sytost, barvoslepost, kontrast). */
  --ch-tab: #b06f12;
  --ch-acc: #008876;
  --ch-prod: #6a57a6;
  /* Koláč dílů v profilu (2.37): kategorie v pevném pořadí, ověřeno validátorem palet. */
  --pie-1: #2a78d6; --pie-2: #eb6834; --pie-3: #1baf7a; --pie-4: #eda100; --pie-5: #e87ba4; --pie-6: #008300; --pie-o: #a9aea9;
  --focus: 0 0 0 3px color-mix(in srgb, var(--acc) 28%, transparent);
  --shadow-1: 0 1px 2px rgba(24, 30, 27, .06);
  --shadow-2: 0 1px 2px rgba(24, 30, 27, .05), 0 12px 28px -18px rgba(24, 30, 27, .28);
  --shadow-3: 0 24px 60px -24px rgba(16, 24, 21, .38);
  /* stupnice zaoblení (2.85): štítky, ovládací prvky, dlaždice, karty */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --code: "Plex Mono", ui-monospace, Consolas, monospace;
  --disp: "Barlow SC", "Segoe UI Semibold", system-ui, sans-serif;
  --body: "Plex", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101513;
    --bg-deep: #0b0f0e;
    --surface: #171d1b;
    --surface-2: #1d2522;
    --surface-3: #25302c;
    --line: #29332f;
    --line-2: #3b4843;
    --ink: #e8eeeb;
    --ink-2: #a5b0ab;
    --ink-3: #75817c;
    --acc: #3dbfa5;
    --acc-2: #5fd2ba;
    --acc-ink: #04201a;
    --acc-soft: #12332c;
    --acc-line: #286a5d;
    --tab: #e2a748;
    --tab-soft: #36280f;
    --kafe: #d0a07c;
    --kafe-soft: #33251b;
    --good: #5cc481;
    --good-soft: #15301f;
    --warn: #e0a93a;
    --warn-soft: #332812;
    --crit: #ec7160;
    --crit-soft: #3a1d19;
    --wknd: #a996e4;
    --wknd-soft: #272045;
    --ch-tab: #c38323;
    --ch-acc: #15a28b;
    --ch-prod: #907cd1;
    --pie-1: #3987e5; --pie-2: #d95926; --pie-3: #199e70; --pie-4: #c98500; --pie-5: #d55181; --pie-6: #008300; --pie-o: #5d6863;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 30px -18px rgba(0, 0, 0, .8);
    --shadow-3: 0 28px 70px -24px rgba(0, 0, 0, .85);
  }
}

/* ==========================================================================
   Vzhled „Sklo“ (2.47): tmavé poloprůhledné panely, oranžový akcent s podsvícením
   (podle návrhu uživatele). Zapíná ho <html data-look="glass"> (lock.js, výchozí);
   data-look="classic" = původní vzhled výše beze změny. PDF exporty CSS nepoužívají.
   ========================================================================== */
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root[data-look="glass"] {
  color-scheme: dark;
  --bg: #0b0c10;
  --bg-deep: #07080b;
  --surface: #191b21;
  --surface-2: #22252d;
  --surface-3: #2c3039;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .18);
  --ink: #ffffff;
  --ink-2: #cdd1da;
  --ink-3: #a6abb8;
  --acc: #ff7a2e;
  --acc-2: #ff9150;
  --acc-ink: #ffffff;
  --acc-soft: rgba(255, 115, 34, .16);
  --acc-line: rgba(255, 115, 34, .5);
  --tab: #f2b04e;
  --tab-soft: rgba(242, 176, 78, .15);
  --kafe: #d9a57e;
  --kafe-soft: rgba(217, 165, 126, .14);
  --good: #34d08c;
  --good-soft: rgba(38, 194, 129, .16);
  --warn: #f2b04e;
  --warn-soft: rgba(242, 176, 78, .15);
  --crit: #ff6f61;
  --crit-soft: rgba(255, 111, 97, .16);
  --wknd: #b3a2f0;
  --wknd-soft: rgba(169, 150, 228, .16);
  --ch-tab: #c38323;
  --ch-acc: #15a28b;
  --ch-prod: #907cd1;
  --pie-1: #3987e5; --pie-2: #d95926; --pie-3: #199e70; --pie-4: #c98500; --pie-5: #d55181; --pie-6: #008300; --pie-o: #5d6863;
  --focus: 0 0 0 2px rgba(255, 122, 46, .6);
  /* 2.85: jedna tenká světlá hrana nahoře místo širokých odlesků, stín jen pod plochou */
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .7);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, .14), 0 32px 80px -16px rgba(0, 0, 0, .7);
  --disp: "Jakarta", "Segoe UI", system-ui, sans-serif;
  --body: "Jakarta", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* sklo: plocha, okraj a rozmazání pozadí */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .025) 100%), rgba(16, 18, 23, .5);
  --glass-soft: rgba(255, 255, 255, .055);
  --glass-line: rgba(255, 255, 255, .13);
  --glass-blur: blur(28px) saturate(180%);
  /* 2.85: oranžová jako plná barva (sotva znatelný svislý přechod), bez záře: jen ostrá hrana */
  --acc-grad: linear-gradient(180deg, #ff8538 0%, #f4701f 100%);
  --acc-edge: inset 0 1px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(0, 0, 0, .4);
  /* čísla stejným písmem jako text (číslice stejné šířky), strojové písmo jen pro kódy */
  --mono: "Jakarta", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --code: "Plex Mono", ui-monospace, Consolas, monospace;
}
/* pozadí: tmavá místnost s teplým podsvícením (jen CSS, bez fotky) */
:root[data-look="glass"] body { background: #0b0c10; }
:root[data-look="glass"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 38% at 72% 34%, rgba(255, 118, 30, .30), transparent 72%),
    radial-gradient(34% 30% at 18% 78%, rgba(255, 140, 50, .16), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, rgba(44, 213, 196, .07), transparent 70%),
    linear-gradient(180deg, #111318 0%, #0b0c10 55%, #08090c 100%); }
:root[data-look="glass"] h1, :root[data-look="glass"] h2 { font-weight: 700; letter-spacing: -.02em; }
:root[data-look="glass"] h3, :root[data-look="glass"] h4 { font-weight: 600; letter-spacing: -.01em; }
/* číslice stejné šířky tam, kde se čísla rovnají pod sebe; v nadpisech a velkých hodnotách běžné */
:root[data-look="glass"] table, :root[data-look="glass"] .num, :root[data-look="glass"] input[type="number"] { font-variant-numeric: tabular-nums; }
:root[data-look="glass"] .eyebrow { font-size: 11px; letter-spacing: .08em; }
:root[data-look="glass"] .btn { border-radius: var(--r-sm); }
:root[data-look="glass"] .btn:not(.sec):not(.ghost):not(.danger) { background: var(--acc-grad); box-shadow: var(--acc-edge); }
:root[data-look="glass"] .btn:not(.sec):not(.ghost):not(.danger):hover { background: var(--acc-grad); filter: brightness(1.07); box-shadow: var(--acc-edge); }
:root[data-look="glass"] .btn.sec { background: var(--glass-soft); border-color: var(--glass-line); color: var(--ink); }
:root[data-look="glass"] .btn.sec:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .26); }
:root[data-look="glass"] .btn.ghost:hover { background: rgba(255, 255, 255, .1); }
:root[data-look="glass"] .btn.small { border-radius: var(--r-sm); }
:root[data-look="glass"] input[type="text"], :root[data-look="glass"] input:not([type]), :root[data-look="glass"] input[type="number"], :root[data-look="glass"] input[type="search"], :root[data-look="glass"] input[type="password"], :root[data-look="glass"] input[type="month"], :root[data-look="glass"] input[type="tel"], :root[data-look="glass"] input[type="date"], :root[data-look="glass"] select, :root[data-look="glass"] textarea {
  background-color: rgba(255, 255, 255, .05); border-color: var(--line-2); color: var(--ink); border-radius: var(--r-sm); min-height: 40px; }
:root[data-look="glass"] select option { background: #1b1d23; color: #fff; }
:root[data-look="glass"] .brand-mark { background: var(--acc-grad); box-shadow: var(--acc-edge); }
:root[data-look="glass"] .lock::before { display: none; }
:root[data-look="glass"] .lock-card { background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-3); border-radius: var(--r-lg); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-family: var(--disp); font-weight: 600; letter-spacing: .01em; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acc); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.eyebrow { font-family: var(--disp); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--focus); }

.icon { width: 18px; height: 18px; flex: none; }

/* Tlačítka a pole: sdílí zámek i aplikace. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--acc); color: var(--acc-ink); font: 600 14.5px/1.1 var(--body); text-decoration: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.btn:hover { background: var(--acc-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.big { min-height: 50px; padding: 12px 20px; font-size: 16px; border-radius: var(--r); }
.btn.wide { width: 100%; }
.btn.sec { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn.sec:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { background: transparent; color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); }
.btn.danger:hover { background: var(--crit-soft); }
.btn.small { min-height: 32px; padding: 5px 11px; font-size: 13px; border-radius: var(--r-sm); }
.link { background: none; border: 0; padding: 0; color: var(--acc); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
input[type="text"], input:not([type]), input[type="number"], input[type="search"], input[type="password"], input[type="month"], input[type="tel"], select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc); box-shadow: var(--focus); }
textarea { resize: vertical; min-height: 76px; }
.key-input { font-family: var(--code); letter-spacing: .06em; text-transform: uppercase; }

.note { padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); font-size: 14px; }
.note.i { background: var(--acc-soft); border-color: var(--acc-line); }
.note.w { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.note.e { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.note b { font-weight: 600; }

/* ---------------------------------------------------------------- zámek */
.lock { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px 32px; overflow: hidden; }
.lock::before { content: ""; position: absolute; inset: -30% -10% auto; height: 70%; background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%), radial-gradient(50% 50% at 75% 30%, color-mix(in srgb, var(--tab) 14%, transparent), transparent 70%); pointer-events: none; }
.lock-card { position: relative; width: min(100%, 440px); padding: 30px 28px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-3); animation: rise .35s ease both; }
.lock-card.wide { width: min(100%, 560px); }
.lock-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; background: linear-gradient(145deg, var(--acc), var(--acc-2)); color: var(--acc-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), var(--shadow-1); }
.brand-mark svg { width: 26px; height: 26px; }
.lock-brand strong { display: block; font-family: var(--disp); font-size: 22px; line-height: 1.05; font-weight: 700; letter-spacing: .02em; }
.lock-brand small { display: block; color: var(--ink-3); font-size: 13px; }
.lock h1 { font-size: 26px; line-height: 1.12; margin-bottom: 8px; }
.lock .lede { color: var(--ink-2); margin-bottom: 20px; }
.lock-stack { display: grid; gap: 12px; }
.lock-actions { display: grid; gap: 10px; margin-top: 16px; }
.lock-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 20px; font-size: 13.5px; }
.lock-foot button { background: none; border: 0; color: var(--ink-2); padding: 4px; text-decoration: underline; text-underline-offset: 3px; }
.lock-foot button:hover { color: var(--ink); }
.lock-msg:empty { display: none; }
.lock .lede.center { text-align: center; }
.mt { margin-top: 14px; }
.lock-safe { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }
.lock-safe svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--acc); }
.steps { display: flex; gap: 6px; margin-bottom: 18px; }
.steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--surface-3); }
.steps i.on { background: var(--acc); }

/* Pozadí přihlašovací stránky (2.60, static/lockbg.js): barevná pole přes WebGL. Bez WebGL
   třída lock-bg-on chybí a platí CSS pozadí výš. Jemný tmavý závoj drží čitelnost panelu. */
.lock-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.lock-bg-on .lock::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, rgba(8, 9, 12, .38), rgba(8, 9, 12, .12) 70%, transparent 100%); }
.lock-bg-on .lock-card { z-index: 1; }
/* tekuté sklo (liquid glass, 2.60.1): průzračné a jasné, barvy pozadí se rozlijí silným
   rozmazáním, ale bez ztmavení; lesklá hrana (odlesk nahoře vlevo, lom světla na okrajích) */
:root[data-look="glass"].lock-bg-on .lock-card {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%),
    radial-gradient(90% 50% at 100% 100%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .08) 100%),
    rgba(24, 22, 22, .18);
  border: 1px solid rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(44px) saturate(165%);
  backdrop-filter: blur(44px) saturate(165%);
  box-shadow:
    0 30px 70px -24px rgba(0, 0, 0, .55),
    inset 1.5px 1.5px 1px -0.5px rgba(255, 255, 255, .75),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, .35),
    inset 0 0 22px rgba(255, 255, 255, .10),
    inset 0 -40px 60px -50px rgba(255, 255, 255, .25); }
:root[data-look="glass"].lock-bg-on .lock-card { --ink-2: #f1ede9; --ink-3: #e2ddd8; text-shadow: 0 1px 10px rgba(0, 0, 0, .28); }
:root[data-look="glass"].lock-bg-on .lock-card .btn { text-shadow: none; }
:root[data-look="glass"].lock-bg-on .lock-card input:not([type="checkbox"]):not([type="radio"]) { background-color: rgba(16, 14, 14, .30); border-color: rgba(255, 255, 255, .28); text-shadow: none; }

/* PIN */
.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 6px 0 18px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.pin-dots i.on { background: var(--acc); border-color: var(--acc); transform: scale(1.05); }
.pin-dots.shake { animation: shake .4s ease; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-pad button { min-height: 58px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font: 600 22px/1 var(--mono); color: var(--ink); transition: background .12s ease, transform .12s ease; }
.pin-pad button:hover { background: var(--surface-3); }
.pin-pad button:active { transform: scale(.97); }
.pin-pad button.fn { font: 600 14px/1 var(--body); color: var(--ink-2); background: transparent; }
.pin-pad button:disabled { opacity: .4; }

/* Skener */
.scanner { position: relative; overflow: hidden; border-radius: var(--r); background: #000; aspect-ratio: 1 / 1; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner .frame { position: absolute; inset: 16%; border-radius: var(--r); box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); outline: 3px solid rgba(255, 255, 255, .9); }
.scanner .frame::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: color-mix(in srgb, var(--acc) 80%, white); box-shadow: 0 0 12px var(--acc); animation: scan 2s ease-in-out infinite; }
.scanner-hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }

/* QR kartička (85,6 × 54 mm) */
.card-preview { display: grid; place-items: center; margin: 4px 0 16px; }
.odm-card { position: relative; width: 100%; max-width: 420px; aspect-ratio: 85.6 / 54; display: grid; grid-template-columns: 38% 1fr; gap: 5%; align-items: center; padding: 5.5% 6%; border-radius: 4.5% / 7%; background: linear-gradient(140deg, #0f6f60, #0a4d43 70%); color: #fff; box-shadow: 0 18px 40px -20px rgba(8, 40, 35, .65); overflow: hidden; }
.odm-card::after { content: ""; position: absolute; right: -18%; bottom: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%); }
.odm-card .qr { background: #fff; border-radius: 8%; padding: 6%; aspect-ratio: 1; }
.odm-card .qr svg { display: block; width: 100%; height: 100%; }
.odm-card .card-text { display: grid; gap: 4%; min-width: 0; position: relative; z-index: 1; }
.odm-card .card-brand { font: 700 clamp(13px, 4.4cqw, 20px)/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; }
.odm-card .card-label { font-size: clamp(10px, 3cqw, 13px); opacity: .85; }
.odm-card .card-key { font: 500 clamp(8.5px, 2.55cqw, 12px)/1.45 var(--code); letter-spacing: .02em; }
.odm-card .card-key > span { display: block; white-space: nowrap; }
.odm-card .card-warn { font-size: clamp(7.5px, 2.1cqw, 10px); opacity: .75; }
.card-wrap { container-type: inline-size; width: 100%; max-width: 420px; }
.key-box { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface-2); font: 600 15px/1 var(--code); letter-spacing: .04em; }
.key-box span { padding: 5px 7px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--acc); flex: none; }

.toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 100; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: var(--r); background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: var(--shadow-3); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--crit); color: #fff; }

.spinner { width: 34px; height: 34px; margin: 10px auto; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--acc); animation: spin .8s linear infinite; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes scan { 0%, 100% { transform: translateY(-120%); opacity: .4; } 50% { transform: translateY(120%); opacity: 1; } }

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

/* Tisk kartičky: jen kartička ve skutečné velikosti. */
#printCard { display: none; }
@media print {
  body.print-card > *:not(#printCard) { display: none !important; }
  body.print-card { background: #fff; }
  body.print-card #printCard { display: block; padding: 10mm; }
  body.print-card #printCard .card-wrap { width: 85.6mm; max-width: none; }
  body.print-card #printCard .odm-card { width: 85.6mm; height: 54mm; max-width: none; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-card #printCard .print-note { margin-top: 6mm; font-size: 9pt; color: #333; max-width: 120mm; }
}
@page { margin: 10mm; }