/*!
 * Faktury Web (pracovní značka „Dokladně") – designový systém fw
 * Směr: „Klid" (28. 10. 2026) – minimalistický, ve stylu macOS / Fluent 2. Hierarchie velikostí a vahou písma,
 * ne rámečky. Neutrální šedé plochy, jeden akcent (modrá), sémantické barvy jen pro stav.
 * Písmo: Inter (variabilní, osy wght 100–900 a opsz 14–32, OFL 1.1), self-hosted woff2.
 * Ikony: Lucide (ISC) – sprite icons/fw-icons.svg.
 * Pravidla: tokeny --fw-*, třídy fw-*, žádné inline styly ani skripty (CSP), světlý i tmavý režim přes light-dark().
 */

/* pořadí vrstev: kostra (layout) má přednost před obecnými komponentami, utility před vším */
@layer fw.reset, fw.tokens, fw.base, fw.components, fw.layout, fw.pages, fw.motion, fw.utilities;

/* ------------------------------------------------------------------ písmo */

@font-face {
  font-family: "Fw Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fw Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ reset */

@layer fw.reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  img, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  table { border-collapse: collapse; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ tokeny */

@layer fw.tokens {
  :root {
    color-scheme: light dark;

    /* plochy – light-dark(světlá, tmavá); poměry kontrastu v navrh.md */
    --fw-bg:              light-dark(#F5F5F7, #161618);  /* pozadí okna */
    --fw-surface:         light-dark(#FFFFFF, #1F1F22);  /* karta, tabulka, dialog */
    --fw-surface-raised:  light-dark(#FFFFFF, #2A2A2E);  /* tlačítko, menu, toast v tmavém režimu */
    --fw-surface-sunken:  light-dark(#FAFAFC, #1A1A1D);  /* patička tabulky, náhled PDF */
    --fw-surface-hover:   light-dark(#F2F2F5, #2A2A2E);
    --fw-fill:            light-dark(rgb(118 118 128 / .12), rgb(118 118 128 / .24)); /* stopa přepínače, neutrální podklad */
    --fw-fill-strong:     light-dark(rgb(118 118 128 / .2), rgb(118 118 128 / .36));
    --fw-selected:        light-dark(rgb(0 0 0 / .055), rgb(255 255 255 / .08));     /* aktivní položka menu */
    --fw-glass:           light-dark(rgb(255 255 255 / .72), rgb(30 30 33 / .72));   /* horní lišta, paleta, menu */

    --fw-line:            light-dark(#E5E5EA, #2E2E33);  /* vlasové dělítko – jen dekorace */
    --fw-line-control:    light-dark(#D2D2D7, #3A3A3F);  /* obrys tlačítka */
    --fw-line-strong:     light-dark(#8A8A90, #7C7C83);  /* hrana pole, ≥ 3 : 1 */

    --fw-text:            light-dark(#1D1D1F, #F5F5F7);
    --fw-text-2:          light-dark(#48484D, #C7C7CC);
    --fw-text-3:          light-dark(#6E6E73, #98989F);

    /* jediný akcent */
    --fw-accent:          light-dark(#0066CC, #4AA3FF);  /* odkaz, aktivní ikona, fokus */
    --fw-accent-hover:    light-dark(#0058B0, #74B8FF);
    --fw-accent-solid:    light-dark(#0066CC, #0A6FDB);  /* plné primární tlačítko */
    --fw-accent-solid-hover: light-dark(#0058B0, #1A7DE8);
    --fw-accent-soft:     light-dark(#EBF3FD, #15283F);
    --fw-on-accent:       #FFFFFF;

    /* stav */
    --fw-ok:              light-dark(#1D7A3A, #4CD27E);
    --fw-ok-soft:         light-dark(#E9F6EE, #16301F);
    --fw-danger:          light-dark(#D1001C, #FF6B63);
    --fw-danger-soft:     light-dark(#FDEDEE, #3A1C1C);
    --fw-danger-solid:    light-dark(#D1001C, #C4281F);
    --fw-on-danger:       #FFFFFF;
    --fw-warn:            light-dark(#9A5800, #FFB547);
    --fw-warn-soft:       light-dark(#FFF4E1, #38290F);

    --fw-focus:           var(--fw-accent);
    --fw-ring:            0 0 0 3.5px color-mix(in oklab, var(--fw-accent), transparent 70%);

    /* typografie: jedno písmo, hierarchie velikostí a vahou */
    --fw-font-ui: "Fw Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --fw-font-display: var(--fw-font-ui); /* Inter přepne optickou velikost (opsz) sám podle velikosti písma */

    --fw-fs-xs: .75rem;      /* 12 – popisky, meta */
    --fw-fs-sm: .8125rem;    /* 13 – nápovědy, hlavička tabulky */
    --fw-fs-md: .875rem;     /* 14 – základ UI a tabulky */
    --fw-fs-lg: 1rem;        /* 16 – nadpis karty, mobilní pole */
    --fw-fs-xl: 1.25rem;     /* 20 – nadpis dialogu, sekce */
    --fw-fs-2xl: 1.75rem;    /* 28 – nadpis stránky */
    --fw-fs-3xl: 2.125rem;   /* 34 – klíčová částka */
    --fw-fs-4xl: 3rem;       /* 48 – claim na přihlášení */

    --fw-lh-tight: 1.15;
    --fw-lh-ui: 1.45;

    /* rozestupy – mřížka 4 px */
    --fw-s-1: .25rem; --fw-s-2: .5rem; --fw-s-3: .75rem; --fw-s-4: 1rem;
    --fw-s-5: 1.25rem; --fw-s-6: 1.5rem; --fw-s-8: 2rem; --fw-s-10: 2.5rem; --fw-s-12: 3rem;

    /* poloměry podle hierarchie */
    --fw-r-1: 6px;     /* štítek, kbd, položka menu */
    --fw-r-2: 8px;     /* pole, tlačítko */
    --fw-r-3: 12px;    /* karta */
    --fw-r-4: 14px;    /* dialog, paleta */
    --fw-r-pill: 999px;

    /* stíny: karta se odliší jemně, vrstvy nad stránkou výrazněji */
    --fw-shadow-card: 0 0 0 1px light-dark(rgb(0 0 0 / .045), rgb(255 255 255 / .06)), 0 1px 2px light-dark(rgb(0 0 0 / .04), rgb(0 0 0 / .3));
    --fw-shadow-control: 0 1px 1px light-dark(rgb(0 0 0 / .04), rgb(0 0 0 / .25));
    --fw-shadow-pop: 0 0 0 1px light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .08)), 0 10px 32px -6px light-dark(rgb(0 0 0 / .16), rgb(0 0 0 / .55)), 0 2px 6px light-dark(rgb(0 0 0 / .05), rgb(0 0 0 / .3));
    --fw-shadow-bar: 0 -1px 0 var(--fw-line);

    /* rozměry */
    --fw-topbar-h: 3.25rem;
    --fw-nav-w: 15rem;
    --fw-row-h: 2.75rem;
    --fw-control-h: 2.25rem;

    /* pohyb – tabulka a pravidla v navrh.md, kap. „Pohyb". Pohyb nikdy neblokuje vstup ani nezdržuje data. */
    --fw-dur-press: 90ms;    /* stisk, zaškrtnutí – odezva pod 100 ms */
    --fw-dur-1: 150ms;       /* najetí myší, barva, zavření menu */
    --fw-dur-2: 200ms;       /* menu, popover, našeptávač, toast, záložky */
    --fw-dur-3: 260ms;       /* dialog, obsah stránky, vstup karet, posuvník segmentů */
    --fw-dur-4: 340ms;       /* mobilní list zespodu, růst grafu */
    --fw-dur-count: 450ms;   /* načítání čísel v ukazatelích */
    --fw-stagger: 24ms;      /* krok vstupu karet */
    --fw-stagger-max: 168ms; /* strop zpoždění (7 kroků) → celý vstup ≤ 168 + 260 = 428 ms */

    --fw-ease-out: cubic-bezier(.2, .8, .2, 1);     /* výchozí: rychlý nástup, měkké dosednutí */
    --fw-ease-in: cubic-bezier(.4, 0, 1, 1);         /* odchod (krátký) */
    --fw-ease-in-out: cubic-bezier(.45, 0, .25, 1);  /* přesun mezi dvěma místy */
    --fw-ease-spring: cubic-bezier(.2, .9, .3, 1.04); /* náhrada; níž přepsáno pružinou linear() */
    --fw-ease: var(--fw-ease-out);                   /* zpětná kompatibilita */

    /* míra pohybu – při omezeném pohybu 0 / 1, animace pak jen prolínají */
    --fw-rise: 6px;          /* vstup karet a toastů zdola */
    --fw-pop-scale: .96;     /* dialog, menu, paleta */
    --fw-press-scale: .98;   /* stisk tlačítka */
    --fw-sheet-shift: 100%;  /* mobilní list vyjede zespodu */
    --fw-slide: 8px;         /* obsah stránky při přechodu */
  }

  /* tlumená pružina (ζ = 0,75, překmit 2,8 %) – jen pro posun a měřítko, nikdy pro průhlednost */
  @supports (transition-timing-function: linear(0, 1)) {
    :root {
      --fw-ease-spring: linear(0, 0.014 2%, 0.062 4.5%, 0.16 7.8%, 0.565 18.8%, 0.712 23.5%, 0.822 28%, 0.907 32.8%, 0.97 38%, 1.01 44.3%, 1.028 52.8%, 1 97.3%, 1);
    }
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  /* omezený pohyb: žádný posun ani měřítko, jen okamžitě nebo prolnutím */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --fw-rise: 0px; --fw-pop-scale: 1; --fw-press-scale: 1; --fw-sheet-shift: 0%; --fw-slide: 0px;
      --fw-dur-3: 160ms; --fw-dur-4: 160ms; --fw-stagger: 0ms; --fw-stagger-max: 0ms;
    }
  }
}

/* ------------------------------------------------------------------ základ */

@layer fw.base {
  html {
    font-family: var(--fw-font-ui);
    font-size: 100%;
    font-optical-sizing: auto;
    line-height: var(--fw-lh-ui);
    background: var(--fw-bg);
    color: var(--fw-text);
    accent-color: var(--fw-accent-solid);
    scrollbar-gutter: stable;
  }
  body {
    font-size: var(--fw-fs-md);
    letter-spacing: -.006em;
    background: var(--fw-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3 { font-family: var(--fw-font-display); font-weight: 600; line-height: var(--fw-lh-tight); letter-spacing: -.02em; }
  h1 { font-size: var(--fw-fs-2xl); font-weight: 650; letter-spacing: -.026em; }
  h2 { font-size: var(--fw-fs-xl); }
  h3 { font-size: var(--fw-fs-lg); letter-spacing: -.012em; }
  h4 { font-size: var(--fw-fs-sm); font-weight: 600; color: var(--fw-text-2); }

  a { color: var(--fw-accent); text-decoration: none; }
  a:hover { color: var(--fw-accent-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

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

  ::selection { background: color-mix(in oklab, var(--fw-accent), transparent 72%); }

  mark { background: color-mix(in oklab, var(--fw-accent), transparent 82%); color: inherit; border-radius: 3px; padding-inline: .1em; }

  kbd, .fw-kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 .4em;
    font: 500 .6875rem/1.6 var(--fw-font-ui);
    letter-spacing: 0;
    text-align: center;
    color: var(--fw-text-3);
    background: var(--fw-fill);
    border-radius: 5px;
    white-space: nowrap;
  }

  code { font-size: .92em; padding: .05em .3em; border-radius: 4px; background: var(--fw-fill); }

  hr { border: 0; border-top: 1px solid var(--fw-line); margin-block: var(--fw-s-4); }
}

/* ------------------------------------------------------------------ kostra aplikace */

@layer fw.layout {
  .fw-app {
    display: grid;
    grid-template-columns: var(--fw-nav-w) minmax(0, 1fr);
    grid-template-rows: var(--fw-topbar-h) auto 1fr;
    grid-template-areas: "top top" "nav slot" "nav main";
    min-height: 100dvh;
    background: var(--fw-bg);
  }

  /* horní lišta: průsvitná s rozostřením jako v macOS */
  .fw-topbar {
    grid-area: top;
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--fw-s-2);
    padding-inline: var(--fw-s-3) var(--fw-s-4);
    height: var(--fw-topbar-h);
    background: var(--fw-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 var(--fw-line);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fw-topbar { background: var(--fw-surface); }
  }
  .fw-topbar__spacer { flex: 1; }

  .fw-brand {
    display: inline-flex; align-items: center; gap: .625rem;
    padding: var(--fw-s-1) var(--fw-s-2);
    color: var(--fw-text); text-decoration: none;
    font: 650 1.0625rem/1 var(--fw-font-display);
    letter-spacing: -.02em;
    width: calc(var(--fw-nav-w) - var(--fw-s-3));
  }
  .fw-brand:hover { color: var(--fw-text); text-decoration: none; }
  .fw-brand__mark {
    display: grid; place-items: center; flex: none;
    inline-size: 1.75rem; block-size: 1.75rem;
    border-radius: 8px;
    background: var(--fw-accent-solid); color: var(--fw-on-accent);
    font: 700 .9375rem/1 var(--fw-font-ui);
    letter-spacing: -.02em;
  }

  /* přepínač firmy */
  .fw-tenant {
    display: inline-flex; align-items: center; gap: var(--fw-s-2);
    max-width: 22rem; height: 2rem;
    padding: 0 var(--fw-s-2) 0 var(--fw-s-3);
    background: transparent; border: 0; border-radius: var(--fw-r-2);
    text-align: left; min-inline-size: 0;
    transition: background-color var(--fw-dur-1);
  }
  .fw-tenant:hover { background: var(--fw-selected); }
  .fw-tenant__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fw-tenant__id { color: var(--fw-text-3); font-size: var(--fw-fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* tlačítko hledání (otevře paletu Ctrl+K) */
  .fw-searchbtn {
    display: inline-flex; align-items: center; gap: var(--fw-s-2);
    inline-size: min(24rem, 30vw); height: 2rem;
    padding: 0 var(--fw-s-1) 0 var(--fw-s-3);
    color: var(--fw-text-3); background: var(--fw-fill);
    border: 0; border-radius: var(--fw-r-2); min-inline-size: 0;
    transition: background-color var(--fw-dur-1);
  }
  .fw-searchbtn:hover { background: var(--fw-fill-strong); color: var(--fw-text-2); }
  .fw-searchbtn .fw-icon { inline-size: 1rem; block-size: 1rem; }
  .fw-searchbtn span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fw-searchbtn kbd { background: var(--fw-surface); box-shadow: var(--fw-shadow-control); }

  .fw-avatar {
    display: grid; place-items: center;
    inline-size: 1.875rem; block-size: 1.875rem; border-radius: 50%;
    background: var(--fw-fill-strong); color: var(--fw-text);
    font-weight: 600; font-size: .6875rem; letter-spacing: 0;
  }

  /* levé menu – jako postranní panel Finderu / Nastavení; na mobilu vysouvací (popover) */
  .fw-sidenav {
    grid-area: nav;
    position: sticky; top: var(--fw-topbar-h);
    display: flex; flex-direction: column; gap: 1px;
    block-size: calc(100dvh - var(--fw-topbar-h));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: var(--fw-s-3) var(--fw-s-3) var(--fw-s-6);
    margin: 0; inset: var(--fw-topbar-h) auto auto auto; border: 0;
    background: transparent; color: var(--fw-text);
  }
  .fw-sidenav[popover] { display: flex; position: sticky; inline-size: auto; }
  .fw-sidenav > * { flex-shrink: 0; }
  .fw-sidenav__group {
    margin: var(--fw-s-5) var(--fw-s-3) var(--fw-s-1);
    font-size: .6875rem; font-weight: 600; color: var(--fw-text-3);
  }
  .fw-navlink {
    display: flex; align-items: center; gap: .625rem;
    min-block-size: 2rem; padding: 0 var(--fw-s-3) 0 .625rem;
    color: var(--fw-text); text-decoration: none; border-radius: var(--fw-r-2);
    font-weight: 450;
    position: relative;
    transition: background-color var(--fw-dur-1);
  }
  .fw-navlink svg { inline-size: 1.125rem; block-size: 1.125rem; flex: none; stroke-width: 1.75; color: var(--fw-text-3); }
  .fw-navlink:hover { background: var(--fw-selected); color: var(--fw-text); text-decoration: none; }
  .fw-navlink[aria-current="page"] { font-weight: 600; }
  .fw-navlink[aria-current="page"] svg { color: var(--fw-accent); }
  /* podklad aktivní položky: samostatný prvek, aby mohl mezi stránkami „přejet" (view transition);
     bez něj má podklad sám odkaz */
  .fw-navlink[aria-current="page"]:not(:has(> .fw-navlink__pill)) { background: var(--fw-fill-strong); }
  .fw-navlink:has(> .fw-navlink__pill) { isolation: isolate; }
  .fw-navlink__pill { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fw-fill-strong); pointer-events: none; }
  .fw-navlink:not([aria-current="page"]) > .fw-navlink__pill { display: none; }
  .fw-navlink__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fw-navlink__count {
    font-size: var(--fw-fs-xs); font-weight: 500; font-variant-numeric: tabular-nums;
    color: var(--fw-text-3); min-inline-size: 1.25rem; text-align: center;
  }
  .fw-navlink__count--alert { color: var(--fw-on-danger); background: var(--fw-danger-solid); border-radius: var(--fw-r-pill); padding: 0 .4em; font-weight: 600; line-height: 1.25rem; }

  /* slot pro stavový pruh */
  .fw-slot { grid-area: slot; }
  .fw-slot:empty { display: none; }

  /* hlavní obsah */
  .fw-main {
    grid-area: main;
    min-inline-size: 0;
    padding: var(--fw-s-8) var(--fw-s-10) var(--fw-s-12) var(--fw-s-6);
    container: main / inline-size;
  }
  .fw-main--narrow { max-inline-size: 76rem; }

  .fw-crumbs { display: flex; gap: var(--fw-s-2); font-size: var(--fw-fs-sm); color: var(--fw-text-3); margin-bottom: var(--fw-s-2); }
  .fw-crumbs a { color: var(--fw-text-3); }
  .fw-crumbs a:hover { color: var(--fw-text); }
  .fw-crumbs li { list-style: none; display: flex; gap: var(--fw-s-2); }
  .fw-crumbs li + li::before { content: "›"; color: var(--fw-text-3); }
  ol.fw-crumbs { padding: 0; }

  .fw-pagehead {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-2) var(--fw-s-3);
    margin-bottom: var(--fw-s-8);
  }
  .fw-pagehead h1 { margin-right: var(--fw-s-1); }
  .fw-pagehead__meta { color: var(--fw-text-3); font-size: var(--fw-fs-md); }
  .fw-pagehead__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--fw-s-2); }

  /* mřížky obsahu */
  .fw-split { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--fw-s-6); align-items: start; }
  .fw-split--wide-aside { grid-template-columns: minmax(0, 1fr) 25rem; }
  .fw-stack { display: flex; flex-direction: column; gap: var(--fw-s-6); }
  .fw-stack--tight { gap: var(--fw-s-2); }
  .fw-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-2); }
  .fw-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-s-4); }
  .fw-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fw-s-4); }
  .fw-autogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--fw-s-4); align-items: start; }
  .fw-sticky { position: sticky; top: calc(var(--fw-topbar-h) + var(--fw-s-6)); }

  @container main (width < 56rem) {
    .fw-split--wide-aside { grid-template-columns: minmax(0, 1fr); }
  }
  @container main (width < 48rem) {
    .fw-split { grid-template-columns: minmax(0, 1fr); }
    .fw-sticky { position: static; }
  }
  @container main (width < 40rem) {
    .fw-grid-2, .fw-grid-3 { grid-template-columns: minmax(0, 1fr); }
  }

  /* spodní lišta (mobil) */
  .fw-bottombar { display: none; }

  /* --- režim soustředění (editor): menu jako lišta ikon i na desktopu --- */
  .fw-app--focus { --fw-nav-w: 4rem; }
  .fw-app--focus .fw-brand { width: auto; }
  .fw-app--focus .fw-brand__word { display: none; }
  .fw-app--focus .fw-sidenav { padding-inline: var(--fw-s-2); }
  .fw-app--focus .fw-sidenav__group { block-size: 1px; overflow: hidden; margin: var(--fw-s-3) var(--fw-s-3); background: var(--fw-line); color: transparent; }
  .fw-app--focus .fw-navlink { justify-content: center; padding: 0; min-block-size: 2.5rem; }
  .fw-app--focus .fw-navlink__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fw-app--focus .fw-navlink__count { position: absolute; top: 3px; right: 3px; min-inline-size: 0; font-size: .625rem; line-height: 1rem; }
  .fw-app--focus .fw-navlink__count:not(.fw-navlink__count--alert) { display: none; }

  /* --- tablet: menu jako lišta ikon --- */
  @media (width < 64rem) {
    .fw-app { --fw-nav-w: 4rem; }
    .fw-brand { width: auto; }
    .fw-brand__word { display: none; }
    .fw-sidenav { padding-inline: var(--fw-s-2); align-items: stretch; }
    .fw-sidenav__group { block-size: 1px; overflow: hidden; margin: var(--fw-s-3) var(--fw-s-3); background: var(--fw-line); color: transparent; }
    .fw-navlink { justify-content: center; padding: 0; min-block-size: 2.5rem; }
    .fw-navlink__label, .fw-navlink kbd { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .fw-navlink__count { position: absolute; top: 3px; right: 3px; min-inline-size: 0; font-size: .625rem; line-height: 1rem; }
    .fw-navlink__count:not(.fw-navlink__count--alert) { display: none; }
    .fw-tenant__id { display: none; }
    .fw-main { padding-inline: var(--fw-s-6); }
  }

  /* --- mobil: spodní lišta, menu vysouvací --- */
  @media (width < 45rem) {
    .fw-app {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "top" "slot" "main";
      padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
    }
    .fw-topbar { padding-inline: var(--fw-s-2); gap: var(--fw-s-1); }
    .fw-tenant { max-width: 12rem; padding-inline: var(--fw-s-2); }
    .fw-searchbtn { inline-size: var(--fw-control-h); height: var(--fw-control-h); padding: 0; justify-content: center; background: transparent; }
    .fw-searchbtn .fw-icon { inline-size: 1.125rem; block-size: 1.125rem; }
    .fw-searchbtn span, .fw-searchbtn kbd { display: none; }
    .fw-main { padding: var(--fw-s-5) var(--fw-s-4) var(--fw-s-8); }
    .fw-pagehead { margin-bottom: var(--fw-s-5); }

    /* vysouvací menu: rozložení platí i v zavřeném stavu, aby odjezd (exit) nepřeskočil do mřížky */
    .fw-sidenav[popover] {
      display: none; position: fixed; inset: 0 auto 0 0;
      inline-size: min(20rem, 86vw); block-size: 100dvh;
      background: var(--fw-bg); box-shadow: var(--fw-shadow-pop);
      padding: var(--fw-s-4) var(--fw-s-3);
      --fw-nav-w: 20rem;
      translate: calc(-1 * var(--fw-sheet-shift)) 0; opacity: 0;
      transition: translate var(--fw-dur-2) var(--fw-ease-in), opacity var(--fw-dur-2) var(--fw-ease-in),
        display var(--fw-dur-2) allow-discrete, overlay var(--fw-dur-2) allow-discrete;
    }
    .fw-sidenav[popover]:popover-open {
      display: flex; translate: 0 0; opacity: 1;
      transition-duration: var(--fw-dur-4), var(--fw-dur-2), var(--fw-dur-4), var(--fw-dur-4);
      transition-timing-function: var(--fw-ease-out);
    }
    @starting-style { .fw-sidenav[popover]:popover-open { translate: calc(-1 * var(--fw-sheet-shift)) 0; opacity: 0; } }
    .fw-sidenav[popover]::backdrop {
      background: rgb(0 0 0 / 0);
      transition: background-color var(--fw-dur-2), display var(--fw-dur-2) allow-discrete, overlay var(--fw-dur-2) allow-discrete;
    }
    .fw-sidenav[popover]:popover-open::backdrop { background: rgb(0 0 0 / .32); }
    @starting-style { .fw-sidenav[popover]:popover-open::backdrop { background: rgb(0 0 0 / 0); } }
    .fw-sidenav[popover] .fw-navlink { justify-content: flex-start; padding: 0 var(--fw-s-3) 0 .625rem; min-block-size: 2.75rem; }
    .fw-sidenav[popover] .fw-navlink__label { position: static; inline-size: auto; block-size: auto; clip-path: none; }
    .fw-sidenav[popover] .fw-sidenav__group { block-size: auto; margin: var(--fw-s-5) var(--fw-s-3) var(--fw-s-1); background: none; color: var(--fw-text-3); }
    .fw-sidenav[popover] .fw-navlink__count { position: static; display: inline; font-size: var(--fw-fs-xs); line-height: 1.25rem; min-inline-size: 1.25rem; }

    .fw-bottombar {
      display: grid; grid-template-columns: repeat(5, 1fr);
      position: fixed; inset: auto 0 0 0; z-index: 30;
      padding: var(--fw-s-1) var(--fw-s-1) calc(var(--fw-s-1) + env(safe-area-inset-bottom));
      background: var(--fw-glass);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      box-shadow: var(--fw-shadow-bar);
    }
    .fw-bottombar a {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      min-block-size: 3.25rem; color: var(--fw-text-3); text-decoration: none;
      font-size: .6875rem; font-weight: 500; border-radius: var(--fw-r-2);
    }
    .fw-bottombar a:hover { text-decoration: none; color: var(--fw-text); }
    .fw-bottombar svg { inline-size: 1.375rem; block-size: 1.375rem; stroke-width: 1.75; }
    .fw-bottombar a[aria-current="page"] { color: var(--fw-accent); }
    .fw-bottombar .fw-bottombar__new { color: var(--fw-text-2); }
    .fw-bottombar .fw-bottombar__new svg {
      inline-size: 2.5rem; block-size: 2rem; padding: .375rem; border-radius: var(--fw-r-pill);
      background: var(--fw-accent-solid); color: var(--fw-on-accent); stroke-width: 2.25;
    }
  }
  @media (width >= 45rem) {
    .fw-show-mobile { display: none !important; }
  }
}

/* ------------------------------------------------------------------ komponenty */

@layer fw.components {

  /* ikony ze sprite */
  .fw-icon { inline-size: 1.125rem; block-size: 1.125rem; flex: none; stroke-width: 1.75; }
  .fw-icon--sm { inline-size: 1rem; block-size: 1rem; }
  .fw-icon--lg { inline-size: 1.5rem; block-size: 1.5rem; }

  /* přepínač režimu: ikona ukazuje, kam se přepne */
  .fw-theme-toggle .fw-theme-toggle__to-light { display: none; }
  :root[data-theme="dark"] .fw-theme-toggle .fw-theme-toggle__to-light { display: inline-flex; }
  :root[data-theme="dark"] .fw-theme-toggle .fw-theme-toggle__to-dark { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fw-theme-toggle .fw-theme-toggle__to-light { display: inline-flex; }
    :root:not([data-theme="light"]) .fw-theme-toggle .fw-theme-toggle__to-dark { display: none; }
  }
  .fw-theme-toggle span { display: inline-flex; align-items: center; gap: var(--fw-s-2); }

  /* ---------- tlačítka ---------- */
  .fw-btn {
    --_bg: var(--fw-surface-raised); --_fg: var(--fw-text); --_bd: var(--fw-line-control); --_sh: var(--fw-shadow-control);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--fw-s-2);
    min-block-size: var(--fw-control-h); padding: 0 .875rem;
    font-weight: 500; font-size: var(--fw-fs-md); line-height: 1.1;
    color: var(--_fg); background: var(--_bg);
    border: 1px solid var(--_bd); border-radius: var(--fw-r-2);
    box-shadow: var(--_sh);
    text-decoration: none; white-space: nowrap;
    /* puštění: pružina zpět; stisk níž: okamžitě (odezva < 100 ms) */
    transition: background-color var(--fw-dur-1) var(--fw-ease-out), border-color var(--fw-dur-1) var(--fw-ease-out),
      color var(--fw-dur-1) var(--fw-ease-out), box-shadow var(--fw-dur-2) var(--fw-ease-out), scale var(--fw-dur-3) var(--fw-ease-spring);
    -webkit-tap-highlight-color: transparent;
  }
  .fw-btn:hover { --_bg: var(--fw-surface-hover); color: var(--_fg); text-decoration: none; }
  .fw-btn:active { scale: var(--fw-press-scale); transition-duration: var(--fw-dur-press); transition-timing-function: var(--fw-ease-out); }
  /* plná tlačítka: při najetí jemně „vystoupí" stínem (ne posunem – nic neuhýbá pod kurzorem) */
  :is(.fw-btn--primary, .fw-btn--danger):hover:not(:disabled, [aria-disabled="true"]) { box-shadow: var(--_sh), 0 2px 8px -2px color-mix(in oklab, var(--_bg), transparent 45%); }
  .fw-btn:not(.fw-btn--quiet, .fw-btn--link, .fw-btn--primary, .fw-btn--danger, :disabled, [aria-disabled="true"]):hover { box-shadow: var(--_sh), 0 2px 6px -3px light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .5)); }
  .fw-btn .fw-icon { color: inherit; opacity: .85; }
  .fw-btn kbd { background: color-mix(in oklab, currentColor, transparent 88%); color: inherit; opacity: .8; }

  .fw-btn--primary { --_bg: var(--fw-accent-solid); --_fg: var(--fw-on-accent); --_bd: transparent; font-weight: 600; }
  .fw-btn--primary:hover { --_bg: var(--fw-accent-solid-hover); }
  .fw-btn--primary .fw-icon { opacity: 1; }
  .fw-btn--danger { --_bg: var(--fw-danger-solid); --_fg: var(--fw-on-danger); --_bd: transparent; font-weight: 600; }
  .fw-btn--danger:hover { --_bg: color-mix(in oklab, var(--fw-danger-solid), black 10%); }
  .fw-btn--quiet { --_bg: transparent; --_bd: transparent; --_sh: none; --_fg: var(--fw-text-2); }
  .fw-btn--quiet:hover { --_bg: var(--fw-selected); --_fg: var(--fw-text); }
  .fw-btn--link { --_bg: transparent; --_bd: transparent; --_sh: none; --_fg: var(--fw-accent); padding-inline: var(--fw-s-1); }
  .fw-btn--link:hover { --_bg: transparent; --_fg: var(--fw-accent-hover); }

  .fw-btn--sm { min-block-size: 1.875rem; padding: 0 .625rem; font-size: var(--fw-fs-sm); border-radius: 7px; }
  .fw-btn--lg { min-block-size: 2.75rem; padding: 0 var(--fw-s-5); font-size: .9375rem; border-radius: 10px; }
  .fw-btn--block { inline-size: 100%; }
  .fw-btn--icon { padding: 0; inline-size: var(--fw-control-h); }
  .fw-btn--icon.fw-btn--sm { inline-size: 1.875rem; }

  .fw-btn:disabled, .fw-btn[aria-disabled="true"] {
    --_bg: var(--fw-fill); --_fg: var(--fw-text-3); --_bd: transparent; --_sh: none;
    cursor: not-allowed; scale: 1;
  }
  /* odesílání: htmx přidá .htmx-request, formulář aria-busy */
  .fw-btn[aria-busy="true"], .fw-btn.htmx-request { color: transparent; position: relative; pointer-events: none; }
  .fw-btn[aria-busy="true"] .fw-icon, .fw-btn.htmx-request .fw-icon { opacity: 0; }
  .fw-btn[aria-busy="true"]::after, .fw-btn.htmx-request::after {
    content: ""; position: absolute; inset: 0; margin: auto; inline-size: 1rem; block-size: 1rem;
    border: 2px solid var(--_fg); border-right-color: transparent; border-radius: 50%;
    animation: fw-spin .7s linear infinite;
  }
  @keyframes fw-spin { to { rotate: 1turn; } }

  .fw-btngroup { display: inline-flex; }
  .fw-btngroup > .fw-btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
  .fw-btngroup > .fw-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

  /* ---------- pole ---------- */
  .fw-field { display: flex; flex-direction: column; gap: .375rem; min-inline-size: 0; }
  .fw-label { font-size: var(--fw-fs-sm); font-weight: 500; color: var(--fw-text-2); }
  .fw-label__opt { font-weight: 400; color: var(--fw-text-3); }
  .fw-hint { font-size: var(--fw-fs-xs); color: var(--fw-text-3); }
  .fw-error { display: flex; gap: var(--fw-s-1); align-items: center; font-size: var(--fw-fs-xs); font-weight: 500; color: var(--fw-danger); }
  .fw-error .fw-icon { inline-size: .9rem; block-size: .9rem; }

  .fw-input, .fw-select select, .fw-textarea {
    inline-size: 100%; min-block-size: var(--fw-control-h);
    padding: 0 var(--fw-s-3);
    background: var(--fw-surface); color: var(--fw-text);
    border: 1px solid var(--fw-line-strong); border-radius: var(--fw-r-2);
    transition: border-color var(--fw-dur-1), box-shadow var(--fw-dur-1);
  }
  .fw-textarea { padding-block: var(--fw-s-2); min-block-size: 4.5rem; resize: vertical; field-sizing: content; }
  .fw-input::placeholder, .fw-textarea::placeholder { color: var(--fw-text-3); opacity: 1; }
  .fw-input:hover, .fw-select select:hover, .fw-textarea:hover { border-color: var(--fw-text-3); }
  .fw-input:focus-visible, .fw-select select:focus-visible, .fw-textarea:focus-visible {
    outline: none; border-color: var(--fw-accent); box-shadow: var(--fw-ring);
  }
  .fw-input[readonly] { background: var(--fw-fill); border-color: transparent; color: var(--fw-text-2); }
  .fw-input:disabled, .fw-select select:disabled { background: var(--fw-fill); color: var(--fw-text-3); border-color: transparent; cursor: not-allowed; }
  /* chyba: server přidá aria-invalid; :user-invalid jen po interakci */
  .fw-input[aria-invalid="true"], .fw-input:user-invalid, .fw-select select[aria-invalid="true"] {
    border-color: var(--fw-danger); box-shadow: 0 0 0 1px var(--fw-danger);
  }
  .fw-input[aria-invalid="true"]:focus-visible, .fw-input:user-invalid:focus-visible { box-shadow: 0 0 0 1px var(--fw-danger), 0 0 0 4px color-mix(in oklab, var(--fw-danger), transparent 75%); }
  .fw-input--num { text-align: right; font-variant-numeric: tabular-nums; }

  .fw-select { position: relative; display: block; }
  .fw-select select { appearance: none; padding-right: var(--fw-s-8); cursor: pointer; inline-size: auto; min-inline-size: 100%; }
  .fw-field .fw-select select { inline-size: 100%; }
  .fw-select .fw-icon { position: absolute; right: var(--fw-s-2); top: 50%; translate: 0 -50%; pointer-events: none; color: var(--fw-text-3); }
  .fw-topbar .fw-select select { min-block-size: 2rem; border-color: transparent; background: transparent; font-weight: 500; }
  .fw-topbar .fw-select select:hover { background: var(--fw-selected); }

  /* pole s příponou / tlačítkem (peníze, IČO + ARES, heslo) */
  .fw-affix {
    display: flex; align-items: stretch;
    background: var(--fw-surface);
    border: 1px solid var(--fw-line-strong); border-radius: var(--fw-r-2);
    transition: border-color var(--fw-dur-1), box-shadow var(--fw-dur-1);
  }
  .fw-affix:hover { border-color: var(--fw-text-3); }
  .fw-affix:focus-within { border-color: var(--fw-accent); box-shadow: var(--fw-ring); }
  .fw-affix:has([aria-invalid="true"]) { border-color: var(--fw-danger); box-shadow: 0 0 0 1px var(--fw-danger); }
  .fw-affix .fw-input { border: 0; box-shadow: none; background: transparent; min-inline-size: 0; }
  .fw-affix .fw-input:focus-visible { box-shadow: none; }
  .fw-affix__text { display: flex; align-items: center; padding: 0 var(--fw-s-3) 0 0; color: var(--fw-text-3); white-space: nowrap; }
  .fw-affix__btn {
    display: inline-flex; align-items: center; gap: var(--fw-s-1);
    margin: 3px; padding: 0 var(--fw-s-2); border: 0;
    background: transparent; color: var(--fw-accent); font-weight: 500; font-size: var(--fw-fs-sm);
    border-radius: 5px;
  }
  .fw-affix__btn:hover { background: var(--fw-accent-soft); }

  /* peněžní pole: zarovnání vpravo, tabulkové číslice, měna jako přípona */
  .fw-money .fw-input { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; padding-right: var(--fw-s-2); }

  /* rychlé volby (splatnost 7/14/30) – malé pilulky */
  .fw-quickpick { display: flex; flex-wrap: wrap; gap: var(--fw-s-1); align-items: center; font-size: var(--fw-fs-xs); color: var(--fw-text-3); }
  .fw-quickpick button {
    padding: 0 .625rem; min-block-size: 1.5rem; font-size: var(--fw-fs-xs); font-weight: 500;
    border: 0; border-radius: var(--fw-r-pill); background: var(--fw-fill); color: var(--fw-text-2);
    transition: background-color var(--fw-dur-2) var(--fw-ease-out), color var(--fw-dur-2) var(--fw-ease-out), scale var(--fw-dur-3) var(--fw-ease-spring);
  }
  .fw-quickpick button:hover { background: var(--fw-fill-strong); color: var(--fw-text); }
  .fw-quickpick button:active { scale: calc(1 - (1 - var(--fw-press-scale)) * 2.5); transition-duration: var(--fw-dur-press); }
  .fw-quickpick button[aria-pressed="true"] { background: var(--fw-accent-solid); color: var(--fw-on-accent); }

  /* zaškrtávátko */
  .fw-check { display: inline-flex; align-items: center; gap: var(--fw-s-2); cursor: pointer; }
  .fw-check input { inline-size: 1rem; block-size: 1rem; margin: 0; flex: none; cursor: pointer; }
  /* stisk zaškrtávátka (i v tabulce): hned se zmenší, po puštění pružinou zpět */
  :is(.fw-check input, .fw-rowcheck, [data-fw-check-all]) { transition: scale var(--fw-dur-3) var(--fw-ease-spring); }
  :is(.fw-check input, .fw-rowcheck, [data-fw-check-all]):active { scale: calc(1 - (1 - var(--fw-press-scale)) * 7); transition-duration: var(--fw-dur-press); }

  /* jednorázový kód 2FA – jedno pole přes celou šířku, číslice vycentrované a prostrkané
     (dřívějších „6 políček“ z letter-spacing se nevešlo – poslední číslice ujela za okraj) */
  .fw-otp {
    inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; block-size: 3.5rem;
    padding: 0 var(--fw-s-3); text-align: center;
    font: 600 1.625rem/1 var(--fw-font-ui); font-variant-numeric: tabular-nums;
    letter-spacing: .35em; text-indent: .35em;
    border: 1px solid var(--fw-line-strong); border-radius: var(--fw-r-3);
    background: var(--fw-surface);
    color: var(--fw-text);
    transition: border-color var(--fw-dur-1), box-shadow var(--fw-dur-1);
  }
  .fw-otp:focus-visible { outline: none; border-color: var(--fw-accent); box-shadow: var(--fw-ring); }

  /* ---------- našeptávač (combobox) ---------- */
  .fw-combobox { position: relative; }
  .fw-listbox {
    position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 6px);
    max-block-size: 22rem; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--fw-s-1);
    background: var(--fw-surface-raised); border-radius: var(--fw-r-3);
    box-shadow: var(--fw-shadow-pop);
    list-style: none;
    transform-origin: top center;
  }
  .fw-listbox { transition: opacity var(--fw-dur-2) var(--fw-ease-out), scale var(--fw-dur-2) var(--fw-ease-spring); }
  /* příjezd jen při zobrazení (hidden → vidět) po načtení stránky; při načtení už otevřený seznam se neanimuje */
  @starting-style { :root.fw-entered .fw-listbox { opacity: 0; scale: var(--fw-pop-scale); } }
  .fw-listbox ul { list-style: none; padding: 0; }
  .fw-listbox__group {
    padding: var(--fw-s-2) var(--fw-s-2) var(--fw-s-1);
    font-size: .6875rem; font-weight: 600; color: var(--fw-text-3);
    display: flex; gap: var(--fw-s-2); align-items: center;
  }
  .fw-option {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 var(--fw-s-3);
    padding: .4375rem var(--fw-s-2); border-radius: var(--fw-r-2); cursor: pointer;
  }
  .fw-option > .fw-icon { color: var(--fw-text-3); }
  .fw-option__title { font-weight: 500; }
  .fw-option__meta { grid-column: 2; font-size: var(--fw-fs-xs); color: var(--fw-text-3); font-variant-numeric: tabular-nums; }
  .fw-option__side { grid-row: 1 / span 2; grid-column: 3; font-size: var(--fw-fs-xs); color: var(--fw-text-3); }
  .fw-option:hover { background: var(--fw-selected); }
  .fw-option[aria-selected="true"] { background: var(--fw-accent-solid); color: var(--fw-on-accent); }
  .fw-option[aria-selected="true"] > .fw-icon,
  .fw-option[aria-selected="true"] .fw-option__meta,
  .fw-option[aria-selected="true"] .fw-option__side,
  .fw-option[aria-selected="true"] .fw-option__title { color: var(--fw-on-accent); }
  .fw-option[aria-selected="true"] mark { background: rgb(255 255 255 / .25); }
  .fw-option--create .fw-option__title { color: var(--fw-accent); }
  .fw-listbox__status { display: flex; gap: var(--fw-s-2); align-items: center; padding: var(--fw-s-2); font-size: var(--fw-fs-sm); color: var(--fw-text-2); }
  .fw-listbox__status--error { color: var(--fw-warn); }

  .fw-spinner {
    inline-size: .9rem; block-size: .9rem; flex: none;
    border: 2px solid var(--fw-fill-strong); border-top-color: var(--fw-accent); border-radius: 50%;
    animation: fw-spin .7s linear infinite;
  }

  /* ---------- karta ---------- */
  .fw-panel {
    background: var(--fw-surface);
    border-radius: var(--fw-r-3);
    box-shadow: var(--fw-shadow-card);
    min-inline-size: 0;
  }
  .fw-panel__head {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-2);
    padding: var(--fw-s-4) var(--fw-s-5) var(--fw-s-2);
  }
  .fw-panel__head h2 { font-size: var(--fw-fs-lg); letter-spacing: -.014em; }
  .fw-panel__head > :last-child:not(:first-child) { margin-left: auto; }
  .fw-panel__body { padding: var(--fw-s-3) var(--fw-s-5) var(--fw-s-5); }
  .fw-panel__head + .fw-panel__body { padding-top: var(--fw-s-2); }
  .fw-panel__body--flush { padding: 0; }
  .fw-panel__foot { padding: var(--fw-s-3) var(--fw-s-5); border-top: 1px solid var(--fw-line); }
  .fw-panel--quiet { background: transparent; box-shadow: none; border: 1.5px dashed var(--fw-line-control); }
  .fw-panel--accent { box-shadow: var(--fw-shadow-card), inset 0 3px 0 var(--fw-accent-solid); }
  label.fw-panel--quiet { cursor: pointer; transition: border-color var(--fw-dur-1), background-color var(--fw-dur-1); }
  label.fw-panel--quiet:hover { border-color: var(--fw-accent); background: var(--fw-accent-soft); }

  .fw-section-hint { font-size: var(--fw-fs-xs); color: var(--fw-text-3); font-weight: 400; }

  /* ---------- souhrnné ukazatele: jedna karta, sloupce oddělené vlasovou linkou ---------- */
  .fw-kpis {
    container: kpis / inline-size;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    background: var(--fw-surface); border-radius: var(--fw-r-3);
    box-shadow: var(--fw-shadow-card);
    overflow: hidden;
  }
  .fw-kpi {
    display: flex; flex-direction: column; gap: .375rem;
    padding: var(--fw-s-5) var(--fw-s-6);
    color: inherit; text-decoration: none; position: relative;
    transition: background-color var(--fw-dur-1);
  }
  /* svislé dělítko jen uvnitř, nepřesahuje do okrajů */
  .fw-kpi + .fw-kpi::before { content: ""; position: absolute; left: 0; top: var(--fw-s-5); bottom: var(--fw-s-5); inline-size: 1px; background: var(--fw-line); }
  @container main (width < 54rem) {
    .fw-kpis:not(.fw-kpis--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fw-kpis:not(.fw-kpis--compact) .fw-kpi:nth-child(odd)::before { display: none; }
    .fw-kpis:not(.fw-kpis--compact) .fw-kpi:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--fw-line); }
  }
  a.fw-kpi:hover { background: var(--fw-surface-hover); text-decoration: none; color: inherit; }
  .fw-kpi__label { font-size: var(--fw-fs-sm); font-weight: 500; color: var(--fw-text-2); display: flex; align-items: center; gap: .375rem; }
  .fw-kpi__value {
    font: 600 clamp(1.5rem, 4.4cqi, var(--fw-fs-3xl))/1.1 var(--fw-font-display);
    font-variant-numeric: tabular-nums; letter-spacing: -.028em; white-space: nowrap;
  }
  .fw-kpi__value small { font-size: .5em; font-weight: 500; letter-spacing: 0; margin-left: .25em; color: var(--fw-text-3); }
  .fw-kpi__sub { font-size: var(--fw-fs-xs); color: var(--fw-text-3); font-variant-numeric: tabular-nums; }
  .fw-kpi--danger .fw-kpi__label { color: var(--fw-danger); }
  .fw-kpis--compact .fw-kpi { padding: var(--fw-s-4) var(--fw-s-5); }
  .fw-kpis--compact .fw-kpi + .fw-kpi::before { top: var(--fw-s-4); bottom: var(--fw-s-4); }
  .fw-kpis--compact .fw-kpi__value { font-size: var(--fw-fs-xl); letter-spacing: -.02em; }
  @container main (width < 40rem) {
    .fw-kpis:not(.fw-kpis--compact) .fw-kpi__value { font-size: 1.5rem; }
    .fw-kpi { padding: var(--fw-s-4); }
  }

  /* ---------- stav dokladu: tónovaný štítek s tečkou ---------- */
  .fw-status {
    --_c: var(--fw-text-2); --_bg: var(--fw-fill); --_dot: currentColor;
    display: inline-flex; align-items: center; gap: .4em;
    padding: 0 .6em 0 .5em; min-block-size: 1.375rem;
    font-size: var(--fw-fs-xs); font-weight: 500; line-height: 1; white-space: nowrap; letter-spacing: 0;
    color: var(--_c); background: var(--_bg);
    border-radius: var(--fw-r-pill);
    font-variant-numeric: tabular-nums;
  }
  .fw-status::before { content: ""; inline-size: .4375rem; block-size: .4375rem; border-radius: 50%; background: var(--_dot); flex: none; }
  .fw-status { transition: background-color var(--fw-dur-3) var(--fw-ease-out), color var(--fw-dur-3) var(--fw-ease-out); }
  /* změna stavu (server pošle .is-changed, nebo ji přidá fw.js při změně třídy): krátký puls a kroužek */
  .fw-status.is-changed { position: relative; animation: fw-pulse var(--fw-dur-4) var(--fw-ease-out); }
  .fw-status.is-changed::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 2px currentColor; opacity: 0;
    animation: fw-ring var(--fw-dur-count) var(--fw-ease-out);
  }
  .fw-status--koncept       { --_c: var(--fw-text-2); }
  .fw-status--koncept::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-text-3); }
  .fw-status--vystaveno     { --_c: var(--fw-text-2); --_dot: var(--fw-accent); }
  .fw-status--odeslano      { --_c: var(--fw-accent); --_bg: var(--fw-accent-soft); }
  .fw-status--castecne      { --_c: var(--fw-ok); --_bg: var(--fw-ok-soft); }
  .fw-status--castecne::before { background: conic-gradient(currentColor 0 50%, transparent 0); box-shadow: inset 0 0 0 1.25px currentColor; }
  .fw-status--zaplaceno     { --_c: var(--fw-ok); --_bg: var(--fw-ok-soft); }
  .fw-status--po-splatnosti { --_c: var(--fw-danger); --_bg: var(--fw-danger-soft); font-weight: 600; }
  .fw-status--stornovano    { --_c: var(--fw-text-3); --_bg: transparent; text-decoration: line-through; padding-inline: .2em; }
  .fw-status--stornovano::before { display: none; }

  /* drobný neutrální štítek (role, sklad, sazba) */
  .fw-tag {
    display: inline-flex; align-items: center; gap: .3em;
    padding: 0 .5em; min-block-size: 1.25rem; border-radius: var(--fw-r-1);
    font-size: var(--fw-fs-xs); font-weight: 500; white-space: nowrap;
    color: var(--fw-text-2); background: var(--fw-fill);
  }
  .fw-tag--ok { color: var(--fw-ok); background: var(--fw-ok-soft); }
  .fw-tag--warn { color: var(--fw-warn); background: var(--fw-warn-soft); }

  /* aktivní filtr */
  .fw-chip {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 0 3px 0 .625rem; min-block-size: 1.75rem;
    font-size: var(--fw-fs-sm); font-weight: 500;
    background: var(--fw-accent-soft); color: var(--fw-accent); border-radius: var(--fw-r-pill);
  }
  .fw-chip button {
    display: grid; place-items: center; inline-size: 1.375rem; block-size: 1.375rem; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: inherit;
  }
  .fw-chip button:hover { background: color-mix(in oklab, var(--fw-accent), transparent 85%); }

  /* ---------- segmentový přepínač (pilulky) ---------- */
  .fw-segmented {
    display: inline-flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-inline-size: 100%;
    padding: 2px; gap: 2px;
    background: var(--fw-fill); border-radius: var(--fw-r-pill);
    position: relative; isolation: isolate;
  }
  /* posuvná pilulka – vloží ji fw.js (.fw-seg-ind) a nastaví --_x / --_w; bez JS nese podklad sám aktivní odkaz */
  .fw-seg-ind {
    position: absolute; z-index: -1; left: 0; top: 2px; block-size: calc(100% - 4px);
    inline-size: var(--_w, 0); translate: var(--_x, 0) 0;
    background: var(--fw-surface-raised); border-radius: var(--fw-r-pill);
    box-shadow: 0 0 0 .5px light-dark(rgb(0 0 0 / .04), rgb(255 255 255 / .06)), 0 2px 6px light-dark(rgb(0 0 0 / .08), rgb(0 0 0 / .4));
    pointer-events: none;
  }
  .fw-seg-ind.is-live { transition: translate var(--fw-dur-3) var(--fw-ease-spring), inline-size var(--fw-dur-3) var(--fw-ease-out); }
  .fw-segmented.has-ind a[aria-current] { background: transparent; box-shadow: none; }
  .fw-segmented a {
    display: inline-flex; align-items: center; gap: .375rem;
    min-block-size: 1.875rem; padding: 0 .875rem;
    color: var(--fw-text-2); text-decoration: none; font-weight: 500; font-size: var(--fw-fs-sm); white-space: nowrap;
    border-radius: var(--fw-r-pill);
    transition: background-color var(--fw-dur-1), color var(--fw-dur-1);
  }
  .fw-segmented a:hover { color: var(--fw-text); text-decoration: none; }
  .fw-segmented a[aria-current="true"], .fw-segmented a[aria-current="page"] {
    background: var(--fw-surface-raised); color: var(--fw-text); font-weight: 600;
    box-shadow: 0 0 0 .5px light-dark(rgb(0 0 0 / .04), rgb(255 255 255 / .06)), 0 2px 6px light-dark(rgb(0 0 0 / .08), rgb(0 0 0 / .4));
  }
  .fw-stack > .fw-segmented { align-self: flex-start; }
  .fw-stack > .fw-tabs { margin-bottom: 0; }
  .fw-segmented__n { font-size: var(--fw-fs-xs); font-weight: 500; color: var(--fw-text-3); font-variant-numeric: tabular-nums; }
  .fw-segmented__n--alert { color: var(--fw-danger) !important; font-weight: 600; }

  /* ---------- tabulka ---------- */
  .fw-table-wrap { container: table / inline-size; }
  .fw-table-wrap--list {
    container-name: table tablelist;
    background: var(--fw-surface); border-radius: var(--fw-r-3); box-shadow: var(--fw-shadow-card);
    overflow: clip; /* clip netvoří posuvný kontejner, přilepená hlavička dál funguje */
  }
  .fw-table {
    inline-size: 100%;
    font-size: var(--fw-fs-md);
    font-variant-numeric: tabular-nums;
    background: var(--fw-surface);
  }
  .fw-table th, .fw-table td { padding: 0 var(--fw-s-3); block-size: var(--fw-row-h); text-align: left; vertical-align: middle; white-space: nowrap; }
  .fw-table th:first-child, .fw-table td:first-child { padding-left: var(--fw-s-5); }
  .fw-table th:last-child, .fw-table td:last-child { padding-right: var(--fw-s-5); }
  .fw-table td[data-card="title"] { white-space: normal; min-inline-size: 10rem; }
  .fw-table thead th {
    position: sticky; top: var(--fw-sticky-top, var(--fw-topbar-h)); z-index: 2;
    block-size: 2.25rem;
    font-size: var(--fw-fs-xs); font-weight: 500; color: var(--fw-text-3);
    background: var(--fw-surface);
    box-shadow: inset 0 -1px 0 var(--fw-line);
    white-space: nowrap;
  }
  .fw-table thead th a, .fw-table thead th button {
    display: inline-flex; align-items: center; gap: 2px; color: inherit; text-decoration: none;
    background: none; border: 0; padding: 0; font: inherit;
  }
  .fw-table thead th[aria-sort] { color: var(--fw-text); }
  .fw-table tbody tr { box-shadow: inset 0 -1px 0 var(--fw-line); transition: background-color var(--fw-dur-1) var(--fw-ease-out); }
  .fw-table tbody tr:last-child { box-shadow: none; }
  .fw-table tbody tr:hover { background: var(--fw-surface-hover); }
  .fw-table tbody tr:has(.fw-rowcheck:checked) { background: var(--fw-accent-soft); }
  .fw-table tbody tr:focus-visible, .fw-table tbody tr.is-focused { outline: 2px solid var(--fw-focus); outline-offset: -2px; border-radius: 0; }
  .fw-table tbody tr.is-muted { color: var(--fw-text-3); }
  .fw-table tfoot td { block-size: 2.75rem; font-weight: 600; box-shadow: inset 0 1px 0 var(--fw-line); }
  .fw-table .fw-num { text-align: right; white-space: nowrap; }
  .fw-table .fw-col-check { inline-size: 2.75rem; padding-right: 0; }
  .fw-table .fw-col-actions { inline-size: 3rem; text-align: right; padding-left: 0; }
  .fw-table .fw-docno { font-weight: 500; color: var(--fw-text); text-decoration: none; }
  .fw-table .fw-docno:hover { text-decoration: none; color: var(--fw-accent); }
  .fw-table .fw-docno::after { content: ""; position: absolute; inset: 0; } /* celý řádek je klikací */
  .fw-table tbody tr { position: relative; }
  .fw-table .fw-rowcheck, .fw-table .fw-rowmenu { position: relative; z-index: 1; }
  .fw-only-narrow { display: none; }
  .fw-cell-sub { display: block; font-size: var(--fw-fs-xs); color: var(--fw-text-3); }
  .fw-table--compact { --fw-row-h: 2.375rem; }
  @media (width < 45rem) {
    .fw-table th, .fw-table td { padding-inline: var(--fw-s-2); }
    .fw-table th:first-child, .fw-table td:first-child { padding-left: var(--fw-s-4); }
    .fw-table th:last-child, .fw-table td:last-child { padding-right: var(--fw-s-4); }
  }
  .fw-table--plain thead th { position: static; }
  .fw-panel > .fw-table:last-child, .fw-panel > .fw-table-wrap:last-child .fw-table { border-radius: 0 0 var(--fw-r-3) var(--fw-r-3); }
  .fw-panel > .fw-table:last-child tbody tr:last-child td:first-child, .fw-panel > .fw-table-wrap:last-child tbody tr:last-child td:first-child { border-bottom-left-radius: var(--fw-r-3); }
  .fw-panel > .fw-table:last-child tbody tr:last-child td:last-child, .fw-panel > .fw-table-wrap:last-child tbody tr:last-child td:last-child { border-bottom-right-radius: var(--fw-r-3); }

  /* méně důležité sloupce (fw-col-opt) zmizí dřív, než se tabulka změní na karty */
  @container table (width < 58rem) {
    .fw-table .fw-col-opt { display: none; }
  }
  /* tabulka jako karty: obecně pod 38rem, hlavní seznamy (fw-table-wrap--list) už pod 46rem */
  @container table (width < 38rem) {
    .fw-table, .fw-table tbody { display: block; background: transparent; }
    .fw-table thead, .fw-table td:not([data-card]) { display: none; }
    .fw-table .fw-only-narrow { display: inline; }
    .fw-table tbody tr {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--fw-s-3);
      padding: var(--fw-s-3) var(--fw-s-4);
    }
    .fw-table tbody tr:has(.fw-rowcheck:checked) { background: transparent; }
    .fw-table td, .fw-table td:first-child, .fw-table td:last-child { display: block; block-size: auto; padding: 0; }
    .fw-table td[data-card="title"] { grid-column: 1; font-weight: 500; font-size: var(--fw-fs-md); }
    .fw-table td[data-card="amount"] { grid-column: 2; grid-row: 1; font-weight: 600; font-size: var(--fw-fs-md); }
    .fw-table td[data-card="meta"] { grid-column: 1; color: var(--fw-text-3); font-size: var(--fw-fs-xs); }
    .fw-table td[data-card="meta"] .fw-docno { font-weight: 400; color: inherit; }
    .fw-table td[data-card="status"] { grid-column: 2; grid-row: 2; justify-self: end; }
    .fw-table tfoot { display: none; }
  }

  @container tablelist (width < 46rem) {
    .fw-table, .fw-table tbody { display: block; background: transparent; }
    .fw-table thead, .fw-table td:not([data-card]) { display: none; }
    .fw-table .fw-only-narrow { display: inline; }
    .fw-table tbody tr {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--fw-s-3);
      padding: var(--fw-s-3) var(--fw-s-4);
    }
    .fw-table tbody tr:has(.fw-rowcheck:checked) { background: transparent; }
    .fw-table td, .fw-table td:first-child, .fw-table td:last-child { display: block; block-size: auto; padding: 0; }
    .fw-table td[data-card="title"] { grid-column: 1; font-weight: 500; font-size: var(--fw-fs-md); }
    .fw-table td[data-card="amount"] { grid-column: 2; grid-row: 1; font-weight: 600; font-size: var(--fw-fs-md); }
    .fw-table td[data-card="meta"] { grid-column: 1; color: var(--fw-text-3); font-size: var(--fw-fs-xs); }
    .fw-table td[data-card="meta"] .fw-docno { font-weight: 400; color: inherit; }
    .fw-table td[data-card="status"] { grid-column: 2; grid-row: 2; justify-self: end; }
    .fw-table tfoot { display: none; }
  }

  /* menu řádku a „Další" – popover ukotvený k tlačítku, průsvitné jako v macOS */
  .fw-menu {
    margin: 0; padding: 5px; min-inline-size: 13.5rem;
    background: var(--fw-glass); color: var(--fw-text);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: 0; border-radius: var(--fw-r-3); box-shadow: var(--fw-shadow-pop);
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block, flip-inline;
    inset: auto; margin-block: 6px;
  }
  /* otevření: prolnutí + zvětšení od kotvy (pravý horní roh tlačítka); zavření kratší.
     Odjezd funguje tam, kde jde přechod display/overlay (Chromium); jinde se menu zavře okamžitě. */
  .fw-menu[popover] {
    transform-origin: top right;
    opacity: 0; scale: var(--fw-pop-scale);
    transition: opacity var(--fw-dur-1) var(--fw-ease-in), scale var(--fw-dur-1) var(--fw-ease-in),
      display var(--fw-dur-1) allow-discrete, overlay var(--fw-dur-1) allow-discrete;
  }
  .fw-menu[popover]:popover-open {
    opacity: 1; scale: 1;
    transition: opacity var(--fw-dur-2) var(--fw-ease-out), scale var(--fw-dur-2) var(--fw-ease-spring),
      display var(--fw-dur-2) allow-discrete, overlay var(--fw-dur-2) allow-discrete;
  }
  @starting-style { .fw-menu[popover]:popover-open { opacity: 0; scale: var(--fw-pop-scale); } }
  .fw-menu a, .fw-menu button {
    display: flex; align-items: center; gap: .625rem; inline-size: 100%;
    padding: .375rem var(--fw-s-2); border: 0; border-radius: var(--fw-r-1);
    background: transparent; color: var(--fw-text); text-decoration: none; text-align: left; font-size: var(--fw-fs-md);
  }
  .fw-menu a:hover, .fw-menu button:hover, .fw-menu a:focus-visible, .fw-menu button:focus-visible { background: var(--fw-selected); outline: none; text-decoration: none; color: var(--fw-text); }
  .fw-menu kbd { margin-left: auto; background: transparent; }
  .fw-menu .fw-icon { color: var(--fw-text-3); }
  .fw-menu hr { margin: 5px var(--fw-s-2); }
  .fw-menu [aria-disabled="true"] { color: var(--fw-text-3); cursor: not-allowed; }
  .fw-menu__danger { color: var(--fw-danger) !important; }
  .fw-menu__danger .fw-icon { color: currentColor !important; }
  .fw-menu__note { display: block; font-size: var(--fw-fs-xs); color: var(--fw-text-3); padding: 0 var(--fw-s-2) var(--fw-s-2) calc(var(--fw-s-2) + 1.125rem + .625rem); }

  /* hromadné akce – plovoucí lišta, objeví se, jakmile je něco vybráno (bez JS přes :has) */
  .fw-bulkbar {
    display: none; align-items: center; flex-wrap: wrap; gap: var(--fw-s-2);
    position: sticky; top: calc(var(--fw-topbar-h) + var(--fw-s-2)); z-index: 5;
    padding: .375rem .375rem .375rem var(--fw-s-4); margin-bottom: var(--fw-s-3);
    background: light-dark(#1D1D1F, #3A3A3F); color: #F5F5F7; border-radius: var(--fw-r-3);
    box-shadow: var(--fw-shadow-pop);
    opacity: 0; translate: 0 var(--fw-rise);
    transition: opacity var(--fw-dur-1) var(--fw-ease-in), translate var(--fw-dur-1) var(--fw-ease-in), display var(--fw-dur-1) allow-discrete;
  }
  /* objeví se vyjetím zdola (pružina), zmizí krátkým prolnutím */
  .fw-list:has(.fw-rowcheck:checked) .fw-bulkbar {
    display: flex; opacity: 1; translate: 0 0;
    transition: opacity var(--fw-dur-2) var(--fw-ease-out), translate var(--fw-dur-3) var(--fw-ease-spring), display var(--fw-dur-2) allow-discrete;
  }
  /* příjezd až po načtení stránky (.fw-entered): předvybrané řádky při načtení lištu ukážou rovnou, bez animace */
  @starting-style { :root.fw-entered .fw-list:has(.fw-rowcheck:checked) .fw-bulkbar { opacity: 0; translate: 0 calc(var(--fw-rise) * 2); } }
  .fw-list { container: list / inline-size; }
  @container list (width < 46rem) {
    .fw-bulkbar { display: none !important; } /* v kartovém režimu (mobil, tablet) hromadné akce záměrně nejsou */
  }
  .fw-bulkbar__count { font-weight: 600; margin-right: var(--fw-s-2); font-variant-numeric: tabular-nums; }
  .fw-bulkbar .fw-btn { --_bg: transparent; --_fg: #F5F5F7; --_bd: transparent; --_sh: none; }
  .fw-bulkbar .fw-btn:hover { --_bg: rgb(255 255 255 / .12); }
  .fw-bulkbar .fw-btn:focus-visible { outline-color: #F5F5F7; }
  .fw-bulkbar__end { margin-left: auto; }

  /* filtrovací lišta */
  .fw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-2); margin-bottom: var(--fw-s-4); }
  .fw-toolbar__grow { flex: 1; }
  .fw-search { position: relative; inline-size: min(100%, 18rem); }
  .fw-search .fw-input { padding-left: 2.1rem; padding-right: 2.2rem; background: var(--fw-fill); border-color: transparent; }
  .fw-search .fw-input:hover { border-color: transparent; background: var(--fw-fill-strong); }
  .fw-search .fw-input:focus-visible { background: var(--fw-surface); border-color: var(--fw-accent); }
  .fw-search > .fw-icon { position: absolute; left: .7rem; top: 50%; translate: 0 -50%; color: var(--fw-text-3); pointer-events: none; inline-size: 1rem; block-size: 1rem; }
  .fw-search > kbd { position: absolute; right: .5rem; top: 50%; translate: 0 -50%; background: var(--fw-surface); }
  .fw-search:focus-within > kbd { display: none; }
  .fw-filterline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-2); margin-bottom: var(--fw-s-3); font-size: var(--fw-fs-sm); }
  .fw-filterline__sum { margin-left: auto; color: var(--fw-text-2); font-variant-numeric: tabular-nums; }

  /* stránkování */
  .fw-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-3); padding: var(--fw-s-4) 0; font-size: var(--fw-fs-sm); color: var(--fw-text-3); }
  .fw-pager__pages { display: flex; gap: 2px; margin-left: auto; align-items: center; }
  .fw-pager__pages a, .fw-pager__pages span[aria-current] {
    display: grid; place-items: center; min-inline-size: 2rem; block-size: 2rem; padding: 0 var(--fw-s-2);
    border-radius: var(--fw-r-pill); color: var(--fw-text-2); text-decoration: none; font-weight: 500; font-variant-numeric: tabular-nums;
  }
  .fw-pager__pages a:hover { background: var(--fw-selected); text-decoration: none; }
  .fw-pager__pages span[aria-current] { background: var(--fw-fill-strong); color: var(--fw-text); font-weight: 600; }
  .fw-pager__pages a[aria-disabled="true"] { color: var(--fw-text-3); opacity: .5; pointer-events: none; }

  /* ---------- záložky ---------- */
  .fw-tabs { display: flex; gap: var(--fw-s-5); box-shadow: inset 0 -1px 0 var(--fw-line); margin-bottom: var(--fw-s-5); overflow-x: auto; scrollbar-width: none; }
  .fw-tabs a, .fw-tabs [role="tab"] {
    display: inline-flex; align-items: center; gap: var(--fw-s-2);
    padding: var(--fw-s-2) 0 .625rem;
    border: 0; border-bottom: 2px solid transparent; background: none;
    color: var(--fw-text-3); font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: color var(--fw-dur-1) var(--fw-ease-out), border-color var(--fw-dur-1) var(--fw-ease-out);
  }
  .fw-tabs a:hover, .fw-tabs [role="tab"]:hover { color: var(--fw-text); text-decoration: none; }
  .fw-tabs [aria-current="page"], .fw-tabs [aria-selected="true"] { color: var(--fw-text); font-weight: 600; border-bottom-color: var(--fw-accent-solid); }
  /* posuvná linka – vloží fw.js (.fw-tab-ind); bez JS nese linku aktivní záložka */
  .fw-tabs { position: relative; }
  .fw-tab-ind {
    position: absolute; left: 0; bottom: 0; block-size: 2px; border-radius: 2px;
    inline-size: var(--_w, 0); translate: var(--_x, 0) 0;
    background: var(--fw-accent-solid); pointer-events: none;
  }
  .fw-tab-ind.is-live { transition: translate var(--fw-dur-3) var(--fw-ease-spring), inline-size var(--fw-dur-3) var(--fw-ease-out); }
  .fw-tabs.has-ind :is([aria-current="page"], [aria-selected="true"]) { border-bottom-color: transparent; }

  /* ---------- upozornění, souhrn chyb, hlídač ---------- */
  .fw-alert {
    --_c: var(--fw-accent); --_bg: var(--fw-accent-soft);
    display: grid; grid-template-columns: auto 1fr; gap: 2px var(--fw-s-3);
    padding: var(--fw-s-3) var(--fw-s-4);
    background: var(--_bg); border-radius: var(--fw-r-3);
  }
  .fw-alert > .fw-icon { color: var(--_c); margin-top: 1px; }
  .fw-alert__title { font-weight: 600; }
  .fw-alert__body { grid-column: 2; font-size: var(--fw-fs-sm); color: var(--fw-text-2); }
  .fw-alert__body ul { padding-left: 1.1rem; }
  .fw-alert--danger { --_c: var(--fw-danger); --_bg: var(--fw-danger-soft); }
  .fw-alert--warn { --_c: var(--fw-warn); --_bg: var(--fw-warn-soft); }
  .fw-alert--ok { --_c: var(--fw-ok); --_bg: var(--fw-ok-soft); }
  .fw-alert:focus { outline: 2px solid var(--_c); outline-offset: 2px; }

  /* stavový pruh ve slotu (read-only, impersonace, předplatné, uzavřený rok) */
  .fw-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-s-2) var(--fw-s-4);
    padding: .625rem var(--fw-s-6);
    font-size: var(--fw-fs-sm);
    background: var(--fw-surface);
    box-shadow: inset 0 -1px 0 var(--fw-line);
  }
  .fw-stack > .fw-banner { border-radius: var(--fw-r-3); box-shadow: none; }
  .fw-banner > .fw-icon { flex: none; }
  .fw-banner__text { flex: 1 1 20rem; }
  .fw-banner__text strong { margin-right: var(--fw-s-1); font-weight: 600; }
  .fw-banner__actions { display: flex; gap: var(--fw-s-2); }
  .fw-banner--readonly { background: light-dark(#1D1D1F, #3A3A3F); color: #F5F5F7; box-shadow: none; }
  .fw-banner--readonly .fw-btn:not(.fw-btn--primary) { --_bg: rgb(255 255 255 / .12); --_fg: #F5F5F7; --_bd: transparent; --_sh: none; }
  .fw-banner--readonly .fw-btn:not(.fw-btn--primary):hover { --_bg: rgb(255 255 255 / .2); }
  .fw-banner--readonly .fw-btn--primary { --_bg: #0A6FDB; }
  .fw-banner--readonly :focus-visible { outline-color: #F5F5F7; }
  .fw-banner--impersonation { background: var(--fw-warn-soft); color: var(--fw-text); box-shadow: inset 0 -2px 0 var(--fw-warn); }
  .fw-stack > .fw-banner--impersonation { box-shadow: inset 0 0 0 2px var(--fw-warn); }
  .fw-banner--impersonation > .fw-icon { color: var(--fw-warn); }
  .fw-banner--impersonation .fw-btn { --_bg: var(--fw-text); --_fg: var(--fw-bg); --_bd: transparent; }
  .fw-banner--overdue { background: var(--fw-warn-soft); color: var(--fw-text); }
  .fw-banner--overdue > .fw-icon { color: var(--fw-warn); }
  .fw-banner--info { background: var(--fw-accent-soft); }
  .fw-banner--info > .fw-icon { color: var(--fw-accent); }
  .fw-banner--closed { background: var(--fw-fill); color: var(--fw-text-2); }

  /* ---------- prázdné stavy ---------- */
  .fw-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--fw-s-2);
    padding: var(--fw-s-10) var(--fw-s-6);
    color: var(--fw-text-2);
  }
  .fw-empty h2, .fw-empty h3 { color: var(--fw-text); }
  .fw-empty p { max-inline-size: 34ch; font-size: var(--fw-fs-md); }
  .fw-empty__art {
    display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; margin-bottom: var(--fw-s-2);
    border-radius: 50%; color: var(--fw-accent);
    background: var(--fw-accent-soft);
  }
  .fw-empty__art .fw-icon { inline-size: 1.5rem; block-size: 1.5rem; stroke-width: 1.6; }
  .fw-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fw-s-2); margin-top: var(--fw-s-3); }
  .fw-empty--positive .fw-empty__art { color: var(--fw-ok); background: var(--fw-ok-soft); }

  /* ---------- kostra načítání ---------- */
  /* odlesk běží na kompozitoru (translate pseudo-prvku), ne přes background-position */
  .fw-skeleton {
    display: block; block-size: .75em; border-radius: var(--fw-r-pill);
    background: var(--fw-fill);
    position: relative; overflow: hidden; isolation: isolate;
  }
  .fw-skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, light-dark(rgb(255 255 255 / .75), rgb(255 255 255 / .07)), transparent);
    translate: -100% 0;
    animation: fw-shimmer 1.4s var(--fw-ease-in-out) infinite;
  }
  .fw-skeleton--w40 { inline-size: 40%; } .fw-skeleton--w60 { inline-size: 60%; } .fw-skeleton--w80 { inline-size: 80%; }
  .fw-skeleton--num { inline-size: 5rem; margin-left: auto; }
  @keyframes fw-shimmer { 70%, to { translate: 100% 0; } }
  @media (prefers-reduced-motion: reduce) { .fw-skeleton::after { animation: none; display: none; } }

  /* ---------- dialog ---------- */
  .fw-dialog {
    inline-size: min(30rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - 2rem);
    padding: 0; margin: auto;
    color: var(--fw-text); background: var(--fw-surface-raised);
    border: 0; border-radius: var(--fw-r-4);
    box-shadow: var(--fw-shadow-pop);
  }
  .fw-dialog:modal { overscroll-behavior: contain; }
  /* otevření a zavření přes @starting-style + transition-behavior: allow-discrete (display, overlay).
     Bez podpory: otevře se okamžitě v konečném stavu – [open] má vždy opacity 1. */
  .fw-dialog {
    opacity: 0; scale: var(--fw-pop-scale); translate: 0 0;
    transition: opacity var(--fw-dur-1) var(--fw-ease-in), scale var(--fw-dur-1) var(--fw-ease-in), translate var(--fw-dur-2) var(--fw-ease-in),
      display var(--fw-dur-2) allow-discrete, overlay var(--fw-dur-2) allow-discrete;
  }
  .fw-dialog[open] {
    opacity: 1; scale: 1;
    transition: opacity var(--fw-dur-2) var(--fw-ease-out), scale var(--fw-dur-3) var(--fw-ease-spring), translate var(--fw-dur-4) var(--fw-ease-out),
      display var(--fw-dur-3) allow-discrete, overlay var(--fw-dur-3) allow-discrete;
  }
  @starting-style { .fw-dialog[open] { opacity: 0; scale: var(--fw-pop-scale); } }
  .fw-dialog::backdrop {
    background: rgb(0 0 0 / 0); overflow: hidden; overscroll-behavior: contain;
    transition: background-color var(--fw-dur-2) var(--fw-ease-out), display var(--fw-dur-2) allow-discrete, overlay var(--fw-dur-2) allow-discrete;
  }
  .fw-dialog[open]::backdrop { background: rgb(0 0 0 / .3); } /* pevná hodnota: ::backdrop nedědí color-scheme ve všech prohlížečích */
  @starting-style { .fw-dialog[open]::backdrop { background: rgb(0 0 0 / 0); } }
  .fw-dialog--wide { inline-size: min(44rem, calc(100vw - 2rem)); }
  .fw-dialog__head { display: flex; align-items: flex-start; gap: var(--fw-s-3); padding: var(--fw-s-6) var(--fw-s-6) var(--fw-s-2); }
  .fw-dialog__head h2 { flex: 1; font-size: var(--fw-fs-xl); }
  .fw-dialog__body { padding: var(--fw-s-2) var(--fw-s-6) var(--fw-s-5); display: flex; flex-direction: column; gap: var(--fw-s-4); color: var(--fw-text-2); }
  .fw-dialog__body .fw-label, .fw-dialog__body .fw-input { color: inherit; }
  .fw-dialog__body .fw-input { color: var(--fw-text); }
  .fw-dialog__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--fw-s-2);
    padding: var(--fw-s-2) var(--fw-s-6) var(--fw-s-6);
  }
  .fw-dialog__foot-note { margin-right: auto; font-size: var(--fw-fs-sm); color: var(--fw-text-3); }
  @media (width < 45rem) {
    /* mobil: list vyjede zespodu (bez zvětšení), zavře se sjetím dolů */
    .fw-dialog:not(.fw-palette) {
      inline-size: 100vw; max-inline-size: 100vw; margin: auto 0 0; border-radius: var(--fw-r-4) var(--fw-r-4) 0 0;
      padding-bottom: env(safe-area-inset-bottom);
      scale: 1; translate: 0 var(--fw-sheet-shift);
    }
    .fw-dialog:not(.fw-palette)[open] { scale: 1; translate: 0 0; }
    @starting-style { .fw-dialog:not(.fw-palette)[open] { scale: 1; translate: 0 var(--fw-sheet-shift); opacity: 0; } }
    .fw-dialog__foot .fw-btn { flex: 1; }
  }

  /* ---------- paleta Ctrl+K (jako Spotlight) ---------- */
  .fw-palette {
    inline-size: min(40rem, calc(100vw - 1.5rem)); margin-top: 14vh;
    background: var(--fw-glass);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    transform-origin: top center;
  }
  .fw-palette[open]::backdrop { background: rgb(0 0 0 / .18); }
  .fw-palette__search { display: flex; align-items: center; gap: var(--fw-s-3); padding: 0 var(--fw-s-5); box-shadow: inset 0 -1px 0 var(--fw-line); }
  .fw-palette__search .fw-icon { color: var(--fw-text-3); inline-size: 1.25rem; block-size: 1.25rem; }
  .fw-palette__search input { flex: 1; block-size: 3.5rem; border: 0; background: transparent; font-size: 1.125rem; letter-spacing: -.012em; outline: none; min-inline-size: 0; }
  .fw-palette__search input::placeholder { color: var(--fw-text-3); }
  .fw-palette .fw-listbox { position: static; box-shadow: none; border: 0; border-radius: 0; background: transparent; max-block-size: min(26rem, 55dvh); padding: var(--fw-s-2); transition: none; }
  .fw-palette__foot { display: flex; flex-wrap: wrap; gap: var(--fw-s-4); padding: var(--fw-s-2) var(--fw-s-5); font-size: var(--fw-fs-xs); color: var(--fw-text-3); box-shadow: inset 0 1px 0 var(--fw-line); }

  /* ---------- toast ---------- */
  .fw-toasts {
    position: fixed; z-index: 60; right: var(--fw-s-5); bottom: var(--fw-s-5);
    display: flex; flex-direction: column; gap: var(--fw-s-2); inline-size: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
  }
  .fw-toast {
    pointer-events: auto;
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--fw-s-1) var(--fw-s-3); align-items: start;
    padding: var(--fw-s-3) var(--fw-s-2) var(--fw-s-3) var(--fw-s-4);
    background: var(--fw-glass); color: var(--fw-text);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-radius: var(--fw-r-3); box-shadow: var(--fw-shadow-pop);
    /* příjezd: prolnutí + vyjetí zdola s pružinou; odjezd a posun ostatních (stack) řídí fw.js (WAAPI) */
    animation: fw-fade-in var(--fw-dur-2) var(--fw-ease-out), fw-toast-rise var(--fw-dur-3) var(--fw-ease-spring);
    font-size: var(--fw-fs-md);
  }
  @keyframes fw-toast-rise { from { translate: 0 calc(var(--fw-rise) * 2.5); scale: calc(1 - (1 - var(--fw-pop-scale)) / 2); } }
  .fw-toast > .fw-icon { margin-top: 1px; color: var(--fw-danger); }
  .fw-toast--ok > .fw-icon { color: var(--fw-ok); }
  .fw-toast a, .fw-toast .fw-toast__action { color: var(--fw-accent); font-weight: 600; background: none; border: 0; padding: 0; }
  .fw-toast__close { background: none; border: 0; color: var(--fw-text-3); padding: 3px; border-radius: var(--fw-r-1); }
  .fw-toast__close:hover { color: var(--fw-text); background: var(--fw-selected); }
  .fw-toast--static { position: static; animation: none; background: var(--fw-surface-raised); }
  @media (width < 45rem) {
    .fw-toasts { right: var(--fw-s-2); left: var(--fw-s-2); inline-size: auto; bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  }

  /* ---------- položky dokladu (editor) ---------- */
  .fw-items-wrap { container: items / inline-size; }
  .fw-items { inline-size: 100%; font-size: var(--fw-fs-md); font-variant-numeric: tabular-nums; }
  .fw-items th { padding: var(--fw-s-2) var(--fw-s-1); font-size: var(--fw-fs-xs); font-weight: 500; color: var(--fw-text-3); text-align: left; box-shadow: inset 0 -1px 0 var(--fw-line); white-space: nowrap; }
  .fw-items td { padding: .3125rem var(--fw-s-1); vertical-align: top; box-shadow: inset 0 -1px 0 var(--fw-line); }
  .fw-items th:first-child, .fw-items td:first-child { padding-left: var(--fw-s-5); }
  .fw-items th:last-child, .fw-items td:last-child { padding-right: var(--fw-s-4); }
  .fw-items .fw-num { text-align: right; }
  .fw-items .fw-input, .fw-items .fw-select select { min-block-size: 2rem; padding-inline: var(--fw-s-2); border-color: transparent; background: transparent; }
  .fw-items .fw-select select { padding-right: var(--fw-s-6); }
  .fw-items tr:hover .fw-input, .fw-items tr:hover .fw-select select, .fw-items tr:focus-within .fw-input, .fw-items tr:focus-within .fw-select select { border-color: var(--fw-line-strong); background: var(--fw-surface); }
  .fw-items .fw-input[aria-invalid="true"] { border-color: var(--fw-danger); }
  .fw-items__no { color: var(--fw-text-3); padding-top: .6rem !important; inline-size: 2.75rem; }
  .fw-items__total { padding-top: .6rem !important; font-weight: 600; white-space: nowrap; }
  .fw-items__desc { min-inline-size: 12rem; }
  .fw-items__qty { inline-size: 5rem; }
  .fw-items__unit { inline-size: 4.5rem; }
  .fw-items__price { inline-size: 8rem; }
  .fw-items__disc { inline-size: 4.5rem; }
  .fw-items__vat { inline-size: 6rem; }
  .fw-items__act { inline-size: 2.5rem; }
  .fw-items tr.is-changed td { animation: fw-row-flash 1.2s var(--fw-ease); }
  @keyframes fw-row-flash { from { background: var(--fw-accent-soft); } }
  .fw-items__stock { margin-top: 2px; padding-inline: var(--fw-s-2); font-size: var(--fw-fs-xs); color: var(--fw-ok); }

  @container items (width < 46rem) {
    .fw-items, .fw-items tbody { display: block; }
    .fw-items thead { display: none; }
    .fw-items tr {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--fw-s-2) var(--fw-s-2);
      padding: var(--fw-s-4); box-shadow: inset 0 -1px 0 var(--fw-line);
    }
    .fw-items td { box-shadow: none; padding: 0 !important; }
    .fw-items__no { display: none; }
    .fw-items__desc { grid-column: 1 / -1; min-inline-size: 0; }
    .fw-items__total { grid-column: 1 / 3; align-self: center; }
    .fw-items__act { justify-self: end; inline-size: auto; }
    .fw-items .fw-input, .fw-items .fw-select select { border-color: var(--fw-line-strong); background: var(--fw-surface); min-block-size: 2.5rem; }
    .fw-items td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fw-fs-xs); font-weight: 500; color: var(--fw-text-3); margin-bottom: 2px; }
    .fw-items .fw-items__qty, .fw-items .fw-items__unit, .fw-items .fw-items__price, .fw-items .fw-items__disc, .fw-items .fw-items__vat { inline-size: auto; }
  }

  /* souhrn dokladu (počítá server) */
  .fw-totals { inline-size: 100%; font-size: var(--fw-fs-sm); font-variant-numeric: tabular-nums; }
  .fw-totals th, .fw-totals td { padding: .3125rem 0; text-align: right; }
  .fw-totals th:first-child, .fw-totals td:first-child { text-align: left; }
  .fw-totals thead th { font-size: var(--fw-fs-xs); color: var(--fw-text-3); font-weight: 500; box-shadow: inset 0 -1px 0 var(--fw-line); }
  .fw-totals tfoot td { font-weight: 600; box-shadow: inset 0 1px 0 var(--fw-line); }
  .fw-grandtotal { display: flex; flex-direction: column; gap: 2px; padding-top: var(--fw-s-4); margin-top: var(--fw-s-4); box-shadow: inset 0 1px 0 var(--fw-line); }
  .fw-grandtotal__label { font-weight: 500; font-size: var(--fw-fs-sm); color: var(--fw-text-2); }
  .fw-grandtotal__value { font: 650 2.25rem/1.1 var(--fw-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; }
  .fw-grandtotal__value small { font-size: .45em; font-weight: 500; letter-spacing: 0; color: var(--fw-text-3); }
  .fw-grandtotal__note { font-size: var(--fw-fs-xs); color: var(--fw-text-3); display: flex; gap: var(--fw-s-1); align-items: center; margin-top: var(--fw-s-1); }
  .fw-grandtotal__note .fw-icon { color: var(--fw-ok); }

  /* mobilní akční lišta editoru */
  .fw-actionbar { display: none; }
  @media (width < 45rem) {
    .fw-actionbar {
      display: flex; align-items: center; gap: var(--fw-s-2);
      position: fixed; inset: auto 0 0 0; z-index: 31;
      padding: var(--fw-s-2) var(--fw-s-3) calc(var(--fw-s-2) + env(safe-area-inset-bottom));
      background: var(--fw-glass);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      box-shadow: var(--fw-shadow-bar);
    }
    .fw-actionbar__total { flex: 1; display: flex; flex-direction: column; font-size: var(--fw-fs-xs); color: var(--fw-text-3); }
    .fw-actionbar__total b { font: 650 1.25rem/1.1 var(--fw-font-display); letter-spacing: -.02em; color: var(--fw-text); font-variant-numeric: tabular-nums; }
    .fw-has-actionbar .fw-bottombar { display: none !important; }
  }

  /* ---------- historie (audit) ---------- */
  .fw-timeline { list-style: none; padding: 0; display: flex; flex-direction: column; font-size: var(--fw-fs-sm); }
  .fw-timeline li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--fw-s-3); padding: var(--fw-s-2) 0; position: relative; }
  .fw-timeline time { color: var(--fw-text-3); font-variant-numeric: tabular-nums; font-size: var(--fw-fs-xs); padding-top: 1px; }
  .fw-timeline li + li { box-shadow: inset 0 1px 0 var(--fw-line); }
  .fw-timeline__who { color: var(--fw-text-3); }

  /* popisný seznam (údaje dokladu) */
  .fw-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--fw-s-2) var(--fw-s-5); font-size: var(--fw-fs-sm); }
  .fw-dl dt { color: var(--fw-text-3); }
  .fw-dl dd { margin: 0; font-variant-numeric: tabular-nums; }

  /* ---------- graf (SVG vykreslí server) ---------- */
  .fw-chart { inline-size: 100%; block-size: auto; overflow: visible; font-family: var(--fw-font-ui); }
  .fw-chart__grid { stroke: var(--fw-line); stroke-width: 1; }
  .fw-chart__axis { fill: var(--fw-text-3); font-size: 11px; }
  .fw-chart__bar { fill: var(--fw-accent-solid); transition: fill var(--fw-dur-1); }
  .fw-chart__bar--in { fill: color-mix(in oklab, var(--fw-accent-solid), var(--fw-surface) 65%); }
  .fw-chart__bar--current { fill: var(--fw-surface); stroke: var(--fw-accent-solid); stroke-width: 1.5; stroke-dasharray: 3 2; }
  .fw-chart__bar--current-in { fill: none; stroke: color-mix(in oklab, var(--fw-accent-solid), var(--fw-surface) 40%); stroke-width: 1.5; stroke-dasharray: 3 2; }
  .fw-chart g:hover .fw-chart__bar { fill: var(--fw-accent-solid-hover); }
  .fw-chart__legend { display: flex; flex-wrap: wrap; gap: var(--fw-s-4); font-size: var(--fw-fs-xs); color: var(--fw-text-3); }
  .fw-chart__swatch { display: inline-block; inline-size: .5rem; block-size: .5rem; border-radius: 50%; margin-right: .375rem; vertical-align: 1px; background: var(--fw-accent-solid); }
  .fw-chart__swatch--in { background: color-mix(in oklab, var(--fw-accent-solid), var(--fw-surface) 65%); }

  /* ---------- úkoly „Čeká na vás" a checklist průvodce ---------- */
  .fw-tasks { list-style: none; padding: 0 0 var(--fw-s-2); }
  .fw-tasks li { display: flex; align-items: center; gap: var(--fw-s-3); padding: .625rem var(--fw-s-5); font-size: var(--fw-fs-md); position: relative; }
  .fw-tasks li + li::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--fw-s-5) + 1.125rem + var(--fw-s-3)); block-size: 1px; background: var(--fw-line); }
  .fw-tasks .fw-icon { color: var(--fw-text-3); }
  .fw-tasks__text { flex: 1; }
  .fw-tasks__n { font-weight: 600; font-variant-numeric: tabular-nums; }

  .fw-checklist { list-style: none; padding: 0; counter-reset: step; }
  .fw-checklist li {
    display: grid; grid-template-columns: 1.75rem 1fr auto; align-items: center; gap: var(--fw-s-4);
    padding: var(--fw-s-4) 0; box-shadow: inset 0 1px 0 var(--fw-line); counter-increment: step;
  }
  .fw-checklist li:first-child { box-shadow: none; }
  .fw-checklist li::before {
    content: counter(step); display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
    background: var(--fw-fill); font-weight: 600; font-size: var(--fw-fs-sm); color: var(--fw-text-2);
  }
  .fw-checklist li.is-done::before { content: "✓"; background: var(--fw-ok); color: light-dark(#FFFFFF, #0B1F12); }
  .fw-checklist li.is-done .fw-checklist__title { color: var(--fw-text-3); }
  .fw-checklist__title { font-weight: 600; }
  .fw-checklist__desc { display: block; font-size: var(--fw-fs-sm); color: var(--fw-text-3); }

  /* ---------- náhled PDF (zástupný list papíru) ---------- */
  .fw-paper {
    position: relative;
    aspect-ratio: 210 / 297; inline-size: 100%;
    padding: 7% 8%; overflow: hidden;
    background: #FFFFFF; color: #1D1D1F; color-scheme: light;
    border-radius: 4px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 12px 32px -12px rgb(0 0 0 / .25);
    font-size: clamp(.5rem, 1.25cqi, .75rem); line-height: 1.45; font-variant-numeric: tabular-nums;
    container-type: inline-size;
  }
  .fw-paper-wrap { container-type: inline-size; padding: var(--fw-s-6); margin: var(--fw-s-2) var(--fw-s-5) var(--fw-s-5); background: var(--fw-bg); border-radius: var(--fw-r-2); }
  .fw-paper h2 { font-size: 2.6cqi; font-weight: 650; letter-spacing: -.02em; color: #1D1D1F; }
  .fw-paper h4 { font-size: 1.5cqi; color: #6E6E73; font-weight: 500; margin-bottom: .4em; }
  .fw-paper p, .fw-paper td, .fw-paper th, .fw-paper div { font-size: 1.75cqi; }
  .fw-paper table { inline-size: 100%; margin-top: 4cqi; }
  .fw-paper th { text-align: left; color: #6E6E73; font-weight: 500; border-bottom: 1px solid #E5E5EA; padding: .5em 0; }
  .fw-paper td { padding: .55em 0; border-bottom: 1px solid #F2F2F5; }
  .fw-paper .fw-num { text-align: right; }
  .fw-paper__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqi; }
  .fw-paper__pay { display: flex; align-items: flex-end; gap: 3cqi; }
  .fw-paper__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqi; margin-top: 5cqi; }
  .fw-paper__dates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqi; margin-top: 4cqi; padding: 2cqi 0; border-block: 1px solid #E5E5EA; }
  .fw-paper__foot { display: flex; justify-content: space-between; align-items: end; gap: 4cqi; margin-top: 5cqi; }
  .fw-paper__qr { inline-size: 16cqi; aspect-ratio: 1; color: #1D1D1F; }
  .fw-paper__total { text-align: right; }
  .fw-paper__total b { display: block; font: 650 3.4cqi/1.2 var(--fw-font-display); letter-spacing: -.02em; }
  .fw-paper__logo { display: flex; align-items: center; gap: 1.5cqi; font: 650 2.4cqi/1 var(--fw-font-display); letter-spacing: -.02em; }
  .fw-paper__logo span { display: grid; place-items: center; inline-size: 6cqi; aspect-ratio: 1; background: #1D1D1F; color: #fff; border-radius: 1.4cqi; font-size: 2.6cqi; }
  /* stav platby na náhledu: klidný štítek, ne razítko */
  .fw-paper__stamp {
    position: absolute; right: 8%; top: 2.2%;
    padding: .5em 1em; border-radius: 99px;
    font: 600 1.7cqi/1 var(--fw-font-ui);
    color: #1D7A3A; background: #E9F6EE;
  }
  .fw-paper__stamp--partial { color: #0066CC; background: #EBF3FD; }
}

/* ------------------------------------------------------------------ stránky */

@layer fw.pages {
  /* přihlášení: vlevo klidná prezentace, vpravo formulář */
  .fw-auth {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-block-size: 100dvh; background: var(--fw-surface);
  }
  .fw-auth__story {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--fw-s-10);
    padding: var(--fw-s-8) clamp(var(--fw-s-8), 6vw, 6rem);
    background: var(--fw-bg);
  }
  .fw-auth__brand { display: flex; align-items: center; gap: .625rem; font: 650 1.125rem/1 var(--fw-font-display); letter-spacing: -.02em; color: var(--fw-text); }
  .fw-auth__claim { max-inline-size: 16ch; font: 700 clamp(2.25rem, 4.2vw, var(--fw-fs-4xl))/1.06 var(--fw-font-display); letter-spacing: -.035em; color: var(--fw-text); }
  .fw-auth__claim strong { font-weight: inherit; display: block; }
  .fw-auth__claim span { display: block; color: var(--fw-text-3); }
  .fw-auth__lead { max-inline-size: 40ch; font-size: 1.0625rem; line-height: 1.5; color: var(--fw-text-2); margin-top: var(--fw-s-5); letter-spacing: -.012em; }
  .fw-auth__receipt {
    align-self: start;
    inline-size: min(23rem, 100%); padding: var(--fw-s-5);
    background: var(--fw-surface); color: var(--fw-text); border-radius: var(--fw-r-4);
    font-size: var(--fw-fs-sm); font-variant-numeric: tabular-nums;
    box-shadow: var(--fw-shadow-pop);
  }
  .fw-auth__receipt-row { display: flex; justify-content: space-between; gap: var(--fw-s-4); padding: .4375rem 0; color: var(--fw-text-2); }
  .fw-auth__receipt-row + .fw-auth__receipt-row { box-shadow: inset 0 1px 0 var(--fw-line); }
  .fw-auth__receipt-row:last-of-type { color: var(--fw-text); font-size: var(--fw-fs-md); padding-top: var(--fw-s-3); }
  .fw-auth__receipt-row b { font-weight: 600; }
  .fw-auth__receipt-check { display: flex; gap: var(--fw-s-2); align-items: center; margin-top: var(--fw-s-3); color: var(--fw-ok); background: var(--fw-ok-soft); padding: var(--fw-s-2) var(--fw-s-3); border-radius: var(--fw-r-2); font-size: var(--fw-fs-xs); font-weight: 500; }
  .fw-auth__foot { font-size: var(--fw-fs-xs); color: var(--fw-text-3); display: flex; gap: var(--fw-s-4); flex-wrap: wrap; }
  .fw-auth__foot a { color: var(--fw-text-2); }

  .fw-auth__form { display: flex; flex-direction: column; padding: var(--fw-s-6) clamp(var(--fw-s-6), 6vw, 6rem); }
  .fw-auth__top { display: flex; justify-content: flex-end; gap: var(--fw-s-2); align-items: center; font-size: var(--fw-fs-sm); }
  .fw-auth__box { inline-size: min(23rem, 100%); margin: auto 0; padding-block: var(--fw-s-10); display: flex; flex-direction: column; gap: var(--fw-s-4); }
  .fw-auth__box h1 { font-size: 2rem; letter-spacing: -.03em; }
  .fw-auth__box > p { color: var(--fw-text-3); margin-top: calc(var(--fw-s-3) * -1); font-size: .9375rem; }
  .fw-auth__box .fw-input, .fw-auth__box .fw-affix { min-block-size: 2.75rem; border-radius: 10px; font-size: .9375rem; }
  .fw-auth__box .fw-affix .fw-input { min-block-size: 2.625rem; }
  .fw-auth__mobile-brand { display: none; }
  .fw-auth__step { font-size: var(--fw-fs-sm); font-weight: 500; color: var(--fw-text-3); }

  @media (width < 56rem) {
    .fw-auth { grid-template-columns: minmax(0, 1fr); }
    .fw-auth__story { display: none; }
    .fw-auth__form { padding: var(--fw-s-4); }
    .fw-auth__top { justify-content: space-between; }
    .fw-auth__mobile-brand { display: flex; width: auto; }
    .fw-auth__box { padding-block: var(--fw-s-6); margin-top: var(--fw-s-6); }
    .fw-auth .fw-input { font-size: var(--fw-fs-lg); }
  }

  .fw-greeting { color: var(--fw-text-3); font-size: var(--fw-fs-md); flex-basis: 100%; }

  /* rozcestník ukázek */
  .fw-index { max-inline-size: 64rem; margin: 0 auto; padding: var(--fw-s-10) var(--fw-s-6); }
  .fw-index > h1 { font-size: 2.5rem; letter-spacing: -.035em; }
  .fw-index__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--fw-s-4); margin-top: var(--fw-s-8); }
  .fw-index__list a { display: block; padding: var(--fw-s-5); background: var(--fw-surface); border-radius: var(--fw-r-3); box-shadow: var(--fw-shadow-card); text-decoration: none; color: var(--fw-text); height: 100%; transition: box-shadow var(--fw-dur-2) var(--fw-ease-out), translate var(--fw-dur-3) var(--fw-ease-spring), scale var(--fw-dur-3) var(--fw-ease-spring); }
  .fw-index__list a:hover { box-shadow: var(--fw-shadow-pop); text-decoration: none; translate: 0 calc(var(--fw-rise) / -3); }
  .fw-index__list a:active { scale: var(--fw-press-scale); transition-duration: var(--fw-dur-press); }
  .fw-index__list b { display: block; font: 600 var(--fw-fs-lg)/1.3 var(--fw-font-display); letter-spacing: -.014em; color: var(--fw-text); margin-bottom: var(--fw-s-1); }
  .fw-index__list span { font-size: var(--fw-fs-sm); color: var(--fw-text-3); }

  /* galerie komponent */
  .fw-specimen { display: grid; gap: var(--fw-s-4); }
  .fw-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--fw-s-3); }
  .fw-swatch { font-size: var(--fw-fs-xs); }
  .fw-swatch i { display: block; block-size: 3.5rem; border-radius: var(--fw-r-2); box-shadow: inset 0 0 0 1px var(--fw-line); margin-bottom: var(--fw-s-2); }
  .fw-swatch span { display: block; color: var(--fw-text-2); }
  .fw-swatch code { background: none; padding: 0; color: var(--fw-text-3); }
  .fw-sw-bg { background: var(--fw-bg); } .fw-sw-surface { background: var(--fw-surface); } .fw-sw-text { background: var(--fw-text); }
  .fw-sw-accent { background: var(--fw-accent-solid); } .fw-sw-accent-soft { background: var(--fw-accent-soft); } .fw-sw-fill { background: var(--fw-fill); }
  .fw-sw-ok { background: var(--fw-ok); } .fw-sw-danger { background: var(--fw-danger); } .fw-sw-warn { background: var(--fw-warn); } .fw-sw-line { background: var(--fw-line-strong); }
  .fw-typescale > * + * { margin-top: var(--fw-s-3); }
  .fw-typescale__amount { font: 650 var(--fw-fs-4xl)/1 var(--fw-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
  .fw-demo-row { display: flex; flex-wrap: wrap; gap: var(--fw-s-2); align-items: center; }
  .fw-demo-menu { position: static; display: block; inset: auto; box-shadow: none; }
}

/* ------------------------------------------------------------------ pohyb */

/* Přechody mezi stránkami (cross-document view transitions, stejný původ). Typ fw-page odliší
   navigaci od přepnutí režimu (fw-theme) a od htmx výměn (bez typu = jen prolnutí). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; types: fw-page; }
}

@layer fw.motion {

  /* ---------- klíčové snímky (jen opacity / translate / scale – běží na kompozitoru) ---------- */
  @keyframes fw-fade-in { from { opacity: 0; } }
  @keyframes fw-pulse { 40% { scale: calc(1 + (1 - var(--fw-pop-scale)) * 2); } }
  @keyframes fw-ring { from { opacity: .45; scale: 1; } to { opacity: 0; scale: calc(1 + (1 - var(--fw-pop-scale)) * 6); } }
  @keyframes fw-enter { from { opacity: 0; translate: 0 var(--fw-rise); } }
  @keyframes fw-reveal { from { opacity: .35; translate: 0 calc(var(--fw-rise) * 2); } }
  @keyframes fw-grow-y { from { scale: 1 0; } }
  @keyframes fw-vt-out { to { opacity: 0; translate: 0 calc(var(--fw-slide) / -2); } }
  @keyframes fw-vt-in { from { opacity: 0; translate: 0 var(--fw-slide); } }
  @keyframes fw-topbar-scrolled {
    from { box-shadow: 0 1px 0 var(--fw-line), 0 0 0 0 transparent; }
    to   { box-shadow: 0 1px 0 var(--fw-line), 0 8px 24px -12px light-dark(rgb(0 0 0 / .22), rgb(0 0 0 / .7)); background-color: var(--fw-glass-strong); }
  }

  :root { --fw-glass-strong: light-dark(rgb(255 255 255 / .82), rgb(30 30 33 / .84)); }

  /* ---------- 1. přechody mezi stránkami ----------
     Lišta, menu a spodní lišta mají vlastní jméno, takže při navigaci neprobliknou (stará vrstva se schová,
     nová platí hned). Obsah (.fw-main) se prolne s mírným posunem. Podklad aktivní položky menu přejede. */
  .fw-topbar { view-transition-name: fw-topbar; }
  .fw-sidenav { view-transition-name: fw-sidenav; }
  .fw-bottombar { view-transition-name: fw-bottombar; }
  .fw-actionbar { view-transition-name: fw-actionbar; }
  .fw-main { view-transition-name: fw-main; }
  .fw-navlink[aria-current="page"] > .fw-navlink__pill { view-transition-name: fw-nav-pill; }

  ::view-transition-group(*) { animation-duration: var(--fw-dur-3); animation-timing-function: var(--fw-ease-out); }
  /* obsah se při změně velikosti (režim soustředění) neroztahuje – ořízne se */
  ::view-transition-old(fw-main), ::view-transition-new(fw-main) {
    inline-size: 100%; block-size: 100%; object-fit: none; object-position: left top;
  }
  ::view-transition-old(fw-sidenav), ::view-transition-new(fw-sidenav) {
    inline-size: 100%; block-size: 100%; object-fit: none; object-position: left top;
  }

  :root:active-view-transition-type(fw-page)::view-transition-old(fw-main) { animation: fw-vt-out var(--fw-dur-1) var(--fw-ease-in) both; }
  :root:active-view-transition-type(fw-page)::view-transition-new(fw-main) { animation: fw-vt-in var(--fw-dur-3) var(--fw-ease-out) 40ms both; }
  :root:active-view-transition-type(fw-page)::view-transition-old(fw-topbar):not(:only-child),
  :root:active-view-transition-type(fw-page)::view-transition-old(fw-bottombar):not(:only-child),
  :root:active-view-transition-type(fw-page)::view-transition-old(fw-nav-pill):not(:only-child) { animation: none; opacity: 0; }
  :root:active-view-transition-type(fw-page)::view-transition-new(fw-topbar):not(:only-child),
  :root:active-view-transition-type(fw-page)::view-transition-new(fw-bottombar):not(:only-child),
  :root:active-view-transition-type(fw-page)::view-transition-new(fw-nav-pill):not(:only-child) { animation: none; }
  :root:active-view-transition-type(fw-page)::view-transition-group(fw-nav-pill) { animation-duration: var(--fw-dur-4); animation-timing-function: var(--fw-ease-spring); }
  /* přepnutí režimu: klidné prolnutí barev celé stránky */
  :root:active-view-transition-type(fw-theme)::view-transition-group(*) { animation-duration: var(--fw-dur-4); animation-timing-function: var(--fw-ease-in-out); }
  :root:active-view-transition-type(fw-theme)::view-transition-old(*),
  :root:active-view-transition-type(fw-theme)::view-transition-new(*) { animation-duration: var(--fw-dur-4); animation-timing-function: var(--fw-ease-in-out); }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*) { animation-duration: 0s; } /* bez přesunů; prolnutí (opacity) zůstává */
  }

  /* ---------- 2. vstup obsahu: karty a řádky se objeví s krátkým odstupem ----------
     Pořadí (--_i) se skládá z pozice prvku na každé úrovni kostry (max. 4 úrovně), strop 7 kroků.
     Pojistky: animace platí jen pod :root.fw-motion (nastaví fw-theme.js, jen když je stránka vidět
     a není omezený pohyb) a jen do .fw-entered (po 1 s). fill-mode backwards = po doběhnutí nic nedrží;
     bez CSS/JS, při omezeném pohybu nebo bez vykreslování je obsah rovnou v konečném stavu. */
  :is(.fw-main, .fw-index, .fw-auth__box, .fw-auth__story) > :nth-child(2) { --_e1: 1; }
  :is(.fw-main, .fw-index, .fw-auth__box, .fw-auth__story) > :nth-child(3) { --_e1: 2; }
  :is(.fw-main, .fw-index, .fw-auth__box, .fw-auth__story) > :nth-child(4) { --_e1: 3; }
  :is(.fw-main, .fw-index, .fw-auth__box, .fw-auth__story) > :nth-child(5) { --_e1: 4; }
  :is(.fw-main, .fw-index, .fw-auth__box, .fw-auth__story) > :nth-child(6) { --_e1: 5; }
  :is(.fw-main, .fw-index, .fw-auth__box, .fw-auth__story) > :nth-child(7) { --_e1: 6; }
  :is(.fw-main, .fw-index, .fw-auth__box, .fw-auth__story) > :nth-child(n+8) { --_e1: 7; }
  :is(.fw-main, .fw-index) > * > :nth-child(2) { --_e2: 1; }
  :is(.fw-main, .fw-index) > * > :nth-child(3) { --_e2: 2; }
  :is(.fw-main, .fw-index) > * > :nth-child(4) { --_e2: 3; }
  :is(.fw-main, .fw-index) > * > :nth-child(5) { --_e2: 4; }
  :is(.fw-main, .fw-index) > * > :nth-child(6) { --_e2: 5; }
  :is(.fw-main, .fw-index) > * > :nth-child(n+7) { --_e2: 6; }
  .fw-main > * > * > :nth-child(2) { --_e3: 1; }
  .fw-main > * > * > :nth-child(3) { --_e3: 2; }
  .fw-main > * > * > :nth-child(4) { --_e3: 3; }
  .fw-main > * > * > :nth-child(n+5) { --_e3: 4; }
  .fw-main > * > * > * > :nth-child(2) { --_e4: 1; }
  .fw-main > * > * > * > :nth-child(3) { --_e4: 2; }
  .fw-main > * > * > * > :nth-child(n+4) { --_e4: 3; }

  .fw-chart g:nth-of-type(2) { --_k: 1; } .fw-chart g:nth-of-type(3) { --_k: 2; } .fw-chart g:nth-of-type(4) { --_k: 3; }
  .fw-chart g:nth-of-type(5) { --_k: 4; } .fw-chart g:nth-of-type(6) { --_k: 5; } .fw-chart g:nth-of-type(7) { --_k: 6; }
  .fw-chart g:nth-of-type(8) { --_k: 7; } .fw-chart g:nth-of-type(n+9) { --_k: 8; }
  .fw-table-wrap--list tbody tr:nth-child(2) { --_r: 1; } .fw-table-wrap--list tbody tr:nth-child(3) { --_r: 2; }
  .fw-table-wrap--list tbody tr:nth-child(4) { --_r: 3; } .fw-table-wrap--list tbody tr:nth-child(5) { --_r: 4; }
  .fw-table-wrap--list tbody tr:nth-child(6) { --_r: 5; } .fw-table-wrap--list tbody tr:nth-child(7) { --_r: 6; }
  .fw-table-wrap--list tbody tr:nth-child(n+8) { --_r: 7; }

  /* „listy" vstupu: samostatné bloky obsahu, ne kontejnery a ne nic uvnitř karty */
  :is(.fw-main, .fw-index) :is(.fw-pagehead, .fw-crumbs, .fw-panel, .fw-kpis, .fw-alert, .fw-banner, .fw-segmented, .fw-tabs, .fw-toolbar, .fw-filterline, .fw-pager, .fw-index__list > li):not(:is(.fw-panel, .fw-kpis, .fw-toolbar, .fw-pagehead, .fw-dialog, [popover]) *),
  .fw-index > :is(h1, p, .fw-row),
  :is(.fw-auth__box, .fw-auth__story) > * {
    --_i: min(calc(var(--_e1, 0) + var(--_e2, 0) + var(--_e3, 0) + var(--_e4, 0)), 7);
    --_d: min(calc(var(--_i) * var(--fw-stagger)), var(--fw-stagger-max));
  }

  @media (prefers-reduced-motion: no-preference) {
    :root.fw-motion:not(.fw-entered) :is(:is(.fw-main, .fw-index) :is(.fw-pagehead, .fw-crumbs, .fw-panel, .fw-kpis, .fw-alert, .fw-banner, .fw-segmented, .fw-tabs, .fw-toolbar, .fw-filterline, .fw-pager, .fw-index__list > li):not(:is(.fw-panel, .fw-kpis, .fw-toolbar, .fw-pagehead, .fw-dialog, [popover]) *), .fw-index > :is(h1, p, .fw-row), :is(.fw-auth__box, .fw-auth__story) > *) {
      animation: fw-enter var(--fw-dur-3) var(--fw-ease-out) var(--_d) backwards;
    }
    /* řádky hlavního seznamu: jen prolnutí, navazují na kartu (16 ms krok, stejný strop) */
    :root.fw-motion:not(.fw-entered) .fw-table-wrap--list tbody tr {
      animation: fw-fade-in var(--fw-dur-3) var(--fw-ease-out) min(calc(var(--_d, 0ms) + var(--_r, 0) * 16ms), var(--fw-stagger-max)) backwards;
    }
    /* sloupce grafu vyrostou od osy */
    :root.fw-motion:not(.fw-entered) .fw-chart g > rect {
      transform-box: fill-box; transform-origin: 50% 100%;
      animation: fw-grow-y var(--fw-dur-3) var(--fw-ease-out) min(calc(var(--_d, 0ms) + var(--_k, 0) * 16ms), 190ms) backwards;
    }

    /* ---------- 5. odhalení při posunu (scroll-driven), jen kde je podpora; jinak nic (dekorace) ---------- */
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      :is(.fw-main, .fw-index) :is(.fw-panel, .fw-kpis, .fw-alert, .fw-banner, .fw-pager, .fw-index__list > li):not(:is(.fw-panel, .fw-kpis, .fw-toolbar, .fw-pagehead, .fw-dialog, [popover], .fw-sticky) *) {
        animation: fw-reveal linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 30%;
      }
      /* během vstupu běží obě: vstup (čas) má přednost, po něm zůstane jen odhalení */
      :root.fw-motion:not(.fw-entered) :is(.fw-main, .fw-index) :is(.fw-panel, .fw-kpis, .fw-alert, .fw-banner, .fw-pager, .fw-index__list > li):not(:is(.fw-panel, .fw-kpis, .fw-toolbar, .fw-pagehead, .fw-dialog, [popover], .fw-sticky) *) {
        animation: fw-reveal linear both, fw-enter var(--fw-dur-3) var(--fw-ease-out) var(--_d) backwards;
        animation-timeline: view(), auto;
        animation-range: entry 5% entry 30%, normal;
      }
    }

  }

  /* ---------- 5b. horní lišta: po odjetí od začátku stránky zesílí sklo a dostane stín ---------- */
  @supports (animation-timeline: scroll()) {
    .fw-topbar {
      animation: fw-topbar-scrolled linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 64px;
    }
  }
  /* náhrada bez scroll-driven animací: fw.js nastaví data-scrolled */
  .fw-topbar { transition: box-shadow var(--fw-dur-2) var(--fw-ease-out), background-color var(--fw-dur-2) var(--fw-ease-out); }
  .fw-topbar[data-scrolled] { box-shadow: 0 1px 0 var(--fw-line), 0 8px 24px -12px light-dark(rgb(0 0 0 / .22), rgb(0 0 0 / .7)); background-color: var(--fw-glass-strong); }

  /* ---------- 4. drobné odezvy ---------- */
  .fw-bottombar a { transition: color var(--fw-dur-1) var(--fw-ease-out), scale var(--fw-dur-3) var(--fw-ease-spring); }
  .fw-bottombar a:active { scale: calc(1 - (1 - var(--fw-press-scale)) * 3); transition-duration: var(--fw-dur-press); }
  .fw-navlink:active, .fw-segmented a:active, .fw-pager__pages a:active { scale: var(--fw-press-scale); }
  .fw-navlink, .fw-segmented a, .fw-pager__pages a { transition: background-color var(--fw-dur-1) var(--fw-ease-out), color var(--fw-dur-1) var(--fw-ease-out), scale var(--fw-dur-3) var(--fw-ease-spring); }

  /* ukazatele: číslo se načítá (fw.js) v rezervované šířce – nic se neposune */
  .fw-countup { display: inline-block; text-align: end; }

  /* stav uložení editoru: tečka (neuloženo) → otáčející se oblouk (ukládám) → oblouk se uzavře a nakreslí se fajfka (uloženo) */
  .fw-savestate { display: inline-flex; align-items: center; gap: .375rem; vertical-align: -.2em; }
  .fw-savestate__icon { inline-size: 1rem; block-size: 1rem; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .fw-savestate__ring {
    stroke-dasharray: .3 .7; opacity: 0; transform-box: fill-box; transform-origin: center;
    transition: stroke-dasharray var(--fw-dur-3) var(--fw-ease-out), opacity var(--fw-dur-2) var(--fw-ease-out), stroke var(--fw-dur-2);
  }
  .fw-savestate__check { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--fw-dur-3) var(--fw-ease-out) 60ms; }
  .fw-savestate__dot { fill: var(--fw-warn); stroke: none; opacity: 0; scale: .4; transform-box: fill-box; transform-origin: center; transition: opacity var(--fw-dur-2), scale var(--fw-dur-3) var(--fw-ease-spring); }
  .fw-savestate[data-state="dirty"] .fw-savestate__dot { opacity: 1; scale: 1; }
  .fw-savestate[data-state="saving"] .fw-savestate__ring { opacity: 1; animation: fw-spin .8s linear infinite; }
  .fw-savestate[data-state="saved"] { color: var(--fw-text-3); }
  .fw-savestate[data-state="saved"] .fw-savestate__icon { color: var(--fw-ok); }
  .fw-savestate[data-state="saved"] .fw-savestate__ring { opacity: .35; stroke-dasharray: 1 0; }
  .fw-savestate[data-state="saved"] .fw-savestate__check { stroke-dashoffset: 0; }
  .fw-savestate__text { transition: opacity var(--fw-dur-2) var(--fw-ease-out); }

  @media (prefers-reduced-motion: reduce) {
    /* točení nahradí klidné pulzování průhlednosti, fajfka se ukáže hned */
    .fw-savestate[data-state="saving"] .fw-savestate__ring { animation: fw-breathe 1.6s var(--fw-ease-in-out) infinite; stroke-dasharray: 1 0; }
    .fw-savestate__check { transition: none; }
    .fw-btn[aria-busy="true"]::after, .fw-btn.htmx-request::after, .fw-spinner { animation: fw-breathe 1.6s var(--fw-ease-in-out) infinite; }
    .fw-items tr.is-changed td { animation-duration: .8s; }
    .fw-seg-ind.is-live, .fw-tab-ind.is-live { transition: none; } /* pilulka a linka přeskočí bez přejezdu */
  }
  @keyframes fw-breathe { 50% { opacity: .35; } }
}

/* ------------------------------------------------------------------ utility */

@layer fw.utilities {
  .fw-sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fw-num, .fw-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .fw-muted { color: var(--fw-text-2); }
  .fw-faint { color: var(--fw-text-3); }
  .fw-small { font-size: var(--fw-fs-sm); }
  .fw-xsmall { font-size: var(--fw-fs-xs); }
  .fw-strong { font-weight: 600; }
  .fw-right { text-align: right; }
  .fw-ml-auto { margin-left: auto; }
  .fw-mt-2 { margin-top: var(--fw-s-2); } .fw-mt-4 { margin-top: var(--fw-s-4); } .fw-mt-6 { margin-top: var(--fw-s-6); }
  .fw-mb-4 { margin-bottom: var(--fw-s-4); }
  .fw-danger-text { color: var(--fw-danger); }
  .fw-ok-text { color: var(--fw-ok); }
  .fw-warn-text { color: var(--fw-warn); }
  .fw-accent-text { color: var(--fw-accent); }
  .fw-nowrap { white-space: nowrap; }
  .fw-display { font-family: var(--fw-font-display); letter-spacing: -.02em; }
  @media (width < 64rem) {
    .fw-hide-tablet { display: none !important; }
  }
  @media (width < 45rem) {
    .fw-hide-mobile { display: none !important; }
    .fw-btn kbd, .fw-menu kbd { display: none; } /* zkratky na dotykovém displeji nedávají smysl */
    .fw-toolbar .fw-search { inline-size: 100%; order: 5; }
  }
  .fw-skip {
    position: absolute; left: var(--fw-s-2); top: -4rem; z-index: 100;
    padding: var(--fw-s-2) var(--fw-s-4); background: var(--fw-accent-solid); color: var(--fw-on-accent); font-weight: 600; border-radius: var(--fw-r-2);
  }
  .fw-skip:focus { top: var(--fw-s-2); }

  /* tisk: bez kostry aplikace */
  @media print {
    .fw-topbar, .fw-sidenav, .fw-bottombar, .fw-slot, .fw-actionbar, .fw-toasts, .fw-pagehead__actions { display: none !important; }
    .fw-app { display: block; background: none; }
    :root { color-scheme: light; }
    .fw-panel, .fw-kpis { box-shadow: none; border: 1px solid #D2D2D7; }
  }

  /* vynucené barvy (Windows High Contrast): stíny zmizí, proto hrany obnovíme rámečkem */
  @media (forced-colors: active) {
    .fw-panel, .fw-kpis, .fw-dialog, .fw-menu, .fw-toast, .fw-listbox, .fw-status, .fw-btn, .fw-segmented, .fw-alert, .fw-banner { border: 1px solid CanvasText; }
    .fw-segmented a[aria-current], .fw-navlink[aria-current="page"] { outline: 2px solid Highlight; }
    .fw-table tbody tr { border-bottom: 1px solid CanvasText; }
  }
}