/* IThandy Monitor - komponenty paneli (baner stanu, kafelki sklepów, pasek 24 h).
   Kolory wyłącznie z brand kitu (ithandy/docs/01-brand-kit.md); tryb ciemny przez klasę .dark Filamenta. */

/* Nagłówek redakcyjny pulpitu (StatusHero): biała karta, data jako nadtytuł, zdanie o stanie w Poppins, druga linia
   w turkusie 800 (6,4:1 na bieli), trzy liczby i ulica witryn przy dolnej krawędzi. Stan także kreską po lewej. */
.ith-hero {
    display: grid;
    grid-template-columns: minmax(0, 27.5rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: end;
    padding: 2.25rem 0 0 2.5rem;
    border-radius: 14px;
    overflow: hidden;
    color: #0B2B2A;
    background: #fff;
    border: 1px solid #D7E6E4;
}
.ith-hero--down { border-left: 5px solid #DC2626; }
.ith-hero--warn { border-left: 5px solid #F59E0B; }
.ith-hero--maintenance { border-left: 5px solid #0EA5E9; }
.ith-hero--paused, .ith-hero--info { border-left: 5px solid #869998; }
.dark .ith-hero { color: #fff; background: var(--gray-900); border-color: rgba(255, 255, 255, .1); }
.dark .ith-hero--down { border-left-color: #DC2626; }
.dark .ith-hero--warn { border-left-color: #F59E0B; }
.dark .ith-hero--maintenance { border-left-color: #0EA5E9; }
.dark .ith-hero--paused, .dark .ith-hero--info { border-left-color: #869998; }
.ith-hero__body { position: relative; min-width: 0; padding-bottom: 2.25rem; }
.ith-hero__eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-size: .7rem; font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: #0D6A62; }
.ith-hero__eyebrow::before { content: ""; flex: none; width: 18px; height: 2px; background: #12B5A5; }
.ith-hero__title { margin: 0 0 1rem; font-family: Poppins, Inter, sans-serif; font-size: 2.1rem; font-weight: 600; line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; }
.ith-hero__second { display: block; color: #0D6A62; font-weight: 500; }
.ith-hero__text { margin: 0 0 1.6rem; max-width: 46ch; font-size: 1rem; line-height: 1.6; color: #34423F; }
.ith-hero__facts { display: flex; margin: 0; padding: 0; list-style: none; }
.ith-hero__facts li { min-width: 0; padding: 0 1rem; border-left: 1px solid #D7E6E4; }
.ith-hero__facts li:first-child { padding-left: 0; border-left: 0; }
.ith-hero__value { display: block; font-family: Poppins, Inter, sans-serif; font-size: 1.6rem; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ith-hero__label, .ith-hero__sub { display: block; font-size: .76rem; line-height: 1.4; color: #5B6B6A; white-space: nowrap; }
.ith-hero__label { margin-top: .35rem; }
.dark .ith-hero__eyebrow { color: #4FC8BB; }
.dark .ith-hero__second { color: #8FDBD3; }
.dark .ith-hero__text { color: var(--gray-300); }
.dark .ith-hero__label, .dark .ith-hero__sub { color: var(--gray-400); }
.dark .ith-hero__facts li { border-left-color: rgba(255, 255, 255, .12); }
.dark .ith-hero__facts li:first-child { border-left: 0; }
.ith-hero__scene { margin: 0; min-width: 0; align-self: end; justify-self: end; width: 100%; }
.ith-hero__scene--1 { max-width: 300px; margin-right: 2rem; }
.ith-hero__scene--2 { max-width: 460px; }
.ith-hero__scene--3 { max-width: 620px; }
.ith-hero__link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }

/* Telefon: jedna kolumna, liczby w trzech kolumnach, scena pod spodem na całą szerokość karty. */
@media (max-width: 640px) {
    .ith-hero { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 1.4rem 1.25rem 0; }
    .ith-hero__body { padding-bottom: .5rem; }
    .ith-hero__title { font-size: 1.55rem; }
    .ith-hero__text { font-size: .92rem; margin-bottom: 1.1rem; }
    .ith-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ith-hero__facts li { padding: 0 .6rem; }
    .ith-hero__value { font-size: 1.2rem; }
    .ith-hero__label, .ith-hero__sub { font-size: .7rem; white-space: normal; }
    .ith-hero__scene { justify-self: stretch; margin: 0 -1.25rem 0 -.5rem; width: auto; }
    .ith-hero__scene--1 { max-width: 240px; justify-self: center; margin: 0 auto; }
    .ith-hero__scene:not(.ith-hero__scene--1) .ith-sf__name { display: none; }
}

/* Lista sklepów (SiteCards): wiersz = sklep, kolumny jak w tabeli, nazwa jako link rozciągnięty na wiersz.
   Wiersz wymagający uwagi ma kreskę stanu po lewej. Na tablecie dwa rzędy, na telefonie karta bez przewijania w bok. */
.ith-shops { overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid #D7E6E4; color: #0B2B2A; }
.dark .ith-shops { background: var(--gray-900); border-color: rgba(255, 255, 255, .1); color: #fff; }
.ith-shops__head { padding: 1.3rem 1.6rem .85rem; }
.ith-shops__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .65rem; margin: 0; font-family: Poppins, Inter, sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.ith-shops__title small { font-family: Inter, sans-serif; font-size: .8rem; font-weight: 500; color: #5B6B6A; }
.ith-shops__cols, .ith-shop { display: grid; grid-template-columns: minmax(0, 3.1fr) minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, 2.4fr) minmax(0, 2.4fr); gap: 1.5rem; align-items: center; padding: 0 1.6rem; }
.ith-shops__cols { padding-bottom: .6rem; border-bottom: 1px solid #D7E6E4; font-size: .68rem; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: #5B6B6A; }
.ith-shop { position: relative; padding-top: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid #D7E6E4; }
.ith-shop:hover { background: #F4FBFA; }
.ith-shop.is-attention { box-shadow: inset 4px 0 0 #F59E0B; }
.ith-shop--down.is-attention { box-shadow: inset 4px 0 0 #DC2626; }
.ith-shop--maintenance.is-attention, .ith-shop--info.is-attention { box-shadow: inset 4px 0 0 #0EA5E9; }
.ith-shop:has(.ith-shop__name:focus-visible) { outline: 3px solid #12B5A5; outline-offset: -3px; }
.ith-shop__who { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.ith-shop .ith-shop__thumb { flex: none; width: 78px; }
.ith-shop__id { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ith-shop__name { font-family: Poppins, Inter, sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.25; color: inherit; text-decoration: none; overflow-wrap: anywhere; outline: none; }
.ith-shop__name::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ith-shop__name:hover { text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ith-shop__host { font-size: .78rem; line-height: 1.35; color: #5B6B6A; overflow-wrap: anywhere; }
.ith-state { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .78rem; font-weight: 600; line-height: 1.3; }
.ith-state__dot { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ith-tone); color: var(--ith-tone-ink); }
.ith-state__dot svg { width: 11px; height: 11px; stroke-width: 3.2; }
.ith-shop__metric b { display: block; font-family: Poppins, Inter, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ith-shop__metric b small { margin-left: 2px; font-family: Inter, sans-serif; font-size: .8rem; font-weight: 500; color: #5B6B6A; }
.ith-shop__metric > span { display: block; margin-top: .3rem; font-size: .74rem; line-height: 1.35; color: #5B6B6A; }
.ith-shop__path, .ith-shop__day { position: relative; z-index: 2; min-width: 0; }
.ith-shop__cap { margin: .55rem 0 0; font-size: .74rem; line-height: 1.35; color: #5B6B6A; }
.ith-shop__cap b { color: #0B2B2A; font-weight: 600; }
.ith-shop__ask { margin-top: .55rem; }
.ith-shops__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 1.6rem 1rem; font-size: .74rem; color: #5B6B6A; }
.ith-shops__foot .ith-bar__key { margin: 0; }
.dark .ith-shops__title small, .dark .ith-shops__cols, .dark .ith-shop__host, .dark .ith-shop__metric b small, .dark .ith-shop__metric > span,
.dark .ith-shop__cap, .dark .ith-shops__foot { color: var(--gray-400); }
.dark .ith-shop__cap b { color: #fff; }
.dark .ith-shops__cols, .dark .ith-shop { border-bottom-color: rgba(255, 255, 255, .08); }
.dark .ith-shop:hover { background: rgba(255, 255, 255, .03); }
@media (max-width: 1279px) {
    .ith-shops__cols { display: none; }
    .ith-shop { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.25rem; }
    .ith-shop__path { grid-column: 1; }
    .ith-shop__day { grid-column: 2 / -1; }
    .ith-shop__metric::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5B6B6A; }
    .dark .ith-shop__metric::before { color: var(--gray-400); }
}
@media (max-width: 640px) {
    .ith-shops__head { padding: 1.1rem 1rem .5rem; }
    .ith-shop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 1rem; }
    .ith-shop__who, .ith-shop__path, .ith-shop__day { grid-column: 1 / -1; }
    .ith-shop .ith-shop__thumb { width: 64px; }
    .ith-shops__foot { padding: .75rem 1rem .9rem; }
}
/* Odznaka: tekst w kolorze ink (czytelny), kolor stanu w kropce i tle. */
.ith-badge { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; color: #0B2B2A; background: rgba(91, 107, 106, .1); }
.ith-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #5B6B6A; }
.ith-badge--ok { background: rgba(22, 163, 74, .12); }
.ith-badge--ok::before { background: #16A34A; }
.ith-badge--warn { background: rgba(245, 158, 11, .18); }
.ith-badge--warn::before { background: #F59E0B; }
.ith-badge--down { background: rgba(220, 38, 38, .12); }
.ith-badge--down::before { background: #DC2626; }
.ith-badge--info::before { background: #0EA5E9; }
.dark .ith-badge { color: #fff; background: rgba(255, 255, 255, .08); }
/* Pasek 24 h: jedna kreska = jedna godzina. Kolory jak na wykresie strony sklepu: czerwony - nieudane pomiary,
   bursztyn - spowolnienia, błękit - prace serwisowe, szary - fałszywy alarm, jasny - brak pomiarów.
   Nad nakładką linku karty (z-index 1), żeby podpowiedzi godzin działały. */
.ith-bar { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 26px; }
.ith-bar__note { color: #0B2B2A; font-weight: 600; }
.dark .ith-bar__note { color: #fff; }
.ith-bar span { border-radius: 2px; background: #12B5A5; }
.ith-bar span.is-warn { background: #F59E0B; opacity: 1; }
.ith-bar span.is-down { background: #DC2626; opacity: 1; }
.ith-bar span.is-planned { background: #0EA5E9; opacity: 1; }
.ith-bar span.is-false { background: var(--gray-400); opacity: 1; }
.ith-bar span.is-none { background: repeating-linear-gradient(135deg, #C4ECE8 0 1.5px, #F4FBFA 1.5px 4px); box-shadow: inset 0 0 0 1px #C4ECE8; }
.dark .ith-bar span.is-none { background: repeating-linear-gradient(135deg, #34423F 0 1.5px, #0F1E1D 1.5px 4px); box-shadow: inset 0 0 0 1px #34423F; }
.ith-bar__legend { display: flex; justify-content: space-between; font-size: .7rem; color: #5B6B6A; margin-top: .2rem; }
.dark .ith-bar__legend { color: var(--gray-400); }
/* Legenda kolorów paska: tylko kolory, które są na pasku tej karty. */
.ith-bar__key { display: flex; flex-wrap: wrap; gap: .15rem .75rem; margin: .3rem 0 0; padding: 0; list-style: none; font-size: .7rem; line-height: 1.4; color: #5B6B6A; }
.dark .ith-bar__key { color: var(--gray-400); }
.ith-bar__key li { display: inline-flex; align-items: center; gap: .3rem; }
.ith-bar__key li::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 2px; background: #12B5A5; }
.ith-bar__key .ith-key--warn::before { background: #F59E0B; }
.ith-bar__key .ith-key--down::before { background: #DC2626; }
.ith-bar__key .ith-key--planned::before { background: #0EA5E9; }
.ith-bar__key .ith-key--false::before { background: var(--gray-400); }
.ith-bar__key .ith-key--none::before { background: repeating-linear-gradient(135deg, #C4ECE8 0 1.5px, #F4FBFA 1.5px 4px); box-shadow: inset 0 0 0 1px #C4ECE8; }
.dark .ith-bar__key .ith-key--none::before { background: rgba(255, 255, 255, .12); }

.ith-empty { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2rem 1rem; text-align: center; color: #5B6B6A; }
.ith-empty svg { width: 140px; height: auto; }
.ith-empty strong { color: #0B2B2A; font-size: 1.05rem; }
.dark .ith-empty strong { color: #fff; }

/* Stan systemu */
.ith-sys { display: grid; }
.ith-sys__row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .25rem 1.25rem; padding: .7rem 0; border-bottom: 1px solid #D7E6E4; }
.ith-sys__row:last-child { border-bottom: 0; }
.dark .ith-sys__row { border-bottom-color: rgba(255, 255, 255, .1); }
.ith-sys__label { font-size: .875rem; color: #5B6B6A; padding-top: .1rem; }
.dark .ith-sys__label, .dark .ith-sys__hint { color: var(--gray-400); }
.ith-sys__value { font-size: .9rem; min-width: 0; }
.ith-sys__hint { margin-top: .25rem; font-size: .8rem; color: #5B6B6A; line-height: 1.45; word-break: break-word; }
@media (max-width: 640px) { .ith-sys__row { grid-template-columns: 1fr; } }

/* Logowanie i strony "proste" (reset hasła, MFA) */
/* Bez rozmytych plam w tle: jednolity mint (tryb ciemny: szarość 950). */
.fi-simple-layout { background: #F4FBFA; }
.dark .fi-simple-layout { background: var(--gray-950); }
.fi-simple-main { box-shadow: 0 24px 48px -28px rgba(11, 43, 42, .35); }
.ith-login-extra { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid #D7E6E4; font-size: .85rem; color: #5B6B6A; }
.dark .ith-login-extra { border-top-color: rgba(255, 255, 255, .1); color: var(--gray-400); }
.ith-login-extra ul { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .6rem; }
.ith-login-extra li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.45; }
.ith-login-extra li svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.ith-login-extra strong { color: #0B2B2A; font-weight: 600; }
.dark .ith-login-extra strong { color: #fff; }
.ith-login-extra p { margin: 0; }
.ith-login-extra a { color: #0B2B2A; font-weight: 600; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ith-login-extra a:hover { text-decoration-color: currentColor; }
.dark .ith-login-extra a { color: #fff; }

/* Bloki kodu (reguły Cloudflare) i wyróżnienia w widokach panelu - czytelne także w trybie ciemnym */
.ith-code { background: #F4FBFA; color: #0B2B2A; border: 1px solid #D7E6E4; }
.dark .ith-code { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .14); }
.ith-alert-danger { background: rgba(220, 38, 38, .08); color: #0B2B2A; }
.dark .ith-alert-danger { background: rgba(220, 38, 38, .16); color: #fff; }

/* "Do zrobienia" na pulpicie admina: najważniejsza sprawa duża (ilustracja, przycisk), obok lista 02, 03... */
.ith-todo-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
.ith-todo-row--single { grid-template-columns: minmax(0, 1fr); }
.ith-focus { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.5rem; padding: 1.6rem 1.75rem; border-radius: 14px; background: #fff; border: 1px solid #D7E6E4; border-left: 4px solid #F59E0B; color: #0B2B2A; }
.ith-focus--info { border-left-color: #0EA5E9; }
.dark .ith-focus { background: var(--gray-900); border-color: rgba(255, 255, 255, .1); border-left-color: #F59E0B; color: #fff; }
.dark .ith-focus--info { border-left-color: #0EA5E9; }
.ith-focus__art { width: 120px; height: 120px; }
.ith-focus__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .5rem; font-size: .8rem; font-weight: 600; }
.ith-focus__kicker > span:last-child { font-weight: 500; color: #5B6B6A; }
.ith-focus__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ith-tone); color: var(--ith-tone-ink); }
.ith-focus__mark svg { width: 14px; height: 14px; stroke-width: 3; }
.ith-focus__title { margin: 0 0 .6rem; font-family: Poppins, Inter, sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ith-focus__text { margin: 0 0 1.1rem; max-width: 60ch; font-size: .9rem; line-height: 1.55; color: #34423F; }
.ith-focus__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; }
.ith-focus__alt { font-size: .875rem; font-weight: 500; color: #0B2B2A; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ith-focus__alt:hover { text-decoration-color: currentColor; }
.dark .ith-focus__kicker > span:last-child { color: var(--gray-400); }
.dark .ith-focus__text { color: var(--gray-300); }
.dark .ith-focus__alt { color: #fff; }
.ith-todo { background: #fff; border: 1px solid #D7E6E4; border-radius: 14px; padding: 1.3rem 1.5rem .6rem; color: #0B2B2A; }
.dark .ith-todo { background: var(--gray-900); border-color: rgba(255, 255, 255, .1); color: #fff; }
.ith-todo__head { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .3rem; font-family: Poppins, Inter, sans-serif; font-size: 1rem; font-weight: 600; }
.ith-todo__count { font-family: Inter, sans-serif; font-size: .8rem; font-weight: 500; color: #5B6B6A; }
.dark .ith-todo__count { color: var(--gray-400); }
.ith-todo__list { list-style: none; margin: 0; padding: 0; }
.ith-todo__item { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: baseline; gap: .6rem; padding: .8rem 0; border-top: 1px solid #D7E6E4; font-size: .875rem; line-height: 1.45; }
.ith-todo__item:first-child { border-top: 0; }
.dark .ith-todo__item { border-top-color: rgba(255, 255, 255, .08); }
.ith-todo__n { font-family: Poppins, Inter, sans-serif; font-size: .75rem; font-weight: 600; color: #5B6B6A; font-variant-numeric: tabular-nums; }
.dark .ith-todo__n { color: var(--gray-400); }
.ith-todo__text { min-width: 0; overflow-wrap: anywhere; }
/* Link w kolorze ink ze strzałką w turkusie: Teal 700 jako tekst ma na bieli tylko 4,1:1. */
.ith-todo__cta { font-weight: 600; font-size: .82rem; color: #0B2B2A; text-decoration: none; white-space: nowrap; }
.ith-todo__cta::after { content: " →"; color: #0E8C80; }
.ith-todo__cta:hover { text-decoration: underline; text-decoration-color: #12B5A5; text-underline-offset: 3px; }
.dark .ith-todo__cta { color: #fff; }
.dark .ith-todo__cta::after { color: #12B5A5; }
.ith-todo--done { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.2rem; font-size: .9rem; }
.ith-todo__ok { flex: none; width: 3rem; height: auto; }
@media (max-width: 1023px) { .ith-todo-row { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
@media (max-width: 640px) {
    .ith-focus { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1.2rem; }
    .ith-focus__art { width: 84px; height: 84px; }
    .ith-focus__title { font-size: 1.05rem; }
    .ith-todo { padding: 1.1rem 1.1rem .4rem; }
    .ith-todo__item { grid-template-columns: 1.6rem minmax(0, 1fr); }
    .ith-todo__cta { grid-column: 2; }
}

/* Tekst w trybie jasnym w kolorze ink z brand kitu (paleta szarości ma ciemniejsze 950 dla tła trybu ciemnego). */
html:not(.dark) { --gray-950: #0B2B2A; }

/* Typografia marki: nagłówki stron, sekcji i okien w Poppins (tekst zostaje w Inter). */
.fi-header-heading, .fi-simple-header-heading, .fi-section-header-heading, .fi-modal-heading,
.fi-ta-header-heading, .fi-empty-state-heading, .fi-ta-empty-state-heading, .fi-callout-heading {
    font-family: Poppins, Inter, sans-serif;
}
.fi-header-heading, .fi-simple-header-heading { letter-spacing: -0.01em; }

/* Kontrast WCAG AA (4,5:1), zmierzony w Chrome w obu trybach. Paleta: App\Support\BrandPalette.
   Przycisk główny: turkus #12B5A5 z tekstem ink (5,9:1); biały na tym turkusie miałby 2,6:1. */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    --bg: var(--primary-500); --hover-bg: var(--primary-400);
    --dark-bg: var(--primary-500); --dark-hover-bg: var(--primary-400);
    --text: var(--primary-900); --hover-text: var(--primary-900);
    --dark-text: var(--primary-900); --dark-hover-text: var(--primary-900);
}
/* Przyciski stanów: dokładne kolory z brand kitu w obu trybach. Na czerwieni biały (4,8:1),
   na zieleni, bursztynie i błękicie ink (4,6 / 7,0 / 5,4:1) - biały miałby tam 3,3 / 2,2 / 2,8:1. */
.fi-btn.fi-color-danger:not(.fi-outlined) {
    --bg: #DC2626; --hover-bg: var(--danger-700);
    --dark-bg: #DC2626; --dark-hover-bg: var(--danger-700);
    --text: #fff; --hover-text: #fff; --dark-text: #fff; --dark-hover-text: #fff;
}
.fi-btn.fi-color-success:not(.fi-outlined) { --bg: #16A34A; --hover-bg: var(--success-400); --dark-bg: #16A34A; --dark-hover-bg: var(--success-400); }
.fi-btn.fi-color-warning:not(.fi-outlined) { --bg: #F59E0B; --hover-bg: var(--warning-300); --dark-bg: #F59E0B; --dark-hover-bg: var(--warning-300); }
.fi-btn.fi-color-info:not(.fi-outlined) { --bg: #0EA5E9; --hover-bg: var(--info-300); --dark-bg: #0EA5E9; --dark-hover-bg: var(--info-300); }
.fi-btn.fi-color-success:not(.fi-outlined), .fi-btn.fi-color-warning:not(.fi-outlined), .fi-btn.fi-color-info:not(.fi-outlined) {
    --text: #0B2B2A; --hover-text: #0B2B2A; --dark-text: #0B2B2A; --dark-hover-text: #0B2B2A;
}

/* Turkus jako tekst na jasnym tle: Teal 700 ma tylko 4,1:1 na bieli, więc aktywne pozycje o odcień ciemniej (800). */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon,
.fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon,
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > .fi-icon,
.fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-label,
.fi-fo-file-upload .filepond--label-action,
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-text .fi-sc-wizard-header-step-label { color: var(--primary-800); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.dark .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon,
.dark .fi-topbar-item.fi-active .fi-topbar-item-label,
.dark .fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon,
.dark .fi-tabs-item.fi-active .fi-tabs-item-label,
.dark .fi-tabs-item.fi-active > .fi-icon,
.dark .fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-label,
.dark .fi-fo-file-upload .filepond--label-action,
.dark .fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-text .fi-sc-wizard-header-step-label { color: var(--primary-400); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part { background-color: var(--primary-800); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part { background-color: var(--primary-400); }

/* Puste pola tabel i szczegółów ("brak", "nie"): w Filamencie szarość 400 / 500 (ok. 3:1), tu czytelne. */
.fi-ta-cell .fi-ta-placeholder, .fi-in-entry .fi-in-placeholder { color: var(--gray-500); }
.dark .fi-ta-cell .fi-ta-placeholder, .dark .fi-in-entry .fi-in-placeholder { color: var(--gray-400); }
/* Podpowiedzi w polach (w Ustawieniach systemu to obowiązująca wartość z .env): w Filamencie 3:1 i 2,7:1, tu min. 4,5:1. */
input.fi-input::placeholder, textarea::placeholder, .fi-select-input .fi-select-input-placeholder { color: var(--gray-500); }
.dark input.fi-input::placeholder, .dark textarea::placeholder, .dark .fi-select-input .fi-select-input-placeholder { color: var(--gray-400); }
/* Gwiazdka pola wymaganego: danger 600 ma na bieli 4,3:1, danger 700 - 6,0:1 (tryb ciemny bez zmian, danger 400). */
html:not(.dark) .fi-fo-field .fi-fo-field-label-required-mark,
html:not(.dark) .fi-fieldset > legend .fi-fieldset-label-required-mark,
html:not(.dark) .fi-fo-table-repeater > table .fi-fo-table-repeater-header-required-mark { color: var(--danger-700); }

/* Przypomnienie o 2FA na pulpicie klienta (resources/views/filament/client/two-factor-reminder.blade.php). */
.ith-mfa { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1.1rem; border-radius: .9rem; background: #fff; border: 1px solid #D7E6E4; border-left: 6px solid #F59E0B; color: #0B2B2A; font-size: .9rem; line-height: 1.5; }
.dark .ith-mfa { background: var(--gray-900); border-color: rgba(255, 255, 255, .1); border-left-color: #F59E0B; color: #fff; }
.ith-mfa__icon { flex: none; width: 1.4rem; height: 1.4rem; color: #0B2B2A; }
.dark .ith-mfa__icon { color: #F59E0B; }
.ith-mfa__text { margin: 0; }
.ith-mfa__link { margin-left: .35rem; color: #0B2B2A; font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ith-mfa__link:hover { text-decoration-color: currentColor; }
.dark .ith-mfa__link { color: #fff; }

/* Pomoc w panelu klienta (stopka menu i dół strony na telefonie): resources/views/filament/client/help.blade.php */
.ith-help { margin: .75rem 1rem 1rem; padding: .85rem 1rem; border-radius: .9rem; background: #F4FBFA; border: 1px solid #D7E6E4; color: #0B2B2A; font-size: .85rem; line-height: 1.45; }
.dark .ith-help { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); color: #fff; }
.ith-help__title { font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: .95rem; margin: 0 0 .15rem; }
.ith-help__text { margin: 0 0 .55rem; color: #5B6B6A; }
.dark .ith-help__text { color: var(--gray-400); }
.ith-help ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ith-help li a { display: inline-flex; align-items: center; gap: .5rem; color: #0B2B2A; font-weight: 600; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ith-help li a:hover { text-decoration-color: #0B2B2A; }
.dark .ith-help li a { color: #fff; }
.dark .ith-help li a:hover { text-decoration-color: #fff; }
.ith-help li svg { flex: none; width: 1.05rem; height: 1.05rem; color: #0E8C80; }
.dark .ith-help li svg { color: #12B5A5; }
.ith-help--page { margin: 0 auto 1.5rem; max-width: 36rem; width: calc(100% - 2rem); }
@media (min-width: 1024px) { .ith-help--page { display: none; } }

/* Karty statystyk strony sklepu: wartość tekstowa ("Czeka na zgodę", "Wstrzymany") mniejsza niż liczba, żeby nie łamała
   się na trzy linie; nieparzysta ostatnia karta na pełną szerokość przy dwóch kolumnach (telefon, tablet). */
.ith-stat--text .fi-wi-stats-overview-stat-value { font-size: 1.25rem; line-height: 1.35; }
/* Etykiety kart równymi wierszami: "(24 h)" nie zostaje rozbite na końcu linii. */
.fi-wi-stats-overview-stat-label { text-wrap: balance; }
/* Komórką siatki jest opakowanie karty (.fi-grid-col), nie sama karta. */
@media (max-width: 1023px) { .fi-grid-col:has(> .fi-sc-component > .ith-stat--wide) { grid-column: 1 / -1; } }

/* Telefon: zakładki (karta sklepu, ustawienia) zawijają się w wiersze, zamiast przewijać w bok i chować ostatnie. */
@media (max-width: 639px) {
    .fi-tabs:not(.fi-vertical) { flex-wrap: wrap; overflow-x: visible; row-gap: .25rem; }
    .fi-tabs:not(.fi-vertical) .fi-tabs-item { padding-inline: .6rem; }
}

/* Telefon: okna ze stałym nagłówkiem i stopką (sprawdzenie, raport testu zamówienia) na cały ekran, bez marginesów
   i zaokrągleń, z niższym nagłówkiem i stopką - więcej miejsca na treść. */
@media (max-width: 639px) {
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen):is(.fi-modal-has-sticky-header, .fi-modal-has-sticky-footer) > .fi-modal-window-ctn { padding: 0; grid-template-rows: 1fr; }
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen):is(.fi-modal-has-sticky-header, .fi-modal-has-sticky-footer) > .fi-modal-window-ctn > .fi-modal-window { grid-row-start: 1; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen):is(.fi-modal-has-sticky-header, .fi-modal-has-sticky-footer) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header { padding: .85rem 3rem .75rem 1rem; border-radius: 0; }
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen):is(.fi-modal-has-sticky-header, .fi-modal-has-sticky-footer) > .fi-modal-window-ctn > .fi-modal-window .fi-modal-close-btn { top: .6rem; inset-inline-end: .6rem; }
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen):is(.fi-modal-has-sticky-header, .fi-modal-has-sticky-footer) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-content { flex: 1; padding: 1rem; }
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen):is(.fi-modal-has-sticky-header, .fi-modal-has-sticky-footer) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer { padding: .6rem 1rem; border-radius: 0; }
}

/* Strona Stan systemu (.ith-ss*): podsumowanie, sprawy do załatwienia, sekcje i wiersze z wynikiem. */
.ith-ss { display: grid; gap: 1.5rem; container-type: inline-size; }

/* Podsumowanie */
.ith-ss-sum { padding: 1.1rem 1.25rem; border-radius: .9rem; background: #fff; border: 1px solid #D7E6E4; border-left: 6px solid #F59E0B; color: #0B2B2A; }
.ith-ss-sum--fail { border-left-color: #DC2626; }
.ith-ss-sum--ok { display: flex; align-items: center; gap: .85rem; border-left-color: #16A34A; }
.dark .ith-ss-sum { background: var(--gray-900); border-color: rgba(255, 255, 255, .1); color: #fff; }
.dark .ith-ss-sum--warn { border-left-color: #F59E0B; }
.dark .ith-ss-sum--fail { border-left-color: #DC2626; }
.dark .ith-ss-sum--ok { border-left-color: #16A34A; }
.ith-ss-sum__icon { flex: none; width: 2rem; height: 2rem; color: #16A34A; }
.ith-ss-sum__title { margin: 0; font-family: Poppins, Inter, sans-serif; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.ith-ss-sum__text { margin: .2rem 0 0; font-size: .875rem; line-height: 1.5; color: #5B6B6A; }
.dark .ith-ss-sum__text { color: var(--gray-400); }

.ith-ss-todo { list-style: none; margin: .85rem 0 0; padding: 0; }
.ith-ss-todo__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem .85rem; padding: .8rem 0; border-top: 1px solid #D7E6E4; }
.dark .ith-ss-todo__item { border-top-color: rgba(255, 255, 255, .08); }
.ith-ss-todo__dot { align-self: start; margin-top: .45rem; width: .65rem; height: .65rem; border-radius: 50%; background: #F59E0B; }
.ith-ss-todo__item--fail .ith-ss-todo__dot { background: #DC2626; }
.ith-ss-todo__title { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; font-size: .95rem; }
.ith-ss-todo__title .ith-badge { margin-left: 0; }
.ith-ss-todo__value { font-size: .85rem; color: #5B6B6A; overflow-wrap: anywhere; }
.dark .ith-ss-todo__value { color: var(--gray-400); }
.ith-ss-todo__text { margin: .2rem 0 0; font-size: .9rem; line-height: 1.45; }
.ith-ss-todo__actions { display: flex; align-items: center; justify-content: flex-end; gap: .85rem; }

/* Linki: kolor ink, podkreślenie i strzałka w turkusie (Teal 700 jako tekst ma na bieli tylko 4,1:1). */
.ith-ss-link { font-size: .8rem; font-weight: 600; color: #0B2B2A; white-space: nowrap; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ith-ss-link:hover { text-decoration-color: currentColor; }
.ith-ss-link--go { display: inline-block; margin-top: .4rem; text-decoration: none; }
.ith-ss-link--go::after { content: " →"; color: #0E8C80; }
.ith-ss-link--go:hover { text-decoration: underline; text-decoration-color: #12B5A5; }
.dark .ith-ss-link { color: #fff; }
.dark .ith-ss-link--go::after { color: #12B5A5; }

/* Sekcje: na telefonie kolumny znikają (display: contents), a order układa sekcje z problemem na górze. */
.ith-ss-cols { display: flex; flex-direction: column; gap: 1.5rem; }
.ith-ss-col { display: contents; }
@container (min-width: 52rem) {
    .ith-ss-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .ith-ss-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
}
.ith-ss-section { min-width: 0; }

/* Wiersze: etykieta obok wartości, a w wąskiej sekcji etykieta nad wartością. */
.ith-ss .ith-sys { container-type: inline-size; }
.ith-ss .ith-sys__row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); scroll-margin-top: 6rem; }
@container (max-width: 30rem) { .ith-ss .ith-sys__row { grid-template-columns: minmax(0, 1fr); } }
.ith-ss-row--warn, .ith-ss-row--fail { margin: 0 -.75rem; padding-left: .75rem; padding-right: .75rem; border-radius: .5rem; background: rgba(245, 158, 11, .07); box-shadow: inset 4px 0 0 #F59E0B; }
.ith-ss-row--fail { background: rgba(220, 38, 38, .06); box-shadow: inset 4px 0 0 #DC2626; }
.dark .ith-ss-row--warn { background: rgba(245, 158, 11, .1); }
.dark .ith-ss-row--fail { background: rgba(220, 38, 38, .12); }
.ith-ss-row:target { animation: ith-ss-flash 2.4s ease-out; }
@keyframes ith-ss-flash { 0%, 35% { outline: 3px solid #12B5A5; outline-offset: 2px; } 100% { outline: 3px solid transparent; outline-offset: 2px; } }
@media (prefers-reduced-motion: reduce) { .ith-ss-row:target { animation: none; outline: 3px solid #12B5A5; outline-offset: 2px; } }
.ith-ss-row__line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.ith-ss-row__line .ith-badge { margin-left: 0; }
.ith-ss-row__value { font-weight: 600; overflow-wrap: anywhere; }

/* Źródło ustawienia: z panelu (turkus), z .env (szare), nie ustawione (szare, przerywana ramka). */
.ith-ss-src { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; color: #5B6B6A; border: 1px solid #D7E6E4; text-decoration: none; }
span.ith-ss-src { cursor: help; }
a.ith-ss-src:hover { border-color: #12B5A5; text-decoration: underline; text-underline-offset: 2px; }
a.ith-ss-src:focus-visible { outline: 2px solid #12B5A5; outline-offset: 2px; }
.ith-ss-src--panel, .ith-ss-src--mixed { color: #0B2B2A; background: rgba(18, 181, 165, .12); border-color: rgba(18, 181, 165, .45); }
.ith-ss-src--none { border-style: dashed; }
.dark .ith-ss-src { color: var(--gray-300); border-color: rgba(255, 255, 255, .16); }
.dark .ith-ss-src--panel, .dark .ith-ss-src--mixed { color: #fff; background: rgba(18, 181, 165, .2); border-color: rgba(18, 181, 165, .5); }

.ith-ss-test { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .8rem; color: #5B6B6A; }
.ith-ss-test::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: #9CA3AF; }
.ith-ss-test--ok::before { background: #16A34A; }
.ith-ss-test--fail::before { background: #DC2626; }
.dark .ith-ss-test { color: var(--gray-400); }

.ith-ss-jobs { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .8rem; }
.ith-ss-jobs li { padding: .45rem .6rem; border-radius: .5rem; background: #F4FBFA; border: 1px solid #D7E6E4; }
.dark .ith-ss-jobs li { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.ith-ss-jobs code { display: block; margin-top: .15rem; font-size: .75rem; color: #5B6B6A; overflow-wrap: anywhere; }
.dark .ith-ss-jobs code { color: var(--gray-400); }

/* Wąsko (telefon): przyciski pod tekstem sprawy, nie w ściśniętej kolumnie obok. */
@container (max-width: 40rem) {
    .ith-ss-todo__item { grid-template-columns: auto minmax(0, 1fr); }
    .ith-ss-todo__actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
    .ith-ss-sum { padding: 1rem; }
}

/* Historia sprawdzenia (strona zasobu sklepu, admin i klient): zakres, podsumowanie, pasek stanu, macierze dni, oś zmian. */
.ith-hist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-width: 0; }
.ith-hist > * { min-width: 0; }
.ith-hist__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.ith-hist__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; flex: 1 1 32rem; margin: 0; }
.ith-hist__stats > div { padding: .55rem .75rem; border-radius: .75rem; background: #fff; border: 1px solid #D7E6E4; }
.ith-hist__stats dt { font-size: .72rem; color: #5B6B6A; line-height: 1.3; }
.ith-hist__stats dd { margin: .1rem 0 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: #0B2B2A; }
.ith-hist__stats dd.ith-hist__bad { color: #B91C1C; }
.dark .ith-hist__stats > div { background: var(--gray-900); border-color: rgba(255, 255, 255, .1); }
.dark .ith-hist__stats dt { color: var(--gray-400); }
.dark .ith-hist__stats dd { color: #fff; }
.dark .ith-hist__stats dd.ith-hist__bad { color: #FCA5A5; }
.ith-hist__empty { font-size: .9rem; color: #5B6B6A; }
.dark .ith-hist__empty { color: var(--gray-400); }
.ith-hist__link { font-size: .8rem; font-weight: 600; color: #0B2B2A; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ith-hist__link:hover { text-decoration-color: currentColor; }
.dark .ith-hist__link { color: #fff; }

/* Pasek stanu: kreska na godzinę albo dzień, kolory jak pasek 24 h na kartach sklepów. */
.ith-hbar { display: grid; grid-template-columns: repeat(var(--ith-cols, 24), minmax(0, 1fr)); gap: 2px; height: 28px; }
.ith-hbar--dense { gap: 1px; }
.ith-hbar span { border-radius: 2px; background: #12B5A5; }
.ith-hbar--dense span { border-radius: 1px; }
.ith-hbar span.is-warn { background: #F59E0B; opacity: 1; }
.ith-hbar span.is-down { background: #DC2626; opacity: 1; }
.ith-hbar span.is-planned { background: #0EA5E9; opacity: 1; }
.ith-hbar span.is-false { background: var(--gray-400); opacity: 1; }
.ith-hbar span.is-none { background: repeating-linear-gradient(135deg, #C4ECE8 0 1.5px, #F4FBFA 1.5px 4px); box-shadow: inset 0 0 0 1px #C4ECE8; opacity: 1; }
.dark .ith-hbar span.is-none { background: repeating-linear-gradient(135deg, #34423F 0 1.5px, #0F1E1D 1.5px 4px); box-shadow: inset 0 0 0 1px #34423F; }
.ith-bar__key .ith-key--ok::before { background: #12B5A5; }
.ith-bar__key .ith-key--part::before { background: rgba(18, 181, 165, .45); }

/* Macierz dni (metody, etapy): przewija się w swoim kontenerze (startuje od najnowszych dni), nazwa przyklejona z lewej. */
.ith-matrix { position: relative; overflow-x: auto; max-width: 100%; border: 1px solid #D7E6E4; border-radius: .75rem; }
.ith-matrix:focus-visible { outline: 3px solid #12B5A5; outline-offset: 2px; }
.dark .ith-matrix { border-color: rgba(255, 255, 255, .1); }
.ith-matrix table { border-collapse: separate; border-spacing: 2px; font-size: .78rem; min-width: 100%; }
.ith-matrix thead th { padding: .3rem 0; font-weight: 600; color: #5B6B6A; text-align: center; white-space: nowrap; line-height: 1.15; }
.ith-matrix thead th span, .ith-matrix thead th small { display: block; }
.ith-matrix thead th small { font-weight: 400; font-size: .68rem; }
.dark .ith-matrix thead th { color: var(--gray-400); }
.ith-matrix .ith-matrix__name { position: sticky; left: 0; z-index: 1; min-width: 9rem; max-width: 16rem; padding: .25rem .6rem .25rem .5rem; text-align: left; font-weight: 500; color: #0B2B2A; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .ith-matrix .ith-matrix__name { color: #fff; background: var(--gray-900); }
.ith-matrix thead .ith-matrix__name { color: #5B6B6A; }
.dark .ith-matrix thead .ith-matrix__name { color: var(--gray-400); }
/* Nagłówek grupy na całą szerokość: przyklejony jest sam podpis, więc widać go także po przewinięciu do najnowszych dni. */
.ith-matrix__group th { padding: .7rem 0 .2rem; text-align: left; font-weight: 700; font-size: .8rem; color: #0B2B2A; }
.ith-matrix__group th span { position: sticky; left: .5rem; display: inline-block; white-space: nowrap; }
.dark .ith-matrix__group th { color: #fff; }
@media (max-width: 640px) { .ith-matrix .ith-matrix__name { min-width: 7rem; max-width: 10rem; } }
.ith-matrix__dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: #F59E0B; vertical-align: middle; }
.ith-matrix__code { font-weight: 700; }
.ith-matrix td { min-width: 1.3rem; height: 1.3rem; border-radius: 3px; background: #D7E6E4; }
.dark .ith-matrix td { background: rgba(255, 255, 255, .12); }
.ith-matrix td.is-yes, .ith-matrix td.is-ok { background: #16A34A; }
.ith-matrix td.is-part { background: rgba(22, 163, 74, .45); }
.ith-matrix td.is-no, .ith-matrix td.is-fail { background: #DC2626; }
.ith-matrix td.is-warn { background: #F59E0B; }
.ith-matrix .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ith-matrix__key { margin-top: .5rem; }

/* Oś czasu zmian: kropka w kolorze zdarzenia, data, przebieg i kraj jako znaczniki. */
.ith-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.ith-timeline__item { position: relative; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .6rem; padding: .55rem 0; border-top: 1px solid #D7E6E4; }
.ith-timeline__item:first-child { border-top: 0; }
.dark .ith-timeline__item { border-top-color: rgba(255, 255, 255, .08); }
.ith-timeline__dot { width: .7rem; height: .7rem; margin-top: .3rem; border-radius: 50%; background: #869998; }
.ith-timeline__item--success .ith-timeline__dot { background: #16A34A; }
.ith-timeline__item--danger .ith-timeline__dot { background: #DC2626; }
.ith-timeline__item--warning .ith-timeline__dot { background: #F59E0B; }
.ith-timeline__item--info .ith-timeline__dot { background: #0EA5E9; }
.ith-timeline__body { min-width: 0; }
.ith-timeline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .75rem; color: #5B6B6A; }
.dark .ith-timeline__meta { color: var(--gray-400); }
.ith-timeline__meta time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ith-timeline__tag { padding: .05rem .5rem; border-radius: 999px; font-weight: 600; color: #0B2B2A; background: rgba(18, 181, 165, .14); }
.dark .ith-timeline__tag { color: #fff; background: rgba(18, 181, 165, .22); }
.ith-timeline__kind { font-style: italic; }
.ith-timeline__title { margin: .15rem 0 0; font-size: .9rem; font-weight: 600; color: #0B2B2A; overflow-wrap: anywhere; }
.dark .ith-timeline__title { color: #fff; }
.ith-timeline__detail { margin: .15rem 0 .2rem; font-size: .8rem; color: #5B6B6A; overflow-wrap: anywhere; }
.dark .ith-timeline__detail { color: var(--gray-400); }

/* Incydenty w zakresie: wiersz-link. */
.ith-incidents { list-style: none; margin: 0; padding: 0; display: grid; }
.ith-incidents li + li { border-top: 1px solid #D7E6E4; }
.dark .ith-incidents li + li { border-top-color: rgba(255, 255, 255, .08); }
.ith-incidents__row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .6rem 0; color: inherit; }
.ith-incidents__row:hover .ith-incidents__title { text-decoration: underline; text-decoration-color: #12B5A5; text-underline-offset: 3px; }
.ith-incidents__title { flex: 1 1 16rem; min-width: 0; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.ith-incidents__when { font-size: .8rem; color: #5B6B6A; font-variant-numeric: tabular-nums; }
.dark .ith-incidents__when { color: var(--gray-400); }

/* Widok pomiaru jako raport (run-log.blade.php): werdykt, kafelki, trajektoria, składniki pomiaru, szczegóły techniczne. */
.ith-run > * { min-width: 0; }
.ith-run__verdict { padding: .85rem 1rem; border-radius: .75rem; border: 1px solid #D7E6E4; border-left: 6px solid #12B5A5; background: #F4FBFA; }
.ith-run__verdict--bad { border-left-color: #DC2626; background: rgba(220, 38, 38, .06); }
.ith-run__verdict--none { border-left-color: #869998; background: #fff; }
.dark .ith-run__verdict { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); border-left-color: #12B5A5; }
.dark .ith-run__verdict--bad { background: rgba(220, 38, 38, .14); border-left-color: #DC2626; }
.dark .ith-run__verdict--none { border-left-color: var(--gray-400); }
.ith-run__headline { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: #0B2B2A; }
.ith-run__summary { margin: .2rem 0 0; color: #5B6B6A; overflow-wrap: anywhere; }
.dark .ith-run__headline { color: #fff; }
.dark .ith-run__summary { color: var(--gray-300); }
.ith-run__tiles dd { font-size: .95rem; overflow-wrap: anywhere; }
.ith-hist__stats dd.ith-run__good { color: #0D6A62; }
.dark .ith-hist__stats dd.ith-run__good { color: #5FD3C6; }
.ith-run__section { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.ith-run__h { margin: 0; font-size: .95rem; font-weight: 700; color: #0B2B2A; }
.dark .ith-run__h { color: #fff; }
.ith-run__note { margin: 0; font-size: .8rem; color: #5B6B6A; overflow-wrap: anywhere; }
.dark .ith-run__note { color: var(--gray-400); }
.ith-run__label { display: block; font-size: .72rem; color: #5B6B6A; }
.dark .ith-run__label { color: var(--gray-400); }
.ith-run__problems { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ith-run__problem { padding: .45rem .7rem; border-radius: .5rem; border-left: 4px solid #F59E0B; background: rgba(245, 158, 11, .08); overflow-wrap: anywhere; }
.ith-run__problem--fail { border-left-color: #DC2626; background: rgba(220, 38, 38, .07); }
.dark .ith-run__problem { background: rgba(245, 158, 11, .12); }
.dark .ith-run__problem--fail { background: rgba(220, 38, 38, .14); }
.ith-run__product { display: grid; gap: .6rem; padding: .8rem 1rem; border: 1px solid #D7E6E4; border-radius: .75rem; background: #fff; }
.dark .ith-run__product { background: var(--gray-900); border-color: rgba(255, 255, 255, .1); }
.ith-run__product-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.ith-run__product-name { min-width: 0; }
.ith-run__product-name strong { font-size: 1rem; color: #0B2B2A; overflow-wrap: anywhere; }
.dark .ith-run__product-name strong { color: #fff; }
.ith-run__facts { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0; }
.ith-run__facts dt { font-size: .72rem; color: #5B6B6A; }
.ith-run__facts dd { margin: 0; font-weight: 600; }
.dark .ith-run__facts dt { color: var(--gray-400); }
.ith-run__links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.ith-run__links:empty { display: none; }
.ith-phases { display: flex; gap: 2px; height: 16px; margin: .35rem 0; border-radius: 6px; overflow: hidden; }
.ith-phases__seg { min-width: 4px; }
.ith-phases__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: #5B6B6A; }
.ith-phases__key li::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 2px; vertical-align: -1px; }
.ith-phases__key strong { color: #0B2B2A; }
.dark .ith-phases__key { color: var(--gray-400); }
.dark .ith-phases__key strong { color: #fff; }
.ith-phases__seg--dns, .ith-phases__key-dns::before { background: rgba(18, 181, 165, .3); }
.ith-phases__seg--connect, .ith-phases__key-connect::before { background: rgba(18, 181, 165, .6); }
.ith-phases__seg--tls, .ith-phases__key-tls::before { background: #12B5A5; }
.ith-phases__seg--ttfb, .ith-phases__key-ttfb::before { background: #0E8C80; }
.ith-phases__seg--download, .ith-phases__key-download::before { background: #0D6A62; }
.ith-run__compare { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem .6rem; align-items: center; margin-top: .6rem; font-size: .8rem; }
.ith-run__compare-bar { height: 10px; border-radius: 5px; background: #E8F3F1; overflow: hidden; }
.ith-run__compare-bar > span { display: block; height: 100%; background: #12B5A5; }
.ith-run__compare-bar--cart > span { background: #0E8C80; }
.dark .ith-run__compare-bar { background: rgba(255, 255, 255, .08); }
.ith-run__skipped ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; }
.ith-run__skipped li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .35rem 0; border-top: 1px solid #D7E6E4; }
.dark .ith-run__skipped li { border-top-color: rgba(255, 255, 255, .08); }
.ith-run__skipped-name { font-weight: 600; overflow-wrap: anywhere; }
.ith-run__skipped-reason { font-size: .8rem; color: #5B6B6A; }
.dark .ith-run__skipped-reason { color: var(--gray-400); }
.ith-run__tech { padding: .6rem .9rem; border: 1px solid #D7E6E4; border-radius: .75rem; }
.ith-run__tech > summary { cursor: pointer; font-weight: 600; }
.dark .ith-run__tech { border-color: rgba(255, 255, 255, .1); }

/* Tabela produktów (historia sprawdzenia, historia produktu): na telefonie wiersz jako karta, bez przewijania w bok. */
.ith-ptable { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ith-ptable th { padding: .4rem .5rem; border-bottom: 1px solid #D7E6E4; font-size: .75rem; font-weight: 600; color: #5B6B6A; text-align: left; white-space: nowrap; }
.ith-ptable th a { color: inherit; }
.ith-ptable th a:hover, .ith-ptable th a.is-active { color: #0B2B2A; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ith-ptable td { padding: .45rem .5rem; border-bottom: 1px solid #D7E6E4; vertical-align: top; overflow-wrap: anywhere; }
.dark .ith-ptable th, .dark .ith-ptable td { border-bottom-color: rgba(255, 255, 255, .08); }
.dark .ith-ptable th { color: var(--gray-400); }
.dark .ith-ptable th a:hover, .dark .ith-ptable th a.is-active { color: #fff; }
.ith-ptable__muted { display: block; margin-top: .15rem; font-size: .72rem; color: #5B6B6A; }
.dark .ith-ptable__muted { color: var(--gray-400); }
.ith-ptable__bad { font-weight: 700; color: #B91C1C; }
.dark .ith-ptable__bad { color: #FCA5A5; }
.ith-psort { display: none; flex-wrap: wrap; gap: .3rem .8rem; margin-bottom: .5rem; font-size: .8rem; color: #5B6B6A; }
.dark .ith-psort { color: var(--gray-400); }
@media (max-width: 767px) {
    .ith-psort { display: flex; }
    .ith-ptable thead { display: none; }
    .ith-ptable, .ith-ptable tbody { display: block; }
    .ith-ptable tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .75rem; padding: .65rem 0; border-bottom: 1px solid #D7E6E4; }
    .dark .ith-ptable tr { border-bottom-color: rgba(255, 255, 255, .08); }
    .ith-ptable td { padding: 0; border: 0; }
    .ith-ptable td::before { content: attr(data-label); display: block; font-size: .7rem; color: #5B6B6A; }
    .dark .ith-ptable td::before { color: var(--gray-400); }
    .ith-ptable td.is-name, .ith-ptable td.is-wide { grid-column: 1 / -1; }
    .ith-ptable td.is-name::before { display: none; }
}

/* Oś wyników produktu: kropka na pomiar (link do logu), kwadrat na zmianę stanu w rejestrze. */
.ith-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ith-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #869998; }
.ith-dot--state { border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(11, 43, 42, .35); }
a.ith-dot:hover, a.ith-dot:focus-visible { outline: 2px solid #0B2B2A; outline-offset: 1px; }
.dark a.ith-dot:hover, .dark a.ith-dot:focus-visible { outline-color: #fff; }
.ith-dot.is-ok { background: #16A34A; }
.ith-dot.is-fail { background: #DC2626; }
.ith-dot.is-cart, .ith-dot.is-warn { background: #F59E0B; }
.ith-dot.is-stock { background: #869998; }
.ith-dot.is-none { background: #D7E6E4; }
.dark .ith-dot.is-none { background: rgba(255, 255, 255, .2); }
.ith-dots .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ith-dots__key { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: #5B6B6A; }
.ith-dots__key li { display: flex; align-items: center; gap: .35rem; }
.dark .ith-dots__key { color: var(--gray-400); }
@media (min-width: 768px) { .ith-ptable td.is-state { min-width: 12rem; } }

/* ===== Charakter marki IThandy w panelach (ithandy/docs/01-brand-kit.md, sekcja "Panele IThandy Monitor").
   Elementy jak na ithandy.pl: turkusowa linia pod górnym paskiem, sygnet (squircle w gradiencie) jako znacznik sekcji,
   kreska gradientu pod nagłówkiem strony, nadnagłówki (eyebrow) w menu, miękkie cienie i siatka kropek w tle nagłówka.
   Tylko kolory z brand kitu i palety BrandPalette. Ozdoby nie leżą pod tekstem tabel; tekst na kropkach zmierzony w Chrome. */

/* Górny pasek: linia gradientu marki u dołu (na ithandy.pl turkusowa linia pod nagłówkiem). */
.fi-topbar { position: relative; }
.fi-topbar::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #12B5A5 0%, #0E8C80 100%); pointer-events: none; }

/* Tło strony: delikatna siatka kropek w turkusie przy górnej krawędzi, wygaszana w dół i w lewo (kolor tła zakrywa ją
   od ok. 360 px w dół i ok. 760 px od prawego górnego rogu). Na komputerze kropki 20% turkusu, pod okruszkami już
   wygaszone (#5B6B6A min. 5,3:1); na telefonie 12%, bo leżą pod całym nagłówkiem (#5B6B6A na kropce min. 4,8:1). */
.fi-body {
    --ith-dot: rgba(18, 181, 165, .2);
    background-image:
        radial-gradient(circle at 100% 0, rgba(244, 251, 250, 0) 0, rgba(244, 251, 250, .6) 420px, #F4FBFA 760px),
        linear-gradient(180deg, rgba(244, 251, 250, 0) 0, #F4FBFA 360px),
        radial-gradient(circle, var(--ith-dot) 1.3px, transparent 1.8px);
    background-size: 100% 100%, 100% 100%, 18px 18px;
    background-repeat: no-repeat, no-repeat, repeat;
}
.dark .fi-body {
    background-image:
        radial-gradient(circle at 100% 0, rgba(8, 20, 19, 0) 0, rgba(8, 20, 19, .6) 420px, #081413 760px),
        linear-gradient(180deg, rgba(8, 20, 19, 0) 0, #081413 360px),
        radial-gradient(circle, var(--ith-dot) 1.3px, transparent 1.8px);
}
@media (max-width: 63.99rem) { .fi-body { --ith-dot: rgba(18, 181, 165, .12); } }

/* Menu boczne na komputerze: biały panel z linią, jak karta na tle mint (wcześniej przezroczysty, jak domyślny Filament). */
@media (min-width: 64rem) {
    .fi-sidebar { background-color: #fff; border-inline-end: 1px solid #D7E6E4; }
    .dark .fi-sidebar { background-color: var(--gray-900); border-inline-end-color: rgba(255, 255, 255, .08); }
}
/* Nadnagłówki grup menu jak "eyebrow" na ithandy.pl: Poppins, wersaliki, odstęp liter (#5B6B6A na bieli 5,6:1). */
.fi-sidebar-group-label { font-family: Poppins, Inter, sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-500); }
.dark .fi-sidebar-group-label { color: var(--gray-400); }
/* Pozycje: najechanie w mint, aktywna w turkusie 100 z kreską gradientu po lewej (kolor tekstu bez zmian: turkus 800, 5,8:1). */
@media (hover: hover) {
    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover { background-color: #F4FBFA; }
    .dark .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover { background-color: rgba(255, 255, 255, .05); }
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--primary-100); box-shadow: inset 3px 0 0 #12B5A5; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { font-weight: 600; }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: rgba(18, 181, 165, .14); box-shadow: inset 3px 0 0 #12B5A5; }

/* Stopka menu: sygnet i claim marki (resources/views/filament/sidebar-claim.blade.php). */
.ith-claim { display: flex; align-items: center; gap: .65rem; margin: 0 1rem 1rem; padding: .8rem .5rem 0; border-top: 1px solid #D7E6E4; }
.dark .ith-claim { border-top-color: rgba(255, 255, 255, .08); }
.ith-claim img { flex: none; width: 1.75rem; height: 1.75rem; border-radius: .45rem; }
.ith-claim__text { margin: 0; font-size: .75rem; line-height: 1.4; color: var(--gray-500); }
.ith-claim__lead { display: block; font-family: Poppins, Inter, sans-serif; font-weight: 600; color: #0B2B2A; }
.ith-claim__link { color: var(--gray-500); text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ith-claim__link:hover { color: #0B2B2A; }
.dark .ith-claim__text, .dark .ith-claim__link { color: var(--gray-400); }
.dark .ith-claim__lead, .dark .ith-claim__link:hover { color: #fff; }

/* Nagłówek strony: krótka kreska gradientu pod tytułem (jak podkreślenie menu na ithandy.pl). */
.fi-header-heading::after { content: ""; display: block; width: 2.75rem; height: 4px; margin-top: .45rem; border-radius: 4px; background: linear-gradient(90deg, #12B5A5, #0E8C80); }

/* Znacznik sekcji: mały sygnet (squircle w gradiencie marki) przed nagłówkiem sekcji i tabeli. */
.fi-section-header-heading::before, .fi-ta-header-heading::before {
    content: ""; display: inline-block; flex: none; width: .6rem; height: .6rem; margin-inline-end: .55rem; vertical-align: .08em;
    border-radius: .2rem; background: linear-gradient(135deg, #12B5A5 0%, #0E8C80 100%);
}
/* Sekcja z własną ikoną nie dostaje drugiego znacznika; ikona sekcji w turkusie 700 (ikony to akcent, nie tekst). */
.fi-section-header:has(> .fi-icon) .fi-section-header-heading::before { display: none; }
.fi-section-header > .fi-icon { color: #0E8C80; }
.dark .fi-section-header > .fi-icon { color: #12B5A5; }

/* Karty, sekcje i tabele: linia #D7E6E4 i miękki cień z brand kitu zamiast szarego cienia Filamenta (tylko tryb jasny). */
html:not(.dark) .fi-section:not(.fi-section-not-contained):not(.fi-aside),
html:not(.dark) .fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat {
    --tw-ring-color: #D7E6E4;
    --tw-shadow: 0 8px 24px -12px rgba(11, 43, 42, .14);
}
html:not(.dark) .ith-shops, html:not(.dark) .ith-todo, html:not(.dark) .ith-focus, html:not(.dark) .ith-hero { box-shadow: 0 8px 24px -14px rgba(11, 43, 42, .14); }

/* Logowanie, reset hasła, kod 2FA bez zalogowanej osoby: panel marki (resources/views/filament/auth/brand-aside.blade.php).
   Gradient turkus 800 -> ink: biały tekst min. 6,4:1, z kropkami i znakiem wodnym min. 5,2:1 (pomiar w Chrome). */
.ith-auth-aside {
    position: relative; overflow: hidden; width: 100%; color: #fff;
    background: radial-gradient(circle, rgba(255, 255, 255, .07) 1.2px, transparent 1.7px) 0 0 / 18px 18px, linear-gradient(160deg, #0D6A62 0%, #0B2B2A 100%);
}
.ith-auth-aside::before, .ith-auth-aside::after { content: ""; position: absolute; border-radius: 28%; pointer-events: none; }
.ith-auth-aside::before { right: -70px; top: -70px; width: 240px; height: 240px; background: rgba(255, 255, 255, .06); transform: rotate(12deg); }
.ith-auth-aside::after { left: -50px; bottom: -60px; width: 170px; height: 170px; border: 2px solid rgba(255, 255, 255, .08); transform: rotate(-8deg); }
.ith-auth-aside__inner { position: relative; z-index: 1; }
.ith-auth-aside__brand, .ith-auth-aside__eyebrow, .ith-auth-aside__text, .ith-auth-aside__art, .ith-auth-aside__foot { display: none; }
/* Telefon i tablet: wąski pasek z samym claimem nad formularzem, karta formularza bliżej paska (pierwszy ekran). */
.ith-auth-aside__inner { padding: .7rem 1rem; text-align: center; }
@media (max-width: 63.99rem) {
    .fi-simple-layout:has(> .ith-auth-aside) .fi-simple-main-ctn { align-items: flex-start; }
    .fi-simple-layout:has(> .ith-auth-aside) .fi-simple-main { margin-block: 1.5rem 2.5rem; }
}
.ith-auth-aside__claim { margin: 0; font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: .9rem; line-height: 1.35; }
@media (min-width: 64rem) {
    .fi-simple-layout:has(> .ith-auth-aside) { padding-inline-start: clamp(22rem, 40vw, 36rem); }
    .ith-auth-aside { position: fixed; inset-block: 0; inset-inline-start: 0; width: clamp(22rem, 40vw, 36rem); display: flex; align-items: center; }
    .ith-auth-aside__inner { width: 100%; max-width: 26rem; margin: 0 auto; padding: 3rem 2.5rem; text-align: left; }
    .ith-auth-aside__brand { display: flex; align-items: center; gap: .75rem; line-height: 1; }
    .ith-auth-aside__brand img { width: 3rem; height: 3rem; border-radius: .8rem; box-shadow: 0 8px 24px rgba(11, 43, 42, .35); }
    .ith-auth-aside__word { display: block; font-family: Poppins, Inter, sans-serif; font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; }
    /* "handy" w turkusie 300: na gradiencie widać go lepiej niż turkus 500 (logo nie podlega WCAG, ale ma być czytelne). */
    .ith-auth-aside__handy { color: #8FDBD3; }
    .ith-auth-aside__sub { display: block; margin-top: .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #E3F6F4; }
    .ith-auth-aside__eyebrow { display: block; margin: 2.25rem 0 .5rem; font-family: Poppins, Inter, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #E3F6F4; }
    .ith-auth-aside__claim { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
    .ith-auth-aside__claim::after { content: ""; display: block; width: 3rem; height: 4px; margin-top: .9rem; border-radius: 4px; background: #12B5A5; }
    .ith-auth-aside__text { display: block; margin: 1rem 0 0; font-size: .95rem; line-height: 1.6; color: #fff; }
    .ith-auth-aside__art { display: block; width: min(100%, 17rem); margin-top: 2rem; }
    .ith-auth-aside__art svg { display: block; width: 100%; height: auto; }
    .ith-auth-aside__foot { display: block; margin: 2rem 0 0; font-size: .8rem; color: #E3F6F4; }
    .ith-auth-aside__foot a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
    .ith-auth-aside__foot a:hover { text-decoration-color: #fff; }
}
/* Karta formularza: pasek gradientu u góry i promień 22 px (radius-lg z brand kitu). */
.fi-simple-main { position: relative; border-radius: 22px; }
.fi-simple-main::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, #12B5A5, #0E8C80); }
@media (max-width: 639px) { .fi-simple-main { border-radius: 14px; } .fi-simple-main::before { border-radius: 14px 14px 0 0; } }

/* Karty strony sklepu w stylu "Pracownia" (droga klienta, wykres, anatomia pomiaru, 30 dni): biała karta, nagłówek
   w Poppins z opisem pod spodem, treść z oddechem. */
.ith-panel { border-radius: 14px; background: #fff; border: 1px solid #D7E6E4; color: #0B2B2A; }
.dark .ith-panel { background: var(--gray-900); border-color: rgba(255, 255, 255, .1); color: #fff; }
html:not(.dark) .ith-panel { box-shadow: 0 8px 24px -14px rgba(11, 43, 42, .14); }
.ith-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; padding: 1.35rem 1.75rem 0; }
.ith-panel__head > div { min-width: 0; flex: 1 1 24rem; }
.ith-panel__title { display: flex; align-items: baseline; gap: .6rem; margin: 0; font-family: Poppins, Inter, sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.ith-panel__title small { font-family: Inter, sans-serif; font-size: .8rem; font-weight: 500; color: #5B6B6A; }
.ith-panel__desc { margin: .3rem 0 0; max-width: 72ch; font-size: .85rem; line-height: 1.5; color: #5B6B6A; }
.dark .ith-panel__desc, .dark .ith-panel__title small { color: var(--gray-400); }
.ith-panel__chart { padding: .5rem 1.25rem .5rem .75rem; }
.ith-panel__body { padding: 1rem 1.75rem 1.4rem; }
@media (max-width: 640px) {
    .ith-panel__head { padding: 1.1rem 1.1rem 0; }
    .ith-panel__chart { padding: .5rem .4rem; }
    .ith-panel__body { padding: .9rem 1.1rem 1.2rem; }
    .ith-rc-legend { padding: 0 1.1rem 1rem; }
}

/* Nagłówek strony sklepu (App\Support\SiteHeader w podtytule): portret witryny z lewej, pod tytułem adres i zdanie
   o stanie. Przyciski nagłówka zostają po prawej (getHeaderActions). */
.fi-header:has(.ith-sh) > div:first-child { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 1.75rem; align-items: center; }
.fi-header:has(.ith-sh) { align-items: flex-start; }
.fi-header:has(.ith-sh) > .fi-header-actions-ctn { flex: none; margin-top: 2.6rem; }
@media (min-width: 1024px) {
    .fi-header:has(.ith-sh) .fi-header-actions-ctn .fi-ac { flex-direction: column; align-items: stretch; }
    .fi-header:has(.ith-sh) .fi-header-actions-ctn .fi-ac > .fi-dropdown .fi-dropdown-trigger, .fi-header:has(.ith-sh) .fi-header-actions-ctn .fi-ac > .fi-dropdown .fi-btn { width: 100%; }
}
.fi-header:has(.ith-sh) > div:first-child > .fi-breadcrumbs { grid-column: 1 / -1; grid-row: 1; margin-bottom: .75rem; }
.fi-header:has(.ith-sh) .fi-header-heading { grid-column: 2; grid-row: 2; align-self: end; }
.fi-header-subheading:has(.ith-sh), .ith-sh { display: contents; }
.ith-sh__portrait { grid-column: 1; grid-row: 2 / span 3; display: block; width: 150px; padding: .4rem .3rem 0; border-radius: 14px; background: #fff; border: 1px solid #D7E6E4; overflow: hidden; }
.dark .ith-sh__portrait { background: var(--gray-900); border-color: rgba(255, 255, 255, .1); }
.ith-sh__meta { grid-column: 2; grid-row: 3; display: block; margin-top: .7rem; font-size: .875rem; line-height: 1.5; color: #5B6B6A; }
.ith-sh__meta a { color: #0B2B2A; text-decoration: underline; text-decoration-color: #12B5A5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dark .ith-sh__meta { color: var(--gray-400); }
.dark .ith-sh__meta a { color: #fff; }
.ith-sh__verdict { grid-column: 2; grid-row: 4; align-self: start; display: flex; align-items: flex-start; gap: .6rem; margin-top: .6rem; max-width: 62ch; font-size: .95rem; line-height: 1.55; color: #0B2B2A; }
.ith-sh__verdict strong { font-weight: 600; }
.dark .ith-sh__verdict { color: #fff; }
.ith-sh__mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: .05rem; border-radius: 50%; background: var(--ith-tone); color: var(--ith-tone-ink); }
.ith-sh__mark svg { width: 14px; height: 14px; stroke-width: 3; }
@media (max-width: 767px) {
    .fi-header:has(.ith-sh) > div:first-child { grid-template-columns: 76px minmax(0, 1fr); column-gap: 1rem; }
    .ith-sh__portrait { width: 76px; grid-row: 2 / span 2; padding: .2rem .15rem 0; }
    .ith-sh__meta { margin-top: .35rem; font-size: .8rem; overflow-wrap: anywhere; }
    .ith-sh__verdict { grid-column: 1 / -1; grid-row: 4; margin-top: .9rem; font-size: .9rem; }
    .fi-header:has(.ith-sh) > div:first-child { flex: none; width: 100%; }
    .fi-header:has(.ith-sh) > .fi-header-actions-ctn { margin-top: 0; }
}

/* Rząd wyników strony sklepu (SiteOverview, .ith-kpi): karty połączone w jedną listwę z cienkimi liniami. */
.fi-wi-stats-overview .fi-grid:has(> .fi-grid-col .ith-kpi) { gap: 1px; overflow: hidden; border-radius: 14px; background: #D7E6E4; border: 1px solid #D7E6E4; }
html:not(.dark) .fi-wi-stats-overview .fi-grid:has(> .fi-grid-col .ith-kpi) { box-shadow: 0 8px 24px -14px rgba(11, 43, 42, .14); }
.dark .fi-wi-stats-overview .fi-grid:has(> .fi-grid-col .ith-kpi) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .1); }
.fi-wi-stats-overview-stat.ith-kpi { height: 100%; padding: 1.2rem 1.4rem; border-radius: 0; --tw-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; box-shadow: none; }
.dark .fi-wi-stats-overview-stat.ith-kpi { background: var(--gray-900); }
.ith-kpi .fi-wi-stats-overview-stat-label { font-size: .8rem; color: #5B6B6A; }
.dark .ith-kpi .fi-wi-stats-overview-stat-label { color: var(--gray-400); }
.ith-kpi .fi-wi-stats-overview-stat-label-ctn > .fi-icon { width: 1rem; height: 1rem; color: #0D6A62; }
.dark .ith-kpi .fi-wi-stats-overview-stat-label-ctn > .fi-icon { color: #4FC8BB; }
.ith-kpi .fi-wi-stats-overview-stat-value { font-family: Poppins, Inter, sans-serif; font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; }
.ith-kpi.ith-stat--text .fi-wi-stats-overview-stat-value { font-size: 1.2rem; line-height: 1.3; }
.ith-kpi .fi-wi-stats-overview-stat-description { font-size: .8rem; line-height: 1.45; }
@media (max-width: 640px) { .fi-wi-stats-overview-stat.ith-kpi { padding: 1rem; } .ith-kpi .fi-wi-stats-overview-stat-value { font-size: 1.35rem; } }

/* Anatomia pomiaru (SiteTiming) i 30 dni (SiteDays): dwie karty obok siebie o równej wysokości. */
.ith-panel--fill { height: 100%; }
.ith-wf { display: grid; gap: .1rem; margin: 0; }
.ith-wf__row { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) 4.5rem; gap: .75rem; align-items: center; padding: .35rem 0; font-size: .82rem; }
.ith-wf__row dt { min-width: 0; overflow-wrap: anywhere; }
.ith-wf__row dd { margin: 0; }
.ith-wf__track { position: relative; height: 12px; border-radius: 3px; background: repeating-linear-gradient(90deg, #E3F6F4 0 1px, transparent 1px 25%), #F4FBFA; }
.ith-wf__track span { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 2px; background: #4FC8BB; }
.ith-wf__row--server .ith-wf__track span { background: #0D6A62; }
.ith-wf__row--redirect .ith-wf__track span { background: #8FDBD3; }
.ith-wf__ms { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ith-wf__sum { margin-top: .35rem; padding-top: .6rem; border-top: 1px solid #D7E6E4; font-weight: 600; }
.ith-wf__note { margin: 1rem 0 0; padding: .65rem .85rem; border-radius: 8px; background: #F4FBFA; border: 1px solid #D7E6E4; font-size: .85rem; line-height: 1.5; }
.ith-wf__meta { margin: .6rem 0 0; font-size: .75rem; color: #5B6B6A; }
.dark .ith-wf__track { background: repeating-linear-gradient(90deg, #1F2D2C 0 1px, transparent 1px 25%), rgba(255, 255, 255, .03); }
.dark .ith-wf__track span { background: #4FC8BB; }
.dark .ith-wf__row--server .ith-wf__track span { background: #12B5A5; }
.dark .ith-wf__sum { border-top-color: rgba(255, 255, 255, .1); }
.dark .ith-wf__note { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.dark .ith-wf__meta { color: var(--gray-400); }
@media (max-width: 640px) { .ith-wf__row { grid-template-columns: minmax(0, 1fr) 4.2rem; } .ith-wf__track { grid-column: 1 / -1; grid-row: 2; } .ith-wf__sum dd:first-of-type { display: none; } }

.ith-days { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: .55rem 5px; margin: 0; padding: 0; list-style: none; }
.ith-days__day { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; outline: none; font-size: .66rem; line-height: 1; color: #5B6B6A; font-variant-numeric: tabular-nums; }
.ith-days__day:focus-visible .ith-days__cell { outline: 2px solid #12B5A5; outline-offset: 1px; }
.ith-days__cell { position: relative; width: 100%; aspect-ratio: 1; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px #D7E6E4; }
.is-ok > .ith-days__cell { background: #0D6A62; box-shadow: none; }
.is-problem > .ith-days__cell { background: #DC2626; box-shadow: none; }
.is-problem > .ith-days__cell::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; }
.is-none > .ith-days__cell { background: repeating-linear-gradient(135deg, #8FDBD3 0 1.5px, #fff 1.5px 4px); box-shadow: inset 0 0 0 1px #C4ECE8; }
.is-before > .ith-days__cell { background: transparent; box-shadow: none; border: 1px dashed #B4C6C4; }
.ith-days__key { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .78rem; color: #5B6B6A; }
.ith-days__key li { display: inline-flex; align-items: center; gap: .4rem; }
.ith-days__key i { width: 11px; height: 11px; border-radius: 2px; border: 1px dashed #B4C6C4; }
.ith-days__key .is-ok i { background: #0D6A62; border: 0; }
.ith-days__key .is-problem i { background: #DC2626; border: 0; }
.ith-days__key .is-none i { background: repeating-linear-gradient(135deg, #8FDBD3 0 1.5px, #fff 1.5px 4px); border: 1px solid #C4ECE8; }
.ith-days__notes { margin: .7rem 0 0; font-size: .82rem; line-height: 1.5; }
.dark .ith-days__day { color: var(--gray-400); }
.dark .ith-days__cell { background: transparent; box-shadow: inset 0 0 0 1px #34423F; }
.dark .is-ok > .ith-days__cell, .dark .ith-days__key .is-ok i { background: #12B5A5; box-shadow: none; }
.dark .is-before > .ith-days__cell, .dark .ith-days__key i { border-color: #5B6B6A; box-shadow: none; }
/* Mały pasek 30 dni w wierszu tabeli (obserwowane produkty): te same kolory co .ith-days, bez numerów dni. */
.ith-mini-days { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ith-mini-days li { width: 6px; height: 14px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px #D7E6E4; }
.ith-mini-days .is-ok { background: #0D6A62; box-shadow: none; }
.ith-mini-days .is-problem { background: #DC2626; box-shadow: none; }
.ith-mini-days .is-none { background: repeating-linear-gradient(135deg, #8FDBD3 0 1.5px, #fff 1.5px 4px); box-shadow: inset 0 0 0 1px #C4ECE8; }
.ith-mini-days .is-before { background: transparent; box-shadow: none; border: 1px dashed #B4C6C4; }
.dark .ith-mini-days li { background: transparent; box-shadow: inset 0 0 0 1px #34423F; }
.dark .ith-mini-days .is-ok { background: #12B5A5; box-shadow: none; }
.dark .ith-mini-days .is-problem { background: #DC2626; box-shadow: none; }
.dark .ith-mini-days .is-before { border-color: #5B6B6A; box-shadow: none; }
.dark .is-none > .ith-days__cell, .dark .ith-days__key .is-none i { background: repeating-linear-gradient(135deg, #34423F 0 1.5px, #0F1E1D 1.5px 4px); box-shadow: inset 0 0 0 1px #34423F; }
.dark .ith-days__key { color: var(--gray-400); }
@media (max-width: 640px) { .ith-days { gap: .45rem 3px; } }