/* ============================================================
   Studio – "Coupon Vault"
   Signature: rarity-farbige Ticket-Karten mit Perforations-Spine
   ============================================================ */

* { box-sizing: border-box; }

/* Sprung zu Ankern und Tab-Fokus: Ziel nie unter der festen Kopfzeile (bzw. unten unter der Tab-Leiste). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); scroll-padding-bottom: calc(var(--shell-foot-h) + var(--sp-4)); }
@media (max-width: 639.98px) {
    html:has(body.has-tabbar) { scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-4)); }
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }

em { font-style: normal; color: var(--c-accent); }

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 40px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-md);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-md);
    line-height: 1;
    letter-spacing: .02em;
}

.brand-text {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    letter-spacing: .01em;
}

/* ---------- Header: Hauptnavigation, Aktionen, Menüs (Zuschauer-Navigation, ViewerNav) ----------
   Ab 1440px stehen alle Ziele im Header, 640–1439px die vier Hauptziele + „Mehr", unter 640px
   übernimmt die Tab-Leiste unten (.tabbar). Kein Burgermenü, kein Überlauf-Messen per JS. */
.topbar { flex-wrap: nowrap; }
.brand { min-width: 0; flex: 0 0 auto; }

.topnav { flex: 1 1 auto; min-width: 0; margin-left: var(--sp-5); }
.topnav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--sp-5); }
.topnav-wide { display: none; }
.topnav-more { position: relative; }
@media (min-width: 1440px) {
    .topnav-wide { display: block; }
    .topnav-more { display: none; }
}

.navlink { color: var(--c-text-muted); font-weight: var(--fw-medium); white-space: nowrap; }
.navlink:hover { color: var(--c-text); }
/* Aktuelle Seite (aria-current="page") bzw. aktiver Bereich hinter „Mehr" (.is-current):
   heller Text + Akzent-Unterstrich. */
.navlink[aria-current="page"], .navlink.is-current {
    color: var(--c-text);
    text-decoration: underline 2px var(--c-accent);
    text-underline-offset: .5em;
}
.navlink-admin { color: var(--c-accent); }
.navlink-admin:hover { color: color-mix(in srgb, var(--c-accent) 80%, var(--c-text)); }
.navlink-btn { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.navlink:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-sm); }

.topbar-actions { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; margin-left: auto; }
/* Studio-Kopfzeile: Kanal neben der Marke (ohne Zuschauer-Navigation). */
.topbar-channel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding-left: var(--sp-3); border-left: 1px solid var(--c-border); }
@media (max-width: 639.98px) { .topbar-community { display: none; } }
.topbar-icon {
    position: relative; display: inline-grid; place-items: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); color: var(--c-text-muted);
}
.topbar-icon:hover { color: var(--c-text); background: var(--c-surface-1); }
.topbar-icon[aria-current="page"] { color: var(--c-text); background: var(--c-surface-2); }
.topbar-icon:focus-visible, .account-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.account { position: relative; }
.account-btn {
    display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; overflow: hidden;
    border: 1px solid var(--c-border-strong); border-radius: var(--r-round);
    background: var(--c-surface-1); color: var(--c-text-muted); cursor: pointer;
}
.account-btn:hover, .account-btn[aria-expanded="true"] { border-color: var(--c-text-muted); color: var(--c-text); }
.user-avatar { width: 100%; height: 100%; border-radius: var(--r-round); object-fit: cover; }

/* Aufklapp-Menü (Disclosure, header.js) */
.menu {
    position: absolute; top: calc(100% + var(--sp-2)); left: 0; z-index: var(--z-dropdown);
    display: flex; flex-direction: column; min-width: 12rem; padding: var(--sp-1);
    background: var(--c-surface-1); border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md); box-shadow: var(--shadow-overlay);
}
.menu[hidden] { display: none; }
.menu--end { left: auto; right: 0; }
/* Überlauf-Menü „⋯“ an Listeneinträgen (StreamhubUtil.rowMenu): fest positioniert (util.js), damit es
   in scrollenden Tabellen nicht abgeschnitten wird. Einträge = .menu-item, Löschen = .is-danger. */
.row-menu { display: inline-flex; }
.row-menu[hidden] { display: none; }
.row-menu-list { position: fixed; top: 0; left: 0; min-width: 11rem; }
.row-menu-list .menu-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); text-decoration: none; }
.row-menu-list .menu-item.is-danger { color: var(--c-danger-text); }
.row-menu-btn { padding-inline: var(--sp-2); }
.menu-head {
    margin: 0 0 var(--sp-1); padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-border); color: var(--c-text-muted); font-size: var(--fs-sm);
}
.menu-head strong { color: var(--c-text); }
.menu-item {
    display: block; width: 100%; padding: var(--sp-2) var(--sp-3);
    border: 0; border-radius: var(--r-sm); background: none;
    color: var(--c-text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--c-surface-2); }
.menu-item:disabled, .menu-item[aria-disabled="true"] { color: var(--c-disabled-text); cursor: not-allowed; background: none; }
.menu-item:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.menu-item[aria-current="page"] { background: var(--c-surface-2); box-shadow: inset 3px 0 0 var(--c-accent); }
.menu-form { margin: var(--sp-1) 0 0; padding-top: var(--sp-1); border-top: 1px solid var(--c-border); }
/* Formular mit einem Knopf außerhalb eines Menüs (Kopfzeile, Aktionszeile): ohne Trennlinie und Versatz. */
.inline-form { display: inline-flex; margin: 0; }
/* Darstellung im Konto-Menü (System/Hell/Dunkel) */
.menu-theme { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-1); padding: var(--sp-1) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--c-border); }
.menu-label, .menu-note { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); }
.menu:has(.menu-theme) { min-width: 15rem; }
.menu-theme .seg { display: flex; flex-wrap: nowrap; }
.menu-theme .seg-btn { flex: 1 1 0; padding-inline: var(--sp-2); }

/* „Live jetzt": laufende Aktionen unter dem Header (statischer Punkt, rot = „jetzt mitmachen") */
.live-strip {
    display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
    padding: var(--sp-2) clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-accent) 6%, var(--c-bg));
}
.live-strip[hidden] { display: none; }
.live-strip-label {
    flex: 0 0 auto; color: var(--c-text-muted);
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
}
.live-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
    color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap;
}
.live-chip[hidden] { display: none; }
.live-chip::before { content: ""; width: .5em; height: .5em; border-radius: var(--r-round); background: var(--c-accent); }
.live-chip:hover { border-color: var(--c-accent); }
.live-chip[aria-current="page"] { background: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.live-chip.is-hot { border-color: color-mix(in srgb, var(--c-danger) 60%, transparent); }
.live-chip.is-hot::before { background: var(--c-danger); }
.live-chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Bereichsumschalter (verwandte Seiten, z. B. Wöchentlich | Leaderboard) – bewusst als
   umrandete Pills, damit er sich von Inhalts-Reitern (Unterstrich) und Filtern (gefüllt) abhebt. */
.subnav { display: flex; flex-wrap: nowrap; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 0 var(--sp-5); }
.subnav-link {
    flex: 0 0 auto; padding: var(--sp-1) var(--sp-4); border-radius: var(--r-pill);
    border: 1px solid var(--c-border-strong); color: var(--c-text-muted);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap;
}
.subnav-link:hover { color: var(--c-text); border-color: var(--c-text-muted); }
.subnav-link[aria-current="page"] { color: var(--c-text); border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.subnav-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* SVG-Symbole (_Icons.cshtml) */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.ic-sm { width: 1rem; height: 1rem; }

/* Mobile Tab-Leiste + „Mehr"-Sheet: nur unter 640px */
.tabbar, .sheet, .sheet-backdrop { display: none; }

@media (max-width: 1023.98px) {
    .brand-text { display: none; }
    .topnav { margin-left: var(--sp-4); }
    .topnav-list { gap: var(--sp-4); }
}
@media (max-width: 639.98px) {
    .topnav { display: none; }
    .topbar-actions { gap: var(--sp-3); }
    body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
    .tabbar {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--c-surface-1); border-top: 1px solid var(--c-border);
    }
    /* .tabbar davor: schlägt die allgemeine Regel für Knöpfe mit Symbol (gap .4em), „Mehr“ ist ein button. */
    .tabbar .tabbar-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0);
        min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
        color: var(--c-text-muted); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    }
    .tabbar-item .ic { width: 1.4rem; height: 1.4rem; }
    /* Aktiv: Akzentfarbe + Balken oben (nicht nur über Farbe). */
    .tabbar-item[aria-current="page"], .tabbar-item.is-current { color: var(--c-accent); box-shadow: inset 0 2px 0 var(--c-accent); }
    .tabbar-item:focus-visible { outline: var(--focus-ring); outline-offset: -4px; border-radius: var(--r-md); }
    .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--c-scrim); }
    .sheet-backdrop[hidden] { display: none; }
    .sheet {
        display: flex; flex-direction: column; position: fixed; z-index: calc(var(--z-drawer) + 1);
        left: var(--sp-3); right: var(--sp-3);
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-2));
        padding: var(--sp-2); background: var(--c-surface-1);
        border: 1px solid var(--c-border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-overlay);
    }
    .sheet[hidden] { display: none; }
    .sheet .menu-item { padding: var(--sp-3); font-size: var(--fs-md); }
}

/* ---------- Buttons ---------- */
.btn {
    --bg: var(--c-surface-2);
    appearance: none;
    border: 1px solid var(--c-border-strong);
    background: var(--bg);
    color: var(--c-text);
    font: inherit;
    font-weight: var(--fw-semibold);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
/* SVG-Symbole in Buttons (StreamhubUtil.icon / _Icons.cshtml): Symbol + Text nebeneinander, mittig.
   Bewusst niedrige Spezifität (:where) – Komponenten mit eigenem display (z. B. ausgeblendete
   Schließen-Knöpfe) behalten Vorrang. */
:where(button, a.btn):has(> .ic) { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); }
:where(button, a.btn) > .ic { flex: 0 0 auto; }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.btn-ghost { background: transparent; border-color: var(--c-border); color: var(--c-text-muted); }
.btn-ghost:hover { color: var(--c-text); border-color: var(--c-border-strong); }

.btn-twitch {
    background: var(--c-twitch);
    border-color: var(--c-twitch);
    color: var(--c-on-twitch);
}
.btn-twitch:hover { background: var(--c-twitch-strong); border-color: var(--c-twitch-strong); }

.btn-lg { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-md); border-radius: var(--r-md); }

/* ---------- Layout ---------- */
.page {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
    flex: 1 0 auto;
    min-width: 0;
}
/* Ausnahme-Seiten mit breiten Tabellen (z. B. Gegenstände verwalten). */
.page--wide { max-width: min(1500px, 96vw); }

/* Embed-Modus (?embed=1): Adminseite als PWA-Reiter im <iframe> – nur der Content, volle
   Breite/Höhe, ohne Seitenpolster, transparenter Hintergrund (der PWA-Reiter liefert den Rahmen). */
body.is-embed { min-height: 100dvh; background: transparent; }
.page.is-embed { max-width: 100%; padding: var(--sp-3); margin: 0; }
/* Nur eigenständig sichtbar (Titel, Zurück-Link) – im eingebetteten PWA-Reiter ausblenden. */
body.is-embed .cx-hide-embed { display: none !important; }

/* Mobil-Sicherheitsnetze: nichts läuft horizontal über den Rand hinaus. */
img, video, iframe { max-width: 100%; }
.page :where(table) { max-width: 100%; }

/* ---------- Barrierefreiheit ---------- */
/* „Zum Inhalt springen" – nur bei Tastatur-Fokus sichtbar (WCAG 2.4.1) */
.skip-link {
    position: absolute; left: var(--sp-2); top: -4rem; z-index: var(--z-toast);
    background: var(--c-accent); color: var(--c-on-accent); font-weight: var(--fw-bold);
    padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--r-md) var(--r-md); text-decoration: none;
    transition: top var(--dur-base) var(--ease);
}
.skip-link:focus { top: 0; }
main:focus { outline: none; }   /* Skip-Ziel bekommt keinen sichtbaren Kasten */

/* Sichtbarer Tastatur-Fokus auf ALLEN interaktiven Elementen (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: var(--focus-ring); outline-offset: var(--focus-offset);
}
/* Rundung nur für Elemente ohne eigene, Knöpfe und Felder behalten ihre Ecken beim Fokus (Plan 59). */
:where(a, summary, [tabindex]):focus-visible { border-radius: var(--r-xs); }

/* Nur für Screenreader (visuell verborgen, aber vorlesbar) */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.footer {
    border-top: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
    padding: var(--sp-5);
    display: flex;
    flex-flow: row wrap;
    gap: var(--sp-2) var(--sp-4);
    align-items: center;
    justify-content: center;
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.footer-links a { color: var(--c-text-muted); }
.footer-links a:hover { color: var(--c-text); }
.footer-version { color: var(--c-text-muted); font-size: var(--fs-xs); white-space: nowrap; }

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.7;
}
.legal h1 {
    font-family: var(--font-sans);
    font-size: var(--fs-page);
    margin: 0 0 var(--sp-5);
}
.legal h2 {
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    margin: var(--sp-6) 0 var(--sp-2);
    color: var(--c-text);
}
.legal p, .legal ul { color: var(--c-text-muted); margin: var(--sp-2) 0; }
.legal ul { padding-left: var(--sp-4); }
.legal li { margin: var(--sp-1) 0; }
.legal a { color: var(--c-accent); word-break: break-word; }
.legal code {
    background: var(--c-surface-2);
    border-radius: var(--r-xs);
    padding: .05rem var(--sp-1);
    font-size: .9em;
}
.legal h2[id], .legal section[id] { scroll-margin-top: 5rem; }
.legal-toc {
    columns: 2 16rem;
    column-gap: var(--sp-6);
    margin: 0 0 var(--sp-5);
    padding-left: var(--sp-5);
    color: var(--c-text-muted);
}
.legal-toc li { margin: var(--sp-1) 0; break-inside: avoid; }
/* Hervorgehobener Kasten (z. B. Widerspruchsrecht nach Art. 21 Abs. 4 DSGVO) */
.legal-box {
    margin: var(--sp-6) 0;
    padding: var(--sp-1) var(--sp-4) var(--sp-3);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-md);
    background: var(--c-surface-2);
}
.legal-box h2 { margin-top: var(--sp-4); }
.legal-meta { font-size: .9em; margin-top: var(--sp-6); }

/* ---------- Hero / Landing ---------- */
.hero { max-width: 720px; padding: clamp(1rem, 5vw, 3rem) 0; }

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: var(--fs-xs);
    color: var(--c-accent);
    margin: 0 0 var(--sp-4);
}

.hero-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-display);
    line-height: 1.02;
    margin: 0 0 var(--sp-4);
    letter-spacing: -.01em;
}

.hero-lead { color: var(--c-text-muted); font-size: var(--fs-lg); max-width: 56ch; margin: 0 0 var(--sp-6); }

.hero-points {
    list-style: none;
    padding: 0;
    margin: var(--sp-7) 0 0;
    display: grid;
    gap: var(--sp-3);
    max-width: 60ch;
}
.hero-points li {
    padding-left: var(--sp-5);
    position: relative;
    color: var(--c-text-muted);
}
.hero-points li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: .55rem; height: .55rem;
    border-radius: var(--r-xs);
    background: var(--c-accent);
    transform: rotate(45deg);
}
.hero-points strong { color: var(--c-text); }

/* ---------- Dashboard (Home) ---------- */
.dash-head { margin-bottom: var(--sp-6); }
/* Übersicht (angemeldet): gleicher Abstand zwischen allen Kacheln, auch wenn Live, Ziel oder Giveaway fehlen. */
.dash:not(.dash--public) { display: grid; gap: var(--sp-4); }
.dash:not(.dash--public) > * { margin-top: 0; margin-bottom: 0; }
.dash:not(.dash--public) > .dash-head { margin-bottom: var(--sp-2); }

/* Minimale Goalbar oben im Dashboard */
.dash-goal {
    display: block;
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    color: var(--c-text);
    transition: border-color var(--dur-base) var(--ease);
}
.dash-goal:hover { border-color: color-mix(in srgb, var(--c-accent) 40%, transparent); }
.dash-goal-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-2);
}
.dash-goal-title { font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-goal-pct { font-weight: var(--fw-heavy); color: var(--c-accent); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dash-goal-track {
    height: 10px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--c-text) 10%, transparent);
    overflow: hidden;
}
.dash-goal-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    transition: width var(--dur-slow) var(--ease);
}
/* Kennzahlen (Startseite): Wert zuerst, Bezeichnung + Ziel als Text – echte KPIs, daher Karten. */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
/* Eine einzelne Kennzahl steht nicht halbbreit mit leerer Hälfte daneben. */
.kpi-row > .kpi:only-child { grid-column: 1 / -1; }
@media (max-width: 1023.98px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
    display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
    padding: var(--sp-4); border-radius: var(--r-md);
    background: var(--c-surface-1); border: 1px solid var(--c-border); color: var(--c-text);
    transition: border-color var(--dur-base) var(--ease);
}
.kpi:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.kpi:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.kpi-label { color: var(--c-text-muted); font-size: var(--fs-sm); }
.kpi-value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.kpi-hint { color: var(--c-text-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Laufendes Giveaway auf der Startseite (mit Preis und Ziehungszeit) */
.dash-live {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-1));
    border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent); color: var(--c-text);
}
.dash-live:hover { border-color: var(--c-accent); }
.dash-live:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.dash-live-label { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-bold); }
.dash-live-label::before { content: ""; width: .5em; height: .5em; border-radius: var(--r-round); background: var(--c-accent); }
.dash-live-text { flex: 1 1 12rem; min-width: 0; color: var(--c-text-muted); }
.dash-live-cta { font-weight: var(--fw-semibold); color: var(--c-accent); }

/* Statistik-Karte (Startseite) */
.dash-tile {
    display: flex; align-items: center; gap: var(--sp-4);
    background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5); color: var(--c-text);
}
.dash-tile-title { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-lg); margin: 0; }

/* Leaderboard-Kachel: zwei Platzierungen untereinander */
.dash-tile--wide { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.dash-tile-head { display: flex; align-items: center; gap: var(--sp-4); }
.dash-rank {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
}
a.dash-rank:hover .dash-rank-label { color: var(--c-text); }
.dash-rank--static { cursor: default; }
.dash-rank-label { color: var(--c-text-muted); font-size: var(--fs-sm); }
.dash-rank-val { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Kombinierte Statistik-/Ranking-Kachel: eigene volle Breite (wie die Goalbar). */
.dash-tile--stats { margin-top: var(--sp-4); }
.dash-ranks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--sp-5);   /* Zeilen trennt die Linie, Spalten der Abstand */
}
.dash-ranks .dash-rank { height: 100%; }
.dash-ranks > .gw-empty { grid-column: 1 / -1; }
@media (max-width: 1023.98px) {
    .dash-ranks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639.98px) {
    .dash-ranks { grid-template-columns: 1fr; }
}

/* Zeitfilter in der Statistik-Kachel: Optik aus .seg */
.dash-tile--stats .dash-tile-head { flex-wrap: wrap; }
.dash-periods { margin-left: auto; }

/* ---------- Inventar Kopf ---------- */
.inv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
/* Funktionskopf: Aktiv und Knöpfe immer in eigener Zeile unter Titel und Beschreibung, links. */
.inv-head.fn-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

.inv-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-page);
    margin: 0;
}
.inv-sub { color: var(--c-text-muted); margin: var(--sp-1) 0 0; max-width: 70ch; }

/* Keine Verbindung zum Server (util.js): Live-Kennzeichen zeigen einen alten Stand, darum ausgegraut. */
.is-disconnected :is(.status-pill, .live-chip, .obs-live-state, .sg-mode) { filter: grayscale(1); }
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--c-border);
    background: var(--c-surface-1);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.status-pill strong { color: var(--c-text); text-transform: capitalize; }
/* Zustände (Plan 59, docs/17 „Badges, Status“): ohne Klasse bzw. is-offline = neutral (aus, offline, wartet auf nichts),
   is-online = grün (verbunden, läuft), is-idle = Warnfarbe (pausiert, schwach, eingeschränkt), is-error = rot (Problem),
   is-live = Sendung läuft (rot gefüllt). Rot nur für Fehler und LIVE. */
.status-dot { width: 9px; height: 9px; border-radius: var(--r-round); background: var(--c-text-muted); flex: 0 0 auto; }
.status-pill.is-online .status-dot {
    background: var(--c-success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-success) 18%, transparent);
}
.status-pill.is-idle .status-dot { background: var(--c-warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-warning) 18%, transparent); }
.status-pill.is-error { border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); color: var(--c-danger-text); }
.status-pill.is-error .status-dot { background: var(--c-danger); }
.status-pill.is-live {
    border-color: color-mix(in srgb, var(--c-danger) 55%, transparent);
    background: color-mix(in srgb, var(--c-danger) 16%, var(--c-surface-1));
    color: var(--c-danger-text); font-weight: var(--fw-bold);
}
.status-pill.is-live .status-dot { background: var(--c-danger); }
/* Klein: in Zeilen und Leisten (Live-Leiste des Leitstands). */
.status-pill--sm { gap: var(--sp-1); padding: var(--sp-0) var(--sp-2); font-size: var(--fs-xs); }
.status-pill--sm .status-dot { width: 6px; height: 6px; box-shadow: none; }

/* ---------- Empty ---------- */
.empty {
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-md);
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    color: var(--c-text);
}
.empty-hint { color: var(--c-text-muted); margin-top: var(--sp-1); }

/* ---------- Rarity-Block ---------- */
.rarity-block { margin-bottom: var(--sp-7); }

.rarity-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.rarity-name {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    letter-spacing: .02em;
}
.rarity-line { flex: 1; height: 1px; background: var(--c-border); }
.rarity-count {
    font-variant-numeric: tabular-nums;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    padding: var(--sp-0) var(--sp-2);
}

/* Rarity-Akzent je Block */
.rarity-block[data-rarity="common"]    { --rc: var(--c-rarity-common); }
.rarity-block[data-rarity="uncommon"]  { --rc: var(--c-rarity-uncommon); }
.rarity-block[data-rarity="rare"]      { --rc: var(--c-rarity-rare); }
.rarity-block[data-rarity="epic"]      { --rc: var(--c-rarity-epic); }
.rarity-block[data-rarity="legendary"] { --rc: var(--c-rarity-legendary); }
.rarity-block[data-rarity] .rarity-name { color: var(--rc); }

/* ---------- Ticket-Grid ---------- */
.ticket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--sp-4);
}

.ticket {
    --rc: var(--c-rarity-common);
    position: relative;
    display: grid;
    grid-template-columns: 14px 84px 1fr;
    grid-template-areas: "spine thumb body" "spine thumb action";
    gap: 0 var(--sp-4);
    align-items: start;
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}
.ticket:hover { border-color: color-mix(in srgb, var(--rc) 45%, transparent); }

.ticket[data-rarity="common"]    { --rc: var(--c-rarity-common); }
.ticket[data-rarity="uncommon"]  { --rc: var(--c-rarity-uncommon); }
.ticket[data-rarity="rare"]      { --rc: var(--c-rarity-rare); }
.ticket[data-rarity="epic"]      { --rc: var(--c-rarity-epic); }
.ticket[data-rarity="legendary"] { --rc: var(--c-rarity-legendary); }

/* Perforierter Rarity-Spine als Signature */
.ticket-spine {
    grid-area: spine;
    align-self: stretch;
    background:
        radial-gradient(circle at 7px 0, transparent 4px, var(--rc) 4px) 0 0 / 14px 16px repeat-y;
    opacity: .9;
}

.ticket-thumb {
    grid-area: thumb;
    position: relative;
    width: 84px; height: 84px;
    border-radius: var(--r-md);
    overflow: hidden;
    background:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-text) 3%, transparent) 0 6px, transparent 6px 12px),
        color-mix(in srgb, var(--rc) 16%, var(--c-bg));
    display: grid; place-items: center;
    border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
}
.thumb-fallback {
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-2xl);
    color: color-mix(in srgb, var(--rc) 75%, var(--c-text));
}
.ticket-amount {
    position: absolute;
    bottom: 4px; right: 4px;
    background: var(--c-media-scrim);
    color: var(--c-on-media);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: var(--sp-0) var(--sp-2);
    border-radius: var(--r-sm);
    font-variant-numeric: tabular-nums;
}

.ticket-body { grid-area: body; min-width: 0; }
.ticket-name {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    margin: 0 0 var(--sp-1);
}
.ticket-desc {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-2);
}

.ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.expires { font-size: var(--fs-xs); color: var(--c-text-muted); margin-left: auto; }

/* Hervorhebung für Items mit <= 7 Tagen Restlaufzeit */
.expires.is-expiring { color: var(--c-warning); font-weight: var(--fw-semibold); }
.expires.is-expiring::before { content: "⏳ "; }
.ticket.is-expiring {
    border-color: color-mix(in srgb, var(--c-warning) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-warning) 22%, transparent);
}
.ticket.is-expiring:hover { border-color: color-mix(in srgb, var(--c-warning) 80%, transparent); }

.ticket-action { grid-area: action; margin-top: var(--sp-3); }
.btn-use {
    width: 100%;
    background: color-mix(in srgb, var(--rc) var(--tint-bg), var(--tint-base));
    border-color: color-mix(in srgb, var(--rc) var(--tint-border), transparent);
    color: var(--c-text);
}
.btn-use:hover { background: color-mix(in srgb, var(--rc) var(--tint-bg-hover), var(--tint-base)); }
.btn-use:disabled {
    cursor: not-allowed;
    transform: none;
    color: var(--c-disabled-text);
    background: var(--c-disabled-bg);
    border-color: var(--c-disabled-border);
}
/* Exklusiv-Gruppe gesperrt: Cooldown-Button (läuft sichtbar runter). */
.btn-use.is-cooldown:disabled {
    opacity: 1;
    filter: none;
    color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface-2));
    border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
    cursor: progress;
    font-variant-numeric: tabular-nums;
}

/* ---------- Benachrichtigungen (StreamhubUtil.toast/status, docs/17 „Rückmeldungen“) ----------
   Stapel unten rechts, die neueste unten. Schwebt über dem Inhalt, schiebt nie etwas weg. Am Handy über der Tab-Leiste. */
.toast-stack {
    position: fixed;
    right: var(--sp-5);
    bottom: calc(var(--shell-foot-h) + var(--sp-5));
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: min(22rem, calc(100vw - 2 * var(--sp-4)));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    max-width: 100%;
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border-strong);
    border-left: 4px solid var(--c-accent);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-overlay);
    font-size: var(--fs-sm);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(var(--sp-3));
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.toast.show { opacity: 1; transform: none; }
.toast.is-error { border-left-color: var(--c-danger); }
.toast.is-success { border-left-color: var(--c-success); }
.toast.is-busy { border-left-color: var(--c-border-strong); color: var(--c-text-muted); font-style: italic; }
.toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-close { appearance: none; background: none; border: 0; border-radius: var(--r-sm); color: var(--c-text-muted); padding: var(--sp-1); min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.toast-close:hover { color: var(--c-text); background: var(--c-surface-1); }
.toast-close:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.toast-link { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity var(--dur-fast) linear; transform: none; } }
/* Meldungen vom Server (data-toast) wandern beim Laden in den Stapel und stehen nie im Inhalt. */
[data-toast] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 639.98px) {
    .ticket {
        grid-template-columns: 10px 64px 1fr;
        gap: 0 var(--sp-3);
    }
    .ticket-thumb { width: 64px; height: 64px; }
    .expires { margin-left: 0; width: 100%; }
}

/* ============================================================
   Giveaway
   ============================================================ */

.gw-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-5);
    align-items: start;
}
.gw-main { display: grid; gap: var(--sp-5); min-width: 0; }
.gw-side { display: grid; gap: var(--sp-4); position: sticky; top: 88px; }

/* ---------- Gewinn-Karte ---------- */
.gw-prize-card {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    position: relative;
    overflow: hidden;
}
.gw-prize-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.gw-prize-label {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: var(--fs-xs);
    color: var(--c-accent);
}
.gw-drawtime { color: var(--c-text-muted); font-size: var(--fs-sm); }
.gw-drawtime strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
.gw-prize {
    font-weight: var(--fw-bold);
    font-size: var(--fs-highlight);
    margin-top: var(--sp-2);
    line-height: 1.25;
    color: var(--c-text);
    overflow-wrap: anywhere;
}

/* ---------- Ziehungs-Bühne ---------- */
.gw-stage {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    position: relative;
    overflow: hidden;
}
.gw-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.gw-stage-label {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* Vorschau im Admin */
.gw-anim-preview { margin-top: var(--sp-4); }
.gw-anim-preview .gw-stage-label { display: block; margin-bottom: var(--sp-3); }

.gw-winner-box { margin-top: var(--sp-4); }
.gw-winner-label {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}
.gw-winner {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-highlight);
    margin: var(--sp-0) 0 var(--sp-3);
    color: var(--c-text);
}
.gw-timer-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-1);
}
.gw-timer-top span:first-child { font-weight: var(--fw-bold); color: var(--c-text); font-variant-numeric: tabular-nums; }
.gw-timer-bar-track {
    height: 10px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--c-text) 8%, transparent);
    border: 1px solid var(--c-border);
    overflow: hidden;
}
.gw-timer-bar { height: 100%; width: 100%; background: var(--c-rarity-uncommon); transition: width var(--dur-fast) linear; }
.gw-timer-bar.warn { background: var(--c-warning); }
.gw-timer-bar.danger { background: var(--c-danger); }

.gw-confirm {
    margin-top: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--c-success) 35%, transparent);
    background: color-mix(in srgb, var(--c-success) 10%, transparent);
    padding: var(--sp-4) var(--sp-5);
    text-align: center;
}
.gw-confirm-badge { margin-bottom: var(--sp-2); }
.gw-confirm-winner {
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-highlight);
    line-height: 1.1;
}
.gw-confirm-sub { color: var(--c-text-muted); margin-top: var(--sp-1); }

/* ---------- Teilnehmerliste ---------- */
.gw-part-list {
    display: grid;
    gap: var(--sp-1);
    max-height: 460px;
    overflow-y: auto;
}
.gw-part-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
}
.gw-part-row:nth-child(even) { background: var(--c-surface-2); }
.gw-part-rank {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    min-width: 2ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.gw-part-name {
    flex: 1;
    min-width: 0;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gw-part-chance {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: var(--sp-0) var(--sp-2);
    border-radius: var(--r-pill);
    color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gw-empty {
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    text-align: center;
    color: var(--c-text-muted);
}

/* ---------- Laden (zentral) ----------
   Spinner: .spinner (inline, Größe = Schrift). „Lädt…"-Platzhalter (data-state="loading", aus
   StreamhubUtil.loadingHtml bzw. im Markup) bekommen ihn automatisch, halten Platz frei und erscheinen
   erst nach kurzer Verzögerung (kein Flackern bei schnellen Antworten).
   Seiten-Ladezustand: html.is-page-loading (_PageLoading + util.js pageReady) blendet den Inhalt
   bis zur ersten Ruhe aus; Seitentitel und Bereichsreiter bleiben stehen. */
@keyframes rw-spin { to { transform: rotate(360deg); } }
@keyframes rw-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes rw-bar { from { background-position: -100% 0; } to { background-position: 200% 0; } }
.spinner,
.gw-empty[data-state="loading"]::before,
td.aw-empty[data-state="loading"]::before,
:is(.palette-empty, .ov-strip-empty)[data-state="loading"]::before {
    content: "";
    display: inline-block; flex: 0 0 auto;
    width: 1.1em; height: 1.1em;
    border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: var(--c-accent);
    border-radius: var(--r-round);
    vertical-align: -.2em;
    animation: rw-spin .8s linear infinite;
}
.gw-empty[data-state="loading"] {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 8rem;
    border-color: transparent;
    animation: rw-appear var(--dur-slow) var(--ease) .25s both;
}
td.aw-empty[data-state="loading"] { height: 8rem; animation: rw-appear var(--dur-slow) var(--ease) .25s both; }
td.aw-empty[data-state="loading"]::before,
:is(.palette-empty, .ov-strip-empty)[data-state="loading"]::before { margin-right: var(--sp-2); }

html.is-page-loading main.page > :not(.subnav, .inv-head, .its-tabs, .app-shell),
html.is-page-loading .app-content > :not(.subnav, .inv-head, .its-tabs, .studio-panel-launch) { opacity: 0; pointer-events: none; }
html.is-page-revealing main.page > :not(.subnav, .inv-head, .its-tabs, .app-shell),
html.is-page-revealing .app-content > :not(.subnav, .inv-head, .its-tabs, .studio-panel-launch) { transition: opacity var(--dur-slow) var(--ease); }
html.is-page-loading main.page:not(.page--shell),
html.is-page-loading .app-content { position: relative; }
html.is-page-loading main.page:not(.page--shell)::after,
html.is-page-loading .app-content::after {
    content: "";
    position: absolute; top: 11rem; left: 50%;
    width: 2.25rem; height: 2.25rem; margin-left: -1.125rem;
    border: 3px solid color-mix(in srgb, var(--c-text) 15%, transparent);
    border-top-color: var(--c-accent);
    border-radius: var(--r-round);
    animation: rw-spin .8s linear infinite, rw-appear var(--dur-slow) var(--ease) .2s both;
}
html.is-page-loading body::after {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: calc(var(--z-sticky) + 1);
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--c-accent), transparent) no-repeat;
    background-size: 50% 100%;
    animation: rw-bar 1.1s var(--ease) infinite, rw-appear var(--dur-slow) var(--ease) .2s both;
}

/* ---------- Meine Tickets + Beitritt ---------- */
.gw-mine {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-4);
    display: grid;
    gap: var(--sp-2);
}
.gw-mine-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.gw-mine-label { color: var(--c-text-muted); font-size: var(--fs-sm); }
.gw-mine-value {
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-xl);
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
}
.gw-mine-row + .gw-mine-row .gw-mine-value { color: var(--c-text); }

.gw-join {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-4);
    display: grid;
    gap: var(--sp-3);
}
/* Teilnehmen = Hauptaktion der Seite (Akzent, volle Breite); Tickets einsetzen = Standardknopf. */
.gw-join-main { width: 100%; }
.gw-join-extra { display: flex; gap: var(--sp-2); }
.gw-join-extra > .num-field { flex: none; }
.gw-join-extra-btn { flex: 1; }
.gw-join-hint { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; }
.gw-join-terms { margin: 0; font-size: var(--fs-xs); }
.gw-join-terms a { color: var(--c-text-muted); text-decoration: underline; }
.gw-join-terms a:hover { color: var(--c-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1023.98px) {
    .gw-grid { grid-template-columns: 1fr; }
    .gw-side { position: static; }
    /* Reihenfolge auf schmalen Bildschirmen: Gewinn, Ziehung, Teilnehmen, Teilnehmende */
    .gw-main { display: contents; }
    .gw-prize-card { order: 1; }
    .gw-stage { order: 2; }
    .gw-side { order: 3; }
    .gw-parts { order: 4; }
}

/* ============================================================
   Rangliste (Leaderboard)
   ============================================================ */
.lb-me {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--c-border);
    background: var(--c-surface-1);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.lb-me.is-ranked {
    border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
    background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-1));
}
.lb-me-label { color: var(--c-text-muted); }
.lb-me-rank {
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-lg);
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
}
.lb-me-amount { color: var(--c-text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* Reiter (eine Komponente): .its-tabs/.its-tab (Admin), .lb-tabs/.lb-tab (Leaderboard) und .sp-tabs/.sp-tab (Seitenpanel).
   Einzeilig, Überlauf scrollt. Rollen, aria-selected und Pfeiltasten ergänzt ui.js. */
.its-tabs, .lb-tabs, .sp-tabs {
    display: flex; gap: var(--sp-1); flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent;
    margin: 0 0 var(--sp-4); border-bottom: 1px solid var(--c-border);
}
.its-tab, .lb-tab, .sp-tab {
    flex: 0 0 auto; white-space: nowrap; appearance: none; cursor: pointer;
    padding: var(--sp-2) var(--sp-4); border: 0; border-bottom: 2px solid transparent;
    border-radius: var(--r-sm) var(--r-sm) 0 0; background: transparent;
    color: var(--c-text-muted); font: inherit; font-weight: var(--fw-semibold);
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.its-tab:hover, .lb-tab:hover, .sp-tab:hover { color: var(--c-text); background: var(--c-surface-1); }
.its-tab.is-active, .lb-tab.is-active, .sp-tab.is-active { color: var(--c-text); border-bottom-color: var(--c-accent); }
.its-tab:focus-visible, .lb-tab:focus-visible, .sp-tab:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

/* Zeitfilter (Total / Jahr / Monat): Optik aus .seg */
.lb-periods { margin-bottom: var(--sp-4); }

/* Werkzeugleiste (eine Komponente): .lb-controls > .lb-search-box (input[type=search]) + select.clip-select
   + weitere Filter. Gleiche Höhe für alle Teile; über jeder durchsuchbaren Liste. */
.lb-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.lb-controls[hidden] { display: none; }
.lb-controls > * { height: 2.7rem; }
.lb-search-box { flex: 1 1 220px; min-width: 180px; }
.lb-search-box input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text);
    font: inherit;
    padding: 0 var(--sp-4);
}
.lb-search-box input::placeholder { color: var(--c-text-muted); }
.lb-search-box input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--c-accent); }

.lb-award-note {
    margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
    background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-1));
    border: 1px solid color-mix(in srgb, var(--c-accent) 30%, var(--c-border));
    color: var(--c-text-muted); font-size: var(--fs-sm);
}
.lb-award-note strong { color: var(--c-text); }
.lb-list { display: grid; gap: var(--sp-2); }

.lb-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
}
.lb-row:nth-child(even) { background: var(--c-surface-2); }

.lb-rank {
    min-width: 2.4ch;
    text-align: right;
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Podium-Akzente für die Top 3 */
.lb-row[data-rank="1"] .lb-rank { color: var(--c-rarity-legendary); }
.lb-row[data-rank="2"] .lb-rank { color: var(--c-medal-silver); }
.lb-row[data-rank="3"] .lb-rank { color: var(--c-medal-bronze); }

.lb-name {
    flex: 1;
    min-width: 0;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-name .bt-badge { margin-right: var(--sp-1); vertical-align: -.1em; }
.lb-amount {
    flex-shrink: 0;
    font-weight: var(--fw-bold);
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
/* Watchstreak: "Geteilt am"-Datum zwischen Name und Wert */
.lb-shared {
    flex-shrink: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 639.98px) { .lb-shared { display: none; } }

/* Eigene Platzierung hervorheben */
.lb-row.is-me {
    border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
    background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface-2));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.lb-row.is-me .lb-name::after,
.lb-item.is-me .lb-name::after {
    content: "Du";
    margin-left: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-on-accent);
    background: var(--c-accent);
    border-radius: var(--r-pill);
    padding: .05rem var(--sp-2);
    vertical-align: middle;
}

/* Clip-Score: aufklappbare Zeile mit Punkte-Aufschlüsselung */
.lb-item {
    border-radius: var(--r-md);
    background: var(--c-surface-1);
    border: 1px solid transparent;
    overflow: hidden;
}
.lb-list > .lb-item:nth-child(even) { background: var(--c-surface-2); }
.lb-item .lb-row--clip {
    background: transparent;
    list-style: none;
    cursor: pointer;
    width: 100%;
}
.lb-item .lb-row--clip::-webkit-details-marker { display: none; }
.lb-caret {
    flex-shrink: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    transition: transform var(--dur-base) var(--ease);
}
.lb-item[open] > .lb-row--clip .lb-caret { transform: rotate(180deg); }
/* Gleiche Markierung wie .lb-row.is-me (Leaderboard); die Listen-Variante schlägt
   das Zebra-Muster (:nth-child(even)), die innere Zeile verliert ihren eigenen Rahmen. */
.lb-item.is-me,
.lb-list > .lb-item.is-me {
    border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
    background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface-2));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.lb-item.is-me > .lb-row--clip { border-color: transparent; }
.lb-break {
    padding: var(--sp-1) var(--sp-4) var(--sp-3);
    display: grid;
    gap: var(--sp-1);
}
.lb-break-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    padding: var(--sp-0) 0;
}
.lb-break-v { font-variant-numeric: tabular-nums; color: var(--c-text); white-space: nowrap; }
.lb-break-total {
    margin-top: var(--sp-1);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--c-border);
    font-weight: var(--fw-bold);
    color: var(--c-text);
}
.lb-break-total .lb-break-v { color: var(--c-accent); }

/* Info-Box: Punktevergabe (Leaderboard-Clips + Meine Clips) */
.score-info {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-4);
    margin-bottom: var(--sp-4);
}
.score-info-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-family: var(--font-sans);
    margin-bottom: var(--sp-3);
}
.score-info-icon { font-size: var(--fs-lg); }

/* Eigene Clip-Punkte + Platzierung, direkt im Info-Box-Kopf (Meine Clips) */
.score-mine {
    margin-left: auto;
    display: flex;
    gap: var(--sp-2);
}
.score-mystat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-md);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    text-decoration: none;
}
.score-mystat.is-link { transition: border-color var(--dur-base) var(--ease); }
.score-mystat.is-link:hover { border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }
.score-mystat-label {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-text-muted);
}
.score-mystat-val {
    font-weight: var(--fw-heavy);
    font-size: var(--fs-md);
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.score-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.score-chip b { color: var(--c-accent); font-weight: var(--fw-bold); }
.score-info-note {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.score-info-note a { color: var(--c-accent); }

/* ---------- Clips ---------- */
.clip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-4);
}
.clip-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}
.clip-card:hover { border-color: color-mix(in srgb, var(--c-accent) 35%, transparent); }

.clip-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--c-media);
    cursor: pointer;
    overflow: hidden;
}
.clip-media img,
.clip-media iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
.clip-media img { object-fit: cover; }
.clip-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: var(--c-on-media);
    background: var(--c-media-shade);
    transition: background var(--dur-base) var(--ease);
    text-shadow: var(--shadow-on-media);
}
.clip-play .ic, .shorts-play .ic { width: 1em; height: 1em; }
.clip-media:hover .clip-play { background: color-mix(in srgb, var(--c-media) 12%, transparent); }
.clip-media[data-playing] .clip-play,
.clip-media[data-playing] .clip-duration { display: none; }
.clip-duration {
    position: absolute;
    bottom: 6px; right: 6px;
    background: var(--c-media-scrim);
    color: var(--c-on-media);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    padding: var(--sp-0) var(--sp-2);
    border-radius: var(--r-sm);
    font-variant-numeric: tabular-nums;
}

.clip-body { padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.clip-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    line-height: 1.25;
    margin: 0 0 var(--sp-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
.clip-meta .clip-creator { color: var(--c-text); font-weight: var(--fw-semibold); }

/* Clip-Filter: Werkzeugleiste (.lb-controls) mit etwas mehr Abstand zum Raster */
.clip-filters { margin-bottom: var(--sp-5); }

/* Zeitraum als ein kompakter Block */
.clip-daterange {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: var(--sp-2);
    box-sizing: border-box;
    padding: 0 var(--sp-3);
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}
.clip-range-label { color: var(--c-text-muted); font-size: var(--fs-xs); }
.clip-daterange input[type="date"] {
    background: transparent;
    border: 0;
    color: var(--c-text);
    font: inherit;
    padding: 0;
    min-width: 0;   /* schmale Bildschirme: Felder dürfen schrumpfen statt überzulaufen */
}
.clip-daterange input[type="date"]:focus-visible { outline: none; }
.clip-daterange:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--c-accent); }

/* Hervorgehoben als Toggle-Chip */
.clip-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.clip-chip:has(input:checked) {
    background: color-mix(in srgb, var(--c-accent) 20%, var(--c-surface-1));
    border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
    color: var(--c-text);
}
.clip-chip:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Sortier-Dropdown */
.clip-select {
    box-sizing: border-box;
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text);
    font: inherit;
    padding: 0 var(--sp-4);
    cursor: pointer;
}
.clip-select:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--c-accent); }
.clip-star {
    position: absolute;
    top: 6px; left: 6px;
    z-index: 2;
    color: var(--c-accent);
    font-size: var(--fs-md);
    text-shadow: var(--shadow-on-media);
}

/* ---------- Clip-Battle (öffentlich) ---------- */
.cb-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
}
.cb-badge.is-live { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 50%, transparent); }
.cb-badge.is-win { color: var(--c-rarity-uncommon); border-color: color-mix(in srgb, var(--c-rarity-uncommon) 45%, transparent); }
.cb-hint { color: var(--c-text-muted); }
.cb-timer {
    margin-left: auto;
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-2xl);
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
}

.cb-clips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.cb-clip {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cb-clip.is-winner {
    border-color: color-mix(in srgb, var(--c-rarity-uncommon) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-rarity-uncommon) 40%, transparent);
}
.cb-num {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--c-media-scrim);
    color: var(--c-on-media);
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
}
.cb-clip-body { padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.cb-vote { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.cb-vote-track { flex: 1; height: 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-text) 10%, transparent); overflow: hidden; }
.cb-vote-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--c-accent); transition: width var(--dur-slow) var(--ease); }
.cb-vote-num { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

/* Turnierbaum */
.cb-bracket { border-top: 1px solid var(--c-border); padding-top: var(--sp-4); }
.cb-bracket-title { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.cb-round { margin-bottom: var(--sp-5); }
.cb-round-name {
    text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-xs);
    color: var(--c-accent); font-weight: var(--fw-bold); margin-bottom: var(--sp-2);
}
/* Paarungen untereinander gestapelt – volle Breite (wie die Clips darüber) */
.cb-round-matches { display: grid; gap: var(--sp-2); }
.cb-bm {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.cb-bm-no {
    display: block;
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
    color: var(--c-text-muted); margin-bottom: var(--sp-2);
}
.cb-bm-vs { display: flex; align-items: center; gap: var(--sp-3); }
.cb-bm-clip {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: var(--sp-0);
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--r-md);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
}
.cb-bm-clip--left { align-items: flex-end; text-align: right; }
.cb-bm-clip--right { align-items: flex-start; text-align: left; }
.cb-bm-title {
    max-width: 100%; font-weight: var(--fw-semibold); color: var(--c-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-bm-creator { font-size: var(--fs-xs); color: var(--c-text-muted); }
.cb-bm-clip.is-w {
    border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
    background: color-mix(in srgb, var(--c-accent) 14%, var(--c-bg));
}
.cb-bm-clip.is-w .cb-bm-title { color: var(--c-accent); }
.cb-bm-clip.is-w .cb-bm-title::after { content: " 👑"; }
/* Großes, gut sichtbares VS zwischen den Clips */
.cb-vs {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: var(--r-pill);
    background: var(--c-surface-2);
    border: 1px solid color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
    color: var(--c-accent);
    font-family: var(--font-sans); font-weight: var(--fw-heavy); font-size: var(--fs-sm);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 8%, transparent);
}
.cb-bm--group .cb-bm-vs { flex-wrap: wrap; }
.cb-vs--sm { width: auto; height: auto; padding: var(--sp-0) var(--sp-2); font-size: var(--fs-xs); box-shadow: none; }
@media (max-width: 639.98px) {
    .cb-bm-vs { flex-direction: column; gap: var(--sp-2); }
    .cb-bm-clip--left, .cb-bm-clip--right { align-items: center; text-align: center; width: 100%; }
}

/* Gewinner */
.cb-winner {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
    border-radius: var(--r-md);
    background: var(--c-surface-1);
    border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
}
.cb-trophy { font-size: 3rem; }
.cb-winner-title { font-family: var(--font-sans); font-weight: var(--fw-heavy); font-size: var(--fs-2xl); }
.cb-winner-sub { color: var(--c-text-muted); margin-top: var(--sp-1); }
.cb-winner-note { color: var(--c-accent); font-weight: var(--fw-semibold); margin-top: var(--sp-2); }

/* Voting-Punktetafel unter der Gewinnerkachel */
.cb-scoreboard { margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--c-surface-1); border: 1px solid var(--c-border); }
.cb-scoreboard-title { font-family: var(--font-sans); font-weight: var(--fw-heavy); font-size: var(--fs-lg); margin: 0 0 var(--sp-0); }
.cb-scoreboard-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cb-scoreboard-list li { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: var(--c-surface-2); }
.cb-sb-rank { flex: 0 0 2rem; font-weight: var(--fw-bold); }
.cb-sb-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sb-votes { flex: 0 0 3.5rem; text-align: right; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.cb-sb-pts { flex: 0 0 3.5rem; text-align: right; color: var(--c-accent); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cb-scoreboard-list .cb-sb-head { background: transparent; padding-top: 0; padding-bottom: var(--sp-0); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); font-weight: var(--fw-bold); }
.cb-scoreboard-list .cb-sb-head .cb-sb-pts, .cb-scoreboard-list .cb-sb-head .cb-sb-votes { color: var(--c-text-muted); font-weight: var(--fw-bold); }
.cb-admin-board { margin-top: var(--sp-2); }
.cb-admin-board ol { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
/* Clip-Battle-Historie: Voting-Punkte im aufgeklappten Eintrag */
.cbh-board-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.cbh-board-list li { display: flex; align-items: center; gap: var(--sp-2); }
.cbh-rank { flex: 0 0 2.2rem; font-weight: var(--fw-bold); color: var(--c-text-muted); }

/* ---------- Clip-Battle (Admin) ---------- */
.cb-panel { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.cb-panel-title { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-lg); margin: 0 0 var(--sp-4); }
.cb-field { margin-bottom: var(--sp-3); }
/* Felder werden auch als <label class="cb-field"> gebaut – als Inline-Element griffe der Abstand sonst nicht. */
label.cb-field:not([hidden]) { display: block; }
.adm-input {
    width: 100%;
    background: var(--c-bg); border: 1px solid var(--c-control-border);
    color: var(--c-text); font: inherit;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
}
.adm-input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--c-accent); }
/* iOS-Safari zeichnet Datums-/Zeitfelder im System-Aussehen mit eigener Mindestbreite und ignoriert dann
   width/min-width: Sie ragen am Handy über ihre Kachel (z. B. Start/Ende der Stream-Statistik). Ohne das
   System-Aussehen gelten die normalen Maße. Die Abfrage trifft nur iOS, sonst bleibt alles unverändert. */
@supports (-webkit-touch-callout: none) {
    input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
        -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%;
    }
    input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])::-webkit-date-and-time-value {
        text-align: left; min-height: 1.5em;   /* leeres Feld fällt sonst auf Höhe 0 zusammen */
    }
}
/* Schieberegler; der Wert steht im <output for> im Label (util.js hält ihn aktuell). */
.adm-range { display: block; width: 100%; max-width: 22rem; margin: var(--sp-1) 0 0; accent-color: var(--c-accent); cursor: pointer; }
.adm-range:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.adm-label output { font-variant-numeric: tabular-nums; color: var(--c-text); }
.cb-subtitle { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
/* Anlege-Formular innerhalb einer Kachel (data-reveal-panel ohne eigene Kachel): Überschrift links, Schließen rechts */
.reveal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.reveal-head > .cb-subtitle { margin: 0; }
[data-reveal-panel]:not(.cb-panel) { margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
/* Clips & Punkte: gestufte Aktualisierung (low/mid/high) */
.cu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); margin: var(--sp-2) 0; }
.cu-tier { background: var(--c-surface-1); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.cu-tier-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.cu-tier-head strong { font-size: var(--fs-md); }
.cu-tier-head .cb-hint { line-height: 1.3; }
/* Button unabhängig von der Kopf-Höhe (ein- oder zweizeiliger Hinweis) einheitlich am unteren Rand. */
.cu-btn { width: 100%; margin-top: auto; }
/* Stufenfarben: Low grün, Mid amber, High gold. */
.cu-btn[data-tier="low"]  { --rc: var(--c-rarity-uncommon); }
.cu-btn[data-tier="mid"]  { --rc: var(--c-accent); }
.cu-btn[data-tier="high"] { --rc: var(--c-rarity-legendary); }
.cu-last { margin: 0; font-size: var(--fs-xs); }
.cb-admin-winner { color: var(--c-accent); font-weight: var(--fw-bold); }

/* Postfach-Glocke im Header: Zähler-Bubble */
.bell-badge {
    position: absolute;
    top: 0; right: -2px;
    min-width: 16px; height: 16px;
    padding: 0 var(--sp-1);
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: .64rem; font-weight: var(--fw-heavy);
    line-height: 16px; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Postfach-Liste */
.pf-list { display: grid; gap: var(--sp-2); }
.pf-item {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.pf-item.is-unread {
    border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
    background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-1));
}
.pf-head {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); cursor: pointer;
}
.pf-head:hover { background: color-mix(in srgb, var(--c-accent) 5%, transparent); }
.pf-icon { font-size: var(--fs-xl); flex-shrink: 0; }
.pf-title {
    flex: 1; min-width: 0;
    font-family: var(--font-sans); font-weight: var(--fw-bold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-item.is-unread .pf-title::before {
    content: "●"; color: var(--c-accent); margin-right: var(--sp-2); font-size: .7em; vertical-align: middle;
}
.pf-date { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pf-chevron { color: var(--c-text-muted); flex-shrink: 0; transition: transform var(--dur-base) var(--ease); }
.pf-item:not(.is-collapsed) .pf-chevron { transform: rotate(180deg); }
.pf-del {
    flex-shrink: 0; background: transparent; border: 0; color: var(--c-text-muted);
    font-size: var(--fs-md); cursor: pointer; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
}
.pf-del:hover { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 12%, transparent); }
.pf-text { padding: 0 var(--sp-4) var(--sp-3); color: var(--c-text); }

/* Markdown-Inhalte (Postfach-Body + Editor-Vorschau) */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: var(--sp-2) 0; overflow-wrap: anywhere; }
.md ul, .md ol { margin: var(--sp-2) 0; padding-left: var(--sp-5); }
.md li { margin: var(--sp-1) 0; }
.md em { font-style: italic; color: inherit; }
.md strong { color: inherit; }
.md a { color: var(--c-accent); }
.md code { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: .05rem var(--sp-1); font-size: .9em; }
.md h3, .md h4, .md h5 { font-family: var(--font-sans); margin: var(--sp-2) 0 var(--sp-1); }

/* Markdown-Editor (Admin-Nachrichten) */
.md-toolbar { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.md-btn {
    min-width: 30px; height: 30px; padding: 0 var(--sp-2);
    border: 1px solid var(--c-border-strong); background: var(--c-bg); color: var(--c-text);
    border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); line-height: 1;
}
.md-btn:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.md-hint { margin-left: auto; color: var(--c-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.md-preview {
    margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
    border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); background: var(--c-bg);
}
.md-preview::before {
    content: "Vorschau"; display: block;
    color: var(--c-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sp-1);
}

/* Leaderboard-Name in der Vergabe-Historie (Admin) */
.aw-board { color: var(--c-text-muted); font-size: var(--fs-xs); }
/* Boards der Monatswertung: Schalter mit Name, rechts die Plätze. */
.aw-boards { display: flex; flex-direction: column; gap: var(--sp-2); }
.aw-board-row { align-items: center; justify-content: space-between; margin-bottom: 0; }

/* Kontoübersicht */
.acc-user { display: inline-flex; align-items: center; gap: var(--sp-2); }
.acc-avatar { width: 28px; height: 28px; border-radius: var(--r-round); object-fit: cover; flex-shrink: 0; }
.acc-avatar--empty { display: grid; place-items: center; background: var(--c-bg); border: 1px solid var(--c-border); font-weight: var(--fw-bold); font-size: var(--fs-xs); color: var(--c-text-muted); }
.acc-detail > td { background: var(--c-bg); }
.acc-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-1) 0; }
.acc-stats-note { color: var(--c-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; width: 100%; }
.acc-stat {
    display: inline-flex; flex-direction: column; gap: .05rem;
    padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md);
    background: var(--c-surface-1); border: 1px solid var(--c-border);
}
.acc-stat-label { color: var(--c-text-muted); font-size: var(--fs-xs); }
.acc-stat-val { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Follower: aufklappbare Zeilen mit Platzierungen + letzten Chatnachrichten */
.fl-row { cursor: pointer; }
.fl-row.is-open > td { border-bottom-color: transparent; }
.fl-msgs { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) 0 var(--sp-1); }
.fl-msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.fl-msg { display: flex; gap: var(--sp-3); align-items: baseline; line-height: 1.4; }
.fl-msg-time { color: var(--c-text-muted); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-msg-text { overflow-wrap: anywhere; }

/* Nachrichten-Compose (Admin) */
.msg-icon { width: 5rem; text-align: center; font-size: var(--fs-lg); }
.msg-row { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.msg-field--icon { flex: 0 0 auto; margin-bottom: var(--sp-3); }
.msg-field--grow { flex: 1; min-width: 200px; }

/* Suchliste (StreamhubUtil.combo): Suchfeld mit Trefferliste, auch in Auswahllisten und durchsuchbaren Dropdowns */
.combo { position: relative; }
.combo > input { width: 100%; }
.combo-list {
    position: absolute; z-index: var(--z-dropdown); left: 0; right: 0; top: calc(100% + var(--sp-1));
    max-height: 260px; overflow-y: auto;
    margin: 0; padding: var(--sp-1); list-style: none;
    background: var(--c-surface-1); border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    box-shadow: var(--shadow-overlay);
}
.combo-opt {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2);
    padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); cursor: pointer;
}
.combo-opt:hover { background: color-mix(in srgb, var(--c-accent) 20%, var(--c-bg)); }
.combo-opt img { width: 26px; height: 36px; object-fit: cover; border-radius: var(--r-xs); flex: 0 0 auto; }
.combo-opt.is-selected .combo-opt-label { font-weight: var(--fw-semibold); }
.combo-opt.is-missing { color: var(--c-danger-text); }
.combo-empty { padding: var(--sp-2) var(--sp-2); color: var(--c-text-muted); }
/* Durchsuchbares Dropdown: Suchfeld liegt über dem Dropdown, die Liste darunter (is-up: darüber) */
.sel-search { position: fixed; z-index: calc(var(--z-dialog) + 1); }
.sel-search.is-up .combo-list { top: auto; bottom: calc(100% + var(--sp-1)); }
/* Gespeicherter Wert fehlt in der Liste (selectHtml opts.missing, missingSelectAttrs) */
select:has(option[data-missing]:checked) { border-color: var(--c-danger); color: var(--c-danger-text); }
select:has(option[data-missing]:checked) option:not([data-missing]) { color: var(--c-text); }

/* Tag-Feld (StreamhubUtil.tagField): Chips mit × wie bei Twitch, getippt wird dahinter; .tag-chip auch statisch in Kacheln */
.tag-field {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    min-height: 2.6rem; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-2); cursor: text;
    background: var(--c-surface-2); border: 1px solid var(--c-control-border); border-radius: var(--r-md);
    transition: border-color var(--dur-fast) var(--ease);
}
.tag-field:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--c-accent); }
.tag-field.is-invalid, .tag-field.is-invalid:focus-within { border-color: var(--c-danger); outline-color: var(--c-danger); }
.tag-field-list { display: contents; list-style: none; margin: 0; padding: 0; }
.tag-field-input {
    flex: 1 1 8rem; min-width: 6rem; padding: var(--sp-1) var(--sp-1);
    background: transparent; border: 0; outline: 0; color: var(--c-text); font: inherit;
}
.tag-field-input:focus, .tag-field-input:focus-visible { outline: none; box-shadow: none; }
.tag-field.is-full .tag-field-input { flex-basis: 1rem; min-width: 1rem; }
.tag-field-count { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.tag-field.is-full .tag-field-count { color: var(--c-accent); }
.tag-field-msg { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-danger-text); }
.tag-field-msg[hidden] { display: none; }
.tag-chip {
    display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%;
    padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
    background: var(--c-surface-1); border: 1px solid var(--c-border-strong);
    color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-tight);
}
.tag-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-field .tag-chip { padding-right: var(--sp-1); }
.tag-chip-x {
    position: relative;
    display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; padding: 0;
    border: 0; border-radius: var(--r-round); background: transparent; color: var(--c-text-muted); cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tag-chip-x:hover { background: color-mix(in srgb, var(--c-danger) 22%, transparent); color: var(--c-danger-text); }
.tag-chip-x:focus-visible { outline: var(--focus-ring); outline-offset: 0; }
.tag-chip-x .ic { width: .8rem; height: .8rem; }
.tag-chip-x::after { content: ""; position: absolute; inset: calc(-1 * var(--sp-0)); }   /* Trefferfläche ≥ 24 px */
@media (pointer: coarse) { .tag-chip-x { width: 1.75rem; height: 1.75rem; margin: calc(-1 * var(--sp-1)) -.1rem calc(-1 * var(--sp-1)) 0; } }
.tag-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Auswahlliste (StreamhubUtil.pickListHtml / sceneListHtml): gewählte Einträge als Chips, „＋“ öffnet eine Suche */
.pick-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.pick-list-items { margin: 0; padding: 0; list-style: none; }
.pick-list-items:empty { display: none; }
.pick-list .tag-chip { padding-right: var(--sp-1); }
.pick-list-add { width: auto; }
.pick-list-add[hidden], .pick-list-combo[hidden] { display: none; }
.pick-list-combo { flex: 1 1 16rem; max-width: 24rem; }
.pick-item.is-missing { border-color: var(--c-danger); color: var(--c-danger-text); background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface-1)); }
.pick-item-warn { width: 1rem; height: 1rem; border-color: var(--c-danger); color: var(--c-danger-text); flex: 0 0 auto; }
.combo-opt.is-active { background: color-mix(in srgb, var(--c-accent) 20%, var(--c-bg)); }
.combo-opt.is-disabled { color: var(--c-text-muted); cursor: not-allowed; }
.combo-opt.is-disabled:hover { background: none; }
.combo-opt .cb-hint { margin-left: auto; font-size: var(--fs-xs); }

/* Emotes in Textfeldern (StreamhubUtil.emoteField): Vorschläge nach „:" und Vorschau mit Bildern */
.emote-img { height: 1.75em; width: auto; max-width: 4.5em; vertical-align: middle; object-fit: contain; }
.emote-opt { display: flex; align-items: center; gap: var(--sp-2); }
.emote-opt small { margin-left: auto; color: var(--c-text-muted); }
.emote-opt.is-active { background: color-mix(in srgb, var(--c-accent) 20%, var(--c-bg)); }
.emote-preview { padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.emote-preview[hidden] { display: none; }
/* Chattexte mit data-emotes (StreamhubUtil.emoteField): Liste schwebt am Feld (auch in Dialogen), Vorschau nur mit Emotes im Text. */
.emote-list--float { position: fixed; right: auto; top: auto; z-index: calc(var(--z-dialog) + 1); }
.emote-preview--auto { margin-top: var(--sp-2); font-size: var(--fs-sm); }

/* ---------- Scrollbars global aufhübschen (wie die Item-Tabelle) ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--c-accent) 55%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-surface-1); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-accent) 50%, var(--c-border-strong)); border-radius: var(--r-pill); border: 2px solid var(--c-surface-1); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--c-accent) 70%, var(--c-border-strong)); }

/* ---------- Actionboard (Admin) ---------- */
.ab-icon { font-size: var(--fs-lg); width: 1.8rem; text-align: center; }
.ab-val { font-variant-numeric: tabular-nums; font-weight: var(--fw-heavy); min-width: 3.5rem; text-align: right; }
.ab-row.type-timer .ab-val { color: var(--c-accent); }
.ab-row.type-counter .ab-val { color: var(--c-info); }
/* Scoreboard-Rangliste (/admin/leaderboard): Punkte direkt in der Zeile ändern (−1 / Wert / +1). */
.sb-score { display: inline-flex; align-items: center; gap: var(--sp-1); }
.sb-points { font-weight: var(--fw-bold); }
/* Win-Challenge (/admin/winchallenge): Stand oben (erledigt, Zeit, Leben), Einträge mit Haken bzw. −1 / Stand / +1. */
.wc-live { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.wc-stat { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 5rem; }
.wc-stat-value { font-size: var(--fs-xl); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.wc-text-field { flex: 1 1 16rem; }
.wc-row .sb-score .btn { width: auto; padding: var(--sp-1) var(--sp-2); }
.wc-count { font-variant-numeric: tabular-nums; }
.wc-row.is-done .cmd-name { color: var(--c-text-muted); text-decoration: line-through; }

/* Bingo (/admin/bingo): Karte zum Anklicken (Raster nach Größe), markierte Felder mit Akzentfläche, Bingo-Linien mit Rahmen. */
.bg-board { margin-top: var(--sp-4); }
.bg-board-grid { display: grid; grid-template-columns: repeat(var(--size, 5), minmax(0, 1fr)); gap: var(--sp-1); max-width: calc(var(--size, 5) * 6.5rem); }
.bg-board-cell {
    aspect-ratio: 1; min-width: 0; padding: var(--sp-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-text);
    font: inherit; font-size: var(--fs-xs); line-height: 1.2; text-align: center; cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.bg-board-cell:hover:not(:disabled) { border-color: var(--c-accent); }
.bg-board-cell:disabled { cursor: default; }
.bg-board-text { overflow-wrap: break-word; hyphens: auto; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bg-board-n { align-self: flex-start; line-height: 1; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.bg-board-cell.is-marked { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); font-weight: var(--fw-bold); }
.bg-board-cell.is-marked .bg-board-n { color: var(--c-on-accent); }
.bg-board-cell.is-line { box-shadow: 0 0 0 2px var(--c-success); }
.bg-board-cell.is-free { border-style: dashed; color: var(--c-accent); font-weight: var(--fw-bold); }
.bg-board-cell.is-empty { border-style: dashed; background: transparent; }
.bg-row.is-marked .cmd-name { color: var(--c-text-muted); }

.ab-quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ab-quick-btn { --rc: var(--c-accent); width: auto; border: 1px solid var(--rc); color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.ab-quick-btn:hover { background: color-mix(in srgb, var(--rc) 24%, transparent); }

.ab-qb-list { margin-top: var(--sp-4); }
.ab-qb-swatch { width: 14px; height: 14px; border-radius: var(--r-xs); flex: 0 0 auto; }
/* Actionboard-Trigger: feste 4 Spalten je Zeile, damit die Felder untereinander bündig stehen. */
.trg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
.trg-grid .trg-span2 { grid-column: span 2; }
.trg-sec { font-size: var(--fs-sm); color: var(--c-text-muted); margin: var(--sp-2) 0 var(--sp-2); }
.trg-form-head { margin-bottom: var(--sp-2); }
.trg-form-head .trg-sec { margin: 0; }
.trg-preview { margin: var(--sp-1) 0 var(--sp-4); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); }
@media (max-width: 1023.98px) { .trg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .trg-grid { grid-template-columns: minmax(0, 1fr); } .trg-grid .trg-span2 { grid-column: auto; } }

/* ---------- Umfragen ---------- */
/* Home-Widget */
.home-poll { margin-bottom: var(--sp-5); }
.hp-card { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.hp-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.hp-tag { color: var(--c-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.hp-timer { color: var(--c-accent); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.hp-status { color: var(--c-text-muted); font-size: var(--fs-sm); }
.hp-question { font-family: var(--font-sans); font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.hp-options { display: grid; gap: var(--sp-2); }
.hp-vote { text-align: left; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--c-border-strong); background: var(--c-bg); color: var(--c-text); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.hp-vote:hover { border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-bg)); }
/* Wahl-Button mit Live-Stimmen (vor dem Abstimmen) */
.hp-headr { display: flex; align-items: center; gap: var(--sp-2); }
.hp-vote--live { display: block; width: 100%; }
.hp-vote--live .hp-res-top { margin-bottom: var(--sp-1); font-weight: var(--fw-semibold); }
.hp-vote-track { display: block; height: 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-text) 8%, transparent); overflow: hidden; }
.hp-vote-fill { display: block; height: 100%; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-accent) 45%, transparent); transition: width var(--dur-slow) var(--ease); }
.hp-vote--live:hover .hp-vote-fill { background: color-mix(in srgb, var(--c-accent) 60%, transparent); }
.hp-results { display: grid; gap: var(--sp-2); }
.hp-res-top { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.hp-res-track { height: 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-text) 8%, transparent); overflow: hidden; }
.hp-res-fill { height: 100%; border-radius: var(--r-pill); background: var(--c-accent); transition: width var(--dur-slow) var(--ease); }
.hp-res.is-win .hp-res-fill { background: var(--c-accent); }
.hp-res.is-win .hp-res-top { color: var(--c-text); font-weight: var(--fw-bold); }
.hp-res.is-mine .hp-res-top { color: var(--c-accent); }
.hp-you { font-size: var(--fs-xs); color: var(--c-accent); }
.hp-hint { margin: var(--sp-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Admin-Umfragen */
.pl-opt-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pl-opt-row .pl-opt { flex: 1; }
.pl-presets-body[hidden] { display: none; }
.pl-presets-body .cmd-list { margin-top: 0; }
.pl-card { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: var(--sp-2); overflow: hidden; }
.pl-card.is-current { border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.pl-card summary { list-style: none; }
.pl-card summary::-webkit-details-marker { display: none; }
.pl-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); cursor: pointer; flex-wrap: wrap; }
.pl-card-q { font-weight: var(--fw-bold); }
.pl-card-meta { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.pl-card-body { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-2); }
.pl-card-date { color: var(--c-text-muted); font-size: var(--fs-xs); }
.pl-card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pl-card-actions .btn { width: auto; }
.pl-res-top { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
.pl-res-track { height: 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-text) 8%, transparent); overflow: hidden; margin-top: var(--sp-1); }
.pl-res-fill { height: 100%; background: var(--c-accent); }
.pl-voters { color: var(--c-text-muted); font-size: var(--fs-xs); margin-top: var(--sp-1); }
textarea.adm-input { resize: vertical; min-height: 3rem; font: inherit; line-height: 1.5; }

/* Gesperrte Admin-Kachel (keine Berechtigung) */

/* Twitch-Status (Partner/Affiliate): Symbol allein (vor Namen) oder als Pille mit Beschriftung */
.bt-badge { display: inline-flex; align-items: center; gap: var(--sp-1); vertical-align: middle; flex-shrink: 0; line-height: 1; color: color-mix(in srgb, var(--c-twitch) 55%, var(--c-text)); }
.bt-badge svg { width: 1em; height: 1em; flex-shrink: 0; }
.bt-partner { color: var(--c-twitch-text); }
.bt-badge--label { padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; border: 1px solid color-mix(in srgb, var(--c-twitch) 45%, transparent); background: color-mix(in srgb, var(--c-twitch) 14%, transparent); color: color-mix(in srgb, var(--c-twitch) 40%, var(--c-text)); }
.bt-badge--label svg { width: 1.1em; height: 1.1em; }
.bt-badge--label.bt-partner svg { color: var(--c-twitch); }
.bt-normal { color: var(--c-text-muted); font-size: var(--fs-xs); }

/* Editorenbereich: Social + Content + Shorts */


/* Verbundenes Konto (Social-Media-Accounts, Contentplanung) */
.soc-account { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.soc-avatar { width: 40px; height: 40px; border-radius: var(--r-round); object-fit: cover; flex: 0 0 auto; background: var(--c-border-strong); }
.soc-avatar-ph { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); }
.soc-accname { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Verbundener-Account-Streifen in den Plattform-Bereichen der Contentplanung */
.cp-conn { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.cp-conn .soc-avatar { width: 28px; height: 28px; }
.cp-conn-off { color: var(--c-text-muted); }
.cp-conn-off a { text-decoration: underline; }

/* Ticketverwaltung (Admin) */
.tk-amount { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
/* Name, Guthaben und Aktionen auf eine Linie mit den (höheren) Eingabefeldern bringen. */
#tk-users td { vertical-align: middle; }
.tk-up { color: var(--c-success); font-weight: var(--fw-bold); }
.tk-down { color: var(--c-danger-text); font-weight: var(--fw-bold); }

/* ---------- Commands (User-Reiter + Adminverwaltung) ---------- */
/* Beispiel-Editor (oberes Formular + Inline). */
.cmd-ex-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.cmd-ex-row { display: flex; align-items: center; gap: var(--sp-2); }
.cmd-ex-input { flex: 1 1 auto; min-width: 0; }
.cmd-ex-add { align-self: flex-start; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
.cmd-list { display: flex; flex-direction: column; margin-top: var(--sp-2); }
/* Listeneintrag ohne eigene Fläche, Trennlinie dazwischen (Runde 2, R2-5: keine Karten im Panel).
   Im Bearbeiten-Zustand hebt er sich als Fläche mit Akzentbalken ab. */
.cmd-row { border-top: 1px solid var(--c-border); padding: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cmd-row:first-child { border-top: 0; }
.cmd-row.is-editing { background: var(--c-surface-2); border-radius: var(--r-md); border-top-color: transparent;
    padding-inline: var(--sp-3); box-shadow: inset 3px 0 0 var(--c-accent); }
.cmd-row.is-editing + .cmd-row { border-top-color: transparent; }
.cmd-inline-form { margin-top: 0; gap: var(--sp-2); }
.cmd-row-main { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* Beschreibung gedämpft und höchstens zwei Zeilen (ganzer Text im title), damit jede Zeile gleich ruhig wirkt. */
.cmd-row-desc { font-size: var(--fs-sm); color: var(--c-text-muted); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Kurzfassung, was der Eintrag tut (z. B. „Einblendung · Ansage · Chat“): klein, gedämpft, normale Schrift. */
.cmd-row-meta { font-size: var(--fs-xs); color: var(--c-text-muted); overflow-wrap: anywhere; }
.cmd-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cmd-row-actions .btn { width: auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); white-space: nowrap; }
.cmd-row-actions .is-danger:hover { color: var(--c-danger-text); border-color: var(--c-danger-text); }
.cmd-row-actions .switch-row { margin: 0; }
/* Rückmeldung einer Zeilenaktion („Gespeichert.“, „In die Warteschlange gestellt …“): eigene Zeile unter den Knöpfen.
   contain: inline-size nimmt ihr die Eigenbreite, sie verbreitert die Aktionsspalte also nie und nichts verschiebt sich. */
.cmd-row-actions > .adm-status { flex: 1 0 100%; order: 1; contain: inline-size; margin: 0; }
/* Eintragszeile (seit 2026-10-15 überall wie die Alerts-Liste): links Name, Kennzeichen, Beschreibung und Vorschau,
   rechts die Aktionen in einer festen Spalte. Unter 640 px rutschen die Aktionen unter den Eintrag. Leere Zeilen des
   Rasters sind 0 hoch (row-gap 0), die Abstände links kommen aus margin-top. */
@media (min-width: 640px) {
    .cmd-row:has(> .cmd-row-actions) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-4); row-gap: 0; align-items: start; }
    .cmd-row:has(> .cmd-row-actions) > * { grid-column: 1; }
    .cmd-row:has(> .cmd-row-actions) > * + * { margin-top: var(--sp-2); }
    /* Nur die letzte Aktionsleiste steht rechts (weitere, z. B. „Auslösen“ bei Overlays, bleiben im Inhalt). */
    .cmd-row > .cmd-row-actions:not(:has(~ .cmd-row-actions)) {
        grid-column: 2; grid-row: 1 / span 12; margin-top: 0; justify-content: flex-end; align-items: center; max-width: 26rem;
    }
    .cmd-row > .cmd-row-actions:not(:has(~ .cmd-row-actions)) > .adm-status { text-align: end; }
    /* Aufgeklappter Teil einer Zeile (z. B. Anleitung in der Kachel Fernsteuern) über die volle Breite, unter Name und Knöpfen. */
    .cmd-row > .cmd-row-wide { grid-column: 1 / -1; }
}
/* Ab 1024 px ohne Breitengrenze: die Knöpfe stehen in einer Zeile (nur die Rückmeldung bricht darunter um). */
@media (min-width: 1024px) {
    .cmd-row > .cmd-row-actions:not(:has(~ .cmd-row-actions)) { max-width: none; }
}
/* Maßgeblich ist zusätzlich die Breite der Liste, nicht nur die des Fensters (z. B. Liste in einer halben Spalte oder
   einem Dialog): Unter 36rem nimmt die Aktionsspalte höchstens 45 % ein und bricht um, unter 22rem steht sie unter dem
   Eintrag. So wird der Name nie auf wenige Zeichen je Zeile gequetscht. */
.cmd-list { container-type: inline-size; }
@container (max-width: 36rem) {
    .cmd-row > .cmd-row-actions:not(:has(~ .cmd-row-actions)) { flex-wrap: wrap; max-width: 45cqi; }
}
/* Schmale Liste (Handy): Knöpfe mit Symbol zeigen nur das Symbol (Name bleibt für Screenreader), damit Schalter,
   Hauptaktion, Bearbeiten und ⋯ in eine Zeile passen und das ⋯ nie allein umbricht. */
@container (max-width: 24rem) {
    .cmd-row-actions .btn:has(> .ic:first-child) { font-size: 0; gap: 0; padding-inline: var(--sp-2); }
}
@container (max-width: 22rem) {
    .cmd-row:has(> .cmd-row-actions) { display: flex; align-items: stretch; }
    .cmd-row:has(> .cmd-row-actions) > * + * { margin-top: 0; }
    .cmd-row > .cmd-row-actions:not(:has(~ .cmd-row-actions)) { max-width: none; justify-content: flex-start; }
}
.cmd-row.is-off .cmd-name { color: var(--c-text-muted); }
.tmr-gap { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.tmr-gap .btn { width: auto; }
.tmr-state { margin: 0 0 var(--sp-3); }
.tmr-switches { display: flex; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; }
.tmr-next { font-size: var(--fs-xs); }

/* Steuer-API (/admin/api) – Bereiche untereinander, Token-Feld breit, Beispiel wie der KI-Datenblock */
.ca-scopes { flex-direction: column; margin: var(--sp-1) 0 var(--sp-3); }
#ca-token { flex: 1 1 18rem; min-width: 0; font-family: ui-monospace, Consolas, monospace; }
.ca-example {
    overflow-x: auto; white-space: pre; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: var(--sp-3); font-size: var(--fs-xs); color: var(--c-text-muted); margin: var(--sp-2) 0 0;
}

/* Steuer-API: Aufrufe je Bereich, Antwort scrollt statt die Seite zu dehnen */
.ca-group + .ca-group { margin-top: var(--sp-4); }
.ca-result { max-height: 18rem; overflow: auto; color: var(--c-text); }

/* Kachel Fernsteuern: aufgeklappte Zeile mit Feldern, darunter Stream Deck und Steuer-API, ab 1024 nebeneinander. */
.rm-detail { display: flex; flex-direction: column; gap: var(--sp-3); }
.rm-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); }
.rm-steps { margin: var(--sp-2) 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
@media (min-width: 1024px) { .rm-guide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Befehle auf der Community-Seite: eine Spalte, jede Gruppe ein eigener Kasten (StreamhubUtil.groupSectionHtml). */
.cmd-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.cmd-groups > .cmd-group { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 0 var(--sp-5); }
.cmd-groups > .cmd-groups .cmd-group-body { border-top: 1px solid var(--c-border); }
.cmd-groups .cmd-examples { flex-direction: row; flex-wrap: wrap; }
.cmd-groups .cmd-example { min-width: 0; max-width: 100%; }
/* Gruppen-Chips als eigene Zeile der Werkzeugleiste (feste Zeilenhöhe der Leiste gilt hier nicht, Chips brechen um). */
.lb-controls > #cmd-group-filter { flex: 1 1 100%; height: auto; min-width: 0; max-width: 100%; }
.lb-controls > #cmd-group-filter:empty { display: none; }
/* Im Studio stehen die Gruppen in der Kachel „Alle Befehle“: Kasten nur mit Rahmen (kein Kasten-in-Kasten-Grund). */
.cb-panel .cmd-groups > .cmd-group { background: transparent; padding: 0 var(--sp-4); }
/* Karten unter Gruppen (StreamhubCards mit groups, Seite Automatik): Raster im Abschnitt, Suche direkt über den Gruppen. */
.svc-groups > .cmd-group > .svc-grid.cmd-group-body { padding-bottom: var(--sp-4); }
.cmd-groups.svc-groups { margin-top: 0; }
/* Adminliste: Zeile mit Aktionen rechts (.adm-list-row) ohne doppelten Innenabstand, Details aufklappbar. */
.cmd-row > .adm-list-row { padding: 0; }

/* Befehlsliste: Blöcke nach Herkunft (Eigene, Aus Funktionen, Fest eingebaut) mit zuklappbaren Gruppen (commands-admin.js). */
.cmd-section-head { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-sm);
    font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.cmd-section-head:first-child { margin-top: 0; }
.cmd-group + .cmd-group { border-top: 1px solid var(--c-border); }
.cmd-group-toggle.cb-panel-toggle { margin-block: 0; padding-block: var(--sp-3); }
.cmd-group-name { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--c-text); }
.cmd-group-body { padding-bottom: var(--sp-2); }
/* Abschnittskopf mit Aktion (Link „Zur Funktion“): Aktion rechts, der Pfeil bleibt wie bei .cb-panel-head ganz oben rechts. */
.cmd-group-head { display: flex; align-items: center; gap: var(--sp-2); position: relative; padding-right: var(--sp-5); }
.cmd-group-head > .cmd-group-toggle { flex: 1 1 auto; min-width: 0; width: auto; }
.cmd-group-head > .cmd-group-toggle .cb-panel-caret { position: absolute; right: 0; }
.cmd-group-actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.cmd-group-actions .btn { width: auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); white-space: nowrap; }

.cmd-examples { display: flex; flex-direction: column; gap: var(--sp-1); }
/* Weitere Schreibweisen (Aliase) als dezente Chips. */
.cmd-alias { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-xs); color: var(--c-text-muted); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: var(--sp-0) var(--sp-2); }
/* Kopier-Button (Befehl / Beispiel). */
.cmd-copy { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto; padding: 0; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-text-muted); cursor: pointer; transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.cmd-copy:hover { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.cmd-copy.is-copied { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 55%, transparent); }
.cmd-copy.is-failed { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger-text) 55%, transparent); }

.cmd-name { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--c-accent); overflow-wrap: anywhere; min-width: 0; }
.cmd-example { display: flex; align-items: center; gap: var(--sp-2); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-sm); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2); color: var(--c-text); }
.cmd-example-text { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; }
.cmd-example .cmd-copy { width: 24px; height: 24px; }
.cmd-role--Moderator { --rc: var(--c-info); }   /* Form aus .tag (Kennzeichen-Block) */
.cmd-role--SuperAdmin { --rc: var(--c-accent); }
/* Fest eingebauter Server-Befehl (Command-Verwaltung): nicht löschbar, Sichtbarkeit fest. */
.cmd-row-function { font-size: var(--fs-sm); }
/* Antwort im Chat: Merkmale, Vorschau der Antwort, Variablen-Chips im Formular. */
/* Seltenheit als Chip (Punktevergabe der Wöchentlichen Rangliste). */
.tag[data-rarity] { --rc: var(--c-rarity-common); color: var(--rc); border-color: color-mix(in srgb, var(--rc) 45%, transparent); }
.tag[data-rarity="uncommon"]  { --rc: var(--c-rarity-uncommon); }
.tag[data-rarity="rare"]      { --rc: var(--c-rarity-rare); }
.tag[data-rarity="epic"]      { --rc: var(--c-rarity-epic); }
.tag[data-rarity="legendary"] { --rc: var(--c-rarity-legendary); }
/* Stufen-Zeilen im Inline-Formular: auf schmalen Bildschirmen umbrechen, Text dann in eigener Zeile. */
.cmd-ex-row.pv-step { flex-wrap: wrap; }
/* Punktevergabe-Formular: Kopf (Name + Aktiv), Box „Punkte“, Box „Benachrichtigung“ mit gleichem Abstand. */
.pv-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.pv-form > .adm-actions { margin-top: var(--sp-2); }   /* gap --sp-3 + --sp-2 = Abstand vor Aktionen --sp-5 */
/* Benachrichtigung: Symbol (schmal) und Titel immer in einer Zeile. */
.pv-note-head { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-2) var(--sp-4); }
.pv-s-group { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
/* Feste Punkte-Zeilen (ohne Schwelle): Bezeichnung gleich breit, damit die Punktefelder bündig stehen. */
.cmd-ex-row.pv-step[data-fixed] > .pv-s-group:first-child { min-width: 6.5rem; }
.cmd-ex-row.pv-step .pv-s-rarity { flex: 0 1 12rem; }
.cmd-ex-row.pv-step .pv-s-text { flex-basis: 12rem; }
@media (max-width: 639.98px) {
    .cmd-ex-row.pv-step { padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--c-border); }
}
.cmd-reply-preview { font-size: var(--fs-sm); color: var(--c-text-muted); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.cmd-reply { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); }
.cmd-reply-fields { display: flex; flex-direction: column; gap: var(--sp-2); }
.cmd-reply-switches { display: flex; align-items: center; gap: var(--sp-1) var(--sp-5); flex-wrap: wrap; }
.cmd-reply-target, .cmd-reply-shared { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cmd-reply-target[hidden] { display: none; }
.cmd-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; padding: 0; border-radius: var(--r-round); border: 1px solid var(--c-border-strong); background: none; color: var(--c-text-muted); font-family: inherit; font-size: .7rem; font-weight: var(--fw-bold); line-height: 1; cursor: pointer; user-select: none; }
.cmd-tip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* Trefferfläche mindestens 24 px, ohne das Symbol zu vergrößern. */
.cmd-tip::after { content: ""; position: absolute; inset: calc(-1 * var(--sp-1)); }
/* Blase zum „i“ (Tipp/Klick/Enter, util.js) – auf Touch-Geräten gibt es keinen title-Tooltip. */
.tip-pop {
    position: fixed; z-index: calc(var(--z-dialog) + 1); max-width: min(18rem, calc(100vw - 16px));
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
    background: var(--c-surface-2); color: var(--c-text); box-shadow: var(--shadow-overlay);
    font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-tight);
    text-transform: none; letter-spacing: normal; white-space: normal;
}
.cmd-group-pick, .rl-cmd-pick { display: flex; flex-direction: column; gap: var(--sp-2); }
.cmd-vars { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.cmd-vars[hidden] { display: none; }
/* Variablen eines Felds (StreamhubUtil.varChipsBox) sind nur Datenquelle: Das Seitenpanel zeigt sie je gewähltem Feld. */
.cmd-vars[data-vars-for] { display: none; }
/* Ziehen einer Variable aus dem Seitenpanel: passende Felder markiert. */
.is-var-dragging .is-var-target { outline: 2px dashed var(--c-accent); outline-offset: 2px; }
.cmd-var { min-height: 24px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-text); cursor: pointer; }
.cmd-var:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); color: var(--c-accent); }
a.tag--link { text-decoration: none; }
a.tag--link:hover { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }

/* ---------- Admin: Overlays (/admin/overlays: Einstellungen, /admin/overlays/code: Code bearbeiten) ---------- */
.ov-help-list { margin: var(--sp-1) 0 var(--sp-2) var(--sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }
.ov-help-list code, .ov-help code { overflow-wrap: anywhere; }
.ov-size, .ov-inline { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); }
.ov-url { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.ov-url .adm-input { flex: 1 1 18rem; min-width: 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-xs); }
.ov-url .btn, .ov-row .btn, .ov-tests .btn, .cb-panel-actions .btn { width: auto; }

/* Editor links, Vorschau rechts (mitlaufend); schmal untereinander. */
.ov-ed-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); align-items: start; }
.ov-ed-grid > .cb-panel ~ .cb-panel { margin-top: 0; }
/* Vorschau ohne eigenen Kachelrahmen (Einstellungen unter einer Karte, Funktionsseite): Kopf wie eine Zwischenüberschrift. */
.ov-ed-preview--inline > .cb-panel-head { margin-bottom: var(--sp-3); }
.ov-ed-preview { position: sticky; top: 1rem; }
@media (max-width: 1023.98px) { .ov-ed-grid { grid-template-columns: minmax(0, 1fr); } .ov-ed-preview { position: static; } }
.ov-pane .CodeMirror, .ov-code-fallback { height: min(68vh, 760px); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font-size: 13px; }
.ov-code-fallback { width: 100%; resize: vertical; }
.ov-mono, .ov-code-fallback { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-sm); }

/* Zeilen der Reiter Einstellungen / Aktionen / Datenquellen */
.ov-rows { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.ov-row { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.ov-row-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ov-row-head .adm-label { margin: 0; }
.ov-row-tools { margin-left: auto; display: inline-flex; gap: var(--sp-1); }
.ov-row-tools .btn { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.ov-schema { border-top: 1px dashed var(--c-border-strong); padding-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.ov-color { width: 42px; height: 34px; padding: 0; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: none; cursor: pointer; }
.ov-asset-main { flex-direction: row; align-items: center; gap: var(--sp-2); }
.ov-asset-thumb { width: 56px; height: 40px; object-fit: contain; border-radius: var(--r-sm); background: repeating-conic-gradient(#2a2a33 0% 25%, #1c1c22 0% 50%) 50% / 12px 12px; }

/* Reiter „Anpassen“: Abschnitte mit Feldern im Raster, breite Felder (Text, Liste) über die ganze Breite. */
.ov-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-3) var(--sp-4); }
.ov-group:not([hidden]) ~ .ov-group { margin-top: var(--sp-5); }
.ov-group > .cb-subtitle { grid-column: 1 / -1; margin: 0; }
.ov-c { margin: 0; min-width: 0; }
.ov-c--wide { grid-column: 1 / -1; }
.ov-range { display: flex; align-items: center; gap: var(--sp-3); }
.ov-range-input { flex: 1 1 auto; min-width: 6rem; accent-color: var(--c-accent); }
/* Position: 3×3-Raster, gewähltes Feld in der Akzentfarbe, nicht erlaubte blass. */
.ov-pos { display: inline-grid; grid-template-columns: repeat(3, 2.25rem); grid-template-rows: repeat(3, 1.5rem); gap: var(--sp-1);
    padding: var(--sp-1); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); vertical-align: middle; }
.ov-pos-cell { display: grid; place-items: center; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface-1); cursor: pointer; }
.ov-pos-cell span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-text-muted); }
.ov-pos-cell:hover:not(:disabled) { border-color: var(--c-border-strong); }
.ov-pos-cell.is-active { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 18%, transparent); }
.ov-pos-cell.is-active span { background: var(--c-accent); }
.ov-pos-label { margin-left: var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-sm); }
/* Platzierung: Raster links, Abstände und Größe daneben, schmal untereinander. */
.ov-place { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3) var(--sp-5); }
.ov-place-anchor { display: flex; align-items: center; }
.ov-place-fields { flex: 1 1 20rem; margin-bottom: 0; }
.ov-place-fields > .ov-place-size { flex: 1 1 14rem; }
.ov-media { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ov-media .btn { width: auto; }
.ov-thumb { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); border: 1px solid var(--c-border); overflow: hidden;
    background: repeating-conic-gradient(#2a2a33 0% 25%, #1c1c22 0% 50%) 50% / 12px 12px; }
.ov-thumb img, .ov-thumb video { width: 100%; height: 100%; object-fit: contain; }
/* Bedingte Felder (showIf): verborgene Felder und Abschnitte ohne sichtbare Felder. */
.ov-group[hidden], .ov-c[hidden] { display: none; }
/* Liste: Spalten nebeneinander, Werkzeuge rechts; ist die Spalte schmal, zwei Felder je Zeile und Werkzeuge darunter. */
.ov-list { display: flex; flex-direction: column; gap: var(--sp-2); container-type: inline-size; }
.ov-list-head, .ov-list-row { display: grid; grid-template-columns: repeat(var(--ov-list-cols), minmax(0, 1fr)) auto; gap: var(--sp-2); align-items: center; }
.ov-list-head span { color: var(--c-text-muted); font-size: var(--fs-xs); }
.ov-list-tools { display: inline-flex; gap: var(--sp-1); }
.ov-list-tools .btn { width: auto; padding: var(--sp-1) var(--sp-2); }
/* Abstand vor der Aktionszeile bleibt --sp-5, der Spaltenabstand der Liste zählt mit. */
.ov-list > .adm-actions { margin-top: calc(var(--sp-5) - var(--sp-2)); }
@container (max-width: 36rem) {
    .ov-list-head { display: none; }
    .ov-list-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
    .ov-list-tools { justify-self: end; }
}

/* Vorschau: Iframe in Originalgröße der Browserquelle, per transform auf die Panelbreite skaliert.
   max-width: none hebt das Mobil-Sicherheitsnetz (iframe max-width: 100%) auf – sonst wäre der Viewport
   des Overlays nur so breit wie das Panel und alles rechts/mittig Verankerte stünde an der falschen Stelle. */
.ov-preview { position: relative; width: 100%; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); }
/* color-scheme normal: sonst malt der Browser hinter dem Overlay im dunklen Thema eine helle Fläche. */
.ov-preview iframe { position: absolute; top: 0; left: 0; max-width: none; border: 0; transform-origin: 0 0; background: transparent; color-scheme: normal; }
/* Bewusst feste Farben: Vorschau-Hintergründe wie in OBS (Schachbrett, dunkel, hell, Greenscreen), unabhängig vom Theme. */
.ov-preview.is-checker { background: repeating-conic-gradient(#2a2a33 0% 25%, #1c1c22 0% 50%) 50% / 24px 24px; }
.ov-preview.is-dark { background: #0d0d11; }
.ov-preview.is-light { background: #e9e9ee; }
.ov-preview.is-green { background: #00b140; }
.ov-errors ul { margin: var(--sp-1) 0 0 var(--sp-4); padding: 0; }

/* ---------- Admin: Zähler (/admin/counters) ---------- */
.ct-reply { margin-bottom: var(--sp-3); }
:is(.adm-label, .cb-subtitle) .cmd-tip { margin-left: var(--sp-1); vertical-align: middle; }
.ct-media { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ct-media video, .ct-media img { width: 220px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--c-media); border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); }
.ct-media .btn { width: auto; }

/* Alerts (/admin/streamalerts): Ereignis-Liste wie jede Eintragsliste (.cmd-row), Editor unter der Zeile, Medienauswahl je Variante */
.sa-type-editor.is-dirty { box-shadow: inset 3px 0 0 var(--c-warning); }
/* Befehle: OBS-Ziele (Szene + Quelle bzw. Quelle + Filter) */
/* Zeilenliste (StreamhubUtil.rowList/rowListHtml/rowDelHtml): Zeilen untereinander, darunter „＋ …“ */
.row-list-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.row-list-rows:not(:empty) { margin-bottom: var(--sp-2); }
.row-list-rows:not(:empty) ~ .row-list-empty { display: none; }
.row-list-empty { margin: 0 0 var(--sp-2); }
.row-list-add, .row-list-del { width: auto; }
/* Zeile „Person + Stimme“ (StreamhubUtil.voicePersonRowHtml) */
.voice-person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--sp-2); align-items: center; }
.voice-person:has([data-tts-preview]) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto auto; }
@media (max-width: 639.98px) { .voice-person, .voice-person:has([data-tts-preview]) { grid-template-columns: 1fr auto auto; } .voice-person .vp-login { grid-column: 1 / -1; } }
.cmd-obs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; }
.cmd-obs-row[data-obs-kind="media"] { grid-template-columns: minmax(0, 1fr) auto; }
/* Chat-Automatik: eigene Stimmen je Person */
#ca-tts .sa-voice-row { margin-bottom: var(--sp-3); }
.sa-variants { margin-bottom: var(--sp-2); }
/* Reaktions-Blöcke der Alerts: überall derselbe Abstand – Unterbereiche als Spalte mit .6rem, Felder
   ohne eigenen Außenabstand (Chips-Abstand: siehe .cmd-vars). */
.sa-variant .cmd-reply,
.sa-show, .sa-tts { display: flex; flex-direction: column; gap: var(--sp-2); }
:is(.sa-show, .sa-tts)[hidden] { display: none; }
.sa-variant .cmd-reply :is(.cb-field, .cr-switches) { margin: 0; }
.sa-variant .cmd-reply .switch-row { align-self: flex-start; }
.sa-voice-row { display: flex; align-items: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.sa-voice-row .cb-field { flex: 1 1 260px; margin: 0; }
.sa-voice-row .btn { width: auto; }

/* Kanalpunkte (/admin/channelrewards) */
.cr-switches { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-1) 0 var(--sp-2); }
.cr-switches .switch-row { margin: 0; }
.cr-color { width: .85rem; height: .85rem; border-radius: var(--r-round); border: 1px solid var(--c-border-strong); flex: 0 0 auto; }
.cr-edit .cb-subtitle, .cr-redeem .cb-subtitle { margin: var(--sp-2) 0 var(--sp-2); }
/* Beim Einlösen (docs/58): Automatiken der Belohnung unter den Twitch-Einstellungen. */
.cr-redeem { margin-top: var(--sp-5); }
/* Feste Antworten im Regel-Editor (Feldtyp pairs): Wort → Antwort. */
.rl-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 2fr) auto; gap: var(--sp-2); align-items: center; }
.rl-pair .btn { width: auto; }
@media (max-width: 639.98px) {
    .rl-pair { grid-template-columns: 1fr auto; }
    .rl-pair > span { display: none; }
}
/* Bausteine „Was soll passieren?“ unter den Automatiken einer Belohnung bzw. eines Befehls. */
.rl-anchor-add { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.rl-anchor-add .adm-actions { margin-top: var(--sp-2); }
.rl-media-rows { margin-bottom: var(--sp-2); }
.sa-media { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); }
.sa-media-item { display: flex; flex-direction: column; gap: var(--sp-1); width: 220px; max-width: 100%; }
.sa-media-item video, .sa-media-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--c-media); border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); }
.sa-media-item .cb-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-media-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.sa-media-actions .btn { width: auto; padding: var(--sp-1) var(--sp-2); }

/* Von-Twitch-importieren-Modal */

/* Button-Rückmeldung beim Speichern */
/* Läuft gerade (StreamhubUtil.lock): gesperrt über aria-disabled, Fokus bleibt, nur der Mauszeiger zeigt das Warten. */
.btn.is-busy { cursor: progress; }

/* Playhead-Linie ziehen: keine Text-/Spurmarkierung */
.ve.is-scrubbing, .ve.is-scrubbing * { user-select: none; -webkit-user-select: none; }

/* ── Video-Export: auffälliger Fortschritt ── */

/* Caption-Editor */

.cap-progress { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.cap-progress-bar { flex: 1 1 auto; height: .55rem; background: var(--c-surface-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); overflow: hidden; }
.cap-progress-bar > span { display: block; height: 100%; width: var(--w, 0); border-radius: var(--r-pill); background: var(--c-accent); transition: width var(--dur-slow) var(--ease); }
.cap-progress-pct { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-text-muted); font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }

/* Abschnitts-Überschriften in "Geplant & veröffentlicht" */
.cp-section { margin: var(--sp-4) 0 var(--sp-1); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--c-border-strong); }
.cp-section:first-child { margin-top: var(--sp-1); }

/* Contentplanung: Formular in voller Breite – links Felder, rechts große Vorschau */
.cp-form-grid { display: grid; grid-template-columns: 1fr minmax(260px, 360px); gap: var(--sp-5); align-items: start; }
@media (max-width: 1023.98px) { .cp-form-grid { grid-template-columns: 1fr; } }
.cp-form-fields { order: 1; display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
/* Vorschau rechts, sticky unterhalb des fixierten Headers (gleiche Höhe wie .gw-side), damit sie
   beim Scrollen nicht hinter dem Header verschwindet. */
.cp-form-media { order: 2; display: grid; gap: var(--sp-3); align-content: start; position: sticky; top: 88px; max-height: calc(100vh - 100px); overflow: auto; }
@media (max-width: 1023.98px) { .cp-form-media { order: 2; position: static; max-height: none; overflow: visible; } }
/* Video-Vorschau in der Contentplanung (deutlich größer als zuvor) */
.cp-preview { margin: 0; }
.cp-preview video { width: 100%; max-height: 62vh; border-radius: var(--r-md); background: var(--c-media); display: block; }
.cp-preview-empty { border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--c-text-muted); background: color-mix(in srgb, var(--c-text) 2%, transparent); }

/* Planen-Modal (Release-Termin wählen) */
.cp-modal { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; align-items: center; justify-content: center; background: var(--c-scrim); padding: var(--sp-4); }
.cp-modal[hidden] { display: none; }
/* Modale Fenster als natives <dialog data-hidden-modal> (util.js): Hintergrund über ::backdrop,
   das sichtbare Fenster bleibt .cp-modal-box. */
dialog.cp-modal { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content;
    max-width: 94vw; max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: auto; display: block; color: inherit; }
dialog.cp-modal:not([open]) { display: none; }
dialog.cp-modal::backdrop { background: var(--c-scrim); }
.cp-modal-box { width: min(420px, 94vw); background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-overlay); }
.cp-modal-box .btn { width: auto; }
/* Kachel-Einstellungen (docs/17, <settings-dialog>): Kopf (Titel + Schließen), scrollender Inhalt, fester Fuß mit
   „Abbrechen“ und genau einem „Speichern“. Die Speichern-Knöpfe der Abschnitte löst der Fuß aus, sie sind unsichtbar. */
.cp-modal-box--wide { width: min(760px, 94vw); }
.cp-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cp-modal-head .cb-panel-title { margin: 0; }
dialog.settings-dialog { overflow: hidden; }
.settings-dialog .cp-modal-box { display: flex; flex-direction: column; max-height: 88vh; padding: 0; }
.settings-dialog .cp-modal-head { flex: none; margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--c-border); }
.settings-dialog .cp-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }
.settings-dialog .cp-modal-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--c-border); }
.settings-dialog .cp-modal-foot .adm-status { margin-right: auto; }
.settings-dialog .cp-modal-body [data-save],
.settings-dialog .cp-modal-body .form-dirty { display: none !important; }
/* Aktionszeilen, in denen danach nichts Sichtbares bleibt, entfallen samt Abstand. Was nur noch von Unsichtbarem gefolgt
   wird (Aktionszeile, verborgene Elemente, Variablen-Quellen), trägt keinen Rand nach unten, sonst bliebe am Ende Leerraum.
   Ist eine Aktionszeile sichtbar, fällt ihr Abstand oben (--sp-5) ohnehin mit diesem Rand zusammen. */
.settings-dialog .cp-modal-body .adm-actions:not(:has(> :not([data-save], .form-dirty, .adm-status:empty, [hidden]))) { display: none; }
.settings-dialog .cp-modal-body *:not(:has(~ :not(.adm-actions, [hidden], .cmd-vars, .form-dirty, template, script))) { margin-bottom: 0; }
.btn.btn-cog { width: auto; padding: var(--sp-1) var(--sp-2); gap: var(--sp-1); }
/* Abschnitte im Zahnrad-Dialog: Unterüberschrift, optional mit Schalter rechts (.cog-head), Trennlinie zwischen Abschnitten. */
.cog-section + .cog-section { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.cog-section > .cb-subtitle:first-child { margin-top: 0; }
.cog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cog-head .cb-subtitle { margin: 0; }
/* Variablen im Dialog (studio-panel.js): das Seitenpanel liegt unter dem modalen Dialog, deshalb direkt unter dem Feld. */
.dialog-vars { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; margin: var(--sp-1) 0 var(--sp-3); }
.dialog-vars[hidden] { display: none; }
.dialog-vars-label { font-size: var(--fs-xs); color: var(--c-text-muted); margin-right: var(--sp-1); }
.dialog-vars .studio-panel-var { width: auto; padding: var(--sp-0) var(--sp-2); }
.dialog-vars .studio-panel-var span { display: none; }
/* Abspielende Vorschau im Bestätigungsdialog */
.cp-modal-preview { margin: var(--sp-1) 0 var(--sp-4); display: flex; justify-content: center; }
.cp-modal-preview video { max-width: 100%; max-height: 46vh; border-radius: var(--r-md); background: var(--c-media); }

/* Plattform-spezifische Einstellungsgruppen im Upload-Formular */
.cp-platform { border: 0; border-top: 1px solid var(--c-border); border-radius: 0; padding: var(--sp-3) 0 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-2); min-width: 0; }
.cp-platform > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--sp-1); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.cp-platform .switch-row { margin: 0; }
/* TikTok Content-Disclosure: eingerückte Unteroptionen + Pflicht-Deklaration */
.cp-disclose { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); margin-left: var(--sp-2); border-left: 2px solid var(--c-border-strong); }
.cp-disclose-warn { color: var(--c-accent); font-weight: var(--fw-semibold); }
.cp-declaration { border: 1px solid var(--c-border-strong); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
.cp-declaration a { text-decoration: underline; }
.cp-disabled { opacity: .45; }
.cp-req { color: var(--c-danger-text); }
/* Engere Kopplung von Toggle und zugehörigem Hilfetext (Disclosure) */
.cp-hint-tight { margin-top: calc(-1 * var(--sp-1)); }
/* Verbundener-Account-Streifen + „Veröffentlichen"-Schalter je Plattform */
.cp-conn { padding-bottom: var(--sp-0); }
.cp-pub { font-weight: var(--fw-semibold); }
/* Zu lange Videolänge für TikTok */
.cp-warn { color: var(--c-danger-text); font-weight: var(--fw-semibold); }
/* Kennzeichnung bei kommerziellen Inhalten */
.cp-commercial-label { font-weight: var(--fw-semibold); }


.cp-item-status { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); background: var(--c-surface-1); border: 1px solid var(--c-border-strong); color: var(--c-text-muted); font-size: var(--fs-xs); }
.cp-status-Published { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 40%, transparent); }
.cp-status-Failed { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 40%, transparent); }
.shorts-accounts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.shorts-acc { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-1); border: 1px solid var(--c-border-strong); cursor: pointer; color: inherit; font: inherit; }
.shorts-acc:hover { border-color: var(--c-accent); }
.shorts-acc.is-active { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-1)); }
.shorts-acc-plat { color: var(--c-text-muted); font-size: var(--fs-xs); }
.shorts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.shorts-card { position: relative; aspect-ratio: 9/16; background: var(--c-surface-1); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); overflow: hidden; cursor: pointer; padding: 0; color: inherit; font: inherit; text-align: left; }
.shorts-card:hover { border-color: var(--c-accent); }
.shorts-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shorts-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: var(--c-on-media); text-shadow: var(--shadow-on-media); opacity: .9; pointer-events: none; }
.shorts-views { position: absolute; top: .5rem; left: .5rem; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-on-media); background: var(--c-media-scrim); border-radius: var(--r-pill); pointer-events: none; letter-spacing: .01em; }
.shorts-card-title { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-2) var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-on-media); background: linear-gradient(transparent, var(--c-media-scrim)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
.shorts-card.is-playing { border-color: var(--c-accent); }
.shorts-card.is-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shorts-card.is-playing video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--c-media); object-fit: contain; }
.shorts-fs { position: absolute; top: .5rem; right: .5rem; z-index: 2; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); line-height: 1; color: var(--c-on-media); background: var(--c-media-scrim); border: 1px solid color-mix(in srgb, var(--c-on-media) 25%, transparent); border-radius: var(--r-sm); cursor: pointer; padding: 0; }
.shorts-fs:hover { background: var(--c-media-scrim); border-color: var(--c-accent); }

/* Overlay-Anzeige (Schalter „Immer anzeigen“ + Deep Hide) – eigene ovc-*-Klassen, da .ov-row vom Overlay-Editor belegt ist */
.ovc-box { border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); }
.ovc-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); }
.ovc-line + .ovc-line { border-top: 1px solid var(--c-border-strong); }
.ovc-label { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.5rem; }
.ovc-label .adm-label { margin: 0; }
.ovc-label .switch-row { min-height: 0; }
.ovc-label .switch-label { font-weight: var(--fw-semibold); }
.overlay-ctrl.is-deep .ovc-seg, .overlay-ctrl.is-deep .ovc-vis .switch-row { opacity: .45; }
.ovc-note { font-size: var(--fs-sm); color: var(--c-danger-text); }
@media (max-width: 639.98px) { .ovc-seg { display: flex; width: 100%; } .ovc-seg-btn { flex: 1 1 0; } }

/* Rollen-Editor */
.role-editor { display: grid; gap: var(--sp-3); padding: var(--sp-1) 0; }
.role-roles { display: flex; gap: var(--sp-5); }
.role-roles label { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.role-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-2); }
.role-perm-search { height: 2.5rem; max-width: 420px; }
.role-perm-search[hidden], .perm-toggle[hidden] { display: none; }
.perm-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm); transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.perm-toggle:hover { border-color: var(--c-accent); }
.perm-toggle:has(input:checked) { border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-border-strong)); background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-1)); }
.perm-toggle:has(input:disabled) { color: var(--c-disabled-text); border-color: var(--c-disabled-border); cursor: not-allowed; }
.perm-toggle:has(input:disabled):hover { border-color: var(--c-border-strong); }
.perm-toggle-label { min-width: 0; font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; }

/* Das hidden-Attribut muss display-Overrides (flex/grid) schlagen – sonst bleiben
   z. B. Banner/Pager trotz [hidden] sichtbar. */
[hidden] { display: none !important; }

/* Sound-Alerts admin */
.sa-linkrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: var(--sp-1) 0; }
.sa-linkrow .adm-input { flex: 1; min-width: 200px; }

/* Ein-/ausklappbare Kachel „Player auf dem Handy / Blerp" */
/* Ein-/ausklappbarer Panel-Kopf (Titel links, Pfeil rechts) – JS: StreamhubUtil.collapsible. */
.cb-panel-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; }
/* Größere Trefferfläche (R3, WCAG 2.5.8): Innenabstand oben/unten, durch negativen Außenabstand ausgeglichen –
   das Layout bleibt gleich. Bewusst KEIN position:relative: Der Pfeil richtet sich bei Kopf-Aktionen am
   ganzen .cb-panel-head aus (steht dann ganz rechts), nicht am Klapp-Knopf. */
.cb-panel-toggle { padding-block: var(--sp-3); margin-block: calc(-1 * var(--sp-3)); }
.cb-panel-toggle .cb-panel-title { margin: 0; }
/* Überschrift um den Klapp-Knopf: ohne eigenen Abstand, die Schrift der Überschrift trägt der Titeltext im Knopf
   (der Knopf behält seine eigene Schrift für den Pfeil). */
.cb-panel-title:has(> .cb-panel-toggle) { margin: 0; }
.cb-panel-title-text { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-lg); min-width: 0; }
/* Abstand Überschrift -> Inhalt wie bei jeder Kachel (sonst sitzt der Inhalt direkt unter dem Titel). Im Panel-Kopf
   übernimmt das .cb-panel-head. Inhaltsbereiche bekommen deshalb keinen eigenen margin-top. */
/* Offen: unten keine Trefferflächen-Polsterung, damit der Abstand zum Inhalt exakt wie bisher 1rem bleibt
   (der Außenabstand fällt mit dem des Inhaltsbereichs zusammen). Die Trefferfläche wächst nur nach oben. */
.cb-panel > .cb-panel-toggle[aria-expanded="true"],
.cb-panel > .cb-panel-title > .cb-panel-toggle[aria-expanded="true"] { padding-bottom: 0; margin-bottom: var(--sp-4); }
.cb-panel-caret { transition: transform var(--dur-base) var(--ease); color: var(--c-text-muted); font-size: var(--fs-sm); flex: 0 0 auto; }
.cb-panel-toggle[aria-expanded="false"] .cb-panel-caret { transform: rotate(-90deg); }

/* Sound-Historie: kein zugehöriges Stream-Event */
.sa-status-none { color: var(--c-text-muted); }

/* Spaltenüberschriften mit Erklärungs-Tooltip (Hover) einheitlich dezent kennzeichnen
   (gilt für alle Historien-/Admin-Tabellen, unabhängig von der Tabellenklasse). */
thead th[title] { cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--c-text-muted) 55%, transparent); text-underline-offset: 3px; }

/* Abspiel-Zähler: 0 = nicht abgespielt (rot), 1 = korrekt (neutral), ≥2 = doppelt (amber). */
.sa-count { display: inline-block; min-width: 1.6rem; text-align: center; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.sa-count-zero { color: var(--c-danger); }
.sa-count-multi { color: var(--c-warning); }

/* Bot & Chat */
.bot-status { margin: var(--sp-2) 0; }
.bot-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: var(--r-round); background: var(--c-text-muted); margin-right: var(--sp-2); vertical-align: middle; }
.bot-dot.is-on { background: var(--c-success); }

/* „Ansehen als"-Banner */
.impersonation-bar { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); background: color-mix(in srgb, var(--c-accent) 22%, var(--c-surface-1)); border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent); color: var(--c-text); font-size: var(--fs-md); position: sticky; top: 0; z-index: calc(var(--z-sticky) + 1); }
.impersonation-bar .btn { width: auto; padding: var(--sp-1) var(--sp-3); }

/* Goalbar-Analyse: Donut + Legende + Verlauf */

.gb-analysis { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 1023.98px) { .gb-analysis { grid-template-columns: 1fr; } }
.gb-chart-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.gb-donut { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.gb-donut-svg { transform: rotate(-90deg); display: block; width: 100%; height: 100%; }
.gb-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.gb-donut-total { font-family: var(--font-sans); font-weight: var(--fw-heavy); font-size: var(--fs-xl); }
.gb-donut-sub { color: var(--c-text-muted); font-size: var(--fs-xs); }
.gb-legend { display: grid; gap: var(--sp-2); }
.gb-leg { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.gb-leg-dot { width: .8rem; height: .8rem; border-radius: var(--r-xs); flex: 0 0 auto; }
.gb-leg-name { font-weight: var(--fw-semibold); flex: 1; min-width: 0; }
.gb-leg-val { color: var(--c-text); font-variant-numeric: tabular-nums; }
/* Aktives Goal: Donut + Legende als Kopfzeile, Aktionsprotokoll darunter in voller Breite (blättert statt zu scrollen). */
.gb-analysis--active { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.gb-analysis--active .gb-chart-wrap { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); }
.gb-analysis--active .gb-donut { margin: 0; }
.gb-analysis--active .gb-legend { flex: 1 1 14rem; max-width: 24rem; }
@media (max-width: 639.98px) { .gb-analysis--active .gb-chart-wrap { justify-content: center; } }
.gb-log .gb-log-at { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gb-cats { display: grid; gap: var(--sp-2); margin-top: var(--sp-1); }
.gb-cat-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-1); border-bottom: 1px solid var(--c-border-strong); }
.gb-cat-row:last-child { border-bottom: none; }
.gb-cat-label { flex: 1; min-width: 0; font-weight: var(--fw-semibold); }
.gb-cat-label small { color: var(--c-text-muted); font-weight: var(--fw-regular); }
.gb-cat-row:has(.gb-rewards) { flex-wrap: wrap; }
.gb-rewards { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.gb-rewards > .pick-list { flex: 0 1 auto; }
.gb-rewards > :not(.pick-list, .cmd-tip) { flex-basis: 100%; }
.gb-active-title { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.gb-active-track { margin: var(--sp-2) 0; }
/* Pause-Schalter: solange pausiert, in Amber statt Rot (kein Abbruch, nur angehalten). */

.gb-prog-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0; }
.gb-prog-row .adm-label, .overlay-ctrl .ov-row .adm-label { margin: 0; }
#gb-edit { border-top: 1px solid var(--c-border-strong); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.gb-hist-analysis { grid-template-columns: 1fr; }

/* Pagination-Steuerung (wiederverwendbar) */
.pg { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-1); }
.pg-info { color: var(--c-text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* Admin: Item-Gruppen */
.ig-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-1); border-bottom: 1px solid var(--c-border-strong); }
.ig-row:last-child { border-bottom: none; }
.ig-icon { font-size: var(--fs-xl); width: 2rem; text-align: center; flex: 0 0 auto; }
.ig-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ig-name { font-weight: var(--fw-semibold); }
.ig-meta { color: var(--c-text-muted); font-size: var(--fs-sm); }
.ig-row.is-off .ig-name { color: var(--c-text-muted); }
.ig-row.is-off .ig-icon { filter: grayscale(1); opacity: .6; }

.ig-row-actions { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.ig-row-actions .btn { width: auto; padding: var(--sp-1) var(--sp-2); }
.ig-expand { background: none; border: none; color: var(--c-text-muted); cursor: pointer; font-size: var(--fs-sm); width: 1.5rem; min-height: 24px; flex: 0 0 auto; transition: transform var(--dur-base) var(--ease); }
.ig-expand.is-open { transform: rotate(90deg); color: var(--c-accent); }
.ig-items { padding: var(--sp-1) 0 var(--sp-2) var(--sp-7); }
.ig-items ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); }
.ig-items li { font-size: var(--fs-sm); color: var(--c-text); }
.ig-it-id { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.ig-newgroup { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; align-items: center; }
.ig-newgroup .btn { width: auto; flex: 0 0 auto; }
.ig-newgroup #ig-new-name { flex: 1; min-width: 160px; }

/* Seite „Live-Route" (RealtimeIRL): großflächige Karte, nur bei IRL-Szenen */
.irl-stage {
    height: clamp(360px, calc(100dvh - 260px), 900px);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.irl-stage iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Globale Tooltips im Box-Stil (ersetzt native title-Tooltips, siehe ui.js) */
.rw-tip {
    position: fixed; z-index: var(--z-toast);   /* mit der Maus anfahrbar (Text markieren, lesen) */
    max-width: min(340px, 92vw);
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface-1); color: var(--c-text);
    border: 1px solid color-mix(in srgb, var(--c-accent) 38%, var(--c-border));
    border-radius: var(--r-md);
    box-shadow: var(--shadow-overlay);
    font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.4;
    letter-spacing: .01em; white-space: pre-line;
    animation: rwTipIn var(--dur-fast) var(--ease);
}
.rw-tip::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent;
}
.rw-tip[data-pos="above"]::after { top: 100%; border-top-color: var(--c-surface-1); }
.rw-tip[data-pos="below"]::after { bottom: 100%; border-bottom-color: var(--c-surface-1); }
/* Unsichtbare Brücke über den Abstand zum Element: Die Maus erreicht die Box, ohne dass sie verschwindet. */
.rw-tip::before { content: ""; position: absolute; left: 0; right: 0; height: var(--sp-3); }
.rw-tip[data-pos="above"]::before { top: 100%; }
.rw-tip[data-pos="below"]::before { bottom: 100%; }
.rw-tip.rw-tip-pass { pointer-events: none; }
.rw-tip.rw-tip-pass::before { display: none; }
@keyframes rwTipIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rw-tip { animation: none; } }

/* Giveaway-Admin: Button-Reihen nutzen die volle Panelbreite (1 oder 2 pro Reihe) */

/* Giveaway-Admin: Teilnehmerverwaltung */
.gw-part-add { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: var(--sp-2) 0; }
.gw-part-add .adm-input[type="text"] { flex: 1; min-width: 160px; }
.gw-part-add .btn { width: auto; flex: 0 0 auto; }
.gw-part-row:not(.cmd-row) { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--c-border-strong); }
.gw-part-row { border-left: 3px solid transparent; }
.gw-part-row.is-valid { border-left-color: var(--c-success); background: color-mix(in srgb, var(--c-success) 8%, transparent); }
.gw-part-row.is-invalid { border-left-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 8%, transparent); }
.gw-part-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-part-row > .badge { flex-shrink: 0; }
.gw-hist-metrics { flex-shrink: 0; font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Giveaway-Admin: Teilnehmer einer Ziehung in der aufgeklappten Historie */
.gw-hist-count { font-size: var(--fs-xs); color: var(--c-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gw-hist-count.is-empty { font-style: italic; opacity: .75; }
.gw-hist-parts { display: grid; gap: var(--sp-1); max-height: 420px; overflow-y: auto; }

/* Giveaway-Admin: Ausschlusslisten (Blacklist / Cooldown) */
.gw-excl-add { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: var(--sp-2) 0; }
.gw-excl-add .adm-input[type="text"] { flex: 1 1 10rem; min-width: 140px; }
.gw-excl-add .btn { width: auto; flex: 0 0 auto; }
.it-table td.gw-excl-note { color: var(--c-text-muted); min-width: 10rem; overflow-wrap: anywhere; }
td.gw-excl-wide:not(.gw-excl-note) { white-space: nowrap; }
.gw-excl-sub { display: none; }
@media (max-width: 639.98px) {
    /* Handy: „Seit"/Notiz als zweite Zeile unter dem Namen, damit Ablaufdatum und 🗑 sichtbar bleiben. */
    #gw-excl-bl-table .gw-excl-wide, #gw-excl-cd-table .gw-excl-wide,
    #gw-excl-bl-table th:nth-child(2), #gw-excl-bl-table th:nth-child(3),
    #gw-excl-cd-table th:nth-child(2), #gw-excl-cd-table th:nth-child(4) { display: none; }
    .gw-excl-sub { display: block; margin-top: var(--sp-1); font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--c-text-muted); overflow-wrap: anywhere; }
}

/* Exklusiv-Gruppen (nur einer gleichzeitig aktiv, an Actionboard gekoppelt) */
.ig-newgroup .switch-row { white-space: nowrap; }
/* Gruppe bearbeiten: alles in einer Reihe (bricht auf schmalen Screens sauber um). */
.ig-row--edit { flex-wrap: wrap; }
.ig-row--edit .ig-icon { width: auto; flex: 0 0 auto; }
.ig-edit-icon { width: 3.3rem; text-align: center; padding: var(--sp-1); }
.ig-edit-name { flex: 1 1 10rem; min-width: 8rem; }
.ig-edit-excl { flex: 0 0 auto; margin: 0; white-space: nowrap; }

/* Gesamtsystem-Schalter */
.ig-cooldowns { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }

/* Inventarverwaltung */
.ive-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); }
.ive-user { text-align: left; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); cursor: pointer; color: inherit; }
.ive-user:hover { border-color: var(--c-accent); }
.ive-user-name { font-weight: var(--fw-bold); }
.ive-user-sub { color: var(--c-text-muted); font-size: var(--fs-xs); }
.ive-user-count { color: var(--c-text-muted); font-size: var(--fs-xs); }
.ive-add { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-1); }
.ive-add-field { flex: 2 1 18rem; }
.ive-amount-cell, .ive-expiry-cell { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }

/* Itemsystem: Reiter */

/* Gegenstände verwalten */
.it-editor { background: var(--c-surface-1); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-4); margin-bottom: var(--sp-4); }
/* Mehrspaltige Felder: Zeilenabstand = Feldabstand (--sp-3) über row-gap. Die Felder selbst tragen im Raster keinen
   unteren Rand, sonst addiert er sich zum gap und zum Abstand der Aktionsleiste darunter. */
.it-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.it-grid > .cb-field { margin-bottom: 0; }
.it-usages { display: flex; flex-wrap: wrap; column-gap: var(--sp-5); }
/* position: relative hält absolut positionierte Kinder (z. B. .visually-hidden im Aktionen-th) im
   Scroll-Container – sonst ragen sie über breite Tabellen hinaus und erzeugen eine Seiten-Scrollleiste. */
.it-table-wrap { position: relative; overflow-x: auto;scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; scrollbar-color: color-mix(in srgb, var(--c-accent) 55%, transparent) transparent; padding-bottom: var(--sp-1); }
.it-table-wrap::-webkit-scrollbar { height: 10px; }
.it-table-wrap::-webkit-scrollbar-track { background: var(--c-surface-1); border-radius: var(--r-pill); }
.it-table-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-accent) 50%, var(--c-border-strong)); border-radius: var(--r-pill); border: 2px solid var(--c-surface-1); }
.it-table-wrap::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--c-accent) 70%, var(--c-border-strong)); }
/* Tabellen im Adminbereich: .it-table-wrap > table.it-table. Zahlen: .aw-num · Zeilenaktionen:
   .it-actions-cell · Lädt/leer/Fehler: td.aw-empty (StreamhubUtil.loadingHtml/emptyHtml/errorHtml). */
.it-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.it-table th, .it-table td { text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--c-border); vertical-align: top; }
.it-table th { color: var(--c-text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.it-table .it-c-name { font-weight: var(--fw-semibold); }
.it-table .aw-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ses-table td { vertical-align: middle; }
.ses-who { display: inline-flex; align-items: center; gap: var(--sp-2); }
.it-table .ses-act { text-align: right; width: 1%; white-space: nowrap; }
.it-table td.aw-empty { text-align: center; color: var(--c-text-muted); padding: var(--sp-5) var(--sp-2); border: 0; }
.it-table tr.is-inactive > td, .it-table tr.is-inactive .vip-ago { color: var(--c-warning); }
.it-table--sortable th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.it-table--sortable th[data-sort]:hover { color: var(--c-text); }
.it-table--sortable th[data-sort]::after { content: "↕"; opacity: .35; margin-left: var(--sp-1); font-size: .8em; }
.it-table--sortable th.sort-asc::after { content: "↑"; opacity: .9; color: var(--c-accent); }
.it-table--sortable th.sort-desc::after { content: "↓"; opacity: .9; color: var(--c-accent); }
.it-actions-cell { width: 1%; white-space: nowrap; text-align: right; }

/* Mein Inventar: Gruppen-Tag + Deaktiviert-Hinweis */
.inv-disabled-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); background: color-mix(in srgb, var(--c-rarity-legendary) 12%, var(--c-surface-1)); border: 1px solid color-mix(in srgb, var(--c-rarity-legendary) 40%, transparent); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.inv-disabled-banner .idb-chip { display: inline-flex; align-items: center; gap: var(--sp-1); background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-2); font-weight: var(--fw-semibold); }
/* Gruppen-Badge (deutlich anders als die Nutzungs-Kategorien-Tags): eigene Zeile,
   Icon-Chip links, gefüllt statt umrandet. */
.ticket-group { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; margin-bottom: var(--sp-1); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-accent) 18%, var(--c-bg)); border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em; text-transform: uppercase; color: color-mix(in srgb, var(--c-accent) 85%, var(--c-text)); }
.ticket-group-ic { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-accent) 30%, var(--c-surface-1)); font-size: var(--fs-xs); }
.ticket-group.is-off { background: color-mix(in srgb, var(--c-danger) 16%, var(--c-bg)); border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); color: var(--c-danger-text); }
.ticket-group.is-off .ticket-group-ic { background: color-mix(in srgb, var(--c-danger) 28%, var(--c-surface-1)); filter: grayscale(.3); }
.ticket.is-group-off { opacity: .72; }

/* Moderner Toggle-Schalter (wiederverwendbar) */
.switch-row { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; min-height: 2.5rem; font-size: var(--fs-md); user-select: none; }
.switch-row[hidden] { display: none; }
.switch-label { line-height: var(--lh-snug); }
.switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 44px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-slider { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--c-control-border); transition: background var(--dur-base) var(--ease); }
.switch-slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--r-round); background: var(--c-knob); box-shadow: var(--shadow-knob); transition: transform var(--dur-base) var(--ease); }
.switch input:checked + .switch-slider { background: var(--c-accent); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
.switch input:focus-visible + .switch-slider { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .switch-slider { background: var(--c-disabled-bg); box-shadow: inset 0 0 0 1px var(--c-disabled-border); }
.switch input:disabled + .switch-slider::before { background: var(--c-disabled-text); box-shadow: none; }

.role-msg { margin: 0; }

/* ---------- Community Goal (Goalbar) ---------- */
.gb-card {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-5);
}
.gb-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.gb-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
}
.gb-percent {
    font-family: var(--font-sans);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-xl);
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
}
.gb-track {
    height: 22px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--c-text) 10%, transparent);
    border: 1px solid var(--c-border);
    overflow: hidden;
}
.gb-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    transition: width var(--dur-slow) var(--ease);
    min-width: 0;
}
.gb-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    color: var(--c-text-muted);
    font-size: var(--fs-md);
}
.gb-value { color: var(--c-text); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.gb-status { font-variant-numeric: tabular-nums; }

/* Pausiertes Goal: Hinweiszeile + entsättigter Balken. */
.gb-paused {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}
.gb-card--paused .gb-fill { filter: saturate(.35); opacity: .75; }

.gb-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
}
.gb-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--c-sunken);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.gb-info-pts {
    font-weight: var(--fw-bold);
    color: var(--c-text);
    white-space: nowrap;
}

@media (max-width: 639.98px) {
    .gb-info { grid-template-columns: 1fr; }
}

.gb-desc {
    margin: var(--sp-4) 0 0;
    color: var(--c-text-muted);
    line-height: 1.6;
    white-space: pre-wrap;
}
.gb-desc:empty { display: none; }
.gb-desc a { color: var(--c-accent); text-decoration: underline; overflow-wrap: anywhere; }
.gb-desc a:hover { color: color-mix(in srgb, var(--c-accent) 80%, var(--c-text)); }

/* Admin-Formular (Goalbar-Beschreibung) */

.adm-label { display: block; font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.adm-textarea {
    width: 100%;
    background: var(--c-surface-1);
    border: 1px solid var(--c-border-strong);
    color: var(--c-text);
    font: inherit;
    line-height: 1.5;
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--r-md);
    resize: vertical;
}
.adm-textarea:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--c-accent); }
.adm-hint { color: var(--c-text-muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-4); }
/* Adressen und Befehle in Hinweisen brechen am Handy um, statt über den Rand zu ragen. */
.adm-hint code, .cb-hint code, .inv-sub code { overflow-wrap: anywhere; }
.adm-thumb-fallback { font-family: var(--font-sans); font-weight: var(--fw-heavy); color: color-mix(in srgb, var(--rc) 75%, var(--c-text)); }

/* Besitzer-Panel */
.adm-owners {
    border-top: 1px solid var(--c-border);
    padding: var(--sp-2) var(--sp-4) var(--sp-3);
    display: grid;
    gap: var(--sp-1);
    background: var(--c-sunken);
}
.adm-owner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-6);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
}
.adm-owner:hover { background: color-mix(in srgb, var(--c-text) 3%, transparent); }
.adm-owner-name { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-owner-amount { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.adm-owner-exp { color: var(--c-text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.adm-owner-exp.is-expiring { color: var(--c-warning); font-weight: var(--fw-semibold); }
.adm-owner-exp.is-expiring::before { content: "⏳ "; }

/* VIP-Tabelle: Login hinter dem Namen, Zeitspalten mit „vor N Tagen" darunter.
   Über 30 Tage keinerlei Aktivität: Zeile hervorgehoben (tr.is-inactive, Kandidat fürs Entziehen). */
.vip-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-4); }
.vip-meta .adm-hint { margin: 0; flex: 1 1 18rem; }
.vip-login { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-left: var(--sp-1); }
.vip-last {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-0);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.vip-ago { color: var(--c-text-muted); font-size: var(--fs-xs); }
.vip-none { color: var(--c-text-muted); }
/* Follower-Tabelle: Status-Chips (Bot, VIP, Gebannt, frisches Konto) unter dem Namen. */
.fl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
/* Fortschritt, während der Server die Liste im Hintergrund neu lädt (Muster: Untertitel-Fortschritt). */
.fl-progress { margin: 0 0 var(--sp-4); }
.fl-progress[hidden] { display: none; }
.fl-progress .fl-progress-text { min-width: 0; text-align: left; font-weight: var(--fw-semibold); }

@media (max-width: 639.98px) {
    .vip-last { font-size: var(--fs-xs); }
    .vip-ago { font-size: var(--fs-xs); }
    .adm-owner { grid-template-columns: 1fr auto; padding-left: var(--sp-4); }
    .adm-owner-amount { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ── Verbindungen (/admin/bot): kompakte Kacheln ──────────── */
/* Kanal und Bot stehen nebeneinander und sind gleich hoch, die Aktionsleiste sitzt unten (gleiche Linie). Inhalt: Kopf,
   Konto, Probleme, Aktionen, Einrichtung nur solange nicht verbunden. Breite Kacheln (OBS-Plugin) über die ganze Zeile. */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--sp-4); }
.conn-grid > .cb-panel.conn-tile { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; margin: 0; }
.conn-grid > .conn-tile--wide { grid-column: 1 / -1; }
/* Kinder mit eigenem Außenabstand (Hinweise) gleichen sich der Lücke an. */
.conn-tile > *, .conn-tile > .req-missing { margin: 0; min-width: 0; }
/* Titel → Inhalt wie überall 1rem (Lücke --sp-3 + --sp-1). */
.conn-tile .cb-panel-head { margin-bottom: var(--sp-1); }
.conn-info { display: flex; flex-direction: column; gap: var(--sp-3); }
.conn-info > * { margin: 0; }
.conn-tile .adm-actions { margin: 0; }
/* Abstand vor der Aktionsleiste wie überall --sp-5 (Lücke --sp-3 + --sp-2), unten angeschlagen. */
.conn-tile > .adm-actions { margin-top: auto; padding-top: var(--sp-2); }
.conn-account { font-size: var(--fs-sm); color: var(--c-text-muted); }
.conn-account strong { color: var(--c-text); }
.conn-account a { color: var(--c-accent); }
.conn-badges { list-style: none; padding: 0; }
/* Einklappbare Hilfe (Tag-Helper <page-help>): „Wie funktioniert das?“ bzw. „Einrichtung“.
   Längere Anleitungen stehen hier statt vor dem Inhalt (Runde 2, R2-1). */
.help { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
    border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); }
.help-title { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.help-toggle:hover .help-title { color: var(--c-text); }
/* Hilfe-Knopf im gestrichelten Rahmen: Trefferfläche nur bis zum Rahmen (Rahmen-Innenabstand --sp-2). */
.help > .cb-panel-toggle.help-toggle { padding-block: var(--sp-2); margin-block: calc(-1 * var(--sp-2)); }
.help-body:not([hidden]) { display: flex; flex-direction: column; gap: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); }
.help-body p { margin: 0; }
.help-body a { color: var(--c-accent); }
.inv-head .help { margin-top: var(--sp-3); max-width: 70ch; }
.cb-panel > .help, .cb-panel > div > .help:first-child { margin-bottom: var(--sp-3); }
.conn-steps { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.conn-steps a { color: var(--c-accent); }

.es-board { margin-top: var(--sp-4); }
/* Filter der Event-Liste: Suche, Arten-Chips (umbrechend, mit Anzahl), Kanal-Umschalter. Gleich in Kachel, App und Studio.
   Schmal (Kachel, Handy) werden Chips kleiner und der Kanal-Umschalter nimmt die volle Breite. */
.es-controls { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); container: es-filters / inline-size; }
.es-controls .lb-search-box { flex: none; min-width: 0; height: 2.5rem; }
.es-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.es-plat { color: var(--c-danger-text); font-size: var(--fs-xs); }
.es-chip-n { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; opacity: .75; }
.es-chip-n:empty { display: none; }
.es-chan { align-self: flex-start; }
@container es-filters (max-width: 30rem) {
    .es-chips .chip { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
    .es-chan { align-self: stretch; display: flex; flex-wrap: nowrap; }
    .es-controls .es-chan .seg-btn { flex: 1 1 0; min-width: 0; padding-inline: var(--sp-2); overflow: hidden; text-overflow: ellipsis; }
}
@container es-filters (max-width: 16rem) {
    .es-controls .es-chan .seg-btn { padding-inline: var(--sp-1); }
}

@media (max-width: 639.98px) {
    .es-head { margin-bottom: var(--sp-2); }
    .es-head .inv-title { font-size: var(--fs-xl); }
    .es-board .es-controls { margin-bottom: var(--sp-2); }
}


.es-list { display: flex; flex-direction: column; gap: var(--sp-1); container-type: inline-size; }
/* Schmale Liste (z. B. Cockpit-Kachel): Uhrzeit direkt unter dem Text, Knöpfe rechts über beide Zeilen.
   So wird keine Zeile höher als Text plus Uhrzeit. */
@container (max-width: 22rem) {
    .es-item { grid-template-columns: 1.8rem minmax(0, 1fr) auto; grid-auto-flow: row; column-gap: var(--sp-2); row-gap: 0; }
    .es-item > .es-icon { grid-column: 1; grid-row: 1 / span 2; }
    .es-item > .es-text { grid-column: 2; grid-row: 1; }
    .es-item > .es-time { grid-column: 2; grid-row: 2; justify-self: start; }
    .es-item > .es-acts { grid-column: 3; grid-row: 1 / span 2; }
}
.es-day { font-family: var(--font-sans); font-size: var(--fs-md); color: var(--c-text-muted); margin: var(--sp-4) 0 var(--sp-1); text-transform: uppercase; letter-spacing: .04em; }
.es-day-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.es-item {
    /* Symbol, Text, Uhrzeit, dann die Knöpfe (nur wenn die Zeile welche hat). */
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; align-items: center; column-gap: var(--sp-3);
    background: var(--c-surface-1); border: 1px solid var(--c-border); border-left: 3px solid var(--c-border-strong);
    border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.es-icon { font-size: var(--fs-lg); text-align: center; }
.es-text { font-size: var(--fs-md); line-height: 1.35; }
.es-msg { display: block; color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.es-time { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-acts { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* Replay-Knopf: pusht den zum Event gehörenden Sound erneut an die Player. */
.es-replay {
    appearance: none; border: 1px solid var(--c-border-strong); background: var(--c-surface-2, var(--c-surface-1));
    color: inherit; border-radius: var(--r-sm); cursor: pointer; line-height: 1;
    font-size: var(--fs-md); padding: var(--sp-1) var(--sp-2); transition: transform .08s ease, opacity var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.es-replay:hover { background: var(--c-border); }
.es-replay:active { transform: scale(.92); }
.es-replay:disabled { cursor: default; }
.es-replay.is-busy { opacity: .55; }
.es-replay.is-done { color: var(--c-success); border-color: var(--c-success); }
.es-replay.is-gone { opacity: .4; cursor: not-allowed; }

/* Haken „bedankt“: gleiche Größe wie der Replay-Knopf, offen nur als dezenter Haken, abgehakt grün.
   Bedankte Zeilen bleiben ausgegraut, auch beim Darüberfahren (nur der Knopf selbst reagiert). */
.es-replay, .es-thank { display: inline-flex; align-items: center; justify-content: center; }
.es-thank {
    appearance: none; border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-text-muted);
    border-radius: var(--r-sm); cursor: pointer; line-height: 1; padding: var(--sp-1) var(--sp-2);
    transition: transform .08s ease, background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.es-thank:hover { color: var(--c-success); border-color: var(--c-success); }
.es-thank:active { transform: scale(.92); }
.es-thank.is-on { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 60%, transparent);
    background: color-mix(in srgb, var(--c-success) 14%, transparent); }
.es-item.is-thanked { border-left-color: var(--c-border-strong); }
.es-item.is-thanked > :not(.es-acts), .es-item.is-thanked .es-replay { opacity: .45; }
.es-item.is-thanked .es-avatar { filter: grayscale(1); }

.es-item--sub     { border-left-color: var(--c-accent); }
.es-item--resub   { border-left-color: var(--c-rarity-legendary); }
.es-item--giftsub { border-left-color: var(--c-twitch); }
.es-item--follow  { border-left-color: var(--c-rarity-epic); }
.es-item--cheer   { border-left-color: var(--c-rarity-rare); }
.es-item--raid    { border-left-color: var(--c-rarity-uncommon); }
.es-item--donation { border-left-color: var(--c-success); }
.es-item--watchstreak { border-left-color: var(--c-warning); }
.es-item--custom { border-left-color: var(--c-info); }

/* Profilicon des Streamers (Kanal des Events) + Event-Art als kleines Abzeichen unten rechts. */
.es-icon.has-avatar { position: relative; width: 2rem; height: 2rem; }
.es-avatar {
    display: block; width: 100%; height: 100%; border-radius: var(--r-round); object-fit: cover;
    background: var(--c-surface-2, var(--c-surface-1)); border: 1px solid var(--c-border-strong);
}
.es-kind {
    position: absolute; right: -.3rem; bottom: -.3rem; font-size: .72rem; line-height: 1;
    background: var(--c-surface-1); border: 1px solid var(--c-border-strong); border-radius: var(--r-round);
    width: 1.1rem; height: 1.1rem; display: grid; place-items: center;
}
/* Shared Chat: Events aus einem Partnerkanal dezent abgesetzt + „bei <Kanal>"-Hinweis. */
.es-item--shared { background: color-mix(in srgb, var(--c-surface-1) 88%, var(--c-twitch) 12%); }
.es-item--shared .es-avatar { border-color: var(--c-twitch); }
.es-chan {
    display: inline-block; margin-right: var(--sp-2); padding: 0 var(--sp-2); border-radius: var(--r-pill);
    font-size: var(--fs-xs); line-height: 1.35rem; vertical-align: .05rem;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: inherit; background: color-mix(in srgb, var(--c-twitch) 28%, transparent);
}

@media (max-width: 639.98px) {
    .es-item { grid-template-columns: 1.8rem minmax(0, 1fr); column-gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); }
    .es-icon.has-avatar { width: 1.8rem; height: 1.8rem; }
    .es-text { font-size: var(--fs-sm); }
}

/* ============================================================
   Admin: Stream-Statistik (/admin/streamstats)
   ============================================================ */
/* Diagrammfarben: Reihe 1 Blau (wie der Zuschauerverlauf je Stream), Reihe 2 Orange (Peak).
   Die Marken sitzen auf der Kartenfläche --ssc-surface (Ring um Punkte in derselben Farbe). */
:root {
    --ssc-1: var(--c-info);
    --ssc-2: var(--c-warning);
    --ssc-surface: var(--c-surface-2);
}

/* Filterzeile: Schnellwahl (wie der Zeitfilter der Rangliste) + eigener Zeitraum */
.ss-filter {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
/* Umschalter (Segmente) – Zeitraum hier, auch Moduswahl (Nachrichten) im Adminbereich. */
/* Umschalter (eine Komponente) für Modus/Zeitraum: .seg > .seg-btn (.is-active).
   aria-pressed ergänzt ui.js. */
.seg {
    display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1);
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-pill);
}
.seg-btn {
    appearance: none; background: transparent; border: 0; color: var(--c-text-muted);
    font: inherit; font-weight: var(--fw-semibold); font-size: var(--fs-sm); white-space: nowrap;
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); cursor: pointer;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.seg-btn:hover { color: var(--c-text); }
.seg-btn.is-active { background: var(--c-accent); color: var(--c-on-accent); }
.seg-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.seg--small .seg-btn { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3); }
.ss-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); }
.ss-date { display: flex; flex-direction: column; gap: var(--sp-1); }
.ss-date .adm-label { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
.ss-date input {
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md);
    color: var(--c-text); padding: var(--sp-2) var(--sp-2); font: inherit;
}

/* Beim Nachladen bleibt der alte Stand stehen – nur gedämpft, ohne Springen oder Flackern. */
.ss-dash .ss-tiles, .ss-dash .ss-charts, .ss-dash .ss-kpi-groups { transition: opacity var(--dur-base) var(--ease); }
.ss-dash.is-loading .ss-tiles, .ss-dash.is-loading .ss-charts, .ss-dash.is-loading .ss-kpi-groups { opacity: .55; }

.ss-section-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3);
}
.ss-section-head .cb-panel-title { margin: 0; }

/* Kacheln (auch Creator-Seite: .ss-stat-grid). Die acht Zeitraum-Kacheln stehen breit in einer
   Reihe, sonst in zwei; die Kacheln eines einzelnen Streams füllen die Breite. */
.ss-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-5); }
@media (min-width: 1440px) { #ss-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ss-tiles--detail { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: var(--sp-4); }
.ss-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4);
}
.ss-stat {
    display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3);
}
.ss-stat.has-info { cursor: help; transition: border-color var(--dur-fast) var(--ease); }
.ss-stat.has-info:hover, .ss-stat.has-info:focus-visible { border-color: var(--c-border-strong); }
/* Große Einzelwerte in Proportionalziffern – Tabellenziffern nur, wo Spalten fluchten müssen. */
.ss-stat-val { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.15; overflow-wrap: anywhere; }
.ss-stat-label { display: flex; align-items: center; gap: var(--sp-1); color: var(--c-text-muted); font-size: var(--fs-xs); }
.ss-stat-hint { color: var(--c-text-muted); font-size: var(--fs-xs); }
.ss-info-dot {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 14px; height: 14px; border-radius: var(--r-round); border: 1px solid var(--c-border-strong);
    font-size: .6rem; font-weight: var(--fw-bold); line-height: 1; color: var(--c-text-muted);
}
/* Erklärung einer Kachel auf Touch-Geräten (dort gibt es keinen Hover-Tooltip) */
.ss-pop {
    position: absolute; z-index: var(--z-dropdown); padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface-1); color: var(--c-text);
    border: 1px solid color-mix(in srgb, var(--c-accent) 38%, var(--c-border)); border-radius: var(--r-md);
    box-shadow: var(--shadow-overlay); font-size: var(--fs-sm); line-height: 1.45;
}

/* Weitere Kennzahlen als Gruppen-Karten */
.ss-kpis-head { margin-top: var(--sp-1); }
.ss-kpi-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: var(--sp-3); }
#ss-detail-kpis { margin: 0 0 var(--sp-4); }
#ss-detail-kpis:empty { display: none; }
.ss-kpi-group { min-width: 0; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.ss-kpi-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-bold); margin: 0 0 var(--sp-2); }
.ss-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: var(--sp-2); }
.ss-kpi-grid .ss-stat { background: var(--c-surface-1); padding: var(--sp-2) var(--sp-3); }
.ss-kpi-grid .ss-stat-val { font-size: var(--fs-lg); }

/* Dashboard: Verläufe als kleine Vielfache (gleiche Zeitachse), darunter die Aufschlüsselungen */
.ss-charts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ss-card { grid-column: span 6; min-width: 0; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.ss-card--weekdays, .ss-card--starts, .ss-card--categories { grid-column: span 4; }
.ss-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ss-card-title { font-size: var(--fs-md); font-weight: var(--fw-bold); margin: 0; }
.ss-card-sub { color: var(--c-text-muted); font-size: var(--fs-xs); margin: var(--sp-0) 0 0; }
.ss-card-toggle { width: auto; margin: 0; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); flex: 0 0 auto; }
.ss-card-table .it-table { font-size: var(--fs-sm); }
.ssc-table .ss-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-card-table .it-table-wrap { max-height: 330px; overflow: auto; }
/* Plattform-Verwaltung: Diagrammkarten unter dem Zeitraum-Umschalter, als letztes Element der Kachel. */
.ops-charts { margin: var(--sp-4) 0 0; }
/* Filter-Chips über einer Ops-Tabelle (unter der Suche). */
@media (max-width: 1023.98px) {
    .ss-card--weekdays, .ss-card--starts { grid-column: span 6; }
    .ss-card--categories { grid-column: span 12; }
}
@media (max-width: 1023.98px) {
    .ss-card, .ss-card--weekdays, .ss-card--starts, .ss-card--categories { grid-column: span 12; }
}

/* Diagramm-Bausteine (streamstats-charts.js) */
.ssc { position: relative; }
.ssc-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0 0 var(--sp-1); }
.ssc-legend-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ssc-key { display: inline-block; flex: 0 0 auto; width: 14px; height: 2px; border-radius: var(--r-xs); background: var(--c); }
.ssc-key--bar { width: 10px; height: 10px; border-radius: var(--r-xs); }
.ssc-stage { position: relative; border-radius: var(--r-sm); touch-action: pan-y; }
.ssc-stage:focus { outline: none; }
.ssc-stage:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ssc-svg { display: block; overflow: visible; }
.ssc-gridline { stroke: var(--c-border); stroke-width: 1; shape-rendering: crispEdges; }
.ssc-baseline { stroke: var(--c-border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ssc-axis { fill: var(--c-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ssc-cap { fill: var(--c-text); font-size: 11px; font-weight: var(--fw-semibold); }
.ssc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ssc-ref { stroke: var(--c-text-muted); stroke-width: 1; stroke-dasharray: 4 4; shape-rendering: crispEdges; opacity: .7; }
.ssc-line--gap { opacity: .35; }
.ssc-dot { stroke: var(--ssc-surface); stroke-width: 2; }
.ssc-cross { stroke: var(--c-border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ssc-col { fill-opacity: .85; transition: fill-opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); }
.ssc-col.is-hot { fill-opacity: 1; filter: brightness(1.25); }
.ssc-tip {
    position: absolute; z-index: var(--z-sticky); pointer-events: none; min-width: 120px; max-width: 250px;
    padding: var(--sp-2) var(--sp-2); background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    box-shadow: var(--shadow-overlay); font-size: var(--fs-xs); line-height: 1.45; color: var(--c-text);
}
.ssc-tip-title { color: var(--c-text-muted); margin-bottom: var(--sp-1); }
.ssc-tip-row { display: flex; align-items: center; gap: var(--sp-2); }
.ssc-tip-row strong { font-variant-numeric: tabular-nums; }
.ssc-tip-name { color: var(--c-text-muted); }
.ssc-bars { display: grid; gap: var(--sp-1); padding: var(--sp-1) 0; }
.ssc-bar-row {
    display: grid; grid-template-columns: minmax(70px, 36%) minmax(0, 1fr) auto; align-items: center;
    gap: var(--sp-2); padding: var(--sp-1) var(--sp-1); border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.ssc-bar-row.is-hot { background: color-mix(in srgb, var(--c-text) 5%, transparent); }
.ssc-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssc-bar-track { height: 10px; }
.ssc-bar-fill { display: block; height: 100%; min-width: 2px; border-radius: 0 var(--r-xs) var(--r-xs) 0; transition: filter var(--dur-fast) var(--ease); }
.ssc-bar-row.is-hot .ssc-bar-fill { filter: brightness(1.3); }
.ssc-bar-value { color: var(--c-text-muted); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tabellen: Streams des Zeitraums (Grundlage: .it-table) */
.ss-sort-select { display: none; width: auto; }
.ss-table th.ss-num, .ss-table td.ss-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.it-table--sortable th[data-sort]:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
/* Knopf im Spaltenkopf (StreamhubSort): sieht aus wie der Kopftext. */
.th-sort { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-xs); }
.ss-row { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.ss-row:hover, .ss-row:focus-visible { background: color-mix(in srgb, var(--c-text) 3.5%, transparent); }
.ss-row:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.ss-c-start { white-space: nowrap; }
.ss-c-date { display: block; }
.ss-c-time { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
.ss-c-stream { min-width: 15rem; }
.ss-c-title { display: block; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.ss-c-title em { color: var(--c-text-muted); }
.ss-c-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-1); }
.ss-c-game { color: var(--c-text-muted); font-size: var(--fs-xs); }
/* Auswahlspalte in Tabellen (z. B. Follower). */
.it-c-check { width: 2.2rem; }
.it-c-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--c-accent); cursor: pointer; }
.it-c-check input:disabled { cursor: not-allowed; }
.it-table tr.is-selected > td { background: color-mix(in srgb, var(--c-accent) 7%, transparent); }

/* Handy: Tabellenzeilen werden zu Karten (Werte mit Beschriftung statt Spalten). */
@media (max-width: 1023.98px) {
    .ss-sort-select { display: block; flex: 1 1 100%; }
    .ss-table thead { display: none; }
    .ss-table, .ss-table tbody { display: block; width: 100%; }
    .ss-table tr {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-2);
        padding: var(--sp-3) var(--sp-1); border-bottom: 1px solid var(--c-border-strong);
    }
    .ss-table td { display: block; padding: 0; border: 0; min-width: 0; }
    .ss-table td[data-label]::before {
        content: attr(data-label); display: block; color: var(--c-text-muted);
        font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .03em;
    }
    .ss-table td.ss-num { text-align: left; }
    .ss-table td.aw-empty { grid-column: 1 / -1; }
    .ss-table .ss-c-start { grid-column: 1 / -1; order: -2; color: var(--c-text-muted); font-size: var(--fs-xs); }
    .ss-table .ss-c-start .ss-c-date, .ss-table .ss-c-start .ss-c-time { display: inline; margin-right: var(--sp-2); font-size: inherit; }
    .ss-table .ss-c-stream { grid-column: 1 / -1; order: -1; min-width: 0; }
}

.ss-chart-wrap { margin: var(--sp-2) 0 var(--sp-2); }
.ss-chart {
    display: block; width: 100%; height: 140px;
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md);
}

/* .btn-use ist von Haus aus vollbreit – in diesen Zeilen sitzen die Knöpfe aber neben Feldern. */
.ss-dates .btn { width: auto; margin-top: 0; }

/* ============================================================
   Admin: Zuschauerverlauf als Balken + Wechselmarken
   ============================================================ */
.ss-chart-box { position: relative; }
.ss-bar { fill: color-mix(in srgb, var(--c-rarity-rare) 55%, transparent); }
.ss-bar--change { fill: var(--c-accent); }
.ss-bar.is-hot { fill: var(--c-rarity-uncommon); }
.ss-chart-box:hover .ss-chart { cursor: crosshair; }
/* Zoom: senkrechtes Scrollen bleibt beim Browser, waagerecht und zwei Finger gehören dem Diagramm. */
.ss-chart { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ss-chart-box.is-zoomed:hover .ss-chart { cursor: grab; }
.ss-chart-box.is-dragging .ss-chart { cursor: grabbing; }
.ss-chart-max {
    position: absolute; top: var(--sp-1); left: var(--sp-2); pointer-events: none;
    font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums;
}
.ss-zoom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
}
.ss-zoom-range { font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.ss-zoom-ctl { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ss-zoom .seg-btn { display: inline-flex; align-items: center; justify-content: center; }
.ss-zoom .seg-btn:disabled { color: var(--c-disabled-text); cursor: default; }
.ss-mini {
    display: block; width: 100%; height: 28px; margin-top: var(--sp-1); cursor: pointer; touch-action: pan-y;
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm);
}
.ss-mini-bars { fill: color-mix(in srgb, var(--c-rarity-rare) 55%, transparent); }
.ss-mini-shade { fill: color-mix(in srgb, var(--c-bg) 65%, transparent); }
.ss-mini-win { fill: none; stroke: var(--c-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
@media (max-width: 639.98px) {
    /* Daumengroße Knöpfe: oben Zeitspanne und −/+, darunter die Schnellwahl über die volle Breite. */
    .ss-zoom-ctl { display: contents; }
    .ss-zoom-range { flex: 1 1 0; min-width: 0; order: 1; }
    .ss-zoom-step { order: 2; }
    #ss-zoom-presets { order: 3; flex: 1 1 100%; display: flex; }
    #ss-zoom-presets .seg-btn { flex: 1 1 0; }
    .ss-zoom .seg-btn { min-height: 2.25rem; padding: var(--sp-1) var(--sp-3); }
    .ss-chart { height: 180px; }
    .ss-mini { height: 36px; }
}

.ss-tip {
    /* Über dem Diagramm statt darin: sonst verdeckt die Blase genau die Balken, um die es geht. */
    position: absolute; bottom: calc(100% + 6px); z-index: var(--z-sticky); pointer-events: none;
    background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-2); font-size: var(--fs-xs); line-height: 1.35; color: var(--c-text);
    box-shadow: var(--shadow-overlay); max-width: 260px;
}
.ss-tip-title { color: var(--c-text-muted); }
.ss-tip-mark { color: var(--c-accent); }
.ss-band { fill: color-mix(in srgb, var(--c-accent) 16%, transparent); pointer-events: none; }
.ss-sel { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.ss-sel .btn { width: auto; margin-top: 0; }

/* Anwesenheit je Zuschauer: Zeitstrahl über die ganze Streamdauer */
.ss-c-presence { min-width: 9rem; width: 30%; }
.ss-pres { display: block; width: 100%; height: 10px; background: var(--c-surface-2); border-radius: var(--r-xs); }
.ss-pres rect { fill: var(--c-rarity-rare); }
.ss-pres-none { color: var(--c-text-muted); }
.ss-user-btn {
    background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;
    text-decoration: underline dotted; text-underline-offset: 3px;
}
.ss-user-btn:hover, .ss-user-btn[aria-pressed="true"] { color: var(--c-accent); }

/* Tabelle der Titel-/Kategoriewechsel */
.ss-change-row { cursor: default; }
.ss-change-row:hover, .ss-change-row:focus-visible { background: var(--c-surface-1); }
.ss-change-row:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.ss-change-what { display: flex; flex-direction: column; gap: var(--sp-0); min-width: 12rem; }
.ss-change-game { font-weight: var(--fw-semibold); }
.ss-change-title { color: var(--c-text-muted); font-size: var(--fs-sm); }
.ss-kind {
    font-size: var(--fs-xs); padding: var(--sp-0) var(--sp-2); border-radius: var(--r-pill); white-space: nowrap;
    border: 1px solid var(--c-border-strong); color: var(--c-text-muted);
}
.ss-kind--game { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.ss-kind--title { color: var(--c-rarity-rare); border-color: color-mix(in srgb, var(--c-rarity-rare) 45%, transparent); }
.ss-kind--title-game { color: var(--c-rarity-epic); border-color: color-mix(in srgb, var(--c-rarity-epic) 45%, transparent); }

.ss-jump { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-jump.is-off { color: var(--c-text-muted); }
.ss-jump .ic, .adm-list-title .ic { vertical-align: -.15em; margin-right: var(--sp-1); }
.ss-delta { font-variant-numeric: tabular-nums; }
.ss-delta.is-up { color: var(--c-rarity-uncommon); }
.ss-delta.is-down { color: var(--c-danger); }

/* VOD-Nachlauf im Stream-Detail: Kopf mit Vorschaubild, Kacheln, zwei Diagramm-Karten */
.ss-chip--muted { opacity: .55; }
.ss-vod-headline { margin: var(--sp-4) 0 var(--sp-1); }
.ss-vod-headline .cb-subtitle { margin: 0; }
.ss-vod-headline .adm-actions { margin: 0; }
.ss-vod-head { display: flex; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-1) 0 var(--sp-3); }
.ss-vod-thumb { width: 160px; max-width: 34%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--c-border); }
.ss-vod-meta { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ss-vod-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.ss-vod-sub { color: var(--c-text-muted); font-size: var(--fs-sm); }
.ss-vod-link { font-size: var(--fs-sm); }
.ss-charts--vod { margin-bottom: var(--sp-4); }
#ss-moments-wrap .adm-label { margin: 0 0 var(--sp-2); }
@media (max-width: 639.98px) {
    .ss-vod-head { flex-direction: column; }
    .ss-vod-thumb { width: 100%; max-width: 100%; }
}

/* Stream Together / Creator-Karten in der Stream-Statistik */
.ss-chip--together { border-color: color-mix(in srgb, var(--c-twitch) 45%, transparent); }
.ss-creator-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ss-creator-card {
    display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--c-text);
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.ss-creator-card:hover { border-color: var(--c-twitch); background: var(--c-surface-1); }
.ss-creator-avatar { width: 2.2rem; height: 2.2rem; border-radius: var(--r-round); object-fit: cover; background: var(--c-surface-1); }
.ss-creator-main { display: flex; flex-direction: column; gap: var(--sp-0); }
.ss-creator-name { font-weight: var(--fw-semibold); }
.ss-creator-sub { color: var(--c-text-muted); font-size: var(--fs-xs); }

.adm-input:disabled { background: var(--c-disabled-bg); border-color: var(--c-disabled-border); color: var(--c-disabled-text); cursor: not-allowed; }
/* Feld gilt gerade nicht (z. B. Giveaway-Kriterien mit Shared Chat): Beschriftung ausgegraut, Eingabe gesperrt. */
.cb-field.is-disabled > .adm-label, .cb-field.is-disabled .switch-label { color: var(--c-disabled-text); }

/* ============================================================
   Admin: Creator (/admin/creators)
   ============================================================ */
.cr-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 1023.98px) { .cr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center;
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-3); color: var(--c-text); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cr-card:hover { border-color: var(--c-twitch); background: var(--c-surface-1); }
.cr-card-avatar { width: 3.6rem; height: 3.6rem; border-radius: var(--r-round); object-fit: cover; background: var(--c-surface-1); }
.cr-card-name { font-weight: var(--fw-semibold); }
.cr-title-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cr-title-row .cb-panel-title { margin: 0; }
.cr-card-sub { color: var(--c-text-muted); font-size: var(--fs-xs); }
.cr-card-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-1); }

.cr-head { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-2) 0 var(--sp-3); }
.cr-head-avatar { width: 4rem; height: 4rem; border-radius: var(--r-round); object-fit: cover; background: var(--c-surface-2); }

.cr-chat {
    max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1);
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3);
}
.cr-msg { display: flex; gap: var(--sp-2); align-items: baseline; line-height: 1.4; }
.cr-msg-time { color: var(--c-text-muted); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-msg-text { word-break: break-word; }
.cr-msg-shared { color: var(--c-twitch-text); }

@media (max-width: 639.98px) {
    /* Stream-Statistik: mehr Fläche für Zahlen und Diagramme */
    .ss-dash, #ss-streams-panel, #ss-detail { padding: var(--sp-4) var(--sp-3); }
    .ss-filter { flex-direction: column; align-items: stretch; }
    /* Schnellwahl als Raster (3 + 2) statt einer Pille, die über den Rand liefe */
    #ss-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-md); }
    #ss-res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-md); }
    .ss-filter .seg-btn, .ss-section-head .seg-btn { padding: var(--sp-2) var(--sp-1); border-radius: var(--r-md); }
    .ss-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ss-dates .btn { grid-column: 1 / -1; }
    .ss-date { min-width: 0; }
    .ss-date input { width: 100%; min-width: 0; }
    .ss-section-head { align-items: stretch; flex-direction: column; }
    .ss-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
    .ss-stat { padding: var(--sp-2) var(--sp-3); }
    .ss-stat-val { font-size: var(--fs-lg); }
    .ss-kpi-groups { grid-template-columns: 1fr; }
    .ss-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ss-card { padding: var(--sp-3) var(--sp-2) var(--sp-2); }
    .cr-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Admin-UI: gemeinsame Muster aller Adminseiten
   Regeln und Beispiele: docs/17-admin-ui-muster.md
   ============================================================ */

/* Seitenkopf: Titel + Untertitel. Im PWA-Reiter (?embed=1) benennt der Reiter die Seite –
   dort entfällt der Kopf. */
body.is-embed .inv-head { display: none; }
/* Funktionsrahmen: Die Studio-Seite eines Bausteins steht als Inhalte im Rahmen der Funktionsseite, ihr
   eigener Kopf entfällt (der Kopf der Funktion steht davor). */
.app-content.is-function > .inv-head:not(.fn-head) { display: none; }

/* Leiste „In OBS“ (Partial _OverlayStrip, js/overlay-strip.js) unter dem Seitenkopf: je Overlay ein Chip mit
   Status-Punkt (Tooltip: aktiv oder zuletzt verbunden) und Kopier-Knopf, rechts Anlegen/Testen. Fehlt bei einer
   reinen Overlay-Seite jedes Overlay, ist die Leiste orange getönt. */
.ov-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4);
    padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-1); }
.ov-strip[hidden] { display: none; }
.ov-strip.is-missing { border-color: color-mix(in srgb, var(--c-warning) 45%, transparent); background: color-mix(in srgb, var(--c-warning) 8%, transparent); }
.ov-strip-label { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ov-strip-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.ov-strip-empty { font-size: var(--fs-sm); }
.ov-strip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-left: auto; }
.ov-strip-actions .btn { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.ov-strip-actions .btn-link { font-size: var(--fs-sm); }
.ov-strip-msg { flex-basis: 100%; }
.ov-strip-msg:empty { display: none; }
.ov-chip { display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%; padding: 0 var(--sp-1) 0 var(--sp-3);
    border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-surface-2); font-size: var(--fs-sm); }
.ov-chip-state { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; cursor: default; }
.ov-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-chip-copy { appearance: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-round);
    background: none; color: var(--c-text-muted); cursor: pointer; }
.ov-chip-copy:hover { color: var(--c-text); background: var(--c-surface-1); }
.ov-chip-copy:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* Status-Punkt eines Overlays (StreamhubUtil.overlayStatus): grün = in OBS aktiv, grau = nicht verbunden. */
.ov-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: var(--r-round); background: var(--c-text-muted); }
.ov-dot.is-online { background: var(--c-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 20%, transparent); }

/* Sektionen: Panels untereinander haben immer denselben Abstand. Er gilt für jedes Panel, vor dem im selben Elternteil
   irgendwo ein sichtbares Panel steht. Was dazwischen unsichtbar ist, zählt nicht: verborgene und Anlege-Panels, Dialoge
   (<settings-dialog>), Skripte, Panels anderer Seitenreiter (.is-view-off). Ein Behälter mit sichtbaren Panels (z. B. die
   Auslöser einer Funktion vor der Kachel Fernsteuern) zählt wie ein Panel. Niedrige Spezifität (:where), damit Raster mit
   eigenem gap (Verbindungen, Cockpit, Editor) ihn gezielt auf 0 setzen. Nie Abstände je Seite flicken (docs/17). */
:where(.cb-panel:not([hidden], .is-view-off)) ~ .cb-panel,
:where(div:not([hidden], .is-view-off):has(.cb-panel:not([hidden]))) ~ .cb-panel,
.cb-panel:not([hidden]) + .cx-hide-embed > .cb-panel:first-child,
.cx-hide-embed:has(> .cb-panel) ~ .cb-panel { margin-top: var(--sp-4); }
/* Raster mit eigenem gap (Verbindungen): kein zusätzlicher Kachel-Abstand, sonst doppelt (32px). */
.conn-grid > .cb-panel ~ .cb-panel { margin-top: 0; }
/* Raster und Panel im Wechsel (Verbindungen: Twitch-Raster, Katalog, Einrichtung darunter). */
.conn-grid + .cb-panel, .cb-panel:not([hidden]) + .conn-grid { margin-top: var(--sp-4); }

/* Panel-Kopf: Titel links, Panel-Aktionen rechts (sekundär zuerst, primär zuletzt). */
.cb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.cb-panel-head > .cb-panel-title { margin: 0; }
/* Klappbarer Kopf mit Status/Schaltern rechts: Klapp-Knopf und Bedienelemente stehen nebeneinander, nie ineinander. */
.cb-panel-head > .cb-panel-toggle,
.cb-panel-head > .cb-panel-title:has(> .cb-panel-toggle) { flex: 1 1 auto; min-width: 0; width: auto; }
.cb-panel-head:has(> .cb-panel-toggle[aria-expanded="false"]),
.cb-panel-head:has(> .cb-panel-title > .cb-panel-toggle[aria-expanded="false"]) { margin-bottom: 0; }
/* Der Pfeil steht IMMER oben rechts, auch wenn Status, Knöpfe oder Schalter im Kopf folgen: Er bleibt Teil des
   Klapp-Knopfs, wird aber an den rechten Rand des Kopfs gesetzt. Ohne top bleibt er auf Höhe der Überschrift. */
.cb-panel-head:has(> .cb-panel-toggle ~ *),
.cb-panel-head:has(> .cb-panel-title > .cb-panel-toggle):has(> .cb-panel-title ~ *) { position: relative; padding-right: var(--sp-5); }
.cb-panel-head:has(> .cb-panel-toggle ~ *) > .cb-panel-toggle .cb-panel-caret,
.cb-panel-head:has(> .cb-panel-title ~ *) > .cb-panel-title > .cb-panel-toggle .cb-panel-caret { position: absolute; right: 0; }
/* Schmale Kachel: Titel + Pfeil in der ersten Zeile, Status und Schalter immer darunter. */
.cb-panel:has(> .cb-panel-head > .cb-panel-toggle ~ *),
.cb-panel:has(> .cb-panel-head > .cb-panel-title > .cb-panel-toggle):has(> .cb-panel-head > .cb-panel-title ~ *) { container-type: inline-size; }
/* Das Zahnrad (<settings-cog>) ist eigenes Geschwister im Kopf und steht immer zuletzt, also oben rechts direkt vor dem Pfeil.
   In schmalen Kacheln bleibt es in der ersten Zeile neben dem Titel, nur die übrigen Kopf-Aktionen rutschen darunter. */
.cb-panel-head > .btn-cog { order: 1; flex: 0 0 auto; }
@container (max-width: 40rem) {
    .cb-panel-head > .cb-panel-toggle ~ :not(.btn-cog),
    .cb-panel-head > .cb-panel-title:has(> .cb-panel-toggle) ~ :not(.btn-cog) { flex-basis: 100%; order: 2; }
    .cb-panel-head:has(> .btn-cog) > .cb-panel-toggle,
    .cb-panel-head:has(> .btn-cog) > .cb-panel-title:has(> .cb-panel-toggle) { flex-basis: 0; }
}
.cb-panel-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cb-panel-count { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-left: var(--sp-1); }
.cb-panel .cb-subtitle { margin: var(--sp-5) 0 var(--sp-2); }
.cb-panel .cb-subtitle:first-child { margin-top: 0; }

/* Buttons: primär (Hauptaktion eines Panels, auch speichern/hinzufügen) · Erfolg (nur Wechsel ins Live) ·
   ghost (sekundär) · Gefahr (destruktiv). Im Adminbereich immer so breit wie ihr Text. */
/* Primär = Hauptaktion: volle Akzentfläche, damit sie sich klar von allem anderen abhebt. */
.btn-primary {
    width: auto;
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-on-accent);
}
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--c-accent) 85%, var(--c-text)); border-color: color-mix(in srgb, var(--c-accent) 85%, var(--c-text)); }
/* Erfolg = nur Wechsel ins Live („Jetzt live“, „Starten“): getönt, damit Primär die stärkste Fläche bleibt. */
.btn-success {
    --rc: var(--c-success);
    width: auto;
    background: color-mix(in srgb, var(--rc) var(--tint-bg), var(--tint-base));
    border-color: color-mix(in srgb, var(--rc) var(--tint-border), transparent);
    color: var(--c-text);
}
.btn-success:hover:not(:disabled) { background: color-mix(in srgb, var(--rc) var(--tint-bg-hover), var(--tint-base)); }
.btn-danger {
    width: auto; background: transparent;
    border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border));
    color: color-mix(in srgb, var(--c-danger) 80%, var(--c-text));
}
.btn-danger:hover:not(:disabled) { border-color: var(--c-danger); color: var(--c-danger); }
/* Deaktiviert (R2-9): neutrale Fläche aus Tokens statt Deckkraft, damit kein blasser Farbton bleibt.
   Ghost-Knöpfe bleiben ohne Fläche. */
:is(.btn-primary, .btn-success, .btn-danger, .btn-ghost, .btn):disabled, .btn.is-disabled {
    cursor: not-allowed; opacity: 1; transform: none;
    background: var(--c-disabled-bg); border-color: var(--c-disabled-border); color: var(--c-disabled-text);
    filter: grayscale(1);   /* Emoji und Symbole im Knopf ebenfalls entsättigt */
}
.btn-ghost:disabled, .btn-ghost.is-disabled { background: transparent; }
/* Gesperrt mit Grund (aria-disabled + title, util.js zeigt den Grund beim Tippen) sieht aus wie disabled. */
.btn[aria-disabled="true"]:not(.is-busy) { cursor: not-allowed; background: var(--c-disabled-bg); border-color: var(--c-disabled-border); color: var(--c-disabled-text); filter: grayscale(1); }
.btn-ghost[aria-disabled="true"]:not(.is-busy) { background: transparent; }
/* Weitere klickbare Flächen: dieselbe neutrale Fläche statt Deckkraft (Plan 59). */
:is(.cu-btn, .hp-vote, .ov-pos-cell, .chip):disabled { opacity: 1; background: var(--c-disabled-bg); border-color: var(--c-disabled-border); color: var(--c-disabled-text); cursor: not-allowed; }
/* Löschen/Entfernen als Icon-Button in Zeilen: rot beim Überfahren. */
.btn-ghost.is-danger:hover:not(:disabled) { color: var(--c-danger); border-color: var(--c-danger); }
/* Zeilenaktionen (Tabellen, Listen): überall gleich klein. */
:is(.it-actions-cell, .adm-list-meta, .ig-row-actions, .gw-part-ctrls, .cmd-row-actions,
    .ive-amount-cell, .ive-expiry-cell, .pl-card-actions) .btn,
.hist-del {
    width: auto; margin: 0; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-snug); border-radius: var(--r-sm);
}

/* Formulare: Feld = Label + Eingabe + optionaler Hinweis darunter. Schmale Text- und Auswahlfelder: adm-input--xs|sm|md.
   Zahlen nie damit, sondern als Zahlenfeld (.num-field, unten). */
.adm-input--xs { max-width: 6rem; }
.adm-input--sm { max-width: 9rem; }
.adm-input--md { max-width: 12rem; }

/* ── Zahlenfeld (docs/17 „Zahlenfelder“) ──
   Ein Rahmen um Zahl und Einheit: <span class="num-field num-field--sm"><input class="adm-input" type="number">
   <span class="num-unit">kbps</span></span>. Bauen nur über StreamhubUtil.numberField (JS) bzw. <number-field> (Razor).
   Die Breite folgt der erwarteten Stellenzahl (--num-ch): xs bis 3, sm bis 5, md bis 8 Stellen. Die Zahl steht rechts
   bündig an der Einheit, Ziffern gleich breit. Die Browser-Pfeile entfallen, Plus/Minus gibt es nur mit .num-step. */
input[type="number"] { font-variant-numeric: tabular-nums; }
.num-field {
    --num-ch: 5;
    display: inline-flex; align-items: stretch; max-width: 100%; vertical-align: middle;
    background: var(--c-bg); border: 1px solid var(--c-control-border); border-radius: var(--r-md); color: var(--c-text);
}
.num-field--xs { --num-ch: 3; }
.num-field--sm { --num-ch: 5; }
.num-field--md { --num-ch: 8; }
.num-field:focus-within { border-color: var(--c-accent); outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.num-field:has(> input[aria-invalid="true"]) { border-color: var(--c-danger); }
.num-field:has(> input:disabled) { background: var(--c-disabled-bg); border-color: var(--c-disabled-border); color: var(--c-disabled-text); }
.num-field:has(> input:disabled) > .num-step { cursor: not-allowed; }
.num-field > input.adm-input {
    flex: none; width: calc(var(--num-ch) * 1ch + 2 * var(--sp-3)); min-width: 0; max-width: none;
    border: 0; border-radius: inherit; background: transparent; text-align: right;
    -moz-appearance: textfield; appearance: textfield;
}
.num-field > input.adm-input:focus-visible { outline: none; }
.num-field > input.adm-input:disabled { opacity: 1; }
.num-field > input::-webkit-inner-spin-button, .num-field > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-field:has(> .num-unit) > input.adm-input { padding-right: var(--sp-2); }
.num-unit {
    display: flex; align-items: center; padding-right: var(--sp-3); cursor: text; user-select: none; white-space: nowrap;
    color: var(--c-text-muted); font-size: var(--fs-sm);
}
/* Plus/Minus (nur wo sinnvoll: Lautstärke, kleine Anzahlen). Ohne Tab-Halt, die Pfeiltasten im Feld tun dasselbe. */
.num-step {
    flex: none; display: grid; place-items: center; width: 2.25rem; padding: 0; border: 0; background: transparent;
    color: var(--c-text-muted); cursor: pointer;
}
.num-step:hover:not(:disabled) { color: var(--c-text); background: var(--c-surface-2); }
.num-step:first-child { border-right: 1px solid var(--c-border); border-radius: var(--r-md) 0 0 var(--r-md); }
.num-step:last-child { border-left: 1px solid var(--c-border); border-radius: 0 var(--r-md) var(--r-md) 0; }
.num-field:has(> .num-step) > input.adm-input { text-align: center; padding-inline: var(--sp-2); }
.num-field:has(> .num-step) > .num-unit { padding-right: var(--sp-2); }
/* Feldzeile: zusammengehörige Felder dicht nebeneinander, Labels darüber, Felder unten bündig. Zahlenfelder bleiben so
   schmal wie ihr Inhalt, Text- und Auswahlfelder dürfen wachsen. Statt .it-grid, sobald Zahlen in der Gruppe stehen. */
.field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
/* Steht ein Feldfehler unter einem Feld der Zeile, richten sich die Felder oben aus, sonst rutschen die Nachbarn nach unten. */
.field-row:has(> .cb-field > .field-error) { align-items: flex-start; }
.field-row > .cb-field { margin-bottom: 0; flex: 0 1 auto; min-width: 0; }
.field-row > .cb-field:not(:has(.num-field)) { flex: 1 1 14rem; }
/* Feldraster: mehrere gleich aufgebaute Feldzeilen untereinander (je Zeile ein Text- oder Auswahlfeld, dann Zahlenfelder)
   teilen sich die Spalten. Felder in Lesereihenfolge, die Spaltenbreite richtet sich nach dem breitesten Eintrag, Zahlenfelder
   füllen ihre Spalte. So stehen Zeilen bündig übereinander. Zahl der Zahlenspalten: --fg-nums (Standard 2). */
.field-grid { --fg-nums: 2; display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--fg-nums), auto); align-items: end;
    gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.field-grid--1 { --fg-nums: 1; }
.field-grid--3 { --fg-nums: 3; }
.field-grid > .cb-field { margin-bottom: 0; min-width: 0; }
.field-grid .num-field { display: flex; width: 100%; }
.field-grid .num-field > input.adm-input { flex: 1 1 auto; }
@media (max-width: 639.98px) {
    .field-grid { grid-template-columns: repeat(var(--fg-nums), minmax(0, 1fr)); }
    .field-grid > .cb-field:not(:has(.num-field)) { grid-column: 1 / -1; }
}
/* Zahlenfelder in Zeilenaktionen (Tabellen, Listen): so niedrig wie die kleinen Knöpfe daneben. */
:is(.it-actions-cell, .adm-list-meta, .gw-part-ctrls, .cmd-row-actions, .ive-amount-cell, .sb-score) .num-field > input.adm-input { padding-block: var(--sp-1); }

input[type="color"].adm-input { height: 2.45rem; padding: var(--sp-1); }
/* Aktionszeile unter einem Formular bzw. einer Einstellung: Buttons + Statusmeldung.
   Einheitlicher Abstand vor Aktionen (docs/17): immer --sp-5 zum Inhalt darüber, egal ob davor ein Feld, ein Raster,
   eine Liste oder der Klappknopf „Erweitert“ steht. Ränder davor fallen mit ihm zusammen (Margin-Collapse), deshalb tragen
   Felder im Raster keinen eigenen Rand. Als erste Zeile einer Kachel und direkt unter einer Zwischenüberschrift
   (Werkzeugleiste zu dem, was folgt) gilt kein zusätzlicher Abstand. */
.adm-actions { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.adm-actions:first-child, :is(.cb-subtitle, .adm-label) + .adm-actions { margin-top: 0; }
/* In Spalten mit eigenem gap ergänzt die Aktionsleiste nur die Differenz zu --sp-5. */
:is(.cmd-row, .ov-row) > .adm-actions:not(:first-child) { margin-top: var(--sp-3); }   /* gap --sp-2 */
.role-editor > .adm-actions:not(:first-child) { margin-top: var(--sp-2); }             /* gap --sp-3 */
.adm-actions .btn { width: auto; }
.adm-actions .adm-status, .adm-actions .adm-hint { margin: 0; }
/* Rückmeldung einer Aktion (StreamhubUtil.status): gedämpft, grün bei Erfolg, rot bei Fehler. */
.adm-status { color: var(--c-text-muted); font-size: var(--fs-sm); }
.adm-status:empty { display: none; }
.adm-status.is-error, .adm-hint.is-error { color: var(--c-danger-text); }
.adm-status.is-busy { font-style: italic; }
p.adm-status { margin: var(--sp-2) 0 0; }
/* Serverseitige Rückmeldung (z. B. nach dem OAuth-Rücksprung). */
.adm-notice {
    margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-weight: var(--fw-semibold); color: var(--c-text);
    background: color-mix(in srgb, var(--c-success) 14%, var(--c-surface-1));
    border: 1px solid color-mix(in srgb, var(--c-success) 40%, transparent);
}
/* Hinweisband: Standard = Erfolg (grün), is-info = neutraler Hinweis, is-error = Fehler. Fehlt etwas, das der Nutzer
   erledigen muss, nie adm-notice, sondern „Voraussetzung fehlt“ (.req-missing, StreamhubUtil.requirementHtml). */
.adm-notice.is-info {
    background: color-mix(in srgb, var(--c-info) 12%, var(--c-surface-1));
    border-color: color-mix(in srgb, var(--c-info) 40%, transparent);
}
.adm-notice.is-error {
    background: color-mix(in srgb, var(--c-danger) 16%, var(--c-surface-1));
    border-color: color-mix(in srgb, var(--c-danger) 55%, transparent);
}
/* Ankündigung der Plattform über dem Studio-Inhalt (_LayoutShell): Hinweis blau, Wartung gelb, Störung rot. */
.adm-notice.announce { font-weight: var(--fw-regular); }
.adm-notice.announce.is-info { background: color-mix(in srgb, var(--c-info) 12%, var(--c-surface-1)); border-color: color-mix(in srgb, var(--c-info) 40%, transparent); }
.adm-notice.announce.is-maintenance { background: color-mix(in srgb, var(--c-warning) 16%, var(--c-surface-1)); border-color: color-mix(in srgb, var(--c-warning) 55%, transparent); }
.adm-notice.announce.is-incident { background: color-mix(in srgb, var(--c-danger) 16%, var(--c-surface-1)); border-color: color-mix(in srgb, var(--c-danger) 55%, transparent); }

/* Werkzeugleiste über einer Liste: Suche, Filter (.clip-select), Sortierung. */
.cb-panel .lb-controls { margin-bottom: var(--sp-4); }
/* Darf schrumpfen: eine Auswahl ist sonst so breit wie ihre längste Option und schiebt die Seite am Handy auf. */
.lb-controls .clip-select { flex: 0 1 auto; min-width: 0; max-width: 100%; text-overflow: ellipsis; }

/* Tabellen: Grundregeln bei „Gegenstände verwalten" (.it-table). */
/* Bot-Liste: Quellen der öffentlichen Liste */
.bots-sources { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); list-style: none; }

/* Zustände: Fehler rot, sonst gedämpft (Kasten bzw. Tabellenzeile). */
.gw-empty.is-error, td.aw-empty.is-error { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); }

/* Historie (Tabelle): Klick auf die Zeile klappt die Details darunter auf (StreamhubHistory.expandable). */
.hist-row.is-openable { cursor: pointer; }
.hist-row.is-openable:hover > td { background: var(--c-surface-2); }
.hist-caret { display: inline-block; width: 1.1em; color: var(--c-text-muted); transition: transform var(--dur-base) var(--ease); }
button.hist-caret { appearance: none; background: none; border: 0; padding: 0; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
button.hist-caret:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-xs); }
.hist-row.is-open .hist-caret { transform: rotate(90deg); color: var(--c-accent); }
.hist-detail > td { background: var(--c-surface-1); padding: var(--sp-2) var(--sp-3) var(--sp-4); }
/* Historie (Karten): gleicher Pfeil wie bei den Tabellenzeilen, Zeitpunkt sichtbar im Kopf. */
details.pl-card > summary.pl-card-head { justify-content: flex-start; }
details.pl-card > summary.pl-card-head::before {
    content: "▸"; display: inline-block; width: 1.1em; flex: 0 0 auto; color: var(--c-text-muted); transition: transform var(--dur-base) var(--ease);
}
details.pl-card[open] > summary.pl-card-head::before { transform: rotate(90deg); color: var(--c-accent); }
details.pl-card > summary.pl-card-head:hover { background: var(--c-surface-2); }
details.pl-card .pl-card-q { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.pl-card-meta .pl-card-date { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Badges: Status und Kurzinfos. Varianten nach Bedeutung. */
/* ---------- Kennzeichen: drei Formen, Form = Bedeutung (Runde 2, R2-6) ----------
   .badge = Status (Pille) · .tag = Metainfo (eckig) · .chip = Filter/Umschalter (große, klickbare Pille).
   Ältere Klassen sind nur noch Anker im Markup, ihre Optik kommt von hier. Neue Kennzeichen nutzen
   ausschließlich .badge/.tag/.chip. */
.badge {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-0) var(--sp-2); border-radius: var(--r-pill); border: 1px solid var(--c-border-strong);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.5; white-space: nowrap; color: var(--c-text-muted);
    vertical-align: middle; font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.badge--twitch { color: color-mix(in srgb, var(--c-twitch-text) var(--badge-ink), var(--c-text)); border-color: color-mix(in srgb, var(--c-twitch) 40%, transparent); background: color-mix(in srgb, var(--c-twitch) 12%, transparent); }
.tag {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-0) var(--sp-2); border-radius: var(--r-sm);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--rc, var(--c-text-muted)) 70%, var(--c-text));
    background: color-mix(in srgb, var(--rc, var(--c-text-muted)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rc, var(--c-text-muted)) 30%, transparent);
}

.chip {
    display: inline-flex; align-items: center; gap: var(--sp-1); box-sizing: border-box;
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
    background: var(--c-surface-1); border: 1px solid var(--c-border-strong); color: var(--c-text-muted);
    font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; user-select: none;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.chip:hover { color: var(--c-text); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.clip-chip { padding-block: 0; }   /* Höhe kommt aus der Werkzeugleiste (.lb-controls) */
.badge--ok     { color: color-mix(in srgb, var(--c-success) var(--badge-ink), var(--c-text));  border-color: color-mix(in srgb, var(--c-success) 45%, transparent);  background: color-mix(in srgb, var(--c-success) 10%, transparent); }
.badge--warn   { color: color-mix(in srgb, var(--c-warning) var(--badge-ink), var(--c-text));  border-color: color-mix(in srgb, var(--c-warning) 45%, transparent);  background: color-mix(in srgb, var(--c-warning) 10%, transparent); }
.badge--danger { color: color-mix(in srgb, var(--c-danger-text) var(--badge-ink), var(--c-text));           border-color: color-mix(in srgb, var(--c-danger) 45%, transparent);           background: color-mix(in srgb, var(--c-danger) 12%, transparent); }
.badge--info   { color: color-mix(in srgb, var(--c-info) var(--badge-ink), var(--c-text));     border-color: color-mix(in srgb, var(--c-info) 45%, transparent);     background: color-mix(in srgb, var(--c-info) 10%, transparent); }
.badge-group { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }

/* Einfache Listen (Einträge mit Name links, Kurzinfos + Aktionen rechts). */
.adm-list { display: flex; flex-direction: column; }
/* Listenzeilen ohne eigene Fläche: Trennlinie zwischen den Zeilen (Runde 2, R2-3: keine Karten im Panel). */
.adm-list-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap;
    padding: var(--sp-2) 0; border-top: 1px solid var(--c-border);
}
.adm-list-row:first-child { border-top: 0; }
.adm-list-main { display: flex; flex-direction: column; min-width: 0; }
.adm-list-title { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.adm-list-sub { color: var(--c-text-muted); font-size: var(--fs-xs); }
.adm-list-meta { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* Rückmeldungen: Antwort der Plattform unter dem Eintrag (Studio) bzw. Beschreibung im Bearbeiten-Dialog (/ops). */
.fb-reply { flex-basis: 100%; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-accent); background: var(--c-surface-2); border-radius: var(--r-sm); }
.fb-reply p, .fb-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-desc { margin-block: var(--sp-3) var(--sp-5); }
.fb-presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fb-drop {
    display: flex; align-items: center; justify-content: center; padding: var(--sp-4); cursor: pointer; text-align: center;
    border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-1);
}
.fb-drop:hover, .fb-drop.is-over { border-color: var(--c-accent); }
.fb-drop:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fb-thumbs:empty { display: none; }
.fb-drop:not([hidden]) + .fb-thumbs:not(:empty) { margin-top: var(--sp-2); }
.fb-thumb { position: relative; display: block; width: 6rem; height: 4.5rem; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--c-border); }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-thumb-x { position: absolute; top: 2px; right: 2px; padding: 2px; min-height: 0; background: var(--c-surface-2); }
.fb-all { margin: var(--sp-4) 0 0; }
.fb-reply ~ .fb-thumbs, .fb-row > .fb-thumbs { flex-basis: 100%; }

/* Umschalter (Segmente): .seg / .seg-btn – definiert bei der Stream-Statistik (Zeitraumwahl). */
.cb-panel > .seg, .cb-panel > [id$="-body"] > .seg:first-child { margin-bottom: var(--sp-1); }
/* Handy: bricht der Umschalter um, wird aus der Pille ein Block mit abgerundeten Ecken. */
@media (max-width: 639.98px) {
    .seg { border-radius: var(--r-md); }
    .seg-btn { border-radius: var(--r-md); }
}

/* Live-Steuerung eines Ablaufs (Clip-Battle, Giveaway): EIN Panel „Steuerung".
   Oben die Schritte (.live-steps), darunter der aktuelle Stand (.live-now), ein Satz, was als
   Nächstes zu tun ist (.live-next), und die Aktionszeile – sie zeigt nur, was gerade geht;
   „Abbrechen/Beenden" steht abgesetzt rechts (.live-end). */
.live-steps { list-style: none; display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; counter-reset: live-step; }
.live-steps li {
    counter-increment: live-step; flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-2); border-radius: var(--r-md);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.live-steps li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-steps li::before {
    content: counter(live-step); flex: 0 0 auto;
    display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: var(--r-round);
    border: 1px solid var(--c-border-strong); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.live-steps li.is-done { color: var(--c-text); }
.live-steps li.is-done::before { content: "✓"; color: var(--c-rarity-uncommon); border-color: color-mix(in srgb, var(--c-rarity-uncommon) 45%, transparent); }
.live-steps li.is-current {
    color: var(--c-text);
    border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
    background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-2));
}
.live-steps li.is-current::before { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
/* Handy: nur der aktuelle Schritt mit Namen, die übrigen als Nummer. */
@media (max-width: 639.98px) {
    .live-steps li:not(.is-current) { flex: 0 0 auto; }
    .live-steps li:not(.is-current) > span { display: none; }
}

/* Clip-Battle: Player im Studio (Vorschau links, Clip-Wahl, Zeitleiste, Knöpfe und Lautstärke rechts, schmal untereinander). */
.cbp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.cbp-view { position: relative; width: 100%; max-width: 36rem; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--c-media); border: 1px solid var(--c-border); }
.cbp-view video, .cbp-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.cbp-intro { position: absolute; left: var(--sp-2); top: var(--sp-2); }
.cbp-body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.cbp-clips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cbp-clips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cbp-time { display: flex; align-items: center; gap: var(--sp-3); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--c-text-muted); }
.cbp-time .adm-range { flex: 1 1 auto; max-width: none; margin: 0; }
.cbp-ctrls { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cbp-vol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.cbp-vol .adm-label { margin: 0; }
.cbp-vol .adm-range { flex: 1 1 8rem; margin: 0; }
@media (min-width: 1024px) { .cbp { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.cbp-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3); }
.cbp-secs { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); }
.cbp-secs .adm-label { margin: 0; }
.cbp-secs .adm-input { width: auto; }
.cbp-opts[hidden] { display: none; }

.live-now { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.live-now-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.live-now .adm-list-meta { margin-left: auto; }
.live-now .adm-list-row.is-winner { box-shadow: inset 3px 0 0 var(--c-success); padding-left: var(--sp-3); }
/* Tarifseite: der Tarif, der die gesuchte Funktion freischaltet (?feature=…). */
.adm-list-row.is-wanted { box-shadow: inset 3px 0 0 var(--c-accent); padding-left: var(--sp-3); }
/* Clip im Match: Voting-Nummer (so stimmt der Chat ab) + Titel. */
.live-clip { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.live-key {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--c-accent) 16%, var(--c-surface-2)); color: var(--c-accent); font-weight: var(--fw-heavy);
}
/* Kennzahlen (Giveaway): große Zahl, kleine Beschriftung darunter. */
.live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--sp-2) var(--sp-4); }
.live-stats > div { display: flex; flex-direction: column; min-width: 0; }
.live-stats strong { font-size: var(--fs-xl); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.live-stats span { color: var(--c-text-muted); font-size: var(--fs-xs); }

/* Einstellungen direkt in der Steuerung: Felder + Speichern in einer Zeile. */
.live-form { display: flex; align-items: flex-end; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.live-form > .cb-field { flex: 1 1 14rem; margin-bottom: 0; }
.live-form > .live-form-narrow { flex: 0 1 11rem; }

.live-next { margin: var(--sp-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.live-next:empty { display: none; }
.live-actions { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border-strong); }
.live-actions .live-end { margin-left: auto; }

/* ── Admin: WASD-Spiel (Live-Stand als Tastenkreuz) ── */
.wd-board { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-3); }
.wd-board.is-off { opacity: .55; }
.wd-row { display: flex; gap: var(--sp-2); }
.wd-key {
    position: relative; overflow: hidden; width: 96px; height: 88px; border-radius: var(--r-md);
    border: 1px solid var(--c-border); background: var(--c-surface-1);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0);
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.wd-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: color-mix(in srgb, var(--c-twitch) 22%, transparent); transition: height var(--dur-slow) var(--ease); }
.wd-letter, .wd-dir, .wd-count { position: relative; }
.wd-letter { font-size: 1.5rem; font-weight: var(--fw-heavy); line-height: 1; }
.wd-dir { font-size: var(--fs-xs); color: var(--c-text-muted); }
.wd-count { font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.wd-key.is-lead { border-color: var(--c-twitch); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-twitch) 30%, transparent); }
.wd-key.is-win { border-color: var(--c-rarity-uncommon); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-rarity-uncommon) 35%, transparent); }
.wd-status { text-align: center; color: var(--c-text-muted); margin: 0 0 var(--sp-2); min-height: 1.3em; }

/* Tribunal (/admin/tribunal): Seite des Urteils als farbiges Kennzeichen, Chancen je Seite über der Liste */
.cw-emoji { font-size: var(--fs-lg); line-height: 1; }
.cw-odds { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cw-odds:empty { display: none; }
.tag.cw-side[data-side="viewer-penalty"] { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); }
.tag.cw-side[data-side="viewer-reward"] { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 45%, transparent); }
.tag.cw-side[data-side="streamer-penalty"] { color: var(--c-warning); border-color: color-mix(in srgb, var(--c-warning) 45%, transparent); }
.tag.cw-side[data-side="streamer-reward"] { color: var(--c-info); border-color: color-mix(in srgb, var(--c-info) 45%, transparent); }
.tag.cw-side[data-side="chaos"] { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.cmd-row.is-off .cw-emoji { filter: grayscale(1); opacity: .6; }
@media (max-width: 639.98px) { .wd-key { width: 76px; height: 72px; } }

/* ── Studio: Glücksrad (Vorschau, Stand, Felder-Editor) ── */
.whl-live { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.whl-preview { aspect-ratio: 1; width: 100%; }
.whl-preview svg { display: block; width: 100%; height: 100%; overflow: visible; }
.whl-disc { transform-box: fill-box; transform-origin: center; }
.whl-svg-text { fill: var(--c-on-media); font-weight: var(--fw-heavy); paint-order: stroke; stroke: color-mix(in srgb, var(--c-media) 50%, transparent); stroke-width: 1.4px; }
.whl-svg-rim { fill: none; stroke: var(--c-accent); stroke-width: 3; }
.whl-svg-slice { stroke: color-mix(in srgb, var(--c-media) 35%, transparent); }
.whl-svg-hub { fill: var(--c-surface-1); stroke: var(--c-accent); stroke-width: 3; }
.whl-svg-pointer { fill: var(--c-accent); stroke: var(--c-surface-1); stroke-width: 1.5; }
.whl-status { margin: 0 0 var(--sp-3); font-weight: var(--fw-semibold); }
.whl-spin-name { flex: 1 1 14rem; }
.whl-task-left { font-variant-numeric: tabular-nums; color: var(--c-accent); font-weight: var(--fw-bold); }
@media (max-width: 1023.98px) {
    .whl-live { grid-template-columns: minmax(0, 1fr); }
    .whl-preview { max-width: 260px; margin-inline: auto; }
}

/* Kopf und Zeilen teilen ein Raster (subgrid), damit die Spalten bündig stehen. */
.whl-seg-table {
    display: grid; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
    grid-template-columns: 2.5rem minmax(0, 1fr) auto auto 3.75rem auto 2.25rem;
}
.whl-seg-list { display: contents; }
.whl-seg-head, .whl-seg-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.whl-seg-head { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.whl-seg-head > :nth-child(5) { text-align: right; }
.whl-seg-color {
    width: 2.5rem; height: 2.25rem; padding: 2px; cursor: pointer;
    border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-1);
}
.whl-seg-text { min-width: 0; }
.whl-seg-chance { text-align: right; font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 639.98px) {
    /* Handy: Farbe, Text und Entfernen oben, darunter Gewicht, Dauer und Chance. */
    .whl-seg-table { display: flex; flex-direction: column; align-items: stretch; }
    .whl-seg-head { display: none; }
    .whl-seg-row {
        display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2);
        padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border);
    }
    /* Zeilenumbruch nach Farbe, Text und Entfernen */
    .whl-seg-row::after { content: ""; order: 4; flex-basis: 100%; height: var(--sp-2); }
    .whl-seg-text { flex: 1 1 0; }
    .whl-seg-color { order: 1; }
    .whl-seg-text { order: 2; }
    .whl-seg-del { order: 3; }
    .whl-seg-weight { order: 5; margin-left: calc(2.5rem + var(--sp-2)); }
    .whl-seg-min { order: 6; }
    .whl-seg-chance { order: 7; margin-left: auto; }
    .whl-seg-row .rw-slot-btn { order: 8; }
    .whl-seg-weight .num-step { display: none; }
}

/* ── Admin: Countdowns ── */
.cd-sub { font-size: var(--fs-md); font-weight: var(--fw-bold); margin: var(--sp-4) 0 var(--sp-2); color: var(--c-text-muted); }
.cd-clock { font-size: var(--fs-xl); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; color: var(--c-accent); }
.cd-live { color: var(--c-rarity-uncommon); border-color: color-mix(in srgb, var(--c-rarity-uncommon) 45%, transparent); }
.cmd-row-actions .cd-start-duration { width: 5.5rem; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }

/* ── Admin: Signalwächter ── */
.sg-enabled { margin: 0; }
/* Statuszeile: was der Wächter gerade tut. Die Farbe des Randstrichs trägt den Ton (läuft, angehalten, kein Stream). */
.sg-mode { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
    margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-border-strong); color: var(--c-text-muted); font-size: var(--fs-sm); }
.sg-mode[data-tone="ok"] { border-left-color: var(--c-success); }
.sg-mode[data-tone="warn"] { border-left-color: var(--c-warning); color: var(--c-text); }
.sg-mode[data-tone="info"] { border-left-color: var(--c-info); }
.sg-mode .btn { width: auto; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.sg-mode .btn[hidden] { display: none; }
.sg-range { width: 100%; accent-color: var(--c-accent); }
/* Vorschläge für OBS-Quellen mit Knopf je Zeile: Quellen-Check der Handy-Quelle. */
.sg-check { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--c-warning); font-size: var(--fs-sm); }
.sg-check[hidden] { display: none; }
/* Kachel „Empfang“: QR-Code links neben den Links, darunter die Leitungen des Handys mit Anteil als Balken. */
.sg-in-grid { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-4); }
.sg-in-grid:has(.sg-in-qr[hidden]) { grid-template-columns: minmax(0, 1fr); }
.sg-in-qr { padding: var(--sp-2); border-radius: var(--r-md); background: var(--c-on-media); line-height: 0; }
.sg-in-qr svg { width: 100%; height: auto; }
.sg-in-links { display: grid; gap: var(--sp-3); }
.sg-in-links .cb-field { margin: 0; }
.sg-in-rist { display: grid; gap: var(--sp-3); }
.sg-in-rist[hidden] { display: none; }
.sg-in-lines { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.sg-in-line { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(4rem, 1fr) auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.sg-in-line.is-quiet .sg-in-bar > span { background: var(--c-warning); }
.sg-in-bar { display: block; height: .5rem; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; }
.sg-in-bar > span { display: block; height: 100%; width: var(--w, 0%); background: var(--c-accent); }
.sg-in-line-val { white-space: nowrap; color: var(--c-text-muted); }
@media (max-width: 639.98px) {
    .sg-in-grid { grid-template-columns: minmax(0, 1fr); }
    .sg-in-qr { max-width: 11rem; }
    .sg-in-line { grid-template-columns: minmax(0, 1fr) auto; }
    .sg-in-bar { grid-column: 1 / -1; grid-row: 2; }
}
.sg-check-title { margin: 0; font-weight: var(--fw-bold); }
.sg-check-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
    color: var(--c-text-muted); }
.sg-check-row .btn { width: auto; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
/* Schnellsteuerung: zwei Gruppen (Szene, Handy-Bild) in der Optik der Kennzahl-Kacheln darunter. Je Gruppe gleich breite
   Knöpfe, Symbol über kurzem Text. Ausgeblendete Knöpfe (nicht eingerichtet) nehmen keinen Platz ein. Am Handy untereinander. */
.sg-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (max-width: 639.98px) { .sg-quick { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); } }
.sg-quick-group { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.sg-quick-label { color: var(--c-text-muted); font-size: var(--fs-xs); }
.sg-quick-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); }
.sg-quick .btn[hidden] { display: none; }
.sg-quick .btn {
    flex-direction: column; gap: var(--sp-1); width: 100%; min-width: 0; padding: var(--sp-3) var(--sp-2);
    border-color: var(--c-border); font-size: var(--fs-sm); line-height: var(--lh-tight); text-align: center;
}
.sg-quick .btn:hover:not(:disabled) { border-color: var(--c-border-strong); }
/* Weiter erscheint nur, solange angehalten ist oder Privat läuft: als nächster Schritt hervorgehoben. */
.sg-quick .btn[data-sg-action="live"]:not(:disabled) { border-color: var(--c-accent); }
@media (max-width: 639.98px) { .sg-quick .btn { padding-inline: var(--sp-1); font-size: var(--fs-xs); } }
#sg-quick-msg:not(:empty) { display: block; margin-bottom: var(--sp-2); }
/* Messwerte unter der Werkzeugleiste: sechs Kacheln immer als ganzes Raster (3 × 2, am Handy 2 × 3), nie 4 + 2. */
#sg-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 639.98px) { #sg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#sg-chart { margin-top: var(--sp-2); }
/* Messung im Verlauf (signal-log-view.js, auch Stream-Statistik): Urteil, Anteilsbalken gut/schwach/kein Signal, Legende. */
.sl-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.sl-summary .row-menu { margin-left: auto; }
.sl-share { display: flex; height: .55rem; margin-bottom: var(--sp-1); background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
    border-radius: var(--r-pill); overflow: hidden; }
.sl-share-part { display: block; height: 100%; }
.sl-share-part--live { background: var(--c-success); }
.sl-share-part--low { background: var(--c-warning); }
.sl-share-part--offline { background: var(--c-danger); }
.sl-share-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-3); padding: 0; list-style: none;
    color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.sl-share-legend li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.sl-share-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: var(--r-round); }
.sl-filter { margin: var(--sp-2) 0; }

/* ── Admin: Medienplayer ── */
.mp-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-2); align-items: center; }
.mp-sources { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; margin-bottom: var(--sp-2); }
.mp-sources .mp-inline { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.mp-sources .mp-inline .adm-label { margin: 0; }
.mp-actions, .sl-actions { white-space: nowrap; }
.mp-actions .btn, .sl-actions .btn { width: auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }

/* Sub-Etiketten-Designer: Zeichenfläche (Etikett ungedreht, weiß auf neutraler Fläche) + Elementliste/Eigenschaften. */
.sld-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin: var(--sp-3) 0 var(--sp-4); }
@media (min-width: 1024px) { .sld-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); } }
.sld-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.sld-toolbar .btn { width: auto; }
.sld-stage { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: var(--sp-4); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); touch-action: none; user-select: none; }
.sld-stage:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.sld-stage canvas { display: block; max-width: 100%; max-height: 34rem; width: auto; height: auto; outline: 1px solid var(--c-border-strong); cursor: crosshair; }
.sld-sel { position: absolute; border: 1px dashed var(--c-accent); pointer-events: none; }
.sld-handle { position: absolute; right: calc(var(--sp-2) * -1); bottom: calc(var(--sp-2) * -1); width: var(--sp-4); height: var(--sp-4); border-radius: var(--r-xs); background: var(--c-accent); border: 2px solid var(--c-bg); pointer-events: auto; cursor: nwse-resize; }
.sld-handle.is-point { right: auto; bottom: auto; transform: translate(-50%, -50%); border-radius: var(--r-round); cursor: move; }
.sld-guide { position: absolute; pointer-events: none; background: var(--c-info); }
.sld-guide.is-v { width: 1px; }
.sld-guide.is-h { height: 1px; }
.sld-dims { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm); }
.sld-layers { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.sld-layer { display: flex; align-items: center; gap: var(--sp-1); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: var(--sp-1); background: var(--c-surface-1); }
.sld-layer.is-active { border-color: var(--c-accent); }
.sld-layer .btn { width: auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
.sld-layer-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); background: none; border: 0; color: var(--c-text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: var(--sp-1); }
.sld-layer-name .tag { flex: 0 0 auto; }
.sld-switches { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0 var(--sp-3); }
.sld-switches .switch-row { margin: 0; }
.sld-img-actions .btn, .sld-props-empty { margin-top: 0; }
.adm-actions .sld-copy { width: auto; max-width: 16rem; }
tr.is-off td { opacity: .55; }

/* Anklickbare Tags: aussehen wie .tag (Button-Standardhintergrund des Browsers weg), Hover wie Links. */
button.tag.mp-chip { appearance: none; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
button.tag.mp-chip:hover, button.tag.mp-chip:focus-visible { color: var(--c-text); border-color: var(--c-text-muted); }
.tag.is-warn { color: var(--c-warning); border-color: color-mix(in srgb, var(--c-warning) 45%, transparent); }
.mp-chip-btn { width: auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
.mp-error { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-danger-text); white-space: normal; max-width: 34ch; }
.mp-old { color: var(--c-warning); }

/* Govee: Schnittstelle je Leuchte (Verbindungen) */
.cmd-row-main .gv-api { width: auto; min-width: 12rem; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }

/* Overlays folgen der Kamera (/admin/overlays): alle Zeilen im selben Raster (gleich breite Felder + feste Spalte für ✕) */
/* Zeile einer Zeilenliste mit zwei Auswahlfeldern + × (Kamera-Seiten, Regeln der Sound-Player). */
.cs-row { --cs-del: calc(var(--sp-6) + var(--sp-3)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--cs-del); gap: var(--sp-2); align-items: end; }
.cs-row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) var(--cs-del); }
.cs-row > .btn { width: var(--cs-del); padding-inline: 0; }
.cs-row > .cb-field { margin: 0; }
.cs-row--fields { margin-bottom: var(--sp-3); }   /* Feldzeile mit Labels: Abstand wie .cb-field */
/* Schmal: Zweier-Zeilen zeigen das erste Feld über die ganze Breite, darunter das zweite mit ×. Dreier-Zeilen brechen in
   zwei Felder je Zeile um, Felder mit Label stehen untereinander. */
@media (max-width: 639.98px) {
    .cs-row, .cs-row--3 { grid-template-columns: minmax(0, 1fr) var(--cs-del); }
    .cs-row > .cb-field, .cs-row:not(.cs-row--3) > select:first-child { grid-column: 1 / -1; }
    .row-list-rows:has(> .cs-row) { gap: var(--sp-4); }   /* umgebrochene Zeilen klar trennen */
}

/* ============================================================
   App-Shell (Admin/Editor): Sidebar + Inhaltsspalte (_LayoutShell, app-shell.js)
   Ab 1024px feste Sidebar links, darunter eine Schublade, die der Knopf
   „☰ Bereich › Seite" über dem Inhalt öffnet.
   ============================================================ */
:root { --topbar-h: 73px; --shell-foot-h: 0px; }   /* echte Höhe der Kopfzeile setzt header.js */

.page--shell { max-width: none; padding: 0; display: flex; flex-direction: column; }
/* Ab 1024 px ist der Footer auf allen Seiten (Studio, Community, Plattform) fest unten angedockt, eine Zeile hoch.
   Navigation, Inhalt und Seitenpanel scrollen dann zwischen Kopfzeile und Footer, nichts schiebt sich ans Seitenende.
   Feste Elemente unten (Toast, Seitenpanel, Knopf „Variablen“) rechnen --shell-foot-h mit ein. */
@media (min-width: 1024px) {
    :root:has(body > .footer) { --shell-foot-h: 2.5rem; }
    body:has(> .footer) { padding-bottom: var(--shell-foot-h); }
    body > .footer {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
        height: var(--shell-foot-h); padding: 0 var(--sp-4); flex-wrap: nowrap; overflow: hidden;
        background: var(--c-bg); font-size: var(--fs-xs); white-space: nowrap;
    }
    body > .footer .footer-links { flex-wrap: nowrap; gap: var(--sp-4); }
}
.app-shell {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    align-items: start;
    /* Kurze Seiten: Resthöhe bleibt unten, statt sich auf die Zeilen (Schubladen-Knopf, Inhalt) zu verteilen. */
    align-content: start;
}

.app-side {
    position: sticky; top: var(--topbar-h);
    height: calc(100dvh - var(--topbar-h) - var(--shell-foot-h));
    overflow-y: auto; overscroll-behavior: contain;
    padding: var(--sp-4) var(--sp-3) var(--sp-6);
    border-right: 1px solid var(--c-border);
    background: var(--c-bg);
}
.app-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-3); }
.app-side-title {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em;
    text-transform: uppercase; color: var(--c-text-muted);
}
.app-side-close { display: none; }
.app-side-search { padding-bottom: var(--sp-3); }
.app-side-filter {
    width: 100%; padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface-1); color: var(--c-text);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    font: inherit; font-size: var(--fs-sm);
}
.app-side-filter:focus-visible { outline: var(--focus-ring); outline-offset: 0; }

.app-side-group + .app-side-group { margin-top: var(--sp-3); }
.app-side-group[hidden] { display: none; }
.app-side-group-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
    color: var(--c-text-muted); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold);
    letter-spacing: .06em; text-transform: uppercase; text-align: left;
}
.app-side-group-toggle:hover { color: var(--c-text); }
.app-side-group-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.app-side-caret::before { content: "▾"; display: inline-block; transition: transform var(--dur-base) var(--ease); }
.app-side-group-toggle.is-collapsed .app-side-caret::before { transform: rotate(-90deg); }

.app-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-0); }
.app-side-list[hidden], .app-side-list li[hidden] { display: none; }
.app-side-link {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm);
    color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-tight);
}
.app-side-link:hover { color: var(--c-text); background: var(--c-surface-1); }
.app-side-link:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.app-side-link[aria-current="page"] {
    color: var(--c-text); font-weight: var(--fw-semibold);
    background: var(--c-surface-2); box-shadow: inset 3px 0 0 var(--c-accent);
}
.app-side-ic { flex: 0 0 1.25rem; text-align: center; }
.app-side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bereich nicht im Tarif: Schloss-Hinweis rechts im Eintrag. */
.app-side-lock { margin-left: auto; flex: none; font-size: var(--fs-xs); opacity: .8; }
/* Zähler im Eintrag (z. B. offene Probleme, neue Rückmeldungen), rechts wie der Schloss-Hinweis. */
.app-side-badge { margin-left: auto; flex: none; }
/* Funktionen (module-nav.js): rechts im Eintrag der Hinweis „Update“ (Klick aktualisiert) und das Menü „⋯“. Das Menü
   erscheint beim Überfahren, mit Fokus oder offen, auf Touch-Geräten immer. Rechtsklick öffnet es an der Maus. Hover und
   aktuelle Seite färben den ganzen Eintrag, damit Hinweis und Knopf mit darin liegen. */
.app-side-fn { display: flex; align-items: center; border-radius: var(--r-sm); }
.app-side-fn > .app-side-link { flex: 1 1 auto; min-width: 0; }
.app-side-fn:hover { background: var(--c-surface-1); }
.app-side-fn:hover > .app-side-link { color: var(--c-text); background: none; }
.app-side-fn:has(> .app-side-link[aria-current="page"]) { background: var(--c-surface-2); box-shadow: inset 3px 0 0 var(--c-accent); }
.app-side-fn > .app-side-link[aria-current="page"] { background: none; box-shadow: none; }
.app-side-upd { margin-inline: var(--sp-1); cursor: pointer; font-family: inherit; }
.app-side-upd:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.app-side-fn .row-menu { flex: none; }
.app-side-fn .row-menu-btn { display: none; padding: var(--sp-1); border-color: transparent; }
/* Mit „Update“ hält der unsichtbare Knopf seinen Platz, damit der Hinweis beim Überfahren nicht nach links springt. */
.app-side-fn:has(.app-side-upd) .row-menu-btn { display: inline-flex; visibility: hidden; }
.app-side-fn:hover .row-menu-btn, .app-side-fn:focus-within .row-menu-btn,
.app-side-fn .row-menu-btn[aria-expanded="true"] { display: inline-flex; visibility: visible; }
@media (hover: none) { .app-side-fn .row-menu-btn { display: inline-flex; } }
/* Sortieren per Ziehen (module-nav.js): gezogener Eintrag blass, Linie oben bzw. unten am Ziel zeigt die Ablage. */
.app-side-fn.is-dragging { opacity: .5; }
.app-side-fn.is-drop-before { box-shadow: inset 0 2px 0 var(--c-accent); }
.app-side-fn.is-drop-after { box-shadow: inset 0 -2px 0 var(--c-accent); }
.app-side-empty { margin: 0; padding: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); }
.app-side-empty[hidden] { display: none; }

.app-side-open, .app-side-backdrop { display: none; }

/* Inhaltsspalte: ein Container für alle Studio-Seiten. Er nutzt die Breite zwischen Navigation und Seitenpanel,
   linksbündig, bis höchstens --studio-max (dann bleibt rechts Luft statt überlanger Zeilen). */
.app-content {
    min-width: 0; width: 100%;
    max-width: var(--studio-max);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) var(--sp-7);
}

/* ── Seitenpanel rechts (_StudioPanel, studio-panel.js): Hilfe, Chat-Befehle, Variablen ──
   Ab 1440 px fest neben dem Inhalt (sticky), einklappbar zu einer Leiste. Darunter und eingebettet eine Schublade
   von rechts, unter 640 px ein Bottom-Sheet. Einstieg dann über .studio-panel-launch und den Knopf „Hilfe“. */
/* --panel-w setzt _LayoutShell je Konto (vom Nutzer gezogen), höchstens 40 % der Fensterbreite. */
.app-shell.has-studio-panel { grid-template-columns: var(--side-w) minmax(0, 1fr) min(var(--panel-w), 40vw); }
.app-shell.has-studio-panel.is-panel-collapsed { grid-template-columns: var(--side-w) minmax(0, 1fr) 3.25rem; }
.studio-panel {
    position: sticky; top: var(--topbar-h);
    height: calc(100dvh - var(--topbar-h) - var(--shell-foot-h));
    display: flex; flex-direction: column; min-width: 0;
    border-left: 1px solid var(--c-border); background: var(--c-bg);
}
/* Griff am linken Rand: Breite ziehen (studio-panel.js). Nur fest daneben und ausgeklappt. */
.studio-panel-resize {
    position: absolute; top: 0; bottom: 0; left: calc(-0.5 * var(--sp-3)); z-index: 1; width: var(--sp-3);
    cursor: col-resize; touch-action: none;
}
.studio-panel-resize::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px;
    background: transparent; transition: background var(--dur-base) var(--ease);
}
.studio-panel-resize:hover::after, .studio-panel-resize:focus-visible::after, .is-panel-resizing .studio-panel-resize::after { background: var(--c-accent); }
.studio-panel-resize:focus-visible { outline: none; }
.studio-panel.is-drawer .studio-panel-resize, .is-panel-collapsed .studio-panel-resize { display: none; }
.is-panel-resizing, .is-panel-resizing * { cursor: col-resize !important; user-select: none; }
.studio-panel[hidden] { display: none; }
.studio-panel-head {
    display: flex; align-items: flex-end; gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-2) 0 var(--sp-3); border-bottom: 1px solid var(--c-border);
}
.studio-panel-tabs { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; }
.studio-panel-tabs .sp-tab { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2); }
/* Symbole nur in der eingeklappten Leiste, ausgeklappt passen so alle drei Reiter in die Panelbreite. */
.app-shell:not(.is-panel-collapsed) .studio-panel-tabs .sp-tab > .ic, .studio-panel.is-drawer .studio-panel-tabs .sp-tab > .ic { display: none; }
.studio-panel-tabs.is-single .sp-tab { cursor: default; border-bottom-color: transparent; color: var(--c-text); }
.studio-panel-close { flex: 0 0 auto; margin-bottom: var(--sp-2); padding: var(--sp-1) var(--sp-2); }
.studio-panel-close.is-expand .ic { transform: rotate(90deg); }
.studio-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4); }
.studio-panel-pane[hidden] { display: none; }
.studio-panel-sub { margin: 0 0 var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.studio-panel-pagehelp { margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.studio-panel-article[data-state="loading"] { min-height: 8rem; }
.studio-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2);
    margin: var(--sp-5) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); }
.studio-panel-full { color: var(--c-accent); }
.studio-panel-cmds .cmd-row { padding: var(--sp-2) 0; }
.studio-panel-cmds .cmd-row-main { flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.studio-panel-example { margin-top: var(--sp-1); color: var(--c-text-muted); font-size: var(--fs-sm); }
.studio-panel-example code { overflow-wrap: anywhere; }
.studio-panel-varfield { margin: 0 0 var(--sp-1); overflow-wrap: anywhere; }
.studio-panel-varfield.is-empty { color: var(--c-text-muted); }
.studio-panel-vars { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); }
.studio-panel-var[draggable="true"] { cursor: grab; }
.studio-panel-var[draggable="true"]:active { cursor: grabbing; }
.studio-panel-var {
    display: grid; gap: var(--sp-0); width: 100%; text-align: left; cursor: pointer;
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: var(--c-surface-1); color: var(--c-text); font: inherit;
}
.studio-panel-var:hover { border-color: var(--c-accent); }
.studio-panel-var:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.studio-panel-var code { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.studio-panel-var span { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Eingeklappt (fest): schmale Leiste mit den Reiter-Symbolen, ein Klick klappt auf. */
.is-panel-collapsed .studio-panel-head { flex-direction: column-reverse; align-items: center; padding: var(--sp-3) 0; border-bottom: 0; }
.is-panel-collapsed .studio-panel-tabs { flex-direction: column; align-items: center; gap: var(--sp-2); overflow: visible; }
.is-panel-collapsed .studio-panel-tabs .sp-tab { padding: var(--sp-2); border-bottom: 0; border-radius: var(--r-sm); }
.is-panel-collapsed .studio-panel-tabs .sp-tab.is-active { border-bottom-color: transparent; box-shadow: none; }
.is-panel-collapsed .studio-panel-tab-label, .is-panel-collapsed .studio-panel-tabs .cb-panel-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-panel-collapsed .studio-panel-close { margin: 0; }
.is-panel-collapsed .studio-panel-body { display: none; }

/* Schublade (unter 1440 px und eingebettet) und Bottom-Sheet (unter 640 px). */
.studio-panel.is-drawer {
    position: fixed; inset: 0 0 0 auto; z-index: calc(var(--z-drawer) + 1);
    width: min(24rem, 92vw); height: auto;
    background: var(--c-surface-1); border-left: 1px solid var(--c-border-strong); box-shadow: var(--shadow-overlay);
}
/* Von einem Variablenfeld geöffnet: nicht modal, ohne Abdunkeln, zwischen Kopfzeile und Footer (Seite bleibt bedienbar). */
.studio-panel.is-drawer.is-peek { top: var(--topbar-h); bottom: var(--shell-foot-h); width: min(var(--panel-w), 40vw); z-index: var(--z-sticky); }
.is-embed .studio-panel.is-drawer.is-peek { top: 0; }
.studio-panel-backdrop { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--c-scrim); }
.studio-panel-backdrop[hidden] { display: none; }
@media (max-width: 639.98px) {
    .studio-panel.is-drawer {
        inset: auto 0 0 0; width: 100%; height: min(80dvh, 40rem);
        border-left: 0; border-top: 1px solid var(--c-border-strong); border-radius: var(--r-md) var(--r-md) 0 0;
    }
}
/* Einstieg, solange das Panel nicht fest steht: Knöpfe rechts über dem Inhalt. */
.studio-panel-launch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.studio-panel-launch[hidden] { display: none; }
/* Änderungen je Version der Bibliothek (StreamhubUtil.changesHtml): Rückfrage vor jedem Update (Overlays, Funktionen in der
   Seitenleiste) und Detail der Bibliothek. */
.upd-changes { display: flex; flex-direction: column; gap: var(--sp-3); }
.upd-version { display: flex; flex-direction: column; gap: var(--sp-2); }
.upd-version-head { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.upd-version-date { margin-left: var(--sp-1); font-weight: var(--fw-regular); color: var(--c-text-muted); }
.upd-group-head { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.upd-list { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }
.upd-list li + li { margin-top: var(--sp-1); }
/* Status der Seite links in der Leiste (data-launch-slot, studio-panel.js), die Knöpfe bleiben rechts. */
.studio-panel-launch { align-items: center; }
.studio-panel-launch > [data-launch-slot] { margin: 0 auto 0 0; }
.studio-panel-launch-btn { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
/* Schublade: Knopf „Variablen“ unten rechts, solange ein Feld mit Variablen gewählt ist (studio-panel.js). */
.studio-panel-varfab {
    position: fixed; right: var(--sp-4); bottom: calc(var(--shell-foot-h) + var(--sp-4)); z-index: var(--z-sticky);
    width: auto; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm);
    background: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text); box-shadow: var(--shadow-overlay);
}
.studio-panel-varfab[hidden] { display: none; }
@media (max-width: 639.98px) {
    .studio-panel-varfab { bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
    :root:has(.tabbar) .studio-panel-varfab { bottom: calc(var(--tabbar-h) + var(--sp-3) + env(safe-area-inset-bottom)); }
}
.is-pwa .app-shell--cockpit .studio-panel, .is-pwa .app-shell--cockpit .studio-panel-launch { display: none; }

@media (max-width: 1023.98px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-content { max-width: none; padding-top: var(--sp-4); }

    .app-side-open {
        display: inline-flex; align-items: center; gap: var(--sp-2);
        justify-self: start; max-width: calc(100% - 2rem); min-height: 2.5rem;
        margin: var(--sp-4) clamp(1rem, 3vw, 2.5rem) 0;
        padding: var(--sp-2) var(--sp-3);
        background: var(--c-surface-1); color: var(--c-text);
        border: 1px solid var(--c-border); border-radius: var(--r-md);
        font: inherit; font-size: var(--fs-sm); cursor: pointer;
    }
    .app-side-open:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
    .app-side-open-bars {
        flex: 0 0 auto; width: 1rem; height: 2px; margin: var(--sp-2) 0;
        background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
    }
    .app-side-open-area, .app-side-open-sep { color: var(--c-text-muted); }
    .app-side-open-page { font-weight: var(--fw-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .app-side {
        position: fixed; inset: 0 auto 0 0; z-index: calc(var(--z-drawer) + 1);
        width: min(18rem, 85vw); height: auto;
        background: var(--c-surface-1); border-right: 1px solid var(--c-border-strong);
        box-shadow: var(--shadow-overlay);
        transform: translateX(-100%); visibility: hidden;
        transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
    }
    .app-shell.is-side-open .app-side { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease); }
    .app-side-close {
        display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
        border: 1px solid var(--c-border); border-radius: var(--r-md);
        background: transparent; color: var(--c-text); cursor: pointer; font: inherit;
    }
    .app-side-close:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
    .app-side-backdrop { display: block; position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--c-scrim); }
    .app-side-backdrop[hidden] { display: none; }
}

/* Stream-Cockpit: in der PWA navigiert die Reiterleiste – keine Sidebar; am Handy ersetzt der
   eigene Zurück-Pfeil des Cockpits den Schubladen-Knopf. */
.is-pwa .app-shell--cockpit { grid-template-columns: minmax(0, 1fr); }
.is-pwa .app-shell--cockpit .app-side,
.is-pwa .app-shell--cockpit .app-side-open { display: none; }
@media (max-width: 639.98px) {
    .app-shell--cockpit .app-side-open { display: none; }
}

/* ============================================================
   Dialog (StreamhubUtil.confirm / ask / notice, util.js) – natives <dialog>
   ============================================================ */
.dialog {
    width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
    padding: 0; border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    background: var(--c-surface-1); color: var(--c-text); box-shadow: var(--shadow-overlay);
}
.dialog::backdrop { background: var(--c-scrim); }
.dialog-box { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: var(--sp-5); }
.dialog-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.dialog-text { margin: 0; color: var(--c-text-muted); white-space: pre-line; overflow-wrap: anywhere; }
.dialog-text:empty { display: none; }
.dialog-field[hidden], .dialog-fields[hidden], .dialog-html[hidden] { display: none; }
.dialog-html { max-height: 50dvh; overflow-y: auto; overflow-wrap: anywhere; }
.dialog-fields { display: flex; flex-direction: column; gap: var(--sp-3); }
.dialog-fields .cb-field { margin: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.dialog-actions .btn[hidden] { display: none; }
@media (max-width: 639.98px) {
    .dialog { margin: auto auto var(--sp-3); }
    .dialog-actions .btn { flex: 1 1 auto; }
}

/* ============================================================
   Command Palette (palette.js) + Suchknopf im Header
   ============================================================ */
.topbar-search {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    height: 2.25rem; padding: 0 var(--sp-3);
    border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    background: var(--c-surface-1); color: var(--c-text-muted);
    font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.topbar-search:hover { color: var(--c-text); border-color: var(--c-text-muted); }
.topbar-search:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.topbar-search-kbd, .palette kbd {
    padding: 0 var(--sp-1); border: 1px solid var(--c-border-strong); border-radius: var(--r-xs);
    background: var(--c-bg); color: var(--c-text-muted);
    font: inherit; font-size: var(--fs-xs); line-height: 1.5;
}
@media (max-width: 1439.98px) {
    .topbar-search { width: 2.25rem; padding: 0; justify-content: center; }
    .topbar-search-label, .topbar-search-kbd { display: none; }
}

.palette {
    width: min(40rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100dvh - 4rem));
    margin: 10vh auto auto; padding: 0; overflow: hidden;
    border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    background: var(--c-surface-1); color: var(--c-text); box-shadow: var(--shadow-overlay);
}
.palette::backdrop { background: var(--c-scrim); }
.palette-box { display: flex; flex-direction: column; max-height: inherit; }
.palette-search {
    display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto;
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); color: var(--c-text-muted);
}
.palette-search:focus-within { box-shadow: inset 0 -2px 0 var(--c-accent); }
.palette-input {
    flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
    color: var(--c-text); font: inherit; font-size: var(--fs-lg);
}
.palette-input::placeholder { color: var(--c-text-muted); }
.palette-close { flex: 0 0 auto; min-width: 2.25rem; min-height: 2.25rem; padding: 0; justify-content: center; margin-right: calc(-1 * var(--sp-2)); }
.palette-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: var(--sp-2); }
.palette-opt {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); cursor: pointer;
}
.palette-opt.is-active { background: var(--c-surface-2); box-shadow: inset 3px 0 0 var(--c-accent); }
.palette-opt-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.palette-opt-title { font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.palette-opt-desc { color: var(--c-text-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-opt-group { flex: 0 0 auto; color: var(--c-text-muted); font-size: var(--fs-xs); white-space: nowrap; }
/* Einträge aus der Entitätssuche: durch eine Linie von den Seiten getrennt, Typ als Badge */
.palette-opt:not(.palette-opt--entry) + .palette-opt--entry { margin-top: var(--sp-2); box-shadow: 0 -1px 0 var(--c-border); }
.palette-opt:not(.palette-opt--entry) + .palette-opt--entry.is-active { box-shadow: 0 -1px 0 var(--c-border), inset 3px 0 0 var(--c-accent); }
.palette-opt--entry .palette-opt-group { padding: 0 var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); }
.palette-empty { margin: 0; padding: var(--sp-5); text-align: center; color: var(--c-text-muted); }
.palette-empty[hidden] { display: none; }
.palette-foot {
    display: flex; flex-wrap: wrap; gap: var(--sp-4); flex: 0 0 auto; margin: 0;
    padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--c-border);
    color: var(--c-text-muted); font-size: var(--fs-xs);
}
@media (max-width: 639.98px) {
    .palette { margin-top: var(--sp-3); max-height: calc(100dvh - 2rem); }
    .palette-opt { flex-direction: column; align-items: flex-start; gap: 0; }
    .palette-foot { display: none; }
}

/* ============================================================
   Admin-Übersicht als Status-Dashboard (Pages/Admin/Overview)
   ============================================================ */
/* Übersichten (Admin/Editor): Kacheln fließen in Spalten (Mehrspaltensatz) statt in starren Rasterzeilen.
   So entstehen keine Lücken, wenn Kacheln unterschiedlich hoch sind; Abstand überall 1rem (--sp-4). */
.adm-board { columns: 2 26rem; column-gap: var(--sp-4); margin-bottom: var(--sp-4); }
.adm-board > .cb-panel, .adm-board > .cb-panel:not([hidden]) + .cb-panel { margin: 0 0 var(--sp-4); break-inside: avoid; }
.adm-board > [hidden] { display: none; }
/* Kanal-Umschalter der Zuschauer (Communitys mit Mitgliedschaft): ab 1024px schmale Leiste links, sonst nur im Konto-Menü. */
.menu-sep { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-border); }
.cm-switch { display: none; }
@media (min-width: 1024px) {
    body.has-cm-switch { padding-left: 4.5rem; }
    .cm-switch { position: fixed; z-index: var(--z-sticky); left: 0; top: 0; bottom: 0; width: 4.5rem; display: flex; flex-direction: column;
        align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; background: var(--c-surface-1); border-right: 1px solid var(--c-border); overflow-y: auto; }
}
.cm-switch-item { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-round);
    background: var(--c-surface-2); color: var(--c-text); font-weight: var(--fw-bold); text-decoration: none; outline-offset: 2px; }
.cm-switch-item img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.cm-switch-item[aria-current="page"] { box-shadow: 0 0 0 2px var(--c-accent); }
.cm-switch-item.is-live::after { content: ""; position: absolute; right: 0; bottom: 0; width: .7rem; height: .7rem; border-radius: var(--r-round);
    background: var(--c-danger); border: 2px solid var(--c-surface-1); }

/* Stream-Statistik: Überschrift „Zeitraum“ über Filter und Kennzahlen (Startansicht „Letzter Stream“ darüber). */
.ss-dash-title { margin: 0 0 var(--sp-3); }

/* Spotify: laufender Song mit Cover und Fortschritt, Eingabezeile für Wünsche und Sperren. */
.sp-now { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-3); min-height: 5rem; }
.sp-cover { width: 5rem; height: 5rem; border-radius: var(--r-md); object-fit: cover; flex: none; background: var(--c-surface-2); }
.sp-cover[hidden] { display: none; }
.sp-now-text { flex: 1; min-width: 0; display: grid; gap: var(--sp-1); }
.sp-title { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.sp-artist, .sp-meta { color: var(--c-text-muted); font-size: var(--fs-sm); }
.sp-progress { height: .35rem; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; }
.sp-progress span { display: block; height: 100%; background: var(--c-accent); transform-origin: left; transform: scaleX(0); transition: transform calc(var(--dur-slow) * 2) linear; }
.sp-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: flex-start; margin-top: var(--sp-3); }
.sp-controls > .cb-field:last-child { flex: 1 1 16rem; min-width: 0; }
.sp-device-row, .sp-add { display: flex; gap: var(--sp-2); align-items: center; }
.sp-device-row .adm-input, .sp-add .adm-input { flex: 1 1 14rem; min-width: 0; }
.sp-add { flex-wrap: wrap; margin-bottom: var(--sp-2); }
.sp-history { margin-top: var(--sp-3); }
.sp-history summary { cursor: pointer; color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Team einladen: Rollen als Auswahlkarten, Vorlagen-Chips im Rechte-Editor. */
.team-roles { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: var(--sp-2) 0; }
.team-role { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; }
.team-role:has(input:checked) { border-color: var(--c-accent); }
.team-role > span { display: grid; gap: var(--sp-0); }
.team-role-desc { color: var(--c-text-muted); font-size: var(--fs-sm); }
.role-templates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.role-templates .adm-label { margin: 0 var(--sp-1) 0 0; }
#team-invites:not(:empty), #team-link-row { margin-top: var(--sp-3); }

/* Bibliothek (js/library.js, Seite Bibliothek): Suche und Filter nach Zweck, Raster aus Karten mit Vorschaubild,
   Detailansicht mit lebender Vorschau. Looks als Wahlkarten (lib-card--pick, ganze Karte wählt aus). */
.lib-controls { margin-bottom: var(--sp-3); }
.lib-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.lib-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: var(--c-surface-2); color: var(--c-text); overflow: hidden; transition: border-color var(--dur-base) var(--ease); }
.lib-card:hover { border-color: var(--c-border-strong); }
/* Eingeschaltete Kachel (z. B. aktive Stimme auf der Seite Soundboard): Akzentrahmen wie eine gewählte Wahlkarte. */
.lib-card.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.lib-card-open, .lib-card--pick { appearance: none; display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lib-card--pick { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); overflow: hidden; }
.lib-card--pick[aria-pressed="true"] { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.lib-card-open:focus-visible, .lib-card--pick:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }
.lib-thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; border: 0; border-bottom: 1px solid var(--c-border); border-radius: 0; }
.lib-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lib-thumb-icon { font-size: var(--fs-3xl); line-height: 1; }
/* Leiste der Looks unter dem Vorschaubild (ab zwei Looks, höchstens vier Plätze). */
.lib-look-strip { display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3) 0; }
/* Bilder mit Schachbrett wie das große Vorschaubild (ov-preview is-checker), „+N“ als schlichte Kachel. */
.lib-look-mini { display: grid; place-items: center; flex: 0 0 calc((100% - 3 * var(--sp-1)) / 4); aspect-ratio: 16 / 9; overflow: hidden;
    border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface-1); }
.lib-look-mini img { width: 100%; height: 100%; object-fit: contain; }
.lib-look-mini .lib-thumb-icon { font-size: var(--fs-sm); }
.lib-look-more { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.lib-card-body { display: grid; gap: var(--sp-1); padding: var(--sp-3); min-width: 0; overflow-wrap: anywhere; }
.lib-card-title { display: flex; align-items: center; gap: var(--sp-2); }
.lib-card-icon { flex: none; font-size: var(--fs-lg); line-height: 1; }
.lib-card-cat { color: var(--c-text-muted); font-size: var(--fs-xs); }
.lib-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* Beschreibungen sind teils lang: höchstens drei Zeilen, der ganze Text steht im title und in der Detailansicht. */
.lib-card-desc { color: var(--c-text-muted); font-size: var(--fs-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.lib-card.is-blocked strong, .lib-card--pick.is-blocked strong { color: var(--c-text-muted); }
/* Aktionen: eine Zeile, der Hauptknopf füllt sie, ⋯ steht rechts daneben in gleicher Höhe. So sitzen alle Knöpfe gleich. */
.lib-card-actions { display: flex; align-items: stretch; gap: var(--sp-2); margin-top: auto; padding: 0 var(--sp-3) var(--sp-3); }
.lib-card-actions > .btn { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.lib-card-actions .row-menu { flex: none; }
.lib-card-actions > [data-try^="voice:"] { flex: none; }
.lib-card-actions .row-menu-btn { display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; height: 100%; }
/* Looks: kleinere Karten (Bild und Name), in der Detailansicht und im Assistenten. */
.lib-grid--looks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.lib-grid--looks .lib-card-desc { -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--fs-xs); }
.lib-preview { aspect-ratio: var(--lib-ratio, 1.7778); width: min(100%, calc(60vh * var(--lib-ratio, 1.7778))); margin-inline: auto; }
.lib-preview .lib-frame { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
/* Detailansicht: Vorschau, Beschreibung, was es braucht, Aktionen. */
.lib-detail .cp-modal-box { width: min(760px, 94vw); }
.lib-detail-body { display: grid; gap: var(--sp-4); }
.lib-detail-body p { margin: 0; }
.lib-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.lib-facts dt { color: var(--c-text-muted); }
.lib-facts dd { margin: 0; overflow-wrap: anywhere; }
/* „Was ist neu“: Änderungen des Bausteins je Version (Liste aus overlay-update.js). */
.lib-changes > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.lib-changes > .upd-changes { margin-top: var(--sp-3); font-size: var(--fs-sm); }
/* Rezept: je Funktion eine Zeile mit Look und Hinweis auf vorhandene. */
.lib-recipe-fn { display: block; }
.lib-recipe-fn + .lib-recipe-fn { margin-top: var(--sp-1); }
.lib-recipe-made { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.lib-recipe-made .tag { margin-left: var(--sp-1); }
.lib-detail .adm-actions { margin-top: var(--sp-5); }
.lib-goals { margin-bottom: var(--sp-4); }
/* Hinzufügen-Dialog (js/library-add.js): Abschnitte „Wann“ und „Wo“ als Wahlkarten, Position im Raster, Plätze des Tarifs. */
.lib-add .cp-modal-box { width: min(820px, 94vw); }
.lib-add .lib-preview { width: min(100%, calc(30vh * var(--lib-ratio, 1.7778))); }
.la-name-row { margin: 0; align-items: flex-end; }
.la-name { flex: 1 1 16rem; max-width: 28rem; }
.la-section > .cb-subtitle { margin-top: 0; }
/* Dialog „Eigenes Overlay“ der Bibliothek (js/overlay-create.js): Art als Wahlkarten über dem Namen. */
.ov-new-kinds { margin-bottom: var(--sp-4); }
.la-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.la-cards:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-md); }
.la-card { appearance: none; display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; padding: var(--sp-3);
    border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text);
    font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-base) var(--ease); }
.la-card:hover { border-color: var(--c-border-strong); }
.la-card[aria-pressed="true"] { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.la-card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.la-card-icon { flex: none; font-size: var(--fs-xl); line-height: 1; }
.la-card-text { display: grid; gap: var(--sp-1); min-width: 0; overflow-wrap: anywhere; }
.la-card-desc { color: var(--c-text-muted); font-size: var(--fs-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.la-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.la-tpl { margin-top: var(--sp-4); }
.la-tpl .rl-tpl-inline { margin: 0; }
.la-tpl .adm-hint { margin-bottom: 0; }
.la-place-extra { margin: var(--sp-4) 0 0; align-items: flex-start; }
.la-pos { margin: 0; }
.la-pos-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.la-pos-row .ov-pos-label { margin-left: var(--sp-1); }
.la-slots { margin: var(--sp-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.la-slots.is-error { color: var(--c-danger-text); }
.lib-add .adm-adv-toggle { margin-top: 0; }
.la-warnings ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); font-weight: var(--fw-regular); }

/* „Erweitert“ in Formularen: gut sichtbare Leiste mit Pfeil vorn, Zustand über data-collapse-key.
   Aufgeklappt umrahmt sie den Bereich darunter, damit klar ist, was dazugehört. */
.adm-adv-toggle { margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); width: 100%; justify-content: flex-start; gap: var(--sp-2);
    border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2);
    color: var(--c-text); font-size: var(--fs-md); font-weight: var(--fw-semibold); transition: border-color var(--dur-base) var(--ease); }
.adm-adv-toggle:hover { border-color: var(--c-border-strong); }
.adm-adv-toggle .cb-panel-caret { order: -1; color: var(--c-accent); font-size: var(--fs-md); }
.adm-adv-toggle[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.adm-adv-body { padding: var(--sp-4); border: 1px solid var(--c-border); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); }
/* Befehle: Vorlagen als Chips über dem Formular. */
.cmd-templates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cmd-templates .adm-label { margin: 0 var(--sp-1) 0 0; }

/* Karten-Übersicht (docs/17, js/service-cards.js): Dienste oder Funktionen einer Seite als Karten. Symbol links, Name und
   ein Satz, unten Zustand (cardStateHtml) und genau ein Bedienelement. Die ganze Karte wählt sie aus (Klickfläche von
   .svc-main über die Karte gezogen, Schalter und ⋯ liegen darüber), die gewählte trägt den Akzentrahmen und ihre
   Einstellungen stehen unter dem Raster (.svc-detail). Das Symbolfeld trägt die Farbe des
   Zustands, ausgeschaltete Karten treten zurück. */
.svc-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.svc-card { --sc: var(--c-text-muted);
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--sp-3);
    min-width: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: var(--c-surface-2); color: var(--c-text); transition: border-color var(--dur-base) var(--ease); }
.svc-card:hover { border-color: var(--c-border-strong); }
.svc-card.is-selected { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface-2)); }
.svc-card:has(.svc-main:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.svc-card[data-state="active"] { --sc: var(--c-success); }
.svc-card[data-state="setup"] { --sc: var(--c-warning); }
.svc-card[data-state="error"] { --sc: var(--c-danger); }
.svc-card[data-state="pick"] { --sc: var(--c-accent); }
.svc-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
    font-size: var(--fs-lg); line-height: 1; background: color-mix(in srgb, var(--sc) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); }
.svc-card[data-state="off"] .svc-icon, .svc-card[data-state="locked"] .svc-icon { filter: grayscale(1); opacity: .7; }
.svc-main { appearance: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--fw-bold);
    text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.svc-main:focus-visible { outline: none; }
.svc-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc-desc { color: var(--c-text-muted); font-size: var(--fs-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp: 2; overflow: hidden; }
.svc-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 1.75rem; margin-top: var(--sp-3); }
.svc-foot:empty { display: none; }
.svc-foot > a, .svc-ctrl { position: relative; z-index: 1; }
.svc-ctrl { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
.svc-ctrl .switch-row { margin: 0; }
.svc-empty { grid-column: 1 / -1; }
/* Karte mit Vorschaubild statt Symbol (Overlays einer Funktion unter Aussehen): Bild oben über die ganze Breite, darunter Name,
   Satz und Zustand. Ruhende Overlays treten wie ausgeschaltete Karten zurück. */
.svc-card--thumb { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
.svc-thumb { display: block; width: auto; aspect-ratio: 16 / 9; margin: 0 calc(-1 * var(--sp-4)) var(--sp-3); border-width: 0 0 1px;
    border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; }
.svc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-thumb .lib-thumb-icon { display: grid; place-items: center; height: 100%; font-size: var(--fs-2xl); }
.svc-card[data-state="off"] .svc-thumb, .svc-card[data-state="locked"] .svc-thumb { filter: grayscale(1); opacity: .7; }
/* Auswahl „… hinzufügen“: dieselben Karten im Dialog, ein Klick fügt hinzu. */
.svc-picker [data-svc-picker-head]:not(:empty) { margin-bottom: var(--sp-4); }
.svc-picker .cp-modal-box { width: min(760px, 94vw); }
.svc-picker .svc-pick-search { margin-bottom: var(--sp-4); }
.svc-picker .svc-pick-group { margin: var(--sp-5) 0 var(--sp-3); }
.svc-picker [data-svc-picks] > .svc-pick-group:first-child { margin-top: 0; }
/* Kleine Karten (Auswahl von Auslösern und Aktionen): Symbol und Name in einer Zeile. */
.svc-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--sp-2); }
.svc-grid--compact .svc-card { grid-template-rows: auto; align-items: center; padding: var(--sp-2) var(--sp-3); }
.svc-grid--compact .svc-icon { grid-row: auto; width: 2rem; height: 2rem; font-size: var(--fs-md); }
.svc-grid--compact .svc-desc:empty { display: none; }
.svc-grid--compact .svc-card:has(.svc-desc:not(:empty)) { grid-template-rows: auto auto; align-items: start; }
.svc-grid--compact .svc-card:has(.svc-desc:not(:empty)) .svc-icon { grid-row: 1 / span 2; }
/* Einstellungen der gewählten Karte unter dem Raster: Trennlinie, Kopf mit Name und Zustand, darunter der normale Inhalt. */
.svc-detail { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.svc-detail[hidden] { display: none; }
.svc-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.svc-detail-head .cb-subtitle { margin: 0; }
.svc-detail .conn-info { display: flex; flex-direction: column; gap: var(--sp-3); }
.svc-detail .conn-info:empty { display: none; }
:where(.svc-detail) > * + * { margin-top: var(--sp-4); }   /* niedrige Spezifität: eigene Abstände (z. B. vor .adm-actions) gelten weiter */

/* Einrichtung (Studio): Schrittliste links, Inhalt des Schritts rechts; unter 1024px untereinander. Karte auf der Übersicht. */
.sg-layout { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
@media (min-width: 1024px) { .sg-layout { grid-template-columns: minmax(14rem, 18rem) 1fr; } }
.sg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.sg-step { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid transparent;
    border-radius: var(--r-md); background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.sg-step:hover { background: var(--c-surface-2); }
.sg-step[aria-current="step"] { border-color: var(--c-accent); background: var(--c-surface-2); }
.sg-step-mark { display: grid; place-items: center; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: var(--r-round);
    border: 1px solid var(--c-border-strong); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-text-muted); }
.sg-step.is-done .sg-step-mark { background: var(--c-success); border-color: var(--c-success); color: var(--c-on-accent); }
.sg-step.is-skipped .sg-step-text { color: var(--c-text-muted); }
.sg-step-text { min-width: 0; }
.sg-title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.sg-desc { margin: 0 0 var(--sp-3); }
.sg-next-label { margin: var(--sp-3) 0 var(--sp-1); color: var(--c-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.sg-howto { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.sg-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.sg-link { text-decoration: none; color: inherit; }
.sg-detail .cm-url-row { margin-top: var(--sp-3); }

/* ── Hilfe: Artikel, Seitenleiste im Studio, Hilfe-Center, Animationen ── */
.help-article { max-width: 46rem; line-height: 1.6; }
.help-article h2 { font-size: var(--fs-xl); margin: var(--sp-5) 0 var(--sp-2); }
.help-article h3 { font-size: var(--fs-lg); margin: var(--sp-4) 0 var(--sp-2); }
.help-article p, .help-article ul, .help-article ol { margin: 0 0 var(--sp-3); }
.help-article ol, .help-article ul { padding-left: var(--sp-5); }
.help-article li + li { margin-top: var(--sp-1); }
.help-article code { padding: 0 .3em; border-radius: var(--r-xs); background: var(--c-surface-2); font-size: .92em; }
.help-article table { border-collapse: collapse; width: 100%; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.help-article th, .help-article td { text-align: left; vertical-align: top; padding: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.help-article a { color: var(--c-accent); }
/* Links im Fließtext sind nicht nur an der Farbe erkennbar. */
.help-article :is(p, li) a, .legal :is(p, li) a, .adm-hint a { text-decoration: underline; text-underline-offset: .15em; }
.help-plan { margin: 0 0 var(--sp-3); }
/* Zweite Lesetiefe „Genauer“ (:::genauer im Artikel): einklappbar, anfangs zu, Zustand je Gerät für alle Artikel. */
.help-deep { margin: var(--sp-5) 0 var(--sp-3); border-top: 1px solid var(--c-border); }
.help-article .help-deep-head { margin: 0; font-size: var(--fs-xl); }
.help-deep-toggle { padding-block: var(--sp-3); margin-block: 0; font: inherit; }
.help-deep-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.help-deep-tag { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.help-deep--problems .help-deep-tag { --rc: var(--c-warning); }
.help-deep-body:not([hidden]) { padding-top: var(--sp-1); }
.help-deep-body > :first-child { margin-top: 0; }
/* Sprungziele (artikel#abschnitt) nicht unter der festen Kopfzeile verstecken. */
.help-article [id] { scroll-margin-top: calc(var(--topbar-h) + var(--sp-3)); }
/* Problemkarte (:::problem): Was du siehst, Woran es liegt, Was hilft. */
.help-problem { margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-1); }
.help-article .help-problem-title { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.help-problem-title > .help-problem-label { margin-bottom: var(--sp-1); }
.help-problem-label { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.help-problem-list { margin: 0; }
.help-problem-list dd { margin: 0 0 var(--sp-2); }
.help-problem-list dd:last-child { margin-bottom: 0; }
.help-problem-list dd > :last-child { margin-bottom: 0; }
/* „Mehr dazu“: Brücke von der Kurzhilfe einer Seite (page-help more, i-Icon help) in den passenden Abschnitt eines Artikels. */
.help-more { margin: 0; }
.tip-more { display: inline-block; margin-top: var(--sp-1); color: var(--c-accent); font-weight: var(--fw-semibold); }

.topbar-help .ic { color: var(--c-accent); }
/* Käfer neben „Hilfe“: immer nur Symbol, führt zur Rückmeldung. */
.topbar-report { width: 2.25rem; padding: 0; justify-content: center; text-decoration: none; }

/* Hilfe-Center, Artikelseite und Befehle A bis Z (Plattformseiten): Stile hc-* in landing.css. */

/* Animationen: SVG mit Klassen statt Farben, damit Theme-Wechsel greifen. */
figure.help-anim { margin: var(--sp-3) 0 var(--sp-4); }
.help-anim-stage { aspect-ratio: 16 / 9; max-width: 36rem; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-sunken); }
.help-anim-stage svg { display: block; width: 100%; height: 100%; font-family: inherit; }
.help-anim-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); max-width: 36rem; margin-top: var(--sp-2); }
/* Untertitel: alle Texte einer Animation übereinander in einer Zelle, nur .is-on sichtbar. Der längste gibt die Höhe vor,
   die Figur springt in der Schleife nie. Mindestens zwei Zeilen, damit auch das Laden nichts verschiebt. */
.help-anim-say { display: grid; flex: 1 1 auto; min-width: 0; min-height: 3em; margin: 0; align-items: center;
    color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.help-anim-say > span, .help-anim-swap > span { grid-area: 1 / 1; visibility: hidden; }
.help-anim-say > .is-on, .help-anim-swap > .is-on { visibility: visible; }
.help-anim-swap { display: inline-grid; flex: 0 0 auto; justify-items: center; }
/* Knopf belegt seinen Platz schon vor dem Laden (sonst wird die Textspalte danach schmaler und bricht um). */
.help-anim-toggle[data-pending] { visibility: hidden; }
/* Ohne Bewegung: Standbild plus nummerierte Schritte, kein Untertitel und kein Knopf (gleich beim ersten Bild). */
@media (prefers-reduced-motion: reduce) { .help-anim-say, .help-anim-toggle { display: none; } }
.help-anim-steps { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.help-anim .a-bg { fill: var(--c-sunken); }
.help-anim .a-scrim { fill: var(--c-scrim); }
.help-anim .a-win { fill: var(--c-surface-1); stroke: var(--c-border); }
.help-anim .a-bar { fill: var(--c-surface-2); }
.help-anim .a-panel { fill: var(--c-surface-2); stroke: var(--c-border); }
.help-anim .a-field { fill: var(--c-bg); stroke: var(--c-border-strong); }
.help-anim .a-line { stroke: var(--c-border); }
.help-anim .a-btn { fill: var(--c-accent); }
.help-anim .a-btn-text { fill: var(--c-on-accent); font-weight: var(--fw-bold); }
.help-anim .a-ghost { fill: none; stroke: var(--c-border-strong); }
.help-anim .a-text { fill: var(--c-text); }
.help-anim .a-muted { fill: var(--c-text-muted); }
.help-anim .a-accent { fill: var(--c-accent); }
.help-anim .a-success { fill: var(--c-success); }
.help-anim .a-twitch { fill: var(--c-twitch); }
.help-anim .a-twitch-text { fill: var(--c-on-twitch); font-weight: var(--fw-bold); }
.help-anim .a-twitch-name { fill: var(--c-twitch-text); font-weight: var(--fw-bold); }
.help-anim .a-danger { fill: var(--c-danger); }
.help-anim .a-danger-text { fill: var(--c-danger-text); }
.help-anim .a-tint-success { fill: color-mix(in srgb, var(--c-success) 16%, var(--c-surface-2)); stroke: color-mix(in srgb, var(--c-success) 45%, transparent); }
.help-anim .a-frame { fill: none; stroke: var(--c-border); }
.help-anim .a-hit { fill: transparent; }
.help-anim .a-ring { fill: none; stroke: var(--c-success); stroke-width: 1.5; }
/* Auswahlrahmen und Ausrichthilfe im Leinwand-Designer */
.help-anim .a-sel { fill: none; stroke: var(--c-accent); stroke-width: 1.2; }
.help-anim .a-guide { fill: none; stroke: var(--c-accent); stroke-width: 1; stroke-dasharray: 3 2; }
.help-anim .a-muted-line { fill: none; stroke: var(--c-text-muted); stroke-width: 1.2; stroke-linecap: round; }
.help-anim .a-badge-mark { fill: none; stroke: var(--c-on-twitch); stroke-width: 1.3; stroke-linecap: round; }
.help-anim .a-obs-btn { fill: var(--c-surface-2); stroke: var(--c-border-strong); }
.help-anim .a-mark.is-on { fill: var(--c-accent); }
.help-anim .a-tint-accent { fill: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface-2)); stroke: color-mix(in srgb, var(--c-accent) 40%, transparent); }
/* Kennzeichen wie .badge--info (z. B. „Update“ im Menü) */
.help-anim .a-tint-info { fill: color-mix(in srgb, var(--c-info) 10%, var(--c-surface-1)); stroke: color-mix(in srgb, var(--c-info) 45%, transparent); }
.help-anim .a-info { fill: var(--c-info); font-weight: var(--fw-semibold); }
.help-anim .a-cursor { fill: var(--c-text); stroke: var(--c-bg); stroke-width: 1.5; }
/* Schreibmarke beim Tippen, Fokusrahmen eines angeklickten Felds, Schalter wie .switch (act on/off legt ihn um). */
.help-anim .a-caret { fill: var(--c-accent); animation: help-anim-caret 1s steps(1) infinite; }
@keyframes help-anim-caret { 50% { opacity: 0; } }
.help-anim .a-field.is-focus { stroke: var(--c-accent); stroke-width: 1.5; }
.help-anim .a-sw-track { fill: var(--c-border-strong); }
.help-anim .a-knob { fill: var(--c-knob); }
.help-anim .a-switch .a-sw-track { transition: fill var(--dur-base) var(--ease); }
.help-anim .a-switch .a-knob { transition: transform var(--dur-base) var(--ease); }
.help-anim .a-switch.is-on .a-sw-track { fill: var(--c-accent); }
.help-anim .a-switch.is-on .a-knob { transform: translateX(14px); }
.help-anim [data-aid="cursor"] { transform-box: fill-box; transform-origin: 0 0; }
.help-anim .a-hide { opacity: 0; }
.help-anim svg [class] { transition: opacity var(--dur-slow) var(--ease); }
.help-anim .is-pressed { opacity: .7; }

/* Community-Seite (Studio): Link mit Kopieren/Öffnen in einer Zeile. */
.cm-url-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cm-url-row .adm-input { flex: 1 1 16rem; min-width: 0; }

/* Tarif: Belegung an Anlegen-Knöpfen („3 von 3“), Kennzeichen „🔒 Pro“, Vorschauseite „Freischalten“. */
.plan-usage { margin-left: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.plan-usage.is-full { color: var(--c-warning); }
.plan-lock-tag { text-decoration: none; }
.status-link { margin-left: var(--sp-1); }
.upg-desc { margin: 0 0 var(--sp-3); }
.upg-tiers { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3); padding: 0; list-style: none; color: var(--c-text-muted); }
.upg-tiers .is-current { color: var(--c-text); }

/* Studio-Übersicht: Schnellaktionen als Knopfreihe. */
/* Schnellaktionen als gleich breites Raster (nie unterschiedlich lange Zeilen). */
.ov-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-2); }
/* Einzeilig, gleich hoch, Text links bündig neben dem Symbol (lange Texte enden mit …, ganzer Text im title). */
.ov-quick-btn { gap: var(--sp-2); justify-content: flex-start; white-space: nowrap; min-width: 0; }
.ov-quick-btn > span:last-child { overflow: hidden; text-overflow: ellipsis; }
/* KPIs im schmalen Board-Panel (Admin- und Editor-Übersicht) zweispaltig und kompakter. */
.adm-board .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-board .kpi { padding: var(--sp-3); }
/* Systemzustand (Admin-Übersicht): darunter folgt die Funktionsliste. */

/* Statuszeile als Link: ganze Zeile klickbar, Hover über Rahmenfarbe. */
.adm-list-row--link { color: var(--c-text); margin-inline: calc(-1 * var(--sp-2)); padding-inline: var(--sp-2);
    border-radius: var(--r-sm); transition: background var(--dur-base) var(--ease); }
.adm-list-row--link:hover { background: var(--c-surface-2); }
.adm-list-row--link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Alle Bereiche: kompakte Linkliste je Sektion (statt Kachelwand). */

/* ---------- Konto & Daten (Datenschutz: Auskunft, Widerspruch, Löschung) ---------- */
.dp-areas { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.dp-area { border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); }
.dp-area-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
/* Status-Badge und optionales i-Symbol bilden rechts eine Gruppe (Badge bleibt bündig rechts). */
.dp-area-meta { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.dp-area-title { color: var(--c-text); }
.dp-area-desc { margin: var(--sp-1) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.dp-area-note { margin: var(--sp-1) 0 0; color: var(--c-text-muted); font-size: var(--fs-xs); }
.dp-empty { color: var(--c-text-muted); }
.dp-danger { border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border)); }
.dp-outcome { border-left: 3px solid var(--c-warning); padding: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-muted); }
.dp-outcome-title { margin: 0 0 var(--sp-1); color: var(--c-text); font-weight: var(--fw-semibold); }
.dp-outcome ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.dp-alert { border: 1px solid var(--c-warning); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); color: var(--c-text); margin: 0 0 var(--sp-4); }
.dp-foot { color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: var(--sp-4); }
.btn.is-disabled { pointer-events: none; }
.dp-lookup { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end; }
.dp-lookup .cb-field { margin: 0; flex: 1 1 16rem; }

/* ============================================================
   Coupon-Motiv (Runde 2, R2-4) – Markenzeichen der Belohnungswelt
   (Inventar, Giveaway): perforierte linke Kante in der Farbe --rc
   (Seltenheit, sonst Akzent) und eine gestrichelte Abrisslinie über dem
   Aktionsbereich. Werkzeugseiten (Admin, Editor) nutzen es nicht.
   ============================================================ */
.coupon { --rc: var(--c-accent); position: relative; overflow: hidden; padding-left: calc(14px + var(--sp-4)); }
.coupon[data-rarity] { --rc: var(--c-rarity-common); }
.coupon[data-rarity="uncommon"]  { --rc: var(--c-rarity-uncommon); }
.coupon[data-rarity="rare"]      { --rc: var(--c-rarity-rare); }
.coupon[data-rarity="epic"]      { --rc: var(--c-rarity-epic); }
.coupon[data-rarity="legendary"] { --rc: var(--c-rarity-legendary); }
.coupon::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 14px;
    background: radial-gradient(circle at 7px 0, transparent 4px, var(--rc) 4px) 0 0 / 14px 16px repeat-y;
    opacity: .9;
}
.coupon-tear { margin-top: auto; padding-top: var(--sp-3); border-top: 2px dashed color-mix(in srgb, var(--rc) 35%, var(--c-border-strong)); }

/* Erklärungen in der Hilfe (page-help): ohne eigenen Kasten */
.help-body .score-info, .help-body .lb-award-note { margin: 0; padding: 0; background: none; border: 0; }

/* Zuschauerseiten auf dem Handy (R2-4): Inhalt früher im Bild */
@media (max-width: 639.98px) {
    /* Platzierungs-Pille nur, wenn es eine Platzierung gibt */
    .inv-head .lb-me:not(.is-ranked) { display: none; }
    /* Suche + eine Sortierung bleiben in einer Zeile */
    .lb-controls:has(> .lb-search-box:first-child + .clip-select:last-child) { flex-wrap: nowrap; }
    .lb-controls:has(> .lb-search-box:first-child + .clip-select:last-child) .lb-search-box { flex: 1 1 0; min-width: 0; }
    .lb-controls:has(> .lb-search-box:first-child + .clip-select:last-child) .clip-select { flex: 0 0 auto; max-width: 46%; }
}

/* ============================================================
   Runde 3 (R3): Verhalten – Speichern, Fehler am Feld, Toast, Voraussetzungen, Reiter-Überlauf
   ============================================================ */
/* Fehler direkt am Feld (StreamhubUtil.fieldError). Fehler sind die Ausnahme von „kein Text unter Feldern“. */
.field-error { margin: var(--sp-1) 0 0; color: var(--c-danger-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.field-error::before { content: "Fehler: "; }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--c-danger) !important; }

/* Ungespeicherte Änderungen (StreamhubUtil.formState): Hinweis neben dem Speichern-Knopf + Akzentlinie an der Kachel. */
.form-dirty { margin-left: var(--sp-2); }
.cb-panel.is-dirty { box-shadow: inset 3px 0 0 var(--c-warning); }

/* Textknopf in Fließtext/Leerzuständen (z. B. „Filter zurücksetzen“). */
.btn-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 24px; }
.btn-link:hover { color: var(--c-text); }
/* Ruhige Variante in Tabellen (z. B. Meldungen, die Einzelheiten öffnen): Textfarbe, links bündig, Unterstrich erst beim Überfahren. */
.btn-link--plain { color: var(--c-text); text-decoration: none; text-align: left; overflow-wrap: anywhere; }
.btn-link--plain:hover { color: var(--c-accent); text-decoration: underline; }
.btn-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Knopf „Rückgängig“ in einer Benachrichtigung (StreamhubUtil.toast mit undo). */
.toast-undo { appearance: none; background: none; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); color: var(--c-accent); font: inherit; font-weight: var(--fw-bold); padding: var(--sp-1) var(--sp-3); min-height: 32px; cursor: pointer; }
.toast-undo:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (max-width: 639.98px) {
    .toast-stack { right: var(--sp-4); left: var(--sp-4); width: auto; bottom: calc(var(--tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom)); }
}

/* „Voraussetzung fehlt“ (StreamhubUtil.requirementHtml): was fehlt, Folge, Link zur Behebung. */
/* Raster statt Umbruch: der Punkt bleibt immer neben dem Text, der Link steht am Handy darunter. */
.req-missing { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4);
    border: 1px solid color-mix(in srgb, var(--c-warning) 45%, transparent); border-radius: var(--r-md);
    background: color-mix(in srgb, var(--c-warning) 8%, transparent); }
.req-missing-dot { width: .6rem; height: .6rem; border-radius: var(--r-round); background: var(--c-warning); }
.req-missing-text { min-width: 0; font-size: var(--fs-sm); }
.req-missing-link { width: auto; }
@media (max-width: 639.98px) {
    .req-missing { grid-template-columns: auto minmax(0, 1fr); }
    .req-missing-link { grid-column: 2; justify-self: start; }
}

/* Reiter-Überlauf (ui.js setzt has-more-start/end): Verlauf am Rand zeigt, dass weitere Reiter folgen. */
.has-more-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
.has-more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem); mask-image: linear-gradient(90deg, transparent, #000 2.5rem); }
.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }

/* Öffentliche Startseite (R3, Z3): Live-Status, Giveaway und Ziel direkt unter dem Hero. */
.dash--public { display: grid; gap: var(--sp-3); max-width: 720px; }
.dash--public .hero-points { margin-top: var(--sp-4); }
.dash--public .dash-goal { margin: 0; }

/* Filter-Knopf (R3, Z2): nur am Handy. Dort sind Suche/Sortierung ([data-mobile-collapse]) eingeklappt. */
.filter-toggle { display: none; width: auto; margin-bottom: var(--sp-3); }
.filter-toggle[aria-expanded="true"] { color: var(--c-text); border-color: var(--c-border-strong); }
@media (max-width: 639.98px) {
    .filter-toggle { display: inline-flex; }
    [data-mobile-collapse]:not(.is-open) { display: none !important; }
}

/* Auswahl-Checkboxen in Tabellen: 24-px-Trefferfläche um das kleine Kästchen (R3, WCAG 2.5.8). */
.it-check-hit { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; cursor: pointer; }

/* Fehlertext in Flex-Zeilen eigene Zeile (R3), Statuszeile unter dem Itemsystem-Hauptschalter. */
.ig-newgroup > .field-error, .ive-amount-cell .field-error, .ive-expiry-cell .field-error { flex-basis: 100%; }

/* Alerts: Abstand zur Overlay-Kachel, solange die Alert-Arten noch laden (R3). */

/* „Voraussetzung fehlt“ direkt vor Inhalt (OBS, Signal, Sub-Etiketten). */
#sg-requirement > .req-missing, #sl-agent > .req-missing { margin-bottom: var(--sp-3); }

/* Zielgrößen-Nachzug (R3, WCAG 2.5.8): Rollen-Links in Commands, Regler in Formularen, Editor-Fader. */
a.tag { min-height: 24px; }
.cb-field input[type="range"] { min-height: 24px; }

/* ── Eingebettete Ansichten in Funktionsseiten (Module.cshtml) und die Karte zur Handy-App im Stream-Cockpit ── */
.ck-page + .cb-panel { margin-top: var(--sp-4); }
.cockpit-frame { flex: 1 1 auto; width: 100%; max-width: none; border: 0; border-radius: var(--r-sm); background: var(--c-bg);
    height: calc(100dvh - var(--topbar-h) - var(--shell-foot-h) - 16rem); min-height: 28rem; }
/* Schlanke Event-Ansicht im Cockpit (Events.cshtml?bare=1): nur die Liste, ohne Kopf, Reiter, Hilfe und App-Bedienung. */
:root:has(#cx-shell.is-bare) .es-head, :root:has(#cx-shell.is-bare) .studio-panel-launch,
#cx-shell.is-bare .cx-toprow { display: none; }
:root:has(#cx-shell.is-bare) main.is-embed { padding: 0; }
/* Volle Höhe des Rahmens wie in der App: kein Seiten-Scroll, nur die Liste scrollt. Platz für die Bildlaufleiste ist
   reserviert (scrollbar-gutter), damit sie nie über den Karten liegt, und die Karten haben seitlich etwas Luft. */
:root:has(#cx-shell.is-bare) body { overflow: hidden; }
#cx-shell.is-bare { position: fixed; inset: 0; display: flex; flex-direction: column; }
#cx-shell.is-bare #cx-panes { flex: 1 1 auto; min-height: 0; }
#cx-shell.is-bare .cx-pane.is-active { height: 100%; overflow-y: auto; scrollbar-gutter: stable; padding: 0 var(--sp-1) var(--sp-2) var(--sp-1); }
/* Als Kachel ist die Filterleiste der Kopf (so hoch wie ein Kachelkopf im Cockpit): Titel links, Filter und Zahnrad als
   Symbole rechts, beim Scrollen oben stehend. Die Filter klappen darunter auf. Mit Kopfzeile aus (no-head) nur die Liste. */
#cx-shell.is-bare .es-board { margin-top: 0; }
#cx-shell.is-bare .es-filterbar { position: sticky; top: 0; z-index: 1; min-height: 2.25rem; margin: 0 calc(-1 * var(--sp-1)) var(--sp-1);
    padding: var(--sp-0) var(--sp-1) var(--sp-0) var(--sp-3); gap: var(--sp-1); background: var(--c-surface-1); border-bottom: 1px solid var(--c-border); }
#cx-shell.is-bare .es-tile-title { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; margin-right: auto; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cx-shell.is-bare .es-filter-toggle > span { display: none; }
#cx-shell.is-bare .es-filter-toggle, #cx-shell.is-bare .es-cog { min-width: 1.75rem; min-height: 1.75rem; padding: var(--sp-1); border-color: transparent; background: transparent; color: var(--c-text-muted); }
#cx-shell.is-bare .es-filter-toggle:not(.is-collapsed) { color: var(--c-accent); }
#cx-shell.is-bare .es-filter-toggle:hover, #cx-shell.is-bare .es-cog:hover { color: var(--c-text); border-color: var(--c-border-strong); }
#cx-shell.is-bare #es-filters { margin-bottom: var(--sp-2); }
#cx-shell.is-bare.no-head .es-filterbar, #cx-shell.is-bare.no-head #es-filters { display: none; }
#cx-shell.is-bare .es-list > .es-day:first-child { margin-top: var(--sp-2); }
/* Hinweis auf die Handy-App oben rechts im Kopf des Stream-Cockpits: kleiner QR-Code + Text, öffnet den Dialog. */
.cx-app-launch { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border);
    border-radius: var(--r-md); background: var(--c-surface-1); color: var(--c-text); font: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.cx-app-launch:hover, .cx-app-launch:focus-visible { border-color: var(--c-accent); background: var(--c-surface-2); }
.cx-app-launch-qr { flex: none; width: 2.75rem; padding: var(--sp-1); border-radius: var(--r-sm); background: var(--c-on-media); line-height: 0; }
.cx-app-launch-qr svg { width: 100%; height: auto; }
.cx-app-launch-text { display: grid; line-height: var(--lh-tight); }
.cx-app-launch-text > span { color: var(--c-text-muted); font-size: var(--fs-sm); }
.cx-app-body { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.cx-app-qr { padding: var(--sp-2); border-radius: var(--r-md); background: var(--c-on-media); line-height: 0; }
.cx-app-qr svg { width: 100%; height: auto; }
.cx-app-text > p { margin: 0 0 var(--sp-3); }
.cx-app-link { display: flex; gap: var(--sp-2); }
.cx-app-link .adm-input { flex: 1 1 auto; min-width: 0; }
.cx-app-link .btn { width: auto; flex: 0 0 auto; }
.cx-app-steps { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
@media (max-width: 639.98px) { .cx-app-body { grid-template-columns: minmax(0, 1fr); } .cx-app-qr { max-width: 11rem; } }

/* ── Seitenreiter (util.js pageViews): data-history = Verlauf, data-view="Name" = eigener Reiter, Rest im ersten. ── */
.page-views { margin-bottom: var(--sp-4); }
.is-view-off { display: none !important; }

/* Regel-Editor */
/* Baustein js/rule-editor.js (StreamhubRules.mount): Name, dann Auslöser und Aktionen als kurze Zeilen (Symbol, Name,
   Kurzsatz, rechts Werkzeuge). Eine Zeile ist offen, ihre Felder stehen darunter. „Warten“ ist eine eigene Zeile. */
.rl-name { margin-bottom: var(--sp-4); }
.rl-sec + .rl-sec { margin-top: var(--sp-5); }
.rl-sec-title { margin: 0 0 var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.rl-sec-note { margin-left: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--c-text-muted); }
.rl-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.rl-row { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); min-width: 0; }
.rl-row.is-open { border-color: var(--c-accent); }
.rl-row.is-off .rl-row-main { opacity: .55; }
.rl-row.is-off .rl-row-name { text-decoration: line-through; }
.rl-row-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; }
.rl-row-main { appearance: none; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-md); }
.rl-row-main:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }
.rl-row-nr { flex: 0 0 auto; min-width: 1.25rem; color: var(--c-text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rl-row-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-md); line-height: 1;
    background: color-mix(in srgb, var(--c-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent); }
.rl-wait .rl-row-icon { background: transparent; border-style: dashed; border-color: var(--c-border-strong); }
.rl-row-text { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.rl-row-name { font-weight: var(--fw-semibold); }
.rl-row-desc { min-width: 0; color: var(--c-text-muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rl-row-desc:empty { display: none; }
.rl-row-tools { flex: 0 0 auto; display: flex; gap: var(--sp-1); }
.rl-row-tools .btn { width: auto; padding: var(--sp-1) var(--sp-2); }
@media (max-width: 639.98px) { .rl-row-tools > [data-rl-off] { display: none; } }   /* schmal: Deaktivieren nur über ⋯ und Rechtsklick */
.rl-row-body { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--c-border); }
.rl-row-body > .field-row, .rl-row-body > .rl-conds > .field-row:last-child { margin-bottom: 0; }
.rl-row-body > .adm-adv-toggle { margin-top: 0; }
.rl-row-body > .adm-adv-body[hidden] { display: none; }
.rl-row-body .rl-params { margin: 0; }
.rl-sec > .rl-add { margin-top: var(--sp-2); }
/* „＋ Auslöser“ bzw. „＋ Aktion“ mit „Einfügen“ daneben (nur mit Inhalt in der Zwischenablage). */
.rl-sec > .rl-add-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.rl-sec > .rl-add-row > .btn { width: auto; }
.cmd-trigger-list { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); }
.rl-conds { display: grid; gap: var(--sp-3); }
.rl-conds > .field-row { margin-bottom: 0; }
.rl-switches { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.rl-switches .switch-row { margin: 0; }
.rl-conds > .rl-once-more { margin-bottom: 0; }
/* Vergleiche: je Zeile Was, Wie, Wert und Entfernen, darunter „＋ Vergleich“. */
.rl-checks { display: grid; gap: var(--sp-3); }
.rl-checks > .field-row { margin-bottom: 0; }
.rl-check > .cb-field:not(:has(.num-field)) { flex: 1 1 10rem; }
.rl-check > .rl-check-what { flex: 2 1 14rem; }
.rl-checks > .rl-add { margin-top: 0; justify-self: start; }
/* Grundregel: feste Aktion als Satz statt Aktionsliste. */
.rl-base-action { margin: 0; padding-top: var(--sp-2); }
.rl-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.rl-act + .rl-act { border-top: 1px solid var(--c-border); padding-top: var(--sp-3); }
.rl-act-head { margin-bottom: 0; }
.rl-act-head > .rl-act-type { flex: 1 1 14rem; }
.rl-act-tools { display: flex; gap: var(--sp-1); margin-left: auto; }
.rl-act-tools .btn { width: auto; padding: var(--sp-1) var(--sp-2); }
.rl-params { margin: var(--sp-3) 0 0; }
.rl-params > .cb-field[hidden], .rl-once-more[hidden], .field-row > .rl-users[hidden], .field-row > .rl-msg-text[hidden] { display: none; }
.field-row > .cb-field.rl-users { flex: 1 1 100%; }
.rl-params > .rl-param--wide, .rl-params > .cb-field.rl-param--wide { flex: 1 1 100%; }
/* Variablen-Auswahl mit „Neue Variable“ daneben. */
.rl-var-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rl-var-pick > .adm-input { flex: 1 1 10rem; min-width: 0; }
.rl-var-pick > .btn { width: auto; }
.rl-add { width: auto; margin-top: var(--sp-3); }
/* Reiter Auslöser: je Aktion bzw. Ereignis ein Block mit Kopf, Eintragsliste, Vorschlägen und „＋ Auslöser“. */
.rl-wire-block + .rl-wire-block { margin-top: var(--sp-6); }
.rl-wire-block > .gw-empty { margin-bottom: 0; }
.rl-hints { margin-top: var(--sp-3); }
.rl-wire-block > .cmd-list + .cmd-list { margin-top: var(--sp-2); }
/* Belohnungen eines Ergebnisses (StreamhubRules.rewardList). */
.rw-list > .adm-hint { margin: 0; }
.rw-list .rl-add-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.rw-list .rl-add-row > .btn { width: auto; margin-top: 0; }
/* Belohnungen an einer Zeile (StreamhubRules.rewardSlot): Knopf in der Zeile, der Bereich steht darunter über die volle Breite. */
.rw-slot-btn { width: auto; padding: var(--sp-1) var(--sp-2); white-space: nowrap; }
.rw-slot-btn[aria-expanded="true"] { border-color: var(--c-accent); }
.rw-slot { grid-column: 1 / -1; flex-basis: 100%; order: 99; padding: var(--sp-3); margin-top: var(--sp-2);
    border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.rw-slot[hidden] { display: none; }
/* Belohnungen je Platz (Rangliste, Monatswertung; js/place-rewards.js): Platz, Knopf, Kurzbeschreibung, Entfernen, darunter der aufgeklappte Bereich. */
.pr-places { display: flex; flex-direction: column; gap: var(--sp-2); }
.pr-place-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
    padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.pr-place-n { flex: 0 0 4.5rem; font-weight: var(--fw-semibold); }
.pr-place-desc { flex: 1 1 10rem; min-width: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.rl-meta { margin-bottom: 0; }
.rl-filter, .rl-runs, .rl-tpl { margin-bottom: var(--sp-4); }
/* Kartenraster der Regel-Vorlagen (Karte mit Symbol, Name und Beschreibung). */
.ov-gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.ov-gal-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.ov-gal-head { display: flex; gap: var(--sp-2); align-items: flex-start; }
.ov-gal-head > span:last-child { display: grid; gap: var(--sp-0); }
.ov-gal-icon { font-size: var(--fs-xl); line-height: 1; }
.ov-gal-desc { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rl-tpl-card { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.rl-tpl-card:hover { border-color: var(--c-border-strong); }
.rl-tpl-card[aria-pressed="true"] { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.rl-tpl-card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.rl-tpl-form { margin-top: var(--sp-4); }
.rl-var-step { display: inline-flex; align-items: center; gap: var(--sp-2); }
.rl-var-step .btn { width: auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
@media (max-width: 639.98px) {
    .rl-act-tools { margin-left: 0; }
    .rl-row-body { padding: var(--sp-3); }
}

/* Speicher-Übersicht (storage-view.js, Tarifseite und /ops): Balken nach Muster Untertitel-Fortschritt, knapp = Warnfarbe, voll = Gefahr. */
.stv-used { margin: 0 0 var(--sp-2); }
.stv-progress { margin: 0 0 var(--sp-4); }
.stv-bar.is-warn > span { background: var(--c-warning); }
.stv-bar.is-full > span { background: var(--c-danger); }

/* Touch-Ziele (Plan 59, WCAG 2.5.5): auf Touch-Geräten mindestens 2,75rem (44 px) Trefferfläche für alle Bedienelemente.
   Steht am Dateiende, damit es allgemeine Komponentenregeln schlägt. Seiten setzen keine eigene Mindesthöhe, bewusst
   dichte Bereiche (Cockpit-Dock) vergrößern nur die Trefferfläche (cockpit.css). */
@media (pointer: coarse) {
    .btn, .seg-btn, .its-tab, .lb-tab, .sp-tab, .menu-item, .chip, .toast-close, .toast-undo { min-height: 2.75rem; }
    .btn, .toast-close { min-width: 2.75rem; }
    .topbar-search, .account-btn, .app-side-open, .app-side-close, .app-side-group-toggle, .cb-panel-toggle, .th-sort { min-height: 2.75rem; }
    .topbar-search, .account-btn, .app-side-close { min-width: 2.75rem; }
    :where(a.btn:not([hidden])) { display: inline-flex; align-items: center; justify-content: center; }   /* :where, damit Ausblende-Regeln gewinnen */
    :where(a.menu-item:not([hidden])) { display: flex; align-items: center; }
    .switch-row { min-height: 2.75rem; }
    .cmd-tip::after { inset: calc((2.75rem - 1.1rem) / -2); }
}

/* Windows-Kontrastmodus: Schalter zeigen An und Aus sonst nur über die Fläche. */
@media (forced-colors: active) {
    .switch-slider { border: 1px solid ButtonText; }
    .switch-slider::before { background: ButtonText; }
    .switch input:checked + .switch-slider { background: Highlight; }
    .switch input:disabled + .switch-slider::before { background: GrayText; }
}

/* ---------- Clip-Sichtung (/admin/clipreview) ---------- */
.cr-clip { display: flex; align-items: center; gap: var(--sp-3); min-width: 12rem; }
.cr-clip-text { display: flex; flex-direction: column; min-width: 0; }
.cr-thumb { width: 2.25rem; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-xs); background: var(--c-sunken); flex: none; }
.cr-row--off { opacity: .6; }
.cr-detail { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.cr-video { width: 100%; max-height: 70vh; aspect-ratio: 9 / 16; background: var(--c-media); border-radius: var(--r-sm); }
.cr-detail-info { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.cr-detail-info p, .cr-detail-info h4 { margin: 0; }
.cr-modal .cp-modal-box { max-height: 92vh; overflow-y: auto; }
.cr-scores { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--c-text-muted); }
.cr-ratings { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.cr-rating { display: flex; flex-direction: column; gap: var(--sp-1); }
.cr-rating-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.cr-rating-text { overflow-wrap: anywhere; }
.cr-stars { display: flex; gap: var(--sp-1); }
.cr-star { background: none; border: 0; padding: 0 var(--sp-1); font-size: var(--fs-xl); line-height: 1; color: var(--c-accent); cursor: pointer; }
.cr-star::before { content: "☆"; }
.cr-star.is-on::before { content: "★"; }
.cr-star:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-xs); }
.cr-copy { margin-top: var(--sp-1); }
@media (max-width: 640px) { .cr-detail { grid-template-columns: minmax(0, 1fr); } .cr-video { max-height: 60vh; } }
.cr-target { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); }
.cr-target-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cr-target-head .seg { margin-left: auto; }
.cr-target-hint { margin: 0; }