/* /Pages/Analytics/AnalyticsPage.razor.rz.scp.css */
/* AnalyticsPage scoped styles */

.bars[b-qmfij23fi0] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 80px;
    margin-top: 12px;
}

.bar[b-qmfij23fi0] {
    flex: 1;
    background: var(--cc-accent);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    opacity: .8;
    transition: opacity .15s;
}

.bar:hover[b-qmfij23fi0] { opacity: 1; }
.bar-magenta[b-qmfij23fi0] { background: var(--cc-violet, #8B7CF6); }

/* ── Mobile ≤ 767px ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .analytics-grid[b-qmfij23fi0] {
        grid-template-columns: 1fr !important;
    }

    .analytics-grid .card[b-qmfij23fi0] {
        padding: 14px !important;
    }

    .bars[b-qmfij23fi0] {
        height: 60px;
    }
}
/* /Pages/AppContent/AppContentStudioPage.razor.rz.scp.css */
/* AppContentStudioPage — scoped styles
   Glassmorphism/LED-Ästhetik via --cc-* Tokens.
   Keine hardcodierten Farben — ausschließlich color-mix() + --cc-neon-cyan / --cc-* Variablen.
   Regel: MEMORY.md "Keine hardcodierten Farben/Styles". */

/* ── Seiten-Wrapper ──────────────────────────────────────────────────────── */
.content-studio-page[b-22ufqtrbqo] {
    min-height: 100%;
    padding: var(--cc-s-5);
    color: var(--cc-fg);
}

/* ── Glassmorphism-Oberfläche — alle Haupt-Container ───────────────────── */
.content-studio-hero[b-22ufqtrbqo],
.content-studio-shell[b-22ufqtrbqo],
.content-studio-tabs[b-22ufqtrbqo],
.content-studio-list[b-22ufqtrbqo],
.content-studio-editor[b-22ufqtrbqo],
.content-studio-preview[b-22ufqtrbqo],
.content-studio-placeholder[b-22ufqtrbqo] {
    border: 1px solid color-mix(in srgb, var(--cc-neon-orange) 18%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cc-bg) 94%, transparent),
        color-mix(in srgb, var(--cc-bg) 88%, transparent));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .34),
                inset 0 0 0 1px var(--cc-border-luxe);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ── Hero-Banner ─────────────────────────────────────────────────────────── */
.content-studio-hero[b-22ufqtrbqo] {
    display: flex;
    justify-content: space-between;
    gap: var(--cc-s-4);
    padding: var(--cc-s-6);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
}

.content-studio-hero[b-22ufqtrbqo]::before {
    content: "";
    position: absolute;
    inset: -45% auto auto -10%;
    width: 42rem;
    height: 42rem;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--cc-neon-orange) 18%, transparent),
        transparent 58%);
    pointer-events: none;
}

/* Kicker / Label */
.content-studio-kicker[b-22ufqtrbqo],
.panel-head p[b-22ufqtrbqo] {
    margin: 0 0 .35rem;
    color: #FF8C42;
    font-size: var(--cc-fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 800;
}

.content-studio-hero h1[b-22ufqtrbqo],
.panel-head h2[b-22ufqtrbqo] {
    margin: 0;
    color: var(--cc-fg);
    letter-spacing: -.03em;
}

.content-studio-hero p[b-22ufqtrbqo],
.panel-head span[b-22ufqtrbqo],
.studio-note p[b-22ufqtrbqo],
.app-preview-card p[b-22ufqtrbqo],
.placeholder-card p[b-22ufqtrbqo] {
    color: var(--cc-fg-muted);
}

/* Hero-Status-Kachel */
.content-studio-hero-status[b-22ufqtrbqo] {
    align-self: stretch;
    min-width: 220px;
    display: grid;
    place-content: center;
    gap: .2rem;
    padding: var(--cc-s-4);
    border-radius: 22px;
    background: color-mix(in srgb, var(--cc-neon-orange) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc-neon-orange) 18%, transparent);
    text-align: center;
}

.content-studio-hero-status span[b-22ufqtrbqo] {
    color: var(--cc-neon-orange);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* ── Tab-Leiste ──────────────────────────────────────────────────────────── */
.content-studio-tabs[b-22ufqtrbqo] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--cc-s-2);
    margin: var(--cc-s-4) 0;
    padding: var(--cc-s-3);
    border-radius: 24px;
}

.content-studio-tab[b-22ufqtrbqo] {
    border: 1px solid var(--cc-border-luxe);
    border-radius: 18px;
    background: color-mix(in srgb, var(--cc-fg) 4%, transparent);
    color: var(--cc-fg);
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    padding: var(--cc-s-3);
    text-align: left;
    cursor: pointer;
    transition: transform var(--cc-dur-fast) var(--cc-ease),
                border-color var(--cc-dur-fast) var(--cc-ease),
                background var(--cc-dur-fast) var(--cc-ease);
}

.content-studio-tab:hover[b-22ufqtrbqo],
.content-studio-tab.active[b-22ufqtrbqo] {
    transform: translateY(-1px);
    border-color: rgba(255, 140, 66, 0.48);
    background: rgba(255, 140, 66, 0.10);
    box-shadow:
        0 0 12px rgba(255, 140, 66, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.content-studio-tab:active[b-22ufqtrbqo] { transform: translateY(0) scale(.98); transition-duration: 60ms; }

.content-studio-tab:focus-visible[b-22ufqtrbqo] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}

.tab-icon[b-22ufqtrbqo] {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 140, 66, 0.14);
    color: #FF8C42;
    font-weight: 900;
    flex-shrink: 0;
}

.tab-copy[b-22ufqtrbqo] { min-width: 0; display: grid; }

.tab-copy strong[b-22ufqtrbqo],
.item-title[b-22ufqtrbqo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cc-fg);
}

.tab-copy small[b-22ufqtrbqo],
.item-meta[b-22ufqtrbqo],
.tab-planned[b-22ufqtrbqo] {
    color: var(--cc-fg-dim);
    font-size: var(--cc-fs-xs);
}

.tab-planned[b-22ufqtrbqo] {
    margin-left: auto;
    border: 1px solid var(--cc-border-luxe);
    border-radius: 999px;
    padding: .16rem .45rem;
}

/* ── Shell ───────────────────────────────────────────────────────────────── */
.content-studio-shell[b-22ufqtrbqo] {
    border-radius: 28px;
    padding: var(--cc-s-3);
}

/* ── Dreispaltiges Editor-Grid ───────────────────────────────────────────── */
.content-studio-grid[b-22ufqtrbqo] {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(240px, 320px);
    gap: var(--cc-s-3);
    align-items: start;
}

/* News/Wiki: 2-Spalten — Liste + [Vorschau↑ + Editor↓] */
.content-studio-grid.news-grid[b-22ufqtrbqo] {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}

.content-studio-shell.mode-stories .content-studio-tab.active[b-22ufqtrbqo],
.content-studio-shell.mode-stories .tab-icon[b-22ufqtrbqo] {
    border-color: color-mix(in srgb, var(--cc-neon-cyan) 40%, transparent);
}

.stories-grid .story-meta-form[b-22ufqtrbqo] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--cc-s-3);
    align-items: end;
    margin-bottom: var(--cc-s-4);
}

.stories-grid .story-meta-form label[b-22ufqtrbqo] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
}

.stories-grid .story-meta-form input[b-22ufqtrbqo] {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    background: var(--cc-bg);
    color: var(--cc-fg);
    padding: var(--cc-s-2);
}

.story-filter-chips[b-22ufqtrbqo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-1);
    margin-bottom: var(--cc-s-3);
}

.story-filter-chip[b-22ufqtrbqo] {
    border: 1px solid var(--cc-border);
    border-radius: 999px;
    padding: .35rem .75rem;
    background: transparent;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
    cursor: pointer;
}

.story-filter-chip.active[b-22ufqtrbqo] {
    border-color: var(--cc-border-focus);
    color: var(--cc-fg);
    background: color-mix(in srgb, var(--cc-accent) 12%, transparent);
}

.story-preview-panel[b-22ufqtrbqo] {
    position: sticky;
    top: var(--cc-s-3);
}

@media (max-width: 1200px) {
    .content-studio-grid.stories-grid[b-22ufqtrbqo] {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .story-preview-panel[b-22ufqtrbqo] {
        grid-column: 1 / -1;
        position: static;
    }
}

@media (max-width: 900px) {
    .stories-grid .story-meta-form[b-22ufqtrbqo] {
        grid-template-columns: 1fr;
    }
}

.news-studio-column[b-22ufqtrbqo] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
    min-width: 0;
}

.content-studio-list[b-22ufqtrbqo],
.content-studio-editor[b-22ufqtrbqo],
.content-studio-preview[b-22ufqtrbqo],
.content-studio-placeholder[b-22ufqtrbqo] {
    border-radius: 24px;
    padding: var(--cc-s-4);
}

.content-studio-editor[b-22ufqtrbqo] { min-width: 0; }

/* Panel-Kopf (Titel + Aktionen in Panels) */
.panel-head[b-22ufqtrbqo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cc-s-4);
    margin-bottom: var(--cc-s-4);
}
.panel-head.compact[b-22ufqtrbqo] { align-items: center; }

.studio-actions[b-22ufqtrbqo] {
    display: flex;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Studio-Buttons ──────────────────────────────────────────────────────── */
.studio-btn[b-22ufqtrbqo] {
    border: 1px solid var(--cc-border-luxe);
    border-radius: 999px;
    padding: .58rem .9rem;
    background: color-mix(in srgb, var(--cc-fg) 5%, transparent);
    color: var(--cc-fg);
    font-weight: 800;
    cursor: pointer;
    transition: background var(--cc-dur-fast) var(--cc-ease),
                border-color var(--cc-dur-fast) var(--cc-ease);
    font-size: var(--cc-fs-sm);
    font-family: var(--cc-font-sans);
}

.studio-btn:hover:not(:disabled)[b-22ufqtrbqo] {
    background: color-mix(in srgb, var(--cc-fg) 8%, transparent);
    border-color: color-mix(in srgb, var(--cc-fg) 20%, transparent);
    box-shadow: 0 0 8px color-mix(in oklch, var(--cc-accent) 10%, transparent);
}
.studio-btn:active:not(:disabled)[b-22ufqtrbqo] { transform: scale(.96); transition-duration: 60ms; }
.studio-btn:focus-visible[b-22ufqtrbqo] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}

.studio-btn.primary[b-22ufqtrbqo] {
    background: linear-gradient(135deg, #FF8C42, #C73E40);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(255, 140, 66, 0.28);
}
.studio-btn.primary:hover:not(:disabled)[b-22ufqtrbqo] {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(255, 140, 66, 0.38);
}

.studio-btn.ghost[b-22ufqtrbqo] {
    background: color-mix(in srgb, var(--cc-fg) 3%, transparent);
}

.studio-btn.danger[b-22ufqtrbqo] {
    border-color: color-mix(in srgb, var(--cc-danger) 32%, transparent);
    color: var(--cc-danger);
}

.studio-btn:disabled[b-22ufqtrbqo] {
    opacity: var(--cc-disabled-opacity);
    cursor: not-allowed;
}

/* ── Listen-Items ────────────────────────────────────────────────────────── */
.studio-list-items[b-22ufqtrbqo] {
    display: grid;
    gap: var(--cc-s-2);
    max-height: calc(100vh - 17rem);
    overflow-y: auto;
    padding-right: var(--cc-s-1);
}

.studio-list-item[b-22ufqtrbqo] {
    display: grid;
    gap: .25rem;
    width: 100%;
    border: 1px solid var(--cc-border-luxe);
    border-radius: 18px;
    background: color-mix(in srgb, var(--cc-fg) 4%, transparent);
    color: var(--cc-fg);
    padding: var(--cc-s-3);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--cc-dur-fast) var(--cc-ease),
                background var(--cc-dur-fast) var(--cc-ease);
}

.studio-list-item.active[b-22ufqtrbqo],
.studio-list-item:hover[b-22ufqtrbqo] {
    border-color: color-mix(in srgb, var(--cc-neon-orange) 55%, transparent);
    background: color-mix(in srgb, var(--cc-neon-orange) 9%, transparent);
}

.studio-list-item:focus-visible[b-22ufqtrbqo] {
    outline: none;
    box-shadow: var(--cc-glow-accent);
}

.item-pill[b-22ufqtrbqo] {
    justify-self: start;
    border-radius: 999px;
    padding: .15rem .48rem;
    color: #fff;
    background: linear-gradient(135deg, #FF8C42, #C73E40);
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255, 140, 66, 0.3);
}

/* ── Flash-Nachrichten ───────────────────────────────────────────────────── */
.studio-empty[b-22ufqtrbqo],
.studio-note[b-22ufqtrbqo],
.studio-flash[b-22ufqtrbqo],
.placeholder-card[b-22ufqtrbqo] {
    border-radius: 18px;
    border: 1px solid var(--cc-border-luxe);
    background: color-mix(in srgb, var(--cc-fg) 4%, transparent);
    padding: var(--cc-s-3);
    color: var(--cc-fg-muted);
}

.studio-flash[b-22ufqtrbqo] { margin-bottom: var(--cc-s-2); }

.studio-flash.ok[b-22ufqtrbqo] {
    border-color: color-mix(in srgb, var(--cc-success) 28%, transparent);
    color: var(--cc-success);
    background: color-mix(in srgb, var(--cc-success) 6%, transparent);
}

.studio-flash.error[b-22ufqtrbqo] {
    border-color: color-mix(in srgb, var(--cc-danger) 32%, transparent);
    color: var(--cc-danger);
    background: color-mix(in srgb, var(--cc-danger) 6%, transparent);
}

.studio-flash.info[b-22ufqtrbqo] {
    border-color: color-mix(in srgb, var(--cc-neon-orange) 28%, transparent);
    color: var(--cc-neon-orange);
    background: color-mix(in srgb, var(--cc-neon-orange) 5%, transparent);
}

/* ── App-Vorschau-Karte ──────────────────────────────────────────────────── */
.app-preview-card[b-22ufqtrbqo],
.hub-card-preview[b-22ufqtrbqo] {
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--preview-accent, var(--cc-neon-orange)) 45%, transparent);
    background: radial-gradient(circle at 20% 0%,
        color-mix(in srgb, var(--preview-accent, var(--cc-neon-orange)) 20%, transparent),
        transparent 45%),
        color-mix(in srgb, var(--cc-fg) 6%, transparent);
    padding: var(--cc-s-4);
    overflow: hidden;
}

.app-preview-card span[b-22ufqtrbqo],
.hub-card-preview span[b-22ufqtrbqo] {
    color: var(--cc-neon-orange);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: var(--cc-fs-xs);
    font-weight: 900;
}

.app-preview-card h3[b-22ufqtrbqo],
.hub-card-preview h3[b-22ufqtrbqo] {
    color: var(--cc-fg);
    margin: var(--cc-s-3) 0 var(--cc-s-2);
}

.preview-cover[b-22ufqtrbqo] {
    height: 120px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    margin: var(--cc-s-2) 0;
    border: 1px solid var(--cc-border-luxe);
}

.studio-note[b-22ufqtrbqo] { margin-top: var(--cc-s-3); }

/* ── Placeholder-Kacheln ─────────────────────────────────────────────────── */
.placeholder-grid[b-22ufqtrbqo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--cc-s-3);
}

.placeholder-card span[b-22ufqtrbqo] {
    color: var(--cc-neon-orange);
    font-weight: 900;
    font-size: var(--cc-fs-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.placeholder-card h3[b-22ufqtrbqo] { color: var(--cc-fg); margin: var(--cc-s-2) 0 var(--cc-s-1); }
.placeholder-card li[b-22ufqtrbqo] { color: var(--cc-fg-muted); margin-bottom: .25rem; }

/* ── Hub-Kachel-Builder ──────────────────────────────────────────────────── */
.hub-form[b-22ufqtrbqo] { display: grid; gap: var(--cc-s-3); }

.hub-form-row[b-22ufqtrbqo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cc-s-3);
}

.hub-form label[b-22ufqtrbqo] {
    display: grid;
    gap: var(--cc-s-1);
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
    font-weight: 700;
}

.hub-form input[b-22ufqtrbqo],
.hub-form textarea[b-22ufqtrbqo] {
    width: 100%;
    border: 1px solid var(--cc-border-luxe);
    border-radius: 16px;
    background: var(--cc-bg-input);
    color: var(--cc-fg);
    padding: .75rem .85rem;
    font-family: var(--cc-font-sans);
    font-size: var(--cc-fs-sm);
    transition: border-color var(--cc-dur-fast) var(--cc-ease);
}

.hub-form input:hover:not(:focus)[b-22ufqtrbqo],
.hub-form textarea:hover:not(:focus)[b-22ufqtrbqo] {
    border-color: color-mix(in oklch, var(--cc-border-focus) 50%, var(--cc-border));
}
.hub-form input:focus[b-22ufqtrbqo],
.hub-form textarea:focus[b-22ufqtrbqo] {
    outline: none;
    border-color: var(--cc-border-focus);
    box-shadow:
        0 0 0 3px color-mix(in oklch, var(--cc-accent) 15%, transparent),
        0 0 10px color-mix(in oklch, var(--cc-neon-orange, #FF6B35) 8%, transparent);
}

.hub-form textarea[b-22ufqtrbqo] {
    min-height: 110px;
    resize: vertical;
}

/* Hub-Kachel-Vorschau */
.hub-card-preview[b-22ufqtrbqo] {
    --preview-accent: var(--hub-accent, var(--cc-neon-orange));
    display: flex;
    gap: var(--cc-s-4);
    align-items: flex-start;
}

.hub-preview-icon[b-22ufqtrbqo] {
    width: 3rem;
    height: 3rem;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--hub-accent, var(--cc-neon-orange)) 24%, transparent);
    color: var(--cc-fg);
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .content-studio-tabs[b-22ufqtrbqo] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .content-studio-grid[b-22ufqtrbqo],
    .content-studio-grid.news-grid[b-22ufqtrbqo] {
        grid-template-columns: 1fr;
    }

    .studio-list-items[b-22ufqtrbqo] {
        max-height: none;
    }
}

@media (max-width: 760px) {
    .content-studio-page[b-22ufqtrbqo] {
        padding: var(--cc-s-3);
    }

    .content-studio-hero[b-22ufqtrbqo] {
        flex-direction: column;
    }

    .content-studio-tabs[b-22ufqtrbqo] {
        grid-template-columns: 1fr;
    }

    .hub-form-row[b-22ufqtrbqo] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Audit/StaffAuditPage.razor.rz.scp.css */
/* StaffAuditPage */
.audit-table[b-0gz6lcxuro] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    overflow: hidden;
    background: var(--cc-bg-card);
    flex: 1;
}

.audit-row[b-0gz6lcxuro] {
    display: grid;
    grid-template-columns: 190px 130px 160px 180px 120px 60px;
    gap: var(--cc-s-3);
    align-items: center;
    padding: var(--cc-s-3) var(--cc-s-4);
    border-bottom: 1px solid var(--cc-border-soft);
    font-size: var(--cc-fs-sm);
    font-family: var(--cc-font-sans);
    cursor: pointer;
    transition: background var(--cc-dur-fast);
}

.audit-row:last-child[b-0gz6lcxuro] { border-bottom: none; }

.audit-head[b-0gz6lcxuro] {
    background: var(--cc-bg-elev);
    cursor: default;
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    color: var(--cc-fg-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.audit-row:not(.audit-head):hover[b-0gz6lcxuro]    { background: var(--cc-bg-hover); }
.audit-row:not(.audit-head):active[b-0gz6lcxuro]   { transform: scale(.998); transition-duration: 60ms; }
.audit-row:not(.audit-head):focus-visible[b-0gz6lcxuro] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: -2px;
}
.audit-row:not(.audit-head).expanded[b-0gz6lcxuro] { background: color-mix(in srgb, var(--cc-accent) 6%, var(--cc-bg-card)); }

.payload[b-0gz6lcxuro] {
    grid-column: 1 / -1;
    background: var(--cc-bg-input);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    font-family: var(--cc-font-mono);
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    white-space: pre-wrap;
    word-break: break-all;
    margin: var(--cc-s-2) 0;
    overflow-x: auto;
}

/* Filter bar date + text inputs */
.input-sm[b-0gz6lcxuro] {
    height: 34px;
    width: auto;
    min-width: 140px;
}

/* -- Mobile <= 767px ---------------------------------------------- */
@media (max-width: 767px) {
    .audit-ledger-container[b-0gz6lcxuro] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .input-sm[b-0gz6lcxuro] { width: 100%; min-width: unset; }

    .audit-filter-bar[b-0gz6lcxuro] {
        flex-wrap: wrap;
        gap: var(--cc-s-2);
    }

    .audit-filter-bar > *[b-0gz6lcxuro] { flex: 1 1 auto; }
}
/* /Pages/Auth/Establishing.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ESTABLISHING — Premium Briefing Screen
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell ──────────────────────────────────────────────────────────────── */
.brief-shell[b-0jvyeozy27] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #020812;   /* Fallback wenn Video noch lädt */
    padding: 24px;
    gap: 20px;
    overflow: hidden;
}

/* ── Background ─────────────────────────────────────────────────────────── */
.brief-bg[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Video-Hintergrund — DOMINANT SICHTBAR ──────────────────────────────── */
/* Das MP4 ist der Star der Briefing-Sequenz. Alle Atmosphaeren-Layer
   (Field, Network, Vignette, Scan, Grid) liegen DRUNTER (z-index 0-1) und
   sind nur noch dezenter Effekt fuer den Fall dass das Video nicht laedt.
   So kann die Animation nicht mehr ueberdeckt werden. */
.brief-video-bg[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;            /* GANZ OBEN unter den Text-UI Karten */
    opacity: 1;
    pointer-events: none;
    transition: opacity .45s ease;
    will-change: transform;
}

.brief-video-bg.is-fallback[b-0jvyeozy27] {
    opacity: 1;
    filter: saturate(.9) brightness(.9);
}

/* Subtiler Tint zur Text-Lesbarkeit ueber dem Video.
   Frueher: 35-72% Schwarz (Video unsichtbar). Jetzt: 0-25% damit das
   Video die Buehne dominiert. */
.brief-video-vignette[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    z-index: 11;
    background:
        radial-gradient(ellipse 100% 100% at 50% 50%,
            rgba(2, 8, 18, 0.0) 0%,
            rgba(2, 8, 18, 0.25) 100%);
    pointer-events: none;
}

/* Field/Network/Scan/Grid sitzen UNTER dem Video — sie sind nur Fallback
   fuer den Moment bevor das Video laedt (oder wenn Codec versagt).
   Sobald is-playing aktiv ist faden sie aus. */
.brief-bg-field[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .6;
    background:
        linear-gradient(120deg, rgba(9, 18, 42, .20), rgba(4, 10, 24, .30) 46%, rgba(15, 25, 30, .20)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg, rgba(93,217,193,.018) 0 1px, transparent 1px 72px);
    transition: opacity .6s ease;
}

.brief-bg-network[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: .35;
    transition: opacity .6s ease;
    pointer-events: none;
}

/* Sobald das Video sichtbar laeuft, treten Fallback-Layer dezent zurueck */
.brief-shell:has(.brief-video-bg.is-playing) .brief-bg-field[b-0jvyeozy27],
.brief-shell:has(.brief-video-bg.is-playing) .brief-bg-network[b-0jvyeozy27] {
    opacity: 0;
}

.brief-net-path[b-0jvyeozy27] {
    fill: none;
    stroke: url(#briefNetLine);
    stroke-width: 1.4;
    stroke-dasharray: 10 16;
    animation: briefNetFlow-b-0jvyeozy27 18s linear infinite;
}

.brief-net-path.path-b[b-0jvyeozy27] {
    animation-duration: 22s;
    animation-direction: reverse;
}

.brief-net-path.path-c[b-0jvyeozy27] {
    animation-duration: 26s;
}

.brief-net-nodes circle[b-0jvyeozy27] {
    fill: color-mix(in oklch, var(--cc-accent) 70%, #5dd9c1);
    opacity: .52;
    animation: briefNodePulse-b-0jvyeozy27 2.8s ease-in-out infinite alternate;
}

/* Scan-Effekt sitzt UEBER dem Video als dezenter Sweep — kein Tint */
.brief-bg-scan[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    z-index: 12;
    background: linear-gradient(100deg, transparent 0%, rgba(93,217,193,.09) 48%, transparent 58%);
    transform: translateX(-120%);
    animation: briefScanSweep-b-0jvyeozy27 7s cubic-bezier(.45, 0, .22, 1) infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Zweite Vignette komplett deaktiviert — sie war frueher der Hauptgrund
   warum das Video kaum sichtbar war (76% Schwarz im Zentrum). */
.brief-bg-vignette[b-0jvyeozy27] {
    display: none;
}

.brief-grid[b-0jvyeozy27] { z-index: 0; opacity: .25; }
.brief-grid-fade[b-0jvyeozy27] { z-index: 0; opacity: .25; }
.brief-shell:has(.brief-video-bg.is-playing) .brief-grid[b-0jvyeozy27],
.brief-shell:has(.brief-video-bg.is-playing) .brief-grid-fade[b-0jvyeozy27] {
    opacity: 0;
    transition: opacity .6s ease;
}

@keyframes briefNetFlow-b-0jvyeozy27 {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -260; }
}

@keyframes briefNodePulse-b-0jvyeozy27 {
    from { opacity: .28; r: 2.5; }
    to   { opacity: .78; r: 4.5; }
}

@keyframes briefScanSweep-b-0jvyeozy27 {
    0%, 22% { transform: translateX(-120%); opacity: 0; }
    36% { opacity: 1; }
    70% { opacity: .72; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* ── Smooth-Entry Intro-Overlay ─────────────────────────────────────────── */
/* Startet schwarz (opacity 1) und faded aus wenn Phase 1 erreicht          */
.brief-intro-overlay[b-0jvyeozy27] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #020812;
    opacity: 1;
    pointer-events: none;
    transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
}

.brief-intro-overlay.faded[b-0jvyeozy27] {
    opacity: 0;
}

.brief-grid[b-0jvyeozy27] {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 28px 28px;
    animation: grid-drift-b-0jvyeozy27 40s linear infinite;
}

/* Radial vignette softens grid edges */
.brief-grid-fade[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 50%,
        transparent 30%,
        rgba(7,8,15,.7) 100%);
}

@keyframes grid-drift-b-0jvyeozy27 {
    from { transform: translate(0, 0); }
    to   { transform: translate(28px, 28px); }
}

.scan-line[b-0jvyeozy27] {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in oklch, var(--cc-accent) 50%, transparent) 25%,
        var(--cc-accent) 50%,
        color-mix(in oklch, var(--cc-accent) 50%, transparent) 75%,
        transparent 100%);
    box-shadow: 0 0 24px 6px color-mix(in oklch, var(--cc-accent) 22%, transparent);
    top: -1px;
    opacity: 0;
    transition: opacity .3s;
}

.scan-line.scanning[b-0jvyeozy27] {
    opacity: 1;
    animation: scan-b-0jvyeozy27 2.8s cubic-bezier(.4, 0, .6, 1) forwards;
}

@keyframes scan-b-0jvyeozy27 {
    0%   { top: -1px;  opacity: 0; }
    4%   { opacity: 1; }
    96%  { opacity: .5; }
    100% { top: 100%;  opacity: 0; }
}

/* ── Top progress bar ───────────────────────────────────────────────────── */
.brief-top-progress[b-0jvyeozy27] {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,.05);
    z-index: 210;
    overflow: hidden;
}

.brief-top-progress-fill[b-0jvyeozy27] {
    height: 100%;
    background: linear-gradient(90deg,
        var(--cc-accent),
        color-mix(in oklch, var(--cc-accent) 55%, #fff));
    box-shadow: 0 0 10px 2px color-mix(in oklch, var(--cc-accent) 45%, transparent);
    transition: width .3s linear;
}

/* ── Skip button ────────────────────────────────────────────────────────── */
.brief-skip[b-0jvyeozy27] {
    position: fixed;
    top: 14px;
    right: 20px;
    z-index: 220;
    padding: 6px 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 6px;
    color: rgba(255,255,255,.5);
    font: 500 .72rem/1 var(--cc-font-sans);
    letter-spacing: .04em;
    cursor: pointer;
    transition: all .15s var(--cc-ease);
}

.brief-skip:hover[b-0jvyeozy27] {
    background: rgba(255,255,255,.08);
    border-color: color-mix(in oklch, var(--cc-accent) 38%, transparent);
    color: rgba(255,255,255,.9);
}

/* ── Stage (scrollable content area) ───────────────────────────────────── */
.brief-shell.phase-ready[b-0jvyeozy27] {
    justify-content: flex-start;
    padding-top: 32px;
    overflow-y: auto;
}

.brief-stage[b-0jvyeozy27] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 740px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 60px;
}

/* ── Main identity card — UEBER dem Video, aber transluzent ──────────────── */
/* Card musst nun explizit ueber dem Video (z-index 10-12) sein und gleichzeitig
   transparent genug damit das MP4 dahinter sichtbar bleibt. */
.brief-card[b-0jvyeozy27] {
    position: relative;
    z-index: 30;
    width: 100%;
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 6%, transparent), transparent 60%),
        color-mix(in oklch, #07080f 18%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid color-mix(in oklch, var(--cc-accent) 32%, transparent);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .55s var(--cc-ease), transform .55s var(--cc-ease);
    box-shadow:
        0 0 80px -12px color-mix(in oklch, var(--cc-accent) 18%, transparent),
        0 28px 60px -20px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -1px 0 rgba(255,255,255,.02);
}

.brief-card.visible[b-0jvyeozy27] {
    opacity: 1;
    transform: none;
}

/* Corner accent */
.brief-card[b-0jvyeozy27]::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100px; height: 100px;
    background: radial-gradient(circle at top right,
        color-mix(in oklch, var(--cc-accent) 15%, transparent),
        transparent 68%);
    border-radius: 0 14px 0 0;
    pointer-events: none;
}

/* Bottom corner accent */
.brief-card[b-0jvyeozy27]::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 70px; height: 70px;
    background: radial-gradient(circle at bottom left,
        color-mix(in oklch, var(--cc-cyan, #5DD9C1) 8%, transparent),
        transparent 70%);
    border-radius: 0 0 0 14px;
    pointer-events: none;
}

/* ── Brand row ──────────────────────────────────────────────────────────── */
.brief-brand[b-0jvyeozy27] {
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .5s .1s var(--cc-ease), transform .5s .1s var(--cc-ease);
}

.brief-brand.in[b-0jvyeozy27] { opacity: 1; transform: none; }

.brief-logo[b-0jvyeozy27] {
    width: 44px; height: 44px;
    flex: 0 0 auto;
    color: var(--cc-accent);
    filter: drop-shadow(0 0 10px color-mix(in oklch, var(--cc-accent) 45%, transparent));
}

.brief-logo svg[b-0jvyeozy27] { width: 100%; height: 100%; }

.brief-brand-text[b-0jvyeozy27] { display: flex; flex-direction: column; gap: 3px; }

.brief-brand-name[b-0jvyeozy27] {
    font: 700 1.1rem/1 var(--cc-font-sans);
    color: #fff;
    letter-spacing: .02em;
}

.brief-brand-sub[b-0jvyeozy27] {
    font: 500 .6rem/1 var(--cc-font-mono);
    color: var(--cc-accent);
    letter-spacing: .15em;
    opacity: .75;
}

/* ── Animated divider ───────────────────────────────────────────────────── */
.brief-divider[b-0jvyeozy27] {
    position: relative;
    height: 1px;
    background: transparent;
    overflow: visible;
    display: flex;
    align-items: center;
}

.brief-divider[b-0jvyeozy27]::before,
.brief-divider[b-0jvyeozy27]::after {
    content: '';
    position: absolute;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--cc-accent) 38%, transparent));
    width: 0;
    transition: width .7s .35s var(--cc-ease);
}

.brief-divider[b-0jvyeozy27]::before { left: 50%; }
.brief-divider[b-0jvyeozy27]::after  {
    right: 50%;
    background: linear-gradient(270deg, transparent, color-mix(in oklch, var(--cc-accent) 38%, transparent));
}

.brief-divider.expanded[b-0jvyeozy27]::before,
.brief-divider.expanded[b-0jvyeozy27]::after { width: 50%; }

.brief-divider-dot[b-0jvyeozy27] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cc-accent);
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--cc-accent) 40%, transparent);
}

.brief-divider-dot.pulse[b-0jvyeozy27] {
    animation: dot-pulse-b-0jvyeozy27 2s ease-in-out infinite;
}

@keyframes dot-pulse-b-0jvyeozy27 {
    0%   { box-shadow: 0 0 0 0   color-mix(in oklch, var(--cc-accent) 50%, transparent); }
    70%  { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0   transparent; }
}

/* ── Tech / boot lines ──────────────────────────────────────────────────── */
.brief-lines[b-0jvyeozy27] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.brief-line[b-0jvyeozy27] {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .38s var(--cc-ease), transform .38s var(--cc-ease);
    font: 400 .8rem/1.4 var(--cc-font-mono);
    color: rgba(255,255,255,.28);
}

.brief-line.visible[b-0jvyeozy27] {
    opacity: 1;
    transform: none;
    color: rgba(255,255,255,.52);
}

.brief-line.active[b-0jvyeozy27] {
    color: rgba(255,255,255,.82);
}

.brief-line-icon[b-0jvyeozy27] {
    flex: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ico-ok[b-0jvyeozy27]  { color: var(--cc-success, #22c55e); font-size: .75rem; }
.ico-dim[b-0jvyeozy27] { color: rgba(255,255,255,.18); font-size: .65rem; }
.ico-warn[b-0jvyeozy27] {
    color: #f59e0b;
    font: 700 .72rem/1 var(--cc-font-mono);
    animation: warn-pulse-b-0jvyeozy27 1.3s ease-in-out infinite alternate;
}

@keyframes warn-pulse-b-0jvyeozy27 {
    from { opacity: .55; }
    to   { opacity: 1; }
}

.ico-pulse[b-0jvyeozy27] {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cc-accent);
    animation: line-pulse-b-0jvyeozy27 .9s ease-in-out infinite alternate;
}

@keyframes line-pulse-b-0jvyeozy27 {
    from { opacity: .35; transform: scale(.8); }
    to   { opacity: 1;   transform: scale(1.15); }
}

.brief-line-text[b-0jvyeozy27] { flex: 1; }

.brief-line-value[b-0jvyeozy27] {
    color: var(--cc-accent);
    font: 500 .75rem/1 var(--cc-font-mono);
    letter-spacing: .04em;
    opacity: 0;
    animation: val-in-b-0jvyeozy27 .35s .08s ease-out forwards;
}

@keyframes val-in-b-0jvyeozy27 {
    from { opacity: 0; transform: translateX(5px); }
    to   { opacity: 1; transform: none; }
}

.val-alert[b-0jvyeozy27] { color: #f59e0b !important; }

.brief-cursor[b-0jvyeozy27] {
    color: var(--cc-accent);
    animation: blink-b-0jvyeozy27 .65s step-end infinite;
    font-size: .68rem;
}

@keyframes blink-b-0jvyeozy27 {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Operator identity strip ────────────────────────────────────────────── */
.brief-ident[b-0jvyeozy27] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: color-mix(in oklch, var(--cc-accent) 7%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-accent) 22%, transparent);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s var(--cc-ease), transform .45s var(--cc-ease);
}

.brief-ident.in[b-0jvyeozy27] { opacity: 1; transform: none; }

.brief-ident-avatar[b-0jvyeozy27] {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--cc-accent) 18%, transparent);
    border: 1.5px solid color-mix(in oklch, var(--cc-accent) 45%, transparent);
    color: var(--cc-accent);
    font: 700 1rem/42px var(--cc-font-sans);
    text-align: center;
    flex: 0 0 auto;
}

.brief-ident-info[b-0jvyeozy27] { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.brief-ident-name[b-0jvyeozy27] {
    font: 600 .92rem/1 var(--cc-font-sans);
    color: #fff;
}

.brief-ident-role[b-0jvyeozy27] {
    font: 500 .62rem/1 var(--cc-font-mono);
    color: var(--cc-accent);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.brief-ident-access[b-0jvyeozy27] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brief-access-dot[b-0jvyeozy27] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cc-success, #22c55e);
    box-shadow: 0 0 8px 2px color-mix(in oklch, var(--cc-success, #22c55e) 38%, transparent);
    animation: access-glow-b-0jvyeozy27 2.2s ease-in-out infinite alternate;
}

@keyframes access-glow-b-0jvyeozy27 {
    from { box-shadow: 0 0 4px  2px color-mix(in oklch, var(--cc-success, #22c55e) 28%, transparent); }
    to   { box-shadow: 0 0 14px 3px color-mix(in oklch, var(--cc-success, #22c55e) 52%, transparent); }
}

.brief-access-label[b-0jvyeozy27] {
    font: 600 .6rem/1 var(--cc-font-mono);
    letter-spacing: .13em;
    color: var(--cc-success, #22c55e);
}

/* ── Classification strip ───────────────────────────────────────────────── */
.brief-classify[b-0jvyeozy27] {
    position: relative;
    z-index: 1;
    font: 500 .56rem/1 var(--cc-font-mono);
    letter-spacing: .18em;
    color: rgba(255,255,255,.18);
    text-align: center;
    opacity: 0;
    transition: opacity .9s 1s ease;
}

.brief-classify.visible[b-0jvyeozy27] { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   BRIEFING SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section primitives */
.bf-section[b-0jvyeozy27] {
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    animation: bfSectionIn-b-0jvyeozy27 .55s var(--cc-ease) forwards;
}

@keyframes bfSectionIn-b-0jvyeozy27 {
    to { opacity: 1; transform: none; }
}

.bf-section-title[b-0jvyeozy27] {
    font: 700 .64rem/1 var(--cc-font-mono);
    letter-spacing: .15em;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bf-bullet[b-0jvyeozy27] { color: var(--cc-accent); font-size: .85rem; }

/* Event count pills in section title */
.bf-ev-pill[b-0jvyeozy27] {
    font: 700 .58rem/1 var(--cc-font-mono);
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 3px;
}

.bf-ev-pill.critical[b-0jvyeozy27] {
    background: color-mix(in oklch, #ef4444 18%, transparent);
    color: #ef4444;
}

.bf-ev-pill.dim[b-0jvyeozy27] {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.4);
}

/* ── Persona greeting ─────────────────────────────────────────────────── */
.bf-persona[b-0jvyeozy27] {
    text-align: center;
    padding: 20px 12px;
}

.bf-persona-line[b-0jvyeozy27] {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
    line-height: 1.45;
}

.bf-persona.in .bf-persona-line[b-0jvyeozy27] {
    animation: bfWordIn-b-0jvyeozy27 .75s var(--cc-ease) forwards;
}

.bf-persona.in .bf-persona-line-1[b-0jvyeozy27]    { animation-delay: .08s; }
.bf-persona.in .bf-persona-line-2[b-0jvyeozy27]    { animation-delay: .55s; }
.bf-persona.in .bf-persona-line-soft[b-0jvyeozy27] { animation-delay: 1.05s; }
.bf-persona.in .bf-persona-line-3[b-0jvyeozy27]    { animation-delay: 1.45s; }

@keyframes bfWordIn-b-0jvyeozy27 {
    to { opacity: 1; transform: none; filter: none; }
}

.bf-persona-line-1[b-0jvyeozy27] {
    font: 300 1.75rem/1.25 var(--cc-font-sans);
    color: #fff;
    letter-spacing: -.025em;
    margin-bottom: 10px;
}

.bf-persona-line-2[b-0jvyeozy27] {
    font: 400 .95rem/1.55 var(--cc-font-sans);
    color: rgba(255,255,255,.6);
    margin-bottom: 4px;
}

.bf-persona-spacer[b-0jvyeozy27] {
    height: 14px;
}

.bf-persona-line-soft[b-0jvyeozy27] {
    font: 400 .82rem/1.5 var(--cc-font-sans);
    color: rgba(255,255,255,.36);
    margin-bottom: 4px;
}

.bf-persona-line-3[b-0jvyeozy27] {
    font: 400 .82rem/1.5 var(--cc-font-sans);
    color: rgba(255,255,255,.32);
}

.bf-persona-bar[b-0jvyeozy27] {
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--cc-accent),
        color-mix(in oklch, var(--cc-accent) 55%, #fff));
    border-radius: 1px;
    margin: 16px auto 0;
    opacity: 0;
    animation: bfWordIn-b-0jvyeozy27 .5s ease 1.95s forwards;
}

/* ── KPI expandable detail ─────────────────────────────────────────────────── */
.bf-kpi[b-0jvyeozy27] {
    background: none;
    text-align: center;
    cursor: pointer;
}

.bf-kpi.open[b-0jvyeozy27] {
    border-color: color-mix(in oklch, var(--cc-accent) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--cc-accent) 28%, transparent);
}

.bf-kpi-detail[b-0jvyeozy27] {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 14px 18px;
    border: 1px solid color-mix(in oklch, var(--cc-accent) 28%, transparent);
    border-radius: 10px;
    background: color-mix(in oklch, var(--cc-accent) 6%, transparent);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s var(--cc-ease), opacity .25s var(--cc-ease), padding .25s var(--cc-ease);
}

.bf-kpi-detail.open[b-0jvyeozy27] {
    max-height: 220px;
    opacity: 1;
}

.bf-kpi-detail-label[b-0jvyeozy27] {
    font: 700 .68rem/1 var(--cc-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cc-accent);
    margin-bottom: 6px;
}

.bf-kpi-detail-text[b-0jvyeozy27] {
    margin: 0;
    font: 400 .82rem/1.55 var(--cc-font-sans);
    color: rgba(255,255,255,.78);
}

/* ── Action expandable detail ──────────────────────────────────────────────── */
.bf-action[b-0jvyeozy27] { flex-direction: column; align-items: stretch; gap: 0; padding: 0; cursor: pointer; }

.bf-action-row[b-0jvyeozy27] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.bf-action-chev[b-0jvyeozy27] {
    color: rgba(255,255,255,.32);
    font-size: 12px;
    transition: transform .25s var(--cc-ease);
}
.bf-action-chev.rot[b-0jvyeozy27] { transform: rotate(180deg); }

.bf-action-detail[b-0jvyeozy27] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 16px 0 38px;
    transition: max-height .35s var(--cc-ease), opacity .25s var(--cc-ease), padding .25s var(--cc-ease);
}

.bf-action-detail.open[b-0jvyeozy27] {
    max-height: 240px;
    opacity: 1;
    padding: 0 16px 14px 38px;
}

.bf-action-detail-text[b-0jvyeozy27] {
    margin: 0 0 10px;
    font: 400 .78rem/1.55 var(--cc-font-sans);
    color: rgba(255,255,255,.62);
}

.bf-action.open[b-0jvyeozy27] {
    border-color: color-mix(in oklch, var(--cc-accent) 35%, transparent);
}

/* ── DATABASE quip ──────────────────────────────────────────────────────── */
.bf-db-quip[b-0jvyeozy27] {
    font: 500 .8rem/1.45 var(--cc-font-mono);
    color: color-mix(in oklch, var(--cc-success, #22c55e) 82%, rgba(255,255,255,.6));
    background:
        linear-gradient(90deg,
            color-mix(in oklch, var(--cc-success, #22c55e) 6%, transparent),
            transparent 80%),
        rgba(0,0,0,.18);
    border: 1px solid color-mix(in oklch, var(--cc-success, #22c55e) 18%, transparent);
    border-left: 3px solid color-mix(in oklch, var(--cc-success, #22c55e) 55%, transparent);
    border-radius: 6px;
    padding: 13px 18px 13px 16px;
    opacity: 0;
    transform: translateY(6px);
    animation: bfDbIn-b-0jvyeozy27 .6s .08s cubic-bezier(.2,.9,.3,1) forwards;
    position: relative;
    overflow: hidden;
}

.bf-db-quip[b-0jvyeozy27]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        color-mix(in oklch, var(--cc-success, #22c55e) 4%, transparent),
        transparent);
    pointer-events: none;
    animation: db-sweep-b-0jvyeozy27 2.2s ease-in-out .5s 1 both;
}

@keyframes bfDbIn-b-0jvyeozy27 {
    to { opacity: 1; transform: none; }
}

@keyframes db-sweep-b-0jvyeozy27 {
    from { transform: translateX(-100%); opacity: .8; }
    to   { transform: translateX(200%);  opacity: 0; }
}

.bf-db-quip-secondary[b-0jvyeozy27] {
    font-size: .74rem;
    border-left-color: color-mix(in oklch, var(--cc-accent) 45%, transparent);
    color: color-mix(in oklch, var(--cc-accent) 65%, rgba(255,255,255,.66));
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 6%, transparent), transparent 82%),
        rgba(0,0,0,.16);
    animation-delay: .18s;
}

/* ── Priority events list ───────────────────────────────────────────────── */
.bf-events[b-0jvyeozy27] { display: flex; flex-direction: column; gap: 10px; }

.bf-event[b-0jvyeozy27] {
    background:
        linear-gradient(90deg, rgba(255,255,255,.018), transparent),
        color-mix(in oklch, #0d0f1a 85%, transparent);
    border: 1px solid rgba(255,255,255,.07);
    border-left-width: 3px;
    border-radius: 7px;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-14px);
    transition:
        transform .2s var(--cc-ease),
        border-color .2s,
        box-shadow .2s,
        background .2s;
}

.bf-event.in[b-0jvyeozy27] {
    animation: bfEventIn-b-0jvyeozy27 .58s var(--cc-ease) forwards;
}

@keyframes bfEventIn-b-0jvyeozy27 {
    to { opacity: 1; transform: none; }
}

.bf-event:hover[b-0jvyeozy27] {
    transform: translateY(-1px) translateX(2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.bf-event.sev-critical[b-0jvyeozy27] {
    border-left-color: #ef4444;
    background-color: rgba(239,68,68,.05);
}
.bf-event.sev-warning[b-0jvyeozy27] {
    border-left-color: #f59e0b;
    background-color: rgba(245,158,11,.04);
}
.bf-event.sev-info[b-0jvyeozy27] {
    border-left-color: #60a5fa;
    background-color: rgba(96,165,250,.04);
}

.bf-event-row[b-0jvyeozy27] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.bf-event-badge[b-0jvyeozy27] {
    font: 700 .58rem/1 var(--cc-font-mono);
    letter-spacing: .1em;
    padding: 3px 8px;
    border-radius: 3px;
    flex-shrink: 0;
    background: rgba(255,255,255,.07);
}

.bf-event-badge.sev-critical[b-0jvyeozy27] { color: #ef4444; }
.bf-event-badge.sev-warning[b-0jvyeozy27]  { color: #f59e0b; }
.bf-event-badge.sev-info[b-0jvyeozy27]     { color: #60a5fa; }

.bf-event-cat[b-0jvyeozy27] {
    font: 500 .64rem/1 var(--cc-font-mono);
    letter-spacing: .08em;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    flex-shrink: 0;
}

.bf-event-title[b-0jvyeozy27] {
    flex: 1;
    font: 500 .84rem/1.4 var(--cc-font-sans);
    color: rgba(255,255,255,.86);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bf-event-time[b-0jvyeozy27] {
    font: 400 .68rem/1 var(--cc-font-mono);
    color: rgba(255,255,255,.32);
    flex-shrink: 0;
}

.bf-event-chev[b-0jvyeozy27] {
    color: rgba(255,255,255,.3);
    font-size: .72rem;
    transition: transform .25s var(--cc-ease);
}

.bf-event-chev.rot[b-0jvyeozy27] { transform: rotate(180deg); }

.bf-event-detail[b-0jvyeozy27] {
    max-height: 0;
    opacity: 0;
    padding: 0 16px 0 34px;
    overflow: hidden;
    transition:
        max-height .4s var(--cc-ease),
        opacity .28s var(--cc-ease),
        padding .4s var(--cc-ease);
}

.bf-event-detail.open[b-0jvyeozy27] {
    max-height: 220px;
    opacity: 1;
    padding: 6px 16px 16px 34px;
}

.bf-event-summary[b-0jvyeozy27] {
    font: 400 .78rem/1.55 var(--cc-font-sans);
    color: rgba(255,255,255,.62);
    margin: 0 0 12px;
}

.bf-event-actions[b-0jvyeozy27] { display: flex; gap: 8px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.bf-btn[b-0jvyeozy27] {
    padding: 5px 14px;
    font: 600 .68rem/1 var(--cc-font-sans);
    letter-spacing: .02em;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    background: transparent;
    color: rgba(255,255,255,.58);
    cursor: pointer;
    transition: all .15s var(--cc-ease);
}

.bf-btn:hover[b-0jvyeozy27] {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
}

.bf-btn-primary[b-0jvyeozy27] {
    background: var(--cc-accent);
    border-color: transparent;
    color: #000;
    font-weight: 700;
}

.bf-btn-primary:hover[b-0jvyeozy27] {
    background: color-mix(in oklch, var(--cc-accent) 78%, #fff);
    color: #000;
}

/* ── KPI grid ─────────────────────────────────────────────────────────── */
.bf-kpi-grid[b-0jvyeozy27] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
}

.bf-kpi[b-0jvyeozy27] {
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 5%, transparent), transparent 55%),
        color-mix(in oklch, #0d0f1a 82%, transparent);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    padding: 20px 18px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px) scale(.95);
    transition: border-color .22s, transform .22s, box-shadow .22s;
    cursor: default;
}

.bf-kpi.in[b-0jvyeozy27] {
    animation: bfKpiIn-b-0jvyeozy27 .6s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes bfKpiIn-b-0jvyeozy27 {
    to { opacity: 1; transform: none; }
}

.bf-kpi:hover[b-0jvyeozy27] {
    border-color: color-mix(in oklch, var(--cc-accent) 38%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.3),
                0 0 0 1px color-mix(in oklch, var(--cc-accent) 16%, transparent);
}

.bf-kpi-value[b-0jvyeozy27] {
    font: 760 1.9rem/1 var(--cc-font-sans);
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 7px;
}

.bf-kpi-label[b-0jvyeozy27] {
    font: 500 .64rem/1 var(--cc-font-mono);
    letter-spacing: .07em;
    color: rgba(255,255,255,.42);
    text-transform: uppercase;
}

.bf-kpi-delta[b-0jvyeozy27] {
    font: 600 .7rem/1 var(--cc-font-mono);
    margin-top: 7px;
    color: rgba(255,255,255,.45);
}

.bf-kpi-delta.pos[b-0jvyeozy27] { color: var(--cc-success, #22c55e); }
.bf-kpi-delta.neg[b-0jvyeozy27] { color: #ef4444; }

/* ── Recommended actions ──────────────────────────────────────────────── */
.bf-actions[b-0jvyeozy27] { display: flex; flex-direction: column; gap: 8px; }

.bf-action[b-0jvyeozy27] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.015), transparent),
        color-mix(in oklch, #0d0f1a 82%, transparent);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
}

.bf-action.in[b-0jvyeozy27] {
    animation: bfActionIn-b-0jvyeozy27 .6s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes bfActionIn-b-0jvyeozy27 {
    to { opacity: 1; transform: none; }
}

.bf-action:hover[b-0jvyeozy27] {
    border-color: color-mix(in oklch, var(--cc-accent) 38%, transparent);
    background:
        linear-gradient(90deg,
            color-mix(in oklch, var(--cc-accent) 6%, transparent),
            transparent),
        color-mix(in oklch, #0d0f1a 82%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
}

.bf-action-dot[b-0jvyeozy27] {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bf-action-dot.prio-high[b-0jvyeozy27]   {
    background: #ef4444;
    box-shadow: 0 0 10px color-mix(in oklch, #ef4444 55%, transparent);
}
.bf-action-dot.prio-medium[b-0jvyeozy27] {
    background: #f59e0b;
    box-shadow: 0 0 10px color-mix(in oklch, #f59e0b 50%, transparent);
}
.bf-action-dot.prio-low[b-0jvyeozy27]    {
    background: #60a5fa;
}

.bf-action-text[b-0jvyeozy27] { flex: 1; min-width: 0; }

.bf-action-label[b-0jvyeozy27] {
    font: 600 .9rem/1.2 var(--cc-font-sans);
    color: #fff;
}

.bf-action-desc[b-0jvyeozy27] {
    font: 400 .76rem/1.3 var(--cc-font-sans);
    color: rgba(255,255,255,.48);
    margin-top: 2px;
}

.bf-action-arrow[b-0jvyeozy27] {
    color: rgba(255,255,255,.32);
    font-size: 1rem;
    transition: transform .2s, color .2s;
}

.bf-action:hover .bf-action-arrow[b-0jvyeozy27] {
    color: var(--cc-accent);
    transform: translateX(4px);
}

/* ── CTA ──────────────────────────────────────────────────────────────── */
.bf-cta-wrap[b-0jvyeozy27] {
    text-align: center;
    padding-top: 8px;
    padding-bottom: 20px;
}

.bf-cta[b-0jvyeozy27] {
    padding: 16px 64px;
    font: 700 1.02rem/1 var(--cc-font-sans);
    letter-spacing: -.01em;
    background: linear-gradient(135deg,
        var(--cc-accent),
        color-mix(in oklch, var(--cc-accent) 62%, #fff));
    color: #000;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    transition: transform .22s, box-shadow .22s;
    box-shadow: 0 4px 20px color-mix(in oklch, var(--cc-accent) 22%, transparent);
}

.bf-cta.in[b-0jvyeozy27] {
    animation:
        bfCtaIn-b-0jvyeozy27 .75s cubic-bezier(.34,1.56,.64,1) forwards,
        bfCtaPulse-b-0jvyeozy27 2.4s ease-in-out 1s infinite;
}

@keyframes bfCtaIn-b-0jvyeozy27 {
    to { opacity: 1; transform: none; }
}

@keyframes bfCtaPulse-b-0jvyeozy27 {
    0%,100% { box-shadow: 0 4px 20px  color-mix(in oklch, var(--cc-accent) 22%, transparent); }
    50%     { box-shadow: 0 8px 36px  color-mix(in oklch, var(--cc-accent) 42%, transparent),
                          0 0 0 4px   color-mix(in oklch, var(--cc-accent) 10%, transparent); }
}

.bf-cta:hover[b-0jvyeozy27] {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px color-mix(in oklch, var(--cc-accent) 44%, transparent);
}

.bf-cta-hint[b-0jvyeozy27] {
    margin-top: 12px;
    font: 400 .7rem/1 var(--cc-font-mono);
    letter-spacing: .04em;
    color: rgba(255,255,255,.28);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTENSIONS & FIXES — premium upgrades
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── brief-stage-wrapper: outer scan container ──────────────────────────── */
.brief-stage-wrapper[b-0jvyeozy27] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Boot phase: center content before phase 1 ──────────────────────────── */
.brief-shell:not(.phase-ready)[b-0jvyeozy27] {
    justify-content: center;
}

/* ── Critical system alert banner ───────────────────────────────────────── */
.bf-sys-alert[b-0jvyeozy27] {
    position: fixed;
    top: 28px; left: 50%; transform: translateX(-50%);
    z-index: 230;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px 8px 14px;
    background:
        linear-gradient(90deg, rgba(239,68,68,.14), rgba(239,68,68,.06)),
        rgba(0,0,0,.72);
    border: 1px solid rgba(239,68,68,.35);
    border-radius: 8px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    white-space: nowrap;
    opacity: 0;
    animation: bfAlertIn-b-0jvyeozy27 .6s .4s cubic-bezier(.2,.9,.3,1) forwards;
}

@keyframes bfAlertIn-b-0jvyeozy27 {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bf-sys-alert-dot[b-0jvyeozy27] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px 3px rgba(239,68,68,.55);
    animation: critAlertPulse-b-0jvyeozy27 1.1s ease-in-out infinite alternate;
    flex-shrink: 0;
}

@keyframes critAlertPulse-b-0jvyeozy27 {
    from { box-shadow: 0 0 6px 2px rgba(239,68,68,.4); opacity: .8; }
    to   { box-shadow: 0 0 16px 5px rgba(239,68,68,.7); opacity: 1; }
}

.bf-sys-alert-text[b-0jvyeozy27] {
    font: 600 .7rem/1 var(--cc-font-mono);
    letter-spacing: .1em;
    color: #ef4444;
    text-transform: uppercase;
}

/* ── API error state ────────────────────────────────────────────────────── */
.brief-api-error[b-0jvyeozy27] {
    width: 100%;
    max-width: 740px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background:
        linear-gradient(90deg, rgba(245,158,11,.07), transparent),
        rgba(0,0,0,.18);
    border: 1px solid rgba(245,158,11,.2);
    border-left: 3px solid rgba(245,158,11,.5);
    border-radius: 6px;
    opacity: 0;
    animation: bfDbIn-b-0jvyeozy27 .55s .1s ease forwards;
}

.brief-api-error-icon[b-0jvyeozy27] {
    color: #f59e0b;
    font: 700 .9rem/1 var(--cc-font-mono);
    flex-shrink: 0;
    animation: warn-pulse-b-0jvyeozy27 1.3s ease-in-out infinite alternate;
}

.brief-api-error-text[b-0jvyeozy27] {
    font: 400 .78rem/1.45 var(--cc-font-sans);
    color: rgba(255,255,255,.55);
}

.brief-api-error-text strong[b-0jvyeozy27] {
    color: #f59e0b;
    font-weight: 600;
}

/* ── Enhanced critical event glow pulse ─────────────────────────────────── */
.bf-event.sev-critical[b-0jvyeozy27] {
    border-left-color: #ef4444;
    background-color: rgba(239,68,68,.05);
}

.bf-event.sev-critical.in[b-0jvyeozy27] {
    animation: bfEventIn-b-0jvyeozy27 .58s var(--cc-ease) forwards, critEdgePulse-b-0jvyeozy27 2s ease-in-out 1.2s infinite;
}

@keyframes critEdgePulse-b-0jvyeozy27 {
    0%, 100% { border-left-color: rgba(239,68,68,.65); box-shadow: -2px 0 12px -2px rgba(239,68,68,.25); }
    50%       { border-left-color: #ef4444;            box-shadow: -2px 0 22px -1px rgba(239,68,68,.55); }
}

/* ── Third DATABASE quip (secondary in accent colour) ──────────────────── */
.bf-db-quip-tertiary[b-0jvyeozy27] {
    font-size: .72rem;
    border-left-color: color-mix(in oklch, var(--cc-accent) 40%, transparent);
    color: color-mix(in oklch, var(--cc-accent) 58%, rgba(255,255,255,.6));
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 5%, transparent), transparent 82%),
        rgba(0,0,0,.14);
    animation-delay: .3s;
}

/* ── CTA countdown hint ─────────────────────────────────────────────────── */
.bf-cta-countdown[b-0jvyeozy27] {
    display: inline-block;
    min-width: 14px;
    color: var(--cc-accent);
    font-weight: 600;
    transition: opacity .2s;
}

/* ── KPI grid: detail panel must span grid ──────────────────────────────── */
.bf-kpi-grid[b-0jvyeozy27] { position: relative; }
.bf-kpi-detail[b-0jvyeozy27] { grid-column: 1 / -1; }

/* ── Persona line 1 — larger, more commanding ────────────────────────────── */
.bf-persona-line-1[b-0jvyeozy27] {
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    font-weight: 250;
    letter-spacing: -.03em;
}

/* ── Section header with count badge ────────────────────────────────────── */
.bf-section-badge[b-0jvyeozy27] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 16px;
    padding: 0 5px;
    background: rgba(239,68,68,.18);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 3px;
    font: 700 .58rem/1 var(--cc-font-mono);
    color: #ef4444;
    letter-spacing: .04em;
    margin-left: auto;
}

.bf-section-badge.neutral[b-0jvyeozy27] {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.45);
}

/* ── Communication / Feed status line ───────────────────────────────────── */
.bf-feed-line[b-0jvyeozy27] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 6px;
    font: 400 .76rem/1.4 var(--cc-font-sans);
    color: rgba(255,255,255,.42);
    opacity: 0;
    animation: bfSectionIn-b-0jvyeozy27 .5s var(--cc-ease) forwards;
}

.bf-feed-dot[b-0jvyeozy27] {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--cc-success, #22c55e);
    box-shadow: 0 0 6px 1px color-mix(in oklch, var(--cc-success, #22c55e) 45%, transparent);
}

.bf-feed-dot.warn[b-0jvyeozy27] {
    background: #f59e0b;
    box-shadow: 0 0 6px 1px rgba(245,158,11,.45);
}

.bf-feed-link[b-0jvyeozy27] {
    margin-left: auto;
    font: 600 .68rem/1 var(--cc-font-mono);
    letter-spacing: .06em;
    color: color-mix(in oklch, var(--cc-accent) 72%, rgba(255,255,255,.5));
    text-decoration: none;
    opacity: .7;
    transition: opacity .15s;
    cursor: pointer;
    background: none; border: none; padding: 0;
}

.bf-feed-link:hover[b-0jvyeozy27] { opacity: 1; }

/* ── Improved responsive layout ─────────────────────────────────────────── */
@media (max-width: 520px) {
    .brief-shell[b-0jvyeozy27] { padding: 16px; }
    .brief-card[b-0jvyeozy27]  { padding: 20px 18px; }
    .bf-persona-line-1[b-0jvyeozy27] { font-size: 1.35rem; }
    .bf-kpi-grid[b-0jvyeozy27] { grid-template-columns: repeat(2, 1fr); }
    .bf-cta[b-0jvyeozy27] { padding: 14px 40px; font-size: .92rem; }
    .bf-sys-alert[b-0jvyeozy27] { max-width: calc(100vw - 32px); white-space: normal; }
}

/* ── Progress shimmer on top bar ────────────────────────────────────────── */
.brief-top-progress-fill[b-0jvyeozy27]::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45));
    animation: progressShimmer-b-0jvyeozy27 1.8s ease-in-out infinite;
}

@keyframes progressShimmer-b-0jvyeozy27 {
    0%   { opacity: 0; transform: translateX(-10px); }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(10px); }
}

.brief-top-progress[b-0jvyeozy27] { overflow: visible; }
.brief-top-progress-fill[b-0jvyeozy27] { position: relative; overflow: hidden; }

/* ── Action section: high-priority row glow ─────────────────────────────── */
.bf-action.prio-high.in[b-0jvyeozy27] {
    animation: bfActionIn-b-0jvyeozy27 .6s cubic-bezier(.34,1.56,.64,1) forwards, highPrioShimmer-b-0jvyeozy27 3s ease-in-out 1s infinite;
}

@keyframes highPrioShimmer-b-0jvyeozy27 {
    0%,100% { box-shadow: none; }
    50%     { box-shadow: inset 3px 0 0 rgba(239,68,68,.25), 0 0 24px -8px rgba(239,68,68,.15); }
}

/* ── Better boot: add a faint second progress ring on logo ──────────────── */
.brief-logo[b-0jvyeozy27] {
    position: relative;
    animation: logoAppear-b-0jvyeozy27 .8s var(--cc-ease) both;
}

@keyframes logoAppear-b-0jvyeozy27 {
    from { opacity: 0; transform: scale(.8); filter: blur(4px); }
    to   { opacity: 1; transform: none;      filter: none; }
}

/* ── Identity card after phase 3: subtle grow ───────────────────────────── */
.brief-card.visible[b-0jvyeozy27] {
    opacity: 1;
    transform: none;
    box-shadow:
        0 0 100px -16px color-mix(in oklch, var(--cc-accent) 22%, transparent),
        0 32px 70px -20px rgba(0,0,0,.72),
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -1px 0 rgba(255,255,255,.02);
}

/* ── Callsign display ────────────────────────────────────────────────────── */
.brief-callsign-pill[b-0jvyeozy27] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    background: color-mix(in oklch, var(--cc-accent) 9%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-accent) 25%, transparent);
    border-radius: 4px;
    font: 600 .65rem/1 var(--cc-font-mono);
    letter-spacing: .1em;
    color: var(--cc-accent);
    text-transform: uppercase;
}

.brief-callsign-pip[b-0jvyeozy27] {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cc-accent);
    animation: line-pulse-b-0jvyeozy27 .9s ease-in-out infinite alternate;
}

/* ── KPI: positive/negative border tint ─────────────────────────────────── */
.bf-kpi.pos[b-0jvyeozy27] { border-color: rgba(34,197,94,.14); }
.bf-kpi.neg[b-0jvyeozy27] { border-color: rgba(239,68,68,.14); }
.bf-kpi.neg .bf-kpi-value[b-0jvyeozy27] { color: #ef4444; }

/* ── Section separator ──────────────────────────────────────────────────── */
.bf-sep[b-0jvyeozy27] {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,.07) 30%,
        rgba(255,255,255,.07) 70%,
        transparent);
    margin: 4px 0;
}

/* Premium live matrix section */
.bf-premium-live[b-0jvyeozy27] {
    opacity: 0;
    transform: translateY(10px) scale(.985);
    transition: opacity .5s var(--cc-ease-flow), transform .5s var(--cc-ease-flow);
}

.bf-premium-live.in[b-0jvyeozy27] {
    opacity: 1;
    transform: none;
}

.bf-role-hud[b-0jvyeozy27] {
    --role-accent-safe: var(--role-accent, var(--cc-neon-cyan));
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid color-mix(in oklch, var(--role-accent-safe) 38%, transparent);
    background:
        linear-gradient(120deg,
            color-mix(in oklch, var(--role-accent-safe) 12%, transparent),
            transparent 58%),
        rgba(10,12,18,.72);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow:
        0 14px 36px -20px rgba(0,0,0,.8),
        0 0 34px -18px color-mix(in oklch, var(--role-accent-safe) 38%, transparent);
}

.bf-role-hud-left[b-0jvyeozy27] {
    min-width: 0;
}

.bf-role-label[b-0jvyeozy27] {
    font: 700 .58rem/1 var(--cc-font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--role-accent-safe) 62%, rgba(255,255,255,.5));
    margin-bottom: 6px;
}

.bf-role-value[b-0jvyeozy27] {
    font: 650 1rem/1.15 var(--cc-font-sans);
    color: #fff;
    margin-bottom: 4px;
}

.bf-role-sub[b-0jvyeozy27] {
    font: 500 .66rem/1 var(--cc-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.52);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bf-role-hint[b-0jvyeozy27] {
    margin-top: 8px;
    font: 500 .72rem/1.45 var(--cc-font-sans);
    color: rgba(255,255,255,.66);
    max-width: 54ch;
}

.bf-role-chip[b-0jvyeozy27] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklch, var(--role-accent-safe) 42%, transparent);
    background: color-mix(in oklch, var(--role-accent-safe) 12%, transparent);
    color: color-mix(in oklch, var(--role-accent-safe) 74%, #fff);
    font: 700 .6rem/1 var(--cc-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bf-live-grid[b-0jvyeozy27] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bf-live-grid > *[b-0jvyeozy27] {
    min-width: 0;
}

.bf-live-milestones[b-0jvyeozy27] {
    margin-top: 12px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid rgba(var(--cc-neon-gold-rgb), .24);
    border-radius: 10px;
    background:
        linear-gradient(130deg, rgba(var(--cc-neon-gold-rgb), .08), transparent 45%),
        rgba(11,13,20,.66);
}

.bf-live-milestones h3[b-0jvyeozy27] {
    margin: 0 0 10px;
    font: 700 .62rem/1 var(--cc-font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-neon-gold);
}

.bf-live-milestones .milestone-item[b-0jvyeozy27] {
    margin: 0 8px 8px 0;
}

@media (max-width: 920px) {
    .bf-live-grid[b-0jvyeozy27] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .bf-role-hud[b-0jvyeozy27] {
        flex-direction: column;
        align-items: flex-start;
    }

    .bf-role-chip[b-0jvyeozy27] {
        margin-top: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARC-DATEN-OVERLAY — Halbkreis-Chips über dem Video (Phase 4 - 6)
   B = Einflugpunkt oben-Mitte → A = Endpositionen seitlich
   ═══════════════════════════════════════════════════════════════════════════ */

.bf-arc-layer[b-0jvyeozy27] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1);
}

.bf-arc-layer.arc-visible[b-0jvyeozy27] { opacity: 1; }
.bf-arc-layer.arc-hidden[b-0jvyeozy27]  { opacity: 0; pointer-events: none; }

/* ── SVG-Orbit-Linien ───────────────────────────────────────────────────── */
.bf-arc-lines[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: arcLinesIn-b-0jvyeozy27 .8s .35s ease forwards;
}

@keyframes arcLinesIn-b-0jvyeozy27 {
    to { opacity: 1; }
}

.arc-orbit[b-0jvyeozy27] {
    fill: none;
    stroke: color-mix(in oklch, var(--cc-accent) 18%, transparent);
    stroke-width: 1;
    stroke-dasharray: 6 10;
    animation: orbitSpin-b-0jvyeozy27 60s linear infinite;
}

@keyframes orbitSpin-b-0jvyeozy27 {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -200; }
}

.arc-center-dot[b-0jvyeozy27] {
    fill: color-mix(in oklch, var(--cc-accent) 45%, transparent);
    animation: arcDotPulse-b-0jvyeozy27 2s ease-in-out infinite alternate;
}

@keyframes arcDotPulse-b-0jvyeozy27 {
    from { r: 4; opacity: .5; }
    to   { r: 7; opacity: 1; }
}

.arc-spoke[b-0jvyeozy27] {
    stroke: color-mix(in oklch, var(--cc-accent) 10%, transparent);
    stroke-width: .8;
    stroke-dasharray: 4 8;
}

/* ── Chip-Basis ─────────────────────────────────────────────────────────── */
.bf-arc-chip[b-0jvyeozy27] {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(8, 10, 20, 0.78);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    pointer-events: none;
    min-width: 90px;
    text-align: center;
    opacity: 0;
    transform: translateY(-24px) scale(.88);
    animation: arcChipIn-b-0jvyeozy27 .65s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes arcChipIn-b-0jvyeozy27 {
    to { opacity: 1; transform: none; }
}

/* ── Chip-Positionen (Halbkreis B→A) ───────────────────────────────────── */

/* B: Einflugpunkt oben-Mitte (12 Uhr) */
.arc-pos-top[b-0jvyeozy27] {
    top: 6%;
    left: 50%;
    transform: translateX(-50%) translateY(-24px) scale(.88);
}

@keyframes arcChipInCenter-b-0jvyeozy27 {
    to { opacity: 1; transform: translateX(-50%) none; }
}

.arc-pos-top[b-0jvyeozy27] {
    animation: arcChipInTop-b-0jvyeozy27 .65s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes arcChipInTop-b-0jvyeozy27 {
    from { opacity: 0; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) scale(.7); }
    to   { opacity: 1; top: 6%;  left: 50%; transform: translateX(-50%) scale(1); }
}

/* 10-Uhr-Position: oben-links */
.arc-pos-tl[b-0jvyeozy27] {
    top: 14%;
    left: 10%;
    animation: arcChipInTL-b-0jvyeozy27 .7s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes arcChipInTL-b-0jvyeozy27 {
    from { opacity: 0; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.7); }
    to   { opacity: 1; top: 14%; left: 10%; transform: none; }
}

/* 2-Uhr-Position: oben-rechts */
.arc-pos-tr[b-0jvyeozy27] {
    top: 14%;
    right: 10%;
    animation: arcChipInTR-b-0jvyeozy27 .7s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes arcChipInTR-b-0jvyeozy27 {
    from { opacity: 0; top: 50%; right: 50%; transform: translate(50%,-50%) scale(.7); }
    to   { opacity: 1; top: 14%; right: 10%; transform: none; }
}

/* 9-Uhr-Position: links-Mitte */
.arc-pos-ml[b-0jvyeozy27] {
    top: 42%;
    left: 5%;
    transform: translateY(-50%);
    animation: arcChipInML-b-0jvyeozy27 .75s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes arcChipInML-b-0jvyeozy27 {
    from { opacity: 0; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.7); }
    to   { opacity: 1; top: 42%; left: 5%;  transform: translateY(-50%); }
}

/* 3-Uhr-Position: rechts-Mitte */
.arc-pos-mr[b-0jvyeozy27] {
    top: 42%;
    right: 5%;
    transform: translateY(-50%);
    animation: arcChipInMR-b-0jvyeozy27 .75s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes arcChipInMR-b-0jvyeozy27 {
    from { opacity: 0; top: 50%; right: 50%; transform: translate(50%,-50%) scale(.7); }
    to   { opacity: 1; top: 42%; right: 5%;  transform: translateY(-50%); }
}

/* 7-Uhr-Position: unten-links */
.arc-pos-bl[b-0jvyeozy27] {
    bottom: 18%;
    left: 10%;
    animation: arcChipInBL-b-0jvyeozy27 .8s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes arcChipInBL-b-0jvyeozy27 {
    from { opacity: 0; bottom: 50%; left: 50%; transform: translate(-50%, 50%) scale(.7); }
    to   { opacity: 1; bottom: 18%; left: 10%; transform: none; }
}

/* ── Chip-Inhalte ───────────────────────────────────────────────────────── */
.bf-arc-chip-icon[b-0jvyeozy27] {
    font-size: 1rem;
    line-height: 1;
    opacity: .7;
}

.bf-arc-chip-label[b-0jvyeozy27] {
    font: 600 .55rem/1 var(--cc-font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55;
}

.bf-arc-chip-val[b-0jvyeozy27] {
    font: 700 .78rem/1 var(--cc-font-sans);
    letter-spacing: -.01em;
}

/* ── Chip-Farben ────────────────────────────────────────────────────────── */
.arc-red[b-0jvyeozy27] {
    border-color: rgba(239, 68, 68, .28);
    background: rgba(20, 4, 4, 0.78);
}
.arc-red .bf-arc-chip-icon[b-0jvyeozy27],
.arc-red .bf-arc-chip-val[b-0jvyeozy27]  { color: #ef4444; }
.arc-red .bf-arc-chip-label[b-0jvyeozy27] { color: rgba(239,68,68,.65); }

.arc-yellow[b-0jvyeozy27] {
    border-color: rgba(245, 158, 11, .28);
    background: rgba(18, 12, 2, 0.78);
}
.arc-yellow .bf-arc-chip-icon[b-0jvyeozy27],
.arc-yellow .bf-arc-chip-val[b-0jvyeozy27]  { color: #f59e0b; }
.arc-yellow .bf-arc-chip-label[b-0jvyeozy27] { color: rgba(245,158,11,.65); }

.arc-green[b-0jvyeozy27] {
    border-color: rgba(34, 197, 94, .28);
    background: rgba(2, 14, 6, 0.78);
}
.arc-green .bf-arc-chip-icon[b-0jvyeozy27],
.arc-green .bf-arc-chip-val[b-0jvyeozy27]  { color: #22c55e; }
.arc-green .bf-arc-chip-label[b-0jvyeozy27] { color: rgba(34,197,94,.65); }

.arc-blue[b-0jvyeozy27] {
    border-color: color-mix(in oklch, var(--cc-accent) 30%, transparent);
    background: rgba(4, 6, 20, 0.78);
}
.arc-blue .bf-arc-chip-icon[b-0jvyeozy27],
.arc-blue .bf-arc-chip-val[b-0jvyeozy27]  { color: var(--cc-accent); }
.arc-blue .bf-arc-chip-label[b-0jvyeozy27] { color: color-mix(in oklch, var(--cc-accent) 60%, rgba(255,255,255,.5)); }

.arc-cyan[b-0jvyeozy27] {
    border-color: rgba(6, 182, 212, .28);
    background: rgba(2, 12, 16, 0.78);
}
.arc-cyan .bf-arc-chip-icon[b-0jvyeozy27],
.arc-cyan .bf-arc-chip-val[b-0jvyeozy27]  { color: #06b6d4; }
.arc-cyan .bf-arc-chip-label[b-0jvyeozy27] { color: rgba(6,182,212,.65); }

/* ── Chip Puls-Glow (kritische Chips) ──────────────────────────────────── */
.arc-red .bf-arc-chip-icon[b-0jvyeozy27] {
    animation: arcRedPulse-b-0jvyeozy27 1.5s ease-in-out infinite alternate;
}

@keyframes arcRedPulse-b-0jvyeozy27 {
    from { filter: drop-shadow(0 0 4px rgba(239,68,68,.4)); }
    to   { filter: drop-shadow(0 0 10px rgba(239,68,68,.8)); opacity: 1; }
}

/* ── Mobile: Arc-Chips kleiner und anders positioniert ─────────────────── */
@media (max-width: 768px) {
    .bf-arc-layer[b-0jvyeozy27] { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD-BUTTON (Phase 8) — unten rechts, pulsierend
   ═══════════════════════════════════════════════════════════════════════════ */
.bf-cta-wrap[b-0jvyeozy27] {
    position: fixed !important;
    bottom: 32px;
    right: 32px;
    z-index: 50;
    text-align: right;
    padding-top: 0;
    padding-bottom: 0;
}

.bf-cta[b-0jvyeozy27] {
    padding: 14px 32px;
    font: 700 .95rem/1 var(--cc-font-sans);
    letter-spacing: -.01em;
    background: linear-gradient(135deg,
        var(--cc-accent),
        color-mix(in oklch, var(--cc-accent) 62%, #fff));
    color: #000;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    transition: transform .22s, box-shadow .22s;
    box-shadow:
        0 4px 20px color-mix(in oklch, var(--cc-accent) 22%, transparent),
        0 0 0 1px rgba(255,255,255,.06);
}

.bf-cta.in[b-0jvyeozy27] {
    animation:
        bfCtaIn-b-0jvyeozy27 .75s cubic-bezier(.34,1.56,.64,1) forwards,
        bfCtaPulse-b-0jvyeozy27 2.4s ease-in-out 1s infinite;
}

.bf-cta-hint[b-0jvyeozy27] {
    margin-top: 8px;
    font: 400 .65rem/1 var(--cc-font-mono);
    letter-spacing: .04em;
    color: rgba(255,255,255,.28);
    text-align: right;
}

/* ==========================================================================
   BRIEFING DATA RING
   Lightweight live-data windows around the video/identity center.
   ========================================================================== */

.legacy-orbit-hidden[b-0jvyeozy27] {
    display: none !important;
}

.bf-data-ring[b-0jvyeozy27] {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
}

.bf-data-ring.orbit-live[b-0jvyeozy27] {
    opacity: 1;
}

.bf-data-ring-lines[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: bfDataRingIn-b-0jvyeozy27 1s .25s ease-out both;
}

.bf-data-outer-ring[b-0jvyeozy27],
.bf-data-inner-safe[b-0jvyeozy27],
.bf-data-flow[b-0jvyeozy27] {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.bf-data-outer-ring[b-0jvyeozy27] {
    stroke: rgba(93, 217, 193, .28);
    stroke-width: 1.15;
    stroke-dasharray: 9 12;
}

.bf-data-inner-safe[b-0jvyeozy27] {
    stroke: rgba(159, 228, 255, .10);
    stroke-width: 1;
    stroke-dasharray: 4 16;
}

.bf-data-flow[b-0jvyeozy27] {
    stroke: rgba(0, 229, 255, .18);
    stroke-width: 1;
    stroke-dasharray: 14 18;
    animation: bfDataFlow-b-0jvyeozy27 15s linear infinite;
}

.bf-data-flow.flow-b[b-0jvyeozy27] {
    animation-duration: 18s;
    animation-direction: reverse;
}

.bf-data-flow.flow-c[b-0jvyeozy27] {
    animation-duration: 21s;
}

.bf-data-window[b-0jvyeozy27] {
    --slot-delay: 0s;
    --slot-duration: 15s;
    --slot-accent: #00e5ff;
    position: fixed;
    left: 0;
    top: 0;
    width: clamp(240px, 20vw, 340px);
    min-height: 140px;
    padding: 16px 18px 18px;
    border: 1px solid color-mix(in oklch, var(--slot-accent) 48%, transparent);
    border-radius: 10px;
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--slot-accent) 14%, transparent), transparent 60%),
        rgba(3, 9, 22, .58);
    box-shadow:
        0 20px 42px -32px #000,
        0 0 28px -19px var(--slot-accent),
        inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(7px) saturate(1.2);
    -webkit-backdrop-filter: blur(7px) saturate(1.2);
    opacity: 0;
    transform: translate3d(-26vw, 50vh, 0) scale(.82);
    /* linear: verhindert Abbremsen/Anfahren an jedem Wegpunkt — macht die Kreisbahn fließend */
    animation-name: bfSlotOrbitMid-b-0jvyeozy27;
    animation-duration: var(--slot-duration);
    animation-delay: var(--slot-delay);
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

/* ── Orbit-Varianten: jede Klasse wählt einen eigenen Keyframe ───────────── */
.bf-data-window.orbit-inner[b-0jvyeozy27] { animation-name: bfSlotOrbitInner-b-0jvyeozy27; }
.bf-data-window.orbit-mid[b-0jvyeozy27]   { animation-name: bfSlotOrbitMid-b-0jvyeozy27;   }
.bf-data-window.orbit-outer[b-0jvyeozy27] { animation-name: bfSlotOrbitOuter-b-0jvyeozy27; }

.bf-data-heading[b-0jvyeozy27],
.bf-data-detail[b-0jvyeozy27] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bf-data-heading[b-0jvyeozy27] {
    color: color-mix(in oklch, var(--slot-accent) 80%, #ffffff);
    font: 800 .82rem/1 var(--cc-font-mono);
    letter-spacing: .10em;
    text-transform: uppercase;
}

.bf-data-value[b-0jvyeozy27] {
    display: block;
    margin-top: 6px;
    color: rgba(245, 250, 255, .97);
    font: 850 clamp(1.6rem, 2.4vw, 2.4rem)/.95 var(--cc-font-sans);
    letter-spacing: -.02em;
    line-height: 1;
}

.bf-data-detail[b-0jvyeozy27] {
    margin-top: 6px;
    color: rgba(219, 237, 255, .82);
    font: 600 .88rem/1.2 var(--cc-font-sans);
}

/* slot-pos-* entfernt — Delays kommen jetzt per Inline-Style (--slot-delay: Nms)
   aus BuildDataWindows(), gespreizt über die gesamte Video-Länge. */

.tone-cyan[b-0jvyeozy27] { --slot-accent: #00e5ff; }
.tone-blue[b-0jvyeozy27] { --slot-accent: #7aa7ff; }
.tone-green[b-0jvyeozy27] { --slot-accent: #2bff88; }
.tone-amber[b-0jvyeozy27] { --slot-accent: #ffd24a; }
.tone-red[b-0jvyeozy27] { --slot-accent: #ff5d6c; }
.tone-violet[b-0jvyeozy27] { --slot-accent: #b88cff; }

@keyframes bfDataRingIn-b-0jvyeozy27 {
    from { opacity: 0; filter: blur(7px); transform: scale(.985); }
    to { opacity: .78; filter: blur(0); transform: scale(1); }
}

@keyframes bfDataFlow-b-0jvyeozy27 {
    to { stroke-dashoffset: -128; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TORNADO-KREISFLUG — 3 mathematisch korrekte Ellipsen-Orbits
   Formel: x(θ) = cx − rx·cos(θ)   y(θ) = cy + ry·sin(θ)
   θ: 0°→180° (links→unten→rechts, 0–50 %)  HOLD 50–63 %  180°→360° (rechts→oben→links, 63–100 %)
   20 gleichmäßige Winkelschritte à 18° → Interpolation sieht perfekt kreisförmig aus.
   animation-timing-function: linear auf .bf-data-window → kein Abbremsen an Wegpunkten.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Innerer Orbit  cx=24 cy=49.5  rx=50 ry=28.5 ───────────────────────── */
/* 20 gleichmaessige 5%-Schritte a 18° — kein HOLD, fliessende Ellipse     */
@keyframes bfSlotOrbitInner-b-0jvyeozy27 {
    0%   { opacity: 0;    transform: translate3d(-26.0vw, 49.5vh, 0) scale(.82); }
    5%   { opacity: .85;  transform: translate3d(-23.5vw, 58.3vh, 0) scale(.95); }
    10%  { opacity: 1;    transform: translate3d(-16.5vw, 66.3vh, 0) scale(1);   }
    15%  {                transform: translate3d( -5.4vw, 72.6vh, 0) scale(1);   }
    20%  {                transform: translate3d(  8.5vw, 76.6vh, 0) scale(1);   }
    25%  {                transform: translate3d( 24.0vw, 78.0vh, 0) scale(1);   }
    30%  {                transform: translate3d( 39.5vw, 76.6vh, 0) scale(1);   }
    35%  {                transform: translate3d( 53.4vw, 72.6vh, 0) scale(1);   }
    40%  {                transform: translate3d( 64.5vw, 66.3vh, 0) scale(1);   }
    45%  {                transform: translate3d( 71.6vw, 58.3vh, 0) scale(1);   }
    50%  {                transform: translate3d( 74.0vw, 49.5vh, 0) scale(1);   }
    55%  {                transform: translate3d( 71.6vw, 40.7vh, 0) scale(1);   }
    60%  {                transform: translate3d( 64.5vw, 32.7vh, 0) scale(1);   }
    65%  {                transform: translate3d( 53.4vw, 26.4vh, 0) scale(1);   }
    70%  {                transform: translate3d( 39.5vw, 22.4vh, 0) scale(1);   }
    75%  {                transform: translate3d( 24.0vw, 21.0vh, 0) scale(1);   }
    80%  {                transform: translate3d(  8.5vw, 22.4vh, 0) scale(1);   }
    85%  {                transform: translate3d( -5.4vw, 26.4vh, 0) scale(1);   }
    90%  {                transform: translate3d(-16.5vw, 32.7vh, 0) scale(.97); }
    95%  { opacity: .72;  transform: translate3d(-23.5vw, 40.7vh, 0) scale(.92); }
    100% { opacity: 0;    transform: translate3d(-26.0vw, 49.5vh, 0) scale(.82); }
}

/* ── Mittlerer Orbit  cx=28.5 cy=49.5  rx=54.5 ry=37.5 ────────────────── */
/* 20 gleichmaessige 5%-Schritte a 18° — kein HOLD, fliessende Ellipse     */
@keyframes bfSlotOrbitMid-b-0jvyeozy27 {
    0%   { opacity: 0;    transform: translate3d(-26.0vw, 49.5vh, 0) scale(.82); }
    5%   { opacity: .85;  transform: translate3d(-23.3vw, 61.1vh, 0) scale(.95); }
    10%  { opacity: 1;    transform: translate3d(-15.6vw, 71.6vh, 0) scale(1);   }
    15%  {                transform: translate3d( -3.5vw, 79.8vh, 0) scale(1);   }
    20%  {                transform: translate3d( 11.7vw, 85.2vh, 0) scale(1);   }
    25%  {                transform: translate3d( 28.5vw, 87.0vh, 0) scale(1);   }
    30%  {                transform: translate3d( 45.3vw, 85.2vh, 0) scale(1);   }
    35%  {                transform: translate3d( 60.5vw, 79.8vh, 0) scale(1);   }
    40%  {                transform: translate3d( 72.6vw, 71.6vh, 0) scale(1);   }
    45%  {                transform: translate3d( 80.3vw, 61.1vh, 0) scale(1);   }
    50%  {                transform: translate3d( 83.0vw, 49.5vh, 0) scale(1);   }
    55%  {                transform: translate3d( 80.3vw, 37.9vh, 0) scale(1);   }
    60%  {                transform: translate3d( 72.6vw, 27.4vh, 0) scale(1);   }
    65%  {                transform: translate3d( 60.5vw, 19.2vh, 0) scale(1);   }
    70%  {                transform: translate3d( 45.3vw, 13.8vh, 0) scale(1);   }
    75%  {                transform: translate3d( 28.5vw, 12.0vh, 0) scale(1);   }
    80%  {                transform: translate3d( 11.7vw, 13.8vh, 0) scale(1);   }
    85%  {                transform: translate3d( -3.5vw, 19.2vh, 0) scale(1);   }
    90%  {                transform: translate3d(-15.6vw, 27.4vh, 0) scale(.97); }
    95%  { opacity: .72;  transform: translate3d(-23.3vw, 37.9vh, 0) scale(.92); }
    100% { opacity: 0;    transform: translate3d(-26.0vw, 49.5vh, 0) scale(.82); }
}

/* ── Aeusserer Orbit  cx=31 cy=49  rx=57 ry=42  (≈30 px Randabstand) ──── */
/* 20 gleichmaessige 5%-Schritte a 18° — kein HOLD, fliessende Ellipse     */
@keyframes bfSlotOrbitOuter-b-0jvyeozy27 {
    0%   { opacity: 0;    transform: translate3d(-26.0vw, 49.0vh, 0) scale(.82); }
    5%   { opacity: .85;  transform: translate3d(-23.2vw, 62.0vh, 0) scale(.95); }
    10%  { opacity: 1;    transform: translate3d(-15.1vw, 73.7vh, 0) scale(1);   }
    15%  {                transform: translate3d( -2.5vw, 83.0vh, 0) scale(1);   }
    20%  {                transform: translate3d( 13.4vw, 88.9vh, 0) scale(1);   }
    25%  {                transform: translate3d( 31.0vw, 91.0vh, 0) scale(1);   }
    30%  {                transform: translate3d( 48.6vw, 88.9vh, 0) scale(1);   }
    35%  {                transform: translate3d( 64.5vw, 83.0vh, 0) scale(1);   }
    40%  {                transform: translate3d( 77.1vw, 73.7vh, 0) scale(1);   }
    45%  {                transform: translate3d( 85.2vw, 62.0vh, 0) scale(1);   }
    50%  {                transform: translate3d( 88.0vw, 49.0vh, 0) scale(1);   }
    55%  {                transform: translate3d( 85.2vw, 36.0vh, 0) scale(1);   }
    60%  {                transform: translate3d( 77.1vw, 24.3vh, 0) scale(1);   }
    65%  {                transform: translate3d( 64.5vw, 15.0vh, 0) scale(1);   }
    70%  {                transform: translate3d( 48.6vw,  9.1vh, 0) scale(1);   }
    75%  {                transform: translate3d( 31.0vw,  7.0vh, 0) scale(1);   }
    80%  {                transform: translate3d( 13.4vw,  9.1vh, 0) scale(1);   }
    85%  {                transform: translate3d( -2.5vw, 15.0vh, 0) scale(1);   }
    90%  {                transform: translate3d(-15.1vw, 24.3vh, 0) scale(.97); }
    95%  { opacity: .72;  transform: translate3d(-23.2vw, 36.0vh, 0) scale(.92); }
    100% { opacity: 0;    transform: translate3d(-26.0vw, 49.0vh, 0) scale(.82); }
}

@media (max-width: 1280px) {
    .bf-data-window[b-0jvyeozy27] {
        width: clamp(172px, 18vw, 240px);
        min-height: 100px;
        padding: 11px 12px;
    }

    .bf-data-value[b-0jvyeozy27] {
        font-size: clamp(1rem, 1.45vw, 1.34rem);
    }
}

@media (max-width: 900px) {
    .bf-data-ring[b-0jvyeozy27] {
        display: none;
    }
}

/* ==========================================================================
   BRIEFING ORBIT WINDOWS (21.5s TIMELINE)
   Windows stay outside center area and follow the directed sequence.
   ========================================================================== */

.bf-orbit-layer[b-0jvyeozy27] {
    --bf-seq-duration: 21.5s;
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
}

.bf-orbit-layer.orbit-live[b-0jvyeozy27] {
    opacity: 1;
}

.bf-orbit-lines[b-0jvyeozy27] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: bfOrbitLinesTimeline-b-0jvyeozy27 var(--bf-seq-duration) linear both;
}

.bf-orbit-ring[b-0jvyeozy27] {
    fill: none;
    stroke: rgba(93, 217, 193, .24);
    stroke-width: 1.1;
    stroke-dasharray: 8 10;
}

.bf-orbit-spoke[b-0jvyeozy27] {
    stroke: rgba(93, 217, 193, .14);
    stroke-width: 1;
    stroke-dasharray: 5 9;
}

.bf-orbit-window[b-0jvyeozy27] {
    position: absolute;
    width: min(440px, 26vw);
    min-width: 320px;
    min-height: 140px;
    padding: 14px 16px;
    border: 1px solid rgba(93, 217, 193, .35);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(93, 217, 193, .09), transparent 52%),
        rgba(6, 10, 22, .72);
    box-shadow:
        0 20px 40px -30px rgba(0,0,0,.9),
        0 0 34px -22px rgba(93, 217, 193, .8),
        inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(10px) saturate(1.25);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.9);
    animation-fill-mode: both;
}

.bf-orbit-window h4[b-0jvyeozy27] {
    margin: 0 0 8px;
    font: 700 .64rem/1 var(--cc-font-mono);
    letter-spacing: .16em;
    color: rgba(159, 228, 255, .92);
    text-transform: uppercase;
}

.bf-orbit-window p[b-0jvyeozy27] {
    margin: 0 0 4px;
    font: 500 .76rem/1.3 var(--cc-font-sans);
    color: rgba(232, 245, 255, .88);
}

.bf-orbit-window p:last-child[b-0jvyeozy27] {
    margin-bottom: 0;
}

.win-global[b-0jvyeozy27] {
    left: clamp(140px, 10vw, 190px);
    top: clamp(110px, 10vh, 150px);
    animation:
        bfWinEnterGlobal-b-0jvyeozy27 .9s cubic-bezier(.22,.82,.33,1) 3s both,
        bfWinTimeline-b-0jvyeozy27 var(--bf-seq-duration) linear 0s both;
}

.win-users[b-0jvyeozy27] {
    right: clamp(140px, 10vw, 190px);
    top: clamp(110px, 10vh, 150px);
    animation:
        bfWinEnterUsers-b-0jvyeozy27 .9s cubic-bezier(.22,.82,.33,1) 3.4s both,
        bfWinTimeline-b-0jvyeozy27 var(--bf-seq-duration) linear 0s both;
}

.win-activity[b-0jvyeozy27] {
    left: clamp(140px, 10vw, 190px);
    top: clamp(720px, 67vh, 770px);
    animation:
        bfWinEnterActivity-b-0jvyeozy27 .95s cubic-bezier(.22,.82,.33,1) 6s both,
        bfWinTimeline-b-0jvyeozy27 var(--bf-seq-duration) linear 0s both;
}

.win-security[b-0jvyeozy27] {
    right: clamp(140px, 10vw, 190px);
    top: clamp(720px, 67vh, 770px);
    animation:
        bfWinEnterSecurity-b-0jvyeozy27 .95s cubic-bezier(.22,.82,.33,1) 6.6s both,
        bfWinTimeline-b-0jvyeozy27 var(--bf-seq-duration) linear 0s both,
        bfSecurityPulse-b-0jvyeozy27 2.8s ease-in-out 15.2s 1 both;
}

.win-summary[b-0jvyeozy27] {
    left: 50%;
    top: clamp(860px, 80vh, 900px);
    width: min(620px, 42vw);
    min-width: 420px;
    transform: translateX(-50%);
    animation:
        bfWinEnterSummary-b-0jvyeozy27 .9s cubic-bezier(.22,.82,.33,1) 19s both,
        bfSummaryTimeline-b-0jvyeozy27 var(--bf-seq-duration) linear 0s both;
}

@keyframes bfWinTimeline-b-0jvyeozy27 {
    0% { opacity: 0; }
    14% { opacity: 1; }
    51.16% { opacity: 1; transform: scale(1) translate3d(0,0,0); }
    69.76% { opacity: .62; transform: scale(.96) translate3d(0,0,0); }
    83.72% { opacity: .92; transform: scale(1); }
    100% { opacity: 1; }
}

@keyframes bfSummaryTimeline-b-0jvyeozy27 {
    0%, 88% { opacity: 0; }
    95% { opacity: .94; }
    100% { opacity: 1; }
}

@keyframes bfOrbitLinesTimeline-b-0jvyeozy27 {
    0%, 39.53% { opacity: 0; }
    46% { opacity: .38; }
    69.76% { opacity: .28; }
    83.72% { opacity: .45; }
    100% { opacity: .5; }
}

@keyframes bfWinEnterGlobal-b-0jvyeozy27 {
    from { opacity: 0; transform: translate3d(-280px, -180px, 0) scale(.82); filter: blur(7px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes bfWinEnterUsers-b-0jvyeozy27 {
    from { opacity: 0; transform: translate3d(300px, -140px, 0) scale(.82); filter: blur(7px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes bfWinEnterActivity-b-0jvyeozy27 {
    from { opacity: 0; transform: translate3d(-260px, 210px, 0) scale(.82); filter: blur(8px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes bfWinEnterSecurity-b-0jvyeozy27 {
    from { opacity: 0; transform: translate3d(260px, 200px, 0) scale(.82); filter: blur(8px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes bfWinEnterSummary-b-0jvyeozy27 {
    from { opacity: 0; transform: translate3d(-50%, 90px, 0) scale(.86); filter: blur(7px); }
    to   { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); filter: blur(0); }
}

@keyframes bfSecurityPulse-b-0jvyeozy27 {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    25% { box-shadow: 0 0 0 8px rgba(245, 158, 11, .23), 0 0 36px -8px rgba(245, 158, 11, .45); }
    50% { box-shadow: 0 0 0 2px rgba(239, 68, 68, .3), 0 0 48px -10px rgba(239, 68, 68, .5); }
    78% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .2), 0 0 32px -10px rgba(93, 217, 193, .36); }
    100% { box-shadow: 0 0 34px -22px rgba(93, 217, 193, .8); }
}

@media (max-width: 1280px) {
    .bf-orbit-window[b-0jvyeozy27] {
        min-width: 260px;
        width: min(340px, 30vw);
    }

    .win-summary[b-0jvyeozy27] {
        min-width: 320px;
        width: min(480px, 50vw);
    }
}

@media (max-width: 900px) {
    .bf-orbit-layer[b-0jvyeozy27] {
        display: none;
    }
}
/* /Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* ForgotPassword.razor.css — Midnight Abyss design language */

.auth-page-shell[b-nmmrh2znvl] { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#020812; }
.auth-page-shell[b-nmmrh2znvl]::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 20% 30%,rgba(0,229,255,.055) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 70%,rgba(179,136,255,.05) 0%,transparent 60%); pointer-events:none; animation:ambientShift-b-nmmrh2znvl 14s ease-in-out infinite alternate; }
@keyframes ambientShift-b-nmmrh2znvl { 0%{opacity:.7;transform:scale(1)} 100%{opacity:1;transform:scale(1.06)} }

.auth-overlay-card[b-nmmrh2znvl] { position:relative; z-index:2; width:100%; max-width:460px; margin:0 var(--cc-s-4); padding:var(--cc-s-8) var(--cc-s-7) var(--cc-s-7); display:flex; flex-direction:column; gap:var(--cc-s-5); background:radial-gradient(200px 140px at 50% 0%,color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 12%,transparent),transparent 72%),rgba(7,9,20,.82); border:1px solid rgba(255,255,255,.13); border-radius:24px; backdrop-filter:blur(32px) saturate(1.5); -webkit-backdrop-filter:blur(32px) saturate(1.5); box-shadow:0 40px 100px rgba(0,0,0,.70),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.12),0 0 80px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 10%,transparent); animation:cardEnter-b-nmmrh2znvl .65s cubic-bezier(.34,1.48,.64,1) both; }
.auth-overlay-card[b-nmmrh2znvl]::before { content:""; position:absolute; top:0; left:12%; right:12%; height:1px; background:linear-gradient(90deg,transparent,color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 70%,transparent) 35%,color-mix(in oklch,var(--cc-neon-purple,#B388FF) 60%,transparent) 65%,transparent); animation:topLedPulse-b-nmmrh2znvl 4s ease-in-out infinite; }
@keyframes topLedPulse-b-nmmrh2znvl { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes cardEnter-b-nmmrh2znvl { from{opacity:0;transform:translateY(24px) scale(.96)} to{opacity:1;transform:none} }

.brand[b-nmmrh2znvl] { display:flex; flex-direction:column; align-items:center; gap:var(--cc-s-2); margin-bottom:var(--cc-s-1); }
.logo-halo[b-nmmrh2znvl] { position:relative; width:130px; height:130px; display:grid; place-items:center; margin-bottom:var(--cc-s-2); }
.brand .logo[b-nmmrh2znvl] { position:relative; z-index:2; width:114px; height:114px; border-radius:28px; object-fit:cover; background:#020812; box-shadow:0 0 0 1.5px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 40%,transparent),0 0 40px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 30%,transparent),0 18px 50px rgba(0,0,0,.6); }
.logo-ring[b-nmmrh2znvl] { position:absolute; inset:-7px; border-radius:33px; border:1px solid color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 35%,transparent); pointer-events:none; animation:logoRingPulse-b-nmmrh2znvl 3.4s ease-in-out infinite; }
.logo-ring-2[b-nmmrh2znvl] { inset:-16px; border-radius:42px; border-color:color-mix(in oklch,var(--cc-neon-purple,#B388FF) 28%,transparent); animation-delay:1.1s; animation-duration:4s; }
.logo-ring-3[b-nmmrh2znvl] { inset:-27px; border-radius:53px; border-color:color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 14%,transparent); animation-delay:2.2s; animation-duration:5s; }
@keyframes logoRingPulse-b-nmmrh2znvl { 0%,100%{opacity:.28;transform:scale(1)} 50%{opacity:.9;transform:scale(1.035)} }
.brand h1[b-nmmrh2znvl] { font:700 var(--cc-fs-xl)/1.15 var(--cc-font-sans); color:#fff; margin:0; letter-spacing:-.02em; text-shadow:0 0 24px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 22%,transparent); }
.brand .subtitle[b-nmmrh2znvl] { font:600 var(--cc-fs-xs)/1.4 var(--cc-font-mono); color:rgba(255,255,255,.45); margin:0; letter-spacing:.12em; text-transform:uppercase; }

.form-stack[b-nmmrh2znvl] { display:flex; flex-direction:column; gap:var(--cc-s-4); }
.field[b-nmmrh2znvl] { display:flex; flex-direction:column; gap:var(--cc-s-2); }
.label[b-nmmrh2znvl] { font:700 var(--cc-fs-xs)/1.4 var(--cc-font-mono); color:rgba(255,255,255,.60); text-transform:uppercase; letter-spacing:.10em; padding-left:2px; }
.input-wrap[b-nmmrh2znvl] { position:relative; border-radius:999px; padding:1.5px; background:linear-gradient(130deg,color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 28%,transparent),rgba(255,255,255,.08) 45%,color-mix(in oklch,var(--cc-neon-purple,#B388FF) 22%,transparent)); transition:background .25s, box-shadow .25s; }
.input-wrap:focus-within[b-nmmrh2znvl] { background:linear-gradient(130deg,color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 90%,transparent),color-mix(in oklch,#4C8BF5 60%,transparent) 45%,color-mix(in oklch,var(--cc-neon-purple,#B388FF) 80%,transparent)); box-shadow:0 0 0 3px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 14%,transparent),0 8px 28px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 14%,transparent); }
.input-icon[b-nmmrh2znvl] { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.35); display:flex; align-items:center; pointer-events:none; transition:color .2s; z-index:1; }
.input-wrap:focus-within .input-icon[b-nmmrh2znvl] { color:color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 80%,white); }
.input[b-nmmrh2znvl] { width:100%; height:52px; padding:0 var(--cc-s-4) 0 44px; background:rgba(6,8,18,.94); border:0; border-radius:999px; color:#fff; font:500 var(--cc-fs-md)/1.4 var(--cc-font-sans); transition:background .2s; box-sizing:border-box; }
.input[b-nmmrh2znvl]::placeholder { color:rgba(255,255,255,.22); font-weight:400; }
.input:focus-visible[b-nmmrh2znvl] { outline:none; background:rgba(8,11,22,.98); }
.input:disabled[b-nmmrh2znvl] { opacity:.5; cursor:not-allowed; }
.field-error[b-nmmrh2znvl] { padding:4px var(--cc-s-3); color:var(--cc-danger); font:400 var(--cc-fs-sm)/1.4 var(--cc-font-sans); }
.alert[b-nmmrh2znvl] { padding:var(--cc-s-3) var(--cc-s-4); background:color-mix(in oklch,var(--cc-danger) 10%,transparent); border:1px solid color-mix(in oklch,var(--cc-danger) 35%,transparent); border-radius:14px; color:var(--cc-danger); font:400 var(--cc-fs-sm)/1.4 var(--cc-font-sans); }

.action-col[b-nmmrh2znvl] { display:flex; flex-direction:column; gap:var(--cc-s-3); }
.btn-primary[b-nmmrh2znvl] { position:relative; width:100%; height:54px; padding:0 var(--cc-s-6); border:0; border-radius:999px; color:#fff; font:700 var(--cc-fs-md)/1 var(--cc-font-sans); letter-spacing:.02em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--cc-s-2); overflow:hidden; background:linear-gradient(110deg,var(--cc-neon-cyan,#00E5FF) 0%,#4C8BF5 38%,var(--cc-accent,#7B61FF) 60%,var(--cc-neon-purple,#B388FF) 100%); background-size:220% 100%; background-position:0% 0%; box-shadow:0 0 0 1px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 40%,transparent),0 8px 28px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.30); transition:background-position .7s,box-shadow .25s,transform .18s; }
.btn-shine[b-nmmrh2znvl] { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.40) 50%,transparent 70%); transform:translateX(-130%); transition:transform 1s; pointer-events:none; }
.btn-primary:hover:not(:disabled) .btn-shine[b-nmmrh2znvl] { transform:translateX(130%); }
.btn-primary:hover:not(:disabled)[b-nmmrh2znvl] { background-position:100% 0%; transform:translateY(-2px); box-shadow:0 0 0 1px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 60%,transparent),0 16px 48px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.40); outline:none; }
.btn-primary:disabled[b-nmmrh2znvl] { opacity:.60; cursor:wait; }
.btn-icon-left[b-nmmrh2znvl] { flex-shrink:0; opacity:.85; }
.btn-ghost-pw[b-nmmrh2znvl] { width:100%; height:46px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:transparent; color:rgba(255,255,255,.62); font:600 var(--cc-fs-sm)/1 var(--cc-font-sans); cursor:pointer; transition:border-color .2s,color .2s,background .2s; }
.btn-ghost-pw:hover:not(:disabled)[b-nmmrh2znvl] { border-color:color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 50%,transparent); color:#fff; background:color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 7%,transparent); }
.btn-ghost-pw:disabled[b-nmmrh2znvl] { opacity:.45; cursor:not-allowed; }
.spinner[b-nmmrh2znvl] { width:16px; height:16px; border:2.5px solid rgba(255,255,255,.28); border-top-color:#fff; border-radius:50%; animation:spin-b-nmmrh2znvl .7s linear infinite; flex-shrink:0; }
@keyframes spin-b-nmmrh2znvl { to{transform:rotate(360deg)} }

.success-block[b-nmmrh2znvl] { display:flex; flex-direction:column; align-items:center; gap:var(--cc-s-4); text-align:center; padding:var(--cc-s-3) 0; }
.success-icon[b-nmmrh2znvl] { width:64px; height:64px; border-radius:50%; background:color-mix(in oklch,var(--cc-success,#3DDC97) 15%,transparent); border:1px solid color-mix(in oklch,var(--cc-success,#3DDC97) 45%,transparent); display:grid; place-items:center; color:var(--cc-success,#3DDC97); box-shadow:0 0 32px color-mix(in oklch,var(--cc-success,#3DDC97) 28%,transparent); animation:successPop-b-nmmrh2znvl .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes successPop-b-nmmrh2znvl { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }
.success-block p[b-nmmrh2znvl] { color:rgba(255,255,255,.65); font:500 var(--cc-fs-sm)/1.5 var(--cc-font-sans); margin:0; }
.hint-small[b-nmmrh2znvl] { font-size:var(--cc-fs-xs)!important; color:rgba(255,255,255,.35)!important; }

.auth-classify[b-nmmrh2znvl] { position:fixed; bottom:0; left:0; right:0; z-index:3; padding:8px 0; text-align:center; font:500 .52rem/1 var(--cc-font-mono); letter-spacing:.18em; color:rgba(255,255,255,.16); pointer-events:none; background:linear-gradient(transparent,rgba(2,8,18,.4)); }
/* /Pages/Auth/Login.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Login — "Midnight Abyss" Neon / LED / Glow Design System
   ═══════════════════════════════════════════════════════════════ */

/* ── Full-viewport Shell ────────────────────────────────────── */
.auth-page-shell[b-s8coq1qiwv] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #020812;
}

/* ── Ambient background particles (CSS-only) ─────────────────── */
.auth-page-shell[b-s8coq1qiwv]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(0,229,255,.055) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(179,136,255,.05) 0%, transparent 60%),
        radial-gradient(ellipse 40% 35% at 50% 100%, rgba(0,229,255,.035) 0%, transparent 55%);
    pointer-events: none;
    animation: ambientShift-b-s8coq1qiwv 14s ease-in-out infinite alternate;
}

@keyframes ambientShift-b-s8coq1qiwv {
    0%   { opacity: .7; transform: scale(1); }
    100% { opacity: 1;  transform: scale(1.06); }
}

/* ── Glassmorphism-Card ──────────────────────────────────────── */
.auth-overlay-card[b-s8coq1qiwv] {
    position: relative;
    z-index: 2;
    isolation: isolate;
    width: 100%;
    max-width: 720px;
    min-height: min(680px, calc(100dvh - 48px));
    margin: 0 var(--cc-s-4);
    padding: var(--cc-s-8) var(--cc-s-8) var(--cc-s-7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--cc-s-5);
    background:
        radial-gradient(200px 140px at 50% 0%, color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 12%, transparent), transparent 72%),
        rgba(7, 9, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50px;
    backdrop-filter: blur(32px) saturate(1.5);
    -webkit-backdrop-filter: blur(32px) saturate(1.5);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.70),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 80px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 10%, transparent),
        0 0 140px color-mix(in oklch, var(--cc-neon-purple, #B388FF) 6%, transparent);
    animation: cardEnter-b-s8coq1qiwv .65s cubic-bezier(.34, 1.48, .64, 1) both;
    transition:
        opacity .35s var(--cc-ease, ease),
        transform .35s var(--cc-ease, ease),
        filter .35s ease,
        box-shadow .35s ease;
}

/* Top edge LED line */
.auth-overlay-card[b-s8coq1qiwv]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 70%, transparent) 35%,
        color-mix(in oklch, var(--cc-neon-purple, #B388FF) 60%, transparent) 65%,
        transparent);
    border-radius: 0 0 50% 50%;
    animation: topLedPulse-b-s8coq1qiwv 4s ease-in-out infinite;
}

.auth-overlay-card[b-s8coq1qiwv]::after {
    content: "";
    position: absolute;
    inset: -42px;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 62% 50% at 22% 20%, rgba(0, 229, 255, .42), transparent 72%),
        radial-gradient(ellipse 58% 44% at 82% 72%, rgba(179, 136, 255, .34), transparent 70%),
        radial-gradient(ellipse 46% 36% at 50% 105%, rgba(76, 139, 245, .28), transparent 72%);
    filter: blur(28px);
    opacity: 0;
    pointer-events: none;
    transform: scale(.98);
    transition: opacity .28s ease, transform .28s ease;
}

.auth-overlay-card:hover[b-s8coq1qiwv],
.auth-overlay-card:focus-within[b-s8coq1qiwv] {
    box-shadow:
        0 42px 110px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 110px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 18%, transparent),
        0 0 180px color-mix(in oklch, var(--cc-neon-purple, #B388FF) 12%, transparent);
}

.auth-overlay-card:hover[b-s8coq1qiwv]::after,
.auth-overlay-card:focus-within[b-s8coq1qiwv]::after {
    opacity: 1;
    transform: scale(1);
}

@keyframes topLedPulse-b-s8coq1qiwv {
    0%, 100% { opacity: .5; }
    50%       { opacity: 1; }
}

/* Card hidden when iris animation plays */
.auth-overlay-card.card-hidden[b-s8coq1qiwv] {
    opacity: 0;
    transform: scale(.96);
    filter: blur(6px);
    pointer-events: none;
}

@keyframes cardEnter-b-s8coq1qiwv {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ── Brand ──────────────────────────────────────────────────── */
.brand[b-s8coq1qiwv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cc-s-2);
    margin-bottom: var(--cc-s-1);
}

/* Logo Halo Container */
.logo-halo[b-s8coq1qiwv] {
    position: relative;
    width: 168px;
    height: 168px;
    display: grid;
    place-items: center;
    margin-bottom: var(--cc-s-2);
}

/* Logo itself — 4x size vs the old 46px */
.brand .logo[b-s8coq1qiwv] {
    position: relative;
    z-index: 2;
    width: 148px;
    height: 148px;
    border-radius: 34px;
    object-fit: cover;
    background: #020812;
    box-shadow:
        0 0 0 1.5px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 40%, transparent),
        0 0 44px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 32%, transparent),
        0 0 80px color-mix(in oklch, var(--cc-neon-purple, #B388FF) 18%, transparent),
        0 24px 60px rgba(0, 0, 0, .65);
}

/* Animated rings */
.logo-ring[b-s8coq1qiwv] {
    position: absolute;
    inset: -8px;
    border-radius: 40px;
    border: 1px solid color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 35%, transparent);
    pointer-events: none;
    animation: logoRingPulse-b-s8coq1qiwv 3.4s ease-in-out infinite;
}

.logo-ring-2[b-s8coq1qiwv] {
    inset: -18px;
    border-radius: 48px;
    border-color: color-mix(in oklch, var(--cc-neon-purple, #B388FF) 28%, transparent);
    animation-delay: 1.1s;
    animation-duration: 4s;
}

.logo-ring-3[b-s8coq1qiwv] {
    inset: -30px;
    border-radius: 58px;
    border-color: color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 14%, transparent);
    animation-delay: 2.2s;
    animation-duration: 5s;
}

@keyframes logoRingPulse-b-s8coq1qiwv {
    0%, 100% { opacity: .28; transform: scale(1); }
    50%       { opacity: .9;  transform: scale(1.035); }
}

.brand h1[b-s8coq1qiwv] {
    font: 700 var(--cc-fs-xl)/1.15 var(--cc-font-sans);
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
    text-shadow:
        0 0 24px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 22%, transparent),
        0 0 60px color-mix(in oklch, var(--cc-neon-purple, #B388FF) 12%, transparent);
}

.brand .subtitle[b-s8coq1qiwv] {
    font: 600 var(--cc-fs-xs)/1.4 var(--cc-font-mono);
    color: rgba(255, 255, 255, .45);
    margin: 0;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── Form ───────────────────────────────────────────────────── */
.form[b-s8coq1qiwv] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
    width: 100%;
}

.field[b-s8coq1qiwv] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
    padding-inline: clamp(34px, 12vw, 100px);
}

.label[b-s8coq1qiwv] {
    font: 700 var(--cc-fs-xs)/1.4 var(--cc-font-mono);
    color: rgba(255, 255, 255, .60);
    text-transform: uppercase;
    letter-spacing: .10em;
    padding-left: 0;
    text-align: center;
}

/* Gradient border wrapper */
.input-wrap[b-s8coq1qiwv] {
    position: relative;
    border-radius: 999px;   /* ← fully round */
    padding: 1.5px;
    background: linear-gradient(130deg,
        color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 28%, transparent),
        rgba(255,255,255,.08) 45%,
        color-mix(in oklch, var(--cc-neon-purple, #B388FF) 22%, transparent));
    transition: background .25s ease, box-shadow .25s ease;
    /* Breite = 2× Logo (148 px), zentriert */
    width: 296px;
    margin-inline: auto;
}

.input-wrap:focus-within[b-s8coq1qiwv] {
    background: linear-gradient(130deg,
        color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 90%, transparent),
        color-mix(in oklch, #4C8BF5 60%, transparent) 45%,
        color-mix(in oklch, var(--cc-neon-purple, #B388FF) 80%, transparent));
    box-shadow:
        0 0 0 3px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 14%, transparent),
        0 8px 28px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 14%, transparent),
        0 0 20px color-mix(in oklch, var(--cc-neon-purple, #B388FF) 10%, transparent);
}

/* Icon prefix */
.input-icon[b-s8coq1qiwv] {
    position: absolute;
    left: auto;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    pointer-events: none;
    transition: color .2s ease;
    z-index: 1;
}

.input-wrap:focus-within .input-icon[b-s8coq1qiwv] {
    color: color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 80%, white);
}

.input[b-s8coq1qiwv] {
    width: 100%;
    height: 52px;
    padding: 0 92px 0 28px;
    background: rgba(6, 8, 18, .94);
    border: 0;
    border-radius: 999px;  /* ← fully round inner */
    color: #fff;
    font: 500 var(--cc-fs-md)/1.4 var(--cc-font-sans);
    transition: background .2s ease;
    box-sizing: border-box;
}

.input[b-s8coq1qiwv]::placeholder {
    color: rgba(255, 255, 255, .22);
    font-weight: 400;
}

.input:focus-visible[b-s8coq1qiwv] {
    outline: none;
    background: rgba(8, 11, 22, .98);
}

.input.input-error[b-s8coq1qiwv] {
    box-shadow: inset 0 0 0 1px var(--cc-danger);
}

.input:disabled[b-s8coq1qiwv] { opacity: .5; cursor: not-allowed; }

.field-error[b-s8coq1qiwv] {
    padding: 4px var(--cc-s-3);
    border-radius: var(--cc-r-md);
    color: var(--cc-danger);
    font: 400 var(--cc-fs-sm)/1.4 var(--cc-font-sans);
}

.alert[b-s8coq1qiwv] {
    padding: var(--cc-s-3) var(--cc-s-4);
    background: color-mix(in oklch, var(--cc-danger) 10%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-danger) 35%, transparent);
    border-radius: 14px;
    color: var(--cc-danger);
    font: 400 var(--cc-fs-sm)/1.4 var(--cc-font-sans);
}

/* ── Action Column ───────────────────────────────────────────── */
.action-col[b-s8coq1qiwv] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
    margin-top: var(--cc-s-1);
}

/* Primary — full-width neon gradient + shimmer */
.btn-primary[b-s8coq1qiwv] {
    position: relative;
    width: 100%;
    height: 54px;
    padding: 0 var(--cc-s-6);
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: 700 var(--cc-fs-md)/1 var(--cc-font-sans);
    letter-spacing: .02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cc-s-2);
    overflow: hidden;
    background: linear-gradient(110deg,
        var(--cc-neon-cyan, #00E5FF) 0%,
        #4C8BF5 38%,
        var(--cc-accent, #7B61FF) 60%,
        var(--cc-neon-purple, #B388FF) 100%);
    background-size: 220% 100%;
    background-position: 0% 0%;
    box-shadow:
        0 0 0 1px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 40%, transparent),
        0 8px 28px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 30%, transparent),
        0 0 50px color-mix(in oklch, var(--cc-neon-purple, #B388FF) 20%, transparent),
        inset 0 1px 0 rgba(255,255,255,.30);
    transition:
        background-position .7s ease,
        box-shadow .25s ease,
        transform .18s ease;
}

/* Shimmer sweep */
.btn-shine[b-s8coq1qiwv] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(255,255,255,.40) 50%,
        transparent 70%);
    transform: translateX(-130%);
    transition: transform 1s ease;
    pointer-events: none;
}

.btn-primary:hover:not(:disabled) .btn-shine[b-s8coq1qiwv],
.btn-primary:focus-visible:not(:disabled) .btn-shine[b-s8coq1qiwv] {
    transform: translateX(130%);
}

.btn-primary:hover:not(:disabled)[b-s8coq1qiwv],
.btn-primary:focus-visible:not(:disabled)[b-s8coq1qiwv] {
    background-position: 100% 0%;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 60%, transparent),
        0 16px 48px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 42%, transparent),
        0 0 80px color-mix(in oklch, var(--cc-neon-purple, #B388FF) 32%, transparent),
        inset 0 1px 0 rgba(255,255,255,.40);
    outline: none;
}

.btn-primary:active:not(:disabled)[b-s8coq1qiwv] { transform: translateY(0px); }

.btn-primary:disabled[b-s8coq1qiwv] { opacity: .60; cursor: wait; }

.login-submit[b-s8coq1qiwv] {
    --login-run: clamp(96px, 22vw, 238px);
    width: 250px;
    align-self: center;
    justify-content: center;
}

.login-submit:disabled[b-s8coq1qiwv] {
    opacity: 1;
}

.btn-travel-label[b-s8coq1qiwv] {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    transition: transform 1.15s cubic-bezier(.18, .86, .16, 1);
    will-change: transform, opacity;
}

.btn-door-arrow[b-s8coq1qiwv] {
    flex-shrink: 0;
    opacity: .92;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .28));
}

.login-submit:hover:not(:disabled) .btn-travel-label[b-s8coq1qiwv],
.login-submit:focus-visible:not(:disabled) .btn-travel-label[b-s8coq1qiwv] {
    transform: translate(-50%, -50%) translateX(calc(var(--login-run) * .62));
}

.login-submit.is-busy .btn-travel-label[b-s8coq1qiwv] {
    animation: loginLabelFlight-b-s8coq1qiwv 2s cubic-bezier(.2, .95, .14, 1) both;
}

@keyframes loginLabelFlight-b-s8coq1qiwv {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    16% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(var(--login-run));
    }
    17% {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(var(--login-run));
    }
    22% {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(calc(var(--login-run) * -1));
    }
    28% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(calc(var(--login-run) * -1));
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(calc(var(--login-run) * .76));
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(var(--login-run));
    }
}

/* Password-reset ghost button */
.btn-ghost-pw[b-s8coq1qiwv] {
    width: 250px;
    align-self: center;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,.62);
    font: 600 var(--cc-fs-sm)/1 var(--cc-font-sans);
    cursor: pointer;
    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.btn-ghost-pw:hover:not(:disabled)[b-s8coq1qiwv],
.btn-ghost-pw:focus-visible:not(:disabled)[b-s8coq1qiwv] {
    border-color: color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 50%, transparent);
    color: #fff;
    background: color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 7%, transparent);
    box-shadow: 0 0 16px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 12%, transparent);
    outline: none;
}

.btn-ghost-pw:disabled[b-s8coq1qiwv] { opacity: .45; cursor: not-allowed; }

/* ── Spinner ─────────────────────────────────────────────────── */
.spinner[b-s8coq1qiwv] {
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255,255,255,.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-s8coq1qiwv .7s linear infinite;
    flex-shrink: 0;
}

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

/* ── Hint line ───────────────────────────────────────────────── */
.hint[b-s8coq1qiwv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font: 400 var(--cc-fs-xs)/1.5 var(--cc-font-sans);
    color: rgba(255, 255, 255, .22);
    margin: 0;
}

.hint svg[b-s8coq1qiwv] { flex-shrink: 0; opacity: .55; }

/* ── Success state (ForgotPassword reuse) ────────────────────── */
.success[b-s8coq1qiwv] {
    padding: var(--cc-s-3) var(--cc-s-4);
    background: color-mix(in oklch, var(--cc-success, #3DDC97) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-success, #3DDC97) 40%, transparent);
    border-radius: 14px;
    color: var(--cc-success, #3DDC97);
    font: 500 var(--cc-fs-sm)/1.5 var(--cc-font-sans);
}

/* ── Classify bar ────────────────────────────────────────────── */
.auth-classify[b-s8coq1qiwv] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 8px 0;
    text-align: center;
    font: 500 .52rem/1 var(--cc-font-mono);
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .16);
    pointer-events: none;
    background: linear-gradient(transparent, rgba(2,8,18,.4));
}

/* ── OAuth CSS dead-code (kept for backend reference) ────────── */
.auth-divider[b-s8coq1qiwv], .oauth-provider-grid[b-s8coq1qiwv], .oauth-provider-button[b-s8coq1qiwv],
.oauth-modal-backdrop[b-s8coq1qiwv], .oauth-modal[b-s8coq1qiwv], .btn-secondary-inline[b-s8coq1qiwv] { display: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 500px) {
    .auth-overlay-card[b-s8coq1qiwv] {
        padding: var(--cc-s-6) var(--cc-s-5) var(--cc-s-6);
        border-radius: 34px;
        min-height: auto;
    }

    .field[b-s8coq1qiwv] {
        padding-inline: 18px;
    }

    .input-wrap[b-s8coq1qiwv] {
        width: min(232px, 100%); /* 2× mobiles Logo (116 px) */
    }

    .input-icon[b-s8coq1qiwv] {
        right: 28px;
    }

    .input[b-s8coq1qiwv] {
        padding-right: 66px;
        padding-left: 24px;
    }

    .login-submit[b-s8coq1qiwv] {
        --login-run: 104px;
        width: min(250px, 100%);
    }

    .btn-ghost-pw[b-s8coq1qiwv] {
        width: min(250px, 100%);
    }

    .logo-halo[b-s8coq1qiwv] { width: 130px; height: 130px; }
    .brand .logo[b-s8coq1qiwv] { width: 116px; height: 116px; border-radius: 28px; }
    .logo-ring[b-s8coq1qiwv] { inset: -6px; border-radius: 33px; }
    .logo-ring-2[b-s8coq1qiwv] { inset: -14px; border-radius: 40px; }
    .logo-ring-3[b-s8coq1qiwv] { inset: -24px; border-radius: 50px; }
}

/* /Pages/Auth/MfaSetup.razor.rz.scp.css */
.brand .logo[b-ovpp4glvwa] {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
    background: #020812;
    box-shadow: 0 0 24px color-mix(in oklch, var(--cc-accent) 38%, transparent);
}
/* /Pages/Auth/ResetPassword.razor.rz.scp.css */
.reset-shell[b-3i1d778fk6] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: var(--cc-s-8) var(--cc-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-6);
}

.brand[b-3i1d778fk6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cc-s-2);
}

.brand .logo[b-3i1d778fk6] {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
    background: #020812;
}

.brand h1[b-3i1d778fk6] {
    font: 600 var(--cc-fs-lg)/1.2 var(--cc-font-sans);
    color: var(--cc-fg);
    margin: 0;
}

.brand .subtitle[b-3i1d778fk6] {
    font: 400 var(--cc-fs-sm)/1.4 var(--cc-font-sans);
    color: var(--cc-fg-muted);
    margin: 0;
    text-align: center;
}

.form[b-3i1d778fk6] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
}

.success[b-3i1d778fk6] {
    padding: var(--cc-s-3) var(--cc-s-4);
    background: color-mix(in srgb, var(--cc-success) 12%, var(--cc-bg-card));
    border: 1px solid color-mix(in srgb, var(--cc-success) 30%, transparent);
    border-radius: var(--cc-r-md);
    color: var(--cc-success);
    font: 400 var(--cc-fs-sm)/1.4 var(--cc-font-sans);
}
/* /Pages/Auth/TOTP.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   TOTP — "Midnight Abyss" Neon / LED / Glow Design System
   Konsistent zu Login.razor.css
   ═══════════════════════════════════════════════════════════════ */

.auth-page-shell[b-tks2cx18ca] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #020812;
}

.auth-page-shell[b-tks2cx18ca]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(0,229,255,.055) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(179,136,255,.05) 0%, transparent 60%);
    pointer-events: none;
    animation: ambientShift-b-tks2cx18ca 14s ease-in-out infinite alternate;
}

@keyframes ambientShift-b-tks2cx18ca {
    0%   { opacity: .7; transform: scale(1); }
    100% { opacity: 1;  transform: scale(1.06); }
}

/* ── Card ─────────────────────────────────────────────────────── */
.auth-overlay-card[b-tks2cx18ca] {
    position: relative;
    z-index: 2;
    isolation: isolate;
    width: 100%;
    max-width: 680px;
    min-height: min(600px, calc(100dvh - 48px));
    margin: 0 var(--cc-s-4);
    padding: var(--cc-s-8) 30px var(--cc-s-7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--cc-s-5);
    background:
        radial-gradient(200px 140px at 50% 0%, color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 12%, transparent), transparent 72%),
        rgba(7, 9, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50px;
    backdrop-filter: blur(32px) saturate(1.5);
    -webkit-backdrop-filter: blur(32px) saturate(1.5);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.70),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 80px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 10%, transparent);
    animation: cardEnter-b-tks2cx18ca .65s cubic-bezier(.34, 1.48, .64, 1) both;
    transition: opacity .35s ease, transform .35s ease, filter .35s ease, box-shadow .35s ease;
}

.auth-overlay-card[b-tks2cx18ca]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 70%, transparent) 35%,
        color-mix(in oklch, var(--cc-neon-purple, #B388FF) 60%, transparent) 65%,
        transparent);
    animation: topLedPulse-b-tks2cx18ca 4s ease-in-out infinite;
}

.auth-overlay-card[b-tks2cx18ca]::after {
    content: "";
    position: absolute;
    inset: -42px;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 62% 50% at 22% 20%, rgba(0, 229, 255, .42), transparent 72%),
        radial-gradient(ellipse 58% 44% at 82% 72%, rgba(179, 136, 255, .34), transparent 70%),
        radial-gradient(ellipse 46% 36% at 50% 105%, rgba(76, 139, 245, .28), transparent 72%);
    filter: blur(28px);
    opacity: 0;
    pointer-events: none;
    transform: scale(.98);
    transition: opacity .28s ease, transform .28s ease;
}

.auth-overlay-card:hover[b-tks2cx18ca],
.auth-overlay-card:focus-within[b-tks2cx18ca] {
    box-shadow:
        0 42px 110px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 110px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 18%, transparent),
        0 0 180px color-mix(in oklch, var(--cc-neon-purple, #B388FF) 12%, transparent);
}

.auth-overlay-card:hover[b-tks2cx18ca]::after,
.auth-overlay-card:focus-within[b-tks2cx18ca]::after {
    opacity: 1;
    transform: scale(1);
}

@keyframes topLedPulse-b-tks2cx18ca {
    0%, 100% { opacity: .5; }
    50%       { opacity: 1; }
}

.auth-overlay-card.card-hidden[b-tks2cx18ca] {
    opacity: 0;
    transform: scale(.96);
    filter: blur(6px);
    pointer-events: none;
}

@keyframes cardEnter-b-tks2cx18ca {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ── Brand ──────────────────────────────────────────────────── */
.brand[b-tks2cx18ca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cc-s-2);
    margin-bottom: var(--cc-s-1);
}

.logo-halo[b-tks2cx18ca] {
    position: relative;
    width: 168px;
    height: 168px;
    display: grid;
    place-items: center;
    margin-bottom: var(--cc-s-2);
}

.brand .logo[b-tks2cx18ca] {
    position: relative;
    z-index: 2;
    width: 148px;
    height: 148px;
    border-radius: 34px;
    object-fit: cover;
    background: #020812;
    box-shadow:
        0 0 0 1.5px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 40%, transparent),
        0 0 44px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 32%, transparent),
        0 0 80px color-mix(in oklch, var(--cc-neon-purple, #B388FF) 18%, transparent),
        0 24px 60px rgba(0, 0, 0, .65);
}

.logo-ring[b-tks2cx18ca] {
    position: absolute;
    inset: -8px;
    border-radius: 40px;
    border: 1px solid color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 35%, transparent);
    pointer-events: none;
    animation: logoRingPulse-b-tks2cx18ca 3.4s ease-in-out infinite;
}

.logo-ring-2[b-tks2cx18ca] {
    inset: -18px;
    border-radius: 48px;
    border-color: color-mix(in oklch, var(--cc-neon-purple, #B388FF) 28%, transparent);
    animation-delay: 1.1s;
    animation-duration: 4s;
}

.logo-ring-3[b-tks2cx18ca] {
    inset: -30px;
    border-radius: 58px;
    border-color: color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 14%, transparent);
    animation-delay: 2.2s;
    animation-duration: 5s;
}

@keyframes logoRingPulse-b-tks2cx18ca {
    0%, 100% { opacity: .28; transform: scale(1); }
    50%       { opacity: .9;  transform: scale(1.035); }
}

.brand h1[b-tks2cx18ca] {
    font: 700 var(--cc-fs-xl)/1.15 var(--cc-font-sans);
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
    text-shadow: 0 0 24px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 22%, transparent);
}

.brand .subtitle[b-tks2cx18ca] {
    font: 600 var(--cc-fs-xs)/1.5 var(--cc-font-mono);
    color: rgba(255, 255, 255, .45);
    margin: 0;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
}

/* ── TOTP Digit Grid ────────────────────────────────────────── */
.code-row[b-tks2cx18ca] {
    display: grid;
    grid-template-columns: repeat(6, 78px);
    justify-content: center;
    gap: 12px;
    max-width: 100%;
    padding: 30px 30px 0;
    box-sizing: border-box;
}

.digit[b-tks2cx18ca] {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: rgba(6, 8, 18, .92);
    border: 1.5px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    color: #fff;
    font: 700 var(--cc-fs-xl)/1 var(--cc-font-mono);
    text-align: center;
    transition:
        border-color .2s ease,
        box-shadow   .2s ease,
        background   .2s ease;
}

.digit:focus-visible[b-tks2cx18ca],
.digit:focus[b-tks2cx18ca] {
    outline: none;
    border-color: color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 80%, transparent);
    background: rgba(0, 229, 255, .06);
    box-shadow:
        0 0 0 3px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 18%, transparent),
        0 0 18px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 20%, transparent);
}

.digit-error[b-tks2cx18ca] {
    border-color: var(--cc-danger) !important;
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--cc-danger) 22%, transparent);
    animation: shake-b-tks2cx18ca .38s ease;
}

@keyframes shake-b-tks2cx18ca {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-5px); }
    40%     { transform: translateX(5px); }
    60%     { transform: translateX(-3px); }
    80%     { transform: translateX(3px); }
}

.digit:disabled[b-tks2cx18ca] { opacity: .45; cursor: not-allowed; }

/* ── Alert ──────────────────────────────────────────────────── */
.alert[b-tks2cx18ca] {
    padding: var(--cc-s-3) var(--cc-s-4);
    background: color-mix(in oklch, var(--cc-danger) 10%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-danger) 35%, transparent);
    border-radius: 14px;
    color: var(--cc-danger);
    font: 400 var(--cc-fs-sm)/1.4 var(--cc-font-sans);
}

/* ── Meta row ───────────────────────────────────────────────── */
.meta[b-tks2cx18ca] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 0 30px 30px;
    font: 500 var(--cc-fs-xs)/1.4 var(--cc-font-mono);
    color: rgba(255, 255, 255, .30);
    letter-spacing: .06em;
    box-sizing: border-box;
}

.meta span[b-tks2cx18ca] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.link[b-tks2cx18ca] {
    background: none;
    border: 0;
    padding: 8px 10px;
    border-radius: 999px;
    color: color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 75%, white);
    cursor: pointer;
    font: 600 var(--cc-fs-xs)/1 var(--cc-font-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .2s ease, text-shadow .2s ease;
}

.link:hover:not(:disabled)[b-tks2cx18ca] {
    color: #fff;
    text-shadow: 0 0 12px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 60%, transparent);
}

.link:disabled[b-tks2cx18ca] { opacity: .4; cursor: not-allowed; }

/* ── Classify bar ────────────────────────────────────────────── */
.auth-classify[b-tks2cx18ca] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 8px 0;
    text-align: center;
    font: 500 .52rem/1 var(--cc-font-mono);
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .16);
    pointer-events: none;
    background: linear-gradient(transparent, rgba(2,8,18,.4));
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 500px) {
    .auth-overlay-card[b-tks2cx18ca] {
        padding: var(--cc-s-6) 18px;
        border-radius: 34px;
        min-height: auto;
    }
    .logo-halo[b-tks2cx18ca] { width: 130px; height: 130px; }
    .brand .logo[b-tks2cx18ca] { width: 116px; height: 116px; border-radius: 28px; }
    .logo-ring[b-tks2cx18ca] { inset: -6px; border-radius: 33px; }
    .logo-ring-2[b-tks2cx18ca] { inset: -14px; border-radius: 40px; }
    .logo-ring-3[b-tks2cx18ca] { inset: -24px; border-radius: 50px; }
    .code-row[b-tks2cx18ca] {
        grid-template-columns: repeat(6, clamp(42px, 12vw, 78px));
        gap: clamp(6px, 1.5vw, 12px);
        padding: 24px 12px 0;
    }

    .digit[b-tks2cx18ca] { border-radius: 12px; }

    .meta[b-tks2cx18ca] {
        padding: 0 12px 24px;
        align-items: flex-start;
    }
}

/* /Pages/Auth/UpdatePassword.razor.rz.scp.css */
/* UpdatePassword.razor.css — inherits the Midnight Abyss design language */

/* Shell & card — identical to Login/TOTP */
.auth-page-shell[b-e77kye3s9i] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #020812;
}

.auth-page-shell[b-e77kye3s9i]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(0,229,255,.055) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(179,136,255,.05) 0%, transparent 60%);
    pointer-events: none;
    animation: ambientShift-b-e77kye3s9i 14s ease-in-out infinite alternate;
}
@keyframes ambientShift-b-e77kye3s9i { 0% { opacity:.7; transform:scale(1); } 100% { opacity:1; transform:scale(1.06); } }

.auth-overlay-card[b-e77kye3s9i] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    margin: 0 var(--cc-s-4);
    padding: var(--cc-s-7) var(--cc-s-7) var(--cc-s-7);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-5);
    background:
        radial-gradient(200px 140px at 50% 0%, color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 12%, transparent), transparent 72%),
        rgba(7, 9, 20, 0.82);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 24px;
    backdrop-filter: blur(32px) saturate(1.5);
    -webkit-backdrop-filter: blur(32px) saturate(1.5);
    box-shadow:
        0 40px 100px rgba(0,0,0,.70),
        0 0 0 1px rgba(255,255,255,.05),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 80px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 10%, transparent);
    animation: cardEnter-b-e77kye3s9i .65s cubic-bezier(.34,1.48,.64,1) both;
    transition: opacity .35s ease, transform .35s ease;
    overflow-y: auto;
    max-height: 96dvh;
}

.auth-overlay-card[b-e77kye3s9i]::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--cc-neon-cyan,#00E5FF) 70%, transparent) 35%, color-mix(in oklch, var(--cc-neon-purple,#B388FF) 60%, transparent) 65%, transparent);
    animation: topLedPulse-b-e77kye3s9i 4s ease-in-out infinite;
}
@keyframes topLedPulse-b-e77kye3s9i { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@keyframes cardEnter-b-e77kye3s9i { from { opacity:0; transform:translateY(24px) scale(.96); } to { opacity:1; transform:none; } }

/* ── Brand */
.brand[b-e77kye3s9i] { display:flex; flex-direction:column; align-items:center; gap:var(--cc-s-2); margin-bottom:var(--cc-s-1); }
.logo-halo[b-e77kye3s9i] { position:relative; width:130px; height:130px; display:grid; place-items:center; margin-bottom:var(--cc-s-2); }
.brand .logo[b-e77kye3s9i] { position:relative; z-index:2; width:114px; height:114px; border-radius:28px; object-fit:cover; background:#020812; box-shadow: 0 0 0 1.5px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 40%,transparent), 0 0 40px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 30%,transparent), 0 18px 50px rgba(0,0,0,.6); }
.logo-ring[b-e77kye3s9i] { position:absolute; inset:-7px; border-radius:33px; border:1px solid color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 35%,transparent); pointer-events:none; animation:logoRingPulse-b-e77kye3s9i 3.4s ease-in-out infinite; }
.logo-ring-2[b-e77kye3s9i] { inset:-16px; border-radius:42px; border-color:color-mix(in oklch,var(--cc-neon-purple,#B388FF) 28%,transparent); animation-delay:1.1s; animation-duration:4s; }
.logo-ring-3[b-e77kye3s9i] { inset:-27px; border-radius:53px; border-color:color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 14%,transparent); animation-delay:2.2s; animation-duration:5s; }
@keyframes logoRingPulse-b-e77kye3s9i { 0%,100% { opacity:.28; transform:scale(1); } 50% { opacity:.9; transform:scale(1.035); } }

.brand h1[b-e77kye3s9i] { font:700 var(--cc-fs-xl)/1.15 var(--cc-font-sans); color:#fff; margin:0; letter-spacing:-.02em; text-shadow:0 0 24px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 22%,transparent); }
.brand .subtitle[b-e77kye3s9i] { font:600 var(--cc-fs-xs)/1.4 var(--cc-font-mono); color:rgba(255,255,255,.45); margin:0; letter-spacing:.12em; text-transform:uppercase; text-align:center; }

/* ── Form stack */
.form-stack[b-e77kye3s9i] { display:flex; flex-direction:column; gap:var(--cc-s-4); width:100%; }
.field[b-e77kye3s9i] { display:flex; flex-direction:column; gap:var(--cc-s-2); }
.label[b-e77kye3s9i] { font:700 var(--cc-fs-xs)/1.4 var(--cc-font-mono); color:rgba(255,255,255,.60); text-transform:uppercase; letter-spacing:.10em; padding-left:2px; }

.input-wrap[b-e77kye3s9i] { position:relative; border-radius:999px; padding:1.5px; background:linear-gradient(130deg, color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 28%,transparent), rgba(255,255,255,.08) 45%, color-mix(in oklch,var(--cc-neon-purple,#B388FF) 22%,transparent)); transition:background .25s ease, box-shadow .25s ease; }
.input-wrap:focus-within[b-e77kye3s9i] { background:linear-gradient(130deg, color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 90%,transparent), color-mix(in oklch,#4C8BF5 60%,transparent) 45%, color-mix(in oklch,var(--cc-neon-purple,#B388FF) 80%,transparent)); box-shadow:0 0 0 3px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 14%,transparent), 0 8px 28px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 14%,transparent); }

.input-icon[b-e77kye3s9i] { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.35); display:flex; align-items:center; pointer-events:none; transition:color .2s; z-index:1; }
.input-wrap:focus-within .input-icon[b-e77kye3s9i] { color:color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 80%,white); }

.input[b-e77kye3s9i] { width:100%; height:52px; padding:0 var(--cc-s-4) 0 44px; background:rgba(6,8,18,.94); border:0; border-radius:999px; color:#fff; font:500 var(--cc-fs-md)/1.4 var(--cc-font-sans); transition:background .2s; box-sizing:border-box; }
.input[b-e77kye3s9i]::placeholder { color:rgba(255,255,255,.22); font-weight:400; }
.input:focus-visible[b-e77kye3s9i] { outline:none; background:rgba(8,11,22,.98); }
.input.input-error[b-e77kye3s9i] { box-shadow:inset 0 0 0 1px var(--cc-danger); }
.input:disabled[b-e77kye3s9i] { opacity:.5; cursor:not-allowed; }

.field-error[b-e77kye3s9i] { padding:4px var(--cc-s-3); color:var(--cc-danger); font:400 var(--cc-fs-sm)/1.4 var(--cc-font-sans); }

/* Password strength */
.strength-row[b-e77kye3s9i] { display:flex; align-items:center; gap:var(--cc-s-2); margin-top:4px; padding:0 4px; }
.strength-bar[b-e77kye3s9i] { height:3px; flex:1; border-radius:99px; background:rgba(255,255,255,.10); transition:background .3s ease; }
.bar-weak[b-e77kye3s9i]    { background:var(--cc-danger); box-shadow:0 0 6px var(--cc-danger); }
.bar-medium[b-e77kye3s9i]  { background:#f59e0b; box-shadow:0 0 6px #f59e0b; }
.bar-strong[b-e77kye3s9i]  { background:#22d3ee; box-shadow:0 0 6px #22d3ee; }
.bar-vstrong[b-e77kye3s9i] { background:var(--cc-success,#3DDC97); box-shadow:0 0 8px var(--cc-success,#3DDC97); }
.strength-label[b-e77kye3s9i] { font:600 var(--cc-fs-xs)/1 var(--cc-font-mono); color:rgba(255,255,255,.45); letter-spacing:.06em; min-width:56px; }

/* TOTP section */
.totp-section[b-e77kye3s9i] { display:flex; flex-direction:column; gap:var(--cc-s-3); }
.totp-label[b-e77kye3s9i] { display:flex; align-items:center; gap:6px; font:700 var(--cc-fs-xs)/1.4 var(--cc-font-mono); color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.10em; margin:0; padding-left:2px; }

.code-row[b-e77kye3s9i] { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--cc-s-2); }
.digit[b-e77kye3s9i] { aspect-ratio:1/1; width:100%; background:rgba(6,8,18,.92); border:1.5px solid rgba(255,255,255,.14); border-radius:14px; color:#fff; font:700 var(--cc-fs-xl)/1 var(--cc-font-mono); text-align:center; transition:border-color .2s, box-shadow .2s, background .2s; }
.digit:focus-visible[b-e77kye3s9i], .digit:focus[b-e77kye3s9i] { outline:none; border-color:color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 80%,transparent); background:rgba(0,229,255,.06); box-shadow:0 0 0 3px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 18%,transparent), 0 0 18px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 20%,transparent); }
.digit-error[b-e77kye3s9i] { border-color:var(--cc-danger)!important; box-shadow:0 0 0 2px color-mix(in oklch,var(--cc-danger) 22%,transparent); animation:shake-b-e77kye3s9i .38s ease; }
.digit:disabled[b-e77kye3s9i] { opacity:.45; cursor:not-allowed; }
@keyframes shake-b-e77kye3s9i { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }

/* Alert */
.alert[b-e77kye3s9i] { padding:var(--cc-s-3) var(--cc-s-4); background:color-mix(in oklch,var(--cc-danger) 10%,transparent); border:1px solid color-mix(in oklch,var(--cc-danger) 35%,transparent); border-radius:14px; color:var(--cc-danger); font:400 var(--cc-fs-sm)/1.4 var(--cc-font-sans); }

/* Action column */
.action-col[b-e77kye3s9i] { display:flex; flex-direction:column; gap:var(--cc-s-3); margin-top:var(--cc-s-1); }

.btn-primary[b-e77kye3s9i] { position:relative; width:100%; height:54px; padding:0 var(--cc-s-6); border:0; border-radius:999px; color:#fff; font:700 var(--cc-fs-md)/1 var(--cc-font-sans); letter-spacing:.02em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--cc-s-2); overflow:hidden; background:linear-gradient(110deg,var(--cc-neon-cyan,#00E5FF) 0%,#4C8BF5 38%,var(--cc-accent,#7B61FF) 60%,var(--cc-neon-purple,#B388FF) 100%); background-size:220% 100%; background-position:0% 0%; box-shadow:0 0 0 1px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 40%,transparent), 0 8px 28px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.30); transition:background-position .7s ease, box-shadow .25s, transform .18s; }
.btn-shine[b-e77kye3s9i] { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.40) 50%,transparent 70%); transform:translateX(-130%); transition:transform 1s ease; pointer-events:none; }
.btn-primary:hover:not(:disabled) .btn-shine[b-e77kye3s9i], .btn-primary:focus-visible:not(:disabled) .btn-shine[b-e77kye3s9i] { transform:translateX(130%); }
.btn-primary:hover:not(:disabled)[b-e77kye3s9i], .btn-primary:focus-visible:not(:disabled)[b-e77kye3s9i] { background-position:100% 0%; transform:translateY(-2px); box-shadow:0 0 0 1px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 60%,transparent),0 16px 48px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 42%,transparent),0 0 80px color-mix(in oklch,var(--cc-neon-purple,#B388FF) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.40); outline:none; }
.btn-primary:disabled[b-e77kye3s9i] { opacity:.60; cursor:wait; }
.btn-icon-left[b-e77kye3s9i] { flex-shrink:0; opacity:.85; }

.btn-ghost-pw[b-e77kye3s9i] { width:100%; height:46px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:transparent; color:rgba(255,255,255,.62); font:600 var(--cc-fs-sm)/1 var(--cc-font-sans); cursor:pointer; transition:border-color .2s, color .2s, background .2s, box-shadow .2s; }
.btn-ghost-pw:hover:not(:disabled)[b-e77kye3s9i] { border-color:color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 50%,transparent); color:#fff; background:color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 7%,transparent); box-shadow:0 0 16px color-mix(in oklch,var(--cc-neon-cyan,#00E5FF) 12%,transparent); }
.btn-ghost-pw:disabled[b-e77kye3s9i] { opacity:.45; cursor:not-allowed; }

.spinner[b-e77kye3s9i] { width:16px; height:16px; border:2.5px solid rgba(255,255,255,.28); border-top-color:#fff; border-radius:50%; animation:spin-b-e77kye3s9i .7s linear infinite; flex-shrink:0; }
@keyframes spin-b-e77kye3s9i { to { transform:rotate(360deg); } }

/* Success state */
.success-block[b-e77kye3s9i] { display:flex; flex-direction:column; align-items:center; gap:var(--cc-s-4); text-align:center; padding:var(--cc-s-4) 0; }
.success-icon[b-e77kye3s9i] { width:64px; height:64px; border-radius:50%; background:color-mix(in oklch,var(--cc-success,#3DDC97) 15%,transparent); border:1px solid color-mix(in oklch,var(--cc-success,#3DDC97) 45%,transparent); display:grid; place-items:center; color:var(--cc-success,#3DDC97); box-shadow:0 0 32px color-mix(in oklch,var(--cc-success,#3DDC97) 28%,transparent); animation:successPop-b-e77kye3s9i .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes successPop-b-e77kye3s9i { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }
.success-block p[b-e77kye3s9i] { color:rgba(255,255,255,.65); font:500 var(--cc-fs-sm)/1.5 var(--cc-font-sans); margin:0; }

/* Classify */
.auth-classify[b-e77kye3s9i] { position:fixed; bottom:0; left:0; right:0; z-index:3; padding:8px 0; text-align:center; font:500 .52rem/1 var(--cc-font-mono); letter-spacing:.18em; color:rgba(255,255,255,.16); pointer-events:none; background:linear-gradient(transparent,rgba(2,8,18,.4)); }

/* /Pages/CommandCenter/CommandCenterPage.razor.rz.scp.css */
.cc-hero[b-8qmhhbrhdo] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
    gap: var(--cc-s-4);
    align-items: stretch;
}

.cc-briefing[b-8qmhhbrhdo],
.cc-pulse[b-8qmhhbrhdo],
.cc-filterline[b-8qmhhbrhdo],
.cc-queue[b-8qmhhbrhdo],
.cc-side-card[b-8qmhhbrhdo],
.cc-error[b-8qmhhbrhdo] {
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(180deg, color-mix(in oklch, white 2%, transparent), transparent 64px),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    backdrop-filter: blur(14px);
}

.cc-briefing[b-8qmhhbrhdo] {
    padding: var(--cc-s-6);
    position: relative;
    overflow: hidden;
}

.cc-briefing[b-8qmhhbrhdo]::after {
    content: "";
    position: absolute;
    inset: auto var(--cc-s-6) 0 var(--cc-s-6);
    height: 2px;
    background: linear-gradient(90deg, var(--cc-accent), var(--cc-success), var(--cc-warning));
    animation: command-scan-b-8qmhhbrhdo 3.8s ease-in-out infinite;
    opacity: .72;
}

.cc-kicker[b-8qmhhbrhdo] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cc-briefing h2[b-8qmhhbrhdo] {
    color: var(--cc-fg);
    font: 760 var(--cc-fs-xl)/1.1 var(--cc-font-sans);
    margin: var(--cc-s-3) 0 var(--cc-s-2);
}

.cc-briefing p[b-8qmhhbrhdo] {
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-sm)/1.55 var(--cc-font-sans);
    max-width: 720px;
    margin: 0;
}

.cc-tonebar[b-8qmhhbrhdo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-2);
    margin-top: var(--cc-s-5);
}

.cc-tonebar button[b-8qmhhbrhdo],
.cc-filterline button[b-8qmhhbrhdo] {
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    background: color-mix(in oklch, var(--cc-bg-elev) 72%, transparent);
    color: var(--cc-fg-muted);
    cursor: pointer;
    padding: var(--cc-s-2) var(--cc-s-3);
    font: 650 var(--cc-fs-xs)/1 var(--cc-font-sans);
    transition: background var(--cc-dur-fast), color var(--cc-dur-fast), border-color var(--cc-dur-fast), transform var(--cc-dur-fast);
}

.cc-tonebar button:hover[b-8qmhhbrhdo],
.cc-filterline button:hover[b-8qmhhbrhdo],
.cc-tonebar button.active[b-8qmhhbrhdo],
.cc-filterline button.active[b-8qmhhbrhdo] {
    color: var(--cc-fg);
    border-color: color-mix(in oklch, var(--cc-accent) 44%, var(--cc-border));
    background: color-mix(in oklch, var(--cc-accent) 12%, var(--cc-bg-hover));
    transform: translateY(-1px);
}

.cc-pulse-grid[b-8qmhhbrhdo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cc-s-3);
}

.cc-pulse[b-8qmhhbrhdo] {
    padding: var(--cc-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
    min-height: 120px;
    position: relative;
    overflow: hidden;
}

.cc-pulse[b-8qmhhbrhdo]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--cc-accent);
}

.cc-pulse.critical[b-8qmhhbrhdo]::before { background: var(--cc-danger); }
.cc-pulse.warning[b-8qmhhbrhdo]::before { background: var(--cc-warning); }
.cc-pulse.success[b-8qmhhbrhdo]::before { background: var(--cc-success); }

.cc-pulse span[b-8qmhhbrhdo],
.cc-pulse small[b-8qmhhbrhdo] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cc-pulse strong[b-8qmhhbrhdo] {
    color: var(--cc-fg);
    font: 780 var(--cc-fs-xl)/1 var(--cc-font-sans);
}

.cc-filterline[b-8qmhhbrhdo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-2);
    padding: var(--cc-s-3);
}

.cc-layout[b-8qmhhbrhdo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--cc-s-4);
    align-items: start;
}

.cc-queue[b-8qmhhbrhdo],
.cc-side-card[b-8qmhhbrhdo] {
    padding: var(--cc-s-4);
}

.cc-section-head[b-8qmhhbrhdo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-4);
    margin-bottom: var(--cc-s-3);
}

.cc-section-head h3[b-8qmhhbrhdo] {
    margin: var(--cc-s-1) 0 0;
    color: var(--cc-fg);
    font: 720 var(--cc-fs-md)/1.2 var(--cc-font-sans);
}

.cc-section-head > span[b-8qmhhbrhdo] {
    color: var(--cc-fg-muted);
    font: 650 var(--cc-fs-xs)/1 var(--cc-font-sans);
}

.cc-card[b-8qmhhbrhdo] {
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-lg);
    background: color-mix(in oklch, var(--cc-bg-elev) 76%, transparent);
    overflow: hidden;
    margin-top: var(--cc-s-3);
    animation: row-unpack-b-8qmhhbrhdo .22s var(--cc-ease);
}

.cc-card.critical[b-8qmhhbrhdo] { border-color: color-mix(in oklch, var(--cc-danger) 50%, var(--cc-border)); }
.cc-card.warning[b-8qmhhbrhdo] { border-color: color-mix(in oklch, var(--cc-warning) 50%, var(--cc-border)); }

.cc-card-main[b-8qmhhbrhdo] {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 56px;
    gap: var(--cc-s-3);
    align-items: center;
    padding: var(--cc-s-3) var(--cc-s-4);
    text-align: left;
    transition: background var(--cc-dur-fast), transform var(--cc-dur-fast);
}

.cc-card-main:hover[b-8qmhhbrhdo] {
    background: linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 10%, transparent), transparent);
    transform: translateX(2px);
}

.cc-priority[b-8qmhhbrhdo],
.cc-score[b-8qmhhbrhdo] {
    border-radius: var(--cc-r-md);
    background: color-mix(in oklch, var(--cc-accent) 12%, transparent);
    color: var(--cc-fg);
    padding: var(--cc-s-2);
    text-align: center;
    font: 760 var(--cc-fs-xs)/1 var(--cc-font-mono);
}

.cc-card.critical .cc-priority[b-8qmhhbrhdo] { background: color-mix(in oklch, var(--cc-danger) 18%, transparent); }
.cc-card.warning .cc-priority[b-8qmhhbrhdo] { background: color-mix(in oklch, var(--cc-warning) 18%, transparent); }

.cc-card-copy[b-8qmhhbrhdo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cc-card-copy strong[b-8qmhhbrhdo],
.cc-live-item strong[b-8qmhhbrhdo],
.cc-rule strong[b-8qmhhbrhdo] {
    color: var(--cc-fg);
    font: 680 var(--cc-fs-sm)/1.25 var(--cc-font-sans);
}

.cc-card-copy small[b-8qmhhbrhdo],
.cc-live-item span[b-8qmhhbrhdo],
.cc-rule span[b-8qmhhbrhdo] {
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-xs)/1.35 var(--cc-font-sans);
}

.cc-card-detail[b-8qmhhbrhdo] {
    border-top: 1px solid var(--cc-border-soft);
    padding: var(--cc-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
    animation: detail-drop-b-8qmhhbrhdo .18s var(--cc-ease);
}

.cc-ai-note[b-8qmhhbrhdo] {
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    background: linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 12%, transparent), transparent);
}

.cc-ai-note span[b-8qmhhbrhdo],
.cc-evidence-grid span[b-8qmhhbrhdo] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cc-ai-note p[b-8qmhhbrhdo] {
    color: var(--cc-fg);
    margin: var(--cc-s-2) 0 0;
    font: 500 var(--cc-fs-sm)/1.45 var(--cc-font-sans);
}

.cc-evidence-grid[b-8qmhhbrhdo] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cc-s-3);
}

.cc-evidence-grid div[b-8qmhhbrhdo] {
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    background: color-mix(in oklch, var(--cc-bg-card) 70%, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
}

.cc-evidence-grid strong[b-8qmhhbrhdo] {
    color: var(--cc-fg);
    font: 560 var(--cc-fs-xs)/1.45 var(--cc-font-sans);
}

.cc-card-actions[b-8qmhhbrhdo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-2);
}

.cc-side[b-8qmhhbrhdo] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
}

.cc-live-item[b-8qmhhbrhdo],
.cc-rule[b-8qmhhbrhdo] {
    width: 100%;
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    background: color-mix(in oklch, var(--cc-bg-elev) 72%, transparent);
    color: inherit;
    padding: var(--cc-s-3);
    margin-top: var(--cc-s-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.cc-live-item[b-8qmhhbrhdo] {
    cursor: pointer;
    transition: transform var(--cc-dur-fast), border-color var(--cc-dur-fast);
}

.cc-live-item:hover[b-8qmhhbrhdo] {
    transform: translateX(2px);
    border-color: color-mix(in oklch, var(--cc-accent) 42%, var(--cc-border));
}

.cc-live-item.critical[b-8qmhhbrhdo] { box-shadow: inset 3px 0 0 var(--cc-danger); }
.cc-live-item.warning[b-8qmhhbrhdo] { box-shadow: inset 3px 0 0 var(--cc-warning); }

.cc-error[b-8qmhhbrhdo] {
    padding: var(--cc-s-4);
    color: var(--cc-danger);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
}

@keyframes command-scan-b-8qmhhbrhdo {
    0%, 100% { transform: scaleX(.18); transform-origin: left; opacity: .45; }
    50% { transform: scaleX(1); transform-origin: left; opacity: .9; }
}

@keyframes row-unpack-b-8qmhhbrhdo {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes detail-drop-b-8qmhhbrhdo {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1120px) {
    .cc-hero[b-8qmhhbrhdo],
    .cc-layout[b-8qmhhbrhdo] {
        grid-template-columns: 1fr;
    }

    .cc-evidence-grid[b-8qmhhbrhdo] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .cc-pulse-grid[b-8qmhhbrhdo],
    .cc-card-main[b-8qmhhbrhdo] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .cc-hero-copy h1[b-8qmhhbrhdo] { font-size: var(--cc-fs-md); }

    .cc-filterline[b-8qmhhbrhdo] {
        flex-wrap: wrap;
        gap: var(--cc-s-2);
        padding: var(--cc-s-2) var(--cc-s-3);
    }

    .cc-filterline > *[b-8qmhhbrhdo] { flex: 1 1 auto; }

    .cc-queue-head[b-8qmhhbrhdo] { display: none; }

    .cc-row[b-8qmhhbrhdo] {
        grid-template-columns: 1fr auto;
        padding: var(--cc-s-3);
        gap: var(--cc-s-2);
    }

    /* Hide lower-priority columns on mobile, keep title + severity */
    .cc-row > *:nth-child(n+3)[b-8qmhhbrhdo] { display: none; }
    .cc-row > *:first-child[b-8qmhhbrhdo],
    .cc-row > *:nth-child(2)[b-8qmhhbrhdo] { display: block; }

    .cc-pulse-item[b-8qmhhbrhdo] {
        padding: var(--cc-s-3) var(--cc-s-4);
    }
}

/* Critical page hardening: persistent filters and scrollable side context. */
.cc-layout[b-8qmhhbrhdo],
.cc-queue[b-8qmhhbrhdo],
.cc-side[b-8qmhhbrhdo],
.cc-card[b-8qmhhbrhdo] {
    min-width: 0;
}

.cc-filterline[b-8qmhhbrhdo] {
    position: sticky;
    top: calc(92px + env(safe-area-inset-top));
    z-index: 24;
    overflow: visible;
    backdrop-filter: blur(16px);
}

.cc-side[b-8qmhhbrhdo] {
    position: sticky;
    top: calc(148px + env(safe-area-inset-top));
    align-self: start;
    max-height: calc(100dvh - 168px);
    overflow: auto;
    scrollbar-width: thin;
}

.cc-card[b-8qmhhbrhdo],
.cc-card-detail[b-8qmhhbrhdo] {
    overflow: visible;
}

@media (max-width: 1120px) {
    .cc-filterline[b-8qmhhbrhdo],
    .cc-side[b-8qmhhbrhdo] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 767px) {
    .cc-filterline > *[b-8qmhhbrhdo] {
        min-width: 0;
    }
}
/* /Pages/Communication/CommunicationPage.razor.rz.scp.css */
.comm-grid[b-dq6jw7rw4y] {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: var(--cc-s-4);
}

.comm-compose[b-dq6jw7rw4y],
.comm-list[b-dq6jw7rw4y] {
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-md);
    background: var(--cc-bg-glass, var(--cc-bg-card));
    padding: var(--cc-s-5);
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    position: relative;
    overflow: hidden;
}

.comm-compose[b-dq6jw7rw4y]::before,
.comm-list[b-dq6jw7rw4y]::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background: radial-gradient(150px 72px at 14% 0%, color-mix(in oklch, var(--cc-cyan, #5DD9C1) 14%, transparent), transparent 66%);
    opacity: .7;
}

.comm-compose h2[b-dq6jw7rw4y],
.comm-list h2[b-dq6jw7rw4y] {
    margin: 0 0 var(--cc-s-4);
    font: 600 var(--cc-fs-md)/1.2 var(--cc-font-sans);
}

.comm-options[b-dq6jw7rw4y] {
    display: grid;
    grid-template-columns: repeat(3, auto) 1fr;
    gap: var(--cc-s-3);
    align-items: center;
}

.comm-options label[b-dq6jw7rw4y] {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-s-1);
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
}

.comm-actions[b-dq6jw7rw4y],
.comm-item-actions[b-dq6jw7rw4y] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
}

.comm-item[b-dq6jw7rw4y] {
    display: flex;
    justify-content: space-between;
    gap: var(--cc-s-4);
    padding: var(--cc-s-3) 0;
    border-top: 1px solid var(--cc-border-soft);
    transition: transform var(--cc-dur-fast) var(--cc-ease), background var(--cc-dur-fast) var(--cc-ease);
}

.comm-item:first-of-type[b-dq6jw7rw4y] {
    border-top: 0;
}

.comm-item:hover[b-dq6jw7rw4y] {
    transform: translateX(2px);
    background: linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 7%, transparent), transparent);
}

.comm-item strong[b-dq6jw7rw4y],
.comm-item span[b-dq6jw7rw4y],
.comm-item small[b-dq6jw7rw4y] {
    display: block;
}

.comm-item span[b-dq6jw7rw4y],
.comm-item small[b-dq6jw7rw4y] {
    color: var(--cc-fg-muted);
}

@media (max-width: 900px) {
    .comm-grid[b-dq6jw7rw4y] {
        grid-template-columns: 1fr;
    }

    .comm-options[b-dq6jw7rw4y] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Pages/Consent/ConsentHistoryPage.razor.rz.scp.css */
/* ConsentHistoryPage */
.consent-overview[b-ritgtmtfxd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-5);
    padding: var(--cc-s-5);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 8%, transparent), transparent 48%),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
}

.consent-overview h2[b-ritgtmtfxd] {
    margin: var(--cc-s-1) 0;
    color: var(--cc-fg);
    font: 720 var(--cc-fs-lg)/1.15 var(--cc-font-sans);
}

.consent-overview p[b-ritgtmtfxd] {
    margin: 0;
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-sm)/1.5 var(--cc-font-sans);
}

.consent-list[b-ritgtmtfxd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--cc-s-4);
}

.consent-card[b-ritgtmtfxd] {
    background: var(--cc-bg-card);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    padding: var(--cc-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
    transition: border-color var(--cc-dur-fast);
}

.consent-card.active[b-ritgtmtfxd]  { border-color: color-mix(in srgb, var(--cc-success) 30%, var(--cc-border)); }
.consent-card.revoked[b-ritgtmtfxd] { opacity: .75; }

.consent-card-header[b-ritgtmtfxd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-3);
}

.scope[b-ritgtmtfxd] {
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    color: var(--cc-fg);
}

.consent-dl[b-ritgtmtfxd] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--cc-s-1) var(--cc-s-4);
    margin: 0;
    font-family: var(--cc-font-sans);
}

.consent-dl dt[b-ritgtmtfxd] {
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    color: var(--cc-fg-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    align-self: start;
    padding-top: 2px;
}

.consent-dl dd[b-ritgtmtfxd] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -- Mobile <= 767px ---------------------------------------------- */
@media (max-width: 767px) {
    .consent-overview[b-ritgtmtfxd] { flex-direction: column; gap: var(--cc-s-3); }

    .consent-search-wrap[b-ritgtmtfxd],
    .consent-list[b-ritgtmtfxd] { width: 100%; max-width: 100%; }

    .consent-list[b-ritgtmtfxd] { grid-template-columns: 1fr; }

    .consent-dl[b-ritgtmtfxd] {
        grid-template-columns: auto 1fr;
        gap: 4px var(--cc-s-3);
    }
}
/* /Pages/ContentStudio/ContentStudioV2Page.razor.rz.scp.css */
.csv2[b-ribv7yhqha] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    height: 100%;
    min-height: 0;
}

.csv2-list[b-ribv7yhqha] {
    border-right: 1px solid var(--cc-border);
    padding: 12px;
    overflow: auto;
}

.csv2-toolbar[b-ribv7yhqha] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.csv2-select[b-ribv7yhqha],
.csv2-btn[b-ribv7yhqha] {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--cc-border);
    background: var(--cc-surface);
    color: var(--cc-fg);
}

.csv2-btn[b-ribv7yhqha] { cursor: pointer; }
.csv2-btn:disabled[b-ribv7yhqha] { opacity: .5; cursor: default; }

.csv2-items[b-ribv7yhqha] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.csv2-item[b-ribv7yhqha] {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--cc-fg);
    cursor: pointer;
}

.csv2-item:hover[b-ribv7yhqha] { border-color: var(--cc-border); }
.csv2-item.is-active[b-ribv7yhqha] { border-color: var(--cc-accent); }
.csv2-item-title[b-ribv7yhqha] { font-weight: 600; }
.csv2-item-meta[b-ribv7yhqha] { font-size: 12px; opacity: .7; }

.csv2-editor[b-ribv7yhqha] {
    padding: 12px;
    overflow: auto;
    min-height: 0;
}

.csv2-head[b-ribv7yhqha] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.csv2-badge[b-ribv7yhqha] {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--cc-border);
}

.csv2-msg[b-ribv7yhqha] {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--cc-accent);
    margin-bottom: 12px;
}

.csv2-empty[b-ribv7yhqha],
.csv2-muted[b-ribv7yhqha] {
    opacity: .7;
    padding: 12px;
}
/* /Pages/DashboardPage.razor.rz.scp.css */
/* ── Dashboard Shell (Briefing-Overlay nur über Inhaltsspalte) ────────────── */

.dashboard-page-shell[b-5alrefizrp] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    isolation: isolate;
}

/* ── Dashboard Layout ──────────────────────────────────────────────────────── */

.dash-header[b-5alrefizrp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cc-s-4) var(--cc-s-6) var(--cc-s-5);
    border: 1px solid var(--cc-border-luxe, var(--cc-border-soft));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 8%, transparent), transparent 42%),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    gap: var(--cc-s-4);
}

.dash-title[b-5alrefizrp] {
    font-size: var(--cc-fs-lg);
    font-weight: 600;
    color: var(--cc-fg);
    margin: 0;
}

.dash-sub[b-5alrefizrp] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    margin-top: 2px;
    display: block;
}

.dash-header-actions[b-5alrefizrp] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
}

.dash-operator[b-5alrefizrp] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    font-size: var(--cc-fs-sm);
    color: var(--cc-fg-muted);
    background: color-mix(in oklch, var(--cc-bg-elev) 74%, transparent);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    padding: 5px var(--cc-s-3);
}

.op-dot[b-5alrefizrp] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cc-success);
    flex-shrink: 0;
}

.btn-icon[b-5alrefizrp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--cc-r-md);
    background: color-mix(in oklch, var(--cc-bg-card) 76%, transparent);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    color: var(--cc-fg-muted);
    cursor: pointer;
    transition: color var(--cc-dur-fast), background var(--cc-dur-fast), transform var(--cc-dur-fast), box-shadow var(--cc-dur-fast);
}

.btn-icon:hover[b-5alrefizrp] {
    color: var(--cc-fg);
    background: var(--cc-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.18),
                0 0 8px color-mix(in oklch, var(--cc-accent) 10%, transparent);
}
.btn-icon:active[b-5alrefizrp] { transform: scale(.9); transition-duration: 60ms; }
.btn-icon:focus-visible[b-5alrefizrp] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}

.btn-icon.spinning svg[b-5alrefizrp] { animation: spin-b-5alrefizrp 1s linear infinite; }

@keyframes spin-b-5alrefizrp { to { transform: rotate(360deg); } }

/* ── Loading / Error ───────────────────────────────────────────────────────── */

.dash-logout-btn[b-5alrefizrp] {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: var(--cc-r-md);
    border: 1px solid color-mix(in oklch, var(--cc-danger) 28%, var(--cc-border));
    background: color-mix(in oklch, var(--cc-danger) 12%, var(--cc-bg-card));
    color: color-mix(in oklch, var(--cc-danger) 76%, var(--cc-fg));
    font: 650 var(--cc-fs-sm)/1 var(--cc-font-sans);
    cursor: pointer;
    transition: color var(--cc-dur-fast), background var(--cc-dur-fast), transform var(--cc-dur-fast), box-shadow var(--cc-dur-fast);
}

.dash-logout-btn:hover[b-5alrefizrp],
.dash-logout-btn:focus-visible[b-5alrefizrp] {
    color: #fff;
    background: color-mix(in oklch, var(--cc-danger) 44%, var(--cc-bg-card));
    transform: translateY(-1px);
    box-shadow: 0 10px 22px color-mix(in oklch, var(--cc-danger) 24%, transparent);
    outline: none;
}
.dash-logout-btn:active[b-5alrefizrp] { transform: scale(.95); transition-duration: 60ms; }

.dash-loading[b-5alrefizrp] { padding: var(--cc-s-10); }

.dash-error[b-5alrefizrp] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
    margin: var(--cc-s-6);
    padding: var(--cc-s-4) var(--cc-s-5);
    background: var(--cc-danger-bg);
    border: 1px solid var(--cc-danger);
    border-radius: var(--cc-r-md);
    color: var(--cc-danger);
    font-size: var(--cc-fs-sm);
}

/* ── KPI Row ───────────────────────────────────────────────────────────────── */

.kpi-row[b-5alrefizrp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--cc-s-4);
    padding: var(--cc-s-5) var(--cc-s-6);
}

.kpi-card[b-5alrefizrp] {
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 6%, transparent), transparent 42%),
        var(--cc-bg-glass, var(--cc-bg-card));
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    padding: var(--cc-s-4) var(--cc-s-5);
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: box-shadow var(--cc-dur-fast), transform var(--cc-dur-fast), border-color var(--cc-dur-fast);
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.kpi-card:hover[b-5alrefizrp] {
    box-shadow: var(--cc-glow-accent, var(--cc-shadow-md));
    transform: translateY(-2px);
    border-color: color-mix(in oklch, var(--cc-accent) 34%, var(--cc-border));
}
.kpi-card.kpi-warn[b-5alrefizrp] { border-left: 3px solid var(--cc-danger); }
.kpi-card.kpi-ok[b-5alrefizrp]   { border-left: 3px solid var(--cc-success); }

.kpi-label[b-5alrefizrp] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kpi-value[b-5alrefizrp] {
    font-size: var(--cc-fs-xl);
    font-weight: 700;
    color: var(--cc-fg);
    line-height: 1;
}

.kpi-delta[b-5alrefizrp] { font-size: var(--cc-fs-xs); font-weight: 500; }
.kpi-delta.delta-ok[b-5alrefizrp]   { color: var(--cc-success); }
.kpi-delta.delta-warn[b-5alrefizrp] { color: var(--cc-danger); }

/* ── Body Layout ───────────────────────────────────────────────────────────── */

.dash-body[b-5alrefizrp] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--cc-s-4);
    padding: 0 var(--cc-s-6) var(--cc-s-6);
    align-items: start;
}

.dash-col-main[b-5alrefizrp],
.dash-col-side[b-5alrefizrp] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.dash-card[b-5alrefizrp] {
    background:
        linear-gradient(180deg, color-mix(in oklch, white 2%, transparent), transparent 56px),
        var(--cc-bg-glass, var(--cc-bg-card));
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    overflow: hidden;
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    backdrop-filter: blur(14px);
}

.card-head[b-5alrefizrp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cc-s-4) var(--cc-s-5);
    border-bottom: 1px solid var(--cc-border-luxe, var(--cc-border-soft));
    background: color-mix(in oklch, var(--cc-bg-elev) 54%, transparent);
}

.card-title[b-5alrefizrp] {
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    color: var(--cc-fg);
}

.btn-link-sm[b-5alrefizrp] {
    background: none;
    border: none;
    color: var(--cc-accent);
    font-size: var(--cc-fs-xs);
    cursor: pointer;
    padding: 0;
}

.btn-link-sm:hover[b-5alrefizrp] { text-decoration: underline; }
.btn-link-sm:active[b-5alrefizrp] { opacity: .7; }
.btn-link-sm:focus-visible[b-5alrefizrp] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}

/* ── Bar Chart ─────────────────────────────────────────────────────────────── */

.chart-legend[b-5alrefizrp] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
}

.legend-dot[b-5alrefizrp] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.bar-chart[b-5alrefizrp] {
    display: flex;
    align-items: flex-end;
    gap: var(--cc-s-2);
    padding: var(--cc-s-4) var(--cc-s-5);
    height: 160px;
}

.bar-group[b-5alrefizrp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.bar-stack[b-5alrefizrp] {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    border-radius: var(--cc-r-sm) var(--cc-r-sm) 0 0;
    overflow: hidden;
    background: var(--cc-bg-hover);
}

.bar-seg[b-5alrefizrp] { min-height: 3px; transition: height var(--cc-dur-med) var(--cc-ease); }
.seg-open[b-5alrefizrp]     { background: var(--cc-danger); }
.seg-review[b-5alrefizrp]   { background: var(--cc-warning); }
.seg-resolved[b-5alrefizrp] { background: var(--cc-success); }
.bar-empty[b-5alrefizrp]    { flex: 1; background: var(--cc-bg-hover); }

.bar-label[b-5alrefizrp] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    text-transform: capitalize;
}

/* ── Recent Reports Table ──────────────────────────────────────────────────── */

.report-mini-table[b-5alrefizrp] { font-size: var(--cc-fs-sm); }

.rmt-head[b-5alrefizrp] {
    display: grid;
    grid-template-columns: 110px 1fr 80px 90px 90px;
    gap: var(--cc-s-3);
    padding: var(--cc-s-2) var(--cc-s-5);
    background: var(--cc-bg-elev);
    color: var(--cc-fg-dim);
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rmt-row[b-5alrefizrp] {
    display: grid;
    grid-template-columns: 110px 1fr 80px 90px 90px;
    gap: var(--cc-s-3);
    padding: var(--cc-s-2) var(--cc-s-5);
    border-top: 1px solid var(--cc-border-soft);
    align-items: center;
    transition: background var(--cc-dur-fast);
}

.rmt-row:hover[b-5alrefizrp] { background: var(--cc-bg-hover); }

/* ── Priority Events ───────────────────────────────────────────────────────── */

.badge-alert[b-5alrefizrp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--cc-danger);
    color: #fff;
    font-size: var(--cc-fs-xs);
    font-weight: 700;
}

.event-empty[b-5alrefizrp] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    padding: var(--cc-s-5);
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
}

.event-feed[b-5alrefizrp] {
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow-y: auto;
}

.event-item[b-5alrefizrp] {
    display: flex;
    gap: var(--cc-s-3);
    padding: var(--cc-s-3) var(--cc-s-5);
    border-top: 1px solid var(--cc-border-soft);
}

.event-item:first-child[b-5alrefizrp] { border-top: none; }

.event-dot[b-5alrefizrp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.event-critical .event-dot[b-5alrefizrp] { background: var(--cc-danger); }
.event-warning  .event-dot[b-5alrefizrp] { background: var(--cc-warning); }

.event-body[b-5alrefizrp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.event-title[b-5alrefizrp] {
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    color: var(--cc-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-sum[b-5alrefizrp] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-time[b-5alrefizrp] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
}

/* Live activity */

.activity-feed[b-5alrefizrp],
.advisor-mini-feed[b-5alrefizrp] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--cc-border-soft);
}

.activity-item[b-5alrefizrp],
.advisor-mini[b-5alrefizrp] {
    width: 100%;
    border: none;
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 5%, transparent), transparent 56%),
        var(--cc-bg-card);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background var(--cc-dur-fast), transform var(--cc-dur-fast), box-shadow var(--cc-dur-fast);
}

.activity-item[b-5alrefizrp] {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: var(--cc-s-3);
    align-items: center;
    padding: var(--cc-s-3) var(--cc-s-4);
}

.activity-item:hover[b-5alrefizrp],
.advisor-mini:hover[b-5alrefizrp] {
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 11%, transparent), transparent 70%),
        var(--cc-bg-hover);
    transform: translateX(2px);
    box-shadow: inset 3px 0 0 color-mix(in oklch, var(--cc-accent) 58%, transparent);
}

.activity-item.critical[b-5alrefizrp] {
    box-shadow: inset 3px 0 0 var(--cc-danger);
}

.activity-item.warning[b-5alrefizrp] {
    box-shadow: inset 3px 0 0 var(--cc-warning);
}

.activity-source[b-5alrefizrp] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-copy[b-5alrefizrp] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.activity-copy strong[b-5alrefizrp],
.advisor-mini strong[b-5alrefizrp] {
    color: var(--cc-fg);
    font: 650 var(--cc-fs-sm)/1.25 var(--cc-font-sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-copy small[b-5alrefizrp],
.advisor-mini span[b-5alrefizrp] {
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-xs)/1.35 var(--cc-font-sans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.advisor-mini[b-5alrefizrp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--cc-s-3) var(--cc-s-4);
}

.advisor-mini.critical[b-5alrefizrp] {
    box-shadow: inset 3px 0 0 var(--cc-danger);
}

.advisor-mini.warning[b-5alrefizrp] {
    box-shadow: inset 3px 0 0 var(--cc-warning);
}

/* ── Tool Cards (Module-Grid) ─────────────────────────────────────────────── */

.hub-tools-header[b-5alrefizrp] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
    padding: var(--cc-s-2) 0 var(--cc-s-3);
}

.hub-tools-label[b-5alrefizrp] {
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cc-fg-dim);
    flex-shrink: 0;
}

.hub-tools-line[b-5alrefizrp] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in oklch, var(--cc-accent) 26%, transparent),
        transparent 80%);
}

.hub-tools-grid[b-5alrefizrp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cc-s-3);
}

.hub-tool-card[b-5alrefizrp] {
    --_accent: var(--card-accent, var(--cc-accent));
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
    padding: var(--cc-s-4);
    border-radius: var(--cc-r-xl);
    border: 1px solid color-mix(in oklch, var(--_accent) 18%, var(--cc-border));
    background:
        linear-gradient(135deg,
            color-mix(in oklch, var(--_accent) 10%, transparent) 0%,
            transparent 60%),
        var(--cc-bg-glass, var(--cc-bg-card));
    backdrop-filter: blur(12px);
    color: var(--cc-fg);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 180ms var(--cc-ease),
        box-shadow 180ms var(--cc-ease),
        border-color 180ms var(--cc-ease);
}

.hub-tool-card[b-5alrefizrp]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 120% 80% at 10% 20%,
            color-mix(in oklch, var(--_accent) 8%, transparent),
            transparent 70%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 180ms var(--cc-ease);
}

.hub-tool-card:hover[b-5alrefizrp] {
    transform: translateY(-2px);
    border-color: color-mix(in oklch, var(--_accent) 38%, var(--cc-border));
    box-shadow:
        0 8px 24px color-mix(in oklch, var(--_accent) 14%, transparent),
        0 0 0 1px color-mix(in oklch, var(--_accent) 10%, transparent),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.hub-tool-card:hover[b-5alrefizrp]::before {
    opacity: 1;
}

.hub-tool-card:active[b-5alrefizrp] {
    transform: scale(.97);
    transition-duration: 80ms;
    box-shadow:
        0 2px 8px color-mix(in oklch, var(--_accent) 10%, transparent),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.hub-tool-card:focus-visible[b-5alrefizrp] {
    outline: 2px solid var(--_accent);
    outline-offset: 2px;
}

.htc-featured[b-5alrefizrp] {
    grid-column: 1 / -1;
}

.htc-icon[b-5alrefizrp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--cc-r-lg);
    background: color-mix(in oklch, var(--_accent) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--_accent) 22%, transparent);
    flex-shrink: 0;
    transition: box-shadow 180ms var(--cc-ease);
}

.hub-tool-card:hover .htc-icon[b-5alrefizrp] {
    box-shadow: 0 0 14px color-mix(in oklch, var(--_accent) 28%, transparent);
}

.htc-icon svg[b-5alrefizrp] {
    width: 20px;
    height: 20px;
    color: var(--_accent);
}

.htc-icon-img[b-5alrefizrp] {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.htc-body[b-5alrefizrp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.htc-body strong[b-5alrefizrp] {
    font: 650 var(--cc-fs-sm)/1.25 var(--cc-font-sans);
    color: var(--cc-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.htc-body small[b-5alrefizrp] {
    font: 400 var(--cc-fs-xs)/1.3 var(--cc-font-sans);
    color: var(--cc-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Refresh hint ──────────────────────────────────────────────────────────── */

.dash-refresh-hint[b-5alrefizrp] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    text-align: center;
    padding: var(--cc-s-2);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .dash-body[b-5alrefizrp] { grid-template-columns: 1fr; }
    .dash-col-side[b-5alrefizrp] { order: -1; }
    .kpi-row[b-5alrefizrp] { grid-template-columns: repeat(2, 1fr); }
    .hub-tools-grid[b-5alrefizrp] { grid-template-columns: 1fr; }
    .htc-featured[b-5alrefizrp] { grid-column: auto; }
}

@media (max-width: 767px) {
    .dash-header[b-5alrefizrp] {
        flex-wrap: wrap;
        padding: var(--cc-s-3) var(--cc-s-4);
        padding-left: 56px; /* clear hamburger */
    }

    .dash-title[b-5alrefizrp] { font-size: var(--cc-fs-md); }

    .kpi-row[b-5alrefizrp] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--cc-s-3);
        padding: var(--cc-s-3) var(--cc-s-4);
    }

    .kpi-value[b-5alrefizrp] { font-size: var(--cc-fs-lg); }
    .kpi-card[b-5alrefizrp] { padding: var(--cc-s-3) var(--cc-s-4); }

    .dash-body[b-5alrefizrp] {
        padding: 0 var(--cc-s-4) var(--cc-s-4);
        gap: var(--cc-s-3);
    }

    /* Reports table: hide less-important columns */
    .rmt-head[b-5alrefizrp],
    .rmt-row[b-5alrefizrp] {
        grid-template-columns: 1fr 70px;
        gap: var(--cc-s-2);
        padding: var(--cc-s-2) var(--cc-s-3);
    }

    /* Hide columns 3-5 (type, status, date) — keep user + title */
    .rmt-head > *:nth-child(n+3)[b-5alrefizrp],
    .rmt-row > *:nth-child(n+3)[b-5alrefizrp] { display: none; }
}

/* Critical page hardening: keep contextual actions visible and prevent card clipping. */
.dash-header[b-5alrefizrp] {
    position: sticky;
    top: max(var(--cc-s-3), env(safe-area-inset-top));
    z-index: 32;
    flex-wrap: wrap;
    overflow: visible;
    backdrop-filter: blur(18px);
}

.dash-header-actions[b-5alrefizrp] {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.dash-body[b-5alrefizrp],
.dash-col-main[b-5alrefizrp],
.dash-col-side[b-5alrefizrp] {
    min-width: 0;
}

.dash-card[b-5alrefizrp] {
    overflow: visible;
}

.dash-col-side[b-5alrefizrp] {
    position: sticky;
    top: calc(92px + env(safe-area-inset-top));
    align-self: start;
    max-height: calc(100dvh - 112px);
    overflow: auto;
    scrollbar-width: thin;
}

.report-mini-table[b-5alrefizrp] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rmt-head[b-5alrefizrp],
.rmt-row[b-5alrefizrp] {
    min-width: min(640px, 100%);
}

@media (max-width: 900px) {
    .dash-col-side[b-5alrefizrp] {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 767px) {
    .dash-header[b-5alrefizrp] {
        top: max(var(--cc-s-2), env(safe-area-inset-top));
    }

    .dash-header-actions[b-5alrefizrp] {
        width: 100%;
        justify-content: flex-start;
    }

    .rmt-head[b-5alrefizrp],
    .rmt-row[b-5alrefizrp] {
        min-width: 560px;
    }
}
/* /Pages/DeployGate/DeployGatePage.razor.rz.scp.css */
/* DeployGatePage — scoped styles
   Global: deploy-gate-summary, deploy-check, deploy-gate--passed/blocked (content-studio.css)
            media-action-btn, media-badge (media.css)
   Scoped: summary icon animation, severity chips, responsive stacking */

/* Summary-Icon: sanfte Puls-Animation beim Passed-Zustand */
[b-y74941mkpq] .deploy-gate--passed .deploy-gate-status-icon svg {
    animation: gate-pulse-b-y74941mkpq 2.5s ease-in-out infinite;
}

@keyframes gate-pulse-b-y74941mkpq {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); }
    50%       { opacity: .9; filter: drop-shadow(0 0 6px rgba(61,220,151,.5)); }
}

/* Blocked-Icon: keine Animation, statisch rot */
[b-y74941mkpq] .deploy-gate--blocked .deploy-gate-status-icon svg {
    filter: drop-shadow(0 0 4px rgba(240,86,74,.35));
}

/* Check-Zeile: Name verkürzen auf engen Screens */
[b-y74941mkpq] .deploy-check-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Severity-Badge rechtsbündig, immer in Zeile */
[b-y74941mkpq] .deploy-check > .media-badge {
    margin-left: auto;
    flex-shrink: 0;
}

/* Mobile: Summary vertikal stapeln */
@media (max-width: 600px) {
    [b-y74941mkpq] .deploy-gate-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--cc-s-3);
        padding: var(--cc-s-4);
    }

    [b-y74941mkpq] .deploy-check {
        flex-wrap: wrap;
    }
}
/* /Pages/Entries/EntriesPage.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   Entries (Care-Anfragen) Page
   ════════════════════════════════════════════════════════════════════ */

.kpi-pill[b-z392e9hebf] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--cc-border, rgba(255,255,255,.08));
    font: 500 .8rem/1 var(--cc-font-sans);
    margin-left: 8px;
}

.kpi-pill.ok[b-z392e9hebf] {
    color: var(--cc-success, #22c55e);
    border-color: color-mix(in oklch, var(--cc-success, #22c55e) 35%, transparent);
}

.kpi-pill .dim[b-z392e9hebf] { color: rgba(255,255,255,.4); font-weight: 400; }

.entries-list[b-z392e9hebf] {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.entry-card[b-z392e9hebf] {
    padding: 14px 18px;
    background: var(--cc-bg-card, #141416);
    border: 1px solid rgba(255, 140, 66, 0.10);
    border-radius: 10px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    position: relative;
}

.entry-card[b-z392e9hebf]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at top right, rgba(255, 140, 66, 0.04), transparent 60%);
    pointer-events: none;
}

.entry-card:hover[b-z392e9hebf] {
    border-color: rgba(255, 140, 66, 0.32);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 140, 66, 0.10), 0 2px 8px rgba(0,0,0,0.3);
}

.entry-card.done[b-z392e9hebf]       { opacity: .75; }
.entry-card.group[b-z392e9hebf]      { border-left: 3px solid var(--cc-info, #60a5fa); }
.entry-card.open.group[b-z392e9hebf] { border-left-color: var(--cc-info, #60a5fa); }

.entry-head[b-z392e9hebf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.entry-title-block[b-z392e9hebf] { min-width: 0; flex: 1; }

.entry-title[b-z392e9hebf] {
    margin: 0 0 4px;
    font: 600 1rem/1.3 var(--cc-font-sans);
    color: rgba(255,255,255,.92);
}

.entry-meta[b-z392e9hebf] {
    font: 400 .72rem/1 var(--cc-font-mono);
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.entry-badges[b-z392e9hebf] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.badge[b-z392e9hebf] {
    font: 700 .58rem/1 var(--cc-font-mono);
    letter-spacing: .1em;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
}

.badge.category[b-z392e9hebf] { color: #FF8C42;   background: rgba(255, 140, 66, 0.14);  border: 1px solid rgba(255, 140, 66, 0.22); }
.badge.group[b-z392e9hebf]    { color: #60a5fa;   background: rgba(96, 165, 250, 0.12);  border: 1px solid rgba(96, 165, 250, 0.20); }
.badge.open[b-z392e9hebf]     { color: #F5B841;   background: rgba(245, 184, 65, 0.12);  border: 1px solid rgba(245, 184, 65, 0.22); }
.badge.done[b-z392e9hebf]     { color: #2FA878;   background: rgba(47, 168, 120, 0.12);  border: 1px solid rgba(47, 168, 120, 0.22); }

.entry-desc[b-z392e9hebf] {
    margin: 6px 0;
    font: 400 .82rem/1.5 var(--cc-font-sans);
    color: rgba(255,255,255,.65);
}

.entry-event-time[b-z392e9hebf] {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--cc-border, rgba(255,255,255,.08));
    font: 500 .75rem/1 var(--cc-font-sans);
    color: rgba(255,255,255,.7);
}

.dim[b-z392e9hebf] { color: rgba(255,255,255,.4); }

/* -- Mobile <= 767px ---------------------------------------------- */
@media (max-width: 767px) {
    .entries-list[b-z392e9hebf] { gap: var(--cc-s-3); }

    .entry-head[b-z392e9hebf] {
        flex-wrap: wrap;
        gap: var(--cc-s-2);
    }

    .entry-title-block[b-z392e9hebf] { min-width: 0; flex: 1; }

    .entry-card[b-z392e9hebf],
    .entry-item[b-z392e9hebf] { padding: var(--cc-s-3); }
}
/* /Pages/Events/EventsPage.razor.rz.scp.css */
/* EventsPage — scoped styles
   Global: content-list, content-card, rule-card (content-studio.css)
            media-tab, media-badge, media-detail-table (media.css)
   Scoped: event-card thumbnail and rule-list density */

/* Event-Cover: 16:9-ähnliches Seitenverhältnis */
[b-vo0znkpmyl] .content-card-thumb {
    width: 80px;
    height: 54px;
    aspect-ratio: unset;
    border-radius: var(--cc-r-md);
}

/* Kompakte Regel-Liste: kein cursor pointer, leicht grauere Karte */
[b-vo0znkpmyl] .content-list[data-density="compact"] .content-card {
    padding: var(--cc-s-2) var(--cc-s-3);
}

/* App-Regel-Wert: monospace Chip */
[b-vo0znkpmyl] .rule-value-chip {
    font-family: var(--cc-font-mono);
    font-size: var(--cc-fs-xs);
    padding: 1px 6px;
    border-radius: var(--cc-r-sm);
    background: var(--cc-bg-input);
    border: 1px solid var(--cc-border-soft);
    color: var(--cc-fg-muted);
}

/* Mobile */
@media (max-width: 600px) {
    [b-vo0znkpmyl] .content-card-thumb {
        width: 60px;
        height: 42px;
    }
}
/* /Pages/Faq/FaqPage.razor.rz.scp.css */
.faq-editor-shell[b-6eovza1m9e] {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.faq-list-panel[b-6eovza1m9e],
.faq-compose-panel[b-6eovza1m9e] {
    background: var(--cc-bg-card, #141416);
    border: 1px solid var(--cc-border, rgba(255,255,255,.08));
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
    animation: faq-panel-rise-b-6eovza1m9e .5s cubic-bezier(.16, 1, .3, 1) both;
}

.faq-list-panel[b-6eovza1m9e] {
    padding: 14px;
    max-height: calc(100dvh - 160px);
    overflow: auto;
}

.faq-group + .faq-group[b-6eovza1m9e] { margin-top: 18px; }

.faq-group-title[b-6eovza1m9e] {
    margin: 0 0 8px;
    font: 750 .68rem/1 var(--cc-font-mono);
    letter-spacing: .12em;
    color: var(--cc-accent);
    text-transform: uppercase;
}

.faq-row[b-6eovza1m9e] {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 7px;
    color: var(--cc-fg);
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    animation: faq-row-in-b-6eovza1m9e .32s cubic-bezier(.16, 1, .3, 1) both;
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), border-color .18s, background .18s, box-shadow .18s;
}

.faq-row:hover[b-6eovza1m9e],
.faq-row.active[b-6eovza1m9e] {
    transform: translateX(5px) scale(1.012);
    border-color: color-mix(in oklch, var(--cc-accent) 45%, transparent);
    background: color-mix(in oklch, var(--cc-accent) 9%, var(--cc-bg-card, #141416));
    box-shadow: 0 10px 28px rgba(0,0,0,.24), 0 0 18px color-mix(in oklch, var(--cc-accent) 16%, transparent);
}
.faq-row:active[b-6eovza1m9e] { transform: translateX(3px) scale(1); transition-duration: 60ms; }
.faq-row:focus-visible[b-6eovza1m9e] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}

.faq-row-title[b-6eovza1m9e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.faq-row-meta[b-6eovza1m9e] {
    color: rgba(255,255,255,.42);
    font: 700 .72rem/1 var(--cc-font-mono);
}

.faq-compose-panel[b-6eovza1m9e] {
    padding: 20px;
}

.faq-compose-head[b-6eovza1m9e] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.faq-compose-head h2[b-6eovza1m9e] {
    margin: 3px 0 0;
    font-size: 1.3rem;
}

.faq-kicker[b-6eovza1m9e] {
    color: var(--cc-accent);
    font: 750 .68rem/1 var(--cc-font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.faq-form-grid[b-6eovza1m9e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 12px;
}

.faq-field[b-6eovza1m9e],
.faq-form-grid label[b-6eovza1m9e] {
    display: grid;
    gap: 6px;
    margin-bottom: 13px;
    color: rgba(255,255,255,.65);
    font: 700 .72rem/1 var(--cc-font-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.faq-field input[b-6eovza1m9e],
.faq-field textarea[b-6eovza1m9e],
.faq-form-grid input[b-6eovza1m9e] {
    width: 100%;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    background: rgba(0,0,0,.24);
    color: var(--cc-fg);
    padding: 11px 12px;
    font: 500 .92rem/1.35 var(--cc-font-sans);
    letter-spacing: 0;
    text-transform: none;
    outline: none;
    transition: border-color var(--cc-dur-fast) var(--cc-ease),
                box-shadow var(--cc-dur-fast) var(--cc-ease);
}
.faq-field input:hover:not(:focus)[b-6eovza1m9e],
.faq-field textarea:hover:not(:focus)[b-6eovza1m9e],
.faq-form-grid input:hover:not(:focus)[b-6eovza1m9e] {
    border-color: color-mix(in oklch, var(--cc-border-focus) 50%, var(--cc-border));
}
.faq-field input:focus[b-6eovza1m9e],
.faq-field textarea:focus[b-6eovza1m9e],
.faq-form-grid input:focus[b-6eovza1m9e] {
    border-color: var(--cc-border-focus);
    box-shadow:
        0 0 0 3px color-mix(in oklch, var(--cc-accent) 15%, transparent),
        0 0 10px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 8%, transparent);
}

.faq-field textarea[b-6eovza1m9e] {
    resize: vertical;
    min-height: 260px;
}

.faq-image-editor[b-6eovza1m9e] {
    margin-top: 2px;
    padding: 14px;
    border: 1px dashed rgba(255,255,255,.14);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
}

.faq-image-tools[b-6eovza1m9e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.faq-upload-label[b-6eovza1m9e] {
    position: relative;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.faq-upload-label input[b-6eovza1m9e] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.faq-preview-img[b-6eovza1m9e] {
    display: block;
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.1);
    animation: faq-image-pop-b-6eovza1m9e .34s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes faq-panel-rise-b-6eovza1m9e {
    from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(5px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes faq-row-in-b-6eovza1m9e {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: none; }
}

@keyframes faq-image-pop-b-6eovza1m9e {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: none; }
}

.faq-savebar[b-6eovza1m9e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.faq-status[b-6eovza1m9e] {
    color: var(--cc-success, #22c55e);
    font: 700 .78rem/1 var(--cc-font-sans);
}

.faq-status.error[b-6eovza1m9e] { color: var(--cc-danger, #ef4444); }

.danger[b-6eovza1m9e] {
    border-color: color-mix(in oklch, var(--cc-danger, #ef4444) 38%, transparent);
    color: var(--cc-danger, #ef4444);
}

@media (max-width: 980px) {
    .faq-editor-shell[b-6eovza1m9e] { grid-template-columns: 1fr; }
    .faq-list-panel[b-6eovza1m9e] { max-height: none; }
}

@media (max-width: 640px) {
    .faq-form-grid[b-6eovza1m9e],
    .faq-image-tools[b-6eovza1m9e] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Feedback/FeedbackPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   NEON GLASS MORPHISM — Feedback Panel Redesign (Performance Optimized)
   ═══════════════════════════════════════════════════════════════════════════ */

:root[b-rgzmnkckuc] {
    --neon-cyan: #00D9FF;
    --neon-blue: #0080FF;
    --neon-pink: #FF006E;
    --neon-purple: #B537F2;
    --neon-teal: #2FFFD8;
    --glass-blur: 20px;
}

/* GPU-Acceleration & Performance */
*[b-rgzmnkckuc] {
    --webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* KPI Command Section */
.feedback-command[b-rgzmnkckuc] {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr)) auto;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 50px;
}

/* ⚡ PERFORMANCE: Use will-change sparingly, GPU acceleration via transform */
.feedback-metric[b-rgzmnkckuc] {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 24px;
    background: rgba(15, 20, 25, 0.4);
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    animation: slideUp-b-rgzmnkckuc 0.6s ease-out forwards;
    opacity: 0;
}

.feedback-metric:nth-child(1)[b-rgzmnkckuc] {
    animation-delay: 0.1s;
    border-image: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-blue) 100%) 1;
}

.feedback-metric:nth-child(2)[b-rgzmnkckuc] {
    animation-delay: 0.2s;
    border-image: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) 1;
}

.feedback-metric:nth-child(3)[b-rgzmnkckuc] {
    animation-delay: 0.3s;
    border-image: linear-gradient(135deg, var(--neon-teal) 0%, var(--neon-cyan) 100%) 1;
}

/* ⚡ Reduce pulse animation only on hover to save CPU */
.feedback-metric[b-rgzmnkckuc]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feedback-metric:hover[b-rgzmnkckuc]::before {
    opacity: 1;
    animation: pulse-b-rgzmnkckuc 3s ease-in-out 2;
}

@keyframes slideUp-b-rgzmnkckuc {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-b-rgzmnkckuc {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(-20px, -20px) scale(1.1); opacity: 0.8; }
}

.feedback-metric:hover[b-rgzmnkckuc] {
    transform: translateY(-8px);
}

.feedback-metric:nth-child(1):hover[b-rgzmnkckuc] {
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.6), 0 20px 60px rgba(0, 217, 255, 0.2);
    background: rgba(0, 217, 255, 0.08);
}

.feedback-metric:nth-child(2):hover[b-rgzmnkckuc] {
    box-shadow: 0 0 20px rgba(255, 0, 110, 0.6), 0 20px 60px rgba(255, 0, 110, 0.2);
    background: rgba(255, 0, 110, 0.08);
}

.feedback-metric:nth-child(3):hover[b-rgzmnkckuc] {
    box-shadow: 0 0 20px rgba(47, 255, 216, 0.6), 0 20px 60px rgba(47, 255, 216, 0.2);
    background: rgba(47, 255, 216, 0.08);
}

.feedback-metric span[b-rgzmnkckuc] {
    color: var(--cc-fg);
    font: 700 56px/1 var(--cc-font-sans);
    background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feedback-metric:nth-child(1) span[b-rgzmnkckuc] {
    background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feedback-metric:nth-child(2) span[b-rgzmnkckuc] {
    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feedback-metric small[b-rgzmnkckuc],
.feedback-meta[b-rgzmnkckuc],
.feedback-state span[b-rgzmnkckuc] {
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
    position: relative;
    z-index: 2;
}

/* Refresh Button */
.feedback-refresh[b-rgzmnkckuc] {
    padding: 16px 24px;
    color: var(--neon-cyan);
    cursor: pointer;
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid rgba(0, 217, 255, 0.4);
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    align-self: center;
}

.feedback-refresh:hover[b-rgzmnkckuc] {
    background: rgba(0, 217, 255, 0.15);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.6);
    border-color: var(--neon-cyan);
}

.feedback-refresh:disabled[b-rgzmnkckuc] {
    opacity: .55;
    cursor: wait;
}

/* Filter Navigation */
.feedback-filters[b-rgzmnkckuc] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.feedback-filter[b-rgzmnkckuc],
.feedback-actions button[b-rgzmnkckuc],
.feedback-state button[b-rgzmnkckuc] {
    min-height: 36px;
    padding: 12px 24px;
    border: 1px solid rgba(0, 217, 255, 0.3);
    border-radius: 12px;
    background: rgba(15, 20, 25, 0.5);
    backdrop-filter: blur(var(--glass-blur));
    color: #a0a0a0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.feedback-filter[b-rgzmnkckuc]::before,
.feedback-actions button[b-rgzmnkckuc]::before,
.feedback-state button[b-rgzmnkckuc]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.feedback-filter:hover[b-rgzmnkckuc]::before,
.feedback-actions button:hover[b-rgzmnkckuc]::before,
.feedback-state button:hover[b-rgzmnkckuc]::before {
    left: 100%;
}

.feedback-filter.active[b-rgzmnkckuc],
.feedback-filter:hover[b-rgzmnkckuc],
.feedback-actions button:hover[b-rgzmnkckuc],
.feedback-state button:hover[b-rgzmnkckuc] {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
    background: rgba(0, 217, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.6);
}

.feedback-filter.active[b-rgzmnkckuc] {
    border: 2px solid;
    border-image: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-pink) 100%) 1;
    background: rgba(0, 217, 255, 0.15);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.6), inset 0 0 20px rgba(0, 217, 255, 0.1);
}

/* Feedback List */
.feedback-list[b-rgzmnkckuc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeInUp-b-rgzmnkckuc 0.6s ease-out;
}

@keyframes fadeInUp-b-rgzmnkckuc {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feedback-card[b-rgzmnkckuc],
.feedback-state[b-rgzmnkckuc] {
    border: 1px solid rgba(0, 217, 255, 0.15);
    background: rgba(15, 20, 25, 0.35);
    border-radius: 18px;
    backdrop-filter: blur(var(--glass-blur));
}

.feedback-card[b-rgzmnkckuc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.feedback-card[b-rgzmnkckuc]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.1), transparent);
    transition: left 0.8s ease;
}

.feedback-card:hover[b-rgzmnkckuc]::before {
    left: 100%;
}

.feedback-card:hover[b-rgzmnkckuc] {
    background: rgba(0, 217, 255, 0.12);
    border-color: rgba(0, 217, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.6), 0 10px 40px rgba(0, 217, 255, 0.1);
    transform: translateX(8px);
}

.feedback-card-main[b-rgzmnkckuc] {
    min-width: 0;
    position: relative;
    z-index: 2;
}

.feedback-row[b-rgzmnkckuc] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.feedback-row strong[b-rgzmnkckuc] {
    color: var(--cc-fg);
    font-size: var(--cc-fs-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--neon-cyan);
    font-weight: 600;
}

.feedback-card p[b-rgzmnkckuc] {
    margin: 12px 0 8px;
    color: var(--cc-fg);
    white-space: pre-wrap;
    font-size: 16px;
    font-weight: 600;
}

/* Metadata & Chips */
.feedback-meta[b-rgzmnkckuc] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #808080;
}

.feedback-chip[b-rgzmnkckuc] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
}

.feedback-chip[b-rgzmnkckuc] {
    background: rgba(0, 217, 255, 0.2);
    color: var(--neon-cyan);
    border: 1px solid rgba(0, 217, 255, 0.4);
}

.feedback-chip.reviewed[b-rgzmnkckuc] {
    background: rgba(181, 55, 242, 0.2);
    color: #d8a0ff;
    border: 1px solid rgba(181, 55, 242, 0.4);
}

.feedback-chip.resolved[b-rgzmnkckuc] {
    background: rgba(47, 255, 216, 0.2);
    color: var(--neon-teal);
    border: 1px solid rgba(47, 255, 216, 0.4);
}

.feedback-chip.archived[b-rgzmnkckuc] {
    background: rgba(128, 128, 128, 0.2);
    color: #a0a0a0;
    border: 1px solid rgba(128, 128, 128, 0.4);
}

.feedback-rating[b-rgzmnkckuc] {
    color: var(--cc-fg-muted);
    font-size: 11px;
    position: relative;
    z-index: 2;
}

/* Action Buttons */
.feedback-actions[b-rgzmnkckuc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 126px;
    position: relative;
    z-index: 2;
}

.feedback-actions button[b-rgzmnkckuc] {
    padding: 8px 16px;
    border: 1px solid rgba(0, 217, 255, 0.3);
    background: rgba(0, 217, 255, 0.08);
    color: var(--neon-cyan);
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.feedback-actions button:hover[b-rgzmnkckuc] {
    background: rgba(0, 217, 255, 0.15);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.6);
}

.feedback-actions .muted[b-rgzmnkckuc] {
    border-color: rgba(255, 0, 110, 0.3);
    background: rgba(255, 0, 110, 0.08);
    color: var(--neon-pink);
}

.feedback-actions .muted:hover[b-rgzmnkckuc] {
    background: rgba(255, 0, 110, 0.15);
    border-color: var(--neon-pink);
    box-shadow: 0 0 20px rgba(255, 0, 110, 0.6);
}

/* Empty State */
.feedback-state[b-rgzmnkckuc] {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid rgba(0, 217, 255, 0.15);
    background: rgba(15, 20, 25, 0.35);
    border-radius: 18px;
    backdrop-filter: blur(var(--glass-blur));
}

.feedback-state strong[b-rgzmnkckuc] {
    color: var(--cc-fg);
    font-size: 16px;
}

.feedback-state button[b-rgzmnkckuc] {
    align-self: flex-start;
}

.feedback-error[b-rgzmnkckuc] {
    border-color: rgba(255, 0, 110, 0.3);
    background: rgba(255, 0, 110, 0.08);
}

.feedback-error strong[b-rgzmnkckuc] {
    color: var(--neon-pink);
}

/* Loading State */
.feedback-skeleton[b-rgzmnkckuc] {
    height: 110px;
    border-radius: 18px;
    background: linear-gradient(90deg,
        rgba(15, 20, 25, 0.5),
        rgba(0, 217, 255, 0.15),
        rgba(15, 20, 25, 0.5));
    background-size: 220% 100%;
    animation: feedback-pulse-b-rgzmnkckuc 1.4s ease-in-out infinite;
    border: 1px solid rgba(0, 217, 255, 0.1);
}

@keyframes feedback-pulse-b-rgzmnkckuc {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* ── Form Editor ────────────────────────────────────────────────────────── */

.form-fields-preview[b-rgzmnkckuc] {
    margin-top: var(--cc-s-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--cc-s-3);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    background: color-mix(in oklch, var(--cc-bg-elev) 60%, transparent);
}

.form-field-row[b-rgzmnkckuc] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg);
    padding: 4px 0;
}

.form-field-type[b-rgzmnkckuc] {
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: color-mix(in oklch, var(--cc-accent) 14%, transparent);
    color: var(--cc-accent);
    flex-shrink: 0;
}

.form-field-label[b-rgzmnkckuc] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-field-required[b-rgzmnkckuc] {
    font-size: 10px;
    font-weight: 700;
    color: var(--cc-danger);
    flex-shrink: 0;
}

.form-editor-overlay[b-rgzmnkckuc] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cc-s-6);
    animation: form-overlay-in-b-rgzmnkckuc .18s ease both;
}

@keyframes form-overlay-in-b-rgzmnkckuc {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.form-editor-panel[b-rgzmnkckuc] {
    width: min(640px, 100%);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 8%, transparent), transparent 42%),
        var(--cc-bg-card);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-xl, 16px);
    padding: var(--cc-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .4),
        0 0 0 1px rgba(255, 255, 255, .04) inset;
    animation: form-panel-in-b-rgzmnkckuc .22s cubic-bezier(.22, .68, 0, 1.04) both;
}

@keyframes form-panel-in-b-rgzmnkckuc {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.form-editor-panel h3[b-rgzmnkckuc] {
    color: var(--cc-fg);
    font-size: 18px;
    margin: 0;
}

.form-editor-label[b-rgzmnkckuc] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-sans);
    color: var(--cc-fg-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.form-editor-actions[b-rgzmnkckuc] {
    display: flex;
    gap: var(--cc-s-2);
    padding-top: var(--cc-s-3);
    border-top: 1px solid var(--cc-border-soft);
}

.form-editor-help[b-rgzmnkckuc],
.form-editor-preview-note[b-rgzmnkckuc] {
    margin: 0 0 10px;
}

.form-question-slots[b-rgzmnkckuc] {
    display: grid;
    gap: 8px;
}

.form-question-slot[b-rgzmnkckuc] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.form-question-slot-no[b-rgzmnkckuc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--cc-accent) 14%, transparent);
    color: var(--cc-accent);
    font-size: 12px;
    font-weight: 700;
}

.form-field-editor[b-rgzmnkckuc] {
    display: grid;
    gap: 10px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--cc-border-soft);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.form-field-editor-row[b-rgzmnkckuc] {
    display: grid;
    gap: 6px;
}

.form-field-editor-row label[b-rgzmnkckuc] {
    font-size: 11px;
    color: var(--cc-fg-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.form-field-editor-actions[b-rgzmnkckuc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.form-field-required-toggle[b-rgzmnkckuc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-size: 13px;
    color: var(--cc-fg-muted);
}

/* ⚡ PERFORMANCE: Disable animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
    *[b-rgzmnkckuc] {
        animation: none !important;
        transition: none !important;
    }
}

/* ⚡ Responsive & Performance Optimized */
@media (max-width: 900px) {
    .feedback-command[b-rgzmnkckuc],
    .feedback-card[b-rgzmnkckuc] {
        grid-template-columns: 1fr;
    }

    .feedback-actions[b-rgzmnkckuc] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* ⚡ Reduce animations on smaller devices */
    .feedback-metric[b-rgzmnkckuc] {
        animation: none;
        opacity: 1;
    }
}
/* /Pages/Governance/GovernancePage.razor.rz.scp.css */
/* GovernancePage scoped styles */

@media (max-width: 767px) {
    .governance-grid[b-ag8yeskmwk] {
        grid-template-columns: 1fr !important;
    }

    .governance-grid .card[b-ag8yeskmwk] {
        padding: 14px !important;
    }
}
/* /Pages/HubContent/HubContentPage.razor.rz.scp.css */
/* HubContentPage — scoped styles
   Global: content-list, content-card, content-create-form (content-studio.css)
            media-action-btn, media-badge, media-detail-table (media.css)
   Scoped: CTR-Chip, type-specific accents, create-form fields */

/* CTR-Chip: grüner Akzent wenn > 2% */
[b-63oqsqis4e] .ctr-highlight {
    color: var(--cc-success);
    font-weight: 600;
}

/* Featured-Karte: goldener linker Streifen */
[b-63oqsqis4e] .content-card[data-type="Featured"] {
    border-left: 3px solid var(--cc-neon-gold);
}

/* Highlight-Karte: cyan linker Streifen */
[b-63oqsqis4e] .content-card[data-type="Highlight"] {
    border-left: 3px solid var(--cc-cyan);
}

/* Banner-Karte: violetter Streifen */
[b-63oqsqis4e] .content-card[data-type="Banner"] {
    border-left: 3px solid var(--cc-violet);
}

/* Create-Form: zwei-spaltig auf breiten Screens */
@media (min-width: 640px) {
    [b-63oqsqis4e] .hub-create-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--cc-s-3);
    }
}
/* /Pages/Milestones/MilestonesPage.razor.rz.scp.css */
/* MilestonesPage scoped styles */

@media (max-width: 767px) {
    /* Tab row: horizontal scroll */
    .milestones-tabs[b-zy3oodww1g] {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .milestones-tabs[b-zy3oodww1g]::-webkit-scrollbar { display: none; }

    /* Card grid: 1 column on very narrow screens */
    .milestones-grid[b-zy3oodww1g] {
        grid-template-columns: 1fr !important;
    }

    .milestone-card[b-zy3oodww1g] { padding: var(--cc-s-3) !important; }
}
/* /Pages/Moderation/CaseDetailPanel.razor.rz.scp.css */
/* ── CaseDetailPanel.razor.css ──────────────────────────────────────────── */

.cdp-root[b-3vbyi1ut6v] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header */
.cdp-header[b-3vbyi1ut6v] {
    padding: var(--cc-s-4) var(--cc-s-5);
    border-bottom: 1px solid var(--cc-border-soft);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cc-s-3);
    flex-shrink: 0;
}

.cdp-kind-badge[b-3vbyi1ut6v] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 99px;
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    margin-bottom: var(--cc-s-2);
}

.cdp-title[b-3vbyi1ut6v] {
    font: 700 var(--cc-fs-md)/1.25 var(--cc-font-sans);
    color: var(--cc-fg);
    margin: 0;
}

.cdp-sub[b-3vbyi1ut6v] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    margin: 4px 0 0;
}

.cdp-close[b-3vbyi1ut6v] {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Body */
.cdp-body[b-3vbyi1ut6v] {
    flex: 1;
    overflow-y: auto;
    padding: var(--cc-s-4) var(--cc-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
}

/* Sections */
.cdp-section[b-3vbyi1ut6v] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
}

.cdp-section-title[b-3vbyi1ut6v] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-fg-dim);
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 1px solid var(--cc-border-soft);
    padding-bottom: var(--cc-s-2);
}

/* Fields */
.cdp-fields[b-3vbyi1ut6v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cc-s-3);
}

.cdp-field[b-3vbyi1ut6v] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cdp-lbl[b-3vbyi1ut6v] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    font-family: var(--cc-font-mono);
}

.cdp-val[b-3vbyi1ut6v] {
    font: 500 var(--cc-fs-sm)/1.4 var(--cc-font-sans);
    color: var(--cc-fg);
}

.cdp-admin[b-3vbyi1ut6v] {
    color: var(--cc-danger);
    font-weight: 700;
}

.cdp-danger[b-3vbyi1ut6v] { color: var(--cc-danger); font-weight: 700; }
.cdp-dim[b-3vbyi1ut6v]    { color: var(--cc-fg-dim); font-size: var(--cc-fs-xs); }

/* Payload block */
.cdp-payload[b-3vbyi1ut6v] {
    background: linear-gradient(90deg,
        color-mix(in oklch, var(--cc-accent) 8%, transparent), transparent);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    font: 400 var(--cc-fs-sm)/1.6 var(--cc-font-sans);
    color: var(--cc-fg-muted);
    font-style: italic;
}

/* Chat Messages */
.cdp-chat-msg[b-3vbyi1ut6v] {
    padding: var(--cc-s-3);
    border-radius: var(--cc-r-md);
    background: var(--cc-bg-elev);
    border: 1px solid var(--cc-border-soft);
    margin-top: var(--cc-s-2);
}

.cdp-chat-msg.reported[b-3vbyi1ut6v] {
    background: color-mix(in oklch, var(--cc-warning) 10%, transparent);
    border-color: color-mix(in oklch, var(--cc-warning) 35%, transparent);
}

.cdp-msg-meta[b-3vbyi1ut6v] {
    display: flex;
    justify-content: space-between;
    gap: var(--cc-s-2);
    font: 500 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-fg-muted);
    margin-bottom: var(--cc-s-1);
}

.cdp-chat-msg p[b-3vbyi1ut6v] {
    font-size: var(--cc-fs-sm);
    color: var(--cc-fg);
    line-height: 1.5;
    margin: 0;
}

.cdp-prior-reports[b-3vbyi1ut6v] {
    margin-top: var(--cc-s-2);
    padding: var(--cc-s-2) var(--cc-s-3);
    border-radius: var(--cc-r-sm);
    background: color-mix(in oklch, var(--cc-danger) 8%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-danger) 22%, transparent);
}

/* KYC Doc Grid */
.cdp-doc-grid[b-3vbyi1ut6v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cc-s-3);
    margin-top: var(--cc-s-2);
}

.cdp-doc-placeholder[b-3vbyi1ut6v] {
    aspect-ratio: 4/3;
    background: var(--cc-bg-elev);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cc-s-1);
    color: var(--cc-fg-dim);
    font: 500 var(--cc-fs-xs)/1 var(--cc-font-mono);
}

.cdp-doc-placeholder small[b-3vbyi1ut6v] {
    font-size: 10px;
    color: var(--cc-fg-dim);
    opacity: .6;
}

.cdp-field-wide[b-3vbyi1ut6v] {
    grid-column: 1 / -1;
}

.cdp-url-break[b-3vbyi1ut6v] {
    word-break: break-all;
}

.cdp-social-actions[b-3vbyi1ut6v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-2);
    margin-top: var(--cc-s-3);
}

/* Note textarea */
.cdp-note[b-3vbyi1ut6v] {
    width: 100%;
    min-height: 72px;
    background: var(--cc-bg-elev);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    color: var(--cc-fg);
    font: 400 var(--cc-fs-sm)/1.5 var(--cc-font-sans);
    resize: vertical;
    outline: none;
    transition: border-color var(--cc-dur-fast);
}

.cdp-note:hover:not(:focus)[b-3vbyi1ut6v] {
    border-color: color-mix(in oklch, var(--cc-border-focus) 50%, var(--cc-border));
}
.cdp-note:focus[b-3vbyi1ut6v] {
    border-color: color-mix(in oklch, var(--cc-accent) 50%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in oklch, var(--cc-accent) 15%, transparent),
        0 0 10px color-mix(in oklch, var(--cc-neon-cyan, #00E5FF) 8%, transparent);
}

/* Audit Trail */
.cdp-audit-row[b-3vbyi1ut6v] {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-s-3);
    padding: var(--cc-s-2) 0;
    border-bottom: 1px solid var(--cc-border-soft);
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    line-height: 1.5;
}

.cdp-audit-row strong[b-3vbyi1ut6v] { color: var(--cc-fg); }

.cdp-audit-dot[b-3vbyi1ut6v] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cc-accent);
    margin-top: 4px;
    flex-shrink: 0;
}

/* Footer */
.cdp-footer[b-3vbyi1ut6v] {
    padding: var(--cc-s-3) var(--cc-s-5);
    border-top: 1px solid var(--cc-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-2);
    flex-shrink: 0;
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--cc-bg-elev) 88%, transparent), var(--cc-bg-card));
}

.cdp-footer .btn-sm[b-3vbyi1ut6v] {
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 8%, transparent);
}

/* Critical page hardening: keep final actions visible inside sticky case shells. */
.cdp-root[b-3vbyi1ut6v],
.cdp-body[b-3vbyi1ut6v] {
    min-height: 0;
}

.cdp-footer[b-3vbyi1ut6v] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: color-mix(in oklch, var(--cc-bg-card) 94%, transparent);
    backdrop-filter: blur(14px);
}

@media (max-width: 767px) {
    .cdp-footer[b-3vbyi1ut6v] {
        padding: var(--cc-s-3);
    }
}
/* /Pages/Moderation/InboxItem.razor.rz.scp.css */
/* ── InboxItem.razor.css ────────────────────────────────────────────────── */

.ii-item[b-e7z929r01c] {
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-lg);
    background: var(--cc-bg-glass, var(--cc-bg-card));
    backdrop-filter: blur(12px);
    overflow: visible;
    transition: border-color var(--cc-dur-fast), box-shadow var(--cc-dur-fast);
}

.ii-item:hover[b-e7z929r01c]          { border-color: var(--cc-border-luxe, var(--cc-border)); }
.ii-item.unread[b-e7z929r01c]         { border-left: 3px solid var(--cc-accent); }
.ii-item.prio-critical[b-e7z929r01c]  { border-left: 3px solid var(--cc-danger); }
.ii-item.prio-high.unread[b-e7z929r01c] { border-left: 3px solid var(--cc-warning); }

.ii-item.expanded[b-e7z929r01c] {
    border-color: color-mix(in oklch, var(--cc-accent) 35%, var(--cc-border));
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--cc-accent) 14%, transparent),
                var(--cc-shadow-md, 0 4px 16px rgba(0,0,0,.4));
}

/* Collapsed Row */
.ii-row[b-e7z929r01c] {
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto auto auto auto;
    gap: var(--cc-s-3);
    align-items: center;
    padding: var(--cc-s-3) var(--cc-s-4);
    min-height: 48px;
    text-align: left;
    transition: background var(--cc-dur-fast);
}

.ii-row:hover[b-e7z929r01c] {
    background: linear-gradient(90deg,
        color-mix(in oklch, var(--cc-accent) 7%, transparent), transparent);
}
.ii-row:active[b-e7z929r01c] { transform: scale(.995); transition-duration: 60ms; }
.ii-row:focus-visible[b-e7z929r01c] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: -2px;
    border-radius: var(--cc-r-md);
}

.ii-kind-badge[b-e7z929r01c] {
    padding: 3px 8px;
    border-radius: 99px;
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

.ii-title-group[b-e7z929r01c] { min-width: 0; }

.ii-title[b-e7z929r01c] {
    display: block;
    font: 600 var(--cc-fs-sm)/1.25 var(--cc-font-sans);
    color: var(--cc-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ii-sub[b-e7z929r01c] {
    display: block;
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ii-unread[b-e7z929r01c] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cc-accent);
    box-shadow: 0 0 6px var(--cc-accent);
    flex-shrink: 0;
}

.ii-time[b-e7z929r01c] {
    font: 500 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-fg-dim);
    white-space: nowrap;
    flex-shrink: 0;
}

.ii-admin-tag[b-e7z929r01c] {
    padding: 2px 7px;
    border-radius: 99px;
    font: 700 10px/1 var(--cc-font-mono);
    background: color-mix(in oklch, var(--cc-danger) 12%, transparent);
    color: var(--cc-danger);
    border: 1px solid color-mix(in oklch, var(--cc-danger) 30%, transparent);
    flex-shrink: 0;
}

.ii-chevron[b-e7z929r01c] {
    font-size: 16px;
    color: var(--cc-fg-dim);
    transition: transform var(--cc-dur-fast);
    flex-shrink: 0;
}
.ii-chevron.open[b-e7z929r01c] { transform: rotate(90deg); }

/* Expanded Detail */
.ii-detail[b-e7z929r01c] {
    border-top: 1px solid var(--cc-border-soft);
    padding: var(--cc-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
    animation: ii-drop-b-e7z929r01c .18s var(--cc-ease, cubic-bezier(.16,1,.3,1));
}

@keyframes ii-drop-b-e7z929r01c {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ii-meta-grid[b-e7z929r01c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--cc-s-3);
}

.ii-meta-card[b-e7z929r01c] {
    background: var(--cc-bg-elev);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ii-meta-label[b-e7z929r01c] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-fg-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ii-meta-val[b-e7z929r01c] {
    font: 500 var(--cc-fs-sm)/1.3 var(--cc-font-sans);
    color: var(--cc-fg);
}

.ii-payload[b-e7z929r01c] {
    background: linear-gradient(90deg,
        color-mix(in oklch, var(--cc-accent) 8%, transparent), transparent);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    font: 400 italic var(--cc-fs-sm)/1.6 var(--cc-font-sans);
    color: var(--cc-fg-muted);
}

.ii-actions[b-e7z929r01c] {
    display: flex;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
    padding-top: var(--cc-s-2);
    border-top: 1px solid var(--cc-border-soft);
}

/* Convenience button variants (extend existing .btn-secondary) */
.btn-success[b-e7z929r01c] {
    background: color-mix(in oklch, var(--cc-success) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-success) 40%, transparent);
    color: var(--cc-success);
    border-radius: var(--cc-r-md);
    cursor: pointer;
    font: 600 var(--cc-fs-xs)/1 var(--cc-font-sans);
    transition: background var(--cc-dur-fast);
}
.btn-success:hover[b-e7z929r01c] {
    background: color-mix(in oklch, var(--cc-success) 22%, transparent);
    box-shadow: 0 0 10px color-mix(in oklch, var(--cc-success) 16%, transparent);
}
.btn-success:active[b-e7z929r01c] { transform: scale(.96); transition-duration: 60ms; }
.btn-success:focus-visible[b-e7z929r01c] { outline: 2px solid var(--cc-border-focus); outline-offset: 2px; }

.btn-danger[b-e7z929r01c] {
    background: color-mix(in oklch, var(--cc-danger) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-danger) 40%, transparent);
    color: var(--cc-danger);
    border-radius: var(--cc-r-md);
    cursor: pointer;
    font: 600 var(--cc-fs-xs)/1 var(--cc-font-sans);
    transition: background var(--cc-dur-fast);
}
.btn-danger:hover[b-e7z929r01c] {
    background: color-mix(in oklch, var(--cc-danger) 22%, transparent);
    box-shadow: 0 0 10px color-mix(in oklch, var(--cc-danger) 16%, transparent);
}
.btn-danger:active[b-e7z929r01c] { transform: scale(.96); transition-duration: 60ms; }
.btn-danger:focus-visible[b-e7z929r01c] { outline: 2px solid var(--cc-border-focus); outline-offset: 2px; }

.btn-warn[b-e7z929r01c] {
    background: color-mix(in oklch, var(--cc-warning) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-warning) 40%, transparent);
    color: var(--cc-warning);
    border-radius: var(--cc-r-md);
    cursor: pointer;
    font: 600 var(--cc-fs-xs)/1 var(--cc-font-sans);
    transition: background var(--cc-dur-fast);
}
.btn-warn:hover[b-e7z929r01c] {
    background: color-mix(in oklch, var(--cc-warning) 22%, transparent);
    box-shadow: 0 0 10px color-mix(in oklch, var(--cc-warning) 16%, transparent);
}
.btn-warn:active[b-e7z929r01c] { transform: scale(.96); transition-duration: 60ms; }
.btn-warn:focus-visible[b-e7z929r01c] { outline: 2px solid var(--cc-border-focus); outline-offset: 2px; }
/* /Pages/Moderation/ModerationInboxPage.razor.rz.scp.css */
/* ── ModerationInboxPage.razor.css ──────────────────────────────────────── */

/* KPI Row */
.mi-kpi-row[b-uh9devday2] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--cc-s-3);
}

.mi-kpi[b-uh9devday2] {
    position: relative;
    overflow: hidden;
    padding: var(--cc-s-4);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 6%, transparent), transparent 55%),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
}

.mi-kpi.danger[b-uh9devday2] {
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-danger) 10%, transparent), transparent),
        var(--cc-bg-glass, var(--cc-bg-card));
    border-color: color-mix(in oklch, var(--cc-danger) 28%, var(--cc-border));
}

.mi-kpi.warn[b-uh9devday2] {
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-warning) 10%, transparent), transparent),
        var(--cc-bg-glass, var(--cc-bg-card));
    border-color: color-mix(in oklch, var(--cc-warning) 28%, var(--cc-border));
}

.mi-kpi-bar[b-uh9devday2] {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--cc-accent);
}
.mi-kpi-bar.danger[b-uh9devday2]  { background: var(--cc-danger); }
.mi-kpi-bar.warn[b-uh9devday2]    { background: var(--cc-warning); }
.mi-kpi-bar.success[b-uh9devday2] { background: var(--cc-success); }
.mi-kpi-bar.accent[b-uh9devday2]  { background: var(--cc-accent); }

.mi-kpi-label[b-uh9devday2] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-fg-dim);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.mi-kpi-val[b-uh9devday2] {
    font: 780 var(--cc-fs-xl)/1 var(--cc-font-sans);
    color: var(--cc-fg);
}

.mi-kpi-sub[b-uh9devday2] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
}

/* Command Bar */
.mi-command[b-uh9devday2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-3);
    align-items: center;
    padding: var(--cc-s-4);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(180deg, color-mix(in oklch, white 2%, transparent), transparent 56px),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
}

.mi-command[b-uh9devday2]::after {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background: radial-gradient(120px 60px at 10% 0%,
        color-mix(in oklch, var(--cc-accent) 16%, transparent), transparent 65%);
    opacity: .7;
}

.mi-search[b-uh9devday2] { flex: 1; min-width: 200px; }
.mi-search .input[b-uh9devday2] { max-width: none; }

.mi-kind-filters[b-uh9devday2] {
    display: flex;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
    align-items: center;
}

.mi-kind-filters button[b-uh9devday2] {
    padding: 5px 10px;
    border-radius: var(--cc-r-md);
    border: 1px solid var(--cc-border-soft);
    background: color-mix(in oklch, var(--cc-bg-elev) 72%, transparent);
    color: var(--cc-fg-muted);
    font: 600 var(--cc-fs-xs)/1 var(--cc-font-sans);
    cursor: pointer;
    transition: all var(--cc-dur-fast);
    white-space: nowrap;
}

.mi-kind-filters button:hover[b-uh9devday2],
.mi-kind-filters button.active[b-uh9devday2] {
    border-color: color-mix(in oklch, var(--cc-accent) 44%, var(--cc-border));
    background: color-mix(in oklch, var(--cc-accent) 12%, var(--cc-bg-hover));
    color: var(--cc-fg);
    transform: translateY(-1px);
    box-shadow: 0 0 8px color-mix(in oklch, var(--cc-accent) 10%, transparent);
}
.mi-kind-filters button:active[b-uh9devday2] {
    transform: scale(.93);
    transition-duration: 60ms;
    filter: brightness(.85);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.3);
}
.mi-kind-filters button:focus-visible[b-uh9devday2] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}

/* Grid Layout */
.mi-grid[b-uh9devday2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cc-s-4);
    flex: 1;
    min-height: 0;
}

.mi-grid.split[b-uh9devday2] {
    grid-template-columns: 1fr 400px;
}

/* Inbox List */
.mi-inbox-list[b-uh9devday2] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
    overflow-y: auto;
}

/* Case Panel */
.mi-case-panel[b-uh9devday2] {
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 7%, transparent), transparent 42%),
        var(--cc-bg-glass, var(--cc-bg-card));
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    backdrop-filter: blur(14px);
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Footer */
.mi-footer[b-uh9devday2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
}

.mi-footer > div[b-uh9devday2] {
    display: flex;
    gap: var(--cc-s-2);
}

.mi-error-banner[b-uh9devday2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-3);
    flex-wrap: wrap;
}

.mi-error-actions[b-uh9devday2] {
    display: flex;
    gap: var(--cc-s-2);
    align-items: center;
}

/* Responsive */
@media (max-width: 1280px) {
    .mi-kpi-row[b-uh9devday2]         { grid-template-columns: repeat(3, 1fr); }
    .mi-grid.split[b-uh9devday2]      { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .mi-kpi-row[b-uh9devday2]         { grid-template-columns: repeat(2, 1fr); }
    .mi-command[b-uh9devday2]         { flex-direction: column; align-items: stretch; }
    .mi-kind-filters[b-uh9devday2]    { flex-wrap: wrap; }
}

@media (max-width: 540px) {
    .mi-kpi-row[b-uh9devday2]         { grid-template-columns: 1fr 1fr; }
}

/* Critical page hardening: command filters stay reachable and detail panels scroll safely. */
.mi-shell[b-uh9devday2],
.mi-grid[b-uh9devday2],
.mi-inbox-list[b-uh9devday2],
.mi-case-panel[b-uh9devday2] {
    min-width: 0;
}

.mi-command[b-uh9devday2] {
    position: sticky;
    top: calc(92px + env(safe-area-inset-top));
    z-index: 24;
    overflow: visible;
}

.mi-command[b-uh9devday2]::after {
    pointer-events: none;
}

.mi-command > *[b-uh9devday2] {
    position: relative;
    z-index: 1;
}

.mi-kind-filters[b-uh9devday2] {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mi-grid.split[b-uh9devday2] {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
}

.mi-case-panel[b-uh9devday2] {
    position: sticky;
    top: calc(148px + env(safe-area-inset-top));
    align-self: start;
    max-height: calc(100dvh - 168px);
}

@media (max-width: 1280px) {
    .mi-command[b-uh9devday2],
    .mi-case-panel[b-uh9devday2] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 540px) {
    .mi-kind-filters[b-uh9devday2] {
        width: 100%;
    }
}
/* /Pages/Notifications/NotificationsPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Notification Center — High-Tech Redesign
   Features: Smart Grouping, Delivery Status, Template Sidebar
   ═══════════════════════════════════════════════════════════════ */

/* ── KPI Pills ──────────────────────────────────────────────── */
.kpi-pill[b-umzrj8drqe] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--cc-border, rgba(255,255,255,.08));
    font: 500 .8rem/1 var(--cc-font-sans);
    margin-left: 8px;
}

.kpi-pill.alert[b-umzrj8drqe] {
    border-color: color-mix(in oklch, var(--cc-warning, #f59e0b) 40%, transparent);
    background:   color-mix(in oklch, var(--cc-warning, #f59e0b) 10%, transparent);
    color: var(--cc-warning, #f59e0b);
}

.kpi-pill .dim[b-umzrj8drqe] { color: rgba(255,255,255,.4); font-weight: 400; }

/* ── Toggle Buttons (Grouped, Templates) ────────────────────── */
.btn-toggle[b-umzrj8drqe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid var(--cc-border, rgba(255,255,255,.1));
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.6);
    cursor: pointer;
    transition: all .18s;
}

.btn-toggle:hover[b-umzrj8drqe],
.btn-toggle.active[b-umzrj8drqe] {
    background: color-mix(in oklch, var(--cc-accent, #38bdf8) 15%, transparent);
    border-color: color-mix(in oklch, var(--cc-accent, #38bdf8) 50%, transparent);
    color: var(--cc-accent, #38bdf8);
}

.last-refresh-hint[b-umzrj8drqe] { font: 400 .72rem var(--cc-font-mono); }

/* ── Tabs ───────────────────────────────────────────────────── */
.notification-hub-tabs[b-umzrj8drqe] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 14px;
}

.notification-hub-tab[b-umzrj8drqe] {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    color: var(--cc-fg, #fff);
    background: color-mix(in oklch, var(--cc-bg-card, #141416) 92%, transparent);
    border: 1px solid var(--cc-border, rgba(255,255,255,.08));
    border-radius: 8px;
    text-align: left;
    transition: transform .16s, border-color .16s, background .16s;
    cursor: pointer;
}

.notification-hub-tab:hover[b-umzrj8drqe],
.notification-hub-tab.active[b-umzrj8drqe] {
    transform: translateY(-1px);
    border-color: color-mix(in oklch, var(--cc-accent) 42%, transparent);
    background: color-mix(in oklch, var(--cc-accent) 7%, var(--cc-bg-card, #141416));
}

.notification-hub-tab span[b-umzrj8drqe] { font-size: .82rem; font-weight: 700; }
.notification-hub-tab strong[b-umzrj8drqe] { font: 700 1rem/1 var(--cc-font-mono); color: var(--cc-accent); }

/* ── Main Layout (list + sidebar) ───────────────────────────── */
.notif-layout[b-umzrj8drqe] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.notif-layout.with-sidebar[b-umzrj8drqe] {
    grid-template-columns: 1fr 320px;
}

/* ── Notification List ──────────────────────────────────────── */
.notif-list[b-umzrj8drqe] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 72px;
}

/* ── Notification Item ──────────────────────────────────────── */
.notif-item[b-umzrj8drqe] {
    position: relative;
    background: var(--cc-bg-card, #141416);
    border: 1px solid var(--cc-border, rgba(255,255,255,.08));
    border-left: 3px solid transparent;
    border-radius: 9px;
    transform-origin: center top;
    transition: transform .17s, border-color .17s, background .17s, box-shadow .17s;
}

.notif-item.unread[b-umzrj8drqe]      { border-left-color: var(--notif-accent, var(--cc-accent)); }
.notif-item.cat-moderation[b-umzrj8drqe]    { --notif-accent: var(--cc-danger, #ef4444); }
.notif-item.cat-support[b-umzrj8drqe]       { --notif-accent: var(--cc-warning, #f59e0b); }
.notif-item.cat-communication[b-umzrj8drqe] { --notif-accent: var(--cc-accent, #38bdf8); }
.notif-item.cat-system[b-umzrj8drqe]        { --notif-accent: var(--cc-success, #22c55e); }
.notif-item.cat-inbox[b-umzrj8drqe]         { --notif-accent: var(--cc-accent, #38bdf8); }

.notif-item:hover[b-umzrj8drqe],
.notif-item:focus-within[b-umzrj8drqe] {
    transform: scale(1.012);
    z-index: 3;
    border-color: color-mix(in oklch, var(--notif-accent) 46%, transparent);
    background: color-mix(in oklch, var(--notif-accent) 5%, var(--cc-bg-card, #141416));
    box-shadow: 0 14px 36px rgba(0,0,0,.26);
}

.notif-main[b-umzrj8drqe] {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 13px;
    width: 100%;
    padding: 13px 16px;
    color: inherit;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.notif-dot[b-umzrj8drqe] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    background: rgba(255,255,255,.15);
}

.notif-item.unread .notif-dot[b-umzrj8drqe] {
    background: var(--notif-accent);
    box-shadow: 0 0 8px color-mix(in oklch, var(--notif-accent) 50%, transparent);
}

.notif-body[b-umzrj8drqe] { min-width: 0; }

.notif-head[b-umzrj8drqe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.notif-head-right[b-umzrj8drqe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.notif-type[b-umzrj8drqe] {
    font: 700 .65rem/1 var(--cc-font-mono);
    letter-spacing: .08em;
    color: var(--notif-accent);
    text-transform: uppercase;
}

/* ── Delivery Badges ────────────────────────────────────────── */
.delivery-badge[b-umzrj8drqe] {
    font: 700 .6rem/1 var(--cc-font-mono);
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.unread-badge[b-umzrj8drqe] {
    background: color-mix(in oklch, var(--notif-accent) 20%, transparent);
    color: var(--notif-accent);
    border: 1px solid color-mix(in oklch, var(--notif-accent) 40%, transparent);
    animation: pulse-badge-b-umzrj8drqe 2.4s ease infinite;
}

.read-badge[b-umzrj8drqe] {
    background: rgba(34,197,94,.1);
    color: rgba(34,197,94,.7);
    border: 1px solid rgba(34,197,94,.2);
}

@keyframes pulse-badge-b-umzrj8drqe {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

.notif-time[b-umzrj8drqe] {
    font: 400 .68rem/1 var(--cc-font-mono);
    color: rgba(255,255,255,.35);
}

.notif-msg[b-umzrj8drqe] {
    max-width: 900px;
    font: 400 .86rem/1.45 var(--cc-font-sans);
    color: rgba(255,255,255,.86);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item:hover .notif-msg[b-umzrj8drqe],
.notif-item:focus-within .notif-msg[b-umzrj8drqe] { -webkit-line-clamp: 8; }

.notif-meta[b-umzrj8drqe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    font: 400 .68rem/1 var(--cc-font-mono);
}

.delivery-dot[b-umzrj8drqe] { color: rgba(255,255,255,.35); }

.meta-link[b-umzrj8drqe] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,.45);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: 400 .68rem/1 var(--cc-font-mono);
    padding: 0;
    transition: color .15s;
}
.meta-link:hover[b-umzrj8drqe] { color: var(--cc-accent); }

.meta-tag[b-umzrj8drqe] {
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.4);
    font-size: .62rem;
}

.notif-actions[b-umzrj8drqe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 0 16px 13px 39px;
    animation: notif-actions-in-b-umzrj8drqe .13s ease both;
}

@keyframes notif-actions-in-b-umzrj8drqe {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Smart Grouping ─────────────────────────────────────────── */
.notif-group[b-umzrj8drqe] {
    border: 1px solid var(--cc-border, rgba(255,255,255,.08));
    border-left: 3px solid var(--notif-accent, var(--cc-accent));
    border-radius: 9px;
    background: var(--cc-bg-card, #141416);
    overflow: hidden;
    animation: cc-hub-card-in-b-umzrj8drqe .42s cubic-bezier(.16, 1, .3, 1) both;
    transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .18s, box-shadow .18s;
}

.notif-group.cat-moderation[b-umzrj8drqe]    { --notif-accent: var(--cc-danger, #ef4444); }
.notif-group.cat-support[b-umzrj8drqe]       { --notif-accent: var(--cc-warning, #f59e0b); }
.notif-group.cat-communication[b-umzrj8drqe] { --notif-accent: var(--cc-accent, #38bdf8); }
.notif-group.cat-system[b-umzrj8drqe]        { --notif-accent: var(--cc-success, #22c55e); }
.notif-group.cat-inbox[b-umzrj8drqe]         { --notif-accent: var(--cc-accent, #38bdf8); }

.notif-group:hover[b-umzrj8drqe] {
    transform: translateY(-3px) scale(1.006);
    border-color: color-mix(in oklch, var(--notif-accent) 50%, transparent);
    box-shadow: 0 18px 46px rgba(0,0,0,.32), 0 0 24px color-mix(in oklch, var(--notif-accent) 18%, transparent);
}

.notif-group-header[b-umzrj8drqe] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: background .15s;
}

.notif-group-header:hover[b-umzrj8drqe] {
    background: rgba(255,255,255,.025);
}

.group-dot[b-umzrj8drqe] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--notif-accent);
    box-shadow: 0 0 10px color-mix(in oklch, var(--notif-accent) 50%, transparent);
}

.group-info[b-umzrj8drqe] {
    flex: 1;
    min-width: 0;
}

.group-type[b-umzrj8drqe] {
    display: block;
    font: 700 .72rem/1 var(--cc-font-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--notif-accent);
    margin-bottom: 3px;
}

.group-summary[b-umzrj8drqe] {
    display: block;
    font: 400 .82rem/1.3 var(--cc-font-sans);
    color: rgba(255,255,255,.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-meta[b-umzrj8drqe] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.group-badge[b-umzrj8drqe] {
    font: 700 .65rem/1 var(--cc-font-mono);
    padding: 3px 8px;
    border-radius: 6px;
}

.badge-alert[b-umzrj8drqe] {
    background: color-mix(in oklch, var(--notif-accent) 18%, transparent);
    color: var(--notif-accent);
    border: 1px solid color-mix(in oklch, var(--notif-accent) 36%, transparent);
}

.badge-muted[b-umzrj8drqe] {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.08);
}

.group-count[b-umzrj8drqe] {
    font: 400 .68rem/1 var(--cc-font-mono);
    color: rgba(255,255,255,.35);
    white-space: nowrap;
}

.group-chevron[b-umzrj8drqe] {
    color: rgba(255,255,255,.35);
    flex-shrink: 0;
    transition: transform .2s;
}

.group-items[b-umzrj8drqe] {
    padding: 0 0 6px;
    border-top: 1px solid var(--cc-border, rgba(255,255,255,.06));
    animation: cc-hub-reveal-b-umzrj8drqe .24s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cc-hub-card-in-b-umzrj8drqe {
    from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes cc-hub-reveal-b-umzrj8drqe {
    from { opacity: 0; transform: translateY(-10px) scaleY(.96); }
    to { opacity: 1; transform: none; }
}

.group-items .notif-item[b-umzrj8drqe] {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.group-items .notif-item:last-child[b-umzrj8drqe] { border-bottom: 0; }

/* ── Template Sidebar ───────────────────────────────────────── */
.template-sidebar[b-umzrj8drqe] {
    position: sticky;
    top: 80px;
    background: var(--cc-bg-card, #141416);
    border: 1px solid var(--cc-border, rgba(255,255,255,.08));
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    animation: slide-in-right-b-umzrj8drqe .22s ease both;
}

@keyframes slide-in-right-b-umzrj8drqe {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.tmpl-header[b-umzrj8drqe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--cc-border, rgba(255,255,255,.07));
    flex-shrink: 0;
}

.tmpl-header h3[b-umzrj8drqe] {
    font: 700 .85rem/1 var(--cc-font-sans);
    margin: 0;
    color: var(--cc-fg, #fff);
}

.tmpl-header-actions[b-umzrj8drqe] { display: flex; gap: 6px; }

.tmpl-import-label[b-umzrj8drqe] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.tmpl-compose[b-umzrj8drqe] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--cc-border, rgba(255,255,255,.07));
    flex-shrink: 0;
}

.tmpl-input[b-umzrj8drqe],
.tmpl-textarea[b-umzrj8drqe],
.tmpl-select[b-umzrj8drqe] {
    width: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--cc-border, rgba(255,255,255,.1));
    border-radius: 6px;
    color: var(--cc-fg, #fff);
    font-size: .82rem;
    padding: .45rem .65rem;
    resize: none;
    outline: none;
    transition: border-color .15s;
}

.tmpl-input:focus[b-umzrj8drqe],
.tmpl-textarea:focus[b-umzrj8drqe],
.tmpl-select:focus[b-umzrj8drqe] {
    border-color: color-mix(in oklch, var(--cc-accent) 60%, transparent);
}

.w-full[b-umzrj8drqe] { width: 100%; }

.tmpl-list[b-umzrj8drqe] {
    overflow-y: auto;
    flex: 1;
    padding: 10px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tmpl-empty[b-umzrj8drqe] { font-size: .8rem; text-align: center; padding: 24px 0; }

.tmpl-item[b-umzrj8drqe] {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .15s;
}

.tmpl-item:hover[b-umzrj8drqe] { border-color: rgba(255,255,255,.14); }

.tmpl-item.support[b-umzrj8drqe]       { border-left: 2px solid var(--cc-warning, #f59e0b); }
.tmpl-item.moderation[b-umzrj8drqe]    { border-left: 2px solid var(--cc-danger, #ef4444); }
.tmpl-item.communication[b-umzrj8drqe] { border-left: 2px solid var(--cc-accent, #38bdf8); }
.tmpl-item.system[b-umzrj8drqe]        { border-left: 2px solid var(--cc-success, #22c55e); }

.tmpl-item-head[b-umzrj8drqe] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tmpl-cat-badge[b-umzrj8drqe] {
    font: 700 .58rem/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.45);
    flex-shrink: 0;
}

.tmpl-name[b-umzrj8drqe] {
    font: 600 .8rem/1 var(--cc-font-sans);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tmpl-delete[b-umzrj8drqe] {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.25);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    transition: color .15s;
}
.tmpl-delete:hover[b-umzrj8drqe] { color: var(--cc-danger, #ef4444); }

.tmpl-body[b-umzrj8drqe] {
    font: 400 .78rem/1.4 var(--cc-font-sans);
    color: rgba(255,255,255,.55);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Reply Drawer ───────────────────────────────────────────── */
.reply-drawer[b-umzrj8drqe] {
    position: fixed;
    bottom: 0;
    left: 240px; /* sidebar width */
    right: 0;
    background: var(--cc-bg-card, #141416);
    border-top: 1px solid var(--cc-border, rgba(255,255,255,.1));
    border-left: 1px solid var(--cc-border, rgba(255,255,255,.08));
    padding: 14px 20px 20px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 -12px 40px rgba(0,0,0,.4);
    animation: slide-up-b-umzrj8drqe .22s ease both;
}

@keyframes slide-up-b-umzrj8drqe {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.reply-drawer-head[b-umzrj8drqe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
    color: rgba(255,255,255,.6);
}

.reply-textarea[b-umzrj8drqe] {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: var(--cc-fg, #fff);
    font-size: .88rem;
    padding: .6rem .8rem;
    resize: vertical;
    outline: none;
    width: 100%;
}
.reply-textarea:focus[b-umzrj8drqe] { border-color: color-mix(in oklch, var(--cc-accent) 60%, transparent); }

.reply-actions[b-umzrj8drqe] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tmpl-pill[b-umzrj8drqe] {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.6);
    cursor: pointer;
    transition: all .15s;
}
.tmpl-pill:hover[b-umzrj8drqe] { background: color-mix(in oklch, var(--cc-accent) 15%, transparent); color: var(--cc-accent); }

.reply-send[b-umzrj8drqe] { display: flex; gap: 8px; }

/* ── Error State ────────────────────────────────────────────── */
.notif-error[b-umzrj8drqe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid color-mix(in oklch, var(--cc-danger, #ef4444) 36%, transparent);
    border-radius: 8px;
    background: color-mix(in oklch, var(--cc-danger, #ef4444) 8%, var(--cc-bg-card, #141416));
}

.dim[b-umzrj8drqe] { color: rgba(255,255,255,.4); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .notif-layout.with-sidebar[b-umzrj8drqe] {
        grid-template-columns: 1fr;
    }
    .template-sidebar[b-umzrj8drqe] {
        position: static;
        max-height: 400px;
    }
    .reply-drawer[b-umzrj8drqe] { left: 0; }
}

@media (max-width: 980px) {
    .notification-hub-tabs[b-umzrj8drqe] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .notification-hub-tabs[b-umzrj8drqe] { grid-template-columns: repeat(2, 1fr); gap: 4px; }

    .notif-main[b-umzrj8drqe] { grid-template-columns: 24px 1fr; padding: 10px 12px; gap: 10px; }
    .notif-actions[b-umzrj8drqe] { padding: 0 12px 10px 36px; }
    .notif-item:hover[b-umzrj8drqe] { transform: none; }

    .group-meta[b-umzrj8drqe] { display: none; }
    .notif-head-right .delivery-badge[b-umzrj8drqe] { display: none; }
}

/* Critical page hardening: tabs stay available, groups do not clip open controls. */
.notification-hub-tabs[b-umzrj8drqe] {
    position: sticky;
    top: calc(92px + env(safe-area-inset-top));
    z-index: 24;
    backdrop-filter: blur(16px);
}

.notif-layout[b-umzrj8drqe],
.notif-list[b-umzrj8drqe],
.template-sidebar[b-umzrj8drqe] {
    min-width: 0;
}

.notif-group[b-umzrj8drqe] {
    overflow: visible;
}

.template-sidebar[b-umzrj8drqe] {
    top: calc(92px + env(safe-area-inset-top));
    max-height: calc(100dvh - 112px);
    min-height: 0;
}

.reply-drawer[b-umzrj8drqe] {
    max-height: min(420px, calc(100dvh - 96px));
    overflow: auto;
}

@media (max-width: 1100px) {
    .template-sidebar[b-umzrj8drqe] {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 767px) {
    .notification-hub-tabs[b-umzrj8drqe] {
        top: calc(72px + env(safe-area-inset-top));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .reply-drawer[b-umzrj8drqe] {
        left: 0;
        right: 0;
        max-height: 72dvh;
    }
}
/* /Pages/OAuth/OAuthConsentPage.razor.rz.scp.css */
.oauth-consent-shell[b-jgqdgkknhz] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--cc-s-6);
    background:
        linear-gradient(135deg, rgba(0, 229, 255, .12), transparent 34%),
        linear-gradient(315deg, rgba(43, 255, 136, .08), transparent 38%),
        #030710;
}

.oauth-consent-panel[b-jgqdgkknhz] {
    width: min(100%, 620px);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-5);
    padding: clamp(24px, 5vw, 44px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(8, 13, 24, .84);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .56);
    backdrop-filter: blur(22px) saturate(1.35);
}

.oauth-brand-mark[b-jgqdgkknhz] {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: linear-gradient(135deg, #00e5ff, #2bff88);
    color: #031018;
    font: 800 1.35rem/1 var(--cc-font-sans);
    box-shadow: 0 18px 38px rgba(0, 229, 255, .18);
}

.oauth-header[b-jgqdgkknhz] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
}

.oauth-kicker[b-jgqdgkknhz] {
    color: #79f2ff;
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-sans);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.oauth-header h1[b-jgqdgkknhz],
.oauth-state h1[b-jgqdgkknhz] {
    margin: 0;
    color: #fff;
    font: 760 clamp(1.55rem, 4vw, 2.35rem)/1.08 var(--cc-font-sans);
}

.oauth-header p[b-jgqdgkknhz],
.oauth-state p[b-jgqdgkknhz],
.oauth-muted[b-jgqdgkknhz] {
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font: 400 var(--cc-fs-sm)/1.55 var(--cc-font-sans);
}

.oauth-facts[b-jgqdgkknhz] {
    display: grid;
    gap: var(--cc-s-3);
    margin: 0;
    padding: var(--cc-s-4);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.oauth-facts div[b-jgqdgkknhz] {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--cc-s-3);
}

.oauth-facts dt[b-jgqdgkknhz] {
    color: rgba(255, 255, 255, .45);
    font: 700 var(--cc-fs-xs)/1.3 var(--cc-font-sans);
    text-transform: uppercase;
}

.oauth-facts dd[b-jgqdgkknhz] {
    margin: 0;
    min-width: 0;
    color: rgba(255, 255, 255, .88);
    font: 500 var(--cc-fs-sm)/1.4 var(--cc-font-sans);
    overflow-wrap: anywhere;
}

.oauth-scope-section[b-jgqdgkknhz] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
}

.oauth-scope-section h2[b-jgqdgkknhz] {
    margin: 0;
    color: #fff;
    font: 700 var(--cc-fs-base)/1.25 var(--cc-font-sans);
}

.oauth-scope-list[b-jgqdgkknhz] {
    display: grid;
    gap: var(--cc-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.oauth-scope-list li[b-jgqdgkknhz] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--cc-s-3);
    align-items: start;
    padding: var(--cc-s-3);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.oauth-scope-name[b-jgqdgkknhz] {
    color: #2bff88;
    font: 760 var(--cc-fs-sm)/1.3 var(--cc-font-sans);
}

.oauth-scope-copy[b-jgqdgkknhz] {
    color: rgba(255, 255, 255, .68);
    font: 400 var(--cc-fs-sm)/1.45 var(--cc-font-sans);
}

.oauth-actions[b-jgqdgkknhz] {
    display: flex;
    justify-content: flex-end;
    gap: var(--cc-s-3);
}

.oauth-button[b-jgqdgkknhz] {
    min-height: 44px;
    padding: 0 var(--cc-s-5);
    border-radius: 8px;
    font: 760 var(--cc-fs-sm)/1 var(--cc-font-sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cc-s-2);
}

.oauth-button:disabled[b-jgqdgkknhz] {
    opacity: .65;
    cursor: wait;
}

.oauth-button-primary[b-jgqdgkknhz] {
    border: 0;
    background: #2bff88;
    color: #031018;
    box-shadow: 0 16px 32px rgba(43, 255, 136, .20);
}

.oauth-button-secondary[b-jgqdgkknhz] {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .055);
    color: rgba(255, 255, 255, .82);
}

.oauth-alert[b-jgqdgkknhz] {
    padding: var(--cc-s-3) var(--cc-s-4);
    border: 1px solid rgba(255, 94, 122, .38);
    border-radius: 8px;
    background: rgba(255, 94, 122, .10);
    color: #ff9aaa;
    font: 500 var(--cc-fs-sm)/1.45 var(--cc-font-sans);
}

.oauth-state[b-jgqdgkknhz] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
    align-items: flex-start;
}

.spinner-ring[b-jgqdgkknhz] {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, .18);
    border-top-color: #2bff88;
    border-radius: 50%;
    animation: oauth-spin-b-jgqdgkknhz .75s linear infinite;
}

.spinner-sm[b-jgqdgkknhz] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

@keyframes oauth-spin-b-jgqdgkknhz {
    to { transform: rotate(360deg); }
}

@media (max-width: 560px) {
    .oauth-consent-shell[b-jgqdgkknhz] {
        padding: var(--cc-s-3);
        place-items: stretch;
    }

    .oauth-consent-panel[b-jgqdgkknhz] {
        justify-content: center;
        min-height: calc(100vh - var(--cc-s-3) - var(--cc-s-3));
    }

    .oauth-facts div[b-jgqdgkknhz],
    .oauth-scope-list li[b-jgqdgkknhz] {
        grid-template-columns: 1fr;
        gap: var(--cc-s-1);
    }

    .oauth-actions[b-jgqdgkknhz] {
        flex-direction: column-reverse;
    }

    .oauth-button[b-jgqdgkknhz] {
        width: 100%;
    }
}
/* /Pages/Observability/AdvisorsPage.razor.rz.scp.css */
.advisor-error[b-es0mdctazx],
.advisor-summary[b-es0mdctazx],
.advisor-group[b-es0mdctazx],
.advisor-card[b-es0mdctazx] {
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(180deg, color-mix(in oklch, white 2%, transparent), transparent 56px),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    backdrop-filter: blur(14px);
}

.advisor-error[b-es0mdctazx] {
    padding: var(--cc-s-4);
    color: var(--cc-danger);
    background: var(--cc-danger-bg);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
}

.advisor-layout[b-es0mdctazx] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
}

.advisor-summary[b-es0mdctazx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cc-s-3);
    padding: var(--cc-s-4);
}

.advisor-summary div[b-es0mdctazx] {
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    background: color-mix(in oklch, var(--cc-bg-elev) 72%, transparent);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.advisor-summary span[b-es0mdctazx],
.advisor-rule[b-es0mdctazx],
.advisor-time[b-es0mdctazx],
.advisor-group-head span[b-es0mdctazx],
.advisor-recommendation span[b-es0mdctazx] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.advisor-summary strong[b-es0mdctazx] {
    color: var(--cc-fg);
    font: 760 var(--cc-fs-xl)/1 var(--cc-font-sans);
}

.advisor-board[b-es0mdctazx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cc-s-4);
}

.advisor-group[b-es0mdctazx] {
    padding: var(--cc-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
}

.advisor-group-head[b-es0mdctazx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cc-border-soft);
    padding-bottom: var(--cc-s-3);
}

.advisor-group-head strong[b-es0mdctazx] {
    color: var(--cc-fg);
    font: 700 var(--cc-fs-sm)/1 var(--cc-font-sans);
}

.advisor-card[b-es0mdctazx] {
    padding: var(--cc-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
    box-shadow: none;
    background: color-mix(in oklch, var(--cc-bg-elev) 78%, transparent);
}

.advisor-card.critical[b-es0mdctazx] {
    border-color: color-mix(in oklch, var(--cc-danger) 48%, var(--cc-border));
}

.advisor-card.warning[b-es0mdctazx] {
    border-color: color-mix(in oklch, var(--cc-warning) 48%, var(--cc-border));
}

.advisor-card header[b-es0mdctazx],
.advisor-card footer[b-es0mdctazx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-3);
}

.advisor-card footer[b-es0mdctazx] {
    justify-content: flex-start;
}

.advisor-card h3[b-es0mdctazx] {
    margin: 0;
    color: var(--cc-fg);
    font: 720 var(--cc-fs-md)/1.2 var(--cc-font-sans);
}

.advisor-card p[b-es0mdctazx] {
    margin: 0;
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-sm)/1.5 var(--cc-font-sans);
}

.advisor-recommendation[b-es0mdctazx] {
    padding: var(--cc-s-3);
    border-radius: var(--cc-r-md);
    background: linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 10%, transparent), transparent);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
}

.advisor-recommendation strong[b-es0mdctazx] {
    color: var(--cc-fg);
    font: 620 var(--cc-fs-sm)/1.4 var(--cc-font-sans);
}

@media (max-width: 920px) {
    .advisor-board[b-es0mdctazx],
    .advisor-summary[b-es0mdctazx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    /* Summary: 2 per row */
    .advisor-summary[b-es0mdctazx] { grid-template-columns: repeat(2, 1fr); }

    /* Cards: compact */
    .advisor-card[b-es0mdctazx] { padding: var(--cc-s-3); }
    .advisor-card h3[b-es0mdctazx] { font-size: var(--cc-fs-base); }
}
/* /Pages/Observability/ApiHealthPage.razor.rz.scp.css */
/* ── Summary Bar ─────────────────────────────────────────────────────────── */

.health-summary[b-8dc75n9g5x] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-4);
    padding: var(--cc-s-3) var(--cc-s-4);
    border-radius: var(--cc-r-lg);
    border: 1px solid var(--cc-border-soft);
    background: var(--cc-bg-card);
    margin-bottom: var(--cc-s-4);
    flex-wrap: wrap;
}

.health-summary.ok[b-8dc75n9g5x]    { border-color: color-mix(in oklch, #22d3a0 30%, var(--cc-border)); background: color-mix(in oklch, #22d3a0 5%, var(--cc-bg-card)); }
.health-summary.degraded[b-8dc75n9g5x] { border-color: color-mix(in oklch, #f59e0b 35%, var(--cc-border)); background: color-mix(in oklch, #f59e0b 5%, var(--cc-bg-card)); }
.health-summary.critical[b-8dc75n9g5x] { border-color: color-mix(in oklch, #ef4444 35%, var(--cc-border)); background: color-mix(in oklch, #ef4444 5%, var(--cc-bg-card)); }

.health-pill[b-8dc75n9g5x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 54px;
    padding: var(--cc-s-2) var(--cc-s-3);
    border-radius: var(--cc-r-md);
    background: var(--cc-bg-elev);
}

.health-pill strong[b-8dc75n9g5x] {
    font: 800 1.35rem/1 var(--cc-font-sans);
}

.health-pill span[b-8dc75n9g5x] {
    font: 500 var(--cc-fs-xs)/1 var(--cc-font-sans);
    color: var(--cc-fg-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.health-pill.ok     strong[b-8dc75n9g5x] { color: #22d3a0; }
.health-pill.warn   strong[b-8dc75n9g5x] { color: #f59e0b; }
.health-pill.error  strong[b-8dc75n9g5x] { color: #ef4444; }
.health-pill.pending strong[b-8dc75n9g5x] { color: var(--cc-fg-dim); }

.health-meta[b-8dc75n9g5x] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font: 400 var(--cc-fs-xs)/1.4 var(--cc-font-mono);
    color: var(--cc-fg-muted);
}

/* ── Filter Toggle ───────────────────────────────────────────────────────── */

.diag-toggle[b-8dc75n9g5x] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    font: 500 var(--cc-fs-sm)/1 var(--cc-font-sans);
    color: var(--cc-fg-muted);
    cursor: pointer;
    user-select: none;
}

.diag-toggle input[b-8dc75n9g5x] {
    accent-color: var(--cc-accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* ── Probe Groups ─────────────────────────────────────────────────────────── */

.diag-groups[b-8dc75n9g5x] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
}

.diag-group[b-8dc75n9g5x] {
    border-radius: var(--cc-r-lg);
    border: 1px solid var(--cc-border-soft);
    background: var(--cc-bg-card);
    overflow: hidden;
}

.diag-group.has-errors[b-8dc75n9g5x] {
    border-color: color-mix(in oklch, #ef4444 28%, var(--cc-border));
}

.diag-group-header[b-8dc75n9g5x] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
    padding: var(--cc-s-3) var(--cc-s-4);
    background: var(--cc-bg-elev);
    border-bottom: 1px solid var(--cc-border-soft);
}

.diag-group-title[b-8dc75n9g5x] {
    font: 700 var(--cc-fs-sm)/1 var(--cc-font-sans);
    color: var(--cc-fg);
    margin: 0;
}

.diag-group-badge[b-8dc75n9g5x] {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in oklch, #ef4444 20%, transparent);
    color: #ef4444;
    font: 700 var(--cc-fs-xs)/1.4 var(--cc-font-sans);
}

.diag-group-count[b-8dc75n9g5x] {
    margin-left: auto;
    font: 400 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-fg-dim);
}

/* ── Probe Rows ──────────────────────────────────────────────────────────── */

.diag-probe-list[b-8dc75n9g5x] {
    display: flex;
    flex-direction: column;
}

.diag-probe[b-8dc75n9g5x] {
    border-bottom: 1px solid var(--cc-border-soft);
}

.diag-probe:last-child[b-8dc75n9g5x] {
    border-bottom: none;
}

.diag-probe-row[b-8dc75n9g5x] {
    display: grid;
    grid-template-columns: 12px 42px 1fr auto auto auto auto;
    align-items: center;
    gap: var(--cc-s-3);
    padding: var(--cc-s-3) var(--cc-s-4);
    cursor: default;
    transition: background var(--cc-dur-fast, 100ms) ease;
}

.diag-probe:not(.probe-ok) .diag-probe-row[b-8dc75n9g5x] {
    cursor: pointer;
}

.diag-probe-row:hover[b-8dc75n9g5x] {
    background: var(--cc-bg-hover);
}

/* ── Status dot ─────────────────────────────────────────────────────────── */

.diag-status-dot[b-8dc75n9g5x] {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    background: var(--cc-fg-dim);
    box-shadow: 0 0 0 3px transparent;
}

.probe-ok    .diag-status-dot[b-8dc75n9g5x] {
    background: #22d3a0;
    box-shadow: 0 0 6px #22d3a040;
}
.probe-warn  .diag-status-dot[b-8dc75n9g5x] {
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b40;
}
.probe-error .diag-status-dot[b-8dc75n9g5x] {
    background: #ef4444;
    box-shadow: 0 0 8px #ef444455;
    animation: probe-pulse-b-8dc75n9g5x 1.8s ease-in-out infinite;
}
.probe-pending .diag-status-dot[b-8dc75n9g5x] {
    background: var(--cc-fg-dim);
    animation: probe-blink-b-8dc75n9g5x 1s step-start infinite;
}

@keyframes probe-pulse-b-8dc75n9g5x {
    0%, 100% { box-shadow: 0 0 6px #ef444450; }
    50%       { box-shadow: 0 0 14px #ef4444aa; }
}

@keyframes probe-blink-b-8dc75n9g5x {
    0%, 100% { opacity: 1; }
    50%       { opacity: .25; }
}

/* ── Method badge ─────────────────────────────────────────────────────────── */

.diag-method[b-8dc75n9g5x] {
    font: 700 10px/1.5 var(--cc-font-mono);
    color: var(--cc-accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: color-mix(in oklch, var(--cc-accent) 12%, transparent);
    padding: 1px 6px;
    border-radius: var(--cc-r-sm);
    white-space: nowrap;
}

/* ── URL + Name ─────────────────────────────────────────────────────────── */

.diag-url[b-8dc75n9g5x] {
    font: 400 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.diag-name[b-8dc75n9g5x] {
    font: 500 var(--cc-fs-sm)/1 var(--cc-font-sans);
    color: var(--cc-fg);
    white-space: nowrap;
}

/* ── Status code ─────────────────────────────────────────────────────────── */

.diag-status-code[b-8dc75n9g5x] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    white-space: nowrap;
}

.probe-ok    .diag-status-code[b-8dc75n9g5x] { color: #22d3a0; }
.probe-warn  .diag-status-code[b-8dc75n9g5x] { color: #f59e0b; }
.probe-error .diag-status-code[b-8dc75n9g5x] { color: #ef4444; }

/* ── Duration ─────────────────────────────────────────────────────────────── */

.diag-duration[b-8dc75n9g5x] {
    font: 400 var(--cc-fs-xs)/1 var(--cc-font-mono);
    white-space: nowrap;
}

.dur-ok[b-8dc75n9g5x]   { color: var(--cc-fg-dim); }
.dur-warn[b-8dc75n9g5x] { color: #f59e0b; }
.dur-slow[b-8dc75n9g5x] { color: #ef4444; font-weight: 700; }

/* ── Expand button ───────────────────────────────────────────────────────── */

.diag-expand-btn[b-8dc75n9g5x] {
    font: 500 var(--cc-fs-xs)/1 var(--cc-font-sans);
    color: var(--cc-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* ── Running indicator ───────────────────────────────────────────────────── */

.diag-running[b-8dc75n9g5x] {
    font: 400 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-fg-dim);
}

.diag-spinner[b-8dc75n9g5x] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid color-mix(in oklch, var(--cc-accent) 30%, transparent);
    border-top-color: var(--cc-accent);
    border-radius: 50%;
    animation: spin-b-8dc75n9g5x .6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes spin-b-8dc75n9g5x { to { transform: rotate(360deg); } }

/* ── Error body ──────────────────────────────────────────────────────────── */

.diag-error-body[b-8dc75n9g5x] {
    background: color-mix(in oklch, #ef4444 5%, var(--cc-bg));
    border-top: 1px solid color-mix(in oklch, #ef4444 20%, var(--cc-border));
    padding: var(--cc-s-3) var(--cc-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
}

.diag-error-meta[b-8dc75n9g5x] {
    display: flex;
    gap: var(--cc-s-4);
    align-items: baseline;
}

.diag-error-label[b-8dc75n9g5x] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: #ef4444;
    white-space: nowrap;
}

.diag-error-desc[b-8dc75n9g5x] {
    font: 400 var(--cc-fs-xs)/1 var(--cc-font-sans);
    color: var(--cc-fg-muted);
}

.diag-error-pre[b-8dc75n9g5x] {
    font: 400 var(--cc-fs-xs)/1.5 var(--cc-font-mono);
    color: var(--cc-fg-muted);
    background: var(--cc-bg);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    margin: 0;
}

.diag-error-empty[b-8dc75n9g5x] {
    font: 400 var(--cc-fs-sm)/1 var(--cc-font-sans);
    color: var(--cc-fg-dim);
    font-style: italic;
    margin: 0;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.diag-empty[b-8dc75n9g5x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cc-s-4);
    padding: var(--cc-s-8, 48px) var(--cc-s-4);
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-base)/1.5 var(--cc-font-sans);
    text-align: center;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .diag-probe-row[b-8dc75n9g5x] {
        grid-template-columns: 10px 38px 1fr auto;
        gap: var(--cc-s-2);
    }

    .diag-url[b-8dc75n9g5x]   { display: none; }
    .diag-name[b-8dc75n9g5x]  { grid-column: 3; }

    .health-summary[b-8dc75n9g5x] { gap: var(--cc-s-2); }
    .health-meta[b-8dc75n9g5x]    { margin-left: 0; align-items: flex-start; }
}
/* /Pages/Observability/LogsPage.razor.rz.scp.css */
.obs-shell[b-ley606a7dc] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--cc-s-4);
    align-items: start;
}

.obs-sources[b-ley606a7dc],
.obs-main[b-ley606a7dc],
.obs-advisors[b-ley606a7dc] {
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(180deg, color-mix(in oklch, white 2%, transparent), transparent 60px),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    backdrop-filter: blur(14px);
}

.obs-sources[b-ley606a7dc],
.obs-advisors[b-ley606a7dc] {
    padding: var(--cc-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
}

.obs-main[b-ley606a7dc] {
    min-width: 0;
    overflow: hidden;
}

.obs-panel-title[b-ley606a7dc] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: var(--cc-s-2);
}

.obs-source[b-ley606a7dc],
.obs-advisor[b-ley606a7dc] {
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: var(--cc-r-md);
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: var(--cc-s-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background var(--cc-dur-fast), border-color var(--cc-dur-fast), transform var(--cc-dur-fast);
}

.obs-source:hover[b-ley606a7dc],
.obs-advisor:hover[b-ley606a7dc] {
    transform: translateX(2px);
    border-color: color-mix(in oklch, var(--cc-accent) 34%, var(--cc-border));
    background: color-mix(in oklch, var(--cc-bg-hover) 80%, transparent);
}

.obs-source.active[b-ley606a7dc] {
    border-color: color-mix(in oklch, var(--cc-accent) 48%, var(--cc-border));
    background: linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 14%, transparent), transparent);
}

.obs-source strong[b-ley606a7dc],
.obs-advisor strong[b-ley606a7dc] {
    color: var(--cc-fg);
    font: 650 var(--cc-fs-sm)/1.2 var(--cc-font-sans);
}

.obs-source small[b-ley606a7dc],
.obs-advisor span[b-ley606a7dc],
.obs-advisor small[b-ley606a7dc] {
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-xs)/1.35 var(--cc-font-sans);
}

.obs-filterbar[b-ley606a7dc] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: var(--cc-s-3);
    padding: var(--cc-s-4);
    border-bottom: 1px solid var(--cc-border-luxe, var(--cc-border-soft));
}

.obs-query[b-ley606a7dc] {
    max-width: none;
}

.obs-error[b-ley606a7dc] {
    margin: var(--cc-s-4);
    padding: var(--cc-s-4);
    border: 1px solid color-mix(in oklch, var(--cc-danger) 45%, var(--cc-border));
    border-radius: var(--cc-r-md);
    background: var(--cc-danger-bg);
    color: var(--cc-danger);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
}

.obs-summary[b-ley606a7dc] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cc-s-3);
    padding: var(--cc-s-4);
    border-bottom: 1px solid var(--cc-border-luxe, var(--cc-border-soft));
}

.obs-summary div[b-ley606a7dc] {
    padding: var(--cc-s-3);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    background: color-mix(in oklch, var(--cc-bg-elev) 72%, transparent);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.obs-summary span[b-ley606a7dc] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.obs-summary strong[b-ley606a7dc] {
    color: var(--cc-fg);
    font: 720 var(--cc-fs-lg)/1 var(--cc-font-sans);
}

.obs-events[b-ley606a7dc] {
    display: flex;
    flex-direction: column;
}

.obs-event[b-ley606a7dc] {
    width: 100%;
    display: grid;
    grid-template-columns: 12px 96px minmax(0, 1fr) minmax(110px, auto);
    gap: var(--cc-s-3);
    align-items: center;
    padding: var(--cc-s-3) var(--cc-s-4);
    border: none;
    border-bottom: 1px solid var(--cc-border-soft);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--cc-dur-fast), transform var(--cc-dur-fast);
}

.obs-event:hover[b-ley606a7dc] {
    background: linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 8%, transparent), transparent);
    transform: translateX(2px);
}

.obs-severity-dot[b-ley606a7dc] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cc-accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cc-accent) 12%, transparent);
}

.obs-event.warning .obs-severity-dot[b-ley606a7dc],
.obs-advisor.warning[b-ley606a7dc] {
    border-color: color-mix(in oklch, var(--cc-warning) 44%, var(--cc-border));
}

.obs-event.warning .obs-severity-dot[b-ley606a7dc] {
    background: var(--cc-warning);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cc-warning) 12%, transparent);
}

.obs-event.critical .obs-severity-dot[b-ley606a7dc],
.obs-advisor.critical[b-ley606a7dc] {
    border-color: color-mix(in oklch, var(--cc-danger) 44%, var(--cc-border));
}

.obs-event.critical .obs-severity-dot[b-ley606a7dc] {
    background: var(--cc-danger);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cc-danger) 12%, transparent);
}

.obs-event-source[b-ley606a7dc],
.obs-event-target[b-ley606a7dc] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
}

.obs-event-body[b-ley606a7dc] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.obs-event-body strong[b-ley606a7dc] {
    color: var(--cc-fg);
    font: 650 var(--cc-fs-sm)/1.2 var(--cc-font-sans);
}

.obs-event-body small[b-ley606a7dc],
.obs-event-body em[b-ley606a7dc] {
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-xs)/1.35 var(--cc-font-sans);
    font-style: normal;
    overflow-wrap: anywhere;
    white-space: normal;
}

.supabase-log-explorer[b-ley606a7dc] {
    margin-top: var(--cc-s-4);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background: var(--cc-bg-card);
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    overflow: hidden;
}

.supabase-log-header[b-ley606a7dc],
.supabase-log-toolbar[b-ley606a7dc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cc-s-3);
    align-items: center;
    padding: var(--cc-s-4);
    border-bottom: 1px solid var(--cc-border-soft);
}

.supabase-log-header span[b-ley606a7dc] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.supabase-log-header strong[b-ley606a7dc] {
    display: block;
    margin-top: 4px;
    color: var(--cc-fg);
    font: 720 var(--cc-fs-lg)/1.1 var(--cc-font-sans);
}

.supabase-log-toolbar[b-ley606a7dc] {
    grid-template-columns: 220px minmax(220px, 1fr) 150px 150px;
}

.supabase-sql-box[b-ley606a7dc] {
    padding: var(--cc-s-4);
    border-bottom: 1px solid var(--cc-border-soft);
}

.supabase-sql-box summary[b-ley606a7dc] {
    cursor: pointer;
    color: var(--cc-fg);
    font: 650 var(--cc-fs-sm)/1.2 var(--cc-font-sans);
}

.supabase-sql-box textarea[b-ley606a7dc] {
    width: 100%;
    max-width: none;
    margin-top: var(--cc-s-3);
    font-family: var(--cc-font-mono);
}

.supabase-sql-box pre[b-ley606a7dc],
.supabase-log-row pre[b-ley606a7dc] {
    overflow: auto;
    max-height: 320px;
    margin: var(--cc-s-3) 0 0;
    padding: var(--cc-s-3);
    border-radius: var(--cc-r-md);
    background: color-mix(in oklch, var(--cc-bg-elev) 82%, black 6%);
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-xs)/1.45 var(--cc-font-mono);
}

.supabase-log-list[b-ley606a7dc] {
    display: flex;
    flex-direction: column;
}

.supabase-log-row[b-ley606a7dc] {
    border-bottom: 1px solid var(--cc-border-soft);
    padding: 0;
}

.supabase-log-row summary[b-ley606a7dc] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 180px 160px;
    gap: var(--cc-s-3);
    align-items: center;
    padding: var(--cc-s-3) var(--cc-s-4);
    cursor: pointer;
    list-style: none;
}

.supabase-log-row summary[b-ley606a7dc]::-webkit-details-marker {
    display: none;
}

.supabase-log-row strong[b-ley606a7dc],
.supabase-log-row small[b-ley606a7dc],
.supabase-log-row em[b-ley606a7dc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supabase-log-row strong[b-ley606a7dc] {
    color: var(--cc-fg);
    font: 650 var(--cc-fs-sm)/1.25 var(--cc-font-sans);
}

.supabase-log-row small[b-ley606a7dc],
.supabase-log-row em[b-ley606a7dc] {
    color: var(--cc-fg-muted);
    font: 700 var(--cc-fs-xs)/1.2 var(--cc-font-mono);
    font-style: normal;
}

.supabase-log-row.warning .obs-severity-dot[b-ley606a7dc] {
    background: var(--cc-warning);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cc-warning) 12%, transparent);
}

.supabase-log-row.critical .obs-severity-dot[b-ley606a7dc] {
    background: var(--cc-danger);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cc-danger) 12%, transparent);
}

@media (max-width: 1180px) {
    .obs-shell[b-ley606a7dc] {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .obs-shell[b-ley606a7dc] {
        grid-template-columns: 1fr;
    }

    .obs-filterbar[b-ley606a7dc],
    .obs-summary[b-ley606a7dc],
    .obs-event[b-ley606a7dc],
    .supabase-log-toolbar[b-ley606a7dc],
    .supabase-log-row summary[b-ley606a7dc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    /* Sources sidebar: collapsible via details on mobile */
    .obs-sources[b-ley606a7dc] {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }

    .obs-sources-toggle[b-ley606a7dc] { display: flex; }

    /* Filter bar: wrap all controls */
    .obs-filterbar[b-ley606a7dc] {
        flex-wrap: wrap;
        gap: var(--cc-s-2);
        padding: var(--cc-s-2) var(--cc-s-3);
    }

    .obs-filterbar > *[b-ley606a7dc] { flex: 1 1 auto; min-width: 120px; }

    /* Events: compact padding */
    .obs-event[b-ley606a7dc] {
        padding: var(--cc-s-2) var(--cc-s-3);
        gap: var(--cc-s-2);
    }

    /* Summary row: horizontal scroll */
    .obs-summary[b-ley606a7dc] {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: none;
        display: flex;
        gap: var(--cc-s-3);
    }

    .obs-summary > *[b-ley606a7dc] { flex-shrink: 0; }
}

/* Critical page hardening: no hidden source rail on mobile, no clipped log panels. */
.obs-shell[b-ley606a7dc],
.obs-main[b-ley606a7dc],
.obs-events[b-ley606a7dc],
.obs-event[b-ley606a7dc] {
    min-width: 0;
}

.obs-sources[b-ley606a7dc] {
    position: sticky;
    top: calc(92px + env(safe-area-inset-top));
    align-self: start;
    max-height: calc(100dvh - 112px);
    overflow: auto;
}

.obs-main[b-ley606a7dc] {
    overflow: visible;
}

.obs-filterbar[b-ley606a7dc] {
    position: sticky;
    top: calc(92px + env(safe-area-inset-top));
    z-index: 24;
    backdrop-filter: blur(16px);
}

.obs-events[b-ley606a7dc],
.supabase-log-list[b-ley606a7dc] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 980px) {
    .obs-sources[b-ley606a7dc],
    .obs-filterbar[b-ley606a7dc] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 767px) {
    .obs-sources[b-ley606a7dc] {
        max-height: none;
        overflow: visible;
        transition: none;
    }

    .obs-filterbar[b-ley606a7dc] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .obs-filterbar > *[b-ley606a7dc] {
        min-width: 0;
        width: 100%;
    }
}
/* /Pages/Premium/PremiumPage.razor.rz.scp.css */
/* PremiumPage */
.premium-kpis[b-8anuz28bpb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cc-s-3);
    margin-bottom: var(--cc-s-4);
}

.premium-kpi[b-8anuz28bpb] {
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-md);
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 7%, transparent), transparent 48%),
        var(--cc-bg-glass, var(--cc-bg-card));
    padding: var(--cc-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
    transition:
        transform var(--cc-dur-fast) var(--cc-ease),
        border-color var(--cc-dur-fast) var(--cc-ease),
        box-shadow var(--cc-dur-fast) var(--cc-ease);
}

.premium-kpi:hover[b-8anuz28bpb] {
    transform: translateY(-2px);
    border-color: color-mix(in oklch, var(--cc-accent) 34%, var(--cc-border));
    box-shadow: var(--cc-glow-accent, var(--cc-shadow-md));
}

.premium-kpi span[b-8anuz28bpb] {
    color: var(--cc-fg-muted);
    font: 500 var(--cc-fs-xs)/1.2 var(--cc-font-sans);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.premium-kpi strong[b-8anuz28bpb] {
    color: var(--cc-fg);
    font: 700 var(--cc-fs-xl, 1.25rem)/1.1 var(--cc-font-sans);
}

.premium-kpi.attention[b-8anuz28bpb] {
    border-color: color-mix(in oklch, var(--cc-danger, #ef4444) 45%, var(--cc-border));
}

.sub-table[b-8anuz28bpb] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in oklch, white 2.5%, transparent), transparent 48px),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    backdrop-filter: blur(14px);
}

.sub-row[b-8anuz28bpb] {
    display: grid;
    grid-template-columns: 140px 160px 90px 110px 110px 90px 110px auto;
    gap: var(--cc-s-3);
    align-items: center;
    padding: var(--cc-s-3) var(--cc-s-4);
    border-bottom: 1px solid var(--cc-border-soft);
    font-size: var(--cc-fs-sm);
    font-family: var(--cc-font-sans);
    cursor: pointer;
    transition:
        background var(--cc-dur-fast),
        transform var(--cc-dur-fast),
        box-shadow var(--cc-dur-fast);
}

.sub-row:last-child[b-8anuz28bpb] { border-bottom: none; }

.sub-head[b-8anuz28bpb] {
    background: color-mix(in oklch, var(--cc-bg-elev) 82%, transparent);
    cursor: default;
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    color: var(--cc-fg-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sub-row:not(.sub-head):hover[b-8anuz28bpb] {
    background: linear-gradient(90deg,
        color-mix(in oklch, var(--cc-accent) 8%, transparent),
        color-mix(in oklch, var(--cc-cyan, #5DD9C1) 4%, transparent));
    transform: translateX(2px);
}

.sub-row:not(.sub-head).selected[b-8anuz28bpb] {
    background: linear-gradient(90deg,
        color-mix(in oklch, var(--cc-accent) 13%, var(--cc-bg-card)),
        color-mix(in oklch, var(--cc-cyan, #5DD9C1) 6%, var(--cc-bg-card)));
    box-shadow: inset 3px 0 0 var(--cc-accent);
}

.sub-row.risk-critical[b-8anuz28bpb] {
    box-shadow: inset 3px 0 0 var(--cc-danger, #ef4444);
}

.sub-row.risk-watch[b-8anuz28bpb] {
    box-shadow: inset 3px 0 0 var(--cc-warning, #f59e0b);
}

.row-actions[b-8anuz28bpb] {
    display: flex;
    gap: var(--cc-s-2);
    opacity: 0;
    transition: opacity var(--cc-dur-fast);
}

.sub-row:hover .row-actions[b-8anuz28bpb] { opacity: 1; }

.btn-sm[b-8anuz28bpb] {
    height: 30px;
    padding: 0 var(--cc-s-3);
    font-size: var(--cc-fs-xs);
}

/* Dialog checkbox */
.checkbox-field[b-8anuz28bpb] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    font-size: var(--cc-fs-sm);
    color: var(--cc-fg);
    font-family: var(--cc-font-sans);
    cursor: pointer;
}

.field-error[b-8anuz28bpb] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-danger);
    font-family: var(--cc-font-sans);
}

.premium-detail[b-8anuz28bpb] {
    margin-top: var(--cc-s-4);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 8%, transparent), transparent 42%),
        var(--cc-bg-glass, var(--cc-bg-card));
    overflow: hidden;
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-lg));
    backdrop-filter: blur(14px);
}

.premium-detail-head[b-8anuz28bpb] {
    display: flex;
    justify-content: space-between;
    gap: var(--cc-s-4);
    align-items: flex-start;
    padding: var(--cc-s-5);
    border-bottom: 1px solid var(--cc-border-luxe, var(--cc-border));
}

.premium-detail-head h3[b-8anuz28bpb] {
    margin: var(--cc-s-1) 0;
    color: var(--cc-fg);
    font: 700 var(--cc-fs-lg)/1.2 var(--cc-font-sans);
}

.premium-detail-head p[b-8anuz28bpb] {
    margin: 0;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
}

.eyebrow[b-8anuz28bpb] {
    color: var(--cc-fg-dim);
    font: 600 var(--cc-fs-xs)/1.2 var(--cc-font-sans);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.detail-actions[b-8anuz28bpb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-2);
    justify-content: flex-end;
}

.premium-detail-grid[b-8anuz28bpb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cc-s-3);
    padding: var(--cc-s-5);
}

.premium-signal[b-8anuz28bpb] {
    border: 1px solid var(--cc-border-luxe, var(--cc-border-soft, var(--cc-border)));
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
    background:
        linear-gradient(180deg, color-mix(in oklch, white 2%, transparent), transparent),
        var(--cc-bg-elev);
    transition: transform var(--cc-dur-fast), border-color var(--cc-dur-fast), box-shadow var(--cc-dur-fast);
}

.premium-signal:hover[b-8anuz28bpb] {
    transform: translateY(-1px);
    border-color: color-mix(in oklch, var(--cc-accent) 32%, var(--cc-border));
    box-shadow: 0 12px 24px rgba(0,0,0,.16);
}

.premium-signal span[b-8anuz28bpb],
.premium-signal small[b-8anuz28bpb] {
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
}

.premium-signal strong[b-8anuz28bpb] {
    color: var(--cc-fg);
    font-size: var(--cc-fs-md);
}

.premium-signal.risk-critical[b-8anuz28bpb] {
    border-color: color-mix(in oklch, var(--cc-danger, #ef4444) 50%, var(--cc-border));
}

.premium-signal.risk-watch[b-8anuz28bpb] {
    border-color: color-mix(in oklch, var(--cc-warning, #f59e0b) 50%, var(--cc-border));
}

.premium-nested[b-8anuz28bpb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cc-s-4);
    padding: 0 var(--cc-s-5) var(--cc-s-5);
}

.premium-nested h4[b-8anuz28bpb] {
    margin: 0 0 var(--cc-s-2);
    color: var(--cc-fg);
    font: 700 var(--cc-fs-sm)/1.2 var(--cc-font-sans);
}

.premium-nested p[b-8anuz28bpb] {
    margin: 0;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
    line-height: 1.5;
}

.link-btn[b-8anuz28bpb] {
    display: block;
    border: none;
    background: transparent;
    color: var(--cc-accent);
    cursor: pointer;
    padding: var(--cc-s-1) 0;
    text-align: left;
    font: 600 var(--cc-fs-sm)/1.3 var(--cc-font-sans);
}

.link-btn:hover[b-8anuz28bpb] {
    text-decoration: underline;
}

@media (max-width: 960px) {
    .premium-kpis[b-8anuz28bpb],
    .premium-detail-grid[b-8anuz28bpb],
    .premium-nested[b-8anuz28bpb] {
        grid-template-columns: 1fr 1fr;
    }

    .premium-detail-head[b-8anuz28bpb] {
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .premium-kpis[b-8anuz28bpb],
    .premium-detail-grid[b-8anuz28bpb],
    .premium-nested[b-8anuz28bpb] {
        grid-template-columns: 1fr;
    }

    .sub-row[b-8anuz28bpb] {
        grid-template-columns: 1fr 1fr;
    }

    .sub-head span:nth-child(n+3)[b-8anuz28bpb],
    .sub-row > span:nth-child(n+3)[b-8anuz28bpb],
    .sub-row > .row-actions[b-8anuz28bpb] {
        display: none;
    }
}

@media (max-width: 767px) {
    /* KPI: 2 per row */
    .premium-kpis[b-8anuz28bpb] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--cc-s-3);
    }

    /* Sub table header hidden */
    .sub-head[b-8anuz28bpb] { display: none; }

    .sub-row[b-8anuz28bpb] {
        grid-template-columns: 1fr auto;
        padding: var(--cc-s-2) var(--cc-s-3);
    }
}
/* /Pages/Protection/ProtectionPage.razor.rz.scp.css */
.protection-shell[b-nlhac6j4we] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
    padding: var(--cc-s-5) var(--cc-s-6) var(--cc-s-6);
}

.protection-hero[b-nlhac6j4we] {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 360px);
    gap: var(--cc-s-5);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    background: var(--cc-bg-card);
    padding: var(--cc-s-5);
    border-left: 4px solid var(--cc-success);
}

.protection-hero.level-yellow[b-nlhac6j4we] { border-left-color: var(--cc-warning); }
.protection-hero.level-orange[b-nlhac6j4we] { border-left-color: #f97316; }
.protection-hero.level-red[b-nlhac6j4we] { border-left-color: var(--cc-danger); }

.protection-hero h2[b-nlhac6j4we] {
    margin: var(--cc-s-1) 0;
    color: var(--cc-fg);
    font-size: var(--cc-fs-xl);
}

.protection-hero p[b-nlhac6j4we] {
    margin: 0;
    color: var(--cc-fg-muted);
}

.protection-hero dl[b-nlhac6j4we] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--cc-s-2);
    margin: 0;
}

.protection-hero dt[b-nlhac6j4we] {
    color: var(--cc-fg-dim);
    font-size: var(--cc-fs-xs);
}

.protection-hero dd[b-nlhac6j4we] {
    margin: 0;
    color: var(--cc-fg);
    font-size: var(--cc-fs-sm);
}

.eyebrow[b-nlhac6j4we] {
    color: var(--cc-fg-dim);
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.protection-pill[b-nlhac6j4we] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    border: 1px solid var(--cc-border);
}

.protection-pill.level-green[b-nlhac6j4we] { color: var(--cc-success); background: rgba(61, 220, 151, .12); }
.protection-pill.level-yellow[b-nlhac6j4we] { color: var(--cc-warning); background: rgba(245, 184, 65, .12); }
.protection-pill.level-orange[b-nlhac6j4we] { color: #f97316; background: rgba(249, 115, 22, .12); }
.protection-pill.level-red[b-nlhac6j4we] { color: var(--cc-danger); background: var(--cc-danger-bg); }

.level-selector[b-nlhac6j4we] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cc-s-3);
}

.level-button[b-nlhac6j4we] {
    min-height: 86px;
    text-align: left;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    background: var(--cc-bg-card);
    color: var(--cc-fg);
    padding: var(--cc-s-4);
    cursor: pointer;
    transition: background var(--cc-dur-fast), border-color var(--cc-dur-fast), transform var(--cc-dur-fast);
}

.level-button:hover[b-nlhac6j4we],
.level-button.selected[b-nlhac6j4we] {
    background: var(--cc-bg-hover);
    transform: translateY(-1px);
}

.level-button.selected.level-green[b-nlhac6j4we] { border-color: var(--cc-success); }
.level-button.selected.level-yellow[b-nlhac6j4we] { border-color: var(--cc-warning); }
.level-button.selected.level-orange[b-nlhac6j4we] { border-color: #f97316; }
.level-button.selected.level-red[b-nlhac6j4we] { border-color: var(--cc-danger); }

.level-button strong[b-nlhac6j4we],
.level-button span[b-nlhac6j4we] {
    display: block;
}

.level-button span[b-nlhac6j4we] {
    margin-top: 6px;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
}

.protection-grid[b-nlhac6j4we] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--cc-s-4);
    align-items: start;
}

.protection-card[b-nlhac6j4we] {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    background: var(--cc-bg-card);
    padding: var(--cc-s-5);
}

.protection-card h3[b-nlhac6j4we] {
    margin: 0 0 var(--cc-s-3);
    color: var(--cc-fg);
    font-size: var(--cc-fs-md);
}

.card-title-row[b-nlhac6j4we] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: var(--cc-s-4);
}

.card-title-row p[b-nlhac6j4we] {
    margin: 4px 0 0;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
}

.change-grid[b-nlhac6j4we] {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: var(--cc-s-4);
}

.card-actions[b-nlhac6j4we] {
    display: flex;
    justify-content: flex-end;
    gap: var(--cc-s-3);
    margin-top: var(--cc-s-4);
}

.inline-alert[b-nlhac6j4we] {
    margin-top: var(--cc-s-3);
    border: 1px solid var(--cc-danger);
    border-radius: var(--cc-r-md);
    background: var(--cc-danger-bg);
    color: var(--cc-danger);
    padding: var(--cc-s-3);
}

.feature-list[b-nlhac6j4we],
.history-list[b-nlhac6j4we] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--cc-border-soft);
}

.feature-row[b-nlhac6j4we] {
    display: grid;
    grid-template-columns: 160px 100px 1fr;
    gap: var(--cc-s-3);
    align-items: center;
    background: var(--cc-bg-card);
    padding: var(--cc-s-3);
}

.feature-name[b-nlhac6j4we] {
    color: var(--cc-fg);
    font-weight: 600;
}

.feature-note[b-nlhac6j4we] {
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
}

.availability[b-nlhac6j4we] {
    border-radius: 999px;
    padding: 3px 8px;
    text-align: center;
    font-size: var(--cc-fs-xs);
    font-weight: 700;
}

.availability-enabled[b-nlhac6j4we] { color: var(--cc-success); background: rgba(61, 220, 151, .12); }
.availability-limited[b-nlhac6j4we] { color: var(--cc-warning); background: rgba(245, 184, 65, .12); }
.availability-staffonly[b-nlhac6j4we] { color: var(--cc-accent); background: rgba(76, 139, 245, .12); }
.availability-disabled[b-nlhac6j4we] { color: var(--cc-danger); background: var(--cc-danger-bg); }

.recommendation-list[b-nlhac6j4we] {
    margin: 0;
    padding-left: var(--cc-s-5);
    color: var(--cc-fg-muted);
}

.history-row[b-nlhac6j4we] {
    display: grid;
    grid-template-columns: 90px 1fr 180px 150px;
    gap: var(--cc-s-3);
    align-items: center;
    background: var(--cc-bg-card);
    padding: var(--cc-s-3);
    font-size: var(--cc-fs-sm);
}

@media (max-width: 980px) {
    .protection-hero[b-nlhac6j4we],
    .protection-grid[b-nlhac6j4we],
    .change-grid[b-nlhac6j4we] {
        grid-template-columns: 1fr;
    }

    .level-selector[b-nlhac6j4we] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-row[b-nlhac6j4we],
    .history-row[b-nlhac6j4we] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    /* Level cards: 2 per row (already 980px-handled above) */
    .level-selector[b-nlhac6j4we] { grid-template-columns: repeat(2, 1fr); gap: var(--cc-s-3); }

    .level-card[b-nlhac6j4we] { padding: var(--cc-s-3); }
    .level-card h3[b-nlhac6j4we] { font-size: var(--cc-fs-base); }

    /* Change form: full width */
    .change-grid[b-nlhac6j4we] { grid-template-columns: 1fr; }

    /* History rows: simplified */
    .history-row[b-nlhac6j4we] {
        grid-template-columns: 1fr auto;
        padding: var(--cc-s-2) var(--cc-s-3);
    }

    .history-row > *:nth-child(3)[b-nlhac6j4we],
    .history-row > *:nth-child(4)[b-nlhac6j4we] { display: none; }
}
/* /Pages/Stories/StoriesPage.razor.rz.scp.css */
/* StoriesPage — scoped styles
   Global: content-list, content-card, media-badge, media-action-btn (media.css + content-studio.css)
   Scoped: story-specific overrides and responsive adjustments */

/* Story-Karte: Cover-Thumb schärfer für Story-Format */
[b-0ypxzv8ksu] .content-card-thumb {
    border-radius: 6px;
    aspect-ratio: 9/16;
    width: 48px;
    height: 72px;
}

/* Slide- und View-Counter als kompakte Chips */
[b-0ypxzv8ksu] .story-stats {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    margin-top: var(--cc-s-1);
}

[b-0ypxzv8ksu] .story-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--cc-fg-dim);
}

/* Mobile: stacked list on narrow screens */
@media (max-width: 600px) {
    [b-0ypxzv8ksu] .content-card {
        flex-direction: column;
    }

    [b-0ypxzv8ksu] .content-card-thumb {
        width: 100%;
        height: 120px;
        aspect-ratio: unset;
    }
}
/* /Pages/Support/SupportPage.razor.rz.scp.css */
/* ── Briefing Bar ───────────────────────────────────────────────────────────── */

.sup-briefing[b-sp3halczw1] {
    padding: var(--cc-s-4) var(--cc-s-5);
    margin-bottom: var(--cc-s-4);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-cyan, #5DD9C1) 8%, transparent), transparent 60%),
        var(--cc-bg-card);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
}

.sup-kicker[b-sp3halczw1] {
    color: var(--cc-cyan, #5DD9C1);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sup-briefing > p[b-sp3halczw1] {
    margin: 0;
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-sm)/1.5 var(--cc-font-sans);
}

.sup-briefing-tabs[b-sp3halczw1] {
    display: flex;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
}

.sup-tab[b-sp3halczw1] {
    padding: var(--cc-s-2) var(--cc-s-3);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    background: transparent;
    color: var(--cc-fg-muted);
    font: 600 var(--cc-fs-xs)/1 var(--cc-font-sans);
    cursor: pointer;
    transition: background var(--cc-dur-fast), color var(--cc-dur-fast), border-color var(--cc-dur-fast);
}

.sup-tab:hover[b-sp3halczw1]  { background: var(--cc-bg-hover); color: var(--cc-fg); }
.sup-tab:active[b-sp3halczw1] { transform: scale(.96); transition-duration: 60ms; }
.sup-tab:focus-visible[b-sp3halczw1] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}
.sup-tab.active[b-sp3halczw1] {
    background: color-mix(in oklch, var(--cc-cyan, #5DD9C1) 12%, transparent);
    color: var(--cc-cyan, #5DD9C1);
    border-color: color-mix(in oklch, var(--cc-cyan, #5DD9C1) 30%, var(--cc-border));
}

/* ── SLA Badges in Header ──────────────────────────────────────────────────── */

.sup-sla-alert[b-sp3halczw1] {
    padding: 4px 10px;
    border-radius: var(--cc-r-sm);
    background: color-mix(in oklch, var(--cc-danger) 14%, transparent);
    color: var(--cc-danger);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    animation: sla-blink-b-sp3halczw1 1.2s ease-in-out infinite;
}

.sup-sla-urgent[b-sp3halczw1] {
    padding: 4px 10px;
    border-radius: var(--cc-r-sm);
    background: color-mix(in oklch, var(--cc-warning) 14%, transparent);
    color: var(--cc-warning);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
}

@keyframes sla-blink-b-sp3halczw1 {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* ── Main Layout ────────────────────────────────────────────────────────────── */

.sup-layout[b-sp3halczw1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cc-s-4);
    min-height: 0;
}

.sup-layout.split[b-sp3halczw1] {
    grid-template-columns: minmax(300px, .42fr) 1fr;
}

/* ── Ticket List ────────────────────────────────────────────────────────────── */

.sup-list[b-sp3halczw1] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
}

.sup-ticket[b-sp3halczw1] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
    padding: var(--cc-s-3) var(--cc-s-4);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    background: var(--cc-bg-card);
    text-align: left;
    cursor: pointer;
    transition:
        background var(--cc-dur-fast),
        border-color var(--cc-dur-fast),
        box-shadow var(--cc-dur-fast),
        transform var(--cc-dur-fast);
    color: inherit;
}

.sup-ticket:hover:not(.active)[b-sp3halczw1] {
    background: var(--cc-bg-hover);
    transform: translateX(2px);
    box-shadow: var(--cc-shadow-sm);
}

.sup-ticket.active[b-sp3halczw1] {
    background: color-mix(in oklch, var(--cc-accent) 8%, var(--cc-bg-card));
    border-color: color-mix(in oklch, var(--cc-accent) 30%, var(--cc-border));
    box-shadow: var(--cc-glow-accent);
}

.sup-ticket.sla-breached[b-sp3halczw1] {
    border-left: 3px solid var(--cc-danger);
    animation: ticket-breach-pulse-b-sp3halczw1 1.6s ease-in-out infinite;
}

@keyframes ticket-breach-pulse-b-sp3halczw1 {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 0 2px color-mix(in oklch, var(--cc-danger) 18%, transparent); }
}

.sup-ticket.sla-urgent[b-sp3halczw1] {
    border-left: 3px solid var(--cc-warning);
}

.sup-ticket-top[b-sp3halczw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-2);
}

.sup-ticket-cat[b-sp3halczw1] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cc-fg-dim);
}

.sup-priority[b-sp3halczw1] {
    padding: 2px 7px;
    border-radius: var(--cc-r-sm);
    font: 700 10px/1 var(--cc-font-mono);
    text-transform: uppercase;
}

.sup-priority.high[b-sp3halczw1]   { background: color-mix(in oklch, var(--cc-danger) 14%, transparent); color: var(--cc-danger); }
.sup-priority.medium[b-sp3halczw1] { background: color-mix(in oklch, var(--cc-warning) 12%, transparent); color: var(--cc-warning); }
.sup-priority.low[b-sp3halczw1]    { background: color-mix(in oklch, var(--cc-fg-dim) 12%, transparent); color: var(--cc-fg-dim); }

.sup-ticket-subject[b-sp3halczw1] {
    font: 600 var(--cc-fs-sm)/1.3 var(--cc-font-sans);
    color: var(--cc-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sup-ticket-meta[b-sp3halczw1] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    font: 400 var(--cc-fs-xs)/1 var(--cc-font-sans);
    color: var(--cc-fg-dim);
}

.sup-sla-badge[b-sp3halczw1] {
    padding: 2px 7px;
    border-radius: var(--cc-r-sm);
    font: 700 10px/1 var(--cc-font-mono);
}

.sup-sla-badge.breached[b-sp3halczw1] { background: color-mix(in oklch, var(--cc-danger) 14%, transparent); color: var(--cc-danger); animation: sla-blink-b-sp3halczw1 1.2s ease-in-out infinite; }
.sup-sla-badge.urgent[b-sp3halczw1]   { background: color-mix(in oklch, var(--cc-warning) 12%, transparent); color: var(--cc-warning); }
.sup-sla-badge.ok[b-sp3halczw1]       { background: color-mix(in oklch, var(--cc-success) 10%, transparent); color: var(--cc-fg-dim); }

.sup-unassigned-dot[b-sp3halczw1] {
    position: absolute;
    top: var(--cc-s-3);
    right: var(--cc-s-3);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cc-warning);
    animation: sla-blink-b-sp3halczw1 2s ease-in-out infinite;
}

/* ── Pager ──────────────────────────────────────────────────────────────────── */

.sup-pager[b-sp3halczw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--cc-s-3);
    border-top: 1px solid var(--cc-border-soft);
    color: var(--cc-fg-dim);
    font: 500 var(--cc-fs-xs)/1 var(--cc-font-sans);
}

/* ── Detail Panel ───────────────────────────────────────────────────────────── */

.sup-detail[b-sp3halczw1] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    background: var(--cc-bg-card);
    overflow: hidden;
    animation: detail-in-b-sp3halczw1 var(--cc-dur-med) var(--cc-ease) both;
}

@keyframes detail-in-b-sp3halczw1 {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
}

.sup-detail-loading[b-sp3halczw1] { padding: var(--cc-s-6); }

.sup-detail-head[b-sp3halczw1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--cc-s-5);
    border-bottom: 1px solid var(--cc-border-soft);
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 5%, transparent), transparent 60%),
        var(--cc-bg-card);
}

.sup-detail-head h3[b-sp3halczw1] {
    margin: var(--cc-s-2) 0 var(--cc-s-2);
    font: 700 var(--cc-fs-md)/1.2 var(--cc-font-sans);
    color: var(--cc-fg);
}

.sup-detail-meta[b-sp3halczw1] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-xs)/1 var(--cc-font-sans);
}

.sup-detail-head-actions[b-sp3halczw1] { flex-shrink: 0; }

.sup-status-badge[b-sp3halczw1] {
    padding: 2px 8px;
    border-radius: var(--cc-r-sm);
    font: 700 10px/1 var(--cc-font-mono);
    text-transform: uppercase;
}

.sup-status-badge.open[b-sp3halczw1]        { background: color-mix(in oklch, var(--cc-warning) 12%, transparent); color: var(--cc-warning); }
.sup-status-badge.in-progress[b-sp3halczw1] { background: color-mix(in oklch, var(--cc-accent) 12%, transparent); color: var(--cc-accent); }
.sup-status-badge.waiting[b-sp3halczw1]     { background: color-mix(in oklch, var(--cc-violet, #8B7CF6) 12%, transparent); color: var(--cc-violet, #8B7CF6); }
.sup-status-badge.resolved[b-sp3halczw1]    { background: color-mix(in oklch, var(--cc-success) 12%, transparent); color: var(--cc-success); }

/* ── Assign Bar ─────────────────────────────────────────────────────────────── */

.sup-assign-bar[b-sp3halczw1] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    padding: var(--cc-s-3) var(--cc-s-5);
    background: color-mix(in oklch, var(--cc-warning) 6%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--cc-warning) 15%, transparent);
    color: var(--cc-warning);
    font: 500 var(--cc-fs-xs)/1 var(--cc-font-sans);
}

/* ── Messages ───────────────────────────────────────────────────────────────── */

.sup-messages[b-sp3halczw1] {
    flex: 1;
    overflow-y: auto;
    padding: var(--cc-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
    max-height: 50vh;
}

.sup-msg[b-sp3halczw1] {
    display: flex;
    gap: var(--cc-s-3);
    align-items: flex-start;
}

.sup-msg.staff[b-sp3halczw1] { flex-direction: row-reverse; }

.sup-msg-avatar[b-sp3halczw1] {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: var(--cc-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-sans);
    flex-shrink: 0;
}

.sup-msg.user  .sup-msg-avatar[b-sp3halczw1] { background: color-mix(in oklch, var(--cc-fg-dim) 12%, transparent); color: var(--cc-fg-muted); }
.sup-msg.staff .sup-msg-avatar[b-sp3halczw1] { background: color-mix(in oklch, var(--cc-accent) 14%, transparent); color: var(--cc-accent); }

.sup-msg-body[b-sp3halczw1] { max-width: 76%; display: flex; flex-direction: column; gap: 4px; }
.sup-msg.staff .sup-msg-body[b-sp3halczw1] { align-items: flex-end; }

.sup-msg-sender[b-sp3halczw1] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-sans);
    color: var(--cc-fg-dim);
}

.sup-msg-text[b-sp3halczw1] {
    margin: 0;
    padding: var(--cc-s-3) var(--cc-s-4);
    border-radius: var(--cc-r-md);
    font: 400 var(--cc-fs-sm)/1.5 var(--cc-font-sans);
    color: var(--cc-fg);
    background: var(--cc-bg-hover);
    word-break: break-word;
}

.sup-msg.staff .sup-msg-text[b-sp3halczw1] {
    background: color-mix(in oklch, var(--cc-accent) 12%, var(--cc-bg-hover));
}

.sup-msg-time[b-sp3halczw1] {
    font: 400 10px/1 var(--cc-font-mono);
    color: var(--cc-fg-dim);
}

.sup-no-messages[b-sp3halczw1] {
    text-align: center;
    color: var(--cc-fg-dim);
    font: 400 var(--cc-fs-sm)/1 var(--cc-font-sans);
    padding: var(--cc-s-8) 0;
}

/* ── Reply Box ──────────────────────────────────────────────────────────────── */

.sup-reply-box[b-sp3halczw1] {
    border-top: 1px solid var(--cc-border-soft);
    padding: var(--cc-s-4) var(--cc-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
    background: var(--cc-bg-elev);
}

.sup-reply-input[b-sp3halczw1] {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    background: var(--cc-bg-input);
    color: var(--cc-fg);
    font: 400 var(--cc-fs-sm)/1.5 var(--cc-font-sans);
    padding: var(--cc-s-3) var(--cc-s-4);
    transition: border-color var(--cc-dur-fast);
    outline: none;
}

.sup-reply-input:focus[b-sp3halczw1] { border-color: var(--cc-border-focus); }

.sup-reply-actions[b-sp3halczw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-3);
}

.sup-close-check[b-sp3halczw1] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    font: 500 var(--cc-fs-xs)/1 var(--cc-font-sans);
    color: var(--cc-fg-muted);
    cursor: pointer;
}

.sup-resolved-bar[b-sp3halczw1] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    padding: var(--cc-s-4) var(--cc-s-5);
    background: color-mix(in oklch, var(--cc-success) 7%, transparent);
    border-top: 1px solid color-mix(in oklch, var(--cc-success) 15%, transparent);
    color: var(--cc-success);
    font: 600 var(--cc-fs-xs)/1 var(--cc-font-sans);
}

/* ── Spinner ────────────────────────────────────────────────────────────────── */

.btn-spinner[b-sp3halczw1] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-sp3halczw1 .6s linear infinite;
    margin-right: 4px;
}

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

/* ── Mobile ≤ 767px ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Split layout → single column */
    .sup-layout[b-sp3halczw1],
    .sup-layout.split[b-sp3halczw1] {
        grid-template-columns: 1fr;
    }

    /* Inbox list: compact rows */
    .sup-list[b-sp3halczw1] { max-height: 300px; overflow-y: auto; }

    /* Thread bubbles wider on mobile */
    .sup-msg-body[b-sp3halczw1] { max-width: 90%; }

    /* Briefing strip: stack */
    .sup-briefing[b-sp3halczw1] { flex-direction: column; gap: var(--cc-s-3); }

    /* Reply area */
    .sup-reply[b-sp3halczw1] { padding: var(--cc-s-3); }
    .sup-reply-actions[b-sp3halczw1] { flex-wrap: wrap; }
}

/* Critical page hardening: ticket context stays available, reply actions are never clipped. */
.sup-layout[b-sp3halczw1],
.sup-list[b-sp3halczw1],
.sup-detail[b-sp3halczw1] {
    min-width: 0;
}

.sup-layout.split[b-sp3halczw1] {
    grid-template-columns: minmax(300px, .42fr) minmax(0, 1fr);
}

.sup-briefing[b-sp3halczw1] {
    position: sticky;
    top: calc(92px + env(safe-area-inset-top));
    z-index: 24;
    backdrop-filter: blur(16px);
}

.sup-detail[b-sp3halczw1] {
    position: sticky;
    top: calc(148px + env(safe-area-inset-top));
    align-self: start;
    max-height: calc(100dvh - 168px);
    min-height: 0;
}

.sup-detail-head[b-sp3halczw1],
.sup-reply-box[b-sp3halczw1],
.sup-resolved-bar[b-sp3halczw1] {
    position: sticky;
    z-index: 2;
    background: color-mix(in oklch, var(--cc-bg-card) 94%, transparent);
    backdrop-filter: blur(14px);
}

.sup-detail-head[b-sp3halczw1] {
    top: 0;
}

.sup-reply-box[b-sp3halczw1],
.sup-resolved-bar[b-sp3halczw1] {
    bottom: 0;
}

.sup-messages[b-sp3halczw1] {
    min-height: 240px;
    max-height: none;
    min-width: 0;
}

@media (max-width: 980px) {
    .sup-briefing[b-sp3halczw1],
    .sup-detail[b-sp3halczw1] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 767px) {
    .sup-list[b-sp3halczw1] {
        max-height: none;
        overflow: visible;
    }

    .sup-detail-head[b-sp3halczw1],
    .sup-reply-box[b-sp3halczw1],
    .sup-resolved-bar[b-sp3halczw1] {
        position: static;
    }
}
/* /Pages/Sys/AuthEventsPage.razor.rz.scp.css */
.auth-events-summary[b-rof6b8pgfa] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.auth-events-card[b-rof6b8pgfa],
.auth-risk[b-rof6b8pgfa],
.auth-events-detail[b-rof6b8pgfa] {
    background: var(--surface-card, #1a1a2e);
    border: 1px solid var(--border-default, rgba(255,255,255,.08));
    border-radius: 10px;
}

.auth-events-card[b-rof6b8pgfa] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.auth-events-card span[b-rof6b8pgfa],
.auth-risk small[b-rof6b8pgfa] {
    color: var(--text-muted, rgba(255,255,255,.5));
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.auth-events-card strong[b-rof6b8pgfa],
.auth-risk strong[b-rof6b8pgfa] {
    color: var(--text-primary, #fff);
    font-size: 1.45rem;
}

.auth-events-card.primary[b-rof6b8pgfa] {
    border-color: rgba(59,130,246,.28);
    background: rgba(59,130,246,.08);
}

.auth-events-card.warning[b-rof6b8pgfa] {
    border-color: rgba(245,158,11,.3);
    background: rgba(245,158,11,.08);
}

.auth-risk-grid[b-rof6b8pgfa],
.auth-events-filters[b-rof6b8pgfa] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.auth-risk[b-rof6b8pgfa] {
    min-width: 150px;
    padding: .85rem 1rem;
    text-align: left;
    color: inherit;
}

.auth-risk span[b-rof6b8pgfa] {
    display: block;
    color: var(--text-secondary, rgba(255,255,255,.76));
    margin-bottom: .3rem;
}

.auth-risk.warning[b-rof6b8pgfa] {
    border-color: rgba(245,158,11,.3);
}

.auth-risk.critical[b-rof6b8pgfa] {
    border-color: rgba(239,68,68,.35);
}

.auth-risk-empty[b-rof6b8pgfa] {
    color: var(--text-muted, rgba(255,255,255,.55));
    padding: .85rem 0;
}

.auth-events-filters .input:first-child[b-rof6b8pgfa] {
    flex: 1 1 260px;
}

.auth-events-table[b-rof6b8pgfa] {
    border: 1px solid var(--border-default, rgba(255,255,255,.08));
    border-radius: 10px;
    overflow: hidden;
}

.auth-events-head[b-rof6b8pgfa],
.auth-events-row[b-rof6b8pgfa] {
    display: grid;
    grid-template-columns: 120px 110px 150px minmax(130px, 1fr) minmax(130px, 1fr) 130px;
    gap: .75rem;
    align-items: center;
    padding: .7rem 1rem;
}

.auth-events-head[b-rof6b8pgfa] {
    background: rgba(255,255,255,.03);
    color: var(--text-muted, rgba(255,255,255,.45));
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.auth-events-row[b-rof6b8pgfa] {
    width: 100%;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,.78));
    text-align: left;
    font: inherit;
}

.auth-events-row:hover[b-rof6b8pgfa] {
    background: rgba(255,255,255,.035);
}

.auth-events-row i[b-rof6b8pgfa] {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .45rem;
    border-radius: 999px;
    background: #38bdf8;
}

.auth-events-row.warning i[b-rof6b8pgfa] {
    background: #f59e0b;
}

.auth-events-row.critical i[b-rof6b8pgfa] {
    background: #ef4444;
}

.mono[b-rof6b8pgfa] {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .82rem;
}

.auth-events-detail[b-rof6b8pgfa] {
    margin-top: 1rem;
    padding: 1rem;
}

.auth-events-detail > div[b-rof6b8pgfa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.auth-events-detail dl[b-rof6b8pgfa] {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: .35rem .75rem;
    margin: 0 0 1rem;
}

.auth-events-detail dt[b-rof6b8pgfa] {
    color: var(--text-muted, rgba(255,255,255,.5));
}

.auth-events-detail dd[b-rof6b8pgfa] {
    margin: 0;
}

.auth-events-detail pre[b-rof6b8pgfa] {
    overflow: auto;
    max-height: 360px;
    padding: .85rem;
    border-radius: 8px;
    background: rgba(0,0,0,.22);
    color: var(--text-secondary, rgba(255,255,255,.78));
}

@media (max-width: 900px) {
    .auth-events-summary[b-rof6b8pgfa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth-events-head[b-rof6b8pgfa] {
        display: none;
    }

    .auth-events-row[b-rof6b8pgfa] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Pages/Sys/FeatureFlagsPage.razor.rz.scp.css */
/* ── Briefing Bar ───────────────────────────────────────────────────────────── */

.ff-briefing[b-5iuy7in4cl] {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-s-4);
    padding: var(--cc-s-4) var(--cc-s-5);
    margin-bottom: var(--cc-s-4);
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-violet, #8B7CF6) 10%, transparent), transparent 60%),
        var(--cc-bg-card);
    position: relative;
    overflow: visible;
}

.ff-briefing[b-5iuy7in4cl]::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    border-radius: inherit;
    height: 2px;
    background: linear-gradient(90deg, var(--cc-violet, #8B7CF6), var(--cc-accent), transparent);
    animation: ff-scan-b-5iuy7in4cl 4s ease-in-out infinite;
}

@keyframes ff-scan-b-5iuy7in4cl {
    0%, 100% { opacity: .4; }
    50%       { opacity: .9; }
}

.ff-briefing-icon[b-5iuy7in4cl] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--cc-r-md);
    background: linear-gradient(135deg,
        color-mix(in oklch, var(--cc-violet, #8B7CF6) 20%, transparent),
        color-mix(in oklch, var(--cc-accent) 12%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-violet, #8B7CF6);
}

.ff-kicker[b-5iuy7in4cl] {
    display: block;
    color: var(--cc-violet, #8B7CF6);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--cc-s-1);
}

.ff-assist-line[b-5iuy7in4cl] {
    margin: 0;
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-sm)/1.5 var(--cc-font-sans);
}

.ff-briefing-stats[b-5iuy7in4cl] {
    display: flex;
    gap: var(--cc-s-2);
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.ff-stat[b-5iuy7in4cl] {
    padding: 4px 10px;
    border-radius: var(--cc-r-sm);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    white-space: nowrap;
}

.ff-stat-ok[b-5iuy7in4cl]   { background: color-mix(in oklch, var(--cc-success) 14%, transparent); color: var(--cc-success); }
.ff-stat-off[b-5iuy7in4cl]  { background: color-mix(in oklch, var(--cc-fg-dim)  12%, transparent); color: var(--cc-fg-dim);  }
.ff-stat-kill[b-5iuy7in4cl] { background: color-mix(in oklch, var(--cc-danger)  14%, transparent); color: var(--cc-danger); animation: kill-pulse-b-5iuy7in4cl 1.4s ease-in-out infinite; }

@keyframes kill-pulse-b-5iuy7in4cl {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

/* ── Error / Loading ────────────────────────────────────────────────────────── */

.ff-error[b-5iuy7in4cl] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
    padding: var(--cc-s-4);
    border-radius: var(--cc-r-md);
    background: var(--cc-danger-bg);
    color: var(--cc-danger);
    font: 500 var(--cc-fs-sm)/1 var(--cc-font-sans);
}

/* ── Cards Grid ─────────────────────────────────────────────────────────────── */

.ff-grid[b-5iuy7in4cl] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
}

.ff-card[b-5iuy7in4cl] {
    border-radius: var(--cc-r-lg);
    border: 1px solid var(--cc-border);
    background: var(--cc-bg-card);
    overflow: hidden;
    transition: border-color var(--cc-dur-fast), box-shadow var(--cc-dur-fast);
}

.ff-card:hover[b-5iuy7in4cl] { box-shadow: var(--cc-shadow-md); }

.ff-card-on[b-5iuy7in4cl]   { border-left: 3px solid var(--cc-success); }
.ff-card-off[b-5iuy7in4cl]  { border-left: 3px solid var(--cc-border); }
.ff-card-kill[b-5iuy7in4cl] {
    border-left: 3px solid var(--cc-danger);
    animation: kill-card-pulse-b-5iuy7in4cl 2s ease-in-out infinite;
}

@keyframes kill-card-pulse-b-5iuy7in4cl {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 0 1px color-mix(in oklch, var(--cc-danger) 18%, transparent); }
}

/* ── Card Header ────────────────────────────────────────────────────────────── */

.ff-card-head[b-5iuy7in4cl] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cc-s-4) var(--cc-s-5);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: background var(--cc-dur-fast);
}

.ff-card-head:hover[b-5iuy7in4cl] { background: var(--cc-bg-hover); }

.ff-card-meta[b-5iuy7in4cl] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
}

.ff-card-key[b-5iuy7in4cl] {
    font: 700 var(--cc-fs-sm)/1 var(--cc-font-mono);
    color: var(--cc-fg);
    letter-spacing: .02em;
}

.ff-pill[b-5iuy7in4cl] {
    padding: 3px 8px;
    border-radius: var(--cc-r-sm);
    font: 800 10px/1 var(--cc-font-mono);
    letter-spacing: .06em;
}

.ff-pill-on[b-5iuy7in4cl]   { background: color-mix(in oklch, var(--cc-success) 16%, transparent); color: var(--cc-success); }
.ff-pill-off[b-5iuy7in4cl]  { background: color-mix(in oklch, var(--cc-fg-dim)  12%, transparent); color: var(--cc-fg-dim);  }
.ff-pill-kill[b-5iuy7in4cl] { background: color-mix(in oklch, var(--cc-danger)  16%, transparent); color: var(--cc-danger);  }

.ff-card-right[b-5iuy7in4cl] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
}

.ff-rollout-badge[b-5iuy7in4cl] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-accent);
    background: color-mix(in oklch, var(--cc-accent) 12%, transparent);
    padding: 3px 8px;
    border-radius: var(--cc-r-sm);
}

.ff-chevron[b-5iuy7in4cl] {
    color: var(--cc-fg-dim);
    transition: transform var(--cc-dur-med) var(--cc-ease);
}
.ff-chevron.open[b-5iuy7in4cl] { transform: rotate(180deg); }

.ff-card-desc[b-5iuy7in4cl] {
    margin: 0;
    padding: 0 var(--cc-s-5) var(--cc-s-4);
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-sm)/1.45 var(--cc-font-sans);
}

/* ── Card Body ──────────────────────────────────────────────────────────────── */

.ff-card-body[b-5iuy7in4cl] {
    padding: 0 var(--cc-s-5) var(--cc-s-5);
    border-top: 1px solid var(--cc-border-soft);
    padding-top: var(--cc-s-4);
    animation: ff-expand-b-5iuy7in4cl var(--cc-dur-med) var(--cc-ease) both;
}

@keyframes ff-expand-b-5iuy7in4cl {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Detail Grid ────────────────────────────────────────────────────────────── */

.ff-detail-grid[b-5iuy7in4cl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--cc-s-3) var(--cc-s-4);
    margin-bottom: var(--cc-s-4);
}

.ff-detail-label[b-5iuy7in4cl] {
    display: block;
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.ff-detail-value[b-5iuy7in4cl] {
    display: block;
    color: var(--cc-fg);
    font: 500 var(--cc-fs-sm)/1.4 var(--cc-font-sans);
}

/* ── Rollout Bar ────────────────────────────────────────────────────────────── */

.ff-rollout-bar-wrap[b-5iuy7in4cl] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
    margin-bottom: var(--cc-s-4);
}

.ff-rollout-bar[b-5iuy7in4cl] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--cc-bg-hover);
    overflow: hidden;
}

.ff-rollout-fill[b-5iuy7in4cl] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cc-accent), var(--cc-success));
    transition: width var(--cc-dur-slow) var(--cc-ease);
}

.ff-rollout-label[b-5iuy7in4cl] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-accent);
    white-space: nowrap;
}

/* ── Card Actions ───────────────────────────────────────────────────────────── */

.ff-card-actions[b-5iuy7in4cl] {
    display: flex;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
}

/* ── Edit / New Form ────────────────────────────────────────────────────────── */

.ff-edit-form[b-5iuy7in4cl] { display: flex; flex-direction: column; gap: var(--cc-s-3); }

.ff-field[b-5iuy7in4cl] { display: flex; flex-direction: column; gap: var(--cc-s-1); }

.ff-field-row[b-5iuy7in4cl] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--cc-s-4);
    align-items: start;
}

.ff-label[b-5iuy7in4cl] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ff-edit-actions[b-5iuy7in4cl] {
    display: flex;
    gap: var(--cc-s-2);
    justify-content: flex-end;
}

.ff-form-error[b-5iuy7in4cl] {
    color: var(--cc-danger);
    font: 500 var(--cc-fs-xs)/1.4 var(--cc-font-sans);
    padding: var(--cc-s-2) var(--cc-s-3);
    border-radius: var(--cc-r-sm);
    background: var(--cc-danger-bg);
}

/* ── Toggle Switch ──────────────────────────────────────────────────────────── */

.ff-toggle[b-5iuy7in4cl] {
    width: 48px;
    height: 26px;
    border-radius: 13px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background var(--cc-dur-med) var(--cc-ease);
    padding: 0;
    background: var(--cc-bg-hover);
}

.ff-toggle.on[b-5iuy7in4cl]  { background: var(--cc-success); }
.ff-toggle.off[b-5iuy7in4cl] { background: color-mix(in oklch, var(--cc-fg-dim) 28%, var(--cc-bg-hover)); }

.ff-toggle-thumb[b-5iuy7in4cl] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: transform var(--cc-dur-med) var(--cc-ease);
}

.ff-toggle.on .ff-toggle-thumb[b-5iuy7in4cl] { transform: translateX(22px); }

/* ── Rollout Slider ─────────────────────────────────────────────────────────── */

.ff-slider[b-5iuy7in4cl] {
    width: 100%;
    accent-color: var(--cc-accent);
    cursor: pointer;
}

/* ── Overlays / Modals ──────────────────────────────────────────────────────── */

.ff-new-overlay[b-5iuy7in4cl] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlay-in-b-5iuy7in4cl var(--cc-dur-med) var(--cc-ease) both;
}

@keyframes overlay-in-b-5iuy7in4cl {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ff-new-modal[b-5iuy7in4cl], .ff-kill-modal[b-5iuy7in4cl] {
    background: var(--cc-bg-card);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-xl);
    padding: var(--cc-s-6);
    width: min(480px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
    box-shadow: var(--cc-shadow-lg);
    animation: modal-in-b-5iuy7in4cl var(--cc-dur-med) var(--cc-ease) both;
}

@keyframes modal-in-b-5iuy7in4cl {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.ff-new-head[b-5iuy7in4cl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: var(--cc-s-4);
    border-bottom: 1px solid var(--cc-border-soft);
}

.ff-new-head strong[b-5iuy7in4cl] {
    font: 750 var(--cc-fs-md)/1.1 var(--cc-font-sans);
    color: var(--cc-fg);
}

.ff-new-head small[b-5iuy7in4cl] {
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-xs)/1.4 var(--cc-font-sans);
}

/* ── Kill Modal ─────────────────────────────────────────────────────────────── */

.ff-kill-modal[b-5iuy7in4cl] {
    border-color: color-mix(in oklch, var(--cc-danger) 40%, var(--cc-border));
    text-align: center;
}

.ff-kill-icon[b-5iuy7in4cl] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--cc-danger) 14%, transparent);
    color: var(--cc-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: kill-icon-shake-b-5iuy7in4cl .6s ease-in-out;
}

@keyframes kill-icon-shake-b-5iuy7in4cl {
    0%, 100% { transform: none; }
    20%       { transform: rotate(-8deg); }
    40%       { transform: rotate(8deg); }
    60%       { transform: rotate(-4deg); }
    80%       { transform: rotate(4deg); }
}

.ff-kill-modal strong[b-5iuy7in4cl] {
    font: 750 var(--cc-fs-md)/1.1 var(--cc-font-sans);
    color: var(--cc-danger);
}

.ff-kill-modal p[b-5iuy7in4cl] {
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-sm)/1.5 var(--cc-font-sans);
    margin: 0;
}

.ff-kill-modal code[b-5iuy7in4cl] {
    font-family: var(--cc-font-mono);
    background: color-mix(in oklch, var(--cc-danger) 10%, transparent);
    color: var(--cc-danger);
    padding: 1px 6px;
    border-radius: var(--cc-r-sm);
}

.ff-kill-modal .ff-field[b-5iuy7in4cl] { text-align: left; }

/* ── Spinner ────────────────────────────────────────────────────────────────── */

.btn-spinner[b-5iuy7in4cl] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-5iuy7in4cl .6s linear infinite;
    margin-right: 4px;
}

@keyframes spin-b-5iuy7in4cl { to { transform: rotate(360deg); } }

/* -- Mobile <= 767px ---------------------------------------------- */
@media (max-width: 767px) {
    .ff-briefing[b-5iuy7in4cl] { flex-direction: column; gap: var(--cc-s-3); }

    .ff-grid[b-5iuy7in4cl] { gap: var(--cc-s-3); }

    .ff-card[b-5iuy7in4cl] { padding: var(--cc-s-3); }

    .ff-card-head[b-5iuy7in4cl] { flex-wrap: wrap; gap: var(--cc-s-2); }

    .ff-targets-grid[b-5iuy7in4cl],
    .ff-override-grid[b-5iuy7in4cl] { grid-template-columns: 1fr !important; }
}
/* /Pages/Sys/MfaStatusPage.razor.rz.scp.css */
.mfa-summary[b-bv8oibvbpr] {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface-card, #1a1a2e);
    border: 1px solid var(--border-default, rgba(255,255,255,.08));
    border-radius: 12px;
    flex-wrap: wrap;
}

/* Gauge circle */
.mfa-gauge[b-bv8oibvbpr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    min-width: 90px;
    padding: .75rem 1rem;
    border-radius: 50%;
    aspect-ratio: 1;
    justify-content: center;
    border: 3px solid var(--color-muted, rgba(255,255,255,.1));
    transition: border-color .3s;
}

.mfa-gauge.good[b-bv8oibvbpr]   { border-color: var(--color-success, #22c55e); }
.mfa-gauge.medium[b-bv8oibvbpr] { border-color: var(--color-warning, #f59e0b); }
.mfa-gauge.low[b-bv8oibvbpr]    { border-color: var(--color-danger,  #ef4444); }

.gauge-value[b-bv8oibvbpr] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    line-height: 1;
}

.gauge-value small[b-bv8oibvbpr] { font-size: .85rem; font-weight: 400; }
.gauge-label[b-bv8oibvbpr] { font-size: .7rem; color: var(--text-muted, rgba(255,255,255,.45)); text-align: center; }

.mfa-stats[b-bv8oibvbpr] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-pill[b-bv8oibvbpr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .6rem 1.25rem;
    border-radius: 8px;
    min-width: 80px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
}

.stat-pill.stat-on[b-bv8oibvbpr]  { background: rgba(34,197,94,.07);  border-color: rgba(34,197,94,.2); }
.stat-pill.stat-off[b-bv8oibvbpr] { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.2); }

.stat-num[b-bv8oibvbpr] { font-size: 1.4rem; font-weight: 700; color: var(--text-primary, #fff); }
.stat-lbl[b-bv8oibvbpr] { font-size: .72rem; color: var(--text-muted, rgba(255,255,255,.45)); }

/* Filter row */
.filter-row[b-bv8oibvbpr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-toggle[b-bv8oibvbpr] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--text-secondary, rgba(255,255,255,.7));
    cursor: pointer;
}

.search-input[b-bv8oibvbpr] {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    background: var(--surface-input, #0f0f23);
    border: 1px solid var(--border-default, rgba(255,255,255,.1));
    border-radius: 6px;
    color: var(--text-primary, #fff);
    padding: .4rem .75rem;
    font-size: .85rem;
}

/* Table */
.mfa-table[b-bv8oibvbpr] {
    border: 1px solid var(--border-default, rgba(255,255,255,.08));
    border-radius: 10px;
    overflow: hidden;
}

.mfa-header[b-bv8oibvbpr],
.mfa-row[b-bv8oibvbpr] {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 100px 100px 100px 130px;
    align-items: center;
    padding: .6rem 1rem;
    gap: .75rem;
}

.mfa-header[b-bv8oibvbpr] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, rgba(255,255,255,.4));
    background: var(--surface-header, rgba(255,255,255,.03));
    border-bottom: 1px solid var(--border-default, rgba(255,255,255,.08));
}

.mfa-row[b-bv8oibvbpr] {
    border-bottom: 1px solid var(--border-default, rgba(255,255,255,.05));
    font-size: .85rem;
    transition: background .15s;
}

.mfa-row:last-child[b-bv8oibvbpr] { border-bottom: none; }
.mfa-row:hover[b-bv8oibvbpr] { background: rgba(255,255,255,.025); }
.mfa-row-missing[b-bv8oibvbpr] { background: rgba(239, 68, 68, .03); }

.mfa-name a[b-bv8oibvbpr] {
    color: var(--text-primary, #fff);
    text-decoration: none;
    font-weight: 500;
}

.mfa-name a:hover[b-bv8oibvbpr] { color: var(--color-accent, #7c3aed); }

.mfa-email[b-bv8oibvbpr] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfa-date[b-bv8oibvbpr]  { font-variant-numeric: tabular-nums; font-size: .8rem; }

.dim[b-bv8oibvbpr] { color: var(--text-muted, rgba(255,255,255,.5)); }

/* Mobile */
@media (max-width: 767px) {
    .mfa-header[b-bv8oibvbpr] { display: none; }
    .mfa-row[b-bv8oibvbpr] {
        grid-template-columns: 1fr 1fr;
        gap: .35rem;
        padding: .75rem;
    }
    .mfa-name[b-bv8oibvbpr]  { grid-column: 1 / -1; }
    .mfa-email[b-bv8oibvbpr] { grid-column: 1 / -1; font-size: .78rem; }
    .mfa-date[b-bv8oibvbpr]  { font-size: .75rem; }
}
/* /Pages/Users/UserAuthLogPage.razor.rz.scp.css */
.auth-log-summary[b-glhr6v3zge] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.summary-card[b-glhr6v3zge] {
    flex: 1;
    min-width: 120px;
    background: var(--surface-card, #1a1a2e);
    border: 1px solid var(--border-default, rgba(255,255,255,.08));
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.summary-card.success[b-glhr6v3zge] { border-color: var(--color-success, #22c55e40); }
.summary-card.danger[b-glhr6v3zge]  { border-color: var(--color-danger,  #ef444440); }

.summary-number[b-glhr6v3zge] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    line-height: 1;
}

.summary-label[b-glhr6v3zge] {
    font-size: .75rem;
    color: var(--text-muted, rgba(255,255,255,.5));
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Filter row */
.filter-row[b-glhr6v3zge] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-toggle[b-glhr6v3zge] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--text-secondary, rgba(255,255,255,.7));
    cursor: pointer;
}

.filter-select[b-glhr6v3zge] {
    background: var(--surface-input, #0f0f23);
    border: 1px solid var(--border-default, rgba(255,255,255,.1));
    border-radius: 6px;
    color: var(--text-primary, #fff);
    padding: .4rem .75rem;
    font-size: .85rem;
    cursor: pointer;
}

/* Table */
.auth-log-table[b-glhr6v3zge] {
    border: 1px solid var(--border-default, rgba(255,255,255,.08));
    border-radius: 10px;
    overflow: hidden;
}

.log-header[b-glhr6v3zge],
.log-row[b-glhr6v3zge] {
    display: grid;
    grid-template-columns: 160px 160px 90px 130px 1fr;
    align-items: center;
    padding: .6rem 1rem;
    gap: .75rem;
}

.log-header[b-glhr6v3zge] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, rgba(255,255,255,.4));
    background: var(--surface-header, rgba(255,255,255,.03));
    border-bottom: 1px solid var(--border-default, rgba(255,255,255,.08));
}

.log-row[b-glhr6v3zge] {
    border-bottom: 1px solid var(--border-default, rgba(255,255,255,.05));
    font-size: .85rem;
    transition: background .15s;
}

.log-row:last-child[b-glhr6v3zge] { border-bottom: none; }
.log-row:hover[b-glhr6v3zge] { background: rgba(255,255,255,.025); }
.log-row-failed[b-glhr6v3zge] { background: rgba(239, 68, 68, .04); }

.log-time[b-glhr6v3zge] { color: var(--text-muted, rgba(255,255,255,.5)); font-size: .8rem; font-variant-numeric: tabular-nums; }
.log-ip[b-glhr6v3zge]   { font-family: monospace; font-size: .82rem; color: var(--text-secondary, rgba(255,255,255,.6)); }
.log-agent[b-glhr6v3zge] { color: var(--text-secondary, rgba(255,255,255,.6)); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Event badges */
.event-badge[b-glhr6v3zge] {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
}

.ev-login[b-glhr6v3zge]    { background: rgba(59,130,246,.15); color: #93c5fd; }
.ev-logout[b-glhr6v3zge]   { background: rgba(156,163,175,.1); color: #9ca3af; }
.ev-totp[b-glhr6v3zge]     { background: rgba(168,85,247,.15); color: #c4b5fd; }
.ev-mfa[b-glhr6v3zge]      { background: rgba(16,185,129,.15); color: #6ee7b7; }
.ev-password[b-glhr6v3zge] { background: rgba(245,158,11,.15); color: #fcd34d; }
.ev-revoke[b-glhr6v3zge]   { background: rgba(239,68,68,.15);  color: #fca5a5; }

/* Mobile */
@media (max-width: 767px) {
    .log-header[b-glhr6v3zge] { display: none; }

    .log-row[b-glhr6v3zge] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: .35rem .5rem;
        padding: .75rem;
    }

    .log-time[b-glhr6v3zge]  { grid-column: 1; }
    .log-type[b-glhr6v3zge]  { grid-column: 2; text-align: right; }
    .log-result[b-glhr6v3zge]{ grid-column: 1; }
    .log-ip[b-glhr6v3zge]    { grid-column: 2; text-align: right; }
    .log-agent[b-glhr6v3zge] { grid-column: 1 / -1; font-size: .78rem; }
}
/* /Pages/Users/UserProfilePage.razor.rz.scp.css */
.profile-layout[b-udl6rw44gm] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
}

/* Hero Section */
.profile-hero[b-udl6rw44gm] {
    background: var(--cc-bg-card, #16181C);
    border: 1px solid rgba(255, 140, 66, 0.22);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(255, 140, 66, 0.08) inset,
        0 8px 32px rgba(0,0,0,0.4);
}

.hero-bg[b-udl6rw44gm] {
    height: 160px;
    background:
        linear-gradient(135deg,
            rgba(255, 140, 66, 0.32) 0%,
            rgba(199,  62, 64, 0.22) 45%,
            rgba(10,  11, 13, 0.15) 100%);
    border-bottom: 1px solid rgba(255, 140, 66, 0.20);
    position: relative;
}
.hero-bg[b-udl6rw44gm]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 100% at 15% 50%,
        rgba(255, 140, 66, 0.18), transparent 65%);
    pointer-events: none;
}

.hero-content[b-udl6rw44gm] {
    padding: 0 32px 24px;
    display: flex;
    gap: 24px;
    align-items: flex-end;
    margin-top: -40px;
}

.avatar-wrapper[b-udl6rw44gm] {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--bg-surface);
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.avatar[b-udl6rw44gm] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--text-2);
    overflow: hidden;
}

.avatar img[b-udl6rw44gm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.online-dot[b-udl6rw44gm] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: var(--green);
    border-radius: 50%;
    border: 3px solid var(--bg-surface);
    box-shadow: 0 0 10px rgba(40, 205, 65, 0.5);
}

.hero-info[b-udl6rw44gm] {
    padding-bottom: 8px;
}

.hero-info h2[b-udl6rw44gm] {
    margin: 0;
    font-size: 24px;
    color: var(--text-1);
    text-shadow: 0 0 10px rgba(255,255,255,0.1);
}

.handle[b-udl6rw44gm] {
    font-size: 14px;
    color: var(--text-3);
    font-family: monospace;
}

.hero-badges[b-udl6rw44gm] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Neon Chips */
.neon[b-udl6rw44gm] {
    box-shadow: 0 0 8px currentColor;
    border: 1px solid currentColor;
    background: transparent;
}
.chip-admin[b-udl6rw44gm] { color: var(--red); }
.chip-mod[b-udl6rw44gm] { color: var(--magenta); }
.chip-premium[b-udl6rw44gm] { color: var(--orange); }

/* Stats Row */
.hero-stats[b-udl6rw44gm] {
    display: flex;
    border-top: 1px solid var(--border-2);
    background: rgba(0,0,0,0.2);
}

.stat-card[b-udl6rw44gm] {
    flex: 1;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid var(--border-2);
}
.stat-card:last-child[b-udl6rw44gm] {
    border-right: none;
}

.stat-label[b-udl6rw44gm] {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value[b-udl6rw44gm] {
    font-size: 18px;
    color: var(--text-1);
}

.stat-value.danger[b-udl6rw44gm] {
    color: var(--red);
    text-shadow: 0 0 10px rgba(255,59,48,0.3);
}

.stat-sub[b-udl6rw44gm] {
    font-size: 11px;
    color: var(--text-4);
}

/* Tabs */
.profile-tabs[b-udl6rw44gm] {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-2);
    overflow-x: auto;
    scrollbar-width: thin;
    position: sticky;
    top: 0;
    z-index: 4;
    background: color-mix(in oklch, var(--bg-surface) 92%, transparent);
    backdrop-filter: blur(14px);
}

.ptab[b-udl6rw44gm] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-3);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    flex: 0 0 auto;
}

.ptab:hover[b-udl6rw44gm] {
    color: var(--text-2);
}

.ptab.active[b-udl6rw44gm] {
    color: var(--text-1);
    background: color-mix(in oklch, var(--cc-accent, #3b8bff) 10%, transparent);
    border-color: var(--border-2);
    border-bottom-color: transparent;
}

.ptab.active[b-udl6rw44gm]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--magenta);
    box-shadow: 0 0 8px var(--magenta);
}

/* Body / Cards */
.profile-body[b-udl6rw44gm] {
    padding-top: 12px;
}

.card-grid[b-udl6rw44gm] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

@media (max-width: 767px) {
    .card-grid[b-udl6rw44gm] { grid-template-columns: 1fr; }
    .role-editor-grid[b-udl6rw44gm],
    .permission-matrix[b-udl6rw44gm] { grid-template-columns: 1fr; }

    .permissions-head[b-udl6rw44gm],
    .matrix-toolbar[b-udl6rw44gm],
    .permission-save-card[b-udl6rw44gm] {
        align-items: stretch;
        flex-direction: column;
    }

    .permission-summary[b-udl6rw44gm] {
        width: 100%;
        text-align: left;
    }

    .permission-row[b-udl6rw44gm] {
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .risk-pill[b-udl6rw44gm] {
        grid-column: 2;
        width: fit-content;
    }

    .hero-content[b-udl6rw44gm] { flex-wrap: wrap; }

    .hero-stats[b-udl6rw44gm] {
        flex-wrap: wrap;
        gap: var(--cc-s-2);
    }

    .hero-stats > *[b-udl6rw44gm] { min-width: 100px; }

    .card[b-udl6rw44gm] { padding: 14px; }
}

.card[b-udl6rw44gm] {
    background: var(--bg-panel);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 24px;
}

.card h3[b-udl6rw44gm] {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: var(--text-1);
}

.card h4[b-udl6rw44gm] {
    margin: 16px 0 8px 0;
    font-size: 14px;
    color: var(--text-2);
}

.detail-grid[b-udl6rw44gm] {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 8px;
    font-size: 13px;
    margin: 0;
}
.detail-grid dt[b-udl6rw44gm] {
    color: var(--text-3);
}
.detail-grid dd[b-udl6rw44gm] {
    margin: 0;
    color: var(--text-1);
}

.divider[b-udl6rw44gm] {
    border: none;
    border-top: 1px solid var(--border-2);
    margin: 16px 0;
}

.bio[b-udl6rw44gm] {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

/* Security Actions */
.security-actions[b-udl6rw44gm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.w-full[b-udl6rw44gm] {
    width: 100%;
}

/* Toggles */
.toggle-list[b-udl6rw44gm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.permissions-shell[b-udl6rw44gm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.permissions-head[b-udl6rw44gm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 20px 24px;
}

.permissions-head h3[b-udl6rw44gm] {
    margin: 0 0 6px;
    font-size: 18px;
}

.permission-summary[b-udl6rw44gm] {
    min-width: 136px;
    padding: 12px 14px;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    text-align: right;
    background: rgba(255,255,255,.035);
}

.permission-summary strong[b-udl6rw44gm] {
    display: block;
    color: var(--text-1);
    font-size: 24px;
}

.permission-summary span[b-udl6rw44gm] {
    color: var(--text-3);
    font-size: 12px;
}

.role-editor-grid[b-udl6rw44gm] {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.role-card[b-udl6rw44gm],
.matrix-card[b-udl6rw44gm] {
    min-width: 0;
}

.role-segments[b-udl6rw44gm],
.profile-preset-list[b-udl6rw44gm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.role-segment[b-udl6rw44gm],
.profile-preset[b-udl6rw44gm] {
    border: 1px solid var(--border-2);
    background: rgba(255,255,255,.03);
    color: var(--text-2);
    border-radius: 8px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.role-segment[b-udl6rw44gm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.role-segment span[b-udl6rw44gm],
.profile-preset small[b-udl6rw44gm] {
    color: var(--text-3);
    font-size: 12px;
}

.role-segment:hover[b-udl6rw44gm],
.profile-preset:hover[b-udl6rw44gm] {
    border-color: var(--cc-accent, #3b8bff);
    background: color-mix(in oklch, var(--cc-accent, #3b8bff) 10%, transparent);
    transform: translateY(-1px);
}

.role-segment.active[b-udl6rw44gm] {
    border-color: var(--cc-accent, #3b8bff);
    background: color-mix(in oklch, var(--cc-accent, #3b8bff) 15%, transparent);
    color: var(--text-1);
}

.profile-preset[b-udl6rw44gm] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.preset-dot[b-udl6rw44gm] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--preset-accent);
    box-shadow: 0 0 12px var(--preset-accent);
}

.profile-preset strong[b-udl6rw44gm],
.profile-preset small[b-udl6rw44gm] {
    display: block;
}

.profile-preset em[b-udl6rw44gm] {
    color: var(--preset-accent);
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
}

.matrix-toolbar[b-udl6rw44gm],
.permission-save-card[b-udl6rw44gm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.permission-matrix[b-udl6rw44gm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.permission-area[b-udl6rw44gm] {
    border: 1px solid var(--border-2);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.02);
}

.permission-area-title[b-udl6rw44gm] {
    padding: 10px 12px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border-2);
    background: rgba(255,255,255,.035);
}

.permission-row[b-udl6rw44gm] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid color-mix(in oklch, var(--border-2) 72%, transparent);
}

.permission-row:last-child[b-udl6rw44gm] {
    border-bottom: none;
}

.permission-row input[b-udl6rw44gm] {
    width: 16px;
    height: 16px;
    accent-color: var(--cc-accent, #3b8bff);
}

.permission-row.selected[b-udl6rw44gm] {
    background: color-mix(in oklch, var(--cc-accent, #3b8bff) 9%, transparent);
}

.permission-row.baseline[b-udl6rw44gm] {
    opacity: .78;
}

.permission-copy[b-udl6rw44gm] {
    min-width: 0;
}

.permission-copy strong[b-udl6rw44gm],
.permission-copy small[b-udl6rw44gm] {
    display: block;
}

.permission-copy strong[b-udl6rw44gm] {
    color: var(--text-1);
    font-size: 13px;
}

.permission-copy small[b-udl6rw44gm] {
    color: var(--text-3);
    font-size: 11px;
    line-height: 1.35;
}

.risk-pill[b-udl6rw44gm] {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(255,255,255,.06);
    color: var(--text-3);
}

.risk-pill.medium[b-udl6rw44gm] { color: var(--blue); }
.risk-pill.high[b-udl6rw44gm] { color: var(--orange); }
.risk-pill.critical[b-udl6rw44gm] { color: var(--red); }

.permission-save-card .input[b-udl6rw44gm] {
    flex: 1;
    min-width: 220px;
}

.success[b-udl6rw44gm] {
    color: var(--green);
}

.small[b-udl6rw44gm] {
    font-size: 12px;
}

.toggle-item[b-udl6rw44gm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid var(--border-2);
}

.toggle-info[b-udl6rw44gm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toggle-info strong[b-udl6rw44gm] {
    font-size: 14px;
    color: var(--text-1);
}

.toggle-info span[b-udl6rw44gm] {
    font-size: 12px;
    color: var(--text-3);
}

.switch[b-udl6rw44gm] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.switch input[b-udl6rw44gm] {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider[b-udl6rw44gm] {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--border-2);
    transition: .4s;
    border-radius: 24px;
}
.slider[b-udl6rw44gm]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider[b-udl6rw44gm] {
    background-color: var(--magenta);
    box-shadow: 0 0 12px rgba(217, 79, 255, 0.4);
}
input:checked + .slider[b-udl6rw44gm]:before {
    transform: translateX(20px);
}

/* Heatmap */
.activity-heatmap[b-udl6rw44gm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.heatmap-day[b-udl6rw44gm] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--border-2);
}
.heatmap-day.i-1[b-udl6rw44gm] { background: rgba(59, 139, 255, 0.3); }
.heatmap-day.i-2[b-udl6rw44gm] { background: rgba(59, 139, 255, 0.5); box-shadow: 0 0 4px rgba(59, 139, 255, 0.3); }
.heatmap-day.i-3[b-udl6rw44gm] { background: rgba(59, 139, 255, 0.7); box-shadow: 0 0 6px rgba(59, 139, 255, 0.5); }
.heatmap-day.i-4[b-udl6rw44gm] { background: rgba(59, 139, 255, 1.0); box-shadow: 0 0 10px rgba(59, 139, 255, 0.8); }

/* Timeline */
.timeline[b-udl6rw44gm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}
.timeline-item[b-udl6rw44gm] {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--text-2);
}
.dot[b-udl6rw44gm] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}
.dot.info[b-udl6rw44gm] { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.dot.success[b-udl6rw44gm] { background: var(--green); box-shadow: 0 0 8px var(--green); }

/* Sessions */
.session-list[b-udl6rw44gm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.session-card[b-udl6rw44gm] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-2);
    border-radius: 8px;
}
.session-card.active[b-udl6rw44gm] {
    border-color: var(--blue);
    box-shadow: 0 0 12px rgba(59, 139, 255, 0.1);
}
.s-icon[b-udl6rw44gm] {
    font-size: 24px;
}
.s-info[b-udl6rw44gm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}
.s-info strong[b-udl6rw44gm] {
    color: var(--text-1);
}
.s-status[b-udl6rw44gm] {
    font-size: 11px;
    font-weight: 600;
}
.s-status.success[b-udl6rw44gm] { color: var(--green); }

/* Utility */
.mb-4[b-udl6rw44gm] { margin-bottom: 16px; }
.mt-4[b-udl6rw44gm] { margin-top: 16px; }
.flex[b-udl6rw44gm] { display: flex; }
.justify-end[b-udl6rw44gm] { justify-content: flex-end; }
.dim[b-udl6rw44gm] { color: var(--text-3); }
.neon-btn[b-udl6rw44gm] {
    box-shadow: 0 0 12px rgba(59, 139, 255, 0.3);
}

/* UUID copy row */
.uuid-row[b-udl6rw44gm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.uuid-text[b-udl6rw44gm] {
    font-size: 11px;
    word-break: break-all;
}
.uuid-copy-btn[b-udl6rw44gm] {
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    line-height: 0;
}
.uuid-copy-hint[b-udl6rw44gm] {
    font-size: 11px;
    color: var(--cc-success, #4ade80);
    font-weight: 600;
}
/* /Pages/Users/UsersPage.razor.rz.scp.css */
/* ── Two-column layout ──────────────────────────────────────────────────── */
.users-layout[b-1kvaofjyt2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cc-s-4);
    min-height: 0;
}

.users-layout.has-detail[b-1kvaofjyt2] {
    grid-template-columns: 1fr 400px;
    align-items: start;
}

.users-list-col[b-1kvaofjyt2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
}

/* ── User table ─────────────────────────────────────────────────────────── */
.user-table[b-1kvaofjyt2] {
    width: 100%;
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    overflow: visible;
    background:
        linear-gradient(180deg, color-mix(in oklch, white 2.5%, transparent), transparent 48px),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
    backdrop-filter: blur(14px);
}

.user-row-shell[b-1kvaofjyt2] {
    position: relative;
}

.user-row[b-1kvaofjyt2] {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
    align-items: center;
    padding: 0 var(--cc-s-4);
    min-height: 48px;
    gap: var(--cc-s-4);
    transition:
        background var(--cc-dur-fast) var(--cc-ease),
        transform var(--cc-dur-fast) var(--cc-ease);
}

.user-head[b-1kvaofjyt2] {
    font: 500 var(--cc-fs-xs)/1 var(--cc-font-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cc-fg-dim);
    border-bottom: 1px solid var(--cc-border);
    min-height: 40px;
}

.user-data[b-1kvaofjyt2] {
    border-bottom: 1px solid var(--cc-border-subtle, color-mix(in oklch, var(--cc-border) 40%, transparent));
    cursor: pointer;
    outline: none;
    position: relative;
    transition: background var(--cc-dur-fast) var(--cc-ease), box-shadow var(--cc-dur-fast) var(--cc-ease);
}

.user-data[b-1kvaofjyt2]::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--cc-accent);
    opacity: 0;
    transition: opacity var(--cc-dur-fast) var(--cc-ease);
    border-radius: 0 2px 2px 0;
}

.user-data:last-child[b-1kvaofjyt2] { border-bottom: none; }

.user-data:hover[b-1kvaofjyt2] {
    background: linear-gradient(90deg,
        rgba(255, 140, 66, 0.09),
        rgba(199, 62, 64, 0.04));
    transform: translateX(2px);
    box-shadow: inset 0 0 0 1px rgba(255, 140, 66, 0.08);
}

.user-data:hover[b-1kvaofjyt2]::before { opacity: .4; }

.user-data:hover .user-mini-avatar[b-1kvaofjyt2] {
    background: color-mix(in oklch, var(--cc-accent) 28%, transparent);
}

.user-data.selected[b-1kvaofjyt2] {
    background: linear-gradient(90deg,
        rgba(255, 140, 66, 0.13),
        rgba(199, 62, 64, 0.06));
    box-shadow: inset 3px 0 0 #FF8C42;
}

.user-data.selected[b-1kvaofjyt2]::before { opacity: 1; }

.user-data:focus-visible[b-1kvaofjyt2] { box-shadow: inset 0 0 0 2px var(--cc-accent); }

/* ── User cell: name column ─────────────────────────────────────────────── */
.user-cell-name[b-1kvaofjyt2] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
    min-width: 0;
}

.user-cell-name > div[b-1kvaofjyt2] { min-width: 0; }
.user-cell-name > div > span[b-1kvaofjyt2] { display: block; }

.user-mini-avatar[b-1kvaofjyt2] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(255, 140, 66, 0.24),
        rgba(199, 62, 64, 0.12));
    color: #FF8C42;
    font: 600 var(--cc-fs-sm)/32px var(--cc-font-sans);
    text-align: center;
    flex: 0 0 auto;
    letter-spacing: 0;
    transition: background var(--cc-dur-fast) var(--cc-ease), box-shadow var(--cc-dur-fast) var(--cc-ease);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 140, 66, 0.16) inset,
        0 0 8px rgba(255, 140, 66, 0.08);
}

.user-mini-avatar img[b-1kvaofjyt2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-mini-avatar.avatar-banned[b-1kvaofjyt2] {
    background: color-mix(in oklch, var(--cc-danger, #ef4444) 18%, transparent);
    color: var(--cc-danger, #ef4444);
}

.user-hover-preview[b-1kvaofjyt2] {
    position: fixed;
    z-index: 80;
    width: min(380px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 32px));
    overflow: hidden;
    padding: var(--cc-s-3);
    border: 1px solid rgba(255, 140, 66, 0.18);
    border-radius: var(--cc-r-md);
    background:
        linear-gradient(135deg, rgba(255, 140, 66, 0.09), transparent 44%),
        linear-gradient(225deg, rgba(199, 62, 64, 0.05), transparent 52%),
        var(--cc-bg-glass, var(--cc-bg-elev));
    box-shadow:
        0 24px 60px rgba(0,0,0,.38),
        0 0 0 1px rgba(255, 140, 66, 0.08) inset;
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
    animation: preview-rise-b-1kvaofjyt2 var(--cc-dur-med) var(--cc-ease) both;
    pointer-events: auto;
}

.user-hover-preview.sticky[b-1kvaofjyt2] {
    /* Sticky-Mode: bleibt offen bis explizit geschlossen, voll klickbar */
    pointer-events: auto;
}

.preview-tabs[b-1kvaofjyt2] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px 0;
    border-bottom: 1px solid var(--cc-border);
}

.preview-tab[b-1kvaofjyt2] {
    border: none;
    background: transparent;
    color: var(--cc-fg-muted);
    font: 600 var(--cc-fs-xs)/1.2 var(--cc-font-sans);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.preview-tab:hover[b-1kvaofjyt2] {
    background: color-mix(in oklch, var(--cc-accent) 12%, transparent);
    color: var(--cc-fg);
}
.preview-tab.active[b-1kvaofjyt2] {
    background: color-mix(in oklch, var(--cc-accent) 18%, transparent);
    color: var(--cc-accent);
}

.preview-body[b-1kvaofjyt2] {
    flex: 1;
    overflow-y: auto;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
}

.preview-status-line[b-1kvaofjyt2] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.preview-timeline[b-1kvaofjyt2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-timeline-item[b-1kvaofjyt2] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: var(--cc-fs-xs);
}
.preview-timeline-item strong[b-1kvaofjyt2] {
    display: block;
    color: var(--cc-fg);
    font-weight: 600;
}
.preview-timeline-item small[b-1kvaofjyt2] {
    color: var(--cc-fg-dim);
    font-size: 10px;
}

.preview-footer[b-1kvaofjyt2] {
    display: flex;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--cc-border);
}

.link-btn.primary[b-1kvaofjyt2] {
    color: var(--cc-accent);
    font-weight: 700;
}

.close-btn.small[b-1kvaofjyt2] {
    width: 22px; height: 22px;
    border: none;
    background: transparent;
    color: var(--cc-fg-dim);
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
}
.close-btn.small:hover[b-1kvaofjyt2] {
    background: color-mix(in oklch, var(--cc-danger, #ef4444) 16%, transparent);
    color: var(--cc-danger, #ef4444);
}

@keyframes preview-rise-b-1kvaofjyt2 {
    from { opacity: 0; transform: translateY(6px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.preview-head[b-1kvaofjyt2],
.preview-person[b-1kvaofjyt2],
.preview-links[b-1kvaofjyt2],
.preview-signals[b-1kvaofjyt2] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
}

.preview-head[b-1kvaofjyt2] {
    justify-content: space-between;
}

.preview-person[b-1kvaofjyt2] {
    min-width: 0;
}

.preview-avatar[b-1kvaofjyt2] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(255, 140, 66, 0.28),
        rgba(199, 62, 64, 0.14));
    color: #FF8C42;
    font: 700 var(--cc-fs-sm)/32px var(--cc-font-sans);
    text-align: center;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 0 10px rgba(255, 140, 66, 0.12);
}

.preview-avatar img[b-1kvaofjyt2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.preview-bio[b-1kvaofjyt2] {
    margin: 0;
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-xs)/1.5 var(--cc-font-sans);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.preview-grid[b-1kvaofjyt2] {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: 3px var(--cc-s-2);
    font: 400 var(--cc-fs-xs)/1.35 var(--cc-font-sans);
}

.preview-grid span[b-1kvaofjyt2] {
    color: var(--cc-fg-dim);
}

.preview-grid strong[b-1kvaofjyt2] {
    color: var(--cc-fg);
    font-weight: 600;
    min-width: 0;
}

.preview-signals[b-1kvaofjyt2] {
    flex-wrap: wrap;
}

.link-btn[b-1kvaofjyt2] {
    border: none;
    background: transparent;
    color: var(--cc-accent);
    cursor: pointer;
    padding: 0;
    font: 600 var(--cc-fs-xs)/1.3 var(--cc-font-sans);
}

.link-btn:hover[b-1kvaofjyt2] {
    text-decoration: underline;
}

.check-row[b-1kvaofjyt2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cc-fg-muted);
    font: 500 var(--cc-fs-xs)/1.3 var(--cc-font-sans);
}

/* ── Detail column ──────────────────────────────────────────────────────── */
.user-detail-col[b-1kvaofjyt2] {
    background:
        linear-gradient(180deg, rgba(255, 140, 66, 0.07), transparent 200px),
        linear-gradient(135deg, rgba(199, 62, 64, 0.04), transparent 60%),
        var(--cc-bg-glass, var(--cc-bg-card));
    border: 1px solid rgba(255, 140, 66, 0.16);
    border-radius: var(--cc-r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slide-in-from-right-b-1kvaofjyt2 var(--cc-dur-med) var(--cc-ease) both;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    box-shadow:
        var(--cc-shadow-premium, var(--cc-shadow-lg)),
        0 0 24px rgba(255, 140, 66, 0.06);
    backdrop-filter: blur(16px);
}

@keyframes slide-in-from-right-b-1kvaofjyt2 {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Detail header ──────────────────────────────────────────────────────── */
.ud-header[b-1kvaofjyt2] {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-s-4);
    padding: var(--cc-s-5);
    border-bottom: 1px solid var(--cc-border-luxe, var(--cc-border));
    position: relative;
}

.ud-avatar[b-1kvaofjyt2] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(255, 140, 66, 0.28),
        rgba(199, 62, 64, 0.16));
    color: #FF8C42;
    font: 700 1.4rem/60px var(--cc-font-sans);
    text-align: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 2px solid rgba(255, 140, 66, 0.18);
    transition: border-color var(--cc-dur-fast), box-shadow var(--cc-dur-fast);
    box-shadow:
        0 12px 28px rgba(0,0,0,.28),
        0 0 16px rgba(255, 140, 66, 0.14);
}

.ud-avatar img[b-1kvaofjyt2] { width: 100%; height: 100%; object-fit: cover; }

.ud-avatar.avatar-banned[b-1kvaofjyt2]  { border-color: var(--cc-danger,  #ef4444); background: color-mix(in oklch, var(--cc-danger,  #ef4444) 15%, transparent); color: var(--cc-danger, #ef4444); }
.ud-avatar.avatar-verified[b-1kvaofjyt2] { border-color: var(--cc-success, #22c55e); }

.ud-identity[b-1kvaofjyt2]  { flex: 1; min-width: 0; }
.ud-name[b-1kvaofjyt2]      { margin: 0 0 var(--cc-s-1); font: 600 var(--cc-fs-lg)/1.2 var(--cc-font-sans); color: var(--cc-fg); }
.ud-handle[b-1kvaofjyt2]    { font: 400 var(--cc-fs-sm)/1 var(--cc-font-mono); color: var(--cc-fg-muted); display: block; margin-bottom: var(--cc-s-2); }

.ud-badges[b-1kvaofjyt2]    { display: flex; flex-wrap: wrap; gap: var(--cc-s-1); margin-top: var(--cc-s-2); }

/* chip styles (if not globally defined) */
.chip[b-1kvaofjyt2]        { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 100px; font: 500 var(--cc-fs-xs)/1.4 var(--cc-font-sans); }
.chip-danger[b-1kvaofjyt2]  { background: color-mix(in oklch, var(--cc-danger,  #ef4444) 15%, transparent); color: var(--cc-danger,  #ef4444); }
.chip-success[b-1kvaofjyt2] { background: color-mix(in oklch, var(--cc-success, #22c55e) 15%, transparent); color: var(--cc-success, #22c55e); }
.chip-info[b-1kvaofjyt2]    { background: color-mix(in oklch, var(--cc-accent)            15%, transparent); color: var(--cc-accent); }
.chip-muted[b-1kvaofjyt2]   { background: color-mix(in oklch, var(--cc-fg-dim)            15%, transparent); color: var(--cc-fg-dim); }

.close-btn[b-1kvaofjyt2] {
    position: absolute;
    top: var(--cc-s-3);
    right: var(--cc-s-3);
    width: 28px; height: 28px;
    border-radius: var(--cc-r-sm);
    border: none;
    background: transparent;
    color: var(--cc-fg-muted);
    cursor: pointer;
    font-size: var(--cc-fs-sm);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--cc-dur-fast);
}

.close-btn:hover[b-1kvaofjyt2] { background: var(--cc-bg-hover, color-mix(in oklch, var(--cc-fg) 8%, transparent)); color: var(--cc-fg); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.ud-tabs[b-1kvaofjyt2] {
    display: flex;
    border-bottom: 1px solid var(--cc-border-luxe, var(--cc-border));
    padding: var(--cc-s-2) var(--cc-s-4) 0;
    gap: var(--cc-s-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.ud-tabs[b-1kvaofjyt2]::-webkit-scrollbar { display: none; }

.ud-tab[b-1kvaofjyt2] {
    flex: 0 0 auto;
    padding: var(--cc-s-3) var(--cc-s-4);
    border: none;
    background: transparent;
    color: var(--cc-fg-muted);
    font: 500 var(--cc-fs-sm)/1 var(--cc-font-sans);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: var(--cc-r-sm) var(--cc-r-sm) 0 0;
    transition: color var(--cc-dur-fast), border-color var(--cc-dur-fast), background var(--cc-dur-fast);
    white-space: nowrap;
}

.ud-tab:hover[b-1kvaofjyt2]      { color: var(--cc-fg); background: color-mix(in oklch, var(--cc-bg-hover) 72%, transparent); }
.ud-tab.active[b-1kvaofjyt2]     {
    color: var(--cc-fg);
    border-bottom-color: var(--cc-accent);
    background: linear-gradient(180deg,
        color-mix(in oklch, var(--cc-accent) 14%, transparent),
        transparent);
}

/* ── Section blocks ─────────────────────────────────────────────────────── */
.ud-section[b-1kvaofjyt2] {
    padding: var(--cc-s-5);
    border-bottom: 1px solid var(--cc-border-subtle, color-mix(in oklch, var(--cc-border) 50%, transparent));
}

.ud-section:last-child[b-1kvaofjyt2] { border-bottom: none; }

.ud-section h4[b-1kvaofjyt2] {
    margin: 0 0 var(--cc-s-3);
    font: 600 var(--cc-fs-sm)/1 var(--cc-font-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cc-fg-dim);
}

.ops-overview[b-1kvaofjyt2] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
}

.ops-header[b-1kvaofjyt2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-2);
}

.ops-attention[b-1kvaofjyt2] {
    border-radius: 999px;
    padding: 4px 10px;
    font: 600 var(--cc-fs-xs)/1 var(--cc-font-sans);
    border: 1px solid var(--cc-border);
}

.ops-attention.level-critical[b-1kvaofjyt2] {
    border-color: color-mix(in oklch, var(--cc-danger, #ef4444) 55%, var(--cc-border));
    color: var(--cc-danger, #ef4444);
    background: color-mix(in oklch, var(--cc-danger, #ef4444) 12%, transparent);
}

.ops-attention.level-elevated[b-1kvaofjyt2] {
    border-color: color-mix(in oklch, var(--cc-warning, #f59e0b) 55%, var(--cc-border));
    color: var(--cc-warning, #f59e0b);
    background: color-mix(in oklch, var(--cc-warning, #f59e0b) 12%, transparent);
}

.ops-attention.level-normal[b-1kvaofjyt2] {
    border-color: color-mix(in oklch, var(--cc-success, #22c55e) 45%, var(--cc-border));
    color: var(--cc-success, #22c55e);
    background: color-mix(in oklch, var(--cc-success, #22c55e) 11%, transparent);
}

.ops-highlights[b-1kvaofjyt2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cc-s-2);
}

.ops-highlight[b-1kvaofjyt2] {
    border: 1px solid var(--cc-border-subtle, color-mix(in oklch, var(--cc-border) 50%, transparent));
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-2) var(--cc-s-3);
    background: var(--cc-bg-elev);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ops-highlight span[b-1kvaofjyt2] {
    color: var(--cc-fg-dim);
    font: 400 var(--cc-fs-xs)/1.2 var(--cc-font-sans);
}

.ops-highlight strong[b-1kvaofjyt2] {
    color: var(--cc-fg);
    font: 700 var(--cc-fs-sm)/1.2 var(--cc-font-sans);
}

.ops-highlight.sev-warning[b-1kvaofjyt2] {
    border-color: color-mix(in oklch, var(--cc-warning, #f59e0b) 35%, var(--cc-border));
}

.ops-highlight.sev-critical[b-1kvaofjyt2] {
    border-color: color-mix(in oklch, var(--cc-danger, #ef4444) 40%, var(--cc-border));
}

.ops-jumps[b-1kvaofjyt2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cc-s-2);
}

.ops-jump[b-1kvaofjyt2] {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-sm);
    padding: var(--cc-s-2) var(--cc-s-3);
    background: transparent;
    color: var(--cc-fg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-2);
}

.ops-jump:hover[b-1kvaofjyt2] {
    border-color: color-mix(in oklch, var(--cc-accent) 45%, var(--cc-border));
    background: color-mix(in oklch, var(--cc-accent) 6%, transparent);
}

.ops-jump strong[b-1kvaofjyt2] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
}

.ops-jump.sev-warning strong[b-1kvaofjyt2] {
    color: var(--cc-warning, #f59e0b);
}

.ops-jump.sev-critical strong[b-1kvaofjyt2] {
    color: var(--cc-danger, #ef4444);
}

.ops-actions-list[b-1kvaofjyt2] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
}

.ops-action[b-1kvaofjyt2] {
    border: 1px solid var(--cc-border-subtle, color-mix(in oklch, var(--cc-border) 55%, transparent));
    border-radius: var(--cc-r-md);
    background: var(--cc-bg-elev);
    padding: var(--cc-s-3) var(--cc-s-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-3);
    text-align: left;
    cursor: pointer;
}

.ops-action:hover[b-1kvaofjyt2] {
    border-color: color-mix(in oklch, var(--cc-accent) 35%, var(--cc-border));
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.ops-action div[b-1kvaofjyt2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ops-action strong[b-1kvaofjyt2] {
    color: var(--cc-fg);
    font: 600 var(--cc-fs-sm)/1.2 var(--cc-font-sans);
}

.ops-action span[b-1kvaofjyt2] {
    color: var(--cc-fg-muted);
    font: 400 var(--cc-fs-xs)/1.45 var(--cc-font-sans);
}

.ops-action em[b-1kvaofjyt2] {
    font-style: normal;
    color: var(--cc-fg-dim);
    font: 600 var(--cc-fs-xs)/1 var(--cc-font-mono);
}

.ops-action.prio-high[b-1kvaofjyt2] {
    border-left: 3px solid var(--cc-danger, #ef4444);
}

.ops-action.prio-medium[b-1kvaofjyt2] {
    border-left: 3px solid var(--cc-warning, #f59e0b);
}

.ud-bio[b-1kvaofjyt2] {
    margin: 0;
    font: 400 var(--cc-fs-sm)/1.6 var(--cc-font-sans);
    color: var(--cc-fg-muted);
    white-space: pre-wrap;
}

.ud-ban-info[b-1kvaofjyt2] { border-left: 3px solid var(--cc-danger, #ef4444); padding-left: var(--cc-s-4); }

/* ── Detail grid (dl) ───────────────────────────────────────────────────── */
.detail-grid[b-1kvaofjyt2] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--cc-s-1) var(--cc-s-4);
    margin: 0;
}

.detail-grid dt[b-1kvaofjyt2] { color: var(--cc-fg-dim); font: 400 var(--cc-fs-xs)/1.6 var(--cc-font-sans); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; align-self: start; padding-top: 2px; }
.detail-grid dd[b-1kvaofjyt2] { margin: 0; font: 400 var(--cc-fs-sm)/1.6 var(--cc-font-sans); color: var(--cc-fg-muted); word-break: break-all; }

.detail-compact[b-1kvaofjyt2] { gap: var(--cc-s-1) var(--cc-s-3); }

/* ── Action bar ─────────────────────────────────────────────────────────── */
.ud-actions[b-1kvaofjyt2] {
    display: flex;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
    padding: var(--cc-s-4) var(--cc-s-5);
}

/* ── Report items ───────────────────────────────────────────────────────── */
.ud-report-item[b-1kvaofjyt2],
.ud-kyc-item[b-1kvaofjyt2],
.ud-premium-item[b-1kvaofjyt2],
.ud-audit-item[b-1kvaofjyt2] {
    padding: var(--cc-s-3) var(--cc-s-4);
    border: 1px solid var(--cc-border-subtle, color-mix(in oklch, var(--cc-border) 50%, transparent));
    border-radius: var(--cc-r-md);
    margin-bottom: var(--cc-s-2);
    background:
        linear-gradient(180deg, color-mix(in oklch, white 2%, transparent), transparent),
        var(--cc-bg-elev);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
}

.entity-click[b-1kvaofjyt2],
.timeline-item[b-1kvaofjyt2],
.incident-item[b-1kvaofjyt2] {
    width: 100%;
    text-align: left;
    border: 1px solid var(--cc-border-subtle, color-mix(in oklch, var(--cc-border) 50%, transparent));
    cursor: pointer;
    color: inherit;
}

.entity-click:hover[b-1kvaofjyt2],
.timeline-item:hover[b-1kvaofjyt2],
.incident-item:hover[b-1kvaofjyt2] {
    border-color: color-mix(in oklch, var(--cc-accent) 45%, var(--cc-border));
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 7%, transparent), transparent),
        var(--cc-bg-elev);
    box-shadow: 0 12px 24px rgba(0,0,0,.16);
}

.timeline-item[b-1kvaofjyt2] {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: var(--cc-s-3);
    padding: var(--cc-s-3) var(--cc-s-4);
    border-radius: var(--cc-r-md);
    background: var(--cc-bg-elev);
    margin-bottom: var(--cc-s-2);
    transition:
        border-color var(--cc-dur-fast),
        background var(--cc-dur-fast),
        box-shadow var(--cc-dur-fast),
        transform var(--cc-dur-fast);
}

.timeline-item:hover[b-1kvaofjyt2],
.incident-item:hover[b-1kvaofjyt2] {
    transform: translateY(-1px);
}

.timeline-item span:last-child[b-1kvaofjyt2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-item small[b-1kvaofjyt2],
.timeline-item em[b-1kvaofjyt2],
.incident-item small[b-1kvaofjyt2],
.incident-item span[b-1kvaofjyt2],
.logging-channel span[b-1kvaofjyt2] {
    color: var(--cc-fg-muted);
    font-style: normal;
    font-size: var(--cc-fs-xs);
}

.timeline-dot[b-1kvaofjyt2] {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--cc-accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cc-accent) 12%, transparent);
}

.timeline-dot.warning[b-1kvaofjyt2] { background: var(--cc-warning, #f59e0b); }
.timeline-dot.critical[b-1kvaofjyt2] { background: var(--cc-danger, #ef4444); }

.incident-item[b-1kvaofjyt2],
.logging-channel[b-1kvaofjyt2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--cc-s-3) var(--cc-s-4);
    border-radius: var(--cc-r-md);
    background: var(--cc-bg-elev);
    margin-bottom: var(--cc-s-2);
}

.incident-item.warning[b-1kvaofjyt2] { border-color: color-mix(in oklch, var(--cc-warning, #f59e0b) 45%, var(--cc-border)); }
.incident-item.critical[b-1kvaofjyt2] { border-color: color-mix(in oklch, var(--cc-danger, #ef4444) 45%, var(--cc-border)); }

.logging-channel[b-1kvaofjyt2] {
    border: 1px solid var(--cc-border-subtle, color-mix(in oklch, var(--cc-border) 50%, transparent));
}

.logging-channel.active[b-1kvaofjyt2] {
    border-color: color-mix(in oklch, var(--cc-success, #22c55e) 45%, var(--cc-border));
}

.ud-report-item:last-child[b-1kvaofjyt2],
.ud-kyc-item:last-child[b-1kvaofjyt2],
.ud-premium-item:last-child[b-1kvaofjyt2],
.ud-audit-item:last-child[b-1kvaofjyt2] { margin-bottom: 0; }

.uri-top[b-1kvaofjyt2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-2);
}

.uri-desc[b-1kvaofjyt2] {
    margin: 0;
    font: 400 var(--cc-fs-xs)/1.5 var(--cc-font-sans);
    color: var(--cc-fg-muted);
}

.uri-desc.danger[b-1kvaofjyt2] { color: var(--cc-danger, #ef4444); }

.uri-filed[b-1kvaofjyt2] { opacity: .75; }

/* ── Loading overlay ────────────────────────────────────────────────────── */
.detail-loading[b-1kvaofjyt2] {
    padding: var(--cc-s-10);
    display: flex;
    justify-content: center;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .users-layout.has-detail[b-1kvaofjyt2] { grid-template-columns: 1fr; }
    .user-detail-col[b-1kvaofjyt2]         { max-height: none; }
    .user-hover-preview[b-1kvaofjyt2]      { width: min(340px, calc(100vw - 28px)); }
}

@media (max-width: 640px) {
    .user-row[b-1kvaofjyt2]  { grid-template-columns: 1fr 1fr; min-height: 56px; }
    .user-head span:nth-child(n+3)[b-1kvaofjyt2],
    .user-data > span:nth-child(n+3)[b-1kvaofjyt2] { display: none; }
    .ops-highlights[b-1kvaofjyt2],
    .ops-jumps[b-1kvaofjyt2] { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    /* Search bar full-width */
    .user-search[b-1kvaofjyt2] { width: 100%; }

    /* Hover preview: hide on mobile (tap is used instead) */
    .user-hover-preview[b-1kvaofjyt2] { display: none !important; }

    /* User rows: simplified 2-column card */
    .user-head[b-1kvaofjyt2] { display: none; }

    .user-row[b-1kvaofjyt2] {
        grid-template-columns: auto 1fr auto;
        min-height: 52px;
        padding: var(--cc-s-2) var(--cc-s-3);
        gap: var(--cc-s-2);
    }

    /* Keep avatar, name+email, status; hide role/activity cols */
    .user-data > span:nth-child(3)[b-1kvaofjyt2],
    .user-data > span:nth-child(4)[b-1kvaofjyt2] { display: none; }
}

.user-mini-avatar-wrapper[b-1kvaofjyt2] { position: relative; display: inline-block; }
.online-dot-mini[b-1kvaofjyt2] { position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; background: var(--green); border-radius: 50%; border: 2px solid var(--bg-surface); box-shadow: 0 0 6px rgba(40, 205, 65, 0.6); }

/* Critical page hardening: preserve search/actions and make wide tables reachable. */
.users-layout[b-1kvaofjyt2],
.users-list-col[b-1kvaofjyt2],
.user-table[b-1kvaofjyt2] {
    min-width: 0;
}

.search-bar[b-1kvaofjyt2] {
    position: sticky;
    top: calc(92px + env(safe-area-inset-top));
    z-index: 24;
    backdrop-filter: blur(16px);
}

.user-table[b-1kvaofjyt2] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.user-row[b-1kvaofjyt2] {
    min-width: 760px;
}

.preview-body[b-1kvaofjyt2] {
    min-height: 0;
}

.user-detail-col[b-1kvaofjyt2] {
    position: sticky;
    top: calc(92px + env(safe-area-inset-top));
    align-self: start;
    max-height: calc(100dvh - 112px);
    overflow: auto;
}

@media (max-width: 900px) {
    .search-bar[b-1kvaofjyt2],
    .user-detail-col[b-1kvaofjyt2] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 767px) {
    .user-row[b-1kvaofjyt2] {
        min-width: 0;
    }
}

/* Phase 3-6: Operator console workspace */
.users-page-shell[b-1kvaofjyt2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    outline: none;
}

.users-workspace[b-1kvaofjyt2] {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.users-workspace.has-inspector[b-1kvaofjyt2] {
    grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 520px);
    margin-right: calc(-1 * var(--cc-s-8));
}

.users-table-shell[b-1kvaofjyt2] {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: var(--cc-s-3);
}

.user-row[b-1kvaofjyt2] {
    grid-template-columns: 34px 32px minmax(210px, 1.6fr) 80px 78px 70px 86px 58px 92px 32px;
    min-width: 980px;
}

.user-select-cell[b-1kvaofjyt2],
.user-expand-cell[b-1kvaofjyt2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-select-cell input[b-1kvaofjyt2] {
    width: 16px;
    height: 16px;
    accent-color: var(--cc-accent);
}

.user-expand-btn[b-1kvaofjyt2] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cc-border-subtle, var(--cc-border));
    border-radius: var(--cc-r-sm);
    background: transparent;
    color: var(--cc-fg-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.user-expand-btn:hover[b-1kvaofjyt2],
.user-expand-btn:focus-visible[b-1kvaofjyt2] {
    color: var(--cc-fg);
    background: color-mix(in oklch, var(--cc-accent) 10%, transparent);
    border-color: color-mix(in oklch, var(--cc-accent) 35%, var(--cc-border));
    outline: none;
}

.user-persona-trigger[b-1kvaofjyt2] {
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.user-data.expanded[b-1kvaofjyt2] {
    border-bottom-color: transparent;
}

.user-expanded-row[b-1kvaofjyt2] {
    margin: 0 var(--cc-s-3) var(--cc-s-3) calc(var(--cc-s-3) + 66px);
    padding: var(--cc-s-4);
    border: 1px solid var(--cc-border-subtle, var(--cc-border));
    border-radius: var(--cc-r-md);
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 6%, transparent), transparent 52%),
        color-mix(in oklch, var(--cc-bg-elev) 92%, transparent);
}

.user-expanded-grid[b-1kvaofjyt2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cc-s-3);
}

.user-expanded-grid section[b-1kvaofjyt2] {
    min-width: 0;
}

.user-expanded-grid h4[b-1kvaofjyt2] {
    margin: 0 0 var(--cc-s-1);
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.user-expanded-grid p[b-1kvaofjyt2] {
    margin: 0;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
    line-height: 1.45;
}

.user-mini-timeline[b-1kvaofjyt2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.user-mini-timeline li[b-1kvaofjyt2] {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: var(--cc-s-2);
    min-width: 0;
}

.user-mini-timeline strong[b-1kvaofjyt2],
.user-mini-timeline small[b-1kvaofjyt2] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-mini-timeline small[b-1kvaofjyt2] {
    color: var(--cc-fg-dim);
    font-size: 10px;
}

.user-expanded-actions[b-1kvaofjyt2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-2);
    margin-top: var(--cc-s-3);
}

.users-inline-error[b-1kvaofjyt2] {
    color: var(--cc-danger, #ef4444);
    font-size: var(--cc-fs-sm);
}

.users-bulk-bar[b-1kvaofjyt2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-4);
    padding: var(--cc-s-3) var(--cc-s-4);
    margin-bottom: var(--cc-s-4);
    border: 1px solid color-mix(in oklch, var(--cc-accent) 30%, var(--cc-border));
    border-radius: var(--cc-r-lg);
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 12%, transparent), transparent),
        var(--cc-bg-card);
    box-shadow: var(--cc-shadow-sm);
}

.users-bulk-copy[b-1kvaofjyt2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.users-bulk-copy strong[b-1kvaofjyt2] {
    color: var(--cc-fg);
}

.users-bulk-copy span[b-1kvaofjyt2] {
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
}

.users-bulk-actions[b-1kvaofjyt2] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.user-hover-preview[b-1kvaofjyt2] {
    left: clamp(8px, var(--preview-x, 16px), calc(100vw - min(var(--preview-width, 340px), calc(100vw - 16px)) - 8px));
    top: clamp(8px, var(--preview-y, 16px), calc(100vh - min(var(--preview-max-height, 320px), calc(100vh - 16px)) - 8px));
    width: min(340px, calc(100vw - 16px));
    max-height: min(320px, calc(100vh - 16px));
}

.preview-tabs[b-1kvaofjyt2] {
    display: none;
}

.preview-body[b-1kvaofjyt2] {
    max-height: 210px;
}

@media (max-width: 1100px) {
    .users-workspace.has-inspector[b-1kvaofjyt2] {
        grid-template-columns: minmax(0, 1fr);
        margin-right: 0;
    }

    .users-table-shell[b-1kvaofjyt2] {
        overflow-x: auto;
    }
}

@media (max-width: 767px) {
    .users-bulk-bar[b-1kvaofjyt2] {
        align-items: stretch;
        flex-direction: column;
    }

    .users-bulk-actions[b-1kvaofjyt2] {
        justify-content: flex-start;
    }

    .user-row[b-1kvaofjyt2] {
        grid-template-columns: 32px 28px minmax(0, 1fr) auto;
        min-width: 0;
    }

    .user-head span:nth-child(n+5)[b-1kvaofjyt2],
    .user-data > span:nth-child(n+5)[b-1kvaofjyt2],
    .user-data > .chip[b-1kvaofjyt2],
    .user-data > .badge[b-1kvaofjyt2],
    .user-data > .user-premium-icon[b-1kvaofjyt2],
    .user-data > .user-date[b-1kvaofjyt2] {
        display: none;
    }

    .user-expanded-row[b-1kvaofjyt2] {
        margin-left: var(--cc-s-2);
        margin-right: var(--cc-s-2);
    }

    .user-expanded-grid[b-1kvaofjyt2] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Wiki/WikiPage.razor.rz.scp.css */
/* WikiPage — Scoped Styles
   Alle Farben ausschliesslich via --cc-* Tokens (tokens.css). */

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wiki-create-panel[b-24ltzi291k] {
    margin-bottom: var(--cc-s-5);
    padding: var(--cc-s-5);
    border-radius: var(--cc-r-lg);
    border: 1px solid var(--cc-border);
    background: var(--cc-bg-card);
    overflow: visible;
    min-width: 0;
}

.wiki-create-panel.card[b-24ltzi291k] {
    overflow: visible;
}

.wiki-create-head[b-24ltzi291k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cc-s-3);
    margin-bottom: var(--cc-s-4);
}

.wiki-create-kicker[b-24ltzi291k] {
    margin: 0 0 3px;
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    color: var(--cc-accent);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wiki-create-title[b-24ltzi291k] {
    margin: 0;
    font-size: var(--cc-fs-md);
    font-weight: 600;
    color: var(--cc-fg);
}

.wiki-layout[b-24ltzi291k] {
    display: grid;
    grid-template-columns: minmax(260px, 308px) minmax(0, 1fr);
    gap: var(--cc-s-5);
    align-items: flex-start;
    min-width: 0;
    min-height: 0;
    --cc-sticky-offset: 108px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.wiki-sidebar[b-24ltzi291k] {
    padding: var(--cc-s-4);
    border-radius: var(--cc-r-lg);
    border: 1px solid var(--cc-border);
    background: var(--cc-bg-card);
    position: sticky;
    top: calc(var(--cc-sticky-offset, 108px) + var(--cc-s-3));
    max-height: calc(100dvh - var(--cc-sticky-offset, 108px) - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
}

.wiki-search-wrap[b-24ltzi291k] { display: flex; }
.wiki-search-input[b-24ltzi291k] { flex: 1; }

.wiki-filter-group[b-24ltzi291k] { display: flex; flex-direction: column; gap: var(--cc-s-1); }

.wiki-filter-label[b-24ltzi291k] {
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cc-fg-dim);
}

.wiki-filter-chips[b-24ltzi291k] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wiki-chip[b-24ltzi291k] {
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid var(--cc-border);
    background: transparent;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
    cursor: pointer;
    transition: background var(--cc-dur-fast) var(--cc-ease),
                color       var(--cc-dur-fast) var(--cc-ease),
                border-color var(--cc-dur-fast) var(--cc-ease);
}

.wiki-chip:hover[b-24ltzi291k] { background: var(--cc-bg-hover); color: var(--cc-fg); }

.wiki-chip.active[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-accent) 18%, transparent);
    border-color: color-mix(in oklch, var(--cc-accent) 50%, transparent);
    color: var(--cc-accent);
}

/* Article list */

.wiki-article-list[b-24ltzi291k] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wiki-article-row[b-24ltzi291k] {
    display: block;
    padding: var(--cc-s-2) var(--cc-s-3);
    border-radius: var(--cc-r-md);
    text-decoration: none;
    color: var(--cc-fg);
    border: 1px solid transparent;
    background: transparent;
    transition: background var(--cc-dur-fast) var(--cc-ease),
                border-color var(--cc-dur-fast) var(--cc-ease);
}

.wiki-article-row:hover[b-24ltzi291k] {
    background: var(--cc-bg-hover);
    border-color: var(--cc-border);
}

.wiki-article-row.active[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-accent) 12%, transparent);
    border-color: color-mix(in oklch, var(--cc-accent) 35%, transparent);
}

.wiki-row-head[b-24ltzi291k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--cc-s-2);
}

.wiki-row-title[b-24ltzi291k] {
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.wiki-row-desc[b-24ltzi291k] {
    margin: 2px 0 0;
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wiki-row-meta[b-24ltzi291k] {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
}

/* ── Workspace ───────────────────────────────────────────────────────────── */

.wiki-workspace[b-24ltzi291k] {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    overflow: visible;
}

.wiki-empty-workspace[b-24ltzi291k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cc-s-3);
    padding: var(--cc-s-12) var(--cc-s-5);
    color: var(--cc-fg-dim);
    text-align: center;
}

.wiki-empty-workspace p[b-24ltzi291k] { font-size: var(--cc-fs-sm); margin: 0; }

/* Article header */

.wiki-article-header[b-24ltzi291k] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--cc-s-4);
    padding: var(--cc-s-5);
    background: var(--cc-bg-card);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg) var(--cc-r-lg) 0 0;
    border-bottom: none;
}

.wiki-cover-preview[b-24ltzi291k] {
    width: 148px;
    min-width: 148px;
    height: 96px;
    border-radius: var(--cc-r-md);
    border: 1px solid var(--cc-border);
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 34px color-mix(in oklch, var(--cc-accent) 18%, transparent);
}

.wiki-article-title-block[b-24ltzi291k] { flex: 1; min-width: 0; }

.wiki-article-title[b-24ltzi291k] {
    margin: 0 0 4px;
    font-size: var(--cc-fs-lg);
    font-weight: 700;
    color: var(--cc-fg);
    line-height: 1.2;
}

.wiki-article-desc[b-24ltzi291k] {
    margin: 0 0 var(--cc-s-2);
    font-size: var(--cc-fs-sm);
    color: var(--cc-fg-muted);
}

.wiki-article-meta[b-24ltzi291k] {
    display: flex;
    gap: var(--cc-s-2);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
}

.wiki-meta-sep[b-24ltzi291k] { color: var(--cc-border); }
.wiki-meta-tag[b-24ltzi291k] {
    padding: 2px 6px;
    border-radius: var(--cc-r-sm);
    background: var(--cc-bg-hover);
    border: 1px solid var(--cc-border);
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
}

.wiki-article-badges[b-24ltzi291k] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
    align-items: flex-end;
    flex-shrink: 0;
}

/* Action bar */

.wiki-action-bar[b-24ltzi291k] {
    display: flex;
    gap: var(--cc-s-2);
    align-items: center;
    padding: var(--cc-s-2) var(--cc-s-5);
    background: color-mix(in oklch, var(--cc-bg-card) 80%, transparent);
    border-left: 1px solid var(--cc-border);
    border-right: 1px solid var(--cc-border);
    border-bottom: 1px solid var(--cc-border-soft);
    min-height: 44px;
    flex-wrap: wrap;
    margin-top: -1px;
    box-shadow: 0 14px 32px rgba(0,0,0,.20);
}

.wiki-pending-hint[b-24ltzi291k] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-warning);
    padding: 3px 8px;
    border-radius: var(--cc-r-sm);
    background: color-mix(in oklch, var(--cc-warning) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-warning) 30%, transparent);
}

.wiki-btn-danger[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-danger) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-danger) 35%, transparent);
    color: var(--cc-danger);
    border-radius: var(--cc-r-md);
    cursor: pointer;
    font-size: var(--cc-fs-xs);
    padding: 4px 10px;
    transition: background var(--cc-dur-fast) var(--cc-ease);
}

.wiki-btn-danger:hover[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-danger) 22%, transparent);
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.wiki-tabs[b-24ltzi291k] {
    display: flex;
    gap: 2px;
    padding: 0 var(--cc-s-5);
    background: var(--cc-bg-card);
    border-left: 1px solid var(--cc-border);
    border-right: 1px solid var(--cc-border);
    border-bottom: 1px solid var(--cc-border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.wiki-tab[b-24ltzi291k] {
    padding: var(--cc-s-3) var(--cc-s-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
    cursor: pointer;
    transition: color var(--cc-dur-fast) var(--cc-ease),
                border-color var(--cc-dur-fast) var(--cc-ease);
    white-space: nowrap;
    touch-action: manipulation;
}

.wiki-tab:focus-visible[b-24ltzi291k],
.wiki-chip:focus-visible[b-24ltzi291k],
.wiki-pin-btn:focus-visible[b-24ltzi291k],
.wiki-action-btn:focus-visible[b-24ltzi291k],
.wiki-btn-danger:focus-visible[b-24ltzi291k],
.wiki-input:focus-visible[b-24ltzi291k],
.wiki-select:focus-visible[b-24ltzi291k] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}

.wiki-tab:hover[b-24ltzi291k] { color: var(--cc-fg); }

.wiki-tab.active[b-24ltzi291k] {
    color: var(--cc-accent);
    border-bottom-color: var(--cc-accent);
}

/* Tab body */

.wiki-tab-body[b-24ltzi291k] {
    flex: 1;
    background: var(--cc-bg-card);
    border: 1px solid var(--cc-border);
    border-top: none;
    border-radius: 0 0 var(--cc-r-lg) var(--cc-r-lg);
    padding: var(--cc-s-5);
    min-height: 340px;
    min-width: 0;
    overflow: visible;
}

/* ── Preview ──────────────────────────────────────────────────────────────── */

.wiki-preview-content[b-24ltzi291k] {
    font-size: var(--cc-fs-base);
    line-height: 1.65;
    color: var(--cc-fg);
    max-width: 72ch;
}

.wiki-preview-content h1[b-24ltzi291k] { font-size: var(--cc-fs-xl); margin: var(--cc-s-6) 0 var(--cc-s-3); font-weight: 700; }
.wiki-preview-content h2[b-24ltzi291k] { font-size: var(--cc-fs-lg); margin: var(--cc-s-5) 0 var(--cc-s-2); font-weight: 600; }
.wiki-preview-content h3[b-24ltzi291k] { font-size: var(--cc-fs-md); margin: var(--cc-s-4) 0 var(--cc-s-2); font-weight: 600; }
.wiki-preview-content p[b-24ltzi291k]  { margin: 0 0 var(--cc-s-3); }
.wiki-preview-content ul[b-24ltzi291k] { padding-left: var(--cc-s-5); margin: 0 0 var(--cc-s-3); }
.wiki-preview-content li[b-24ltzi291k] { margin-bottom: var(--cc-s-1); }
.wiki-preview-content code[b-24ltzi291k] {
    font-family: var(--cc-font-mono);
    font-size: 0.9em;
    background: rgba(255, 140, 66, 0.08);
    padding: 1px 5px;
    border-radius: var(--cc-r-sm);
    border: 1px solid rgba(255, 140, 66, 0.16);
    color: #FF8C42;
}
.wiki-preview-content a[b-24ltzi291k] { color: var(--cc-accent); text-decoration: underline; }
.wiki-preview-content strong[b-24ltzi291k] { font-weight: 700; color: var(--cc-fg); }
.wiki-preview-content em[b-24ltzi291k] { color: var(--cc-fg-muted); font-style: italic; }
.wiki-hr[b-24ltzi291k]  { border: none; border-top: 1px solid var(--cc-border); margin: var(--cc-s-5) 0; }
.wiki-para-gap[b-24ltzi291k] { height: var(--cc-s-3); }

/* Notice blocks */

.wiki-block[b-24ltzi291k] {
    margin: var(--cc-s-3) 0;
    padding: var(--cc-s-3) var(--cc-s-4);
    border-radius: var(--cc-r-md);
    border-left: 3px solid;
    font-size: var(--cc-fs-sm);
    line-height: 1.55;
}

.wiki-block-note[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-accent) 8%, transparent);
    border-color: var(--cc-accent);
    color: var(--cc-fg);
}

.wiki-block-warn[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-warning) 10%, transparent);
    border-color: var(--cc-warning);
    color: var(--cc-fg);
}

.wiki-block-admin[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-violet) 10%, transparent);
    border-color: var(--cc-violet);
    color: var(--cc-fg);
}

.wiki-block-recht[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-success) 8%, transparent);
    border-color: var(--cc-success);
    color: var(--cc-fg);
}

.wiki-block-secure[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-danger) 8%, transparent);
    border-color: var(--cc-danger);
    color: var(--cc-fg);
}

/* ── Article editor wrap + label ──────────────────────────────────────────── */

.wiki-editor-label[b-24ltzi291k] {
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    color: var(--cc-fg-dim);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.wiki-editor-wrap[b-24ltzi291k] {
    border-radius: var(--cc-r-md);
    overflow: hidden;
    border: 1px solid var(--cc-border);
}

/* ── CKEditor Theme Overrides ─────────────────────────────────────────────── */

.wiki-editor-wrap .ck.ck-editor[b-24ltzi291k] {
    width: 100%;
}

.wiki-editor-wrap .ck.ck-editor__main > .ck-editor__editable[b-24ltzi291k] {
    min-height: 360px;
    padding: var(--cc-s-3);
}
/* ── Editor Area ──────────────────────────────────────────────────────────── */

.wiki-editor-area[b-24ltzi291k] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
    min-width: 0;
    overflow: visible;
}

.wiki-editor-area .ue-shell[b-24ltzi291k],
.wiki-create-panel .ue-shell[b-24ltzi291k] {
    width: 100%;
    --ue-sticky-top: calc(var(--cc-sticky-offset, 108px) + 52px);
    --ue-side-top: calc(var(--cc-sticky-offset, 108px) + 116px);
}

.wiki-editor-area .bce-host[b-24ltzi291k],
.wiki-create-panel .bce-host[b-24ltzi291k] {
    min-height: clamp(520px, 62dvh, 860px);
}

.wiki-editor-footer[b-24ltzi291k] {
    display: flex;
    gap: var(--cc-s-3);
    align-items: center;
}

.wiki-editor-actions[b-24ltzi291k] {
    display: flex;
    gap: var(--cc-s-2);
    flex-shrink: 0;
}

/* ── Color picker row ────────────────────────────────────────────────────── */

.wiki-color-row[b-24ltzi291k] {
    display: flex;
    gap: var(--cc-s-2);
    align-items: center;
}

.wiki-color-input[b-24ltzi291k] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-sm);
    cursor: pointer;
    padding: 2px;
    background: var(--cc-bg-input);
    flex-shrink: 0;
}

.wiki-color-clear[b-24ltzi291k] {
    background: transparent;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-sm);
    color: var(--cc-fg-dim);
    cursor: pointer;
    padding: 4px 8px;
    font-size: var(--cc-fs-xs);
    transition: color var(--cc-dur-fast) var(--cc-ease);
    flex-shrink: 0;
}
.wiki-color-clear:hover[b-24ltzi291k] { color: var(--cc-danger); border-color: color-mix(in oklch, var(--cc-danger) 40%, transparent); }

/* ── Toggle switch ────────────────────────────────────────────────────────── */

.wiki-field-center[b-24ltzi291k] { align-items: flex-start; justify-content: center; }

.wiki-toggle[b-24ltzi291k] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: var(--cc-s-2);
}

.wiki-toggle input[b-24ltzi291k] { display: none; }

.wiki-toggle-track[b-24ltzi291k] {
    width: 40px;
    height: 22px;
    background: var(--cc-border);
    border-radius: 11px;
    position: relative;
    transition: background var(--cc-dur-fast) var(--cc-ease);
    flex-shrink: 0;
}

.wiki-toggle input:checked + .wiki-toggle-track[b-24ltzi291k] {
    background: var(--cc-accent);
}

.wiki-toggle-thumb[b-24ltzi291k] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform var(--cc-dur-fast) var(--cc-ease);
}

.wiki-toggle input:checked + .wiki-toggle-track .wiki-toggle-thumb[b-24ltzi291k] {
    transform: translateX(18px);
}

/* ── Pin button (action bar) ─────────────────────────────────────────────── */

.wiki-action-spacer[b-24ltzi291k] { flex: 1; }

.wiki-pin-btn[b-24ltzi291k] {
    padding: 4px 12px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    background: transparent;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
    cursor: pointer;
    transition: background var(--cc-dur-fast) var(--cc-ease),
                color       var(--cc-dur-fast) var(--cc-ease),
                border-color var(--cc-dur-fast) var(--cc-ease);
    white-space: nowrap;
}

.wiki-pin-btn:hover[b-24ltzi291k] {
    background: var(--cc-bg-hover);
    color: var(--cc-fg);
}

.wiki-pin-btn--active[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-accent) 12%, transparent);
    border-color: color-mix(in oklch, var(--cc-accent) 40%, transparent);
    color: var(--cc-accent);
}

.wiki-pin-btn:disabled[b-24ltzi291k] { opacity: .5; cursor: default; }

/* ── Pin icons in article list ───────────────────────────────────────────── */

.wiki-pin-icon[b-24ltzi291k] {
    font-size: 11px;
    flex-shrink: 0;
    opacity: .75;
}

.wiki-pin-badge[b-24ltzi291k] {
    font-size: 14px;
    margin-right: 4px;
    flex-shrink: 0;
}

.wiki-article-title-row[b-24ltzi291k] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* ── Accent-color highlight on article rows/cards ────────────────────────── */

.wiki-article-row[b-24ltzi291k] {
    border-left: 3px solid transparent;
}

.wiki-article-row:has(> .wiki-row-head > .wiki-pin-icon)[b-24ltzi291k] {
    /* If pinned — slightly different background */
    background: color-mix(in oklch, var(--cc-accent) 4%, transparent);
}

/* Dynamic accent via CSS custom property set inline */
.wiki-article-row[style*="--article-accent"][b-24ltzi291k] {
    border-left-color: var(--article-accent, transparent);
}

.wiki-article-header--accented[b-24ltzi291k] {
    border-top: 3px solid var(--article-accent, var(--cc-border));
}

.wiki-related-card[style*="--article-accent"][b-24ltzi291k] {
    border-left: 3px solid var(--article-accent, transparent);
}

/* ── Scheduled badge ─────────────────────────────────────────────────────── */

.wiki-scheduled-badge[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-warning) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-warning) 30%, transparent);
    color: var(--cc-warning);
    border-radius: var(--cc-r-sm);
    padding: 1px 6px;
    font-size: var(--cc-fs-xs);
}

/* ── Field extras ────────────────────────────────────────────────────────── */

.wiki-field-xs[b-24ltzi291k] { max-width: 240px; }

/* ── Create panel footer ─────────────────────────────────────────────────── */

.wiki-create-footer[b-24ltzi291k] {
    display: flex;
    gap: var(--cc-s-3);
    align-items: center;
    margin-top: var(--cc-s-2);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.wiki-field-grid[b-24ltzi291k] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
}

.wiki-field-row[b-24ltzi291k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cc-s-3);
}

.wiki-field[b-24ltzi291k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wiki-field-sm[b-24ltzi291k] { max-width: 180px; }

.wiki-field label[b-24ltzi291k] {
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    color: var(--cc-fg-dim);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.wiki-input[b-24ltzi291k] {
    padding: var(--cc-s-2) var(--cc-s-3);
    background: var(--cc-bg-input);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    color: var(--cc-fg);
    font-size: var(--cc-fs-sm);
    font-family: var(--cc-font-sans);
    transition: border-color var(--cc-dur-fast) var(--cc-ease);
    width: 100%;
    box-sizing: border-box;
}

.wiki-input:focus[b-24ltzi291k] {
    outline: none;
    border-color: var(--cc-border-focus);
}

.wiki-input[b-24ltzi291k]::placeholder { color: var(--cc-fg-dim); }

.wiki-select[b-24ltzi291k] {
    padding: var(--cc-s-2) var(--cc-s-3);
    background: var(--cc-bg-input);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    color: var(--cc-fg);
    font-size: var(--cc-fs-sm);
    font-family: var(--cc-font-sans);
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.wiki-select:focus[b-24ltzi291k] { outline: none; border-color: var(--cc-border-focus); }

.wiki-error[b-24ltzi291k] {
    margin: var(--cc-s-2) 0 0;
    font-size: var(--cc-fs-xs);
    color: var(--cc-danger);
    padding: var(--cc-s-2) var(--cc-s-3);
    background: color-mix(in oklch, var(--cc-danger) 8%, transparent);
    border: 1px solid color-mix(in oklch, var(--cc-danger) 25%, transparent);
    border-radius: var(--cc-r-md);
}

/* ── Status / Visibility badges ─────────────────────────────────────────── */

.wiki-status-badge[b-24ltzi291k],
.wiki-vis-badge[b-24ltzi291k] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Status */
.status-draft[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-warning) 12%, transparent);
    color: var(--cc-warning);
    border-color: color-mix(in oklch, var(--cc-warning) 30%, transparent);
}
.status-review[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-accent) 12%, transparent);
    color: var(--cc-accent);
    border-color: color-mix(in oklch, var(--cc-accent) 30%, transparent);
}
.status-published[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-success) 12%, transparent);
    color: var(--cc-success);
    border-color: color-mix(in oklch, var(--cc-success) 30%, transparent);
}
.status-archived[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-fg-dim) 12%, transparent);
    color: var(--cc-fg-dim);
    border-color: color-mix(in oklch, var(--cc-fg-dim) 25%, transparent);
}

/* Visibility */
.vis-public[b-24ltzi291k] {
    background: rgba(255, 140, 66, 0.10);
    color: #FF8C42;
    border-color: rgba(255, 140, 66, 0.24);
}
.vis-community[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-accent) 10%, transparent);
    color: var(--cc-accent);
    border-color: color-mix(in oklch, var(--cc-accent) 25%, transparent);
}
.vis-moderator[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-violet) 12%, transparent);
    color: var(--cc-violet);
    border-color: color-mix(in oklch, var(--cc-violet) 30%, transparent);
}
.vis-admin[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-danger) 10%, transparent);
    color: var(--cc-danger);
    border-color: color-mix(in oklch, var(--cc-danger) 25%, transparent);
}

/* ── Tabellen ─────────────────────────────────────────────────────────────── */

.wiki-table-wrap[b-24ltzi291k] { overflow-x: auto; }

.wiki-table[b-24ltzi291k] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cc-fs-sm);
}

.wiki-table th[b-24ltzi291k] {
    text-align: left;
    padding: var(--cc-s-2) var(--cc-s-3);
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cc-fg-dim);
    border-bottom: 1px solid var(--cc-border);
}

.wiki-table td[b-24ltzi291k] {
    padding: var(--cc-s-2) var(--cc-s-3);
    vertical-align: middle;
    border-bottom: 1px solid var(--cc-border-soft);
    color: var(--cc-fg-muted);
}

.wiki-table tbody tr:hover[b-24ltzi291k] { background: var(--cc-bg-hover); }
.wiki-current-row[b-24ltzi291k] { background: color-mix(in oklch, var(--cc-accent) 5%, transparent); }

.wiki-td-date[b-24ltzi291k] { white-space: nowrap; color: var(--cc-fg-dim); font-size: var(--cc-fs-xs); }
.wiki-td-mono[b-24ltzi291k] { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); }
.wiki-td-actions[b-24ltzi291k] { white-space: nowrap; display: flex; gap: 4px; align-items: center; padding: var(--cc-s-1) var(--cc-s-3); }

.wiki-current-badge[b-24ltzi291k] {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    font-size: 10px;
    border-radius: 10px;
    background: color-mix(in oklch, var(--cc-success) 18%, transparent);
    color: var(--cc-success);
    border: 1px solid color-mix(in oklch, var(--cc-success) 35%, transparent);
    vertical-align: middle;
}

/* Review badges */
.wiki-review-badge[b-24ltzi291k] {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: var(--cc-fs-xs);
    font-weight: 500;
    border: 1px solid transparent;
}

.review-approved[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-success) 12%, transparent);
    color: var(--cc-success);
    border-color: color-mix(in oklch, var(--cc-success) 30%, transparent);
}
.review-rejected[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-danger) 12%, transparent);
    color: var(--cc-danger);
    border-color: color-mix(in oklch, var(--cc-danger) 30%, transparent);
}
.review-pending[b-24ltzi291k] {
    background: color-mix(in oklch, var(--cc-warning) 12%, transparent);
    color: var(--cc-warning);
    border-color: color-mix(in oklch, var(--cc-warning) 30%, transparent);
}

.wiki-review-note[b-24ltzi291k] { color: var(--cc-fg-dim); font-size: var(--cc-fs-xs); cursor: help; margin-left: 4px; }

/* Version action buttons */
.wiki-action-btn[b-24ltzi291k] {
    padding: 3px 8px;
    border-radius: var(--cc-r-sm);
    border: 1px solid var(--cc-border);
    background: var(--cc-bg-hover);
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
    cursor: pointer;
    transition: background var(--cc-dur-fast) var(--cc-ease),
                color var(--cc-dur-fast) var(--cc-ease);
}

.wiki-action-btn:hover[b-24ltzi291k] { background: var(--cc-bg-card); color: var(--cc-fg); }

.wiki-btn-approve[b-24ltzi291k] {
    color: var(--cc-success);
    border-color: color-mix(in oklch, var(--cc-success) 35%, transparent);
}
.wiki-btn-approve:hover[b-24ltzi291k] { background: color-mix(in oklch, var(--cc-success) 12%, transparent); }

.wiki-btn-reject[b-24ltzi291k] {
    color: var(--cc-danger);
    border-color: color-mix(in oklch, var(--cc-danger) 35%, transparent);
}
.wiki-btn-reject:hover[b-24ltzi291k] { background: color-mix(in oklch, var(--cc-danger) 12%, transparent); }

/* Audit code tag */
.wiki-code-tag[b-24ltzi291k] {
    font-family: var(--cc-font-mono);
    font-size: var(--cc-fs-xs);
    padding: 2px 5px;
    background: rgba(255, 140, 66, 0.08);
    border: 1px solid rgba(255, 140, 66, 0.18);
    border-radius: var(--cc-r-sm);
    color: #FF8C42;
}

/* ── Related Articles Grid ───────────────────────────────────────────────── */

.wiki-related-grid[b-24ltzi291k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--cc-s-3);
}

.wiki-related-card[b-24ltzi291k] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
    padding: var(--cc-s-4);
    background: var(--cc-bg-hover);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    text-decoration: none;
    color: var(--cc-fg);
    transition: background var(--cc-dur-fast) var(--cc-ease),
                border-color var(--cc-dur-fast) var(--cc-ease),
                transform var(--cc-dur-fast) var(--cc-ease);
}

.wiki-related-card:hover[b-24ltzi291k] {
    background: var(--cc-bg-card);
    border-color: color-mix(in oklch, var(--cc-accent) 35%, transparent);
    transform: translateY(-1px);
}

.wiki-related-title[b-24ltzi291k] {
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    color: var(--cc-fg);
    line-height: 1.3;
}

.wiki-related-desc[b-24ltzi291k] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wiki-related-footer[b-24ltzi291k] {
    margin-top: auto;
    padding-top: var(--cc-s-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--cc-s-2);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .wiki-layout[b-24ltzi291k] { grid-template-columns: 260px 1fr; }
}

@media (max-width: 900px) {
    .wiki-layout[b-24ltzi291k] { grid-template-columns: 1fr; }
    .wiki-sidebar[b-24ltzi291k] { position: static; max-height: none; }
    .wiki-field-row[b-24ltzi291k] { grid-template-columns: 1fr; }
    .wiki-field-sm[b-24ltzi291k] { max-width: 100%; }
}

@media (max-width: 640px) {
    .wiki-create-panel[b-24ltzi291k] { padding: var(--cc-s-4); }
    .wiki-create-head[b-24ltzi291k] { flex-direction: column; align-items: stretch; }
    .wiki-article-header[b-24ltzi291k] { flex-direction: column; }
    .wiki-article-badges[b-24ltzi291k] { flex-direction: row; align-items: flex-start; }
    .wiki-tabs[b-24ltzi291k] { overflow-x: auto; }
    .wiki-action-bar[b-24ltzi291k] {
        align-items: stretch;
    }
    .wiki-action-bar > button[b-24ltzi291k],
    .wiki-pin-btn[b-24ltzi291k] {
        flex: 1 1 160px;
    }
    .wiki-editor-footer[b-24ltzi291k] { flex-direction: column; align-items: stretch; }
    .wiki-editor-actions[b-24ltzi291k] { flex-direction: column; }
    .wiki-create-footer[b-24ltzi291k] { flex-direction: column; align-items: stretch; }
}

@media (max-width: 767px) {
    /* Sidebar: hidden by default; accessible via existing toggle if present */
    .wiki-sidebar[b-24ltzi291k] {
        max-height: 220px;
        overflow-y: auto;
        border-bottom: 1px solid var(--cc-border);
        padding-bottom: var(--cc-s-3);
    }

    /* Article: full width, remove 72ch cap */
    .wiki-article[b-24ltzi291k],
    .wiki-article-body[b-24ltzi291k] { max-width: 100% !important; width: 100%; }

    /* Typography scale for small screens */
    .wiki-article-body h1[b-24ltzi291k] { font-size: 1.4rem; }
    .wiki-article-body h2[b-24ltzi291k] { font-size: 1.2rem; }

    /* Search bar full-width */
    .wiki-search[b-24ltzi291k] { width: 100%; }
}
/* /Shared/Components/Animations/AdvisorTypingBlock.razor.rz.scp.css */
/* AdvisorTypingBlock */
.advisor-typing[b-n9cq7mg0rt] {
    background: var(--cc-bg-elev);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-lg);
    padding: var(--cc-s-4) var(--cc-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-2);
    min-height: 80px;
}

.advisor-kicker[b-n9cq7mg0rt] {
    font: 700 var(--cc-fs-xs)/1 var(--cc-font-mono);
    color: var(--cc-accent);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: var(--cc-s-1);
}

.advisor-chunk[b-n9cq7mg0rt] {
    font-size: var(--cc-fs-sm);
    color: var(--cc-fg-muted);
    line-height: 1.55;
}

.advisor-chunk.advisor-final[b-n9cq7mg0rt] {
    color: var(--cc-fg);
    font-weight: 500;
}

.advisor-arrow[b-n9cq7mg0rt] {
    color: var(--cc-accent);
    margin-right: 6px;
}

/* Typing dots */
.advisor-dots[b-n9cq7mg0rt] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.advisor-dots span[b-n9cq7mg0rt] {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cc-accent);
    opacity: .5;
    animation: cc-advisor-dot-b-n9cq7mg0rt .9s ease infinite;
}

.advisor-dots span:nth-child(2)[b-n9cq7mg0rt] { animation-delay: .15s; }
.advisor-dots span:nth-child(3)[b-n9cq7mg0rt] { animation-delay: .30s; }

@keyframes cc-advisor-dot-b-n9cq7mg0rt {
    0%, 80%, 100% { transform: scale(.7); opacity: .3; }
    40%            { transform: scale(1);  opacity: .8; }
}
/* /Shared/Components/Animations/AuditLedger.razor.rz.scp.css */
/* AuditLedger */
.audit-ledger[b-ziclwc6h0y] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    overflow: hidden;
    background: var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: var(--cc-shadow-premium, var(--cc-shadow-md));
}

.ledger-head[b-ziclwc6h0y] {
    display: grid;
    grid-template-columns: 140px 160px 180px 110px 1fr;
    gap: var(--cc-s-3);
    padding: var(--cc-s-2) var(--cc-s-4);
    background: var(--cc-bg-elev);
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    color: var(--cc-fg-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--cc-border-soft);
}

.ledger-row[b-ziclwc6h0y] {
    display: grid;
    grid-template-columns: 140px 160px 180px 110px 1fr;
    gap: var(--cc-s-3);
    padding: var(--cc-s-3) var(--cc-s-4);
    border-top: 1px solid var(--cc-border-soft);
    align-items: center;
    font-size: var(--cc-fs-sm);
    font-family: var(--cc-font-sans);
    background: var(--cc-bg-card);
    transition: background var(--cc-dur-slow);
    cursor: pointer;
}

.ledger-row:first-of-type[b-ziclwc6h0y] { border-top: none; }
.ledger-row:hover[b-ziclwc6h0y] { background: var(--cc-bg-hover); }

.ledger-operator[b-ziclwc6h0y] {
    font-weight: 600;
    color: var(--cc-fg);
}

.ledger-action[b-ziclwc6h0y] {
    color: var(--cc-accent);
    font-size: 11px;
}

.ledger-target[b-ziclwc6h0y] { color: var(--cc-fg-muted); }
.ledger-ip[b-ziclwc6h0y]     { font-size: 11px; color: var(--cc-fg-dim); font-family: var(--cc-font-mono); }
.ledger-time[b-ziclwc6h0y]   { font-size: 11px; color: var(--cc-fg-dim); font-family: var(--cc-font-mono); }

.ledger-detail[b-ziclwc6h0y] {
    padding: var(--cc-s-3) var(--cc-s-4) var(--cc-s-4);
    border-top: 1px solid var(--cc-border-soft);
    background: color-mix(in oklch, var(--cc-bg-elev) 82%, transparent);
}

.ledger-detail dl[b-ziclwc6h0y] {
    margin: 0;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--cc-s-2) var(--cc-s-3);
}

.ledger-detail dt[b-ziclwc6h0y] {
    color: var(--cc-fg-dim);
    font: 700 var(--cc-fs-xs)/1.4 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ledger-detail dd[b-ziclwc6h0y] {
    margin: 0;
    min-width: 0;
    color: var(--cc-fg-muted);
    overflow-wrap: anywhere;
}

.ledger-detail pre[b-ziclwc6h0y] {
    margin: 0;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    font: 400 var(--cc-fs-xs)/1.45 var(--cc-font-mono);
}

.mono[b-ziclwc6h0y] { font-family: var(--cc-font-mono); }
.muted[b-ziclwc6h0y] { color: var(--cc-fg-muted); }
.dim[b-ziclwc6h0y]   { color: var(--cc-fg-dim); }
/* /Shared/Components/Animations/KpiCountCard.razor.rz.scp.css */
/* KpiCountCard */
.kpi-count-card[b-sq8isbkyh9] {
    background:
        linear-gradient(135deg, color-mix(in oklch, var(--cc-accent) 6%, transparent), transparent 42%),
        var(--cc-bg-glass, var(--cc-bg-card));
    border: 1px solid var(--cc-border-luxe, var(--cc-border));
    border-radius: var(--cc-r-lg);
    padding: var(--cc-s-4) var(--cc-s-5);
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    transition:
        transform var(--cc-dur-fast),
        box-shadow var(--cc-dur-fast),
        border-color var(--cc-dur-fast);
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    user-select: none;
}

.kpi-count-card:hover[b-sq8isbkyh9] {
    transform: translateY(-2px);
    box-shadow: var(--cc-glow-accent, var(--cc-shadow-md));
    border-color: color-mix(in oklch, var(--cc-accent) 32%, var(--cc-border));
}

.kpi-count-card.kpi-warn[b-sq8isbkyh9] {
    border-left: 3px solid var(--cc-danger);
}

.kpi-count-card.kpi-ok[b-sq8isbkyh9] {
    border-left: 3px solid var(--cc-success);
}

.kpi-label[b-sq8isbkyh9] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    font-family: var(--cc-font-sans);
}

.kpi-value[b-sq8isbkyh9] {
    font-size: var(--cc-fs-xl);
    font-weight: 750;
    color: var(--cc-fg);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: var(--cc-font-sans);
    display: inline-block;
}

.kpi-delta[b-sq8isbkyh9] {
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    font-family: var(--cc-font-sans);
}

.delta-ok[b-sq8isbkyh9]   { color: var(--cc-success); }
.delta-warn[b-sq8isbkyh9] { color: var(--cc-danger);  }
/* /Shared/Components/Animations/PriorityPulseBar.razor.rz.scp.css */
/* PriorityPulseBar */
.sev-bar[b-s80tkeb7rv] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    transform-origin: center;
}

.sev-bar-critical[b-s80tkeb7rv] { background: var(--cc-danger);  }
.sev-bar-warning[b-s80tkeb7rv]  { background: var(--cc-warning); }
.sev-bar-success[b-s80tkeb7rv]  { background: var(--cc-success); }
.sev-bar-info[b-s80tkeb7rv]     { background: var(--cc-accent);  }
/* /Shared/Components/Animations/SkeletonQueueRow.razor.rz.scp.css */
/* SkeletonQueueRow */
.skeleton-row[b-k0am86ykli] {
    display: grid;
    grid-template-columns: 3px 88px 1fr 1fr 64px;
    gap: 10px;
    align-items: center;
    padding: 13px 14px 13px 0;
    border-bottom: 1px solid var(--cc-border-soft);
}

.skeleton-row:last-child[b-k0am86ykli] { border-bottom: none; }

.skeleton-sev-bar[b-k0am86ykli] {
    height: 100%;
    border-radius: 0 2px 2px 0;
    min-height: 24px;
}

.skeleton-sev-bar.sev-crit[b-k0am86ykli]    { background: color-mix(in oklch, var(--cc-danger)  35%, var(--cc-border)); }
.skeleton-sev-bar.sev-warn[b-k0am86ykli]    { background: color-mix(in oklch, var(--cc-warning) 35%, var(--cc-border)); }
.skeleton-sev-bar.sev-neutral[b-k0am86ykli] { background: var(--cc-border); }

.skel-narrow[b-k0am86ykli] { height: 10px; width: 80%;  }
.skel-medium[b-k0am86ykli] { height: 10px; width: 70%;  }
.skel-wide[b-k0am86ykli]   { height: 10px; width: 90%; margin-bottom: 5px; }
.skel-half[b-k0am86ykli]   { height: 8px;  width: 55%; }
.skel-badge[b-k0am86ykli]  { height: 22px; width: 56px; border-radius: 4px; }

.skel-text-stack[b-k0am86ykli] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* /Shared/Components/AuthAnimation.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   AuthAnimation — Iris-Scan-Video als Vollbild-Overlay
   Phasen:
     - Idle      → ausgeblendet, pointer-events off
     - Scanning  → Video laeuft (0.0s -> Pause bei 2.5s)
     - Granted   → Video resumed bei 4.0s, gruener Glow
     - Denied    → Video pausiert, rotes Overlay + Shake
   ═══════════════════════════════════════════════════════════════ */

.auth-iris-shell[b-a7md5df435] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: #020812;
    overflow: hidden;
    transition: opacity .45s var(--cc-ease, cubic-bezier(.4,0,.2,1));
}

/* ── Idle: komplett unsichtbar ──────────────────────────────── */
.auth-iris-shell.auth-iris-idle[b-a7md5df435] {
    opacity: 0;
    pointer-events: none;
}

.auth-iris-shell:not(.auth-iris-idle)[b-a7md5df435] {
    opacity: 1;
}

/* ── Video-Element ──────────────────────────────────────────── */
.auth-iris-video[b-a7md5df435] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform, opacity;
}

/* ── Phase-Tint (rot bei Denied) ────────────────────────────── */
.auth-iris-tint[b-a7md5df435] {
    position: absolute;
    inset: 0;
    mix-blend-mode: overlay;
    pointer-events: none;
    transition: background-color .45s var(--cc-ease, ease);
    background-color: transparent;
}

.auth-iris-scanning .auth-iris-tint[b-a7md5df435] {
    background:
        radial-gradient(circle at 50% 50%,
            rgba(245, 158, 11, .14) 0%,
            rgba(59, 130, 246, .12) 42%,
            transparent 78%);
    animation: irisWaitPulse-b-a7md5df435 1.45s ease-in-out infinite;
}

.auth-iris-denied .auth-iris-tint[b-a7md5df435] {
    background-color: color-mix(in oklch,
        var(--cc-danger, #ef4444) 38%, transparent);
    animation:
        irisDenyPulse-b-a7md5df435 .42s ease-out both,
        irisDenyShake-b-a7md5df435 .5s var(--cc-ease, ease) both;
}

@keyframes irisWaitPulse-b-a7md5df435 {
    0%, 100% { opacity: .35; }
    50%      { opacity: .72; }
}

@keyframes irisDenyPulse-b-a7md5df435 {
    from { opacity: .25; }
    to   { opacity: .9; }
}

@keyframes irisDenyShake-b-a7md5df435 {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-14px); }
    40%      { transform: translateX(14px); }
    60%      { transform: translateX(-9px); }
    80%      { transform: translateX(9px); }
}

/* ── Vignette ───────────────────────────────────────────────── */
.auth-iris-vignette[b-a7md5df435] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 70% at 50% 50%,
        transparent 0%,
        rgba(2, 8, 18, .55) 75%,
        rgba(2, 8, 18, .85) 100%);
}

/* ══════════════════════════════════════════════════════════════
   Status-Box unten zentriert
   ══════════════════════════════════════════════════════════════ */
.auth-iris-status[b-a7md5df435] {
    position: absolute;
    left: 50%;
    bottom: 12vh;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cc-s-2, 8px);
    padding: var(--cc-s-3, 12px) var(--cc-s-6, 24px);
    border-radius: 999px;
    background: rgba(2, 8, 18, .62);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .92);
    font: 500 var(--cc-fs-sm, .82rem)/1.4 var(--cc-font-mono, ui-monospace, monospace);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: border-color .35s ease, color .35s ease;
    animation: statusFadeIn-b-a7md5df435 .4s var(--cc-ease, ease) both;
}

@keyframes statusFadeIn-b-a7md5df435 {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.auth-iris-status-pip[b-a7md5df435] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
    animation: pipPulse-b-a7md5df435 1.4s var(--cc-ease, ease) infinite;
}

@keyframes pipPulse-b-a7md5df435 {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}

/* Phase-spezifische Akzente */
.auth-iris-status.status-scan[b-a7md5df435] {
    border-color: color-mix(in oklch, var(--cc-accent, #3b82f6) 55%, transparent);
    color: color-mix(in oklch, var(--cc-accent, #3b82f6) 80%, white);
}

.auth-iris-status.status-grant[b-a7md5df435] {
    border-color: color-mix(in oklch, var(--cc-success, #22c55e) 65%, transparent);
    color: var(--cc-success, #22c55e);
}

.auth-iris-status.status-grant .auth-iris-status-pip[b-a7md5df435] {
    animation: pipPulse-b-a7md5df435 1s var(--cc-ease, ease) infinite;
}

.auth-iris-status.status-deny[b-a7md5df435] {
    border-color: color-mix(in oklch, var(--cc-danger, #ef4444) 70%, transparent);
    color: var(--cc-danger, #ef4444);
    animation: statusFadeIn-b-a7md5df435 .4s ease both, irisDenyShake-b-a7md5df435 .5s var(--cc-ease, ease) both;
}

.auth-iris-status.status-deny .auth-iris-status-pip[b-a7md5df435] {
    animation: none;
    opacity: 1;
}

/* Fehlertext unter dem Status (nur Denied) */
.auth-iris-status-error[b-a7md5df435] {
    margin-top: var(--cc-s-1, 4px);
    font: 400 var(--cc-fs-xs, .72rem)/1.45 var(--cc-font-sans, system-ui, sans-serif);
    color: rgba(255, 255, 255, .9);
    text-transform: none;
    letter-spacing: 0;
    max-width: 60ch;
    text-align: center;
}
/* /Shared/Components/Diagnostics/DiagnosticPanel.razor.rz.scp.css */
/* DiagnosticPanel — scoped styles */

.diagnostic-panel[b-493k3ui8kr] {
    background: var(--cc-bg-card);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-lg);
    padding: var(--cc-s-4) var(--cc-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-4);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.diagnostic-panel__header[b-493k3ui8kr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-3);
    flex-wrap: wrap;
}

.diagnostic-panel__title-row[b-493k3ui8kr] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
    min-width: 0;
}

.diagnostic-panel__domain-badge[b-493k3ui8kr] {
    font-size: var(--cc-fs-xs);
    font-family: var(--cc-font-mono);
    font-weight: 600;
    color: var(--cc-accent);
    background: color-mix(in srgb, var(--cc-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc-accent) 25%, transparent);
    border-radius: var(--cc-r-sm);
    padding: 2px var(--cc-s-2);
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.diagnostic-panel__title[b-493k3ui8kr] {
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    color: var(--cc-fg);
    font-family: var(--cc-font-sans);
    margin: 0;
}

/* ── Overall status badge ─────────────────────────────────────────────────── */
.diagnostic-panel__overall[b-493k3ui8kr] {
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    font-family: var(--cc-font-sans);
    border-radius: var(--cc-r-sm);
    padding: 2px var(--cc-s-2);
    line-height: 1.4;
    flex-shrink: 0;
}

.diagnostic-panel__overall--pass[b-493k3ui8kr] {
    color: var(--cc-success);
    background: color-mix(in srgb, var(--cc-success) 12%, transparent);
}

.diagnostic-panel__overall--warn[b-493k3ui8kr] {
    color: var(--cc-warning);
    background: color-mix(in srgb, var(--cc-warning) 12%, transparent);
}

.diagnostic-panel__overall--fail[b-493k3ui8kr] {
    color: var(--cc-danger);
    background: color-mix(in srgb, var(--cc-danger) 12%, transparent);
}

.diagnostic-panel__overall--skip[b-493k3ui8kr] {
    color: var(--cc-fg-dim);
    background: var(--cc-bg-hover);
}

/* ── Run button ───────────────────────────────────────────────────────────── */
.diagnostic-panel__run-btn[b-493k3ui8kr] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-1);
    flex-shrink: 0;
}

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.diagnostic-panel__spinner[b-493k3ui8kr] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--cc-border);
    border-top-color: var(--cc-accent);
    border-radius: 50%;
    animation: diag-spin-b-493k3ui8kr .7s linear infinite;
    flex-shrink: 0;
}

@keyframes diag-spin-b-493k3ui8kr {
    to { transform: rotate(360deg); }
}

/* ── Error banner ─────────────────────────────────────────────────────────── */
.diagnostic-panel__error[b-493k3ui8kr] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-danger);
    background: color-mix(in srgb, var(--cc-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc-danger) 22%, transparent);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-2) var(--cc-s-3);
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    font-family: var(--cc-font-sans);
}

/* ── Meta line ────────────────────────────────────────────────────────────── */
.diagnostic-panel__meta[b-493k3ui8kr] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    font-family: var(--cc-font-sans);
}

/* ── Idle placeholder ─────────────────────────────────────────────────────── */
.diagnostic-panel__idle[b-493k3ui8kr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cc-s-2);
    padding: var(--cc-s-6) 0;
    text-align: center;
}

.diagnostic-panel__idle-icon[b-493k3ui8kr] {
    font-size: 28px;
    line-height: 1;
    opacity: .5;
    user-select: none;
}

.diagnostic-panel__idle p[b-493k3ui8kr] {
    font-size: var(--cc-fs-sm);
    color: var(--cc-fg-dim);
    font-family: var(--cc-font-sans);
    margin: 0;
}

/* ── Skeleton loader ──────────────────────────────────────────────────────── */
.diagnostic-panel__skeleton[b-493k3ui8kr] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
}

.diagnostic-panel__skeleton-row[b-493k3ui8kr] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
}

.diagnostic-panel__skeleton-node[b-493k3ui8kr] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cc-bg-hover);
    flex-shrink: 0;
    animation: diag-pulse-b-493k3ui8kr 1.4s ease-in-out infinite;
}

.diagnostic-panel__skeleton-line[b-493k3ui8kr] {
    height: 14px;
    border-radius: var(--cc-r-sm);
    background: var(--cc-bg-hover);
    flex: 1 1 auto;
    animation: diag-pulse-b-493k3ui8kr 1.4s ease-in-out infinite;
}

.diagnostic-panel__skeleton-row:nth-child(2) .diagnostic-panel__skeleton-line[b-493k3ui8kr] { width: 70%; flex: 0 0 70%; }
.diagnostic-panel__skeleton-row:nth-child(3) .diagnostic-panel__skeleton-line[b-493k3ui8kr] { width: 55%; flex: 0 0 55%; }
.diagnostic-panel__skeleton-row:nth-child(4) .diagnostic-panel__skeleton-line[b-493k3ui8kr] { width: 80%; flex: 0 0 80%; }

@keyframes diag-pulse-b-493k3ui8kr {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}
/* /Shared/Components/Diagnostics/DiagnosticsHealthTile.razor.rz.scp.css */
.diag-health-tile[b-yzarr0s4d4] {
    container-type: inline-size;
}

/* ── Header badges ──────────────────────────────────────────────────────── */
.diag-health-tile__badge[b-yzarr0s4d4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    margin-left: .4rem;
    vertical-align: middle;
}

.diag-health-tile__badge--fail[b-yzarr0s4d4] {
    background: rgba(var(--cc-danger-rgb), .18);
    color: var(--cc-danger);
    border: 1px solid rgba(var(--cc-danger-rgb), .35);
}

.diag-health-tile__badge--warn[b-yzarr0s4d4] {
    background: rgba(var(--cc-warning-rgb), .18);
    color: var(--cc-warning);
    border: 1px solid rgba(var(--cc-warning-rgb), .35);
}

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.diag-health-tile__skeleton[b-yzarr0s4d4] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 0 .5rem;
}

.diag-health-tile__skel-row[b-yzarr0s4d4] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.diag-health-tile__skel-label[b-yzarr0s4d4] {
    height: .75rem;
    width: 5rem;
    border-radius: 4px;
    background: var(--cc-surface-3);
    animation: cc-skel-pulse 1.4s ease-in-out infinite;
}

.diag-health-tile__skel-counts[b-yzarr0s4d4] {
    height: .75rem;
    width: 3rem;
    border-radius: 4px;
    background: var(--cc-surface-3);
    animation: cc-skel-pulse 1.4s ease-in-out .2s infinite;
    margin-left: auto;
}

/* ── Clean state ────────────────────────────────────────────────────────── */
.diag-health-tile__clean[b-yzarr0s4d4] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 0;
    font-size: .82rem;
    color: var(--cc-success);
    font-weight: 500;
}

/* ── Domain rows ────────────────────────────────────────────────────────── */
.diag-health-tile__rows[b-yzarr0s4d4] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: .25rem 0;
}

.diag-health-tile__row[b-yzarr0s4d4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .5rem;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    text-align: left;
    width: 100%;
    gap: .5rem;
}

.diag-health-tile__row:hover[b-yzarr0s4d4] {
    background: var(--cc-surface-2);
    border-color: var(--cc-border);
}

.diag-health-tile__row-label[b-yzarr0s4d4] {
    font-size: .82rem;
    font-weight: 500;
    color: var(--cc-text);
    white-space: nowrap;
}

.diag-health-tile__row-counts[b-yzarr0s4d4] {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}

.diag-health-tile__count[b-yzarr0s4d4] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .4rem;
    border-radius: 4px;
    white-space: nowrap;
}

.diag-health-tile__count--fail[b-yzarr0s4d4] {
    background: rgba(var(--cc-danger-rgb), .12);
    color: var(--cc-danger);
}

.diag-health-tile__count--warn[b-yzarr0s4d4] {
    background: rgba(var(--cc-warning-rgb), .12);
    color: var(--cc-warning);
}

/* ── Error ──────────────────────────────────────────────────────────────── */
.diag-health-tile__error[b-yzarr0s4d4] {
    font-size: .78rem;
    color: var(--cc-text-muted);
    padding: .5rem 0;
}

/* ── Footer timestamp ───────────────────────────────────────────────────── */
.diag-health-tile__footer[b-yzarr0s4d4] {
    font-size: .7rem;
    color: var(--cc-text-muted);
    margin-top: .5rem;
    padding-top: .4rem;
    border-top: 1px solid var(--cc-border);
}
/* /Shared/Components/Diagnostics/FixHintCard.razor.rz.scp.css */
/* FixHintCard — scoped styles */

.fix-hint-card[b-3gpng0wkr7] {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-s-2);
    padding: var(--cc-s-2) var(--cc-s-3);
    border-radius: var(--cc-r-md);
    margin-top: var(--cc-s-2);
    border: 1px solid transparent;
}

/* ── Per-status coloring ─────────────────────────────────────────────────── */
.fix-hint-card--fail[b-3gpng0wkr7] {
    background: color-mix(in srgb, var(--cc-danger) 6%, transparent);
    border-color: color-mix(in srgb, var(--cc-danger) 18%, transparent);
}

.fix-hint-card--warn[b-3gpng0wkr7] {
    background: color-mix(in srgb, var(--cc-warning) 6%, transparent);
    border-color: color-mix(in srgb, var(--cc-warning) 18%, transparent);
}

.fix-hint-card--info[b-3gpng0wkr7] {
    background: var(--cc-bg-hover);
    border-color: var(--cc-border-soft);
}

/* ── Icon ────────────────────────────────────────────────────────────────── */
.fix-hint-card__icon[b-3gpng0wkr7] {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    flex-shrink: 0;
    user-select: none;
}

.fix-hint-card--fail .fix-hint-card__icon[b-3gpng0wkr7] { color: var(--cc-danger);  }
.fix-hint-card--warn .fix-hint-card__icon[b-3gpng0wkr7] { color: var(--cc-warning); }
.fix-hint-card--info .fix-hint-card__icon[b-3gpng0wkr7] { color: var(--cc-fg-dim);  }

/* ── Body ────────────────────────────────────────────────────────────────── */
.fix-hint-card__body[b-3gpng0wkr7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fix-hint-card__label[b-3gpng0wkr7] {
    font-size: var(--cc-fs-xs);
    font-weight: 600;
    color: var(--cc-fg-muted);
    font-family: var(--cc-font-sans);
    margin: 0;
}

.fix-hint-card__message[b-3gpng0wkr7] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    font-family: var(--cc-font-mono);
    margin: 0;
    word-break: break-word;
    line-height: 1.5;
}

.fix-hint-card__hint[b-3gpng0wkr7] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    font-family: var(--cc-font-sans);
    margin: var(--cc-s-1) 0 0;
    line-height: 1.5;
}
/* /Shared/Components/Diagnostics/PipelineStepper.razor.rz.scp.css */
/* PipelineStepper — scoped styles */

.pipeline-stepper[b-jt1ra24icv] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Step Row ─────────────────────────────────────────────────────────────── */
.pipeline-step[b-jt1ra24icv] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 var(--cc-s-3);
    align-items: start;
    min-height: 48px;
}

/* ── Track (node + connecting line) ──────────────────────────────────────── */
.pipeline-step__track[b-jt1ra24icv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 48px;
}

.pipeline-step__node[b-jt1ra24icv] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid transparent;
    transition: background var(--cc-dur-fast), border-color var(--cc-dur-fast);
}

/* ── Node colors per status ───────────────────────────────────────────────── */
.pipeline-step--pass .pipeline-step__node[b-jt1ra24icv] {
    background: var(--cc-success-bg, color-mix(in srgb, var(--cc-success) 12%, transparent));
    border-color: var(--cc-success);
    color: var(--cc-success);
}

.pipeline-step--warn .pipeline-step__node[b-jt1ra24icv] {
    background: var(--cc-warning-bg, color-mix(in srgb, var(--cc-warning) 12%, transparent));
    border-color: var(--cc-warning);
    color: var(--cc-warning);
}

.pipeline-step--fail .pipeline-step__node[b-jt1ra24icv] {
    background: var(--cc-danger-bg, color-mix(in srgb, var(--cc-danger) 12%, transparent));
    border-color: var(--cc-danger);
    color: var(--cc-danger);
}

.pipeline-step--skip .pipeline-step__node[b-jt1ra24icv] {
    background: var(--cc-bg-hover);
    border-color: var(--cc-border);
    color: var(--cc-fg-dim);
}

/* ── Connector line ───────────────────────────────────────────────────────── */
.pipeline-step__line[b-jt1ra24icv] {
    flex: 1 1 auto;
    width: 2px;
    min-height: 12px;
    background: var(--cc-border-soft);
    margin-top: 4px;
    margin-bottom: 0;
}

/* ── Content area ─────────────────────────────────────────────────────────── */
.pipeline-step__content[b-jt1ra24icv] {
    padding-bottom: var(--cc-s-4);
    min-width: 0;
}

.pipeline-step--last .pipeline-step__content[b-jt1ra24icv] {
    padding-bottom: 0;
}

.pipeline-step__header[b-jt1ra24icv] {
    display: flex;
    align-items: baseline;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
    padding-top: 4px; /* align with node center */
}

.pipeline-step__label[b-jt1ra24icv] {
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    color: var(--cc-fg);
    font-family: var(--cc-font-sans);
}

.pipeline-step--skip .pipeline-step__label[b-jt1ra24icv] {
    color: var(--cc-fg-dim);
}

.pipeline-step__name[b-jt1ra24icv] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    font-family: var(--cc-font-mono);
    opacity: .7;
}

/* ── Message ──────────────────────────────────────────────────────────────── */
.pipeline-step__message[b-jt1ra24icv] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    font-family: var(--cc-font-sans);
    margin: var(--cc-s-1) 0 var(--cc-s-2);
    line-height: 1.5;
}
/* /Shared/Components/Establishing.razor.rz.scp.css */
/* Klassennamen OHNE „establishing-*“ Prefix: globals briefing.css hätte gleiche Selector mitgestylt (~Layer + Fortschritt). */
/* Sofort unsichtbar nach Abschluss — vermeidet 1‑Frame‑Flimmern wenn Parent-State nachzieht */
.cc-dash-est-root.cc-dash-est-root-done[b-afc0g7bu5b] {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.cc-dash-est-root[b-afc0g7bu5b] {
    /* Relativ zur Dashboard-Spalte (nicht fullscreen — sonst Sidebar + Shell blockiert) */
    position: absolute;
    inset: 0;
    width: auto;
    min-height: min(520px, 100%);
    background: linear-gradient(135deg, var(--cc-bg-dark) 0%, var(--cc-bg-darker) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 80;
    color: var(--cc-text-primary);
    overflow-x: hidden;
    overflow-y: auto;
}

.cc-dash-est-skip[b-afc0g7bu5b] {
    position: absolute;
    top: var(--cc-s-4, 14px);
    right: var(--cc-s-4, 14px);
    z-index: 96;
    font: inherit;
    font-size: var(--cc-fs-xs, 0.8rem);
    padding: var(--cc-s-2, 8px) var(--cc-s-4);
    cursor: pointer;
    border-radius: var(--cc-r-md, 8px);
    border: 1px solid color-mix(in oklch, var(--cc-accent, #56c5ff) 36%, transparent);
    background: color-mix(in oklch, var(--cc-bg-card, #161a24) 86%, transparent);
    color: var(--cc-fg-muted, #b8c4d8);
}

.establishing-skip:hover[b-afc0g7bu5b] {
    color: var(--cc-fg, #eef3ff);
    border-color: color-mix(in oklch, var(--cc-accent) 55%, transparent);
}

.cc-dash-est-skip-hint[b-afc0g7bu5b] {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    background: transparent;
    border: none;
    padding: var(--cc-s-1, 6px);
    margin-bottom: 2px;
    color: color-mix(in oklch, var(--cc-neon-cyan, #3eeaff) 90%, rgba(255,255,255,0.92));
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
    z-index: 95;
}

.cc-dash-est-skip-hint:hover[b-afc0g7bu5b] {
    filter: brightness(1.08);
}

.briefing-content[b-afc0g7bu5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
    padding: 2rem;
}

.briefing-header[b-afc0g7bu5b] {
    text-align: center;
    margin-bottom: 1rem;
}

.briefing-title[b-afc0g7bu5b] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--cc-neon-cyan);
    margin: 0;
    text-shadow: 0 0 20px var(--cc-neon-cyan);
}

.briefing-subtitle[b-afc0g7bu5b] {
    font-size: 1.2rem;
    color: var(--cc-text-secondary);
    margin-top: 0.5rem;
}

.op-dot[b-afc0g7bu5b] {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--cc-neon-green);
    border-radius: 50%;
    margin-right: 0.5rem;
    animation: pulse-b-afc0g7bu5b 2s infinite;
}

.briefing-data-grid[b-afc0g7bu5b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 2rem;
}

.briefing-icons[b-afc0g7bu5b] {
    width: 100%;
    margin-top: 2rem;
}

.icon-row[b-afc0g7bu5b] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.icon-item[b-afc0g7bu5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    animation: fadeInUp-b-afc0g7bu5b 1s ease-out forwards;
}

.icon-item:nth-child(1)[b-afc0g7bu5b] { animation-delay: 0s; }
.icon-item:nth-child(2)[b-afc0g7bu5b] { animation-delay: 0.5s; }
.icon-item:nth-child(3)[b-afc0g7bu5b] { animation-delay: 1s; }
.icon-item:nth-child(4)[b-afc0g7bu5b] { animation-delay: 1.5s; }
.icon-item:nth-child(5)[b-afc0g7bu5b] { animation-delay: 2s; }
.icon-item:nth-child(6)[b-afc0g7bu5b] { animation-delay: 2.5s; }
.icon-item:nth-child(7)[b-afc0g7bu5b] { animation-delay: 3s; }
.icon-item:nth-child(8)[b-afc0g7bu5b] { animation-delay: 3.5s; }

.animated-icon-spin[b-afc0g7bu5b] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.animated-icon[b-afc0g7bu5b] {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 0 10px var(--cc-neon-cyan));
    animation: briefingIconGlow-b-afc0g7bu5b 3s ease-in-out infinite alternate;
}

.icon-item span[b-afc0g7bu5b] {
    font-size: 0.9rem;
    color: var(--cc-text-secondary);
    text-align: center;
}

.briefing-milestones[b-afc0g7bu5b] {
    margin-top: 2rem;
    text-align: center;
}

.briefing-milestones h3[b-afc0g7bu5b] {
    color: var(--cc-neon-green);
    margin-bottom: 1rem;
}

.milestone-item[b-afc0g7bu5b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid var(--cc-neon-blue);
}

.milestone-icon[b-afc0g7bu5b] {
    font-size: 1.2rem;
}

.milestone-text[b-afc0g7bu5b] {
    font-weight: 500;
}

.cc-dash-est-foot[b-afc0g7bu5b] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(420px, 92vw);
    z-index: 94;
}

.progress-bar-track[b-afc0g7bu5b] {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill[b-afc0g7bu5b] {
    height: 100%;
    background: linear-gradient(90deg, var(--cc-neon-cyan), var(--cc-neon-green));
    border-radius: 4px;
    transition: width 120ms linear;
}

.progress-text[b-afc0g7bu5b] {
    font-size: 0.9rem;
    color: var(--cc-text-secondary);
}

@keyframes pulse-b-afc0g7bu5b {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes fadeInUp-b-afc0g7bu5b {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes briefingIconGlow-b-afc0g7bu5b {
    from {
        filter: drop-shadow(0 0 8px var(--cc-neon-cyan));
        opacity: .88;
    }
    to {
        filter: drop-shadow(0 0 22px var(--cc-neon-cyan));
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .briefing-title[b-afc0g7bu5b] {
        font-size: 2rem;
    }
    
    .briefing-data-grid[b-afc0g7bu5b] {
        grid-template-columns: 1fr;
    }
    
    .icon-row[b-afc0g7bu5b] {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .animated-icon-spin[b-afc0g7bu5b] {
        width: 42px;
        height: 42px;
    }
    
    .animated-icon[b-afc0g7bu5b] {
        width: 36px;
        height: 36px;
    }
}
/* /Shared/Components/Hub/HubTeamAudioPlayer.razor.rz.scp.css */
.team-audio-player[b-p8q1eovtk5] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-1);
    border-radius: 20px;
    padding: 6px 12px 6px 6px;
    width: 320px;
    max-width: 100%;
}

.team-audio-player.playing[b-p8q1eovtk5] {
    border-color: var(--magenta);
    box-shadow: 0 0 12px rgba(217, 79, 255, 0.15);
}

.audio-play-btn[b-p8q1eovtk5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--magenta);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.audio-play-btn:hover[b-p8q1eovtk5] {
    transform: scale(1.05);
}

.audio-waveform-container[b-p8q1eovtk5] {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.audio-waveform-container[b-p8q1eovtk5]  > wave,
.audio-waveform-container[b-p8q1eovtk5]  div {
    cursor: pointer;
}

.audio-rate-btn[b-p8q1eovtk5] {
    background: transparent;
    border: 1px solid var(--border-1);
    color: var(--text-2);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    transition: all 0.15s;
}

.audio-rate-btn:hover[b-p8q1eovtk5] {
    border-color: var(--magenta);
    color: var(--magenta);
}

.audio-time[b-p8q1eovtk5] {
    font-size: 11px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* /Shared/Components/Hub/PushStudio.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   PushStudio — Vorschau-Button + Device Preview Modal
   ═══════════════════════════════════════════════════════════════ */

/* ── Vorschau-Button ────────────────────────────────────────── */
.pill-preview[b-c48rhuvkg1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ── Overlay ────────────────────────────────────────────────── */
.push-preview-overlay[b-c48rhuvkg1] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: overlay-in-b-c48rhuvkg1 .2s ease both;
}

@keyframes overlay-in-b-c48rhuvkg1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal Shell ────────────────────────────────────────────── */
.push-preview-modal[b-c48rhuvkg1] {
    background: #0e0f12;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 680px;
    width: 100%;
    box-shadow: 0 40px 100px rgba(0,0,0,.6);
    animation: modal-in-b-c48rhuvkg1 .22s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes modal-in-b-c48rhuvkg1 {
    from { opacity: 0; transform: scale(.92) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Modal Header ───────────────────────────────────────────── */
.preview-modal-header[b-c48rhuvkg1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.preview-modal-title[b-c48rhuvkg1] {
    font: 700 .95rem/1 var(--cc-font-sans, sans-serif);
    color: #fff;
}

.preview-modal-hint[b-c48rhuvkg1] {
    flex: 1;
    font: 400 .75rem/1 var(--cc-font-sans);
    color: rgba(255,255,255,.35);
}

.preview-close[b-c48rhuvkg1] {
    margin-left: auto;
}

/* ── Device Row ─────────────────────────────────────────────── */
.preview-devices[b-c48rhuvkg1] {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.device-wrapper[b-c48rhuvkg1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.device-label[b-c48rhuvkg1] {
    font: 700 .68rem/1 var(--cc-font-mono, monospace);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
}

/* ── Phone Shell ────────────────────────────────────────────── */
.device-phone[b-c48rhuvkg1] {
    position: relative;
    width: 220px;
    background: #1a1a1f;
    border-radius: 30px;
    border: 2px solid rgba(255,255,255,.12);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.4),
        inset 0 0 0 2px rgba(255,255,255,.04),
        0 24px 60px rgba(0,0,0,.5);
    overflow: hidden;
}

/* iOS notch */
.ios-phone .phone-notch[b-c48rhuvkg1] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 26px;
    background: #1a1a1f;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    z-index: 2;
}

/* Android camera punch */
.android-camera[b-c48rhuvkg1] {
    width: 12px;
    height: 12px;
    background: var(--cc-bg-hover);
    border-radius: 50%;
    margin: 14px auto 0;
    border: 1px solid rgba(255,255,255,.08);
}

.phone-screen[b-c48rhuvkg1] {
    margin-top: 0;
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

/* ── Status bars ────────────────────────────────────────────── */
.phone-statusbar[b-c48rhuvkg1],
.android-statusbar[b-c48rhuvkg1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 16px;
    font: 600 .6rem/1 var(--cc-font-mono);
    color: rgba(255,255,255,.7);
}

.android-statusbar[b-c48rhuvkg1] {
    padding: 4px 12px;
    font-size: .55rem;
}

.status-icons[b-c48rhuvkg1] { letter-spacing: 1.5px; }

/* ── Wallpaper Areas ────────────────────────────────────────── */
.phone-wallpaper[b-c48rhuvkg1] {
    flex: 1;
    background: linear-gradient(160deg, #1a2035 0%, #0d1117 100%);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.android-wallpaper[b-c48rhuvkg1] {
    background: linear-gradient(160deg, #1e2030 0%, #0d1020 100%);
}

/* ── iOS Notification Banner ────────────────────────────────── */
.ios-notif-banner[b-c48rhuvkg1] {
    background: rgba(28,28,32,.92);
    backdrop-filter: blur(20px);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.ios-notif-head[b-c48rhuvkg1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ios-app-icon[b-c48rhuvkg1] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #1a73e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.ios-app-info[b-c48rhuvkg1] {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
}

.ios-app-name[b-c48rhuvkg1] {
    font: 600 .65rem/1 var(--cc-font-sans);
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ios-notif-time[b-c48rhuvkg1] {
    font: 400 .6rem/1 var(--cc-font-mono);
    color: rgba(255,255,255,.35);
}

.ios-notif-title[b-c48rhuvkg1] {
    font: 700 .78rem/1.3 var(--cc-font-sans);
    color: #fff;
    margin-bottom: 2px;
}

.ios-notif-subtitle[b-c48rhuvkg1] {
    font: 400 .68rem/1.3 var(--cc-font-sans);
    color: rgba(255,255,255,.6);
    margin-bottom: 2px;
}

.ios-notif-body[b-c48rhuvkg1] {
    font: 400 .72rem/1.4 var(--cc-font-sans);
    color: rgba(255,255,255,.75);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ios-notif-image-placeholder[b-c48rhuvkg1] {
    margin-top: 8px;
    height: 50px;
    background: rgba(255,255,255,.06);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    color: rgba(255,255,255,.35);
}

.ios-notif-actions[b-c48rhuvkg1] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 7px;
}

.ios-action-btn[b-c48rhuvkg1] {
    font: 600 .65rem/1 var(--cc-font-sans);
    color: #1a73e8;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(26,115,232,.12);
    border: 1px solid rgba(26,115,232,.2);
}

.ios-action-btn.secondary[b-c48rhuvkg1] {
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}

/* ── Android Notification ───────────────────────────────────── */
.android-notif[b-c48rhuvkg1] {
    background: rgba(32,34,46,.95);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
    padding: 10px 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

.android-notif-head[b-c48rhuvkg1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.android-app-icon[b-c48rhuvkg1] {
    width: 16px;
    height: 16px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.android-app-name[b-c48rhuvkg1] {
    font: 500 .6rem/1 var(--cc-font-sans);
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .08em;
    flex: 1;
}

.android-notif-time[b-c48rhuvkg1] {
    font: 400 .58rem/1 var(--cc-font-mono);
    color: rgba(255,255,255,.3);
}

.android-notif-title[b-c48rhuvkg1] {
    font: 700 .75rem/1.3 var(--cc-font-sans);
    color: #fff;
    margin-bottom: 2px;
}

.android-notif-body[b-c48rhuvkg1] {
    font: 400 .7rem/1.4 var(--cc-font-sans);
    color: rgba(255,255,255,.65);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.android-notif-image-placeholder[b-c48rhuvkg1] {
    margin-top: 8px;
    height: 50px;
    background: rgba(255,255,255,.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    color: rgba(255,255,255,.3);
}

.android-notif-actions[b-c48rhuvkg1] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 7px;
}

.android-action-btn[b-c48rhuvkg1] {
    font: 600 .62rem/1 var(--cc-font-sans);
    color: var(--cc-accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 3px 4px;
}

/* ── Character Guide ────────────────────────────────────────── */
.preview-char-guide[b-c48rhuvkg1] {
    display: flex;
    align-items: center;
    gap: 16px;
    font: 500 .72rem/1 var(--cc-font-mono);
    padding: 10px 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    flex-wrap: wrap;
}

.char-ok[b-c48rhuvkg1]   { color: rgba(255,255,255,.4); }
.char-warn[b-c48rhuvkg1] { color: var(--cc-warning); }
.char-over[b-c48rhuvkg1] { color: var(--cc-danger); font-weight: 700; }
/* /Shared/Components/Hub/TeamChat.razor.rz.scp.css */
/* 🖼️ Attachments (Images & Files) */
.team-msg-image[b-qwzkadk651] {
    max-width: 300px;
    max-height: 250px;
    border-radius: 8px;
    margin-top: 6px;
    cursor: zoom-in;
    border: 1px solid var(--border-2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.team-msg-image:hover[b-qwzkadk651] {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(255,255,255,0.1);
}

.team-msg-file[b-qwzkadk651] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-2);
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 6px;
    width: fit-content;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-decoration: none;
    color: var(--text-1);
}
.team-msg-file:hover[b-qwzkadk651] {
    background: rgba(217, 79, 255, 0.1);
    border-color: var(--magenta);
}

.team-audio-expired[b-qwzkadk651] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: min(360px, 100%);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-2);
}

.team-audio-expired-icon[b-qwzkadk651] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, 0.42);
    color: var(--text-3);
    font-size: 13px;
    font-weight: 800;
}

.team-audio-expired-title[b-qwzkadk651] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
}

.team-audio-expired-meta[b-qwzkadk651] {
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-4);
}

/* ❤️ Emoji Reactions */
.team-msg-reactions[b-qwzkadk651] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.team-reaction-pill[b-qwzkadk651] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.team-reaction-pill:hover[b-qwzkadk651] {
    background: rgba(255,255,255,0.1);
}
.team-reaction-pill.active[b-qwzkadk651] {
    background: rgba(217, 79, 255, 0.15);
    border-color: var(--magenta);
    color: var(--magenta);
    box-shadow: 0 0 8px rgba(217, 79, 255, 0.2);
}

/* Quick Reaction Bar (Hover) */
.team-msg-inner[b-qwzkadk651] {
    position: relative;
}
.team-msg-actions[b-qwzkadk651] {
    position: absolute;
    right: 0;
    top: -15px;
    display: flex;
    gap: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);
    transition: all 0.2s ease;
    z-index: 10;
}
.team-msg:hover .team-msg-actions[b-qwzkadk651] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.msg-action-btn[b-qwzkadk651] {
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.2s;
    font-size: 14px;
}
.msg-action-btn:hover[b-qwzkadk651] {
    background: rgba(255,255,255,0.1);
}
.msg-action-btn.danger:hover[b-qwzkadk651] {
    background: rgba(255, 59, 48, 0.15);
    color: var(--red);
}

/* 💬 Typing Indicator */
.typing-indicator-row[b-qwzkadk651] {
    height: 20px;
    font-size: 11px;
    color: var(--text-3);
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}
.typing-indicator-row.active[b-qwzkadk651] {
    opacity: 1;
}
.typing-dots[b-qwzkadk651] {
    display: flex;
    gap: 3px;
}
.typing-dots span[b-qwzkadk651] {
    width: 4px;
    height: 4px;
    background: var(--magenta);
    border-radius: 50%;
    animation: bounce-b-qwzkadk651 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1)[b-qwzkadk651] { animation-delay: -0.32s; }
.typing-dots span:nth-child(2)[b-qwzkadk651] { animation-delay: -0.16s; }
@keyframes bounce-b-qwzkadk651 {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); box-shadow: 0 0 5px var(--magenta); }
}

/* ✏️ Edit & Delete */
.msg-tombstone[b-qwzkadk651] {
    color: var(--text-4);
    font-style: italic;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.msg-edited-tag[b-qwzkadk651] {
    font-size: 10px;
    color: var(--text-4);
    margin-left: 6px;
}

/* Input Row Additions */
.chat-input-controls[b-qwzkadk651] {
    display: flex;
    gap: 8px;
    align-items: center;
}
.chat-tool-btn[b-qwzkadk651] {
    background: none;
    border: none;
    color: var(--text-3);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.chat-tool-btn:hover[b-qwzkadk651] {
    color: var(--text-1);
    background: rgba(255,255,255,0.05);
}
.chat-tool-btn.recording[b-qwzkadk651] {
    color: var(--red);
    animation: pulse-record-b-qwzkadk651 1.5s infinite;
}
@keyframes pulse-record-b-qwzkadk651 {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* Lightbox */
.lightbox-overlay[b-qwzkadk651] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.lightbox-img[b-qwzkadk651] {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

/* 🎤 Voice-Recording Inline-Row (Live-Waveform + Pause/Cancel/Stop) */
.chat-rec-row[b-qwzkadk651] {
    padding: 10px 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--bg-panel);
}

.rec-waveform[b-qwzkadk651] {
    flex: 1;
    height: 40px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    padding: 2px 12px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(217, 79, 255, 0.2);
    box-shadow: inset 0 0 10px rgba(217, 79, 255, 0.05);
}

.rec-indicator[b-qwzkadk651] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
}
.rec-indicator.active[b-qwzkadk651] {
    animation: rec-pulse-b-qwzkadk651 1.4s ease-in-out infinite;
}
.rec-indicator.paused[b-qwzkadk651] {
    background: var(--text-3);
}

@keyframes rec-pulse-b-qwzkadk651 {
    0%, 100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 0 0 rgba(255, 74, 104, 0.6); }
    50%      { opacity: 0.6; transform: scale(1.2); box-shadow: 0 0 0 8px rgba(255, 74, 104, 0); }
}

.rec-time[b-qwzkadk651] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    flex-shrink: 0;
}

.rec-btn[b-qwzkadk651] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-2);
    color: var(--text-1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.rec-btn:hover[b-qwzkadk651] {
    background: rgba(255, 255, 255, 0.14);
    transform: scale(1.05);
}
.rec-cancel:hover[b-qwzkadk651] {
    background: rgba(255, 74, 104, 0.18);
    border-color: var(--red);
    color: var(--red);
}
.rec-stop[b-qwzkadk651] {
    background: var(--magenta);
    border-color: var(--magenta);
    color: white;
    box-shadow: 0 0 12px rgba(217, 79, 255, 0.4);
}
.rec-stop:hover[b-qwzkadk651] {
    background: var(--magenta);
    transform: scale(1.08);
}

.rec-send-pill[b-qwzkadk651] {
    background: rgba(217, 79, 255, 0.15);
    border: 1px solid var(--magenta);
    color: var(--magenta);
    padding: 0 16px;
    box-shadow: 0 0 10px rgba(217, 79, 255, 0.2);
    font-weight: 600;
    min-width: 80px;
}
/* /Shared/Components/OpDataGridShell.razor.rz.scp.css */
/* OpDataGridShell — scoped styles */

/* ── Shell: feste 3-Reihen-Struktur ────────────────────────────────────── */
/*   auto = Header + FilterBar passen sich Inhalt an                        */
/*   1fr  = ScrollArea füllt verbleibenden Platz aus                        */
.op-datagrid-shell[b-z4vw03moe7] {
    display: flex;
    flex-direction: column;
    min-height: 0;      /* op-safe-y: erlaubt Schrumpfen in Flex-Parent */
    flex: 1 1 auto;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.op-datagrid__header[b-z4vw03moe7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-3);
    padding: 0 0 var(--cc-s-3);
    flex-shrink: 0;
}

/* ── FilterBar ───────────────────────────────────────────────────────────── */
.op-datagrid__filterbar[b-z4vw03moe7] {
    flex-shrink: 0;
}

/* ── BulkActionBar ───────────────────────────────────────────────────────── */
.op-datagrid__bulkbar[b-z4vw03moe7] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    flex-wrap: wrap;
    padding: var(--cc-s-2) var(--cc-s-3);
    background: color-mix(in oklch, var(--cc-accent) 8%, var(--cc-bg-card));
    border: 1px solid color-mix(in oklch, var(--cc-accent) 22%, transparent);
    border-radius: var(--cc-r-md);
    flex-shrink: 0;
    animation: slide-up var(--cc-dur-fast) var(--cc-ease) both;
}

/* ── ScrollArea ──────────────────────────────────────────────────────────── */
.op-datagrid__scroll[b-z4vw03moe7] {
    flex: 1 1 auto;
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-lg);
    /* op-scroll-y aus tokens.css übernimmt overflow-y:auto + min-height:0 */
}

/* Sticky Tabellen-Header innerhalb der ScrollArea */
.op-datagrid__scroll table th[b-z4vw03moe7] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cc-bg-elev);
}
/* /Shared/Components/OpDisclosure.razor.rz.scp.css */
/* OpDisclosure — scoped styles */

.op-disclosure-wrap[b-ypyeg265tp] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Trigger button ─────────────────────────────────────────────────────── */
.op-disclosure__trigger[b-ypyeg265tp] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    width: 100%;
    background: transparent;
    border: none;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
    font-family: var(--cc-font-sans);
    font-weight: 500;
    padding: var(--cc-s-2) 0;
    cursor: pointer;
    text-align: left;
    transition: color var(--cc-dur-fast) var(--cc-ease);
    border-radius: var(--cc-r-sm);
}

.op-disclosure__trigger:hover[b-ypyeg265tp] {
    color: var(--cc-fg);
}

.op-disclosure__trigger:focus-visible[b-ypyeg265tp] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}

.op-disclosure__icon[b-ypyeg265tp] {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.op-disclosure__label[b-ypyeg265tp] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Chevron animation ──────────────────────────────────────────────────── */
.op-disclosure__chevron[b-ypyeg265tp] {
    flex-shrink: 0;
    color: var(--cc-fg-dim);
    transition: transform var(--cc-dur-fast) var(--cc-ease);
}

.op-disclosure__chevron.open[b-ypyeg265tp] {
    transform: rotate(180deg);
}

/* ── Content panel ──────────────────────────────────────────────────────── */
/* CSS-grid trick: height 0 → auto ohne JS-Höhenberechnung */
.op-disclosure__content[b-ypyeg265tp] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--cc-dur-med) var(--cc-ease);
    overflow: hidden;
}

.op-disclosure__inner[b-ypyeg265tp] {
    overflow: hidden;
    min-height: 0;
    padding-top: var(--cc-s-2);
}

.op-disclosure__content.open[b-ypyeg265tp] {
    grid-template-rows: 1fr;
}
/* /Shared/Components/OpSideSheet.razor.rz.scp.css */
/* OpSideSheet — scoped styles */

/* ── Overlay backdrop ───────────────────────────────────────────────────── */
.op-sidesheet-overlay[b-vry6yc1l1n] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: var(--cc-z-overlay);
    animation: fade-in var(--cc-dur-fast) var(--cc-ease) both;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
.op-sidesheet[b-vry6yc1l1n] {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--op-sidesheet-width, min(460px, 92vw));
    height: 100dvh;          /* dvh: mobile-browser-safe */
    background: var(--cc-bg-card);
    border-left: 1px solid var(--cc-border);
    box-shadow: var(--cc-shadow-lg);
    z-index: var(--cc-z-sidesheet);

    display: flex;
    flex-direction: column;

    /* Slide in from right */
    transform: translateX(100%);
    transition: transform var(--cc-dur-med) var(--cc-ease);
    will-change: transform;

    /* Prevent the panel itself from scrolling */
    overflow: hidden;
}

.op-sidesheet.open[b-vry6yc1l1n] {
    transform: translateX(0);
}

/* ── Sticky Header ──────────────────────────────────────────────────────── */
.op-sidesheet__header[b-vry6yc1l1n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-s-3);
    padding: var(--cc-s-4) var(--cc-s-5);
    border-bottom: 1px solid var(--cc-border-soft);
    flex-shrink: 0;          /* niemals mit Body zusammenschrumpfen */
    background: var(--cc-bg-card);
}

.op-sidesheet__title[b-vry6yc1l1n] {
    font-size: var(--cc-fs-md);
    font-weight: 600;
    color: var(--cc-fg);
    margin: 0;
    font-family: var(--cc-font-sans);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-sidesheet__close[b-vry6yc1l1n] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cc-fg-dim);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: var(--cc-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color var(--cc-dur-fast), background var(--cc-dur-fast),
                border-color var(--cc-dur-fast);
}

.op-sidesheet__close:hover[b-vry6yc1l1n] {
    color: var(--cc-fg);
    background: var(--cc-bg-hover);
    border-color: var(--cc-border);
}

.op-sidesheet__close:focus-visible[b-vry6yc1l1n] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: 2px;
}

/* ── Scrollbarer Body ───────────────────────────────────────────────────── */
.op-sidesheet__body[b-vry6yc1l1n] {
    flex: 1 1 auto;
    padding: var(--cc-s-5);
    /* op-scroll-y aus tokens.css: min-height:0; overflow-y:auto */
}

/* ── Sticky Footer ──────────────────────────────────────────────────────── */
.op-sidesheet__footer[b-vry6yc1l1n] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cc-s-3);
    flex-wrap: wrap;
    padding: var(--cc-s-4) var(--cc-s-5);
    border-top: 1px solid var(--cc-border-soft);
    background: var(--cc-bg-card);
}
/* /Shared/Components/OpSkeleton.razor.rz.scp.css */
/* OpSkeleton — scoped styles
   Die Shimmer-Keyframes (.cc-skeleton, @keyframes cc-shimmer) leben in
   cc-animations.css und sind global verfügbar. Hier nur Shape-Overrides
   und Wrapper-Layout. */

/* ── Stack (mehrere Zeilen) ─────────────────────────────────────────────── */
.op-skeleton-stack[b-h8iaslbl8b] {
    display: flex;
    flex-direction: column;
}

/* ── Shape: Circle ──────────────────────────────────────────────────────── */
.op-skeleton--circle[b-h8iaslbl8b] {
    border-radius: 50% !important;
    flex-shrink: 0;
}

/* ── Shape: Block ───────────────────────────────────────────────────────── */
.op-skeleton--block[b-h8iaslbl8b] {
    border-radius: var(--cc-r-md) !important;
}
/* /Shared/Components/OpStatePanel.razor.rz.scp.css */
/* OpStatePanel — scoped styles */

.op-state-panel[b-p6iuses6pv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cc-s-3);
    padding: var(--cc-s-12) var(--cc-s-8);
    text-align: center;
    /* grid-column: 1 / -1 when used inside a grid parent */
    grid-column: 1 / -1;
}

/* ── Visual area (icon / spinner) ───────────────────────────────────────── */
.op-state-panel__visual[b-p6iuses6pv] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Per-kind icon color ────────────────────────────────────────────────── */
.op-state-panel--error      .op-state-panel__visual[b-p6iuses6pv] { color: var(--cc-danger);  }
.op-state-panel--permission .op-state-panel__visual[b-p6iuses6pv] { color: var(--cc-fg-dim);  }
.op-state-panel--partial    .op-state-panel__visual[b-p6iuses6pv] { color: var(--cc-warning); }
.op-state-panel--empty      .op-state-panel__visual[b-p6iuses6pv] { color: var(--cc-fg-dim);  }

.op-state-panel__icon[b-p6iuses6pv] {
    font-size: 32px;
    line-height: 1;
    opacity: .75;
    user-select: none;
}

/* ── Title ──────────────────────────────────────────────────────────────── */
.op-state-panel__title[b-p6iuses6pv] {
    font-size: var(--cc-fs-base);
    font-weight: 500;
    color: var(--cc-fg-muted);
    font-family: var(--cc-font-sans);
    margin: 0;
}

.op-state-panel--error .op-state-panel__title[b-p6iuses6pv] {
    color: var(--cc-danger);
}

.op-state-panel--partial .op-state-panel__title[b-p6iuses6pv] {
    color: var(--cc-warning);
}

/* ── Description ────────────────────────────────────────────────────────── */
.op-state-panel__desc[b-p6iuses6pv] {
    font-size: var(--cc-fs-sm);
    color: var(--cc-fg-dim);
    font-family: var(--cc-font-sans);
    margin: 0;
    max-width: 52ch;
}

/* ── Action buttons ─────────────────────────────────────────────────────── */
.op-state-panel__actions[b-p6iuses6pv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-2);
    justify-content: center;
    margin-top: var(--cc-s-1);
}

/* ── Technical details disclosure ───────────────────────────────────────── */
.op-state-panel__tech[b-p6iuses6pv] {
    margin-top: var(--cc-s-2);
    max-width: 56ch;
    text-align: left;
}

.op-state-panel__tech-pre[b-p6iuses6pv] {
    font-family: var(--cc-font-mono);
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
    background: var(--cc-bg-input);
    border: 1px solid var(--cc-border-soft);
    border-radius: var(--cc-r-md);
    padding: var(--cc-s-3);
    margin: var(--cc-s-2) 0 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
/* /Shared/Components/Stories/StoryMediaPicker.razor.rz.scp.css */
.story-media-picker-backdrop[b-0x8pltdxrb] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, .55);
    display: grid;
    place-items: center;
    padding: var(--cc-s-4);
}

.story-media-picker[b-0x8pltdxrb] {
    width: min(720px, 100%);
    max-height: 80vh;
    overflow: auto;
    border-radius: var(--cc-r-lg);
    border: 1px solid var(--cc-border);
    background: var(--cc-bg-card);
    padding: var(--cc-s-4);
}

.story-media-picker-head[b-0x8pltdxrb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--cc-s-3);
}

.story-media-picker-head h3[b-0x8pltdxrb] {
    margin: 0;
    color: var(--cc-fg);
}

.story-media-picker-hint[b-0x8pltdxrb] {
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
}

.story-media-picker-grid[b-0x8pltdxrb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--cc-s-2);
}

.story-media-picker-item[b-0x8pltdxrb] {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    padding: 0;
    overflow: hidden;
    background: var(--cc-bg);
    cursor: pointer;
    text-align: left;
}

.story-media-picker-item img[b-0x8pltdxrb] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.story-media-picker-name[b-0x8pltdxrb] {
    display: block;
    padding: var(--cc-s-1) var(--cc-s-2);
    font-size: 10px;
    color: var(--cc-fg-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Shared/Components/Stories/StoryPhonePreview.razor.rz.scp.css */
.story-phone-preview[b-au4hqzbu8b] {
    display: flex;
    justify-content: center;
    padding: var(--cc-s-2) 0;
}

.story-phone-frame[b-au4hqzbu8b] {
    width: min(280px, 100%);
    aspect-ratio: 9 / 19.5;
    border-radius: 32px;
    border: 3px solid color-mix(in srgb, var(--cc-fg) 18%, transparent);
    background: var(--cc-bg);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.story-phone-notch[b-au4hqzbu8b] {
    height: 22px;
    margin: 8px auto 0;
    width: 96px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cc-fg) 12%, transparent);
    flex-shrink: 0;
}

.story-phone-screen[b-au4hqzbu8b] {
    flex: 1;
    margin: var(--cc-s-2);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.story-phone-media[b-au4hqzbu8b] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-phone-media--video[b-au4hqzbu8b] {
    display: grid;
    place-items: center;
}

.story-phone-play[b-au4hqzbu8b] {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.story-phone-text[b-au4hqzbu8b] {
    position: relative;
    z-index: 1;
    margin: var(--cc-s-4);
    font-size: var(--cc-fs-md);
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.story-phone-cta[b-au4hqzbu8b] {
    position: relative;
    z-index: 1;
    align-self: center;
    margin-bottom: var(--cc-s-4);
    padding: .5rem 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cc-accent) 85%, #fff 15%);
    color: var(--cc-bg);
    font-size: var(--cc-fs-xs);
    font-weight: 700;
}

.story-phone-progress[b-au4hqzbu8b] {
    display: flex;
    gap: 4px;
    padding: 0 var(--cc-s-3) var(--cc-s-2);
}

.story-phone-progress span[b-au4hqzbu8b] {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cc-fg) 20%, transparent);
}

.story-phone-progress span.active[b-au4hqzbu8b] {
    background: var(--cc-accent);
}

.story-phone-meta[b-au4hqzbu8b] {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--cc-s-3) var(--cc-s-3);
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
}

.story-phone-empty[b-au4hqzbu8b] {
    flex: 1;
    display: grid;
    place-items: center;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
}
/* /Shared/Components/Stories/StorySlideEditor.razor.rz.scp.css */
.story-slide-editor[b-eerep2jfo3] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
}

.story-editor-empty[b-eerep2jfo3] {
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
}

.story-editor-row[b-eerep2jfo3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cc-s-3);
}

.story-duration-readonly output[b-eerep2jfo3] {
    display: block;
    padding: var(--cc-s-2);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    background: color-mix(in srgb, var(--cc-fg) 6%, transparent);
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-sm);
}

.story-slide-editor label[b-eerep2jfo3] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-muted);
}

.story-slide-editor input[b-eerep2jfo3],
.story-slide-editor select[b-eerep2jfo3],
.story-slide-editor textarea[b-eerep2jfo3] {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-md);
    background: var(--cc-bg);
    color: var(--cc-fg);
    padding: var(--cc-s-2);
}

.story-editor-media[b-eerep2jfo3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cc-s-2);
}

.story-editor-media-preview[b-eerep2jfo3] {
    width: 96px;
    height: 128px;
    object-fit: cover;
    border-radius: var(--cc-r-md);
    border: 1px solid var(--cc-border);
}

.story-editor-cta[b-eerep2jfo3] {
    display: grid;
    gap: var(--cc-s-3);
    padding-top: var(--cc-s-2);
    border-top: 1px solid var(--cc-border);
}

@media (max-width: 900px) {
    .story-editor-row[b-eerep2jfo3] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/Components/Stories/StorySlideRail.razor.rz.scp.css */
.story-slide-rail[b-w8mvdnytsl] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-3);
    margin-bottom: var(--cc-s-4);
}

.story-slide-rail-track[b-w8mvdnytsl] {
    display: flex;
    gap: var(--cc-s-2);
    overflow-x: auto;
    padding-bottom: var(--cc-s-1);
    scroll-snap-type: x proximity;
}

.story-slide-thumb[b-w8mvdnytsl] {
    flex: 0 0 72px;
    width: 72px;
    height: 128px;
    border-radius: var(--cc-r-md);
    border: 2px solid var(--cc-border);
    background: var(--cc-bg);
    padding: 0;
    overflow: hidden;
    position: relative;
    cursor: grab;
    scroll-snap-align: start;
    transition: border-color var(--cc-dur-fast) var(--cc-ease), box-shadow var(--cc-dur-fast) var(--cc-ease);
}

.story-slide-thumb.active[b-w8mvdnytsl] {
    border-color: var(--cc-border-focus);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-accent) 25%, transparent);
}

.story-slide-thumb img[b-w8mvdnytsl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-slide-thumb-index[b-w8mvdnytsl] {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
    font-size: 10px;
    font-weight: 700;
    background: color-mix(in srgb, var(--cc-bg) 75%, transparent);
    color: var(--cc-fg);
    border-radius: 999px;
    padding: 2px 6px;
}

.story-slide-thumb-placeholder[b-w8mvdnytsl] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.4rem;
    color: var(--cc-fg-muted);
}

.story-slide-add-menu[b-w8mvdnytsl] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-1);
    flex-shrink: 0;
}

.story-slide-add[b-w8mvdnytsl] {
    border: 1px dashed var(--cc-border);
    border-radius: var(--cc-r-md);
    background: transparent;
    color: var(--cc-fg-muted);
    font-size: var(--cc-fs-xs);
    padding: var(--cc-s-2);
    cursor: pointer;
    min-width: 72px;
}

.story-slide-add:hover[b-w8mvdnytsl] {
    border-color: var(--cc-border-focus);
    color: var(--cc-fg);
}

.story-slide-rail-actions[b-w8mvdnytsl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-s-2);
}
/* /Shared/Components/TweakSlider.razor.rz.scp.css */
.twk-row[b-t00eketrtc] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.twk-row-h[b-t00eketrtc] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.twk-lbl[b-t00eketrtc] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: rgba(41, 38, 27, .72);
}

.twk-lbl > span:first-child[b-t00eketrtc] {
    font-weight: 500;
}

.twk-val[b-t00eketrtc] {
    color: rgba(41, 38, 27, .5);
    font-variant-numeric: tabular-nums;
}

.twk-sect[b-t00eketrtc] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(41, 38, 27, .45);
    padding: 10px 0 0;
}

.twk-sect:first-child[b-t00eketrtc] {
    padding-top: 0;
}

.twk-slider[b-t00eketrtc] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    margin: 6px 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
    outline: none;
}

.twk-slider[b-t00eketrtc]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: .5px solid rgba(0, 0, 0, .12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: default;
}

.twk-slider[b-t00eketrtc]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: .5px solid rgba(0, 0, 0, .12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: default;
}

.twk-swatch[b-t00eketrtc] {
    appearance: none;
    -webkit-appearance: none;
    width: 56px;
    height: 22px;
    border: .5px solid rgba(0, 0, 0, .1);
    border-radius: 6px;
    padding: 0;
    cursor: default;
    background: transparent;
    flex-shrink: 0;
}

.twk-swatch[b-t00eketrtc]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.twk-swatch[b-t00eketrtc]::-webkit-color-swatch {
    border: 0;
    border-radius: 5.5px;
}

.twk-swatch[b-t00eketrtc]::-moz-color-swatch {
    border: 0;
    border-radius: 5.5px;
}
/* /Shared/Components/TweaksPanel.razor.rz.scp.css */
.twk-panel[b-nonpgpa1wn] {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147483646;
    width: 280px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: rgba(250, 249, 247, .78);
    color: #29261b;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border: .5px solid rgba(255, 255, 255, .6);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 40px rgba(0, 0, 0, .18);
    font: 11.5px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
    overflow: hidden;
}

.twk-hd[b-nonpgpa1wn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px 10px 14px;
    cursor: move;
    user-select: none;
}

.twk-hd b[b-nonpgpa1wn] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}

.twk-x[b-nonpgpa1wn] {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(41, 38, 27, .55);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    cursor: default;
    font-size: 13px;
    line-height: 1;
}

.twk-x:hover[b-nonpgpa1wn] {
    background: rgba(0, 0, 0, .06);
    color: #29261b;
}

.twk-body[b-nonpgpa1wn] {
    padding: 2px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .15) transparent;
}

.twk-body[b-nonpgpa1wn]::-webkit-scrollbar {
    width: 8px;
}

.twk-body[b-nonpgpa1wn]::-webkit-scrollbar-track {
    background: transparent;
    margin: 2px;
}

.twk-body[b-nonpgpa1wn]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.twk-row[b-nonpgpa1wn] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.twk-row-h[b-nonpgpa1wn] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.twk-lbl[b-nonpgpa1wn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: rgba(41, 38, 27, .72);
}

.twk-lbl > span:first-child[b-nonpgpa1wn] {
    font-weight: 500;
}

.twk-val[b-nonpgpa1wn] {
    color: rgba(41, 38, 27, .5);
    font-variant-numeric: tabular-nums;
}

.twk-sect[b-nonpgpa1wn] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(41, 38, 27, .45);
    padding: 10px 0 0;
}

.twk-sect:first-child[b-nonpgpa1wn] {
    padding-top: 0;
}

.twk-slider[b-nonpgpa1wn] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    margin: 6px 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
    outline: none;
}

.twk-slider[b-nonpgpa1wn]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: .5px solid rgba(0, 0, 0, .12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: default;
}

.twk-slider[b-nonpgpa1wn]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: .5px solid rgba(0, 0, 0, .12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: default;
}

.twk-swatch[b-nonpgpa1wn] {
    appearance: none;
    -webkit-appearance: none;
    width: 56px;
    height: 22px;
    border: .5px solid rgba(0, 0, 0, .1);
    border-radius: 6px;
    padding: 0;
    cursor: default;
    background: transparent;
    flex-shrink: 0;
}

.twk-swatch[b-nonpgpa1wn]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.twk-swatch[b-nonpgpa1wn]::-webkit-color-swatch {
    border: 0;
    border-radius: 5.5px;
}

.twk-swatch[b-nonpgpa1wn]::-moz-color-swatch {
    border: 0;
    border-radius: 5.5px;
}
/* /Shared/Dialogs/KycSocialApproveDialog.razor.rz.scp.css */
.dialog-wide[b-hzpktsoww2] { max-width: 560px; }
.input-with-action[b-hzpktsoww2] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.input-with-action .input[b-hzpktsoww2] { flex: 1 1 220px; }
.social-kyc-preview[b-hzpktsoww2] { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.social-kyc-preview-btn[b-hzpktsoww2] { align-self: flex-start; opacity: 0.95; }
.checkbox-row[b-hzpktsoww2] { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
/* /Shared/MainLayout.razor.rz.scp.css */
/* MainLayout */
.app-shell[b-0mhlsdf902] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    background: transparent;
    overflow: hidden;
}

.main-content[b-0mhlsdf902] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: calc(var(--cc-s-8) + env(safe-area-inset-top, 0px)) var(--cc-s-8) var(--cc-s-8);
    display: flex;
    flex-direction: column;
    gap: var(--cc-s-6);
    position: relative;
    scroll-padding-top: calc(var(--cc-s-8) + env(safe-area-inset-top, 0px));
}

.main-content[b-0mhlsdf902]::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 64px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--cc-warm-orange-rgb, 255,140,66), .90),
        rgba(var(--cc-warm-red-rgb,   199, 62, 64), .75),
        rgba(var(--cc-warm-orange-rgb, 255,140,66), .85),
        transparent);
    background-size: 240% 100%;
    box-shadow: 0 0 22px rgba(255, 140, 66, .45);
    pointer-events: none;
    z-index: 1;
    animation: cc-led-spectrum 8s linear infinite;
}

.main-content[b-0mhlsdf902]::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        transparent,
        rgba(255, 140, 66, .55),
        rgba(199,  62, 64, .45),
        rgba(255, 215,   0, .35),
        transparent);
    background-size: 100% 260%;
    box-shadow: 0 0 16px rgba(255, 140, 66, .22);
    pointer-events: none;
    z-index: 1;
    animation: cc-led-vertical-b-0mhlsdf902 12s linear infinite;
}

.main-content > *[b-0mhlsdf902] {
    position: relative;
    z-index: 2;
    min-width: 0;
}

@keyframes cc-led-vertical-b-0mhlsdf902 {
    0%   { background-position: 50% 0%; }
    100% { background-position: 50% 260%; }
}

/* ── Hamburger button (hidden on desktop) ─────────────────────────────────── */
.hamburger-btn[b-0mhlsdf902] {
    display: none;
}

/* ── Mobile overlay backdrop (hidden on desktop) ─────────────────────────── */
.mobile-overlay[b-0mhlsdf902] {
    display: none;
}

/* ══ Mobile layout ≤ 767px ══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .hamburger-btn[b-0mhlsdf902] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 210;
        width: 40px;
        height: 40px;
        border-radius: var(--cc-r-md);
        background: var(--cc-bg-card);
        border: 1px solid var(--cc-border);
        color: var(--cc-fg);
        cursor: pointer;
        box-shadow: var(--cc-shadow-md);
        transition: background .15s ease, color .15s ease;
    }

    .hamburger-btn:hover[b-0mhlsdf902] {
        background: var(--cc-bg-hover);
        color: var(--cc-accent);
    }

    /* Backdrop when sidebar is open */
    .app-shell.nav-open .mobile-overlay[b-0mhlsdf902] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 95;
        background: rgba(0, 0, 0, .65);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    /* Push content to fill full width (no sidebar column) */
    .app-shell[b-0mhlsdf902] {
        overflow: hidden;
    }

    .main-content[b-0mhlsdf902] {
        padding: 60px 12px 20px;
        gap: var(--cc-s-5);
    }

    /* LED top stripe starts at left edge on mobile */
    .main-content[b-0mhlsdf902]::before {
        left: 0;
    }
}
/* /Shared/Sidebar.razor.rz.scp.css */
/* ── Sidebar Shell ─────────────────────────────────────────────────────────── */

.sidebar-dock[b-xpj7spwy5v] {
    --sidebar-collapsed: 96px;
    --sidebar-expanded: 300px;
    --sidebar-panel: 96px;
    --sidebar-panel-hover: 244px;
    --sidebar-icon-size: 44px;
    --sidebar-icon-slot: 72px;
    --sidebar-dur: 240ms;
    --sidebar-dur-fast: 140ms;
    --sidebar-ease: cubic-bezier(.22, .68, .0, 1.04);
    /* Reserve space above Windows taskbar / bottom edge (~3cm @ 96dpi + safe area) */
    --sidebar-bottom-lift: calc(env(safe-area-inset-bottom, 0px) + 96px);
    position: relative;
    width: var(--sidebar-collapsed);
    flex: 0 0 var(--sidebar-collapsed);
    height: 100dvh;
    max-height: 100dvh;
    z-index: 120;
    contain: layout style;
    isolation: isolate;
    overflow: visible;
    transition:
        width var(--sidebar-dur) var(--sidebar-ease),
        flex-basis var(--sidebar-dur) var(--sidebar-ease),
        margin-right var(--sidebar-dur) var(--sidebar-ease);
    will-change: width, flex-basis;
}

.sidebar-dock.expanded[b-xpj7spwy5v] {
    width: var(--sidebar-expanded);
    flex-basis: var(--sidebar-expanded);
}

/* Tab rail: reserve the compact width by default. When the component state
   adds .context-open or keyboard focus enters the rail, the dock
   itself grows to the flyout width, then a negative margin keeps the main
   content visually in place while preserving a real clickable hitbox. */
.sidebar-dock.has-panel[b-xpj7spwy5v] {
    width: calc(var(--sidebar-collapsed) + var(--sidebar-panel));
    flex-basis: calc(var(--sidebar-collapsed) + var(--sidebar-panel));
}

.sidebar-dock.has-panel.expanded[b-xpj7spwy5v] {
    width: calc(var(--sidebar-expanded) + var(--sidebar-panel));
    flex-basis: calc(var(--sidebar-expanded) + var(--sidebar-panel));
}

.sidebar-dock.has-panel.context-open[b-xpj7spwy5v] {
    width: calc(var(--sidebar-collapsed) + var(--sidebar-panel-hover));
    flex-basis: calc(var(--sidebar-collapsed) + var(--sidebar-panel-hover));
    margin-right: calc(var(--sidebar-panel) - var(--sidebar-panel-hover));
}

.sidebar-dock.has-panel.expanded.context-open[b-xpj7spwy5v] {
    width: calc(var(--sidebar-expanded) + var(--sidebar-panel-hover));
    flex-basis: calc(var(--sidebar-expanded) + var(--sidebar-panel-hover));
    margin-right: calc(var(--sidebar-panel) - var(--sidebar-panel-hover));
}

.sidebar[b-xpj7spwy5v] {
    width: var(--sidebar-collapsed);
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: var(--sidebar-bottom-lift);
    box-sizing: border-box;
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--cc-accent) 7%, transparent), transparent 190px),
        var(--cc-bg-glass, var(--cc-bg-elev));
    border-right: 1px solid var(--cc-border-luxe, var(--cc-border));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: width var(--sidebar-dur) var(--sidebar-ease);
    z-index: 100;
    flex-shrink: 0;
    box-shadow: 10px 0 30px rgba(0,0,0,.16);
    backdrop-filter: blur(18px);
    transform: translateZ(0);
    will-change: width;
}

.sidebar.expanded[b-xpj7spwy5v] { width: var(--sidebar-expanded); }

/* ── Vertical Tab Rail (secondary panel) ─────────────────────────────────── */
/* Sits right of the main icon rail. Collapsed = 100px, hover = 180px.       */
/* Labels fade in on hover; icons always visible.                             */

/* Secondary panel position: follows collapsed or expanded main sidebar */
.sidebar-dock.expanded .sidebar-context[b-xpj7spwy5v] {
    left: var(--sidebar-expanded);
}

.sidebar-context[b-xpj7spwy5v] {
    position: absolute;
    left: var(--sidebar-collapsed);
    top: 0;
    width: var(--sidebar-panel);           /* 100px collapsed */
    height: 100dvh;
    max-height: 100dvh;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--cc-accent) 25%, transparent) transparent;
    border-right: 1px solid var(--cc-border-luxe, var(--cc-border));
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--cc-accent) 6%, transparent), transparent 180px),
        var(--cc-bg-glass, var(--cc-bg-card));
    box-shadow: 18px 0 40px rgba(0,0,0,.22), 1px 0 0 rgba(255,255,255,.04) inset;
    backdrop-filter: blur(20px);
    animation: context-panel-in-b-xpj7spwy5v var(--sidebar-dur) var(--sidebar-ease) both;
    transform: translateZ(0);
    will-change: width;
    z-index: 110;
    pointer-events: auto;
    transition: width var(--sidebar-dur) var(--sidebar-ease);
}

.sidebar-dock.has-panel.context-open .sidebar-context[b-xpj7spwy5v] {
    width: var(--sidebar-panel-hover);
    overflow-y: auto;
}

.sidebar-context[b-xpj7spwy5v]::-webkit-scrollbar { width: 4px; }
.sidebar-context[b-xpj7spwy5v]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in oklch, var(--cc-accent) 28%, transparent);
}
.sidebar-context[b-xpj7spwy5v]::-webkit-scrollbar-track { background: transparent; }

@keyframes context-panel-in-b-xpj7spwy5v {
    from { opacity: 0; transform: translate3d(-8px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── Tab Rail: compact header at top of rail ─────────────────────────────── */
.context-rail-header[b-xpj7spwy5v] {
    height: 100px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 6px;
    border-bottom: 1px solid color-mix(in oklch, var(--cc-border) 60%, transparent);
    overflow: hidden;
    margin-bottom: 4px;
}

.context-rail-kicker[b-xpj7spwy5v] {
    display: block;
    font: 700 9px/1 var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--cc-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.context-rail-title[b-xpj7spwy5v] {
    display: block;
    font: 600 var(--cc-fs-xs)/1.2 var(--cc-font-sans);
    color: var(--cc-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--sidebar-dur) var(--sidebar-ease) 30ms,
        transform var(--sidebar-dur) var(--sidebar-ease) 30ms;
}

.sidebar-dock.has-panel.context-open .context-rail-title[b-xpj7spwy5v] {
    opacity: 1;
    transform: none;
}

/* ── Tab Rail: group section ─────────────────────────────────────────────── */
.context-group[b-xpj7spwy5v] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Group title: shown as a subtle accent line in collapsed mode,
   shows label text while the context rail is open */
.context-group-title[b-xpj7spwy5v] {
    height: 20px;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    color: var(--cc-accent);
    font: 700 10px/20px var(--cc-font-mono);
    text-transform: uppercase;
    letter-spacing: .09em;
    opacity: 0;
    transition: opacity var(--sidebar-dur) var(--sidebar-ease);
}

.sidebar-dock.has-panel.context-open .context-group-title[b-xpj7spwy5v] {
    opacity: .7;
}

/* Separator between groups */
.context-group + .context-group[b-xpj7spwy5v] {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid color-mix(in oklch, var(--cc-border) 60%, transparent);
}

/* ── Tab Rail: action item ────────────────────────────────────────────────── */
.context-action[b-xpj7spwy5v] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 72px;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: var(--cc-r-md);
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    overflow: hidden;
    transition:
        background var(--sidebar-dur-fast) var(--sidebar-ease),
        border-color var(--sidebar-dur-fast) var(--sidebar-ease),
        box-shadow var(--sidebar-dur-fast) var(--sidebar-ease);
}

.context-action > *[b-xpj7spwy5v] {
    pointer-events: none;
}

.context-action:hover:not(.disabled)[b-xpj7spwy5v],
.context-action:focus-visible:not(.disabled)[b-xpj7spwy5v] {
    border-color: color-mix(in oklch, var(--cc-accent) 40%, var(--cc-border));
    background:
        linear-gradient(90deg, color-mix(in oklch, var(--cc-accent) 14%, transparent), transparent 80%),
        color-mix(in oklch, var(--cc-bg-hover) 80%, transparent);
    box-shadow:
        0 6px 18px rgba(0,0,0,.18),
        inset 0 0 0 1px color-mix(in oklch, var(--cc-accent) 12%, transparent);
    outline: none;
    transform: translateX(4px);
}

.context-action:hover:not(.disabled) .context-action-icon[b-xpj7spwy5v] {
    transform: scale(1.06);
    box-shadow:
        inset 0 0 0 1px color-mix(in oklch, white 12%, transparent),
        0 0 14px color-mix(in oklch, var(--cc-accent) 22%, transparent);
}

.context-action:active:not(.disabled)[b-xpj7spwy5v] {
    transform: scale(.96) translateX(2px);
    transition-duration: 60ms;
    filter: brightness(.85);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
}

.context-action:active:not(.disabled) .context-action-icon[b-xpj7spwy5v] {
    transform: scale(.94);
    filter: brightness(.88);
}

.context-action:focus-visible:not(.disabled)[b-xpj7spwy5v] {
    outline: 2px solid var(--cc-border-focus);
    outline-offset: -2px;
}

.context-action.disabled[b-xpj7spwy5v],
.context-action[aria-disabled="true"][b-xpj7spwy5v] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Tab Rail: icon bubble ────────────────────────────────────────────────── */
.context-action-icon[b-xpj7spwy5v] {
    width: 62px;
    min-width: 62px;
    height: 62px;
    border-radius: var(--cc-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--cc-accent);
    background: linear-gradient(135deg,
        rgba(255, 140, 66, 0.16),
        rgba(199, 62, 64, 0.07));
    box-shadow: inset 0 0 0 1px color-mix(in oklch, white 7%, transparent);
    font: 800 13px/1 var(--cc-font-sans);
    transition:
        transform var(--sidebar-dur-fast) var(--sidebar-ease),
        box-shadow var(--sidebar-dur-fast) var(--sidebar-ease),
        filter var(--sidebar-dur-fast) var(--sidebar-ease);
}

.context-action-icon-img[b-xpj7spwy5v] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
    opacity: .92;
}

/* ── Tab Rail: label (visible only on hover) ─────────────────────────────── */
.context-action-copy[b-xpj7spwy5v] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 10px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--sidebar-dur) var(--sidebar-ease) 30ms,
        transform var(--sidebar-dur) var(--sidebar-ease) 30ms;
    pointer-events: none;
}

.sidebar-dock.has-panel.context-open .context-action-copy[b-xpj7spwy5v] {
    opacity: 1;
    transform: none;
}

.context-action-copy strong[b-xpj7spwy5v] {
    display: block;
    color: var(--cc-fg);
    font: 600 var(--cc-fs-sm)/1.2 var(--cc-font-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description hidden in tab-rail mode */
.context-action-copy small[b-xpj7spwy5v] { display: none; }

/* ── Brand ─────────────────────────────────────────────────────────────────── */

.sidebar-brand[b-xpj7spwy5v] {
    height: 100px;
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: var(--cc-s-3);
    padding: 0 12px;
    border-bottom: 1px solid var(--cc-border-soft);
    overflow: hidden;
}

.brand-icon[b-xpj7spwy5v] {
    width: 72px;
    min-width: 72px;
    height: 72px;
    border-radius: var(--cc-r-xl, 16px);
    background: linear-gradient(135deg, #FF8C42 0%, #C73E40 55%, #8B2020 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cc-font-sans);
    box-shadow:
        0 8px 22px color-mix(in oklch, var(--cc-accent) 32%, transparent),
        0 0 0 1px color-mix(in oklch, var(--cc-accent) 35%, transparent);
}

.brand-icon-img[b-xpj7spwy5v] {
    object-fit: cover;
    background: var(--cc-bg);
    padding: 0;
    transition: transform var(--sidebar-dur-fast) var(--sidebar-ease),
                box-shadow var(--sidebar-dur-fast) var(--sidebar-ease);
}

.sidebar-brand:hover .brand-icon[b-xpj7spwy5v] {
    box-shadow:
        0 8px 22px color-mix(in oklch, var(--cc-accent) 38%, transparent),
        0 0 18px color-mix(in oklch, var(--cc-accent) 22%, transparent),
        0 0 0 1px color-mix(in oklch, var(--cc-accent) 42%, transparent);
}

.sidebar-brand:hover .brand-icon-img[b-xpj7spwy5v] {
    transform: scale(1.06) rotate(-2deg);
}

.brand-name[b-xpj7spwy5v] {
    font-size: var(--cc-fs-sm);
    font-weight: 700;
    color: var(--cc-fg);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity var(--sidebar-dur) var(--sidebar-ease) 35ms,
        transform var(--sidebar-dur) var(--sidebar-ease) 35ms;
}

.sidebar.expanded .brand-name[b-xpj7spwy5v] {
    opacity: 1;
    transform: none;
}

/* ── Nav ───────────────────────────────────────────────────────────────────── */

.sidebar-nav[b-xpj7spwy5v] {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative; /* needed for .cc-nav-indicator absolute positioning */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.sidebar-nav[b-xpj7spwy5v]::-webkit-scrollbar {
    width: 3px;
}
.sidebar-nav[b-xpj7spwy5v]::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav[b-xpj7spwy5v]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border-radius: 2px;
}

.sidebar.expanded .sidebar-nav[b-xpj7spwy5v] {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    gap: 2px;
}

.nav-item[b-xpj7spwy5v] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    height: 78px;
    min-height: 78px;
    border-radius: var(--cc-r-md);
    background: transparent;
    border: none;
    color: var(--cc-fg-muted);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--cc-fs-sm);
    font-family: var(--cc-font-sans);
    white-space: nowrap;
    overflow: hidden;
    transition:
        background var(--sidebar-dur-fast) var(--sidebar-ease),
        color var(--sidebar-dur-fast) var(--sidebar-ease),
        transform var(--sidebar-dur-fast) var(--sidebar-ease),
        box-shadow var(--sidebar-dur-fast) var(--sidebar-ease);
    will-change: transform;
}

.sidebar.expanded .nav-item[b-xpj7spwy5v] {
    min-width: 0;
    height: 60px;
    min-height: 60px;
    padding: 0 14px;
    gap: 12px;
}

.sidebar:not(.expanded) .nav-item[b-xpj7spwy5v] {
    justify-content: center;
    padding: 0;
    gap: 0;
}

.sidebar:not(.expanded) .nav-item .nav-icon[b-xpj7spwy5v] {
    margin: 0;
}

.nav-item:hover:not(.disabled)[b-xpj7spwy5v],
.nav-item:focus-visible:not(.disabled)[b-xpj7spwy5v] {
    background: color-mix(in oklch, var(--cc-bg-hover) 86%, var(--cc-accent));
    color: var(--cc-fg);
    text-decoration: none;
    outline: none;
    box-shadow:
        0 0 14px color-mix(in oklch, var(--cc-accent) 18%, transparent),
        inset 0 0 0 1px color-mix(in oklch, var(--cc-accent) 20%, transparent);
    transform: scale(1.04);
}

.nav-item:active:not(.disabled)[b-xpj7spwy5v] {
    transform: scale(.94);
    transition-duration: 60ms;
    filter: brightness(.85);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
}

/* Explizit: NavLink-Klicks niemals durch Pseudo-Elemente / Children blockieren */
.nav-item:not(.disabled)[b-xpj7spwy5v] {
    pointer-events: auto;
}
.nav-item:not(.disabled) > *[b-xpj7spwy5v] {
    pointer-events: none;
}

.nav-item.active[b-xpj7spwy5v] {
    background: linear-gradient(90deg,
        rgba(255, 140, 66, 0.22),
        rgba(199, 62, 64, 0.08));
    color: #FF8C42;
    box-shadow:
        inset 0 0 0 1px rgba(255, 140, 66, 0.20),
        0 0 16px rgba(255, 140, 66, 0.12);
}

.nav-item.active .nav-icon[b-xpj7spwy5v] {
    filter: drop-shadow(0 0 8px color-mix(in oklch, var(--cc-accent) 50%, transparent));
}

.nav-item.active:hover[b-xpj7spwy5v] {
    color: var(--cc-accent-hover);
    transform: scale(1.04);
}

.nav-item.disabled[b-xpj7spwy5v] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon */
.nav-icon[b-xpj7spwy5v] {
    width: var(--sidebar-icon-slot);
    min-width: var(--sidebar-icon-slot);
    height: var(--sidebar-icon-slot);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-icon svg[b-xpj7spwy5v] {
    display: block;
    width: var(--sidebar-icon-size);
    height: var(--sidebar-icon-size);
    transition:
        transform var(--sidebar-dur-fast) var(--sidebar-ease),
        filter var(--sidebar-dur-fast) var(--sidebar-ease),
        opacity var(--sidebar-dur-fast) var(--sidebar-ease);
}

.nav-item:hover:not(.disabled) .nav-icon svg[b-xpj7spwy5v] {
    transform: scale(1.12);
    filter: drop-shadow(0 0 6px color-mix(in oklch, var(--cc-accent) 40%, transparent));
}

.nav-item:active:not(.disabled) .nav-icon svg[b-xpj7spwy5v] {
    transform: scale(.92);
    opacity: .88;
}

.nav-item.active .nav-icon svg[b-xpj7spwy5v] {
    filter: drop-shadow(0 0 10px color-mix(in oklch, var(--cc-accent) 55%, transparent));
}

.nav-icon-img[b-xpj7spwy5v] {
    width: var(--sidebar-icon-size);
    height: var(--sidebar-icon-size);
    object-fit: contain;
    display: block;
    opacity: .95;
    transition:
        transform var(--sidebar-dur-fast) var(--sidebar-ease),
        filter var(--sidebar-dur-fast) var(--sidebar-ease),
        opacity var(--sidebar-dur-fast) var(--sidebar-ease);
}

.nav-item:hover:not(.disabled) .nav-icon-img[b-xpj7spwy5v] {
    opacity: 1;
    transform: scale(1.12);
    filter: drop-shadow(0 0 6px color-mix(in oklch, var(--cc-accent) 40%, transparent));
}

.nav-item:active:not(.disabled) .nav-icon-img[b-xpj7spwy5v] {
    transform: scale(.92);
    opacity: .88;
}

.nav-item.active .nav-icon-img[b-xpj7spwy5v] {
    opacity: 1;
    filter: drop-shadow(0 0 10px color-mix(in oklch, var(--cc-accent) 55%, transparent));
}

/* Label */
.nav-label[b-xpj7spwy5v] {
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--sidebar-dur) var(--sidebar-ease) 35ms,
        transform var(--sidebar-dur) var(--sidebar-ease) 35ms;
    white-space: nowrap;
    pointer-events: none;
}

.sidebar.expanded .nav-label[b-xpj7spwy5v] {
    opacity: 1;
    transform: none;
}

.nav-badge[b-xpj7spwy5v] {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background: var(--cc-danger, #E5484D);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.sidebar:not(.expanded) .nav-badge[b-xpj7spwy5v] {
    position: absolute;
    top: 6px;
    right: 8px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    color: transparent;
}

/* Active indicator bar */
.nav-active-bar[b-xpj7spwy5v] {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--cc-accent);
    transform-origin: center;
    animation: active-bar-in-b-xpj7spwy5v var(--sidebar-dur-fast) var(--sidebar-ease) both;
}

@keyframes active-bar-in-b-xpj7spwy5v {
    from { opacity: 0; transform: scaleY(.55); }
    to   { opacity: 1; transform: scaleY(1); }
}

/* ── Bottom section ─────────────────────────────────────────────────────────── */

.sidebar-bottom[b-xpj7spwy5v] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 76px;
    border-top: 1px solid var(--cc-border-soft);
    padding: var(--cc-s-3) var(--cc-s-2);
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    overflow: hidden;
}

.sidebar-user[b-xpj7spwy5v] {
    display: flex;
    align-items: center;
    gap: var(--cc-s-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.user-avatar[b-xpj7spwy5v] {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: var(--cc-r-md);
    background: linear-gradient(135deg, #2D3748, #4A5568);
    border: 1px solid var(--cc-border);
    color: var(--cc-fg);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: var(--cc-font-sans);
    flex-shrink: 0;
}

.user-info[b-xpj7spwy5v] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--sidebar-dur) var(--sidebar-ease) 35ms,
        transform var(--sidebar-dur) var(--sidebar-ease) 35ms;
}

/* Collapsed: remove from layout so avatar + logout stay visible in the narrow rail */
.sidebar:not(.expanded) .user-info[b-xpj7spwy5v] {
    display: none;
}

.sidebar.expanded .user-info[b-xpj7spwy5v] {
    display: flex;
    opacity: 1;
    transform: none;
}

.user-name[b-xpj7spwy5v] {
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    color: var(--cc-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role[b-xpj7spwy5v] {
    font-size: var(--cc-fs-xs);
    color: var(--cc-fg-dim);
    text-transform: capitalize;
}

.logout-btn[b-xpj7spwy5v] {
    background: color-mix(in oklch, var(--cc-danger) 12%, var(--cc-bg-card));
    border: 1px solid color-mix(in oklch, var(--cc-danger) 24%, var(--cc-border));
    color: color-mix(in oklch, var(--cc-danger) 72%, var(--cc-fg));
    cursor: pointer;
    padding: 8px;
    border-radius: var(--cc-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    opacity: 1;
    transition:
        color var(--sidebar-dur-fast) var(--sidebar-ease),
        background var(--sidebar-dur-fast) var(--sidebar-ease);
}
.logout-btn:hover[b-xpj7spwy5v],
.logout-btn:focus-visible[b-xpj7spwy5v] {
    color: #fff;
    background: color-mix(in oklch, var(--cc-danger) 42%, var(--cc-bg-card));
    border-color: color-mix(in oklch, var(--cc-danger) 60%, var(--cc-border));
    box-shadow:
        0 12px 26px color-mix(in oklch, var(--cc-danger) 24%, transparent),
        0 0 14px color-mix(in oklch, var(--cc-danger) 18%, transparent);
    outline: none;
    transform: scale(1.06);
}
.logout-btn:active[b-xpj7spwy5v] {
    transform: scale(.92);
    transition-duration: 60ms;
    filter: brightness(.82);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
}
.logout-btn:focus-visible[b-xpj7spwy5v] {
    outline: 2px solid var(--cc-danger);
    outline-offset: 2px;
}

.logout-label[b-xpj7spwy5v] {
    display: none;
    font: 650 var(--cc-fs-sm)/1 var(--cc-font-sans);
    white-space: nowrap;
}

.sidebar.expanded .logout-label[b-xpj7spwy5v] {
    display: inline;
}

@media (max-width: 760px) {
    .sidebar-dock.expanded[b-xpj7spwy5v] {
        width: 64px;
        flex-basis: 64px;
    }

    .sidebar.expanded[b-xpj7spwy5v] {
        width: 64px;
    }

    .sidebar.expanded .brand-name[b-xpj7spwy5v],
    .sidebar.expanded .nav-label[b-xpj7spwy5v],
    .sidebar.expanded .user-info[b-xpj7spwy5v] {
        opacity: 0;
        transform: translateX(-4px);
    }

    .sidebar.expanded .user-info[b-xpj7spwy5v] {
        display: none;
    }

    .sidebar-context[b-xpj7spwy5v] {
        left: var(--sidebar-collapsed);
        width: min(320px, calc(100vw - 64px));
        padding: var(--cc-s-3);
    }
}

/* ══ Reduced Motion ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .nav-item[b-xpj7spwy5v],
    .context-action[b-xpj7spwy5v],
    .context-action-icon[b-xpj7spwy5v],
    .nav-icon svg[b-xpj7spwy5v],
    .nav-icon-img[b-xpj7spwy5v],
    .logout-btn[b-xpj7spwy5v],
    .brand-icon-img[b-xpj7spwy5v],
    .sidebar[b-xpj7spwy5v],
    .sidebar-dock[b-xpj7spwy5v],
    .sidebar-context[b-xpj7spwy5v] {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}

/* ══ Mobile Drawer ≤ 767px ══════════════════════════════════════════════════
   Sidebar slides in from the left as a full-height overlay drawer.
   Activated by .app-shell.nav-open toggled in MainLayout.razor.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Dock: remove from normal flow, hide off-screen left */
    .sidebar-dock[b-xpj7spwy5v] {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100dvh;
        z-index: 100;
        width: var(--sidebar-expanded, 220px) !important;
        flex-basis: var(--sidebar-expanded, 220px) !important;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.32,.72,0,1);
        box-shadow: none;
    }

    /* Expanded state forced in drawer — always show labels */
    .sidebar[b-xpj7spwy5v] {
        width: 100% !important;
    }

    .sidebar .brand-name[b-xpj7spwy5v],
    .sidebar .nav-label[b-xpj7spwy5v],
    .sidebar .user-info[b-xpj7spwy5v],
    .sidebar .logout-label[b-xpj7spwy5v] {
        opacity: 1 !important;
        transform: none !important;
        display: inline !important;
    }

    /* When nav-open: slide drawer into view */
    .app-shell.nav-open .sidebar-dock[b-xpj7spwy5v] {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0,0,0,.7);
    }

    /* Context panel hidden on mobile */
    .sidebar-context[b-xpj7spwy5v] {
        display: none !important;
    }

    /* Ensure user-info block is visible */
    .sidebar .sidebar-user[b-xpj7spwy5v] {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .sidebar-dock[b-xpj7spwy5v] {
        --sidebar-expanded: 320px;
        --sidebar-panel: 96px;
        --sidebar-panel-hover: 252px;
    }
}