/* =========================================
   DEEPLEX CLOUD - LIQUID GLASS DESIGN SYSTEM
   ========================================= */

:root {
    /* Liquid Colors */
    --liquid-bg-start: #f8faff;
    --liquid-bg-mid: #eef2ff;
    --liquid-bg-end: #f1f5f9;
    
    --accent: #6c5ce7;
    --accent-dark: #4834d4;
    --accent-glow: rgba(108, 92, 231, 0.4);
    --accent-bg-soft: rgba(108, 92, 231, 0.1);  /* #180: accent @10% — tile/icon wash (był inline ~6×) */

    /* Jedna wartość ruchu dla wszystkich klas przyciskowych (F0). */
    --lq-btn-transition: all .2s ease;

    /* Motion tokens — merged up from jaspr-only copy so canonical is a strict
       superset. Consumers: transitions, animations that want design-system timing. */
    --lq-dur-fast: 120ms;
    --lq-dur-base: 200ms;
    --lq-dur-slow: 360ms;
    --lq-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --lq-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);

    --text-main: #1a1a2e;
    --text-muted: #566175;  /* darkened for D2 contrast (spec §4) — ~5.2:1 */
    --text-light: #717e96;  /* darkened for D2 contrast (spec §4) — ~3.4:1 */

    /* Semantic */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --error-dark: #cf2626;
    --error-glow: rgba(239, 68, 68, 0.45);
    --info: #3b82f6;

    /* Glass Properties — D2 darkened glass (spec §4; kanon = ramka fc05).
       --glass-bg-solid / --glass-highlight stay bright deliberately (chips +
       hover glow must light up against D2). landing.html + public_search.html
       redefine --glass-bg/--glass-border back to bright on their page body. */
    --glass-bg: rgba(229,230,242,.55);
    --glass-bg-solid: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(71,85,105,.28);
    --glass-highlight: rgba(255, 255, 255, 0.95);
    --glass-shadow: 0 20px 60px rgba(108, 92, 231, 0.08);  /* #180: był var() bez definicji (license_inactive) */

    /* Form-field family (kanon W, spec §4/§5) — shared by control bases,
       .lq-input, dropdown trigger. */
    --lq-field-border: rgba(71,85,105,.48);
    --lq-field-bg: rgba(255,255,255,.88);
    
    /* Geometry */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 9999px;

    /* Typography */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Workspace color palette — kurowana paleta 8 slugów do wizualnej segregacji
       przestrzeni roboczych. Używać wyłącznie przez .lq-ws-dot--<slug> lub
       style="color: var(--ws-c-<slug>)". Nie dodawać nowych tokenów tu bez
       decyzji ownera — paleta jest zamknięta (8 kolorów). */
    --ws-c-violet: #6c5ce7;
    --ws-c-blue:   #3b82f6;
    --ws-c-teal:   #14b8a6;
    --ws-c-green:  #22c55e;
    --ws-c-amber:  #f59e0b;
    --ws-c-rose:   #ec4899;
    --ws-c-red:    #ef4444;
    --ws-c-slate:  #64748b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- Workspace color dot ------------------------------------------ */
/* Małe kółko 10 px do segregacji wizualnej przestrzeni roboczych.
   Użycie: <span class="lq-ws-dot lq-ws-dot--violet"></span>
   Kolor tła pochodzi z kurowanej palety --ws-c-* z :root. */
.lq-ws-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lq-ws-dot--violet { background: var(--ws-c-violet); }
.lq-ws-dot--blue   { background: var(--ws-c-blue); }
.lq-ws-dot--teal   { background: var(--ws-c-teal); }
.lq-ws-dot--green  { background: var(--ws-c-green); }
.lq-ws-dot--amber  { background: var(--ws-c-amber); }
.lq-ws-dot--rose   { background: var(--ws-c-rose); }
.lq-ws-dot--red    { background: var(--ws-c-red); }
.lq-ws-dot--slate  { background: var(--ws-c-slate); }

/* Picker radio — duże kółko z ring gdy zaznaczone */
.lq-ws-color-radio input[type="radio"] { display: none; }
.lq-ws-color-radio label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lq-ws-color-radio input[type="radio"]:checked + label,
.lq-ws-color-radio label:hover {
    border-color: var(--glass-border);
    box-shadow: 0 0 0 3px rgba(108,92,231,.22);
}
/* --- End workspace color dot --------------------------------------- */

body {
    background: radial-gradient(circle at top left, var(--liquid-bg-start) 0%, var(--liquid-bg-mid) 40%, var(--liquid-bg-end) 100%);
    background-attachment: fixed;
    color: var(--text-main);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin: 0;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Utilities */
.lq-text-accent { color: var(--accent); }
.lq-font-display { font-family: var(--font-display); }
.lq-font-body { font-family: var(--font-body); }
.lq-shadow-sm { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); }
.lq-shadow-md { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03); }

/* ---- icon sizing utilities (replace inline width:NNpx on <i> icons) ---- */
.lq-icon { width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0; }
.lq-icon-xs { width: 12px; height: 12px; vertical-align: middle; flex-shrink: 0; }
.lq-icon-sm { width: 14px; height: 14px; vertical-align: middle; flex-shrink: 0; }
.lq-icon-lg { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
.lq-icon-xl { width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.lq-icon-accent { color: var(--accent); }
.lq-caption { font-size: 0.65rem; color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.lq-text-muted { color: var(--text-muted); }
.lq-text-right { text-align: right; }
.lq-section-title { font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.lq-flex-col { display: flex; flex-direction: column; }
/* Operator panel utilities — szablony panelu używają ich od F1/F2,
   ale klasy nigdy nie trafiły do arkusza (fantomy → layout się sypał). */
.muted { color: var(--text-muted); } /* alias .lq-text-muted (linia ~144) — panele admina używają krótkiej formy; zmieniaj OBA razem */
.lq-grid { display: grid; gap: 1.25rem; }

/* =========================================
   GLASS PANELS & CARDS
   ========================================= */

.lq-panel {
    /* #180 RC1: domyślny oddech (gołe <c-panel> siedziały na rogu 32px).
       Panele o innych potrzebach nadpisują inline/własnym CSS (specyficzność);
       stat_bar pinuje padding:0 jawnie przez .lq-stat-bar. */
    padding: 1.5rem 1.75rem;
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.02),
        0 10px 20px -5px rgba(108, 92, 231, 0.05),
        inset 0 1px 1px rgba(255,255,255,0.5);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lq-panel > h3:first-child,
.lq-panel-head > h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Wiersz nagłówka panelu: tytuł po lewej + akcja (link/badge) po prawej.
   Zastępuje inline flex/justify-between powielany przy każdym takim nagłówku. */
.lq-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.lq-panel-head > h3 { margin: 0; }

/* Podtytuł pod nagłówkiem panelu — zastępuje powtarzany inline
   <p style="margin:0 0 1.25rem;color:var(--text-muted);font-size:.9rem">. */
.lq-panel-sub {
    margin: 0 0 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.lq-panel > h3:first-child:has(+ .lq-panel-sub) { margin-bottom: 0.35rem; }

/* Kompaktowy feed aktywności (pulpit „Ostatnie zdarzenia”) — hairline-rows,
   tabularne godziny, akcent na autorze; brak ciężkiej tabeli na pulpicie. */
.lq-activity { display: flex; flex-direction: column; }
.lq-activity__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--glass-border);
    font-size: 0.9rem;
}
.lq-activity__row:first-child { border-top: none; padding-top: 0; }
.lq-activity__row:last-child { padding-bottom: 0; }
.lq-activity__time {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.lq-activity__what {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lq-activity__who { font-weight: 700; color: var(--text-main); }
.lq-activity__tag { flex-shrink: 0; }

.lq-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.lq-card:hover {
    background: var(--glass-highlight);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px -10px rgba(108, 92, 231, 0.15);
}

/* Stretched-link: cała karta-<div> klikalna przez link na tytule BEZ zagnieżdżania
   <a> w <a> (zagnieżdżony <a> auto-zamyka kartę → chipy-linki wypadają poza nią).
   Karta musi mieć position:relative; interaktywne dzieci (chipy) z position+z-index
   ponad warstwą ::after. */
.lq-stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lq-stretched-link:hover { text-decoration: underline; }

/* =========================================
   BUTTONS
   ========================================= */

.lq-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 0.875rem 1.5rem;
    font-family: var(--font-display); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem;
    border-radius: var(--radius-pill); border: none; cursor: pointer;
    transition: var(--lq-btn-transition);
}

.lq-btn:active { transform: scale(0.96); }
.lq-btn-icon:active { transform: scale(0.96); }

/* Klawiszowy focus-ring — globalny kanon F0 (spec §8). .lq-search-bar__btn ma
   własną regułę przy definicji search-bara; reszta tu. */
.lq-btn:focus-visible,
.lq-btn-icon:focus-visible,
.lq-chip:focus-visible,
.lq-pgbtn:focus-visible,
.lq-segmented button:focus-visible,
.lq-acc-head:focus-visible,
.lq-decade-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lq-btn-sm { padding: 0.5rem 1rem; font-size: 0.65rem; }
.lq-btn-lg { padding: 1.25rem 2.5rem; font-size: 0.85rem; }

.lq-btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: white;
    box-shadow: 0 10px 25px -5px var(--accent-glow), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.lq-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px var(--accent-glow);
    filter: brightness(1.1);
}

.lq-btn-glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
}

.lq-btn-glass:hover {
    transform: translateY(-2px);
    background: var(--glass-highlight);
    box-shadow: 0 10px 25px rgba(108, 92, 231, 0.05);
}

.lq-btn-dark {
    background: var(--text-main);
    color: white;
    box-shadow: 0 10px 25px -5px rgba(26, 26, 46, 0.4);
}

.lq-btn-dark:hover {
    transform: translateY(-2px);
    background: #2a2a4a;
    box-shadow: 0 15px 35px -5px rgba(26, 26, 46, 0.5);
}

.lq-btn-icon {
    width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: var(--glass-bg);
    border: 1px solid var(--glass-border); color: var(--text-muted);
    transition: var(--lq-btn-transition); cursor: pointer;
}

.lq-btn-icon:hover {
    transform: translateY(-2px); color: var(--accent); background: var(--glass-highlight);
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.08);
}

/* Icon button with primary accent (np. send w chacie) */
.lq-btn-icon.lq-btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: white; border: none;
    box-shadow: 0 10px 25px -5px var(--accent-glow);
}
.lq-btn-icon.lq-btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: white; filter: brightness(1.1);
    box-shadow: 0 15px 35px -5px var(--accent-glow);
}

/* =========================================
   INPUTS & FORMS
   ========================================= */

.lq-form-group {
    display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem;
}

.lq-label {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-display); font-size: 0.65rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted);
    margin-left: 0.5rem;
}

.lq-input {
    width: 100%; background: var(--lq-field-bg);
    border: 2px solid var(--lq-field-border); padding: 1rem 1.25rem;
    border-radius: var(--radius-md); font-family: var(--font-body);
    font-size: 0.95rem; color: var(--text-main); font-weight: 500;
    transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.lq-input:focus {
    outline: none; background: var(--glass-highlight);
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,92,231,.14);
}

.lq-input::placeholder { color: var(--text-light); }
textarea.lq-input { resize: vertical; min-height: 120px; }

/* Login Box Component */
.lq-login-box {
    position: relative;
    padding: 3rem;
}

.lq-login-tag {
    position: absolute; top: -12px; right: 40px;
    background: var(--text-main); color: white;
    padding: 0.35rem 1rem; border-radius: var(--radius-pill);
    font-size: 0.55rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.2em; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* =========================================
   ALERTS / NOTIFICATIONS
   ========================================= */

.lq-alert {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.25rem; border-radius: var(--radius-lg);
    background: var(--glass-bg); backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 20px -5px rgba(0,0,0,0.05);
    margin-bottom: 1rem; position: relative; overflow: hidden;
}

.lq-alert::before {
    content: ''; position: absolute; left: 0; top: 0; width: 6px; height: 100%;
}

.lq-alert-info::before { background: var(--info); }
.lq-alert-success::before { background: var(--success); }
.lq-alert-warning::before { background: var(--warning); }
.lq-alert-error::before { background: var(--error); }
.lq-alert-premium::before { background: linear-gradient(to bottom, var(--accent), var(--accent-dark)); }

.lq-alert-icon {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: white; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.lq-alert-info .lq-alert-icon { background: var(--info); }
.lq-alert-success .lq-alert-icon { background: var(--success); }
.lq-alert-warning .lq-alert-icon { background: var(--warning); }
.lq-alert-error .lq-alert-icon { background: var(--error); }
.lq-alert-premium .lq-alert-icon { background: var(--accent); }

.lq-alert-content { flex: 1; }
.lq-alert-title { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; margin-bottom: 0.25rem; }
.lq-alert-msg { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* Compact inline error (for forms) */
.lq-alert-inline {
    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md); padding: 1rem; display: flex; gap: 0.75rem;
    margin-bottom: 1.5rem; color: #991b1b; font-size: 0.8rem; font-weight: 500;
}

/* =========================================
   BADGES & CHIPS
   ========================================= */

.lq-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.875rem; background: var(--glass-bg-solid);
    border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
    font-family: var(--font-display); font-size: 0.65rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: var(--lq-btn-transition); cursor: pointer;
    text-decoration: none;
}

.lq-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

/* Mikro-chip — zastępuje 41× inline font-size:.55rem na chipach (typy/statusy/meta).
   Łączyć z .lq-chip: <span class="lq-chip lq-chip-xs">. */
.lq-chip-xs { font-size: 0.55rem; padding: 2px 8px; letter-spacing: 0.05em; }

.lq-chip-active {
    background: rgba(108, 92, 231, 0.1); border-color: rgba(108, 92, 231, 0.2);
    color: var(--accent);
}

/* Dimmed/"unmapped" chip — e.g. operator domains "bez dziedziny" status. */
.lq-chip-muted {
    background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.2);
    color: var(--text-light);
}

/* #180: chip warianty status (zastępują inline rgba w operator_cloud) */
.lq-chip-success { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: var(--success); }
.lq-chip-info    { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); color: var(--info); }

.lq-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.lq-dot-lg { width: 1rem; height: 1rem; flex: none; }
.lq-dot-success { background: var(--success); box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
.lq-dot-warning { background: var(--warning); box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }

/* v0.24.6: gentle "alive" heartbeat for status indicators. Composes two
   animations: a subtle scale breath (1 → 1.08, barely perceptible) and a
   halo ring that expands outward + fades. Stagger via ::after, easing
   cubic-bezier for a calm in-out (avoids the harsh opacity flicker of
   the older .lq-chat-row pulse). Apply to .lq-dot-success or .lq-dot
   with the .lq-dot-live class. */
.lq-dot-live {
    position: relative;
    animation: lqLiveDotBreath 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.lq-dot-live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    opacity: 0.55;
    z-index: -1;
    animation: lqLiveDotHalo 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes lqLiveDotBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
@keyframes lqLiveDotHalo {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(2.4); opacity: 0;    }
    100% { transform: scale(2.4); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
    .lq-dot-live, .lq-dot-live::after { animation: none; }
    /* §10 damper (a): the cursor-shimmer ::after gets no fade under reduced
       motion (also retroactively gates surfaces that were never RM-aware). */
    .lq-panel::after, .lq-card::after, .lq-facet-panel::after,
    .lq-table-wrapper::after, .lq-bubble-left:not(.lq-melanz)::after {
        opacity: 0;
        transition: none;
    }
}

/* Status Badges (Filled) */
.lq-badge {
    font-size: 0.55rem; font-weight: 900; padding: 0.2rem 0.5rem; 
    border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.15em;
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.lq-badge-success { background: #d1fae5; color: #047857; }
.lq-badge-error { background: #fee2e2; color: #b91c1c; }
.lq-badge-warning { background: #fef3c7; color: #b45309; }

/* =========================================
   TABLES & LISTS
   ========================================= */

.lq-table-wrapper {
    background: var(--glass-bg); backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
    overflow-x: auto; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}

/* #180 RC2: tabela bezpośrednio w panelu = flush (panel daje szklaną ramkę),
   inaczej „pudełko w pudełku". Direct-child (>) — nie tyka zagnieżdżonych.
   Panele z własnym paddingiem wymagają overflow:hidden (per-site). */
.lq-panel > .lq-table-wrapper {
    border: none; border-radius: 0; box-shadow: none;
    background: transparent; backdrop-filter: none;
}
.lq-panel > .lq-table-wrapper::after { display: none; }

.lq-table { width: 100%; border-collapse: collapse; }

.lq-table th {
    background: rgba(255, 255, 255, 0.4); padding: 1.25rem 1.5rem;
    text-align: left; font-family: var(--font-display); font-size: 0.7rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--text-light); border-bottom: 1px solid var(--glass-border);
}

.lq-table td {
    padding: 1.25rem 1.5rem; font-size: 0.9rem; color: var(--text-main);
    border-bottom: 1px solid rgba(255,255,255,0.4); transition: background 0.2s ease;
}

.lq-table tr:last-child td { border-bottom: none; }
.lq-table tr:hover td { background: rgba(255, 255, 255, 0.6); }

/* Acts search results table: title column flexes, the typ/status/date
   columns shrink-to-fit on ONE line — without this the chips wrapped to two
   lines and the last header (Ogłoszenie) clipped past the wrapper edge. */
.lq-table-search th, .lq-table-search td { white-space: nowrap; }
.lq-table-search th:first-child, .lq-table-search td:first-child {
    white-space: normal; width: 100%;
}
.lq-table-search .lq-chip { white-space: nowrap; }
.lq-table-search th, .lq-table-search td { padding-left: 1rem; padding-right: 1rem; }

/* =========================================
   APP LAYOUT (Sidebar & Main)
   ========================================= */
.lq-app-layout {
    display: flex; height: 100vh; overflow: hidden;
}

.lq-sidebar {
    width: 320px; flex-shrink: 0;
    background: var(--glass-bg); border-right: 1px solid var(--glass-border);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    display: flex; flex-direction: column; z-index: 30;
}

/* Intentional lighter sidebar delta on D2 (spec §4) — NOT a cleanup; the
   sidebar deliberately reads brighter than --glass-bg surfaces. */
.lq-sidebar { background: rgba(236,236,248,.55); }

.lq-sidebar-header {
    padding: 2rem; display: flex; align-items: center; gap: 1rem;
}

.lq-sidebar-nav {
    /* min-height:0 — same Safari flex-clip fix as .lq-content: without it
       a long nav (many workspaces/chats) overflows the 100vh sidebar and
       the bottom items get clipped & unreachable in Safari. */
    flex: 1; min-height: 0; overflow-y: auto; padding: 0 1rem;
}

.lq-nav-group { margin-bottom: 2rem; }
.lq-nav-title {
    font-family: var(--font-display); font-size: 0.65rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-light);
    padding: 0 1rem; margin-bottom: 0.75rem;
}

.lq-nav-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    border-radius: var(--radius-md); color: var(--text-muted); font-weight: 500;
    font-size: 0.9rem; transition: all 0.2s ease; cursor: pointer; text-decoration: none;
}

.lq-nav-item:hover {
    background: rgba(255,255,255,0.6); color: var(--text-main);
}

.lq-nav-item.active {
    background: rgba(255,255,255,0.8); color: var(--accent);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); font-weight: 600;
}

.lq-main {
    /* min-width:0 prevents horizontal flex overflow; min-height:0 is the
       vertical analog — without it this column flex item refuses to shrink
       below its content height, so a tall chat overflows .lq-app-layout
       (height:100vh; overflow:hidden) and the bottom gets clipped. Safari
       does NOT auto-apply the scroll-container min-height:0 override that
       Chrome does, so long chats appeared "ucięte" only in Safari. */
    flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
    position: relative; transition: all 0.5s ease;
}

.lq-header {
    height: 80px; flex-shrink: 0;
    background: rgba(238,238,249,.50); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2rem; z-index: 20;
}

.lq-content {
    /* min-height:0 lets this scroll container actually shrink-to-fit inside
       the flex column and scroll internally instead of pushing the page
       past 100vh (which .lq-app-layout clips). Chrome treats a scroll
       container's auto min-size as 0 per spec; Safari/WebKit doesn't, so
       this explicit 0 is what stops the chat being cut off in Safari. */
    flex: 1; min-height: 0; overflow-y: auto; padding: 2rem; position: relative;
}

/* Główny kontener treści — zastępuje 21× inline max-width:1200px + flex-col + gap.
   Stosować bezpośrednio pod .lq-content w widokach lex/egzamin/workspaces. */
.lq-page-body {
    max-width: 1200px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 2rem;
}
.lq-page-body--narrow { max-width: 880px; }
.lq-page-body--wide { max-width: 1400px; }

/* =========================================
   CHAT BUBBLES
   ========================================= */
.lq-chat-container {
    width: 100%; max-width: 96%; margin: 0 auto;
    display: flex; flex-direction: column; gap: 2.5rem;
}

.lq-chat-row { display: flex; gap: 1.25rem; align-items: flex-end; }
.lq-chat-row.right { flex-direction: row-reverse; }

.lq-chat-avatar {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
    flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 2px solid white;
}

.lq-chat-row.left .lq-chat-avatar { background: var(--accent); color: white; }
.lq-chat-row.right .lq-chat-avatar { background: var(--text-main); color: white; }

.lq-bubble-wrapper { display: flex; flex-direction: column; max-width: 85%; width: 100%; }
.lq-chat-row.right .lq-bubble-wrapper { align-items: flex-end; max-width: 70%; }

.lq-bubble { padding: 1.5rem; font-size: 1rem; line-height: 1.6; }

.lq-bubble-left {
    background: var(--glass-highlight); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-sm);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); color: var(--text-main);
}

.lq-bubble-right {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-sm);
    box-shadow: 0 10px 25px -5px var(--accent-glow); color: white;
}

.lq-chat-meta {
    font-family: var(--font-display); font-size: 0.65rem; font-weight: 800;
    color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em;
    margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem;
}

/* Chat Input */
.lq-chat-input-area {
    padding: 2rem; flex-shrink: 0;
    background: rgba(255,255,255,0.4); backdrop-filter: blur(12px);
    border-top: 1px solid var(--glass-border); z-index: 20;
}

.lq-chat-input-box {
    background: var(--glass-bg); border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: 0.5rem;
    display: flex; align-items: center; gap: 0.5rem;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05); transition: all 0.3s ease;
}
.lq-chat-input-box:focus-within {
    background: var(--glass-highlight); border-color: var(--accent);
    box-shadow: 0 15px 40px -10px rgba(108, 92, 231, 0.15);
}

.lq-chat-textarea {
    flex: 1; background: transparent; border: none; outline: none;
    resize: none; padding: 1rem; font-family: var(--font-body); font-size: 1rem;
    color: var(--text-main); max-height: 200px;
}

/* =========================================
   FLOATING CONTEXT PANEL (Lex Hub / Files)
   ========================================= */
.lq-context-panel {
    position: fixed; right: 2rem; top: 2rem; bottom: 2rem; width: 360px;
    background: var(--glass-highlight); border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl); box-shadow: 0 20px 50px -10px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; overflow: hidden;
    border-top: 4px solid var(--accent); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
    z-index: 50;
}

.lq-context-closed { transform: translateX(calc(100% + 3rem)); opacity: 0; pointer-events: none; }

.lq-context-header {
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,0.6);
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}

/* min-height:0 — same Safari flex-clip fix: long file/lex lists otherwise
   overflow the fixed-height context panel and get chopped at its bottom. */
.lq-context-body { padding: 1.25rem; flex: 1; min-height: 0; overflow-y: auto; }

/* ─── Upload zone ─── */
.lq-upload-zone {
    border: 2px dashed var(--glass-border); border-radius: var(--radius-lg);
    padding: 1.75rem 1rem; text-align: center; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: rgba(255,255,255,0.3); margin-bottom: 0.75rem;
}
.lq-upload-zone:hover, .lq-upload-zone.drag-over {
    border-color: var(--accent); background: rgba(108,92,231,0.06);
}
.lq-upload-zone .upload-icon { color: var(--accent); opacity: 0.7; margin-bottom: 0.5rem; }
.lq-upload-zone .upload-label { font-size: 0.85rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.25rem; }
.lq-upload-zone .upload-label span { color: var(--accent); text-decoration: underline; }
.lq-upload-zone .upload-hint { font-size: 0.7rem; color: var(--text-muted); }
.lq-upload-zone .upload-selected { font-size: 0.75rem; font-weight: 700; color: var(--accent); margin-top: 0.5rem; display: none; }


/* =========================================
   LEX SEARCH HERO (Database Landing)
   ========================================= */
.lq-lex-hero {
    background: linear-gradient(135deg, rgba(26,26,46,0.9), rgba(15,15,30,0.95));
    border-radius: var(--radius-xl); padding: 3rem; position: relative;
    overflow: hidden; margin-bottom: 3rem; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2);
}

.lq-lex-hero::before {
    content: ''; position: absolute; right: -50px; top: -50px;
    width: 300px; height: 300px; background: var(--accent);
    border-radius: 50%; filter: blur(80px); opacity: 0.4;
}

.lq-lex-hero-title { color: white; font-size: 2.5rem; margin-bottom: 0.5rem; position: relative; z-index: 2; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; }
.lq-lex-hero-desc { color: rgba(255,255,255,0.7); font-size: 1rem; position: relative; z-index: 2; }

/* Stats grid */
.lq-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.lq-stat-card { padding: 1.5rem; display: flex; align-items: center; gap: 1.25rem; border-radius: 20px; }
.lq-stat-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(108, 92, 231, 0.1); color: var(--accent); }
.lq-stat-value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 900; line-height: 1; margin-bottom: 0.25rem; color: var(--text-main); }
.lq-stat-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }


/* =========================================
   PRICING & SCORES (Landing Page Features)
   ========================================= */

/* Pricing */
.lq-pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem; align-items: center;
}

.lq-pricing-card { padding: 2.5rem; }

.lq-pricing-premium {
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.9) 0%, rgba(15, 15, 30, 0.95) 100%);
    border: 1px solid rgba(108, 92, 231, 0.5); color: white;
    box-shadow: 0 25px 50px -12px rgba(108, 92, 231, 0.25);
    transform: scale(1.05); position: relative;
}

.lq-pricing-premium:hover {
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.9) 0%, rgba(15, 15, 30, 0.95) 100%);
    transform: scale(1.07); border-color: var(--accent);
    box-shadow: 0 30px 60px -15px rgba(108, 92, 231, 0.4);
}

.lq-pricing-header {
    margin-bottom: 2rem; border-bottom: 1px solid var(--glass-border); padding-bottom: 1.5rem;
}
.lq-pricing-premium .lq-pricing-header { border-bottom-color: rgba(255, 255, 255, 0.1); }

.lq-pricing-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; margin-bottom: 0.5rem; }
.lq-pricing-price { font-family: var(--font-display); font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; display: flex; align-items: baseline; gap: 0.5rem; }
.lq-pricing-period { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.lq-pricing-premium .lq-pricing-period { color: rgba(255, 255, 255, 0.6); }

.lq-pricing-features { list-style: none; margin-bottom: 2.5rem; }
.lq-pricing-feature { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.95rem; font-weight: 500; }
.lq-pricing-feature i { color: var(--accent); margin-top: 3px; }
.lq-pricing-premium .lq-pricing-feature i { color: #8172ea; }

/* AI Exam Scores */
.lq-score-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.lq-score-agent { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; margin-bottom: 0.25rem; color: var(--text-main); }
.lq-score-exam { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; display: block; }
.lq-score-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.5rem; }
.lq-score-bar-bg { width: 100%; height: 8px; background: rgba(255,255,255,0.6); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
.lq-score-bar-fill { height: 100%; border-radius: 999px; transition: width 1s ease; }

/* =========================================
   CHAT INPUT ENHANCEMENTS (Agent Selector & Extensions)
   ========================================= */

.lq-extension-container {
    position: relative;
    display: flex;
}

.lq-pill-ext {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.lq-pill-ext:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-main);
}
.lq-pill-ext.active {
    background: rgba(108, 92, 231, 0.12);
    border-color: var(--accent);
    color: var(--accent);
}

/* =========================================
   CHAT AGENT & EXTENSIONS
   ========================================= */

.lq-extension-menu {
    position: absolute;
    bottom: calc(100% + 1rem);
    left: 0;
    width: 240px;
    background: var(--glass-highlight);
    backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 40px -10px rgba(0,0,0,0.15);
    padding: 0.75rem;
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 100;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lq-extension-menu.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.lq-extension-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lq-extension-item:hover {
    background: rgba(108, 92, 231, 0.05);
    color: var(--accent);
}

.lq-extension-item.active {
    background: rgba(108, 92, 231, 0.1);
    color: var(--accent);
}

.lq-extension-item.active i {
    color: var(--accent);
}

.lq-extension-plus-active {
    transform: rotate(45deg);
    color: var(--accent) !important;
}

/* =========================================
   SEGMENTED CONTROL (<c-segmented>) — chat mode-selector geometry is canon.
   Buttons keep consumer click logic; .active is the unified current class.
   ========================================= */
.lq-segmented {
    display: flex;
    background: rgba(0,0,0,0.03);
    padding: 0.25rem;
    border-radius: 12px;
    gap: 0.15rem;
}
.lq-segmented button {
    padding: 0.4rem 0.75rem;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9px;
    cursor: pointer;
    color: var(--text-muted);
    /* --lq-btn-transition == `all .2s ease` (liquid_style.css:16); value-equivalent
       to the canon chat-button `transition: all 0.2s ease` (#115 alignment, not drift). */
    transition: var(--lq-btn-transition);
    border: none;
    background: transparent;
}
.lq-segmented button:hover {
    color: var(--text-main);
}
.lq-segmented button.active {
    background: white;
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* =========================================
   ANIMATIONS
   ========================================= */
.lq-shine { position: relative; overflow: hidden; }
.lq-shine::after {
    content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg); animation: shine 5s infinite;
}
@keyframes shine { 0% { transform: translateX(-150%) skewX(-25deg); } 20%, 100% { transform: translateX(250%) skewX(-25deg); } }

/* Scrollbar — global thin tinted (spec §11). Firefox: html-level
   scrollbar-width/color (no pseudo support). WebKit: .lq-scrollbar class
   (kept — dropdown panels opt in via the class). */
html { scrollbar-width: thin; scrollbar-color: rgba(108,92,231,.35) transparent; }
.lq-scrollbar::-webkit-scrollbar { width: 6px; }
.lq-scrollbar::-webkit-scrollbar-track { background: transparent; }
.lq-scrollbar::-webkit-scrollbar-thumb { background: rgba(108, 92, 231, 0.2); border-radius: 10px; }

/* =========================================
   MOBILE HAMBURGER BUTTON
   ========================================= */

.lq-mobile-toggle {
    display: none;
    width: 40px; height: 40px; padding: 0;
    align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: var(--glass-bg);
    border: 1px solid var(--glass-border); color: var(--text-muted);
    cursor: pointer; flex-shrink: 0;
}

.lq-sidebar-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.3);
    z-index: 29; backdrop-filter: blur(2px);
}

/* =========================================
   RESPONSIVE — 768px (tablet)
   ========================================= */

@media (max-width: 768px) {
    .lq-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 30;
    }

    .lq-sidebar.open { transform: translateX(0); }

    .lq-sidebar-overlay.open { display: block; }

    .lq-mobile-toggle { display: flex; }

    .lq-header { padding: 0 1rem; }

    .lq-content { padding: 1rem; }

    .lq-chat-input-area { padding: 1rem; }
}

/* =========================================
   RESPONSIVE — 640px (mobile)
   ========================================= */

@media (max-width: 640px) {
    /* Headings scale with viewport */
    h1 { font-size: clamp(1.5rem, 6vw, 2.5rem); }
    h2 { font-size: clamp(1.2rem, 4vw, 1.75rem); }

    /* Share URL input — full width */
    #share-url-input { width: 100% !important; min-width: 0; }

    /* Stats grid — single column */
    .lq-stats-grid { grid-template-columns: 1fr; }

    /* Pricing grid — single column */
    .lq-pricing-grid { grid-template-columns: 1fr; }
    .lq-pricing-premium { transform: none; }
    .lq-pricing-premium:hover { transform: none; }

    /* Lex hero description */
    .lq-lex-hero-title { font-size: 1.75rem; }

    /* Chat bubbles — full width */
    .lq-bubble-wrapper { max-width: 100%; }
    .lq-chat-row.right .lq-bubble-wrapper { max-width: 85%; }

    /* Context panel — full width on mobile */
    .lq-context-panel {
        right: 0; left: 0; top: auto; bottom: 0;
        width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 70vh;
    }

    /* Hide the CHAT mode-selector on very small mobile to save space (the
       chat input box has its own collapse). Scoped to .lq-mr-fork — the chat
       instance — so the unified .lq-segmented does NOT also nuke the act
       reader's Leksykalnie/Semantycznie toggle (its only mode switch). */
    .lq-segmented.lq-mr-fork {
        display: none;
    }

    /* Chat input — tighter padding on small mobile */
    .lq-chat-input-box {
        padding: 0.25rem;
    }

    .lq-chat-textarea {
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* =====================================================================
   chat_view cotton migration — utility classes (additive, no rename)
   Spec: docs/superpowers/specs/2026-06-01-chat-view-cotton-migration-design.md §5
   These replace inline `style="..."` patterns in chat_view.html + 4 chat
   partials. Additive: no existing class is renamed or removed.
   ===================================================================== */

/* --- Flex / spacing utilities --- */
.lq-flex-row       { display: flex; flex-direction: row; }
.lq-flex-center    { display: flex; align-items: center; }
.lq-flex-between   { display: flex; align-items: center; justify-content: space-between; }
.lq-ml-auto        { margin-left: auto; }
.lq-mr-auto        { margin-right: auto; }
.lq-ml-sm          { margin-left: 0.75rem; }       /* chat header chips */
.lq-ml-fork        { margin-left: 0.6rem; }        /* fork button — editorial spacing */
.lq-mx-auto        { margin-left: auto; margin-right: auto; }
.lq-mb-0           { margin-bottom: 0; }
.lq-mb-sm          { margin-bottom: 0.5rem; }
.lq-mb-md          { margin-bottom: 1rem; }
.lq-mb-lg          { margin-bottom: 1.5rem; }
.lq-mb-xl          { margin-bottom: 2rem; }        /* alert spacing (was 2rem inline) */
.lq-gap-xs         { gap: 0.25rem; }
.lq-gap-sm         { gap: 0.5rem; }
.lq-gap-md         { gap: 0.75rem; }
.lq-w-full         { width: 100%; }
.lq-h-40           { height: 40px; }               /* chat bottom spacer */
.lq-flex-shrink-0  { flex-shrink: 0; }
.lq-inline         { display: inline; }
.lq-hidden         { display: none; }
.lq-justify-end    { justify-content: flex-end; }
.lq-flex-wrap      { flex-wrap: wrap; }
.lq-items-end      { align-items: flex-end; }
.lq-w-auto         { width: auto; }
.lq-mr-xs          { margin-right: 0.3rem; }
.lq-ml-xs          { margin-left: 0.5rem; }

/* --- Typography (extend the existing lq-caption / lq-text-muted family) --- */
.lq-text-xs        { font-size: 0.65rem; }
.lq-text-sm        { font-size: 0.8rem; }
.lq-text-h2        { font-size: 1.25rem; margin: 0; }  /* chat title */
.lq-text-italic    { font-style: italic; }          /* thinking-text */

/* --- Colour / status --- */
.lq-color-muted    { color: var(--text-muted); }
.lq-color-success  { color: var(--success); font-weight: 600; }
.lq-color-accent   { color: var(--accent); font-weight: 600; }
.lq-color-error    { color: var(--error); }
.lq-color-warning  { color: var(--warning); }
.lq-fw-black       { font-weight: 900; }            /* placed after colours: wins font-weight via source order */
.lq-icon-white     { color: white; }                /* submit arrow inside primary btn */

/* --- Layout-transparent / utility --- */
.lq-flex-1         { flex: 1; min-width: 0; }
.lq-truncate       { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lq-v-divider      { width: 1px; height: 20px; background: var(--glass-border); }

/* --- Button variants / extensions --- */
.lq-btn-icon-ghost { background: transparent; border: none; }   /* paperclip / close button on header */
.lq-btn-rounded-14 { border-radius: 14px; }                    /* submit button in chat input box */
.lq-bg-transparent { background: transparent; }
.lq-border-none    { border: none; }
.lq-bg-warning-soft { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); }  /* lock chip */

/* --- Animations --- */
/* Globalny keyframe spin (był tylko w chat.css — przeniesiony tu, bo liquid jest globalny). */
@keyframes spin { to { transform: rotate(360deg); } }
.lq-spin-icon      { animation: spin 1.2s linear infinite; }
.lucide-spin       { animation: spin 2s linear infinite; }  /* loader-2 icons (operator Temporal panel) */
.lq-pulse-dot      { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; opacity: 0.5; }
.lq-pulse-dot-1    { animation: pulse 1.5s infinite; }
.lq-pulse-dot-2    { animation: pulse 1.5s infinite 0.2s; }
.lq-pulse-dot-3    { animation: pulse 1.5s infinite 0.4s; }

/* =========================================
   MULTISELECT (autocomplete chips) — light surface
   ========================================= */
.lq-multiselect { position: relative; width: 100%; }

.lq-multiselect__label {
    display: block; margin-bottom: 0.5rem; margin-left: 0.25rem;
    font-family: var(--font-display); font-size: 0.65rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
}

.lq-multiselect__box {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid var(--glass-border); border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem; transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.lq-multiselect__box:focus-within {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--accent); box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15);
}

.lq-multiselect__chips { display: contents; }

.lq-multiselect__chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.2); border-radius: var(--radius-pill);
    padding: 0.25rem 0.4rem 0.25rem 0.75rem;
    font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
    color: var(--accent);
}

.lq-multiselect__chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: none; border-radius: 50%;
    background: rgba(108, 92, 231, 0.15); color: var(--accent);
    font-size: 0.9rem; line-height: 1; cursor: pointer; padding: 0;
    transition: all 0.2s ease;
}
.lq-multiselect__chip-x:hover { background: var(--accent); color: #fff; }

.lq-multiselect__input {
    /* width:0 + flex-grow kills the input's INTRINSIC ~20-char width (the
       size attribute) — that intrinsic min-content propagated through the
       parent fieldset (default min-inline-size:min-content) and pushed the
       whole theme picker outside the 220px facet panel. */
    flex: 1 1 80px; width: 0; min-width: 80px; border: none; background: transparent;
    outline: none; font-family: var(--font-body); font-size: 0.9rem;
    font-weight: 500; color: var(--text-main); padding: 0.2rem 0;
}

/* Fieldsets refuse to shrink below content by default — inside the facet
   panel they must track the panel width, not their widest child. */
.lq-facet-panel fieldset { min-inline-size: 0; }
.lq-multiselect__input::placeholder { color: var(--text-light); }

.lq-multiselect__options {
    position: absolute; left: 0; right: 0; top: calc(100% + 0.4rem); z-index: 30;
    max-height: 240px; overflow-y: auto;
    background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.15);
    padding: 0.4rem;
}

.lq-multiselect__option {
    padding: 0.55rem 0.75rem; border-radius: var(--radius-sm);
    font-size: 0.85rem; font-weight: 500; color: var(--text-main);
    cursor: pointer; transition: background 0.15s ease;
}
.lq-multiselect__option:hover { background: rgba(108, 92, 231, 0.1); color: var(--accent); }

/* Grouped multiselect: small category header inside the options dropdown. */
.lq-multiselect__group-badge {
    margin: 0.4rem 0.25rem 0.2rem;
    padding: 0.15rem 0.5rem;
    font-family: var(--font-display); font-size: 0.6rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--accent);
    background: rgba(108, 92, 231, 0.08);
    border-radius: var(--radius-pill);
    display: inline-block;
}
.lq-multiselect__group-badge:first-child { margin-top: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   Facet panel (<c-facet-panel>) — left-column checkbox filters for the
   semantic-search results. Light surface only, matches the .lq-* glass cards.
   ────────────────────────────────────────────────────────────────────────── */
.lq-facet-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.25rem 1.5rem;
    align-self: start;
    position: sticky;
    top: 1rem;
}
/* #180/#101 P-028: orzeczenia facet sidebar stacks its groups via flex+gap
   (act facets use block-flow margins). Scoped modifier so the base class —
   shared with <c-facet-panel> (act search) — stays untouched. */
.lq-facet-panel--stack { display: flex; flex-direction: column; gap: 1rem; }
.lq-facet-panel__head {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 1rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--glass-border);
}
.lq-facet-panel__title {
    font-family: var(--font-display); font-size: 0.95rem; font-weight: 800;
    color: var(--text-main);
}
.lq-facet-group { border: none; padding: 0; margin: 0 0 1.25rem; }
.lq-facet-group:last-child { margin-bottom: 0; }
.lq-facet-group__legend {
    font-family: var(--font-display); font-size: 0.65rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); margin-bottom: 0.5rem; padding: 0;
}
.lq-facet-option {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.4rem; border-radius: var(--radius-sm);
    font-size: 0.85rem; color: var(--text-main); cursor: pointer;
    transition: background 0.15s;
}
.lq-facet-option:hover { background: rgba(108, 92, 231, 0.08); }
.lq-facet-option input[type="checkbox"] { cursor: pointer; }
.lq-facet-option__label { flex: 1; }
.lq-facet-option__count { color: var(--text-light); font-size: 0.75rem; font-weight: 600; }

/* ── Per-document lifecycle stepper (<c-doc-lifecycle>) ───────────────── */
.lq-lifecycle {
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6); padding: 1.25rem;
}
.lq-stage-track {
    display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: stretch;
}
.lq-stage {
    flex: 1 1 180px; min-width: 160px; position: relative;
    display: flex; gap: 0.6rem; padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.85);
}
.lq-stage:not(:last-child)::after {
    content: ""; position: absolute; right: -0.55rem; top: 50%;
    width: 0.75rem; height: 2px; background: var(--glass-border);
    transform: translateY(-50%);
}
.lq-stage__dot {
    flex-shrink: 0; display: flex; align-items: center;
}
.lq-stage__dot span {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--text-light); display: inline-block;
}
.lq-stage__label {
    font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
    color: var(--text-main);
}
.lq-stage__evidence {
    font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem;
}
.lq-stage__force { margin-top: 0.6rem; }
.lq-lifecycle__footer {
    margin-top: 1rem; padding-top: 0.85rem;
    border-top: 1px dashed var(--glass-border);
}
.lq-stage--done .lq-stage__dot span { background: var(--success); }
.lq-stage--done { border-left: 3px solid var(--success); }
.lq-stage--stale .lq-stage__dot span { background: var(--warning); }
.lq-stage--stale { border-left: 3px solid var(--warning); }
.lq-stage--error .lq-stage__dot span { background: var(--error); }
.lq-stage--error { border-left: 3px solid var(--error); }
.lq-stage--missing .lq-stage__dot span { background: var(--text-light); }
.lq-stage--missing { border-left: 3px solid var(--text-light); }
.lq-stage--unknown .lq-stage__dot span { background: var(--text-light); }
.lq-stage--unknown { border-left: 3px solid var(--text-light); }

/* Operator doc-picker compact lifecycle badges (Sub-2 / 2A). Mirrors the
   .lq-stage* state colours used by <c-doc-lifecycle> (Phase 2). */
.lq-stage-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.lq-stage-done    { background: rgba(34, 197, 94, 0.10);  color: var(--success);    border-color: rgba(34, 197, 94, 0.20); }
.lq-stage-stale   { background: rgba(234, 179, 8, 0.10);  color: var(--warning);    border-color: rgba(234, 179, 8, 0.20); }
.lq-stage-error   { background: rgba(239, 68, 68, 0.10);  color: var(--error);      border-color: rgba(239, 68, 68, 0.20); }
.lq-stage-missing { background: rgba(0, 0, 0, 0.04);      color: var(--text-light); border-color: var(--glass-border); }
.lq-stage-unknown { background: rgba(0, 0, 0, 0.04);      color: var(--text-muted); border-color: var(--glass-border); }

/* =========================================
   TOAST (global, liquid glass)
   ========================================= */
.lq-toast {
    position: fixed; left: 50%; bottom: 26px;
    transform: translateX(-50%) translateY(22px);
    background: var(--text-main); color: #fff; border-radius: var(--radius-pill);
    padding: 11px 20px; font-size: 0.84rem; font-weight: 600; font-family: var(--font-body);
    box-shadow: 0 10px 34px rgba(0,0,0,0.28); opacity: 0;
    transition: opacity 0.22s, transform 0.22s; z-index: 1000;
    display: flex; align-items: center; gap: 9px; pointer-events: none;
}
.lq-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lq-toast .k { color: #c4b5fd; }
.lq-toast.lq-toast-success { background: #0a7a55; }
.lq-toast.lq-toast-error { background: #b91c1c; }

/* =========================================
   SEARCH BAR (szklany pill + focus glow + spinner-przycisk)
   ========================================= */
.lq-search-bar {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--glass-bg-solid); border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill); padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    box-shadow: 0 8px 32px rgba(31,38,135,0.08); transition: box-shadow 0.2s, border-color 0.2s;
}
.lq-search-bar:focus-within { border-color: var(--accent); box-shadow: 0 8px 32px var(--accent-glow); }
.lq-search-bar__icon { color: var(--text-muted); flex-shrink: 0; }
.lq-search-bar__input {
    flex: 1; border: 0; background: transparent; outline: none;
    font-family: var(--font-body); font-size: 1rem; color: var(--text-main); min-width: 0;
}
.lq-search-bar__input::placeholder { color: var(--text-light); }
.lq-search-bar__btn {
    flex-shrink: 0; border: 0; border-radius: var(--radius-pill); cursor: pointer;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
    padding: 0.6rem 1.4rem; display: inline-flex; align-items: center; gap: 0.5rem;
    transition: var(--lq-btn-transition), width 0.25s, padding 0.25s;
}
.lq-search-bar__btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 6px 18px var(--accent-glow); }
.lq-search-bar__btn:active { transform: scale(0.96); }
.lq-search-bar__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* spinner-stan: HTMX hx-indicator chowa label, pokazuje spinner (reuse globalnego @keyframes spin) */
.lq-search-bar__btn .lq-search-bar__spin { display: none; }
.htmx-request .lq-search-bar__btn .lq-search-bar__label { display: none; }
.htmx-request .lq-search-bar__btn .lq-search-bar__spin { display: inline-flex; animation: spin 0.7s linear infinite; }

/* Example-prompt chip — używany przez public_search (ładuje liquid_style).
   Landing ma swoją kopię w landing.css (ładuje landing.css, nie ten arkusz). */
.exchip {
    cursor: pointer;
    font-size: 0.82rem;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-main);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: border-color 0.15s, background 0.15s;
}
.exchip:hover, .exchip.is-active { border-color: var(--accent); background: var(--accent-soft, rgba(108,92,231,0.08)); }
.exchip i { color: var(--accent); }

/* =========================================
   ACT RESULT CARD (semantyczne wyniki aktów) — badge progowy % (jedno miejsce)
   ========================================= */
.lq-sim-badge {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.25rem;
    font-family: monospace; font-size: 0.85rem; font-weight: 900;
    padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.lq-sim-badge--high { background: rgba(16,185,129,0.1); color: var(--success); border: 1px solid rgba(16,185,129,0.2); }  /* >=75 */
.lq-sim-badge--mid  { background: rgba(245,158,11,0.1); color: var(--warning); border: 1px solid rgba(245,158,11,0.2); }  /* >=50 */
.lq-sim-badge--low  { background: rgba(239,68,68,0.1);  color: var(--error);   border: 1px solid rgba(239,68,68,0.2); }   /* <50 */
.lq-act-result__summary { min-height: 3.4em; }  /* stabilizacja wysokości pod HTMX swap (D5) */

/* =========================================
   SEARCH LAYOUT C (facet-panel + wyniki) — Faza 1 T7
   ========================================= */
.lq-layout-c { display: grid; grid-template-columns: 262px minmax(0,1fr); gap: 1.5rem; align-items: start; }
/* Mode toggle (Słowa kluczowe / Semantyczny) — 2 deep-link chip segments above
   the search bar. Reuses .lq-chip / .lq-chip-xs / .lq-chip-active tokens (F0);
   only the inline-flex grouping is new. */
.lq-mode-toggle { display: inline-flex; gap: 0.4rem; align-self: flex-start; }
.lq-mode-toggle .lq-chip { text-decoration: none; align-items: center; gap: 0.35rem; }
.lq-results-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.lq-results-count { font-size: 0.92rem; color: var(--text-muted); }
.lq-results-count strong { color: var(--text-main); }
.lq-sort-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.lq-sort-chips .lq-chip { cursor: pointer; }
.lq-more-wrap { display: flex; justify-content: center; margin-top: 1.25rem; }
.lq-row-sub { font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-display); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem; }
.lq-chip-accent { background: rgba(108,92,231,0.1); border-color: rgba(108,92,231,0.2); color: var(--accent); }
.lq-chip-danger { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); color: var(--error); }
.lq-chip-accent .lq-dot { background: var(--accent); }
.lq-chip-danger .lq-dot { background: var(--error); }
.lq-link { color: var(--accent); text-decoration: none; transition: text-decoration .15s ease; }
.lq-link:hover { text-decoration: underline; }
.lq-view-enter { animation: lqViewEnter .22s ease; }
@keyframes lqViewEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lq-dim { opacity: 0.4; transition: opacity .18s ease; }
/* SCOPED stable columns — only the search results table, NOT global .lq-table. */
.lq-table-search .lq-table { table-layout: fixed; }
.lq-table-search .lq-table th:nth-child(2),
.lq-table-search .lq-table td:nth-child(2),
.lq-table-search .lq-table th:nth-child(3),
.lq-table-search .lq-table td:nth-child(3) { width: 130px; }
.lq-table-search .lq-table th:nth-child(4),
.lq-table-search .lq-table td:nth-child(4) { width: 110px; }

/* ====== LEX act view — Faza 2 (czytnik + akordeony + hasła) ====== */

/* Brakujące warianty dot (spec §4). Tokeny --error/--info istnieją (linie 22-23).
   .lq-dot-success/.lq-dot-warning już są (F0); te 2 dopisujemy.
   .lq-chip-xs NIE tu — definiuje ją Faza 0 (0.8). */
.lq-dot-error { background: var(--error); box-shadow: 0 0 8px rgba(239,68,68,0.6); }
.lq-dot-info { background: var(--info); box-shadow: 0 0 8px rgba(59,130,246,0.6); }

/* Sticky panel metadanych */
.lq-meta-side { display: flex; flex-direction: column; gap: 0.85rem; position: sticky; top: 16px; }
.lq-meta-card h4 { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.45rem; }
/* .lq-kv retired in G3 M2 migration (act_detail meta rows → <c-kv-icon>); no
   remaining consumers. See cotton/kv_icon.html for the replacement (.lq-kv-icon). */

/* Słowa kluczowe — urzędowe + AI */
.lq-kws { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lq-kw { display: inline-flex; align-items: center; background: rgba(59,130,246,0.08); color: #1d5fb8; border-radius: var(--radius-pill); padding: 0.18rem 0.62rem; font-size: 0.74rem; font-weight: 500; cursor: pointer; transition: box-shadow 0.12s, filter 0.12s; text-decoration: none; }
.lq-kw:hover { filter: brightness(0.97); box-shadow: 0 0 0 2px rgba(108,92,231,0.18); }
.lq-kw-ai { background: rgba(148,163,184,0.12); color: var(--text-muted); }
.lq-kw-ai::before { content: "AI"; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.04em; color: var(--text-light); border: 1px solid rgba(148,163,184,0.4); border-radius: 3px; padding: 0 3px; margin-right: 5px; }
.lq-kw-sub { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); margin: 0.8rem 0 0.45rem; display: flex; align-items: center; gap: 0.4rem; }
.lq-kw-sub:first-child { margin-top: 0; }
.lq-kw-more { font-size: 0.72rem; color: var(--accent); cursor: pointer; margin-top: 0.4rem; display: inline-block; background: none; border: none; padding: 0; }

/* Akordeony powiązań — grid-rows animowane (0fr → 1fr) */
.lq-rel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.lq-rel-block h4 { font-size: 0.74rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.45rem; }
.lq-rel-block h4 .n { color: var(--text-light); font-weight: 600; }
.lq-acc { border: 1px solid var(--glass-border); border-radius: 10px; margin-bottom: 0.5rem; overflow: hidden; background: rgba(255,255,255,0.5); }
/* Keyboard focus ring on the nested domain-tree chevron toggle (F2 §8/§30 a11y) —
   F0's :focus-visible block rings .lq-acc-head, not the inner <button>. */
.lq-acc-toggle { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; }
.lq-acc-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.lq-acc-head { display: flex; align-items: center; gap: 0.62rem; padding: 0.68rem 0.8rem; cursor: pointer; font-size: 0.83rem; background: none; border: none; width: 100%; text-align: left; transition: var(--lq-btn-transition); }
.lq-acc-head:hover { background: rgba(108,92,231,0.05); }
.lq-acc-head .ci { width: 15px; height: 15px; flex: none; color: var(--text-light); transition: transform 0.25s ease, color 0.2s; }
.lq-acc.open .lq-acc-head .ci { transform: rotate(90deg); color: var(--accent); }
.lq-acc-head .nm { font-weight: 600; color: var(--text-main); flex: 1; min-width: 0; line-height: 1.35; }
.lq-acc-head .cnt { flex: none; font-size: 0.7rem; font-weight: 700; color: var(--accent-dark, var(--accent)); background: rgba(108,92,231,0.1); border-radius: var(--radius-pill); padding: 0.12rem 0.55rem; }
.lq-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.26s ease; }
.lq-acc.open .lq-acc-body { grid-template-rows: 1fr; }
.lq-acc-bodyinner { overflow: hidden; min-height: 0; padding: 0.12rem 0.8rem 0.6rem; }
.lq-acc-item { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.4rem 0.25rem; font-size: 0.8rem; color: var(--text-muted); border-top: 1px solid rgba(148,163,184,0.1); text-decoration: none; }
.lq-acc-item:hover { color: var(--accent); }
.lq-acc-item .di { color: var(--text-light); flex: none; width: 13px; margin-top: 2px; }
.lq-acc-item .lq-tree-cnt { color: var(--text-light); font-size: 0.72rem; }
.lq-acc-showall { font-size: 0.72rem; color: var(--accent); padding: 0.45rem 0.25rem 0.12rem; display: inline-block; text-decoration: none; }

/* Czytnik stron */
.lq-reader-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.lq-pager { display: flex; align-items: center; gap: 0.4rem; }
.lq-pgbtn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--glass-border); background: #fff; color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--lq-btn-transition); }
.lq-pgbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lq-pgbtn:disabled { opacity: 0.4; cursor: default; }
.lq-pgnum { display: flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; color: var(--text-muted); }
.lq-pgnum input { width: 54px; text-align: center; border: 1px solid var(--glass-border); border-radius: 8px; padding: 0.35rem 0.25rem; font-family: var(--font-display); font-weight: 700; color: var(--text-main); outline: none; }
.lq-rsearch { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.lq-rsearch .box { display: flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); padding: 0.5rem 0.85rem; }
.lq-rsearch .box input { border: 0; outline: 0; background: transparent; font-size: 0.84rem; width: 200px; color: var(--text-main); }
.lq-pagesum { background: rgba(108,92,231,0.06); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; font-size: 0.85rem; color: #33384d; }
.lq-pagesum .lab { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.lq-pagetext { font-size: 0.9rem; color: #2b3042; line-height: 1.85; white-space: pre-line; min-height: 170px; }
.lq-pagetext .pglab { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-light); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.lq-pagetext mark { background: rgba(245,158,11,0.32); color: inherit; border-radius: 3px; padding: 0 2px; }
.lq-rsem { margin-bottom: 0.9rem; border: 1px dashed rgba(108,92,231,0.35); border-radius: var(--radius-md); padding: 0.75rem 0.9rem; background: rgba(108,92,231,0.03); }
.lq-rsem .h { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 0.55rem; display: flex; align-items: center; gap: 0.45rem; }
.lq-rsem .hit { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0.55rem; border-radius: 9px; cursor: pointer; }
.lq-rsem .hit:hover { background: rgba(108,92,231,0.07); }
.lq-rsem .pg { font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; color: var(--accent); background: #fff; border: 1px solid var(--glass-border); border-radius: 8px; padding: 0.18rem 0.55rem; flex: none; }
.lq-rsem .sn { font-size: 0.8rem; color: var(--text-muted); }
.lq-rsem .pct { font-size: 0.7rem; font-weight: 700; color: var(--success); flex: none; }
.lq-reader-dim { opacity: 0.45; transition: opacity 0.18s; }
/* REUŻYCIE globalnego @keyframes spin (Faza 0 0.10 przeniosła go z chat.css do liquid_style.css).
   NIE definiuj @keyframes lq-spin — jeden keyframe rotacji w całym arkuszu (cross-phase). */
.lq-reader-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(108,92,231,0.25); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }

/* =========================================
   LEX DZIENNIKI (declutter faza 3)
   ========================================= */

/* Etykieta sekcji kategorii (Krajowe / Wojewódzkie / Unia Europejska) */
.lq-seclabel { display: flex; align-items: center; gap: 0.65rem; margin: 0 2px 0.75rem; }
.lq-seclabel h3 { font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); }
.lq-seclabel .lq-seclabel-line { flex: 1; height: 1px; background: rgba(148, 163, 184, 0.18); }
.lq-seclabel .lq-seclabel-toggle { font-size: 0.7rem; color: var(--accent); font-weight: 700; cursor: pointer; background: none; border: none; padding: 0; font-family: var(--font-body); }
.lq-seclabel .lq-seclabel-toggle:hover { text-decoration: underline; }

/* Karta dziennika (kompaktowa, ikona + nazwa + meta).
   flex-direction:row + border-radius JAWNIE — nadpisują .lq-card base
   (column + radius-lg), inaczej layout łamie się w pion. */
.lq-journal-card { display: flex; flex-direction: row; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 16px; text-decoration: none; color: inherit; }
.lq-journal-card .lq-journal-icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(108, 92, 231, 0.1); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.lq-journal-card .lq-journal-icon i { width: 22px; height: 22px; }
.lq-journal-card .lq-journal-name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--text-main); }
.lq-journal-card .lq-journal-short { font-size: 0.7rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1px; }
.lq-journal-card .lq-journal-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.45rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.lq-journal-card .lq-journal-meta b { color: var(--text-main); font-weight: 700; }
.lq-journal-card .lq-journal-arrow { margin-left: auto; color: var(--text-light); flex: none; }
.lq-journal-card.lq-journal-soon { opacity: 0.7; cursor: default; }
.lq-journal-soon-tag { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #c2410c; background: rgba(234, 88, 12, 0.12); border: 1px solid rgba(234, 88, 12, 0.3); border-radius: var(--radius-pill); padding: 2px 8px; }

/* Akordeon dekad — REUŻYWA prymitywu .lq-acc (Faza 2, :1259-1272): shell
   (.lq-acc), animacja grid-rows 0fr->1fr (.lq-acc-body/.lq-acc-bodyinner) i
   kanon stanu otwarcia (.open). Template renderuje <div class="lq-acc lq-decade">
   z .lq-acc-body/.lq-acc-bodyinner w środku. Poniżej TYLKO warstwa treści dekad
   (head label/count, chevron, kafelki lat) + drobne delty wizualne nad .lq-acc.
   NIE re-definiujemy mechanizmu animacji ani drugiego stanu otwarcia (.lq-open). */
.lq-decade { border-radius: 12px; margin-bottom: 0.65rem; }
.lq-decade-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; cursor: pointer; width: 100%; text-align: left; background: none; border: none; transition: var(--lq-btn-transition); }
.lq-decade-head:hover { background: rgba(108, 92, 231, 0.04); }
.lq-decade-head .lq-decade-chevron { width: 15px; height: 15px; flex: none; color: var(--text-light); transition: transform 0.25s ease, color 0.2s; }
.lq-decade.open .lq-decade-head .lq-decade-chevron { transform: rotate(90deg); color: var(--accent); }
.lq-decade-head .lq-decade-label { font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; flex: 1; }
.lq-decade-head .lq-decade-count { flex: none; font-size: 0.74rem; color: var(--text-muted); }
.lq-decade-head .lq-decade-count b { color: var(--text-main); }
.lq-decade-years { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.13rem 0.2rem 0.4rem; }

/* Kafelek roku (klik -> szukaj aktów prefiltr) */
.lq-year-tile { display: inline-flex; align-items: center; gap: 0.45rem; background: #fff; border: 1px solid var(--glass-border); border-radius: 10px; padding: 0.5rem 0.75rem; font-size: 0.82rem; cursor: pointer; text-decoration: none; color: inherit; transition: border-color 0.12s; }
.lq-year-tile:hover { border-color: var(--accent); }
.lq-year-tile .lq-year-num { font-family: var(--font-display); font-weight: 800; color: var(--text-main); }
.lq-year-tile .lq-year-count { font-size: 0.72rem; color: var(--text-light); }

/* =========================================
   FORM CONTROLS — Liquid Glass family (spec §5/§6; values = fc05 FC_CSS)
   Mock→prod: .fc→.lq-control, .fc-check→.lq-check, .fc-radio→.lq-radio,
   .sw1→.lq-switch. transition rides --lq-btn-transition (#115).
   ========================================= */
.lq-control {
    appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; flex: none;
    display: inline-grid; place-content: center;
    transition: var(--lq-btn-transition);
    border: 1px solid var(--lq-field-border); background: var(--lq-field-bg);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 1px 3px rgba(26,26,46,.14);
}
.lq-control:hover:not(:disabled) { border-color: var(--accent); }
.lq-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lq-control:disabled { opacity: .45; cursor: not-allowed; }

/* Label wrapper for <c-checkbox>/<c-radio> (was duplicated inline style ×2). */
.lq-control-row { display: flex; align-items: center; gap: .55rem; cursor: pointer; }

/* Checkbox — rounded square + masked lucide tick */
.lq-check { width: 20px; height: 20px; border-radius: 7px; }
.lq-check::before {
    content: ""; width: 13px; height: 13px; background: #fff;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M20 6 9 17l-5-5%22/></svg>') center/contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M20 6 9 17l-5-5%22/></svg>') center/contain no-repeat;
    transform: scale(0); transition: transform .16s cubic-bezier(.2, .9, .3, 1.35);
}
.lq-check:checked {
    background: linear-gradient(135deg, #6c5ce7, #4834d4); border-color: transparent;
    box-shadow: 0 4px 10px -2px rgba(108,92,231,.55);
}
.lq-check:checked::before { transform: scale(1); }
.lq-check.xs { width: 16px; height: 16px; border-radius: 5px; }
.lq-check.xs::before { width: 10px; height: 10px; }

/* Radio — circle + gradient kulka (spec §5; gallery-only, 0 consumers) */
.lq-radio { width: 20px; height: 20px; border-radius: 50%; }
.lq-radio::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: linear-gradient(135deg, #6c5ce7, #4834d4);
    box-shadow: 0 2px 6px rgba(108,92,231,.55);
    transform: scale(0); transition: transform .16s cubic-bezier(.2, .9, .3, 1.35);
}
.lq-radio:checked { border-color: transparent; }
.lq-radio:checked::before { transform: scale(1); }
.lq-radio.xs { width: 16px; height: 16px; }
.lq-radio.xs::before { width: 8px; height: 8px; }

/* Switch "Kometa" (spec §6; values = fc05). 2px clearance from padding-box
   in every axis/size (contract). .lq-switch is an <input type=checkbox>.
   Self-sufficient appearance reset (does NOT rely on .lq-control being co-
   applied — consumers author bare `class="lq-switch xs"`; without this the
   native checkbox chrome paints on top of the styled track). */
.lq-switch {
    appearance: none; -webkit-appearance: none; display: inline-grid; margin: 0; cursor: pointer; flex: none;
    position: relative; width: 48px; height: 24px; border-radius: 999px; place-content: unset;
    background: rgba(226,229,244,.92);
    box-shadow: inset 0 2px 5px rgba(26,26,46,.18), inset 0 -1px 1px rgba(255,255,255,.7);
}
.lq-switch::after {
    content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: 18px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(108,92,231,0) 0%, rgba(108,92,231,.38) 55%, rgba(108,92,231,.62) 100%);
    opacity: 0; transition: width .22s cubic-bezier(.2, .9, .3, 1.1), opacity .18s ease;
}
.lq-switch:checked::after { width: 44px; opacity: 1; }
.lq-switch::before {
    content: ""; position: absolute; z-index: 1; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(26,26,46,.4), inset 0 1px 1px rgba(255,255,255,.9);
    transition: left .22s cubic-bezier(.2, .9, .3, 1.2), background .18s ease, box-shadow .18s ease;
}
.lq-switch:checked::before {
    left: 26px; background: linear-gradient(135deg, #8b7cf0, #6c5ce7);
    box-shadow: 0 0 10px 2px rgba(108,92,231,.55), 0 1px 3px rgba(26,26,46,.3), inset 0 1px 1px rgba(255,255,255,.5);
}
.lq-switch.xs { width: 40px; height: 20px; }
.lq-switch.xs::before { width: 14px; height: 14px; }
.lq-switch.xs:checked::before { left: 22px; }
.lq-switch.xs::after { width: 14px; }
.lq-switch.xs:checked::after { width: 36px; }

/* Firefox does NOT generate ::before/::after on <input type=checkbox> even
   with appearance:none (Bugzilla 1157575/605985, WONTFIX) — so the knob+trail
   above are invisible there and checked/unchecked become indistinguishable.
   Fallback: in FF only, recolor the track on :checked so state still reads.
   Chromium/Safari ignore @-moz-document and keep the full Kometa pseudos.
   .lq-check still differentiates via its :checked gradient bg (only the tick
   is lost in FF — acceptable); .lq-radio is gallery-only. */
@-moz-document url-prefix() {
    .lq-switch:checked {
        background: linear-gradient(135deg, #8b7cf0, #6c5ce7);
        box-shadow: inset 0 2px 5px rgba(76,29,149,.25), inset 0 -1px 1px rgba(255,255,255,.5);
    }
}

/* =========================================
   <c-dropdown> — APG listbox-button glass look (spec §7). Markup +
   JS driver live in cotton/dropdown.html + controls.js (G1). The real
   <select> is visually-hidden (NOT display:none) so HTMX stays bound +
   the no-JS fallback still focuses/submits.
   ========================================= */
.lq-dd { position: relative; }
/* Real <select>: visually-hidden but kept in the a11y tree + HTMX-bound. */
.lq-dd__select {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lq-dd__trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    width: 100%; padding: 0.5rem 0.75rem; border-radius: 12px;
    border: 1px solid var(--lq-field-border); background: var(--lq-field-bg);
    font-family: var(--font-body); font-size: 0.85rem; color: var(--text-main);
    cursor: pointer; transition: var(--lq-btn-transition);
}
.lq-dd__trigger:hover { border-color: var(--accent); }
.lq-dd__trigger[aria-expanded="true"] {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,92,231,.14);
}
.lq-dd__chevron { color: var(--accent); transition: transform .2s ease; }
.lq-dd__trigger[aria-expanded="true"] .lq-dd__chevron { transform: rotate(180deg); }
.lq-dd__panel {
    position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 50;
    margin: 0; padding: 0.3rem; list-style: none; max-height: 18rem; overflow-y: auto;
    background: rgba(255,255,255,.85); backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 14px; box-shadow: 0 18px 44px -12px rgba(76,29,149,.28);
}
.lq-dd__panel[hidden] { display: none; }
.lq-dd__option {
    padding: 0.45rem 0.6rem; border-radius: 9px; font-size: 0.85rem;
    color: var(--text-main); cursor: pointer; display: flex; align-items: center; justify-content: space-between;
}
.lq-dd__option:hover, .lq-dd__option.is-active { background: rgba(108,92,231,.08); }
.lq-dd__option[aria-selected="true"] {
    background: rgba(108,92,231,.10); font-weight: 600; color: var(--accent);
}

/* =========================================
   §9 CURSOR SHIMMER (production: delegated pointermove in controls.js
   writes --mx/--my; pseudo here paints the violet radial that follows the
   cursor). NO overflow:hidden on carriers — inset:0 + border-radius:inherit
   keeps the gradient clipped to the rounded box WITHOUT clipping child
   popovers (facet-panel dropdown/multiselect). Thinking-row excluded via
   :not(.lq-melanz) — it has its own conic beams (chat.css §10).
   ========================================= */
.lq-panel, .lq-card, .lq-table-wrapper,
.lq-bubble-left:not(.lq-melanz) {
    position: relative;
}
/* .lq-facet-panel already position:sticky (:1097) — a positioning context; do
   NOT add position:relative or it clobbers the sticky scroll behavior. */
.lq-panel::after, .lq-card::after, .lq-facet-panel::after,
.lq-table-wrapper::after, .lq-bubble-left:not(.lq-melanz)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
        rgba(108,92,231,0.13) 0%, transparent 62%);
    z-index: 0;
}
.lq-panel:hover::after, .lq-card:hover::after, .lq-facet-panel:hover::after,
.lq-table-wrapper:hover::after, .lq-bubble-left:not(.lq-melanz):hover::after {
    opacity: 1;
}

/* === Operator panel F1: c-toggle (przełącznik iOS-style) ================== */
.lq-toggle { display: inline-flex; cursor: pointer; vertical-align: middle; }
.lq-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.lq-toggle-track { width: 38px; height: 22px; border-radius: 999px; background: var(--glass-border); transition: background .15s ease; display: inline-flex; align-items: center; padding: 2px; }
.lq-toggle-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--glass-bg-solid); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform .15s ease; }
.lq-toggle input:checked + .lq-toggle-track { background: var(--success); }
.lq-toggle input:checked + .lq-toggle-track .lq-toggle-thumb { transform: translateX(16px); }
.lq-toggle input:disabled + .lq-toggle-track { opacity: 0.45; cursor: not-allowed; }

/* Czerwony STOP w miejscu strzałki wysyłki podczas generowania (2026-06-11).
   Pełny parytet wizualny z .lq-btn-primary (gradient + glow + hover-lift),
   tylko w czerwieni; delikatny puls sygnalizuje trwającą generację. */
.lq-btn-icon-stop {
    background: linear-gradient(135deg, var(--error) 0%, var(--error-dark) 100%);
    color: white;
    border: none;
    box-shadow: 0 10px 25px -5px var(--error-glow), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    animation: lq-stop-pulse 1.6s ease-in-out infinite;
}
.lq-btn-icon-stop:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px var(--error-glow);
    filter: brightness(1.1);
    animation: none;
}
@keyframes lq-stop-pulse {
    0%, 100% { box-shadow: 0 10px 25px -5px var(--error-glow), inset 0 1px 1px rgba(255,255,255,0.3); }
    50% { box-shadow: 0 10px 32px -2px var(--error-glow), inset 0 1px 1px rgba(255,255,255,0.3); }
}

/* ── Citations (Odniesienia): panel entries + per-message badges ─────────── */
.lq-citation-group { margin-bottom: 1rem; }
.lq-citation-group-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-display); font-size: 0.8rem;
    color: var(--text-main); margin-bottom: 0.35rem;
}
.lq-citation-entry-row { display: flex; align-items: center; gap: 0.25rem; }
.lq-citation-entry {
    flex: 1; display: flex; align-items: baseline; gap: 0.5rem; min-width: 0;
    text-align: left; background: transparent; border: none; cursor: pointer;
    padding: 0.35rem 0.5rem; border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: 0.8rem;
}
.lq-citation-entry:hover { background: var(--glass-bg); color: var(--text-main); }
.lq-citation-page { color: var(--accent); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.lq-citation-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0.75rem; }
.lq-turn-flash > * { animation: lq-citation-flash 1.4s ease-out 1; }
@keyframes lq-citation-flash {
    0% { background: rgba(108, 92, 231, 0.18); } /* --accent @ 18% — keyframes can't var() reliably across engines */
    100% { background: transparent; }
}
.lq-citation-quote-block {
    margin: 0; padding: 0.75rem 1rem; border-left: 3px solid var(--accent);
    background: var(--glass-bg);
    border-radius: var(--radius-sm); font-style: italic;
}
.lq-citation-page-text { max-height: 40vh; overflow-y: auto; font-size: 0.85rem; color: var(--text-muted); }

/* ── Modal primitive (c-modal) — glass surface above the context panels ── */
.lq-modal-backdrop {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26, 26, 46, 0.35); backdrop-filter: blur(6px);
}
.lq-modal-backdrop.lq-modal-hidden { display: none; }
.lq-modal {
    width: min(680px, calc(100vw - 3rem)); max-height: min(78vh, 760px);
    display: flex; flex-direction: column;
    background: var(--glass-bg-solid);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.15); /* no shadow token exists — matches .lq-context-panel literal */
}
.lq-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--glass-border);
}
.lq-modal-title { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-main); }
.lq-modal-body { padding: 1.25rem; overflow-y: auto; }

/* ── Operator sync screen (operator_cloud/_sync_cards.html) ──
   Uniform action rows on the source cards: every action is its own <form>
   (CSRF + POST), so the row is a flex-wrap of single-button forms. These
   classes give one visual hierarchy + even gaps + a tidy per-source group,
   replacing the inline div-soup that wrapped raggedly. */
.lq-sync-card { margin-bottom: 1rem; }
.lq-sync-card:last-child { margin-bottom: 0; }
.lq-sync-card-head {
    display: flex; align-items: center; gap: 0.85rem;
}
.lq-sync-card-head__icon {
    background: var(--glass-bg);
    color: var(--accent);
    border: none; cursor: default; flex-shrink: 0;
}
.lq-sync-card-head__text { flex: 1; min-width: 0; }
.lq-sync-card-head__title { font-weight: 700; color: var(--text-main); }
.lq-sync-card-head__subtitle { font-size: 0.8rem; color: var(--text-muted); }
/* Action row: forms become equal-rhythm flex items; the wrapped button
   matches its neighbours (no orphan-on-its-own-line look). */
.lq-sync-actions {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-top: 0.85rem;
}
.lq-sync-actions > form { margin: 0; display: inline-flex; }
.lq-sync-actions > form > .lq-btn { width: 100%; }
/* Per-source dropdown: own row beneath the action buttons, left-aligned,
   separated by a hairline so it never floats inside the button row. */
.lq-sync-per-source {
    margin-top: 0.85rem; padding-top: 0.85rem;
    border-top: 1px solid var(--glass-border);
}
.lq-sync-per-source summary { list-style: none; cursor: pointer; }
.lq-sync-per-source summary::-webkit-details-marker { display: none; }
.lq-sync-per-source__list {
    display: flex; flex-direction: column; gap: 0.4rem;
    margin-top: 0.6rem;
}
.lq-sync-per-source__row {
    margin: 0; display: flex; align-items: center; gap: 0.6rem;
}
.lq-sync-per-source__name { font-size: 0.82rem; color: var(--text-main); }

/* === Panel harmonogramów (operator_panel/schedules) ====================== */
/* Postęp aktywnego uruchomienia: cienki pasek na tokenach (zero literałów). */
.lq-progress {
    width: 140px; height: 6px; border-radius: var(--radius-pill);
    background: var(--glass-border); overflow: hidden;
}
.lq-progress__fill {
    height: 100%; border-radius: var(--radius-pill);
    background: var(--info); transition: width 0.3s ease;
}
.lq-progress__label { font-size: 0.72rem; color: var(--text-muted); }

/* Historia uruchomień: rozwijana tabelka pod wierszem schedule. */
.lq-runs { margin-top: 0.5rem; }
.lq-runs summary { list-style: none; cursor: pointer; }
.lq-runs summary::-webkit-details-marker { display: none; }
.lq-runs__table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.lq-runs__table th, .lq-runs__table td {
    text-align: left; padding: 0.3rem 0.6rem; font-size: 0.78rem;
    border-bottom: 1px solid var(--glass-border);
}
.lq-runs__table th { color: var(--text-muted); font-weight: 600; }

/* Pola edytora crona — szerokości dopasowane do treści (layout, bez kolorów). */
.lq-cron-num  { width: 64px; display: inline-block; }
.lq-cron-time { width: 110px; display: inline-block; }
.lq-cron-day  { width: 130px; display: inline-block; }
.lq-cron-raw  { width: 160px; display: inline-block; font-family: var(--font-mono, monospace); }

/* Kolumna „Gdzie": kolejka + rola workera + edycja, drobnym tekstem. */
.lq-where { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.78rem; }
.lq-where__queue { color: var(--text-main); }
.lq-where__edition { color: var(--text-muted); font-size: 0.72rem; }
.lq-row-paused { opacity: 0.6; }

/* ===========================================================================
   #180 OPERATOR UI — consistency pass (2026-06-18). Tokens not literals,
   components not div-soup. Paired with template swaps across operator_*/lex.
   =========================================================================== */

/* RC4 — filter toolbar: replaces inline flex on filter forms; zeroes form-group
   bottom-margin so align-items:flex-end lands submit on the input baseline. */
.lq-toolbar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.lq-toolbar .lq-form-group { margin-bottom: 0; }

/* RC6 — c-page-header long description overlapped the title in the fixed 80px
   bar. Constrain + push right + mute; title keeps its width. */
.lq-header > h1 { flex-shrink: 0; }
.lq-header__subtitle {
    margin-left: auto; max-width: 62%; text-align: right;
    color: var(--text-muted); font-size: 0.85rem; line-height: 1.3;
}

/* Dashboard tile icon wash (was inline rgba(108,92,231,.1)) */
.lq-btn-icon--tile { background: var(--accent-bg-soft); color: var(--accent); border: none; cursor: default; }
/* Sync-card head icon is decorative — must not pick up the .lq-btn-icon hover lift */
.lq-sync-card-head__icon { pointer-events: none; }

/* Dashboard tile title (inside c-card-link, outside the .lq-panel>h3 cascade) */
.lq-tile-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; margin: 0 0 0.2rem; }

/* Compact card variant (orzeczenia result card) */
.lq-card--compact { padding: 1rem 1.25rem; gap: 0.5rem; border-radius: var(--radius-sm); background: rgba(255,255,255,0.55); }

/* Alert bar strip (operator_panel/base.html messages) */
.lq-alert-bar { padding: 1rem 1.5rem 0; }
.lq-alert-bar--stack { padding: 1rem 1.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; }

/* cotton/stat + cotton/empty_state — lifted from inline style= (icon classes
   survive lucide's <i>→<svg> conversion, which copies the class attribute). */
.lq-stat { text-align: center; }
.lq-stat__icon { margin-bottom: 0.5rem; }
.lq-empty-state { padding: 3rem; text-align: center; color: var(--text-muted); }
.lq-empty-state__icon { width: 40px; height: 40px; opacity: 0.4; margin-bottom: 0.75rem; }

/* cotton/stat_bar host MUST stay padding:0 — cells fill edge-to-edge; guards
   the RC1 default .lq-panel padding (the one DANGEROUS consumer in the audit). */
.lq-stat-bar { padding: 0; }

/* Missing status dot colour (status panel error headline uses .lq-dot-error) */
.lq-dot-error { background: var(--error); box-shadow: 0 0 8px var(--error-glow); }

/* --- Status panel (operator_panel/_status_panel + _status_diagram) ---
   Lifted from the fragment's scoped <style> (was re-injected on every 30s HTMX
   swap). Scoped under #status-panel so the generic class names stay local. */
#status-panel .flow { stroke-dasharray: 6 7; animation: lqStatusFlow 1.1s linear infinite; }
@keyframes lqStatusFlow { to { stroke-dashoffset: -13; } }
#status-panel .flow.slow { animation-duration: 2.4s; opacity: 0.75; }
#status-panel .dead { stroke-dasharray: 2 6; }
#status-panel .npulse { animation: lqStatusNp 1.3s ease-in-out infinite; }
@keyframes lqStatusNp { 50% { opacity: 0.4; } }
#status-panel svg .node { filter: drop-shadow(0 6px 14px var(--accent-bg-soft)); }
#status-panel .probe {
    display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill); border: 1px solid var(--glass-border);
    background: var(--glass-bg-solid); font-size: 0.8rem; margin: 0.2rem;
}
#status-panel .ok { color: var(--success); }
#status-panel .bad { color: var(--error); }
#status-panel .warnc { color: var(--warning); }
#status-panel .bar {
    background: var(--glass-bg-solid); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-size: 0.85rem;
}
#status-panel .bar.muted { color: var(--text-muted); }
#status-panel .fixblock {
    background: var(--glass-bg-solid); border: 1px solid var(--error);
    border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-size: 0.85rem; margin-top: 1rem;
}
#status-panel .calln { display: inline-block; margin-top: 0.4rem; font-weight: 700; }

/* -------------------------------------------------------------------------
   Jaspr / settings page primitives — canonical single-source (§3 of the
   jaspr-design-dedup spec). These classes are generated into
   frontend/web/liquid_style.css via `task sync:frontend-css` / CI; do NOT
   hand-edit the generated copy.
   ---------------------------------------------------------------------- */

/* Sidebar navigation anchor. Composes with .lq-card for the glass surface.
   Moves the inline style block (display:block / padding / font-size) that was
   copy-pasted ×6 across the sidebar nav sections into a single canonical rule.
   Active state: combine with .lq-nav-link-active (reserved for future use). */
.lq-nav-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    padding: .6rem .85rem;
    font-size: .85rem;
}
.lq-nav-link-active {
    background: var(--accent-bg-soft);
    color: var(--accent);
}

/* Form action bar — bottom-of-form divider + right-aligned button row.
   Matches the profile.html pattern:
     border-top:1px solid var(--glass-border); padding-top:1.5rem;
     display:flex; justify-content:flex-end; gap:1rem;
   Render via: el('div', classes:'lq-form-actions', children:[buttons…]) */
.lq-form-actions {
    border-top: 1px solid var(--glass-border);
    padding-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* In-panel row — replaces LqListRow (bordered standalone card) for rows that
   live INSIDE a panel (.lq-panel) and must not add a card-in-card surface.
   Matches the profile.html session / passkey row layout:
     display:flex; justify-content:space-between; padding:.85rem 0;
     border-bottom:1px solid var(--glass-border);
   Render via: el('div', classes:'lq-panel-row', children:[label, meta]) */
.lq-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid var(--glass-border);
}
/* Last row: drop the divider (matches profile.html's natural flow). */
.lq-panel-row:last-child { border-bottom: none; }