.auth-card-head,
.tasker-page-head,
.tasker-topbar,
.tasker-account,
.tasker-capture-preview {
    display: flex;
    align-items: center;
}

.auth-aside h1 {
    color: #fff;
}

.auth-card-head {
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.auth-card-head .auth-sub {
    margin-bottom: 0;
}

.theme-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-muted);
    font: inherit;
    font-size: 1.15rem;
    cursor: pointer;
    transition: var(--ease-ctrl);
}

.theme-toggle:hover {
    background: var(--surface-2);
    color: var(--primary-color);
}

.form-field {
    margin-bottom: 16px;
}

.form-alert {
    margin-bottom: 18px;
    padding: 11px 13px;
    border: 1px solid var(--down);
    border-radius: var(--radius-sm);
    background: var(--down-soft);
    color: var(--down-ink);
    font-size: 0.85rem;
}

.form-alert.ok {
    border-color: var(--up);
    background: var(--up-soft);
    color: var(--up-ink);
}

.tasker-capture-preview {
    max-width: 360px;
    gap: 14px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.tasker-capture-preview strong,
.tasker-capture-preview small {
    display: block;
}

.tasker-capture-preview small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.72);
}

.tasker-capture-icon {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.3rem;
}

.tasker-app {
    padding-top: 72px;
}

.tasker-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    min-height: 64px;
    justify-content: space-between;
    gap: 20px;
    padding: 10px max(20px, calc((100vw - 960px) / 2));
    background: var(--bg-card);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm);
}

.tasker-brand {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tasker-brand span {
    color: var(--primary-color);
}

.tasker-account {
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.tasker-account form {
    margin: 0;
}

.tasker-main {
    width: min(100% - 32px, 960px);
    margin: 0 auto;
    padding: 34px 0 64px;
}

.tasker-page-head {
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.tasker-page-head h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.tasker-eyebrow {
    margin: 0 0 3px;
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.empty-state strong,
.empty-state p {
    display: block;
}

.empty-state p {
    max-width: 440px;
    margin: 7px auto 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.empty-state-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: 1.2rem;
    font-weight: 700;
}

.tasker-centered {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.message-panel {
    width: min(100%, 440px);
    padding: 34px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.message-panel h1 {
    margin: 8px 0;
    font-size: 1.5rem;
}

.message-panel p {
    margin: 0 0 22px;
    color: var(--text-muted);
}

.message-code {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 700;
}

@media (max-width: 620px) {
    .tasker-topbar {
        padding-inline: 16px;
    }

    .tasker-account > span {
        display: none;
    }

    .tasker-account .ds-btn {
        padding-inline: 11px;
    }

    .tasker-page-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   FÁZA 2 — dashboard, zoznam úloh, nahrávanie

   Farby výhradne cez tokeny. Akcent (iris) = „dá sa na to kliknúť",
   stavové triády = „takto sa to má". Odškrtnutá úloha je preto neutrálna,
   nie zelená — farbu si nechávame na to, čo naozaj treba hlásiť.
   Jediná povolená výnimka zo §9.5: aktívne nahrávanie svieti --down.
   ========================================================================== */

/* Triedy z dizajn systému nastavujú display (napr. .empty-state { display: grid }),
   čím prebijú UA štýl atribútu hidden. Bez tohto by sa skryté prvky zobrazovali. */
[hidden] {
    display: none !important;
}

.tasker-nav {
    width: min(100% - 32px, 960px);
    margin: 22px auto 0;
}

.tasker-nav .seg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.tasker-nav .seg::-webkit-scrollbar { display: none; }

.tasker-nav .seg-btn {
    flex: 0 0 auto;
    padding-block: 8px;
    text-decoration: none;
}

.tasker-main {
    padding-top: 22px;
}

.has-recorder .tasker-main {
    /* Miesto pre plávajúce tlačidlo, nech neprekrýva poslednú úlohu. */
    padding-bottom: calc(190px + env(safe-area-inset-bottom));
}

/* --- Riadok úlohy (odvodený z .mrow) ------------------------------------ */

.trow {
    display: grid;
    /* Odškrtnutie · text · hviezdička · šípka detailu — rovnako v zozname aj v archíve. */
    grid-template-columns: 44px minmax(0, 1fr) 44px 40px;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--hairline);
    transition: var(--ease-row);
}

.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--surface-2); }

.trow-check,
.trow-star {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-light);
    font-size: 1.15rem;
    cursor: pointer;
    transition: var(--ease-ctrl);
}

.trow-check::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 2px solid var(--text-light);
    border-radius: 50%;
    transition: var(--ease-ctrl);
}

.trow-check:hover::before { border-color: var(--primary-color); }

.trow.is-done .trow-check::before {
    border-color: var(--text-muted);
    background: var(--text-muted);
}

.trow.is-done .trow-check::after {
    content: "✓";
    position: absolute;
    color: var(--bg-card);
    font-size: 0.8rem;
    font-weight: 700;
}

.trow-check { position: relative; }

.trow-star:hover { color: var(--primary-color); }
.trow-star.is-starred { color: var(--primary-color); }

/* --- Šípka detailu na konci riadku ------------------------------------- */

/* Do 29. 8. 2026 tu boli bodky úchytu na ťahanie. Ťahá sa odteraz podržaním celého
   riadku (§9.3), takže miesto na konci pripadlo tomu, kvôli čomu sa detail najčastejšie
   otvára — prehratiu hlasovej poznámky. */
.trow-toggle {
    width: 40px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    transition: var(--ease-ctrl);
}

.trow-toggle .icon-chevron {
    width: 20px;
    height: 20px;
    transition: transform 0.18s ease;
}

.trow-toggle:hover { color: var(--primary-color); }
.trow-toggle[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .trow-toggle .icon-chevron { transition: none; }
}

.trow.is-dragging {
    position: relative;
    z-index: 5;
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    cursor: grabbing;
}

/* Ťahaný riadok ide presne za prstom, takže sa nesmie na nič rozbiehať.
   Hover na ostatných riadkoch by počas ťahania len blikal. */
.trow.is-dragging,
.is-reordering .trow { transition: none; }

/* Ťah sa spúšťa podržaním priamo na texte, takže sa počas neho nesmie dať nič
   označiť — ani vyvolať androidí výber slova s ponukou Kopírovať. */
.is-reordering {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.is-reordering .trow:not(.is-dragging):hover { background: transparent; }

/* Text riadku je obyčajný text, nie tlačidlo: dá sa označiť a skopírovať, a kurzor
   nad ním je preto I-beam, nie ruka. */
.trow-main {
    min-width: 0;
    padding: 8px 0;
}

.trow-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-main);
    font-size: 0.95rem;
}

.trow.is-done .trow-title {
    color: var(--text-muted);
    text-decoration: line-through;
}

/* `display: block` vyššie by inak prebilo `hidden` z prehliadača a titulok by pri
   rýchlej úprave ostal svietiť pod poľom. */
.trow-title[hidden] { display: none; }

/* Rýchla úprava textu priamo v riadku (dvojklik myšou). Pole stojí presne na mieste
   titulku a je nižšie než `.ds-input` v detaile — riadok sa pri úprave nesmie zväčšiť,
   inak by pod rukou poskočil celý zoznam. */
.trow-inline {
    padding: 3px 8px;
    font-size: 0.95rem;
}

.trow-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.trow-detail {
    grid-column: 1 / -1;
    padding: 4px 6px 16px 52px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.trow-detail[hidden] { display: none; }

/* Kedy úloha vznikla. V riadku to bolo pod titulkom, ale čas sa pri úlohe skoro nikdy
   nehľadá — je to dodatočný údaj ako pôvodná nahrávka, tak stojí hneď pri nej. */
.trow-when {
    margin: 0 0 10px;
    color: var(--text-light);
    font-size: 0.78rem;
}
.trow-detail p { margin: 0 0 12px; white-space: pre-wrap; }
.trow-detail audio { width: 100%; max-width: 420px; margin-bottom: 12px; }

.trow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Editor úlohy v detaile (D15 aj na webe). Polia stoja v úzkom stĺpci, nie cez celú
   šírku okna — riadok textu široký pol monitora sa nečíta ani neopravuje. */
.trow-edit {
    display: grid;
    gap: 4px;
    max-width: 560px;
    margin-bottom: 14px;
}

.trow-edit .ds-label { margin: 8px 0 0; }
.trow-edit .ds-label:first-child { margin-top: 0; }

/* Výšku poznámky dopočítava podľa obsahu app.js (cez CSSOM, style atribút zakazuje
   CSP — §12.6). Toto je len spodná hranica pre prázdne pole. */
.trow-edit textarea.ds-input {
    min-height: 44px;
    line-height: 1.5;
    resize: vertical;
}

.trow-edit-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

/* Zhasnuté „Uložiť" je zároveň jediný signál, či je rozpísaná zmena už uložená. */
.trow-edit .ds-btn:disabled { opacity: 0.5; cursor: default; }
.trow-edit .ds-btn:disabled:hover { background: var(--primary-color); border-color: var(--primary-color); }

.trow-edit-state { font-size: 0.8rem; color: var(--text-muted); }

.trow.is-leaving {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* --- Mikrofón ------------------------------------------------------------ */

/* Inline SVG namiesto emoji 🎙: rovnaká kresba ako `ic_mic.xml` v Android appke,
   takže mikrofón je na webe aj na ploche jeden a ten istý. Farbu berie
   z currentColor, veľkosť odtiaľto — v každom kontexte inú. Pomer k obalu je
   rovnaký ako v appke (72 dp tlačidlo, 32 dp ikona). */
.icon-mic { display: block; }

.record-fab .icon-mic { width: 32px; height: 32px; }
.empty-state-icon .icon-mic { width: 22px; height: 22px; }
.tasker-capture-icon .icon-mic { width: 24px; height: 24px; }

/* --- Nahrávanie --------------------------------------------------------- */

.record-dock {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg-body) 62%, transparent);
    pointer-events: none;
}

.record-fab,
.record-hint { pointer-events: auto; }

.record-fab {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: var(--ease-ctrl);
}

.record-fab:hover { background: var(--primary-dark); }
.record-fab:disabled { opacity: 0.55; cursor: progress; }

.record-fab.is-recording {
    background: var(--down);
    animation: ds-pulse 1.4s infinite;
}

.record-fab.is-recording .record-fab-icon { display: none; }

.record-fab-timer {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.record-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

.record-hint.is-warning { color: var(--warn-ink); font-weight: 600; }
.record-hint.is-error { color: var(--down-ink); font-weight: 600; }

/* Celoobrazovkový nahrávač (/record) — cieľ PWA shortcutu. */
.record-screen {
    display: grid;
    place-items: center;
    gap: 18px;
    min-height: calc(100vh - 210px);
    text-align: center;
}

.record-screen h1 { margin: 0; font-size: 1.35rem; }
.record-screen .record-state { margin: 0; color: var(--text-muted); }

/* --- Nahrávky a nastavenia --------------------------------------------- */

.crow {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hairline);
}

.crow:last-child { border-bottom: 0; }

.crow-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.crow-when { color: var(--text-muted); font-size: 0.8rem; }
.crow audio { width: 100%; max-width: 420px; }

.crow-transcript {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.token-value {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-family: var(--mono);
    font-size: 0.85rem;
    word-break: break-all;
}

.settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--hairline);
}

.settings-row:last-child { border-bottom: 0; }
.settings-row form { margin: 0; }
.settings-row .mono { color: var(--text-muted); font-size: 0.8rem; }
.settings-row dl { display: grid; grid-template-columns: auto auto; gap: 4px 14px; margin: 0; }
.settings-row dt { color: var(--text-muted); font-size: 0.8rem; }
.settings-row dd { margin: 0; font-size: 0.8rem; }

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
}

.inline-form .ds-input { flex: 1 1 200px; }

/* Heslo sa nezadáva na jeden riadok ako názov zariadenia — polia idú pod seba
   a formulár nerastie cez celú šírku panela, aby sa dal prečítať aj na monitore. */
.stacked-form { max-width: 380px; }
.stacked-form .form-field:first-child { margin-top: 0; }

/* Záloha úloh: sťahovanie a nahrávanie sú dve rovnocenné akcie vedľa seba,
   na úzkom displeji pod sebou. Výber súboru je širší než tlačidlá, lebo v ňom
   je vidieť názov vybraného súboru. */
.backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 14px 0;
}

.backup-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.backup-actions .ds-input { flex: 1 1 240px; width: auto; padding: 7px 10px; }

/* Ukážka formátu. Roluje vo vlastnom rámčeku — dlhý titulok nesmie roztiahnuť
   panel do šírky stránky. */
.backup-sample {
    margin: 0;
    padding: 10px 12px;
    overflow-x: auto;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.6;
}

.pairing {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

.pairing-text { flex: 1 1 260px; min-width: 0; }

/* QR ostáva čierny na bielom aj v tmavej téme — biele okolie je súčasť kódu
   a bez neho ho kamera nenájde. Rámik drží kontrast voči tmavému panelu. */
.pairing-qr {
    padding: 8px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: #fff;
    line-height: 0;
}

.pairing-qr svg { display: block; }

/* Zneplatnený token drží chip aj tlačidlo na zmazanie vedľa seba. */
.settings-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-actions form { margin: 0; }

/* Mazanie stojí hneď vedľa chipu „Zneplatnený", tak si berie jeho tvar aj mieru —
   pill, rovnaké odsadenie a veľkosť písma. Odlišuje sa len obrysom namiesto výplne:
   chip je stav, toto je akcia, a to je pri jedinej nevratnej veci v Nastaveniach
   rozdiel, ktorý má byť vidieť. Výplň dobehne až pri prejdení myšou. */
.btn-danger {
    /* O pixel menej než chip: obrys si berie zvyšok, takže obe pilulky
       skončia rovnako vysoké a nerobia vedľa seba schod. */
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: transparent;
    border-color: var(--down);
    color: var(--down-ink);
    font-size: 0.78rem;
}

.btn-danger:hover {
    background: var(--down-soft);
    border-color: var(--down);
}

@media (max-width: 620px) {
    .tasker-nav { width: calc(100% - 24px); }
    .trow-detail { padding-left: 16px; }

    /* Na telefóne je šípka detailu jediná cesta k prehrávaču aj editoru, tak dostane
       celý 44 px terč ako odškrtnutie a hviezdička. Miesto na ňu sa vezme z odsadenia
       riadku, nie z textu úlohy — ten je aj tak najužšie miesto obrazovky. */
    .trow {
        grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
        gap: 6px;
        padding: 4px 8px;
    }

    .trow-toggle { width: 44px; }
}

/* Špecifikácia §9.3 chce pulz na chipe „Prepisujem…". Dizajn systém drží keyframes
   ds-pulse pre --down („down, right now"), preto tu má chip vlastný, tlmenejší
   variant vo warn triáde — inak by okolo oranžového chipu blikal červený prstenec.
   Nahrávacie tlačidlo naopak ds-pulse používa priamo, tam je červená na mieste.
   prefers-reduced-motion rieši components.css globálne, netreba to opakovať. */
.mchip.warn.ds-pulse {
    animation: tasker-pulse-warn 1.6s infinite;
}

@keyframes tasker-pulse-warn {
      0% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--warn) 45%, transparent); }
     70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0   transparent; }
}

/* CSP zakazuje inline style atribúty (§12.6), preto aj drobné odsadenia
   panelov majú vlastnú triedu. */
.board-stack { margin-bottom: 18px; }
.board-body-padded { padding: 16px; }

/* Ukazovateľ vyčerpanej mesačnej kvóty. Je to <progress>, nie div s šírkou
   v style atribúte — tú by CSP zablokovala a pruh by ostal prázdny bez varovania.
   Vlastný vzhľad si každý prehliadač berie z inej pseudotriedy, preto tri bloky. */
.quota-bar {
    display: block;
    width: 100%;
    height: 8px;
    margin: 10px 0 6px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    appearance: none;
}

.quota-bar::-webkit-progress-bar {
    border-radius: var(--radius-pill);
    background: var(--surface-2);
}

.quota-bar::-webkit-progress-value {
    border-radius: var(--radius-pill);
    background: var(--primary-color);
}

.quota-bar::-moz-progress-bar {
    border-radius: var(--radius-pill);
    background: var(--primary-color);
}

/* Vyčerpaný limit má farbu klesania z dizajn systému — tú istú, akou sa inde
   označuje stav, s ktorým treba niečo urobiť. */
.quota-bar.is-exceeded::-webkit-progress-value { background: var(--down); }
.quota-bar.is-exceeded::-moz-progress-bar { background: var(--down); }

/* Dizajn systém má pre stavovú pilulku `up` a `down`; „čaká sa" tokeny má,
   ale variant nie, tak sa dopĺňa tu a nie zásahom do monito-ds. */
.status-pill.warn { background: var(--warn-soft); color: var(--warn-ink); }

/* Stíšený text vo vnútri riadku. `.settings-help` z monito-ds je panel — nesie
   vlastné pozadie aj odsadenie, takže ako <span> v bunke tabuľky maľuje padding
   cez riadok nad sebou (inline box padding vykreslí, ale miesto si nevypýta).
   Toto je tá istá farba a veľkosť bez panela. */
.help-text {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Nápoveda pod poľom sa musí držať svojho inputu. S východiskovým `1em` na
   odstavci sedela 12.8px pod vlastným poľom a 16px nad ďalším popiskom — teda
   skoro rovnako ďaleko od oboch. Panel to predtým držal pohromade pozadím,
   holý text drží len medzera. */
p.help-text {
    margin: 4px 0 0;
}

/* Popisok len pre čítačky obrazovky. Formulár v tabuľke má vlastný <label>
   pre každý riadok — bez neho by čítačka ohlásila šesť rovnakých polí. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Správa účtov. Tabuľka roluje vo vlastnom rámčeku, aby na mobile nešla
   do šírky celá stránka. */
.table-scroll { overflow-x: auto; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hairline);
}

.admin-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.admin-table tr:last-child td { border-bottom: 0; }

.admin-inline,
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Široké nie kvôli hodnote (sekundy sa zmestia do 8ch), ale kvôli placeholderu
   „podľa configu" — pri 8ch sa orezal doprostred slova. */
.admin-number { width: 14ch; }

/* Odkazy pod formulárom na stránkach pred prihlásením (registrácia, zabudnuté heslo). */
.auth-links {
    margin-top: 16px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-links a { color: var(--primary-color); }
.auth-links span { margin: 0 6px; }

/* Prihlásenie mobilom pod formulárom na /login (§17.6).

   Pod 860 px blok mizne celý: to je ten istý zlom, na ktorom monito-ds odhadzuje
   ľavý panel, teda hranica „toto je telefón". Vlastný displej sa naskenovať nedá,
   takže by tam QR len tlačil formulár pod okraj obrazovky. Skrytie robí CSS a nie
   PHP zámerne — kód sa vydáva pri renderi a o šírke okna server nevie, kým JS na
   skrytom bloku aj tak nepolluje (pozná to podľa `offsetParent`). */
.auth-alt { display: none; }

@media (min-width: 861px) {
    .auth-alt { display: block; margin-top: 24px; }
}

/* Deliaca čiara so slovom uprostred: dve pružné linky po stranách textu. */
.auth-alt-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.auth-alt-divider::before,
.auth-alt-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--hairline);
}

.auth-alt-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
}

.auth-alt-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

/* QR ostáva čierny na bielom aj v tmavej téme — biele okolie je súčasť kódu.
   Rovnaké pravidlo ako `.pairing-qr`, len s vlastnou šírkou. */
.auth-alt-qr {
    flex: 0 0 auto;
    padding: 6px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: #fff;
    line-height: 0;
}

.auth-alt-qr svg { display: block; }

.auth-alt-text {
    flex: 1 1 170px;
    min-width: 0;
    font-size: 0.85rem;
}

.auth-alt-text p { margin: 0 0 8px; }
.auth-alt-text p:last-child { margin-bottom: 0; }

/* Odpočet ostáva na mieste aj keď minúty preskočia z 5:00 na 4:59 — inak
   by veta pri každej sekunde nepatrne poskočila. */
.auth-alt-text [data-weblogin-remaining] {
    font-variant-numeric: tabular-nums;
}

.auth-alt-text .ds-btn {
    margin-top: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Obnovenie zoznamu a pridanie úlohy. Ikony sú vpravo v hlavičke panela —
   margin-inline-start ich odtlačí od počítadla, aby sa .board-head nemusel
   prepisovať. Nesie ho obal, nie tlačidlá: dve autá by si voľné miesto rozdelili
   medzi seba a ikony by sa rozutekali na opačné konce hlavičky. Gap je tesnejší
   než v .board-head (12 px) — patria k sebe ako v hlavičke appky. */
.board-head-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
}

.board-head-action {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-light);
    cursor: pointer;
    transition: var(--ease-ctrl);
}

/* Rovnaká kresba ako `ic_refresh.xml` a `ic_add.xml` v appke; predtým tu bolo ⟳,
   ktoré každý systém vykreslí inak a s „+" sa opticky nezladí. Pomer ikony k
   tlačidlu je ako v appke (24 dp v 48 dp). */
.icon-refresh,
.icon-plus { display: block; }

.board-head-action .icon-refresh,
.board-head-action .icon-plus { width: 17px; height: 17px; }

.board-head-action:hover { color: var(--primary-color); background: var(--surface-2); }

.board-head-action:disabled { cursor: default; opacity: 0.5; }

.board-head-action.is-busy { animation: tasker-spin 0.9s linear infinite; }

@keyframes tasker-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .board-head-action.is-busy { animation: none; }
}

/* Vysúvací pás na textovú úlohu. Sedí medzi hlavičkou a prvým riadkom, takže má
   hairline zdola — inak by prvý riadok zoznamu vyzeral ako jeho súčasť. */
.quick-add {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface-2);
}

.quick-add[hidden] { display: none; }
.quick-add .ds-input { flex: 1 1 auto; min-width: 0; }
.quick-add .ds-btn { flex: 0 0 auto; }

/* --- Sprievodca pripojením mobilu a návody ------------------------------ */

/* Párovací kód sa opisuje z obrazovky do telefónu cez celú izbu — preto veľké
   znaky a rozostupy. Zalomiť sa smie (tri skupiny po štyroch), useknúť nie. */
.pair-code {
    margin: 6px 0;
    padding: 10px 14px;
    display: inline-block;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-family: var(--mono);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    overflow-wrap: anywhere;
}

.connect-success .board-body { text-align: center; }

.connect-success-mark {
    width: 56px;
    height: 56px;
    margin: 6px auto 2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--up-soft);
    color: var(--up-ink);
    font-size: 1.9rem;
    font-weight: 700;
}

.connect-success h2 { margin: 8px 0 4px; }

.connect-success .ds-btn { margin-top: 14px; }

.connect-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.connect-help-link { color: var(--text-muted); }

/* Číslované kroky návodov. Číslo nesie farbu akcentu, text zostáva textom —
   rovnaká logika ako chips: akcent ≠ stav (§9.5). */
.guide-steps {
    margin: 14px 0;
    padding-left: 24px;
    display: grid;
    gap: 9px;
    line-height: 1.5;
}

.guide-steps li::marker {
    color: var(--primary-color);
    font-weight: 600;
}

/* Odrážkový súrodenec `.guide-steps` — pre výpočty, ktoré nie sú postupnosťou
   krokov (čo všetko zmizne so zmazaným účtom). `.aa-features` sa na to použiť
   nedá: tie majú vlastnú svetlú farbu pre tmavý panel a na bielej karte zmiznú. */
.fact-list {
    margin: 14px 0;
    padding-left: 22px;
    display: grid;
    gap: 8px;
    line-height: 1.5;
}

.fact-list li::marker { color: var(--primary-color); }

/* Zbalená sekcia karty (`<details class="board-fold">` so `<summary class="board-head">`).
   `display: flex` z `.board-head` zároveň schová natívny trojuholník — vlastnú šípku
   nesie `.fold-caret`, aby bola na tom istom mieste vo všetkých prehliadačoch. */
.board-fold > summary { cursor: pointer; list-style: none; }
.board-fold > summary::-webkit-details-marker { display: none; }

/* Zavretá sekcia je len pruh; linka pod hlavičkou by visela na spodku karty. */
.board-fold:not([open]) > summary { border-bottom: 0; }

.fold-caret {
    margin-left: auto;
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.board-fold[open] .fold-caret { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    .fold-caret { transition: none; }
}

.settings-connect-hint { border-bottom: 1px solid var(--hairline); }
.settings-connect-hint .settings-help { margin: 0; }

/* Pasca na boty v registrácii (`views/register.php`). Odsunutá mimo obrazovku, nie
   `display: none` — vypnuté pole časť botov spozná a obíde, odsunuté vidia ako každé
   iné. Nulová veľkosť a `overflow` bránia tomu, aby stránku roztiahla vodorovne. */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}