/* =========================================================================
   SMOK — wygląd „jak aplikacja” (2026-11-04): port z Hecy (hca.css) + warstwa wspólna z Familo.
   Kolory z logo SMOK: zieleń #106B18 (--yellow = kolor marki, biały tekst), niebieski #317BB5, granat #18314A.
   Tryb ciemny: zmienne przestawione niżej (:root[data-theme="dark"]).
   ========================================================================= */
:root {
    --yellow: #106B18; --navy: #18314A; --green: #2E9E4F; --blue: #317BB5; --orange: #E07B00; --purple: #6A4FB5; --sun: #C9971C;
    --text-secondary: var(--muted);
}
:root[data-theme="dark"] {
    --yellow: #3E9C48; --navy: #4F86C0; --green: #4FB35B; --blue: #6AAAE0; --orange: #F0A040; --purple: #A08CE8; --sun: #E0B84A;
}
/* =========================================================================
   SMOK — telefon „jak aplikacja” (2026-11-03, body.sm-app; wzór: MAM ZAPISANE, mza.css)
   Charakter i kolory SMOK-a zostają (motyw łowicki: zieleń menu, czerwień makowa, słońce, kolory modułów).
   Na komputerze zmienia się tylko drobiazg na Start (data i pasek pod powitaniem schowane).
   - okna (modal) i panel szczegółów (drawer) jako arkusz od dołu, przeciągnij w dół = zamknij (smk.js)
   - szklany górny pasek; tytuł strony pojawia się w pasku, gdy duży nagłówek zniknie przy przewijaniu
   - Start: data nad powitaniem, kafle 2×2, szybkie akcje w poziomie, panele jak listy w iPhonie
   ========================================================================= */
:root {
    --hc-ease: cubic-bezier(.22, 1, .36, 1);
    --hc-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* --- Start: dodatki nagłówka (na komputerze schowane) --- */
.dc-hello__date, .dc-hello__stripe { display: none; }

@keyframes hc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hc-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes hc-sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }

@media (max-width: 720px) {
    /* ---------- górny pasek (stoi nad przewijaną treścią .content): szkło, kreska po przewinięciu ---------- */
    body.sm-app .topbar {
        position: relative; z-index: 60; margin: 0; max-width: none; padding: 10px 14px;
        background: color-mix(in srgb, var(--bg) 78%, transparent);
        -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
        border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease;
    }
    body.sm-app.hc-scrolled .topbar { border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent); box-shadow: 0 6px 18px -14px rgba(24, 49, 74, .35); }
    body.sm-app .topbar__toggle { width: 42px; height: 42px; border-radius: 13px; transition: transform .25s var(--hc-spring); }
    body.sm-app .topbar__toggle:active { transform: scale(.9); }
    body.sm-app .topbar__title { font-size: 17px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s ease, transform .3s var(--hc-ease); }
    /* strona z dużym nagłówkiem: tytuł w pasku dopiero po jego zniknięciu */
    body.sm-app.hc-has-hero .topbar__title { opacity: 0; transform: translateY(6px); }
    body.sm-app.hc-has-hero.hc-scrolled .topbar__title { opacity: 1; transform: none; }
    body.sm-app .user-menu__avatar { width: 42px; height: 42px; }
    body.sm-app .topbar__bell { transition: transform .25s var(--hc-spring); }
    body.sm-app .topbar__bell:active { transform: scale(.88); }
    body.sm-app .content { padding-top: 6px; }

    /* ---------- treść: delikatne wejście ---------- */
    body.sm-app .content > * { animation: hc-rise .5s var(--hc-ease) both; }
    body.sm-app .content > *:nth-child(2) { animation-delay: .04s; }
    body.sm-app .content > *:nth-child(3) { animation-delay: .08s; }
    body.sm-app .content > *:nth-child(n+4) { animation-delay: .12s; }

    /* ---------- okna jako arkusz od dołu ---------- */
    body.sm-app .modal { align-items: flex-end; padding: 0; }
    body.sm-app .modal__backdrop { background: rgba(12, 22, 34, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .32s ease; }
    body.sm-app .modal__dialog,
    body.sm-app .modal--wide .modal__dialog,
    body.sm-app .modal--xwide .modal__dialog {
        max-width: none; width: 100%; max-height: 94vh; max-height: 94dvh; margin: 0;
        border-radius: 24px 24px 0 0; opacity: 1;
        transform: translateY(105%); transition: transform .28s cubic-bezier(.4, 0, 1, 1);
        box-shadow: 0 -16px 50px rgba(0, 0, 0, .25); padding-bottom: env(safe-area-inset-bottom);
    }
    body.sm-app .modal.is-visible .modal__dialog { transform: translateY(var(--sheet-y, 0)); transition: transform .52s var(--hc-ease); }
    body.sm-app .modal__dialog.is-drag { transition: none !important; }
    body.sm-app .modal__head { position: relative; padding-top: 22px; touch-action: none; }
    body.sm-app .modal__head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: currentColor; opacity: .22; }
    body.sm-app .modal__x { width: 32px; height: 32px; border-radius: 50%; background: rgba(127, 127, 127, .14); border-color: transparent; }
    body.sm-app .modal__body { overscroll-behavior: contain; }
    body.sm-app .modal.is-visible .modal__body > * { animation: hc-sheet-in .45s var(--hc-ease) both; }
    body.sm-app .modal.is-visible .modal__body > *:nth-child(2) { animation-delay: .04s; }
    body.sm-app .modal.is-visible .modal__body > *:nth-child(n+3) { animation-delay: .08s; }
    body.sm-app .modal .btn { transition: transform .25s var(--hc-spring), background .15s ease; }
    body.sm-app .modal .btn:active { transform: scale(.96); }

    body.sm-app .drawer { align-items: flex-end; justify-content: center; }
    body.sm-app .drawer__backdrop { background: rgba(12, 22, 34, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity .35s ease; }
    body.sm-app .drawer__panel {
        max-width: none; width: 100%; height: auto; max-height: 92vh; max-height: 92dvh; border-radius: 24px 24px 0 0;
        transform: translateY(105%); transition: transform .3s cubic-bezier(.4, 0, 1, 1);
        box-shadow: 0 -18px 50px rgba(0, 0, 0, .22); padding-bottom: env(safe-area-inset-bottom);
    }
    body.sm-app .drawer.is-visible .drawer__panel { transform: translateY(var(--sheet-y, 0)); transition: transform .52s var(--hc-ease); }
    body.sm-app .drawer__panel.is-drag { transition: none !important; }
    body.sm-app .drawer__head { position: relative; justify-content: center; border-bottom: 0; padding-top: 22px; touch-action: none; }
    body.sm-app .drawer__head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--text); opacity: .22; }
    body.sm-app .drawer__x { position: absolute; right: 14px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(127, 127, 127, .14); display: grid; place-items: center; font-size: 20px; line-height: 1; }
    body.sm-app .drawer__body { overscroll-behavior: contain; }

    /* =====================================================================
       START (ekran główny)
       ===================================================================== */
    body.sm-app .dc-hello { margin: 4px 0 18px; }
    body.sm-app .dc-hello__date { display: block; margin: 0 0 2px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
    body.sm-app .dc-hello .page-head__title { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; }
    body.sm-app .dc-hello .page-head__subtitle { margin-top: 4px; font-size: 15px; }
    body.sm-app .dc-hello__stripe {
        display: block; width: 120px; height: 5px; margin-top: 12px; border-radius: 5px;
        background: linear-gradient(90deg, var(--yellow) 0 25%, var(--sun) 25% 50%, var(--green) 50% 75%, var(--purple) 75% 100%);
        transform-origin: left; animation: hc-stripe .9s .2s var(--hc-spring) both;
    }
    @keyframes hc-stripe { from { transform: scaleX(0); } to { transform: none; } }

    /* dziś próba — karta-baner z pulsującą ikoną */
    body.sm-app .dc-today {
        position: relative; overflow: hidden; gap: 14px; padding: 18px; border-radius: 24px;
        background: radial-gradient(120% 100% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--green) 85%, var(--surface)) 0%, var(--green) 55%, color-mix(in srgb, var(--green) 70%, #000) 100%);
        box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--green) 80%, #000);
    }
    body.sm-app .dc-today__icon { width: 54px; height: 54px; border-radius: 16px; animation: hc-pulse 2.4s ease-in-out infinite; }
    body.sm-app .dc-today__title { font-size: 19px; }
    body.sm-app .dc-today__btn, body.sm-app .dc-today__done { border-radius: 16px; }

    /* kafle modułów 2×2 — jak ikony aplikacji: ikona u góry, tytuł, opis */
    body.sm-app .dc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
    body.sm-app .dc-tile {
        display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap;
        min-height: 138px; padding: 14px; border-radius: 22px; overflow: hidden; column-gap: 0;
        box-shadow: 0 14px 26px -18px rgba(24, 49, 74, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
        animation: hc-pop .5s var(--hc-spring) both; transition: transform .25s var(--hc-spring), box-shadow .25s ease;
    }
    body.sm-app .dc-tile:nth-child(2) { animation-delay: .05s; }
    body.sm-app .dc-tile:nth-child(3) { animation-delay: .1s; }
    body.sm-app .dc-tile:nth-child(4) { animation-delay: .15s; }
    body.sm-app .dc-tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
    body.sm-app .dc-tile:active { transform: scale(.95); }
    body.sm-app .dc-tile__icon { width: 46px; height: 46px; border-radius: 15px; margin: 0 0 auto; padding: 0; background: rgba(255, 255, 255, .22); }
    body.sm-app .dc-tile__icon svg { width: 25px; height: 25px; }
    body.sm-app .dc-tile__title { flex: 0 0 auto; margin-top: 14px; font-size: 16.5px; line-height: 1.2; }
    body.sm-app .dc-tile__desc { flex: 0 0 auto; margin-top: 2px; font-size: 12px; line-height: 1.3; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    body.sm-app .dc-tile__foot { position: absolute; right: 12px; top: 14px; margin: 0; min-height: 0; opacity: .85; }
    body.sm-app .dc-tile__foot svg { width: 18px; height: 18px; }
    body.sm-app .dc-tile.is-soon .dc-tile__foot { position: static; margin-top: 8px; }

    /* panele: kolejność na telefonie — akcje, terminy, ogłoszenia, repertuar */
    body.sm-app .dc-grid { display: flex; flex-direction: column; gap: 16px; }
    body.sm-app .dc-grid .dc-panel--actions { order: 1; }
    body.sm-app .dc-grid .dc-panel--rehearsals { order: 2; }
    body.sm-app .dc-grid .dc-panel--news { order: 3; }
    body.sm-app .dc-grid .dc-panel--repertoire { order: 4; }

    /* panele jak listy w iPhonie */
    body.sm-app .dc-grid .dc-panel { padding: 0; border: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .45); }
    body.sm-app .dc-grid .dc-panel__head { margin: 0; padding: 14px 16px 10px; gap: 10px; }
    body.sm-app .dc-grid .dc-panel__icon { width: 34px; height: 34px; border-radius: 11px; align-items: center; justify-content: center; color: #fff; background: var(--navy); }
    body.sm-app .dc-grid .dc-panel__icon svg { width: 19px; height: 19px; }
    body.sm-app .dc-grid .dc-panel--rehearsals .dc-panel__icon { background: var(--green); }
    body.sm-app .dc-grid .dc-panel--repertoire .dc-panel__icon { background: var(--blue); }
    body.sm-app .dc-grid .dc-panel--news .dc-panel__icon { background: var(--purple); }
    body.sm-app .dc-grid .dc-panel--actions .dc-panel__icon { background: var(--sun); color: #3a2a00; }
    body.sm-app .dc-grid .dc-panel__title { flex: 1; font-size: 17px; }
    body.sm-app .dc-grid .dc-panel__more { font-size: 0; display: inline-flex; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 7%, transparent); color: var(--navy); }
    body.sm-app .dc-grid .dc-panel__more::before { content: "Wszystkie"; font-size: 13px; font-weight: 700; }
    body.sm-app .dc-grid .dc-panel__more svg { width: 14px; height: 14px; }
    body.sm-app .dc-grid .dc-empty { margin: 0 12px 14px; border-radius: 16px; font-size: 14px; }
    body.sm-app .dc-grid .dc-empty__icon { width: 46px; height: 46px; }

    body.sm-app .dc-grid .dc-list, body.sm-app .dc-grid .dc-news { padding: 0 0 6px; }
    body.sm-app .dc-grid .dc-list li + li, body.sm-app .dc-grid .dc-news li + li { border-top: 0; }
    body.sm-app .dc-grid .dc-list li, body.sm-app .dc-grid .dc-news li { position: relative; }
    body.sm-app .dc-grid .dc-list li + li::before, body.sm-app .dc-grid .dc-news li + li::before { content: ""; position: absolute; left: 82px; right: 0; top: 0; height: 1px; background: var(--border); }
    body.sm-app .dc-grid .dc-panel--repertoire .dc-list li + li::before, body.sm-app .dc-grid .dc-news li + li::before { left: 60px; }
    body.sm-app .dc-grid .dc-item, body.sm-app .dc-grid .dc-news__item { gap: 12px; padding: 10px 14px 10px 16px; border-radius: 0; transition: background .15s ease, transform .2s var(--hc-spring); }
    body.sm-app .dc-grid .dc-item:active, body.sm-app .dc-grid .dc-news__item:active { background: color-mix(in srgb, var(--navy) 7%, transparent); }
    /* kafelek daty: kolorowy pasek u dołu (kolor wpisu z inline border-color — ma szerokość tylko dolna krawędź) */
    body.sm-app .dc-grid .dc-date { width: 54px; height: 54px; border-radius: 15px; border: 0; border-bottom: 4px solid var(--green); background: color-mix(in srgb, var(--green) 9%, var(--surface)); }
    body.sm-app .dc-grid .dc-item__title { font-size: 15px; }
    body.sm-app .dc-grid .dc-item__meta { font-size: 12.5px; }
    body.sm-app .dc-grid .dc-pill { height: 24px; padding: 0 9px; font-size: 10px; }
    body.sm-app .dc-grid .dc-item__chev { color: color-mix(in srgb, var(--muted) 55%, transparent); }

    /* szybkie akcje — poziomy rząd okrągłych przycisków (przewijany palcem) */
    body.sm-app .dc-grid .dc-panel--actions { background: transparent; box-shadow: none; overflow: visible; }
    body.sm-app .dc-grid .dc-panel--actions .dc-panel__head { display: none; }
    body.sm-app .dc-grid .dc-actions {
        flex-direction: row; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    body.sm-app .dc-grid .dc-actions::-webkit-scrollbar { display: none; }
    body.sm-app .dc-grid .dc-action {
        flex: 0 0 auto; scroll-snap-align: start; flex-direction: column; justify-content: flex-start; gap: 7px;
        width: 84px; min-height: 0; padding: 0; border-radius: 0; background: none !important; color: var(--text) !important;
        font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center;
        animation: hc-pop .45s var(--hc-spring) both;
    }
    body.sm-app .dc-grid .dc-action:nth-child(2) { animation-delay: .04s; }
    body.sm-app .dc-grid .dc-action:nth-child(3) { animation-delay: .08s; }
    body.sm-app .dc-grid .dc-action:nth-child(n+4) { animation-delay: .12s; }
    body.sm-app .dc-grid .dc-action > svg {
        box-sizing: content-box; width: 24px; height: 24px; padding: 17px; border-radius: 20px; color: #fff;
        background: var(--hc-a, var(--navy)); box-shadow: 0 10px 18px -12px var(--hc-a, var(--navy)), inset 0 1px 0 rgba(255, 255, 255, .3);
        transition: transform .25s var(--hc-spring);
    }
    body.sm-app .dc-grid .dc-action:active > svg { transform: scale(.88); }
    body.sm-app .dc-grid .dc-action > span:not(.dc-soon) { flex: 0 0 auto; }
    body.sm-app .dc-grid .dc-action--yellow { --hc-a: var(--yellow); }
    body.sm-app .dc-grid .dc-action--blue { --hc-a: var(--blue); }
    body.sm-app .dc-grid .dc-action--green { --hc-a: var(--green); }
    body.sm-app .dc-grid .dc-action--purple { --hc-a: var(--purple); }
    body.sm-app .dc-grid .dc-action .dc-soon { height: 18px; padding: 0 6px; font-size: 9px; background: color-mix(in srgb, var(--text) 8%, transparent); }

    /* zaproszenie do powiadomień */
    body.sm-app .push-invite { border-radius: 22px; }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    body.sm-app .content > *, body.sm-app .dc-tile, body.sm-app .dc-grid .dc-action, body.sm-app .dc-today__icon, body.sm-app .dc-hello__stripe,
    body.sm-app .modal__dialog, body.sm-app .drawer__panel, body.sm-app .modal__body > * { animation: none !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   KOMPUTER (≥ 721 px) — Start i okna „na wzór komórki” (2026-11-03): te same karty, listy i szybkie akcje,
   układ szerszy; kolory SMOK-a bez zmian.
   ========================================================================= */
@media (min-width: 721px) {
    /* okna: wejście ze sprężyną, większe zaokrąglenie; panel szczegółów zaokrąglony z lewej */
    body.sm-app .modal__backdrop { background: rgba(12, 22, 34, .4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
    body.sm-app .modal__dialog { border-radius: 22px; transform: translateY(16px) scale(.96); transition: opacity .22s ease, transform .45s var(--hc-spring); box-shadow: 0 30px 70px -20px rgba(12, 22, 34, .45); }
    body.sm-app .modal.is-visible .modal__dialog { transform: none; }
    body.sm-app .modal.is-visible .modal__body > * { animation: hc-sheet-in .4s var(--hc-ease) both; }
    body.sm-app .modal .btn { transition: transform .25s var(--hc-spring), background .15s ease, filter .15s ease; }
    body.sm-app .modal .btn:active { transform: scale(.96); }
    body.sm-app .drawer__panel { border-radius: 22px 0 0 22px; transition: transform .45s var(--hc-ease); box-shadow: -24px 0 60px rgba(12, 22, 34, .22); }

    /* ---------- START ---------- */
    body.sm-app .dc-hello { margin-bottom: 22px; }
    body.sm-app .dc-hello__date { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
    body.sm-app .dc-hello .page-head__title { font-size: 36px; letter-spacing: -.02em; }
    body.sm-app .dc-hello__stripe {
        display: block; width: 150px; height: 5px; margin-top: 14px; border-radius: 5px;
        background: linear-gradient(90deg, var(--yellow) 0 25%, var(--sun) 25% 50%, var(--green) 50% 75%, var(--purple) 75% 100%);
        transform-origin: left; animation: hc-stripe-d .9s .2s var(--hc-spring) both;
    }
    @keyframes hc-stripe-d { from { transform: scaleX(0); } to { transform: none; } }

    body.sm-app .dc-today {
        position: relative; overflow: hidden; border-radius: 26px; padding: 22px 26px;
        background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--green) 85%, var(--surface)) 0%, var(--green) 55%, color-mix(in srgb, var(--green) 70%, #000) 100%);
        box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--green) 80%, #000); animation: hc-rise .5s var(--hc-ease) both;
    }
    body.sm-app .dc-today__icon { animation: hc-pulse 2.4s ease-in-out infinite; }
    body.sm-app .dc-today__btn, body.sm-app .dc-today__done { border-radius: 16px; }

    /* kafle: jak ikony aplikacji — ikona u góry, duże zaokrąglenie, kółko w rogu, uniesienie */
    body.sm-app .dc-tiles { gap: 16px; }
    body.sm-app .dc-tile {
        display: flex; flex-direction: column; align-items: flex-start; min-height: 170px; padding: 20px; border-radius: 24px; overflow: hidden;
        box-shadow: 0 16px 30px -20px rgba(24, 49, 74, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
        animation: hc-pop .5s var(--hc-spring) both; transition: transform .3s var(--hc-spring), box-shadow .3s ease;
    }
    body.sm-app .dc-tile:nth-child(2) { animation-delay: .05s; }
    body.sm-app .dc-tile:nth-child(3) { animation-delay: .1s; }
    body.sm-app .dc-tile:nth-child(4) { animation-delay: .15s; }
    body.sm-app .dc-tile::after { content: ""; position: absolute; right: -36px; top: -36px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; transition: transform .5s var(--hc-ease); }
    body.sm-app a.dc-tile:hover { transform: translateY(-5px); box-shadow: 0 26px 40px -22px rgba(24, 49, 74, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
    body.sm-app a.dc-tile:hover::after { transform: scale(1.25); }
    body.sm-app .dc-tile:active { transform: scale(.97); }
    body.sm-app .dc-tile__icon { width: 54px; height: 54px; border-radius: 17px; margin: 0 0 auto; padding: 0; background: rgba(255, 255, 255, .22); transition: transform .35s var(--hc-spring); }
    body.sm-app a.dc-tile:hover .dc-tile__icon { transform: scale(1.08) rotate(-6deg); }
    body.sm-app .dc-tile__title { margin-top: 18px; font-size: 19px; }
    body.sm-app .dc-tile__desc { margin-top: 2px; font-size: 13px; }
    body.sm-app .dc-tile__foot { position: absolute; right: 18px; top: 20px; margin: 0; min-height: 0; opacity: .85; transition: transform .3s var(--hc-spring); }
    body.sm-app a.dc-tile:hover .dc-tile__foot { transform: translateX(4px); }
    body.sm-app .dc-tile.is-soon .dc-tile__foot { position: static; margin-top: 10px; }

    /* układ paneli: szybkie akcje na całą szerokość u góry, pod nimi terminy | ogłoszenia | repertuar */
    body.sm-app .dc-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
    body.sm-app .dc-grid .dc-panel--actions { grid-column: 1 / -1; grid-row: 1; }
    body.sm-app .dc-grid .dc-panel--rehearsals { grid-column: 1; grid-row: 2; }
    body.sm-app .dc-grid .dc-panel--news { grid-column: 2; grid-row: 2; }
    /* repertuar na całą szerokość (prośba usera), utwory w kolumnach */
    body.sm-app .dc-grid .dc-panel--repertoire { grid-column: 1 / -1; grid-row: 3; }
    body.sm-app .dc-grid .dc-panel--repertoire .dc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 4px; }
    body.sm-app .dc-grid .dc-panel--repertoire .dc-list li + li::before { display: none; }

    /* panele jak listy aplikacji */
    body.sm-app .dc-grid .dc-panel { padding: 0; border: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 16px 34px -26px rgba(24, 49, 74, .5); animation: hc-rise .5s .1s var(--hc-ease) both; }
    body.sm-app .dc-grid .dc-panel__head { margin: 0; padding: 18px 20px 12px; gap: 12px; }
    body.sm-app .dc-grid .dc-panel__icon { width: 38px; height: 38px; border-radius: 12px; align-items: center; justify-content: center; color: #fff; background: var(--navy); }
    body.sm-app .dc-grid .dc-panel__icon svg { width: 20px; height: 20px; }
    body.sm-app .dc-grid .dc-panel--rehearsals .dc-panel__icon { background: var(--green); }
    body.sm-app .dc-grid .dc-panel--repertoire .dc-panel__icon { background: var(--blue); }
    body.sm-app .dc-grid .dc-panel--news .dc-panel__icon { background: var(--purple); }
    body.sm-app .dc-grid .dc-panel__title { flex: 1; font-size: 18px; }
    body.sm-app .dc-grid .dc-panel__more { font-size: 0; display: inline-flex; align-items: center; gap: 3px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 7%, transparent); color: var(--navy); transition: background .2s ease; }
    body.sm-app .dc-grid .dc-panel__more::before { content: "Wszystkie"; font-size: 13px; font-weight: 700; }
    body.sm-app .dc-grid .dc-panel__more svg { width: 14px; height: 14px; transition: transform .25s var(--hc-spring); }
    body.sm-app .dc-grid .dc-panel__more:hover { background: color-mix(in srgb, var(--navy) 13%, transparent); }
    body.sm-app .dc-grid .dc-panel__more:hover svg { transform: translateX(3px); }
    body.sm-app .dc-grid .dc-empty { margin: 0 14px 16px; border-radius: 16px; }
    body.sm-app .dc-grid .dc-list, body.sm-app .dc-grid .dc-news { padding: 0 0 8px; }
    body.sm-app .dc-grid .dc-list li + li, body.sm-app .dc-grid .dc-news li + li { border-top: 0; }
    body.sm-app .dc-grid .dc-list li, body.sm-app .dc-grid .dc-news li { position: relative; }
    body.sm-app .dc-grid .dc-list li + li::before, body.sm-app .dc-grid .dc-news li + li::before { content: ""; position: absolute; left: 90px; right: 14px; top: 0; height: 1px; background: var(--border); }
    body.sm-app .dc-grid .dc-panel--repertoire .dc-list li + li::before, body.sm-app .dc-grid .dc-news li + li::before { left: 64px; }
    body.sm-app .dc-grid .dc-item, body.sm-app .dc-grid .dc-news__item { gap: 14px; margin: 0 8px; padding: 10px 12px; border-radius: 16px; transition: background .15s ease, transform .25s var(--hc-spring); }
    body.sm-app .dc-grid .dc-item:hover, body.sm-app .dc-grid .dc-news__item:hover { background: color-mix(in srgb, var(--navy) 6%, transparent); transform: translateX(3px); }
    body.sm-app .dc-grid .dc-date { width: 58px; height: 58px; border-radius: 16px; border: 0; border-bottom: 4px solid var(--green); background: color-mix(in srgb, var(--green) 9%, var(--surface)); }
    body.sm-app .dc-grid .dc-item__title { font-size: 15.5px; }
    body.sm-app .dc-grid .dc-item__meta { font-size: 13px; }
    body.sm-app .dc-grid .dc-item__chev { color: color-mix(in srgb, var(--muted) 55%, transparent); transition: transform .25s var(--hc-spring); }
    body.sm-app .dc-grid .dc-item:hover .dc-item__chev { transform: translateX(3px); }

    /* szybkie akcje: rząd okrągłych ikon z podpisem (jak na telefonie), bez tła panelu */
    body.sm-app .dc-grid .dc-panel--actions { background: transparent; box-shadow: none; overflow: visible; }
    body.sm-app .dc-grid .dc-panel--actions .dc-panel__head { display: none; }
    body.sm-app .dc-grid .dc-actions { flex-direction: row; flex-wrap: wrap; gap: 14px 18px; padding: 2px 2px 4px; }
    body.sm-app .dc-grid .dc-action {
        flex: 0 0 auto; flex-direction: column; justify-content: flex-start; gap: 8px; width: 96px; min-height: 0; padding: 0;
        border-radius: 0; background: none !important; color: var(--text) !important; filter: none !important;
        font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: center; animation: hc-pop .45s var(--hc-spring) both;
    }
    body.sm-app .dc-grid .dc-action:nth-child(2) { animation-delay: .04s; }
    body.sm-app .dc-grid .dc-action:nth-child(3) { animation-delay: .08s; }
    body.sm-app .dc-grid .dc-action:nth-child(n+4) { animation-delay: .12s; }
    body.sm-app .dc-grid .dc-action > svg {
        box-sizing: content-box; width: 26px; height: 26px; padding: 19px; border-radius: 22px; color: #fff;
        background: var(--hc-a, var(--navy)); box-shadow: 0 12px 20px -12px var(--hc-a, var(--navy)), inset 0 1px 0 rgba(255, 255, 255, .3);
        transition: transform .3s var(--hc-spring), box-shadow .3s ease;
    }
    body.sm-app a.dc-action:hover > svg { transform: translateY(-4px); box-shadow: 0 18px 26px -14px var(--hc-a, var(--navy)), inset 0 1px 0 rgba(255, 255, 255, .3); }
    body.sm-app .dc-grid .dc-action:active > svg { transform: scale(.9); }
    body.sm-app .dc-grid .dc-action > span:not(.dc-soon) { flex: 0 0 auto; }
    body.sm-app .dc-grid .dc-action--yellow { --hc-a: var(--yellow); }
    body.sm-app .dc-grid .dc-action--blue { --hc-a: var(--blue); }
    body.sm-app .dc-grid .dc-action--green { --hc-a: var(--green); }
    body.sm-app .dc-grid .dc-action--purple { --hc-a: var(--purple); }
    body.sm-app .push-invite { border-radius: 22px; }
}
/* średnie okno (721–1100 px): wszystko jedno pod drugim na całą szerokość */
@media (min-width: 721px) and (max-width: 1100px) {
    body.sm-app .dc-grid { grid-template-columns: minmax(0, 1fr); }
    body.sm-app .dc-grid .dc-panel--rehearsals { grid-column: 1; grid-row: 2; }
    body.sm-app .dc-grid .dc-panel--news { grid-column: 1; grid-row: 3; }
    body.sm-app .dc-grid .dc-panel--repertoire { grid-column: 1; grid-row: 4; }
    body.sm-app .dc-tile { min-height: 140px; }
}
@media (min-width: 721px) and (prefers-reduced-motion: reduce) {
    body.sm-app .dc-tile, body.sm-app .dc-grid .dc-action, body.sm-app .dc-grid .dc-panel, body.sm-app .dc-today, body.sm-app .dc-today__icon, body.sm-app .dc-hello__stripe { animation: none !important; }
}

/* =========================================================================
   MENU BOCZNE I GÓRNY PASEK — odświeżenie jak w MZ, w stylu SMOK-a (2026-11-03, komputer i telefon)
   Zieleń butelkowa z ciepłą poświatą (czerwień makowa, słońce), ikony w kolorowych kafelkach wg modułu
   (te same kolory co na Start), aktywna pozycja w czerwieni makowej z białym kafelkiem ikony.
   ========================================================================= */
body.sm-app .sidebar {
    background:
        radial-gradient(120% 34% at 0% 0%, color-mix(in srgb, var(--yellow) 30%, transparent) 0%, transparent 62%),
        radial-gradient(90% 28% at 100% 100%, color-mix(in srgb, var(--sun) 18%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--navy) 92%, var(--surface)) 0%, var(--navy) 40%, color-mix(in srgb, var(--navy) 80%, #000) 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent;
}
body.sm-app .sidebar__brand { position: relative; }
body.sm-app .sidebar__brand::after {
    content: ""; position: absolute; left: 6px; bottom: 12px; width: 90px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--yellow) 0 25%, var(--sun) 25% 50%, var(--green) 50% 75%, var(--purple) 75% 100%); opacity: .9;
}
body.sm-app .sidebar__nav { gap: 4px; }
body.sm-app .navitem {
    position: relative; min-height: 52px; padding: 0 12px 0 8px; gap: 12px; border-radius: 16px;
    color: rgba(255, 255, 255, .86); font-size: 15.5px;
    transition: background .2s ease, color .2s ease, transform .25s var(--hc-spring), box-shadow .25s ease;
}
body.sm-app .navitem__icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    color: #fff; background: var(--nav-c, rgba(255, 255, 255, .12));
    box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .3s var(--hc-spring), background .2s ease, color .2s ease, box-shadow .2s ease;
}
body.sm-app .navitem__icon svg { width: 20px; height: 20px; }
body.sm-app .navitem[data-nav="home"]           { --nav-c: var(--yellow); }
body.sm-app .navitem[data-nav="music"]          { --nav-c: var(--blue); }
body.sm-app .navitem[data-nav="calendar"]       { --nav-c: var(--green); }
body.sm-app .navitem[data-nav="members"]        { --nav-c: var(--orange); }
body.sm-app .navitem[data-nav="megaphone"]      { --nav-c: var(--purple); }
body.sm-app .navitem[data-nav="calendar-range"] { --nav-c: #D99A00; }
body.sm-app .navitem[data-nav="chat"]           { --nav-c: #C2557F; }
body.sm-app .navitem[data-nav="file"]           { --nav-c: #3E8E6E; }
body.sm-app .navitem[data-nav="ticket"]         { --nav-c: #E0534A; }
body.sm-app .navitem:hover { background: rgba(255, 255, 255, .08); color: #fff; }
body.sm-app .navitem:hover .navitem__icon { transform: scale(1.07) rotate(-5deg); }
body.sm-app .navitem:active { transform: scale(.97); }
body.sm-app .navitem.is-active, body.sm-app .navitem.is-active:hover {
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 82%, var(--surface)) 0%, var(--yellow) 55%, color-mix(in srgb, var(--yellow) 78%, #000) 100%);
    box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--yellow) 85%, #000), inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.sm-app .navitem.is-active .navitem__icon { background: #fff; color: var(--nav-c, var(--yellow)); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .45); }
body.sm-app .navitem.is-active[data-nav="home"] .navitem__icon { color: var(--yellow); }
body.sm-app .navitem.is-active::before {
    content: ""; position: absolute; left: -14px; top: 13px; bottom: 13px; width: 4px; border-radius: 0 4px 4px 0;
    background: var(--sun); box-shadow: 0 0 12px color-mix(in srgb, var(--sun) 70%, transparent);
}
body.sm-app .navitem__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sm-app .navitem--disabled .navitem__icon { background: rgba(255, 255, 255, .1); box-shadow: none; }
body.sm-app .navitem__tag { padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
body.sm-app .navitem__badge { box-shadow: 0 0 0 2px var(--navy); }
body.sm-app .navitem.is-active .navitem__badge { background: var(--navy); color: var(--sun); box-shadow: none; }

/* górny pasek: dzwonek i menu konta jako miękkie przyciski, panel konta ze sprężyną */
body.sm-app .topbar__bell {
    width: 46px; height: 46px; border-radius: 15px; display: inline-grid; place-items: center; color: var(--navy);
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), 0 8px 18px -14px rgba(24, 49, 74, .5);
    transition: transform .3s var(--hc-spring), background .2s ease, color .2s ease;
}
body.sm-app .topbar__bell:hover { color: var(--yellow); }
body.sm-app .topbar__bell:hover svg { animation: hc-bell .6s ease; transform-origin: 50% 10%; }
@keyframes hc-bell { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
body.sm-app .user-menu__trigger { border-radius: 999px; transition: background .2s ease, box-shadow .2s ease; }
body.sm-app .user-menu__trigger:hover, body.sm-app .user-menu.is-open .user-menu__trigger { background: var(--surface); box-shadow: 0 8px 18px -14px rgba(24, 49, 74, .5); }
body.sm-app .user-menu__avatar {
    background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 75%, var(--surface)), var(--yellow) 60%, color-mix(in srgb, var(--yellow) 75%, #000));
    box-shadow: 0 6px 14px -6px var(--yellow), inset 0 1px 0 rgba(255, 255, 255, .3);
}
body.sm-app .user-menu__panel {
    padding: 8px; border: 0; border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 24px 50px -18px rgba(24, 49, 74, .45), 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
    transform-origin: top right;
}
body.sm-app .user-menu__item { border-radius: 13px; transition: background .15s ease, transform .2s ease; }
body.sm-app .user-menu__item:hover { transform: translateX(2px); }

@keyframes hc-nav-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
/* telefon / wąski ekran: menu wysuwane z lewej ze sprężyną, zaokrąglone, z przyciemnieniem tła */
@media (max-width: 820px) {
    body.sm-app .sidebar { width: min(84vw, 300px); border-radius: 0 28px 28px 0; transition: transform .45s var(--hc-ease), box-shadow .45s ease; padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
    body.sm-app .sidebar.is-open { box-shadow: 0 0 0 100vmax rgba(12, 22, 34, .45), 24px 0 60px rgba(0, 0, 0, .35); }
    body.sm-app .sidebar.is-open .navitem { animation: hc-nav-in .45s var(--hc-ease) both; }
    body.sm-app .sidebar.is-open .navitem:nth-child(2) { animation-delay: .03s; }
    body.sm-app .sidebar.is-open .navitem:nth-child(3) { animation-delay: .06s; }
    body.sm-app .sidebar.is-open .navitem:nth-child(4) { animation-delay: .09s; }
    body.sm-app .sidebar.is-open .navitem:nth-child(5) { animation-delay: .12s; }
    body.sm-app .sidebar.is-open .navitem:nth-child(6) { animation-delay: .15s; }
    body.sm-app .sidebar.is-open .navitem:nth-child(n+7) { animation-delay: .18s; }
    body.sm-app .navitem { min-height: 54px; font-size: 16px; }
    body.sm-app .topbar__bell { width: 42px; height: 42px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { body.sm-app .navitem, body.sm-app .sidebar, body.sm-app .topbar__bell svg { animation: none !important; transition-duration: .01ms !important; } }

/* =========================================================================
   PRZEŁĄCZNIK KAPEL (Wszystkie / kapele) — przesuwany jak filtry zleceń w MZ, w stylu SMOK-a (2026-11-03)
   Pigułka w kolorze wybranej kapeli przesuwa się sprężyście (smk.js), pasek przewija się palcem.
   ========================================================================= */
body.sm-app .ens-switch {
    position: relative; gap: 2px; padding: 4px; border-radius: 999px;
    background: color-mix(in srgb, var(--navy) 7%, var(--surface)); box-shadow: inset 0 1px 2px rgba(24, 49, 74, .08);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
body.sm-app .ens-switch::-webkit-scrollbar { display: none; }
body.sm-app .ens-switch__pill {
    position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--pill-w, 0); border-radius: 999px;
    transform: translateX(var(--pill-x, 0)); background: var(--pill-c, var(--navy));
    box-shadow: 0 8px 16px -8px var(--pill-c, var(--navy)), inset 0 1px 0 rgba(255, 255, 255, .28);
    opacity: 0; pointer-events: none;
}
body.sm-app .ens-switch.has-pill .ens-switch__pill { opacity: 1; }
body.sm-app .ens-switch.is-anim .ens-switch__pill { transition: transform .45s var(--hc-spring), width .45s var(--hc-spring), background .3s ease, box-shadow .3s ease; }
body.sm-app .ens-switch__btn {
    position: relative; z-index: 1; scroll-snap-align: center; gap: 6px;
    transition: color .25s ease, transform .2s var(--hc-spring);
}
body.sm-app .ens-switch__btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--navy)); flex: 0 0 auto; transition: background .25s ease, box-shadow .25s ease; }
body.sm-app .ens-switch__btn:first-of-type::before { background: conic-gradient(var(--yellow) 0 25%, var(--sun) 0 50%, var(--green) 0 75%, var(--purple) 0); }
body.sm-app .ens-switch__btn:hover { background: transparent; color: var(--navy); }
body.sm-app .ens-switch__btn:active { transform: scale(.94); }
/* aktywny: tło daje pigułka (bez pigułki — np. bez JS — zostaje własne tło) */
body.sm-app .ens-switch.has-pill .ens-switch__btn.is-active { background: transparent; color: #fff; }
body.sm-app .ens-switch__btn.is-active::before { background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
@media (max-width: 760px) {
    body.sm-app .ens-switch { margin: 8px -14px 0; padding: 4px; border-radius: 0; background: transparent; box-shadow: none; flex-basis: calc(100% + 28px); max-width: none; padding-left: 14px; padding-right: 14px; }
    body.sm-app .ens-switch__pill { top: 4px; bottom: 4px; }
    body.sm-app .ens-switch__btn { min-height: 38px; padding: 0 15px; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
    body.sm-app .ens-switch__btn + .ens-switch__btn { margin-left: 4px; }
    body.sm-app .ens-switch.has-pill .ens-switch__btn.is-active { background: transparent; }
}

/* =========================================================================
   PRZEŁĄCZNIK SEGMENTOWY (.hc-seg, np. status w Repertuarze) — jak przełącznik kapel: przesuwana pigułka
   ========================================================================= */
.hc-seg {
    position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; max-width: 100%; overflow-x: auto;
    background: color-mix(in srgb, var(--navy) 7%, var(--surface)); box-shadow: inset 0 1px 2px rgba(24, 49, 74, .08);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hc-seg::-webkit-scrollbar { display: none; }
.hc-seg__pill {
    position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--pill-w, 0); border-radius: 999px; opacity: 0; pointer-events: none;
    transform: translateX(var(--pill-x, 0)); background: var(--pill-c, var(--navy));
    box-shadow: 0 8px 16px -8px var(--pill-c, var(--navy)), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.hc-seg.has-pill .hc-seg__pill { opacity: 1; }
.hc-seg.is-anim .hc-seg__pill { transition: transform .45s var(--hc-spring), width .45s var(--hc-spring), background .3s ease; }
.hc-seg__btn {
    position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border-radius: 999px;
    font-size: 14px; font-weight: 700; color: var(--text-secondary, var(--muted)); text-decoration: none; white-space: nowrap;
    transition: color .25s ease, transform .2s var(--hc-spring);
}
.hc-seg__btn:hover { color: var(--navy); }
.hc-seg__btn:active { transform: scale(.94); }
.hc-seg__btn.is-active { color: #fff; background: var(--c, var(--navy)); }
.hc-seg.has-pill .hc-seg__btn.is-active { background: transparent; }

/* „+” w rogu (FAB) — czerwień makowa z połyskiem */
.hc-fab {
    position: fixed; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 50;
    width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; overflow: hidden; color: #fff !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 75%, var(--surface)), var(--yellow) 55%, color-mix(in srgb, var(--yellow) 75%, #000));
    box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--yellow) 85%, #000), inset 0 1px 0 rgba(255, 255, 255, .35);
    animation: hc-pop .6s .3s var(--hc-spring) both; transition: transform .35s var(--hc-spring);
}
.hc-fab::after { content: ""; position: absolute; inset: -40%; transform: translateX(-120%) rotate(25deg); background: linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); animation: hc-shine 4.5s 1.4s ease-in-out infinite; }
@keyframes hc-shine { 0%, 70% { transform: translateX(-120%) rotate(25deg); } 100% { transform: translateX(120%) rotate(25deg); } }
.hc-fab svg { position: relative; z-index: 1; transition: transform .45s var(--hc-spring); }
.hc-fab:hover { transform: translateY(-3px) scale(1.04); }
.hc-fab:hover svg { transform: rotate(90deg); }
.hc-fab:active { transform: scale(.9); }

/* =========================================================================
   REPERTUAR „jak aplikacja” (2026-11-03, .hcr) — telefon i komputer
   ========================================================================= */
.hcr-hero { margin-bottom: 14px; }
.hcr-hero .page-head__subtitle b { color: var(--text); }
.hcr-me { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--blue); background: color-mix(in srgb, var(--blue) 11%, transparent); }
.hcr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.hcr-search {
    flex: 1 1 280px; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 16px; color: var(--muted);
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); transition: box-shadow .2s ease;
}
.hcr-search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent), inset 0 0 0 1px var(--blue); }
.hcr-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text); outline: none; }
.hcr-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hcr-search__clear { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--muted) !important; text-decoration: none !important; background: color-mix(in srgb, var(--text) 7%, transparent); }
.hcr-bar .hc-seg { flex: 0 1 auto; }
.hcr-cats { flex: 1 1 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; }
.hcr-cats::-webkit-scrollbar { display: none; }
.hcr-cat { flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-secondary, var(--muted)); text-decoration: none; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); transition: background .2s ease, color .2s ease, transform .2s var(--hc-spring); }
.hcr-cat:hover { color: var(--navy); }
.hcr-cat:active { transform: scale(.95); }
.hcr-cat.is-on { color: #fff; background: var(--blue); box-shadow: 0 8px 16px -10px var(--blue); }
.hcr-empty { border-radius: 20px; }

.hcr-list { display: flex; flex-direction: column; gap: 16px; padding-bottom: 90px; }
.hcr-group[hidden] { display: none; }
.hcr-letter {
    position: sticky; top: 0; z-index: 2; margin: 0 0 8px; padding: 4px 4px; font-size: 13px; font-weight: 900; letter-spacing: .06em; color: var(--yellow);
    background: linear-gradient(var(--bg) 70%, transparent);
}
.hcr-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 10px; }
.hcr-row {
    position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 10px; border-radius: 20px; overflow: hidden;
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5);
    animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 22ms); transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hcr-row[hidden] { display: none; }
.hcr-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.hcr-row:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 18px 30px -20px color-mix(in srgb, var(--c) 55%, rgba(24, 49, 74, .5)); }
.hcr-row.is-archive { opacity: .7; }
.hcr-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 4px 12px 16px; color: var(--text) !important; text-decoration: none !important; }
.hcr-row__main:active { opacity: .7; }
.hcr-note { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, var(--surface)), var(--c)); box-shadow: 0 8px 14px -10px var(--c); transition: transform .35s var(--hc-spring); }
.hcr-note svg { width: 20px; height: 20px; }
.hcr-row:hover .hcr-note { transform: scale(1.06) rotate(-6deg); }
.hcr-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hcr-row__title { font-size: 15.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.hcr-row__who { font-size: 13px; color: var(--text-secondary, var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcr-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; }
.hcr-tag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.hcr-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary, var(--muted)); }
.hcr-meta.is-empty { opacity: .6; }
.hcr-row .rp-myinstr { margin-top: 3px; }
.hcr-row__acts { flex: 0 0 auto; display: flex; gap: 6px; }
.hcr-act {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 54px; height: 54px; border-radius: 16px;
    font-size: 10.5px; font-weight: 800; text-decoration: none !important; transition: transform .25s var(--hc-spring), filter .2s ease;
}
.hcr-act:active { transform: scale(.9); }
.hcr-act:hover { filter: brightness(1.05); transform: translateY(-2px); }
.hcr-act--notes { color: #fff !important; background: var(--yellow); box-shadow: 0 8px 16px -10px var(--yellow); }
.hcr-act--play { color: var(--green) !important; background: color-mix(in srgb, var(--green) 13%, transparent); }
.hcr-none { padding: 18px; border-radius: 18px; text-align: center; color: var(--muted); background: var(--surface); }

@media (max-width: 720px) {
    .hcr-hero .page-head__title { font-size: 32px; letter-spacing: -.02em; }
    .hcr-bar { gap: 10px; }
    .hcr-search { flex-basis: 100%; height: 46px; }
    .hcr-bar .hc-seg { flex: 1 1 100%; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: 0; background: transparent; box-shadow: none; }
    .hcr-bar .hc-seg .hc-seg__btn { background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
    .hcr-bar .hc-seg .hc-seg__btn + .hc-seg__btn { margin-left: 4px; }
    .hcr-bar .hc-seg.has-pill .hc-seg__btn.is-active { background: transparent; }
    .hcr-cats { margin: 0 -16px; padding: 2px 16px; }
    .hcr-rows { grid-template-columns: 1fr; gap: 8px; }
    .hcr-row__main { padding: 11px 2px 11px 14px; gap: 11px; }
    .hcr-note { width: 42px; height: 42px; }
    .hcr-act { width: 46px; height: 50px; border-radius: 14px; }
    .hc-fab { right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .hcr-row, .hc-fab, .hc-fab::after { animation: none !important; } }

/* Poprawka 2026-11-03: wysunięte menu na telefonie NAD górnym paskiem (pasek ma z-index 60) */
@media (max-width: 820px) {
    body.sm-app .sidebar { z-index: 75; }
}

/* =========================================================================
   KALENDARZ „jak w telefonie” (2026-11-03, .hcc; wzór: MZ .mzc, kolory SMOK-a) — telefon i komputer
   ========================================================================= */
@keyframes hcc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hcc { padding-bottom: 90px; }
.hcc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hcc-head__title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hcc-head__title h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.hcc-head__title span { font-size: 20px; font-weight: 800; color: var(--yellow); }
.hcc-head__nav { display: flex; align-items: center; gap: 6px; }
.hcc-today { height: 38px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 800; color: var(--navy) !important; text-decoration: none !important; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); }
.hcc-today.is-here { color: #fff !important; background: var(--yellow); box-shadow: 0 8px 16px -10px var(--yellow); }
.hcc-arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--navy) !important; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); transition: transform .25s var(--hc-spring); }
.hcc-arrow:active { transform: scale(.88); }
.hcc-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.hcc-views a { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-secondary, var(--muted)); text-decoration: none; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); }
.hcc-views a.is-on { color: #fff; background: var(--navy); box-shadow: none; }
.hcc-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.hcc-legend i { width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; }

.hcc-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hcc-month {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 14px; border-radius: 24px;
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 16px 34px -26px rgba(24, 49, 74, .5);
    transition: transform .17s ease, opacity .17s ease; touch-action: pan-y;
}
.hcc-month.is-drag { transition: none; }
.hcc-month.is-out-left { transform: translateX(-40px); opacity: 0; }
.hcc-month.is-out-right { transform: translateX(40px); opacity: 0; }
.hcc-dow { padding: 2px 0 8px; text-align: center; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.hcc-dow.is-we { color: var(--yellow); }
.hcc-day {
    position: relative; aspect-ratio: 1 / 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; border-radius: 14px; background: none; font: inherit; color: var(--text); cursor: pointer;
    transition: background .2s ease, transform .2s var(--hc-spring), color .2s ease;
}
.hcc-day.is-out { color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: default; font-size: 14px; }
.hcc-day:not(.is-out):hover { background: color-mix(in srgb, var(--navy) 6%, transparent); }
.hcc-day:active { transform: scale(.9); }
.hcc-day__n { font-size: 16px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hcc-day.is-off .hcc-day__n { color: var(--yellow); }
.hcc-day.is-sat .hcc-day__n { color: var(--blue); }
.hcc-day.is-today .hcc-day__n { width: 30px; height: 30px; margin: -5px 0 -2px; border-radius: 50%; display: grid; place-items: center; color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow); }
.hcc-day.is-sel { background: var(--navy); }
.hcc-day.is-sel .hcc-day__n { color: #fff; }
.hcc-day.is-sel.is-today .hcc-day__n { color: #fff; background: var(--yellow); box-shadow: none; }
.hcc-day__dots { display: flex; align-items: center; gap: 2px; height: 6px; }
.hcc-day__dots i { width: 6px; height: 6px; border-radius: 50%; }
.hcc-day__dots b { font-size: 10px; line-height: 1; color: var(--muted); }
.hcc-day.is-sel .hcc-day__dots i { box-shadow: 0 0 0 1.5px var(--navy), 0 0 0 2.5px rgba(255, 255, 255, .8); }
.hcc-day.is-sel .hcc-day__dots b { color: #fff; }

.hcc-side { min-width: 0; }
.hcc-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 7%, var(--surface)); }
.hcc-seg__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 2); border-radius: 999px; background: var(--navy); box-shadow: 0 8px 16px -8px var(--navy); transform: translateX(calc(var(--seg-i, 0) * 100%)); transition: transform .45s var(--hc-spring); }
.hcc-seg__btn { position: relative; z-index: 1; padding: 9px 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-secondary, var(--muted)); cursor: pointer; border-radius: 999px; transition: color .25s ease; }
.hcc-seg__btn.is-on { color: #fff; }
.hcc-agenda { display: flex; flex-direction: column; gap: 14px; }
.hcc-dayblock[hidden] { display: none; }
.hcc-dayblock.is-in { animation: hcc-in .35s var(--hc-ease) both; }
.hcc-dayblock__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: 15px; font-weight: 800; color: var(--text); }
.hcc-dayblock__h em { font-style: normal; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--yellow); }
.hcc-dayblock__h em.is-off { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); }
.hcc-none { margin: 0; padding: 14px 16px; border-radius: 18px; font-size: 14px; color: var(--muted); background: var(--surface); }
.hcc-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hcc-events li { animation: hcc-in .35s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
.hcc-events li.is-off { opacity: .6; }
.hcc-events a {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 18px; overflow: hidden;
    color: var(--text) !important; text-decoration: none !important; background: var(--surface);
    box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 24px -22px rgba(24, 49, 74, .5); transition: transform .25s var(--hc-spring);
}
.hcc-events a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.hcc-events a:hover { transform: translateX(3px); }
.hcc-events a:active { transform: scale(.98); }
.hcc-ev__when { flex: 0 0 auto; min-width: 74px; font-size: 13px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.hcc-ev__when.is-all { font-size: 12px; color: var(--muted); }
.hcc-ev__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hcc-ev__title { font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.hcc-ev__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--text-secondary, var(--muted)); }
.hcc-ev__meta span { display: inline-flex; align-items: center; gap: 3px; }
.hcc-ev__tag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.hcc-ev__chev { flex: 0 0 auto; color: color-mix(in srgb, var(--muted) 55%, transparent); }

@media (min-width: 1000px) {
    .hcc-agenda { max-height: calc(100vh - 260px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
}
@media (max-width: 999px) {
    .hcc-body { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 720px) {
    .hcc-head__title h1 { font-size: 30px; }
    .hcc-head__title span { font-size: 17px; }
    .hcc-today { height: 36px; padding: 0 12px; }
    .hcc-arrow { width: 36px; height: 36px; }
    .hcc-legend { display: none; }
    .hcc-month { margin: 0 -6px; padding: 10px 6px; gap: 2px; border-radius: 22px; }
    .hcc-day { min-height: 0; border-radius: 12px; }
    .hcc-day__n { font-size: 15.5px; }
    .hcc-ev__when { min-width: 62px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .hcc-events li, .hcc-dayblock.is-in { animation: none !important; } }

/* =========================================================================
   KARTA UTWORU „jak aplikacja” (2026-11-03, .hcp) — baner w kolorze statusu, szybkie przyciski, miękkie karty
   ========================================================================= */
.hcp-back {
    display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; padding: 6px 14px 6px 8px; border-radius: 999px;
    font-size: 14px; font-weight: 700; color: var(--navy) !important; text-decoration: none !important;
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .25s var(--hc-spring);
}
.hcp-back:hover { transform: translateX(-3px); }
.hcp-hero {
    position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: 28px; color: #fff;
    background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .24) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--c) 82%, var(--surface)) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 72%, #000) 100%);
    box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--c) 85%, #000); animation: hc-rise .5s var(--hc-ease) both;
}
.hcp-hero::after { content: ""; position: absolute; right: -50px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none; }
.hcp-hero__note { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.hcp-hero__txt { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hcp-hero__status { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(255, 255, 255, .22); }
.hcp-hero__title { margin: 2px 0 0; font-size: 30px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere; color: #fff; }
.hcp-hero__who { margin: 0; font-size: 15px; opacity: .92; }
.hcp-hero__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hcp-hero__pills span { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .16); }
.hcp-hero__mine { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; padding: 6px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 800; color: var(--navy); background: #fff; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .4); }
.hcp-hero__mine.is-absent { color: var(--muted); }

.hcp-acts { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 16px 0 18px; }
.hcp-acts form { margin: 0; }
.hcp-act {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; padding: 0; border: 0; background: none;
    font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--text) !important; text-decoration: none !important; cursor: pointer;
    animation: hc-pop .45s var(--hc-spring) both;
}
.hcp-act:nth-child(2) { animation-delay: .04s; } .hcp-act:nth-child(3) { animation-delay: .08s; } .hcp-act:nth-child(n+4) { animation-delay: .12s; }
.hcp-act > span {
    width: 56px; height: 56px; border-radius: 19px; display: grid; place-items: center; color: var(--navy);
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), 0 10px 18px -14px rgba(24, 49, 74, .55), inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
    transition: transform .3s var(--hc-spring), box-shadow .3s ease;
}
.hcp-act > span svg { width: 22px; height: 22px; }
.hcp-act:hover > span { transform: translateY(-3px); }
.hcp-act:active > span { transform: scale(.9); }
.hcp-act--main > span { color: #fff; background: var(--yellow); box-shadow: 0 12px 20px -12px var(--yellow), inset 0 1px 0 rgba(255, 255, 255, .3); }
.hcp-act--play > span { color: #fff; background: var(--green); box-shadow: 0 12px 20px -12px var(--green), inset 0 1px 0 rgba(255, 255, 255, .3); }
.hcp-act--danger > span { color: var(--danger, #c8332b); }

/* sekcje karty jako miękkie karty aplikacji */
.hcp .rp-mynote { border: 0; border-radius: 20px; box-shadow: 0 10px 22px -20px rgba(120, 90, 0, .6), inset 0 0 0 1px #F1E2A1; }
.hcp .alert--info { border-radius: 18px; }
.hcp .mp-bar { border: 0; border-radius: 22px; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .5); border-left: 0; position: relative; overflow: hidden; }
.hcp .mp-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--yellow); }
.hcp .mp-bar .btn { border-radius: 14px; }
.hcp .rp-section.dc-panel { padding: 0 0 6px; border: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 16px 34px -26px rgba(24, 49, 74, .5); }
.hcp .rp-section .dc-panel__head { margin: 0; padding: 16px 18px 12px; }
.hcp .rp-section .dc-panel__icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--blue); }
.hcp .rp-section .dc-panel__icon svg { width: 19px; height: 19px; }
.hcp #nuty .dc-panel__icon { background: var(--yellow); }
.hcp .rp-section .dc-panel__title { flex: 1; font-size: 18px; }
.hcp .rp-section .dc-panel__more { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 7%, transparent); color: var(--navy); text-decoration: none; }
.hcp .rp-section > .alert, .hcp .rp-section > .rp-part, .hcp .rp-section > .rp-groups, .hcp .rp-section > .rp-other, .hcp .rp-videos { margin-left: 16px; margin-right: 16px; }
.hcp .rp-videos { margin-bottom: 12px; }
.hcp .rp-video__frame { border-radius: 18px; overflow: hidden; }
.hcp .rp-part--score { border: 0; border-radius: 18px; background: color-mix(in srgb, var(--sun) 12%, var(--surface)); box-shadow: inset 4px 0 0 var(--sun); margin-bottom: 14px; }
.hcp .rp-groups { margin-bottom: 12px; }
.hcp .rp-group { border: 0; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); position: relative; overflow: hidden; }
.hcp .rp-group::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--g, var(--muted)); }
.hcp .rp-group--blue { --g: var(--blue); } .hcp .rp-group--green { --g: var(--green); } .hcp .rp-group--orange { --g: var(--orange); } .hcp .rp-group--purple { --g: var(--purple); }
.hcp .rp-part.is-mine { border: 0; border-radius: 16px; background: color-mix(in srgb, var(--yellow) 8%, var(--surface)); box-shadow: inset 0 0 0 2px var(--yellow); margin: 6px 0; padding: 10px 12px; }
.hcp .rp-file__open { border: 0; border-radius: 14px; min-height: 52px; background: color-mix(in srgb, var(--navy) 5%, var(--surface)); transition: background .2s ease, transform .25s var(--hc-spring); }
.hcp .rp-file__open:hover { background: color-mix(in srgb, var(--blue) 10%, var(--surface)); transform: translateX(3px); }
.hcp .rp-file__open:active { transform: scale(.98); }
.hcp .rp-file__icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: #C7363B; }
.hcp .rp-file__icon svg { width: 18px; height: 18px; }
.hcp .rp-file.is-mine .rp-file__open { background: #fff; box-shadow: inset 0 0 0 2px var(--yellow); }
.hcp .rp-chip { border-radius: 999px; }
.hcp .rp-other { border-radius: 16px; }

@media (max-width: 720px) {
    .hcp-hero { padding: 18px; gap: 12px; border-radius: 24px; }
    .hcp-hero__note { width: 50px; height: 50px; border-radius: 16px; }
    .hcp-hero__title { font-size: 25px; }
    .hcp-acts { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 16px; padding: 2px 16px 4px; scrollbar-width: none; gap: 10px; }
    .hcp-acts::-webkit-scrollbar { display: none; }
    .hcp-act { flex: 0 0 auto; width: 70px; }
    .hcp-act > span { width: 54px; height: 54px; border-radius: 18px; }
    .hcp .rp-section > .alert, .hcp .rp-section > .rp-part, .hcp .rp-section > .rp-groups, .hcp .rp-section > .rp-other, .hcp .rp-videos { margin-left: 12px; margin-right: 12px; }
    .hcp .rp-group { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hcp-hero, .hcp-act { animation: none !important; } }

/* =========================================================================
   KARTA UTWORU → „Moje” (2026-11-03, .hcm): prywatna notatka jako karteczka + moje pliki; okno notatki (.hcn)
   ========================================================================= */
.hcp-act--note > span { color: #8a6a00; background: #FFF3B8; box-shadow: 0 12px 20px -14px #D9B400, inset 0 0 0 1px #F1E2A1; }
.hcm { margin: 0 0 18px; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 16px 34px -26px rgba(24, 49, 74, .5); animation: hc-rise .5s .05s var(--hc-ease) both; }
.hcm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hcm-head__ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--navy); }
.hcm-head div { display: flex; flex-direction: column; gap: 1px; }
.hcm-head strong { font-size: 17px; font-weight: 800; color: var(--text); }
.hcm-head small { font-size: 12.5px; color: var(--muted); }
/* karteczka: żółta, w linie, lekko przechylona; klik = edycja */
.hcm-note {
    position: relative; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; padding: 16px 18px 12px; border-radius: 6px 18px 18px 18px;
    color: #4a3b00 !important; text-decoration: none !important;
    background: repeating-linear-gradient(transparent 0 25px, rgba(170, 140, 30, .16) 25px 26px), linear-gradient(160deg, #FFF6C2, #FFEC8F);
    background-position: 0 14px, 0 0;
    box-shadow: 0 14px 24px -18px rgba(150, 110, 0, .7), inset 0 0 0 1px rgba(200, 160, 30, .25);
    transform: rotate(-.6deg); transition: transform .3s var(--hc-spring), box-shadow .3s ease;
}
.hcm-note::before { content: ""; position: absolute; top: -8px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 3px; background: rgba(255, 255, 255, .55); box-shadow: 0 2px 4px rgba(0, 0, 0, .08); transform: rotate(-2deg); }
.hcm-note:hover { transform: rotate(0) translateY(-2px); box-shadow: 0 20px 30px -18px rgba(150, 110, 0, .75), inset 0 0 0 1px rgba(200, 160, 30, .3); }
.hcm-note:active { transform: scale(.98); }
.hcm-note__text { font-size: 15px; line-height: 26px; overflow-wrap: anywhere; }
.hcm-note__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: rgba(74, 59, 0, .7); }
.hcm-note__edit { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-weight: 800; background: rgba(255, 255, 255, .55); }
.hcm-note__edit svg { width: 14px; height: 14px; }
.hcm-files { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hcm-files li { display: flex; align-items: center; gap: 6px; }
.hcm-file { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 12px 6px 8px; border-radius: 14px; color: var(--text) !important; text-decoration: none !important; background: color-mix(in srgb, var(--navy) 5%, var(--surface)); transition: background .2s ease, transform .25s var(--hc-spring); }
.hcm-file:hover { background: color-mix(in srgb, var(--blue) 10%, var(--surface)); transform: translateX(3px); }
.hcm-file__ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--navy); }
.hcm-file__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcm-file__size { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.hcm-files .row-actions { display: inline-flex; gap: 2px; }
.hcm-add { display: flex; flex-wrap: wrap; gap: 8px; }
.hcm-add__btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px;
    border: 2px dashed color-mix(in srgb, var(--navy) 22%, var(--border)); font-size: 14px; font-weight: 800; color: var(--navy) !important; text-decoration: none !important;
    transition: background .2s ease, border-color .2s ease, transform .2s var(--hc-spring);
}
.hcm-add__btn span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--navy); }
.hcm-add__btn span svg { width: 16px; height: 16px; }
.hcm-add__btn:hover { border-color: var(--navy); background: color-mix(in srgb, var(--navy) 5%, transparent); }
.hcm-add__btn:active { transform: scale(.96); }

/* okno notatki: karteczka zamiast dużego pola */
.hcn-lock { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.hcn-paper { padding: 12px 14px; border-radius: 6px 16px 16px 16px; background: linear-gradient(160deg, #FFF6C2, #FFEC8F); box-shadow: 0 12px 22px -18px rgba(150, 110, 0, .7), inset 0 0 0 1px rgba(200, 160, 30, .25); }
.hcn-paper textarea {
    display: block; width: 100%; min-height: 104px; max-height: 320px; padding: 0; border: 0; resize: none; outline: none;
    font: inherit; font-size: 16px; line-height: 26px; color: #4a3b00; background: repeating-linear-gradient(transparent 0 25px, rgba(170, 140, 30, .2) 25px 26px);
}
.hcn-paper textarea::placeholder { color: rgba(74, 59, 0, .45); }
.hcn-count { margin: 6px 4px 0; text-align: right; font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
    .hcm { padding: 14px; border-radius: 22px; }
    .hcm-add__btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================================
   LISTY PRÓB / WYDARZEŃ / CZŁONKÓW „jak aplikacja” (2026-11-03, .hcl) — telefon i komputer
   ========================================================================= */
.hcl { padding-bottom: 90px; }
.hcl-hero { margin-bottom: 14px; }
.hcl-hero .page-head__subtitle b { color: var(--text); }
.hcl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.hcl-empty { border-radius: 20px; }
.hcl-list { display: flex; flex-direction: column; gap: 18px; }
.hcl-month {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 4px;
    font-size: 15px; font-weight: 800; color: var(--text); background: linear-gradient(var(--bg) 70%, transparent);
}
.hcl-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 10px; }
.hcl-row {
    position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 10px; border-radius: 22px; overflow: hidden;
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5);
    animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 22ms); transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hcl-row:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 18px 30px -20px color-mix(in srgb, var(--c) 55%, rgba(24, 49, 74, .5)); }
.hcl-row.is-today { box-shadow: 0 0 0 2px var(--c), 0 16px 28px -18px var(--c); }
.hcl-row.is-canceled { opacity: .62; }
.hcl-row.is-canceled .hcl-row__title { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.hcl-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 4px 12px 12px; color: var(--text) !important; text-decoration: none !important; }
.hcl-row__main:active { opacity: .7; }
.hcl-date {
    flex: 0 0 auto; width: 58px; height: 62px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
    color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 72%, var(--surface)), var(--c)); box-shadow: 0 10px 18px -12px var(--c), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .35s var(--hc-spring);
}
.hcl-date b { font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.hcl-date small { margin-top: 3px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
.hcl-date.is-multi small { text-transform: none; font-size: 12px; }
.hcl-row:hover .hcl-date { transform: scale(1.05) rotate(-4deg); }
.hcl-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hcl-row__title { font-size: 15.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.hcl-row__title .ens-badge { margin-left: 6px; }
.hcl-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 13px; color: var(--text-secondary, var(--muted)); }
.hcl-row__meta svg { flex: 0 0 auto; opacity: .8; }
.hcl-row__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.hcl-row__pills:empty { display: none; }
.hcl-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.hcl-pill.is-gray { color: #5c6772; background: #EEF0F2; }
.hcl-pill.is-today { color: #fff; background: var(--yellow); }
.hcl-pill.is-soon { color: #0F6BC2; background: #E3F0FD; }
.hcl-pill.is-kind { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.hcl-acts { flex: 0 0 auto; display: flex; gap: 6px; }
.hcl-acts form { margin: 0; }
.hcl-act {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 17px;
    font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer; text-decoration: none !important; transition: transform .25s var(--hc-spring), filter .2s ease;
}
.hcl-act:hover { transform: translateY(-2px); filter: brightness(1.05); }
.hcl-act:active { transform: scale(.9); }
.hcl-act--go { color: #fff !important; background: var(--green); box-shadow: 0 10px 18px -12px var(--green); }
.hcl-act--no { color: var(--danger, #c8332b) !important; background: color-mix(in srgb, var(--danger, #c8332b) 10%, transparent); }

/* Członkowie: kafelki statystyk, karty osób, sekcje */
.hcm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hcm-stat {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
    padding: 14px 16px; border-radius: 22px; color: #fff !important; text-decoration: none !important;
    background: linear-gradient(140deg, color-mix(in srgb, var(--c) 78%, var(--surface)), var(--c)); box-shadow: 0 14px 26px -18px var(--c), inset 0 1px 0 rgba(255, 255, 255, .25);
    animation: hc-pop .5s var(--hc-spring) both; transition: transform .25s var(--hc-spring);
}
.hcm-stat::after { content: ""; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
a.hcm-stat:hover { transform: translateY(-3px); }
.hcm-stat span { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); }
.hcm-stat b { font-size: 26px; font-weight: 800; line-height: 1.05; }
.hcm-stat small { font-size: 12.5px; font-weight: 700; opacity: .92; }
.hcl-bar--mem .hc-seg { flex: 0 1 auto; }
.hcm-cat:not(.is-on) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, var(--border)); }
.hcm-cat:not(.is-on)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.hcm-cat.is-on { background: var(--c); box-shadow: 0 8px 16px -10px var(--c); }
.hcm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.hcm-card {
    position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; padding-right: 10px; border-radius: 22px; overflow: hidden;
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5);
    animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 18ms); transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hcm-card[hidden] { display: none; }
.hcm-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.hcm-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 18px 30px -20px color-mix(in srgb, var(--c) 55%, rgba(24, 49, 74, .5)); }
.hcm-card.is-byly, .hcm-card.is-zawieszony { opacity: .68; }
.hcm-card__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 4px 12px 16px; color: var(--text) !important; text-decoration: none !important; }
.hcm-card__main:active { opacity: .7; }
.hcm-avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, var(--surface)), var(--c)); box-shadow: 0 8px 14px -10px var(--c); transition: transform .35s var(--hc-spring); }
.hcm-card:hover .hcm-avatar { transform: scale(1.06); }
.hcm-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hcm-card__name { font-size: 15.5px; font-weight: 800; overflow-wrap: anywhere; }
.hcm-card__instr { font-size: 13px; font-weight: 700; color: var(--c); }
.hcm-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--text-secondary, var(--muted)); }
.hcm-card__meta .m-status { min-height: 20px; padding: 0 8px; font-size: 10.5px; }
.hcm-card__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.hcm-call { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; background: linear-gradient(160deg, #3ccf72, #23a356); box-shadow: 0 8px 14px -8px #23a356; transition: transform .25s var(--hc-spring); }
.hcm-call:active { transform: scale(.88); }
.hcm-sections .m-section { border: 0; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .5); position: relative; overflow: hidden; padding: 18px 18px 16px 22px; }
.hcm-sections .m-section::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c, var(--muted)); }
.hcm-sections .m-chip { border: 0; background: color-mix(in srgb, var(--c, var(--navy)) 7%, var(--surface)); transition: transform .25s var(--hc-spring), background .2s ease; }
.hcm-sections .m-chip:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c, var(--navy)) 13%, var(--surface)); }
.hcm-sections .m-chip .avatar { color: #fff; background: var(--c, var(--navy)); }

@media (max-width: 720px) {
    .hcl-hero .page-head__title { font-size: 32px; letter-spacing: -.02em; }
    .hcl-bar .hc-seg { flex: 1 1 100%; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: 0; background: transparent; box-shadow: none; }
    .hcl-bar .hc-seg .hc-seg__btn { background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
    .hcl-bar .hc-seg .hc-seg__btn + .hc-seg__btn { margin-left: 4px; }
    .hcl-bar .hc-seg.has-pill .hc-seg__btn.is-active { background: transparent; }
    .hcl-bar .hcr-search { flex-basis: 100%; }
    .hcl-bar .hcr-cats { margin: 0 -16px; padding: 2px 16px; }
    .hcl-rows, .hcm-grid { grid-template-columns: 1fr; gap: 8px; }
    .hcl-row__main { gap: 12px; padding: 11px 2px 11px 11px; }
    .hcl-date { width: 52px; height: 56px; border-radius: 16px; }
    .hcl-date b { font-size: 22px; }
    .hcl-act { width: 50px; height: 52px; border-radius: 15px; }
    .hcm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hcm-stat { grid-template-columns: 1fr; grid-template-rows: auto; padding: 12px; border-radius: 18px; text-align: left; }
    .hcm-stat span { grid-row: auto; width: 34px; height: 34px; border-radius: 11px; margin-bottom: 6px; }
    .hcm-stat b { font-size: 22px; }
    .hcm-stat small { font-size: 11px; }
    .hcm-avatar { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hcl-row, .hcm-card, .hcm-stat { animation: none !important; } }

/* =========================================================================
   SZCZEGÓŁY PRÓBY / WYDARZENIA „jak aplikacja” (2026-11-03, .hcd) — baner z kafelkiem daty, miękkie karty
   ========================================================================= */
.hcd-hero {
    position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: 28px; color: #fff;
    background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .24) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--c) 82%, var(--surface)) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 72%, #000) 100%);
    box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--c) 85%, #000); animation: hc-rise .5s var(--hc-ease) both;
}
.hcd-hero::after { content: ""; position: absolute; right: -50px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none; }
.hcd-date { position: relative; z-index: 1; flex: 0 0 auto; width: 70px; height: 76px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: var(--c); background: #fff; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .45); }
.hcd-date b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.hcd-date b i { font-style: normal; font-size: 17px; }
.hcd-date small { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--text-secondary, var(--muted)); }
.hcd-hero__txt { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hcd-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hcd-chip { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(255, 255, 255, .22); }
.hcd-chip.is-strong { color: var(--c); background: #fff; }
.hcd-hero__title { margin: 2px 0 0; font-size: 28px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; color: #fff; }
.hcd-hero__when { margin: 0; font-size: 15px; font-weight: 600; opacity: .95; }
.hcd-hero__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.hcd-hero__pills > span:not(.ens-badge) { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .16); }
.hcd-hero__pills .ens-badge { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.hcd .alert { border-radius: 18px; }
.hcd .dc-panel { border: 0; border-radius: 24px; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 16px 34px -26px rgba(24, 49, 74, .5); }
.hcd .dc-panel__head { gap: 10px; }
.hcd .dc-panel__icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--c); }
.hcd .dc-panel__icon svg { width: 19px; height: 19px; }
.hcd .dc-panel__title { font-size: 18px; }
.hcd .rh-map { border-radius: 14px; }
.hcd .dc-item { border-radius: 14px; transition: background .15s ease, transform .25s var(--hc-spring); }
.hcd .dc-item:hover { transform: translateX(3px); }
.hcd .dc-action { border-radius: 16px; }
@media (max-width: 720px) {
    .hcd-hero { padding: 18px; gap: 12px; border-radius: 24px; }
    .hcd-date { width: 58px; height: 64px; border-radius: 18px; }
    .hcd-date b { font-size: 25px; }
    .hcd-hero__title { font-size: 23px; }
    .hcd .dc-panel { padding: 16px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .hcd-hero { animation: none !important; } }

/* =========================================================================
   SZCZEGÓŁY WYDARZENIA — treść pod banerem (2026-11-03): Mój udział na początku z dużymi przyciskami,
   „Gdzie i jak” jako kafelki, numerowany program, „Kto będzie” z kolorowym podsumowaniem
   ========================================================================= */
.hcd .rh-grid { gap: 16px; }
.hcd .ev-my { order: -1; border: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent), 0 18px 34px -24px var(--c); }
.ev-state { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 18px; --s: #6B7A90; background: color-mix(in srgb, var(--s) 10%, var(--surface)); }
.ev-state.is-jade { --s: var(--green); }
.ev-state.is-nie_jade { --s: var(--danger, #c8332b); }
.ev-state.is-nie_wiem { --s: #D99A00; }
.ev-state.is-brak { --s: var(--purple); }
.ev-state__ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--s); box-shadow: 0 10px 18px -12px var(--s); }
.ev-state.is-brak .ev-state__ico { animation: hc-pulse 2.4s ease-in-out infinite; }
.ev-state__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-state__txt strong { font-size: 17px; font-weight: 800; color: var(--text); }
.ev-state__txt small { font-size: 13px; color: var(--text-secondary, var(--muted)); overflow-wrap: anywhere; }
/* przyciski odpowiedzi — duże, kolorowe, obok siebie */
.hcd .ev-my .dc-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.hcd .ev-my .dc-actions > form, .hcd .ev-my .dc-actions > a { flex: 1 1 140px; }
.hcd .ev-my .dc-action { justify-content: center; min-height: 54px; border-radius: 16px; box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .5); transition: transform .25s var(--hc-spring), filter .2s ease; }
.hcd .ev-my .dc-action > span:not(.dc-soon) { flex: 0 0 auto; }
.hcd .ev-my .dc-action:active { transform: scale(.95); }
.hcd .ev-my .dc-action--yellow { background: var(--green); }
.hcd .ev-my .dc-action--blue { background: color-mix(in srgb, var(--danger, #c8332b) 88%, #000); }
.hcd .ev-my .ev-btn-reset { text-align: center; }

/* Gdzie i jak — kafelki informacji */
.hcd .ev-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hcd .ev-info > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.hcd .ev-info dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.hcd .ev-info dt svg { color: var(--c); width: 15px; height: 15px; }
.hcd .ev-info dd { font-size: 14.5px; overflow-wrap: anywhere; }

/* Program — numerowane pozycje w kółkach */
.hcd .ev-program { gap: 6px; }
.hcd .ev-program__item { border-top: 0; }
.hcd .ev-program__item .dc-item { padding: 8px 10px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.hcd .ev-program__item .dc-item::before {
    content: counter(prog); flex: 0 0 auto; min-width: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-size: 14px; color: #fff; background: var(--c); box-shadow: 0 6px 12px -8px var(--c);
}
.hcd .ev-program-add .form__input, .hcd .ev-program-add .btn { border-radius: 14px; }

/* Kto będzie — kolorowe podsumowanie, filtry jak pigułki, miękkie wiersze */
.ev-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-sum__i { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; --s: #6B7A90; color: var(--s); background: color-mix(in srgb, var(--s) 11%, transparent); }
.ev-sum__i b { font-size: 16px; font-weight: 800; }
.ev-sum__i.is-jade { --s: var(--green); }
.ev-sum__i.is-nie_jade { --s: var(--danger, #c8332b); }
.ev-sum__i.is-nie_wiem { --s: #B07D00; }
.hcd .rh-attendance .dc-panel__head { flex-wrap: wrap; }
.hcd .att-tools__btn { border: 0; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); transition: background .2s ease, transform .2s var(--hc-spring); }
.hcd .att-tools__btn:active { transform: scale(.95); }
.hcd .att-tools__btn.is-active { background: var(--c); color: #fff; box-shadow: 0 8px 16px -10px var(--c); }
.hcd .rh-att { border: 0; border-radius: 16px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.hcd .rh-att-group { border-left: 0; padding-left: 4px; display: flex; align-items: center; gap: 8px; }
.hcd .rh-att-group::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.hcd .rh-att-group--blue::before { background: var(--blue); } .hcd .rh-att-group--green::before { background: var(--green); }
.hcd .rh-att-group--orange::before { background: var(--orange); } .hcd .rh-att-group--purple::before { background: var(--purple); }
.hcd .rh-att__btn { border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 90%, transparent); transition: transform .2s var(--hc-spring); }
.hcd .rh-att__btn:active { transform: scale(.93); }
.hcd .ev-changes { border: 0; border-radius: 18px; }
@media (max-width: 720px) {
    .hcd .ev-my .dc-actions > form, .hcd .ev-my .dc-actions > a { flex-basis: 100%; }
    .hcd .ev-info { grid-template-columns: 1fr 1fr; }
    .ev-sum { margin-left: 0; width: 100%; }
}

/* Panel szczegółów członka — awatar jak na liście, większy, z miękkim pierścieniem (2026-11-03) */
.hcm-avatar--lg { width: 88px; height: 88px; font-size: 30px; letter-spacing: .01em; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 14%, transparent), 0 16px 28px -14px var(--c); animation: hc-pop .5s var(--hc-spring) both; }
.drawer-profile .hcm-avatar--lg { margin: 0 auto; }

/* =========================================================================
   SZCZEGÓŁY WYDARZENIA → „Kto będzie” jak karty członków (2026-11-03, .ev-person): każda osoba na całą szerokość,
   awatar w kolorze sekcji z pierścieniem wg odpowiedzi, instrument w kolorze sekcji, przyciski jako przełącznik
   ========================================================================= */
.hcd .rh-att-list { gap: 8px; }
.hcd .rh-att.ev-person {
    position: relative; overflow: hidden; gap: 14px; padding: 12px 12px 12px 18px; border-radius: 20px;
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 10px 22px -20px rgba(24, 49, 74, .55), inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
    transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hcd .rh-att.ev-person::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.hcd .rh-att.ev-person:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 16px 28px -20px color-mix(in srgb, var(--c) 55%, rgba(24, 49, 74, .5)); }
.ev-person__av { width: 48px; height: 48px; font-size: 16px; --r: transparent; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--r), 0 8px 14px -10px var(--c); transition: box-shadow .3s ease; }
.ev-person[data-response="jade"] .ev-person__av { --r: var(--green); }
.ev-person[data-response="nie_jade"] .ev-person__av { --r: var(--danger, #c8332b); }
.ev-person[data-response="nie_wiem"] .ev-person__av { --r: #E0B400; }
.hcd .ev-person .rh-att__name { font-size: 15.5px; font-weight: 800; }
.hcd .ev-person .rh-att__who .cell-sub { font-size: 13px; font-weight: 700; color: var(--c); }
.hcd .ev-person .rh-att__who .cell-sub .ev-absent, .hcd .ev-person .rh-att__who .cell-sub .ev-present { font-weight: 800; }
/* przyciski odpowiedzi jako jeden przełącznik */
.hcd .ev-person .rh-att__btns { flex: 0 0 auto; flex-wrap: nowrap; gap: 0; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.hcd .ev-person .rh-att__btn { min-height: 38px; padding: 0 14px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; color: var(--text-secondary, var(--muted)); transition: background .25s ease, color .2s ease, transform .2s var(--hc-spring), box-shadow .25s ease; }
.hcd .ev-person .rh-att__btn:hover { color: var(--text); }
.hcd .ev-person .rh-att__btn.is-active { color: #fff; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .45); }
.hcd .ev-person .rh-att__btn--obecny.is-active { background: var(--green); }
.hcd .ev-person .rh-att__btn--nieobecny.is-active { background: var(--danger, #c8332b); }
.hcd .ev-person .rh-att__btn--usprawiedliwiony.is-active { background: #D99A00; }
.hcd .rh-att-group { margin-top: 14px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary, var(--muted)); }
@media (max-width: 720px) {
    .hcd .rh-att.ev-person { flex-wrap: wrap; gap: 10px 12px; padding: 12px 12px 12px 16px; }
    .hcd .ev-person .rh-att__who { flex: 1 1 calc(100% - 64px); }
    .hcd .ev-person .rh-att__btns { flex: 1 1 100%; }
    .hcd .ev-person .rh-att__btn { flex: 1; padding: 0 6px; }
    .ev-person__av { width: 44px; height: 44px; }
}

/* =========================================================================
   DOKUMENTY „jak aplikacja” (2026-11-03): nagłówek + przełącznik zakładek (_tabs.php), listy jako miękkie karty
   (widoki bez zmian — styl przez .hcdoc-head ~ …)
   ========================================================================= */
.hcdoc-head { margin-bottom: 14px; }
.hcdoc-bar { justify-content: space-between; }
.hcdoc-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: var(--danger, #c8332b); }
.hc-seg__btn.is-active .hcdoc-count { color: var(--orange); background: #fff; }
.hcdoc-send {
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px 0 8px; border-radius: 999px; font-size: 14.5px; font-weight: 800;
    color: #fff !important; text-decoration: none !important; background: var(--green); box-shadow: 0 12px 22px -14px var(--green), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .25s var(--hc-spring);
}
.hcdoc-send span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); }
.hcdoc-send:hover { transform: translateY(-2px); }
.hcdoc-send:active { transform: scale(.95); }
/* karta-kontener znika — zostają same miękkie wiersze */
.hcdoc-head ~ .card { padding: 0; border: 0; background: transparent; box-shadow: none; padding-bottom: 90px; }
.hcdoc-head ~ .card .m-filters { margin-bottom: 14px; }
.hcdoc-head ~ .card .dc-empty { border-radius: 20px; }
.hcdoc-head ~ .card .dc-doc-cat { position: sticky; top: 0; z-index: 2; margin: 18px 0 8px; padding: 4px 2px; font-size: 15px; background: linear-gradient(var(--bg) 70%, transparent); }
.hcdoc-head ~ .card .dc-docs { gap: 8px; }
.hcdoc-head ~ .card .dc-doc {
    gap: 10px; padding: 10px 12px; border: 0; border-radius: 20px; background: var(--surface);
    box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5);
    animation: hc-rise .45s var(--hc-ease) both; transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hcdoc-head ~ .card .dc-doc:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 18px 30px -20px rgba(24, 49, 74, .5); }
.hcdoc-head ~ .card .dc-doc__icon { width: 52px; height: 56px; border-radius: 16px; flex-direction: column; gap: 1px; transition: transform .35s var(--hc-spring); }
.hcdoc-head ~ .card .dc-doc:hover .dc-doc__icon { transform: rotate(-5deg) scale(1.05); }
.hcdoc-head ~ .card .dc-doc__icon span { font-size: 9.5px; font-weight: 900; letter-spacing: .04em; }
.hcdoc-head ~ .card .dc-doc__icon--pdf { color: #fff; background: linear-gradient(150deg, #E5585C, #C7363B); }
.hcdoc-head ~ .card .dc-doc__icon--img { color: #fff; background: linear-gradient(150deg, #5B95D6, var(--blue)); }
.hcdoc-head ~ .card .dc-doc__icon--doc { color: #fff; background: linear-gradient(150deg, #5A82D6, #2B5BB5); }
.hcdoc-head ~ .card .dc-doc__icon--xls { color: #fff; background: linear-gradient(150deg, #3CB585, #0B7A4E); }
.hcdoc-head ~ .card .dc-doc__icon--file { color: #fff; background: linear-gradient(150deg, #8A9AA0, #5D6B70); }
.hcdoc-head ~ .card .dc-doc__title { font-size: 15.5px; font-weight: 800; }
.hcdoc-head ~ .card .dc-doc__side { gap: 6px; }
.hcdoc-head ~ .card .dc-doc__side .btn--accent { border-radius: 14px; background: var(--green); }
.hcdoc-head ~ .card .dc-pill { border-radius: 999px; }
.hcdoc-head ~ .card .dc-mdoc { box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5), inset 4px 0 0 var(--ms, transparent); }
.hcdoc-head ~ .card .dc-mdoc--nowy { --ms: #E0B400; }
.hcdoc-head ~ .card .dc-mdoc--przyjety { --ms: var(--green); }
.hcdoc-head ~ .card .dc-mdoc--odrzucony { --ms: var(--danger, #c8332b); }
.hcdoc-head ~ .card .alert { border-radius: 16px; }
/* braki zgód */
.hcdoc-head ~ .dc-miss-grid .dc-panel { border: 0; border-radius: 24px; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 16px 34px -26px rgba(24, 49, 74, .5); }
.hcdoc-head ~ .dc-miss-grid .dc-panel__icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--yellow); }
.hcdoc-head ~ .dc-miss-grid .dc-miss.is-ok .dc-panel__icon { background: var(--green); }
.hcdoc-head ~ .dc-miss-grid .btn--accent { border-radius: 14px; }
@media (max-width: 720px) {
    .hcdoc-bar .hc-seg { flex: 1 1 100%; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: 0; background: transparent; box-shadow: none; }
    .hcdoc-bar .hc-seg .hc-seg__btn { background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
    .hcdoc-bar .hc-seg .hc-seg__btn + .hc-seg__btn { margin-left: 4px; }
    .hcdoc-bar .hc-seg.has-pill .hc-seg__btn.is-active { background: transparent; }
    .hcdoc-send { flex: 1 1 100%; justify-content: center; }
    .hcdoc-head ~ .card .dc-doc { flex-wrap: wrap; }
    .hcdoc-head ~ .card .dc-doc__main { flex: 1 1 100%; }
    .hcdoc-head ~ .card .dc-doc__side { flex: 1 1 100%; justify-content: flex-end; }
    .hcdoc-head ~ .card .dc-doc__icon { width: 46px; height: 50px; border-radius: 14px; }
}

/* =========================================================================
   BILETY „jak aplikacja” (2026-11-03, .hct): karty koncertów z paskiem sprzedaży; kasa — baner i kolorowe statystyki
   ========================================================================= */
.hct-scan { background: #E0534A; box-shadow: 0 12px 22px -14px #E0534A, inset 0 1px 0 rgba(255, 255, 255, .25); }
.hct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.hct-card {
    display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 14px 14px; border-radius: 24px; color: var(--text) !important; text-decoration: none !important; --c: #E0534A;
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55);
    animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hct-card.is-closed { --c: #8995a8; }
.hct-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 22px 36px -22px color-mix(in srgb, var(--c) 60%, rgba(24, 49, 74, .5)); }
.hct-card:active { transform: scale(.98); }
.hct-card__top { display: flex; align-items: center; gap: 14px; }
.hct-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.hct-card__title { font-size: 16.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.hct-card__meta { font-size: 13px; color: var(--text-secondary, var(--muted)); }
.hct-card__go { color: color-mix(in srgb, var(--muted) 55%, transparent); transition: transform .25s var(--hc-spring); }
.hct-card:hover .hct-card__go { transform: translateX(3px); }
.hct-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--navy) 8%, transparent); }
.hct-bar i { display: block; height: 100%; }
.hct-bar .is-sold { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 75%, var(--surface)), var(--green)); }
.hct-bar .is-held { background: var(--orange); opacity: .8; }
.hct-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 13px; color: var(--text-secondary, var(--muted)); }
.hct-stats b { font-size: 15px; color: var(--text); }
.hct-rev { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--purple); }
/* kasa koncertu: kolorowe statystyki */
.hct-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.hct-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5), inset 0 4px 0 var(--k); animation: hc-pop .45s var(--hc-spring) both; }
.hct-kpi small { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hct-kpi b { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--k); font-variant-numeric: tabular-nums; }
.hct-kpi b i { font-style: normal; font-size: 15px; color: var(--muted); }
.hct-kpi__bar { height: 6px; margin-top: 4px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--k) 14%, transparent); }
.hct-kpi__bar i { display: block; height: 100%; border-radius: inherit; background: var(--k); }
@media (max-width: 720px) {
    .hct-grid { grid-template-columns: 1fr; }
    .hct-kpis { grid-template-columns: 1fr 1fr; }
    .hct-scan { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================================
   KOMUNIKACJA „jak aplikacja” (2026-11-03): nagłówek + przełącznik (_tabs.php), ogłoszenia i skrzynka jako miękkie
   karty, rozmowa jak komunikator, ogłoszenie jak artykuł (styl przez .hccm-head ~ … i klasy cm-*)
   ========================================================================= */
.hccm-head { margin-bottom: 14px; }
.hccm-head ~ .card:not(.cm-chat) { padding: 0; border: 0; background: transparent; box-shadow: none; padding-bottom: 90px; }
.hccm-head ~ .card .dc-empty { border-radius: 20px; }
.hccm-head ~ .card .cm-list { gap: 8px; }
.hccm-head ~ .card .cm-item {
    position: relative; overflow: hidden; gap: 12px; padding: 14px 14px 14px 18px; border: 0; border-radius: 20px; background: var(--surface);
    box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5);
    animation: hc-rise .45s var(--hc-ease) both; transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hccm-head ~ .card .cm-item:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 18px 30px -20px rgba(24, 49, 74, .5); }
.hccm-head ~ .card .cm-item:active { transform: scale(.98); }
.hccm-head ~ .card .cm-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
.hccm-head ~ .card .cm-item.is-unread { border-left: 0; }
.hccm-head ~ .card .cm-item.is-unread::before { background: var(--purple); }
.hccm-head ~ .card .cm-item.is-important { border-left: 0; }
.hccm-head ~ .card .cm-item.is-important::before { background: var(--danger, #c8332b); }
.hccm-head ~ .card .cm-dot { width: 12px; height: 12px; }
.hccm-head ~ .card .cm-item.is-unread .cm-dot { background: var(--purple); box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 18%, transparent); animation: hc-dot 2s ease-in-out infinite; }
.hccm-head ~ .card .cm-item.is-important .cm-dot { background: var(--danger, #c8332b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger, #c8332b) 18%, transparent); }
@keyframes hc-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.hccm-head ~ .card .cm-item__title { font-size: 15.5px; }
.hccm-head ~ .card .cm-item__text { font-size: 13.5px; }
.hccm-head ~ .card .cm-item .avatar { width: 46px; height: 46px; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #D97FA2, #C2557F); box-shadow: 0 8px 14px -10px #C2557F; }
.hccm-head ~ .card .cm-count, .hccm-av { }
.hccm-head ~ .card .cm-item .cm-count { background: #C2557F; }

/* rozmowa — komunikator */
.cm-chat { border: 0 !important; border-radius: 26px !important; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 18px 40px -28px rgba(24, 49, 74, .55) !important; }
.cm-chat .cm-chat__head { padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cm-chat .hccm-av { width: 44px; height: 44px; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #D97FA2, #C2557F); }
.cm-chat .cm-chat__title { font-size: 16px; font-weight: 800; }
.cm-chat .cm-bubbles { max-height: 64vh; padding: 18px 16px; gap: 6px; background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--sun) 8%, transparent), transparent 60%), var(--bg); scroll-behavior: smooth; }
.cm-chat .cm-day { border: 0; font-size: 12px; font-weight: 700; color: var(--muted); box-shadow: 0 1px 2px rgba(24, 49, 74, .08); }
.cm-chat .cm-bubble { border: 0; border-radius: 20px 20px 20px 6px; box-shadow: 0 1px 2px rgba(24, 49, 74, .08), 0 8px 16px -14px rgba(24, 49, 74, .5); animation: hc-pop .35s var(--hc-spring) both; }
.cm-chat .cm-bubble.is-mine { border-radius: 20px 20px 6px 20px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 82%, var(--surface)), var(--yellow)); box-shadow: 0 10px 18px -14px var(--yellow); }
.cm-chat .cm-bubble.is-mine .cm-bubble__time { color: rgba(255, 255, 255, .8); }
.cm-chat .cm-bubble.is-mine .cm-bubble__who { color: #fff; opacity: .9; }
.cm-chat .cm-compose { position: sticky; bottom: 0; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.cm-chat .cm-compose textarea { min-height: 46px; max-height: 160px; border: 0; border-radius: 23px; padding: 12px 16px; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.cm-chat .cm-compose .btn { min-height: 46px; width: 46px; padding: 0; border-radius: 50%; justify-content: center; font-size: 0; gap: 0; background: var(--yellow); box-shadow: 0 10px 18px -12px var(--yellow); transition: transform .25s var(--hc-spring); }
.cm-chat .cm-compose .btn svg { width: 22px; height: 22px; }
.cm-chat .cm-compose .btn:active { transform: scale(.88); }

/* ogłoszenie — artykuł */
.cm-article { position: relative; overflow: hidden; border: 0 !important; border-radius: 26px !important; padding: 26px 24px 22px !important; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 18px 40px -28px rgba(24, 49, 74, .55) !important; animation: hc-rise .5s var(--hc-ease) both; }
.cm-article::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--yellow) 0 25%, var(--sun) 25% 50%, var(--green) 50% 75%, var(--purple) 75% 100%); }
.cm-article.is-important::before { background: var(--danger, #c8332b); }
.cm-article .cm-article__title { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.cm-article .cm-article__body { font-size: 16px; line-height: 1.65; }
.cm-article .cm-links .dc-action { border-radius: 16px; }
.cm-article ~ .dc-panel { border: 0; border-radius: 24px; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 16px 34px -26px rgba(24, 49, 74, .5); }
@media (max-width: 720px) {
    .hccm-head ~ .hcdoc-bar .hc-seg, .hcdoc-bar .hc-seg { flex: 1 1 100%; }
    .cm-chat { margin: 0 -8px; border-radius: 22px !important; }
    .cm-chat .cm-bubbles { max-height: calc(100dvh - 330px); }
    .cm-article { padding: 22px 18px 18px !important; border-radius: 22px !important; }
    .cm-article .cm-article__title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .hccm-head ~ .card .cm-dot, .cm-chat .cm-bubble, .cm-article { animation: none !important; } }

/* =========================================================================
   USTAWIENIA — zakładki w grupach jak ustawienia w telefonie (2026-11-03; wzór: MZ .mzset, kolory SMOK-a)
   Komputer: kolumna z lewej (przyklejona); telefon: rozwijany przycisk z bieżącą zakładką.
   ========================================================================= */
.hcset-mob { display: none; }
.hcset-group__ico { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5); }
.hcset-g--kapela  { background: linear-gradient(145deg, color-mix(in srgb, var(--green) 70%, var(--surface)), var(--green)); }
.hcset-g--miejsca { background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 70%, var(--surface)), var(--yellow)); }
.hcset-g--system  { background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 70%, var(--surface)), var(--blue)); }
.hcset-group { margin-bottom: 16px; }
.hcset-group__label { display: flex; align-items: center; gap: 9px; margin: 0 4px 7px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary, var(--muted)); }
.hcset-group__items { border-radius: 18px; background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5); }
.hcset-link { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; font-size: 14.5px; font-weight: 700; color: var(--text) !important; text-decoration: none !important; transition: background .15s ease; }
.hcset-link + .hcset-link { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.hcset-link > span { flex: 1; min-width: 0; }
.hcset-link__chev { flex: 0 0 auto; color: color-mix(in srgb, var(--muted) 60%, transparent); transition: transform .25s var(--hc-spring); }
.hcset-link:hover { background: color-mix(in srgb, var(--yellow) 5%, var(--surface)); }
.hcset-link:hover .hcset-link__chev { transform: translateX(2px); }
.hcset-link.is-active { color: var(--yellow) !important; background: color-mix(in srgb, var(--yellow) 9%, var(--surface)); }
.hcset-link.is-active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 0 4px 4px 0; background: var(--yellow); }
.hcset-link.is-active .hcset-link__chev { color: var(--yellow); }
@keyframes hcset-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
    .content:has(> .hcset-side) { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 26px; align-content: start; align-items: start; }
    .content:has(> .hcset-side) > * { grid-column: 2; min-width: 0; max-width: none; margin-left: 0; margin-right: 0; }
    .content:has(> .hcset-side) > .hcset-side { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 0; max-height: calc(100vh - 120px); overflow-y: auto; padding: 4px 4px 20px 0; scrollbar-width: thin; animation: hcset-in .4s var(--hc-ease) both; }
    .content:has(> .hcset-side) > .hcset-head .page-head__title { font-size: 32px; letter-spacing: -.02em; }
}
@media (max-width: 899px) {
    .hcset-side { display: none; }
    .hcset-mob { display: block; position: sticky; top: 0; z-index: 15; margin: 0 0 14px; }
    .hcset-mob summary {
        display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; cursor: pointer; list-style: none;
        background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        box-shadow: 0 1px 2px rgba(24, 49, 74, .06), 0 12px 26px -20px rgba(24, 49, 74, .5);
    }
    .hcset-mob summary::-webkit-details-marker { display: none; }
    .hcset-mob__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .hcset-mob__txt small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
    .hcset-mob__txt strong { font-size: 16px; font-weight: 800; color: var(--text); }
    .hcset-mob__chev { color: var(--yellow); transition: transform .3s var(--hc-spring); }
    .hcset-mob[open] .hcset-mob__chev { transform: rotate(180deg); }
    .hcset-mob__list { margin-top: 8px; padding: 12px; max-height: 70vh; overflow-y: auto; border-radius: 20px; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 40px -18px rgba(24, 49, 74, .5); animation: hcset-in .3s var(--hc-ease) both; }
    .hcset-link { padding: 14px; font-size: 15px; }
}
/* treść ustawień — miękkie karty jak w reszcie aplikacji */
.content:has(> .hcset-side) .card, .content:has(> .hcset-side) .dc-panel { border: 0; border-radius: 22px; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .5); }
.content:has(> .hcset-side) .btn--add, .content:has(> .hcset-side) .btn--accent { border-radius: 14px; }
.hcset-g--integracje { background: linear-gradient(145deg, #B794E6, var(--purple)); }

/* Ustawienia → Integracje i API → Przegląd (2026-11-03, .hcint): kafelki ze stanem */
.hcint-lead { margin: 0 2px 14px; font-size: 14px; color: var(--text-secondary, var(--muted)); }
.hcint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding-bottom: 30px; }
.hcint-tile {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 24px; color: var(--text) !important; text-decoration: none !important;
    background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55);
    animation: hc-pop .5s var(--hc-spring) both; animation-delay: calc(var(--i, 0) * 50ms); transition: transform .3s var(--hc-spring), box-shadow .3s ease;
}
.hcint-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.hcint-tile:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 22px 36px -22px color-mix(in srgb, var(--c) 60%, rgba(24, 49, 74, .5)); }
.hcint-tile:active { transform: scale(.98); }
.hcint-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hcint-tile__ico { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, var(--surface)), var(--c)); box-shadow: 0 10px 18px -12px var(--c); transition: transform .35s var(--hc-spring); }
.hcint-tile:hover .hcint-tile__ico { transform: scale(1.08) rotate(-6deg); }
.hcint-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; --b: #8A9490; color: var(--b); background: color-mix(in srgb, var(--b) 12%, transparent); }
.hcint-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--b); }
.hcint-tile.is-on .hcint-badge { --b: var(--green); }
.hcint-tile.is-on .hcint-badge i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); animation: hc-dot 2.2s ease-in-out infinite; }
.hcint-tile.is-warn .hcint-badge { --b: #C08600; }
.hcint-tile__name { font-size: 17px; font-weight: 800; }
.hcint-tile__state { font-size: 14px; font-weight: 800; color: var(--c); }
.hcint-tile__desc { flex: 1; font-size: 13px; line-height: 1.45; color: var(--text-secondary, var(--muted)); overflow-wrap: anywhere; }
.hcint-tile__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13.5px; font-weight: 800; color: var(--c); }
.hcint-tile:hover .hcint-tile__cta svg { transform: translateX(3px); }
.hcint-tile__cta svg { transition: transform .25s var(--hc-spring); }
@media (max-width: 720px) { .hcint-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   USTAWIENIA → ZESPOŁY I PROJEKTY (2026-11-03, .hce) — kafelki w kolorze zespołu (wzór: MZ Rodzaje zleceń)
   ========================================================================= */
.hce-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 18px; margin-bottom: 16px; }
.hce-head p { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary, var(--muted)); }
.hce-head__acts { display: flex; gap: 8px; }
.hce-add { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 800; color: #fff !important; text-decoration: none !important; background: var(--green); box-shadow: 0 10px 18px -12px var(--green); transition: transform .25s var(--hc-spring); }
.hce-add--proj { background: var(--purple); box-shadow: 0 10px 18px -12px var(--purple); }
.hce-add:hover { transform: translateY(-2px); }
.hce-add:active { transform: scale(.95); }
.hce-empty__plus { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--green); }
.hce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding-bottom: 30px; }
.hce-tile {
    position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 24px; background: var(--surface);
    box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55);
    animation: hc-pop .5s var(--hc-spring) both; animation-delay: calc(var(--i, 0) * 45ms); transition: transform .3s var(--hc-spring), box-shadow .3s ease;
}
.hce-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); }
.hce-tile.is-project::before { background: repeating-linear-gradient(135deg, var(--c) 0 10px, color-mix(in srgb, var(--c) 60%, var(--surface)) 10px 20px); }
.hce-tile:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 22px 36px -22px color-mix(in srgb, var(--c) 60%, rgba(24, 49, 74, .5)); }
.hce-tile.is-inactive { opacity: .6; filter: grayscale(.4); }
.hce-tile.is-inactive:hover { opacity: 1; filter: none; }
.hce-tile.is-dragging { opacity: .5; transform: scale(.97); }
.hce-handle { position: absolute; top: 14px; right: 12px; z-index: 2; color: var(--muted); cursor: grab; }
.hce-tile__main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 16px 10px; color: var(--text) !important; text-decoration: none !important; }
.hce-badge { min-width: 54px; height: 54px; padding: 0 12px; border-radius: 17px; display: grid; place-items: center; margin-bottom: 8px; font-size: 18px; font-weight: 900; letter-spacing: .02em; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, var(--surface)), var(--c)); box-shadow: 0 10px 18px -12px var(--c), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .35s var(--hc-spring); }
.hce-tile:hover .hce-badge { transform: scale(1.07) rotate(-5deg); }
.hce-tile__name { font-size: 17px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.hce-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--c); }
.hce-parts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hce-parts em { font-style: normal; font-size: 12px; color: var(--muted); }
.hce-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12.5px; color: var(--text-secondary, var(--muted)); }
.hce-stats b { font-size: 14px; color: var(--text); }
.hce-acts { display: flex; justify-content: flex-end; gap: 4px; padding: 0 10px 10px; }
.hce-acts .btn--icon { background: color-mix(in srgb, var(--navy) 5%, transparent); }
@media (max-width: 720px) {
    .hce-head__acts { flex: 1 1 100%; }
    .hce-add { flex: 1; justify-content: center; }
    .hce-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hce-tile__main { padding: 18px 12px 8px; }
    .hce-badge { min-width: 46px; height: 46px; font-size: 16px; border-radius: 15px; }
    .hce-tile__name { font-size: 15.5px; }
}
@media (max-width: 400px) { .hce-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   KALENDARZ → CAŁY ROK (2026-11-03, .hcy) — 12 kart miesięcy, dni z kropkami, bieżący miesiąc wyróżniony
   ========================================================================= */
.hcy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.hcy-month {
    padding: 12px 12px 14px; border-radius: 22px; background: var(--surface);
    box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .5);
    animation: hc-pop .45s var(--hc-spring) both; animation-delay: calc(var(--i, 0) * 30ms); transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hcy-month:hover { transform: translateY(-2px); }
.hcy-month.is-current { box-shadow: 0 0 0 2px var(--yellow), 0 18px 32px -22px var(--yellow); }
.hcy-month.is-past { opacity: .78; }
.hcy-month__head { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; padding: 4px 6px; border-radius: 12px; font-size: 16px; font-weight: 800; color: var(--text) !important; text-decoration: none !important; transition: background .2s ease; }
.hcy-month__head span { flex: 1; }
.hcy-month__head em { font-style: normal; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--navy); }
.hcy-month.is-current .hcy-month__head { color: var(--yellow) !important; }
.hcy-month.is-current .hcy-month__head em { background: var(--yellow); }
.hcy-month__head svg { color: color-mix(in srgb, var(--muted) 60%, transparent); transition: transform .25s var(--hc-spring); }
.hcy-month__head:hover { background: color-mix(in srgb, var(--navy) 5%, transparent); }
.hcy-month__head:hover svg { transform: translateX(3px); }
.hcy-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.hcy-dow { padding-bottom: 4px; text-align: center; font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.hcy-dow.is-we { color: var(--yellow); }
.hcy-day {
    position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 10px; font-size: 13px; font-weight: 600;
    color: var(--text) !important; text-decoration: none !important; font-variant-numeric: tabular-nums; transition: background .15s ease, transform .2s var(--hc-spring);
}
.hcy-day.is-out { pointer-events: none; }
.hcy-day:hover { background: color-mix(in srgb, var(--navy) 7%, transparent); }
.hcy-day:active { transform: scale(.88); }
.hcy-day.is-off { color: var(--yellow) !important; }
.hcy-day.is-sat { color: var(--blue) !important; }
.hcy-day.has-ev { font-weight: 800; background: color-mix(in srgb, var(--d) 14%, transparent); }
.hcy-day.has-ev::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--d); }
.hcy-day.is-today { color: #fff !important; background: var(--yellow); box-shadow: 0 6px 12px -6px var(--yellow); }
.hcy-day.is-today::after { background: #fff; }
@media (max-width: 720px) {
    .hcy-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hcy-month { padding: 10px 8px 10px; border-radius: 18px; }
    .hcy-month__head { font-size: 14px; margin-bottom: 4px; }
    .hcy-day { font-size: 11px; border-radius: 7px; }
    .hcy-dow { font-size: 9px; }
    .hcy-day.has-ev::after { width: 4px; height: 4px; margin-left: -2px; bottom: 2px; }
}

/* =========================================================================
   LOGOWANIE „jak aplikacja”, po ludowemu (2026-11-03, body.sm-auth): zieleń z płynnymi plamami kolorów SMOK-a,
   ludowe kwiaty, logo z pulsującą obwódką, karta z paskiem 4 kolorów, pływające etykiety, „pokaż hasło”
   ========================================================================= */
body.sm-auth { position: relative; overflow-x: hidden; min-height: 100vh; min-height: 100dvh; gap: 18px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--navy) 80%, var(--surface)) 0%, var(--navy) 55%, color-mix(in srgb, var(--navy) 75%, #000) 100%); }
.hc-auth__bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hc-auth__bg i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .38; animation: hc-blob 18s ease-in-out infinite alternate; }
.hc-auth__bg i:nth-child(1) { background: #106B18; left: -14vmax; top: -16vmax; }
.hc-auth__bg i:nth-child(2) { background: #317BB5; right: -18vmax; top: 10vh; animation-delay: -5s; opacity: .26; }
.hc-auth__bg i:nth-child(3) { background: #6A4FB5; left: 10vw; bottom: -22vmax; animation-delay: -9s; }
.hc-auth__bg i:nth-child(4) { background: #2E9E4F; right: -10vmax; bottom: -14vmax; animation-delay: -13s; opacity: .3; }
@keyframes hc-blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vmax, -3vmax) scale(1.08); } 100% { transform: translate(-3vmax, 3vmax) scale(.95); } }
.hc-auth__flower { position: absolute; width: 170px; height: 170px; opacity: .22; animation: hc-spin 60s linear infinite; }
.hc-auth__flower--a { left: -40px; bottom: -40px; }
.hc-auth__flower--b { right: -46px; top: -46px; width: 200px; height: 200px; animation-direction: reverse; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
body.sm-auth .auth__brand, body.sm-auth .auth__card, body.sm-auth .auth__foot, .hc-auth__motto { position: relative; z-index: 1; }
body.sm-auth .auth__brand { animation: hc-pop .7s var(--hc-spring) both; }
body.sm-auth .brand__img { box-shadow: 0 0 0 8px rgba(255, 255, 255, .1), 0 24px 50px -18px rgba(0, 0, 0, .55); animation: hc-ring 3.2s ease-in-out infinite; }
@keyframes hc-ring { 0%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, .1), 0 24px 50px -18px rgba(0, 0, 0, .55); } 50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, .05), 0 24px 50px -18px rgba(0, 0, 0, .55); } }
body.sm-auth .auth__card {
    position: relative; overflow: hidden; max-width: 410px; padding: 30px 26px 26px; border: 0; border-radius: 28px; color: var(--text);
    background: color-mix(in srgb, #fff 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .6); animation: hc-rise .6s .1s var(--hc-ease) both;
}
body.sm-auth .auth__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #106B18 0 25%, #317BB5 25% 50%, #2E9E4F 50% 75%, #6A4FB5 75% 100%); }
.hc-login__title { margin: 0 0 4px; font-size: 25px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.hc-login__sub { margin: 0 0 18px; font-size: 14.5px; color: var(--text-secondary, var(--muted)); }
.hc-login__form { display: flex; flex-direction: column; gap: 12px; }
.hc-field { position: relative; display: block; }
.hc-field__ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; transition: color .2s ease; }
.hc-field__input {
    width: 100%; height: 58px; padding: 20px 46px 6px 46px; border: 0; border-radius: 16px; font: inherit; font-size: 16px; color: var(--text);
    background: color-mix(in srgb, var(--navy) 6%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 10%, transparent);
    outline: none; transition: box-shadow .2s ease, background .2s ease;
}
.hc-field__input:focus { background: #fff; box-shadow: inset 0 0 0 2px #106B18, 0 10px 22px -16px #106B18; }
.hc-field__lbl { position: absolute; left: 46px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--muted); pointer-events: none; transition: top .2s ease, font-size .2s ease, color .2s ease, transform .2s ease; }
.hc-field__input:focus ~ .hc-field__lbl, .hc-field__input:not(:placeholder-shown) ~ .hc-field__lbl { top: 15px; transform: none; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: #106B18; }
.hc-field:focus-within .hc-field__ico { color: #106B18; }
.hc-field__eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: transparent; cursor: pointer; transition: color .2s ease, background .2s ease; }
.hc-field__eye:hover, .hc-field__eye.is-on { color: #106B18; background: color-mix(in srgb, #106B18 9%, transparent); }
.hc-login__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 58px; margin-top: 6px; border: 0; border-radius: 16px; cursor: pointer;
    font: inherit; font-size: 16.5px; font-weight: 800; color: #fff;
    background: linear-gradient(145deg, #E8525F, #106B18 55%, #B01C30); box-shadow: 0 16px 30px -14px #106B18, inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hc-login__btn svg { transition: transform .3s var(--hc-spring); }
.hc-login__btn:hover { transform: translateY(-2px); box-shadow: 0 22px 36px -14px #106B18, inset 0 1px 0 rgba(255, 255, 255, .3); }
.hc-login__btn:hover svg { transform: translateX(4px); }
.hc-login__btn:active { transform: scale(.97); }
.hc-auth__motto { margin: 2px 0 0; font-family: "Inter", sans-serif; font-size: 24px; color: #fff; opacity: .9; transform: rotate(-4deg); animation: hc-rise .7s .3s var(--hc-ease) both; }
.hc-auth__motto::after { content: ""; display: block; width: 120px; height: 4px; margin: 4px auto 0; border-radius: 4px; background: linear-gradient(90deg, #106B18 0 25%, #317BB5 25% 50%, #2E9E4F 50% 75%, #6A4FB5 75% 100%); }
body.sm-auth .auth__foot { color: rgba(255, 255, 255, .7); }
body.sm-auth .auth__card .alert { border-radius: 14px; }
@media (max-width: 560px) {
    body.sm-auth { padding: 18px 14px; gap: 14px; }
    body.sm-auth .auth__card { padding: 26px 18px 20px; border-radius: 24px; }
    .hc-login__title { font-size: 22px; }
    .hc-auth__flower { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .hc-auth__bg i, .hc-auth__flower, body.sm-auth .brand__img { animation: none !important; } }
/* Zespoły i projekty — po 2 kafelki w wierszu (prośba usera, 2026-11-03); poniżej 400 px — jeden */
.hce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 400px) { .hce-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   USTAWIENIA → INSTRUMENTY I ROLE (2026-11-03, .hci): grupy jako karty w kolorze sekcji, wiersze z ikonami
   ========================================================================= */
.hci-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.hci-tools form { margin: 0; }
.hci-tools .hcr-cat { border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.hci-clean:hover { color: var(--danger, #c8332b) !important; }
.hci-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; padding-bottom: 30px; }
.hci-group {
    position: relative; overflow: hidden; border-radius: 24px; background: var(--surface);
    box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55);
    animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 40ms);
}
.hci-group.is-dragging { opacity: .55; }
.hci-group__head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--surface)), var(--surface)); box-shadow: inset 0 5px 0 var(--c); }
.hci-group__head .sort-handle { color: var(--muted); cursor: grab; }
.hci-group__ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, var(--surface)), var(--c)); box-shadow: 0 8px 14px -10px var(--c); }
.hci-group__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hci-group__txt strong { font-size: 16.5px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.hci-group__txt small { font-size: 12px; font-weight: 700; color: var(--c); }
.hci-group__head .row-actions { display: inline-flex; gap: 2px; }
.hci-empty { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--muted); }
.hci-list { list-style: none; margin: 0; padding: 4px 0; }
.hci-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 10px; transition: background .15s ease; }
.hci-item + .hci-item { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.hci-item:hover { background: color-mix(in srgb, var(--c) 5%, transparent); }
.hci-item.is-dragging { background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.hci-item .sort-handle { color: color-mix(in srgb, var(--muted) 70%, transparent); cursor: grab; }
.hci-item__ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.hci-item.is-role .hci-item__ico { color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); }
.hci-item__name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.hci-role { display: inline-flex; padding: 1px 7px; margin-left: 4px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); vertical-align: 1px; }
.hci-item .row-actions { display: inline-flex; gap: 2px; opacity: .7; transition: opacity .2s ease; }
.hci-item:hover .row-actions { opacity: 1; }
.hci-add { display: flex; align-items: center; gap: 8px; margin: 4px 10px 12px; padding: 8px 12px 8px 6px; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--c) 35%, var(--border)); font-size: 13.5px; font-weight: 800; color: var(--c) !important; text-decoration: none !important; transition: background .2s ease, border-color .2s ease; }
.hci-add span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); }
.hci-add:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, transparent); }
@media (max-width: 900px) { .hci-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .hci-item .row-actions { opacity: 1; } }
/* Ustawienia → Funkcje członków (2026-11-03): kafelki .hce + kłódka „w użyciu”, nieprzypisane lżejsze */
.hcf .hce-tile.is-unused .hce-badge { opacity: .75; }
.hcf-lock { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }

/* =========================================================================
   USTAWIENIA → UŻYTKOWNICY (2026-11-03, .hcu; wzór: MZ .mzus) — karty osób, awatar w kolorze roli
   ========================================================================= */
.hcu { padding-bottom: 90px; }
.hcu .hcl-bar .hcr-search { flex: 1 1 100%; max-width: 520px; }
.hcu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hcu-card {
    position: relative; display: flex; align-items: flex-start; gap: 6px; padding-right: 10px; border-radius: 22px; overflow: hidden; background: var(--surface);
    box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5);
    animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 30ms); transition: transform .25s var(--hc-spring), box-shadow .25s ease;
}
.hcu-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.hcu-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 18px 30px -20px color-mix(in srgb, var(--c) 55%, rgba(24, 49, 74, .5)); }
.hcu-card.is-me { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent), 0 14px 28px -20px var(--c); }
.hcu-card.is-off { opacity: .65; }
.hcu-card.is-off:hover { opacity: 1; }
.hcu-card__main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px 14px 16px; color: var(--text) !important; text-decoration: none !important; }
.hcu-avatar { position: relative; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, var(--surface)), var(--c)); box-shadow: 0 8px 16px -10px var(--c); }
.hcu-avatar i { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: #A7AFBA; box-shadow: 0 0 0 3px var(--surface); }
.hcu-avatar i.is-on { background: #3CC47C; }
.hcu-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hcu-card__name { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.hcu-me, .hcu-off { display: inline-flex; padding: 1px 8px; margin-left: 4px; border-radius: 999px; font-size: 11px; font-weight: 800; vertical-align: 2px; }
.hcu-me { color: #fff; background: var(--c); }
.hcu-off { color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); }
.hcu-card__login { font-size: 12.5px; font-weight: 600; color: var(--text-secondary, var(--muted)); overflow-wrap: anywhere; }
.hcu-role { margin-top: 3px; font-size: 12.5px; }
.hcu-role .access-summary { margin-top: 3px; font-size: 12px; color: var(--text-secondary, var(--muted)); }
.hcu-card .user-ens { margin-top: 2px; }
.hcu-last { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.hcu-acts { flex: 0 0 auto; padding-top: 12px; }
.hcu-acts .row-actions { display: inline-flex; gap: 2px; }
.hcu .pager { margin-top: 18px; }
@media (max-width: 900px) { .hcu-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .hcu .hcl-bar .hcr-cats { margin: 0 -16px; padding: 2px 16px; } }
/* Użytkownicy — każdy w osobnej linii (prośba usera, 2026-11-03) */
.hcu-grid { grid-template-columns: 1fr; }
/* Start na telefonie — Repertuar na całą szerokość ekranu, od krawędzi do krawędzi (prośba usera, 2026-11-03) */
@media (max-width: 720px) {
    body.sm-app .dc-grid { width: 100%; }
    body.sm-app .dc-grid .dc-panel--repertoire { align-self: stretch; width: auto; margin-left: -16px; margin-right: -16px; border-radius: 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 70%, transparent), 0 -1px 0 color-mix(in srgb, var(--border) 70%, transparent); }
    body.sm-app .dc-grid .dc-panel--repertoire .dc-list { display: block; }
}
/* Użytkownicy — na komputerze jeden niski wiersz z kolumnami: osoba | rola i dostęp | zespoły | ostatnie logowanie | akcje */
.hcu-grid { gap: 8px; }
.hcu-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hcu-dash { color: var(--muted); }
@media (min-width: 900px) {
    .hcu-card { align-items: center; border-radius: 18px; }
    .hcu-card__main { align-items: center; padding: 10px 6px 10px 14px; }
    .hcu-avatar { width: 42px; height: 42px; font-size: 15px; }
    .hcu-avatar i { width: 12px; height: 12px; }
    .hcu-card__txt { display: grid; grid-template-columns: minmax(200px, 1.25fr) minmax(170px, 1fr) minmax(110px, .8fr) minmax(150px, auto); align-items: center; column-gap: 18px; }
    .hcu-card__name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hcu-card__login { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hcu-role { margin-top: 0; min-width: 0; }
    .hcu-role .access-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hcu-ens .user-ens { margin: 0; }
    .hcu-last { margin-top: 0; white-space: nowrap; }
    .hcu-acts { padding-top: 0; }
}
/* Użytkownicy — jednak po 2 w rzędzie, trochę wyżej: układ piętrowy, ale zwarty (prośba usera, 2026-11-03) */
@media (min-width: 900px) {
    .hcu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hcu-card { align-items: flex-start; border-radius: 20px; }
    .hcu-card__main { align-items: flex-start; padding: 12px 4px 12px 14px; }
    .hcu-avatar { width: 46px; height: 46px; font-size: 16px; }
    .hcu-card__txt { display: flex; flex-direction: column; gap: 3px; }
    .hcu-role { margin-top: 2px; }
    .hcu-ens { margin-top: 1px; }
    .hcu-ens:has(.hcu-dash) { display: none; }
    .hcu-last { margin-top: 2px; }
    .hcu-acts { padding-top: 10px; }
}
/* Użytkownicy — wariant wybrany przez usera (2026-11-03): poziomo, 2 w rzędzie, 2 linie:
   imię + rola | login · zespoły · ostatnie logowanie; akcje z prawej. Telefon — jeden w rzędzie, ten sam układ. */
.hcu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.hcu-card { align-items: center !important; border-radius: 18px !important; }
.hcu-card__main { align-items: center !important; padding: 10px 4px 10px 14px !important; gap: 12px; }
.hcu-avatar { width: 44px !important; height: 44px !important; font-size: 15px !important; }
.hcu-card__txt { display: flex !important; flex-direction: column; gap: 4px !important; }
.hcu-l1, .hcu-l2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hcu-l1 .hcu-card__name { flex: 0 1 auto; min-width: 0; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcu-l1 .hcu-me, .hcu-l1 .hcu-off { flex: 0 0 auto; margin-left: 0; vertical-align: 0; }
.hcu-l1 .hcu-role { flex: 0 0 auto; margin: 0 0 0 auto !important; }
.hcu-l1 .hcu-role .access-summary { display: none; }
.hcu-l2 { font-size: 12.5px; color: var(--text-secondary, var(--muted)); flex-wrap: nowrap; overflow: hidden; }
.hcu-l2 .hcu-card__login { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcu-sep { flex: 0 0 auto; opacity: .5; }
.hcu-l2 .hcu-ens { flex: 0 1 auto; min-width: 0; overflow: hidden; margin: 0 !important; }
.hcu-l2 .hcu-ens .user-ens { margin: 0; flex-wrap: nowrap; }
.hcu-l2 .hcu-last { flex: 0 0 auto; margin: 0 !important; white-space: nowrap; }
.hcu-acts { padding-top: 0 !important; }
@media (max-width: 900px) { .hcu-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 480px) { .hcu-l2 { flex-wrap: wrap; } .hcu-l1 .hcu-role { margin-left: 0 !important; } .hcu-l1 { flex-wrap: wrap; } }

/* =========================================================================
   UŻYTKOWNICY — na wzór MZ (.mzus), w stylu SMOK-a (2026-11-03, .hcu2): karty w siatce, pasek 4 kolorów,
   awatar z haftowaną obwódką w kolorze roli, metryczka pod przerywaną linią, akcje na dole
   ========================================================================= */
.hcu2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.hcu2-card {
    position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 16px 12px; border-radius: 22px; overflow: hidden; background: var(--surface);
    box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55);
    animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 35ms); transition: transform .3s var(--hc-spring), box-shadow .3s ease;
}
.hcu2-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #106B18 0 25%, #317BB5 25% 50%, #2E9E4F 50% 75%, #6A4FB5 75% 100%); opacity: .85; }
.hcu2-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 22px 36px -22px color-mix(in srgb, var(--c) 55%, rgba(24, 49, 74, .5)); }
.hcu2-card.is-me { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent), 0 16px 30px -20px var(--c); }
.hcu2-card.is-off { opacity: .62; }
.hcu2-card.is-off:hover { opacity: 1; }
.hcu2-card__top { display: flex; align-items: center; gap: 12px; color: var(--text) !important; text-decoration: none !important; }
.hcu2-avatar {
    position: relative; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, var(--surface)), var(--c));
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--c) 45%, transparent), 0 10px 18px -10px var(--c);
    outline: 2px dashed color-mix(in srgb, var(--c) 40%, transparent); outline-offset: 7px; transition: transform .35s var(--hc-spring);
}
.hcu2-card:hover .hcu2-avatar { transform: rotate(-6deg) scale(1.04); }
.hcu2-avatar i { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%; background: #A7AFBA; box-shadow: 0 0 0 3px var(--surface); }
.hcu2-avatar i.is-on { background: #3CC47C; }
.hcu2-card__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; margin-left: 6px; }
.hcu2-card__name strong { font-size: 16.5px; font-weight: 800; overflow-wrap: anywhere; }
.hcu2-card__name span { font-size: 12.5px; font-weight: 700; color: var(--c); overflow-wrap: anywhere; }
.hcu2-me, .hcu2-off { flex: 0 0 auto; align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.hcu2-me { color: #fff; background: var(--c); }
.hcu2-off { color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); }
.hcu2-meta { list-style: none; margin: 0; padding: 11px 0 0; display: flex; flex-direction: column; gap: 7px; border-top: 1px dashed color-mix(in srgb, var(--c) 35%, var(--border)); }
.hcu2-meta li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-secondary, var(--muted)); }
.hcu2-meta li > svg { flex: 0 0 auto; margin-top: 2px; color: var(--c); opacity: .85; }
.hcu2-meta li > span { min-width: 0; overflow-wrap: anywhere; }
.hcu2-meta em { font-style: normal; opacity: .7; }
.hcu2-meta__role .access-summary { margin-top: 3px; font-size: 12px; }
.hcu2-meta .user-ens { margin: 0; }
.hcu2-acts { display: flex; justify-content: flex-end; margin-top: auto; }
.hcu2-acts .row-actions { display: inline-flex; gap: 4px; }
.hcu2-acts .btn--icon { background: color-mix(in srgb, var(--navy) 5%, transparent); }
@media (max-width: 720px) { .hcu2-grid { grid-template-columns: 1fr; } }
/* Ustawienia → Funkcje członków — jak Użytkownicy (.hcu2, 2026-11-03): okrągła ikona z haftowaną obwódką, metryczka, uchwyt sortowania */
.hcf2-card { padding-top: 22px; }
.hcf2-handle { position: absolute; top: 14px; right: 12px; z-index: 2; color: var(--muted); cursor: grab; }
.hcf2-card.is-dragging { opacity: .55; }
.hcf2-ico svg { width: 24px; height: 24px; }
.hcf2-card.is-unused .hcf2-ico { filter: saturate(.6); }
.hcf2-card .hcu2-meta b { color: var(--text); }
/* Ustawienia → Sale prób (2026-11-03, styl .hcu2) */
.hcv .hcu2-meta b { color: var(--text); }
.hcv-warn { color: #9A5A00 !important; }
.hcv-warn svg { color: var(--orange) !important; }
.hcv-map { font-weight: 800; color: var(--c) !important; }
.hcv .hcu2-meta small { margin-left: 4px; font-size: 11.5px; opacity: .75; }

/* Poprawka 2026-11-03: klasy pustego stanu i licznika przeniesione z MZ (.mzct-empty, .mzct-count) — w SMOK-a ich nie było */
.mzct-empty { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; border: 2px dashed color-mix(in srgb, var(--navy) 22%, var(--border)); color: var(--text) !important; text-decoration: none !important; background: color-mix(in srgb, var(--surface) 60%, transparent); transition: background .2s ease, border-color .2s ease; }
.mzct-empty:hover { background: color-mix(in srgb, var(--green) 6%, var(--surface)); border-color: var(--green); }
.mzct-empty > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mzct-empty strong { font-size: 15.5px; font-weight: 800; }
.mzct-empty small { font-size: 13px; color: var(--text-secondary, var(--muted)); }
.mzct-empty .hce-empty__plus, .mzct-empty .mzot-tile__plus { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--green); box-shadow: 0 10px 18px -12px var(--green); transition: transform .35s var(--hc-spring); }
.mzct-empty:hover .hce-empty__plus, .mzct-empty:hover .mzot-tile__plus { transform: rotate(90deg); }
.mzct-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--text-secondary, var(--muted)); background: color-mix(in srgb, var(--navy) 8%, transparent); }
/* Ustawienia → Sale koncertowe (2026-11-03, styl .hcu2) */
.hce-add--hall { background: #E0534A; box-shadow: 0 10px 18px -12px #E0534A; }
.hch-card { color: var(--text) !important; text-decoration: none !important; }
.hch .hcu2-meta b { color: var(--text); }
.hch-go { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; align-self: flex-end; font-size: 13.5px; font-weight: 800; color: var(--c); }
.hch-go svg { transition: transform .25s var(--hc-spring); }
.hch-card:hover .hch-go svg { transform: translateX(3px); }

/* Ustawienia → Sale koncertowe → sala (2026-11-03): baner z ikoną (.hcd-date--ico), układy jako miękkie karty */
.hcd-date--ico { color: var(--c); }
.hcd--hall .hcd-hero__when { display: inline-flex; align-items: center; gap: 5px; }
.hcd--hall .alert { border-radius: 18px; }
.hcd--hall .hall-layouts { gap: 14px; padding-bottom: 30px; }
.hcd--hall .hall-layout {
    position: relative; overflow: hidden; padding: 12px 12px 14px; border: 0; border-radius: 24px; background: var(--surface);
    box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55); animation: hc-rise .45s var(--hc-ease) both; transition: transform .3s var(--hc-spring), box-shadow .3s ease;
}
.hcd--hall .hall-layout::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #106B18 0 25%, #317BB5 25% 50%, #2E9E4F 50% 75%, #6A4FB5 75% 100%); opacity: .85; }
.hcd--hall .hall-layout:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 22px 36px -22px rgba(224, 83, 74, .45); }
.hcd--hall .hall-layout__preview { margin-top: 4px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--sun) 7%, #FBF9F4); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); transition: transform .3s var(--hc-spring); }
.hcd--hall .hall-layout__preview:hover { transform: scale(1.01); }
.hcd--hall .hall-layout__head { align-items: center; padding: 0 4px; }
.hcd--hall .hall-layout__head .card__title { font-size: 17px; }
.hcd--hall .hall-layout__head .row-actions { display: inline-flex; align-items: center; gap: 4px; }
.hcd--hall .hall-layout__head .btn--accent { border-radius: 12px; background: #E0534A; }
.hcd--hall .hall-layout__head .btn--icon { background: color-mix(in srgb, var(--navy) 5%, transparent); }

/* „+” z menu (2026-11-03, .hc-fabm): gdy da się dodać dwie rzeczy (np. Zespół / Projekt) — „+” obraca się w ×
   i nad nim wysuwają się pozycje do wyboru */
.hc-fabm { position: fixed; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hc-fabm .hc-fab { position: relative; right: auto; bottom: auto; border: 0; cursor: pointer; }
.hc-fabm.is-open .hc-fabm__btn svg { transform: rotate(45deg); }
.hc-fabm__menu { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.hc-fabm__item {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; font-size: 14.5px; font-weight: 800; white-space: nowrap;
    color: var(--text) !important; text-decoration: none !important; background: var(--surface); box-shadow: 0 12px 26px -12px rgba(24, 49, 74, .55);
    opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .2s ease, transform .35s var(--hc-spring);
}
.hc-fabm__item span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 6px 12px -8px var(--c); }
.hc-fabm.is-open .hc-fabm__menu { pointer-events: auto; }
.hc-fabm.is-open .hc-fabm__item { opacity: 1; transform: none; }
.hc-fabm.is-open .hc-fabm__item:nth-last-child(2) { transition-delay: .04s; }
.hc-fabm__item:hover { transform: translateX(-3px) !important; }
@media (max-width: 720px) { .hc-fabm { right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } }

/* =========================================================================
   EDYTOR UKŁADU SALI — wygląd „jak aplikacja” (2026-11-03, .he): nagłówek, pasek narzędzi jako miękka karta z pigułkami,
   narzędzia jako przełącznik, zaokrąglone płótno i panel, legenda w plakietkach. Logika (hall-editor.js) bez zmian.
   ========================================================================= */
.he .he__head { gap: 12px; margin-bottom: 12px; }
.he .he__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.he .he__title small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #E0534A; }
.he .he__title .page-head__title { font-size: 28px; letter-spacing: -.01em; }
.he .he__status { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: color-mix(in srgb, var(--green) 12%, transparent); }
.he .he__status:empty { display: none; }
.he .he__status.is-dirty { color: #9A5A00; background: color-mix(in srgb, var(--orange) 15%, transparent); }
.he [data-he-save] { min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(145deg, #E8525F, #106B18 55%, #B01C30); box-shadow: 0 12px 22px -14px #106B18, inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .25s var(--hc-spring); }
.he [data-he-save]:hover { transform: translateY(-2px); }
.he [data-he-save]:active { transform: scale(.96); }
.he .he__toolbar { gap: 8px; padding: 10px 12px; margin-bottom: 12px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .5); }
.he .he__toolbar .btn--ghost.btn--sm { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; font-weight: 800; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); transition: background .2s ease, transform .2s var(--hc-spring); }
.he .he__toolbar .btn--ghost.btn--sm:hover { background: color-mix(in srgb, var(--navy) 11%, var(--surface)); }
.he .he__toolbar .btn--ghost.btn--sm:active { transform: scale(.95); }
.he .he__toolbar [data-he-add-sector], .he .he__toolbar [data-he-add-zone] { color: #fff; background: var(--green); box-shadow: 0 8px 14px -10px var(--green); }
.he .he__toolbar [data-he-add-zone] { background: var(--purple); box-shadow: 0 8px 14px -10px var(--purple); }
.he .he__toolbar [data-he-add-sector]:hover { background: color-mix(in srgb, var(--green) 88%, #000); }
.he .he__toolbar [data-he-add-zone]:hover { background: color-mix(in srgb, var(--purple) 88%, #000); }
.he .he__add { height: 36px; border: 0; border-radius: 999px; font-weight: 700; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); box-shadow: none; }
.he .he__sep { height: 24px; opacity: .6; }
.he .he__modes { gap: 2px; padding: 3px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--navy) 7%, var(--surface)); }
.he .he__mode { padding: 7px 13px; border-radius: 999px; font-weight: 700; transition: background .25s ease, color .2s ease, box-shadow .25s ease; }
.he .he__mode + .he__mode { border-left: 0; }
.he .he__mode.is-on { color: #fff; background: #E0534A; box-shadow: 0 6px 12px -8px #E0534A; }
.he .he__zoom { gap: 4px; padding: 3px 4px 3px 3px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.he .he__zoom .btn--icon { min-height: 30px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .1); }
.he .he__zoom .btn--ghost.btn--sm { background: var(--surface); }
.he .he__body { gap: 14px; }
.he .he__canvas { border: 0; border-radius: 24px; background: radial-gradient(120% 80% at 50% 0%, #F3EDE1, #E8E0D0); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent), 0 16px 34px -26px rgba(24, 49, 74, .5); }
.he .he__panel.card { border: 0; border-radius: 22px; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55); }
.he .he-panel__title { font-size: 17px; }
.he .he__panel .form__input { border-radius: 12px; }
.he .he__panel .btn { border-radius: 12px; }
.he .he__legend { gap: 8px; margin-top: 12px; }
.he .he__legend > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06); }
.he .he__legend .he-dot { margin: 0; }
@media (max-width: 720px) {
    .he .he__title .page-head__title { font-size: 23px; }
    .he [data-he-save] { flex: 1 1 100%; justify-content: center; }
    .he .he__toolbar { border-radius: 18px; }
    .he .he__zoom { margin-left: 0; }
    .he .he__canvas { border-radius: 18px; }
}

/* =========================================================================
   USTAWIENIA → POCZTA E-MAIL (2026-11-03, .hcmail; wzór: MZ .mzsm, kolory SMOK-a)
   ========================================================================= */
.hcmail { display: flex; flex-direction: column; gap: 14px; max-width: 920px; padding-bottom: 30px; }
.hcmail .alert { border-radius: 16px; }
.hcmail-hero {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 26px; color: #fff; cursor: pointer;
    background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(135deg, #A7AFBA 0%, #7F8895 55%, #646C78 100%);
    box-shadow: 0 18px 34px -20px #3d434c; transition: background .4s ease; animation: hc-rise .5s var(--hc-ease) both;
}
.hcmail-hero.is-on { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .24) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--green) 80%, var(--surface)) 0%, var(--green) 55%, color-mix(in srgb, var(--green) 70%, #000) 100%); box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--green) 80%, #000); }
.hcmail-hero::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.hcmail-hero__ico { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.hcmail-hero__txt { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; opacity: .96; }
.hcmail-hero__txt strong { font-size: 20px; font-weight: 800; }
.hcmail-hero input { position: absolute; opacity: 0; pointer-events: none; }
.hcmail-toggle { position: relative; z-index: 1; flex: 0 0 auto; width: 56px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .28); transition: background .25s; }
.hcmail-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .35s var(--hc-spring); }
.hcmail-hero input:checked + .hcmail-toggle { background: rgba(255, 255, 255, .45); }
.hcmail-hero input:checked + .hcmail-toggle::after { transform: translateX(24px); }
.hcmail-hero input:focus-visible + .hcmail-toggle { outline: 2px solid #fff; outline-offset: 2px; }
.hcmail-card { padding: 18px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55); }
.hcmail-lbl { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; color: var(--text); }
.hcmail-lbl small { font-weight: 600; color: var(--muted); }
.hcmail-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hcmail-presets .hcr-cat { border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.hcmail-presets .hcr-cat.is-on { background: var(--green); box-shadow: 0 8px 16px -10px var(--green); }
.hcmail-presets__other { font-size: 12.5px; color: var(--muted); }
.hcmail-note { margin: 10px 0 0; }
.hcmail-note[hidden] { display: none; }
.hcmail-h { margin: 18px 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary, var(--muted)); }
.hcmail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hcmail-grid + .hcmail-field { margin-top: 12px; }
.hcmail-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hcmail-field > span { font-size: 13px; font-weight: 700; color: var(--text); }
.hcmail-field > span small { font-weight: 600; color: var(--muted); }
.hcmail-field .form__input { border-radius: 14px; }
.hcmail-pass { display: flex; gap: 6px; align-items: center; }
.hcmail-pass .form__input { flex: 1; min-width: 0; }
.hcmail-pass .hcr-cat { flex: 0 0 auto; border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.hcmail-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 7%, var(--surface)); align-self: flex-start; }
.hcmail-seg label { position: relative; cursor: pointer; }
.hcmail-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hcmail-seg span { display: block; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-secondary, var(--muted)); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.hcmail-seg input:checked + span { color: #fff; background: var(--green); box-shadow: 0 6px 12px -8px var(--green); }
.hcmail-seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 1px; }
.hcmail-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--border) 90%, transparent); }
.hcmail-save span { font-size: 13px; color: var(--muted); }
.hcmail-save .btn { border-radius: 14px; }
.hcmail-test__row { display: flex; flex-wrap: wrap; gap: 8px; }
.hcmail-test__row .form__input { flex: 1 1 240px; min-width: 0; border-radius: 14px; }
.hcmail-test__btn { border-radius: 14px; }
@media (max-width: 720px) {
    .hcmail-grid { grid-template-columns: 1fr; }
    .hcmail-hero { padding: 16px; border-radius: 22px; flex-wrap: wrap; }
    .hcmail-save .btn { flex: 1 1 100%; }
}

/* Górny komunikat (flash: „Zapisano…”, błędy) — odstęp pod nim i miękki wygląd (prośba usera, 2026-11-03) */
.content > .alert--flash { margin-top: 0; margin-bottom: 18px; border-radius: 18px; animation: hc-rise .4s var(--hc-ease) both; }
.content > .alert--flash + .alert--flash { margin-top: -8px; }
.content:has(> .hcset-side) > .alert--flash { margin-bottom: 18px; }
/* Poczta e-mail — odstęp między banerem a kartą ustawień (są w jednym formularzu) */
.hcmail-form { display: flex; flex-direction: column; gap: 14px; }

/* =========================================================================
   USTAWIENIA → BILETY ONLINE (2026-11-03, .hcts; styl jak Poczta .hcmail)
   ========================================================================= */
.hcts-hero { cursor: default; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--m) 78%, var(--surface)) 0%, var(--m) 55%, color-mix(in srgb, var(--m) 70%, #000) 100%) !important; box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--m) 80%, #000) !important; transition: background .4s ease; }
.hcts-badge { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: rgba(255, 255, 255, .22); }
.hcts-badge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.hcts-hero.is-on .hcts-badge i { animation: hc-dot 2s ease-in-out infinite; }
.hcts-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hcts-mode { position: relative; cursor: pointer; }
.hcts-mode input { position: absolute; opacity: 0; pointer-events: none; }
.hcts-mode > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); transition: background .2s ease, box-shadow .2s ease, transform .2s var(--hc-spring); }
.hcts-mode b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; color: var(--text); }
.hcts-mode b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--m); }
.hcts-mode small { font-size: 12px; line-height: 1.35; color: var(--text-secondary, var(--muted)); }
.hcts-mode:hover > span { transform: translateY(-1px); }
.hcts-mode input:checked + span { background: color-mix(in srgb, var(--m) 10%, var(--surface)); box-shadow: inset 0 0 0 2px var(--m), 0 10px 20px -14px var(--m); }
.hcts-mode input:focus-visible + span { outline: 2px solid var(--m); outline-offset: 2px; }
.hcts-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 14px; background: color-mix(in srgb, var(--navy) 5%, var(--surface)); }
.hcts-copy code { flex: 1 1 240px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); background: none; overflow-wrap: anywhere; }
.hcts-copy .hcr-cat { border: 0; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.hcts-copy .hcr-cat.is-copied, .hcr-cat.is-copied { color: #fff !important; background: var(--green) !important; }
.hcts-copy--inline { display: inline-flex; flex-wrap: nowrap; padding: 2px 3px 2px 9px; border-radius: 10px; vertical-align: middle; }
.hcts-copy--inline code { flex: 0 1 auto; font-size: 12.5px; }
.hcts-copy--inline .hcr-cat { padding: 3px 7px; }
.hcts-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.hcts-hint { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); }
.hcts-minutes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hcts-minutes__inp { display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 12px 0 4px; border-radius: 14px; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.hcts-minutes__inp input { width: 58px; border: 0; background: none; font: inherit; font-size: 19px; font-weight: 800; text-align: center; color: var(--text); outline: none; }
.hcts-minutes__inp span { font-weight: 800; color: var(--muted); }
.hcts-minutes .hcr-cat { border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.hcts .alert--warning { margin-top: 12px; }
.hcts-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hcts-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6; color: var(--text-secondary, var(--muted)); background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.hcts-steps li > span { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(145deg, #E8525F, #106B18); }
.hcts-steps .hcr-cat { display: inline-flex; align-items: center; gap: 4px; }
.hcts-look { align-items: start; }
.hcts-logo { min-height: 72px; border-radius: 14px; display: grid; place-items: center; padding: 10px; background: linear-gradient(135deg, #18314A, #142A20); color: rgba(255, 255, 255, .55); font-size: 12px; font-weight: 700; }
.hcts-logo img { max-width: 100%; max-height: 64px; object-fit: contain; }
.hcts-area { margin-top: 12px; }
.hcts-area textarea { font-size: 14px; line-height: 1.55; }
.hcts-reset { display: flex; justify-content: flex-end; }
.hcts-reset .hcr-cat { border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.hcmail-save .hcr-cat { text-decoration: none; }
@media (max-width: 720px) {
    .hcts-modes { grid-template-columns: 1fr; }
    .hcts-copy--inline { display: flex; margin: 4px 0; }
}

/* --- Telefon: przesunięcie wiersza w lewo = akcje (jak w MZ, kolory SMOK-a), 2026-11-03; smk.js initSwipeRows --- */
.hc-sw__acts { display: none; }
@media (max-width: 720px) {
    .hc-sw { position: relative; min-width: 0; list-style: none; border-radius: var(--sw-r, 20px); animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
    .hc-sw:has(> .hc-sw__main[hidden]) { display: none; }
    .hc-sw > .hc-sw__main { position: relative; z-index: 1; width: 100%; animation: none !important; transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .2s ease !important; touch-action: pan-y; }
    .hc-sw > .hc-sw__main:hover { transform: none; }
    .hc-sw.is-swiping > .hc-sw__main { transition: none !important; }
    .hc-sw > li.hc-sw__main { list-style: none; }
    .hc-sw__acts { position: absolute; inset: 0; z-index: 0; display: flex; justify-content: flex-end; align-items: stretch; gap: 6px; padding: 0; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
    .hc-sw.is-open .hc-sw__acts, .hc-sw.is-swiping .hc-sw__acts, .hc-sw.is-full .hc-sw__acts { opacity: 1; pointer-events: auto; }
    .hc-sw__act {
        flex: 0 0 auto; width: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; padding: 0;
        border-radius: var(--sw-r, 20px); color: #fff !important; font: inherit; font-size: 11.5px; font-weight: 800; text-decoration: none !important; cursor: pointer;
        transform: scale(.7); transition: transform .35s var(--hc-spring, cubic-bezier(.34, 1.56, .64, 1)), width .3s ease, opacity .2s ease;
    }
    .hc-sw.is-open .hc-sw__act, .hc-sw.is-swiping .hc-sw__act { transform: none; }
    .hc-sw__act:active { filter: brightness(.9); }
    .hc-sw__act--call { background: linear-gradient(160deg, #3ccf72, #23a356); }
    .hc-sw__act--edit { background: linear-gradient(160deg, color-mix(in srgb, var(--orange) 80%, var(--surface)), var(--orange)); }
    .hc-sw__act--del  { background: linear-gradient(160deg, #ff5a52, var(--red, #106B18)); }
    .hc-sw.is-full .hc-sw__act:not(.hc-sw__act--del) { width: 0; opacity: 0; overflow: hidden; margin-left: -6px; }
    .hc-sw.is-full .hc-sw__act--del { flex: 1 1 auto; align-items: flex-end; padding-right: 24px; }
    .hc-sw.is-full .hc-sw__act--del svg { animation: hc-pop .3s var(--hc-spring) both; }
    /* na telefonie edycję i usuwanie robi gest — chowamy ikonki w kartach */
    .hc-sw [data-hc-sw-edit], .hc-sw form[data-hc-sw-del], .hc-sw .hcu2-acts, .hc-sw .hcm-call { display: none !important; }
    .hc-sw .hcm-card__acts:not(:has(> :not([hidden]):not(.hcm-call):not([data-hc-sw-edit]):not(form))) { display: none; }
    .hc-sw .hcm-card { padding-right: 14px; }
    .hc-sw .hce-acts:not(:has(> :not([data-hc-sw-edit]):not(form[data-hc-sw-del]))) { display: none; }
    .hci-list > .hc-sw + .hc-sw > .hc-sw__main { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
    .hci-list > .hc-sw > .hc-sw__main { background: var(--surface); }
    .hci-list .hc-sw__act { width: 62px; border-radius: 12px; margin: 3px 0; }
}

/* --- Gest „wstecz” w szczegółach (przesunięcie w prawo w dowolnym miejscu, jak MZ), 2026-11-03 --- */
@media (max-width: 720px) {
    body.sm-app .content { transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
    body.sm-app .content.hc-back-drag { transition: none; }
    body.sm-app .content.hc-back-leaving { transition: transform .2s ease-in, opacity .2s ease-in; opacity: .4; }
    .hc-swipe {
        position: fixed; left: 0; top: 50%; z-index: 80; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
        color: var(--red, #106B18); background: var(--surface, #fff); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .45); pointer-events: none;
        opacity: 0; transform: translate(-40px, -50%) scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1), background .2s ease, color .2s ease;
    }
    .hc-swipe.is-ready { color: #fff; background: var(--red, #106B18); }
    .hc-swipe.is-go { transform: translate(40px, -50%) scale(1.1) !important; }
}
.hc-swipe { display: none; }
@media (max-width: 720px) { .hc-swipe { display: grid; } }

/* =========================================================================
   OKNA „JAK APLIKACJA” — formularz .hcf (2026-11-04, próba: Nowe / Edycja wydarzenia)
   Jasne tło okna, sekcje jako białe karty z ikoną, pola z miękkim tłem i czerwoną poświatą przy fokusie,
   własne strzałki list, pigułki (radio / checkbox), segment statusu, przełącznik, „Zapisz” przyklejony na dole.
   ========================================================================= */
.modal__dialog:has(.hcf) { background: var(--bg); }
.modal__dialog:has(.hcf) .modal__head { background: var(--bg); border-bottom: 0; padding-bottom: 6px; }
.modal__dialog:has(.hcf) .modal__title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.modal__body:has(> .hcf) { padding: 6px 16px 0; }
.hcf { --hf-acc: var(--yellow); }
.hcf-sec { margin: 0 0 12px; padding: 14px 16px 6px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 10px 24px -22px rgba(24, 49, 74, .55); }
.hcf-sec__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--text); }
.hcf-sec__head small { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--muted); }
.hcf-sec__ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, var(--surface)), var(--c)); box-shadow: 0 6px 12px -8px var(--c); }
.hcf .form__row { margin-bottom: 12px; }
.hcf .form__label { display: block; margin: 0 2px 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary, var(--muted)); }
.hcf .form__hint { font-weight: 600; color: var(--muted); opacity: .85; }
.hcf .form__hint::before { content: "· "; }
.hcf .form__grid2 { gap: 0 12px; }
/* pola */
.hcf .form__input {
    width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 600; color: var(--text);
    background: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
    transition: background .2s ease, box-shadow .2s ease;
}
.hcf .form__input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); font-weight: 500; }
.hcf .form__input:hover { background: color-mix(in srgb, var(--navy) 7%, var(--surface)); }
.hcf .form__input:focus { outline: 0; background: var(--surface); box-shadow: inset 0 0 0 2px var(--hf-acc), 0 0 0 4px color-mix(in srgb, var(--hf-acc) 16%, transparent); }
.hcf textarea.form__input { min-height: 96px; line-height: 1.45; resize: vertical; }
.hcf select.form__input { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236E7B75' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; }
.hcf input[type="date"].form__input, .hcf input[type="time"].form__input { -webkit-appearance: none; appearance: none; text-align: left; }
.hcf input[type="date"]::-webkit-calendar-picker-indicator, .hcf input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
/* pigułki (radio / checkbox) */
.hcf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hcf-pill { position: relative; cursor: pointer; }
.hcf-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hcf-pill span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text);
    background: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .25s var(--hc-spring); }
.hcf-pill:active span { transform: scale(.94); }
.hcf-pill input:checked + span { color: #fff; background: var(--hf-acc); box-shadow: 0 8px 16px -10px var(--hf-acc); }
.hcf-pill input[type="checkbox"]:checked + span::before { content: "✓"; font-weight: 900; }
.hcf-pill input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-acc) 30%, transparent); }
/* segment statusu */
.hcf-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.hcf-seg__opt { position: relative; cursor: pointer; }
.hcf-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hcf-seg__opt span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--text-secondary, var(--muted)); transition: background .25s ease, color .2s ease, box-shadow .25s ease; text-align: center; }
.hcf-seg__opt input:checked + span { color: #fff; background: var(--s, var(--navy)); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .45); }
.hcf-seg__opt.is-planowane { --s: var(--blue); } .hcf-seg__opt.is-potwierdzone { --s: var(--green); } .hcf-seg__opt.is-odwolane { --s: #8995a8; }
/* zespoły (ensemble_checks) w sekcji */
.hcf-ens .form__row { margin-bottom: 8px; }
.hcf-ens .ens-check { min-height: 40px; border: 0; background: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
.hcf-ens .ens-check:has(input:checked) { color: #fff; background: var(--c); box-shadow: 0 8px 16px -10px var(--c); }
.hcf-ens .ens-check:has(input:checked)::before { color: #fff; }
/* przełącznik */
.hcf-switch { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 16px; cursor: pointer; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.hcf-switch__txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hcf-switch__txt strong { font-size: 14.5px; font-weight: 800; }
.hcf-switch__txt small { font-size: 12.5px; color: var(--muted); }
.hcf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hcf-switch i { flex: 0 0 auto; position: relative; width: 52px; height: 32px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 18%, var(--surface)); transition: background .25s ease; }
.hcf-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s var(--hc-spring); }
.hcf-switch input:checked ~ i { background: var(--green); }
.hcf-switch input:checked ~ i::after { transform: translateX(20px); }
.hcf-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 2px 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.hcf-note svg { flex: 0 0 auto; margin-top: 1px; }
/* przyklejony pasek akcji */
.hcf-actions { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 10px; margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 color-mix(in srgb, var(--border) 70%, transparent); }
.hcf-actions .btn { min-height: 52px; border-radius: 16px; font-size: 16px; font-weight: 800; }
.hcf-actions .btn--ghost { flex: 0 0 auto; padding: 0 18px; background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); }
.hcf-actions .btn--accent { flex: 1; justify-content: center; gap: 8px; color: #fff; border: 0; background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 78%, var(--surface)), var(--yellow) 60%, color-mix(in srgb, var(--yellow) 80%, #000)); box-shadow: 0 12px 22px -12px var(--yellow); }
@media (min-width: 721px) {
    .modal__dialog:has(.hcf) { max-width: 720px; }
    .hcf-actions { margin-bottom: 0; border-radius: 0 0 22px 22px; }
}
@media (max-width: 720px) {
    .hcf .form__grid2 { grid-template-columns: 1fr 1fr; }
    .hcf .form__grid2 > .form__row:has(input[type="text"]) { grid-column: 1 / -1; }
    .hcf-seg__opt span { font-size: 13px; }
}
@media (max-width: 720px) { body.sm-app .hcf-actions { padding-bottom: 12px; } } /* okno-arkusz ma już odstęp safe-area */

/* =========================================================================
   WSZYSTKIE OKNA „JAK APLIKACJA” (2026-11-04, user: „wszystkie modale na ten styl”) — styl jak .hcf,
   ale bez zmian w widokach: pola, listy, nagłówki sekcji, grupy zaznaczeń jako pigułki, pojedyncze
   zaznaczenie jako przełącznik, przyklejony pasek przycisków, okienko potwierdzenia.
   ========================================================================= */
body.sm-app .modal__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
body.sm-app .modal__body .form:not(.hcf) { --hf-acc: var(--yellow); }
/* etykiety i podpowiedzi */
body.sm-app .modal__body .form:not(.hcf) .form__row { margin-bottom: 12px; }
body.sm-app .modal__body .form:not(.hcf) .form__label { display: block; margin: 0 2px 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary, var(--muted)); }
body.sm-app .modal__body .form:not(.hcf) .form__hint { font-weight: 600; color: var(--muted); }
/* pola */
body.sm-app .modal__body .form:not(.hcf) .form__input {
    min-height: 48px; padding: 12px 14px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 600; color: var(--text);
    background-color: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
    transition: background-color .2s ease, box-shadow .2s ease;
}
body.sm-app .modal__body .form:not(.hcf) .form__input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); font-weight: 500; }
body.sm-app .modal__body .form:not(.hcf) .form__input:hover { background-color: color-mix(in srgb, var(--navy) 7%, var(--surface)); }
body.sm-app .modal__body .form:not(.hcf) .form__input:focus { outline: 0; background-color: var(--surface); box-shadow: inset 0 0 0 2px var(--hf-acc), 0 0 0 4px color-mix(in srgb, var(--hf-acc) 16%, transparent); }
body.sm-app .modal__body .form:not(.hcf) textarea.form__input { min-height: 96px; line-height: 1.45; }
body.sm-app .modal__body .form:not(.hcf) select.form__input:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236E7B75' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; }
body.sm-app .modal__body .form:not(.hcf) input[type="color"].form__input { padding: 6px; min-height: 48px; }
/* nagłówki sekcji */
body.sm-app .modal__body .form:not(.hcf) .form__subhead { display: flex; align-items: center; gap: 9px; margin: 20px 0 12px; padding-top: 16px; font-size: 15px; font-weight: 800; color: var(--text); border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
body.sm-app .modal__body .form:not(.hcf) .form__subhead::before { content: ""; flex: 0 0 auto; width: 6px; height: 18px; border-radius: 3px; background: linear-gradient(var(--yellow), var(--sun)); }
body.sm-app .modal__body .form:not(.hcf) > .form__subhead:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
/* pojedyncze zaznaczenie = przełącznik (tekst z lewej, przełącznik z prawej) */
body.sm-app .modal__body .form:not(.hcf) .form__check {
    position: relative; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; margin: 4px 0 12px; padding: 10px 14px; border-radius: 16px; cursor: pointer; font-size: 14.5px; font-weight: 700;
    background: color-mix(in srgb, var(--navy) 4%, var(--surface));
}
body.sm-app .modal__body .form:not(.hcf) .form__check > span { flex: 1; min-width: 0; }
body.sm-app .modal__body .form:not(.hcf) .form__check > input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; flex: 0 0 auto; position: relative; width: 52px; height: 32px; margin: 0; border-radius: 999px; cursor: pointer;
    background: color-mix(in srgb, var(--navy) 18%, var(--surface)); transition: background .25s ease;
}
body.sm-app .modal__body .form:not(.hcf) .form__check > input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s var(--hc-spring); }
body.sm-app .modal__body .form:not(.hcf) .form__check > input[type="checkbox"]:checked { background: var(--green); }
body.sm-app .modal__body .form:not(.hcf) .form__check > input[type="checkbox"]:checked::after { transform: translateX(20px); }
body.sm-app .modal__body .form:not(.hcf) .form__check > input:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-acc) 30%, transparent); }
/* grupa zaznaczeń (kilka obok siebie, np. sekcje, utwory) = pigułki */
body.sm-app .modal__body .form:not(.hcf) :is(div, fieldset):has(> .form__check ~ .form__check) { display: flex; flex-wrap: wrap; gap: 8px; }
body.sm-app .modal__body .form:not(.hcf) :is(div, fieldset):has(> .form__check ~ .form__check) > .form__check {
    display: inline-flex; flex-direction: row; min-height: 0; margin: 0; padding: 0; background: none; border-radius: 999px;
}
body.sm-app .modal__body .form:not(.hcf) :is(div, fieldset):has(> .form__check ~ .form__check) > .form__check > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.sm-app .modal__body .form:not(.hcf) :is(div, fieldset):has(> .form__check ~ .form__check) > .form__check > span {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text);
    background: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .25s var(--hc-spring);
}
body.sm-app .modal__body .form:not(.hcf) :is(div, fieldset):has(> .form__check ~ .form__check) > .form__check:active > span { transform: scale(.94); }
body.sm-app .modal__body .form:not(.hcf) :is(div, fieldset):has(> .form__check ~ .form__check) > .form__check > input:checked + span { color: #fff; background: var(--hf-acc); box-shadow: 0 8px 16px -10px var(--hf-acc); }
body.sm-app .modal__body .form:not(.hcf) :is(div, fieldset):has(> .form__check ~ .form__check) > .form__check > input:checked + span::before { content: "✓"; font-weight: 900; }
body.sm-app .modal__body .form:not(.hcf) :is(div, fieldset):has(> .form__check ~ .form__check) > .form__check > input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-acc) 30%, transparent); }
/* zespoły / projekty (ensemble_checks) */
body.sm-app .modal__body .ens-check { min-height: 40px; border: 0; background: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); transition: background .2s ease, color .2s ease, transform .25s var(--hc-spring); }
body.sm-app .modal__body .ens-check:active { transform: scale(.94); }
body.sm-app .modal__body .ens-check:has(input:checked) { color: #fff; background: var(--c); box-shadow: 0 8px 16px -10px var(--c); }
body.sm-app .modal__body .ens-check:has(input:checked)::before { color: #fff; }
/* wgrywanie plików */
body.sm-app .modal__body .rp-drop { border-radius: 20px; border-width: 2px; background: color-mix(in srgb, var(--navy) 3%, var(--surface)); transition: background .2s ease, border-color .2s ease; }
body.sm-app .modal__body .rp-drop:hover { background: color-mix(in srgb, var(--yellow) 5%, var(--surface)); border-color: var(--yellow); }
/* przyklejony pasek przycisków */
body.sm-app .modal__body:has(> .form:not(.hcf) > .form__actions:last-child) { padding-bottom: 0; }
body.sm-app .modal__body .form:not(.hcf) > .form__actions:last-child {
    position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; margin: 8px -18px 0; padding: 12px 18px;
    background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--border) 70%, transparent);
}
body.sm-app .modal__body .form__actions .btn { min-height: 50px; border-radius: 16px; font-size: 15.5px; font-weight: 800; }
body.sm-app .modal__body .form:not(.hcf) > .form__actions:last-child .btn--accent { flex: 1 1 auto; justify-content: center; }
body.sm-app .modal__body .form:not(.hcf) > .form__actions:last-child .btn--right { order: -1; margin-left: 0; flex: 0 0 auto; }
body.sm-app .modal__body .form__actions .btn--accent { color: #fff; border: 0; background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 78%, var(--surface)), var(--yellow) 60%, color-mix(in srgb, var(--yellow) 80%, #000)); box-shadow: 0 12px 22px -12px var(--yellow); }
body.sm-app .modal__body .form__actions .btn--ghost { background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); }
/* okienko potwierdzenia (usuwanie, odłączanie) */
body.sm-app .modal__body > p:first-child:has(+ .form__actions--confirm) { margin: 2px 2px 18px; font-size: 16px; line-height: 1.5; }
body.sm-app .modal__body .form__actions--confirm { gap: 10px; }
body.sm-app .modal__body .form__actions--confirm .btn { min-height: 52px; border-radius: 16px; }
body.sm-app .modal__body .form__actions--confirm .btn--primary { color: #fff; border: 0; background: linear-gradient(145deg, #4DA3F0, var(--blue)); }
/* komunikaty w oknach */
body.sm-app .modal__body .alert { border-radius: 16px; }
@media (max-width: 720px) {
    body.sm-app .modal__body .form:not(.hcf) > .form__actions:last-child { padding-bottom: 12px; }
    body.sm-app .modal__body .form:not(.hcf) .form__grid3, body.sm-app .modal__body .form:not(.hcf) .m-grid3 { gap: 0 10px; }
}

/* Ustawienia → Zespół / projekt: kolor jak w MZ (podgląd kafelka + paleta kółek) i „Rodzaj” jako pigułki (2026-11-04) */
.ec-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; padding: 18px; border-radius: 20px; background: color-mix(in srgb, var(--navy) 4%, transparent); }
.ec-preview__lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ec-card {
    display: flex; align-items: center; gap: 12px; min-width: 240px; max-width: 100%; padding: 12px 18px 12px 12px; border-radius: 18px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, var(--surface)) 0%, var(--surface) 80%);
    box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--c) 70%, rgba(0, 0, 0, .4)), inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, var(--border)), inset 0 4px 0 var(--c);
    transition: background .25s ease, box-shadow .25s ease;
}
.ec-card.is-bump { animation: hc-pop .35s var(--hc-spring); }
.ec-card__badge { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 14px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 75%, var(--surface)), var(--c)); box-shadow: 0 8px 16px -10px var(--c); white-space: nowrap; }
.ec-card__txt { display: flex; flex-direction: column; min-width: 0; }
.ec-card__txt strong { font-size: 16px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-card__txt small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.ec-card__txt small i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ec-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.ec-sw { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .25s var(--hc-spring), box-shadow .2s ease; }
.ec-sw:hover { transform: scale(1.12); }
.ec-sw.is-on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--sw, var(--yellow)); transform: scale(1.06); }
.ec-sw.is-on::after { content: ""; position: absolute; inset: 0; background: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.ec-sw--custom { overflow: hidden; background: conic-gradient(from 0deg, #d7263d, #f2b705, #8bbf3f, #2a9d8f, #2f80d8, #7544d8, #c2408f, #d7263d); }
.ec-sw--custom[style] { background: var(--sw); }
.ec-sw--custom input { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); opacity: 0; cursor: pointer; }
/* „Rodzaj” — pigułki z odstępem, większa czcionka, wybrana w kolorze zespołu */
#ensForm .ens-kinds { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; }
#ensForm .ens-kinds .ch-seg__opt { position: relative; flex: 0 0 auto; margin: 0; padding: 0; cursor: pointer; }
#ensForm .ens-kinds .ch-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#ensForm .ens-kinds .ch-seg__opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15.5px; font-weight: 700; color: var(--text);
    background: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); transition: background .2s ease, color .2s ease, transform .25s var(--hc-spring); }
#ensForm .ens-kinds .ch-seg__opt:active span { transform: scale(.94); }
#ensForm .ens-kinds .ch-seg__opt input:checked + span { color: #fff; background: var(--ec, var(--yellow)); box-shadow: 0 8px 16px -10px var(--ec, var(--yellow)); }
#ensForm .ens-kinds .ch-seg__opt input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 900; }
/* „ch-seg” (wybór jednej opcji, np. instrument / rola) — w każdym oknie jako pigułki z odstępem, tekst wyśrodkowany */
body.sm-app .modal__body .ch-seg { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; }
body.sm-app .modal__body .ch-seg__opt { position: relative; flex: 0 0 auto; margin: 0; padding: 0; cursor: pointer; }
body.sm-app .modal__body .ch-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.sm-app .modal__body .ch-seg__opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15.5px; font-weight: 700; color: var(--text);
    background: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); transition: background .2s ease, color .2s ease, transform .25s var(--hc-spring); }
body.sm-app .modal__body .ch-seg__opt:active span { transform: scale(.94); }
body.sm-app .modal__body .ch-seg__opt input:checked + span { color: #fff; background: var(--ec, var(--yellow)); box-shadow: 0 8px 16px -10px var(--ec, var(--yellow)); }
body.sm-app .modal__body .ch-seg__opt input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 900; }

/* Poczta e-mail → link i okno „Gmail krok po kroku” (2026-11-04) */
.hcmail-gmail { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; font-weight: 800; color: var(--text) !important; text-decoration: none !important; background: color-mix(in srgb, #4285F4 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #4285F4 25%, transparent); transition: transform .2s var(--hc-spring); }
.hcmail-gmail[hidden] { display: none; }
.hcmail-gmail:active { transform: scale(.98); }
.hcmail-gmail span, .hcg-intro__ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); }
.hcmail-gmail b { margin-left: auto; font-size: 20px; color: #4285F4; }
.hcg-intro { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, #4285F4 7%, var(--surface)); }
.hcg-intro__ico { width: 40px; height: 40px; font-size: 18px; }
.hcg-intro p { margin: 0; line-height: 1.5; }
.hcg-steps { counter-reset: hcg; list-style: none; margin: 0 0 14px; padding: 0; }
.hcg-steps > li { counter-increment: hcg; position: relative; margin: 0 0 12px; padding: 0 0 0 44px; line-height: 1.5; }
.hcg-steps > li::before { content: counter(hcg); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #fff; background: var(--yellow); box-shadow: 0 6px 12px -8px var(--yellow); }
.hcg-dl { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.hcg-dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 4px 0; }
.hcg-dl dt { font-weight: 700; color: var(--muted); }
.hcg-dl dd { margin: 0; }
.hcg-warn { margin-bottom: 4px; }
.hcg-actions { position: sticky; bottom: 0; display: flex; gap: 10px; margin: 12px -18px 0; padding: 12px 18px; background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 color-mix(in srgb, var(--border) 70%, transparent); }
.hcg-actions .btn--accent { flex: 1; justify-content: center; }
.hcg-actions .btn--right { order: -1; margin-left: 0; }
@media (max-width: 720px) { .hcg-dl > div { grid-template-columns: 1fr; gap: 0; } }

/* --- SMOK: kolory pozycji menu wg modułu (ikona) --- */
body.sm-app .navitem[data-nav="home"]      { --nav-c: var(--yellow); }
body.sm-app .navitem[data-nav="users"]     { --nav-c: var(--blue); }
body.sm-app .navitem[data-nav="monitor"]   { --nav-c: var(--purple); }
body.sm-app .navitem[data-nav="phone"]     { --nav-c: #2E9E8F; }
body.sm-app .navitem[data-nav="calendar"]  { --nav-c: var(--orange); }
body.sm-app .navitem[data-nav="folder"]    { --nav-c: #B8860B; }
body.sm-app .navitem[data-nav="key"]       { --nav-c: #C2557F; }
body.sm-app .navitem[data-nav="car"]       { --nav-c: #3E8E6E; }
body.sm-app .navitem[data-nav="file-text"] { --nav-c: #5C6BC0; }
body.sm-app .navitem[data-nav="cog"]       { --nav-c: #6B7F99; }

/* --- warstwa wspólna (z Familo): nagłówek-hero, pigułki akcji, „+” w rogu, miękkie karty --- */
.fa-fab-src { display: none !important; }
body.sm-app .page-head.hcl-hero { align-items: flex-end; }
body.sm-app .fa-acts { display: flex; flex-wrap: wrap; gap: 8px; }
body.sm-app .fa-acts .btn, body.sm-app .fa-acts form .btn { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--navy); background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), 0 8px 18px -14px rgba(24, 49, 74, .5), inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); transition: transform .2s var(--hc-spring); }
body.sm-app .fa-acts .btn:active { transform: scale(.95); }
body.sm-app .fa-acts .inline-form { display: inline-flex; }
/* karty treści */
body.sm-app .content > .card, body.sm-app .content > section.card { border: 0; border-radius: 22px; box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55); animation: hc-rise .45s var(--hc-ease) both; }
@media (max-width: 720px) {
    body.sm-app .fa-acts { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin: 4px -16px 0; padding: 2px 16px 6px; scrollbar-width: none; }
    body.sm-app .fa-acts::-webkit-scrollbar { display: none; }
    body.sm-app .fa-acts .btn { flex: 0 0 auto; }
}

/* SMOK — tryb ciemny: menu boczne na stałym ciemnym granacie (--navy w ciemnym jest jaśniejszy, dla czytelnych napisów) */
:root[data-theme="dark"] body.sm-app .sidebar {
    background: radial-gradient(120% 34% at 0% 0%, rgba(62, 156, 72, .22) 0%, transparent 62%), linear-gradient(180deg, #16263A 0%, #0F1B29 45%, #0A131D 100%);
}
:root[data-theme="dark"] body.sm-auth { background: radial-gradient(120% 90% at 50% 0%, #1E3550 0%, #0F1B29 55%, #070D14 100%); }

/* SMOK: bez kolorowego paska pod logo w menu (user 2026-11-04) */
body.sm-app .sidebar__brand::after { display: none !important; }

/* =========================================================================
   SMOK — Pulpit „jak aplikacja” (2026-11-04, .smx)
   ========================================================================= */
body.sm-app .dc-hello__date { color: var(--blue); }
body.sm-app .dc-hello__stripe { background: linear-gradient(90deg, #106B18 0 25%, #317BB5 25% 50%, #18314A 50% 75%, #E07B00 75% 100%) !important; }
.smx-update { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #FF9A4A, #E06A00); box-shadow: 0 14px 28px -18px #E06A00; }
.smx-update__ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.smx-update__txt { flex: 1 1 200px; display: flex; flex-direction: column; }
.smx-update__txt small { opacity: .9; }
.smx-update__btn { min-height: 42px; padding: 0 16px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 800; color: #A84C00; background: #fff; }
.smx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.smx-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; min-height: 120px; padding: 16px; border-radius: 22px; color: #fff !important; text-decoration: none !important; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(145deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 80%, #000)); box-shadow: 0 16px 30px -18px var(--c); animation: hc-rise .5s var(--hc-ease) both; transition: transform .25s var(--hc-spring); }
.smx-tile:nth-child(2) { animation-delay: .05s; } .smx-tile:nth-child(3) { animation-delay: .1s; } .smx-tile:nth-child(4) { animation-delay: .15s; }
.smx-tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.smx-tile:hover { transform: translateY(-3px); }
.smx-tile:active { transform: scale(.96); }
.smx-tile__ico { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; margin-bottom: auto; background: rgba(255, 255, 255, .2); }
.smx-tile b { margin-top: 12px; font-size: 30px; font-weight: 900; line-height: 1; }
.smx-tile small { font-size: 13px; font-weight: 700; opacity: .92; }
.smx-quick { display: flex; gap: 14px; margin: 0 0 18px; padding: 4px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.smx-quick::-webkit-scrollbar { display: none; }
.smx-q { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; font-size: 12.5px; font-weight: 700; color: var(--text) !important; text-decoration: none !important; }
.smx-q span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 10px 18px -12px var(--c), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .25s var(--hc-spring); }
.smx-q:hover span { transform: translateY(-3px); }
.smx-q:active span { transform: scale(.9); }
.smx-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
.smx-panel { padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55); animation: hc-rise .5s .1s var(--hc-ease) both; }
.smx-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.smx-panel__head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; }
.smx-panel__head h2 small { margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.smx-panel__ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 6px 12px -8px var(--c); }
.smx-more { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text) !important; text-decoration: none !important; background: color-mix(in srgb, var(--navy) 7%, transparent); }
.smx-none { margin: 4px 2px; color: var(--muted); }
.smx-day { display: flex; align-items: baseline; gap: 8px; margin: 14px 2px 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.smx-day span { font-size: 14px; font-weight: 800; color: var(--text); }
.smx-evs { display: flex; flex-direction: column; gap: 6px; }
.smx-ev { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 14px; overflow: hidden; color: var(--text) !important; text-decoration: none !important; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); transition: transform .2s var(--hc-spring), background .15s ease; }
.smx-ev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.smx-ev:hover { transform: translateX(3px); background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.smx-ev__time { flex: 0 0 auto; width: 52px; display: flex; flex-direction: column; align-items: center; font-size: 15px; font-weight: 900; line-height: 1.1; color: var(--c); }
.smx-ev__time small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.smx-ev__time.is-all { font-size: 11px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.smx-ev__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.smx-ev__txt strong { font-size: 14.5px; font-weight: 800; overflow-wrap: anywhere; }
.smx-ev__txt small { font-size: 12px; color: var(--muted); }
.smx-ev__go { color: var(--muted); }
@media (min-width: 1000px) { .smx-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (max-width: 720px) {
    .smx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .smx-tile { min-height: 110px; padding: 14px; }
    .smx-tile b { font-size: 26px; }
    .smx-quick { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* =========================================================================
   SMOK — Sprzęt „jak aplikacja” (2026-11-04, .eqx): kafle-filtry, pigułki filtrów, karty zamiast tabeli
   ========================================================================= */
.smx-tile.is-active { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c), 0 16px 30px -18px var(--c); }
.eqx-bar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.eqx-bar > * { flex: 0 0 auto !important; }
.eqx-bar .hcr-search { width: 100%; }
.eqx-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.eqx-filters .form__input { flex: 1 1 160px; max-width: 260px; min-height: 42px; border: 0; border-radius: 999px; padding-left: 16px; font-weight: 600; background-color: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); }
.eqx-filters .form__input.is-filtered { box-shadow: inset 0 0 0 2px var(--yellow); }
.eqx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; }
.eqx-card { position: relative; display: flex; align-items: center; gap: 6px; padding-right: 10px; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .55); animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 16ms); transition: transform .25s var(--hc-spring); }
.eqx-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.eqx-card:hover { transform: translateY(-2px); }
.eqx-card__main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px 12px 16px; color: var(--text) !important; text-decoration: none !important; }
.eqx-ava { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #fff; background: var(--navy); box-shadow: 0 8px 14px -10px var(--c); }
.eqx-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.eqx-card__txt > strong { font-size: 15.5px; font-weight: 800; overflow-wrap: anywhere; }
.eqx-card__txt > small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.eqx-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.eqx-no { padding: 2px 8px; border-radius: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--navy) 7%, transparent); }
.eqx-type { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-secondary, var(--muted)); background: color-mix(in srgb, var(--navy) 5%, transparent); }
.eqx-type i { width: 8px; height: 8px; border-radius: 50%; }
.eqx-status { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; }
.eqx-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.eqx-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 10px 2px 2px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqx-who i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--yellow); }
.eqx-free { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #B05E00; background: color-mix(in srgb, var(--orange) 12%, transparent); }
.eqx-flags { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.eqx-flags span { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: color-mix(in srgb, var(--muted) 60%, transparent); background: color-mix(in srgb, var(--navy) 5%, transparent); }
.eqx-flags span.is-on { color: #fff; background: var(--green); }
.eqx-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 720px) {
    .eqx-list { grid-template-columns: 1fr; }
    .eqx-filters .form__input { max-width: none; }
    .hc-sw .eqx-acts { display: none !important; }
    .hc-sw .eqx-card { padding-right: 12px; }
}
/* wyszukiwanie na żywo — delikatny sygnał ładowania */
form[data-live].is-loading > svg { animation: smk-spin .8s linear infinite; }
@keyframes smk-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   SMOK — Szczegóły sprzętu „jak aplikacja” (2026-11-04, .exq)
   ========================================================================= */
.exq-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 28px; color: #fff;
    background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000) 100%);
    box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--c) 85%, #000); animation: hc-rise .5s var(--hc-ease) both; margin-bottom: 16px; }
.exq-hero::after { content: ""; position: absolute; right: -50px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none; }
.exq-hero__photo, .exq-hero__init { position: relative; z-index: 1; flex: 0 0 auto; width: 96px; height: 96px; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 14px 26px -14px rgba(0, 0, 0, .6); }
.exq-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exq-hero__init { display: grid; place-items: center; font-size: 34px; font-weight: 900; background: rgba(255, 255, 255, .18); }
.exq-hero__txt { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.exq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.exq-chips span { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; background: rgba(255, 255, 255, .2); }
.exq-chips .is-status { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.exq-hero__title { margin: 2px 0 0; font-size: 28px; font-weight: 900; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere; }
.exq-hero__sn { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; opacity: .88; }
.exq-hero__where { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.exq-who, .exq-room { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 3px 12px 3px 3px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: #fff !important; text-decoration: none !important; background: rgba(255, 255, 255, .2); }
.exq-who i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; color: var(--c); background: #fff; }
.exq-who.is-none, .exq-room { padding-left: 12px; }
.exq-locked { border-radius: 16px; }
.exq-jump { position: sticky; top: 0; z-index: 8; display: flex; gap: 6px; margin: 0 0 14px; padding: 6px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), 0 10px 24px -18px rgba(24, 49, 74, .5); }
.exq-jump::-webkit-scrollbar { display: none; }
.exq-jump a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text) !important; text-decoration: none !important; transition: background .15s ease; }
.exq-jump a:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.exq-jump b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; color: #fff; background: var(--c); }
.exq-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
.exq-main, .exq-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.exq-sec { padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55); scroll-margin-top: 70px; animation: hc-rise .45s var(--hc-ease) both; }
.exq-sec__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.exq-sec__head h2 { flex: 1; margin: 0; font-size: 16.5px; font-weight: 800; }
.exq-sec__ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c)); box-shadow: 0 6px 12px -8px var(--c); }
.exq-add { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; color: #fff !important; text-decoration: none !important; background: var(--yellow); box-shadow: 0 6px 12px -8px var(--yellow); }
.exq-add.is-ghost { color: var(--text) !important; background: color-mix(in srgb, var(--navy) 7%, var(--surface)); box-shadow: none; }
.exq-add input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.exq-add.filepicker { position: relative; overflow: hidden; }
.exq-none { margin: 2px; color: var(--muted); }
.exq-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.exq-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); min-width: 0; }
.exq-tile span { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.exq-tile strong { font-size: 14.5px; font-weight: 800; overflow-wrap: anywhere; padding-right: 26px; }
.exq-tile.is-empty strong { color: var(--muted); font-weight: 600; }
.exq-copy { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 9px; cursor: pointer; color: var(--muted); background: transparent; transition: background .15s ease, color .15s ease; }
.exq-copy:hover { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.exq-copy.is-copied { color: #fff; background: var(--green); }
.exq-copy svg { width: 15px; height: 15px; }
.exq-tile .exq-copy { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.exq-desc { display: flex; gap: 8px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; color: var(--text); background: color-mix(in srgb, var(--sun) 12%, var(--surface)); }
.exq-desc svg { flex: 0 0 auto; margin-top: 2px; color: var(--sun); }
.exq-desc p { margin: 0; line-height: 1.5; }
.exq-rows { display: flex; flex-direction: column; gap: 6px; }
.exq-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.exq-row__ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--c); }
.exq-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--text) !important; text-decoration: none !important; }
.exq-row__txt strong { font-size: 14.5px; font-weight: 800; overflow-wrap: anywhere; }
.exq-row__txt small { font-size: 12px; color: var(--muted); }
.exq-kv { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; }
.exq-kv em, .exq-secret em { font-style: normal; font-weight: 700; color: var(--muted); }
.exq-secret { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.exq-secret code { padding: 2px 7px; border-radius: 7px; background: var(--surface); }
.exq-row__acts { flex: 0 0 auto; display: flex; gap: 2px; }
.exq-ext { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 10.5px; font-weight: 900; color: #fff; background: #8995A8; }
.exq-ext--pdf { background: #D93434; } .exq-ext--jpg, .exq-ext--jpeg, .exq-ext--png, .exq-ext--webp, .exq-ext--gif { background: #2E9E8F; }
.exq-ext--doc, .exq-ext--docx { background: #2F80D8; } .exq-ext--xls, .exq-ext--xlsx, .exq-ext--csv { background: #1E8E4E; } .exq-ext--zip, .exq-ext--rar, .exq-ext--7z { background: #B8860B; }
.exq-photo { padding: 10px; }
.exq-photo__img { display: block; border-radius: 16px; overflow: hidden; }
.exq-photo__img img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.exq-photo__none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; border-radius: 16px; color: var(--muted); background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.exq-photo__acts { display: flex; gap: 8px; margin-top: 10px; }
.exq-pbtn { position: relative; overflow: hidden; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--text); background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.exq-pbtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.exq-pbtn.is-del { flex: 0 0 auto; width: 42px; color: #fff; background: #d83a31; }
.exq-where { display: flex; flex-direction: column; gap: 8px; }
.exq-where__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.exq-where__ava { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: var(--yellow); }
.exq-where__ava.is-none { color: var(--muted); background: color-mix(in srgb, var(--navy) 8%, var(--surface)); }
.exq-where__ava.is-room { border-radius: 13px; background: var(--blue); }
.exq-where__txt { display: flex; flex-direction: column; min-width: 0; }
.exq-where__txt small { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.exq-where__txt a, .exq-where__txt strong { font-size: 15px; font-weight: 800; }
.exq-where__txt em { font-style: normal; font-size: 12px; color: var(--muted); }
.exq-tl .timeline__item { border-radius: 12px; }
@media (min-width: 1000px) {
    .exq-cols { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
    .exq-side { position: sticky; top: 64px; }
}
@media (max-width: 720px) {
    .exq-hero { padding: 18px; gap: 14px; border-radius: 24px; flex-wrap: wrap; }
    .exq-hero__photo, .exq-hero__init { width: 76px; height: 76px; border-radius: 20px; }
    .exq-hero__title { font-size: 23px; }
    .exq-jump { margin-left: -16px; margin-right: -16px; border-radius: 0; }
    .exq-side { order: -1; }
    .exq-photo { display: none; }
    .hc-sw .exq-row__acts { display: none !important; }
}
/* lista sprzętu: po 2 w rzędzie na komputerze + miniatura zdjęcia (user 2026-11-04) */
@media (min-width: 900px) { .eqx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eqx-ava.has-photo { padding: 0; overflow: hidden; background: color-mix(in srgb, var(--navy) 6%, var(--surface)) !important; box-shadow: 0 0 0 2px var(--c), 0 8px 14px -10px var(--c); }
.eqx-ava.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eqx-card .eqx-ava { width: 58px; height: 58px; border-radius: 16px; }
/* lista sprzętu: zdjęcie na całą wysokość karty, od lewej krawędzi (user 2026-11-04) */
.eqx-card:has(.eqx-ava.has-photo)::before { display: none; }
.eqx-card:has(.eqx-ava.has-photo) .eqx-card__main { align-items: stretch; padding-left: 0; padding-top: 0; padding-bottom: 0; }
.eqx-card:has(.eqx-ava.has-photo) .eqx-card__txt { padding: 12px 0; }
.eqx-card .eqx-ava.has-photo { align-self: stretch; width: 118px; height: auto; min-height: 118px; border-radius: 22px 0 0 22px; box-shadow: none; background: color-mix(in srgb, var(--navy) 6%, var(--surface)) !important; position: relative; }
.eqx-card .eqx-ava.has-photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: var(--c); }
.eqx-card .eqx-ava.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .eqx-card .eqx-ava.has-photo { width: 100px; min-height: 104px; } }
/* lista sprzętu: zdjęcia są kwadratowe — kafelek zdjęcia zawsze 1:1, wysokość = wysokość karty (user 2026-11-04) */
.eqx-card .eqx-ava.has-photo { width: auto; min-width: 118px; aspect-ratio: 1 / 1; flex: 0 0 auto; }
@media (max-width: 720px) { .eqx-card .eqx-ava.has-photo { min-width: 100px; } }
/* Szczegóły sprzętu → Historia: data w osobnej linii, pod nią treść na całą szerokość sekcji (user 2026-11-04) */
.exq-tl .timeline__item { display: block; padding: 10px 12px; margin-bottom: 6px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.exq-tl .timeline__item[hidden] { display: none; }
.exq-tl .timeline__date { display: block; width: auto; min-width: 0; margin: 0 0 3px; font-size: 12px; font-weight: 800; color: var(--muted); text-align: left; white-space: normal; }
.exq-tl .timeline__body { display: block; width: 100%; font-size: 14px; line-height: 1.45; }
.exq-tl .timeline__by { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
/* Szczegóły sprzętu: jasny kolor systemu (np. żółty) → ciemny tekst i łagodniejszy gradient w banerze (user 2026-11-04) */
.exq.is-light .exq-hero { color: #15212c; background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .35) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--c) 88%, #fff) 0%, var(--c) 60%, color-mix(in srgb, var(--c) 90%, #000) 100%); }
.exq.is-light .exq-hero::after { background: rgba(255, 255, 255, .25); }
.exq.is-light .exq-chips span:not(.is-status), .exq.is-light .exq-who, .exq.is-light .exq-room { color: #15212c !important; background: rgba(0, 0, 0, .08); }
.exq.is-light .exq-chips .is-status { box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }
.exq.is-light .exq-who i { color: #fff; background: #15212c; }
.exq.is-light .exq-hero__init { color: #15212c; background: rgba(255, 255, 255, .45); }
.exq.is-light .exq-hero__photo, .exq.is-light .exq-hero__init { box-shadow: 0 0 0 4px rgba(0, 0, 0, .1), 0 14px 26px -14px rgba(0, 0, 0, .45); }
.exq.is-light .exq-jump b { color: #15212c; }
/* status w banerze zawsze w kolorach z ustawień (tło i tekst z card_palette w atrybucie style) */
.exq-chips .is-status { font-weight: 800; }
/* Szczegóły sprzętu → pasek skrótów: pełna szerokość obszaru treści, przyklejony pod górnym paskiem (user 2026-11-04) */
.exq-jump { position: sticky; top: 0; z-index: 20; margin: 0 -22px 14px; padding: 8px 22px; border-radius: 0; gap: 6px;
    background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 80%, transparent), 0 10px 20px -18px rgba(24, 49, 74, .5); }
.exq-jump a { flex: 1 0 auto; justify-content: center; background: color-mix(in srgb, var(--navy) 5%, transparent); }
.exq-jump a:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
@media (max-width: 720px) { .exq-jump { margin-left: -22px; margin-right: -22px; padding-left: 16px; padding-right: 16px; } .exq-jump a { flex: 0 0 auto; } }
/* lista sprzętu: zdjęcie 1:1 — szerokość ustawia smk.js (= wysokość karty); tu tylko bez rozciągania obrazu */
.eqx-card .eqx-ava.has-photo { aspect-ratio: auto; }
/* lista sprzętu: zdjęcie z lekkim odstępem od krawędzi karty (user 2026-11-04) */
.eqx-card .eqx-ava.has-photo { background: transparent !important; }
.eqx-card .eqx-ava.has-photo::after { display: none; }
.eqx-card .eqx-ava.has-photo img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 16px; box-shadow: 0 0 0 2px var(--c), 0 8px 16px -10px rgba(24, 49, 74, .55); }
/* lista sprzętu: margines zdjęcia 5 px (user 2026-11-04) */
.eqx-card .eqx-ava.has-photo img { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
/* lista sprzętu: margines zdjęcia 15 px (user 2026-11-04, ostatecznie) */
.eqx-card .eqx-ava.has-photo img { inset: 15px; width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 14px; }
/* lista sprzętu: bez obwódki wokół zdjęcia; pasek w kolorze systemu przy lewej krawędzi karty jak bez zdjęcia (user 2026-11-04) */
.eqx-card:has(.eqx-ava.has-photo)::before { display: block; z-index: 1; }
.eqx-card .eqx-ava.has-photo img { box-shadow: 0 6px 14px -10px rgba(24, 49, 74, .55); }
/* lista sprzętu: zdjęcie bez zaokrągleń, bez cienia i bez tła pod spodem (user 2026-11-04) */
.eqx-card .eqx-ava.has-photo { background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.eqx-card .eqx-ava.has-photo img { border-radius: 0; box-shadow: none; background: none; }

/* =========================================================================
   SMOK — Pojazdy „jak aplikacja” (2026-11-04, .vhx): karty, tablica rejestracyjna, VIN z kopiowaniem
   ========================================================================= */
.vhx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.vhx-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 10px 14px 18px; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .55); animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
.vhx-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #3E8E6E; }
.vhx-ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #5FB892, #3E8E6E); box-shadow: 0 8px 14px -10px #3E8E6E; }
.vhx-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vhx-txt > strong { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.vhx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vhx-plate { display: inline-flex; align-items: stretch; height: 30px; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 2px #15212c, 0 2px 6px -3px rgba(0, 0, 0, .35); }
.vhx-plate i { display: grid; place-items: center; width: 22px; font-style: normal; font-size: 9.5px; font-weight: 900; color: #fff; background: #1E4FB0; }
.vhx-plate b { display: grid; place-items: center; padding: 0 10px; font-family: "DIN Alternate", "Arial Narrow", ui-monospace, monospace; font-size: 16px; font-weight: 800; letter-spacing: .06em; color: #15212c; }
.vhx-cc { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary, var(--muted)); background: color-mix(in srgb, var(--navy) 6%, transparent); }
.vhx-vin { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12.5px; }
.vhx-vin em { font-style: normal; font-weight: 800; color: var(--muted); }
.vhx-vin code { padding: 2px 7px; border-radius: 7px; font-size: 12px; background: color-mix(in srgb, var(--navy) 5%, transparent); overflow-wrap: anywhere; }
.vhx-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 720px) {
    .vhx-list { grid-template-columns: 1fr; }
    .hc-sw .vhx-acts { display: none !important; }
    .hc-sw .vhx-card { padding-right: 14px; }
}

/* ===== Obsada — lista (.stx) i szczegóły osoby (.stq), 2026-11-04 ===== */
.stx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.stx-card { position: relative; display: flex; align-items: center; gap: 6px; padding-right: 10px; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .55); animation: hc-rise .45s var(--hc-ease) both; transition: transform .25s var(--hc-spring); }
.stx-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.stx-card:hover { transform: translateY(-2px); }
.stx-card__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 4px 12px 16px; color: var(--text) !important; text-decoration: none !important; }
.stx-ava { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 900; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #4F95CF, var(--blue) 55%, var(--navy)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 8px 14px -10px var(--navy); }
.stx-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stx-rank { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stx-card__txt > strong { font-size: 15.5px; font-weight: 800; overflow-wrap: anywhere; }
.stx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 3px; }
.stx-sec { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--blue); background: color-mix(in srgb, var(--blue) 11%, var(--surface)); }
.stx-go { flex: 0 0 auto; color: var(--muted); }
:root[data-theme="dark"] .stx-sec { color: #8FC1EA; }

/* szczegóły osoby */
.stq .exq-hero__init { border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .12)); }
.stq-nums { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stq-nums a { display: flex; flex-direction: column; min-width: 88px; padding: 7px 14px; border-radius: 16px; color: #fff !important; text-decoration: none !important; background: rgba(255, 255, 255, .16); transition: background .2s; }
.stq-nums a:hover { background: rgba(255, 255, 255, .26); }
.stq-nums b { font-size: 21px; font-weight: 900; line-height: 1.1; }
.stq-nums small { font-size: 11.5px; font-weight: 700; opacity: .85; }
.stq-year { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.stq-year a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; font-weight: 800; color: var(--text) !important; text-decoration: none !important; }
.stq-year a:hover { background: var(--surface); }
.stq-year b { min-width: 46px; text-align: center; font-weight: 900; }
.stq-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stq-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--orange) 9%, var(--surface)); }
.stq-stats b { font-size: 24px; font-weight: 900; line-height: 1.1; }
.stq-stats small { font-size: 12px; font-weight: 700; color: var(--muted); }
.stq-stats > .is-left { color: #fff; background: linear-gradient(135deg, #F29A2E, var(--orange)); box-shadow: 0 10px 18px -14px var(--orange); }
.stq-stats > .is-left small { color: rgba(255, 255, 255, .88); }
.stq-stats.is-bonus > div { background: color-mix(in srgb, var(--purple) 9%, var(--surface)); }
.stq-stats.is-bonus > .is-left { background: linear-gradient(135deg, #8A72D1, var(--purple)); box-shadow: 0 10px 18px -14px var(--purple); }
.stq-stats.is-ot > div { background: color-mix(in srgb, var(--green) 9%, var(--surface)); }
.stq-stats.is-ot > .is-left { background: linear-gradient(135deg, #47B866, var(--green)); box-shadow: 0 10px 18px -14px var(--green); }
.stq-sub { margin: 4px 2px 8px; font-weight: 800; }
.stq-sub small { font-weight: 600; color: var(--muted); }
.stq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.stq-hint { font-size: 12px; font-weight: 700; color: var(--muted); }
.stq-date { flex: 0 0 auto; width: 44px; height: 46px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: var(--orange); }
.stq-date b { font-size: 17px; font-weight: 900; line-height: 1; }
.stq-date small { font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.stq-leave.is-sick .stq-date { background: #C2414B; }
.stq-type { font-weight: 800; color: var(--orange); }
.stq-leave.is-sick .stq-type { color: #C2414B; }
.stq-hours { flex: 0 0 auto; min-width: 58px; height: 40px; padding: 0 8px; border-radius: 12px; display: flex; align-items: baseline; justify-content: center; gap: 1px; padding-top: 9px; font-size: 16px; font-weight: 900; color: #fff; background: var(--green); }
.stq-hours small { font-size: 11px; font-weight: 800; }
.stq-ot.is-redeem .stq-hours { color: var(--text); background: color-mix(in srgb, var(--navy) 10%, var(--surface)); }
.stq-eqrow { color: var(--text) !important; text-decoration: none !important; transition: transform .2s var(--hc-spring); }
.stq-eqrow:hover { transform: translateX(3px); }
.stq-eqrow .exq-row__ico { font-size: 13px; font-weight: 900; }
.stq-veh .vhx-list { grid-template-columns: 1fr; }
@media (max-width: 720px) {
    .hc-sw .eqx-acts { display: none !important; }
    .stx-list { grid-template-columns: 1fr; }
    .stq-stats { gap: 6px; }
    .stq-stats > div { padding: 10px; }
    .stq-stats b { font-size: 20px; }
    .stq-nums a { min-width: 0; flex: 1; padding: 6px 10px; }
    .hc-sw .exq-row__acts.stq-keep { display: flex !important; }
    .hc-sw .exq-row__acts.stq-keep > :not(:first-child) { display: none !important; }
}
/* pasek skrótów dosunięty do górnego paska (sticky liczy od wnętrza paddingu .content: 22 px, telefon 6 px) */
.exq-jump { top: -22px; }
@media (max-width: 720px) { body.sm-app .exq-jump { top: -6px; } }

/* ===== Kalendarz (2026-11-04) — układ .hcc (Heca/MZ), dodatki SMOK ===== */
.smc .smc-legend { margin-left: 0; flex-wrap: wrap; row-gap: 4px; }
.smc .smc-desc { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Pliki (2026-11-04, .flx) — ścieżka-pigułki, kafle katalogów, wiersze plików, pole wgrywania ===== */
.flx-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 12px; }
.flx-path a { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text) !important; text-decoration: none !important; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); }
.flx-path a.is-on { color: #fff !important; background: #B8860B; box-shadow: 0 8px 14px -10px #B8860B; }
.flx-path__sep { color: var(--muted); font-weight: 800; }
.flx-search { margin-bottom: 14px; }
.flx-h { display: flex; align-items: center; gap: 8px; margin: 18px 4px 10px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.flx-h b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; color: #fff; background: var(--navy); }
.flx-up { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px 0 10px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text) !important; text-decoration: none !important; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .06), 0 8px 18px -14px rgba(24, 49, 74, .5); }
.flx-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.flx-folder { position: relative; display: flex; align-items: center; gap: 4px; padding-right: 6px; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .55); animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 20ms); transition: transform .25s var(--hc-spring); }
.flx-folder:hover { transform: translateY(-2px); }
.flx-folder__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 6px 12px 12px; color: var(--text) !important; text-decoration: none !important; }
.flx-folder__main strong { min-width: 0; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.flx-folder__ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c)); box-shadow: 0 8px 14px -10px var(--c); }
.flx-acts { flex-direction: row; }
.flx-files { display: flex; flex-direction: column; gap: 8px; }
.flx-file { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .55); animation: hc-rise .45s var(--hc-ease) both; }
.flx-file__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text) !important; text-decoration: none !important; }
.flx-file__txt strong { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.flx-file__txt:hover strong { color: var(--blue); }
.flx-file__desc { font-size: 13px; color: var(--text-secondary, var(--muted)); overflow-wrap: anywhere; }
.flx-file__txt small { font-size: 12.5px; color: var(--muted); }
.flx-where { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #B8860B !important; }
.flx-file mark, .flx-folder mark { padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--sun) 35%, transparent); color: inherit; }
.flx-upform { display: block; margin-top: 18px; }
.flx-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; cursor: pointer; border: 2px dashed color-mix(in srgb, #B8860B 45%, var(--border)); background: color-mix(in srgb, #B8860B 5%, var(--surface)); transition: background .2s ease, border-color .2s ease, transform .2s var(--hc-spring); }
.flx-drop:hover { background: color-mix(in srgb, #B8860B 10%, var(--surface)); border-color: #B8860B; }
.flx-drop:active { transform: scale(.99); }
.flx-drop__ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #D4A72C, #B8860B); box-shadow: 0 10px 18px -12px #B8860B; }
.flx-drop__txt { display: flex; flex-direction: column; gap: 3px; }
.flx-drop__txt strong { font-size: 15.5px; font-weight: 800; }
.flx-drop__txt small { font-size: 13px; color: var(--muted); }
.flx-drop .filepicker__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.flx-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 16px; border-radius: 20px; text-align: center; color: var(--muted); background: var(--surface); }
@media (max-width: 720px) {
    .hc-sw .flx-acts { display: none !important; }
    .flx-folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .flx-folder__main { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
    .flx-folder__main strong { font-size: 14px; }
}

/* ===== Menu konta (2026-11-04, kopia z MZ, kolory SMOK): nagłówek z awatarem, ikony w kafelkach, przełącznik trybu ciemnego, Ustawienia ===== */
body.sm-app .user-menu__panel {
    min-width: 270px; padding: 8px; gap: 2px; border: 0; border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 24px 50px -18px rgba(12, 22, 34, .45), 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
    transform: translateY(-8px) scale(.96); transform-origin: top right;
    transition: opacity .18s ease, transform .3s var(--hc-spring), visibility 0s linear .18s;
}
body.sm-app .user-menu.is-open .user-menu__panel { transform: none; transition: opacity .18s ease, transform .35s var(--hc-spring); }
body.sm-app .user-menu__panel form { margin: 0; }
body.sm-app .user-menu__panel form .user-menu__item { width: 100%; text-align: left; }
.um-head { display: flex; align-items: center; gap: 12px; margin: 2px 2px 6px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 14%, transparent), color-mix(in srgb, var(--blue) 6%, transparent)); }
.um-head__ava { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 70%, #fff), var(--yellow) 60%, color-mix(in srgb, var(--yellow) 75%, #000)); box-shadow: 0 8px 16px -8px var(--yellow), inset 0 1px 0 rgba(255, 255, 255, .3); }
.um-head__txt { display: flex; flex-direction: column; min-width: 0; }
.um-head__txt strong { font-size: 15px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-head__txt small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sm-app .um-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; transition: background .15s ease; }
body.sm-app .um-item:hover { background: color-mix(in srgb, var(--yellow) 8%, transparent); color: var(--text); }
body.sm-app .um-item.is-active { color: var(--yellow); }
.um-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .5); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.um-item:hover .um-ico { transform: scale(1.08) rotate(-5deg); }
.um-ico--moon { background: linear-gradient(145deg, #6c7ab8, #3f4c8c); }
.um-ico--gear { background: linear-gradient(145deg, #8a9cb5, #6b7f99); }
.um-ico--out  { background: linear-gradient(145deg, #ff6b62, #e0322b); }
.um-chev { margin-left: auto; color: var(--muted); }
.um-switch { position: relative; margin-left: auto; width: 42px; height: 26px; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .25s ease; }
.um-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.um-switch.is-on { background: #4f5fa8; }
.um-switch.is-on::after { transform: translateX(16px); }
.um-logout { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
body.sm-app .um-item--out { color: #c0352d; border-top: 0; margin: 0; }
body.sm-app .um-item--out:hover { color: #c0352d; background: color-mix(in srgb, #e0322b 10%, transparent); }

/* ===== Wzory dokumentów (2026-11-04, .dcx) — karty z miniaturą skanu; generator i edytor pól w nowej oprawie ===== */
.dcx-how { margin-bottom: 14px; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 12px 26px -22px rgba(24, 49, 74, .55); }
.dcx-how summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 800; }
.dcx-how summary::-webkit-details-marker { display: none; }
.dcx-how summary::after { content: "›"; margin-left: auto; font-size: 20px; color: var(--muted); transition: transform .2s ease; }
.dcx-how[open] summary::after { transform: rotate(90deg); }
.dcx-how__ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: #5C6BC0; }
.dcx-steps { counter-reset: dcx; list-style: none; margin: 0; padding: 0 14px 14px; display: grid; gap: 8px; }
.dcx-steps li { counter-increment: dcx; position: relative; padding-left: 36px; line-height: 1.45; font-size: 14px; }
.dcx-steps li::before { content: counter(dcx); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; background: #5C6BC0; }
.dcx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 16px; border-radius: 22px; text-align: center; color: var(--muted); background: var(--surface); }
.dcx-empty span { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #8794D6, #5C6BC0); }
.dcx-empty strong { font-size: 16px; color: var(--text); }
.dcx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; align-items: start; }
.dcx-card { position: relative; padding: 14px; border-radius: 24px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55); animation: hc-rise .45s var(--hc-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.dcx-card__top { display: flex; align-items: flex-start; gap: 14px; }
.dcx-thumb { position: relative; flex: 0 0 auto; width: 96px; aspect-ratio: 210 / 297; border-radius: 10px; overflow: hidden; display: grid; place-items: center; color: var(--muted); background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent), 0 10px 18px -12px rgba(24, 49, 74, .55); transition: transform .25s var(--hc-spring); }
.dcx-thumb:hover { transform: translateY(-2px) rotate(-1deg); }
.dcx-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.dcx-thumb b { position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(24, 49, 74, .75); }
.dcx-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dcx-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.dcx-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.dcx-card__title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dcx-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.dcx-nums span { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--navy) 5%, var(--surface)); }
.dcx-nums b { font-size: 15px; font-weight: 900; color: var(--text); }
.dcx-nums .is-zero b { color: var(--orange); }
.dcx-card__meta { font-size: 12.5px; color: var(--muted); }
.dcx-acts { flex-direction: row; }
.dcx-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dcx-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 14px; font-size: 14px; font-weight: 800; color: var(--text) !important; text-decoration: none !important; background: color-mix(in srgb, var(--navy) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); transition: transform .2s var(--hc-spring), background .15s ease; }
.dcx-btn:hover { background: color-mix(in srgb, var(--navy) 9%, var(--surface)); }
.dcx-btn:active { transform: scale(.96); }
.dcx-btn.is-main { color: #fff !important; background: linear-gradient(145deg, color-mix(in srgb, var(--yellow) 75%, #fff), var(--yellow) 60%, color-mix(in srgb, var(--yellow) 80%, #000)); box-shadow: 0 10px 18px -12px var(--yellow); }
.dcx-btn.is-main.is-dim { opacity: .55; }
.dcx-pages { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.dcx-pages a { position: relative; flex: 0 0 auto; width: 56px; aspect-ratio: 210 / 297; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); }
.dcx-pages img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dcx-pages span { position: absolute; left: 3px; bottom: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: rgba(24, 49, 74, .75); }
.dcx-vers { margin-top: 12px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); padding-top: 8px; }
.dcx-vers summary { display: flex; align-items: center; gap: 6px; padding: 4px 2px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 800; color: var(--muted); }
.dcx-vers summary::-webkit-details-marker { display: none; }
.dcx-vers summary b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; color: #fff; background: var(--navy); }
.dcx-vers__list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.dcx-ver { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
.dcx-ver.is-active { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 7%, var(--surface)); }
.dcx-ver__no { flex: 0 0 auto; min-width: 36px; height: 30px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; font-weight: 900; color: #fff; background: var(--navy); }
.dcx-ver.is-active .dcx-ver__no { background: var(--green); }
.dcx-ver__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dcx-ver__txt a { font-size: 13.5px; font-weight: 700; color: var(--text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcx-ver__txt small { font-size: 11.5px; color: var(--muted); }
.dcx-ver__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.dcx-ver__tag { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
.dcx-mini { min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; color: var(--navy); background: color-mix(in srgb, var(--navy) 9%, var(--surface)); }
/* generator */
body.sm-app .gen-table { margin: 0 0 14px; padding: 14px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--navy) 4%, var(--surface)); }
body.sm-app .gen-table legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 800; }
body.sm-app .gen-rows { clear: both; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
body.sm-app .gen-row { display: flex; align-items: center; gap: 8px; }
body.sm-app .gen-row__no { flex: 0 0 auto; min-width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; background: var(--blue); }
body.sm-app .gen-row .form__input { flex: 1; min-width: 0; min-height: 46px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); }
body.sm-app .content > .card--narrow:has(.gen-table), body.sm-app .content > .card--narrow:has(form[data-no-overlay]) { max-width: 760px; }
/* edytor pól */
body.sm-app .tpl-ed__tab { border: 0; border-radius: 999px; padding: 7px 15px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent); }
body.sm-app .tpl-ed__tab.is-active { color: #fff; background: var(--yellow); box-shadow: 0 8px 14px -10px var(--yellow); }
body.sm-app .tpl-ed__stage { border: 0; border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent), 0 20px 40px -26px rgba(24, 49, 74, .55); }
body.sm-app .tpl-ed__side { padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 49, 74, .05), 0 14px 30px -24px rgba(24, 49, 74, .55); }
body.sm-app .tpl-ed__props { border-color: color-mix(in srgb, var(--border) 70%, transparent); }
@media (max-width: 720px) {
    .dcx-list { grid-template-columns: 1fr; }
    .dcx-thumb { width: 78px; }
    .hc-sw .dcx-acts { display: none !important; }
    .dcx-btn { flex: 1 1 calc(50% - 4px); }
}