/* ============================================================
   Livestream Manager — Frontend App  [lsm_app]  v3
   Flat · Professional · Unified with Admin
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ──────────────────────────────────────────── */
.lsm-fe-app {
    --c-bg:      #edf0f5;
    --c-surf:    #ffffff;
    --c-surf2:   #f0f3f8;
    --c-surf3:   #e8ecf2;
    --c-bdr:     #c8d0dc;
    --c-bdr2:    #a8b4c4;
    --c-tx:      #0a1020;
    --c-tx2:     #2d3a4a;
    --c-tx3:     #5a6b80;
    --c-tx4:     #8fa0b0;
    --c-blue:    #1d4ed8;
    --c-blue-h:  #1e40af;
    --c-blue-s:  #dbeafe;
    --c-green:   #16a34a;
    --c-green-s: #f0fdf4;
    --c-red:     #dc2626;
    --c-red-s:   #fef2f2;
    --c-amber:   #d97706;
    --c-amber-s: #fffbeb;
    --r:         6px;
    --r-sm:      4px;
    --mono:      'JetBrains Mono', monospace;
    --sh-xs:     0 1px 2px rgba(0,0,0,.04);
    --sh-sm:     0 1px 4px rgba(0,0,0,.06);
    --sh:        0 2px 10px rgba(0,0,0,.07);
    --t:         120ms ease;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    color: var(--c-tx);
    /* v3.10.158 — Explicit color-scheme für native form controls (Safari/Chrome
       native dropdown popups, scrollbars, date pickers). Ohne diese Direktive
       übernimmt der Browser bei Light-Theme auf macOS-Dark-Mode die OS-dark-
       chrome für native popups → semi-transparenter Look auf Light-Page.
       Mit `light` greift Light-Mode-chrome unabhängig vom OS. Dark-Theme
       überschreibt das weiter unten in .lsm-fe-app[data-theme="dark"]. */
    color-scheme: light;
}

/* v3.10.158 — Native form-control color-scheme inheritance.
   Stellt sicher dass jeder native <select>/<input> innerhalb der LSM App
   das korrekte color-scheme bekommt (matches the rendered surface). */
.lsm-fe-app select,
.lsm-fe-app input,
.lsm-fe-app textarea {
    color-scheme: inherit;
}
.lsm-fe-app select option {
    /* Safari respektiert background/color auf <option> wenn color-scheme
       der parent matched. Fallback für edge cases (Safari ältere Versionen). */
    background-color: var(--c-surf);
    color: var(--c-tx);
}

/* ────────────────────────────────────────────────────────────
   Dark theme — v3.9.301
   Activated by setting data-theme="dark" on .lsm-fe-app. The
   toggle JS persists the choice in localStorage and syncs
   with the system preference (prefers-color-scheme: dark) when
   the user hasn't explicitly chosen.
   ──────────────────────────────────────────────────────────── */
.lsm-fe-app[data-theme="dark"] {
    /* Page-level surfaces — kept warm-cool neutral, not pure black,
       so eye fatigue stays low. Surf3 is the brightest layer (e.g.
       hovered cards), surf is the canvas, bg is the page below. */
    --c-bg:      #0d1117;
    --c-surf:    #161b22;
    --c-surf2:   #1c222b;
    --c-surf3:   #232a35;
    /* Borders use a slightly warmer tone than surfaces so they
       remain visible without screaming. */
    --c-bdr:     #2d3543;
    --c-bdr2:    #3a4456;
    /* Text scale — 4 levels of de-emphasis, all with >7:1 contrast
       against --c-bg for the brightest, ~4.5:1 for the dimmest. */
    --c-tx:      #e6edf3;
    --c-tx2:     #b5bdc9;
    --c-tx3:     #8b95a3;
    --c-tx4:     #6b7585;
    /* Accent colors — slightly desaturated/lifted for dark canvas.
       The "-s" variants are now low-alpha tints rather than pastels. */
    --c-blue:    #4b8bf0;
    --c-blue-h:  #6ba0f5;
    --c-blue-s:  rgba(75, 139, 240, 0.14);
    --c-green:   #22c55e;
    --c-green-s: rgba(34, 197, 94, 0.14);
    --c-red:     #f87171;
    --c-red-s:   rgba(248, 113, 113, 0.14);
    --c-amber:   #fbbf24;
    --c-amber-s: rgba(251, 191, 36, 0.14);
    /* Stronger shadows on dark — they need more contrast to read. */
    --sh-xs:     0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-sm:     0 2px 6px rgba(0, 0, 0, 0.45);
    --sh:        0 4px 14px rgba(0, 0, 0, 0.5);
}
/* v3.9.325 — Host-Theme-Background-Override.
   Salient (and most WP themes) paint a body/wrapper background that
   bleeds through gaps between the LSM app surfaces — visible as
   light strips between cards, around the toolbar, etc. when LSM is
   in dark mode.

   The pre-render bootstrap and the theme-toggle both set
   `data-lsm-theme` on <body>; we use that attribute to repaint the
   common Salient wrapper containers. Also paint <html> so very long
   pages don't show the browser default white at scroll-overflow. */
body[data-lsm-theme="dark"],
html:has(body[data-lsm-theme="dark"]) {
    background: #0d1117 !important;
}
body[data-lsm-theme="dark"] #ajax-content-wrap,
body[data-lsm-theme="dark"] #wrap_all,
body[data-lsm-theme="dark"] .container-wrap,
body[data-lsm-theme="dark"] .main-content,
body[data-lsm-theme="dark"] .wpb_wrapper,
body[data-lsm-theme="dark"] .vc_row,
body[data-lsm-theme="dark"] .vc_row.wpb_row,
body[data-lsm-theme="dark"] #content,
body[data-lsm-theme="dark"] #page,
body[data-lsm-theme="dark"] .post-area,
body[data-lsm-theme="dark"] .full-width-section,
body[data-lsm-theme="dark"] .full-width-content {
    background: #0d1117 !important;
}
/* Also flatten the wpb_text_column / wpb_wrapper that sits *inside*
   our LSM-shortcode call — sometimes Salient wraps the shortcode in
   yet another layer and adds a margin-bottom / padding which creates
   a visible gap right above our header. */
body[data-lsm-theme="dark"] .wpb_text_column,
body[data-lsm-theme="dark"] .wpb_text_column .wpb_wrapper {
    background: transparent !important;
}

/* When LSM is in light mode but we're embedded in a dark Salient theme
   the inverse problem can happen — the dark Salient body bleeds
   through our gaps. We don't force the host theme to flip; we just
   make sure the LSM container itself paints a solid bg in light mode
   too (currently it relies on inheritance). */
body[data-lsm-theme="light"] .lsm-fe-app {
    background: #edf0f5;
}
.lsm-fe-app {
    /* Default fallback when no theme attr is set yet (very brief,
       between bootstrap script run and CSS load). */
    background: var(--c-bg);
}

/* Page-canvas backdrop. The .lsm-fe-app div itself doesn't paint
   a background by default (it inherits from the page). When dark
   mode is active we want the whole app surface to use --c-bg
   instead of leaking through to the host theme's body color. */
.lsm-fe-app[data-theme="dark"] {
    background: var(--c-bg);
    color: var(--c-tx);
    color-scheme: dark; /* hint to native form controls + scrollbars */
}

/* System preference default — only kicks in if no explicit choice
   was made (data-theme attribute absent). The JS sets the attr
   based on saved-pref OR system-pref, so this rule rarely fires
   client-side, but it's important for first-paint before JS runs. */
@media (prefers-color-scheme: dark) {
    .lsm-fe-app:not([data-theme="light"]):not([data-theme="dark"]) {
        --c-bg:      #0d1117;
        --c-surf:    #161b22;
        --c-surf2:   #1c222b;
        --c-surf3:   #232a35;
        --c-bdr:     #2d3543;
        --c-bdr2:    #3a4456;
        --c-tx:      #e6edf3;
        --c-tx2:     #b5bdc9;
        --c-tx3:     #8b95a3;
        --c-tx4:     #6b7585;
        --c-blue:    #4b8bf0;
        --c-blue-h:  #6ba0f5;
        --c-blue-s:  rgba(75, 139, 240, 0.14);
        --c-green:   #22c55e;
        --c-green-s: rgba(34, 197, 94, 0.14);
        --c-red:     #f87171;
        --c-red-s:   rgba(248, 113, 113, 0.14);
        --c-amber:   #fbbf24;
        --c-amber-s: rgba(251, 191, 36, 0.14);
        --sh-xs:     0 1px 2px rgba(0, 0, 0, 0.4);
        --sh-sm:     0 2px 6px rgba(0, 0, 0, 0.45);
        --sh:        0 4px 14px rgba(0, 0, 0, 0.5);
        background: var(--c-bg);
        color: var(--c-tx);
        color-scheme: dark;
    }
}

/* ── Not logged in ──────────────────────────────────────────── */
.lsm-fe-notice {
    background: var(--c-surf); border: 1px solid var(--c-bdr);
    border-radius: var(--r); padding: 48px 28px;
    text-align: center; box-shadow: var(--sh-sm);
}
.lsm-fe-notice p { font-size: 15px; color: var(--c-tx2); margin-bottom: 20px; }
.lsm-fe-notice a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: var(--r);
    background: var(--c-blue); color: #fff; text-decoration: none;
    font-weight: 600; font-size: 14px; transition: background var(--t);
}
.lsm-fe-notice a:hover { background: var(--c-blue-h); }

/* ── App header ─────────────────────────────────────────────── */
.lsm-fe-app-header {
    position: relative; /* anchor for the notification panel */
    display: flex; align-items: center;
    padding: 0 0 18px; gap: 16px;
    border-bottom: 1px solid var(--c-bdr);
    margin-bottom: 20px;
}
.lsm-fe-app-title { font-size: 18px; font-weight: 700; color: var(--c-tx); margin: 0; letter-spacing: -.3px; }
.lsm-fe-app-header .lsm-fe-tabs {
    display: flex; gap: 4px; margin-left: auto;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    flex-shrink: 1; min-width: 0;
}
.lsm-fe-app-header .lsm-fe-tabs::-webkit-scrollbar { display: none; }

/* ── Tab bar (v3.9.194 — bigger, modern, underline accent) ──────
   Tabs are primary navigation, should feel substantial:
   - Larger hit target (40px min-height) for easier clicking
   - Clearer icon sizing (16px vs 14px)
   - Modest letter-spacing tightens label at 14px
   - Underline accent for active tab instead of filled pill —
     cleaner visual, reads as "currently here" rather than a button.
   - Soft hover (bg tint only), keeps the UI quiet until engaged. */
.lsm-fe-tab {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px 9px;
    border-radius: 8px 8px 0 0;
    font-family: inherit; font-size: 14px; font-weight: 500;
    color: var(--c-tx2); background: transparent;
    border: none; cursor: pointer;
    transition: color var(--t), background var(--t);
    white-space: nowrap;
    position: relative;
    letter-spacing: -0.005em;
    min-height: 40px;
}
.lsm-fe-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.lsm-fe-tab:hover {
    color: var(--c-tx);
    background: var(--c-surf2);
}
.lsm-fe-tab.active {
    color: var(--c-blue);
    background: transparent;
    font-weight: 500;
}
.lsm-fe-tab.active::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 2.5px;
    background: var(--c-blue);
    border-radius: 2px 2px 0 0;
}
.lsm-fe-tab-badge {
    background: var(--c-surf2); color: var(--c-tx2);
    font-size: 11px; font-weight: 500;
    padding: 2px 7px; border-radius: 999px;
    line-height: 1.5;
    border: 0.5px solid var(--c-bdr);
}
.lsm-fe-tab.active .lsm-fe-tab-badge {
    background: var(--c-blue-s);
    color: var(--c-blue);
    border-color: transparent;
}
.lsm-fe-tab-disabled, .lsm-fe-tab:disabled {
    opacity: .4; cursor: not-allowed !important; pointer-events: none;
}

/* ════════════════ v3.10.199 — Hauptmenü als gruppierte Seitenleiste ════════════════
   Flat Black/White. Komplett unter .lsm-fe-app--sidebar gescoped → reversibel
   (Modifier-Klasse entfernen = alte Top-Leiste). Tabs behalten .lsm-fe-tab +
   data-tab, daher bleibt die gesamte Tab-Switch-Logik unverändert. */
.lsm-fe-app--sidebar { display: flex; align-items: flex-start; gap: 0; }

/* Header → Sidebar */
.lsm-fe-app--sidebar .lsm-fe-app-header {
    flex-direction: column; align-items: stretch;
    width: 240px; flex-shrink: 0; gap: 0; padding: 0; margin: 0;
    border-bottom: none; border-right: 1px solid var(--c-bdr);
    background: var(--c-surf);
    position: sticky; top: 0; align-self: flex-start;
    max-height: 100vh; overflow: hidden;
}
.lsm-fe-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; flex-shrink: 0; }
.lsm-fe-sidebar-logo {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: var(--c-tx); color: var(--c-surf);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; letter-spacing: -.5px;
}
.lsm-fe-sidebar-brandtext { font-size: 14px; font-weight: 600; color: var(--c-tx); letter-spacing: -.2px; line-height: 1.2; }
.lsm-fe-sidebar-brandtext small { display: block; font-size: 11px; font-weight: 500; color: var(--c-tx3); letter-spacing: 0; }

/* Nav (scrollbar) */
.lsm-fe-app--sidebar .lsm-fe-tabs {
    flex-direction: column; align-items: stretch; gap: 1px;
    margin: 0; padding: 8px 16px 14px;
    overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; min-width: 0;
}
.lsm-fe-navgroup { margin-top: 12px; }
.lsm-fe-navgroup:first-child { margin-top: 2px; }
.lsm-fe-navgroup-label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .6px; color: var(--c-tx4); padding: 7px 14px 5px;
}

/* Tab → Sidebar-Eintrag */
.lsm-fe-app--sidebar .lsm-fe-tab {
    position: relative; display: flex; align-items: center; gap: 10px;
    width: 100%; justify-content: flex-start;
    padding: 9px 14px; margin-bottom: 1px;
    border-radius: 9px; border: none; min-height: 0;
    font-size: 13.5px; font-weight: 500;
    color: var(--c-tx2); background: transparent;
}
.lsm-fe-app--sidebar .lsm-fe-tab svg { width: 17px; height: 17px; color: var(--c-tx3); transition: color .14s; }
.lsm-fe-app--sidebar .lsm-fe-tab:hover { background: var(--c-surf2); color: var(--c-tx); }
.lsm-fe-app--sidebar .lsm-fe-tab:hover svg { color: var(--c-tx2); }
.lsm-fe-app--sidebar .lsm-fe-tab.active { background: var(--c-surf2); color: var(--c-tx); font-weight: 500; }
.lsm-fe-app--sidebar .lsm-fe-tab.active svg { color: var(--c-tx); }
.lsm-fe-app--sidebar .lsm-fe-tab.active::after { display: none; } /* alter Underline aus */
.lsm-fe-app--sidebar .lsm-fe-tab.active::before {
    content: ''; position: absolute; left: -16px; top: 50%;
    transform: translateY(-50%); width: 3px; height: 20px;
    border-radius: 0 3px 3px 0; background: var(--c-tx);
}
/* v3.10.201 — Zähler-Pills im Menü konsistent ausgeblendet (vorher nur bei
   manchen Einträgen). Wieder einblendbar: display:flex + überall Badges ergänzen. */
.lsm-fe-app--sidebar .lsm-fe-tab-badge { display: none; }

/* Footer (Suche/Theme/Glocke) */
.lsm-fe-sidebar-foot { flex-shrink: 0; border-top: 1px solid var(--c-bdr); padding: 8px 10px; display: flex; align-items: center; gap: 4px; }
.lsm-fe-app--sidebar .lsm-fe-search-trigger { flex: 1; min-width: 0; }
/* Notif-Panel öffnet über dem Footer statt oben */
.lsm-fe-app--sidebar .lsm-fe-notif-panel { top: auto; bottom: 52px; left: 10px; right: auto; }

/* Main-Spalte — v3.10.203: großzügigerer, mitwachsender Seitenabstand. */
.lsm-fe-main { flex: 1 1 auto; min-width: 0; padding: 28px clamp(24px, 3.5vw, 56px); }

/* Dark */
.lsm-fe-app[data-theme="dark"] .lsm-fe-sidebar-logo { background: var(--c-tx); color: var(--c-bg); }

/* v3.10.631 — Plattform-Marke: Logo, sonst Name als Wortmarke.
   Das alte feste Kuerzel („io") und der Hostname als Text sind entfallen.
   Zwei Bilder statt eines: ein SVG im <img> kann currentColor nicht erben,
   deshalb ein optionales zweites Logo fuer den dunklen Modus. Liegt keines
   vor, zeigen beide dasselbe Bild — die Regel bleibt trotzdem stehen,
   damit hier keine Sonderbehandlung noetig ist. */
.lsm-fe-sidebar-brand .lsm-pbrand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lsm-pbrand-img { height: 26px; width: auto; max-width: 168px; display: block; }
.lsm-pbrand-img--d { display: none; }
.lsm-fe-app[data-theme="dark"] .lsm-pbrand-img--l { display: none; }
.lsm-fe-app[data-theme="dark"] .lsm-pbrand-img--d { display: block; }
.lsm-pbrand-word { font-size: 15px; font-weight: 700; color: var(--c-tx); letter-spacing: -.35px; line-height: 1.2; }
.lsm-pbrand-sub { display: block; font-size: 11px; font-weight: 500; color: var(--c-tx3); letter-spacing: 0; }

/* Responsive: schmale Screens → Menü als horizontal scrollbare Top-Leiste.
   v3.10.201 — navgroup via display:contents aufgelöst, damit die Tab-Buttons
   direkte Flex-Kinder der scrollbaren .lsm-fe-tabs werden (echtes H-Scrolling). */
@media (max-width: 820px) {
    .lsm-fe-app--sidebar { flex-direction: column; align-items: stretch; }
    .lsm-fe-app--sidebar .lsm-fe-app-header {
        flex-direction: row; align-items: center; gap: 6px;
        width: 100%; height: auto; max-height: none; overflow: visible;
        position: sticky; top: 0; z-index: 40;
        border-right: none; border-bottom: 1px solid var(--c-bdr);
        padding: 6px 8px;
    }
    /* Branding kompakt: nur das Logo */
    .lsm-fe-sidebar-brand { padding: 0 2px; flex-shrink: 0; }
    .lsm-fe-sidebar-brandtext { display: none; }
    /* v3.10.631 — schmal: Logo bzw. Wortmarke bleibt, die Zusatzzeile geht.
       Bei einer Wortmarke ohne Logo waere sonst gar nichts mehr zu sehen. */
    .lsm-pbrand-sub { display: none; }
    .lsm-pbrand-img { height: 22px; max-width: 118px; }
    .lsm-pbrand-word { font-size: 13px; }
    /* Tabs = horizontal scrollbare Leiste */
    .lsm-fe-app--sidebar .lsm-fe-tabs {
        flex: 1 1 auto; min-width: 0;
        flex-direction: row; flex-wrap: nowrap; align-items: center;
        gap: 4px; margin: 0; padding: 2px;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .lsm-fe-app--sidebar .lsm-fe-tabs::-webkit-scrollbar { display: none; }
    .lsm-fe-navgroup { display: contents; }
    .lsm-fe-navgroup-label { display: none; }
    .lsm-fe-app--sidebar .lsm-fe-tab {
        width: auto; flex-shrink: 0; white-space: nowrap;
        padding: 10px 15px; margin: 0; font-size: 15px; font-weight: 500;
    }
    .lsm-fe-app--sidebar .lsm-fe-tab svg { width: 19px; height: 19px; }
    .lsm-fe-app--sidebar .lsm-fe-tab.active::before { display: none; }
    /* Footer (Suche/Theme/Glocke) rechts in der Leiste */
    .lsm-fe-sidebar-foot { flex-shrink: 0; border-top: none; padding: 0; gap: 2px; }
    .lsm-fe-app--sidebar .lsm-fe-search-trigger { flex: 0 0 auto; }
    .lsm-fe-app--sidebar .lsm-fe-notif-panel { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; }
    .lsm-fe-main { padding: 18px 16px; }
}

/* v3.10.200 — Canvas-Template (theme-unabhängige App-Seite): App + Sidebar
   über volle Höhe; Sidebar-Sticky-Offset für die WP-Adminbar. */
/* v3.10.622 — Die Höhenangaben der Seitenleiste hingen an `body.lsm-canvas`,
   also am LSM-eigenen Canvas-Template. Wird die App über ein anderes leeres
   Template eingebunden (etwa „Blank Slate"), fehlt die Klasse — und damit die
   Mindesthöhe. Ohne die wächst die Navigation mit ihrem Inhalt, überläuft nie
   und lässt sich folglich nicht scrollen; `overflow-y: auto` allein bewirkt
   nichts, solange nichts überläuft. Auch die Korrektur für die
   WordPress-Adminleiste fiel weg, wodurch die Leiste 32 px unter den unteren
   Rand ragte.

   Deshalb hängen die Regeln jetzt an der Seitenleisten-Variante selbst statt
   am Template. `min-height` und `max-height` sind absichtlich gleich: Die
   Leiste soll exakt die Fensterhöhe füllen, damit Marke und Fußzeile stehen
   bleiben und nur die Navigation dazwischen scrollt. */
.lsm-fe-app--sidebar { min-height: 100vh; }
.lsm-fe-app--sidebar .lsm-fe-app-header { min-height: 100vh; }
body.admin-bar .lsm-fe-app--sidebar .lsm-fe-app-header {
    top: 32px; max-height: calc(100vh - 32px); min-height: calc(100vh - 32px);
}
@media (max-width: 782px) {
    /* v3.10.622 — auf schmalen Fenstern wird die Leiste zur Kopfzeile;
       dort gilt weder Mindesthöhe noch Adminleisten-Versatz. */
    body.admin-bar .lsm-fe-app--sidebar .lsm-fe-app-header,
    .lsm-fe-app--sidebar .lsm-fe-app-header {
        top: 0; max-height: none; min-height: 0;
    }
}

/* ── Quota bar ──────────────────────────────────────────────── */
.lsm-fe-quota-wrap {
    background: var(--c-surf); border: 0.5px solid var(--c-bdr);
    border-radius: var(--r); padding: 10px 14px;
    margin-bottom: 14px;
}
.lsm-fe-quota-info {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; margin-bottom: 6px;
}
.lsm-fe-quota-label {
    display: flex; align-items: center; gap: 6px;
    font-weight: 500; color: var(--c-tx3);
    font-size: 11.5px;
}
.lsm-fe-quota-label svg { color: var(--c-tx3); }
.lsm-fe-quota-count { font-size: 12px; color: var(--c-tx2); }
.lsm-fe-quota-track {
    height: 3px; background: var(--c-surf2);
    border-radius: 2px; overflow: hidden;
}
.lsm-fe-quota-fill { height: 100%; border-radius: 2px; background: var(--c-blue); transition: width .4s; }
.lsm-fe-quota-fill.warn   { background: var(--c-amber); }
.lsm-fe-quota-fill.danger { background: var(--c-red); }
.lsm-fe-quota-exceeded { color: var(--c-red); font-weight: 700; font-size: 11px; }
.lsm-fe-quota-warn     { color: var(--c-amber); font-weight: 700; font-size: 11px; }

/* ── Panels ─────────────────────────────────────────────────── */
.lsm-fe-panel { animation: lsmFeFadeIn .15s ease; }
.lsm-fe-panel-hidden { display: none !important; }
@keyframes lsmFeFadeIn { from{opacity:0} to{opacity:1} }

/* ── Empty state ────────────────────────────────────────────── */
.lsm-fe-empty { padding: 56px 24px; text-align: center; }
.lsm-fe-empty-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 9px 18px; border-radius: 8px; border: 0.5px solid var(--c-bdr2); background: var(--c-surf2); color: var(--c-tx); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .12s; }
.lsm-fe-empty-cta:hover { background: var(--c-surf); border-color: var(--c-blue); color: var(--c-blue); }
.lsm-fe-empty-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--c-surf2); border: 1px solid var(--c-bdr);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.lsm-fe-empty-icon svg { width: 22px; height: 22px; color: var(--c-tx4); }
.lsm-fe-empty h3 { font-size: 15px; font-weight: 600; color: var(--c-tx); margin: 0 0 6px; }
.lsm-fe-empty p  { font-size: 13px; color: var(--c-tx3); max-width: 340px; margin: 0 auto; }

/* ── Event grid ─────────────────────────────────────────────── */
.lsm-fe-event-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px; align-items: start;
}

/* ── Event card ─────────────────────────────────────────────── */
/* ── Card ────────────────────────────────────────────────────── */
.lsm-fe-card {
    background: var(--c-surf); border: 0.5px solid var(--c-bdr);
    border-radius: 14px; overflow: hidden; cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
    display: flex; flex-direction: column;
}
.lsm-fe-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.10); border-color: var(--c-bdr2); }

/* ── Thumbnail / Header zone ────────────────────────────────── */
.lsm-fe-card-thumb {
    width: 100%; aspect-ratio: 16/9;
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: #0a0e15;
}
.lsm-fe-card-thumb::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--thumb-url);
    background-size: cover; background-position: center;
    transition: transform .35s ease, opacity .4s ease; opacity: 0;
}
.lsm-fe-card-thumb.lsm-thumb-loaded::before { opacity: 1; }
.lsm-fe-card:hover .lsm-fe-card-thumb::before { transform: scale(1.03); }
.lsm-fe-card-thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 100%);
    pointer-events: none; z-index: 1;
}
.lsm-fe-card-thumb-placeholder { background: linear-gradient(135deg, var(--c-surf2) 0%, var(--c-surf3) 100%); }
.lsm-fe-card-thumb-placeholder::after { opacity: 0; }
.lsm-fe-card-thumb-icon { width: 38px; height: 38px; color: var(--c-tx4); position: relative; z-index: 2; }

/* v3.9.387 — Hover-to-animate thumbnail for scheduled events.
   Cards with both a static thumbnail.jpg (default) and an animated
   preview.webp (hover) get the .lsm-fe-card-thumb-hoverable class.
   We inject a second background layer that fades in on hover.

   Implementation: a dedicated <hover-layer> via a sibling pseudo
   isn't possible since ::before/::after are taken by static image
   and gradient. Instead we attach the animated webp directly as
   the card-thumb's own background-image (the element's own
   background, not via pseudo). Element bg sits BEHIND the ::before
   static layer, so we hide the ::before on hover by swapping its
   background-image to none — revealing the webp underneath.

   Why this works: browser only requests the webp once (background-
   image is set unconditionally on hoverable cards) but display
   only happens during hover when the static layer hides. The webp
   IS lightweight enough that this trade-off is fine. Browsers
   that don't load offscreen background-images will defer it. */
.lsm-fe-card-thumb-hoverable {
    background-image: var(--thumb-hover-url);
    background-size: cover;
    background-position: center;
}
.lsm-fe-card:hover .lsm-fe-card-thumb-hoverable::before {
    opacity: 0;
}
/* Subtle "hover to preview" hint — small play-icon in corner that
   only appears on hoverable cards before hover. Disappears once
   user hovers (preview is now playing). */
.lsm-fe-card-thumb-hoverable::after {
    /* keep the existing dark gradient — preview animations look
       washed-out otherwise. The gradient is also useful for the
       overlay text legibility. */
}

/* Overlay UI in thumbnail */
.lsm-fe-thumb-badges  { position: absolute; top: 9px; left: 10px; z-index: 3; display: flex; gap: 5px; flex-wrap: wrap; }
.lsm-fe-thumb-toggle  { position: absolute; top: 9px; right: 10px; z-index: 3; }
.lsm-fe-thumb-signal  { position: absolute; bottom: 9px; left: 10px; z-index: 3; display: flex; align-items: center; gap: 5px; font-size: 11px; }
.lsm-fe-thumb-views   { position: absolute; bottom: 9px; right: 10px; z-index: 3; display: flex; gap: 8px; }
.lsm-fe-view-chip     { font-size: 10.5px; color: rgba(255,255,255,.7); display: inline-flex; align-items: center; gap: 3px; }
.lsm-fe-view-chip svg { width: 10px; height: 10px; }
.lsm-fe-card-thumb-placeholder .lsm-fe-thumb-signal,
.lsm-fe-card-thumb-placeholder .lsm-fe-thumb-views { opacity: .5; }

/* ==============================================================
   v3.9.327 — Generic thumbnail fade-in for <img>-based cards.
   The streams "Meine Streams" already had the smooth pattern via
   CSS background-image + .lsm-thumb-loaded. Cards in Meine Videos /
   DVR-Aufnahmen / Meine Clips use real <img> tags, so this version
   targets the IMG itself.

   Pattern:
   1. Image starts at opacity 0 via the [data-fade-thumb] attribute
   2. JS adds .lsm-thumb-loaded once the image has finished loading
   3. Transition 280ms ease — fast enough to feel responsive,
      slow enough to register as smooth.

   The [data-fade-thumb] hook keeps this opt-in: existing <img>s
   without the attribute are unaffected, so we don't accidentally
   hide thumbnails elsewhere in the app.
   ============================================================== */
img[data-fade-thumb] {
    opacity: 0;
    transition: opacity .28s ease;
}
img[data-fade-thumb].lsm-thumb-loaded {
    opacity: 1;
}
/* When an image errored out we don't want it stuck invisible —
   show the broken-image fallback (or whatever the onerror handler
   replaced it with) at full opacity. */
img[data-fade-thumb].lsm-thumb-failed {
    opacity: 1;
}

/* Overlay badges */
.lsm-fe-hbadge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; letter-spacing: .01em; }
/* v3.9.334 — hbadges with leading dots use flex-center so the dot
   sits on the optical center of the text. vertical-align:middle on
   inline-block aligns to the font baseline, which makes round dots
   visually appear "low" because they have no descender. */
.lsm-fe-hbadge-live,
.lsm-fe-hbadge-rendering {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lsm-fe-hbadge-live { background: #dc2626; color: #fff; animation: lsmFeLivePulse 2s ease-in-out infinite; }
.lsm-fe-hbadge-live::before { content: ""; display: block; width: 6px; height: 6px; background: rgba(255,255,255,.85); border-radius: 50%; margin: 0; flex-shrink: 0; }
.lsm-fe-hbadge-active   { background: #16a34a; color: #fff; }
.lsm-fe-hbadge-inactive { background: rgba(0,0,0,.45); color: rgba(255,255,255,.85); }
.lsm-fe-hbadge-g4l      { background: rgba(29,78,216,.8); color: #fff; }
/* v3.10.48 — Realtime-Modus (SLDP) UI in Event-Drawer.
   Stilistisch konsistent mit Bumper-Switch (gleiches Pattern, andere Farbe:
   Teal/Mint statt Violet — signalisiert "Live/Action" vs "Branding"). */

.lsm-fe-realtime-wrap {
    padding: 4px 0;
}

.lsm-fe-realtime-switch {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.lsm-fe-realtime-option {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--c-bdr, rgba(0,0,0,.1));
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    background: var(--c-surf, #fff);
}
.lsm-fe-realtime-option:hover {
    border-color: #14a085;
    background: rgba(20,160,133,.04);
}
.lsm-fe-realtime-option.is-active {
    border-color: #0c5e4d;
    background: rgba(20,160,133,.08);
}
.lsm-fe-realtime-option input[type="radio"] {
    flex: none;
    margin-top: 2px;
    accent-color: #14a085;
}
.lsm-fe-realtime-option-body {
    flex: 1;
    min-width: 0;
}
.lsm-fe-realtime-option-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-tx1, #111);
    margin-bottom: 3px;
}
.lsm-fe-realtime-option-sub {
    font-size: 12px;
    color: var(--c-tx2, #6b7280);
    line-height: 1.4;
}

.lsm-fe-realtime-url-preview {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--c-surf2, #f8fafc);
    border: 0.5px solid var(--c-bdr, rgba(0,0,0,.08));
    border-radius: 6px;
}
.lsm-fe-realtime-url-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-tx3, #9ca3af);
    margin-bottom: 4px;
}
.lsm-fe-realtime-url-preview code {
    font-size: 11.5px;
    color: var(--c-tx1, #111);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    word-break: break-all;
    display: block;
}


   3-Mode-Switch + Effective-Timeline-Preview. Optisch konsistent mit den 
   bestehenden Post-End-Switches (lsm-fe-post-end-switch) aber mit eigenem
   Bumper-spezifischen Akzent (violett für Branding-Feature). */

.lsm-fe-bumper-wrap {
    padding: 4px 0;
}

.lsm-fe-bumper-mode-switch {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.lsm-fe-bumper-mode-option {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--c-bdr, rgba(0,0,0,.1));
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    background: var(--c-surf, #fff);
}
.lsm-fe-bumper-mode-option:hover {
    border-color: #a78bfa;
    background: rgba(167,139,250,.04);
}
.lsm-fe-bumper-mode-option.is-active {
    border-color: #7c3aed;
    background: rgba(167,139,250,.08);
}
.lsm-fe-bumper-mode-option input[type="radio"] {
    flex: none;
    margin-top: 2px;
    accent-color: #7c3aed;
}
.lsm-fe-bumper-mode-option-body {
    flex: 1;
    min-width: 0;
}
.lsm-fe-bumper-mode-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-tx1, #111);
    margin-bottom: 3px;
}
.lsm-fe-bumper-mode-sub {
    font-size: 12px;
    color: var(--c-tx2, #6b7280);
    line-height: 1.4;
}

.lsm-fe-bumper-preview {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--c-surf2, #f8fafc);
    border: 0.5px solid var(--c-bdr, rgba(0,0,0,.08));
    border-radius: 8px;
}
.lsm-fe-bumper-preview-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-tx3, #9ca3af);
    margin-bottom: 8px;
}
.lsm-fe-bumper-preview-step {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: var(--c-tx1, #111);
}
.lsm-fe-bumper-preview-icon {
    font-size: 14px;
    flex: none;
}
.lsm-fe-bumper-preview-hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--c-tx3, #9ca3af);
    font-style: italic;
}


   über Thumbnail (in .lsm-fe-thumb-badges). Subtle differentiation —
   nicht so prominent wie LIVE/Aktiv, aber klar lesbar. */
.lsm-fe-card-type-badge {
    background: rgba(0,0,0,.5);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0.5px solid rgba(255,255,255,.12);
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
}
.lsm-fe-card-type-badge--scheduled { background: rgba(167,139,250,.78); color: #fff; }
.lsm-fe-card-type-badge--channel   { background: rgba(20,160,133,.82); color: #fff; }
.lsm-fe-card-type-badge--playlist  { background: rgba(245,158,11,.82); color: #fff; }
/* v3.9.328 — Status-hbadges für Clips + VOD/DVR (gleicher Stil wie
   die Streams-Live/Active Badges, andere Farben) */
.lsm-fe-hbadge-ready     { background: #16a34a; color: #fff; }
.lsm-fe-hbadge-rendering { background: #d97706; color: #fff; }
.lsm-fe-hbadge-rendering::before { content: ""; display: block; width: 6px; height: 6px; background: rgba(255,255,255,.85); border-radius: 50%; margin: 0; flex-shrink: 0; animation: lsmFeLivePulse 1.4s ease-in-out infinite; }
.lsm-fe-hbadge-failed    { background: #dc2626; color: #fff; }
.lsm-fe-hbadge-local     { background: rgba(100,116,139,.85); color: #fff; }
.lsm-fe-hbadge-shared    { background: rgba(20,184,166,.9); color: #fff; }
.lsm-fe-hbadge-cc        { background: rgba(15,23,42,.72); color: #fff; letter-spacing: .04em; }

/* v3.10.544 — Play-Overlay auf Video-Vorschaubildern (Hover). pointer-events
   bleibt aus, damit der Karten-Klick weiterhin den Drawer/Player öffnet. */
.lsm-fe-thumb-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; pointer-events:none; }
.lsm-fe-card:hover .lsm-fe-thumb-play { opacity:1; }
.lsm-fe-thumb-play span { width:46px; height:46px; border-radius:50%; background:rgba(10,16,32,.55); display:flex; align-items:center; justify-content:center; }
.lsm-fe-thumb-play svg { width:20px; height:20px; color:#fff; margin-left:3px; }
@keyframes lsmFeLivePulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* v3.9.328 — Bottom-left duration overlay (parallel to thumb-views,
   thumb-badges and thumb-toggle which sit at the other corners). */
.lsm-fe-thumb-time {
    position: absolute;
    bottom: 9px;
    left: 10px;
    z-index: 3;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,.6);
    padding: 3px 8px;
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
}

/* v3.9.328 — Card-Actions footer in den Body (Streams haben das
   bei pill-toggles + share-links — Clips/VOD nutzen das hier für
   Download/Share/Delete-Icons). */
.lsm-fe-card-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--c-bdr);
}
.lsm-fe-card-actions .lsm-fe-list-ic {
    flex: 1;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
    color: var(--c-tx2);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    text-decoration: none;
}
.lsm-fe-card-actions .lsm-fe-list-ic:hover {
    background: var(--c-surf2);
    color: var(--c-tx);
    border-color: var(--c-bdr2);
}
.lsm-fe-card-actions .lsm-fe-list-ic-danger:hover {
    color: var(--c-red);
    border-color: var(--c-red);
}
.lsm-fe-card-actions .lsm-fe-list-ic-shared,
.lsm-fe-card-actions .lsm-myclips-action-share-on {
    color: var(--c-green);
    border-color: var(--c-green);
}
.lsm-fe-card-actions .lsm-fe-list-ic-shared:hover,
.lsm-fe-card-actions .lsm-myclips-action-share-on:hover {
    color: var(--c-green);
    border-color: var(--c-green);
    background: var(--c-surf2);
}

/* Signal dot */
.lsm-fe-sig-dot      { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lsm-fe-sig-dot-live { background: #E24B4A; animation: lsmFeLivePulse 2s ease-in-out infinite; }
.lsm-fe-sig-dot-off  { background: rgba(255,255,255,.3); }
.lsm-fe-sig-text     { color: rgba(255,255,255,.65); }
.lsm-fe-sig-text-live{ color: #F09595; }

/* Overlay toggle */
.lsm-fe-thumb-toggle-btn       { font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; }
.lsm-fe-thumb-toggle-btn-stop  { background: rgba(226,75,74,.25); color: #F09595; border: 0.5px solid rgba(226,75,74,.3); }
.lsm-fe-thumb-toggle-btn-start { background: rgba(0,0,0,.3); color: rgba(255,255,255,.65); border: 0.5px solid rgba(255,255,255,.15); }

/* ── Body ────────────────────────────────────────────────────── */
.lsm-fe-card-body { padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lsm-fe-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lsm-fe-card-title { font-size: 16px; font-weight: 500; color: var(--c-tx); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lsm-fe-card-icon-btns { display: flex; gap: 3px; flex-shrink: 0; }
.lsm-fe-icon-btn { width: 26px; height: 26px; border: 0.5px solid var(--c-bdr); border-radius: 6px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--c-tx3); transition: all .12s; }
.lsm-fe-icon-btn:hover { background: var(--c-surf2); color: var(--c-tx); border-color: var(--c-bdr2); }
.lsm-fe-icon-btn.lsm-fe-danger:hover { color: #dc2626; border-color: rgba(220,38,38,.4); background: rgba(220,38,38,.06); }
.lsm-fe-icon-btn svg { width: 12px; height: 12px; pointer-events: none; }
.lsm-fe-card-meta-row { display: none; }
.lsm-fe-thumb-views { position: absolute; bottom: 7px; right: 8px; display: flex; gap: 5px; align-items: center; z-index: 2; }
.lsm-fe-tv-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: rgba(255,255,255,.92); background: rgba(0,0,0,.52); border-radius: 5px; padding: 2px 6px; }
.lsm-fe-tv-pill svg { width: 10px; height: 10px; opacity: .85; flex-shrink: 0; }
.lsm-fe-card-meta-row svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Control buttons */
.lsm-fe-controls-new { display: flex; gap: 8px; }
.lsm-fe-ctrl-btn { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 4px !important; border: 0.5px solid; cursor: pointer; font-family: inherit; text-align: left; transition: opacity .12s; }
.lsm-fe-ctrl-btn:hover { opacity: .8; }
.lsm-fe-ctrl-btn-on  { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.3); color: #15803d; }
.lsm-fe-ctrl-btn-off { background: var(--c-surf2); border-color: var(--c-bdr); color: var(--c-tx3); }
.lsm-fe-ctrl-lbl   { font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.lsm-fe-ctrl-state { font-size: 11.5px; font-weight: 500; }
/* ── Pill toggles ──────────────────────────────────────────── */

.lsm-fe-card-dates { display:flex; flex-direction:column; gap:2px; margin:0 0 8px; padding:5px 8px; background:var(--c-bg2); border-radius:6px; }
.lsm-fe-cd-row { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--c-tx2); }
.lsm-fe-cd-lbl { font-size:10px; color:var(--c-tx3); width:46px; flex-shrink:0; }
.lsm-fe-cd-val { color:var(--c-tx2); }
.lsm-fe-cd-g4l { background:#E6F1FB; color:#0C447C; border-radius:4px; padding:1px 5px; font-size:9px; font-weight:500; flex-shrink:0; }

/* v3.10.525 — Meine-Clips Karten-Redesign (aufgeräumt): einzelnes Status-
   Signal (Punkt + Wort) statt gestapelter Badges, kompakte randlose Icon-
   Aktionsleiste mit Trennlinien. Auf .lsm-myclips-card-clickable gescopet,
   damit die Streams-Karten (gleiche Basisklassen) unberührt bleiben. */
.lsm-myclips-meta { display:flex; flex-direction:column; gap:5px; }
.lsm-myclips-meta-row { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--c-tx3); min-width:0; }
.lsm-myclips-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.lsm-myclips-dot-ready     { background:#16a34a; }
.lsm-myclips-dot-rendering { background:#d97706; }
.lsm-myclips-dot-failed    { background:#dc2626; }
.lsm-myclips-dot-muted     { background:var(--c-bdr2); }
.lsm-myclips-meta-status { color:var(--c-tx2); font-weight:500; }
.lsm-myclips-meta-sep { color:var(--c-bdr2); }
.lsm-myclips-meta-date { color:var(--c-tx3); }
.lsm-myclips-shared-ind { display:inline-flex; align-items:center; color:var(--c-tx3); margin-left:auto; }
.lsm-myclips-shared-ind svg { width:12px; height:12px; }
.lsm-myclips-lock-ind { display:inline-flex; align-items:center; margin-left:auto; font-size:10px; font-weight:500; color:#b91c1c; background:rgba(220,38,38,.08); border-radius:4px; padding:1px 6px; }
.lsm-myclips-meta-src { overflow:hidden; }
.lsm-myclips-meta-src a { display:inline-flex; align-items:center; gap:5px; color:var(--c-tx3); text-decoration:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:100%; }
.lsm-myclips-meta-src a:hover { color:var(--c-tx); text-decoration:underline; }
.lsm-myclips-meta-src a svg { flex-shrink:0; width:13px; height:13px; }

/* v3.10.552 — Clip-Karten-Aktionsleiste nutzt jetzt den Standard-Look
   (.lsm-fe-card-actions: separate abgerundete Buttons mit Abstand, exakt wie
   Meine Videos / Audio-Bibliothek). Der frühere kantenbündig-segmentierte
   Override wurde entfernt; nur der Tastatur-Fokus-Stil bleibt (A11y, unten). */

/* v3.10.533 — Renditions-Download-Menü (Qualitätsauswahl am Download-Button) */
.lsm-dl-menu {
    position: fixed;
    z-index: 9999;
    background: var(--c-surf, #ffffff);
    border: 1px solid var(--c-bdr, #c8d0dc);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
    min-width: 170px;
}
.lsm-dl-menu-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    width: 100%; padding: 7px 10px; background: transparent; border: 0; border-radius: 6px;
    color: var(--c-tx, #0a1020); font-size: 12.5px; font-weight: 500; cursor: pointer;
    font-family: inherit; text-align: left;
}
.lsm-dl-menu-item:hover { background: var(--c-surf2, #f0f3f8); }
.lsm-dl-menu-lbl { color: var(--c-tx3, #5a6b80); font-size: 11px; font-weight: 400; }
.lsm-fe-list-ic.lsm-dl-loading { opacity: .5; pointer-events: none; }

/* v3.10.539 — Sichtbarer Tastatur-Fokus (A11y). Maus-Klicks zeigen keinen
   Ring (:focus-visible); Menü-Items spiegeln den Hover-Look bei Fokus. */
.lsm-myclips-card-clickable .lsm-fe-card-actions .lsm-fe-list-ic:focus-visible,
.lsm-myclips-ai-dl:focus-visible {
    outline: 2px solid var(--c-tx2);
    outline-offset: -2px;
    color: var(--c-tx);
    background: var(--c-surf2);
}
.lsm-dl-menu-item:focus { outline: none; background: var(--c-surf2, #f0f3f8); color: var(--c-tx, #0a1020); }
.lsm-dl-menu-item:focus-visible { outline: 2px solid var(--c-tx2, #2d3a4a); outline-offset: -2px; }

/* v3.10.414 — Clips & Highlights: Typ-Filter, Typ-Badges, Render-Fortschritt,
   Quell-Link. Flaches Creator-Design (kein Glass/Aurora); Akzent = Brand-Primary
   (--lsm-primary). Dark+Light über die --c-*-Tokens. */
.lsm-myclips-typebar-wrap { padding:0 20px; margin:4px 0 12px; }
.lsm-myclips-typebar { display:inline-flex; align-items:center; gap:2px; flex-wrap:wrap; background:var(--c-surf2); border:1px solid var(--c-bdr); border-radius:10px; padding:3px; }
.lsm-myclips-typebar-div { width:1px; height:16px; background:var(--c-bdr); margin:0 4px; flex-shrink:0; }
.lsm-myclips-typchip { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--c-tx3); font-size:12px; font-weight:600; line-height:1; cursor:pointer; font-family:inherit; transition:background .15s, color .15s, border-color .15s; }
.lsm-myclips-typchip:hover:not(.is-active) { color:var(--c-tx); background:var(--c-surf3); }
.lsm-myclips-typchip.is-active { background:var(--c-surf); border-color:var(--c-bdr); color:var(--c-tx); }
.lsm-myclips-typchip-n { font-size:11px; font-weight:600; opacity:.55; }
.lsm-myclips-typchip.is-active .lsm-myclips-typchip-n { opacity:.8; }

/* Typ-Badge auf der Karte (über dem Thumbnail). Clip=neutral, Highlight=Akzent-
   fill, Best-of=Akzent-Outline, Lyrics=invers. Kein Violett. */
.lsm-myclips-typb { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; letter-spacing:.01em; line-height:1.3; }
.lsm-myclips-typb-clip      { background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.55); }
.lsm-myclips-typb-highlight { background:var(--lsm-primary,#1d4ed8); color:#fff; border:1px solid var(--lsm-primary,#1d4ed8); }
.lsm-myclips-typb-bestof    { background:rgba(0,0,0,.55); color:#fff; border:1.5px solid var(--lsm-primary,#1d4ed8); }
.lsm-myclips-typb-lyrics    { background:#fff; color:#0a1020; border:1px solid #fff; }

/* Render-Fortschritt über dem Thumbnail (render_pct, gespeist aus ai_exec_progress). */
.lsm-myclips-render-ov { position:absolute; left:0; right:0; bottom:0; z-index:4; padding:8px 10px 9px; display:flex; flex-direction:column; gap:5px; background:linear-gradient(transparent, rgba(0,0,0,.8)); }
.lsm-myclips-render-bar { height:5px; border-radius:3px; background:rgba(255,255,255,.25); overflow:hidden; }
.lsm-myclips-render-bar > span { display:block; height:100%; background:var(--lsm-primary,#1d4ed8); border-radius:3px; transition:width .4s ease; }
.lsm-myclips-render-lbl { font-size:11px; font-weight:600; color:#fff; letter-spacing:.01em; }

/* „Link zum Inhalt" (Quell-Video/Aufnahme/Audio) auf der KI-Karte. */
.lsm-myclips-src-link { display:inline-flex; align-items:center; gap:4px; max-width:172px; color:var(--lsm-primary,#1d4ed8); text-decoration:none; font-weight:600; cursor:pointer; }
.lsm-myclips-src-link svg { flex-shrink:0; }
.lsm-myclips-src-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lsm-myclips-src-link:hover { text-decoration:underline; }

.lsm-fe-pill-toggles { display: flex; gap: 6px; }
.lsm-fe-pill-tgl { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; border: 0.5px solid var(--c-bdr); background: var(--c-surf2); cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; }
.lsm-fe-pill-tgl:hover { border-color: var(--c-bdr2); }
.lsm-fe-pill-tgl.on { background: rgba(22,163,74,.07); border-color: rgba(22,163,74,.35); }
.lsm-fe-pill-tgl-lbl { font-size: 11.5px; font-weight: 500; color: var(--c-tx3); }
.lsm-fe-pill-tgl.on .lsm-fe-pill-tgl-lbl { color: #15803d; }
.lsm-fe-pill-tgl-track { width: 28px; height: 16px; border-radius: 8px; background: var(--c-bdr2); position: relative; flex-shrink: 0; transition: background .2s; }
.lsm-fe-pill-tgl.on .lsm-fe-pill-tgl-track { background: #16a34a; }
.lsm-fe-pill-tgl-thumb { display: block; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s; }
.lsm-fe-pill-tgl.on .lsm-fe-pill-tgl-thumb { transform: translateX(12px); }
/* ── Card status bar ───────────────────────────────────────── */
.lsm-fe-card-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; background: var(--c-surf2); border-top: 0.5px solid var(--c-bdr); }
.lsm-fe-csb-left { display: flex; align-items: center; gap: 6px; }
.lsm-fe-csb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bdr2); flex-shrink: 0; }
.lsm-fe-csb-label { font-size: 11.5px; color: var(--c-tx3); }
.lsm-fe-card--active .lsm-fe-card-status-bar { background: rgba(22,163,74,.05); border-top-color: rgba(22,163,74,.2); }
.lsm-fe-card--active .lsm-fe-csb-dot { background: #16a34a; }
.lsm-fe-card--active .lsm-fe-csb-label { color: #15803d; }
.lsm-fe-card--live .lsm-fe-card-status-bar { background: rgba(220,38,38,.05); border-top-color: rgba(220,38,38,.2); }
.lsm-fe-card--live .lsm-fe-csb-dot { background: #dc2626; }
.lsm-fe-card--live .lsm-fe-csb-label { color: #991b1b; }

/* v3.9.380 — Ingest-waiting state: a feed is arriving from Nimble
   but the user has the stream toggle OFF. Pulses amber so operator
   notices "wait, signal is in, why is it inactive?" immediately. */
.lsm-fe-card--ingest-waiting .lsm-fe-card-status-bar {
    background: rgba(245,158,11,.08);
    border-top-color: rgba(245,158,11,.3);
}
.lsm-fe-card--ingest-waiting .lsm-fe-csb-dot {
    background: #f59e0b;
    animation: lsmIngestPulse 1.4s ease-in-out infinite;
}
.lsm-fe-card--ingest-waiting .lsm-fe-csb-label {
    color: #b45309;
    font-weight: 500;
}
@keyframes lsmIngestPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.6); }
    50%      { box-shadow: 0 0 0 4px rgba(245,158,11,0); }
}
.lsm-fe-card--ingest-waiting {
    border-color: rgba(245,158,11,.35);
}
@keyframes lsmLiveBorder {
  0%,100% { border-color: rgba(220,38,38,.25); box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%      { border-color: rgba(220,38,38,.65); box-shadow: 0 0 0 2.5px rgba(220,38,38,.08); }
}
.lsm-fe-card--live { border-width: 1.5px; animation: lsmLiveBorder 2.8s ease-in-out infinite; }
/* ── Toolbar filter chips ──────────────────────────────────── */
.lsm-fe-tb-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.lsm-fe-tb-chip { height: 34px; padding: 0 13px; border-radius: 17px; border: 0.5px solid var(--c-bdr); background: var(--c-surf2); color: var(--c-tx3); font-size: 12.5px; font-family: inherit; cursor: pointer; transition: all .12s; white-space: nowrap; }
.lsm-fe-tb-chip:hover { border-color: var(--c-bdr2); color: var(--c-tx); }
.lsm-fe-tb-chip.active { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.4); color: #15803d; font-weight: 500; }

.lsm-fe-tb-right { margin-left:auto; display:flex; align-items:center; gap:6px; }
.lsm-fe-tb-ps-label { font-size:12px; color:var(--c-tx2); white-space:nowrap; }
.lsm-fe-tb-ps-sel { font-size:12px; padding:3px 26px 3px 8px; border-radius:6px; border:0.5px solid var(--c-bdr); background-color:var(--c-bg); color:var(--c-tx); cursor:pointer; -webkit-appearance:none; appearance:none;
    /* v3.9.334 — Inherit dropdown arrow style via inheritance — defaults
       to the dark-mode SVG; light mode override below. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' style='opacity:.5'><path d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.lsm-fe-app[data-theme="light"] .lsm-fe-tb-ps-sel,
:root:not([data-theme="dark"]) .lsm-fe-tb-ps-sel {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%2300000a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' style='opacity:.5'><path d='M1 1l4 4 4-4'/></svg>");
}
.lsm-fe-tb-chip--g4l { border-color:#185FA5; color:#185FA5; }
.lsm-fe-tb-chip--g4l.active { background:#185FA5; color:#fff; border-color:#185FA5; }

.lsm-fe-tb-chip--live.active { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.35); color: #991b1b; }

/* Share links */
.lsm-fe-share-links { display: flex; gap: 6px; }
.lsm-fe-share-link {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 10px; border-radius: 8px;
    font-size: 11.5px; font-weight: 500; text-decoration: none;
    border: 0.5px solid var(--c-bdr); background: var(--c-surf2);
    color: var(--c-tx3); transition: all var(--t);
}
.lsm-fe-share-link:hover { background: var(--c-surf); border-color: var(--c-bdr2); color: var(--c-tx); }
.lsm-fe-share-link-vod   { border-color: var(--c-bdr); background: var(--c-surf2); color: var(--c-tx3); }
.lsm-fe-share-link-vod:hover { background: var(--c-surf); border-color: var(--c-bdr2); color: var(--c-tx); }
.lsm-fe-share-link svg { width: 11px; height: 11px; flex-shrink: 0; }
.lsm-fe-lp-card-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; border-radius: 7px; text-decoration: none; font-size: 11px; font-weight: 500; color: #92400e; background: #fef3c7; border: 0.5px solid #fde68a; transition: all var(--t); }
.lsm-fe-lp-card-btn:hover { background: #fbbf24; border-color: #f59e0b; color: #78350f; }
.lsm-fe-lp-card-btn svg { width: 11px; height: 11px; }

/* Hide legacy card layout elements */
.lsm-fe-card-header,
.lsm-fe-card-actions-bar,
.lsm-fe-card-meta,
.lsm-fe-controls { display: none; }

/* Icon buttons */
.lsm-fe-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 0.5px solid var(--c-bdr); background: var(--c-surf); color: var(--c-tx3); cursor: pointer; transition: all var(--t); flex-shrink: 0; }
.lsm-fe-icon-btn svg { width: 12px; height: 12px; }
.lsm-fe-icon-btn:hover  { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.lsm-fe-danger:hover    { background: var(--c-red);  border-color: var(--c-red);  color: #fff; }
.lsm-fe-clickable { cursor: pointer; }

/* ── Buttons ────────────────────────────────────────────────── */
.lsm-fe-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: var(--r);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: all var(--t); white-space: nowrap;
}
.lsm-fe-btn svg { width: 14px; height: 14px; }
.lsm-fe-btn-primary   { background: var(--c-blue); color: #fff; }
.lsm-fe-btn-primary:hover   { background: var(--c-blue-h); }
.lsm-fe-btn-secondary { background: var(--c-surf2); color: var(--c-tx2); border: 1px solid var(--c-bdr); }
.lsm-fe-btn-secondary:hover { background: var(--c-surf3); border-color: var(--c-bdr2); color: var(--c-tx); }

/* v3.10.76 — Explicit ghost-button style. Without this rule, .lsm-fe-btn-ghost
   inherited browser defaults (grey background + thin border) — looked
   unintentional ("graue outline-only Buttons"). Ghost is now: transparent
   until hover, subtle surface fill on hover, no border ever. */
.lsm-fe-btn-ghost {
    background: transparent;
    color: var(--c-tx2);
    border: none;
}
.lsm-fe-btn-ghost:hover {
    background: var(--c-surf2);
    color: var(--c-tx);
}
.lsm-fe-btn-ghost:active {
    background: var(--c-surf3);
}
.lsm-fe-btn-ghost:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Small button variant — tighter padding for toolbars + inline buttons. */
.lsm-fe-btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}
.lsm-fe-btn-sm svg {
    width: 12px;
    height: 12px;
}

/* ── Forms ──────────────────────────────────────────────────── */
/* v3.10.101 — Drawer-Bottleneck-Fix: Single-Column-Layout.
 * Vorher: 2-Spalten-Grid zwang jede neue Sektion in paarweise Planung
 * (ungerade Felder sahen schief aus), schmale Spalten erzwangen Umbrüche.
 * Jetzt: 1 Spalte mit max-width 640px für Readability. col-2 ist no-op
 * (span 2 von 1 = immer noch 1). Form-Section spans 1 (= full). Mobile-
 * Reflow Rule unten ist damit obsolete aber harmless. */
.lsm-fe-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 16px;
    max-width: 640px;
}
.lsm-fe-col-2    { grid-column: span 1; }
.lsm-fe-form-group { display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 1; }
.lsm-fe-form-group label { font-size: 12px; font-weight: 600; color: var(--c-tx2); }
.lsm-fe-hint { font-size: 11px; font-weight: 400; color: var(--c-tx3); }
.lsm-fe-form-section {
    grid-column: span 1;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; margin: 6px -18px 2px;
    background: var(--c-surf2, #f0f3f8);
    border-top: 1px solid var(--c-bdr, #c8d0dc);
    border-bottom: 1px solid var(--c-bdr, #c8d0dc);
    font-size: 12px; font-weight: 700;
    color: var(--c-tx, #0a1020);
    position: relative; z-index: 0;
}
.lsm-fe-form-section svg {
    width: 14px; height: 14px; flex-shrink: 0; opacity: .6;
}
.lsm-fe-form-section-icon {
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--c-blue-s, #dbeafe);
    color: var(--c-blue, #1d4ed8);
}
.lsm-fe-form-section-icon svg { width: 13px; height: 13px; opacity: 1; }
.lsm-fe-form-section-body { display: flex; flex-direction: column; gap: 1px; }
.lsm-fe-form-section-sub { font-size: 10.5px; font-weight: 400; color: var(--c-tx3, #5a6b80); }
.lsm-fe-input {
    width: 100%; padding: 10px 12px;
    background: var(--c-surf); border: 1px solid var(--c-bdr);
    border-radius: var(--r); color: var(--c-tx);
    font-family: inherit; font-size: 13.5px; line-height: 1.45;
    transition: border-color .15s, box-shadow .15s, background .15s; outline: none;
    -webkit-appearance: none; appearance: none;
}
.lsm-fe-input::placeholder { color: var(--c-tx4, #9aa8bc); }
.lsm-fe-input:hover:not(:focus):not([disabled]) { border-color: var(--c-bdr2, #9ca9bc); }
.lsm-fe-input:focus {
    border-color: var(--c-blue, #1d4ed8);
    box-shadow: 0 0 0 3px rgba(29,78,216,.12);
    /* v3.9.367 — was `background: var(--c-surf, #fff)` which fell
       back to white on dark theme when --c-surf got de-scoped (e.g.
       inside Safari's autofill overlay). Now matches the variable
       in both themes; explicit color too so dark-on-light or
       light-on-dark can never collide. */
    background: var(--c-surf);
    color: var(--c-tx);
}
.lsm-fe-input:disabled, .lsm-fe-input[readonly] { background: var(--c-surf2); color: var(--c-tx3); cursor: not-allowed; }

/* v3.9.367 — Safari/WebKit autofill override.
   When Safari autofills an input, it forcibly applies a cream/yellow
   background and dark text via internal !important rules. On dark
   theme this collides with our light text color and makes the field
   unreadable. The standard workaround: paint over the autofill bg
   with a long inset box-shadow (autofill renders the bg via shadow,
   which we can override) and use -webkit-text-fill-color (which
   takes precedence over the user-agent's color rule on autofilled
   inputs).
   Long animation-delay + animation-name trick keeps the override
   active even after autofill state transitions. */
.lsm-fe-input:-webkit-autofill,
.lsm-fe-input:-webkit-autofill:hover,
.lsm-fe-input:-webkit-autofill:focus,
.lsm-fe-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--c-surf) inset !important;
    -webkit-text-fill-color: var(--c-tx) !important;
    caret-color: var(--c-tx);
    transition: background-color 9999s ease-in-out 0s;
}
.lsm-fe-textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
select.lsm-fe-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' style='opacity:.5'><path d='M1.5 1.75L6 6.25l4.5-4.5'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 32px; cursor: pointer;
}
/* v3.9.334 — Light-Mode Override für den Dropdown-Pfeil. Im Light-Mode
   muss er dunkel gestrichen sein damit er Kontrast gegen die helle
   Surface hat. */
.lsm-fe-app[data-theme="light"] select.lsm-fe-input,
:root:not([data-theme="dark"]) select.lsm-fe-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2300000a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' style='opacity:.5'><path d='M1.5 1.75L6 6.25l4.5-4.5'/></svg>");
}
input[type="date"].lsm-fe-input,
input[type="datetime-local"].lsm-fe-input,
input[type="time"].lsm-fe-input { font-variant-numeric: tabular-nums; }

/* Form labels — cleaner spacing + case rules. */
.lsm-fe-form-group > label {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 500; color: var(--c-tx2, #2d3a4a);
    letter-spacing: 0;
}
.lsm-fe-form-group > label .lsm-fe-req { color: var(--c-red, #dc2626); margin-left: 2px; }
.lsm-fe-form-group > small, .lsm-fe-form-group .lsm-fe-help {
    display: block; margin-top: 6px;
    font-size: 11.5px; color: var(--c-tx3, #5a6b80); line-height: 1.5;
}

/* Password input — reveal button group */
.lsm-fe-password-wrap { position: relative; }
.lsm-fe-password-wrap .lsm-fe-input { padding-right: 40px; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .05em; }
.lsm-fe-password-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 6px;
    color: var(--c-tx3); cursor: pointer; transition: background .12s;
}
.lsm-fe-password-toggle:hover { background: var(--c-surf3, #e8ecf2); color: var(--c-tx); }
.lsm-fe-password-toggle svg { width: 14px; height: 14px; }

/* Thumbnail field */
.lsm-fe-thumbnail-field { display: flex; align-items: stretch; }
.lsm-fe-thumbnail-field .lsm-fe-input { flex: 1; border-radius: var(--r) 0 0 var(--r); }
.lsm-fe-upload-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; flex-shrink: 0;
    background: var(--c-surf2); border: 1px solid var(--c-bdr2); border-left: none;
    border-radius: 0; cursor: pointer; color: var(--c-tx3); transition: all var(--t);
}
/* v3.9.227 — multi-button thumbnail field layout. The upload label sits
   in the middle (square corners); the reset button on the right gets
   the rounded end. When only upload is present (no reset in DOM) it
   falls back to rounded end via last-child selector. */
.lsm-fe-thumbnail-field .lsm-fe-upload-btn:last-child {
    border-radius: 0 var(--r) var(--r) 0;
}
.lsm-fe-upload-btn svg { width: 13px; height: 13px; }
.lsm-fe-upload-btn:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
/* Reset button hover — red tint instead of blue to hint "destructive" */
.lsm-fe-thumbnail-reset-btn:hover { background: var(--c-red, #dc2626); border-color: var(--c-red, #dc2626); color: #fff; }
.lsm-fe-upload-progress { margin-top: 5px; display: flex; align-items: center; gap: 9px; }
.lsm-fe-upload-bar-wrap { flex: 1; height: 2px; background: var(--c-surf3); border-radius: 2px; overflow: hidden; }
.lsm-fe-upload-bar { height: 100%; background: var(--c-blue); border-radius: 2px; animation: lsmFePulse 1.2s ease-in-out infinite; }
@keyframes lsmFePulse { 0%,100%{opacity:.4} 50%{opacity:1} }
.lsm-fe-upload-status { font-size: 11.5px; color: var(--c-tx3); }
.lsm-fe-thumbnail-preview { margin-top: 6px; display: flex; align-items: center; gap: 9px; }
.lsm-fe-thumbnail-preview img { width: 72px; height: 40px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--c-bdr); }
.lsm-fe-thumbnail-remove {
    font-size: 11px; font-family: inherit; font-weight: 600;
    color: var(--c-red); background: none; border: 1px solid var(--c-red);
    border-radius: var(--r-sm); padding: 2px 7px; cursor: pointer; transition: all var(--t);
}
.lsm-fe-thumbnail-remove:hover { background: var(--c-red); color: #fff; }

/* ── Ingest blocks ──────────────────────────────────────────── */
.lsm-fe-ingest-block { margin-bottom: 12px; }
.lsm-fe-ingest-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--c-tx3); margin-bottom: 5px;
}
.lsm-fe-url-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--c-surf2); border: 1px solid var(--c-bdr);
    border-radius: var(--r); padding: 8px 12px;
    min-width: 0;
}
.lsm-fe-url-row code {
    flex: 1; min-width: 0;
    font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
    color: var(--c-tx); user-select: all;
    white-space: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin;
}
.lsm-fe-url-row code::-webkit-scrollbar { height: 4px; }
.lsm-fe-url-row code::-webkit-scrollbar-thumb { background: var(--c-bdr2,#9ca9bc); border-radius: 2px; }
.lsm-fe-url-label { font-size: 11px; font-weight: 600; color: var(--c-tx3); white-space: nowrap; }
.lsm-fe-copy-btn {
    flex-shrink: 0; padding: 6px 12px; font-size: 12px; font-family: inherit; font-weight: 500;
    border: 1px solid var(--c-bdr2); background: var(--c-surf); border-radius: var(--r-sm);
    cursor: pointer; color: var(--c-tx2); transition: all .15s; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0;
}
.lsm-fe-copy-btn:hover { background: var(--c-tx); color: var(--c-surf); border-color: var(--c-tx); }
.lsm-fe-copy-btn.is-copied { background: var(--c-green, #16a34a); color: #fff; border-color: var(--c-green, #16a34a); }
.lsm-fe-copy-btn:active { transform: translateY(1px); }

/* ── Section divider ────────────────────────────────────────── */
.lsm-fe-section-divider { height: 1px; background: var(--c-bdr); margin: 14px 0; }

/* ── Result box ─────────────────────────────────────────────── */
.lsm-fe-result-ok {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 14px; border-radius: var(--r);
    background: var(--c-green-s); color: var(--c-green);
    font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.lsm-fe-result-ok svg { width: 18px; height: 18px; flex-shrink: 0; }
.lsm-fe-url-block { margin-bottom: 8px; }

/* ── Drawer overlay ─────────────────────────────────────────── */
.lsm-fe-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.28);
    /* v3.9.213: Raised to 2147483646 (one below max-int). Frontend themes
       like Salient use z-index in the 9999/99999 range for their sticky
       top headers — our drawer was getting painted underneath. Using the
       top of the stacking range guarantees we win against any theme CSS
       short of the literal MAX_SAFE. Admin bar (99999) still stays
       accessible because it's outside our subtree entirely. */
    z-index: 2147483646;
    backdrop-filter: blur(1px);
}
.lsm-fe-modal-overlay.open { display: block; animation: lsmFeFadeIn .15s ease; }

/* v3.10.596/597 — Seiten-Scroll sperren, solange ein Drawer offen ist.
   Als Klasse (nicht als Inline-Style), damit ein darüberliegendes Modal,
   das beim Schließen `body.style.overflow = ''` setzt, die Sperre des noch
   offenen Drawers nicht aufhebt. `!important` schlägt genau diesen
   Inline-Style.

   v3.10.597 — html MUSS mitgesperrt werden. `overflow` auf <body> wird nur
   dann auf den Viewport übertragen, wenn <html> selbst auf `visible` steht.
   Sobald irgendjemand — Theme, Plugin, Seiten-Builder — `overflow-x: hidden`
   oder `overflow-y: scroll` auf <html> setzt (Salient tut das), entfällt
   diese Übertragung: <body> wird zu einem gewöhnlichen Scroll-Container und
   der Viewport scrollt unbeirrt weiter über <html>. Genau das war der Grund,
   warum die Sperre in v3.10.596 wirkungslos blieb. */
html.lsm-fe-scroll-locked,
body.lsm-fe-scroll-locked { overflow: hidden !important; }

/* ── Drawer panel ───────────────────────────────────────────── */
.lsm-fe-modal {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 740px; max-width: 100vw;
    background: var(--c-surf); border-left: 1px solid var(--c-bdr);
    box-shadow: -6px 0 28px rgba(0,0,0,.12);
    display: flex; flex-direction: column; overflow: hidden;
    animation: lsmFeDrawerIn .2s cubic-bezier(.25,.46,.45,.94);
    z-index: 2147483647;
}
.lsm-fe-modal-event { width: 900px; }

/* Admin bar offset — apply to both overlay and drawer */
.admin-bar .lsm-fe-modal-overlay { top: 32px; }
.admin-bar .lsm-fe-modal-event   { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .lsm-fe-modal-overlay { top: 46px; }
    .admin-bar .lsm-fe-modal-event   { top: 46px; }
}

/* ── Drawer: event banner ───────────────────────────────────── */
.lsm-fe-drawer-event-banner {
    padding: 14px 18px;
    background: var(--c-surf); flex-shrink: 0;
    border-bottom: 1px solid var(--c-bdr);
    display: flex; align-items: center; gap: 13px;
}
.lsm-fe-drawer-event-banner-mark {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-tx2, #2d3a4a); background: var(--c-surf, #fff);
    border: 1px solid var(--c-bdr, #c8d0dc);
}
.lsm-fe-drawer-event-banner-mark svg { width: 20px; height: 20px; }
.lsm-fe-drawer-event-banner-main { flex: 1; min-width: 0; }
.lsm-fe-drawer-event-banner-label {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .6px; color: var(--c-tx3);
    border: 1px solid var(--c-bdr); border-radius: 6px; padding: 2px 8px;
    margin-bottom: 7px;
}
.lsm-fe-drawer-event-banner-title {
    font-size: 16px; font-weight: 600; color: var(--c-tx, #0a1020);
    letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 10px;
}
.lsm-fe-drawer-event-banner-close {
    margin-left: auto; flex-shrink: 0;
    width: 34px; height: 34px; border: none; background: none;
    cursor: pointer; font-size: 16px; color: var(--c-tx3, #5a6b80); border-radius: 9px;
    display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s;
}
.lsm-fe-drawer-event-banner-close:hover { background: var(--c-surf2, #f0f3f8); color: var(--c-tx, #0a1020); }

/* v3.10.131 — Drawer Header Quick-Links (Live + VoD Share-Page Direktöffnen) */
.lsm-fe-drawer-quicklink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid var(--c-bdr);
    background: var(--c-surf);
    color: var(--c-tx);
    transition: all 120ms ease;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.lsm-fe-drawer-quicklink:hover {
    transform: translateY(-1px);
    text-decoration: none;
}
.lsm-fe-drawer-quicklink svg { flex-shrink: 0; }
.lsm-fe-drawer-quicklink--live {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-drawer-quicklink--live {
    color: #f87171;
}
.lsm-fe-drawer-quicklink--live:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.65);
}
.lsm-fe-drawer-quicklink--vod {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.10);
    color: #1d4ed8;
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-drawer-quicklink--vod {
    color: #60a5fa;
}
.lsm-fe-drawer-quicklink--vod:hover {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.65);
}

/* ── Drawer: old header hidden ──────────────────────────────── */
.lsm-fe-modal-header { display: none; }

/* ── Drawer: layout (sidenav + body) ────────────────────────── */
.lsm-fe-drawer-layout {
    display: flex; flex-direction: row; flex: 1; overflow: hidden; min-height: 0;
}

/* v3.9.220 — Edit panel sub-tabs. A small pill-row at the top of the
   Edit-panel that filters which form-groups are visible. */
.lsm-fe-edit-subnav,
.lsm-fe-reg-subnav {
    display: flex; gap: 3px; padding: 4px;
    background: var(--c-surf2, #f0f3f8);
    border-radius: var(--r, 8px);
    margin: 0 0 14px;
    overflow-x: auto; scrollbar-width: none;
}
.lsm-fe-edit-subnav::-webkit-scrollbar,
.lsm-fe-reg-subnav::-webkit-scrollbar { display: none; }
.lsm-fe-edit-subtab,
.lsm-fe-reg-subtab {
    flex: none;
    padding: 7px 12px;
    font-family: inherit; font-size: 12px; font-weight: 500;
    color: var(--c-tx3, #5a6b80);
    background: transparent; border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
    text-transform: none; letter-spacing: 0;
}
.lsm-fe-edit-subtab:hover,
.lsm-fe-reg-subtab:hover { color: var(--c-tx, #0a1020); }
.lsm-fe-edit-subtab.act,
.lsm-fe-reg-subtab.act {
    background: var(--c-surf, #fff);
    color: var(--c-tx, #0a1020);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
/* v3.9.403 — Spin keyframe used by confidence-check loader */
@keyframes lsm-share-spin { to { transform: rotate(360deg); } }

.lsm-fe-edit-hide { display: none !important; }

/* v3.9.403 — Simulated-Livestream sub-tab Pro+ badge */
.lsm-fe-edit-subtab--simulated { display: inline-flex; align-items: center; }
.lsm-fe-pro-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .3px;
    color: #4f46e5;
    background: rgba(79, 70, 229, .12);
    border-radius: 4px;
    text-transform: uppercase;
}
.lsm-fe-edit-subtab--simulated.act .lsm-fe-pro-badge {
    background: rgba(79, 70, 229, .18);
}

/* v3.9.403/405 — Confidence-check video preview (Bitmovin player) */
.lsm-fe-confidence-check {
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    position: relative;
}
.lsm-fe-confidence-check > div,
.lsm-fe-confidence-check video {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.lsm-fe-confidence-check-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    gap: 8px;
    text-align: center;
    padding: 0 24px;
}
.lsm-fe-confidence-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--c-tx3, #5a6b80);
    line-height: 1.5;
}

/* v3.9.224 — Guests KPIs + table in the registration panel */
.lsm-fe-reg-guests-wrap { padding: 4px 0; }
.lsm-fe-reg-guests-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px;
}
.lsm-fe-reg-kpi {
    background: var(--c-surf2); border: 1px solid var(--c-bdr);
    border-radius: var(--r, 8px); padding: 10px 12px;
}
.lsm-fe-reg-kpi-lbl {
    font-size: 10.5px; color: var(--c-tx3); text-transform: uppercase; letter-spacing: .06em;
}
.lsm-fe-reg-kpi-val { font-size: 20px; font-weight: 500; margin-top: 2px; color: var(--c-tx); }
.lsm-fe-reg-guests-cta { margin-bottom: 14px; }
.lsm-fe-reg-guests-table {
    width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.lsm-fe-reg-guests-table th {
    text-align: left; padding: 8px 10px; font-weight: 500; font-size: 11px;
    color: var(--c-tx3); text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-reg-guests-table td {
    padding: 10px; border-bottom: 0.5px solid var(--c-bdr);
}
.lsm-fe-reg-guests-more {
    margin-top: 10px; padding: 8px; font-size: 12px; color: var(--c-tx3);
    text-align: center; background: var(--c-surf2); border-radius: 6px;
}
@media (max-width: 600px) {
    .lsm-fe-reg-guests-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* v3.9.217 — Sidenav badges. Badge sits above tab bounds, overflow:visible
   on the tab lets it show. `[hidden] → display:none` is still !important
   because we compete with our own `display:inline-flex` default (same file). */
.lsm-fe-sidenav-badge {
    position: absolute; top: 2px; right: 8px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; line-height: 1;
    background: #D85A30; color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 2px var(--c-surf2, #f0f3f8);
    pointer-events: none;
    text-transform: none; letter-spacing: 0;
}
.lsm-fe-sidenav-badge[hidden] { display: none !important; }
@media (max-width: 640px) {
    .lsm-fe-sidenav-badge { top: 2px; right: 4px; min-width: 16px; height: 16px; font-size: 9px; }
}

/* v3.9.225 — compact ingest card in the Stream-Status tab. Reuses the
   .lsm-ik-url-block styling from the dedicated Ingest tab for visual
   consistency, wrapped in a card with its own label + jump-link. */
.lsm-fe-stream-ingest-card {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r, 8px);
}
.lsm-fe-stream-ingest-hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.lsm-fe-stream-ingest-title {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--c-tx3);
}
.lsm-fe-stream-ingest-jump {
    font-size: 11px; font-weight: 500;
    color: var(--c-tx3); text-decoration: none;
    padding: 3px 8px; border-radius: 4px;
    transition: background .12s, color .12s;
}
.lsm-fe-stream-ingest-jump:hover { background: var(--c-surf2); color: var(--c-tx); }
.lsm-fe-stream-ingest-card .lsm-ik-url-block + .lsm-ik-url-block { margin-top: 8px; }

/* v3.9.330 — RTMPS↔SRT pill-toggle in der Ingest-Card.
   Zwei Pills nebeneinander, der aktive ist gefüllt + accent-bordered.
   Disabled-State (z.B. SRT nicht in Settings konfiguriert) wird
   gemutet dargestellt mit niedrigerer Opacity. */
.lsm-fe-proto-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r, 8px);
}
.lsm-fe-proto-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--r, 8px) - 2px);
    color: var(--c-tx2);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.lsm-fe-proto-pill:hover:not(.is-disabled):not(.is-active) {
    background: var(--c-surf);
    color: var(--c-tx);
}
.lsm-fe-proto-pill.is-active {
    background: var(--c-surf);
    border-color: var(--c-blue, #1d4ed8);
    color: var(--c-tx);
}
.lsm-fe-proto-pill.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.lsm-fe-proto-pill-name {
    font-size: 13px; font-weight: 700;
    letter-spacing: .02em;
}
.lsm-fe-proto-pill-sub {
    font-size: 10.5px;
    color: var(--c-tx3);
    font-weight: 500;
}
.lsm-fe-proto-pill.is-active .lsm-fe-proto-pill-sub { color: var(--c-blue, #1d4ed8); }

/* Pane that holds the URL-blocks for the active protocol. Stays
   in the layout via [hidden]; we use the attribute (not display)
   so toggling between RTMPS and SRT doesn't reflow the card height
   on every click. */
.lsm-fe-proto-pane[hidden] { display: none; }

.lsm-fe-proto-hint {
    font-size: 11.5px;
    color: var(--c-tx3);
    line-height: 1.45;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--c-surf2);
    border-left: 3px solid var(--c-blue, #1d4ed8);
    border-radius: 4px;
}
.lsm-fe-proto-hint code {
    font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    background: var(--c-surf);
    padding: 1px 4px;
    border-radius: 2px;
}
.lsm-fe-proto-hint-warn {
    border-left-color: var(--c-amber, #d97706);
}

/* SRT shows host + port side by side because they're conceptually
   one address (a tuple). Port column is intentionally narrower. */
.lsm-fe-proto-srt-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.lsm-ik-url-proto-sm {
    font-size: 10.5px; font-weight: 600;
    color: var(--c-tx3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
@media (max-width: 520px) {
    .lsm-fe-proto-srt-grid { grid-template-columns: 1fr; }
}

/* v3.9.228 — Ingest-Gate inside the Ingest card: per-event toggle + 24h summary */
.lsm-fe-stream-ingest-gate {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--c-bdr);
}
.lsm-fe-stream-ingest-toggle {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
}
.lsm-fe-stream-ingest-toggle input[type="checkbox"] { display: none; }
.lsm-fe-stream-ingest-toggle .lsm-fe-toggle-switch {
    position: relative;
    width: 36px; height: 20px;
    background: var(--c-surf3, #e8ecf2);
    border-radius: 10px;
    transition: background .15s;
    flex: none;
}
.lsm-fe-stream-ingest-toggle .lsm-fe-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    transition: left .15s;
}
.lsm-fe-stream-ingest-toggle input:checked + .lsm-fe-toggle-switch {
    background: var(--c-green, #16a34a);
}
.lsm-fe-stream-ingest-toggle input:checked + .lsm-fe-toggle-switch::after {
    left: 18px;
}
.lsm-fe-ingest-stats {
    margin-top: 10px;
    font-size: 11.5px;
    min-height: 1em;
}
.lsm-fe-ingest-stats-ok   { color: var(--c-green, #16a34a); }
.lsm-fe-ingest-stats-warn { color: var(--c-amber, #d97706); font-weight: 500; }
/* v3.10.35 — 24/7 Timeline replacement. Replaces the regular timeline
   (with its zoom-controls + visual schedule) with a clear hint when
   continuous_mode is on. Same Aurora/teal/violet palette as the toggle
   to visually reinforce "you are in 24/7 mode". */
.lsm-fe-channel-timeline-247 {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(110deg, rgba(20,160,133,.10) 0%, rgba(167,139,250,.08) 60%, transparent 100%);
    border: 0.5px solid rgba(20,160,133,.28);
    border-radius: var(--c-radius, 12px);
    margin-bottom: 14px;
    align-items: flex-start;
}
.lsm-fe-channel-timeline-247 > svg {
    color: #14a085;
    flex: none;
    margin-top: 1px;
}
.lsm-fe-channel-timeline-247-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--c-tx2, #4b5563);
}
.lsm-fe-channel-timeline-247-text strong {
    display: block;
    color: #14a085;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 14px;
}
[data-theme="dark"] .lsm-fe-channel-timeline-247 {
    background: linear-gradient(110deg, rgba(20,160,133,.14) 0%, rgba(167,139,250,.12) 60%, transparent 100%);
    border-color: rgba(93,202,165,.32);
}
[data-theme="dark"] .lsm-fe-channel-timeline-247 > svg,
[data-theme="dark"] .lsm-fe-channel-timeline-247-text strong {
    color: #5dcaa5;
}

/* v3.10.39 — Livestream-Block UI (Phase 1 MVP).
   Live Ingest section in channel toolbar + livestream subform in editor + 
   livestream srctype-tab styling. */

.lsm-fe-channel-srctype-tab--live.is-active {
    background: #FCEBEB;
    color: #791F1F;
    border-color: #A32D2D;
}

.lsm-fe-channel-live-info {
    background: linear-gradient(110deg, rgba(220,38,38,.06) 0%, rgba(167,139,250,.04) 100%);
    border: 0.5px solid rgba(220,38,38,.18);
    border-radius: 10px;
    padding: 14px;
}
.lsm-fe-channel-live-status-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.lsm-fe-channel-live-icon {
    font-size: 18px;
    line-height: 1;
}
.lsm-fe-channel-live-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #501313;
    margin-bottom: 2px;
}
.lsm-fe-channel-live-desc {
    font-size: 12px;
    color: var(--c-tx2, #4b5563);
}
.lsm-fe-channel-live-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-tx2, #4b5563);
    padding-top: 10px;
    border-top: 0.5px solid rgba(0,0,0,.06);
}

/* Live Ingest section */
.lsm-fe-channel-live-ingest {
    background: var(--c-surf, #fff);
    border: 0.5px solid var(--c-bdr, rgba(0,0,0,.08));
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0 14px;
}
.lsm-fe-channel-live-ingest-header {
    display: flex;
    gap: 12px;
    align-items: center;
}
.lsm-fe-channel-live-ingest-title {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-tx1, #111);
}
.lsm-fe-channel-live-ingest-title svg {
    color: #dc2626;
    flex: none;
}
.lsm-fe-channel-live-ingest-status {
    flex: 1;
    font-size: 12.5px;
}
.lsm-fe-channel-live-ingest-body {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 0.5px solid var(--c-bdr, rgba(0,0,0,.06));
    display: grid;
    gap: 10px;
}
.lsm-fe-live-ingest-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    align-items: center;
}
.lsm-fe-live-ingest-row label {
    font-size: 11.5px;
    color: var(--c-tx2, #4b5563);
    font-weight: 500;
}
.lsm-fe-live-ingest-value {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}
.lsm-fe-live-ingest-value code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    background: var(--c-surf2, #f3f4f6);
    padding: 5px 9px;
    border-radius: 4px;
}
.lsm-fe-live-ingest-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-tx2, #4b5563);
    padding: 10px;
    background: rgba(20,160,133,.06);
    border-left: 3px solid #14a085;
    border-radius: 0 6px 6px 0;
}
.lsm-fe-live-ingest-actions {
    display: flex;
    justify-content: flex-end;
}

/* Block-list badges for livestream blocks */
.lsm-fe-channel-block-livestream-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.lsm-fe-channel-block-livestream-badge--live {
    background: #FCEBEB;
    color: #791F1F;
}
.lsm-fe-channel-block-livestream-badge--live::before {
    content: '●';
    color: #dc2626;
    animation: lsmLivePulse 1.6s infinite;
}
@keyframes lsmLivePulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.lsm-fe-channel-block-livestream-badge--ready {
    background: #f0fdf4;
    color: #15803d;
}
.lsm-fe-channel-block-livestream-badge--offline {
    background: #FAEEDA;
    color: #854F0B;
}
.lsm-fe-channel-block-livestream-badge--lost {
    background: #FCEBEB;
    color: #791F1F;
}


   Layered approach: muted button by default, brighter when in
   confirmation modal, full-saturation when emergency is ACTIVE
   (banner state). Color palette: red for hard_end, amber for fallback. */

.lsm-fe-btn-emergency {
    background: #FCEBEB;
    color: #791F1F;
    border: 0.5px solid #A32D2D;
    transition: background .12s, transform .08s;
}
.lsm-fe-btn-emergency:hover { background: #F7C1C1; }
.lsm-fe-btn-emergency:active { transform: scale(.97); }

/* Active-state banner */
.lsm-fe-emergency-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin: 10px 0 14px;
    border-radius: var(--c-radius, 12px);
    border-left: 4px solid;
}
.lsm-fe-emergency-banner-amber {
    background: linear-gradient(90deg, #FAEEDA 0%, #FAEEDA88 100%);
    border-left-color: #BA7517;
    color: #633806;
}
.lsm-fe-emergency-banner-red {
    background: linear-gradient(90deg, #FCEBEB 0%, #FCEBEB88 100%);
    border-left-color: #A32D2D;
    color: #501313;
}
.lsm-fe-emergency-banner-icon {
    font-size: 22px;
    line-height: 1;
    flex: none;
}
.lsm-fe-emergency-banner-body { flex: 1; min-width: 0; }
.lsm-fe-emergency-banner-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 3px;
    line-height: 1.3;
}
.lsm-fe-emergency-banner-meta {
    font-size: 12px;
    opacity: .82;
    line-height: 1.4;
}
.lsm-fe-emergency-reverse-btn {
    flex: none;
    background: #f0fdf4;
    border: 0.5px solid #16a34a;
    color: #15803d;
    font-weight: 500;
}
.lsm-fe-emergency-reverse-btn:hover { background: #dcfce7; }

/* Modal overlay */
.lsm-fe-emergency-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 20, .65);
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
    animation: lsmEmergFadeIn .18s ease-out;
}
@keyframes lsmEmergFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lsm-fe-emergency-modal {
    background: var(--c-surf, #fff);
    color: var(--c-tx1, #111);
    border-radius: 14px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 24px 80px -10px rgba(0,0,0,.55);
    padding: 22px 24px;
}
.lsm-fe-emergency-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.lsm-fe-emergency-modal-icon {
    font-size: 22px;
    color: #A32D2D;
}
.lsm-fe-emergency-modal h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: var(--c-tx1, #111);
}
.lsm-fe-emergency-modal-step p {
    font-size: 13.5px;
    color: var(--c-tx2, #555);
    line-height: 1.55;
    margin: 0 0 14px;
}
.lsm-fe-emergency-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: filter .12s, transform .08s;
    border: 0.5px solid;
}
.lsm-fe-emergency-option:hover { filter: brightness(.96); }
.lsm-fe-emergency-option:active { transform: scale(.99); }
.lsm-fe-emergency-option:disabled { opacity: .65; cursor: wait; }
.lsm-fe-emergency-option-fallback {
    background: #FAEEDA;
    border-color: #BA7517;
    color: #633806;
}
.lsm-fe-emergency-option-hardend {
    background: #FCEBEB;
    border-color: #A32D2D;
    color: #501313;
}
.lsm-fe-emergency-option-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.lsm-fe-emergency-option-desc {
    font-size: 12.5px;
    opacity: .85;
    line-height: 1.5;
}
.lsm-fe-emergency-modal-step label {
    display: block;
    font-size: 12px;
    color: var(--c-tx2, #555);
    margin: 10px 0 4px;
    font-weight: 500;
}
.lsm-fe-emergency-modal-step input[type="text"],
.lsm-fe-emergency-modal-step input[type="number"],
.lsm-fe-emergency-modal-step textarea {
    width: 100%;
    padding: 8px 10px;
    border: 0.5px solid var(--c-bdr, #d1d5db);
    border-radius: 6px;
    font-size: 13.5px;
    font-family: inherit;
    box-sizing: border-box;
    background: var(--c-surf, #fff);
    color: var(--c-tx1, #111);
}
.lsm-fe-emergency-redirect-row {
    display: flex;
    gap: 8px;
}
.lsm-fe-emergency-redirect-row input[type="text"] { flex: 1; }
.lsm-fe-emergency-redirect-row input[type="number"] { width: 90px; }
.lsm-fe-emergency-viewer-warn {
    background: #FCEBEB;
    color: #791F1F;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    margin: 14px 0 0;
}
.lsm-fe-emergency-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
.lsm-fe-emergency-modal-footer button {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    border: 0.5px solid var(--c-bdr, #d1d5db);
    background: transparent;
    color: var(--c-tx1, #111);
    cursor: pointer;
}
.lsm-fe-emergency-modal-footer button:hover { background: var(--c-surf2, #f4f4f5); }
.lsm-fe-emergency-confirm-btn {
    background: #FCEBEB !important;
    color: #791F1F !important;
    border-color: #A32D2D !important;
    font-weight: 600;
}
.lsm-fe-emergency-confirm-btn:hover { background: #F7C1C1 !important; }


/* v3.10.32 — Channel-Playlist toggles (Sekundengenau + 24/7 Loop).
   Modern iOS-style switch in line with .lsm-fe-stream-ingest-toggle.
   The 24/7 variant uses a teal/violet gradient when active to signal
   the special continuous-mode state vs the standard binary on/off. */
.lsm-fe-channel-toolbar-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: var(--c-tx2, #4b5563);
    padding: 4px 8px;
    border-radius: 8px;
    transition: background .15s;
}
.lsm-fe-channel-toolbar-toggle:hover { background: var(--c-surf2, #f1f5f9); }
.lsm-fe-channel-toolbar-toggle input[type="checkbox"] { display: none; }
.lsm-fe-channel-toolbar-toggle .lsm-fe-channel-toggle-switch {
    position: relative;
    width: 34px; height: 18px;
    background: var(--c-surf3, #e2e8f0);
    border-radius: 9px;
    transition: background .18s;
    flex: none;
}
.lsm-fe-channel-toolbar-toggle .lsm-fe-channel-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    transition: left .18s;
}
.lsm-fe-channel-toolbar-toggle input:checked + .lsm-fe-channel-toggle-switch {
    background: var(--c-blue, #2563eb);
}
.lsm-fe-channel-toolbar-toggle input:checked + .lsm-fe-channel-toggle-switch::after {
    left: 18px;
}
/* 24/7 variant — gradient bar with subtle pulse glow when active */
.lsm-fe-channel-toolbar-toggle.is-247 input:checked + .lsm-fe-channel-toggle-switch {
    background: linear-gradient(90deg, #14a085 0%, #a78bfa 100%);
    box-shadow: 0 0 0 2px rgba(167,139,250,.18);
}
.lsm-fe-channel-toolbar-toggle.is-247 .lsm-fe-channel-toggle-label {
    font-weight: 600;
}
.lsm-fe-channel-toolbar-toggle.is-247 input:checked ~ .lsm-fe-channel-toggle-label {
    background: linear-gradient(90deg, #0d9272 0%, #8b6ee4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* v3.9.229 — Create form: collapsible "Erweitert" section for optional
   custom stream-key. Uses native <details>/<summary> so we don't need
   extra JS for the open/close state. */
.lsm-fe-create-advanced details.lsm-fe-advanced-details {
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r, 8px);
    padding: 0;
    overflow: hidden;
}
.lsm-fe-advanced-summary {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: var(--c-tx);
    list-style: none;
    user-select: none;
}
.lsm-fe-advanced-summary::-webkit-details-marker { display: none; }
.lsm-fe-advanced-chevron {
    width: 14px; height: 14px;
    transition: transform .15s;
    color: var(--c-tx3);
}
details[open] .lsm-fe-advanced-chevron { transform: rotate(-180deg); }
.lsm-fe-advanced-body {
    padding: 6px 14px 14px;
    border-top: 1px solid var(--c-bdr);
    background: var(--c-surf);
}
.lsm-fe-advanced-body label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--c-tx); margin-bottom: 6px;
}
.lsm-fe-streamkey-field { position: relative; }
.lsm-fe-streamkey-field .lsm-fe-input {
    font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 13px;
}
.lsm-fe-streamkey-status {
    display: block; margin-top: 4px;
    font-size: 11.5px; min-height: 1em;
}
.lsm-fe-streamkey-ok    { color: var(--c-green, #16a34a); }
.lsm-fe-streamkey-err   { color: var(--c-red, #dc2626); }
.lsm-fe-streamkey-muted { color: var(--c-tx3); }

/* v3.9.230 — Phase 3: Publisher-IP-Whitelist card in Stream tab */
.lsm-fe-stream-whitelist-card {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r, 8px);
}
.lsm-fe-stream-whitelist-hd {
    margin-bottom: 10px;
}
.lsm-fe-stream-whitelist-title {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--c-tx3);
}
.lsm-fe-stream-whitelist-badge {
    display: inline-block; margin-left: 6px;
    padding: 1px 6px;
    font-size: 9.5px; font-weight: 600;
    color: #7c3aed; background: rgba(124, 58, 237, .1);
    border-radius: 3px;
    letter-spacing: .04em;
}
.lsm-fe-stream-whitelist-sub {
    display: block; margin-top: 4px;
    font-size: 11.5px; color: var(--c-tx3);
}
.lsm-fe-stream-whitelist-input {
    font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px; line-height: 1.5;
    width: 100%;
    resize: vertical; min-height: 90px;
}
.lsm-fe-stream-whitelist-status {
    margin-top: 6px;
    font-size: 11.5px;
    min-height: 1em;
}
.lsm-fe-stream-whitelist-actions {
    display: flex; gap: 8px; align-items: center;
    margin-top: 10px;
}
.lsm-fe-stream-whitelist-actions .lsm-fe-btn-ghost {
    background: transparent;
    color: var(--c-tx3);
    border: 1px solid var(--c-bdr);
    padding: 6px 10px;
    font-size: 11.5px;
    border-radius: 6px;
    cursor: pointer;
}
.lsm-fe-stream-whitelist-actions .lsm-fe-btn-ghost:hover {
    color: var(--c-tx); border-color: var(--c-bdr2, #9ca9bc);
}

/* ============================================================
   Generic collapsible block — v3.9.318
   Used by Whitelist-Card + Transkoder-Varianten in Stream-Tab.
   Built on native <details>/<summary> so we get accessibility
   and keyboard handling for free; chevron-Rotation auf [open].
   ============================================================ */
.lsm-fe-collapsible {
    /* When the wrapper is itself a "card" (e.g. whitelist-card),
       the card styles already provide background/border/radius.
       This rule only kicks in for raw collapsibles like the
       Transkoder-Varianten which sit inside another card. */
}
.lsm-fe-collapsible[open] {
    /* No special open-state styling; chevron rotation below
       carries the visual cue. Body just appears below summary. */
}
.lsm-fe-collapsible-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    list-style: none;          /* hide default disclosure-triangle */
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
}
.lsm-fe-collapsible-hd::-webkit-details-marker { display: none; }
.lsm-fe-collapsible-hd::marker                  { content: ''; }

.lsm-fe-collapsible-chevron {
    flex-shrink: 0;
    color: var(--c-tx3);
    transition: transform .18s ease;
    transform: rotate(0deg);
}
.lsm-fe-collapsible[open] > .lsm-fe-collapsible-hd .lsm-fe-collapsible-chevron {
    transform: rotate(90deg);
}
.lsm-fe-collapsible-hd:hover .lsm-fe-collapsible-chevron {
    color: var(--c-tx2);
}

.lsm-fe-collapsible-hd-text {
    flex: 1;
    min-width: 0;
}

.lsm-fe-collapsible-body {
    padding-top: 10px;
}

/* Whitelist-card has its own padding; the collapsible body should
   not double-pad against the summary above. */
.lsm-fe-stream-whitelist-card.lsm-fe-collapsible[open] > .lsm-fe-collapsible-body {
    padding-top: 12px;
    border-top: 1px solid var(--c-bdr-soft, var(--c-bdr));
    margin-top: 10px;
}
/* Inside whitelist card the title/badge/sub now stack under each
   other inside hd-text instead of beside the chevron. */
.lsm-fe-stream-whitelist-card .lsm-fe-collapsible-hd-text > .lsm-fe-stream-whitelist-sub {
    margin-top: 4px;
}
/* When the whitelist card is collapsed, hide the long sub-text to
   keep the row compact — only show title + badge.  */
.lsm-fe-stream-whitelist-card.lsm-fe-collapsible:not([open]) .lsm-fe-stream-whitelist-sub {
    display: none;
}

/* Transkoder-Varianten variant — small count-pill next to the label */
.lsm-si-variants-count {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--c-tx3);
    background: var(--c-surf2, rgba(0, 0, 0, .05));
    border-radius: 8px;
    vertical-align: 1px;
}
.lsm-si-variants-details {
    margin-top: 12px;
}
/* The summary already carries the .lsm-si-section-lbl styling — no
   extra top-margin needed when section-lbl is the summary itself. */
.lsm-si-variants-details > .lsm-si-section-lbl {
    margin: 0;
}

/* v3.9.227 — Live preview toggle + player in Stream tab */
.lsm-fe-stream-preview-slot { margin-bottom: 14px; }
.lsm-fe-stream-preview-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r, 8px);
    cursor: pointer;
    transition: border-color .15s;
}
.lsm-fe-stream-preview-toggle:hover { border-color: var(--c-bdr2, #9ca9bc); }
.lsm-fe-stream-preview-toggle input[type="checkbox"] { display: none; }
.lsm-fe-stream-preview-toggle .lsm-fe-toggle-switch {
    position: relative;
    width: 36px; height: 20px;
    background: var(--c-surf3, #e8ecf2);
    border-radius: 10px;
    transition: background .15s;
    flex: none;
}
.lsm-fe-stream-preview-toggle .lsm-fe-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    transition: left .15s;
}
.lsm-fe-stream-preview-toggle input:checked + .lsm-fe-toggle-switch {
    background: var(--c-blue, #1d4ed8);
}
.lsm-fe-stream-preview-toggle input:checked + .lsm-fe-toggle-switch::after {
    left: 18px;
}
.lsm-fe-stream-preview-player {
    margin-top: 10px;
    border-radius: var(--r, 8px);
    overflow: hidden;
}

/* v3.9.226 — Embed config section inside the Share panel. Visually
   separated from the link blocks above via a top border + label. */
.lsm-fe-share-embed-cfg {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--c-bdr);
}
.lsm-fe-share-embed-hd { margin-bottom: 12px; }
.lsm-fe-share-embed-title {
    display: block;
    font-size: 13px; font-weight: 600; color: var(--c-tx);
}
.lsm-fe-share-embed-sub {
    display: block; margin-top: 3px;
    font-size: 11.5px; color: var(--c-tx3);
}

/* v3.9.216 — Q&A iframe embed */
.lsm-fe-qa-iframe-wrap {
    display: flex; flex-direction: column;
    height: calc(100vh - 200px); min-height: 500px;
    border: 1px solid var(--c-bdr); border-radius: var(--r);
    overflow: hidden; background: var(--c-surf2);
}
.lsm-fe-qa-iframe-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: var(--c-surf2); border-bottom: 1px solid var(--c-bdr);
    font-size: 12px; font-weight: 500; color: var(--c-tx2);
}
.lsm-fe-qa-iframe { flex: 1; width: 100%; border: none; background: var(--c-surf); }

/* ── Drawer: vertical sidenav ───────────────────────────────── */
/* v3.9.225 — theme defense simplified. Previously we had an aggressive
   reset with `!important` on every button inside the drawer to defend
   against Salient's `border-radius: 200px !important`. User has since
   commented those theme rules out, so we drop the !important flood and
   let normal specificity resolve. Kept a few safe normalizations
   (text-transform, letter-spacing, box-shadow) that most themes push
   via `button {}` base rules — these are harmless even when redundant. */
.lsm-fe-modal button,
.lsm-fe-modal-overlay button,
.lsm-vd-wrap button {
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    line-height: 1.4;
    font-family: inherit;
}
/* v3.9.212 — fixed-width sidenav. Previously collapsed to 60px icons and
   expanded to 168px on hover — irritating moving target + label wasn't
   readable unless you hovered. Now always shown at full 168px so labels
   are permanent and clickable real estate matches perception.
   v3.9.213 — icon stacked above label, centered. Compact column style
   reads like Apple's Finder sidebar or a toolbar. Feels more like a
   modern app and less like a side menu. */
.lsm-fe-drawer-sidenav {
    display: flex; flex-direction: column; align-items: stretch;
    width: 104px; flex-shrink: 0;
    background: var(--c-surf, #fff);
    border-right: 1px solid var(--c-bdr, #c8d0dc);
    padding: 10px 8px; gap: 3px;
    overflow-y: auto;
}
/* Mobile: below 640px the drawer's main axis flips. Sidenav becomes a
   horizontal swipe-scroll strip at the top — compact but still fixed. */
@media (max-width: 640px) {
    .lsm-fe-drawer-layout { flex-direction: column !important; }
    .lsm-fe-drawer-sidenav {
        width: 100%; flex-direction: row; align-items: stretch;
        padding: 4px 6px; gap: 2px; border-right: none;
        border-bottom: 1px solid var(--c-bdr, #c8d0dc);
        overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
    }
}

.lsm-fe-sidenav-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 8px 4px; min-height: 68px;
    font-family: inherit; font-size: 11px; font-weight: 500;
    color: var(--c-tx3, #5a6b80);
    background: transparent; border: none;
    border-radius: 6px;
    cursor: pointer; overflow: visible;
    transition: color .12s, background .12s;
    text-align: center; width: 100%;
    -webkit-appearance: none; appearance: none;
    position: relative;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    line-height: 1.25;
}
@media (max-width: 640px) {
    .lsm-fe-sidenav-tab {
        flex: none; flex-direction: row; gap: 6px;
        width: auto; min-height: 0; height: 38px; padding: 0 10px; font-size: 12px;
    }
    .lsm-fe-sidenav-tab::before { display: none; }
    .lsm-fe-sidenav-tab.active::before { display: none; }
}
.lsm-fe-sidenav-icon {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    transition: background .12s;
}
.lsm-fe-sidenav-icon svg { width: 16px; height: 16px; }
.lsm-fe-sidenav-label {
    font-size: 11px; opacity: 1; line-height: 1.25;
    pointer-events: none;
    max-width: 100%; padding: 0 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word; hyphens: auto;
}
@media (max-width: 640px) {
    .lsm-fe-sidenav-label { font-size: 12px; white-space: nowrap; display: block; }
}

.lsm-fe-sidenav-tab:hover { color: var(--c-tx2, #2d3a4a); background: var(--c-surf2, #f0f3f8); }
.lsm-fe-sidenav-tab:hover .lsm-fe-sidenav-icon { background: var(--c-surf3, #e8ecf2); }

/* v3.10.197 — Flat/Black-White: monochromer Aktiv-Zustand + Akzent-Balken
   (statt blauem Highlight), konsistent zum VOD-Drawer. */
.lsm-fe-sidenav-tab.active { color: var(--c-tx, #0a1020); background: var(--c-surf2, #f0f3f8); }
.lsm-fe-sidenav-tab.active .lsm-fe-sidenav-icon { background: var(--c-surf3, #e8ecf2); color: var(--c-tx, #0a1020); }
.lsm-fe-sidenav-tab.active::before {
    content: ''; display: block; position: absolute; left: -8px; top: 50%;
    transform: translateY(-50%); width: 3px; height: 24px;
    border-radius: 0 3px 3px 0; background: var(--c-tx, #0a1020);
}

/* v3.9.213 — Left-bar active indicator removed for stacked layout (where
   the tab itself is now a pill with background highlight). Left accent
   stripe was designed for horizontal layout, doesn't read well vertically
   when tabs are square pills. */
.lsm-fe-sidenav-tab::before { display: none; }

.lsm-fe-drawer-body { padding: 16px 18px; overflow-y: auto; flex: 1; background: var(--c-surf); color: var(--c-tx); }

/* v3.10.596 — Scroll-Chaining unterbinden.
   Ohne overscroll-behavior gibt Chrome ein Wheel-Event, das am Ende des
   Drawer-Inhalts (oder bei Inhalt ohne Überlauf) ankommt, an den nächsten
   scrollbaren Vorfahren weiter — das ist die Seite hinter dem Overlay.
   Der Nutzer scrollt dann im Drawer und die Seite darunter bewegt sich. */
.lsm-fe-drawer-body,
.lsm-fe-drawer-sidenav,
.lsm-vd-body,
.lsm-vd-nav,
.lsm-fe-cap-editor-body,
.lsm-fe-cover-modal-list,
.lsm-fe-rs-modal { overscroll-behavior: contain; }
.lsm-fe-drawer-panel-hidden { display: none !important; }

/* ── Drawer: sticky save footer ─────────────────────────────── */
.lsm-fe-drawer-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 10px 18px;
    background: var(--c-surf); border-top: 1px solid var(--c-bdr);
    flex-shrink: 0;
}
.lsm-fe-drawer-footer-status {
    flex: 1; font-size: 12px; color: var(--c-blue);
    transition: opacity .3s;
}

#lsmFeDrawerPreviewWrap {
    width: 100%; aspect-ratio: 16/9; background: #090d14;
    border-radius: 6px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.18); font-size: 12.5px;
}

/* ── Live dot ───────────────────────────────────────────────── */
.lsm-fe-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #5a6b80; flex-shrink: 0;
    display: inline-block;
}
.lsm-fe-status-dot.active { background: #dc2626; animation: lsmFeDotPulse 2s ease-in-out infinite; }
@keyframes lsmFeDotPulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)} 50%{box-shadow:0 0 0 4px rgba(220,38,38,0)} }

@keyframes lsmFeDrawerIn { from{transform:translateX(100%)} to{transform:translateX(0)} }

/* v3.9.447 — Drawer forms are ALWAYS single-column regardless of
 * viewport. The drawer is 740-900px max — even on desktop the
 * 2-column form-grid feels cramped, and on tablets between 640-1024px
 * the breakpoint-based fix didn't kick in. User requested all
 * drawer settings always 1-column for consistency.
 * v3.9.451 — Stronger selectors to also match .lsm-fe-modal-event
 * (the wider event-drawer variant) and ensure we win specificity
 * battles against any inline grid-template-columns. The library-
 * picker grid (3 columns) is exempt via :not(.lsm-fe-library-picker-grid). */
.lsm-fe-modal .lsm-fe-form-grid,
.lsm-fe-modal-event .lsm-fe-form-grid,
.lsm-fe-modal-overlay .lsm-fe-form-grid {
    grid-template-columns: 1fr !important;
}
.lsm-fe-modal .lsm-fe-col-2,
.lsm-fe-modal-event .lsm-fe-col-2,
.lsm-fe-modal-overlay .lsm-fe-col-2 {
    grid-column: span 1 !important;
}
/* Inline 2-column grids inside drawer also collapse to 1-col always.
 * Excludes the library-picker grid which keeps its multi-column layout. */
.lsm-fe-modal [style*="grid-template-columns"]:not(.lsm-fe-library-picker-grid),
.lsm-fe-modal-event [style*="grid-template-columns"]:not(.lsm-fe-library-picker-grid),
.lsm-fe-modal-overlay [style*="grid-template-columns"]:not(.lsm-fe-library-picker-grid) {
    grid-template-columns: 1fr !important;
}

/* v3.9.467 — Simulated-Livestream sub-tab: force single-column.
 * The tab has 8+ fields including file pickers, status pills, time/
 * duration combos — single-column flow is far more readable than
 * zig-zag. data-edit-bucket="simulated" is on every group + section
 * header. .lsm-fe-col-2 already gets `grid-column: span 1` — and
 * non-col-2 items are spec'd to also span the full row, so EVERY
 * simulated-bucket item gets its own row. */
html body .lsm-fe-modal-event .lsm-fe-form-grid {
    grid-template-columns: 1fr !important;
}
.lsm-fe-modal-event [data-edit-bucket="simulated"].lsm-fe-form-group,
.lsm-fe-modal-event [data-edit-bucket="simulated"].lsm-fe-form-section {
    grid-column: 1 / -1 !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .lsm-fe-form-grid { grid-template-columns: 1fr; }
    .lsm-fe-col-2     { grid-column: span 1; }
    .lsm-fe-event-list { grid-template-columns: 1fr; }
    .lsm-fe-modal-event { width: 100%; }
    .lsm-fe-app-header { flex-wrap: wrap; }

    /* Tighter drawer body padding on mobile — desktop's 16px 18px
     * eats too much horizontal space when every form column has to
     * stack. */
    .lsm-fe-drawer-body { padding: 12px 14px !important; }

    /* Drawer banner gets less vertical space */
    .lsm-fe-drawer-event-banner { padding: 12px 14px 10px !important; }

    /* Sub-tab navigation: scroll horizontally when too many tabs */
    .lsm-fe-edit-subnav {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .lsm-fe-edit-subnav .lsm-fe-edit-subtab {
        flex-shrink: 0;
    }

    /* Slightly larger touch targets on form inputs */
    .lsm-fe-modal .lsm-fe-input,
    .lsm-fe-modal input[type="text"],
    .lsm-fe-modal input[type="url"],
    .lsm-fe-modal input[type="number"],
    .lsm-fe-modal input[type="datetime-local"],
    .lsm-fe-modal select,
    .lsm-fe-modal textarea {
        min-height: 38px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }
}

/* ── VoD Timeshift (Frontend) ───────────────────────────────── */
.lsm-fe-vod-timeshift-inner {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.lsm-fe-vod-timeshift-field {
    display: flex; flex-direction: column; gap: 4px;
}
.lsm-fe-vod-timeshift-label {
    font-size: 10.5px; font-weight: 600; color: var(--c-tx3);
    text-transform: uppercase; letter-spacing: .4px;
}
.lsm-fe-vod-timeshift-input {
    padding: 5px 8px; font-size: 12.5px;
}
.lsm-fe-vod-timeshift-dur {
    display: flex; align-items: center; gap: 4px;
}
.lsm-fe-vod-timeshift-dur-input {
    width: 52px; padding: 5px 6px; text-align: center;
}
.lsm-fe-vod-timeshift-dur-sep {
    font-size: 11.5px; color: var(--c-tx3); font-weight: 600;
}
.lsm-fe-vod-timeshift-actions {
    display: flex; align-items: center; gap: 6px; padding-bottom: 1px;
}
.lsm-fe-vod-timeshift-btn {
    padding: 5px 12px; font-size: 12px; white-space: nowrap;
}
.lsm-fe-vod-timeshift-btn svg { width: 12px; height: 12px; }
.lsm-fe-vod-timeshift-btn:disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
.lsm-fe-ingest-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--c-tx3); margin-bottom: 5px;
}

/* ── Clips list (Frontend) ──────────────────────────────────── */
.lsm-fe-clips-list { display: flex; flex-direction: column; gap: 6px; }
.lsm-fe-clip-row {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    padding: 8px 10px; background: var(--c-surf2);
    border: 1px solid var(--c-bdr); border-radius: var(--r);
    font-size: 12.5px;
}
.lsm-fe-clip-title { font-weight: 600; color: var(--c-tx); grid-column: 1; }
.lsm-fe-clip-meta  { font-size: 11px; color: var(--c-tx3); grid-column: 1; }
.lsm-fe-clip-actions {
    grid-column: 2; grid-row: 1 / 3;
    display: flex; align-items: center; gap: 4px; align-self: center;
}

/* ── Ingest Key Manager (Frontend) ──────────────────────────── */
.lsm-fe-ingest-key-list { display:flex;flex-direction:column;gap:5px;margin-bottom:10px; }
.lsm-fe-ingest-key-row {
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:7px 10px;background:var(--c-surf2);border:1px solid var(--c-bdr);
    border-radius:var(--r);font-size:12.5px;
}
.lsm-fe-ingest-key-info { display:flex;align-items:center;gap:6px;flex:1;min-width:0; }
.lsm-fe-ingest-key-label { font-weight:600;color:var(--c-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px; }

/* ── Ingest Keys Page ───────────────────────────────────────── */
.lsm-fe-ingest-create-row {
    display: flex; gap: 8px; align-items: center;
}
.lsm-fe-ingest-key-card {
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r);
    margin-bottom: 10px;
    overflow: hidden;
}
.lsm-fe-ingest-key-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: var(--c-surf2);
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-ingest-key-card-name {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.lsm-fe-ingest-key-event-badge {
    font-size: 11px; color: var(--c-blue); font-weight: 500;
    background: var(--c-blue-s); border-radius: var(--r-sm);
    padding: 1px 7px;
}
.lsm-fe-ingest-key-card-urls {
    padding: 8px 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.lsm-fe-ingest-url-row {
    display: flex; align-items: center; gap: 8px;
}
.lsm-fe-ingest-url-proto {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--c-tx3);
    width: 40px; flex-shrink: 0;
}
.lsm-fe-ingest-url-code {
    flex: 1; font-size: 10.5px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--mono); color: var(--c-tx2);
}
.lsm-fe-section-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 14px;
}
.lsm-fe-section-title { font-size: 15px; font-weight: 700; color: var(--c-tx); }
.lsm-fe-section-sub   { font-size: 12px; color: var(--c-tx3); margin-top: 2px; }

.lsm-fe-ingest-key-card-assign {
    display: flex; gap: 8px; align-items: center;
    padding: 8px 14px; border-bottom: 1px solid var(--c-bdr);
    background: var(--c-surf2);
}

/* ── Form Toggle Switch ─────────────────────────────────────── */
.lsm-fe-toggle-label {
    display: flex !important; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    padding: 8px 11px;
    background: var(--c-surf, #f7f9fc);
    border: 1px solid var(--c-bdr, #c8d0dc);
    border-radius: var(--r, 7px);
    transition: border-color .15s, background .15s;
}
.lsm-fe-toggle-label:hover {
    border-color: var(--c-bdr2, #a8b4c4);
    background: var(--c-surf2, #f0f3f8);
}
.lsm-fe-toggle-label input[type="checkbox"] { display: none; }
.lsm-fe-toggle-label-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lsm-fe-toggle-label-title { font-size: 12.5px; font-weight: 600; color: var(--c-tx, #0a1020); }
.lsm-fe-toggle-label-sub   { font-size: 11px; color: var(--c-tx3, #5a6b80); }
.lsm-fe-toggle-switch {
    position: relative; width: 34px; height: 18px; flex-shrink: 0;
    background: var(--c-bdr2); border-radius: 9px;
    transition: background .2s;
}
.lsm-fe-toggle-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.lsm-fe-toggle-label input:checked + .lsm-fe-toggle-switch { background: var(--c-blue); }
.lsm-fe-toggle-label input:checked + .lsm-fe-toggle-switch::after { transform: translateX(16px); }

.lsm-fe-ingest-key-card-rtmps {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--c-surf);
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-ingest-key-card-rtmps .lsm-fe-ingest-url-proto {
    color: var(--c-blue); font-weight: 700;
}
.lsm-fe-ingest-key-card-rtmps .lsm-fe-ingest-url-code {
    font-size: 11px; color: var(--c-tx);
}

/* ── Frontend Analytics Dashboard ─────────────────────────── */
.lsm-fe-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
@media (max-width: 500px) {
    .lsm-fe-analytics-kpis { grid-template-columns: repeat(2, 1fr); }
}
.lsm-fe-analytics-kpi {
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r);
    padding: 10px 12px;
    text-align: center;
}
.lsm-fe-analytics-kpi-live { border-top: 2px solid #1d4ed8; }
.lsm-fe-analytics-kpi-vod  { border-top: 2px solid #9333ea; }
.lsm-fe-analytics-kpi-val {
    font-size: 22px; font-weight: 800;
    color: var(--c-tx); line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-analytics-kpi-label {
    font-size: 10.5px; color: var(--c-tx3);
    font-weight: 500; margin-top: 3px;
    text-transform: uppercase; letter-spacing: .04em;
}
.lsm-fe-analytics-card {
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r);
    overflow: hidden;
}
.lsm-fe-analytics-card-head {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--c-surf2);
    border-bottom: 1px solid var(--c-bdr);
    font-size: 12.5px; font-weight: 700;
    color: var(--c-tx);
}
.lsm-fe-analytics-chart {
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.lsm-fe-analytics-bar-row {
    display: flex; align-items: center; gap: 8px;
}
.lsm-fe-analytics-bar-label {
    width: 110px; flex-shrink: 0;
    font-size: 11.5px; color: var(--c-tx2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lsm-fe-analytics-bar-track {
    flex: 1; height: 14px;
    background: var(--c-surf2);
    border-radius: 3px; overflow: hidden;
    display: flex; gap: 1px;
}
.lsm-fe-analytics-bar { height: 100%; border-radius: 2px; }
.lsm-fe-bar-live { background: #1d4ed8; }
.lsm-fe-bar-vod  { background: #9333ea; }
.lsm-fe-analytics-bar-val {
    width: 36px; flex-shrink: 0;
    font-size: 11px; font-weight: 600;
    color: var(--c-tx); text-align: right;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-analytics-table {
    width: 100%; border-collapse: collapse;
}
.lsm-fe-analytics-table th,
.lsm-fe-analytics-table td {
    padding: 7px 10px;
    font-size: 12px;
    border-bottom: 1px solid var(--c-bdr);
    color: var(--c-tx2);
}
.lsm-fe-analytics-table th {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--c-tx3); background: var(--c-surf2);
}
.lsm-fe-analytics-table tbody tr:last-child td { border-bottom: none; }

/* ── Timeline ───────────────────────────────────────────────── */
.lsm-fe-timeline-wrap {
    padding: 16px 16px 8px;
    min-height: 90px;
}
.lsm-fe-timeline-loading,
.lsm-fe-timeline-empty,
.lsm-fe-timeline-err {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 80px; font-size: 12.5px;
    color: var(--c-tx3); text-align: center; gap: 4px;
}
.lsm-fe-timeline-err { color: #dc2626; }
.lsm-fe-timeline-empty small { font-size: 11px; opacity: .7; }
.lsm-fe-timeline-ranges {
    display: flex; gap: 3px;
}
.lsm-fe-range-btn {
    padding: 3px 9px; font-size: 10.5px; font-weight: 600;
    border: 1px solid var(--c-bdr); border-radius: var(--r-sm);
    background: transparent; color: var(--c-tx3);
    cursor: pointer; transition: all .15s; line-height: 1.4;
}
.lsm-fe-range-btn:hover { background: var(--c-surf2); color: var(--c-tx); }
.lsm-fe-range-btn.active {
    background: var(--c-blue); border-color: var(--c-blue); color: #fff;
}

/* Tooltip (fixed, body-level) */
.lsm-fe-timeline-tooltip {
    position: fixed; z-index: 9999;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 11.5px;
    color: var(--c-tx);
    box-shadow: 0 12px 32px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.1);
    pointer-events: none;
    display: none;
    min-width: 160px;
    max-width: 230px;
    backdrop-filter: blur(8px);
}
.lsm-fe-tt-date {
    font-weight: 700; font-size: 11px;
    color: var(--c-tx3); margin-bottom: 7px;
    letter-spacing: .02em;
}
.lsm-fe-tt-row {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px; font-size: 11.5px;
}
.lsm-fe-tt-row span:nth-child(2) { flex: 1; color: var(--c-tx2); }
.lsm-fe-tt-row strong { font-weight: 700; color: var(--c-tx); font-size: 12px; }
.lsm-fe-tt-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.lsm-fe-tt-total {
    font-size: 11px; color: var(--c-tx3); margin-top: 2px;
    padding-top: 6px; border-top: 1px solid var(--c-bdr);
}
.lsm-fe-tt-total strong { color: var(--c-tx); }
.lsm-fe-tt-divider {
    height: 1px; background: var(--c-bdr);
    margin: 8px 0 6px;
}
.lsm-fe-tt-event {
    display: flex; justify-content: space-between;
    align-items: center; gap: 8px; margin-bottom: 3px;
    font-size: 11px;
}
.lsm-fe-tt-ev-title {
    color: var(--c-tx2); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.lsm-fe-tt-ev-vals {
    display: flex; gap: 4px; font-weight: 600;
    font-size: 10.5px; flex-shrink: 0;
}

/* ── Sessions Table ─────────────────────────────────────────── */
.lsm-fe-sessions-table {
    width: 100%;
    font-size: 12px;
}
.lsm-fe-sessions-table thead tr {
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-sessions-table thead th {
    padding: 8px 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--c-tx3);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.lsm-fe-sessions-table tbody tr {
    border-bottom: 1px solid var(--c-bdr);
    transition: background .1s;
}
.lsm-fe-sessions-table tbody tr:last-child { border-bottom: none; }
.lsm-fe-sessions-table tbody tr:hover { background: var(--c-surf2); }
.lsm-fe-sessions-table td {
    padding: 7px 8px;
    vertical-align: middle;
}

/* ── Event Filter Chips ──────────────────────────────────────── */
#lsmFeEventFilter {
    border-top: 1px solid var(--c-bdr);
    padding: 10px 16px 12px;
}
.lsm-fe-filter-chip {
    padding: 3px 10px; font-size: 11px; font-weight: 500;
    border: 1px solid var(--c-bdr); border-radius: 20px;
    background: transparent; color: var(--c-tx3);
    cursor: pointer; transition: all .15s; white-space: nowrap;
    font-family: inherit;
}
.lsm-fe-filter-chip:hover { background: var(--c-surf2); color: var(--c-tx); border-color: var(--c-bdr2); }
.lsm-fe-filter-chip.active {
    background: var(--c-blue); border-color: var(--c-blue);
    color: #fff; font-weight: 600;
}

/* ── Ingest Key Banner ───────────────────────────────────────── */
.lsm-fe-ingest-key-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; border-radius: var(--r);
    margin-bottom: 14px; font-size: 12.5px;
}
.lsm-fe-ingest-key-banner--ok {
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.25);
    color: #16a34a;
}
.lsm-fe-ingest-key-banner--warn {
    background: rgba(234,179,8,.08);
    border: 1px solid rgba(234,179,8,.3);
    color: #92400e;
}
.lsm-fe-ingest-key-banner-icon { flex-shrink: 0; margin-top: 1px; opacity: .8; }
.lsm-fe-ingest-key-banner-title { font-weight: 600; line-height: 1.4; }
.lsm-fe-ingest-key-banner-sub {
    font-size: 11.5px; margin-top: 3px;
    color: var(--c-tx3); font-weight: 400;
}

/* ── Share Page Designer ─────────────────────────────────────── */
.lsm-fe-designer-wrap {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    padding: 0;
    align-items: start;
    width: 100%;
    min-width: 0;
}
@media (max-width: 800px) {
.lsm-fe-designer-wrap { grid-template-columns: 1fr; }
}
.lsm-fe-designer-sidebar {
    display: flex; flex-direction: column; gap: 0;
    min-width: 0;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r);
    padding: 16px;
}
.lsm-fe-designer-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-designer-section:first-child { padding-top: 0; }
.lsm-fe-designer-section:last-child { border-bottom: none; padding-bottom: 0; }
.lsm-fe-designer-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--c-tx3); margin-bottom: 10px;
}
.lsm-fe-designer-label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--c-tx2); margin-bottom: 8px;
}
.lsm-fe-designer-input { font-size: 12.5px !important; }
.lsm-fe-designer-layout-btns {
    display: flex; gap: 8px;
}
.lsm-fe-layout-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 8px 6px; border: 1.5px solid var(--c-bdr);
    border-radius: var(--r); background: transparent; cursor: pointer;
    font-size: 10.5px; color: var(--c-tx3); font-family: inherit;
    transition: all .15s;
}
.lsm-fe-layout-btn svg { width: 32px; height: 20px; color: var(--c-tx3); }
.lsm-fe-layout-btn:hover { border-color: var(--c-blue); color: var(--c-tx); }
.lsm-fe-layout-btn.active { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-s); }
.lsm-fe-designer-check {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--c-tx2); cursor: pointer;
}
.lsm-fe-designer-colors-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.lsm-fe-designer-color-label {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; font-size: 10px; color: var(--c-tx3); text-align: center;
}
.lsm-fe-color-input {
    width: 36px; height: 36px; border-radius: 8px;
    border: 2px solid var(--c-bdr); cursor: pointer;
    padding: 2px; background: transparent;
}
.lsm-fe-designer-range { width: 100%; accent-color: var(--c-blue); }
/* Preview */
.lsm-fe-designer-preview-wrap {
    min-width: 0;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r);
    padding: 16px;
}
.lsm-fe-designer-preview-label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--c-tx3); margin-bottom: 10px;
}
.lsm-fe-designer-preview {
    border: 1px solid var(--c-bdr); border-radius: 10px;
    overflow: hidden; background: #0f1117; color: #e6edf3;
    font-family: inherit;
}
.lsm-ds-prev-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: #1a1f2e;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.lsm-ds-prev-logo img { height: 22px; width: auto; object-fit: contain; }
.lsm-ds-prev-site { font-size: 12px; font-weight: 600; }
.lsm-ds-prev-badge {
    font-size: 9.5px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; background: rgba(37,99,235,.18); color: #3b82f6;
}
.lsm-ds-prev-player {
    padding: 12px; background: rgba(0,0,0,.3);
}
.lsm-ds-prev-player svg { width: 100%; height: auto; }
.lsm-ds-prev-info { padding: 12px 14px 14px; }
.lsm-ds-prev-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.lsm-ds-prev-desc  { font-size: 11px; opacity: .5; }

/* ── Designer enable toggle ──────────────────────────────────── */
.lsm-fe-toggle-wrap {
    position: relative; display: inline-block;
    width: 42px; height: 24px; cursor: pointer; flex-shrink: 0;
}
.lsm-fe-toggle-input {
    opacity: 0; width: 0; height: 0; position: absolute;
}
.lsm-fe-toggle-slider {
    position: absolute; inset: 0;
    background: var(--c-bdr2); border-radius: 24px;
    transition: background .2s;
}
.lsm-fe-toggle-slider::after {
    content: ''; position: absolute;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; top: 3px; left: 3px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.lsm-fe-toggle-input:checked + .lsm-fe-toggle-slider {
    background: var(--c-blue);
}
.lsm-fe-toggle-input:checked + .lsm-fe-toggle-slider::after {
    transform: translateX(18px);
}
.lsm-fe-designer-enable-section {
    background: var(--c-surf2);
    margin: -16px -16px 0;
    padding: 14px 16px !important;
    border-radius: var(--r) var(--r) 0 0;
}

/* ── Q&A Frontend Panel ──────────────────────────────────────── */
.lsm-fe-qa-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.lsm-fe-qa-event-select-wrap {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px;
}
.lsm-fe-qa-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.lsm-fe-qa-list { display: flex; flex-direction: column; gap: 8px; }
.lsm-fe-qa-card {
    background: var(--c-surf); border: 1px solid var(--c-bdr);
    border-radius: var(--r); padding: 14px 16px;
    transition: border-color .15s;
}
.lsm-fe-qa-pinned { border-color: var(--c-amber); background: var(--c-amber-s); }
.lsm-fe-qa-answered { opacity: .7; }
.lsm-fe-qa-rejected { opacity: .4; }
.lsm-fe-qa-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--c-tx3); margin-bottom: 6px;
}
.lsm-fe-qa-status-badge {
    padding: 1px 7px; border-radius: 10px;
    font-size: 10px; font-weight: 600;
}
.lsm-fe-qa-pin-badge { font-size: 12px; }
.lsm-fe-qa-question {
    font-size: 13.5px; font-weight: 500;
    color: var(--c-tx); margin-bottom: 8px; line-height: 1.5;
}
.lsm-fe-qa-answer {
    background: var(--c-green-s); border-left: 3px solid var(--c-green);
    padding: 8px 12px; border-radius: 4px;
    font-size: 13px; color: var(--c-tx2); margin-bottom: 8px;
}
.lsm-fe-qa-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lsm-fe-qa-btn {
    padding: 4px 11px; border-radius: 6px; border: 1px solid var(--c-bdr);
    background: transparent; color: var(--c-tx3); font-size: 11.5px;
    cursor: pointer; font-family: inherit; transition: all .15s;
    display: inline-flex; align-items: center; gap: 5px; line-height: 1.3;
}
.lsm-fe-qa-btn svg { stroke: currentColor; fill: none; flex-shrink: 0; }
.lsm-fe-qa-btn:hover { background: var(--c-surf2); color: var(--c-tx); }
.lsm-fe-qa-btn-approve { color: var(--c-blue); border-color: rgba(37,99,235,.25); }
.lsm-fe-qa-btn-approve:hover { background: var(--c-blue-s); }
.lsm-fe-qa-btn-answer  { color: var(--c-green); border-color: rgba(22,163,74,.25); }
.lsm-fe-qa-btn-answer:hover  { background: var(--c-green-s); }
.lsm-fe-qa-btn-reject  { color: var(--c-red); border-color: rgba(220,38,38,.25); }
.lsm-fe-qa-btn-reject:hover  { background: var(--c-red-s); }
.lsm-fe-qa-btn-delete  { color: var(--c-red); border-color: transparent; }

/* ============================================================
   STREAM INFO + AUFNAHMEN — Frontend Drawer
   Modern light-theme design using --c-* variables
   ============================================================ */

/* ── Loading / Empty states ──────────────────────────────────── */
.lsm-stream-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 36px 16px;
    font-size: 13px; color: var(--c-tx3);
}
.lsm-stream-loading::before {
    content: ''; width: 16px; height: 16px; flex-shrink: 0;
    border: 2px solid var(--c-bdr); border-top-color: var(--c-blue);
    border-radius: 50%; animation: lsm-fe-spin .7s linear infinite;
}
@keyframes lsm-fe-spin { to { transform: rotate(360deg); } }

.lsm-stream-empty {
    padding: 36px 16px; text-align: center;
    font-size: 13px; color: var(--c-tx3); line-height: 1.7;
}
.lsm-stream-empty span { font-size: 11.5px; color: var(--c-tx4); }

/* ── Stream Info Tab ─────────────────────────────────────────── */
.lsm-si-status-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: var(--c-surf); border: 1px solid var(--c-bdr);
    border-radius: 10px; margin-bottom: 14px;
    flex-wrap: wrap;
}
/* v3.10.573 — Aufnahme-Status-Badge in der Stream-Status-Karte */
.lsm-si-dvrbadge-wrap { display: inline-flex; align-items: center; }
.lsm-si-dvrbadge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1;
    background: var(--c-surf2, #f0f3f8); color: var(--c-tx2, #2d3a4a);
    border: 1px solid var(--c-bdr, rgba(0,0,0,.08));
}
.lsm-si-dvrbadge.is-off { color: var(--c-tx3, #6b7075); }
.lsm-si-dvrbadge.is-rec {
    background: #fdeceb; color: #d3382c; border-color: #f3c3bf;
}
.lsm-si-dvrbadge.is-rec i {
    width: 7px; height: 7px; border-radius: 50%; background: #d3382c;
    display: inline-block; animation: lsmDvrRecPulse 1.6s ease-in-out infinite;
}
.lsm-si-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    transition: background .3s;
}
.lsm-si-dot-live {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,.2);
    animation: lsm-fe-pulse 1.6s ease-in-out infinite;
}
.lsm-si-dot-offline { background: var(--c-bdr2); }
@keyframes lsm-fe-pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(22,163,74,.08); }
}
.lsm-si-status-lbl { font-size: 13px; font-weight: 600; }
.lsm-si-live    { color: #15803d; }
.lsm-si-offline { color: var(--c-tx3); }
.lsm-si-key { margin-left: auto; }
.lsm-si-key code {
    font-size: 11px; color: var(--c-tx4);
    background: var(--c-surf2); padding: 2px 7px; border-radius: 5px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Stream info card */
.lsm-si-card {
    background: var(--c-surf); border: 1px solid var(--c-bdr);
    border-radius: 10px; padding: 0; margin-bottom: 12px;
    overflow: hidden;
}
.lsm-si-grid { display: flex; flex-direction: column; }
.lsm-si-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 9px 14px;
    border-bottom: 1px solid var(--c-bdr); font-size: 12.5px;
}
.lsm-si-row:last-child { border-bottom: none; }
.lsm-si-lbl {
    color: var(--c-tx3); font-weight: 600;
    text-transform: uppercase; font-size: 10px; letter-spacing: .05em;
    white-space: nowrap; min-width: 80px;
}
.lsm-si-val { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lsm-si-val code {
    font-size: 12px; color: var(--c-tx);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: var(--c-surf2); padding: 1px 6px; border-radius: 4px;
    max-width: 220px; display: inline-block;
    overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}

/* Variants section */
.lsm-si-section-lbl {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--c-tx3);
    padding: 10px 14px 6px;
    border-top: 1px solid var(--c-bdr);
    background: var(--c-surf2);
}
.lsm-si-variants { display: flex; flex-direction: column; gap: 0; }
.lsm-si-variant {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; font-size: 12.5px;
    border-top: 1px solid var(--c-bdr);
    transition: background .1s;
}
.lsm-si-variant:hover { background: var(--c-surf2); }
.lsm-si-variant-name {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--c-blue); font-weight: 700; font-size: 12px;
    min-width: 90px;
    background: var(--c-blue-s); padding: 2px 8px; border-radius: 5px;
    text-align: center;
}
.lsm-si-variant-res  { color: var(--c-tx2); flex: 1; font-size: 12px; }
.lsm-si-variant-bps  {
    color: var(--c-tx3); font-size: 11.5px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.lsm-si-updated {
    font-size: 10.5px; color: var(--c-tx4); text-align: right;
    padding: 6px 0 2px; display: flex; align-items: center; gap: 4px; justify-content: flex-end;
}
.lsm-si-updated::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: #16a34a; display: inline-block;
    animation: lsm-fe-pulse 2s ease-in-out infinite;
}

/* ── Aufnahmen Tab ───────────────────────────────────────────── */
/* Header */
.lsm-rec-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; gap: 10px; flex-wrap: wrap;
}
.lsm-rec-header-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--c-tx3);
}

/* Current active VOD banner */
.lsm-rec-current-vod {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0; border-radius: 8px;
    padding: 8px 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.lsm-rec-vod-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 100px;
    background: #16a34a; color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    flex-shrink: 0; white-space: nowrap;
}
.lsm-rec-vod-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.8);
    animation: lsm-fe-pulse 1.5s ease-in-out infinite;
}
.lsm-rec-vod-url {
    font-size: 10.5px; color: #166534;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    word-break: break-all; flex: 1; min-width: 0;
}

/* Recording items list */
.lsm-rec-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.lsm-rec-item {
    background: var(--c-surf); border: 1px solid var(--c-bdr);
    border-radius: 10px; padding: 12px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.lsm-rec-item:hover { border-color: var(--c-bdr2); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.lsm-rec-item-active {
    border-color: #86efac;
    background: linear-gradient(135deg, #f0fdf4, #fafffe);
    box-shadow: 0 1px 4px rgba(22,163,74,.12);
}

/* Item header */
.lsm-rec-item-hd {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; flex-wrap: wrap;
}
.lsm-rec-item-title {
    font-size: 13px; font-weight: 600; color: var(--c-tx);
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lsm-rec-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lsm-rec-status-lbl { font-size: 11.5px; color: var(--c-tx3); flex-shrink: 0; }

.lsm-rec-active-badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    border-radius: 100px; background: #dcfce7; color: #15803d;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
}

/* Meta row */
.lsm-rec-meta {
    display: flex; gap: 12px; font-size: 11.5px; color: var(--c-tx3);
    margin-bottom: 8px; flex-wrap: wrap; align-items: center;
}
.lsm-rec-meta span::before {
    content: ''; display: inline-block; width: 3px; height: 3px;
    border-radius: 50%; background: var(--c-bdr2); margin-right: 5px;
    vertical-align: middle;
}
.lsm-rec-meta span:first-child::before { display: none; }

/* Progress bars */
.lsm-rec-progress {
    height: 4px; background: var(--c-surf2); border-radius: 2px;
    overflow: hidden; margin: 6px 0 3px;
}
.lsm-rec-progress-fill {
    height: 100%; background: var(--c-blue); border-radius: 2px;
    transition: width .4s ease;
}
.lsm-rec-prog-fill-orange { background: var(--c-amber); }
.lsm-rec-prog-lbl { font-size: 11px; color: var(--c-tx3); margin-bottom: 6px; }

/* Error */
.lsm-rec-error {
    font-size: 11.5px; color: var(--c-red);
    background: var(--c-red-s); border-radius: 5px;
    padding: 5px 9px; margin: 4px 0; border: 1px solid rgba(220,38,38,.15);
}

/* URL display */
.lsm-rec-url {
    margin: 6px 0; padding: 7px 10px;
    background: var(--c-surf2); border: 1px solid var(--c-bdr);
    border-radius: 6px; overflow: hidden;
}
.lsm-rec-url code {
    font-size: 10.5px; color: var(--c-tx2);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    word-break: break-all; display: block;
}

/* Action buttons */
.lsm-rec-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.lsm-rec-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 13px; border-radius: 7px;
    font-size: 12.5px; font-weight: 500; font-family: inherit;
    cursor: pointer; border: none; text-decoration: none;
    transition: all .12s; line-height: 1.3; white-space: nowrap;
}
.lsm-rec-btn:disabled { opacity: .5; cursor: not-allowed; }
.lsm-rec-btn-primary  { background: var(--c-blue); color: #fff; }
.lsm-rec-btn-primary:hover:not(:disabled) { background: var(--c-blue-h); box-shadow: 0 2px 8px rgba(29,78,216,.25); }
.lsm-rec-btn-ghost {
    background: var(--c-surf); color: var(--c-tx2);
    border: 1px solid var(--c-bdr);
}
.lsm-rec-btn-ghost:hover:not(:disabled) { background: var(--c-surf2); color: var(--c-tx); border-color: var(--c-bdr2); }

/* Footer */
.lsm-rec-footer {
    padding-top: 10px; border-top: 1px solid var(--c-bdr);
    display: flex; justify-content: flex-end;
}

/* Copy button feedback */
.lsm-rec-copy-btn { cursor: pointer; }

/* Empty state specifically for recordings tab */
.lsm-recordings-empty {
    padding: 28px 16px; text-align: center;
    font-size: 13px; color: var(--c-tx3); line-height: 1.7;
    background: var(--c-surf2); border: 1px dashed var(--c-bdr);
    border-radius: 8px; margin: 8px 0;
}

/* ── VOD Toggle switch ────────────────────────────────────────── */
.lsm-rec-vod-master,
.lsm-fe-rec-vod-toggle {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.lsm-rec-vod-label {
    font-size: 12px; font-weight: 600; color: var(--c-tx2);
}
.lsm-rec-toggle {
    position: relative; display: inline-block;
    width: 38px; height: 21px; cursor: pointer; flex-shrink: 0;
}
.lsm-rec-toggle input { display: none; }
.lsm-rec-toggle-track {
    position: absolute; inset: 0;
    background: var(--c-bdr2); border-radius: 100px; transition: background .18s;
}
.lsm-rec-toggle-track::after {
    content: ''; position: absolute;
    width: 15px; height: 15px; background: #fff;
    border-radius: 50%; top: 3px; left: 3px;
    transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.lsm-rec-toggle input:checked + .lsm-rec-toggle-track { background: var(--c-green); }
.lsm-rec-toggle input:checked + .lsm-rec-toggle-track::after { left: 20px; }

/* ── Recording thumbnails (frontend) ────────────────────────── */
.lsm-rec-item-has-thumb { padding: 0 !important; overflow: hidden; }
.lsm-fe-rec-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    min-height: 88px;
}
.lsm-fe-rec-thumb {
    width: 96px; flex-shrink: 0;
    background: var(--c-surf2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    border-radius: 10px 0 0 10px;
}
.lsm-fe-rec-thumb-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.lsm-fe-rec-thumb-placeholder {
    width: 100%; height: 100%; min-height: 88px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-tx3);
}
.lsm-fe-rec-thumb-placeholder svg { width: 28px; height: 28px; opacity: .35; }
.lsm-fe-rec-info { padding: 10px 13px; min-width: 0; }

/* Host VOD toggle row */
.lsm-fe-rec-vod-toggle {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* Live badge — Nimble-aware */
.lsm-fe-status-nimble-live {
    background: #dc2626 !important;
    color: #fff !important;
    font-weight: 700 !important;
    animation: lsm-fe-live-pulse 2s ease-in-out infinite;
}
@keyframes lsm-fe-live-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
    50%      { box-shadow: 0 0 0 4px rgba(220,38,38,.15); }
}

/* ── Preview Mode Toggle (Live / VoD) ───────────────────────── */
#lsmFePreviewModeBar {
    gap: 6px; align-items: center;
    flex-wrap: wrap; margin-top: 10px;
}
.lsm-fe-preview-mode-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 13px; border-radius: 100px;
    font-size: 12px; font-weight: 600; font-family: inherit;
    cursor: pointer; border: 1.5px solid var(--c-bdr);
    background: var(--c-surf2); color: var(--c-tx3);
    transition: all .12s; line-height: 1.3;
}
.lsm-fe-preview-mode-btn:hover:not(:disabled) {
    border-color: var(--c-bdr2); color: var(--c-tx2);
}
.lsm-fe-preview-mode-btn-active {
    background: var(--c-blue); color: #fff !important;
    border-color: var(--c-blue) !important;
}
.lsm-fe-preview-mode-btn:disabled {
    opacity: .38; cursor: not-allowed;
}

/* ── Meine Videos ───────────────────────────────────────────── */
.lsm-mv-topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.lsm-mv-title{font-size:18px;font-weight:700;color:var(--c-tx);margin-bottom:2px}
.lsm-mv-sub{font-size:12px;color:var(--c-tx3)}
.lsm-mv-statline{font-size:12.5px;color:var(--c-tx3);line-height:1.5}
.lsm-mv-quota-warn{display:flex;align-items:center;gap:9px;margin:0 0 16px;background:#fbf1de;border:1px solid #eccf95;color:#9a5b12;border-radius:9px;padding:9px 12px;font-size:12px;font-weight:500}
.lsm-mv-quota-warn.crit{background:#fbe6e6;border-color:#f0b4b4;color:#b42318}
.lsm-mv-qw-ic{flex:0 0 auto}
.lsm-mv-qw-link{margin-left:auto;background:transparent;border:0;color:inherit;font-weight:600;font-size:11.5px;cursor:pointer;text-decoration:underline;font-family:inherit;padding:0;flex:0 0 auto}
.lsm-fe-app[data-theme="dark"] .lsm-mv-quota-warn{background:#2a2011;border-color:#4a3a1c;color:#e0a94a}
.lsm-fe-app[data-theme="dark"] .lsm-mv-quota-warn.crit{background:#2a1414;border-color:#4a1f1f;color:#f0a0a0}
.lsm-mv-upload-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--c-blue);color:#fff;border:none;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background var(--t)}
.lsm-mv-upload-btn:hover{background:var(--c-blue-h)}
.lsm-mv-stor{background:var(--c-surf2);border:1px solid var(--c-bdr);border-radius:var(--r);padding:10px 14px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.lsm-mv-stor-lbl{font-size:11px;font-weight:600;color:var(--c-tx3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.lsm-mv-stor-track{flex:1;height:4px;background:var(--c-bdr);border-radius:2px;overflow:hidden}
.lsm-mv-stor-fill{height:100%;border-radius:2px;transition:width .4s}
.lsm-mv-stor-val{font-size:12px;color:var(--c-tx3);white-space:nowrap}

/* v3.9.211 — segmented storage strip (Variant A): one bar, DVR + Upload segments */
.lsm-mv-stor2{background:var(--c-surf2);border:1px solid var(--c-bdr);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.lsm-mv-stor2-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin-bottom:8px;color:var(--c-tx3)}
.lsm-mv-stor2-used b{font-weight:600;font-size:13px;color:var(--c-tx)}
.lsm-mv-stor2-bar{height:8px;background:var(--c-bdr);border-radius:4px;overflow:hidden;display:flex}
.lsm-mv-stor2-seg-dvr{background:#D85A30;transition:width .4s}
.lsm-mv-stor2-seg-upl{background:#378ADD;transition:width .4s}
/* v3.10.95 — Audio segment uses LSM pink to distinguish from DVR (orange)
   and Upload (blue). Pink works in both light + dark themes. */
.lsm-mv-stor2-seg-aud{background:#ec4899;transition:width .4s}
.lsm-mv-stor2-legend{display:flex;gap:14px;margin-top:9px;font-size:11px;color:var(--c-tx3);flex-wrap:wrap}
.lsm-mv-stor2-l{display:inline-flex;align-items:center;gap:5px}
.lsm-mv-stor2-l::before{content:'';width:9px;height:9px;border-radius:2px;flex:none}
.lsm-mv-stor2-l.l-dvr::before{background:#D85A30}
.lsm-mv-stor2-l.l-upl::before{background:#378ADD}
.lsm-mv-stor2-l.l-aud::before{background:#ec4899}
.lsm-mv-stor2-l.l-fr::before{background:var(--c-bdr);border:1px solid rgba(0,0,0,.08)}
.lsm-mv-stor2-l b{color:var(--c-tx);font-weight:600}
/* Warning states — amber at 80%, red at 95% */
.lsm-mv-stor2.warn-amber .lsm-mv-stor2-seg-dvr,
.lsm-mv-stor2.warn-amber .lsm-mv-stor2-seg-upl,
.lsm-mv-stor2.warn-amber .lsm-mv-stor2-seg-aud{background:#EF9F27}
.lsm-mv-stor2.warn-crit .lsm-mv-stor2-seg-dvr,
.lsm-mv-stor2.warn-crit .lsm-mv-stor2-seg-upl,
.lsm-mv-stor2.warn-crit .lsm-mv-stor2-seg-aud{background:#E24B4A}
.lsm-mv-stor2.warn-amber .lsm-mv-stor2-l.l-dvr::before,
.lsm-mv-stor2.warn-amber .lsm-mv-stor2-l.l-upl::before,
.lsm-mv-stor2.warn-amber .lsm-mv-stor2-l.l-aud::before{background:#EF9F27}
.lsm-mv-stor2.warn-crit .lsm-mv-stor2-l.l-dvr::before,
.lsm-mv-stor2.warn-crit .lsm-mv-stor2-l.l-upl::before,
.lsm-mv-stor2.warn-crit .lsm-mv-stor2-l.l-aud::before{background:#E24B4A}
@media (prefers-color-scheme: dark){
    .lsm-mv-stor2-l.l-fr::before{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.1)}
}
@media (max-width: 540px){
    .lsm-mv-stor2-legend{gap:10px}
}
.lsm-mv-stor-val b{font-weight:700;color:var(--c-tx2)}
/* v3.9.334 — Migration auf zentrale --c-* Tokens. Vorher nutzte
   diese Sektion `--color-*` Legacy-Tokens, die im Dark-Mode nicht
   definiert sind, sodass die Toolbar im Dark-Mode mit hellen
   Inseln aus der allgemeinen Farbsprache ausbrach. */
.lsm-mv-toolbar{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:14px;background:var(--c-surf);border:0.5px solid var(--c-bdr);border-radius:12px;flex-wrap:wrap}
/* Tabs as segmented control inside toolbar */
.lsm-mv-tabs{display:flex;background:var(--c-surf2);border:0.5px solid var(--c-bdr);border-radius:8px;padding:3px;flex-shrink:0}
.lsm-mv-tab{display:flex;align-items:center;gap:6px;padding:6px 13px;border:none;background:transparent;color:var(--c-tx3);font-size:13px;font-weight:500;border-radius:6px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s;line-height:1.2;white-space:nowrap}
.lsm-mv-tab:hover{color:var(--c-tx)}
.lsm-mv-tab.act{background:var(--c-tx);color:var(--c-bg)}
.lsm-mv-tab-cnt{display:inline-block;background:var(--c-surf3);color:inherit;border-radius:10px;padding:1px 7px;font-size:10.5px;font-weight:500;line-height:1.4}
.lsm-mv-tab.act .lsm-mv-tab-cnt{background:rgba(255,255,255,.2);color:inherit}
/* Search field */
.lsm-mv-search-wrap{position:relative;flex:1;min-width:180px}
.lsm-mv-search-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--c-tx3);pointer-events:none;width:14px;height:14px;z-index:1}
.lsm-mv-search-wrap .lsm-mv-search{width:100%;box-sizing:border-box;padding:8px 12px 8px 34px;border:0.5px solid var(--c-bdr);border-radius:8px;background:var(--c-surf2);color:var(--c-tx);font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit;line-height:1.3}
.lsm-mv-search-wrap .lsm-mv-search::placeholder{color:var(--c-tx3)}
.lsm-mv-search-wrap .lsm-mv-search:focus{border-color:var(--c-blue);background:var(--c-surf);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
/* Sort: label wraps icon + select for full-area click-through */
.lsm-mv-sort-wrap{display:inline-flex;align-items:center;gap:6px;padding:0 4px 0 10px;background:var(--c-surf2);border:0.5px solid var(--c-bdr);border-radius:8px;flex-shrink:0;height:34px;cursor:pointer;position:relative;color:var(--c-tx)}
.lsm-mv-sort-wrap:hover{border-color:var(--c-bdr2)}
.lsm-mv-sort-ico{width:13px;height:13px;color:var(--c-tx3);flex-shrink:0;pointer-events:none}
/* Default arrow color = light (dark mode); light-mode override flips it dark below */
.lsm-mv-sort{min-width:90px;padding:6px 22px 6px 4px;border:none;background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff' style='opacity:.5'><path d='M3.204 5h9.592L8 10.481z'/></svg>") no-repeat right 6px center/10px;color:var(--c-tx);font-size:13px;cursor:pointer;outline:none;font-family:inherit;line-height:1.3;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.lsm-fe-app[data-theme="light"] .lsm-mv-sort,
:root:not([data-theme="dark"]) .lsm-mv-sort {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300000a' style='opacity:.5'><path d='M3.204 5h9.592L8 10.481z'/></svg>");
}
.lsm-mv-sort:focus{outline:none}
/* Empty state */
.lsm-mv-empty{grid-column:1/-1;text-align:center;padding:32px;color:var(--c-tx3);font-size:13px;border:1px dashed var(--c-bdr);border-radius:12px}
/* Mobile: stack vertically */
@media (max-width:600px){
  .lsm-mv-toolbar{flex-direction:column;align-items:stretch}
  .lsm-mv-tabs{align-self:flex-start}
  .lsm-mv-search-wrap{width:100%;min-width:0}
  .lsm-mv-sort-wrap{align-self:flex-end}
}
.lsm-mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px}
.lsm-mv-empty{grid-column:1/-1;text-align:center;padding:28px;color:var(--c-tx4);font-size:13px;border:1px dashed var(--c-bdr);border-radius:var(--r)}
/* Video card */
.lsm-vmc { background:var(--color-background-primary); border:0.5px solid var(--color-border-tertiary); border-radius:12px; overflow:hidden; cursor:pointer; transition:border-color .15s; }
.lsm-vmc:hover { border-color:var(--color-border-secondary); }
.lsm-vmc-thumb { height:120px; background:var(--color-background-tertiary); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.lsm-vmc-thumb-img { width:100%; height:100%; object-fit:cover; display:block; }
.lsm-vmc-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--color-text-tertiary); }
.lsm-vmc-badge { position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:9px; font-size:9px; font-weight:500; }
.lsm-vmc-badge-ready { background:rgba(0,0,0,.52); color:#4ade80; }
.lsm-vmc-badge-proc,.lsm-vmc-badge-upl { background:rgba(0,0,0,.52); color:#fbbf24; }
.lsm-vmc-badge-err { background:rgba(0,0,0,.52); color:#f87171; }
.lsm-vmc-badge-pend { background:rgba(0,0,0,.52); color:rgba(255,255,255,.6); }
.lsm-vmc-bdot { width:4px; height:4px; border-radius:50%; background:currentColor; flex-shrink:0; }
.lsm-vmc-dur { position:absolute; bottom:8px; left:8px; font-size:10px; font-weight:500; background:rgba(0,0,0,.55); color:rgba(255,255,255,.92); padding:2px 6px; border-radius:5px; }
.lsm-vmc-views { position:absolute; bottom:8px; right:8px; display:inline-flex; align-items:center; gap:3px; font-size:10px; background:rgba(0,0,0,.52); color:rgba(255,255,255,.9); padding:2px 6px; border-radius:5px; }

/* v3.9.196 — Comment-count badge on VOD card thumbnail. Sits next to views. */
.lsm-vmc-comments { position:absolute; bottom:8px; right:52px; display:inline-flex; align-items:center; gap:3px; font-size:10px; background:rgba(0,0,0,.52); color:rgba(255,255,255,.9); padding:2px 6px; border-radius:5px; }
.lsm-vmc-comments svg { opacity:.85 }
.lsm-vmc-cm-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c-amber, #d97706); margin-left:3px; box-shadow:0 0 0 1.5px rgba(0,0,0,.55) }

/* v3.9.196 — VOD Drawer nav: pending-dot decoration on Kommentare tab */
.lsm-vd-nav-btn.lsm-vd-nav-has-pending { position:relative }
.lsm-vd-nav-btn.lsm-vd-nav-has-pending::after { content:''; position:absolute; top:8px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--c-amber, #d97706); box-shadow:0 0 0 1.5px var(--c-surf, #fff) }

/* v3.9.196 — VOD Drawer Kommentare-Panel */
.lsm-vd-cm-settings { display:flex; flex-direction:column; gap:6px; padding:12px 14px; background:var(--c-surf2); border-radius:8px; margin-bottom:12px }
.lsm-vd-cm-setting-row { display:flex; justify-content:space-between; align-items:center; gap:10px }
.lsm-vd-cm-setting-lbl { font-size:12px; font-weight:500; color:var(--c-tx) }
.lsm-vd-cm-modseg { display:inline-flex; gap:2px; background:var(--c-surf); border:0.5px solid var(--c-bdr); border-radius:6px; padding:2px }
.lsm-vd-cm-modbtn { font-family:inherit; font-size:11px; border:none; background:transparent; color:var(--c-tx2); padding:4px 10px; border-radius:4px; cursor:pointer }
.lsm-vd-cm-modbtn:hover { color:var(--c-tx) }
.lsm-vd-cm-modbtn.act { background:var(--c-blue); color:#fff }
.lsm-vd-cm-counts { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap }
.lsm-vd-cm-count-pill { font-size:11px; color:var(--c-tx2); background:var(--c-surf2); border:0.5px solid var(--c-bdr); border-radius:999px; padding:3px 10px }
.lsm-vd-cm-count-pill b { color:var(--c-tx); font-weight:500 }
.lsm-vd-cm-count-pending { background:rgba(217, 119, 6, 0.08); border-color:rgba(217, 119, 6, 0.35); color:#b45309 }
.lsm-vd-cm-count-pending b { color:#b45309 }
.lsm-vd-cm-list { display:flex; flex-direction:column; gap:8px }
.lsm-vd-cm-item { background:var(--c-surf); border:0.5px solid var(--c-bdr); border-radius:8px; padding:10px 12px }
.lsm-vd-cm-head { display:flex; align-items:center; gap:8px; margin-bottom:5px; flex-wrap:wrap }
.lsm-vd-cm-author { font-size:12px; font-weight:500; color:var(--c-tx) }
.lsm-vd-cm-date { font-size:10.5px; color:var(--c-tx3) }
.lsm-vd-cm-status { font-size:10px; padding:1px 7px; border-radius:999px; margin-left:auto; font-weight:500; border:0.5px solid transparent }
.lsm-vd-cm-status.lsm-vd-cm-st-pending { background:rgba(217, 119, 6, 0.1); color:#b45309; border-color:rgba(217, 119, 6, 0.3) }
.lsm-vd-cm-status.lsm-vd-cm-st-visible { background:rgba(22, 163, 74, 0.1); color:#166534; border-color:rgba(22, 163, 74, 0.3) }
.lsm-vd-cm-status.lsm-vd-cm-st-hidden  { background:rgba(100, 100, 100, 0.08); color:var(--c-tx3); border-color:var(--c-bdr) }
.lsm-vd-cm-body { font-size:13px; line-height:1.45; color:var(--c-tx); margin-bottom:8px; white-space:pre-wrap; word-break:break-word }
.lsm-vd-cm-actions { display:flex; gap:5px }
.lsm-vd-cm-act { font-family:inherit; font-size:10.5px; padding:4px 10px; border-radius:5px; cursor:pointer; border:0.5px solid var(--c-bdr); background:var(--c-surf2); color:var(--c-tx) }
.lsm-vd-cm-act:hover { background:var(--c-surf); border-color:var(--c-bdr2) }
.lsm-vd-cm-act-ok { background:#16a34a; color:#fff; border-color:#16a34a }
.lsm-vd-cm-act-ok:hover { background:#15803d }
.lsm-vd-cm-act-del { color:#dc2626; border-color:rgba(220, 38, 38, 0.25) }
.lsm-vd-cm-act-del:hover { background:rgba(220, 38, 38, 0.08) }

/* v3.9.199 — Insights Panel */
.lsm-vd-ins-section { margin-bottom:16px }
.lsm-vd-ins-sec-hd { font-size:11px; font-weight:600; color:var(--c-tx3,#5a6b80); text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; display:flex; align-items:center; gap:6px }
.lsm-vd-ins-live .lsm-vd-ins-sec-hd { color:#b91c1c }
.lsm-vd-ins-live-dot { width:6px; height:6px; border-radius:50%; background:#dc2626; box-shadow:0 0 0 2px rgba(220,38,38,.18) }
.lsm-vd-ins-live { background:linear-gradient(to bottom, rgba(220,38,38,.04), transparent); border-left:2px solid rgba(220,38,38,.4); padding:10px 12px; border-radius:6px }
.lsm-vd-ins-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); gap:8px }
.lsm-vd-ins-kpi { background:var(--c-surf2,#f0f3f8); border:0.5px solid var(--c-bdr,#c8d0dc); border-radius:6px; padding:9px 11px }
.lsm-vd-ins-kpi-val { font-size:18px; font-weight:600; color:var(--c-tx,#0a1020); letter-spacing:-0.01em; line-height:1.1 }
.lsm-vd-ins-kpi-lbl { font-size:10.5px; color:var(--c-tx3,#5a6b80); margin-top:3px; text-transform:uppercase; letter-spacing:.04em; font-weight:500 }
.lsm-vd-ins-kpi-sub { color:var(--c-tx4,#8fa0b0); text-transform:none; letter-spacing:0 }
.lsm-vd-ins-empty { font-size:12px; color:var(--c-tx3,#5a6b80); padding:14px; background:var(--c-surf2,#f0f3f8); border-radius:6px; line-height:1.55 }
.lsm-vd-ins-chart-legend { display:flex; justify-content:space-between; font-size:10px; color:var(--c-tx3,#5a6b80); margin-top:4px }
.lsm-vd-ins-footer { display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:0.5px solid var(--c-bdr,#c8d0dc); margin-top:14px }
.lsm-vd-ins-stamp { font-size:10.5px; color:var(--c-tx3,#5a6b80); font-style:italic }

/* v3.9.202 — source-provenance badge on each KPI */
.lsm-vd-ins-src { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; vertical-align:middle; cursor:help }
.lsm-vd-ins-src-own { background:#16a34a }         /* green = own reliable tracking */
.lsm-vd-ins-src-bm  { background:#8b5cf6 }         /* purple = Bitmovin QoE */
.lsm-vd-ins-src-pd  { background:#d1d5db; border:0.5px solid #9ca3af } /* grey = pending/not yet */
/* Info-note below KPIs */
.lsm-vd-ins-info { font-size:11px; color:var(--c-tx3,#5a6b80); line-height:1.5; background:rgba(139,92,246,0.06); border-left:2px solid rgba(139,92,246,0.4); border-radius:4px; padding:8px 12px; margin-bottom:14px }
.lsm-vd-ins-info b { color:var(--c-tx2,#2d3a4a); font-weight:600 }
/* KPI "in Arbeit" sub-label should be more muted */
.lsm-vd-ins-kpi-val:has(+ .lsm-vd-ins-kpi-lbl .lsm-vd-ins-src-pd) { color:var(--c-tx3,#5a6b80) }
.lsm-vmc-views svg { width:10px; height:10px; opacity:.85; flex-shrink:0; }
.lsm-vmc-body { padding:12px 13px 0; }
.lsm-vmc-title { font-size:15px; font-weight:500; line-height:1.3; color:var(--color-text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:10px; }
.lsm-vmc-inp { font-size:13px; border:0.5px solid var(--color-border-info); border-radius:5px; padding:2px 6px; flex:1; min-width:0; width:100%; background:var(--color-background-primary); color:var(--color-text-primary); }
.lsm-vmc-edit { flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; color:var(--color-text-secondary); }
.lsm-vmc-edit:hover { color:var(--color-text-primary); }
.lsm-vmc-meta { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; padding:6px 8px; background:var(--color-background-secondary); border-radius:7px; }
.lsm-vmc-mr { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--color-text-secondary); }
.lsm-vmc-ml { font-size:10px; color:var(--color-text-tertiary); width:50px; flex-shrink:0; }
.lsm-vmc-evtag { color:var(--color-text-info); }
.lsm-vmc-vod-row { display:flex; align-items:center; gap:6px; font-size:11px; margin-bottom:10px; padding:4px 8px; border-radius:7px; }
.lsm-vmc-vod-active { background:#f0fdf4; color:#15803d; border:0.5px solid #86efac; }
.lsm-vmc-vod-none { color:var(--color-text-tertiary); }
.lsm-vmc-prog { height:3px; background:var(--color-background-secondary); border-radius:2px; overflow:hidden; margin-bottom:6px; }
.lsm-vmc-prog-fill { height:100%; background:#378ADD; border-radius:2px; transition:width .3s; }
.lsm-vmc-prog-lbl { font-size:10px; color:var(--color-text-tertiary); margin-bottom:10px; }
.lsm-vmc-sb { display:flex; align-items:center; justify-content:space-between; border-top:0.5px solid var(--color-border-tertiary); padding:8px 13px 9px; margin-top:2px; }
.lsm-vmc-sb-l { display:flex; align-items:center; gap:5px; font-size:11px; }
.lsm-vmc-sb-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.lsm-vmc-acts { display:flex; gap:5px; align-items:center; }
/* v3.10.197 — Button-System auf definierte --c-* Tokens umgestellt. Vorher
   nutzten diese Buttons --color-* (nirgends definiert) → transparent/faint,
   der Primär-Button (-pr, u.a. Speichern) hatte keinen Hintergrund und war
   auf weißer Fläche unsichtbar. Flat Black/White: primär = solid var(--c-tx). */
.lsm-vmc-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:8px; border:1px solid var(--c-bdr,#c8d0dc); font-size:12px; font-weight:500; color:var(--c-tx2,#2d3a4a); background:var(--c-surf,#fff); cursor:pointer; text-decoration:none; white-space:nowrap; line-height:1.4; transition:background .14s,border-color .14s,color .14s; }
.lsm-vmc-btn:hover { background:var(--c-surf2,#f0f3f8); border-color:var(--c-bdr2,#a8b4c4); color:var(--c-tx,#0a1020); }
.lsm-vmc-btn-pr { background:var(--c-tx,#0a1020); border-color:var(--c-tx,#0a1020); color:var(--c-surf,#fff); }
.lsm-vmc-btn-pr:hover { background:var(--c-tx2,#2d3a4a); border-color:var(--c-tx2,#2d3a4a); color:var(--c-surf,#fff); }
.lsm-vmc-btn-sh { background:var(--c-surf2,#f0f3f8); border-color:var(--c-bdr,#c8d0dc); color:var(--c-tx,#0a1020); }
.lsm-vmc-btn-sh:hover { background:var(--c-surf3,#e8ecf2); border-color:var(--c-bdr2,#a8b4c4); }
.lsm-vmc-btn-teal { border-color:#5DCAA5; color:#085041; background:#f0fdf4; }
.lsm-vmc-btn-teal:hover { background:#e1f5ee; }
.lsm-vmc-btn-da, .lsm-vmc-btn-del { border-color:#fca5a5; color:#dc2626; background:transparent; }
.lsm-vmc-btn-da:hover, .lsm-vmc-btn-del:hover { background:#fef2f2; }
.lsm-vmc-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99998;align-items:center;justify-content:center}
.lsm-vmc-modal.open{display:flex}
.lsm-vmc-modal-box{background:var(--c-surf,#fff);border:1px solid var(--c-bdr,#c8d0dc);border-radius:var(--r,6px);padding:20px;width:100%;max-width:460px;margin:16px}
.lsm-vmc-modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.lsm-vmc-modal-title{font-size:15px;font-weight:700;color:var(--c-tx,#0a1020)}
.lsm-vmc-modal-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--c-tx4,#8fa0b0);line-height:1}
.lsm-vmc-modal-sub{font-size:12px;color:var(--c-tx3,#5a6b80);margin-bottom:10px}
.lsm-vmc-modal-search{width:100%;padding:6px 10px;border:1px solid var(--c-bdr,#c8d0dc);border-radius:var(--r-sm,4px);background:var(--c-surf2,#f0f3f8);color:var(--c-tx,#0a1020);font-size:12px;outline:none;margin-bottom:8px}
.lsm-vmc-modal-search:focus{border-color:var(--c-blue,#1d4ed8);background:var(--c-surf,#fff)}
.lsm-vmc-ev-list{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow-y:auto;margin-bottom:12px}
.lsm-vmc-ev-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--c-bdr,#c8d0dc);border-radius:var(--r-sm,4px);cursor:pointer;transition:border-color var(--t,.12s),background var(--t,.12s)}
.lsm-vmc-ev-row:hover{border-color:var(--c-bdr2,#a8b4c4);background:var(--c-surf2,#f0f3f8)}
.lsm-vmc-ev-row.sel{border-color:var(--c-blue,#1d4ed8);background:var(--c-blue-s,#dbeafe)}
.lsm-vmc-ev-chk{width:15px;height:15px;border:1.5px solid var(--c-bdr2,#a8b4c4);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--c-surf,#fff);transition:background .1s,border-color .1s}
.lsm-vmc-ev-row.sel .lsm-vmc-ev-chk{background:var(--c-blue,#1d4ed8);border-color:var(--c-blue,#1d4ed8);color:#fff}
.lsm-vmc-ev-chk-ico{display:none}
.lsm-vmc-ev-row.sel .lsm-vmc-ev-chk-ico{display:block}
.lsm-vmc-ev-info{flex:1;min-width:0}
.lsm-vmc-ev-name{font-size:12px;font-weight:600;color:var(--c-tx,#0a1020);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsm-vmc-ev-row.sel .lsm-vmc-ev-name{color:var(--c-blue,#1d4ed8)}
.lsm-vmc-ev-key{font-size:10px;color:var(--c-tx4,#8fa0b0);font-family:monospace}
.lsm-vmc-modal-footer{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--c-bdr,#c8d0dc)}
.lsm-vmc-modal-count{font-size:12px;color:var(--c-tx3,#5a6b80)}
.lsm-vmc-modal-confirm{padding:6px 14px;background:var(--c-blue,#1d4ed8);color:#fff;border:none;border-radius:var(--r-sm,4px);font-size:12px;font-weight:600;cursor:pointer}
.lsm-vmc-modal-confirm:hover{background:var(--c-blue-h,#1e40af)}
.lsm-vmc-modal-confirm:disabled{opacity:.4;cursor:not-allowed}
.lsm-vmc-modal-cancel{padding:6px 10px;background:none;border:1px solid var(--c-bdr,#c8d0dc);border-radius:var(--r-sm,4px);font-size:12px;color:var(--c-tx3,#5a6b80);cursor:pointer}
.lsm-vmc-drop{border:2px dashed var(--c-bdr,#c8d0dc);border-radius:var(--r,6px);padding:24px 16px;text-align:center;transition:border-color .12s}
.lsm-vmc-file-label{padding:6px 14px;background:var(--c-blue,#1d4ed8);color:#fff;border-radius:var(--r-sm,4px);cursor:pointer;font-size:12px;font-weight:600;display:inline-block}

/* ── Video Drawer ──────────────────────────────────────────────
   v3.9.197: Widened from 520px → 900px to match the event drawer.
   Gives enough horizontal space for the comments-moderation list
   (author · date · status-chip + body + 3 action buttons) without
   wrapping, plus comfortable reading width for descriptions. */
.lsm-vd-wrap{background:var(--c-surf,#fff);border-left:1px solid var(--c-bdr,#c8d0dc);width:100%;max-width:900px;margin-left:auto;display:flex;flex-direction:column;max-height:100vh;overflow:hidden;box-shadow:-6px 0 28px rgba(0,0,0,.12)}
/* v3.10.196 — Flat/Weiß-Redesign: weiße Flächen, Haarlinien, breitere
   lesbare Nav, monochromer Aktiv-Balken. Dark via Tokens. */
.lsm-vd-header{background:var(--c-surf,#fff);border-bottom:1px solid var(--c-bdr,#c8d0dc);padding:14px 18px;display:flex;align-items:center;gap:13px;flex-shrink:0}
.lsm-vd-mark{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--c-tx2,#2d3a4a);background:var(--c-surf,#fff);border:1px solid var(--c-bdr,#c8d0dc)}
.lsm-vd-mark svg{width:20px;height:20px}
.lsm-vd-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--c-tx3,#5a6b80);border:1px solid var(--c-bdr,#c8d0dc);border-radius:6px;padding:2px 8px;margin-bottom:6px}
.lsm-vd-tag:empty{display:none}
.lsm-vd-title{font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--c-tx,#0a1020);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.lsm-vd-sub{font-size:12px;color:var(--c-tx3,#5a6b80);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsm-vd-close{width:34px;height:34px;border-radius:9px;background:none;border:none;cursor:pointer;font-size:17px;color:var(--c-tx3,#5a6b80);line-height:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s}
.lsm-vd-close:hover{background:var(--c-surf2,#f0f3f8);color:var(--c-tx,#0a1020)}
.lsm-vd-layout{display:flex;flex:1;overflow:hidden}
.lsm-vd-nav{width:112px;background:var(--c-surf,#fff);border-right:1px solid var(--c-bdr,#c8d0dc);display:flex;flex-direction:column;align-items:stretch;padding:12px 10px;gap:3px;flex-shrink:0;overflow-y:auto}
.lsm-vd-nav-btn{position:relative;width:100%;border-radius:10px;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:11px 6px;color:var(--c-tx3,#5a6b80);font-family:inherit;transition:background .14s,color .14s}
.lsm-vd-nav-btn svg{width:18px;height:18px}
.lsm-vd-nav-btn:hover{background:var(--c-surf2,#f0f3f8);color:var(--c-tx2,#2d3a4a)}
.lsm-vd-nav-btn.act{background:var(--c-surf2,#f0f3f8);color:var(--c-tx,#0a1020)}
.lsm-vd-nav-btn.act::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--c-tx,#0a1020)}
.lsm-vd-nav-lbl{font-size:11px;font-weight:500;color:inherit;white-space:nowrap;line-height:1.2}
.lsm-vd-body{flex:1;overflow-y:auto;padding:16px}
.lsm-vd-player-wrap{margin-bottom:12px;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden}
.lsm-vd-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.lsm-vd-meta-item{background:var(--c-surf2,#f0f3f8);border-radius:var(--r-sm,4px);padding:8px 10px}
.lsm-vd-meta-lbl{font-size:10px;font-weight:600;color:var(--c-tx3,#5a6b80);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.lsm-vd-meta-val{font-size:13px;font-weight:500;color:var(--c-tx,#0a1020)}

/* ── v3.10.164 — Mobile UX (Video-Drawer responsive) ──────────────
   Alles in dieser Media-Query gekapselt → Desktop unverändert.
   Vollbild-Drawer, horizontale Tab-Leiste statt 52px Sidebar,
   2-spaltige Meta-Grid, touch-freundliche Caption-Zeilen.
   Inline-styles (Caption-Rows) brauchen !important-Override. */
@media (max-width: 600px) {
    /* Vollbild-Drawer statt rechtsbündigem Panel.
       Höhe kommt von align-items:stretch des Overlay-Flex-Containers
       (respektiert Admin-Bar-Offset) — kein forced 100vh. */
    #lsmVodDrawer .lsm-vd-wrap,
    #lsmAudioDrawer .lsm-vd-wrap{
        max-width:100%;
        margin-left:0;
        border-left:none;
        box-shadow:none;
    }
    /* Layout: Nav oben, Body darunter (statt nebeneinander) */
    #lsmVodDrawer .lsm-vd-layout,
    #lsmAudioDrawer .lsm-vd-layout{ flex-direction:column; }
    /* Nav → horizontale scrollbare Tab-Leiste */
    #lsmVodDrawer .lsm-vd-nav,
    #lsmAudioDrawer .lsm-vd-nav{
        width:100%;
        flex-direction:row;
        border-right:none;
        border-bottom:1px solid var(--c-bdr,#c8d0dc);
        overflow-x:auto;
        overflow-y:hidden;
        padding:5px 6px;
        gap:4px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    #lsmVodDrawer .lsm-vd-nav::-webkit-scrollbar,
    #lsmAudioDrawer .lsm-vd-nav::-webkit-scrollbar{ display:none; }
    #lsmVodDrawer .lsm-vd-nav-btn,
    #lsmAudioDrawer .lsm-vd-nav-btn{
        flex-direction:row;
        width:auto;
        height:38px;
        min-width:auto;
        padding:0 11px;
        gap:6px;
        flex-shrink:0;
    }
    #lsmVodDrawer .lsm-vd-nav-btn.act::before,
    #lsmAudioDrawer .lsm-vd-nav-btn.act::before{ display:none; }
    #lsmVodDrawer .lsm-vd-nav-lbl,
    #lsmAudioDrawer .lsm-vd-nav-lbl{ font-size:11.5px; }
    /* Body padding etwas reduziert */
    #lsmVodDrawer .lsm-vd-body,
    #lsmAudioDrawer .lsm-vd-body{ padding:12px; }
    /* Meta-Grid 4 → 2 Spalten */
    #lsmVodDrawer .lsm-vd-meta-grid{ grid-template-columns:repeat(2,1fr); }
    /* Playback-Grid 3 → 1 Spalte */
    #lsmVodDrawer .lsm-vd-pb-grid{ grid-template-columns:1fr; }

    /* Caption-Zeilen (inline-styled): Timestamp auf eigene Zeile,
       Text + Buttons darunter, größere Tap-Targets */
    #lsmVodDrawer .lsm-fe-captions-row{ flex-wrap:wrap !important; gap:5px !important; padding:10px 4px !important; }
    #lsmVodDrawer .lsm-fe-captions-row > div:first-child{
        flex:0 0 100% !important;
        font-size:10px !important;
        padding-top:0 !important;
        opacity:.7;
    }
    #lsmVodDrawer .lsm-fe-captions-text{ flex:1 1 auto !important; font-size:14px !important; }
    #lsmVodDrawer .lsm-fe-captions-row-del{ padding:6px 8px !important; }
    #lsmVodDrawer .lsm-fe-captions-edited-badge{ padding:4px 10px !important; }

    /* Translation-Chips: größere Touch-Targets */
    #lsmVodDrawer .lsmVmcCapLangChip{ padding:6px 12px !important; font-size:12px !important; }

    /* Search-Input + Count etwas größer */
    #lsmVodDrawer #lsmVmcCapSearch{ font-size:14px; padding:9px 11px; }
}

/* v3.9.209 — Playback section: prominent Views + heartbeat watch-stats */
.lsm-vd-section-title{font-size:11px;font-weight:600;color:var(--c-tx3,#5a6b80);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 10px}
.lsm-vd-pb-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px}
.lsm-vd-pb-card{padding:13px 14px;border-radius:var(--r-sm,4px);display:flex;flex-direction:column;justify-content:space-between;min-height:88px}
.lsm-vd-pb-views{background:#E1F5EE;border:0.5px solid #9FE1CB}
.lsm-vd-pb-stat{background:var(--c-surf2,#f0f3f8)}
.lsm-vd-pb-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.lsm-vd-pb-views .lsm-vd-pb-lbl{color:#0F6E56}
.lsm-vd-pb-stat .lsm-vd-pb-lbl{color:var(--c-tx3,#5a6b80)}
.lsm-vd-pb-num{font-size:24px;font-weight:600;line-height:1;color:var(--c-tx,#0a1020)}
.lsm-vd-pb-views .lsm-vd-pb-num{color:#04342C;font-size:28px}
.lsm-vd-pb-stat  .lsm-vd-pb-num{font-size:18px;font-weight:500}
.lsm-vd-pb-sub{font-size:10px;color:var(--c-tx4,#8fa0b0);margin-top:3px}
.lsm-vd-pb-views .lsm-vd-pb-sub{color:#0F6E56;opacity:.85;font-weight:500}
/* Event chip strip + actions row */
.lsm-vd-event-strip{margin-top:12px;padding:9px 12px;background:var(--c-surf2,#f0f3f8);border-radius:var(--r-sm,4px);display:flex;align-items:center;gap:10px;font-size:12px}
.lsm-vd-event-lbl{color:var(--c-tx3,#5a6b80);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.lsm-vd-event-chip{display:inline-flex;align-items:center;padding:3px 10px;background:#EEEDFE;color:#3C3489;border-radius:20px;font-size:12px;font-weight:500}
.lsm-vd-actions{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
@media (prefers-color-scheme: dark){
    .lsm-vd-pb-views{background:#085041;border-color:#0F6E56}
    .lsm-vd-pb-views .lsm-vd-pb-lbl,.lsm-vd-pb-views .lsm-vd-pb-sub{color:#9FE1CB}
    .lsm-vd-pb-views .lsm-vd-pb-num{color:#E1F5EE}
    .lsm-vd-event-chip{background:#3C3489;color:#CECBF6}
}
.lsm-vd-sec-hd{font-size:11px;font-weight:600;color:var(--c-tx3,#5a6b80);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.lsm-vd-form-field{margin-bottom:12px}
.lsm-vd-form-label{display:block;font-size:12px;font-weight:600;color:var(--c-tx2,#2d3a4a);margin-bottom:4px}
.lsm-vd-form-inp{width:100%;padding:7px 10px;border:1px solid var(--c-bdr,#c8d0dc);border-radius:var(--r-sm,4px);font-size:12px;color:var(--c-tx,#0a1020);background:var(--c-surf,#fff);outline:none}
.lsm-vd-form-inp:focus{border-color:var(--c-blue,#1d4ed8)}
.lsm-vd-ev-row{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid var(--c-bdr,#c8d0dc)}
.lsm-vd-ev-row:last-of-type{border-bottom:none}
.lsm-vd-ev-name{flex:1;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsm-vd-ev-ok{font-size:11px;color:var(--c-green,#16a34a);font-weight:600;flex-shrink:0}
.lsm-vd-share-link-row{display:flex;align-items:center;gap:7px;background:var(--c-surf2,#f0f3f8);border-radius:var(--r-sm,4px);padding:7px 10px;margin-bottom:8px}
.lsm-vd-share-url{flex:1;font-size:11px;color:var(--c-blue,#1d4ed8);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Compact VOD status in cards */
.lsm-vmc-vod-row{font-size:11px;margin-bottom:5px;display:flex;align-items:center;gap:4px}
.lsm-vmc-vod-active{color:var(--c-green,#16a34a);font-weight:600}
.lsm-vmc-vod-none{color:var(--c-tx4,#8fa0b0)}

/* ── Card enhancements ────────────────────────────────────── */
.lsm-mv-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.lsm-vmc{border:1px solid #d3e7df;border-radius:14px;transition:border-color .15s,transform .15s,box-shadow .15s}
.lsm-vmc:hover{border-color:#9ec9b9;transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,110,86,.10),0 2px 6px rgba(0,0,0,.04)}
.lsm-vmc-thumb{height:160px}
.lsm-vmc-title{font-size:16px;font-weight:500;line-height:1.35;margin-bottom:8px}
.lsm-vmc-body{padding:14px 16px}
.lsm-vmc-sb{padding:10px 16px}
.lsm-vmc-btn{padding:5px 10px;font-size:11px;border-radius:6px}
.lsm-vmc-btn-share{padding:5px 7px;border-color:#c4b5fd;color:#6d28d9;background:#f5f3ff}
.lsm-vmc-btn-share:hover{background:#ede9fe;border-color:#a78bfa;color:#5b21b6}
.lsm-vmc-btn-share svg{width:13px;height:13px}
.lsm-vmc-views-badge{position:absolute;bottom:6px;left:6px;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:600;background:rgba(15,110,86,.88);color:#fff}
.lsm-vmc-btn-teal{background:var(--c-teal,#0f6e56);color:#fff;border:none}
.lsm-vmc-btn-teal:hover{background:#085041;color:#fff}
/* Stats row */
.lsm-mv-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
/* v3.9.329 — Stats-Row mit eingebautem Speicher-Kontingent als 4. Card.
   Speicher-Card ist ~doppelt so breit (sie braucht Platz für Bar +
   Legende), daher 3 Stat-Cards + 1 doppelte Storage-Card im fr-Grid. */
.lsm-mv-stats-row-with-storage{
    grid-template-columns:1fr 1fr 1fr 2fr;
}
.lsm-mv-stat{background:var(--c-surf2,#f0f3f8);border-radius:var(--r-sm,4px);padding:8px 10px}
.lsm-mv-stat-lbl{font-size:10px;font-weight:600;color:var(--c-tx3,#5a6b80);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.lsm-mv-stat-val{font-size:18px;font-weight:500;color:var(--c-tx,#0a1020)}
.lsm-mv-stat-teal{color:var(--c-teal,#0f6e56)}

/* v3.9.329 — Compact storage card inside KPI row */
.lsm-mv-stat-storage {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lsm-mv-stat-storage-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.lsm-mv-stat-storage-val {
    font-size: 18px;
    font-weight: 500;
    color: var(--c-tx);
}
.lsm-mv-stat-storage-tot {
    font-size: 11px;
    color: var(--c-tx3);
}
.lsm-mv-stat-storage-bar {
    height: 6px;
    background: var(--c-bdr);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    margin-top: 2px;
}
.lsm-mv-stat-storage-bar .lsm-mv-stor2-seg-dvr {
    background: #d97706;
    height: 100%;
}
.lsm-mv-stat-storage-bar .lsm-mv-stor2-seg-upl {
    background: var(--c-blue, #1d4ed8);
    height: 100%;
}
/* v3.10.95 — KPI Audio segment uses LSM pink, matching the full-bar variant. */
.lsm-mv-stat-storage-bar .lsm-mv-stor2-seg-aud {
    background: #ec4899;
    height: 100%;
}
.lsm-mv-stat-storage-legend {
    display: flex;
    gap: 10px;
    font-size: 10.5px;
    color: var(--c-tx3);
}
.lsm-mv-stat-storage-legend .l-dvr::before {
    content: ""; display: inline-block; width: 7px; height: 7px;
    background: #d97706; border-radius: 50%;
    margin-right: 4px; vertical-align: middle;
}
.lsm-mv-stat-storage-legend .l-upl::before {
    content: ""; display: inline-block; width: 7px; height: 7px;
    background: var(--c-blue, #1d4ed8); border-radius: 50%;
    margin-right: 4px; vertical-align: middle;
}
.lsm-mv-stat-storage-legend .l-aud::before {
    content: ""; display: inline-block; width: 7px; height: 7px;
    background: #ec4899; border-radius: 50%;
    margin-right: 4px; vertical-align: middle;
}
.lsm-mv-stat-storage.warn-amber .lsm-mv-stat-storage-val { color: #d97706; }
.lsm-mv-stat-storage.warn-crit  .lsm-mv-stat-storage-val { color: var(--c-red, #dc2626); }
@media (max-width: 700px) {
    .lsm-mv-stats-row-with-storage{
        grid-template-columns: 1fr 1fr;
    }
    .lsm-mv-stat-storage { grid-column: 1 / -1; }
}
/* Teal var */
:root{--c-teal:#0f6e56}

.lsm-st-sec{font-size:10px;font-weight:600;color:var(--c-tx3,#5a6b80);text-transform:uppercase;letter-spacing:.07em;margin:0 0 8px}
.lsm-st-hr{height:.5px;background:var(--c-bdr,#c8d0dc);margin:16px 0}

/* v3.9.322 — Plan-Hero (Statistik-Tab) */
.lsm-st-plan-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    margin: 0 0 20px;
    background: linear-gradient(135deg, var(--c-surf, #fff) 0%, var(--c-surf2, #f0f3f8) 100%);
    border: 1px solid var(--c-bdr, #c8d0dc);
    border-radius: 10px;
    flex-wrap: wrap;
}
.lsm-st-plan-info { display: flex; flex-direction: column; gap: 2px; }
.lsm-st-plan-lbl {
    font-size: 10px; font-weight: 600;
    color: var(--c-tx3, #5a6b80);
    text-transform: uppercase; letter-spacing: .07em;
}
.lsm-st-plan-name {
    font-size: 22px; font-weight: 700;
    color: var(--c-tx, #0a1020);
    line-height: 1.1;
}
.lsm-st-plan-price {
    font-size: 12.5px;
    color: var(--c-tx2, #2d3a4a);
    margin-top: 2px;
}
.lsm-st-plan-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 18px;
    background: var(--c-blue, #1d4ed8);
    color: #ffffff !important;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    transition: background .15s, transform .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.lsm-st-plan-cta:hover {
    background: var(--c-blue-h, #1e40af);
    transform: translateY(-1px);
}
.lsm-st-plan-cta-sub {
    font-size: 10.5px;
    font-weight: 500;
    opacity: .85;
}
.lsm-st-plan-top {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--c-green-s, #f0fdf4);
    color: var(--c-green, #16a34a);
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid var(--c-green, #16a34a);
}
@media (max-width: 600px) {
    .lsm-st-plan-hero { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
    .lsm-st-plan-cta { align-self: stretch; }
}
.lsm-st-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:12px}
.lsm-st-sc{background:var(--c-surf2,#f0f3f8);border-radius:var(--r,6px);padding:10px 12px}
.lsm-st-sc-l{font-size:10.5px;color:var(--c-tx2,#3a4a5c);margin-bottom:2px}
.lsm-st-sc-v{font-size:19px;font-weight:600;line-height:1.1;color:var(--c-tx,#0a1020)}
.lsm-st-sc-s{font-size:10px;color:var(--c-tx3,#5a6b80);margin-top:2px}
.lsm-st-cg{color:var(--c-green,#16a34a)}.lsm-st-ca{color:var(--c-amber,#b45309)}.lsm-st-cb{color:var(--c-blue,#1d4ed8)}.lsm-st-cr{color:var(--c-red,#dc2626)}.lsm-st-cm{color:var(--c-tx3,#5a6b80)}
.lsm-st-qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.lsm-st-qc{background:var(--c-surf,#fff);border:.5px solid var(--c-bdr,#c8d0dc);border-radius:var(--r,6px);padding:12px 14px;margin-bottom:0}
.lsm-st-qh{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;gap:6px}
.lsm-st-qt{font-size:12px;font-weight:600;color:var(--c-tx,#0a1020);display:flex;align-items:center;gap:5px;flex:1}
.lsm-st-bdg{display:inline-flex;align-items:center;font-size:9.5px;padding:2px 6px;border-radius:8px;font-weight:600;white-space:nowrap}
.lsm-st-bdg-ok{background:var(--c-green-bg,#dcfce7);color:var(--c-green,#15803d)}.lsm-st-bdg-warn{background:var(--c-amber-bg,#fef3c7);color:var(--c-amber,#92400e)}.lsm-st-bdg-info{background:var(--c-blue-bg,#dbeafe);color:var(--c-blue,#1d4ed8)}.lsm-st-bdg-danger{background:var(--c-red-bg,#fee2e2);color:var(--c-red,#991b1b)}.lsm-st-bdg-neu{background:var(--c-surf2,#f0f3f8);color:var(--c-tx2,#3a4a5c)}
.lsm-st-bt{height:5px;background:var(--c-bdr,#c8d0dc);border-radius:3px;overflow:hidden;margin-bottom:4px}
.lsm-st-bf{height:100%;border-radius:3px;transition:width .4s}
.lsm-st-stk{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:1px;margin-bottom:5px}
.lsm-st-qf{display:flex;justify-content:space-between;font-size:10px;color:var(--c-tx3,#5a6b80)}
.lsm-st-qdg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:8px}
.lsm-st-qd{background:var(--c-surf2,#f0f3f8);border-radius:4px;padding:6px 8px}
.lsm-st-qd-l{font-size:10px;color:var(--c-tx3,#5a6b80)}
.lsm-st-qd-v{font-size:13px;font-weight:600;margin-top:1px;color:var(--c-tx,#0a1020)}
.lsm-st-note{border-left:3px solid var(--c-amber,#b45309);border-radius:0 4px 4px 0;background:var(--c-surf2,#f0f3f8);padding:7px 10px;font-size:11px;color:var(--c-tx2,#3a4a5c);line-height:1.5;margin-top:8px}
.lsm-st-logcard{background:var(--c-surf,#fff);border:.5px solid var(--c-bdr,#c8d0dc);border-radius:var(--r,6px);padding:8px 12px;margin-bottom:12px}
.lsm-st-logrow{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:.5px solid var(--c-bdr,#c8d0dc);font-size:11px}
.lsm-st-logrow:last-child{border-bottom:none}
.lsm-st-logdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.lsm-st-logev{font-weight:600;width:90px;flex-shrink:0;font-size:10.5px}
.lsm-st-logstream{flex:1;color:var(--c-tx3,#5a6b80);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.lsm-st-logtime{color:var(--c-tx3,#5a6b80);font-size:10px;flex-shrink:0}
.lsm-st-twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.lsm-st-top{background:var(--c-surf,#fff);border:.5px solid var(--c-bdr,#c8d0dc);border-radius:var(--r,6px);overflow:hidden;margin-bottom:0}
.lsm-st-tr{display:flex;align-items:center;gap:7px;padding:7px 12px;border-bottom:.5px solid var(--c-bdr,#c8d0dc);font-size:11.5px}
.lsm-st-tr:last-child{border-bottom:none}
.lsm-st-trn{width:16px;font-size:10px;color:var(--c-tx3,#5a6b80);text-align:right;flex-shrink:0}
.lsm-st-trv{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.lsm-st-trb{width:60px;height:3px;background:var(--c-bdr,#c8d0dc);border-radius:2px;overflow:hidden;flex-shrink:0}
.lsm-st-trf{height:100%;border-radius:2px;background:var(--c-blue,#2563eb)}
.lsm-st-trc{width:52px;text-align:right;font-size:11px;color:var(--c-tx2,#3a4a5c);flex-shrink:0}
.lsm-st-empty{font-size:12px;color:var(--c-tx3,#5a6b80);padding:10px 0}
.lsm-vd-detail-table{background:var(--c-surf2,#f0f3f8);border-radius:5px;padding:6px 8px;margin:8px 0}
.lsm-vd-dt-row{display:flex;justify-content:space-between;align-items:baseline;padding:2.5px 0;border-bottom:.5px solid var(--c-bdr,#c8d0dc)}
.lsm-vd-dt-row:last-child{border-bottom:none}
.lsm-vd-dt-k{font-size:10px;color:var(--c-tx3,#5a6b80);white-space:nowrap;padding-right:8px;flex-shrink:0}
.lsm-vd-dt-v{font-size:10px;color:var(--c-tx,#0a1020);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.lsm-vd-dt-mono{font-family:monospace;font-size:9.5px;color:var(--c-tx2,#3a4a5c)}
.bitmovinplayer-container,.bitmovinplayer-ad-container{height:auto!important}

/* ── View badges in meta row ────────────────────────────────── */
.lsm-fe-meta-sep { color: var(--c-bdr2); }
.lsm-fe-view-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--c-surf2); border: 0.5px solid var(--c-bdr);
    border-radius: 6px; padding: 2px 7px;
    font-size: 10.5px; font-weight: 500;
}
.lsm-fe-view-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
.lsm-fe-view-badge--live { color: var(--c-red); border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.06); }
.lsm-fe-view-badge--vod  { color: #7c3aed; border-color: rgba(124,58,237,.25); background: rgba(124,58,237,.06); }

/* ── Ingest Key Cards (new design) ───────────────────────────── */
.lsm-fe-admin-badge { font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:6px;background:#E6F1FB;color:#185FA5;border:0.5px solid #B5D4F4;white-space:nowrap;flex-shrink:0; }
.lsm-fe-ingest-create-row { display:flex;align-items:center;gap:10px;background:var(--c-surf2);border:0.5px solid var(--c-bdr);border-radius:10px;padding:10px 14px;margin-bottom:16px; }
.lsm-fe-ingest-empty { color:var(--c-tx3);font-size:13px;padding:16px 0; }
.lsm-ik-card { background:var(--c-surf);border:0.5px solid var(--c-bdr);border-radius:12px;overflow:hidden;margin-bottom:12px; }
.lsm-ik-head { display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:0.5px solid var(--c-bdr); }
.lsm-ik-icon { width:34px;height:34px;border-radius:8px;background:rgba(55,138,221,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.lsm-ik-icon svg { width:16px;height:16px;color:#185FA5; }
.lsm-ik-info { flex:1;min-width:0; }
.lsm-ik-name { font-size:13.5px;font-weight:500; }
.lsm-ik-sub { font-size:11px;color:var(--c-tx3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lsm-ik-badge { font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;flex-shrink:0; }
.lsm-ik-badge-ok { background:rgba(22,163,74,.1);color:#15803d;border:0.5px solid rgba(22,163,74,.25); }
.lsm-ik-badge-free { background:var(--c-surf2);color:var(--c-tx3);border:0.5px solid var(--c-bdr); }
.lsm-ik-urls { padding:14px 16px;display:flex;flex-direction:column;gap:10px; }
.lsm-ik-url-block { background:var(--c-surf);border:1px solid var(--c-bdr);border-radius:10px;padding:12px 14px;transition:border-color .15s;min-width:0; }
.lsm-ik-url-block:hover { border-color:var(--c-bdr2,#9ca9bc); }
.lsm-ik-url-block-key { border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.04); }
.lsm-ik-url-block-key:hover { border-color:rgba(124,58,237,.5); }
.lsm-ik-url-proto { display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--c-tx3);margin-bottom:7px; }
.lsm-ik-url-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; }
.lsm-ik-url-row { display:flex;align-items:center;gap:10px;min-width:0; }
/* v3.9.213 — Long URLs (RTMPS with publish-sign tokens) used to wrap onto
   multiple lines with break-all which made the block tower-tall. Switched
   to a single-line horizontal scroll: full URL on one line, scroll-bar
   below if it overflows, triple-click still selects the whole thing thanks
   to user-select:all. min-width:0 on flex parent breaks the default
   flex-min-content rule that caused the sibling copy-button to get pushed
   off the drawer edge. */
.lsm-ik-url-code {
    font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;line-height:1.5;
    color:var(--c-tx);background:var(--c-surf2);padding:8px 10px;border-radius:6px;
    user-select:all;flex:1;min-width:0;
    white-space:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:thin;
}
.lsm-ik-url-code::-webkit-scrollbar { height: 4px; }
.lsm-ik-url-code::-webkit-scrollbar-thumb { background: var(--c-bdr2,#9ca9bc); border-radius:2px; }
.lsm-ik-assign { display:flex;gap:8px;align-items:center;padding:12px 16px 14px;border-top:0.5px solid var(--c-bdr); }
@media (max-width: 560px) {
    .lsm-ik-url-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .lsm-ik-url-row .lsm-fe-copy-btn { align-self: flex-end; }
}

/* ── Concurrent streams quota bar ───────────────────────────────── */
.lsm-fe-cs-quota-bar { margin-top: 0; }
.lsm-fe-cs-quota-count strong { color: var(--c-tx); }

/* ── Error toast for stream limit ──────────────────────────────── */
.lsm-fe-error-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: #791F1F; color: #fff;
    font-size: 13px; font-weight: 500; line-height: 1.4;
    padding: 12px 20px; border-radius: 10px;
    max-width: 420px; text-align: center;
    z-index: 99999; pointer-events: none;
    animation: lsmToastIn .18s ease;
}
@keyframes lsmToastIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* ============================================================
   Stream Toolbar + Pagination + List View
   ============================================================ */
.lsm-fe-stream-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
/* v3.9.195 — Prominent "+ Neuer Stream" CTA above toolbar.
   Solid filled blue to communicate "primary action" — distinct
   from the tab-link buttons elsewhere which are transparent. */
.lsm-fe-streams-header{display:flex;justify-content:flex-end;margin-bottom:12px}
.lsm-fe-primary-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:var(--c-blue);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,transform .05s;box-shadow:0 1px 2px rgba(0,0,0,0.08);letter-spacing:-0.005em}
.lsm-fe-primary-cta:hover{background:var(--c-blue-h,var(--c-blue));transform:translateY(-0.5px)}
.lsm-fe-primary-cta:active{transform:translateY(0)}
.lsm-fe-primary-cta svg{flex-shrink:0}
.lsm-fe-primary-cta.lsm-fe-tab-disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}
.lsm-fe-tb-search{flex:1;min-width:140px;display:flex;align-items:center;gap:7px;background:var(--c-surf2);border:0.5px solid var(--c-bdr);border-radius:8px;padding:0 10px;height:34px;transition:border-color .15s}
.lsm-fe-tb-search:focus-within{border-color:var(--c-blue)}
.lsm-fe-tb-search svg{width:13px;height:13px;color:var(--c-tx3);flex-shrink:0}
.lsm-fe-tb-search input{flex:1;border:none !important;background:transparent !important;font-size:13px;color:var(--c-tx);font-family:inherit;-webkit-appearance:none !important;appearance:none !important;outline:none !important;box-shadow:none !important;padding:0;margin:0}
.lsm-fe-tb-search input:focus,
.lsm-fe-tb-search input:focus-visible,
.lsm-fe-tb-search input:active{outline:none !important;box-shadow:none !important;border:none !important;background:transparent !important}
.lsm-fe-tb-search input::placeholder{color:var(--c-tx3)}
.lsm-fe-tb-search input::-webkit-search-cancel-button,
.lsm-fe-tb-search input::-webkit-search-decoration,
.lsm-fe-tb-search input::-webkit-search-results-button,
.lsm-fe-tb-search input::-webkit-search-results-decoration{-webkit-appearance:none !important;appearance:none !important;display:none}
.lsm-fe-tb-search input:-webkit-autofill,
.lsm-fe-tb-search input:-webkit-autofill:hover,
.lsm-fe-tb-search input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 30px var(--c-surf2) inset !important;-webkit-text-fill-color:var(--c-tx) !important;caret-color:var(--c-tx);transition:background-color 5000s ease-in-out 0s}
.lsm-fe-tb-select{height:34px;border:0.5px solid var(--c-bdr);border-radius:8px;padding:0 30px 0 10px;font-size:12.5px;background-color:var(--c-surf2);color:var(--c-tx);font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
    /* v3.9.334 — Custom dropdown arrow via inline SVG with currentColor.
       Native arrow rendering varies by OS/theme and produced a thick
       opaque arrow that didn't read well in dark mode. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' style='opacity:.5'><path d='M1.5 1.75L6 6.25l4.5-4.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.lsm-fe-app[data-theme="light"] .lsm-fe-tb-select,
:root:not([data-theme="dark"]) .lsm-fe-tb-select {
    /* Light mode arrow — darker stroke for contrast on light surface */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2300000a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' style='opacity:.5'><path d='M1.5 1.75L6 6.25l4.5-4.5'/></svg>");
}
.lsm-fe-tb-views{display:flex;gap:2px;background:var(--c-surf2);border:0.5px solid var(--c-bdr);border-radius:8px;padding:3px}
.lsm-fe-tb-view-btn{width:28px;height:28px;border:none;background:transparent;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--c-tx3)}
.lsm-fe-tb-view-btn svg{width:13px;height:13px}
.lsm-fe-tb-view-btn.active{background:var(--c-surf);color:var(--c-tx);box-shadow:0 0 0 0.5px var(--c-bdr)}
.lsm-fe-tb-count{font-size:11.5px;color:var(--c-tx3);white-space:nowrap}

/* List view rows */
.lsm-fe-event-list.lsm-fe-view-list{display:flex;flex-direction:column;gap:8px}
.lsm-fe-list-row{background:var(--c-surf);border:0.5px solid var(--c-bdr);border-radius:10px;display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:border-color .1s}
.lsm-fe-list-row:hover{border-color:var(--c-bdr2)}
.lsm-fe-list-thumb{width:56px;height:32px;border-radius:6px;overflow:hidden;flex-shrink:0;background:var(--c-surf2)}
.lsm-fe-list-thumb img{width:100%;height:100%;object-fit:cover}
.lsm-fe-list-thumb-ph{width:100%;height:100%;background:linear-gradient(135deg,#1a1030,#2d1042)}
.lsm-fe-list-thumb-phg{width:100%;height:100%;background:linear-gradient(135deg,var(--c-surf2),var(--c-surf))}
.lsm-fe-list-title{flex:1;font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsm-fe-list-date{font-size:11px;color:var(--c-tx3);white-space:nowrap}
.lsm-fe-list-btns{display:flex;gap:3px;flex-shrink:0}
.lsm-fe-list-ic{width:26px;height:26px;border:0.5px solid var(--c-bdr);border-radius:7px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--c-tx3)}

/* Pagination */
.lsm-fe-pagination{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:0.5px solid var(--c-bdr);margin-top:10px}
.lsm-fe-pag-info{font-size:11.5px;color:var(--c-tx3)}
.lsm-fe-pag-btns{display:flex;gap:4px;align-items:center}
.lsm-fe-pag-btn{width:30px;height:30px;border:0.5px solid var(--c-bdr);border-radius:7px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--c-tx3)}
.lsm-fe-pag-btn:disabled{opacity:.3;cursor:not-allowed}
.lsm-fe-pag-btn svg{width:10px;height:10px}
.lsm-fe-pag-page{font-size:12px;padding:0 10px;height:30px;border:0.5px solid var(--c-bdr);border-radius:7px;display:flex;align-items:center;background:var(--c-surf);font-weight:500;color:var(--c-tx)}
.lsm-fe-pag-sep{font-size:12px;color:var(--c-tx3);padding:0 3px}

/* v3.9.319 — Grid-Pagination (Videos / DVR / Clips). Adds a flexible
   spacer + page-size selector to the existing 3-element pagination
   layout so info / nav / size-select line up across the full row. */
.lsm-fe-grid-pag {
    flex-wrap: wrap;
    gap: 10px;
    /* v3.9.320 — pull the pagination strip away from the panel edge.
       Without padding, the right-side page-size select kissed the
       container's edge on both desktop + mobile. The 12px matches
       the visual breathing room around the grid cards above. */
    padding-left: 12px;
    padding-right: 12px;
}
.lsm-fe-pag-spacer {
    flex: 1 1 auto;
    min-width: 8px;
}
.lsm-fe-pag-ps-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--c-tx3);
}
.lsm-fe-pag-ps {
    height: 28px;
    padding: 0 8px;
    border: 0.5px solid var(--c-bdr);
    border-radius: 6px;
    background: var(--c-surf);
    color: var(--c-tx);
    font-size: 12px;
    cursor: pointer;
}
.lsm-fe-pag-ps:focus {
    outline: 2px solid var(--c-blue, #185FA5);
    outline-offset: 1px;
}
@media (max-width: 600px) {
    .lsm-fe-grid-pag {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .lsm-fe-pag-spacer { display: none; }
    .lsm-fe-grid-pag .lsm-fe-pag-info,
    .lsm-fe-grid-pag .lsm-fe-pag-ps-wrap {
        text-align: center;
        justify-content: center;
    }
    .lsm-fe-grid-pag .lsm-fe-pag-btns {
        justify-content: center;
    }
}

/* v3.9.231 — Phase 4: Ingest-Audit-Tab */
.lsm-fe-audit-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--c-bdr);
    border-radius: var(--r, 8px);
    background: var(--c-surf);
}
#lsmFeAuditTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
#lsmFeAuditTable th {
    text-align: left;
    padding: 9px 12px;
    font-weight: 600; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--c-tx3);
    background: var(--c-surf2);
    border-bottom: 1px solid var(--c-bdr);
}
#lsmFeAuditTable td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--c-bdr);
    vertical-align: top;
}
#lsmFeAuditTable tr:last-child td { border-bottom: none; }
#lsmFeAuditTable tr:hover td { background: var(--c-surf2); }
@media (max-width: 700px) {
    .lsm-fe-audit-kpis { grid-template-columns: repeat(2, 1fr) !important; }
    #lsmFeAuditTable { font-size: 11px; }
}

/* v3.9.238 — Inline approve/reject buttons in guest table */
.lsm-fe-reg-inline-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}
.lsm-fe-reg-inline-btn {
    width: 24px; height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--c-bdr);
    border-radius: 5px;
    cursor: pointer;
    color: var(--c-tx3);
    transition: all .12s ease;
}
.lsm-fe-reg-inline-btn:hover:not(:disabled) {
    transform: scale(1.04);
}
.lsm-fe-reg-inline-approve:hover:not(:disabled) {
    color: #16a34a;
    border-color: rgba(22, 163, 74, .4);
    background: rgba(22, 163, 74, .08);
}
.lsm-fe-reg-inline-reject:hover:not(:disabled) {
    color: #dc2626;
    border-color: rgba(220, 38, 38, .4);
    background: rgba(220, 38, 38, .08);
}
.lsm-fe-reg-inline-btn:disabled {
    opacity: .4;
    cursor: wait;
}

/* v3.9.239 — Timeshift & Clips Tab (Phase 1: VoD-Startzeit) */
.lsm-fe-ts-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-ts-section:last-child { border-bottom: none; }
.lsm-fe-ts-section-hd { margin-bottom: 12px; }
.lsm-fe-ts-section-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--c-tx);
}
.lsm-fe-ts-section-sub {
    font-size: 12px;
    color: var(--c-tx3);
    margin-top: 2px;
}
.lsm-fe-ts-empty {
    font-size: 13px;
    color: var(--c-tx3);
    padding: 12px 0;
    text-align: center;
}
.lsm-fe-ts-info-box {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-tx2);
}
.lsm-fe-ts-coming-soon {
    text-align: center;
    padding: 24px 20px;
    background: var(--c-bg3);
    border: 1px dashed var(--c-bdr);
    border-radius: 6px;
    color: var(--c-tx2);
}
.lsm-fe-ts-vodstart-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.lsm-fe-ts-pill {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 12px;
    background: var(--c-bg3);
    color: var(--c-tx3);
    border: 1px solid var(--c-bdr);
}
.lsm-fe-ts-pill-active {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.3);
}
.lsm-fe-ts-session-info {
    font-size: 11.5px;
    color: var(--c-tx3);
}
.lsm-fe-ts-slider-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.lsm-fe-ts-slider {
    flex: 1 1 100%;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--c-bdr);
    outline: none;
}
.lsm-fe-ts-time-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.lsm-fe-ts-time-lbl {
    font-size: 12px;
    color: var(--c-tx3);
    min-width: 32px;
}
.lsm-fe-ts-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--c-brand, #3b82f6);
    cursor: pointer;
    border: 2px solid var(--c-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.lsm-fe-ts-slider::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--c-brand, #3b82f6);
    cursor: pointer;
    border: 2px solid var(--c-bg);
}
.lsm-fe-ts-time-input {
    width: 90px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}
.lsm-fe-ts-hint {
    font-size: 11.5px;
    color: var(--c-tx3);
    margin-bottom: 12px;
    line-height: 1.5;
}
.lsm-fe-ts-hint code {
    background: var(--c-bg3);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}
.lsm-fe-ts-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.lsm-fe-ts-stat {
    font-size: 12px;
    margin-left: 4px;
}
.lsm-fe-ts-preview {
    margin-top: 14px;
    padding: 10px;
    background: var(--c-bg3);
    border-radius: 6px;
}

/* v3.9.244 — VoD Source Picker Cards */
.lsm-fe-vodsrc-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}
.lsm-fe-vodsrc-card {
    position: relative;
    padding: 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-bdr);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lsm-fe-vodsrc-card:hover:not(.lsm-fe-vodsrc-card-active):not(.lsm-fe-vodsrc-card-disabled) {
    border-color: var(--c-brand, #3b82f6);
    background: rgba(59, 130, 246, 0.04);
}
.lsm-fe-vodsrc-card-active {
    border-color: var(--c-brand, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
    box-shadow: 0 0 0 1px var(--c-brand, #3b82f6);
}
.lsm-fe-vodsrc-card-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.lsm-fe-vodsrc-card-icon {
    color: var(--c-tx2);
    opacity: 0.8;
}
.lsm-fe-vodsrc-card-active .lsm-fe-vodsrc-card-icon {
    color: var(--c-brand, #3b82f6);
    opacity: 1;
}
.lsm-fe-vodsrc-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-tx);
}
.lsm-fe-vodsrc-card-desc {
    font-size: 11.5px;
    color: var(--c-tx3);
    line-height: 1.4;
    flex: 1;
}
.lsm-fe-vodsrc-card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--c-tx2);
    margin-top: 4px;
}
.lsm-fe-vodsrc-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
}
.lsm-fe-vodsrc-dot-ok   { background: #16a34a; }
.lsm-fe-vodsrc-dot-warn { background: #f59e0b; }
.lsm-fe-vodsrc-dot-err  { background: #dc2626; }
.lsm-fe-vodsrc-card-active-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--c-brand, #3b82f6);
    display: none;
}
.lsm-fe-vodsrc-card-active .lsm-fe-vodsrc-card-active-badge {
    display: inline-block;
}
.lsm-fe-vodsrc-hint {
    font-size: 11.5px;
    color: var(--c-tx3);
    line-height: 1.5;
    margin-top: 4px;
    padding: 8px 10px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 4px;
}
@media (max-width: 640px) {
    .lsm-fe-vodsrc-cards { grid-template-columns: 1fr; }
}

/* v3.9.245 — VoD-Quelle Card title link */
.lsm-fe-vodsrc-link {
    color: var(--c-tx);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed var(--c-tx3);
    transition: color .15s ease, border-color .15s ease;
}
.lsm-fe-vodsrc-link:hover {
    color: var(--c-brand, #3b82f6);
    border-bottom-color: var(--c-brand, #3b82f6);
}
.lsm-fe-vodsrc-srctag {
    color: var(--c-tx3);
    font-size: 11px;
}

/* v3.9.248 — VoD-Quelle: video preview modal */
.lsm-fe-vodsrc-title {
    font-weight: 600;
    color: var(--c-tx, #0f172a);
    word-break: break-word;
}
.lsm-fe-vodsrc-preview-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-brand, #3b82f6);
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
    align-self: flex-start;
}
.lsm-fe-vodsrc-preview-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Modal */
.lsm-fe-vodsrc-modal-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: lsmVodSrcModalFade 0.15s ease-out;
}
@keyframes lsmVodSrcModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.lsm-fe-vodsrc-modal-box {
    width: 100%;
    max-width: 960px;
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.lsm-fe-vodsrc-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #1e293b;
    color: #e2e8f0;
}
.lsm-fe-vodsrc-modal-title {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 12px;
}
.lsm-fe-vodsrc-modal-close {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    transition: color .12s ease;
}
.lsm-fe-vodsrc-modal-close:hover { color: #fff; }
.lsm-fe-vodsrc-modal-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* ════════════════════════════════════════════════════════
   v3.9.249 — Phase 2 Live-Clips
   ════════════════════════════════════════════════════════ */

/* CTA Section in Timeshift tab */
.lsm-fe-clips-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(124, 58, 237, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    margin-bottom: 14px;
}
.lsm-fe-clips-create-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--c-brand, #3b82f6);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.lsm-fe-clips-create-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}
.lsm-fe-clips-create-btn:active { transform: translateY(0); }
.lsm-fe-clips-cta-meta {
    font-size: 11.5px;
    color: var(--c-tx3);
    margin-left: auto;
}
.lsm-fe-clips-cta-limit { font-weight: 600; color: var(--c-tx2); }

/* Recent clips list */
.lsm-fe-clips-recent { padding: 0; }
.lsm-fe-clips-recent-loading,
.lsm-fe-clips-recent-empty {
    font-size: 12px;
    color: var(--c-tx3);
    padding: 10px 4px;
    text-align: center;
}
.lsm-fe-clips-recent-hd {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-tx3);
    margin-bottom: 6px;
}
.lsm-fe-clips-recent-list { display: flex; flex-direction: column; gap: 6px; }
.lsm-fe-clip-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--c-bg);
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
}
.lsm-fe-clip-row-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-tx);
}
.lsm-fe-clip-row-sub {
    font-size: 11px;
    color: var(--c-tx3);
    margin-top: 2px;
}
.lsm-fe-clip-pill {
    display: inline-block;
    font-size: 10.5px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.15);
    color: var(--c-tx2);
}
.lsm-fe-clip-pill-rendering { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.lsm-fe-clip-pill-ready     { background: rgba(22, 163, 74, 0.15);  color: #15803d; }
.lsm-fe-clip-pill-failed    { background: rgba(220, 38, 38, 0.15);  color: #b91c1c; }

/* ════════ Editor Modal ════════ */

.lsm-fe-clip-editor-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: lsmClipEditorFade 0.15s ease-out;
    /* v3.9.293 — Allow vertical overflow on small viewports.
       Prior to this, when the modal exceeded the viewport height,
       the bottom (Save / Cancel buttons + recording inputs) was
       clipped because both backdrop and box had overflow:hidden.
       The backdrop now scrolls; the box itself uses max-height
       below to stay inside it without clipping the header/footer. */
    overflow-y: auto;
}
@keyframes lsmClipEditorFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lsm-fe-clip-editor-box {
    width: 100%;
    max-width: 920px;
    background: #0f172a;
    border-radius: 12px;
    /* v3.9.293 — Scrollable modal body. The box itself has a
       max-height tied to the viewport (minus the backdrop's
       padding) so the header stays pinned visible. The body
       inside scrolls if its content exceeds the available height. */
    max-height: calc(100vh - 48px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.lsm-fe-clip-editor-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #1e293b;
    color: #e2e8f0;
    /* Header stays pinned at the top while body scrolls. */
    flex-shrink: 0;
}
.lsm-fe-clip-editor-title {
    font-size: 14px;
    font-weight: 600;
}
.lsm-fe-clip-editor-close {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.lsm-fe-clip-editor-close:hover { color: #fff; }

.lsm-fe-clip-editor-body {
    background: #0f172a;
    color: #e2e8f0;
    padding: 0;
    /* v3.9.293 — Scrollable interior. flex:1 + overflow-y:auto means
       the body grows to fill the modal, but anything beyond
       max-height (from .lsm-fe-clip-editor-box) gets a scrollbar. */
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.lsm-fe-clip-editor-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    max-height: 50vh;
}

/* Custom Timeline */
.lsm-fe-clip-editor-timeline {
    padding: 14px 18px 6px;
}
.lsm-fe-clip-tl-track {
    position: relative;
    height: 32px;
    background: #1e293b;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}
.lsm-fe-clip-tl-selection {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.4);
    border-top: 2px solid var(--c-brand, #3b82f6);
    border-bottom: 2px solid var(--c-brand, #3b82f6);
    pointer-events: none;
}
.lsm-fe-clip-tl-handle {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 14px;
    margin-left: -7px;
    background: var(--c-brand, #3b82f6);
    border-radius: 2px;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: background .12s ease;
}
.lsm-fe-clip-tl-handle:hover { background: #2563eb; }
.lsm-fe-clip-tl-handle svg { width: 8px; height: 16px; }
.lsm-fe-clip-tl-handle-in  { /* left handle */ }
.lsm-fe-clip-tl-handle-out { /* right handle */ }
.lsm-fe-clip-tl-playhead {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 2px;
    margin-left: -1px;
    background: #fbbf24;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}
.lsm-fe-clip-tl-times {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 11px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-clip-tl-lbl {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
}
.lsm-fe-clip-tl-dur {
    font-weight: 700;
    font-size: 13px;
    color: #fbbf24;
}
.lsm-fe-clip-tl-dur-over { color: #ef4444 !important; }

/* Editor rows + footer */
.lsm-fe-clip-editor-row {
    padding: 10px 18px;
}
.lsm-fe-clip-editor-presets {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.lsm-fe-clip-preset-lbl {
    font-size: 11px;
    color: #94a3b8;
    margin-right: 4px;
}
.lsm-fe-clip-preset {
    padding: 4px 10px;
    font-size: 12px;
    color: #cbd5e1;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 4px;
    cursor: pointer;
    transition: all .12s ease;
}
.lsm-fe-clip-preset:hover {
    background: #334155;
    color: #fff;
}
.lsm-fe-clip-editor-title-inp {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    color: #e2e8f0;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 4px;
    box-sizing: border-box;
}
.lsm-fe-clip-editor-title-inp:focus {
    border-color: var(--c-brand, #3b82f6);
    outline: none;
}
.lsm-fe-clip-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 18px;
    border-top: 1px solid #1e293b;
}
.lsm-fe-clip-editor-msg {
    font-size: 12px;
    flex: 1;
}
.lsm-fe-clip-warn { color: #ef4444; }
.lsm-fe-clip-info { color: #22c55e; }
.lsm-fe-clip-editor-save {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--c-brand, #3b82f6);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s ease;
}
.lsm-fe-clip-editor-save:hover:not(:disabled) { background: #2563eb; }
.lsm-fe-clip-editor-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* v3.9.257 — Clip ready state (success screen) */
.lsm-fe-clip-ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    color: #e2e8f0;
}
.lsm-fe-clip-ready-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
    font-size: 28px;
    line-height: 56px;
    margin-bottom: 16px;
}
.lsm-fe-clip-ready-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.lsm-fe-clip-ready-sub {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 24px;
}
.lsm-fe-clip-ready-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    background: var(--c-brand, #3b82f6);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, transform .12s ease;
}
.lsm-fe-clip-ready-btn:hover {
    background: #2563eb;
    color: #fff !important;
    transform: translateY(-1px);
}
.lsm-fe-clip-ready-meta {
    margin-top: 18px;
    font-size: 11.5px;
    color: #64748b;
}

/* v3.9.258 — Loading overlay during clip-creation */
.lsm-fe-clip-loading-ov {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 12px;
    animation: lsmClipFadeIn 0.18s ease-out;
}
@keyframes lsmClipFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lsm-fe-clip-loading-card {
    text-align: center;
    color: #e2e8f0;
}
.lsm-fe-clip-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--c-brand, #3b82f6);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: lsmClipSpin 0.8s linear infinite;
}
@keyframes lsmClipSpin {
    to { transform: rotate(360deg); }
}
.lsm-fe-clip-loading-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}
.lsm-fe-clip-loading-sub {
    font-size: 12px;
    color: #94a3b8;
}

/* Status pill: local_only — neutral grey, NOT error */
.lsm-fe-clip-pill-local {
    background: rgba(148, 163, 184, 0.18);
    color: #475569;
}

/* Inline error details for failed clips */
.lsm-fe-clip-row-err {
    font-size: 11px;
    color: #b91c1c;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(220, 38, 38, 0.06);
    border-radius: 4px;
}

/* Make editor-box position:relative so loading-overlay is contained */
.lsm-fe-clip-editor-box {
    position: relative;
}

/* ════════════════════════════════════════════════════════
   v3.9.260 — DVR Timeline Component
   ════════════════════════════════════════════════════════ */

.lsm-fe-tl-wrap { padding: 8px 0; user-select: none; }
.lsm-fe-tl-stats {
    display: flex;
    gap: 14px;
    font-size: 11.5px;
    color: #94a3b8;
    margin-bottom: 28px;
}
.lsm-fe-tl-bar {
    position: relative;
    height: 56px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 6px;
    cursor: crosshair;
}
.lsm-fe-tl-seg {
    position: absolute;
    top: 8px;
    bottom: 8px;
    background: rgba(59, 130, 246, 0.25);
    border: 1px solid rgba(59, 130, 246, 0.55);
    border-radius: 3px;
    box-sizing: border-box;
    transition: background 0.12s ease;
    pointer-events: none;
}
.lsm-fe-tl-seg-live {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.55);
}
.lsm-fe-tl-range {
    position: absolute;
    top: 6px;
    bottom: 6px;
    background: rgba(59, 130, 246, 0.55);
    border: 2px solid #3b82f6;
    border-radius: 3px;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 2;
}
.lsm-fe-tl-handle {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 12px;
    margin-left: -6px;
    background: #3b82f6;
    border-radius: 3px;
    cursor: ew-resize;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background 0.12s ease;
}
.lsm-fe-tl-handle:hover {
    background: #2563eb;
}
.lsm-fe-tl-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1px;
}
.lsm-fe-tl-lbl {
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 500;
    color: #3b82f6;
    white-space: nowrap;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.92);
    padding: 1px 6px;
    border-radius: 3px;
    z-index: 5;
}
.lsm-fe-tl-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-tl-empty {
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.05);
    border-radius: 6px;
}

/* Editor Info-Line (replaces the old IN/DUR/OUT row) */
.lsm-fe-clip-editor-tl-host { padding: 14px 18px 4px; }
.lsm-fe-clip-editor-info {
    font-size: 12.5px;
    color: #cbd5e1;
}
.lsm-fe-clip-info-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.lsm-fe-clip-info-lbl {
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lsm-fe-clip-info-val {
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
}
.lsm-fe-clip-info-dur {
    font-weight: 600;
    color: #fbbf24;
}
.lsm-fe-clip-info-dur-over {
    color: #ef4444;
}

/* ════════════════════════════════════════════════════════
   v3.9.262 — Timeline Focus Mode + Action Buttons + View Modal
   ════════════════════════════════════════════════════════ */

/* Header above the bar */
.lsm-fe-tl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    min-height: 24px;
}
.lsm-fe-tl-help {
    font-size: 11.5px;
    color: #94a3b8;
    font-style: italic;
}
.lsm-fe-tl-focused-hd {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lsm-fe-tl-focused-title {
    font-size: 12.5px;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-tl-live-dot {
    color: #22c55e;
    font-weight: 600;
    font-size: 11px;
}
.lsm-fe-tl-back-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.lsm-fe-tl-back-btn:hover {
    background: rgba(148, 163, 184, 0.22);
}

/* Bar variants */
.lsm-fe-tl-bar-overview {
    cursor: default;
}
.lsm-fe-tl-bar-overview .lsm-fe-tl-seg-clickable {
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.12s ease, transform 0.12s ease;
}
.lsm-fe-tl-bar-overview .lsm-fe-tl-seg-clickable:hover {
    background: rgba(59, 130, 246, 0.55);
    transform: scaleY(1.08);
}
.lsm-fe-tl-bar-focused .lsm-fe-tl-seg-focused {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.4);
    pointer-events: none;
}

/* Action buttons next to clip rows */
.lsm-fe-clip-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lsm-fe-clip-row-main {
    flex: 1;
    min-width: 0;
}
.lsm-fe-clip-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.lsm-fe-clip-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 4px;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.lsm-fe-clip-action:hover {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
}
.lsm-fe-clip-action-dl:hover {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.4);
}
.lsm-fe-clip-action-view:hover {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.4);
}
.lsm-fe-clip-action-rm:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

/* View modal — same pattern as the editor modal */
.lsm-fe-clip-view-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lsmClipFadeIn 0.18s ease-out;
}
.lsm-fe-clip-view-box {
    width: min(900px, 92vw);
    background: #0f172a;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.lsm-fe-clip-view-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.lsm-fe-clip-view-title {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
}
.lsm-fe-clip-view-close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s ease, color 0.12s ease;
}
.lsm-fe-clip-view-close:hover {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
}
.lsm-fe-clip-view-player {
    background: #000;
    aspect-ratio: 16/9;
}

/* ════════════════════════════════════════════════════════
   v3.9.263 — Timeline Zoom Controls + Tick Marks
   ════════════════════════════════════════════════════════ */

.lsm-fe-tl-bar-host {
    position: relative;
    margin: 0 0 4px;
}
.lsm-fe-tl-ticks {
    position: relative;
    height: 18px;
    margin-top: 2px;
    pointer-events: none;
}
.lsm-fe-tl-tick {
    position: absolute;
    top: 0;
    width: 1px;
}
.lsm-fe-tl-tick-major {
    height: 8px;
    background: rgba(148, 163, 184, 0.55);
}
.lsm-fe-tl-tick-minor {
    height: 4px;
    background: rgba(148, 163, 184, 0.25);
}
.lsm-fe-tl-tick-lbl {
    position: absolute;
    top: 9px;
    transform: translateX(-50%);
    font-size: 9.5px;
    color: #94a3b8;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    text-align: center;
}

/* Zoom controls in focus header */
.lsm-fe-tl-zoom-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.lsm-fe-tl-focused-hd {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.lsm-fe-tl-zoom-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 4px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.lsm-fe-tl-zoom-btn:not(:disabled):hover {
    background: rgba(148, 163, 184, 0.22);
    border-color: rgba(148, 163, 184, 0.35);
}
.lsm-fe-tl-zoom-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.lsm-fe-tl-zoom-lbl {
    min-width: 36px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-tl-zoom-reset {
    margin-left: 4px;
    font-size: 14px;
}

/* ════════════════════════════════════════════════════════
   v3.9.265 — Triple-display info grid + URL preview
   ════════════════════════════════════════════════════════ */
.lsm-fe-clip-info-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}
.lsm-fe-clip-info-cell {
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 6px;
    padding: 8px 10px;
}
.lsm-fe-clip-info-cell-dur {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    text-align: center;
}
.lsm-fe-clip-info-cell-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 2px;
}
.lsm-fe-clip-info-cell-val {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}
.lsm-fe-clip-info-cell-sub {
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.35;
}
.lsm-fe-clip-info-cell-sub code {
    background: rgba(148, 163, 184, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    color: #cbd5e1;
}
.lsm-fe-clip-info-arrow {
    color: #64748b;
    font-size: 18px;
}
.lsm-fe-clip-info-dur-over {
    color: #ef4444 !important;
}
.lsm-fe-clip-url-preview {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 6px;
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lsm-fe-clip-url-lbl {
    font-weight: 600;
    color: #cbd5e1;
}
.lsm-fe-clip-url-preview code {
    flex: 1;
    background: rgba(15, 23, 42, 0.7);
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 10.5px;
    color: #94a3b8;
    word-break: break-all;
    min-width: 0;
}
.lsm-fe-clip-url-copy {
    flex-shrink: 0;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #3b82f6;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s;
}
.lsm-fe-clip-url-copy:hover {
    background: rgba(59, 130, 246, 0.25);
}

/* ════════════════════════════════════════════════════════
   v3.9.266 — Letzte Clips: created date + range
   ════════════════════════════════════════════════════════ */
.lsm-fe-clip-row-created {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    white-space: nowrap;
}
.lsm-fe-clip-row-range {
    font-size: 10.5px;
    color: #64748b;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

/* ════════════════════════════════════════════════════════
   v3.9.266 — Meine Clips top-level tab
   ════════════════════════════════════════════════════════ */
.lsm-myclips-hd {
    padding: 16px 20px 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
}
.lsm-myclips-hd-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lsm-myclips-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--c-tx, #e2e8f0);
}
.lsm-myclips-stats {
    font-size: 12.5px;
    color: var(--c-tx2, #94a3b8);
}
.lsm-myclips-stats strong {
    color: var(--c-tx, #e2e8f0);
}

/* v3.9.321 — Plan-Quota-Pill in MyClips header */
.lsm-myclips-quota {
    /* v3.9.326 — sits in flex-row beside title/stats now, no margin-top. */
    margin-top: 0;
    padding: 8px 12px;
    background: var(--c-surf, #ffffff);
    border: 1px solid var(--c-bdr, #c8d0dc);
    border-radius: 8px;
    width: 280px;
    flex-shrink: 0;
}
.lsm-myclips-quota-text {
    font-size: 12px;
    color: var(--c-tx2, #2d3a4a);
    margin-bottom: 6px;
    line-height: 1.4;
}
.lsm-myclips-quota-warn {
    color: var(--c-red, #dc2626);
    font-weight: 600;
}
.lsm-myclips-quota-bar {
    height: 4px;
    background: var(--c-surf2, rgba(0,0,0,.06));
    border-radius: 2px;
    overflow: hidden;
}
.lsm-myclips-quota-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .3s ease, background .3s ease;
}
.lsm-myclips-quota-full {
    border-color: var(--c-red, #dc2626);
    background: rgba(220, 38, 38, 0.04);
}
.lsm-myclips-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 2px 20px 14px;
    border-bottom: 1px solid var(--c-border, rgba(148, 163, 184, 0.15));
}
.lsm-myclips-search {
    flex: 1;
    min-width: 200px;
    max-width: 380px;
    padding: 7px 12px;
    /* v3.9.334 — Tokens statt hardcoded rgba damit Light-/Dark-Mode
       konsistent aussehen. */
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
    color: var(--c-tx);
    font-size: 13px;
    transition: border-color .15s, background .15s;
}
.lsm-myclips-search::placeholder { color: var(--c-tx3); }
.lsm-myclips-search-wrap { position: relative; flex: 1; min-width: 200px; display: flex; align-items: center; }
.lsm-myclips-search-ico { position: absolute; left: 11px; color: var(--c-tx3); pointer-events: none; }
.lsm-myclips-search-wrap .lsm-myclips-search { flex: 1; width: 100%; max-width: none; min-width: 0; padding: 7px 12px 7px 32px; height: 34px; border-radius: 8px; }
.lsm-myclips-search:focus {
    outline: none;
    border-color: var(--c-blue);
    background: var(--c-surf);
    box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}

.lsm-myclips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 18px 20px;
}
.lsm-myclips-card {
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.12s, transform 0.12s;
}
.lsm-myclips-card:hover {
    border-color: rgba(148, 163, 184, 0.25);
    transform: translateY(-1px);
}
.lsm-myclips-card-thumb-wrap {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}
.lsm-myclips-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lsm-myclips-card-thumb-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(148, 163, 184, 0.3);
}
.lsm-myclips-card-thumb-ph svg {
    width: 36px;
    height: 36px;
}
.lsm-myclips-card-dur {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.lsm-myclips-card-body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.lsm-myclips-card-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-tx, #e2e8f0);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lsm-myclips-card-event {
    font-size: 11.5px;
    color: var(--c-tx2, #94a3b8);
    margin-bottom: 6px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* v3.9.326 — Stream-Name auf Clip-Card ist jetzt klickbar (öffnet
   das Event im Drawer). Hover hebt sich vom italic-Lauftext ab. */
.lsm-myclips-card-event-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .12s, border-color .12s;
}
.lsm-myclips-card-event-link:hover,
.lsm-myclips-card-event-link:focus-visible {
    color: var(--c-blue, #1d4ed8);
    border-bottom-color: currentColor;
    outline: none;
}
.lsm-myclips-card-range {
    font-size: 10.5px;
    color: var(--c-tx3, #64748b);
    font-family: ui-monospace, SFMono-Regular, monospace;
    margin-bottom: 6px;
}
.lsm-myclips-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.lsm-myclips-card-created {
    font-size: 10.5px;
    color: var(--c-tx2, #94a3b8);
    font-variant-numeric: tabular-nums;
}
.lsm-myclips-card-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}
/* v3.9.326 — Action-Buttons jetzt im LSM-Standard-Iconbutton-Schema:
   34px Höhe, 1.7px-stroke SVGs (über lsmIcon), neutraler Hover.
   Vorher: 6px-padding mini-Buttons mit Emoji-Icons. */
.lsm-myclips-action {
    flex: 1;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 6px;
    color: var(--c-tx2, #94a3b8);
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lsm-myclips-action svg {
    display: block;
    width: 18px;
    height: 18px;
}
.lsm-myclips-action:hover {
    background: rgba(148, 163, 184, 0.18);
    color: var(--c-tx, #e2e8f0);
}
.lsm-myclips-action-dl:hover { color: #3b82f6; border-color: rgba(59, 130, 246, 0.3); }
.lsm-myclips-action-view:hover { color: #22c55e; border-color: rgba(34, 197, 94, 0.3); }
.lsm-myclips-action-rm:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }

.lsm-myclips-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--c-tx2, #94a3b8);
}
.lsm-myclips-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.lsm-myclips-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-tx, #e2e8f0);
    margin-bottom: 4px;
}
.lsm-myclips-empty-sub {
    font-size: 13px;
    color: var(--c-tx2, #94a3b8);
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════
   v3.9.267 — Edit + Share modals + Session pill + Geteilt-Badge
   ════════════════════════════════════════════════════════ */

/* Session pill in row sub-line */
.lsm-fe-clip-row-session {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 500;
}
.lsm-fe-clip-row-shared {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 500;
}

/* Edit button + Share button styling */
.lsm-fe-clip-action-edit:hover {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}
.lsm-fe-clip-action-share:hover {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}
.lsm-fe-clip-action-share-on {
    color: #22c55e !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    background: rgba(34, 197, 94, 0.1) !important;
}

/* MyClips card geteilt badge */
.lsm-myclips-card-shared-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(34, 197, 94, 0.85);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.lsm-myclips-card-views {
    font-size: 10.5px;
    color: var(--c-tx2, #94a3b8);
    margin-bottom: 6px;
}
.lsm-myclips-action-edit:hover { color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
.lsm-myclips-action-share:hover { color: #22c55e; border-color: rgba(34, 197, 94, 0.3); }
.lsm-myclips-action-share-on {
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
}

/* ── Edit Modal ── */
.lsm-fe-clip-edit-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lsmClipFadeIn 0.18s ease-out;
}
.lsm-fe-clip-edit-box {
    width: min(520px, 92vw);
    max-height: 90vh;
    background: #0f172a;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.lsm-fe-clip-edit-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.lsm-fe-clip-edit-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
}
.lsm-fe-clip-edit-id {
    font-size: 11px;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.lsm-fe-clip-edit-close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.lsm-fe-clip-edit-close:hover {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
}
.lsm-fe-clip-edit-body {
    padding: 16px 18px;
    overflow-y: auto;
}
.lsm-fe-clip-edit-field {
    margin-bottom: 14px;
}
.lsm-fe-clip-edit-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
    margin-bottom: 4px;
}
.lsm-fe-clip-edit-hint {
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    color: #94a3b8;
}
.lsm-fe-clip-edit-field input[type="text"],
.lsm-fe-clip-edit-field textarea {
    width: 100%;
    padding: 8px 12px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.lsm-fe-clip-edit-field input[type="text"]:focus,
.lsm-fe-clip-edit-field textarea:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(148, 163, 184, 0.12);
}
.lsm-fe-clip-edit-toggles {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.lsm-fe-clip-edit-toggle-row {
    margin-bottom: 12px;
}
.lsm-fe-clip-edit-toggle-lbl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 12.5px;
    color: #e2e8f0;
}
.lsm-fe-clip-edit-toggle-lbl input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.lsm-fe-clip-edit-toggle-sub {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
}
.lsm-fe-clip-edit-mod {
    padding-left: 26px;
    margin-top: -4px;
}
.lsm-fe-clip-edit-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
.lsm-fe-clip-edit-msg {
    flex: 1;
    font-size: 11.5px;
    color: #94a3b8;
}
.lsm-fe-clip-edit-cancel,
.lsm-fe-clip-edit-save {
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
}
.lsm-fe-clip-edit-cancel:hover {
    background: rgba(148, 163, 184, 0.22);
}
.lsm-fe-clip-edit-save {
    background: #3b82f6;
    color: #fff;
    font-weight: 500;
}
.lsm-fe-clip-edit-save:hover {
    background: #2563eb;
}
.lsm-fe-clip-edit-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Share Modal ── */
.lsm-fe-clip-share-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lsmClipFadeIn 0.18s ease-out;
}
.lsm-fe-clip-share-box {
    width: min(440px, 92vw);
    background: #0f172a;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    overflow: hidden;
}
.lsm-fe-clip-share-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.lsm-fe-clip-share-title {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
}
.lsm-fe-clip-share-close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.lsm-fe-clip-share-close:hover {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
}
.lsm-fe-clip-share-body {
    padding: 18px;
}
.lsm-fe-clip-share-url-row {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.lsm-fe-clip-share-url-inp {
    flex: 1;
    padding: 8px 10px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.lsm-fe-clip-share-copy {
    padding: 8px 14px;
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 6px;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.lsm-fe-clip-share-copy:hover {
    background: rgba(59, 130, 246, 0.28);
}
.lsm-fe-clip-share-qr {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.lsm-fe-clip-share-stats {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 8px;
}
.lsm-fe-clip-share-toggles {
    padding: 14px 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(148, 163, 184, 0.04);
}
.lsm-fe-clip-share-toggle-row {
    margin-bottom: 8px;
    font-size: 12.5px;
}
.lsm-fe-clip-share-toggle-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #cbd5e1;
}
.lsm-fe-clip-share-disable {
    margin-top: 10px;
    width: 100%;
    padding: 7px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
}
.lsm-fe-clip-share-disable:hover {
    background: rgba(239, 68, 68, 0.2);
}
.lsm-fe-clip-share-disabled {
    text-align: center;
    padding: 14px;
}
.lsm-fe-clip-share-disabled-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.7;
}
.lsm-fe-clip-share-disabled-title {
    font-size: 14px;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 4px;
}
.lsm-fe-clip-share-disabled-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 16px;
    line-height: 1.5;
}
.lsm-fe-clip-share-edit-btn {
    padding: 8px 16px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.lsm-fe-clip-share-edit-btn:hover {
    background: #2563eb;
}

/* ════════════════════════════════════════════════════════
   v3.9.268 — Clip Drawer (reuses .lsm-vd-* layout classes)
   ════════════════════════════════════════════════════════ */
.lsm-myclips-card-clickable {
    cursor: pointer;
}
.lsm-cd-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.lsm-cd-section:last-child {
    border-bottom: none;
}
.lsm-cd-h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-tx, #e2e8f0);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-tx2, #94a3b8);
}
.lsm-cd-player-host {
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.lsm-cd-player-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(148, 163, 184, 0.7);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}
.lsm-cd-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.lsm-cd-meta-cell {
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 6px;
    padding: 8px 12px;
}
.lsm-cd-meta-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-tx3, #64748b);
    margin-bottom: 3px;
}
.lsm-cd-meta-val {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-tx, #e2e8f0);
    font-variant-numeric: tabular-nums;
}
.lsm-cd-desc {
    padding: 12px 14px;
    background: rgba(148, 163, 184, 0.05);
    border-left: 3px solid rgba(59, 130, 246, 0.4);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var(--c-tx2, #cbd5e1);
    line-height: 1.5;
    margin-top: 8px;
}
.lsm-cd-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.lsm-cd-act-rm:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.lsm-cd-msg {
    flex: 1;
    font-size: 12px;
    color: var(--c-tx2, #94a3b8);
}

/* v3.9.270 — Live Insights link in Stream-Info status row */
.lsm-si-insights-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #dc2626;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    margin-left: auto;
    transition: background 0.12s, border-color 0.12s;
}
.lsm-si-insights-link:hover {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(220, 38, 38, 0.5);
    color: #dc2626;
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════
   v3.9.271 — Insights tab in stream drawer
   ════════════════════════════════════════════════════════ */
.lsm-fe-sidenav-badge-live {
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    padding: 1px 5px !important;
    border-radius: 6px;
    animation: lsmInsLivePulse 1.6s ease-in-out infinite;
}
@keyframes lsmInsLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

.lsm-fe-ins-livebanner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 6px;
    margin: 14px 14px 8px;
    color: #ef4444;
    font-size: 13px;
}
.lsm-fe-ins-livebanner b { color: #fca5a5; }
.lsm-fe-ins-livedot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: lsmInsLiveDotPulse 1.4s ease-in-out infinite;
}
.lsm-fe-ins-livedot-sm {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    margin-right: 4px;
    vertical-align: middle;
    animation: lsmInsLiveDotPulse 1.4s ease-in-out infinite;
}
@keyframes lsmInsLiveDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.lsm-fe-ins-list {
    padding: 8px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================
 * v3.9.458 — Live Bitrate Panel
 * ============================================================
 * Top of insights drawer when stream is live. Polls Nimble
 * /manage/live_streams_status every 2s for fresh bitrate/fps
 * data; renders 3 stat cards + 60s spark chart + quality pill.
 */
.lsm-fe-bitrate-panel {
    margin: 14px 14px 16px;
    padding: 14px 16px 12px;
    background: var(--c-surf, #fff);
    border: 1px solid var(--c-bdr, #e2e8f0);
    border-radius: 8px;
}
.lsm-fe-bitrate-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-tx2, #475569);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 12px;
}
.lsm-fe-bitrate-hd-meta {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 11px;
    color: var(--c-tx3, #64748b);
}
.lsm-fe-bitrate-livedot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: lsmInsLiveDotPulse 1.4s ease-in-out infinite;
}
.lsm-fe-bitrate-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.lsm-fe-bitrate-stat {
    background: var(--c-surf2, #f8fafc);
    border-radius: 6px;
    padding: 8px 10px;
    min-width: 0;
}
.lsm-fe-bitrate-stat-lbl {
    font-size: 10.5px;
    color: var(--c-tx3, #64748b);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lsm-fe-bitrate-stat-val {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-tx, #0f172a);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lsm-fe-bitrate-stat-unit {
    font-size: 11px;
    color: var(--c-tx3, #64748b);
    font-weight: 400;
    margin-left: 2px;
}
.lsm-fe-bitrate-spark {
    background: var(--c-surf2, #f8fafc);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.lsm-fe-bitrate-spark-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    color: var(--c-tx3, #64748b);
    margin-bottom: 6px;
}
.lsm-fe-bitrate-spark-toggle {
    display: flex;
    gap: 3px;
}
.lsm-fe-bitrate-spark-toggle button {
    background: transparent;
    border: 1px solid var(--c-bdr, #e2e8f0);
    border-radius: 4px;
    font-size: 10px;
    padding: 2px 7px;
    cursor: pointer;
    color: var(--c-tx2, #475569);
    font-family: inherit;
}
.lsm-fe-bitrate-spark-toggle button.is-active {
    background: var(--c-blue, #1d4ed8);
    border-color: var(--c-blue, #1d4ed8);
    color: #fff;
}
.lsm-fe-bitrate-spark-svg {
    width: 100%;
    height: 70px;
    display: block;
}
.lsm-fe-bitrate-spark-line {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 1.5;
}
.lsm-fe-bitrate-spark-fill {
    fill: rgba(59,130,246,.10);
}
.lsm-fe-bitrate-spark-grid {
    stroke: rgba(0,0,0,.06);
    stroke-dasharray: 2,3;
}
.lsm-fe-bitrate-spark-axis {
    font-size: 9px;
    fill: var(--c-tx4, #94a3b8);
}
.lsm-fe-bitrate-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--c-tx3, #64748b);
}
.lsm-fe-bitrate-codec {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lsm-fe-bitrate-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    cursor: pointer;
    border: 0;
    font-family: inherit;
    transition: opacity .12s;
    flex-shrink: 0;
}
.lsm-fe-bitrate-pill:hover { opacity: .85; }
.lsm-fe-bitrate-pill-stable {
    background: rgba(16,185,129,.14);
    color: #047857;
}
.lsm-fe-bitrate-pill-warn {
    background: rgba(245,158,11,.16);
    color: #b45309;
}
.lsm-fe-bitrate-pill-low {
    background: rgba(239,68,68,.14);
    color: #b91c1c;
}
.lsm-fe-bitrate-pill-pending {
    background: rgba(100,116,139,.14);
    color: #475569;
}
.lsm-fe-bitrate-pill-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Detail Modal */
.lsm-fe-bitrate-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: lsmBitrateModalFadeIn .15s ease;
}
@keyframes lsmBitrateModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lsm-fe-bitrate-modal {
    background: var(--c-surf, #fff);
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    animation: lsmBitrateModalSlideIn .2s ease;
}
@keyframes lsmBitrateModalSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lsm-fe-bitrate-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-bdr, #e2e8f0);
}
.lsm-fe-bitrate-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-tx, #0f172a);
}
.lsm-fe-bitrate-modal-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    color: var(--c-tx3, #64748b);
    line-height: 0;
}
.lsm-fe-bitrate-modal-close:hover {
    background: var(--c-surf2, #f1f5f9);
    color: var(--c-tx, #0f172a);
}
.lsm-fe-bitrate-modal-body {
    padding: 16px 20px 20px;
}
.lsm-fe-bitrate-modal-section {
    margin-bottom: 16px;
}
.lsm-fe-bitrate-modal-section:last-child { margin-bottom: 0; }
.lsm-fe-bitrate-modal-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-tx2, #475569);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}
.lsm-fe-bitrate-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.lsm-fe-bitrate-modal-row {
    background: var(--c-surf2, #f8fafc);
    border-radius: 6px;
    padding: 8px 12px;
}
.lsm-fe-bitrate-modal-row-lbl {
    font-size: 10.5px;
    color: var(--c-tx3, #64748b);
    margin-bottom: 2px;
}
.lsm-fe-bitrate-modal-row-val {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-tx, #0f172a);
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.lsm-fe-bitrate-modal-quality {
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.lsm-fe-bitrate-modal-quality.is-stable {
    background: rgba(16,185,129,.1);
    color: #065f46;
    border: 1px solid rgba(16,185,129,.25);
}
.lsm-fe-bitrate-modal-quality.is-warn {
    background: rgba(245,158,11,.1);
    color: #78350f;
    border: 1px solid rgba(245,158,11,.25);
}
.lsm-fe-bitrate-modal-quality.is-low {
    background: rgba(239,68,68,.1);
    color: #7f1d1d;
    border: 1px solid rgba(239,68,68,.25);
}
.lsm-fe-bitrate-modal-quality b { font-weight: 600; }

/* Dark theme */
[data-theme="dark"] .lsm-fe-bitrate-panel {
    background: var(--c-surf, #1e293b);
    border-color: var(--c-bdr, #334155);
}
[data-theme="dark"] .lsm-fe-bitrate-stat,
[data-theme="dark"] .lsm-fe-bitrate-spark,
[data-theme="dark"] .lsm-fe-bitrate-modal-row {
    background: var(--c-surf2, #0f172a);
}
.lsm-fe-ins-item {
    display: block;
    padding: 12px 14px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    text-decoration: none;
    color: var(--c-tx, #e2e8f0);
    transition: background 0.15s, border-color 0.15s;
}
.lsm-fe-ins-item:hover {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
}
.lsm-fe-ins-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.lsm-fe-ins-item-title {
    font-weight: 600;
    font-size: 13px;
}
.lsm-fe-ins-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.18);
    color: var(--c-tx2, #94a3b8);
}
.lsm-fe-ins-badge-live {
    background: #ef4444;
    color: #fff;
}
.lsm-fe-ins-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11.5px;
    color: var(--c-tx2, #94a3b8);
    margin-bottom: 6px;
}
.lsm-fe-ins-proto {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 10px;
    background: rgba(148, 163, 184, 0.1);
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}
.lsm-fe-ins-item-cta {
    font-size: 11px;
    color: rgba(59, 130, 246, 0.85);
    font-weight: 500;
}

/* ============================================================
   Q&A Bulk-Actions — v3.9.292
   Action-bar fixed at the bottom of the Q&A list area; only
   visible when the moderator has selected one or more cards.
   ============================================================ */
.lsm-qa-bulkbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--c-bg2, #1a1a1a);
    border: 1px solid var(--c-bd, rgba(148,163,184,.18));
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    display: none;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}
.lsm-qa-bulkbar.is-visible { display: flex; }
.lsm-qa-bulkbar-count {
    font-weight: 600;
    color: var(--c-tx1, #e6e6e6);
    margin-right: 6px;
}
.lsm-qa-bulkbar-spacer { flex: 1; }
.lsm-qa-bulkbar-btn {
    background: transparent;
    border: 1px solid var(--c-bd, rgba(148,163,184,.18));
    color: var(--c-tx1, #e6e6e6);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s;
    display: inline-flex; align-items: center; gap: 5px; line-height: 1.3;
}
.lsm-qa-bulkbar-btn svg { stroke: currentColor; fill: none; flex-shrink: 0; }
.lsm-qa-bulkbar-btn:hover { background: rgba(148,163,184,.08); }
.lsm-qa-bulkbar-btn-approve { color: #22c55e; border-color: rgba(34,197,94,.3); }
.lsm-qa-bulkbar-btn-reject  { color: #ef4444; border-color: rgba(239,68,68,.3); }
.lsm-qa-bulkbar-btn-delete  { color: #ef4444; border-color: rgba(239,68,68,.3); }

/* Checkbox column inside each card. The card itself uses class
   .lsm-fe-qa-card; we just add the input as the first child of
   .lsm-fe-qa-meta. Style stays minimal so light-mode inheritance
   works. */
.lsm-qa-bulk-cb {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--c-blue, #3b82f6);
    flex-shrink: 0;
    margin: 0 6px 0 0;
}

/* Mod-Page (standalone /qa/) variant. Inline-CSS lives in PHP so
   we duplicate the rules here under a different prefix to match
   the page's own selectors. */
.qa-bulkbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(20, 20, 28, .92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #f1f5f9;
}
.qa-bulkbar.is-visible { display: flex; }
.qa-bulkbar-count { font-weight: 600; margin-right: 4px; }
.qa-bulkbar-spacer { flex: 1; }
.qa-cb {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: #3b82f6;
    flex-shrink: 0;
}

/* ============================================================
   Auto-Highlight Suggestions — v3.9.293 (redesign v3.9.294)
   Suggestion cards above the recent-clips list. Each card opens
   the clip-editor modal with the suggested range pre-filled.
   ============================================================ */
.lsm-fe-clips-highlights {
    margin: 12px 0 18px;
    padding: 16px;
    border-radius: 12px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    box-shadow: var(--sh-sm);
}
.lsm-fe-clips-hl-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-clips-hl-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-tx);
    letter-spacing: -.1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lsm-fe-clips-hl-sub {
    font-size: 11.5px;
    color: var(--c-tx3);
    font-weight: 400;
}
.lsm-fe-clips-hl-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.lsm-fe-clips-hl-card {
    /* Card resets — buttons inherit too much from browser defaults. */
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* Visual */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
    border-radius: 10px;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    color: var(--c-tx);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
    position: relative;
    overflow: hidden;
}
/* Accent stripe on the left edge — subtle visual cue that these
   are interactive suggestions, not static info. */
.lsm-fe-clips-hl-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #8b5cf6, #6366f1);
    opacity: .65;
    transition: opacity var(--t), width var(--t);
}
.lsm-fe-clips-hl-card:hover {
    transform: translateY(-2px);
    border-color: #a78bfa;
    background: var(--c-surf);
    box-shadow: 0 6px 16px rgba(99, 102, 241, .12);
}
.lsm-fe-clips-hl-card:hover::before {
    opacity: 1;
    width: 4px;
}
.lsm-fe-clips-hl-card:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}
.lsm-fe-clips-hl-card:active {
    transform: translateY(0);
}
.lsm-fe-clips-hl-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.lsm-fe-clips-hl-card-row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--c-bdr);
}
.lsm-fe-clips-hl-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--c-tx);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lsm-fe-clips-hl-when {
    font-size: 11px;
    color: var(--c-tx3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.lsm-fe-clips-hl-meta {
    color: var(--c-tx2);
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-clips-hl-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.lsm-fe-clips-hl-meta-qa {
    background: rgba(139, 92, 246, .12);
    color: #6d28d9;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
}
.lsm-fe-clips-hl-dur {
    background: var(--c-blue-s);
    color: var(--c-blue);
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Dark-theme override: when the user has the dark-theme switch on,
   the body adds a class. Keep the same palette logic but darker
   surfaces and brighter purple accents. */
.lsm-fe-app[data-theme="dark"] .lsm-fe-clips-highlights,
.lsm-theme-dark .lsm-fe-clips-highlights {
    background: rgba(30, 27, 38, .6);
    border-color: rgba(139, 92, 246, .22);
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-clips-hl-card,
.lsm-theme-dark .lsm-fe-clips-hl-card {
    background: rgba(99, 102, 241, .04);
    border-color: rgba(139, 92, 246, .2);
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-clips-hl-card:hover,
.lsm-theme-dark .lsm-fe-clips-hl-card:hover {
    background: rgba(139, 92, 246, .08);
    border-color: rgba(167, 139, 250, .55);
    box-shadow: 0 6px 18px rgba(139, 92, 246, .18);
}

/* ============================================================
   Notification Center — v3.9.295
   ============================================================ */
.lsm-fe-notif-bell {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 4px;
    padding: 0;
    border-radius: 8px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    color: var(--c-tx2);
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.lsm-fe-notif-bell:hover {
    background: var(--c-surf2);
    border-color: var(--c-bdr2);
    color: var(--c-tx);
}
.lsm-fe-notif-bell:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}
.lsm-fe-notif-bell[aria-expanded="true"] {
    background: var(--c-blue-s);
    border-color: var(--c-blue);
    color: var(--c-blue);
}
.lsm-fe-notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--c-red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--c-bg);
    box-sizing: content-box;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-notif-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    width: min(380px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 120px));
    z-index: 100;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .14);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* v3.9.296 — The HTML `hidden` attribute renders as
   `display: none` by default, but our `.lsm-fe-notif-panel`
   rule above sets `display: flex` with higher CSS specificity.
   Result: the panel was always visible. Force `hidden` to win. */
.lsm-fe-notif-panel[hidden] {
    display: none;
}
.lsm-fe-notif-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-bdr);
    background: var(--c-surf2);
    flex-shrink: 0;
}
.lsm-fe-notif-hd strong {
    font-size: 13px;
    color: var(--c-tx);
    font-weight: 700;
    letter-spacing: -.1px;
}
.lsm-fe-notif-allread {
    background: transparent;
    border: none;
    color: var(--c-blue);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background var(--t);
}
.lsm-fe-notif-allread:hover { background: var(--c-blue-s); }
.lsm-fe-notif-allread:disabled {
    color: var(--c-tx4);
    cursor: default;
}
.lsm-fe-notif-allread:disabled:hover { background: transparent; }
.lsm-fe-notif-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.lsm-fe-notif-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--c-tx3);
    font-size: 13px;
}
.lsm-fe-notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-bdr);
    cursor: pointer;
    transition: background var(--t);
    text-decoration: none;
    color: inherit;
}
.lsm-fe-notif-item:last-child { border-bottom: none; }
.lsm-fe-notif-item:hover { background: var(--c-surf2); }
.lsm-fe-notif-item.is-unread {
    background: var(--c-blue-s);
}
.lsm-fe-notif-item.is-unread:hover {
    background: color-mix(in srgb, var(--c-blue-s) 70%, var(--c-blue) 4%);
}
.lsm-fe-notif-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.lsm-fe-notif-icon-clip       { background: rgba(99, 102, 241, .14);  color: #4f46e5; }
.lsm-fe-notif-icon-vod        { background: rgba(34, 197, 94, .14);   color: #15803d; }
.lsm-fe-notif-icon-fail       { background: rgba(220, 38, 38, .14);   color: #b91c1c; }
.lsm-fe-notif-icon-default    { background: var(--c-surf3);           color: var(--c-tx2); }
/* Dark-mode: brighter text for the type-color icons. The base
   tint background stays — it sits well on dark surfaces — but the
   foreground text needs a lighter shade to keep contrast. */
.lsm-fe-app[data-theme="dark"] .lsm-fe-notif-icon-clip { color: #a5b4fc; }
.lsm-fe-app[data-theme="dark"] .lsm-fe-notif-icon-vod  { color: #86efac; }
.lsm-fe-app[data-theme="dark"] .lsm-fe-notif-icon-fail { color: #fca5a5; }
.lsm-fe-notif-body {
    flex: 1;
    min-width: 0;
}
.lsm-fe-notif-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-tx);
    margin: 0 0 2px;
    line-height: 1.35;
}
.lsm-fe-notif-sub {
    font-size: 11.5px;
    color: var(--c-tx3);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.lsm-fe-notif-when {
    font-size: 11px;
    color: var(--c-tx4);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-notif-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 12px;
    border-radius: 50%;
    background: var(--c-blue);
}
.lsm-fe-notif-item:not(.is-unread) .lsm-fe-notif-dot {
    visibility: hidden;
}

/* ============================================================
   Q&A Drawer-Tab Settings Block — v3.9.297
   Sits above the moderation iframe; lets the owner set/clear
   the moderation password directly where they manage Q&A.
   ============================================================ */
.lsm-fe-qa-settings {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--c-bdr);
    background: var(--c-surf);
    transition: border-color var(--t), background var(--t);
}
/* Empty-password state — amber warning emphasis. The Level-1 hotfix
   means this state == "nobody else can moderate". Worth highlighting. */
.lsm-fe-qa-settings.is-empty {
    background: var(--c-amber-s);
    border-color: rgba(217, 119, 6, .35);
}
.lsm-fe-qa-settings.is-set {
    background: var(--c-green-s);
    border-color: rgba(22, 163, 74, .25);
}
.lsm-fe-qa-settings.is-dirty {
    background: var(--c-blue-s);
    border-color: var(--c-blue);
}
.lsm-fe-qa-settings.is-saved {
    border-color: var(--c-green);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}

.lsm-fe-qa-settings-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.lsm-fe-qa-settings-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-tx);
}
.lsm-fe-qa-settings-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.lsm-fe-qa-settings.is-empty .lsm-fe-qa-settings-icon {
    background: var(--c-amber);
    color: #fff;
}
.lsm-fe-qa-settings.is-set .lsm-fe-qa-settings-icon {
    background: var(--c-green);
    color: #fff;
}
.lsm-fe-qa-settings.is-dirty .lsm-fe-qa-settings-icon {
    background: var(--c-blue);
    color: #fff;
}
.lsm-fe-qa-settings-state {
    font-size: 12px;
    color: var(--c-tx2);
    font-weight: 500;
}
.lsm-fe-qa-settings.is-empty .lsm-fe-qa-settings-state { color: #92400e; }
.lsm-fe-qa-settings.is-set   .lsm-fe-qa-settings-state { color: #15803d; }
.lsm-fe-qa-settings.is-dirty .lsm-fe-qa-settings-state { color: var(--c-blue); }

.lsm-fe-qa-settings-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.lsm-fe-qa-pw-input {
    flex: 1 1 auto;
    font-family: var(--mono);
    font-size: 13px;
}
.lsm-fe-qa-pw-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    color: var(--c-tx2);
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.lsm-fe-qa-pw-toggle svg { width: 16px; height: 16px; }
.lsm-fe-qa-pw-toggle:hover  { background: var(--c-surf3); color: var(--c-tx); }
.lsm-fe-qa-pw-toggle.is-on  { background: var(--c-blue-s); color: var(--c-blue); border-color: var(--c-blue); }
.lsm-fe-qa-pw-save {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--c-blue);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: background var(--t), opacity var(--t);
}
.lsm-fe-qa-pw-save:hover:not(:disabled) { background: var(--c-blue-h); }
.lsm-fe-qa-pw-save:disabled { opacity: .4; cursor: default; }

.lsm-fe-qa-settings-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--c-bdr);
    flex-wrap: wrap;
}
.lsm-fe-qa-settings-link {
    font-size: 11.5px;
    color: var(--c-tx3);
    text-decoration: none;
    word-break: break-all;
    line-height: 1.4;
    transition: color var(--t);
}
.lsm-fe-qa-settings-link:hover { color: var(--c-blue); }
.lsm-fe-qa-pw-copy-url {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--c-bdr);
    color: var(--c-tx2);
    font-size: 11px;
    cursor: pointer;
    transition: background var(--t), color var(--t);
}
.lsm-fe-qa-pw-copy-url:hover { background: var(--c-surf2); color: var(--c-tx); }

/* ============================================================
   Auto-Save banner — v3.9.301
   Was previously inline-styled in auto-save.js with hardcoded
   amber colors. Moved to CSS so the dark-mode token system
   applies. The semantic intent is "warning / pending change",
   so we use the amber palette in both themes.
   ============================================================ */
.lsm-autosave-banner {
    background: var(--c-amber-s);
    border: 1px solid var(--c-amber);
    color: var(--c-tx);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    line-height: 1.4;
}
.lsm-autosave-banner .lsm-as-msg {
    flex: 1;
    color: var(--c-tx);
}
.lsm-autosave-banner .lsm-as-msg strong { color: var(--c-tx); }
.lsm-autosave-banner .lsm-as-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.lsm-autosave-banner .lsm-as-restore {
    background: var(--c-amber);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12.5px;
}
.lsm-autosave-banner .lsm-as-restore:hover { filter: brightness(1.08); }
.lsm-autosave-banner .lsm-as-discard {
    background: transparent;
    color: var(--c-tx);
    border: 1px solid var(--c-amber);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12.5px;
}
.lsm-autosave-banner .lsm-as-discard:hover { background: var(--c-amber-s); }

/* ============================================================
   Theme toggle button — v3.9.301
   Sits between the tabs and the notification bell in the app
   header. Three states: light, dark, system (auto). Click cycles.
   ============================================================ */
.lsm-fe-theme-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 4px;
    padding: 0;
    border-radius: 8px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    color: var(--c-tx2);
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.lsm-fe-theme-toggle:hover {
    background: var(--c-surf2);
    border-color: var(--c-bdr2);
    color: var(--c-tx);
}
.lsm-fe-theme-toggle:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}
.lsm-fe-theme-toggle svg {
    width: 16px;
    height: 16px;
}
/* Show only the icon matching the current state. The button
   contains all three icons (sun/moon/monitor) and JS toggles
   data-theme-state on the button. */
.lsm-fe-theme-toggle [data-icon] { display: none; }
.lsm-fe-theme-toggle[data-theme-state="light"]  [data-icon="sun"]     { display: block; }
.lsm-fe-theme-toggle[data-theme-state="dark"]   [data-icon="moon"]    { display: block; }
.lsm-fe-theme-toggle[data-theme-state="system"] [data-icon="monitor"] { display: block; }

/* ============================================================
   Dark-mode component overrides — v3.9.301
   Components that paint on top of the canvas and need
   adjustments beyond the base tokens.
   ============================================================ */

/* Form inputs: native browser dark mode handles input/select/
   textarea reasonably with `color-scheme: dark`, but our custom
   inputs have explicit backgrounds we need to override. */
.lsm-fe-app[data-theme="dark"] .lsm-fe-input,
.lsm-fe-app[data-theme="dark"] textarea.lsm-fe-input,
.lsm-fe-app[data-theme="dark"] select.lsm-fe-input {
    background: var(--c-surf2);
    color: var(--c-tx);
    border-color: var(--c-bdr);
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-input::placeholder {
    color: var(--c-tx4);
}
/* v3.9.406 — Defensively force dark surface on focus state. The base
   :focus rule has `background: var(--c-surf)` but Safari + Firefox
   sometimes briefly apply a white background during focus transitions
   on datetime-local / autofill / certain input types. !important on
   the override defeats that flash. */
.lsm-fe-app[data-theme="dark"] .lsm-fe-input,
.lsm-fe-app[data-theme="dark"] .lsm-fe-input:focus,
.lsm-fe-app[data-theme="dark"] .lsm-fe-input:focus-visible,
.lsm-fe-app[data-theme="dark"] .lsm-fe-input:active,
.lsm-fe-app[data-theme="dark"] textarea.lsm-fe-input,
.lsm-fe-app[data-theme="dark"] select.lsm-fe-input,
.lsm-fe-app[data-theme="dark"] input[type="datetime-local"].lsm-fe-input,
.lsm-fe-app[data-theme="dark"] input[type="date"].lsm-fe-input,
.lsm-fe-app[data-theme="dark"] input[type="time"].lsm-fe-input,
.lsm-fe-app[data-theme="dark"] input[type="url"].lsm-fe-input,
.lsm-fe-app[data-theme="dark"] input[type="text"].lsm-fe-input,
.lsm-fe-app[data-theme="dark"] input[type="email"].lsm-fe-input,
.lsm-fe-app[data-theme="dark"] input[type="number"].lsm-fe-input {
    background-color: var(--c-surf) !important;
    color: var(--c-tx) !important;
    color-scheme: dark;
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-input:focus {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(75, 139, 240, 0.18);
}

/* Buttons that hardcoded white/light backgrounds. Adjust the
   ones we know exist; new components should use vars from the
   start so they don't need overrides here. */
.lsm-fe-app[data-theme="dark"] .lsm-fe-btn-secondary,
.lsm-fe-app[data-theme="dark"] .lsm-fe-btn-ghost {
    background: var(--c-surf2);
    color: var(--c-tx);
    border-color: var(--c-bdr);
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-btn-secondary:hover,
.lsm-fe-app[data-theme="dark"] .lsm-fe-btn-ghost:hover {
    background: var(--c-surf3);
    border-color: var(--c-bdr2);
}

/* Tabs: the active-tab underline + text need to stay visible
   on dark. The tab-bar is mostly token-driven already. */
.lsm-fe-app[data-theme="dark"] .lsm-fe-tab {
    color: var(--c-tx2);
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-tab:hover {
    color: var(--c-tx);
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-tab.active,
.lsm-fe-app[data-theme="dark"] .lsm-fe-tab[aria-selected="true"] {
    color: var(--c-blue);
}

/* Bulk-action bar (Q&A): used dark surface explicitly which
   collides with light mode but OK for dark. The light-mode
   variant needs a fix the other way. v3.9.292 wrote it dark
   thinking it'd be OK in both — but the surrounding context is
   light in light-mode. Re-token both. */
.lsm-qa-bulkbar {
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    box-shadow: var(--sh);
}
.lsm-qa-bulkbar-count { color: var(--c-tx); }
.lsm-qa-bulkbar-btn {
    background: transparent;
    border: 1px solid var(--c-bdr);
    color: var(--c-tx);
}
.lsm-qa-bulkbar-btn:hover { background: var(--c-surf2); }

/* Inline `.qa-bulkbar` (mod-page version) — separately styled.
   Mod page is its own /qa/ route with its own theme system;
   leave that alone. The drawer-iframe variant inherits dark
   from the parent app via ?theme= URL param. */

/* ============================================================
   Global Search — v3.9.303
   ============================================================ */

/* Header trigger button. Compact icon-only on small viewports,
   labelled with a kbd hint on wider ones. Sits between the tabs
   and the theme toggle. */
.lsm-fe-search-trigger {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    margin-left: 8px;
    border-radius: 8px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    color: var(--c-tx3);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.lsm-fe-search-trigger:hover {
    background: var(--c-surf2);
    border-color: var(--c-bdr2);
    color: var(--c-tx);
}
.lsm-fe-search-trigger:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}
.lsm-fe-search-trigger svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.lsm-fe-search-trigger-label {
    font-size: 12.5px;
    color: inherit;
}
.lsm-fe-search-trigger-kbd {
    flex-shrink: 0;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--c-tx3);
}
/* On narrow viewports drop the label + kbd, keep the icon. */
@media (max-width: 720px) {
    .lsm-fe-search-trigger-label,
    .lsm-fe-search-trigger-kbd {
        display: none;
    }
    .lsm-fe-search-trigger {
        width: 36px;
        padding: 0;
        justify-content: center;
    }
}

/* Modal — overlay + centred panel. */
.lsm-fe-search-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483646; /* one below drawer-overlay; modals stack */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 24px 24px;
    pointer-events: none; /* backdrop handles */
}
.lsm-fe-search-modal[hidden] { display: none; }
.lsm-fe-search-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 32, 0.55);
    backdrop-filter: blur(2px);
    pointer-events: auto;
    animation: lsmSearchFadeIn 0.15s ease-out;
}
.lsm-fe-app[data-theme="dark"] .lsm-fe-search-modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}
.lsm-fe-search-modal-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 12px;
    box-shadow: var(--sh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: lsmSearchSlideIn 0.18s cubic-bezier(.25,.46,.45,.94);
}
@keyframes lsmSearchFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lsmSearchSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Lock body scroll while modal is open. The class is added by JS
   on the .lsm-fe-app's parent (we toggle it on documentElement). */
.lsm-search-modal-open { overflow: hidden; }

/* Input row at the top of the panel. */
.lsm-fe-search-modal-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-bdr);
    flex-shrink: 0;
}
.lsm-fe-search-modal-input-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--c-tx3);
}
.lsm-fe-search-modal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--c-tx);
    font-family: inherit;
    font-size: 16px; /* >=16px stops iOS auto-zoom */
    line-height: 1.4;
    padding: 0;
}
.lsm-fe-search-modal-input::placeholder {
    color: var(--c-tx4);
}
.lsm-fe-search-modal-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.lsm-fe-search-modal-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--c-tx3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t), color var(--t);
}
.lsm-fe-search-modal-close:hover {
    background: var(--c-surf2);
    color: var(--c-tx);
}
.lsm-fe-search-modal-close svg { width: 14px; height: 14px; }

/* Body — scrollable list of results. */
.lsm-fe-search-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
}
.lsm-fe-search-modal-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--c-tx3);
    font-size: 13.5px;
    line-height: 1.5;
}
.lsm-fe-search-modal-empty kbd {
    display: inline-block;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--c-tx);
    margin: 0 2px;
}
.lsm-fe-search-modal-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--c-bdr);
    border-top-color: var(--c-blue);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: -2px;
    animation: lsmSearchSpin 0.7s linear infinite;
}
@keyframes lsmSearchSpin {
    to { transform: rotate(360deg); }
}

/* Result sections — grouped per content type. */
.lsm-fe-search-section {
    padding: 6px 0;
}
.lsm-fe-search-section + .lsm-fe-search-section {
    border-top: 1px solid var(--c-bdr);
    margin-top: 4px;
}
.lsm-fe-search-section-label {
    padding: 10px 18px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--c-tx4);
    text-transform: uppercase;
}
.lsm-fe-search-section-count {
    display: inline-block;
    margin-left: 4px;
    background: var(--c-surf2);
    color: var(--c-tx3);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0;
}

/* Individual result card. Native button so keyboard activation
   works (Enter / Space) and ARIA semantics are correct. */
.lsm-fe-search-result {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    color: var(--c-tx);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    transition: background var(--t);
}
.lsm-fe-search-result:hover,
.lsm-fe-search-result:focus-visible {
    background: var(--c-surf2);
    outline: none;
}
.lsm-fe-search-result-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 36px;
    border-radius: 5px;
    background-color: var(--c-surf2);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--c-bdr);
}
.lsm-fe-search-result-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-tx3);
}
.lsm-fe-search-result-icon svg { width: 18px; height: 18px; }
.lsm-fe-search-result-body {
    flex: 1;
    min-width: 0;
}
.lsm-fe-search-result-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}
.lsm-fe-search-result-subtitle {
    font-size: 11.5px;
    color: var(--c-tx3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lsm-fe-search-result-arrow {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--c-tx4);
    opacity: 0;
    transition: opacity var(--t);
}
.lsm-fe-search-result:hover .lsm-fe-search-result-arrow,
.lsm-fe-search-result:focus-visible .lsm-fe-search-result-arrow {
    opacity: 1;
}

/* ============================================================
   Global Search — Phase 2 (v3.9.305)
   Filter chips + first-result highlight + "X weitere..." link.
   ============================================================ */

/* Chip strip — sits between the input row and the body. Hidden
   when the modal is in idle/recents state. */
.lsm-fe-search-chip-strip {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--c-bdr);
    background: var(--c-surf2);
}
.lsm-fe-search-chip-strip[hidden] { display: none; }

.lsm-fe-search-chip {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 11px;
    background: transparent;
    border: 1px solid var(--c-bdr);
    border-radius: 999px;
    color: var(--c-tx2);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.lsm-fe-search-chip:hover {
    background: var(--c-surf);
    border-color: var(--c-bdr2);
    color: var(--c-tx);
}
.lsm-fe-search-chip.active {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: #fff;
}
.lsm-fe-search-chip.active .lsm-fe-search-chip-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.lsm-fe-search-chip.empty {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.lsm-fe-search-chip-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    background: var(--c-surf3);
    color: var(--c-tx3);
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
}
.lsm-fe-search-chip:hover .lsm-fe-search-chip-count {
    background: var(--c-surf2);
}

/* First-result visual highlight — tells users what Enter will do.
   Subtle: thin blue left border + slightly lifted background. */
.lsm-fe-search-result.is-first {
    background: var(--c-blue-s);
    box-shadow: inset 3px 0 0 var(--c-blue);
}
.lsm-fe-search-result.is-first:hover,
.lsm-fe-search-result.is-first:focus-visible {
    background: var(--c-blue-s);
    /* Hover deepens the hint via the arrow/border but doesn't
       change the background — would feel jumpy. */
}
.lsm-fe-search-result.is-first .lsm-fe-search-result-arrow {
    opacity: 1;
    color: var(--c-blue);
}

/* "X weitere anzeigen ➜" link below a section when results were
   capped at the default per-type limit. Click switches the active
   filter chip to that type. */
.lsm-fe-search-section-more {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: calc(100% - 36px);
    margin: 4px 18px 8px;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed var(--c-bdr);
    border-radius: 6px;
    color: var(--c-blue);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background var(--t), border-color var(--t);
}
.lsm-fe-search-section-more:hover {
    background: var(--c-blue-s);
    border-color: var(--c-blue);
    border-style: solid;
}

/* ============================================================
   Q&A Mod Tokens — v3.9.307
   Owner UI block in the drawer Q&A tab. Sits below the password
   settings block (which remains for backwards compatibility).
   ============================================================ */

.lsm-fe-qa-tokens {
    margin: 14px 0 18px;
    padding: 14px 16px;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: 8px;
}
.lsm-fe-qa-tokens-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.lsm-fe-qa-tokens-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-tx);
}
.lsm-fe-qa-tokens-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-tx2);
}
.lsm-fe-qa-tokens-icon svg { width: 14px; height: 14px; }
.lsm-fe-qa-tokens-desc {
    font-size: 12px;
    color: var(--c-tx3);
    line-height: 1.5;
    margin-bottom: 12px;
}
.lsm-fe-qa-token-new-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-blue);
    border: none;
    color: #fff;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t);
}
.lsm-fe-qa-token-new-btn:hover {
    background: var(--c-blue-h);
}
.lsm-fe-qa-token-new-btn span {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

/* List + rows. */
.lsm-fe-qa-tokens-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lsm-fe-qa-tokens-empty,
.lsm-fe-qa-tokens-loading {
    padding: 16px 8px;
    text-align: center;
    color: var(--c-tx3);
    font-size: 12.5px;
    line-height: 1.5;
}

.lsm-fe-qa-token-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
    transition: border-color var(--t);
}
.lsm-fe-qa-token-row.is-revoked,
.lsm-fe-qa-token-row.is-expired {
    opacity: 0.55;
}
.lsm-fe-qa-token-row.is-revoked .lsm-fe-qa-token-row-label,
.lsm-fe-qa-token-row.is-expired .lsm-fe-qa-token-row-label {
    text-decoration: line-through;
    text-decoration-color: var(--c-tx3);
}
.lsm-fe-qa-token-row-main {
    flex: 1;
    min-width: 0;
}
.lsm-fe-qa-token-row-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}
.lsm-fe-qa-token-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    margin-bottom: 4px;
}
.lsm-fe-qa-token-perm {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.lsm-fe-qa-token-perm.is-mod {
    background: var(--c-blue-s);
    color: var(--c-blue);
}
.lsm-fe-qa-token-perm.is-admin {
    background: var(--c-amber-s);
    color: var(--c-amber);
}
.lsm-fe-qa-token-status {
    color: var(--c-tx3);
}
.lsm-fe-qa-token-row.is-active .lsm-fe-qa-token-status {
    color: var(--c-green);
}
.lsm-fe-qa-token-row.is-revoked .lsm-fe-qa-token-status {
    color: var(--c-red);
}
.lsm-fe-qa-token-mask {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--c-tx4);
    background: var(--c-surf2);
    padding: 1px 6px;
    border-radius: 3px;
}
.lsm-fe-qa-token-row-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: var(--c-tx3);
}
.lsm-fe-qa-token-row-actions {
    flex-shrink: 0;
}
.lsm-fe-qa-token-revoke {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--c-bdr);
    color: var(--c-tx2);
    border-radius: 5px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.lsm-fe-qa-token-revoke:hover {
    background: var(--c-red-s);
    border-color: var(--c-red);
    color: var(--c-red);
}

/* Create-token modal. */
.lsm-fe-qa-token-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    display: none;
}
.lsm-fe-qa-token-modal.open { display: block; }

.lsm-fe-qa-token-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 32, 0.55);
    backdrop-filter: blur(2px);
}
.lsm-fe-app[data-theme="dark"] ~ .lsm-fe-qa-token-modal .lsm-fe-qa-token-modal-backdrop,
.lsm-fe-qa-token-modal.is-dark .lsm-fe-qa-token-modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

.lsm-fe-qa-token-modal-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 480px;
    background: var(--c-surf, #fff);
    color: var(--c-tx, #0a1020);
    border: 1px solid var(--c-bdr, #c8d0dc);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    animation: lsmQaTokenModalIn 0.18s cubic-bezier(.25,.46,.45,.94);
}
@keyframes lsmQaTokenModalIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.lsm-fe-qa-token-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-qa-token-modal-hd h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}
.lsm-fe-qa-token-modal-close {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--c-tx3);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
}
.lsm-fe-qa-token-modal-close:hover { color: var(--c-tx); }

.lsm-fe-qa-token-modal-body {
    padding: 18px;
}
.lsm-fe-qa-token-modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lsm-fe-qa-token-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lsm-fe-qa-token-modal-field span {
    font-size: 12px;
    font-weight: 500;
    color: var(--c-tx2);
}
.lsm-fe-qa-token-modal-field span em {
    font-style: italic;
    font-weight: 400;
    color: var(--c-tx4);
}
.lsm-fe-qa-token-modal-field input[type="text"],
.lsm-fe-qa-token-modal-field select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    color: var(--c-tx);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    transition: border-color var(--t);
}
.lsm-fe-qa-token-modal-field select {
    padding-right: 28px;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-tx3) 50%),
                      linear-gradient(135deg, var(--c-tx3) 50%, transparent 50%);
    background-position: right 12px top 50%, right 8px top 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}
.lsm-fe-qa-token-modal-field input[type="text"]:focus,
.lsm-fe-qa-token-modal-field select:focus {
    outline: none;
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px var(--c-blue-s);
}

.lsm-fe-qa-token-modal-result {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lsm-fe-qa-token-modal-result-warn {
    background: var(--c-amber-s);
    border: 1px solid var(--c-amber);
    color: var(--c-tx);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.45;
}
.lsm-fe-qa-token-modal-result-warn strong { color: var(--c-tx); }
.lsm-fe-qa-token-modal-result-url {
    display: flex;
    gap: 6px;
}
.lsm-fe-qa-token-modal-result-url input {
    flex: 1;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    color: var(--c-tx);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.4;
}
.lsm-fe-qa-token-modal-result-url button {
    appearance: none;
    -webkit-appearance: none;
    background: var(--c-blue);
    border: none;
    color: #fff;
    border-radius: 6px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}
.lsm-fe-qa-token-modal-result-url button:hover {
    background: var(--c-blue-h);
}
.lsm-fe-qa-token-modal-result-meta {
    font-size: 12px;
    color: var(--c-green);
}

.lsm-fe-qa-token-modal-error {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--c-red-s);
    border: 1px solid var(--c-red);
    color: var(--c-red);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.lsm-fe-qa-token-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--c-bdr);
    background: var(--c-surf2);
}
.lsm-fe-qa-token-modal-foot button {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--c-bdr);
    color: var(--c-tx);
    border-radius: 6px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
}
.lsm-fe-qa-token-modal-foot button:hover {
    background: var(--c-surf3);
    border-color: var(--c-bdr2);
}
.lsm-fe-qa-token-modal-foot .lsm-fe-qa-token-modal-submit,
.lsm-fe-qa-token-modal-foot .lsm-fe-qa-token-modal-done {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: #fff;
    font-weight: 500;
}
.lsm-fe-qa-token-modal-foot .lsm-fe-qa-token-modal-submit:hover,
.lsm-fe-qa-token-modal-foot .lsm-fe-qa-token-modal-done:hover {
    background: var(--c-blue-h);
    border-color: var(--c-blue-h);
}
.lsm-fe-qa-token-modal-foot .lsm-fe-qa-token-modal-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   Q&A Mod Audit Log — v3.9.308
   Sub-tab rendering inside the existing token block. The first
   sub-tab is the existing token list; the second is the audit
   activity log with filter dropdowns + paginated entries.
   ============================================================ */

/* Sub-tab strip below the description, above the panes. */
.lsm-fe-qa-tokens-subtabs {
    display: flex;
    gap: 4px;
    margin: 10px 0 12px;
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-qa-tokens-subtab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px 9px;
    margin-bottom: -1px;
    color: var(--c-tx3);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--t), border-color var(--t);
}
.lsm-fe-qa-tokens-subtab:hover {
    color: var(--c-tx);
}
.lsm-fe-qa-tokens-subtab.active {
    color: var(--c-blue);
    border-bottom-color: var(--c-blue);
}

/* Filter bar at the top of the audit pane. */
.lsm-fe-qa-audit-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.lsm-fe-qa-audit-filter {
    appearance: none;
    -webkit-appearance: none;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    color: var(--c-tx);
    border-radius: 6px;
    padding: 5px 26px 5px 10px;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.4;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-tx3) 50%),
                      linear-gradient(135deg, var(--c-tx3) 50%, transparent 50%);
    background-position: right 11px top 50%, right 7px top 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    transition: border-color var(--t);
}
.lsm-fe-qa-audit-filter:hover {
    border-color: var(--c-bdr2);
}
.lsm-fe-qa-audit-filter:focus {
    outline: none;
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px var(--c-blue-s);
}

/* Audit list — vertical stack of rows. */
.lsm-fe-qa-audit-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
    background: var(--c-surf);
    overflow: hidden;
}
.lsm-fe-qa-audit-row {
    display: grid;
    grid-template-columns: 90px 28px 1fr;
    gap: 10px;
    padding: 10px 12px;
    align-items: start;
    border-bottom: 1px solid var(--c-bdr);
}
.lsm-fe-qa-audit-row:last-child { border-bottom: 0; }

.lsm-fe-qa-audit-time {
    font-size: 11px;
    color: var(--c-tx3);
    line-height: 1.5;
    white-space: nowrap;
    padding-top: 1px;
}
.lsm-fe-qa-audit-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    background: var(--c-surf3);
    color: var(--c-tx2);
}
.lsm-fe-qa-audit-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}
/* v3.9.311 — Action-state hint via a subtle left-border on the
   row instead of a coloured icon. Keeps the icon family monochrome
   (matches drawer + everything else) while still telegraphing
   approve / reject / pending visually. */
.lsm-fe-qa-audit-row[data-action="approve"],
.lsm-fe-qa-audit-row[data-action="answer"],
.lsm-fe-qa-audit-row[data-action="pin"]      { box-shadow: inset 3px 0 0 var(--c-green); }
.lsm-fe-qa-audit-row[data-action="reject"],
.lsm-fe-qa-audit-row[data-action="delete"],
.lsm-fe-qa-audit-row[data-action="token_revoked"] { box-shadow: inset 3px 0 0 var(--c-red); }
.lsm-fe-qa-audit-row[data-action="login"],
.lsm-fe-qa-audit-row[data-action="token_created"] { box-shadow: inset 3px 0 0 var(--c-blue); }
/* The .is-* classes on the icon are kept on the markup for
   backwards compat but no longer apply colour — neutral icon
   for everything. */

.lsm-fe-qa-audit-main {
    min-width: 0;
}
.lsm-fe-qa-audit-line {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-tx);
    overflow: hidden;
    text-overflow: ellipsis;
}
.lsm-fe-qa-audit-actor {
    color: var(--c-tx);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px dotted transparent;
    transition: border-color var(--t), color var(--t);
}
.lsm-fe-qa-audit-actor:hover {
    color: var(--c-blue);
    border-bottom-color: var(--c-blue);
}
.lsm-fe-qa-audit-actor.is-owner {
    color: var(--c-amber);
}
.lsm-fe-qa-audit-actor.is-anon {
    color: var(--c-tx4);
    cursor: default;
    border-bottom: none;
}
.lsm-fe-qa-audit-verb {
    color: var(--c-tx2);
}
.lsm-fe-qa-audit-ref {
    color: var(--c-tx3);
    font-family: var(--mono);
    font-size: 11px;
    background: var(--c-surf2);
    padding: 1px 6px;
    border-radius: 3px;
}
.lsm-fe-qa-audit-snippet {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--c-tx3);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.lsm-fe-qa-audit-snippet em {
    font-style: italic;
    color: var(--c-tx3);
}

/* Footer: "Mehr laden" + counter. */
.lsm-fe-qa-audit-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    padding: 4px 0;
}
.lsm-fe-qa-audit-more {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--c-bdr);
    color: var(--c-tx);
    border-radius: 6px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
}
.lsm-fe-qa-audit-more:hover:not(:disabled) {
    background: var(--c-surf2);
    border-color: var(--c-bdr2);
}
.lsm-fe-qa-audit-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.lsm-fe-qa-audit-counter {
    font-size: 11px;
    color: var(--c-tx3);
}

/* ============================================================
   Q&A Action Bar + Modals — v3.9.310
   The drawer Q&A tab shows two compact buttons (password +
   tokens). Each opens a centred modal that hosts the existing
   UI, untouched.

   Styling matches the drawer sidenav tabs: monochrome SVG
   icons, no fill colors, subtle hover background, status pill
   on the right with semantic green/amber. Replaces the
   v3.9.309 nectar-button approach which inherited theme
   hover styles (white text on accent) that didn't match the
   surrounding drawer aesthetic.
   ============================================================ */

/* The action-bar sits above the iframe, two equal-width buttons. */
.lsm-fe-qa-actionbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 14px;
}
@media (max-width: 540px) {
    .lsm-fe-qa-actionbar { grid-template-columns: 1fr; }
}

.lsm-fe-qa-actionbar-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 8px;
    color: var(--c-tx);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    box-shadow: none;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.lsm-fe-qa-actionbar-btn:hover {
    background: var(--c-surf2);
    border-color: var(--c-bdr2);
    color: var(--c-tx);
}
.lsm-fe-qa-actionbar-btn:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}

/* Monochrome icon — uses currentColor stroke so it shifts with
   the button's text color in any theme. */
.lsm-fe-qa-actionbar-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--c-surf2);
    color: var(--c-tx2);
    transition: background var(--t), color var(--t);
}
.lsm-fe-qa-actionbar-btn:hover .lsm-fe-qa-actionbar-icon {
    background: var(--c-surf3);
    color: var(--c-tx);
}
.lsm-fe-qa-actionbar-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.lsm-fe-qa-actionbar-label {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-tx);
}

/* Status pill — semantic green/amber, dims on hover so the
   primary affordance (the button itself) reads stronger. */
.lsm-fe-qa-actionbar-state {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--c-surf2);
    color: var(--c-tx3);
    transition: background var(--t);
}
.lsm-fe-qa-actionbar-state.is-set {
    background: var(--c-green-s);
    color: var(--c-green);
}
.lsm-fe-qa-actionbar-state.is-empty {
    background: var(--c-amber-s);
    color: var(--c-amber);
}

/* ─── The modals themselves ──────────────────────────────── */

.lsm-fe-qa-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: none;
}
.lsm-fe-qa-modal.open { display: block; }

.lsm-fe-qa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 32, 0.55);
    backdrop-filter: blur(2px);
    animation: lsmQaModalFadeIn 0.15s ease-out;
}
.lsm-fe-app[data-theme="dark"] ~ .lsm-fe-qa-modal .lsm-fe-qa-modal-backdrop,
.lsm-fe-qa-modal.is-dark .lsm-fe-qa-modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

.lsm-fe-qa-modal-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 540px;
    max-height: calc(100vh - 64px);
    background: var(--c-surf, #fff);
    color: var(--c-tx, #0a1020);
    border: 1px solid var(--c-bdr, #c8d0dc);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: lsmQaModalIn 0.18s cubic-bezier(.25,.46,.45,.94);
}
.lsm-fe-qa-modal-wide .lsm-fe-qa-modal-panel {
    max-width: 760px;
}

@keyframes lsmQaModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lsmQaModalIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.lsm-fe-qa-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-bdr);
    flex-shrink: 0;
}
.lsm-fe-qa-modal-hd h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-tx);
}
.lsm-fe-qa-modal-hd-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--c-surf2);
    color: var(--c-tx2);
    flex-shrink: 0;
}
.lsm-fe-qa-modal-hd-icon svg { width: 16px; height: 16px; }
.lsm-fe-qa-modal-close {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--c-tx3);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t), color var(--t);
}
.lsm-fe-qa-modal-close:hover {
    background: var(--c-surf2);
    color: var(--c-tx);
}

.lsm-fe-qa-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
}
/* When the modal hosts the password settings block / tokens block,
   we strip the inner block's own card chrome (border, surface bg,
   outer padding) since the modal already provides that. We do NOT
   strip internal padding of sub-elements like rows, filter bars
   etc. — those still need their own breathing room. */
.lsm-fe-qa-modal-body .lsm-fe-qa-settings,
.lsm-fe-qa-modal-body .lsm-fe-qa-tokens {
    margin: 0;
    border: none;
    background: transparent;
    padding: 0;
}
/* Hide the internal block header — the modal header already
   shows "Moderations-Tokens" / "Moderations-Passwort"; showing
   it twice (once in modal-hd, once inline in the block) was
   visually confusing. Description text still shows. */
.lsm-fe-qa-modal-body .lsm-fe-qa-tokens-hd,
.lsm-fe-qa-modal-body .lsm-fe-qa-settings-hd {
    display: none;
}
/* The "+ Neuer Token" button lived inside the now-hidden header.
   Re-surface it as a full-width button below the description so
   it stays accessible inside the modal. */
.lsm-fe-qa-modal-body .lsm-fe-qa-tokens-desc {
    margin-bottom: 12px;
    color: var(--c-tx2);
    font-size: 12.5px;
    line-height: 1.55;
}

/* Token rows: ensure they have a visible card surface inside the
   modal (the parent block reset stripped its background, so each
   row needs its own to read as a list item). */
.lsm-fe-qa-modal-body .lsm-fe-qa-tokens-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lsm-fe-qa-modal-body .lsm-fe-qa-token-row {
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
}

/* Audit-list inside modal: keep the card surface for readability. */
.lsm-fe-qa-modal-body .lsm-fe-qa-audit-list {
    background: var(--c-surf2);
}

/* Settings block inputs / labels need clear contrast in the modal
   context — the flat surface makes pale placeholder hard to see. */
.lsm-fe-qa-modal-body .lsm-fe-qa-settings-row {
    margin: 8px 0 12px;
}
.lsm-fe-qa-modal-body .lsm-fe-qa-settings-foot {
    color: var(--c-tx3);
}

/* ============================================================
   Q&A Token modal: "+ Neuer Token" button placement override
   v3.9.311 — In the modal context the button moves out of the
   hidden block header into a full-width slot below the
   description. The original right-aligned compact pill style
   doesn't read in this position; we restyle to a clearer CTA.
   ============================================================ */
.lsm-fe-qa-modal-newbtn-wrap {
    margin: 0 0 14px;
}
.lsm-fe-qa-token-new-btn--in-modal {
    width: 100%;
    justify-content: center;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 500;
    border-radius: 8px !important;
}

/* ============================================================
   Presence badges + status icons — v3.9.312
   Status indicators (presence dot, registration status icon)
   used to be color-coded emoji (🟢🟡🔴). Now monochrome SVG
   tinted via inline color or via CSS class. Kept the semantic
   color (green = active, amber = idle, red = inactive) to
   preserve at-a-glance scanning, but the icon family is unified.
   ============================================================ */
.lsm-guests-presence {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lsm-guests-presence svg {
    stroke: currentColor;
    fill: currentColor;
}
.lsm-guests-presence.watching { color: var(--c-green); }
.lsm-guests-presence.landing  { color: var(--c-amber); }
.lsm-guests-presence.offline  { color: var(--c-tx4); }
.lsm-guests-presence.never    { color: var(--c-tx4); }

/* Make the circle icon visually filled (since it's a status dot
   not an outline icon). Override the default stroke-only render. */
.lsm-guests-presence svg circle { fill: currentColor; stroke: none; }


/* ───────────────────────────────────────────────────────────── */
/*  v3.9.342 — Simulated Livestream (scheduled events)           */
/* ───────────────────────────────────────────────────────────── */

/* Type-Switch: two card-like radio options for live vs. scheduled.
   Pattern follows the existing inactive-mode dropdown styling but is
   visually richer because the choice is more architecturally significant
   (different feature set, different UX flow). */
.lsm-fe-type-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 600px) {
    .lsm-fe-type-switch { grid-template-columns: 1fr; }
}
/* v3.9.447 — Inside drawer also single-column always */
.lsm-fe-modal .lsm-fe-type-switch {
    grid-template-columns: 1fr;
}
.lsm-fe-type-option {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.lsm-fe-type-option:hover { border-color: var(--c-bdr2, #9ca9bc); }
.lsm-fe-type-option.is-active {
    border-color: var(--c-blue, #1d4ed8);
    background: var(--c-surf2, #f6f9ff);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .08);
}
.lsm-fe-type-option input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.lsm-fe-type-option-body {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1;
}
.lsm-fe-type-option-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--c-tx);
}
.lsm-fe-type-option-sub {
    font-size: 11.5px; color: var(--c-tx3); line-height: 1.45;
}
.lsm-fe-tag-pro {
    display: inline-block;
    padding: 1px 6px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-left: 4px;
}

/* v3.9.350 — PRIO 1: Post-End-Action radio switch.
   Three options stacked vertically (longer labels than the 2-col
   stream-type switch, and three options don't fit cleanly side-by-side
   on most drawer widths). Visual treatment otherwise mirrors
   .lsm-fe-type-switch so the form stays cohesive. */
.lsm-fe-post-end-switch {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.lsm-fe-post-end-option {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.lsm-fe-post-end-option:hover { border-color: var(--c-bdr2, #9ca9bc); }
.lsm-fe-post-end-option.is-active {
    border-color: var(--c-blue, #1d4ed8);
    background: var(--c-surf2, #f6f9ff);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .08);
}
.lsm-fe-post-end-option input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.lsm-fe-post-end-option-body {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1;
}
.lsm-fe-post-end-option-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--c-tx);
}
.lsm-fe-post-end-option-sub {
    font-size: 11.5px; color: var(--c-tx3); line-height: 1.45;
}
.lsm-fe-post-end-default {
    display: inline-block;
    padding: 1px 6px;
    background: var(--c-bdr, #e5e7eb);
    color: var(--c-tx2, #4b5563);
    font-size: 9.5px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-left: 4px;
}

/* State pill — one of: draft, uploading, ready, prefetched, live,
   finished, cancelled, error. Color-coded for quick visual scan. */
.lsm-fe-scheduled-state {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--c-surf2, #f6f9ff);
    border-radius: var(--r);
    border: 1px solid var(--c-bdr);
}
.lsm-fe-scheduled-state-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.lsm-fe-scheduled-state-pill[data-state="draft"]      { background: var(--c-bdr); color: var(--c-tx); }
.lsm-fe-scheduled-state-pill[data-state="uploading"]  { background: #dbeafe; color: #1e40af; }
.lsm-fe-scheduled-state-pill[data-state="transcoding"]{ background: #fef3c7; color: #92400e; }
.lsm-fe-scheduled-state-pill[data-state="ready"]      { background: #d1fae5; color: #065f46; }
.lsm-fe-scheduled-state-pill[data-state="prefetched"] { background: #ddd6fe; color: #5b21b6; }
.lsm-fe-scheduled-state-pill[data-state="live"]       { background: #fee2e2; color: #991b1b; animation: lsm-fe-live-pulse 2s ease-in-out infinite; }
.lsm-fe-scheduled-state-pill[data-state="finished"]   { background: var(--c-bdr); color: var(--c-tx3); }
.lsm-fe-scheduled-state-pill[data-state="cancelled"]  { background: var(--c-bdr); color: var(--c-tx4); }
.lsm-fe-scheduled-state-pill[data-state="error"]      { background: #fee2e2; color: #b91c1c; }
@keyframes lsm-fe-live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .65; }
}
.lsm-fe-scheduled-err {
    flex: 1;
    font-size: 11.5px;
    color: var(--c-red, #b91c1c);
    font-style: italic;
}

/* Slot status indicator beneath the date-time picker. JS fills via
   /wp-json/lsm/v1/scheduled-slots?date=... */
.lsm-fe-slot-status {
    margin-top: 6px;
    min-height: 16px;
    font-size: 11.5px;
    color: var(--c-tx3);
}
.lsm-fe-slot-status[data-state="ok"]    { color: var(--c-green, #15803d); }
.lsm-fe-slot-status[data-state="warn"]  { color: var(--c-orange, #c2410c); }
.lsm-fe-slot-status[data-state="full"]  { color: var(--c-red, #b91c1c); }

/* Existing-file marker (when a Bunny upload is already linked) */
.lsm-fe-scheduled-file-existing {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--c-surf2, #f6f9ff);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r);
    font-size: 12.5px;
    color: var(--c-tx);
}
.lsm-fe-scheduled-file-existing svg { color: var(--c-green, #15803d); }
.lsm-fe-scheduled-bunny-id {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: var(--c-tx3);
    background: var(--c-surf);
    padding: 2px 6px;
    border-radius: 4px;
}

/* "GEPLANT"-Badge auf Stream-Cards (ergänzt LIVE/INACTIVE/etc.) */
.lsm-fe-card-status-badge--scheduled {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}
.lsm-fe-card-status-badge--scheduled::before {
    content: '⏱';
    margin-right: 4px;
}

/* v3.9.355 — "BEENDET"-Badge für scheduled events deren Stream
   abgelaufen ist (state='finished'). Visual: gedämpft grün/grau,
   damit klar ist "war live, ist nicht mehr — aber lief erfolgreich"
   (im Gegensatz zu FEHLER/Inaktiv die jeweils einen anderen Tone
   haben). Häkchen-Icon signalisiert "abgeschlossen". */
.lsm-fe-card-status-badge--finished {
    background: linear-gradient(135deg, #64748b, #475569);
    color: #fff;
}
.lsm-fe-card-status-badge--finished::before {
    content: '✓';
    margin-right: 4px;
    font-weight: 700;
}

/* Countdown time-display on scheduled cards (e.g. "Startet in 2 Tagen, 5h") */
.lsm-fe-card-scheduled-countdown {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px;
    color: var(--c-tx3);
    margin-top: 4px;
}
.lsm-fe-card-scheduled-countdown svg {
    width: 12px; height: 12px;
    color: var(--c-tx4);
}

/* v3.9.343 — Upload-Progress in der Scheduled-File-Section */
.lsm-fe-scheduled-upload-progress {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--c-surf2, #f6f9ff);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r);
}
.lsm-fe-scheduled-up-msg {
    font-size: 12px;
    color: var(--c-tx);
    margin-bottom: 6px;
}
.lsm-fe-scheduled-up-bar {
    height: 6px;
    background: var(--c-bdr);
    border-radius: 3px;
    overflow: hidden;
}
.lsm-fe-scheduled-up-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    transition: width .15s ease-out;
    width: 0%;
}
.lsm-fe-scheduled-saved-hint {
    margin-top: 8px;
    padding: 8px 10px;
    background: #d1fae5;
    color: #065f46;
    border-radius: var(--r);
    font-size: 12px;
    animation: lsm-fade-in .2s ease-out;
}
[data-theme="dark"] .lsm-fe-scheduled-saved-hint {
    background: rgba(16, 185, 129, .15);
    color: #6ee7b7;
}
@keyframes lsm-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
 * v3.9.368 — Stream-Create Modal (.lsm-fe-scm-*)
 *
 * Lightweight 4-field modal that replaces the old "Neuer Stream"
 * tab content. Layout: backdrop overlay + centered dialog with
 * header / body / footer. Body fields are vertically stacked,
 * standard form-rhythm. Stream-Typ uses a 2-up segmented control
 * (radio cards), description is collapsible to keep the modal
 * compact for the common case.
 *
 * Theming uses CSS vars defined globally so this works in both
 * light and dark mode without overrides.
 * ════════════════════════════════════════════════════════════════ */
.lsm-fe-scm-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    /* Modal can be deeper than the viewport on mobile or when
       description is expanded; allow vertical scroll on the
       backdrop instead of clipping the dialog. */
    overflow-y: auto;
}
.lsm-fe-scm-backdrop.is-open { display: flex; }
.lsm-fe-scm-dialog {
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: 12px;
    width: 100%; max-width: 520px;
    box-shadow: var(--sh-lg, 0 12px 40px rgba(0,0,0,0.5));
    overflow: hidden;
    /* Stop click-through to backdrop close-on-click handler */
}
.lsm-fe-scm-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-bdr);
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px;
}
.lsm-fe-scm-title { font-size: 15.5px; font-weight: 600; color: var(--c-tx); margin: 0; }
.lsm-fe-scm-sub   { font-size: 12px; color: var(--c-tx3); margin-top: 2px; }
.lsm-fe-scm-close {
    background: rgba(255,255,255,0.04); border: 0;
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-tx3); font-size: 16px; cursor: pointer;
    transition: background .15s, color .15s;
}
.lsm-fe-scm-close:hover { background: rgba(255,255,255,0.08); color: var(--c-tx); }
.lsm-fe-scm-body { padding: 20px; }
.lsm-fe-scm-field { margin-bottom: 16px; }
.lsm-fe-scm-field:last-child { margin-bottom: 0; }
.lsm-fe-scm-label {
    display: block;
    font-size: 12.5px; color: var(--c-tx2);
    margin-bottom: 6px; font-weight: 500;
}
.lsm-fe-scm-label .lsm-fe-scm-req { color: var(--c-red); margin-left: 2px; }
.lsm-fe-scm-label .lsm-fe-scm-opt { color: var(--c-tx4); font-weight: 400; font-size: 11.5px; margin-left: 6px; }
.lsm-fe-scm-hint  { font-size: 11px; color: var(--c-tx4); margin-top: 4px; }
.lsm-fe-scm-error {
    margin-top: 4px; font-size: 11.5px; color: var(--c-red);
    display: none;
}
.lsm-fe-scm-field.has-error .lsm-fe-scm-error { display: block; }
.lsm-fe-scm-field.has-error .lsm-fe-input { border-color: var(--c-red); }

/* Stream-Typ segmented control — 2 radio cards side-by-side */
.lsm-fe-scm-type-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.lsm-fe-scm-type-card {
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.lsm-fe-scm-type-card:hover:not(.is-disabled) { border-color: var(--c-bdr2); }
.lsm-fe-scm-type-card.is-active {
    border-color: var(--c-blue);
    background: var(--c-blue-s);
}
.lsm-fe-scm-type-card.is-disabled { opacity: 0.5; cursor: not-allowed; }
.lsm-fe-scm-type-card input[type="radio"] { display: none; }
.lsm-fe-scm-type-row { display: flex; align-items: center; gap: 8px; }
.lsm-fe-scm-type-radio {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--c-tx4);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lsm-fe-scm-type-card.is-active .lsm-fe-scm-type-radio { border-color: var(--c-blue); }
.lsm-fe-scm-type-radio-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-blue);
    opacity: 0;
    transition: opacity .15s;
}
.lsm-fe-scm-type-card.is-active .lsm-fe-scm-type-radio-dot { opacity: 1; }
.lsm-fe-scm-type-name {
    font-size: 13px; color: var(--c-tx); font-weight: 500;
    display: flex; align-items: center; gap: 6px;
}
.lsm-fe-scm-type-card.is-active .lsm-fe-scm-type-name { color: var(--c-tx); }
.lsm-fe-scm-type-tag {
    font-size: 9px; background: var(--c-blue-s); color: var(--c-blue);
    padding: 2px 5px; border-radius: 3px; font-weight: 500;
    letter-spacing: 0.4px;
}
.lsm-fe-scm-type-sub {
    font-size: 11px; color: var(--c-tx3);
    margin-top: 4px; padding-left: 22px;
}

/* Info banner shown for scheduled-mode (file upload happens later) */
/* v3.9.370 — File picker + upload progress for scheduled events.
   Shown only when Stream-Typ === 'scheduled' (toggled inline). */
.lsm-fe-scm-fileinput {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--c-surf3);
    border: 1px dashed var(--c-bdr2);
    border-radius: 6px;
}
.lsm-fe-scm-file-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 12.5px; color: var(--c-tx2);
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.lsm-fe-scm-file-btn:hover:not(:disabled) {
    background: var(--c-surf2);
    border-color: var(--c-bdr2);
    color: var(--c-tx);
}
.lsm-fe-scm-file-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.lsm-fe-scm-file-name {
    font-size: 12px; color: var(--c-tx3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 0; min-width: 0;
}
.lsm-fe-scm-file-progress {
    margin-top: 8px;
    display: flex; align-items: center; gap: 10px;
}
.lsm-fe-scm-file-progress-bar {
    flex: 1 1 auto;
    height: 6px;
    background: var(--c-surf3);
    border-radius: 3px;
    overflow: hidden;
}
.lsm-fe-scm-file-progress-fill {
    height: 100%;
    background: var(--c-blue);
    transition: width .25s ease-out;
    width: 0%;
}
.lsm-fe-scm-file-progress-text {
    font-size: 11.5px;
    color: var(--c-tx3);
    flex-shrink: 0;
    min-width: 80px;
    text-align: right;
}

/* Description toggle — when collapsed shows just the chevron link;
   when expanded shows the textarea below. */
.lsm-fe-scm-desc-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--c-tx3);
    cursor: pointer; padding: 6px 0;
    user-select: none;
}
.lsm-fe-scm-desc-toggle:hover { color: var(--c-tx2); }
.lsm-fe-scm-desc-toggle svg {
    transition: transform .15s;
}
.lsm-fe-scm-desc-toggle.is-open svg { transform: rotate(180deg); }
.lsm-fe-scm-desc-wrap { display: none; margin-top: 8px; }
.lsm-fe-scm-desc-wrap.is-open { display: block; }
.lsm-fe-scm-desc-wrap textarea { min-height: 70px; }

.lsm-fe-scm-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 14px 20px;
    background: var(--c-surf);
    border-top: 1px solid var(--c-bdr);
}
.lsm-fe-scm-footer .lsm-fe-scm-msg {
    margin-right: auto;
    font-size: 12px;
    color: var(--c-tx3);
}
.lsm-fe-scm-footer .lsm-fe-scm-msg.is-error { color: var(--c-red); }
.lsm-fe-scm-btn {
    font-size: 13px; font-weight: 500;
    padding: 8px 16px; border-radius: 6px;
    cursor: pointer; border: 0;
    font-family: inherit;
    transition: background .15s, opacity .15s;
}
.lsm-fe-scm-btn-cancel { background: transparent; color: var(--c-tx2); }
.lsm-fe-scm-btn-cancel:hover { background: rgba(255,255,255,0.04); color: var(--c-tx); }
.lsm-fe-scm-btn-primary {
    background: var(--c-blue); color: #fff;
}
.lsm-fe-scm-btn-primary:hover:not(:disabled) { background: var(--c-blue-h); }
.lsm-fe-scm-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

/* v3.9.369 — Variable-fallback layer.
   The .lsm-fe-app[data-theme="..."] selector defines all --c-* vars,
   but those vars are scoped to the .lsm-fe-app subtree. If the modal
   is appended to body (older code path) or to any other ancestor,
   the vars resolve to `unset` → backgrounds become transparent and
   text/borders disappear. We've moved the JS appendChild into
   .lsm-fe-app, but as a defensive belt-and-suspenders we ALSO redefine
   the vars on the modal root using a self-scoped block. Sets dark
   defaults (the design's primary mode); light-mode users get the
   .lsm-fe-app override automatically since CSS-var inheritance picks
   the closer ancestor. */
.lsm-fe-scm-backdrop {
    --c-bg:    #0d1117;
    --c-surf:  #161b22;
    --c-surf2: #1c222b;
    --c-surf3: #232a35;
    --c-bdr:   #2d3543;
    --c-bdr2:  #3a4456;
    --c-tx:    #e6edf3;
    --c-tx2:   #b5bdc9;
    --c-tx3:   #8b95a3;
    --c-tx4:   #6b7585;
    --c-blue:  #4b8bf0;
    --c-blue-h:#6ba0f5;
    --c-red:   #f87171;
    --sh-lg:   0 12px 40px rgba(0, 0, 0, 0.55);
}
/* Light-mode override for users who explicitly chose light theme */
.lsm-fe-scm-backdrop[data-theme="light"] {
    --c-bg:    #ffffff;
    --c-surf:  #f8fafc;
    --c-surf2: #ffffff;
    --c-surf3: #f1f5f9;
    --c-bdr:   #e2e8f0;
    --c-bdr2:  #cbd5e1;
    --c-tx:    #0f172a;
    --c-tx2:   #334155;
    --c-tx3:   #64748b;
    --c-tx4:   #94a3b8;
    --c-blue:  #1d4ed8;
    --c-blue-h:#2451d8;
    --c-red:   #dc2626;
    --sh-lg:   0 12px 40px rgba(15, 23, 42, 0.18);
}
/* Light-mode tweaks for elements that need different rgba mixing */
.lsm-fe-scm-backdrop[data-theme="light"] .lsm-fe-scm-close { background: rgba(0,0,0,0.04); }
.lsm-fe-scm-backdrop[data-theme="light"] .lsm-fe-scm-close:hover { background: rgba(0,0,0,0.08); }
.lsm-fe-scm-backdrop[data-theme="light"] .lsm-fe-scm-btn-cancel:hover { background: rgba(0,0,0,0.04); }

/* ════════════════════════════════════════════════════════════
 * v3.9.372 — LSMDateTimePicker (.lsm-dtp-*)
 *
 * Custom date/time picker module. Replaces the native
 * <input type="datetime-local"> visually while keeping the
 * input element in the DOM for form submission.
 *
 * Theming: uses --c-* variables + a defensive fallback layer
 * matching the dark palette so the picker stays styled even
 * when used outside .lsm-fe-app (e.g. by old WP-Admin form
 * pages once we migrate those too).
 * ════════════════════════════════════════════════════════════ */
.lsm-dtp-wrap {
    position: relative;
    display: block;
}
.lsm-dtp-display {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: var(--c-tx);
    cursor: pointer;
    text-align: left;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.lsm-dtp-display:hover {
    border-color: var(--c-bdr2);
}
.lsm-dtp-display:focus {
    outline: none;
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(75, 139, 240, 0.18);
}
.lsm-dtp-display:not(.has-value) .lsm-dtp-display-text {
    color: var(--c-tx4);
}
.lsm-dtp-display-icon {
    color: var(--c-tx3);
    flex-shrink: 0;
}

/* Popup container — position:fixed so it's not clipped by the
   modal dialog's `overflow: hidden`. JS sets top/left at open
   time based on display-field's bounding rect, then re-snaps on
   resize/scroll. Z-index sits above modal dialogs (which are
   9000+). */
.lsm-dtp-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    z-index: 9500;
    overflow: hidden;
}
.lsm-dtp-popup.is-open { display: block; }

/* Header: month nav + title */
.lsm-dtp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 0.5px solid var(--c-bdr);
}
.lsm-dtp-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-tx);
}
.lsm-dtp-nav {
    width: 26px; height: 26px;
    border: 0; background: rgba(255,255,255,0.04);
    border-radius: 5px;
    color: var(--c-tx3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.lsm-dtp-nav:hover { background: rgba(255,255,255,0.08); color: var(--c-tx); }

/* Calendar grid */
.lsm-dtp-body { padding: 10px 14px 14px; }
.lsm-dtp-weekrow {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}
.lsm-dtp-weeklabel {
    font-size: 10px;
    color: var(--c-tx4);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 4px 0;
}
.lsm-dtp-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.lsm-dtp-day {
    text-align: center;
    font-size: 12px;
    color: var(--c-tx);
    padding: 7px 0;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    font-variant-numeric: tabular-nums;
    transition: background .12s, color .12s;
}
.lsm-dtp-day:hover:not(.is-disabled):not(.is-selected) {
    background: var(--c-surf3);
}
.lsm-dtp-day.is-other {
    color: var(--c-tx4);
    opacity: 0.5;
}
.lsm-dtp-day.is-today {
    color: var(--c-blue);
    font-weight: 500;
}
.lsm-dtp-day.is-selected {
    background: var(--c-blue);
    color: #fff;
    font-weight: 500;
}
.lsm-dtp-day.is-disabled {
    color: var(--c-tx4);
    opacity: 0.3;
    cursor: not-allowed;
}

/* Time section */
.lsm-dtp-time {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 0.5px solid var(--c-bdr);
}
.lsm-dtp-time-label {
    font-size: 10.5px;
    color: var(--c-tx4);
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 8px;
}
.lsm-dtp-time-row {
    display: flex; align-items: center; gap: 10px;
}
.lsm-dtp-time-fields {
    display: flex; align-items: center; gap: 1px;
    flex: 1 1 auto;
}
.lsm-dtp-time-input {
    width: 100%;
    flex: 1 1 0;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 5px;
    padding: 6px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-tx);
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}
.lsm-dtp-time-input:first-child  { border-radius: 5px 0 0 5px; }
.lsm-dtp-time-input:last-of-type { border-radius: 0 5px 5px 0; }
.lsm-dtp-time-input:focus {
    outline: none;
    border-color: var(--c-blue);
    box-shadow: 0 0 0 2px rgba(75, 139, 240, 0.18);
    z-index: 1;
    position: relative;
}
.lsm-dtp-time-sep {
    font-size: 14px; color: var(--c-tx4);
    padding: 0 4px;
    user-select: none;
}
.lsm-dtp-time-quick {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}
.lsm-dtp-time-quick button {
    background: var(--c-surf3);
    border: 1px solid var(--c-bdr);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px; color: var(--c-tx2);
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s;
}
.lsm-dtp-time-quick button:hover {
    background: var(--c-surf);
    color: var(--c-tx);
    border-color: var(--c-bdr2);
}

/* Quick-picks row */
.lsm-dtp-quickpicks {
    margin-top: 12px;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.lsm-dtp-qp {
    background: rgba(75, 139, 240, 0.12);
    border: 0.5px solid rgba(75, 139, 240, 0.3);
    color: var(--c-blue);
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
}
.lsm-dtp-qp:hover {
    background: rgba(75, 139, 240, 0.22);
}

/* Footer */
.lsm-dtp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 0.5px solid var(--c-bdr);
    background: var(--c-surf);
    gap: 12px;
}
.lsm-dtp-foot-info {
    font-size: 11.5px;
    color: var(--c-tx3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
}
.lsm-dtp-foot-actions {
    display: flex; gap: 6px;
    flex-shrink: 0;
}
.lsm-dtp-btn {
    font-family: inherit;
    border: 0;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s, opacity .12s;
}
.lsm-dtp-btn-cancel {
    background: transparent;
    color: var(--c-tx2);
}
.lsm-dtp-btn-cancel:hover {
    background: rgba(255,255,255,0.04);
    color: var(--c-tx);
}
.lsm-dtp-btn-ok {
    background: var(--c-blue);
    color: #fff;
    font-weight: 500;
    padding: 5px 12px;
}
.lsm-dtp-btn-ok:hover {
    background: var(--c-blue-h);
}

/* Defensive fallback layer — if the picker is somehow rendered
   outside the .lsm-fe-app theme scope, give it dark defaults.
   Same approach as the .lsm-fe-scm-backdrop fallback. */
.lsm-dtp-wrap, .lsm-dtp-popup {
    --c-bg:    #0d1117;
    --c-surf:  #161b22;
    --c-surf2: #1c222b;
    --c-surf3: #232a35;
    --c-bdr:   #2d3543;
    --c-bdr2:  #3a4456;
    --c-tx:    #e6edf3;
    --c-tx2:   #b5bdc9;
    --c-tx3:   #8b95a3;
    --c-tx4:   #6b7585;
    --c-blue:  #4b8bf0;
    --c-blue-h:#6ba0f5;
    --c-red:   #f87171;
}
.lsm-fe-app[data-theme="light"] .lsm-dtp-wrap,
.lsm-fe-app[data-theme="light"] .lsm-dtp-popup {
    --c-bg:    #ffffff;
    --c-surf:  #f8fafc;
    --c-surf2: #ffffff;
    --c-surf3: #f1f5f9;
    --c-bdr:   #e2e8f0;
    --c-bdr2:  #cbd5e1;
    --c-tx:    #0f172a;
    --c-tx2:   #334155;
    --c-tx3:   #64748b;
    --c-tx4:   #94a3b8;
    --c-blue:  #1d4ed8;
    --c-blue-h:#2451d8;
}
/* Light-mode tweaks for translucent rgba backgrounds */
.lsm-fe-app[data-theme="light"] .lsm-dtp-nav { background: rgba(0,0,0,0.04); }
.lsm-fe-app[data-theme="light"] .lsm-dtp-nav:hover { background: rgba(0,0,0,0.08); }
.lsm-fe-app[data-theme="light"] .lsm-dtp-btn-cancel:hover { background: rgba(0,0,0,0.04); }


/* v3.9.375 — "Erweiterte Einstellungen" collapsible inside the
   "Neuer Stream" modal. Same toggle pattern as the description
   collapsible: chevron rotates, label flips, content slides in. */
.lsm-fe-scm-adv-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--c-tx3);
    cursor: pointer; padding: 6px 0;
    user-select: none;
}
.lsm-fe-scm-adv-toggle:hover { color: var(--c-tx2); }
.lsm-fe-scm-adv-toggle svg { transition: transform .15s; }
.lsm-fe-scm-adv-toggle.is-open svg { transform: rotate(180deg); }
.lsm-fe-scm-adv-wrap {
    display: none;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 0.5px solid var(--c-bdr);
}
.lsm-fe-scm-adv-wrap.is-open { display: block; }

.lsm-fe-scm-adv-row { margin-bottom: 14px; }
.lsm-fe-scm-adv-row:last-child { margin-bottom: 0; }
.lsm-fe-scm-adv-row-title {
    font-size: 12.5px; color: var(--c-tx); font-weight: 500;
}
.lsm-fe-scm-adv-row-sub {
    font-size: 11.5px; color: var(--c-tx3);
    line-height: 1.4; margin-top: 2px;
}
.lsm-fe-scm-adv-toggle-row {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer;
    padding: 8px 10px;
    background: var(--c-surf3);
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
}
.lsm-fe-scm-adv-toggle-row input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--c-blue);
}
.lsm-fe-scm-adv-radios {
    display: flex; flex-direction: column; gap: 6px;
}
.lsm-fe-scm-adv-radio {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer;
    padding: 8px 10px;
    background: var(--c-surf3);
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
    transition: border-color .12s, background .12s;
}
.lsm-fe-scm-adv-radio:hover {
    border-color: var(--c-bdr2);
}
.lsm-fe-scm-adv-radio input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--c-blue);
}
.lsm-fe-scm-adv-radio:has(input[type="radio"]:checked) {
    border-color: var(--c-blue);
    background: rgba(75, 139, 240, 0.06);
}
.lsm-fe-scm-adv-radio-title {
    font-size: 12.5px; color: var(--c-tx); font-weight: 500;
    display: flex; align-items: center; gap: 6px;
}
.lsm-fe-scm-adv-tag {
    font-size: 9.5px; font-weight: 500;
    background: var(--c-surf);
    color: var(--c-tx3);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* ============================================================
 * v3.9.424 — Chat-Theme Selector (Drawer)
 * ============================================================ */
.lsm-fe-chat-theme-group { margin-top: 10px; }
.lsm-fe-chat-theme-tile {
    cursor: pointer;
    border: 1px solid var(--c-bdr, #c8d0dc);
    border-radius: 8px;
    padding: 10px;
    background: var(--c-surf, #fff);
    transition: border-color .12s, background .12s;
    display: block;
    position: relative;
}
.lsm-fe-chat-theme-tile:hover {
    border-color: var(--c-tx3, #888);
}
.lsm-fe-chat-theme-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lsm-fe-chat-theme-tile:has(input:checked) {
    border-color: var(--c-info, #378ADD);
    background: color-mix(in srgb, var(--c-info, #378ADD) 6%, transparent);
}
.lsm-fe-chat-theme-tile-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-tx, #0a1020);
}
.lsm-fe-chat-theme-tile-sub {
    font-size: 11px;
    color: var(--c-tx3, #888);
    margin-top: 1px;
    margin-bottom: 8px;
}
.lsm-fe-chat-theme-tile-preview {
    background: var(--c-surf2, #f0f3f8);
    border-radius: 5px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.4;
    min-height: 50px;
}
.lsm-fe-chat-theme-tile-preview[data-preview="gaming"] .prev-line {
    display: flex;
    gap: 5px;
    align-items: baseline;
    padding: 1px 0;
}
.lsm-fe-chat-theme-tile-preview .prev-name {
    font-weight: 500;
    flex-shrink: 0;
}
.lsm-fe-chat-theme-tile-preview[data-preview="gaming"] .prev-name::after {
    content: ':';
    color: var(--c-tx3, #888);
    margin-left: 1px;
    font-weight: 400;
}
.lsm-fe-chat-theme-tile-preview .prev-text {
    color: var(--c-tx, #0a1020);
}
.lsm-fe-chat-theme-tile-preview[data-preview="corporate"] .prev-card {
    background: var(--c-surf, #fff);
    border: 1px solid var(--c-bdr, #c8d0dc);
    border-radius: 5px;
    padding: 5px 7px;
}
.lsm-fe-chat-theme-tile-preview[data-preview="corporate"] .prev-card-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.lsm-fe-chat-theme-tile-preview[data-preview="corporate"] .prev-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #EEEDFE;
    color: #534AB7;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}
.lsm-fe-chat-theme-tile-preview[data-preview="corporate"] .prev-name-c {
    font-size: 10px;
    font-weight: 500;
    color: var(--c-tx, #0a1020);
}

/* ============================================================
 * v3.9.446 — Library Picker für Sched-Stream-Quelle
 * ============================================================ */

/* Source-Tab Switcher (Upload vs Library) */
.lsm-fe-scheduled-source-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--c-surf2, #f0f3f8);
    border-radius: 8px;
    margin-bottom: 10px;
}
.lsm-fe-scheduled-source-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-tx2, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background .15s, color .15s;
}
.lsm-fe-scheduled-source-tab:hover {
    color: var(--c-tx, #0a1020);
}
.lsm-fe-scheduled-source-tab.is-active {
    background: var(--c-surf, #fff);
    color: var(--c-tx, #0a1020);
    border: 0.5px solid var(--c-bdr, #c8d0dc);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Library mode container */
.lsm-fe-scheduled-file-library {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--c-surf2, #f0f3f8);
    border-radius: 8px;
}

/* Picker Modal Overlay */
.lsm-fe-library-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 2147483648;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: lsmFeFadeIn .15s ease;
}
.lsm-fe-library-picker-modal {
    background: var(--c-surf, #fff);
    border: 1px solid var(--c-bdr, #c8d0dc);
    border-radius: 12px;
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
}

/* Header */
.lsm-fe-library-picker-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-bdr, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.lsm-fe-library-picker-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-tx, #0a1020);
}
.lsm-fe-library-picker-sub {
    font-size: 11.5px;
    color: var(--c-tx3, #9ca3af);
    margin-top: 2px;
}
.lsm-fe-library-picker-close {
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--c-tx3, #9ca3af);
    border-radius: 4px;
}
.lsm-fe-library-picker-close:hover {
    background: var(--c-surf2, #f0f3f8);
    color: var(--c-tx, #0a1020);
}

/* Search */
.lsm-fe-library-picker-search {
    padding: 12px 18px;
    border-bottom: 1px solid var(--c-bdr, #e5e7eb);
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}
.lsm-fe-library-picker-search > input[type="text"] {
    flex: 1;
    min-width: 0;
}
.lsm-fe-library-picker-sort {
    flex-shrink: 0;
    width: auto;
    min-width: 160px;
    font-size: 12.5px;
}
@media (max-width: 540px) {
    .lsm-fe-library-picker-search {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    .lsm-fe-library-picker-sort { min-width: 0; }
}

/* v3.9.452 — Search-match highlight inside card titles. */
.lsm-fe-library-picker-mark {
    background: var(--c-yellow, #fef08a);
    color: var(--c-tx, #0a1020);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}
[data-theme="dark"] .lsm-fe-library-picker-mark {
    background: #854d0e;
    color: #fef9c3;
}

/* Grid */
.lsm-fe-library-picker-grid {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* v3.9.449 — Pin row track to min-content so each card's natural
     * height (thumb + body) is respected. With many cards (>30) the
     * default sizing was collapsing rows. */
    grid-auto-rows: min-content;
    gap: 12px;
    align-content: start;
}
@media (max-width: 640px) {
    .lsm-fe-library-picker-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card */
.lsm-fe-library-picker-card {
    border: 1px solid var(--c-bdr, #c8d0dc);
    background: var(--c-surf2, #f6f8fb);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .1s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    /* v3.9.449 — Pin row-track height. Without this the grid auto-row
     * sizing collapses cards when there are many of them (>30 videos
     * pushes the grid into a narrow row strategy). */
    min-height: 0;
}
.lsm-fe-library-picker-card:hover:not(.is-disabled) {
    border-color: var(--c-blue, #2563eb);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.lsm-fe-library-picker-card.is-selected {
    border-color: var(--c-blue, #2563eb);
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}
.lsm-fe-library-picker-card.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.lsm-fe-library-picker-card-thumb {
    /* v3.9.449 — Use padding-bottom hack instead of aspect-ratio.
     * aspect-ratio gets ignored when the parent has an indefinite
     * height in flexbox/grid, which is exactly our setup. The padding
     * trick computes height from width reliably. */
    width: 100%;
    padding-bottom: 56.25%; /* 16/9 = 56.25% */
    height: 0;
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    flex-shrink: 0;
}
.lsm-fe-library-picker-card-duration {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}
.lsm-fe-library-picker-card-status {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
}
.lsm-fe-library-picker-card-status.is-processing {
    background: #fef3c7;
    color: #92400e;
}
.lsm-fe-library-picker-card-status.is-error {
    background: #fee2e2;
    color: #991b1b;
}

/* v3.9.456 — "In Verwendung" badge for cards whose video is already
 * referenced as a sched-event source or active VoD. Top-RIGHT to
 * not collide with status badge (top-left) or duration (bottom-right). */
.lsm-fe-library-picker-card-used {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #fbbf24;
    color: #78350f;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px 2px 4px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.lsm-fe-library-picker-card.is-used {
    /* Subtle warning tint on the border */
    border-color: #fbbf24;
}
.lsm-fe-library-picker-card.is-used:hover:not(.is-disabled) {
    border-color: #f59e0b;
}
.lsm-fe-library-picker-card-usedhint {
    font-size: 10.5px;
    color: #b45309;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

[data-theme="dark"] .lsm-fe-library-picker-card-used {
    background: #fbbf24;
    color: #422006;
}
[data-theme="dark"] .lsm-fe-library-picker-card-usedhint {
    color: #fcd34d;
}

.lsm-fe-library-picker-card-body {
    padding: 8px 10px;
    flex: 1;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--c-surf, #fff);
}
.lsm-fe-library-picker-card-title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-tx, #0a1020);
    line-height: 1.35;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lsm-fe-library-picker-card-meta {
    font-size: 10.5px;
    color: var(--c-tx3, #9ca3af);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.lsm-fe-library-picker-card-meta-sep {
    opacity: .5;
    font-weight: 600;
}

/* v3.9.449 — Dark-mode adjustments for the card body */
[data-theme="dark"] .lsm-fe-library-picker-card-body {
    background: var(--c-surf, #1a1f2c);
}
[data-theme="dark"] .lsm-fe-library-picker-card {
    background: var(--c-surf2, #232936);
    border-color: var(--c-bdr, #364152);
}
[data-theme="dark"] .lsm-fe-library-picker-card-title {
    color: var(--c-tx, #f1f5f9);
}

/* Loading + Empty */
.lsm-fe-library-picker-loading,
.lsm-fe-library-picker-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--c-tx3, #9ca3af);
    font-size: 13px;
}
.lsm-fe-library-picker-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lsm-fe-library-picker-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(0, 0, 0, .08);
    border-top-color: var(--c-blue, #2563eb);
    border-radius: 50%;
    animation: lsm-share-spin 1s linear infinite;
}

/* Footer */
.lsm-fe-library-picker-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--c-bdr, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 12px;
}
.lsm-fe-library-picker-selected {
    font-size: 12px;
    color: var(--c-tx3, #9ca3af);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.lsm-fe-library-picker-foot-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* v3.9.451 — Picker confirm button uses the same accent as other
 * Save buttons (.lsm-fe-btn-primary base). Add explicit disabled
 * state so the contrast between "needs selection" and "ready to
 * confirm" is clear. */
[data-confirm-library-pick] {
    background: var(--c-blue, #1d4ed8) !important;
    color: #fff !important;
    border: 0 !important;
}
[data-confirm-library-pick]:hover:not(:disabled) {
    background: var(--c-blue-h, #1e40af) !important;
    transform: translateY(-1px);
}
[data-confirm-library-pick]:disabled {
    background: var(--c-surf3, #cbd5e1) !important;
    color: var(--c-tx3, #94a3b8) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Dark mode adjustments */
[data-theme="dark"] .lsm-fe-library-picker-card-status.is-processing {
    background: #78350f;
    color: #fef3c7;
}
[data-theme="dark"] .lsm-fe-library-picker-card-status.is-error {
    background: #7f1d1d;
    color: #fee2e2;
}

/* ─── v3.9.484 — Channel-Playlist Block-List + Editor ───────────── */

.lsm-fe-channel-loading,
.lsm-fe-channel-error {
    padding: 24px;
    text-align: center;
    color: var(--c-tx3, #64748b);
    font-size: 14px;
}
.lsm-fe-channel-error { color: #dc3545; }

.lsm-fe-channel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-bdr, #e2e8f0);
}
.lsm-fe-channel-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-tx, #0f172a);
    margin-bottom: 2px;
}
.lsm-fe-channel-header-sub {
    font-size: 12px;
    color: var(--c-tx3, #64748b);
}
.lsm-fe-channel-gran-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--c-tx2, #334155);
    cursor: pointer;
    user-select: none;
}
.lsm-fe-channel-gran-toggle input { margin: 0; }

/* Timeline */
.lsm-fe-channel-timeline {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--c-surf2, #f5f7fa);
    border-radius: 6px;
    border: 1px solid var(--c-bdr, #e2e8f0);
}
.lsm-fe-channel-timeline-track {
    position: relative;
    height: 28px;
    background: var(--c-surf, #fff);
    border-radius: 4px;
    border: 1px solid var(--c-bdr, #d1d5db);
    overflow: hidden;
}
.lsm-fe-channel-timeline-block {
    position: absolute;
    top: 2px;
    bottom: 2px;
    background: rgba(13, 110, 253, 0.18);
    border: 1px solid rgba(13, 110, 253, 0.5);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.15s;
}
.lsm-fe-channel-timeline-block:hover {
    background: rgba(13, 110, 253, 0.3);
}
.lsm-fe-channel-timeline-block.is-live {
    background: rgba(220, 53, 69, 0.25);
    border-color: rgba(220, 53, 69, 0.6);
    animation: lsm-channel-pulse 2s ease-in-out infinite;
}
.lsm-fe-channel-timeline-block.is-finished {
    background: rgba(100, 116, 139, 0.15);
    border-color: rgba(100, 116, 139, 0.4);
}
.lsm-fe-channel-timeline-block.is-skipped {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.3);
    border-style: dashed;
}
@keyframes lsm-channel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
.lsm-fe-channel-timeline-block-label {
    display: block;
    padding: 0 6px;
    font-size: 10px;
    line-height: 24px;
    color: var(--c-tx, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lsm-fe-channel-timeline-now {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: #dc3545;
    z-index: 2;
    pointer-events: none;
}
.lsm-fe-channel-timeline-now::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #dc3545;
    border-radius: 50%;
}
.lsm-fe-channel-timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    color: var(--c-tx3, #64748b);
}

/* Empty state */
.lsm-fe-channel-empty-state {
    padding: 32px 20px;
    text-align: center;
    background: var(--c-surf2, #f5f7fa);
    border: 1px dashed var(--c-bdr, #c8d0dc);
    border-radius: 8px;
    margin-bottom: 12px;
}
.lsm-fe-channel-empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.6;
}
.lsm-fe-channel-empty-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-tx2, #334155);
    margin-bottom: 4px;
}
.lsm-fe-channel-empty-sub {
    font-size: 12px;
    color: var(--c-tx3, #64748b);
}

/* Block list */
.lsm-fe-channel-blocks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.lsm-fe-channel-block-card {
    background: var(--c-surf, #fff);
    border: 1px solid var(--c-bdr, #e2e8f0);
    border-radius: 6px;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.lsm-fe-channel-block-card:hover {
    border-color: var(--c-bdr-hover, #cbd5e1);
}
.lsm-fe-channel-block-card.is-dragging {
    opacity: 0.5;
}
.lsm-fe-channel-block-card.is-drop-target {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
}
.lsm-fe-channel-block-card[data-block-state="live"] {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2);
}
.lsm-fe-channel-block-card[data-block-state="skipped"] {
    opacity: 0.6;
    background: var(--c-surf2, #f5f7fa);
}
.lsm-fe-channel-block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}
.lsm-fe-channel-block-handle {
    color: var(--c-tx3, #94a3b8);
    cursor: grab;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -2px;
    padding: 4px 2px;
}
.lsm-fe-channel-block-handle:active { cursor: grabbing; }
.lsm-fe-channel-block-state-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.lsm-fe-channel-block-title {
    flex: 1;
    min-width: 0;
}
.lsm-fe-channel-block-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-tx, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lsm-fe-channel-block-meta {
    font-size: 11px;
    color: var(--c-tx3, #64748b);
    margin-top: 2px;
}
.lsm-fe-channel-block-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Inline editor */
.lsm-fe-channel-block-editor {
    background: var(--c-surf, #fff);
    border: 1px solid #0d6efd;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.1);
}
.lsm-fe-channel-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(13, 110, 253, 0.06);
    border-bottom: 1px solid var(--c-bdr, #e2e8f0);
}
.lsm-fe-channel-editor-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-tx, #0f172a);
}
.lsm-fe-channel-editor-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lsm-fe-channel-editor-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-tx2, #334155);
    margin-bottom: 6px;
}
.lsm-fe-channel-field-hint {
    font-weight: 400;
    color: var(--c-tx3, #64748b);
    font-size: 11px;
}
.lsm-fe-channel-editor-field input[type="datetime-local"],
.lsm-fe-channel-editor-field input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--c-bdr, #cbd5e1);
    border-radius: 4px;
    font-size: 13px;
    color: var(--c-tx, #0f172a);
    background: var(--c-surf, #fff);
}
.lsm-fe-channel-editor-field input[type="datetime-local"]:focus,
.lsm-fe-channel-editor-field input[type="text"]:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}
.lsm-fe-channel-video-picked {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--c-surf2, #f5f7fa);
    border: 1px solid var(--c-bdr, #e2e8f0);
    border-radius: 4px;
}
.lsm-fe-channel-video-icon { font-size: 16px; }
.lsm-fe-channel-video-name {
    flex: 1;
    font-size: 13px;
    color: var(--c-tx, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lsm-fe-channel-video-dur {
    font-size: 11px;
    color: var(--c-tx3, #64748b);
    background: var(--c-surf, #fff);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--c-bdr, #e2e8f0);
}
.lsm-fe-channel-editor-info {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--c-surf2, #f5f7fa);
    border-radius: 4px;
    font-size: 12px;
    color: var(--c-tx3, #64748b);
}
.lsm-fe-channel-editor-info strong {
    color: var(--c-tx2, #334155);
    font-weight: 500;
}
.lsm-fe-channel-editor-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    align-self: flex-start;
}
.lsm-fe-channel-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    background: var(--c-surf2, #f5f7fa);
    border-top: 1px solid var(--c-bdr, #e2e8f0);
}

/* Add-block button */
.lsm-fe-channel-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px dashed var(--c-bdr, #cbd5e1);
    border-radius: 6px;
    color: var(--c-tx2, #334155);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.lsm-fe-channel-add-btn:hover {
    background: var(--c-surf2, #f5f7fa);
    border-color: #0d6efd;
    color: #0d6efd;
}
.lsm-fe-channel-add-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surf2, #f5f7fa);
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
}
.lsm-fe-channel-add-btn:hover .lsm-fe-channel-add-icon {
    background: rgba(13, 110, 253, 0.1);
}

/* ────────────────────────────────────────────────────────── *
 *  v3.9.501 — Phase 6: Channel-Status Tab                     *
 * ────────────────────────────────────────────────────────── */

#lsmFeChannelStatusBody {
    padding: 4px 2px;
}

/* Hero — live / next / ended banner */
.lsm-fe-ch-status-hero {
    margin-bottom: 16px;
}

.lsm-fe-ch-status-state {
    background: var(--lsm-bg-card, #ffffff);
    border: 1px solid var(--lsm-border, #e5e8ef);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lsm-fe-ch-status-state-live {
    border-color: rgba(220, 38, 38, .35);
    background: linear-gradient(135deg,
        rgba(220, 38, 38, .04),
        var(--lsm-bg-card, #ffffff));
}
.lsm-fe-ch-status-state-pre {
    border-color: rgba(29, 78, 216, .25);
}
.lsm-fe-ch-status-state-ended {
    opacity: .65;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
.lsm-fe-ch-status-state-empty {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.lsm-fe-ch-status-icon {
    font-size: 24px;
    color: #16a34a;
}

.lsm-fe-ch-status-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 3px 10px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: 999px;
    animation: lsm-fe-ch-pulse 2s infinite;
}
@keyframes lsm-fe-ch-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); }
    50%      { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

.lsm-fe-ch-status-pre-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px 10px;
    background: #1d4ed8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: 999px;
}

.lsm-fe-ch-status-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--lsm-text, #111827);
    line-height: 1.3;
}

.lsm-fe-ch-status-sub {
    font-size: 13px;
    color: var(--lsm-text-muted, #4b5563);
}

.lsm-fe-ch-status-progress {
    height: 6px;
    background: var(--lsm-border, #e5e8ef);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.lsm-fe-ch-status-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #f59e0b);
    border-radius: 3px;
    transition: width 1s linear;
}

.lsm-fe-ch-status-next-hint {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--lsm-border, #e5e8ef);
    font-size: 12px;
    color: var(--lsm-text-muted, #4b5563);
}

/* Bridge / Splaylist / Event status pills row */
.lsm-fe-ch-status-bridge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.lsm-fe-ch-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid;
}
.lsm-fe-ch-status-pill .lsm-fe-ch-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
}
.lsm-fe-ch-status-pill.is-ok {
    border-color: rgba(22, 163, 74, .25);
    background: rgba(22, 163, 74, .06);
    color: #166534;
}
.lsm-fe-ch-status-pill.is-ok .lsm-fe-ch-status-dot { background: #16a34a; }
.lsm-fe-ch-status-pill.is-bad {
    border-color: rgba(220, 38, 38, .3);
    background: rgba(220, 38, 38, .06);
    color: #991b1b;
}
.lsm-fe-ch-status-pill.is-bad .lsm-fe-ch-status-dot { background: #dc2626; }
.lsm-fe-ch-status-pill.is-warn {
    border-color: rgba(217, 119, 6, .3);
    background: rgba(217, 119, 6, .06);
    color: #92400e;
}
.lsm-fe-ch-status-pill.is-warn .lsm-fe-ch-status-dot { background: #d97706; }
.lsm-fe-ch-status-pill.is-info {
    border-color: var(--lsm-border, #e5e8ef);
    background: var(--lsm-bg-card, #fff);
    color: var(--lsm-text-muted, #4b5563);
}
.lsm-fe-ch-status-pill-val {
    font-weight: 600;
    color: inherit;
    opacity: .85;
}

/* State counts */
.lsm-fe-ch-status-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.lsm-fe-ch-status-count-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--lsm-bg-card, #fff);
    border: 1px solid var(--lsm-border, #e5e8ef);
    border-left: 3px solid var(--ch-color, #6b7280);
    min-width: 60px;
}
.lsm-fe-ch-status-count-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--ch-color, #111827);
    line-height: 1.1;
}
.lsm-fe-ch-status-count-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--lsm-text-muted, #6b7280);
    margin-top: 2px;
}

/* Block list */
.lsm-fe-ch-status-blocks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.lsm-fe-ch-status-blocks-header h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--lsm-text, #111827);
    margin: 0;
}

.lsm-fe-ch-status-block-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lsm-fe-ch-status-block {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 10px 12px;
    background: var(--lsm-bg-card, #fff);
    border: 1px solid var(--lsm-border, #e5e8ef);
    border-radius: 8px;
}
.lsm-fe-ch-status-block[data-state="live"] {
    border-color: rgba(220, 38, 38, .3);
    background: linear-gradient(90deg, rgba(220,38,38,.04), var(--lsm-bg-card, #fff));
}
.lsm-fe-ch-status-block[data-state="finished"] { opacity: .6; }

.lsm-fe-ch-status-block-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ch-color, #6b7280);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lsm-fe-ch-status-block-dot {
    width: 6px; height: 6px;
    background: var(--ch-color, #6b7280);
    border-radius: 50%;
}

.lsm-fe-ch-status-block-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--lsm-text, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lsm-fe-ch-status-block-meta {
    font-size: 12px;
    color: var(--lsm-text-muted, #6b7280);
    margin-top: 2px;
}
.lsm-fe-ch-status-block-error {
    font-size: 11px;
    color: #b91c1c;
    margin-top: 4px;
    background: rgba(220, 38, 38, .06);
    padding: 4px 8px;
    border-radius: 4px;
}

@media (max-width: 600px) {
    .lsm-fe-ch-status-block {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ────────────────────────────────────────────────────────── *
 *  v3.9.502 — Phase 8: Schedule Summary + Validation Panel    *
 * ────────────────────────────────────────────────────────── */

.lsm-fe-channel-summary {
    background: var(--lsm-bg-card, #ffffff);
    border: 1px solid var(--lsm-border, #e5e8ef);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
}

.lsm-fe-channel-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.lsm-fe-channel-summary-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.lsm-fe-channel-summary-stat-num {
    font-size: 16px;
    font-weight: 700;
    color: var(--lsm-text, #111827);
    font-variant-numeric: tabular-nums;
}
.lsm-fe-channel-summary-stat-label {
    font-size: 11px;
    color: var(--lsm-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}

/* Warnings stack */
.lsm-fe-channel-summary-warnings {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lsm-fe-channel-summary-warning {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid;
}

.lsm-fe-channel-summary-warning.is-error {
    background: rgba(220, 38, 38, .06);
    border-color: rgba(220, 38, 38, .25);
    color: #991b1b;
}
.lsm-fe-channel-summary-warning.is-warn {
    background: rgba(217, 119, 6, .06);
    border-color: rgba(217, 119, 6, .25);
    color: #92400e;
}

.lsm-fe-channel-summary-warning-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.3;
}

.lsm-fe-channel-summary-warning strong {
    font-weight: 600;
    display: block;
}

.lsm-fe-channel-summary-warning-detail {
    font-size: 12px;
    margin-top: 4px;
    opacity: .85;
}

/* Empty-state polish */
.lsm-fe-channel-empty-state {
    text-align: center;
    padding: 40px 24px;
    background: var(--lsm-bg-card, #fff);
    border: 1px dashed var(--lsm-border, #e5e8ef);
    border-radius: 12px;
    margin: 12px 0;
}
.lsm-fe-channel-empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
}
.lsm-fe-channel-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--lsm-text, #111827);
    margin-bottom: 6px;
}
.lsm-fe-channel-empty-sub {
    font-size: 13px;
    color: var(--lsm-text-muted, #6b7280);
    line-height: 1.5;
}

/* v3.9.503 — Phase 8: Per-block info in session card */
.lsm-fe-ins-item-blocks {
    margin: 6px 0 4px;
    font-size: 13px;
    color: var(--lsm-text, #111827);
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.4;
}
.lsm-fe-ins-blocks-more {
    font-size: 11px;
    color: var(--lsm-text-muted, #6b7280);
    font-weight: 400;
    background: var(--lsm-border, #e5e8ef);
    padding: 1px 6px;
    border-radius: 6px;
}

/* v3.9.503 — Phase 8: Library-Picker thumb img fallback */
.lsm-fe-library-picker-card-thumb {
    position: relative;
    overflow: hidden;
}
.lsm-fe-library-picker-card-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.lsm-fe-library-picker-card-thumb > .lsm-fe-library-picker-card-status,
.lsm-fe-library-picker-card-thumb > .lsm-fe-library-picker-card-used,
.lsm-fe-library-picker-card-thumb > .lsm-fe-library-picker-card-duration {
    position: relative;
    z-index: 1;
}

/* ────────────────────────────────────────────────────────── *
 *  v3.9.512 — Phase 8: Drag-Timeline mit Thumbnails          *
 * ────────────────────────────────────────────────────────── */

.lsm-fe-channel-timeline {
    margin-bottom: 16px;
    user-select: none;
}

.lsm-fe-channel-timeline-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.lsm-fe-channel-timeline-toolbar-label {
    font-size: 12px;
    color: var(--lsm-text-muted, #6b7280);
    margin-right: 4px;
}
.lsm-fe-channel-timeline-toolbar-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--lsm-text-muted, #9ca3af);
}
.lsm-fe-channel-timeline-zoom-btn {
    padding: 4px 10px;
    font-size: 12px;
    background: var(--lsm-bg-card, #fff);
    border: 1px solid var(--lsm-border, #e5e8ef);
    border-radius: 5px;
    color: var(--lsm-text, #111827);
    cursor: pointer;
    transition: all .15s;
}
.lsm-fe-channel-timeline-zoom-btn:hover {
    background: var(--lsm-bg-hover, #f3f4f6);
}
.lsm-fe-channel-timeline-zoom-btn.is-active {
    background: var(--lsm-primary, #1d4ed8);
    border-color: var(--lsm-primary, #1d4ed8);
    color: #fff;
}

.lsm-fe-channel-timeline-track {
    position: relative;
    height: 88px;
    background: var(--lsm-bg-card, #fff);
    border: 1px solid var(--lsm-border, #e5e8ef);
    border-radius: 8px;
    padding: 0;
    overflow: visible;
}

.lsm-fe-channel-timeline-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--lsm-border, #e5e8ef);
    pointer-events: none;
    opacity: .6;
}

.lsm-fe-channel-timeline-block {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: var(--lsm-bg-hover, #f1efe8);
    border: 1px solid var(--lsm-border, #b4b2a9);
    border-radius: 6px;
    overflow: hidden;
    cursor: grab;
    transition: opacity .15s, box-shadow .15s;
    min-width: 16px;
}
.lsm-fe-channel-timeline-block.is-finished { opacity: .65; }
.lsm-fe-channel-timeline-block.is-skipped {
    opacity: .4;
    background: repeating-linear-gradient(45deg,
        var(--lsm-bg-hover, #f1efe8),
        var(--lsm-bg-hover, #f1efe8) 4px,
        rgba(0,0,0,.04) 4px,
        rgba(0,0,0,.04) 8px);
}
.lsm-fe-channel-timeline-block.is-ready {
    background: #e1f5ee;
    border-color: #5dcaa5;
}
/* v3.10.73 — Livestream blocks: red-tinted to indicate live source.
   Live-indicator dot replaces previous emoji (matches LSM design language). */
.lsm-fe-channel-timeline-block.is-livestream {
    background: linear-gradient(135deg, rgba(226,75,74,.08), rgba(226,75,74,.18));
    border-color: #e24b4a;
    border-style: dashed;
}
.lsm-fe-channel-timeline-block.is-livestream.is-ready {
    background: linear-gradient(135deg, rgba(226,75,74,.12), rgba(226,75,74,.22));
    border-style: solid;
}
.lsm-fe-channel-timeline-block.is-livestream::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e24b4a;
    box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(226,75,74,.35);
    pointer-events: none;
    z-index: 2;
    /* Subtle pulse on ready state to indicate "live source waiting" */
    animation: lsmLiveDotPulse 2.4s ease-out infinite;
}
.lsm-fe-channel-timeline-block.is-livestream.is-live::before {
    /* When block is actively on-air, intensify the indicator */
    background: #dc2626;
    box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(220,38,38,.5);
    animation-duration: 1s;
}
@keyframes lsmLiveDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}
.lsm-fe-channel-timeline-block.is-live {
    background: #fcebeb;
    border: 2px solid #e24b4a;
    top: 2px;
    bottom: 2px;
    cursor: not-allowed;
    box-shadow: 0 0 0 4px rgba(226,75,74,.15);
}
.lsm-fe-channel-timeline-block-dragging {
    opacity: .4;
    cursor: grabbing !important;
}
.lsm-fe-channel-timeline-block-pressing {
    box-shadow: 0 0 0 3px rgba(29,78,216,.3);
    transition: box-shadow .2s;
}

.lsm-fe-channel-timeline-block-thumb {
    position: relative;
    height: 56px;
    background: linear-gradient(135deg, #4b5563, #1f2937);
    overflow: hidden;
}
.lsm-fe-channel-timeline-block-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* v3.10.32 — Template-Block visual treatment. Templates have no
   thumbnail (they're a sequence of items, not one video), so the
   default dark gray looked dead. Use the brand teal→violet gradient
   to signal "playlist" content + a centered template glyph. */
.lsm-fe-channel-timeline-block.is-template .lsm-fe-channel-timeline-block-thumb {
    background: linear-gradient(135deg, #14a085 0%, #7c5ddb 100%);
}
.lsm-fe-channel-timeline-block.is-template .lsm-fe-channel-timeline-block-thumb::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .55;
    pointer-events: none;
}
/* Template-blocks in is-ready (deployed) state get a deeper saturated tint
   plus a soft green halo so operators see the "deployed" state at a glance. */
.lsm-fe-channel-timeline-block.is-template.is-ready {
    border-color: #14a085;
    box-shadow: 0 0 0 2px rgba(20,160,133,.22);
}
.lsm-fe-channel-timeline-block.is-template.is-live {
    /* Live state takes precedence — red border wins over template green */
    border-color: #e24b4a;
}
.lsm-fe-channel-timeline-block.is-template.is-live .lsm-fe-channel-timeline-block-thumb {
    /* Slightly desaturate the gradient when live so the red border pops */
    filter: saturate(.7) brightness(.85);
}

.lsm-fe-channel-timeline-block-grip {
    position: absolute;
    top: 4px;
    left: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 0 3px rgba(0,0,0,.6);
    cursor: grab;
    z-index: 2;
    padding: 2px 4px;
    line-height: 1;
}
.lsm-fe-channel-timeline-block-live-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    background: #e24b4a;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    border-radius: 3px;
    z-index: 2;
}
.lsm-fe-channel-timeline-block-lock {
    position: absolute;
    top: 4px;
    left: 4px;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 0 3px rgba(0,0,0,.6);
    z-index: 2;
}

.lsm-fe-channel-timeline-block-label {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--lsm-text, #2c2c2a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.lsm-fe-channel-timeline-block-resize-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 3;
}
.lsm-fe-channel-timeline-block-resize-right:hover {
    background: rgba(29,78,216,.4);
}

/* Ghost element shown during drag */
.lsm-fe-channel-timeline-ghost {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: rgba(29,78,216,.15);
    border: 2px dashed #1d4ed8;
    border-radius: 6px;
    pointer-events: none;
    z-index: 5;
    transition: left .05s linear, width .05s linear;
}
.lsm-fe-channel-timeline-ghost.is-overlap {
    background: rgba(220,38,38,.15);
    border-color: #dc2626;
}

/* Now indicator */
.lsm-fe-channel-timeline-now {
    position: absolute;
    top: -8px;
    bottom: -22px;
    width: 2px;
    background: #e24b4a;
    pointer-events: none;
    z-index: 4;
}
.lsm-fe-channel-timeline-now-dot {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #e24b4a;
    border-radius: 50%;
}
.lsm-fe-channel-timeline-now-label {
    display: none; /* future: live timestamp pill */
}

.lsm-fe-channel-timeline-labels {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    font-size: 11px;
    color: var(--lsm-text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* While dragging, prevent text-selection on whole document */
body.lsm-channel-dragging {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: grabbing !important;
}

/* ────────────────────────────────────────────────────────── *
 *  v3.9.513 — Phase 8: Drag-Pan, Snap-Linie, Start-Pill,     *
 *             Brighter Thumbnails                              *
 * ────────────────────────────────────────────────────────── */

/* Brighter, more saturated thumbnails */
.lsm-fe-channel-timeline-block-thumb {
    background: linear-gradient(135deg, #1f2937, #111827);
}
.lsm-fe-channel-timeline-block-thumb img {
    filter: saturate(1.18) contrast(1.06);
}

/* Less aggressive opacity reduction on finished blocks
 * (was .65 → felt washed out) */
.lsm-fe-channel-timeline-block.is-finished {
    opacity: .85;
}
.lsm-fe-channel-timeline-block.is-finished .lsm-fe-channel-timeline-block-thumb img {
    filter: saturate(0.85) contrast(1.0); /* slightly desaturated to signal "past" */
}

/* Track is now grab-cursor when hovering empty area (pannable) */
.lsm-fe-channel-timeline-track {
    cursor: grab;
}
.lsm-fe-channel-timeline-track:active {
    cursor: grabbing;
}
body.lsm-channel-panning,
body.lsm-channel-panning * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* Start-time pill — floating label on dragging ghost */
.lsm-fe-channel-timeline-start-pill {
    position: absolute;
    top: -28px;
    transform: translateX(-50%);
    padding: 3px 8px;
    background: #1d4ed8;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 8;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.lsm-fe-channel-timeline-start-pill::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1d4ed8;
}
.lsm-fe-channel-timeline-start-pill.is-overlap {
    background: #dc2626;
}
.lsm-fe-channel-timeline-start-pill.is-overlap::after {
    border-top-color: #dc2626;
}

/* Snap-line — vertical dashed line at snap target */
.lsm-fe-channel-timeline-snap-line {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 0;
    border-left: 1.5px dashed #f59e0b;
    pointer-events: none;
    z-index: 6;
}
.lsm-fe-channel-timeline-snap-label {
    position: absolute;
    bottom: -22px;
    transform: translateX(-50%);
    padding: 1px 6px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 6;
    font-variant-numeric: tabular-nums;
}

/* Resize-handle: pulsing visual hint that double-click is supported */
.lsm-fe-channel-timeline-block-resize-right {
    width: 7px;
}
.lsm-fe-channel-timeline-block-resize-right:hover {
    background: linear-gradient(to right, transparent, rgba(29,78,216,.7));
}
.lsm-fe-channel-timeline-block-resize-right::before {
    content: '⋮';
    position: absolute;
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 12px;
    line-height: 0.5;
    letter-spacing: -2px;
}
.lsm-fe-channel-timeline-block-resize-right:hover::before {
    color: #fff;
}

/* ────────────────────────────────────────────────────────── *
 *  v3.9.514 — Block-Quota Indicator + Loop-Toggle             *
 * ────────────────────────────────────────────────────────── */

.lsm-fe-channel-quota {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lsm-fe-channel-quota-text {
    font-variant-numeric: tabular-nums;
    color: var(--lsm-text, #111827);
    font-weight: 500;
}
.lsm-fe-channel-quota-text small {
    font-weight: 400;
    margin-left: 4px;
}
.lsm-fe-channel-quota-bar {
    position: relative;
    display: inline-block;
    width: 140px;
    height: 6px;
    background: var(--lsm-border, #e5e8ef);
    border-radius: 3px;
    overflow: visible;
    vertical-align: middle;
}
.lsm-fe-channel-quota-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    transition: width .25s, background .25s;
}
.lsm-fe-channel-quota-bar-soft {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1.5px;
    background: var(--lsm-text-muted, #9ca3af);
    pointer-events: none;
}
.lsm-fe-channel-quota-bar-soft::after {
    content: 'soft';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--lsm-text-muted, #9ca3af);
}
.lsm-fe-channel-quota-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Loop-toggle in block editor */
.lsm-fe-channel-editor-loop {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--lsm-bg-card, #fafafa);
    border: 1px solid var(--lsm-border, #e5e8ef);
    border-radius: 8px;
    margin-top: 12px;
    cursor: pointer;
    user-select: none;
}
.lsm-fe-channel-editor-loop input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.lsm-fe-channel-editor-loop:has(input:checked) {
    background: rgba(29, 78, 216, .04);
    border-color: rgba(29, 78, 216, .3);
}
.lsm-fe-channel-editor-loop-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.lsm-fe-channel-editor-loop-text strong {
    font-size: 13px;
    color: var(--lsm-text, #111827);
    font-weight: 600;
}
.lsm-fe-channel-editor-loop-text small {
    font-size: 12px;
    color: var(--lsm-text-muted, #6b7280);
    line-height: 1.4;
}

/* ────────────────────────────────────────────────────────── *
 *  v3.9.515 — Drawer Width-Toggle, Now-Pill, Jump-Now,        *
 *             Block-Click-Flash                                *
 *  v3.9.516 — Fixes (color/selector/clip)                     *
 * ────────────────────────────────────────────────────────── */

/* Width toggle button — matches close-button style on light header */
.lsm-fe-drawer-width-toggle {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-right: 4px;
    padding: 0;
    border: 1px solid #c8d0dc;
    background: none;
    cursor: pointer;
    color: #5a6b80;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s ease;
}
.lsm-fe-drawer-width-toggle:hover {
    background: #f0f3f8;
    color: #0a1020;
    border-color: #a8b4c4;
}
.lsm-fe-drawer-width-toggle[aria-pressed="true"] {
    background: rgba(29,78,216,0.08);
    color: #1d4ed8;
    border-color: rgba(29,78,216,0.4);
}

/* v3.9.516 — Wide drawer mode: target the actual modal selectors
 * (.lsm-fe-modal is the panel, .lsm-fe-modal-event is the wider
 * 900px variant used for events). */
body.lsm-fe-drawer-wide .lsm-fe-modal,
body.lsm-fe-drawer-wide .lsm-fe-modal-event {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: 0 !important;
}

/* Now-indicator pill — shows live HH:MM:SS */
.lsm-fe-channel-timeline-now-label {
    display: inline-block !important;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 7px;
    /* v3.9.516 — Slight transparency so it doesn't dominate */
    background: rgba(226, 75, 74, 0.88);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.lsm-fe-channel-timeline-now-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(226, 75, 74, 0.88);
}

/* Jump-to-now button */
.lsm-fe-channel-timeline-jump-btn {
    padding: 4px 10px;
    font-size: 12px;
    background: var(--lsm-bg-card, #fff);
    border: 1px solid var(--lsm-border, #e5e8ef);
    border-radius: 5px;
    color: var(--lsm-text, #111827);
    cursor: pointer;
    margin-left: 8px;
    transition: all .15s;
}
.lsm-fe-channel-timeline-jump-btn:hover {
    background: var(--lsm-bg-hover, #f3f4f6);
}
.lsm-fe-channel-timeline-jump-btn.is-emphasized {
    background: rgba(226, 75, 74, .08);
    border-color: rgba(226, 75, 74, .35);
    color: #e24b4a;
}

/* Block-card flash when clicked from timeline */
@keyframes lsmFeChannelBlockFlash {
    0%   { box-shadow: 0 0 0 0 rgba(29, 78, 216, .55); }
    50%  { box-shadow: 0 0 0 6px rgba(29, 78, 216, .25); }
    100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); }
}
.lsm-fe-channel-block-flash {
    animation: lsmFeChannelBlockFlash 1.2s ease-out;
}

/* Loop-badge in block-card title */
.lsm-fe-channel-block-loop-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    background: rgba(29,78,216,.1);
    color: #1d4ed8;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
    vertical-align: 1px;
}

/* Make timeline block click-cursor for non-live (drag/click both work) */
.lsm-fe-channel-timeline-block {
    cursor: pointer;
}
.lsm-fe-channel-timeline-block.is-live {
    cursor: pointer; /* clickable for editing even when locked from drag */
}

/* v3.9.516 — Clip blocks to track horizontally but let pills above
 * (now-label, start-pill, snap-label) overflow vertically. clip-path
 * with negative inset on top/bottom achieves exactly this without
 * triggering overflow's "auto" cascade. */
.lsm-fe-channel-timeline-track {
    clip-path: inset(-40px 0 -40px 0);
}

/* v3.9.526 — DefaultStream Fallback (B1).
 * Compact strip below channel header showing current fallback selection
 * with shield icon, title+duration, and pick/clear actions. */
.lsm-fe-channel-fallback {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 8px 0 12px;
    background: var(--c-surf2, #f0f3f8);
    border: 1px solid var(--c-line, #e1e5ec);
    border-radius: var(--r, 6px);
}
.lsm-fe-channel-fallback-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.lsm-fe-channel-fallback-body {
    flex: 1;
    min-width: 0;
}
.lsm-fe-channel-fallback-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--c-tx3, #5a6b80);
    margin-bottom: 2px;
}
.lsm-fe-channel-fallback-current {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.lsm-fe-channel-fallback-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-tx1, #2d3a4a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.lsm-fe-channel-fallback-dur {
    font-size: 11px;
    color: var(--c-tx3, #5a6b80);
    background: var(--c-bg);
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.lsm-fe-channel-fallback-hint {
    font-size: 12px;
    color: var(--c-tx3, #5a6b80);
    line-height: 1.4;
}
.lsm-fe-channel-fallback-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Mobile collapse: stack vertically when narrow */
@media (max-width: 540px) {
    .lsm-fe-channel-fallback {
        flex-wrap: wrap;
    }
    .lsm-fe-channel-fallback-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 6px;
    }
}

/* ─────────────────────────────────────────────────────────── *
 *  v3.10.0 — Phase B Task 1: Multi-Stream Playlist-Templates  *
 *  Block-Editor source-type tabs + template picker            *
 *  Design Language: Glasmorphism, line accents, no emoji      *
 * ─────────────────────────────────────────────────────────── */

/* Source-type tabs (Single | Aus Vorlage) */
.lsm-fe-channel-srctype-tabs {
    display: inline-flex;
    background: var(--c-bg2, #f1f4f8);
    border: 1px solid var(--c-bd, #e1e6ec);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.lsm-fe-channel-srctype-tab {
    background: transparent;
    border: 0;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-tx2, #4a5568);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: 0.12s;
}
.lsm-fe-channel-srctype-tab:hover {
    background: rgba(20, 160, 133, 0.06);
    color: var(--c-tx, #1a2230);
}
.lsm-fe-channel-srctype-tab.is-active {
    background: linear-gradient(135deg, #14a085, #1bd1aa);
    color: #fff;
    box-shadow: 0 2px 6px -2px rgba(20, 160, 133, 0.5);
}
.lsm-fe-channel-srctype-tab.is-active .lsm-fe-channel-srctype-ic {
    color: #fff;
}
.lsm-fe-channel-srctype-ic {
    font-size: 13px;
    line-height: 1;
    color: var(--c-tx3, #768296);
    font-family: 'Apple Color Emoji', 'Segoe UI Symbol', sans-serif;
}

/* Subform wrappers — same vertical rhythm as editor-field */
.lsm-fe-channel-srcsub {
    margin-bottom: 14px;
}
.lsm-fe-channel-srcsub > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-tx2, #4a5568);
    margin-bottom: 6px;
}
.lsm-fe-channel-srcsub[hidden] {
    display: none !important;
}

/* Template picker (list of selectable templates) */
.lsm-fe-channel-tpl-picker {
    border: 1px solid var(--c-bd, #e1e6ec);
    border-radius: 8px;
    background: var(--c-bg);
    overflow: hidden;
}
.lsm-fe-channel-tpl-loading,
.lsm-fe-channel-tpl-empty {
    padding: 16px;
    text-align: center;
    color: var(--c-tx3, #5a6b80);
    font-size: 12px;
}
.lsm-fe-channel-tpl-empty a {
    color: #14a085;
    text-decoration: none;
    font-weight: 500;
}
.lsm-fe-channel-tpl-empty a:hover { text-decoration: underline; }
.lsm-fe-channel-tpl-list {
    max-height: 240px;
    overflow-y: auto;
}
.lsm-fe-channel-tpl-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--c-bd, #e1e6ec);
    transition: 0.1s;
    position: relative;
}
.lsm-fe-channel-tpl-row:last-child { border-bottom: 0; }
.lsm-fe-channel-tpl-row:hover {
    background: rgba(20, 160, 133, 0.04);
}
.lsm-fe-channel-tpl-row.is-active {
    background: rgba(20, 160, 133, 0.08);
}
.lsm-fe-channel-tpl-row.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #14a085, #1bd1aa);
}
.lsm-fe-channel-tpl-row.is-active::after {
    content: '✓';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    color: #14a085;
    font-weight: 700;
    font-size: 14px;
}
.lsm-fe-channel-tpl-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-tx, #1a2230);
}
.lsm-fe-channel-tpl-meta {
    font-size: 11px;
    color: var(--c-tx3, #768296);
}
.lsm-fe-channel-tpl-foot {
    border-top: 1px solid var(--c-bd, #e1e6ec);
    padding: 8px 14px;
    background: var(--c-bg2, #fafbfc);
    text-align: right;
    font-size: 11px;
}
.lsm-fe-channel-tpl-foot a {
    color: #14a085;
    text-decoration: none;
}
.lsm-fe-channel-tpl-foot a:hover { text-decoration: underline; }

/* Snapshot-mode block (reuses editor-loop styling) */
.lsm-fe-channel-tpl-mode {
    margin-top: 4px;
}

/* Template badge in collapsed block-card meta */
.lsm-fe-channel-block-tpl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(20, 160, 133, 0.10));
    color: #6366f1;
    border: 1px solid rgba(167, 139, 250, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    cursor: help;
}
.lsm-fe-channel-block-tpl-badge small {
    font-size: 10px;
    opacity: 0.8;
}


/* ═══════════════════════════════════════════════════════════════
 * v3.10.80 — Audio-Bibliothek Page Styles
 * ═══════════════════════════════════════════════════════════════ */

#lsmFePanel-audio-library {
    padding: 20px;
}

/* ── Header ─────────────────────────────────────────────────── */
.lsm-fe-audio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.08), rgba(167, 139, 250, 0.08));
    border: 1px solid rgba(20, 160, 133, 0.18);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    margin-bottom: 20px;
}
.lsm-fe-audio-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--c-tx1, #1a1a1a);
}
.lsm-fe-audio-sub {
    font-size: 13px;
    color: var(--c-tx3, #6b7280);
}

/* ── Upload form ────────────────────────────────────────────── */
.lsm-fe-audio-upload-form {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 22px;
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 6px 30px rgba(20, 160, 133, 0.06);
}
[data-theme="dark"] .lsm-fe-audio-upload-form {
    background: rgba(20, 25, 40, 0.65);
    border-color: rgba(167, 139, 250, 0.28);
}
.lsm-fe-audio-upload-form h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 18px 0;
    color: var(--c-tx1, #1a1a1a);
}
.lsm-fe-audio-upload-form--cover h3 { font-size: 14px; }
.lsm-fe-audio-field {
    margin-bottom: 16px;
}
.lsm-fe-audio-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-tx2, #4b5563);
    margin-bottom: 6px;
}
.lsm-fe-audio-field code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    background: rgba(167, 139, 250, 0.12);
    color: #6366f1;
    padding: 1px 5px;
    border-radius: 3px;
}
.lsm-fe-audio-hint {
    font-weight: 400;
    color: var(--c-tx3, #9ca3af);
    font-size: 11.5px;
    margin-left: 6px;
}
.lsm-fe-audio-field input[type="text"],
.lsm-fe-audio-field input[type="file"],
.lsm-fe-audio-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 8px;
    font-size: 13.5px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--c-tx1, #1a1a1a);
    box-sizing: border-box;
}
[data-theme="dark"] .lsm-fe-audio-field input,
[data-theme="dark"] .lsm-fe-audio-field textarea {
    background: rgba(15, 20, 32, 0.6);
    color: #e5e7eb;
}
.lsm-fe-audio-field input:focus,
.lsm-fe-audio-field textarea:focus {
    outline: none;
    border-color: #14a085;
    box-shadow: 0 0 0 3px rgba(20, 160, 133, 0.15);
}
.lsm-fe-audio-field textarea {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
}
.lsm-fe-audio-file-info {
    font-size: 12px;
    color: var(--c-tx3, #6b7280);
    margin-top: 6px;
    min-height: 16px;
}

/* ── Visual-mode picker grid ────────────────────────────────── */
.lsm-fe-audio-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.lsm-fe-audio-visual-card {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(167, 139, 250, 0.2);
    border-radius: 10px;
    padding: 12px 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
    font: inherit;
    color: inherit;
}
[data-theme="dark"] .lsm-fe-audio-visual-card {
    background: rgba(15, 20, 32, 0.55);
    border-color: rgba(167, 139, 250, 0.22);
}
.lsm-fe-audio-visual-card:hover {
    border-color: rgba(20, 160, 133, 0.55);
    background: rgba(20, 160, 133, 0.07);
    transform: translateY(-1px);
}
.lsm-fe-audio-visual-card.is-active {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.16), rgba(167, 139, 250, 0.16));
    border-color: #14a085;
    box-shadow: 0 0 0 3px rgba(20, 160, 133, 0.15);
}
.lsm-fe-audio-visual-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: #14a085;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
}
.lsm-fe-audio-visual-card .lsm-fe-audio-visual-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-tx1, #1a1a1a);
    margin-bottom: 2px;
}
[data-theme="dark"] .lsm-fe-audio-visual-card .lsm-fe-audio-visual-name { color: #e5e7eb; }
.lsm-fe-audio-visual-card .lsm-fe-audio-visual-desc {
    font-size: 11px;
    color: var(--c-tx3, #6b7280);
    line-height: 1.4;
}

/* ── Cover picker (inline in upload form) ───────────────────── */
.lsm-fe-audio-cover-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lsm-fe-audio-cover-picker-empty {
    font-size: 12.5px;
    color: var(--c-tx3, #9ca3af);
    padding: 12px;
    background: rgba(167, 139, 250, 0.06);
    border-radius: 8px;
    text-align: center;
}
.lsm-fe-audio-cover-tile {
    position: relative;
    width: 76px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s ease;
}
.lsm-fe-audio-cover-tile:hover {
    transform: translateY(-1px);
}
.lsm-fe-audio-cover-tile.is-active {
    border-color: #14a085;
    box-shadow: 0 0 0 3px rgba(20, 160, 133, 0.2);
}
.lsm-fe-audio-cover-tile img {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 6px;
}
.lsm-fe-audio-cover-tile-label {
    font-size: 9.5px;
    color: var(--c-tx3, #6b7280);
    padding: 3px 2px 1px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 76px;
}
.lsm-fe-audio-cover-tile--none {
    width: 76px;
}
.lsm-fe-audio-cover-tile-none-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(167, 139, 250, 0.08);
    border-radius: 6px;
    color: var(--c-tx3, #9ca3af);
    font-size: 20px;
    font-weight: 300;
}

/* ── Custom-filter textarea actions ─────────────────────────── */
.lsm-fe-audio-custom-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.lsm-fe-audio-custom-status {
    font-size: 12px;
}
.lsm-fe-audio-custom-status--ok { color: #14a085; }
.lsm-fe-audio-custom-status--err { color: #ef4444; }

/* ── Upload actions row ──────────────────────────────────────── */
.lsm-fe-audio-upload-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(167, 139, 250, 0.15);
}
.lsm-fe-audio-upload-progress {
    font-size: 12.5px;
    color: var(--c-tx3, #6b7280);
    margin-left: auto;
}

/* ── Empty state ────────────────────────────────────────────── */
.lsm-fe-audio-empty {
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(167, 139, 250, 0.3);
    border-radius: 14px;
    padding: 60px 28px;
    text-align: center;
}
[data-theme="dark"] .lsm-fe-audio-empty {
    background: rgba(15, 20, 32, 0.4);
    border-color: rgba(167, 139, 250, 0.25);
}
.lsm-fe-audio-empty svg {
    color: var(--c-tx3, #9ca3af);
    margin-bottom: 14px;
}
.lsm-fe-audio-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-tx1, #1a1a1a);
    margin-bottom: 6px;
}
[data-theme="dark"] .lsm-fe-audio-empty-title { color: #e5e7eb; }
.lsm-fe-audio-empty-sub {
    font-size: 13px;
    color: var(--c-tx3, #6b7280);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
}
.lsm-fe-audio-empty--inline {
    padding: 24px 16px;
    margin-top: 12px;
}

/* ── Audio card list ────────────────────────────────────────── */
.lsm-fe-audio-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lsm-fe-audio-noresults { grid-column: 1 / -1; text-align: center; color: var(--c-tx3); font-size: 13px; padding: 28px 12px; }

/* v3.10.550 — Unterreiter „Audios | Cover" (Segment-Control, flach) */
.lsm-fe-audio-tabs { display: inline-flex; gap: 2px; background: var(--c-surf2); border: 1px solid var(--c-bdr); border-radius: 10px; padding: 3px; margin: 2px 0 16px; }
.lsm-fe-audio-tab { border: 1px solid transparent; background: transparent; color: var(--c-tx3); border-radius: 7px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, color .12s, border-color .12s; }
.lsm-fe-audio-tab:hover { color: var(--c-tx2); }
.lsm-fe-audio-tab.is-active { background: var(--c-surf); border-color: var(--c-bdr); color: var(--c-tx); }
.lsm-fe-audio-tab-count { font-size: 11px; color: var(--c-tx4); font-variant-numeric: tabular-nums; }
.lsm-fe-audio-tab.is-active .lsm-fe-audio-tab-count { color: var(--c-tx3); }

/* ─── Audio-Card v3.10.214 — vertikales lsm-fe-card-Layout, B/W-Waveform ───
   Gleiche Optik wie die anderen Inhaltstyp-Karten (Thumb 16:9 oben, Body
   unten, ganze Karte klickbar → Drawer). Default-Visual ist eine schwarz/
   weiße Waveform aus echten Peaks (Fallback: Pseudo-Muster pro ID). */
.lsm-fe-audio-card {
    display: flex; flex-direction: column;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: var(--r, 14px);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .14s, box-shadow .14s, transform .14s;
}
[data-theme="dark"] .lsm-fe-audio-card { background: var(--c-surf); border-color: var(--c-bdr); }
.lsm-fe-audio-card:hover { border-color: var(--c-tx3); box-shadow: 0 6px 22px rgba(0,0,0,.10); transform: translateY(-2px); }
.lsm-fe-audio-card:hover .lsm-fe-audio-play-ov { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.lsm-fe-audio-card.is-error { border-color: var(--c-red, #dc2626); }

/* Thumb 16:9 */
.lsm-fe-audio-card-thumb {
    position: relative; aspect-ratio: 16 / 9;
    background: var(--c-surf3); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.lsm-fe-audio-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Waveform-Visual (Default ohne Cover) — B/W via currentColor */
.lsm-fe-audio-wave-thumb {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-tx1);
    background: linear-gradient(135deg, var(--c-surf2), var(--c-surf3));
}
[data-theme="dark"] .lsm-fe-audio-wave-thumb { background: linear-gradient(135deg, #1a202a, #12161d); }
.lsm-fe-audio-wave-thumb svg { width: 86%; height: 58%; display: block; }

/* Cover-Variante: kleiner Waveform-Streifen unten (weiße Balken auf Verlauf) */
.lsm-fe-audio-wave-strip {
    position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    display: flex; align-items: flex-end; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.42), transparent);
}
.lsm-fe-audio-wave-strip svg { width: 100%; height: 100%; opacity: .92; }

/* Play-Overlay (Hover) */
.lsm-fe-audio-play-ov {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%) scale(.9); opacity: 0;
    transition: opacity .15s, transform .15s;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(10,16,32,.72); color: #fff;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px); z-index: 2;
}
.lsm-fe-audio-play-ov svg { width: 18px; height: 18px; margin-left: 2px; }

/* Overlay-Badge-Farben (Basis-Pill + Positionierung kommen aus
   .lsm-fe-hbadge / .lsm-fe-thumb-badges der anderen Karten) */
.lsm-fe-audio-card .lsm-fe-hbadge { backdrop-filter: blur(4px); display: inline-flex; align-items: center; gap: 4px; line-height: 1; font-size: 9.5px; padding: 3px 8px; }
.lsm-fe-audio-card .lsm-fe-hbadge.hb-audio    { background: rgba(20,160,133,.92); color: #fff; }
.lsm-fe-audio-card .lsm-fe-hbadge.hb-ready    { background: rgba(20,160,133,.16); color: #0d7a64; border: 1px solid rgba(20,160,133,.4); }
[data-theme="dark"] .lsm-fe-audio-card .lsm-fe-hbadge.hb-ready { background: rgba(43,191,160,.18); color: #5fe0c4; }
.lsm-fe-audio-card .lsm-fe-hbadge.hb-render   { background: rgba(234,138,60,.92); color: #fff; }
.lsm-fe-audio-card .lsm-fe-hbadge.hb-error    { background: rgba(220,38,38,.92); color: #fff; }
.lsm-fe-audio-card .lsm-fe-hbadge.hb-fmt      { background: rgba(10,16,32,.55); color: #fff; }
[data-theme="dark"] .lsm-fe-audio-card .lsm-fe-hbadge.hb-fmt { background: rgba(255,255,255,.14); color: #e9eef3; }
.lsm-fe-audio-card .lsm-fe-hbadge.hb-lossless { background: rgba(167,139,250,.9); color: #fff; }
.lsm-fe-audio-card .lsm-fe-hbadge.hb-cc       { background: rgba(15,23,42,.72); color: #fff; letter-spacing: .04em; font-weight: 700; }

/* Dauer + Views (scoped, falls keine globalen Klassen existieren) */
.lsm-fe-audio-card-thumb .lsm-fe-thumb-time {
    position: absolute; left: 8px; bottom: 8px; z-index: 2;
    font-size: 11px; font-weight: 600; color: #fff;
    background: rgba(10,16,32,.62); padding: 2px 7px; border-radius: 6px;
    backdrop-filter: blur(4px); font-variant-numeric: tabular-nums;
}
.lsm-fe-audio-card-thumb .lsm-fe-thumb-views { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 5px; }
.lsm-fe-audio-card-thumb .lsm-fe-tv-pill {
    font-size: 10.5px; font-weight: 600; color: #fff;
    background: rgba(10,16,32,.62); padding: 2px 7px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 3px; backdrop-filter: blur(4px);
}
.lsm-fe-audio-card-thumb .lsm-fe-tv-pill svg { width: 11px; height: 11px; }

/* Body */
.lsm-fe-audio-card-body { padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lsm-fe-audio-card-title {
    font-size: 14px; font-weight: 600; color: var(--c-tx); line-height: 1.3; letter-spacing: -.1px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="dark"] .lsm-fe-audio-card-title { color: var(--c-tx); }

.lsm-fe-audio-card-meta {
    display: flex; gap: 4px 9px; flex-wrap: wrap; row-gap: 2px;
    font-size: 11.5px; color: var(--c-tx3);
}
.lsm-fe-audio-card-sep { opacity: .4; }

.lsm-fe-audio-card-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.lsm-fe-audio-badge {
    font-size: 10px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    color: var(--c-tx2); background: var(--c-surf2);
    border: 1px solid var(--c-hair, var(--c-bdr));
}
.lsm-fe-audio-badge--mode,
.lsm-fe-audio-badge--fmt,
.lsm-fe-audio-badge--lossless { color: var(--c-tx2); background: var(--c-surf2); border-color: var(--c-hair, var(--c-bdr)); }

.lsm-fe-audio-card-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lsm-fe-audio-status {
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    letter-spacing: .3px;
    background: transparent;
    border: 1px solid var(--c-bdr);
    color: var(--c-tx2);
}
.lsm-fe-audio-status--queued,
.lsm-fe-audio-status--probing,
.lsm-fe-audio-status--uploading { color: var(--c-tx3); }
.lsm-fe-audio-status--encoding  { color: var(--c-tx); border-color: var(--c-tx3); }
.lsm-fe-audio-status--ready     { color: var(--c-tx); border-color: var(--c-tx); background: var(--c-surf2); }
.lsm-fe-audio-status--error     { color: var(--c-red, #dc2626); border-color: var(--c-red, #dc2626); }

.lsm-fe-audio-progress {
    flex: 1; height: 4px;
    background: var(--c-surf3);
    border-radius: 999px; overflow: hidden;
    min-width: 80px;
    position: relative;
}
.lsm-fe-audio-progress-fill {
    height: 100%; background: var(--c-warn, #ea8a3c);
    transition: width .3s ease;
}
.lsm-fe-audio-progress-text { font-size: 11px; color: var(--c-tx3); white-space: nowrap; }

.lsm-fe-audio-card-error {
    font-size: 11.5px; color: var(--c-red, #dc2626);
    background: transparent;
    border: 1px solid var(--c-red, #dc2626);
    border-radius: 6px;
    padding: 4px 8px;
    word-break: break-word;
}

.lsm-fe-audio-card-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.lsm-fe-audio-card-actions-spacer { flex: 1; }

/* ── Cover library section — Flat ───────────────────────────── */
/* ── Cover-Bibliothek v3.10.227 — flat B/W, Zuweisungs-Status ── */
.lsm-fe-audio-covers-section { margin-top: 4px; }
.lsm-fe-audio-covers-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.lsm-fe-audio-covers-head-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.lsm-fe-audio-covers-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--c-surf2); border: 1px solid var(--c-bdr); color: var(--c-tx); }
.lsm-fe-audio-covers-ico svg { width: 20px; height: 20px; }
.lsm-fe-audio-covers-title { font-size: 17px; font-weight: 600; margin: 0; color: var(--c-tx); display: flex; align-items: center; gap: 8px; }
.lsm-fe-audio-covers-count { font-size: 12px; font-weight: 500; color: var(--c-tx2); background: var(--c-surf2); border: 1px solid var(--c-bdr); border-radius: 999px; padding: 1px 9px; }
.lsm-fe-audio-covers-sub { font-size: 12.5px; color: var(--c-tx3); margin-top: 2px; }
.lsm-fe-audio-covers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }

.lsm-fe-cover-up { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; aspect-ratio: 1; border: 1px dashed var(--c-tx4); border-radius: 14px; background: var(--c-surf2); color: var(--c-tx3); cursor: pointer; font-family: inherit; transition: background-color .15s, border-color .15s, color .15s; }
.lsm-fe-cover-up:hover { background: var(--c-surf3); border-color: var(--c-tx3); color: var(--c-tx); }
.lsm-fe-cover-up-t { font-size: 12px; font-weight: 600; }
.lsm-fe-cover-up-s { font-size: 10.5px; color: var(--c-tx4); }

.lsm-fe-cover-card { border-radius: 14px; overflow: hidden; background: var(--c-surf); border: 1px solid var(--c-bdr); transition: transform .15s, border-color .15s; }
.lsm-fe-cover-card:hover { transform: translateY(-3px); border-color: var(--c-tx3); }
.lsm-fe-cover-art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--c-surf2); cursor: zoom-in; }
.lsm-fe-cover-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.lsm-fe-cover-card:hover .lsm-fe-cover-art img { transform: scale(1.06); }
.lsm-fe-cover-ov { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; background: rgba(8,11,17,.45); opacity: 0; transition: opacity .15s; }
.lsm-fe-cover-card:hover .lsm-fe-cover-ov { opacity: 1; }
.lsm-fe-cover-assign { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: #0d1117; background: #fff; border: 0; border-radius: 999px; padding: 6px 13px; cursor: pointer; font-family: inherit; }
.lsm-fe-cover-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(13,17,23,.6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s, background-color .15s; }
.lsm-fe-cover-card:hover .lsm-fe-cover-del { opacity: 1; }
.lsm-fe-cover-del:hover { background: var(--c-red, #dc2626); border-color: transparent; }
.lsm-fe-cover-info { padding: 9px 11px; }
.lsm-fe-cover-title { font-size: 12px; font-weight: 600; color: var(--c-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsm-fe-cover-meta { font-size: 10.5px; color: var(--c-tx3); margin-top: 1px; }
.lsm-fe-cover-asg { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-top: 6px; font-size: 10.5px; color: var(--c-tx2); background: var(--c-surf2); border: 1px solid var(--c-bdr); border-radius: 999px; padding: 2px 8px; }
.lsm-fe-cover-asg svg { flex-shrink: 0; }
.lsm-fe-cover-asg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsm-fe-cover-asg-btn { cursor: pointer; font-family: inherit; }
.lsm-fe-cover-asg-btn:hover { border-color: var(--c-tx3); color: var(--c-tx); }
.lsm-fe-cover-unasg { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 10.5px; color: var(--c-tx4); }

.lsm-fe-cover-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(8,11,17,.6); padding: 5vh 16px; }
.lsm-fe-cover-modal-card { width: 100%; max-width: 420px; max-height: 80vh; display: flex; flex-direction: column; background: var(--c-surf); border: 1px solid var(--c-bdr); border-radius: 14px; overflow: hidden; }
.lsm-fe-cover-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--c-bdr); }
.lsm-fe-cover-modal-head img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.lsm-fe-cover-modal-title { font-size: 14px; font-weight: 600; color: var(--c-tx); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsm-fe-cover-modal-close { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--c-bdr); background: var(--c-surf); color: var(--c-tx2); font-size: 16px; cursor: pointer; flex-shrink: 0; }
.lsm-fe-cover-modal-search { margin: 12px 16px 8px; }
.lsm-fe-cover-modal-search input { width: 100%; font: inherit; font-size: 13px; padding: 8px 11px; border: 1px solid var(--c-bdr); border-radius: 9px; background: var(--c-surf2); color: var(--c-tx); }
.lsm-fe-cover-modal-list { overflow-y: auto; padding: 0 8px 8px; }
.lsm-fe-cover-arow { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; cursor: pointer; }
.lsm-fe-cover-arow:hover { background: var(--c-surf2); }
.lsm-fe-cover-arow input[type="checkbox"] { display: none; }
.lsm-fe-cover-arow input:checked + .lsm-fe-toggle-switch { background: var(--c-blue); }
.lsm-fe-cover-arow input:checked + .lsm-fe-toggle-switch::after { transform: translateX(16px); }
.lsm-fe-cover-arow-t { font-size: 13px; color: var(--c-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.lsm-fe-cover-arow-badge { font-size: 10px; color: var(--c-tx4); flex-shrink: 0; }
.lsm-fe-cover-modal-foot { padding: 10px 16px; border-top: 1px solid var(--c-bdr); display: flex; justify-content: flex-end; }
.lsm-fe-cover-modal-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--c-tx3); }
.lsm-fe-cover-lightbox { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; background: rgba(8,11,17,.82); padding: 5vh 5vw; cursor: zoom-out; }
.lsm-fe-cover-lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 12px; cursor: default; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
    #lsmFePanel-audio-library { padding: 12px; }
    .lsm-fe-audio-header { flex-direction: column; align-items: stretch; padding: 14px 16px; }
    .lsm-fe-audio-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
    .lsm-fe-audio-card-body { padding: 9px 10px 10px; gap: 6px; }
    .lsm-fe-audio-card-title { font-size: 13px; }
    .lsm-fe-audio-card-meta { font-size: 11px; }
    .lsm-fe-audio-card-actions { gap: 6px; }
    .lsm-fe-audio-visual-grid { grid-template-columns: repeat(2, 1fr); }
}

.lsm-fe-audio-card { cursor: pointer; }
.lsm-fe-audio-card-actions { cursor: default; }
.lsm-fe-audio-card-actions .lsm-fe-btn { cursor: pointer; }

/* ── v3.10.207 — Audio-Drawer (Slide-In von rechts) ─────────────────────
   Wird in #lsmFeApp eingehängt → vererbt --c-* Theme-Tokens.
   Form-Elemente nutzen weiter die .lsm-fe-asm-* Klassen. */
.lsm-fe-adw-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(10, 16, 32, .42);
    display: flex; justify-content: flex-end;
    animation: lsmFeFadeIn .15s ease;
}
.lsm-fe-adw-panel {
    width: 460px; max-width: 100%; height: 100vh;
    background: var(--c-surf, #ffffff);
    border-left: 1px solid var(--c-bdr, #c8d0dc);
    display: flex; flex-direction: column;
    box-shadow: -22px 0 50px -10px rgba(10, 16, 32, .25);
    animation: lsmFeDrawerSlide .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes lsmFeDrawerSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.lsm-fe-adw-header {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 16px; flex-shrink: 0;
    background: var(--c-surf, #ffffff);
    border-bottom: 1px solid var(--c-bdr, #c8d0dc);
}
.lsm-fe-adw-mark {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-tx2, #2d3a4a); background: var(--c-surf, #ffffff);
    border: 1px solid var(--c-bdr, #c8d0dc);
}
.lsm-fe-adw-main { flex: 1; min-width: 0; }
.lsm-fe-adw-tag {
    font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
    color: var(--c-tx2, #2d3a4a);
    border: 1px solid var(--c-bdr, #c8d0dc); border-radius: 999px;
    padding: 1px 8px; display: inline-block; margin-bottom: 4px;
}
.lsm-fe-adw-title {
    font-size: 14px; font-weight: 600; color: var(--c-tx, #0a1020);
    letter-spacing: -.2px; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lsm-fe-adw-close {
    width: 32px; height: 32px; border-radius: 8px; border: 0;
    background: transparent; color: var(--c-tx3, #5a6b80);
    cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lsm-fe-adw-close:hover { background: var(--c-surf2, #f0f3f8); color: var(--c-tx, #0a1020); }

.lsm-fe-adw-body {
    flex: 1; overflow-y: auto;
    padding: 18px; color: var(--c-tx, #0a1020);
}
.lsm-fe-adw-section {
    display: flex; flex-direction: column; gap: 14px;
}
.lsm-fe-adw-section h4 {
    margin: 0; font-size: 13px; font-weight: 600;
    color: var(--c-tx, #0a1020); letter-spacing: -.1px;
}
.lsm-fe-adw-hint {
    margin: -6px 0 0; font-size: 12.5px; color: var(--c-tx3, #5a6b80); line-height: 1.5;
}

.lsm-fe-adw-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 18px; flex-shrink: 0;
    background: var(--c-surf, #ffffff);
    border-top: 1px solid var(--c-bdr, #c8d0dc);
}

/* ── v3.10.215 — Tabbed Drawer (Sidenav Desktop / horizontale Leiste Mobil) ── */
.lsm-fe-adw-layout { flex: 1; display: flex; min-height: 0; }
.lsm-fe-adw-nav {
    flex: 0 0 134px; display: flex; flex-direction: column; gap: 2px;
    padding: 12px 10px; border-right: 1px solid var(--c-bdr, #c8d0dc);
    background: var(--c-surf2, #f0f3f8); overflow-y: auto;
}
[data-theme="dark"] .lsm-fe-adw-nav { background: var(--c-bg, #0d1117); }
.lsm-fe-adw-nav-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: var(--c-tx3, #5a6b80);
    font: inherit; font-size: 13px; font-weight: 500; text-align: left;
    transition: background-color .12s, color .12s;
}
.lsm-fe-adw-nav-btn svg { flex-shrink: 0; opacity: .85; }
.lsm-fe-adw-nav-btn:hover { background: var(--c-surf, #fff); color: var(--c-tx, #0a1020); }
.lsm-fe-adw-nav-btn.is-active { background: var(--c-surf, #fff); color: var(--c-tx, #0a1020); font-weight: 600; box-shadow: inset 2px 0 0 var(--c-tx, #0a1020); }

.lsm-fe-adw-pane { display: none; }
.lsm-fe-adw-pane.is-active { display: block; }

/* Vorschau-Player */
.lsm-fe-adw-cover { width: 100%; max-width: 220px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-bdr, #c8d0dc); }
.lsm-fe-adw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lsm-fe-adw-videowrap { border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--c-bdr, #c8d0dc); }
.lsm-fe-adw-videowrap video { width: 100%; display: block; aspect-ratio: 16 / 9; background: #000; }
.lsm-fe-adw-player { display: flex; flex-direction: column; gap: 12px; }
.lsm-fe-adw-wave {
    position: relative; height: 90px; color: var(--c-tx1, #0a1020);
    background: linear-gradient(135deg, var(--c-surf2, #f0f3f8), var(--c-surf3, #e8ecf2));
    border: 1px solid var(--c-bdr, #c8d0dc); border-radius: 12px; padding: 10px 12px; cursor: pointer;
}
[data-theme="dark"] .lsm-fe-adw-wave { background: linear-gradient(135deg, #1a202a, #12161d); }
.lsm-fe-adw-wave svg { width: 100%; height: 100%; display: block; }
.lsm-fe-adw-wave::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: var(--p, 0%); width: 2px; background: var(--c-tx1, #0a1020); opacity: .55; transition: left .1s linear; }
.lsm-fe-adw-pctl { display: flex; align-items: center; gap: 12px; }
.lsm-fe-adw-play {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: 0; cursor: pointer;
    background: var(--c-tx, #0a1020); color: var(--c-surf, #fff);
    display: flex; align-items: center; justify-content: center; transition: transform .12s;
}
.lsm-fe-adw-play:hover { transform: scale(1.06); }
.lsm-fe-adw-time { font-size: 12.5px; color: var(--c-tx3, #5a6b80); font-variant-numeric: tabular-nums; }
.lsm-fe-adw-select { font: inherit; font-size: 13.5px; padding: 8px 11px; border: 1px solid var(--c-bdr, #c8d0dc); border-radius: 9px; background: var(--c-surf, #fff); color: var(--c-tx, #0a1020); width: 100%; }

/* Form-Elemente (auch außerhalb des Drawers wiederverwendbar) */
.lsm-fe-asm-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--c-tx, #0a1020); cursor: pointer; }
.lsm-fe-asm-toggle input { width: 16px; height: 16px; accent-color: var(--c-tx, #0a1020); flex-shrink: 0; }
.lsm-fe-asm-urlrow { display: flex; gap: 6px; }
.lsm-fe-asm-urlrow input {
    flex: 1; min-width: 0; font: inherit; font-size: 12.5px;
    padding: 8px 10px; border: 1px solid var(--c-bdr, #c8d0dc); border-radius: 8px;
    background: var(--c-surf2, #f0f3f8); color: var(--c-tx, #0a1020); font-family: ui-monospace, "SF Mono", monospace;
}
.lsm-fe-asm-field { display: flex; flex-direction: column; gap: 5px; }
.lsm-fe-asm-field label { font-size: 12.5px; font-weight: 600; color: var(--c-tx2, #2d3a4a); }
.lsm-fe-asm-field input[type=text] {
    font: inherit; font-size: 13.5px; padding: 8px 11px;
    border: 1px solid var(--c-bdr, #c8d0dc); border-radius: 9px;
    background: var(--c-surf, #ffffff); color: var(--c-tx, #0a1020);
}
.lsm-fe-asm-field input:focus { outline: none; border-color: var(--c-tx, #0a1020); }
.lsm-fe-asm-field small { font-size: 11.5px; color: var(--c-tx3, #5a6b80); }
.lsm-fe-asm-meta { font-size: 12px; color: var(--c-tx3, #5a6b80); padding: 6px 0 0; border-top: 1px solid var(--c-bdr, #c8d0dc); }

@media (max-width: 520px) {
    .lsm-fe-adw-panel { width: 100%; border-left: 0; }
    .lsm-fe-adw-layout { flex-direction: column; }
    .lsm-fe-adw-nav { flex: 0 0 auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--c-bdr, #c8d0dc); padding: 8px 10px; gap: 4px; }
    .lsm-fe-adw-nav-btn { flex: 0 0 auto; }
    .lsm-fe-adw-nav-btn.is-active { box-shadow: inset 0 -2px 0 var(--c-tx, #0a1020); }
}


/* ═══════════════════════════════════════════════════════════════
 * v3.10.88 — Phase 3: Channel-Block Audio-Tab
 * Audio-Tab in der Block-Editor Source-Type Bar + Audio-Picker
 * subform (Liste der user audios) + Audio-Badge in der collapsed
 * Block-Card. Matched die Patterns von --live (Livestream) + 
 * --tpl-badge (Template) für visuelle Konsistenz.
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Tab-Button "Audio" (4. Tab) ─────────────────────────────── */
.lsm-fe-channel-srctype-tab--audio.is-active {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.12), rgba(167, 139, 250, 0.08));
    color: #0d7a64;
    border-color: rgba(20, 160, 133, 0.45);
}
[data-theme="dark"] .lsm-fe-channel-srctype-tab--audio.is-active {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.18), rgba(167, 139, 250, 0.10));
    color: #5dcaa5;
    border-color: rgba(20, 160, 133, 0.55);
}

/* ─── Audio-Subform Container ──────────────────────────────────── */
.lsm-fe-channel-srcsub--audio {
    margin-top: 8px;
}

/* ─── Picker Container ─────────────────────────────────────────── */
.lsm-fe-channel-audio-picker {
    min-height: 80px;
    margin-top: 8px;
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(20, 160, 133, 0.15);
    border-radius: 10px;
    padding: 8px;
    max-height: 380px;
    overflow-y: auto;
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
[data-theme="dark"] .lsm-fe-channel-audio-picker {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(20, 160, 133, 0.22);
}

/* ─── Loading / Empty States ───────────────────────────────────── */
.lsm-fe-channel-audio-loading {
    padding: 20px;
    text-align: center;
    color: var(--c-tx3, #9ca3af);
    font-size: 13px;
    opacity: 0.7;
}
.lsm-fe-channel-audio-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--c-tx3, #9ca3af);
}
.lsm-fe-channel-audio-empty-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--c-tx1, #1f2937);
    margin-bottom: 4px;
}
.lsm-fe-channel-audio-empty-sub {
    font-size: 12.5px;
    line-height: 1.5;
    opacity: 0.85;
}

/* ─── Audio-Tile List ─────────────────────────────────────────── */
.lsm-fe-channel-audio-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lsm-fe-channel-audio-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all 0.15s ease;
    position: relative;
}
.lsm-fe-channel-audio-tile:hover {
    background: rgba(20, 160, 133, 0.08);
    border-color: rgba(20, 160, 133, 0.35);
    transform: translateY(-1px);
}
.lsm-fe-channel-audio-tile.is-active {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.14), rgba(167, 139, 250, 0.08));
    border-color: rgba(20, 160, 133, 0.5);
    box-shadow: 0 2px 8px rgba(20, 160, 133, 0.15);
}
[data-theme="dark"] .lsm-fe-channel-audio-tile {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .lsm-fe-channel-audio-tile:hover {
    background: rgba(20, 160, 133, 0.14);
    border-color: rgba(20, 160, 133, 0.4);
}
[data-theme="dark"] .lsm-fe-channel-audio-tile.is-active {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.22), rgba(167, 139, 250, 0.12));
    border-color: rgba(20, 160, 133, 0.55);
}

/* ─── Tile Icon (music note SVG) ──────────────────────────────── */
.lsm-fe-channel-audio-tile-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #14a085, #a78bfa);
    color: white;
}

/* ─── Tile Main Text ─────────────────────────────────────────── */
.lsm-fe-channel-audio-tile-main {
    flex: 1 1 auto;
    min-width: 0;
}
.lsm-fe-channel-audio-tile-title {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--c-tx1, #1f2937);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
[data-theme="dark"] .lsm-fe-channel-audio-tile-title {
    color: #e5e7eb;
}
.lsm-fe-channel-audio-tile-meta {
    font-size: 11.5px;
    color: var(--c-tx3, #9ca3af);
    font-variant-numeric: tabular-nums;
}

/* ─── Tile Badges (Visual-Mode + Lossless) ────────────────────── */
.lsm-fe-channel-audio-tile-badges {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    align-items: center;
}
.lsm-fe-channel-audio-tile-badge {
    font-size: 10.5px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
}
.lsm-fe-channel-audio-tile-badge--mode {
    background: rgba(167, 139, 250, 0.18);
    color: #6d28d9;
    border: 1px solid rgba(167, 139, 250, 0.3);
}
[data-theme="dark"] .lsm-fe-channel-audio-tile-badge--mode {
    background: rgba(167, 139, 250, 0.22);
    color: #c4b5fd;
}
.lsm-fe-channel-audio-tile-badge--lossless {
    background: rgba(20, 160, 133, 0.18);
    color: #0d7a64;
    border: 1px solid rgba(20, 160, 133, 0.32);
}
[data-theme="dark"] .lsm-fe-channel-audio-tile-badge--lossless {
    background: rgba(20, 160, 133, 0.22);
    color: #5dcaa5;
}

/* ─── Active checkmark indicator ─────────────────────────────── */
.lsm-fe-channel-audio-tile-check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #14a085, #0d7a64);
    color: white;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(20, 160, 133, 0.35);
}

/* ─── Processing-Note (audios noch in encoding) ───────────────── */
.lsm-fe-channel-audio-processing-note {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px dashed rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    font-size: 11.5px;
    text-align: center;
    line-height: 1.5;
}
[data-theme="dark"] .lsm-fe-channel-audio-processing-note {
    background: rgba(255, 193, 7, 0.10);
    border-color: rgba(255, 193, 7, 0.25);
}

/* ─── Hint text below picker ──────────────────────────────────── */
.lsm-fe-channel-audio-hint {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(20, 160, 133, 0.06);
    border-left: 3px solid rgba(20, 160, 133, 0.5);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--c-tx2, #4b5563);
    line-height: 1.5;
}
[data-theme="dark"] .lsm-fe-channel-audio-hint {
    background: rgba(20, 160, 133, 0.10);
    color: #d1d5db;
}

/* ─── Audio-Badge in der collapsed Block-Card ─────────────────── */
.lsm-fe-channel-block-audio-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.14), rgba(167, 139, 250, 0.10));
    color: #0d7a64;
    border: 1px solid rgba(20, 160, 133, 0.32);
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    cursor: help;
}
[data-theme="dark"] .lsm-fe-channel-block-audio-badge {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.22), rgba(167, 139, 250, 0.12));
    color: #5dcaa5;
    border-color: rgba(20, 160, 133, 0.4);
}


/* ═══════════════════════════════════════════════════════════════
 * v3.10.93 — Audio Upload Drop-Zone (Phase 4a)
 * Drag-Drop ersetzt das native <input type="file"> mit einer
 * sichtbaren Drop-Zone die: click→öffnet Picker, drop→assigned file.
 * States: idle (default), :hover, .is-dragover, .is-rejected,
 * .has-file. Matched LSM Aurora-Gradient + Glasmorphism.
 * ═══════════════════════════════════════════════════════════════ */

.lsm-fe-audio-dropzone {
    border: 2px dashed rgba(20, 160, 133, 0.35);
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 120ms ease;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}
.lsm-fe-audio-dropzone:hover {
    border-color: rgba(20, 160, 133, 0.6);
    background: rgba(20, 160, 133, 0.06);
}
.lsm-fe-audio-dropzone:focus,
.lsm-fe-audio-dropzone:focus-visible {
    outline: 2px solid rgba(20, 160, 133, 0.5);
    outline-offset: 2px;
    border-color: rgba(20, 160, 133, 0.6);
}
.lsm-fe-audio-dropzone.is-dragover {
    border-color: #14a085;
    border-style: solid;
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.14), rgba(167, 139, 250, 0.10));
    transform: scale(1.012);
    box-shadow: 0 4px 16px rgba(20, 160, 133, 0.20);
}
.lsm-fe-audio-dropzone.is-rejected {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
    animation: lsmAudioDzShake 320ms ease-in-out;
}
.lsm-fe-audio-dropzone.has-file {
    border-style: solid;
    border-color: rgba(20, 160, 133, 0.55);
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.06), rgba(167, 139, 250, 0.04));
}
@keyframes lsmAudioDzShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}
[data-theme="dark"] .lsm-fe-audio-dropzone {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(20, 160, 133, 0.30);
}
[data-theme="dark"] .lsm-fe-audio-dropzone:hover {
    background: rgba(20, 160, 133, 0.10);
    border-color: rgba(20, 160, 133, 0.50);
}
[data-theme="dark"] .lsm-fe-audio-dropzone.is-dragover {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.22), rgba(167, 139, 250, 0.14));
    border-color: #5dcaa5;
}
[data-theme="dark"] .lsm-fe-audio-dropzone.has-file {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.16), rgba(167, 139, 250, 0.08));
}

.lsm-fe-audio-dropzone-icon {
    color: rgba(20, 160, 133, 0.75);
    margin-bottom: 10px;
    transition: transform 200ms ease, color 180ms ease;
}
.lsm-fe-audio-dropzone:hover .lsm-fe-audio-dropzone-icon,
.lsm-fe-audio-dropzone.is-dragover .lsm-fe-audio-dropzone-icon {
    color: #14a085;
    transform: translateY(-3px);
}
.lsm-fe-audio-dropzone.has-file .lsm-fe-audio-dropzone-icon {
    color: #14a085;
}
[data-theme="dark"] .lsm-fe-audio-dropzone-icon {
    color: rgba(93, 202, 165, 0.75);
}

.lsm-fe-audio-dropzone-headline {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-tx1, #1f2937);
    margin-bottom: 4px;
    line-height: 1.4;
}
[data-theme="dark"] .lsm-fe-audio-dropzone-headline {
    color: #e5e7eb;
}
.lsm-fe-audio-dropzone-sub {
    font-size: 12.5px;
    color: var(--c-tx2, #6b7280);
    margin-bottom: 10px;
}
[data-theme="dark"] .lsm-fe-audio-dropzone-sub {
    color: #cbd5e1;
}
.lsm-fe-audio-dropzone-formats {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--c-tx3, #9ca3af);
    padding: 3px 10px;
    background: rgba(20, 160, 133, 0.08);
    border-radius: 12px;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .lsm-fe-audio-dropzone-formats {
    background: rgba(20, 160, 133, 0.16);
    color: #cbd5e1;
}

/* When file is selected, dropzone shows compact "ready" feel.
   The file-info pill below the dropzone still shows full details. */
.lsm-fe-audio-dropzone.has-file .lsm-fe-audio-dropzone-headline::before {
    content: '✓ ';
    color: #14a085;
    font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════
 * v3.10.94 — Audio Preview-Render Inline Panel (Phase 4b)
 * Pro Audio-Card aufklappbares Panel mit mini-Visual-Picker,
 * Cover-Picker, Render-Button + 5s Video-Result.
 * ═══════════════════════════════════════════════════════════════ */

.lsm-fe-audio-preview-panel {
    grid-column: 1 / -1;
    margin: -4px 0 8px 0;
    padding: 18px;
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.06), rgba(167, 139, 250, 0.04));
    border: 1px solid rgba(20, 160, 133, 0.20);
    border-radius: 14px;
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    animation: lsmAudioPreviewSlide 220ms ease-out;
}
[data-theme="dark"] .lsm-fe-audio-preview-panel {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.10), rgba(167, 139, 250, 0.06));
    border-color: rgba(20, 160, 133, 0.28);
}
@keyframes lsmAudioPreviewSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lsm-fe-audio-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0d7a64;
}
[data-theme="dark"] .lsm-fe-audio-preview-header { color: #5dcaa5; }

.lsm-fe-audio-preview-field {
    margin-bottom: 12px;
}
.lsm-fe-audio-preview-field > label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-tx2, #4b5563);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
[data-theme="dark"] .lsm-fe-audio-preview-field > label { color: #cbd5e1; }

/* ── Mini Visual-Mode Grid ────────────────────────────────────── */
.lsm-fe-audio-preview-visualgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 5px;
}
.lsm-fe-audio-preview-visualcard {
    padding: 7px 6px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 7px;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-tx1, #1f2937);
    transition: all 0.15s ease;
    line-height: 1.3;
}
.lsm-fe-audio-preview-visualcard:hover {
    background: rgba(20, 160, 133, 0.10);
    border-color: rgba(20, 160, 133, 0.32);
    transform: translateY(-1px);
}
.lsm-fe-audio-preview-visualcard.is-active {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.18), rgba(167, 139, 250, 0.10));
    border-color: rgba(20, 160, 133, 0.55);
    box-shadow: 0 1px 4px rgba(20, 160, 133, 0.15);
    color: #0d7a64;
    font-weight: 600;
}
[data-theme="dark"] .lsm-fe-audio-preview-visualcard {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}
[data-theme="dark"] .lsm-fe-audio-preview-visualcard.is-active {
    background: linear-gradient(135deg, rgba(20, 160, 133, 0.25), rgba(167, 139, 250, 0.14));
    color: #5dcaa5;
}

/* ── Mini Cover Grid ──────────────────────────────────────────── */
.lsm-fe-audio-preview-covergrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 5px;
}
.lsm-fe-audio-preview-covercard {
    aspect-ratio: 1 / 1;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 7px;
    cursor: pointer;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.4);
    padding: 0;
    transition: border-color 0.15s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lsm-fe-audio-preview-covercard:hover {
    border-color: rgba(20, 160, 133, 0.4);
    transform: scale(1.05);
}
.lsm-fe-audio-preview-covercard.is-active {
    border-color: #14a085;
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(20, 160, 133, 0.16);
}
.lsm-fe-audio-preview-covercard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lsm-fe-audio-preview-coverempty {
    font-size: 20px;
    color: var(--c-tx3, #9ca3af);
    font-weight: 300;
}
[data-theme="dark"] .lsm-fe-audio-preview-covercard {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ── Render Button Row ────────────────────────────────────────── */
.lsm-fe-audio-preview-renderrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    margin-bottom: 12px;
}
.lsm-fe-audio-preview-elapsed {
    font-size: 11.5px;
    color: var(--c-tx3, #9ca3af);
    font-variant-numeric: tabular-nums;
}

/* ── Loading Spinner ──────────────────────────────────────────── */
.lsm-fe-audio-preview-spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: lsmAudioPreviewSpin 800ms linear infinite;
    margin-right: 6px;
    vertical-align: -1px;
}
@keyframes lsmAudioPreviewSpin {
    to { transform: rotate(360deg); }
}

/* ── Custom Filter Textarea ───────────────────────────────────── */
.lsm-fe-audio-preview-panel textarea {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
}
[data-theme="dark"] .lsm-fe-audio-preview-panel textarea {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e5e7eb;
}

/* ── Result Video ─────────────────────────────────────────────── */
.lsm-fe-audio-preview-result {
    margin: 8px 0 4px 0;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.lsm-fe-audio-preview-video {
    width: 100%;
    max-height: 380px;
    display: block;
    background: #000;
}
.lsm-fe-audio-preview-resulthint {
    padding: 7px 12px;
    font-size: 11px;
    color: var(--c-tx3, #9ca3af);
    background: rgba(0, 0, 0, 0.04);
    line-height: 1.5;
}
[data-theme="dark"] .lsm-fe-audio-preview-resulthint {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
}

/* ── Error Display ────────────────────────────────────────────── */
.lsm-fe-audio-preview-error {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 8px;
    font-size: 12px;
    color: #b91c1c;
    line-height: 1.5;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}
[data-theme="dark"] .lsm-fe-audio-preview-error {
    background: rgba(220, 38, 38, 0.14);
    color: #fca5a5;
}

/* ── Foot Hint ────────────────────────────────────────────────── */
.lsm-fe-audio-preview-foothint {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(20, 160, 133, 0.06);
    border-left: 3px solid rgba(20, 160, 133, 0.45);
    border-radius: 6px;
    font-size: 11px;
    color: var(--c-tx2, #4b5563);
    line-height: 1.5;
}
[data-theme="dark"] .lsm-fe-audio-preview-foothint {
    background: rgba(20, 160, 133, 0.10);
    color: #d1d5db;
}
/* v3.10.233 — Encode-Minuten-Hinweis (neutral, flat B/W) */
.lsm-fe-audio-preview-budget {
    margin-top: 8px;
    padding: 7px 12px;
    background: var(--c-surf2, rgba(0,0,0,0.04));
    border: 1px solid var(--c-bdr, rgba(0,0,0,0.10));
    border-radius: 6px;
    font-size: 11px;
    color: var(--c-tx2, #4b5563);
    font-variant-numeric: tabular-nums;
}
.lsm-fe-audio-preview-budget b { color: var(--c-tx1, #111); font-weight: 600; }
[data-theme="dark"] .lsm-fe-audio-preview-budget {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: #cbd5e1;
}
[data-theme="dark"] .lsm-fe-audio-preview-budget b { color: #f3f4f6; }
/* v3.10.235 — Audio-Transkription Steuerung */
.lsm-fe-audio-transcript { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--c-bdr, rgba(0,0,0,0.1)); font-size: 12px; color: var(--c-tx2, #4b5563); }
.lsm-fe-audio-transcript-done { color: var(--c-tx1, #111); font-weight: 500; }
.lsm-fe-audio-transcript-err { color: #b91c1c; }
.lsm-fe-audio-captog { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.lsm-fe-audio-captog input { margin: 0; }
[data-theme="dark"] .lsm-fe-audio-transcript { border-top-color: rgba(255,255,255,0.12); color: #cbd5e1; }
[data-theme="dark"] .lsm-fe-audio-transcript-done { color: #f3f4f6; }
[data-theme="dark"] .lsm-fe-audio-transcript-err { color: #f87171; }
/* v3.10.238 — Übersetzungs-Steuerung */
.lsm-fe-audio-translate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--c-tx2, #4b5563); }
.lsm-fe-audio-tr-sel { font-family: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--c-bdr, rgba(0,0,0,0.18)); border-radius: 8px; background: var(--c-surf, #fff); color: var(--c-tx1, #111); }
.lsm-fe-audio-tr-status { color: var(--c-tx3, #6b7280); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .lsm-fe-audio-tr-sel { background: #0e0e0e; color: #f3f4f6; border-color: rgba(255,255,255,0.18); }
/* v3.10.237 — Transkript-Editor Overlay */
.lsm-fe-cap-editor-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lsm-fe-cap-editor { background: var(--c-surf, #fff); color: var(--c-tx1, #111); border: 1px solid var(--c-bdr, rgba(0,0,0,0.12)); border-radius: 14px; width: min(680px, 100%); max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.lsm-fe-cap-editor-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--c-bdr, rgba(0,0,0,0.12)); }
.lsm-fe-cap-editor-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.lsm-fe-cap-editor-close { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--c-tx3, #6b7280); padding: 0 4px; }
.lsm-fe-cap-editor-close:hover { color: var(--c-tx1, #111); }
.lsm-fe-cap-editor-hint { padding: 10px 18px; font-size: 12px; color: var(--c-tx3, #6b7280); border-bottom: 1px solid var(--c-bdr, rgba(0,0,0,0.08)); }
.lsm-fe-cap-editor-body { overflow-y: auto; padding: 8px 18px 18px; }
.lsm-fe-cap-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--c-bdr, rgba(0,0,0,0.06)); }
.lsm-fe-cap-time { flex: 0 0 auto; min-width: 42px; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-tx3, #6b7280); padding-top: 8px; }
.lsm-fe-cap-text { flex: 1 1 auto; resize: vertical; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--c-bdr, rgba(0,0,0,0.18)); border-radius: 8px; background: var(--c-surf, #fff); color: var(--c-tx1, #111); }
.lsm-fe-cap-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.lsm-fe-cap-row.is-saved .lsm-fe-cap-text { border-color: #16a34a; }
.lsm-fe-cap-lang { margin-left: auto; margin-right: 10px; font-family: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--c-bdr, rgba(0,0,0,0.18)); border-radius: 8px; background: var(--c-surf, #fff); color: var(--c-tx1, #111); }
.lsm-fe-cap-times { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding-top: 6px; flex-wrap: wrap; max-width: 140px; }
.lsm-fe-cap-t { width: 58px; font: inherit; font-size: 11px; padding: 3px 5px; border: 1px solid var(--c-bdr, rgba(0,0,0,0.18)); border-radius: 6px; background: var(--c-surf, #fff); color: var(--c-tx1, #111); font-variant-numeric: tabular-nums; }
.lsm-fe-cap-arrow { color: var(--c-tx3, #6b7280); font-size: 11px; }
.lsm-fe-cap-unit { font-size: 10px; color: var(--c-tx3, #6b7280); }
.lsm-fe-cap-treset { border: 1px solid var(--c-bdr, rgba(0,0,0,0.18)); background: var(--c-surf, #fff); color: var(--c-tx2, #4b5563); border-radius: 6px; width: 22px; height: 22px; line-height: 1; cursor: pointer; font-size: 13px; padding: 0; }
.lsm-fe-cap-treset:hover:not(:disabled) { color: var(--c-tx1, #111); }
.lsm-fe-cap-treset:disabled { opacity: 0.4; cursor: default; }
[data-theme="dark"] .lsm-fe-cap-treset { background: #0e0e0e; color: #cbd5e1; border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .lsm-fe-cap-lang, [data-theme="dark"] .lsm-fe-cap-t { background: #0e0e0e; color: #f3f4f6; border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .lsm-fe-cap-editor { background: #141414; color: #f3f4f6; border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .lsm-fe-cap-text { background: #0e0e0e; color: #f3f4f6; border-color: rgba(255,255,255,0.18); }



/* ═══════════════════════════════════════════════════════════════
 * v3.10.99 — Audio-Library Storage-Strip Compact Variant
 * Die Vollversion (.lsm-mv-stor2) wirkt im Audio-Tab zu prominent.
 * Override skaliert Schriftgrößen + Padding + Bar-Höhe ohne Markup-
 * Duplikat. Wirkt nur innerhalb von .lsm-fe-audio-storage-compact.
 * ═══════════════════════════════════════════════════════════════ */
.lsm-fe-audio-storage-compact {
    margin-top: 8px;
    margin-bottom: 6px;
    max-width: 520px;
}
.lsm-fe-audio-storage-compact .lsm-mv-stor2 {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="dark"] .lsm-fe-audio-storage-compact .lsm-mv-stor2 {
    background: rgba(30, 41, 59, 0.45);
    border-color: rgba(255, 255, 255, 0.06);
}
.lsm-fe-audio-storage-compact .lsm-mv-stor2-top {
    margin-bottom: 5px;
    font-size: 11.5px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.lsm-fe-audio-storage-compact .lsm-mv-stor2-used b {
    font-weight: 600;
    font-size: 12px;
}
.lsm-fe-audio-storage-compact .lsm-mv-stor2-tot {
    color: var(--c-tx3, #9ca3af);
    font-size: 11px;
}
.lsm-fe-audio-storage-compact .lsm-mv-stor2-bar {
    height: 5px;
    border-radius: 3px;
}
.lsm-fe-audio-storage-compact .lsm-mv-stor2-legend {
    margin-top: 5px;
    gap: 10px;
    font-size: 10.5px;
}
.lsm-fe-audio-storage-compact .lsm-mv-stor2-l::before {
    width: 7px;
    height: 7px;
}
.lsm-fe-audio-storage-compact .lsm-mv-stor2-l b {
    font-weight: 500;
    font-size: 10.5px;
}


/* ═══════════════════════════════════════════════════════════════
 * v3.10.100 — Share-Page 24/7 Loop Position Hint
 * Operator sieht jetzt im share-page Channel-Header welcher Block
 * im 24/7 Loop aktuell läuft + welche Iteration. Vorher: nur Block 0.
 * ═══════════════════════════════════════════════════════════════ */
.lsm-share-channel-247-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: linear-gradient(135deg, #14a085, #a78bfa);
    color: white;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 3px;
    vertical-align: 2px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.lsm-share-channel-loop-info {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* v3.10.100 — Admin 24/7 Banner: Live-Hint (current block + progress) */
.lsm-fe-channel-247-livehint {
    margin-top: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 7px;
    border-left: 3px solid #14a085;
}
[data-theme="dark"] .lsm-fe-channel-247-livehint {
    background: rgba(20, 160, 133, 0.10);
}
.lsm-fe-channel-247-livehint-meta {
    font-size: 12px;
    color: var(--c-tx, #1f2937);
    line-height: 1.5;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
[data-theme="dark"] .lsm-fe-channel-247-livehint-meta {
    color: #e5e7eb;
}
.lsm-fe-channel-247-livehint-meta strong {
    font-weight: 600;
    color: #0d7a64;
}
[data-theme="dark"] .lsm-fe-channel-247-livehint-meta strong {
    color: #5dcaa5;
}
.lsm-fe-channel-247-pulse {
    width: 7px;
    height: 7px;
    background: #14a085;
    border-radius: 50%;
    display: inline-block;
    flex: none;
    box-shadow: 0 0 0 0 rgba(20, 160, 133, 0.5);
    animation: lsmChannel247Pulse 1.6s ease-out infinite;
}
@keyframes lsmChannel247Pulse {
    0%   { box-shadow: 0 0 0 0 rgba(20, 160, 133, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(20, 160, 133, 0); }
    100% { box-shadow: 0 0 0 0 rgba(20, 160, 133, 0); }
}
.lsm-fe-channel-247-livehint-bar {
    height: 3px;
    background: rgba(20, 160, 133, 0.18);
    border-radius: 2px;
    overflow: hidden;
}
.lsm-fe-channel-247-livehint-fill {
    height: 100%;
    background: linear-gradient(90deg, #14a085, #a78bfa);
    transition: width 1s linear;
}

/* v3.10.107 — 24/7 Gesamt-Loop Duration Display */
.lsm-fe-channel-247-total-loop {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--c-tx2, #4b5563);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .lsm-fe-channel-247-total-loop {
    color: #cbd5e1;
}
.lsm-fe-channel-247-total-loop strong {
    font-weight: 600;
    color: #0d7a64;
}
[data-theme="dark"] .lsm-fe-channel-247-total-loop strong {
    color: #5dcaa5;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.10.108 — Live Captions Overlay (Whisper API)
 * Floats over the player area, bottom-center placement (industry-
 * standard for live captions). Toggle button bottom-right.
 *
 * v3.10.116 — Moved to share.css. app-frontend.css is only enqueued
 * on the [lsm_app] App-Dashboard but share-pages need these rules.
 * Captions CSS now lives in share.css next to player-wrap rules.
 * ═══════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════
 * v3.10.118 — Transcript-Tab (Live Captions Edit/Export)
 * ═══════════════════════════════════════════════════════════════ */
.lsm-fe-captions-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--c-bdr);
    background: var(--c-surf, var(--lsm-fe-surface, rgba(255,255,255,0.02)));
}
.lsm-fe-captions-title-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}
.lsm-fe-captions-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--c-tx);
}
.lsm-fe-captions-subtitle {
    font-size: 13px;
    color: var(--c-tx3);
}
.lsm-fe-captions-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.lsm-fe-captions-search-wrap {
    flex: 1 1 200px;
    min-width: 160px;
}
.lsm-fe-captions-search {
    width: 100%;
    padding: 7px 12px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
    color: var(--c-tx);
    font-size: 13px;
}
.lsm-fe-captions-search:focus {
    outline: none;
    border-color: var(--lsm-teal, #14a085);
}

/* v3.10.127 — Session-Picker */
.lsm-fe-captions-session-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    padding: 8px 12px;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: 8px;
}
.lsm-fe-captions-session-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-tx2);
    flex-shrink: 0;
}
.lsm-fe-captions-session-picker {
    flex: 1;
    padding: 6px 10px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
    color: var(--c-tx);
    font-size: 13px;
    cursor: pointer;
}
.lsm-fe-captions-session-picker:focus {
    outline: none;
    border-color: var(--lsm-violet, #a78bfa);
}

/* v3.10.128 — Translation Bar */
.lsm-fe-captions-translate-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--c-surf2);
    border: 1px solid var(--c-bdr);
    border-radius: 8px;
}
.lsm-fe-captions-translate-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-tx2);
    flex-shrink: 0;
}
.lsm-fe-captions-translate-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.lsm-fe-cap-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid var(--c-bdr);
    background: var(--c-surf);
    color: var(--c-tx);
    white-space: nowrap;
    cursor: pointer;
    transition: all 120ms ease;
    font-family: inherit;
    line-height: 1.4;
}
.lsm-fe-cap-badge:hover {
    transform: translateY(-1px);
    border-color: var(--c-bdr2);
}
.lsm-fe-cap-badge.is-active {
    box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px currentColor;
}
.lsm-fe-cap-badge-check {
    font-weight: 700;
    margin-left: 2px;
}
.lsm-fe-cap-badge-source {
    border-color: rgba(20, 160, 133, 0.45);
    background: rgba(20, 160, 133, 0.10);
    color: var(--lsm-teal, #14a085);
}
.lsm-fe-cap-badge-source:hover {
    background: rgba(20, 160, 133, 0.18);
    border-color: rgba(20, 160, 133, 0.65);
}
.lsm-fe-cap-badge-done {
    border-color: rgba(167, 139, 250, 0.45);
    background: rgba(167, 139, 250, 0.10);
    color: var(--lsm-violet, #a78bfa);
}
.lsm-fe-cap-badge-done:hover {
    background: rgba(167, 139, 250, 0.18);
    border-color: rgba(167, 139, 250, 0.65);
}
.lsm-fe-cap-badge-partial {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.10);
    color: var(--lsm-orange-warn, #d97706);
}
.lsm-fe-cap-badge-partial:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.65);
}

/* v3.10.133 — Compare Toggle + Side-by-Side Display */
.lsm-fe-captions-compare-wrap {
    flex-shrink: 0;
    margin-left: auto;
}
.lsm-fe-captions-compare-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--c-tx2);
    cursor: pointer;
    user-select: none;
}
.lsm-fe-captions-compare-toggle input {
    accent-color: var(--lsm-violet, #a78bfa);
    cursor: pointer;
}

.lsm-fe-captions-list.is-translated .lsm-fe-captions-row,
.lsm-fe-captions-list.is-compare-mode .lsm-fe-captions-row {
    grid-template-columns: 28px 72px 1fr 32px;
}
.lsm-fe-captions-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.lsm-fe-captions-text--source {
    border-left: 3px solid var(--lsm-teal, #14a085);
    padding-left: 10px;
    background: rgba(20, 160, 133, 0.06);
    color: var(--c-tx2);
}
.lsm-fe-captions-text--translation {
    border-left: 3px solid var(--lsm-violet, #a78bfa);
    padding-left: 10px;
    background: rgba(167, 139, 250, 0.06);
    color: var(--c-tx);
}
.lsm-fe-captions-text.is-missing {
    color: var(--c-tx4);
    font-style: italic;
}

.lsm-fe-captions-translate-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.lsm-fe-captions-translate-target {
    padding: 5px 8px;
    background: var(--c-surf);
    border: 1px solid var(--c-bdr);
    border-radius: 6px;
    color: var(--c-tx);
    font-size: 12px;
    min-width: 140px;
    cursor: pointer;
}
.lsm-fe-captions-translate-target:focus {
    outline: none;
    border-color: var(--lsm-violet, #a78bfa);
}
.lsm-fe-captions-translate-progress {
    font-size: 12px;
    color: var(--c-tx3);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* v3.10.135 — Budget-Anzeige im Translation-Bar */
.lsm-fe-captions-translate-budget {
    width: 100%;
    font-size: 11px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    margin-top: 4px;
    text-align: right;
}
.lsm-fe-quota-ok {
    color: var(--lsm-teal, #14a085);
}
.lsm-fe-quota-near {
    color: var(--lsm-orange-warn, #d97706);
}
.lsm-fe-quota-warning {
    color: #dc2626;
    font-weight: 600;
}

/* v3.10.138 — Pill-Badges für Toggle-Titles + Hint-Box für Setup-Anleitungen */
.lsm-fe-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid currentColor;
    letter-spacing: 0.02em;
    vertical-align: 2px;
}
.lsm-fe-pill-teal   { color: var(--lsm-teal,   #14a085); background: rgba(20, 160, 133, 0.10); }
.lsm-fe-pill-violet { color: var(--lsm-violet, #a78bfa); background: rgba(167, 139, 250, 0.12); }
.lsm-fe-pill-orange { color: var(--lsm-orange-warn, #d97706); background: rgba(245, 158, 11, 0.12); }

.lsm-fe-hint-box {
    padding: 10px 14px;
    background: rgba(167, 139, 250, 0.05);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-left: 3px solid var(--lsm-violet, #a78bfa);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-tx2);
}
.lsm-fe-hint-box strong { color: var(--c-tx); }
.lsm-fe-hint-box code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11.5px;
    background: var(--c-surf2);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--c-tx);
}
.lsm-fe-hint-box ul {
    list-style: disc;
    color: var(--c-tx2);
}
.lsm-fe-captions-export {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.lsm-fe-captions-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 12px;
}
.lsm-fe-captions-export-btn svg {
    opacity: 0.7;
}
.lsm-fe-captions-bulk-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(167,139,250,0.12);
    border: 1px solid rgba(167,139,250,0.3);
    border-radius: 6px;
}
.lsm-fe-captions-bulk-count {
    font-size: 13px;
    color: var(--lsm-violet, #a78bfa);
    font-weight: 500;
    margin-right: auto;
}

/* List */
.lsm-fe-captions-body {
    padding: 8px 4px 20px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}
.lsm-fe-captions-list {
    display: flex;
    flex-direction: column;
}
.lsm-fe-captions-row {
    display: grid;
    grid-template-columns: 28px 72px 1fr 32px;
    gap: 12px;
    align-items: start;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-bdr);
    transition: background 120ms ease;
}
.lsm-fe-captions-row:hover {
    background: var(--c-surf2);
}
.lsm-fe-captions-row.is-selected {
    background: rgba(167, 139, 250, 0.10);
}
.lsm-fe-captions-check {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
    cursor: pointer;
}
.lsm-fe-captions-check input {
    cursor: pointer;
    accent-color: var(--lsm-violet, #a78bfa);
}
.lsm-fe-captions-time {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--lsm-teal, #14a085);
    background: rgba(20, 160, 133, 0.12);
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
    user-select: none;
    align-self: flex-start;
    letter-spacing: 0.02em;
}
.lsm-fe-captions-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-tx);
    cursor: text;
    border-radius: 4px;
    padding: 2px 4px;
    outline: 1px solid transparent;
    transition: outline-color 120ms ease, background 120ms ease;
    word-break: break-word;
}
.lsm-fe-captions-text:hover {
    background: var(--c-surf2);
}
.lsm-fe-captions-text.is-editing {
    padding: 0;
    background: transparent;
}
.lsm-fe-captions-edit-input {
    width: 100%;
    min-height: 60px;
    padding: 6px 10px;
    background: var(--c-surf2);
    border: 1px solid var(--lsm-teal, #14a085);
    border-radius: 4px;
    color: var(--c-tx);
    font-size: 14px;
    line-height: 1.45;
    font-family: inherit;
    resize: vertical;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
.lsm-fe-captions-edit-input:focus {
    outline: 2px solid var(--lsm-teal, #14a085);
    outline-offset: 1px;
}
.lsm-fe-captions-row-del {
    background: transparent;
    border: none;
    color: var(--c-tx4);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.lsm-fe-captions-row:hover .lsm-fe-captions-row-del {
    opacity: 1;
}
.lsm-fe-captions-row-del:hover {
    color: var(--lsm-orange-warn, #f59e0b);
    background: rgba(245,158,11,0.1);
}

/* v3.10.144 — Translation-Editing UI */
.lsm-fe-captions-text.is-edited {
    border-left: 2px solid var(--lsm-violet, #a78bfa);
    padding-left: 8px;
}
.lsm-fe-captions-edited-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.35);
    color: var(--lsm-violet, #a78bfa);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
    margin-left: 6px;
    align-self: center;
}
.lsm-fe-captions-edited-badge:hover {
    background: rgba(167, 139, 250, 0.22);
    border-color: rgba(167, 139, 250, 0.55);
}
.lsm-fe-captions-edited-badge:active {
    transform: translateY(0.5px);
}

/* v3.10.145 — Auto-Translate Language Chips */
.lsm-fe-lang-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lsm-fe-lang-chip {
    background: var(--c-surf, #fff);
    border: 1px solid var(--c-bdr);
    color: var(--c-tx2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.lsm-fe-lang-chip:hover {
    border-color: var(--c-bdr2, #9ca9bc);
    background: var(--c-surf2);
}
.lsm-fe-lang-chip.is-active {
    background: linear-gradient(135deg, var(--lsm-teal, #14a085) 0%, color-mix(in oklab, var(--lsm-teal, #14a085) 75%, var(--lsm-violet, #a78bfa) 25%) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 3px rgba(20, 160, 133, 0.25);
}
.lsm-fe-lang-chip.is-active:hover {
    filter: brightness(1.05);
}
.lsm-fe-lang-chip:active {
    transform: translateY(0.5px);
}

.lsm-fe-captions-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--c-tx3);
    font-size: 14px;
    line-height: 1.5;
}

.lsm-fe-captions-footer {
    padding: 12px 20px;
    text-align: center;
    border-top: 1px solid var(--c-bdr);
}

/* Mobile responsive */
@media (max-width: 700px) {
    .lsm-fe-captions-header {
        padding: 12px 14px 10px;
    }
    .lsm-fe-captions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .lsm-fe-captions-export {
        justify-content: stretch;
    }
    .lsm-fe-captions-export-btn {
        flex: 1;
        justify-content: center;
    }
    .lsm-fe-captions-row {
        grid-template-columns: 28px 50px 1fr 28px;
        gap: 6px;
        padding: 8px 10px;
    }
    .lsm-fe-captions-time {
        font-size: 11px;
    }
    .lsm-fe-captions-text {
        font-size: 13px;
    }
    .lsm-fe-captions-row-del {
        opacity: 1;
    }
}

/* v3.10.283 — Video-Tags: Karten-Chips, Filterleiste, Drawer-Editor */
.lsm-fe-card-tags { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 8px; }
.lsm-fe-card-tag {
    font-size:10.5px; line-height:1; padding:3px 7px; border-radius:5px;
    background:var(--c-bg2); color:var(--c-tx2,#5a6b80);
    white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis;
}
.lsm-fe-card-tag-more { background:transparent; color:var(--c-tx3,#8595a8); }

.lsm-mv-tagbar {
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    margin:0 0 14px; padding:2px 0;
}
.lsm-mv-tagbar-ico { color:var(--c-tx3,#8595a8); display:inline-flex; margin-right:2px; }
.lsm-mv-tagchip {
    font-size:12px; line-height:1; padding:5px 11px; border-radius:7px; cursor:pointer;
    background:var(--c-surf,#fff); color:var(--c-tx2,#4a5568);
    border:1px solid var(--c-bd,rgba(15,25,45,.12)); font-family:inherit;
    transition:background .12s,border-color .12s;
}
.lsm-mv-tagchip:hover { border-color:var(--c-tx3,#8595a8); }
.lsm-mv-tagchip.on { background:var(--c-tx,#1a2230); color:var(--c-surf,#fff); border-color:var(--c-tx,#1a2230); }
.lsm-mv-tagchip-n { opacity:.6; font-size:11px; margin-left:3px; }

.lsm-vd-taglist { display:flex; flex-wrap:wrap; gap:6px; min-height:24px; align-items:center; }
.lsm-vd-tag {
    display:inline-flex; align-items:center; gap:5px;
    font-size:12px; line-height:1; padding:5px 6px 5px 10px; border-radius:7px;
    background:var(--c-bg2); color:var(--c-tx,#1a2230);
}
.lsm-vd-tag-x {
    background:none; border:none; color:var(--c-tx3,#8595a8); cursor:pointer;
    font-size:15px; line-height:1; padding:0 2px; border-radius:4px;
}
.lsm-vd-tag-x:hover { color:var(--c-da,#c0392b); }

/* v3.10.284 — Download-Audit: Typ-Badges */
.lsm-fe-dl-type {
    display:inline-block; font-size:10.5px; line-height:1; padding:3px 8px;
    border-radius:5px; background:var(--c-bg2); color:var(--c-tx2,#5a6b80); white-space:nowrap;
}
.lsm-fe-dl-type-clip  { background:rgba(20,160,133,.14); color:#0f6e56; }
.lsm-fe-dl-type-dvr   { background:rgba(167,139,250,.16); color:#5b46b3; }
.lsm-fe-dl-type-audio { background:rgba(234,160,40,.16); color:#8a5a0b; }

/* v3.10.284 — Kapitel-Editor im Drawer */
.lsm-vd-chaplist { display:flex; flex-direction:column; gap:4px; min-height:20px; }
.lsm-vd-chap {
    display:flex; align-items:center; gap:8px;
    font-size:12px; padding:5px 6px 5px 8px; border-radius:6px; background:var(--c-bg2);
}
.lsm-vd-chap-t {
    font-family:var(--mono,monospace); font-size:11px; color:var(--c-tx2,#5a6b80);
    min-width:52px; text-align:right;
}
.lsm-vd-chap-title { flex:1; color:var(--c-tx,#1a2230); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* v3.10.285 — AI Add-On Tab (flache App-Ästhetik, vorhandene Tokens) */
.lsm-vd-ai { display:flex; flex-direction:column; gap:14px; }
.lsm-vd-ai-head { display:flex; align-items:center; gap:8px; }
.lsm-vd-ai-title { font-size:14px; font-weight:600; color:var(--c-tx,#1a2230); }
.lsm-vd-ai-intro { font-size:13px; color:var(--c-tx3,#5a6b80); line-height:1.55; }
.lsm-vd-ai-status { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--c-tx2,#4a5568); padding:8px 0; }
.lsm-vd-ai-spin {
    width:14px; height:14px; border-radius:50%;
    border:2px solid var(--c-bd,rgba(15,25,45,.18)); border-top-color:var(--c-tx2,#4a5568);
    display:inline-block; animation:lsmAiSpin .8s linear infinite;
}
@keyframes lsmAiSpin { to { transform:rotate(360deg); } }
.lsm-vd-ai-err { font-size:12px; color:var(--c-da,#c0392b); background:rgba(192,57,43,.08); padding:7px 10px; border-radius:6px; }
.lsm-vd-ai-sec { display:flex; flex-direction:column; gap:7px; padding-bottom:12px; border-bottom:1px solid var(--c-bd,rgba(15,25,45,.08)); }
.lsm-vd-ai-sec:last-of-type { border-bottom:none; }
.lsm-vd-ai-lbl { font-size:11px; color:var(--c-tx3,#5a6b80); }
.lsm-vd-ai-tags { display:flex; flex-wrap:wrap; gap:6px; }
.lsm-vd-ai-chaps { display:flex; flex-direction:column; gap:4px; }
.lsm-vd-ai-desc { font-size:13px; color:var(--c-tx2,#4a5568); line-height:1.55; background:var(--c-bg2); border-radius:8px; padding:10px 12px; }
.lsm-vd-ai-acts { display:flex; gap:8px; margin-top:2px; }
.lsm-vd-ai-foot { padding-top:4px; }
.lsm-vmc-empty-sm { font-size:12px; color:var(--c-tx3,#8595a8); }

/* v3.10.287 — Storage Add-On Panel */
.lsm-st-storage { display:flex; flex-direction:column; gap:16px; max-width:680px; }
.lsm-st-meter { display:flex; flex-direction:column; gap:5px; }
.lsm-st-meter-row { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--c-tx2); }
.lsm-st-meter-val { color:var(--c-tx); font-weight:600; }
.lsm-st-meter-sub { font-size:11px; color:var(--c-tx3); }
.lsm-st-bar { height:8px; background:var(--c-bg2); border-radius:99px; overflow:hidden; }
.lsm-st-bar-fill { height:100%; background:var(--c-tx2); border-radius:99px; transition:width .3s; }
.lsm-st-bar-fill.warn { background:#d98324; }
.lsm-st-warn {
    font-size:12px; color:#8a5a0b; background:rgba(234,160,40,.14);
    padding:9px 12px; border-radius:8px;
}
.lsm-st-upload { display:flex; align-items:center; }
.lsm-st-files { display:flex; flex-direction:column; border:1px solid var(--c-bd,rgba(15,25,45,.1)); border-radius:10px; overflow:hidden; }
.lsm-st-file { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--c-bd,rgba(15,25,45,.07)); }
.lsm-st-file:last-child { border-bottom:none; }
.lsm-st-file-ic { color:var(--c-tx3); display:flex; }
.lsm-st-file-name { flex:1; font-size:13px; color:var(--c-tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lsm-st-file-size { font-size:12px; color:var(--c-tx3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lsm-st-file-act {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:6px; color:var(--c-tx3);
    background:transparent; border:none; cursor:pointer; text-decoration:none;
}
.lsm-st-file-act:hover { background:var(--c-bg2); color:var(--c-tx); }
.lsm-st-file-del:hover { color:#c0392b; }

/* v3.10.288 — Storage Chunked-Upload Fortschritt */
.lsm-st-prog { display:inline-flex; align-items:center; gap:8px; }
.lsm-st-prog-bar { width:120px; height:6px; background:var(--c-bg2); border-radius:99px; overflow:hidden; }
.lsm-st-prog-fill { display:block; height:100%; background:var(--c-tx2); border-radius:99px; transition:width .2s; }
.lsm-st-prog-txt { font-size:12px; color:var(--c-tx3); }

/* v3.10.292 — Storage-Feinheiten: Dropzone, Toolbar, Filter */
.lsm-st-drop {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:22px 16px; border:1.5px dashed var(--c-bd,rgba(15,25,45,.2)); border-radius:12px;
    color:var(--c-tx2); cursor:pointer; text-align:center; transition:border-color .15s, background .15s;
}
.lsm-st-drop:hover { border-color:var(--c-tx2); }
.lsm-st-drop.over { border-color:var(--c-tx); background:var(--c-bg2); }
.lsm-st-drop-t { font-size:13px; color:var(--c-tx); }
.lsm-st-drop-t u { text-decoration:underline; }
.lsm-st-drop-s { font-size:11px; color:var(--c-tx3); }
/* v3.10.653 — Ordner-Upload: sieht aus wie ein Link, ist aber ein Button,
   damit er das umgebende <label> nicht auslöst. */
.lsm-st-linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--c-blue); text-decoration:underline; cursor:pointer; }
.lsm-st-linkbtn:hover { opacity:.8; }
.lsm-up-path { color:var(--c-tx3); }
.lsm-st-queue:not(:empty) { padding:2px 0; }
.lsm-st-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.lsm-st-chips { display:flex; gap:6px; flex-wrap:wrap; }
.lsm-st-chip {
    display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:5px 10px;
    border-radius:7px; border:1px solid var(--c-bd,rgba(15,25,45,.12)); background:transparent;
    color:var(--c-tx2); cursor:pointer;
}
.lsm-st-chip.active { background:var(--c-tx); color:var(--c-bg,#fff); border-color:var(--c-tx); }
.lsm-st-chip-n { font-size:10.5px; opacity:.7; font-variant-numeric:tabular-nums; }
.lsm-st-tools { display:flex; gap:6px; align-items:center; }
.lsm-st-search, .lsm-st-sort {
    font-size:12px; padding:5px 9px; border-radius:7px;
    border:1px solid var(--c-bd,rgba(15,25,45,.12)); background:var(--c-bg2); color:var(--c-tx);
}
.lsm-st-search { width:140px; }

/* v3.10.293 — Storage-Ordner: Breadcrumb, Ordnerzeilen */
.lsm-st-bcbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.lsm-st-bc { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:13px; }
.lsm-st-crumb { background:none; border:none; padding:2px 4px; cursor:pointer; color:var(--c-tx2); font-size:13px; border-radius:5px; }
.lsm-st-crumb:hover { background:var(--c-bg2); color:var(--c-tx); }
.lsm-st-crumb:last-child { color:var(--c-tx); font-weight:600; }
.lsm-st-bc-sep { color:var(--c-tx3); }
.lsm-st-newfolder { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:6px 11px; border-radius:7px; border:1px solid var(--c-bd,rgba(15,25,45,.12)); background:transparent; color:var(--c-tx2); cursor:pointer; }
.lsm-st-newfolder:hover { border-color:var(--c-tx2); color:var(--c-tx); }
.lsm-st-folders { display:flex; flex-direction:column; border:1px solid var(--c-bd,rgba(15,25,45,.1)); border-radius:10px; overflow:hidden; }
.lsm-st-folder { display:flex; align-items:center; gap:11px; padding:10px 12px; border-bottom:1px solid var(--c-bd,rgba(15,25,45,.07)); cursor:pointer; }
.lsm-st-folder:last-child { border-bottom:none; }
.lsm-st-folder:hover { background:var(--c-bg2); }
.lsm-st-folder-ic { color:var(--c-tx2); display:flex; }
.lsm-st-folder-nm { flex:1; font-size:13px; font-weight:600; color:var(--c-tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lsm-st-folder-cnt { font-size:11px; color:var(--c-tx3); white-space:nowrap; }
.lsm-st-folder-act { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; color:var(--c-tx3); background:transparent; border:none; cursor:pointer; }
.lsm-st-folder-act:hover { background:var(--c-bg); color:var(--c-tx); }
.lsm-st-folder-del:hover { color:#c0392b; }

/* v3.10.294 — Storage-Share: Teilen-Buttons + Dialog */
.lsm-st-file-share:hover, .lsm-st-folder-share:hover { color:#14a085; }
.lsm-st-ov { position:fixed; inset:0; background:rgba(10,16,28,.45); display:flex; align-items:center; justify-content:center; z-index:99999; padding:18px; }
.lsm-st-dlg { background:var(--c-bg,#fff); border:1px solid var(--c-bd,rgba(15,25,45,.12)); border-radius:12px; width:100%; max-width:420px; padding:18px 20px; max-height:90vh; overflow:auto; }
.lsm-st-dlg-h { display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:600; color:var(--c-tx); }
.lsm-st-dlg-x { background:none; border:none; font-size:22px; line-height:1; color:var(--c-tx3); cursor:pointer; }
.lsm-st-dlg-sub { font-size:12px; color:var(--c-tx3); margin:2px 0 14px; word-break:break-word; }
.lsm-st-link { display:flex; gap:6px; margin-bottom:14px; }
.lsm-st-link input { flex:1; font-size:12px; padding:7px 9px; border:1px solid var(--c-bd,rgba(15,25,45,.12)); border-radius:7px; background:var(--c-bg2); color:var(--c-tx); }
.lsm-st-dlg-sec { margin-bottom:12px; }
.lsm-st-dlg-lbl { display:block; font-size:12px; color:var(--c-tx2); margin-bottom:5px; }
.lsm-st-dlg-lbl span { color:var(--c-tx3); font-weight:400; }
.lsm-st-dlg-in { width:100%; font-size:13px; padding:8px 10px; border:1px solid var(--c-bd,rgba(15,25,45,.12)); border-radius:7px; background:var(--c-bg2); color:var(--c-tx); font-family:inherit; }
textarea.lsm-st-dlg-in { resize:vertical; }
.lsm-st-dlg-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.lsm-st-revoke { color:#c0392b; }

/* v3.10.295 — Dateianfragen-Verwaltung */
.lsm-fq-new { padding:12px; background:var(--c-bg2); border-radius:8px; margin-bottom:14px; }
.lsm-fq-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lsm-fq-list { display:flex; flex-direction:column; gap:8px; max-height:340px; overflow:auto; }
.lsm-fq-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--c-bd,rgba(15,25,45,.12)); border-radius:8px; }
.lsm-fq-main { flex:1; min-width:0; }
.lsm-fq-t { font-size:13px; font-weight:600; color:var(--c-tx); }
.lsm-fq-closed { font-size:10.5px; font-weight:500; color:#8a5a0b; background:rgba(234,160,40,.16); padding:1px 7px; border-radius:4px; margin-left:6px; }
.lsm-fq-m { font-size:11px; color:var(--c-tx3); margin-top:2px; }
.lsm-fq-acts { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.lsm-fq-mini { font-size:11px; padding:4px 9px; border-radius:6px; border:1px solid var(--c-bd,rgba(15,25,45,.12)); background:var(--c-bg); color:var(--c-tx2); cursor:pointer; }
.lsm-fq-mini:hover { border-color:var(--c-tx2); color:var(--c-tx); }
.lsm-fq-del:hover { color:#c0392b; border-color:#c0392b; }
.lsm-fq-empty { font-size:12px; color:var(--c-tx3); text-align:center; padding:16px 0; }

/* v3.10.296 — Ziel-Tracking */
.lsm-fq-prog { margin:6px 0 14px; }
.lsm-fq-progbar { height:8px; background:var(--c-bd,rgba(15,25,45,.12)); border-radius:99px; overflow:hidden; }
.lsm-fq-progbar i { display:block; height:100%; background:#14a085; border-radius:99px; }
.lsm-fq-progtxt { font-size:12px; color:var(--c-tx2); margin-top:5px; }
.lsm-fq-stats { display:flex; gap:8px; margin-bottom:14px; }
.lsm-fq-stat { flex:1; border:1px solid var(--c-bd,rgba(15,25,45,.12)); border-radius:7px; padding:8px 11px; }
.lsm-fq-stat b { display:block; font-size:18px; color:var(--c-tx); }
.lsm-fq-stat span { font-size:11px; color:var(--c-tx3); }
.lsm-fq-stat.late b { color:#b45309; }
.lsm-fq-tlist { display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; margin-bottom:12px; }
.lsm-fq-trow { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--c-bd,rgba(15,25,45,.1)); border-radius:8px; }
.lsm-fq-tmain { flex:1; min-width:0; }
.lsm-fq-tn { font-size:13px; font-weight:600; color:var(--c-tx); }
.lsm-fq-te { font-size:11px; color:var(--c-tx3); }
.lsm-fq-tf { font-size:11px; color:var(--c-tx2); white-space:nowrap; min-width:64px; text-align:right; }
.lsm-fq-pill { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:5px; }
.lsm-fq-pill.done { color:#fff; background:#14a085; }
.lsm-fq-pill.pend { color:var(--c-tx2); background:var(--c-bg2); border:1px solid var(--c-bd,rgba(15,25,45,.12)); }
.lsm-fq-pill.late { color:#fff; background:#b45309; }
.lsm-fq-tacts { display:flex; gap:5px; }
.lsm-fq-addc { display:flex; gap:6px; padding-top:12px; border-top:1px solid var(--c-bd,rgba(15,25,45,.1)); }
.lsm-fq-addc input { flex:1; }

/* v3.10.297 — Professionelle Upload-Queue (Speicher-Tab) */
.lsm-up-panel { border:1px solid var(--c-bd,rgba(15,25,45,.12)); border-radius:10px; overflow:hidden; background:var(--c-bg); }
.lsm-up-head { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; font-size:12px; font-weight:600; color:var(--c-tx); background:var(--c-bg2); border-bottom:1px solid var(--c-bd,rgba(15,25,45,.1)); }
.lsm-up-spin { width:13px; height:13px; border:2px solid rgba(20,160,133,.25); border-top-color:#14a085; border-radius:50%; animation:lsmUpSpin .7s linear infinite; }
@keyframes lsmUpSpin { to { transform:rotate(360deg); } }
.lsm-up-row { display:flex; align-items:center; gap:11px; padding:10px 12px; border-bottom:1px solid var(--c-bd,rgba(15,25,45,.07)); }
.lsm-up-row:last-child { border-bottom:none; }
.lsm-up-row.queued { opacity:.6; }
.lsm-up-ic { display:flex; color:var(--c-tx3); flex:none; }
.lsm-up-ic.ok { color:#14a085; }
.lsm-up-ic.bad { color:#c0392b; }
.lsm-up-b { flex:1; min-width:0; }
.lsm-up-t { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.lsm-up-n { font-size:13px; color:var(--c-tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lsm-up-pct { font-size:12px; color:var(--c-tx2); font-family:var(--mono); flex:none; }
.lsm-up-st { font-size:11px; color:var(--c-tx3); flex:none; }
.lsm-up-st.ok { color:#14a085; font-weight:600; }
.lsm-up-st.bad { color:#c0392b; font-weight:600; }
.lsm-up-bar { height:5px; background:var(--c-bd,rgba(15,25,45,.12)); border-radius:99px; overflow:hidden; margin:6px 0 4px; }
.lsm-up-bar i { display:block; height:100%; background:#14a085; border-radius:99px; transition:width .25s ease; }
.lsm-up-row.err .lsm-up-bar i { background:#c0392b; }
.lsm-up-meta { font-size:11px; color:var(--c-tx3); }
.lsm-up-meta.bad { color:#c0392b; }

/* v3.10.300 — Storage-Share Identitäts-Schalter */
.lsm-st-dlg-toggle { display:flex; gap:9px; align-items:flex-start; padding:10px 0 4px; cursor:pointer; }
.lsm-st-dlg-toggle input { margin-top:2px; flex:none; width:16px; height:16px; accent-color:#14a085; }
.lsm-st-dlg-toggle span { display:flex; flex-direction:column; gap:2px; }
.lsm-st-dlg-toggle b { font-size:13px; color:var(--c-tx); font-weight:600; }
.lsm-st-dlg-toggle small { font-size:11px; color:var(--c-tx3); line-height:1.4; }

/* v3.10.303 — Storage: aktiver Share-Link + Download-Zähler */
.lsm-st-file-share.lsm-st-shared,
.lsm-st-folder-share.lsm-st-shared { color:#14a085; }
.lsm-st-file-share.lsm-st-shared:hover,
.lsm-st-folder-share.lsm-st-shared:hover { color:#0f7d68; }
.lsm-st-file-dl {
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; color:var(--c-tx3); margin-left:8px;
  font-variant-numeric:tabular-nums;
}
.lsm-st-file-dl svg { opacity:.75; }

/* v3.10.304 — Download-Log-Dialog + klickbarer Zähler */
button.lsm-st-file-dl { background:none; border:none; cursor:pointer; padding:2px 4px; border-radius:5px; }
button.lsm-st-file-dl:hover { background:var(--c-bg2); color:#14a085; }
.lsm-st-log-list { display:flex; flex-direction:column; gap:4px; max-height:340px; overflow:auto; }
.lsm-st-log-row { display:flex; align-items:center; gap:12px; padding:9px 11px; border:1px solid var(--c-bd,rgba(15,25,45,.1)); border-radius:8px; }
.lsm-st-log-main { flex:1; min-width:0; }
.lsm-st-log-who { font-size:13px; font-weight:600; color:var(--c-tx); }
.lsm-st-log-anon { font-weight:400; color:var(--c-tx3); }
.lsm-st-log-meta { font-size:11px; color:var(--c-tx3); margin-top:1px; }
.lsm-st-log-when { font-size:12px; color:var(--c-tx2); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* v3.10.310 — Live-Chat Moderation (Drawer-Tab) */
.lsm-cm-wrap{display:flex;flex-direction:column;height:100%;min-height:420px;max-height:72vh}
.lsm-cm-head{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;border-bottom:1px solid var(--c-bd);margin-bottom:10px}
.lsm-cm-title{font-size:15px;font-weight:650;color:var(--c-tx)}
.lsm-cm-stat{font-size:12px;color:var(--c-tx3)}
.lsm-cm-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.lsm-cm-tl{font-size:11px;font-weight:600;color:var(--c-tx3);margin-right:2px}
.lsm-cm-chip{border:1px solid var(--c-bd);background:var(--c-bg2,#fff);color:var(--c-tx2);border-radius:99px;padding:4px 12px;font-size:11.5px;font-weight:500;cursor:pointer}
.lsm-cm-chip.on{background:var(--c-tx);color:var(--c-bg,#fff);border-color:var(--c-tx)}
.lsm-cm-btn{border:1px solid var(--c-bd);background:var(--c-bg2,#fff);color:var(--c-tx2);border-radius:8px;padding:5px 13px;font-size:12px;font-weight:600;cursor:pointer}
.lsm-cm-btn.lsm-cm-send{background:#14a085;color:#fff;border:none}
.lsm-cm-btn.lsm-cm-send:disabled{opacity:.5;cursor:default}
.lsm-cm-pin{display:flex;align-items:center;gap:8px;padding:9px 13px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.35);border-radius:9px;font-size:12.5px;color:var(--c-tx);margin-bottom:10px;line-height:1.4}
.lsm-cm-pin b{color:#7c3aed}
.lsm-cm-unpin{margin-left:auto;border:none;background:none;color:var(--c-tx3);font-size:11px;cursor:pointer;text-decoration:underline}
.lsm-cm-feed{flex:1;overflow-y:auto;border:1px solid var(--c-bd);border-radius:10px;padding:8px;background:var(--c-bg,#fafbfc);display:flex;flex-direction:column;gap:2px;min-height:200px}
.lsm-cm-msg{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-radius:8px;position:relative}
.lsm-cm-msg:hover{background:var(--c-bg2,#fff)}
.lsm-cm-main{flex:1;min-width:0}
.lsm-cm-name{font-size:12.5px;font-weight:700;color:#0f7d68}
.lsm-cm-role{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:99px;margin:0 5px}
.lsm-cm-role.host{background:#14a085;color:#fff}
.lsm-cm-role.mod{background:#a78bfa;color:#fff}
.lsm-cm-time{font-size:10.5px;color:var(--c-tx3);margin-left:4px}
.lsm-cm-txt{font-size:13px;color:var(--c-tx);margin-top:2px;line-height:1.4;word-wrap:break-word}
.lsm-cm-acts{display:none;gap:4px;flex:none}
.lsm-cm-msg:hover .lsm-cm-acts{display:flex}
.lsm-cm-a{border:1px solid var(--c-bd);background:var(--c-bg2,#fff);color:var(--c-tx2);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600;cursor:pointer}
.lsm-cm-a-del:hover{color:#c0392b;border-color:#e7b3ad}
.lsm-cm-deleted .lsm-cm-txt{color:var(--c-tx3);font-style:italic;text-decoration:line-through}
.lsm-cm-form{display:flex;gap:8px;margin-top:10px}
.lsm-cm-input{flex:1;border:1px solid var(--c-bd);background:var(--c-bg2,#fff);color:var(--c-tx);border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none}
.lsm-cm-input:focus{border-color:#14a085}

/* v3.10.313 — Stream-Edit Tab-Umstrukturierung #3: Flat B/W + User-Accent, horizontale Tabs.
   Greift nur auf den Edit-Subnav (--flat), Registrierungs-Subnav bleibt unberührt. */
.lsm-fe-edit-subnav--flat{
  background:transparent;
  padding:0 0 0;
  gap:4px;
  margin:0 0 16px;
  border-bottom:1px solid var(--c-bdr,#e4e4e7);
  flex-wrap:nowrap;
}
.lsm-fe-edit-subnav--flat .lsm-fe-edit-subtab{
  border-radius:6px 6px 0 0;
  padding:9px 15px;
  font-size:12.5px;
  font-weight:600;
  color:var(--c-tx2,#52525b);
  background:transparent;
  border:1px solid transparent;
  border-bottom:2px solid transparent;
  box-shadow:none;
  margin-bottom:-1px;
}
.lsm-fe-edit-subnav--flat .lsm-fe-edit-subtab:hover{
  color:var(--c-tx,#18181b);
  background:var(--c-surf2,#f4f4f5);
}
.lsm-fe-edit-subnav--flat .lsm-fe-edit-subtab.act{
  background:transparent;
  color:var(--lsm-ed-accent,#111);
  box-shadow:none;
  border-bottom:2px solid var(--lsm-ed-accent,#111);
}
.lsm-fe-edit-subnav--flat .lsm-fe-edit-subtab.act .lsm-fe-pro-badge{
  color:var(--lsm-ed-accent,#111);
  background:transparent;
  border:1px solid var(--lsm-ed-accent,#111);
}

/* v3.10.314 — Allgemein-Tab: Poster-Picker preview-forward (flat).
   Vorschau überlagert die Leer-Platzhalter-Box, sobald initFEThumbnailUpload
   .lsm-fe-thumbnail-preview auf display:flex setzt — kein JS-Eingriff nötig. */
.lsm-fe-thumbpick-card{ display:flex; flex-direction:column; gap:11px; }
.lsm-fe-thumbpick-preview{
  position:relative; width:100%; max-width:360px; aspect-ratio:16/9;
  border:1px solid var(--c-bdr,#e4e4e7); border-radius:8px; overflow:hidden;
  background:var(--c-surf2,#f4f4f5);
}
.lsm-fe-thumbpick-empty{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px;
  color:var(--c-tx3,#94a3b8); font-size:12px;
}
.lsm-fe-thumbpick-empty svg{ width:30px; height:30px; opacity:.55; }
.lsm-fe-thumbpick-preview .lsm-fe-thumbnail-preview{
  position:absolute; inset:0; margin:0; padding:0; border:none; border-radius:0;
}
.lsm-fe-thumbpick-preview .lsm-fe-thumbnail-preview img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:0; max-width:none;
}
.lsm-fe-thumbpick-preview .lsm-fe-thumbnail-remove{
  position:absolute; top:8px; right:8px; width:26px; height:26px; padding:0;
  border:none; border-radius:6px; background:rgba(0,0,0,.6); color:#fff;
  font-size:17px; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
}
.lsm-fe-thumbpick-controls{ display:flex; flex-direction:column; gap:8px; }
.lsm-fe-thumbpick-upload{ width:auto !important; padding:0 12px !important; gap:6px; }
.lsm-fe-thumbpick-upload span{ font-size:12px; font-weight:600; }

/* v3.10.315 — Overlay-Tab: Live-Vorschau (Overlay-Karte über Player-Frame). */
.lsm-fe-ovprev{ margin-top:14px; }
.lsm-fe-ovprev-label{ font-size:12px; font-weight:600; color:var(--c-tx2,#52525b); margin-bottom:6px; }
.lsm-fe-ovprev-frame{
  position:relative; background:#000; border:1px solid var(--c-bdr,#e4e4e7);
  border-radius:8px; aspect-ratio:16/9; max-width:420px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.lsm-fe-ovprev-tag{
  position:absolute; top:8px; left:10px; font-size:10px;
  font-family:var(--mono,ui-monospace,monospace); color:rgba(255,255,255,.4); letter-spacing:.05em;
}
.lsm-fe-ovprev-card{
  max-width:80%; background:#185FA5; color:#fff; border-radius:8px;
  padding:14px 16px; text-align:center;
}
.lsm-fe-ovprev-msg{ font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.lsm-fe-ovprev-btn{
  display:inline-block; margin-top:10px; padding:6px 13px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4);
  border-radius:6px; font-size:12px; font-weight:600; color:#fff; text-decoration:none;
}

/* v3.10.323 — Live-Umfrage (Host-Editor, flat B/W + User-Accent) */
.lsm-fe-poll-cap{display:block;font-weight:400;font-size:12px;color:var(--c-tx3,#64748b);margin-top:2px;}
.lsm-fe-poll-locked{margin-top:10px;font-size:13px;color:var(--c-tx2,#475569);background:var(--c-bg2,#f8fafc);border:1px solid var(--lsm-border,#e2e8f0);border-radius:8px;padding:11px 13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.lsm-fe-poll-locked a{color:var(--lsm-poll-accent,#111);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
#lsmPollEditor{margin-top:10px;}
.lsm-fe-poll-statusbar{margin-bottom:10px;}
.lsm-fe-poll-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--lsm-border,#e2e8f0);color:var(--c-tx2,#475569);background:var(--c-bg2,#f8fafc);}
.lsm-fe-poll-badge[data-st="open"]{color:#fff;background:var(--lsm-poll-accent,#111);border-color:var(--lsm-poll-accent,#111);}
.lsm-fe-poll-badge[data-st="closed"]{color:var(--c-tx,#0f172a);background:transparent;border-color:var(--c-tx3,#94a3b8);}
.lsm-fe-poll-field{margin-bottom:11px;}
.lsm-fe-poll-lbl{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:var(--c-tx2,#475569);}
.lsm-fe-poll-optrow{display:flex;gap:7px;align-items:center;margin-bottom:7px;}
.lsm-fe-poll-optrow .lsm-fe-input{flex:1;}
.lsm-fe-poll-optx{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--lsm-border,#e2e8f0);background:var(--c-surf,#fff);color:var(--c-tx3,#94a3b8);border-radius:7px;cursor:pointer;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;}
.lsm-fe-poll-optx:hover{color:#b91c1c;border-color:#b91c1c;}
.lsm-fe-poll-optx:disabled{opacity:.35;cursor:not-allowed;}
.lsm-fe-poll-resbox{border:1px solid var(--lsm-poll-accent,#111);border-radius:9px;padding:12px 13px;margin:4px 0 12px;}
.lsm-fe-poll-when{margin-top:10px;padding-top:10px;border-top:1px solid var(--lsm-border,#e2e8f0);}
.lsm-fe-poll-when .lsm-fe-input{max-width:280px;}
.lsm-fe-poll-preview{border:1px solid var(--lsm-border,#e2e8f0);border-radius:9px;padding:12px 14px;margin-bottom:12px;}
.lsm-fe-poll-preview-h{font-size:11px;font-weight:600;margin-bottom:10px;color:var(--c-tx2,#475569);}
.lsm-fe-poll-opt{margin-bottom:9px;}
.lsm-fe-poll-opt:last-child{margin-bottom:0;}
.lsm-fe-poll-opt .pl{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:4px;color:var(--c-tx,#0f172a);}
.lsm-fe-poll-opt .pl .pc{color:var(--c-tx3,#94a3b8);font-variant-numeric:tabular-nums;}
.lsm-fe-poll-bar{height:8px;background:var(--c-bg2,#eef2f7);border-radius:99px;overflow:hidden;}
.lsm-fe-poll-bar i{display:block;height:100%;background:var(--lsm-poll-accent,#111);border-radius:99px;transition:width .4s ease;}
.lsm-fe-poll-opt.is-mine .pl{font-weight:700;}
.lsm-fe-poll-actions{display:flex;gap:8px;flex-wrap:wrap;}
.lsm-fe-poll-actions .lsm-fe-btn:disabled{opacity:.4;cursor:not-allowed;}

/* v3.10.326 — Drawer-Header: Steuerzeile (Status-Toggles + Ansehen-Buttons) */
.lsm-fe-drawer-hdr-controls{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.lsm-fe-drawer-hdr-toggles{ display:flex; gap:7px; }
.lsm-fe-drawer-hdr-spacer{ flex:1; }
.lsm-fe-drawer-hdr-actions{ display:flex; gap:7px; }
/* einzeiliger, kompakter Pill-Toggle (überschreibt .lsm-fe-pill-tgl Basis) */
.lsm-fe-pill-tgl--compact{ flex:0 0 auto; min-width:0; justify-content:flex-start; gap:7px; padding:5px 10px; }
.lsm-fe-pill-tgl--compact .lsm-fe-pill-tgl-lbl{ font-weight:600; color:var(--c-tx2); }
.lsm-fe-pill-tgl-state{ font-size:11px; color:var(--c-tx4); font-variant-numeric:tabular-nums; }
.lsm-fe-pill-tgl--compact.on .lsm-fe-pill-tgl-lbl{ color:#15803d; }
.lsm-fe-pill-tgl--compact.on .lsm-fe-pill-tgl-state{ color:#16a34a; }
/* Ansehen-Buttons (normale Buttons statt Link-Pills) */
.lsm-fe-drawer-viewbtn{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; font-size:12.5px; font-weight:600; text-decoration:none; border-radius:6px; border:1px solid var(--c-bdr); background:var(--c-surf); color:var(--c-tx2); transition:all 120ms ease; flex-shrink:0; }
.lsm-fe-drawer-viewbtn:hover{ border-color:var(--c-bdr2); background:var(--c-surf2); color:var(--c-tx); }
.lsm-fe-drawer-viewbtn svg{ flex-shrink:0; }
.lsm-fe-drawer-viewbtn--live svg{ color:#dc2626; }
.lsm-fe-drawer-viewbtn--vod svg{ color:#1d4ed8; }

/* v3.10.328 — Speicher-Redesign: KPI-Karten, Auslastungs-Balken, Browser-Karte */
.lsm-st-kpis{ display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:720px){ .lsm-st-kpis{ grid-template-columns:1fr; } }
.lsm-st-card{ background:var(--c-surf,#fff); border:1px solid var(--c-bd,rgba(15,25,45,.1)); border-radius:9px; padding:16px 18px; gap:0; }
.lsm-st-card-lbl{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--c-tx3); margin-bottom:11px; }
.lsm-st-card-lbl svg{ color:var(--c-tx3); opacity:.8; }
.lsm-st-big{ font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--c-tx); font-variant-numeric:tabular-nums; line-height:1.1; }
.lsm-st-big small{ font-size:13px; font-weight:500; color:var(--c-tx3); font-family:inherit; letter-spacing:0; }
.lsm-st-big-sm{ font-size:22px; }
.lsm-st-pct{ font-size:11.5px; color:var(--c-tx3); margin-top:4px; }
.lsm-st-bar2{ display:flex; height:10px; border-radius:99px; background:var(--c-bg2,#eef2f7); overflow:hidden; margin:14px 0 13px; }
.lsm-st-seg{ height:100%; transition:width .4s ease; }
.lsm-st-seg.v{ background:#185FA5; } .lsm-st-seg.a{ background:#14a085; } .lsm-st-seg.o{ background:#b9770f; }
/* v3.10.665 — Egress-Balken: nah am Limit / ausgeschöpft */
.lsm-st-seg.w{ background:#b45309; } .lsm-st-seg.x{ background:#b91c1c; }
.lsm-st-legend{ display:flex; flex-wrap:wrap; gap:7px 18px; }
.lsm-st-leg{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--c-tx2); }
.lsm-st-leg i{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.lsm-st-leg b{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--c-tx); }
.lsm-st-leg.v i{ background:#185FA5; } .lsm-st-leg.a i{ background:#14a085; } .lsm-st-leg.o i{ background:#b9770f; } .lsm-st-leg.f i{ background:var(--c-tx3); opacity:.45; }

/* Browser-Karte */
.lsm-st-browser{ background:var(--c-surf,#fff); border:1px solid var(--c-bd,rgba(15,25,45,.1)); border-radius:9px; padding:6px 16px 14px; margin-top:14px; }

/* Datei-Zeile: Typ-Icon-Chips + Metazeile */
.lsm-st-file-ic{ width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--c-bg2,#eef2f7); color:var(--c-tx3); }
.lsm-st-file-ic.kind-video{ background:rgba(24,95,165,.12); color:#185FA5; }
.lsm-st-file-ic.kind-audio{ background:rgba(20,160,133,.13); color:#14a085; }
.lsm-st-file-ic.kind-other{ background:rgba(185,119,15,.13); color:#b9770f; }
.lsm-st-file-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lsm-st-file-main > .lsm-st-file-name{ flex:0 0 auto; }
.lsm-st-file-meta{ font-size:10.5px; color:var(--c-tx3); opacity:.85; margin-top:1px; }
.lsm-st-file{ border-radius:7px; }
.lsm-st-file:hover{ background:var(--c-bg2,#f5f7fb); }

/* v3.10.329 — Speicher: Abstände wiederhergestellt. Die neue Browser-Karte war
   keine Flex-Spalte mit gap, daher klebten die Elemente. Rhythmus = wie vorher (16px). */
.lsm-st-kpis{ margin-bottom:0; }
.lsm-st-browser{ display:flex; flex-direction:column; gap:16px; padding:18px; margin-top:0; }
.lsm-st-queue:empty{ display:none; }
.lsm-st-file{ padding:11px 13px; }
.lsm-st-folder{ padding:12px 13px; }

/* v3.10.339 — AI-Highlights / Social-Clips (Video-Drawer, eigener Tab) */
.lsm-vd-hl-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--c-bd,#e4e7eb);border-radius:var(--r,8px);padding:12px 14px;background:var(--c-bg2,#f4f5f7);margin-top:4px}
.lsm-vd-hl-set{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-tx2,#555c66)}
.lsm-vd-hl-set label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-tx3,#8b929c);font-family:var(--mono,monospace)}
.lsm-vd-hl-seg{display:inline-flex;border:1px solid var(--c-bd,#e4e7eb);border-radius:7px;overflow:hidden;background:var(--c-surf,#fff)}
.lsm-vd-hl-seg button{border:0;background:transparent;font-family:var(--mono,monospace);font-size:11px;font-weight:600;padding:5px 10px;cursor:pointer;color:var(--c-tx2,#555c66);border-right:1px solid var(--c-bd,#e4e7eb)}
.lsm-vd-hl-seg button:last-child{border-right:0}
.lsm-vd-hl-seg button.act{background:var(--c-tx,#0a0c10);color:#fff}
.lsm-vd-hl-toggle{width:30px;height:18px;border-radius:999px;background:var(--c-bd,#cdd3da);position:relative;flex:0 0 auto;cursor:pointer;display:inline-block}
.lsm-vd-hl-toggle.on{background:var(--c-tx,#0a0c10)}
.lsm-vd-hl-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}
.lsm-vd-hl-toggle.on i{left:14px}
.lsm-vd-hl-hint{font-size:11.5px;color:var(--c-tx3,#8b929c);margin:8px 2px 0;line-height:1.5}
.lsm-vd-hl-lbl{font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-tx3,#8b929c);margin-bottom:9px}
.lsm-vd-hl-card{display:flex;gap:12px;border:1px solid var(--c-bd,#e4e7eb);border-radius:var(--r,8px);padding:12px 13px;background:var(--c-surf,#fff);margin-bottom:9px}
.lsm-vd-hl-rank{flex:0 0 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--c-bd,#e4e7eb);padding-right:11px}
.lsm-vd-hl-rank .n{font-family:var(--mono,monospace);font-weight:800;font-size:17px;color:var(--c-tx,#0a0c10)}
.lsm-vd-hl-rank .sc{font-family:var(--mono,monospace);font-size:8.5px;color:var(--c-tx3,#8b929c);letter-spacing:.06em;text-transform:uppercase}
.lsm-vd-hl-main{flex:1;min-width:0}
.lsm-vd-hl-hook{font-weight:700;font-size:14px;color:var(--c-tx,#0a0c10);line-height:1.3}
.lsm-vd-hl-quote{color:var(--c-tx2,#555c66);font-size:12px;font-style:italic;border-left:2px solid var(--c-bd,#e4e7eb);padding-left:9px;margin:4px 0 8px}
.lsm-vd-hl-meta{display:flex;gap:12px;font-family:var(--mono,monospace);font-size:10.5px;color:var(--c-tx3,#8b929c);flex-wrap:wrap;align-items:center}
.lsm-vd-hl-acts{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.lsm-vd-hl-chip{font-family:var(--mono,monospace);font-size:9.5px;font-weight:700;border:1px solid var(--c-bd,#e4e7eb);border-radius:5px;padding:2px 6px;color:var(--c-tx2,#555c66)}
.lsm-vd-hl-chip.fmt{border-color:var(--c-tx,#0a0c10);color:var(--c-tx,#0a0c10)}
/* v3.10.341 — Erzeugte Social-Clips (flat admin) */
.lsm-vd-hl-clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px;margin-top:10px}
.lsm-vd-hl-clip{display:flex;gap:11px;border:1px solid var(--c-bd,#e4e7eb);border-radius:10px;padding:10px;background:var(--c-surf,#fff)}
.lsm-vd-hl-clip.is-ready{border-color:var(--c-tx,#0a0c10)}
.lsm-vd-hl-clip-th{position:relative;width:64px;height:96px;flex:0 0 64px;border-radius:7px;overflow:hidden;background:var(--c-bg2,#f1f3f5);display:flex;align-items:center;justify-content:center}
.lsm-vd-hl-clip-th img{width:100%;height:100%;object-fit:cover;display:block}
.lsm-vd-hl-clip-fmt{position:absolute;top:4px;left:4px;z-index:2;font-family:var(--mono,monospace);font-size:9px;font-weight:700;background:var(--c-tx,#0a0c10);color:#fff;border-radius:4px;padding:1px 5px}
.lsm-vd-hl-clip-body{flex:1;min-width:0;display:flex;flex-direction:column}
.lsm-vd-hl-clip-t{font-weight:700;font-size:12.5px;color:var(--c-tx,#0a0c10);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lsm-vd-hl-clip-meta{font-family:var(--mono,monospace);font-size:10px;color:var(--c-tx3,#8a929c);margin-top:3px}
.lsm-vd-hl-clip-acts{display:flex;gap:6px;align-items:center;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.lsm-vd-hl-clip-err{font-size:10.5px;color:#c2410c;line-height:1.3}
.lsm-vd-hl-clip-prog{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--c-tx2,#555c66);font-weight:600}
.lsm-vd-hl-toggle.is-disabled{opacity:.4;pointer-events:none}
.lsm-vd-hl-usage{font-family:var(--mono,monospace);font-size:11px;color:var(--c-tx2,#555c66);margin-top:8px}
.lsm-vd-hl-usage.over{color:#c2410c;font-weight:700}

/* v3.10.353 — Best-of-Video Leiste + Clip-Badge */
.lsm-vd-hl-bestof{margin-top:16px;border:1px solid var(--c-bd);border-radius:10px;padding:12px 14px;background:var(--c-bg2)}
.lsm-vd-hl-bestof-h{font-size:12.5px;color:var(--c-tx2);margin-bottom:10px}
.lsm-vd-hl-bestof-h strong{color:var(--c-tx)}
.lsm-vd-hl-bestof-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lsm-vd-hl-bestof-note{margin-top:9px;font-size:11px;color:var(--c-tx3);line-height:1.5}
.lsm-vd-hl-clip.is-bestof{border-color:var(--mono)}
.lsm-vd-hl-clip-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:4px;background:var(--mono);color:var(--c-bg2);vertical-align:middle;margin-right:2px}

/* v3.10.355 — Intro-Einstellungen Panel (Flat-Admin) */
.lsm-vd-hl-introlink{background:transparent;border:1px solid var(--c-bd);color:var(--c-tx2);font:inherit;font-size:12px;padding:6px 11px;border-radius:8px;cursor:pointer;margin-left:8px}
.lsm-vd-hl-introlink.is-open{background:var(--mono);color:var(--c-bg2);border-color:var(--mono);font-weight:600}
.lsm-vd-intro-panel{display:none;margin-top:14px;border:1px solid var(--c-bd);border-radius:12px;background:var(--c-bg2);overflow:hidden}
.lsm-vd-intro-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--c-bd)}
.lsm-vd-intro-head strong{font-size:13.5px;color:var(--c-tx)}
.lsm-vd-intro-reset{background:transparent;border:1px solid var(--c-bd);color:var(--c-tx3);font:inherit;font-size:11.5px;padding:5px 10px;border-radius:7px;cursor:pointer}
.lsm-vd-intro-body{display:grid;grid-template-columns:1fr 320px;gap:0}
.lsm-vd-intro-cols{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;align-content:start}
.lsm-vd-intro-grp{min-width:0}
.lsm-vd-intro-full{grid-column:span 2}
.lsm-vd-intro-glbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-tx3);margin-bottom:9px}
.lsm-vd-intro-row{margin-bottom:12px}
.lsm-vd-intro-row:last-child{margin-bottom:0}
.lsm-vd-intro-rl{font-size:12px;color:var(--c-tx2);margin-bottom:6px}
.lsm-vd-intro-val{float:right;color:var(--c-tx);font-weight:600}
.lsm-vd-intro-hint{font-size:11px;color:var(--c-tx3);margin-top:6px;line-height:1.45}
.lsm-vd-intro-inp{width:100%;background:var(--c-bg);border:1px solid var(--c-bd);border-radius:8px;color:var(--c-tx);padding:8px 10px;font:inherit;font-size:12.5px;margin-top:8px}
.lsm-vd-intro-sw{display:flex;align-items:center;gap:8px;margin-top:9px}
.lsm-vd-intro-sw input[type=color]{width:34px;height:30px;padding:0;border:1px solid var(--c-bd);border-radius:7px;background:none;cursor:pointer}
.lsm-vd-intro-sw span{font-size:11px;color:var(--c-tx3)}
.lsm-vd-intro-range{width:100%;margin-top:8px;accent-color:var(--c-tx)}
.lsm-vd-intro-rsc{display:flex;justify-content:space-between;font-size:10.5px;color:var(--c-tx3);margin-top:2px}
.lsm-vd-intro-grid{display:grid;grid-template-columns:repeat(3,30px);gap:5px;margin-top:8px}
.lsm-vd-intro-grid button{width:30px;height:30px;border:1px solid var(--c-bd);background:var(--c-bg);border-radius:6px;cursor:pointer;position:relative;padding:0}
.lsm-vd-intro-grid button.act{border-color:var(--c-tx)}
.lsm-vd-intro-grid button.act::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--c-tx);top:50%;left:50%;transform:translate(-50%,-50%)}
.lsm-vd-intro-grid button[disabled]{opacity:.4;cursor:not-allowed}
.lsm-vd-intro-logorow{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap}
.lsm-vd-intro-logoright{flex:1;min-width:220px;max-width:300px}
.lsm-vd-intro-prev{border-left:1px solid var(--c-bd);padding:16px;background:var(--c-bg)}
.lsm-vd-intro-prevlbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-tx3);margin-bottom:10px}
.lsm-vd-introprev-c{position:relative;width:100%;aspect-ratio:9/16;border-radius:10px;overflow:hidden}
.lsm-vd-introprev-k{position:absolute;left:0;right:0;top:34%;text-align:center;opacity:.85;font-size:11px;letter-spacing:.3em;font-weight:700}
.lsm-vd-introprev-t{position:absolute;left:8%;right:8%;top:41%;text-align:center;color:#fff;font-size:22px;font-weight:800;line-height:1.12}
.lsm-vd-introprev-b{position:absolute;left:50%;top:59%;transform:translateX(-50%);width:13%;height:5px;border-radius:2px}
.lsm-vd-introprev-logo{position:absolute;aspect-ratio:5/2;border-radius:5px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.lsm-vd-intro-btns{display:flex;gap:8px;margin-top:13px}
.lsm-vd-intro-btns .lsm-vmc-btn{flex:1}
.lsm-vd-intro-note{font-size:10.5px;color:var(--c-tx3);margin-top:11px;line-height:1.5}
.lsm-vd-intro-vidsel{font-size:12px;color:var(--c-tx);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lsm-vd-intro-vidclear{font-size:11px;color:var(--c-tx2);background:var(--c-bg2);border:1px solid var(--c-bd);border-radius:5px;padding:2px 8px;cursor:pointer}
.lsm-vd-intro-vidclear:hover{background:var(--c-bd)}
.lsm-vd-intro-vidlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:4px 0 2px;max-height:280px;overflow-y:auto}
.lsm-vd-intro-vid{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--c-bg);border:1px solid var(--c-bd);border-radius:8px;cursor:pointer;overflow:hidden}
.lsm-vd-intro-vid:hover{border-color:var(--c-tx2)}
.lsm-vd-intro-vid.is-sel{border-color:var(--c-tx);box-shadow:0 0 0 1px var(--c-tx)}
.lsm-vd-intro-vidthumb{display:block;width:100%;aspect-ratio:16/9;background:var(--c-bg2) center/cover no-repeat}
.lsm-vd-intro-vidmeta{padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.lsm-vd-intro-vidt{font-size:11.5px;color:var(--c-tx);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsm-vd-intro-vidd{font-size:10.5px;color:var(--c-tx3)}
.lsm-vd-intro-vidup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lsm-vd-intro-upstat{font-size:11.5px;color:var(--c-tx2)}
@media (max-width:760px){.lsm-vd-intro-body{grid-template-columns:1fr}.lsm-vd-intro-prev{border-left:0;border-top:1px solid var(--c-bd)}.lsm-vd-intro-cols{grid-template-columns:1fr}.lsm-vd-intro-full{grid-column:span 1}}

/* v3.10.361 — Best-of: Highlight-Auswahl-Checkbox */
.lsm-vd-hl-pick{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--c-tx2);cursor:pointer;padding:5px 9px;border:1px solid var(--c-bd);border-radius:8px;user-select:none}
.lsm-vd-hl-pick.on{border-color:var(--c-tx);color:var(--c-tx);font-weight:600}
.lsm-vd-hl-pick input{margin:0;accent-color:var(--c-tx);cursor:pointer}

/* v3.10.363 — Storage: Reiter Meine Dateien | Aus Inhalten */
.lsm-st-tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--c-bd)}
.lsm-st-tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--c-tx3);font:inherit;font-size:13px;font-weight:600;padding:9px 15px;cursor:pointer;margin-bottom:-1px}
.lsm-st-tab:hover{color:var(--c-tx)}
.lsm-st-tab.active{color:var(--c-tx);border-bottom-color:var(--c-tx)}
.lsm-st-mirinfo{display:flex;gap:9px;align-items:flex-start;background:var(--c-surf2);border:1px solid var(--c-bd);border-radius:10px;padding:11px 14px;margin-bottom:16px;color:var(--c-tx2);font-size:12.5px;line-height:1.5}
.lsm-st-auto{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--c-tx);color:var(--c-bg);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.lsm-st-folder.is-system{border-style:dashed}

/* ============================================================
   v3.10.556 — Restream (RTMP-Republish) — flaches Backend-Design
   ============================================================ */
.lsm-fe-restream {
    background: var(--c-surf, #fff);
    border: 0.5px solid var(--c-bdr, rgba(0,0,0,.08));
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0 14px;
}
.lsm-fe-rs-header { display: flex; gap: 12px; align-items: center; }
.lsm-fe-rs-title { display: flex; gap: 6px; align-items: center; font-weight: 700; font-size: 13px; color: var(--c-tx, #0a1020); }
.lsm-fe-rs-title svg { color: var(--c-tx3, #5a6b80); }
.lsm-fe-rs-status { margin-left: auto; font-size: 12px; color: var(--c-tx3, #5a6b80); font-weight: 600; }
.lsm-fe-rs-status.is-live { color: var(--c-ok, #16a34a); }
.lsm-fe-rs-status.is-off { color: var(--c-tx4, #8fa0b0); }
.lsm-fe-rs-body { margin-top: 12px; }
.lsm-fe-rs-loading, .lsm-fe-rs-empty { font-size: 12.5px; color: var(--c-tx3, #5a6b80); padding: 8px 0; }
.lsm-fe-rs-empty { padding: 12px; background: var(--c-surf2, #f0f3f8); border-radius: 8px; }

.lsm-fe-rs-quota { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.lsm-fe-rs-quota-bar { flex: 1; height: 6px; background: var(--c-surf3, #e8ecf2); border-radius: 3px; overflow: hidden; }
.lsm-fe-rs-quota-bar > span { display: block; height: 100%; background: var(--c-blue, #1d4ed8); border-radius: 3px; transition: width .3s ease; }
.lsm-fe-rs-quota-txt { font-size: 11.5px; color: var(--c-tx3, #5a6b80); font-weight: 600; white-space: nowrap; }

.lsm-fe-rs-rows { display: flex; flex-direction: column; gap: 8px; }
.lsm-fe-rs-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 0.5px solid var(--c-bdr, rgba(0,0,0,.08)); border-radius: 8px; background: var(--c-surf, #fff); }
.lsm-fe-rs-row.is-on { border-color: var(--c-ok, #16a34a); }
.lsm-fe-rs-badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; background: var(--c-surf3, #e8ecf2); color: var(--c-tx2, #2d3a4a); white-space: nowrap; }
.lsm-fe-rs-badge-youtube  { background: rgba(220,38,38,.12); color: #b91c1c; }
.lsm-fe-rs-badge-twitch   { background: rgba(124,58,237,.14); color: #6d28d9; }
.lsm-fe-rs-badge-facebook { background: rgba(29,78,216,.12); color: #1d4ed8; }
.lsm-fe-rs-row-main { flex: 1; min-width: 0; }
.lsm-fe-rs-row-name { font-size: 13px; font-weight: 600; color: var(--c-tx, #0a1020); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsm-fe-rs-row-dest { font-size: 11px; color: var(--c-tx3, #5a6b80); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsm-fe-rs-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.lsm-fe-rs-state i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.lsm-fe-rs-state.is-live { color: var(--c-ok, #16a34a); }
.lsm-fe-rs-state.is-live i { background: var(--c-ok, #16a34a); }
.lsm-fe-rs-state.is-off { color: var(--c-tx4, #8fa0b0); }
.lsm-fe-rs-state.is-off i { background: var(--c-tx4, #8fa0b0); }

.lsm-fe-rs-switch { width: 38px; height: 22px; border-radius: 11px; background: var(--c-bdr2, #a8b4c4); border: none; position: relative; cursor: pointer; padding: 0; flex-shrink: 0; transition: background .2s ease; }
.lsm-fe-rs-switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.lsm-fe-rs-switch.on { background: var(--c-ok, #16a34a); }
.lsm-fe-rs-switch.on i { transform: translateX(16px); }

.lsm-fe-rs-add-wrap { margin-top: 12px; }

/* Modal */
/* Modal — Overlay nutzt Basis .lsm-fe-modal-overlay (fixed/inset/z-index/open); hier nur Backdrop */
.lsm-fe-rs-modal-ov { background: rgba(10,16,32,.5); }
.lsm-fe-rs-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow-y: auto; background: var(--c-surf, #fff); border-radius: 12px; border: 0.5px solid var(--c-bdr, rgba(0,0,0,.08)); box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.lsm-fe-rs-modal-head { display: flex; align-items: center; padding: 16px 18px; border-bottom: 0.5px solid var(--c-bdr, rgba(0,0,0,.08)); }
.lsm-fe-rs-modal-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-tx, #0a1020); }
.lsm-fe-rs-modal-x { margin-left: auto; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--c-tx3, #5a6b80); padding: 0 4px; }
.lsm-fe-rs-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.lsm-fe-rs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lsm-fe-rs-chip { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--c-bdr2, #a8b4c4); background: var(--c-surf, #fff); color: var(--c-tx2, #2d3a4a); cursor: pointer; }
.lsm-fe-rs-chip.active { background: var(--c-blue, #1d4ed8); border-color: var(--c-blue, #1d4ed8); color: #fff; }
.lsm-fe-rs-field { display: flex; flex-direction: column; gap: 4px; }
.lsm-fe-rs-field > span { font-size: 11.5px; font-weight: 600; color: var(--c-tx3, #5a6b80); }
.lsm-fe-rs-field input { padding: 9px 11px; border: 1px solid var(--c-bdr2, #a8b4c4); border-radius: 8px; font-size: 13px; background: var(--c-surf, #fff); color: var(--c-tx, #0a1020); box-sizing: border-box; width: 100%; }
.lsm-fe-rs-row2 { display: flex; gap: 10px; }
.lsm-fe-rs-row2 .lsm-fe-rs-field { flex: 1; }
.lsm-fe-rs-field-sm { max-width: 110px; }
.lsm-fe-rs-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-tx2, #2d3a4a); cursor: pointer; }
.lsm-fe-rs-hint { font-size: 11px; color: var(--c-tx3, #5a6b80); min-height: 14px; }
.lsm-fe-rs-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 0.5px solid var(--c-bdr, rgba(0,0,0,.08)); }
.lsm-fe-rs-state.is-connecting { color: var(--c-warn, #d97706); }
.lsm-fe-rs-state.is-connecting i { background: var(--c-warn, #d97706); animation: lsmRsPulse 1.1s ease-in-out infinite; }
@keyframes lsmRsPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* v3.10.558 — Restream Quota-Gate / Upsell */
.lsm-fe-rs-upsell { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--c-surf2, #f0f3f8); border: 0.5px solid var(--c-bdr, rgba(0,0,0,.08)); border-radius: 10px; }
.lsm-fe-rs-upsell-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--c-surf, #fff); color: var(--c-blue, #1d4ed8); border: 0.5px solid var(--c-bdr, rgba(0,0,0,.08)); }
.lsm-fe-rs-upsell-hd { font-size: 13px; font-weight: 700; color: var(--c-tx, #0a1020); margin-bottom: 3px; }
.lsm-fe-rs-upsell-sub { font-size: 12px; line-height: 1.5; color: var(--c-tx2, #2d3a4a); }
.lsm-fe-rs-upsell-sub strong { color: var(--c-tx, #0a1020); }
.lsm-fe-rs-limit-note { font-size: 11.5px; line-height: 1.45; color: var(--c-warn, #d97706); background: rgba(217,119,6,.09); border-radius: 7px; padding: 8px 10px; margin: -4px 0 10px; }
.lsm-fe-rs-limit-note strong { color: var(--c-warn, #b45309); }
.lsm-fe-rs-quota-bar.is-full > span { background: var(--c-warn, #d97706); }
.lsm-fe-rs-switch.is-locked { opacity: .45; cursor: not-allowed; }

/* ── v3.10.564 — Aufnahme (DVR) Drawer-Baustein ─────────────────────────
   Wiederverwendet die Restream-Bausteinklassen (.lsm-fe-restream/.lsm-fe-rs-*).
   Aufnahme = ROT (statt Akzentfarbe), inkl. pulsierendem Record-Dot. */
.lsm-fe-dvrrec-dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--c-t3,#9aa0a6);flex:0 0 auto;display:inline-block;
}
.lsm-fe-dvrrec.is-rec .lsm-fe-dvrrec-dot{
    background:#d3382c;
    animation:lsmDvrRecPulse 1.6s ease-in-out infinite;
}
@keyframes lsmDvrRecPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(211,56,44,.45)}
    50%{box-shadow:0 0 0 5px rgba(211,56,44,0)}
}
.lsm-fe-dvrrec .lsm-fe-rs-switch.on{background:#d3382c;border-color:#d3382c}
.lsm-fe-dvrrec .lsm-fe-rs-status.is-rec{color:#d3382c;font-weight:600}
/* v3.10.567 — 3-Zustands-Segmentsteuerung (Aufnahme / Read-only / Pause).
   Flach, Backend-Tokens; aktives "Aufnahme"-Segment = ROT. */
.lsm-fe-dvrrec-seg{
    display:flex;gap:4px;margin-top:10px;padding:3px;
    background:var(--c-surf2,#f0f3f8);border:1px solid var(--c-bdr,#c8d0dc);border-radius:9px;
}
.lsm-fe-dvrrec-segbtn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:7px 10px;border:0;border-radius:6px;background:transparent;
    color:var(--c-tx2,#2d3a4a);font:600 12.5px/1 inherit;cursor:pointer;
    transition:background .12s,color .12s,box-shadow .12s;
}
.lsm-fe-dvrrec-segbtn:hover:not(:disabled):not(.is-active){background:var(--c-surf3,#e8ecf2)}
.lsm-fe-dvrrec-segbtn.is-active{
    background:var(--c-surf,#fff);color:var(--c-tx,#0a1020);
    box-shadow:0 1px 2px rgba(0,0,0,.10);
}
.lsm-fe-dvrrec-segbtn.is-rec{background:#d3382c;color:#fff}
.lsm-fe-dvrrec-segbtn:disabled{opacity:.45;cursor:not-allowed}
.lsm-fe-dvrrec-segdot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.45;flex:0 0 auto}
.lsm-fe-dvrrec-segbtn.is-rec .lsm-fe-dvrrec-segdot{opacity:1}
.lsm-fe-dvrrec-note{
    font-size:12px;color:var(--c-t3,#6b7075);margin-top:6px;min-height:14px;
}

/* v3.10.582 — kurzzeitige Hervorhebung der per Deeplink (#lsm-vmc-dvr-<id>)
   angesprungenen Video-Karte aus der „Aufnahme ist online"-Mail. */
@keyframes lsmMvDeeplink {
    0%   { box-shadow: 0 0 0 0 rgba(29,78,216,.55); }
    100% { box-shadow: 0 0 0 6px rgba(29,78,216,0); }
}
.lsm-mv-deeplink {
    animation: lsmMvDeeplink 1.3s ease-out 2;
    border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.10.624 — Streamliste auf dem Telefon: Zeile statt Karte
   ═══════════════════════════════════════════════════════════════════════

   Ausgangslage: Eine Karte füllte auf dem Telefon fast den ganzen
   Bildschirm — 16:9-Vorschaubild über die volle Breite, darunter zwei
   Schalter, zwei Knöpfe und eine Fußzeile. Bei neun Streams sind das neun
   Bildschirmhöhen Scrollen, bevor man den letzten sieht.

   Reine CSS-Umformung derselben Karte, kein neues Markup: Die Karte wird zu
   einem umbrechenden Flex-Container. Vorschaubild und Textblock teilen sich
   die erste Zeile, die Statusleiste bekommt mit `width:100%` die zweite.
   Damit bleiben alle Verhaltensweisen, Datenattribute und Filter unberührt —
   und am Desktop ändert sich nichts.

   Bewusst NICHT angetastet: die Aktionsknöpfe selbst. Sie ins „⋯"-Blatt zu
   verlegen ist der nächste Schritt und braucht Markup und Zustand; hier
   werden sie nur auf berührbare Größe gebracht und der Löschknopf abgesetzt.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 782px) {

    .lsm-fe-event-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .lsm-fe-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
        padding: 9px;
        border-radius: 11px;
    }
    /* Anheben beim Zeigen ergibt ohne Zeiger keinen Sinn und lässt die
       Liste beim Antippen springen. */
    .lsm-fe-card:hover { transform: none; box-shadow: none; }

    .lsm-fe-card-thumb {
        width: 92px;
        aspect-ratio: 16/9;
        border-radius: 8px;
        flex: 0 0 92px;
    }
    /* Der Verlauf über dem Bild trägt bei 92 px nichts mehr bei und macht
       die Vorschau nur dunkler. */
    .lsm-fe-card-thumb::after { opacity: .35; }
    .lsm-fe-card-thumb-icon { width: 22px; height: 22px; }

    .lsm-fe-card-body {
        padding: 0;
        gap: 6px;
        flex: 1 1 0;
        min-width: 0;
    }

    .lsm-fe-card-title {
        font-size: 13.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Datumsblock war ein eigener Kasten mit Hintergrund — auf der Zeile
       genügt eine Zeile Text. */
    .lsm-fe-card-dates {
        flex-direction: row;
        gap: 8px;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 11px;
    }

    /* Statusleiste in die zweite Zeile, über die volle Breite. */
    .lsm-fe-card-status-bar {
        flex: 1 0 100%;
        margin: 2px -9px -9px;
        padding: 7px 9px;
        border-radius: 0 0 11px 11px;
    }

    /* Berührbare Ziele: 26 px sind für den Finger zu klein.
       Der Löschknopf bekommt zusätzlich Abstand — er sitzt sonst
       zwei Fingerbreit neben „Bearbeiten", beide ohne Beschriftung. */
    .lsm-fe-card-icon-btns { gap: 6px; }
    .lsm-fe-card-icon-btns .lsm-fe-icon-btn {
        width: 34px;
        height: 34px;
    }
    /* v3.10.625 — Auf dem Telefon ein Sammelknopf statt vier Symbole.
       Die Einzelknöpfe bleiben im Markup: Das Aktionsblatt liest sie aus
       und löst ihre Klicks aus. Deshalb `display:none` und nicht entfernen. */
    .lsm-fe-card-icon-btns .lsm-fe-icon-btn { display: none; }
    .lsm-fe-card-icon-btns .lsm-fe-card-more {
        display: flex;
        width: 34px;
        height: 34px;
    }

    /* ── Werkzeugleiste: eine Zeile statt drei ──────────────────────────
     *
     * Heute stehen Suche, sechs Filter-Chips, „Pro Seite" und die Sortierung
     * untereinander — drei volle Zeilen, bevor der erste Stream sichtbar
     * wird. Auf einem Telefon ist das eine halbe Bildschirmhöhe Vorspann.
     *
     * Die Chips laufen jetzt in einer waagrecht scrollbaren Zeile (bei sechs
     * bekannten Einträgen vertretbar — anders als bei fünfzehn
     * Navigationszielen, die man nicht erraten kann), Suche darüber,
     * Seitengröße und Ansichtsumschalter entfallen. Die Seitengröße ist auf
     * dem Telefon ohnehin sinnlos: Gescrollt wird sowieso, und die
     * Blätterleiste unten bleibt erhalten. */
    .lsm-fe-stream-toolbar {
        gap: 7px;
        margin-bottom: 10px;
    }
    .lsm-fe-tb-search { flex: 1 1 100%; }

    .lsm-fe-tb-chips {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .lsm-fe-tb-chips::-webkit-scrollbar { display: none; }
    .lsm-fe-tb-chip { white-space: nowrap; flex: none; }

    /* Seitengröße und Ansichtsumschalter: auf dem Telefon ohne Nutzen.
       Die Sortierung bleibt — sie ändert, WAS oben steht. */
    .lsm-fe-tb-ps-label,
    .lsm-fe-tb-ps-sel,
    .lsm-fe-tb-view-btn { display: none; }
    .lsm-fe-tb-right { flex: 1 1 100%; gap: 7px; }
    .lsm-fe-tb-select { flex: 1 1 auto; }

    /* Der große blaue Knopf und der Eintrag „Neuer Stream" in der
       Navigation sagen dasselbe. Auf dem Telefon genügt einer — der
       Knopf, weil er im Blickfeld liegt. */
    .lsm-fe-streams-header { margin-bottom: 9px; }
    .lsm-fe-primary-cta { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.10.625 — Aktionsblatt (Karten auf dem Telefon)
   ═══════════════════════════════════════════════════════════════════════ */
.lsm-fe-card-more { display: none; }   /* am Desktop unsichtbar */

.lsm-fe-sheet-ov {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(10, 16, 28, .42);
    display: flex; align-items: flex-end; justify-content: center;
    animation: lsmSheetFade .16s ease;
}
.lsm-fe-sheet {
    width: 100%; max-width: 520px;
    background: var(--c-surf); color: var(--c-tx);
    border-radius: 16px 16px 0 0;
    padding: 9px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 30px rgba(0,0,0,.22);
    animation: lsmSheetUp .2s cubic-bezier(.2,.7,.3,1);
    max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
}
.lsm-fe-sheet-grip {
    width: 34px; height: 4px; border-radius: 2px;
    background: var(--c-bdr2, #c8d0dc); margin: 2px auto 10px;
}
.lsm-fe-sheet-hd {
    font-size: 12px; color: var(--c-tx3); padding: 0 8px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lsm-fe-sheet-act {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: 15px; color: var(--c-tx);
    padding: 13px 8px; text-align: left; border-radius: 10px;
}
.lsm-fe-sheet-act + .lsm-fe-sheet-act { border-top: 0.5px solid var(--c-bdr); }
.lsm-fe-sheet-act:active { background: var(--c-surf2); }
.lsm-fe-sheet-ic { width: 18px; height: 18px; flex: none; color: var(--c-tx2); display: flex; }
.lsm-fe-sheet-ic svg { width: 100%; height: 100%; }

/* Löschen zuletzt, rot, mit Abstand — nicht mehr neben „Bearbeiten". */
.lsm-fe-sheet-act.is-danger { color: var(--c-red, #d92d20); margin-top: 6px; border-top: 0.5px solid var(--c-bdr); }
.lsm-fe-sheet-act.is-danger .lsm-fe-sheet-ic { color: inherit; }

.lsm-fe-sheet-cancel {
    display: block; width: 100%; margin-top: 8px;
    background: var(--c-surf2); border: none; border-radius: 11px;
    font: inherit; font-size: 15px; font-weight: 500; color: var(--c-tx2);
    padding: 13px; cursor: pointer;
}
@keyframes lsmSheetUp   { from { transform: translateY(100%); } }
@keyframes lsmSheetFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .lsm-fe-sheet, .lsm-fe-sheet-ov { animation: none; }
}