/* Aistream professional UI layer. Loaded last so legacy pages inherit one
   semantic light/dark system without recoloring media previews. */
html[data-theme="light"] {
    color-scheme: light;
    --pro-page: #f5f7fb;
    --pro-page-accent: #fff7ed;
    --pro-surface: #ffffff;
    --pro-surface-raised: #ffffff;
    --pro-surface-soft: #f7f9fc;
    --pro-surface-strong: #eef2f7;
    --pro-text: #172033;
    --pro-text-secondary: #405168;
    --pro-text-muted: #5f6f82;
    --pro-border: #dfe5ed;
    --pro-border-strong: #cbd4df;
    --pro-brand: #f97316;
    --pro-brand-strong: #c2410c;
    --pro-brand-soft: #fff3e8;
    --pro-success: #166534;
    --pro-success-soft: #eaf8ef;
    --pro-warning: #92400e;
    --pro-warning-soft: #fff7dc;
    --pro-danger: #b42318;
    --pro-danger-soft: #fff0ef;
    --pro-info: #1d4ed8;
    --pro-info-soft: #edf4ff;
    --pro-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --pro-shadow-sm: 0 8px 22px rgba(15, 23, 42, .06);
    --pro-shadow-md: 0 18px 42px rgba(15, 23, 42, .09);
    --pro-overlay: rgba(15, 23, 42, .5);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --pro-page: #0b121a;
    --pro-page-accent: #1f1712;
    --pro-surface: #111b26;
    --pro-surface-raised: #162230;
    --pro-surface-soft: #182533;
    --pro-surface-strong: #223243;
    --pro-text: #f1f5f9;
    --pro-text-secondary: #cbd5e1;
    --pro-text-muted: #9fb0c2;
    --pro-border: #2a3a4b;
    --pro-border-strong: #3a4d60;
    --pro-brand: #fb923c;
    --pro-brand-strong: #fdba74;
    --pro-brand-soft: #2b1a10;
    --pro-success: #86efac;
    --pro-success-soft: #12301f;
    --pro-warning: #fcd34d;
    --pro-warning-soft: #33270e;
    --pro-danger: #fda4af;
    --pro-danger-soft: #35171b;
    --pro-info: #93c5fd;
    --pro-info-soft: #14263d;
    --pro-shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
    --pro-shadow-sm: 0 10px 26px rgba(0, 0, 0, .24);
    --pro-shadow-md: 0 22px 54px rgba(0, 0, 0, .34);
    --pro-overlay: rgba(0, 0, 0, .68);
}

html[data-theme] {
    --bg: var(--pro-page);
    --sidebar: var(--pro-surface);
    --surface: var(--pro-surface);
    --surface-2: var(--pro-surface-soft);
    --surface-3: var(--pro-surface-strong);
    --line: var(--pro-border);
    --line-strong: var(--pro-border-strong);
    --text: var(--pro-text);
    --muted: var(--pro-text-muted);
    --muted-2: var(--pro-text-secondary);
    --accent: var(--pro-brand);
    --cyan: var(--pro-brand-strong);
    --green: var(--pro-success);
    --amber: var(--pro-warning);
    --danger: var(--pro-danger);
    --ui-page: var(--pro-page);
    --ui-surface: var(--pro-surface);
    --ui-surface-soft: var(--pro-surface-soft);
    --ui-orange: var(--pro-brand-strong);
    --ui-orange-hover: var(--pro-brand);
    --ui-orange-soft: var(--pro-brand-soft);
    --ui-text: var(--pro-text);
    --ui-text-secondary: var(--pro-text-secondary);
    --ui-text-muted: var(--pro-text-muted);
    --ui-border: var(--pro-border);
    --ui-border-strong: var(--pro-border-strong);
    background: var(--pro-page);
}

html[data-theme] body,
html[data-theme] .admin-body {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 92% -12%, color-mix(in srgb, var(--pro-brand) 8%, transparent), transparent 30rem),
        var(--pro-page);
    color: var(--pro-text);
    font-family: Inter, Aptos, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html[data-theme] body::before { display: none; }
html[data-theme] ::selection { background: color-mix(in srgb, var(--pro-brand) 25%, transparent); color: var(--pro-text); }
html[data-theme] strong,
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 { color: var(--pro-text); }
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] .brand strong,
html[data-theme] .admin-brand strong { font-family: Inter, Aptos, "Segoe UI", sans-serif; }
html[data-theme] h1 { letter-spacing: -.035em; font-weight: 780; }
html[data-theme] h2 { letter-spacing: -.022em; font-weight: 750; }
html[data-theme] h3 { letter-spacing: -.012em; font-weight: 720; }
html[data-theme] p { text-wrap: pretty; }
html[data-theme] .money,
html[data-theme] [data-live-elapsed],
html[data-theme] .metric-grid strong,
html[data-theme] .admin-kpi strong,
html[data-theme] .wallet-overview strong { font-variant-numeric: tabular-nums; }

/* Navigation and application chrome */
html[data-theme] .shell,
html[data-theme] .admin-shell { background: transparent; }
html[data-theme] .sidebar,
html[data-theme] .admin-sidebar {
    border-color: var(--pro-border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pro-surface) 98%, var(--pro-brand) 2%), var(--pro-surface));
    box-shadow: 10px 0 34px rgba(15, 23, 42, .035);
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .admin-sidebar { box-shadow: 12px 0 38px rgba(0, 0, 0, .2); }
html[data-theme] .brand,
html[data-theme] .admin-brand { color: var(--pro-text); }
html[data-theme] .brand-mark,
html[data-theme] .admin-brand > span {
    border: 1px solid color-mix(in srgb, var(--pro-brand) 82%, white 18%);
    background: linear-gradient(145deg, #fb923c, #ea580c);
    color: #fff;
    box-shadow: 0 10px 24px rgba(234, 88, 12, .22);
}
html[data-theme] .brand small,
html[data-theme] .admin-brand small,
html[data-theme] .nav-label,
html[data-theme] .admin-sidebar nav p { color: var(--pro-text-muted); }
html[data-theme] .nav-item,
html[data-theme] .admin-sidebar nav a {
    min-height: 42px;
    border: 1px solid transparent;
    color: var(--pro-text-secondary);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
html[data-theme] .nav-item:hover,
html[data-theme] .admin-sidebar nav a:hover {
    border-color: var(--pro-border);
    background: var(--pro-surface-soft);
    color: var(--pro-text);
}
html[data-theme] .nav-item.active,
html[data-theme] .admin-sidebar nav a.active {
    border-color: color-mix(in srgb, var(--pro-brand) 45%, var(--pro-border));
    background: var(--pro-brand-soft);
    color: var(--pro-brand-strong);
    box-shadow: inset 3px 0 0 var(--pro-brand);
}
html[data-theme] .nav-icon { display: grid; width: 22px; height: 22px; place-items: center; }
html[data-theme] .nav-icon svg,
html[data-theme] .theme-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[data-theme] .sidebar-foot,
html[data-theme] .admin-sidebar-status {
    border-color: var(--pro-border);
    background: var(--pro-surface-soft);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme] .topbar,
html[data-theme] .admin-topbar {
    border-bottom-color: var(--pro-border);
    background: color-mix(in srgb, var(--pro-surface) 88%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--pro-border) 65%, transparent), 0 10px 28px rgba(15, 23, 42, .035);
    backdrop-filter: blur(16px) saturate(135%);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .admin-topbar { box-shadow: 0 1px 0 rgba(255, 255, 255, .025), 0 14px 32px rgba(0, 0, 0, .2); }
html[data-theme] .crumb,
html[data-theme] .topbar-title span,
html[data-theme] .admin-topbar > div:first-child span { color: var(--pro-text-muted); }

/* Theme control */
.theme-toggle {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--pro-border);
    border-radius: 11px;
    background: var(--pro-surface-soft);
    color: var(--pro-text-secondary);
    box-shadow: var(--pro-shadow-xs);
    cursor: pointer;
    font: 700 11px/1 Inter, Aptos, "Segoe UI", sans-serif;
    white-space: nowrap;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.theme-toggle:hover {
    border-color: color-mix(in srgb, var(--pro-brand) 60%, var(--pro-border));
    background: var(--pro-brand-soft);
    color: var(--pro-brand-strong);
    box-shadow: var(--pro-shadow-sm);
}
.theme-toggle:active { box-shadow: var(--pro-shadow-xs); }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
.theme-toggle-auth { position: fixed; z-index: 100; top: 18px; right: 20px; }

/* Surfaces and information hierarchy */
html[data-theme] .workspace,
html[data-theme] .admin-workspace { color: var(--pro-text); }
html[data-theme] .page-head,
html[data-theme] .admin-page-heading { margin-bottom: 22px; }
html[data-theme] .page-head p,
html[data-theme] .admin-page-heading p,
html[data-theme] .panel-head small { color: var(--pro-text-muted); }
html[data-theme] .eyebrow { color: var(--pro-brand-strong); font-weight: 800; letter-spacing: .12em; }
html[data-theme] .media-mode-tabs strong { color: var(--pro-text); }
html[data-theme] .media-mode-tabs small { color: var(--pro-text-muted); }
html[data-theme] :is(
    .panel,.profile-card,.playlist-card,.shop-card,.settings-card,.security-card,.rule-card,
    .product-card,.script-card,.automation-rule-card,.wallet-rate-card,.admin-kpi,.admin-user-card,
    .admin-price-card,.admin-core-card,.admin-live-monitor,.admin-grok-toolbar,.admin-grok-account,
    .media-generator-card,.media-queue-card,.media-library-card,.empty-state,.shopee-setup-form,
    .playlist-toolbar,.playlist-upload-panel,.playlist-item-row
) {
    border-color: var(--pro-border);
    background: var(--pro-surface);
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-sm);
}
html[data-theme] :is(.panel,.profile-card,.playlist-card,.shop-card,.product-card,.script-card,.admin-kpi,.admin-core-card) {
    border-radius: 14px;
}
html[data-theme] :is(.shop-card,.product-card,.script-card,.admin-user-card,.admin-core-card) {
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
html[data-theme] :is(.shop-card,.product-card,.script-card,.admin-user-card,.admin-core-card):hover {
    border-color: var(--pro-border-strong);
    box-shadow: var(--pro-shadow-md);
}
html[data-theme] .metric-grid article,
html[data-theme] .admin-kpi,
html[data-theme] .wallet-overview article,
html[data-theme] .automation-summary article {
    position: relative;
    overflow: hidden;
    border-color: var(--pro-border);
    background: linear-gradient(145deg, var(--pro-surface), color-mix(in srgb, var(--pro-surface-soft) 72%, var(--pro-surface)));
    box-shadow: var(--pro-shadow-sm);
}
html[data-theme] .metric-grid article::before,
html[data-theme] .admin-kpi::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--pro-brand), color-mix(in srgb, var(--pro-brand) 25%, transparent));
    content: "";
}
html[data-theme] .metric-grid article::after {
    background: color-mix(in srgb, var(--pro-brand-soft) 82%, transparent);
    opacity: .62;
}
html[data-theme="dark"] .metric-grid article::after { opacity: .24; }
html[data-theme] :is(.metric-grid article,.admin-kpi,.wallet-overview article) > span,
html[data-theme] :is(.metric-grid article,.admin-kpi,.wallet-overview article) > small { color: var(--pro-text-muted); }
html[data-theme] .metric-icon,
html[data-theme] .file-mark,
html[data-theme] .shop-logo,
html[data-theme] .security-note-icon,
html[data-theme] .shop-playlist-avatar,
html[data-theme] .avatar,
html[data-theme] .admin-avatar,
html[data-theme] .admin-account > span {
    border-color: color-mix(in srgb, var(--pro-brand) 35%, var(--pro-border));
    background: var(--pro-brand-soft);
    color: var(--pro-brand-strong);
}

/* Controls */
html[data-theme] :is(button,input,select,textarea,a) { -webkit-tap-highlight-color: transparent; }
html[data-theme] :is(input,select,textarea) {
    border-color: var(--pro-border-strong);
    background: var(--pro-surface-raised);
    color: var(--pro-text);
    caret-color: var(--pro-brand);
    box-shadow: inset 0 1px 1px color-mix(in srgb, var(--pro-text) 3%, transparent);
}
html[data-theme] :is(input,textarea)::placeholder { color: var(--pro-text-muted); opacity: .82; }
html[data-theme] :is(input,select,textarea):hover:not(:disabled) { border-color: color-mix(in srgb, var(--pro-brand) 35%, var(--pro-border-strong)); }
html[data-theme] :is(input,select,textarea):disabled { background: var(--pro-surface-strong); color: var(--pro-text-muted); opacity: .68; }
html[data-theme] :is(button,a,input,select,textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pro-brand) 30%, transparent);
    outline-offset: 2px;
}
html[data-theme] :is(.primary,.console-button.primary,.playlist-upload-button) {
    border-color: #ea580c;
    background: linear-gradient(145deg, #fb923c, #ea580c);
    color: #fff;
    box-shadow: 0 8px 18px rgba(234, 88, 12, .2);
    text-shadow: none;
    transition: filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-theme] :is(.primary,.console-button.primary,.playlist-upload-button):hover:not(:disabled) {
    border-color: #c2410c;
    background: linear-gradient(145deg, #f97316, #c2410c);
    box-shadow: 0 12px 24px rgba(194, 65, 12, .25);
    filter: saturate(1.04);
    transform: none;
}
html[data-theme] :is(.secondary,.console-button.secondary,.button-link:not(.primary),.icon-button,.logout button,.admin-top-actions form button) {
    border-color: var(--pro-border-strong);
    background: var(--pro-surface-raised);
    color: var(--pro-text-secondary);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme] :is(.secondary,.console-button.secondary,.button-link:not(.primary),.icon-button,.logout button,.admin-top-actions form button):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--pro-brand) 55%, var(--pro-border));
    background: var(--pro-brand-soft);
    color: var(--pro-brand-strong);
}
html[data-theme] :is(button,.primary,.secondary,.console-button) { min-height: 42px; border-radius: 10px; }
html[data-theme] :is(button,.primary,.secondary,.console-button):disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
html[data-theme] .danger,
html[data-theme] .secondary-danger { border-color: color-mix(in srgb, var(--pro-danger) 40%, var(--pro-border)); background: var(--pro-danger-soft); color: var(--pro-danger); }

/* Tables, menus, feedback and dialogs */
html[data-theme] .table-wrap,
html[data-theme] table { color: var(--pro-text); }
html[data-theme] thead th {
    border-color: var(--pro-border);
    background: var(--pro-surface-soft);
    color: var(--pro-text-muted);
}
html[data-theme] tbody td { border-color: var(--pro-border); color: var(--pro-text-secondary); }
html[data-theme] tbody tr:hover td { background: color-mix(in srgb, var(--pro-brand-soft) 42%, var(--pro-surface)); }
html[data-theme] td strong { color: var(--pro-text); }
html[data-theme] td small { display: block; color: var(--pro-text-muted); }
html[data-theme] :is(.toast,.console-job,.product-sync-state) {
    border-color: var(--pro-border-strong);
    background: var(--pro-surface-raised);
    color: var(--pro-text-secondary);
    box-shadow: var(--pro-shadow-md);
}
html[data-theme] :is(.modal,.dialog,.picker-modal,.console-modal) { color: var(--pro-text); }
html[data-theme] :is(.modal-card,.dialog-card,.picker-dialog,.console-modal-card,.admin-dialog-card) {
    border-color: var(--pro-border-strong);
    background: var(--pro-surface-raised);
    color: var(--pro-text);
    box-shadow: 0 28px 80px var(--pro-overlay);
}
html[data-theme] :is(.modal-scrim,.dialog-scrim,.picker-scrim,.console-modal-scrim) { background: var(--pro-overlay); }
html[data-theme] :is(.status-badge.success,.billing-state.active,.state.active,.admin-live-pill) { background: var(--pro-success-soft); color: var(--pro-success); }
html[data-theme] :is(.status-badge.warning,.billing-state.pending) { background: var(--pro-warning-soft); color: var(--pro-warning); }
html[data-theme] :is(.status-badge.error,.product-sync-state.error,.console-job.error) { background: var(--pro-danger-soft); color: var(--pro-danger); }

/* Workflow inherits the same materials without flattening its visual graph. */
html[data-theme] .workflow-canvas {
    --wf-accent: var(--pro-brand);
    --wf-accent-strong: var(--pro-brand-strong);
    --wf-accent-soft: var(--pro-brand-soft);
    --wf-scene: var(--pro-info);
    --wf-scene-soft: var(--pro-info-soft);
    --wf-proof: var(--pro-warning);
    --wf-proof-soft: var(--pro-warning-soft);
    --wf-ready: var(--pro-success);
    --wf-ready-soft: var(--pro-success-soft);
    --wf-danger: var(--pro-danger);
    --wf-danger-soft: var(--pro-danger-soft);
    --wf-ink: var(--pro-text);
    --wf-muted: var(--pro-text-muted);
    --wf-border: var(--pro-border);
    --wf-border-strong: var(--pro-border-strong);
    --wf-surface: var(--pro-surface-raised);
    border-color: var(--pro-border);
    background: var(--pro-surface-soft);
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-md);
}
html[data-theme] .workflow-canvas__head,
html[data-theme] .workflow-inspector,
html[data-theme] .workflow-upload-card,
html[data-theme] .workflow-node { background: var(--pro-surface-raised); color: var(--pro-text); }

/* Live Console follows the selected theme, while actual program media stays neutral. */
html[data-theme="light"] .live-console {
    --lc-bg: var(--pro-page);
    --lc-panel: var(--pro-surface);
    --lc-line: var(--pro-border);
    --lc-muted: var(--pro-text-muted);
    --lc-text: var(--pro-text);
    --lc-cyan: var(--pro-brand-strong);
    --lc-green: var(--pro-success);
    --lc-pink: var(--pro-danger);
    --lc-amber: var(--pro-warning);
}
html[data-theme="dark"] .live-console {
    --lc-bg: #0a131c;
    --lc-panel: #111d28;
    --lc-line: #2b4050;
    --lc-muted: #9fb4c3;
    --lc-text: #edf6fb;
    --lc-cyan: #67e8f9;
    --lc-green: #86efac;
    --lc-pink: #fda4af;
    --lc-amber: #fcd34d;
}
html[data-theme] .live-console :is(.console-panel,.console-chip,.console-clock,.console-table th,.quick-grid button,.quick-grid a) {
    border-color: var(--lc-line);
    background: var(--lc-panel);
    color: var(--lc-text);
}
html[data-theme] .live-console :is(.console-panel-title,.console-table strong,.script-copy strong,.live-status-list dd) { color: var(--lc-text); }
html[data-theme] .live-console :is(.console-table td,.script-copy,.pinned-product span,.live-stat-grid span) { color: var(--lc-muted); }
html[data-theme="dark"] .live-console .priority-lane-monitor {
    border-color: var(--lc-line);
    background: linear-gradient(135deg, color-mix(in srgb, var(--lc-cyan) 7%, var(--lc-panel)), var(--lc-panel));
    color: var(--lc-text);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] .live-console .priority-lane-pulse { border-color: var(--lc-line); background: var(--pro-surface-strong); }
html[data-theme="dark"] .live-console :is(.priority-lane-copy small,.priority-lane-next small,.priority-lane-metrics small) { color: var(--pro-brand-strong); }
html[data-theme="dark"] .live-console :is(.priority-lane-copy strong,.priority-lane-next strong,.priority-lane-metrics b) { color: var(--lc-text); }
html[data-theme="dark"] .live-console :is(.priority-lane-copy em,.priority-lane-next span) { color: var(--lc-muted); }
html[data-theme="dark"] .live-console .priority-lane-kind { border-color: var(--lc-line); background: var(--pro-surface-strong); color: var(--lc-muted); }
html[data-theme="dark"] .live-console .priority-lane-metrics { border-color: var(--lc-line); background: var(--pro-surface-soft); color: var(--lc-text); }
html[data-theme="dark"] .live-console .priority-lane-metrics>span { border-color: var(--lc-line); }
html[data-theme="dark"] .live-console .priority-lane-next { border-color: var(--lc-line); }
html[data-theme] :is(.program-stage,.program-phone,.scene-stage,.scene-canvas,.scene-preview-canvas) {
    background-color: #05080b;
    color: #fff;
}
html[data-theme] :is(video,canvas,.program-stage img,.scene-stage img,.scene-canvas img,.scene-preview-canvas img) {
    filter: none !important;
    color-scheme: normal;
}

/* Login keeps the brand showcase but themes the authentication surface. */
html[data-theme] .login-form-side,
html[data-theme] .login-form-card { background: var(--pro-surface); color: var(--pro-text); }
html[data-theme] .login-form-card {
    border: 1px solid var(--pro-border);
    box-shadow: var(--pro-shadow-md);
}
html[data-theme] .login-form-card p,
html[data-theme] .login-help,
html[data-theme] .login-side-head span,
html[data-theme] .login-side-foot { color: var(--pro-text-muted); }
html[data-theme] .login-form-kicker { color: var(--pro-brand-strong); }
html[data-theme] .login-form > label,
html[data-theme] .login-label-row label { color: var(--pro-text-secondary); }
html[data-theme] .login-label-row span,
html[data-theme] .login-input > svg,
html[data-theme] .login-security-note small { color: var(--pro-text-muted); }
html[data-theme] .login-input { border-color: var(--pro-border-strong); background: var(--pro-surface-raised); }
html[data-theme] .login-input input { color: var(--pro-text); background: transparent; box-shadow: none; }
html[data-theme] .login-input input::placeholder { color: var(--pro-text-muted); opacity: 1; }
html[data-theme] .login-input.password-input button { color: var(--pro-text-secondary); background: var(--pro-surface-strong); }
html[data-theme] .login-security-note strong { color: var(--pro-text); }
html[data-theme] .login-submit {
    color: #fff;
    border-color: #9a3412;
    background: linear-gradient(135deg, #c2410c, #9a3412);
}
html[data-theme="dark"] .login-page { background: var(--pro-page); }
html[data-theme="dark"] .login-side-head a { border-color: var(--pro-border); background: var(--pro-surface-soft); color: var(--pro-text-secondary); }
html[data-theme="dark"] .login-security-note { border-color: var(--pro-border); background: var(--pro-surface-soft); }

/* Cache-safe tablet/mobile login closure while legacy login.css ages out. */
@media (max-width: 900px) {
    html[data-theme] .login-page {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }
    html[data-theme] .login-showcase { display: none; }
    html[data-theme] .login-form-side {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        padding: 22px clamp(24px, 5vw, 48px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    html[data-theme] .login-form-side::before { display: none; }
    html[data-theme] :is(.login-side-head,.login-form-card,.login-side-foot) {
        width: min(430px, 100%);
        margin-inline: auto;
    }
    html[data-theme] .login-form-card { padding-top: 24px; padding-bottom: 24px; }
}

@media (max-width: 560px) {
    html[data-theme] .login-form-side {
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        padding: max(16px, env(safe-area-inset-top)) 17px max(20px, env(safe-area-inset-bottom));
    }
}

/* Admin storage observability */
.admin-storage-panel { margin-top: 14px; overflow: hidden; }
.admin-storage-state { padding: 7px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.admin-storage-state.healthy { background: var(--pro-success-soft); color: var(--pro-success); }
.admin-storage-state.warning { background: var(--pro-warning-soft); color: var(--pro-warning); }
.admin-storage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pro-border); }
.admin-storage-grid article { min-width: 0; padding: 17px 18px; border-left: 1px solid var(--pro-border); background: var(--pro-surface); }
.admin-storage-grid article:first-child { border-left: 0; }
.admin-storage-grid span,
.admin-storage-grid small { display: block; color: var(--pro-text-muted); }
.admin-storage-grid span { font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.admin-storage-grid strong { display: block; margin: 7px 0 4px; font-size: 20px; font-variant-numeric: tabular-nums; }
.admin-storage-grid small { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-storage-meter { height: 5px; overflow: hidden; background: var(--pro-surface-strong); }
.admin-storage-meter i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #fb923c, #ea580c); transition: width .3s ease; }

/* Dark-mode correction for legacy hard-coded white cards. */
html[data-theme="dark"] :is(
    .admin-grok-provider-card,.admin-grok-core-card,.admin-grok-account header,.admin-grok-account footer,
    .admin-grok-toolbar,.admin-health-list article,.admin-account,.credit-pill,.account-chip,
    .password-input button,.product-picker-dialog,.product-picker-head,.product-picker-toolbar,
    .scene-property-card,.source-property-panel,.automation-field,.wallet-secure-badge
) {
    border-color: var(--pro-border);
    background: var(--pro-surface-raised);
    color: var(--pro-text);
}
html[data-theme="dark"] :is(
    .admin-grok-provider-card p,.admin-grok-core-card dt,.admin-grok-account dt,.admin-grok-profile-note,
    .admin-health-list span,.account-chip small,.credit-pill span,.product-picker-toolbar label
) { color: var(--pro-text-muted); }

/* Complete dark-mode coverage for feature-specific stylesheets that still
   carry the legacy light palette. Real image/video/canvas pixels are excluded. */
html[data-theme="dark"] .fleet-dashboard {
    --fleet-ink: var(--pro-text);
    --fleet-muted: var(--pro-text-muted);
    --fleet-line: var(--pro-border);
    --fleet-soft: var(--pro-surface-soft);
    --fleet-green: var(--pro-success);
    --fleet-red: var(--pro-danger);
    --fleet-amber: var(--pro-warning);
    color: var(--pro-text);
}
html[data-theme="dark"] .ai-script-page {
    --as-orange: var(--pro-brand);
    --as-orange-soft: var(--pro-brand-soft);
    --as-line: var(--pro-border);
    --as-text: var(--pro-text);
    --as-muted: var(--pro-text-muted);
}
html[data-theme="dark"] .scene-studio {
    --studio-panel: var(--pro-surface);
    --studio-panel-2: var(--pro-surface-soft);
    --studio-cyan: var(--pro-brand);
    --studio-mint: var(--pro-brand-strong);
    color: var(--pro-text);
}

/* Fleet dashboard */
html[data-theme="dark"] :is(
    .fleet-operation-state,.fleet-summary article,.fleet-device,.fleet-control,.fleet-search,
    .fleet-filters button,.fleet-selection button,.fleet-action,.fleet-empty
) {
    border-color: var(--pro-border);
    background: var(--pro-surface-raised);
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] :is(.fleet-selection,.fleet-feedback,.fleet-control>header,.fleet-device-foot,.fleet-control-links) {
    border-color: var(--pro-border);
    background: var(--pro-surface-soft);
}
html[data-theme="dark"] :is(
    .fleet-heading p,.fleet-summary span,.fleet-summary small,.fleet-view-note,.fleet-device-identity p,
    .fleet-state-detail,.fleet-control p,.fleet-selection small,.fleet-feedback p,.fleet-device-stats dt
) { color: var(--pro-text-muted); }
html[data-theme="dark"] :is(.fleet-device-identity h3,.fleet-device-number strong,.fleet-device-stats dd,.fleet-current-media strong) { color: var(--pro-text); }
html[data-theme="dark"] :is(.fleet-device-check>span,.fleet-media-icon) {
    border-color: var(--pro-border-strong);
    background: var(--pro-surface-strong);
    color: var(--pro-text-secondary);
}
html[data-theme="dark"] :is(.fleet-shop-icon,.fleet-empty>span) { background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] .fleet-device:hover { border-color: color-mix(in srgb, var(--pro-brand) 50%, var(--pro-border)); box-shadow: var(--pro-shadow-md); }
html[data-theme="dark"] .fleet-device.selected { border-color: var(--pro-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pro-brand) 20%, transparent), var(--pro-shadow-md); }
html[data-theme="dark"] .fleet-filters button:is(:hover,.active) { border-color: var(--pro-brand); background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] .fleet-control-links a { border-color: var(--pro-border); color: var(--pro-text-muted); }
html[data-theme="dark"] .fleet-control-links a:hover { background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] .fleet-preview-placeholder {
    background: radial-gradient(circle at 50% 36%, var(--pro-surface-strong), var(--pro-surface-raised) 48%, var(--pro-surface));
    color: var(--pro-text-muted);
}
html[data-theme="dark"] .fleet-preview-placeholder>span { border-color: var(--pro-border-strong); background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] .fleet-preview-placeholder strong { color: var(--pro-text-secondary); }
html[data-theme="dark"] :is(.fleet-state-pill,.fleet-operation-state) { background: var(--pro-surface-strong); color: var(--pro-text-secondary); }
html[data-theme="dark"] :is(.state-ready .fleet-state-pill,.fleet-operation-state.online) { border-color: color-mix(in srgb, var(--pro-success) 38%, var(--pro-border)); background: var(--pro-success-soft); color: var(--pro-success); }
html[data-theme="dark"] :is(.state-live .fleet-state-pill,.state-error .fleet-state-pill,.state-offline .fleet-state-pill) { background: var(--pro-danger-soft); color: var(--pro-danger); }
html[data-theme="dark"] :is(.state-starting .fleet-state-pill,.state-stopping .fleet-state-pill,.fleet-operation-state.offline) { background: var(--pro-warning-soft); color: var(--pro-warning); }

/* Live Console and its embedded automation/scene panels */
html[data-theme="dark"] .live-console { color: var(--lc-text); }
html[data-theme="dark"] .live-console :is(
    .console-panel-title,.console-table th,.video-thumb,.product-box,.mini-chart,.console-empty,
    .live-scene-summary,.live-scene-source,.live-source-icon,.live-automation-row
) {
    border-color: var(--lc-line);
    background: var(--lc-panel);
    color: var(--lc-text);
    box-shadow: none;
}
html[data-theme="dark"] .live-console :is(.console-panel-title,.console-table th) { background: color-mix(in srgb, var(--lc-panel) 70%, #000); }
html[data-theme="dark"] .live-console :is(.console-table td,.live-scene-count,.live-scene-source-list,.live-automation-row) { border-color: var(--lc-line); }
html[data-theme="dark"] .live-console :is(.live-scene-summary strong,.live-source-copy strong,.live-automation-copy strong,.live-automation-empty strong) { color: var(--lc-text); }
html[data-theme="dark"] .live-console :is(.live-scene-summary small,.live-source-copy small,.live-scene-count,.live-automation-copy small,.live-automation-count,.live-automation-empty) { color: var(--lc-muted); }
html[data-theme="dark"] .live-console :is(.live-scene-index,.live-source-mark,.live-automation-icon) {
    border-color: color-mix(in srgb, var(--pro-brand) 42%, var(--lc-line));
    background: var(--pro-brand-soft);
    color: var(--pro-brand-strong);
}
html[data-theme="dark"] .live-console .live-scene-source:hover { border-color: color-mix(in srgb, var(--lc-cyan) 48%, var(--lc-line)); background: color-mix(in srgb, var(--lc-cyan) 8%, var(--lc-panel)); }
html[data-theme="dark"] .live-console .live-scene-source.is-locked { border-color: color-mix(in srgb, var(--lc-amber) 38%, var(--lc-line)); background: color-mix(in srgb, var(--lc-amber) 7%, var(--lc-panel)); }
html[data-theme="dark"] .live-console .live-source-icon:hover { border-color: var(--lc-cyan); background: color-mix(in srgb, var(--lc-cyan) 9%, var(--lc-panel)); color: var(--lc-text); }
html[data-theme="dark"] .live-console .live-source-icon.visibility.on { border-color: color-mix(in srgb, var(--lc-green) 42%, var(--lc-line)); background: color-mix(in srgb, var(--lc-green) 9%, var(--lc-panel)); color: var(--lc-green); }
html[data-theme="dark"] .live-console .live-source-icon.lock.on { border-color: color-mix(in srgb, var(--lc-amber) 42%, var(--lc-line)); background: color-mix(in srgb, var(--lc-amber) 9%, var(--lc-panel)); color: var(--lc-amber); }
html[data-theme="dark"] .live-console .live-automation-row.enabled { background: color-mix(in srgb, var(--pro-brand) 7%, var(--lc-panel)); }
html[data-theme="dark"] .live-console .live-automation-config:hover { background: var(--pro-brand-soft); }
html[data-theme="dark"] .live-console .live-automation-shop-label { border-color: color-mix(in srgb, var(--pro-brand) 40%, var(--lc-line)); background: var(--pro-brand-soft); }
html[data-theme="dark"] .live-console .live-automation-shop-label span { color: var(--pro-text-muted); }
html[data-theme="dark"] .live-console .live-automation-shop-label strong { color: var(--pro-brand-strong); }
html[data-theme="dark"] :is(.program-phone,.program-brand-placeholder) { border-color: var(--pro-border-strong); background: var(--pro-surface-raised); }
html[data-theme="dark"] .program-brand-placeholder { background: linear-gradient(160deg, var(--pro-surface-strong), var(--pro-surface-raised) 58%, var(--pro-surface)); color: var(--pro-text); }
html[data-theme="dark"] .program-brand-placeholder :is(strong,em) { color: var(--pro-text-secondary); }
html[data-theme="dark"] .program-brand-placeholder small { color: var(--pro-text-muted); }

/* Shop, setup, playlist, product and media-library surfaces */
html[data-theme="dark"] :is(
    .shop-total,.shop-action-button,.shop-dialog,.shop-login-options>section,.shop-login-options details,
    .qr-login-panel,.cover-picker,.job-message,.shop-playlist-hero,.shop-playlist-stats span,.playlist-option,
    .setup-products-summary>span,.setup-product-thumb,.setup-product-action,.setup-products-empty>span,
    .media-product-video-route,.media-prompt-scope,.media-voice-profile,.media-voice-option,.media-prompt-record,
    .product-video-summary,.product-video-permission,.product-video-file-picker,.product-video-item,
    .product-video-readonly,.media-product-picker,.media-product-option,.media-prompt-ready,.media-script-draft
) {
    border-color: var(--pro-border);
    background: var(--pro-surface-raised);
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] :is(
    .shop-login-options>section,.shop-login-options details,.playlist-option,.setup-product-row:hover,
    .media-voice-option:hover,.product-video-file-picker:hover,.product-video-item:hover,.media-product-option:hover
) { background: var(--pro-surface-soft); }
html[data-theme="dark"] :is(
    .qr-login-panel,.cover-picker,.job-message,.shop-playlist-hero,.setup-products-summary>span,
    .media-product-video-route,.media-prompt-scope,.product-video-file-picker
) { border-color: color-mix(in srgb, var(--pro-brand) 38%, var(--pro-border)); background: var(--pro-brand-soft); }
html[data-theme="dark"] :is(.qr-expired,.product-video-permission.is-limited,.product-video-item.is-other-product) { border-color: color-mix(in srgb, var(--pro-warning) 38%, var(--pro-border)); background: var(--pro-warning-soft); color: var(--pro-warning); }
html[data-theme="dark"] :is(.setup-saved-badge,.setup-product-state.active,.product-video-permission.is-ready,.product-video-item.is-attached) { border-color: color-mix(in srgb, var(--pro-success) 38%, var(--pro-border)); background: var(--pro-success-soft); color: var(--pro-success); }
html[data-theme="dark"] :is(.job-message.error,.setup-product-state.out,.product-video-prepare.is-failed) { border-color: color-mix(in srgb, var(--pro-danger) 38%, var(--pro-border)); background: var(--pro-danger-soft); color: var(--pro-danger); }
html[data-theme="dark"] :is(.setup-product-video-action,.media-voice-option-state,.media-job footer button,.media-asset footer button,.media-asset footer a) {
    border-color: color-mix(in srgb, var(--pro-brand) 38%, var(--pro-border));
    background: var(--pro-brand-soft);
    color: var(--pro-brand-strong);
}
html[data-theme="dark"] .setup-product-video-action:hover { border-color: var(--pro-brand); background: color-mix(in srgb, var(--pro-brand) 18%, var(--pro-surface-raised)); color: var(--pro-brand-strong); }
html[data-theme="dark"] :is(
    .shop-account strong,.shop-metadata dd,.setup-label,.shop-playlist-identity h2,.shop-playlist-stats strong,
    .playlist-option strong,.setup-product-main strong,.setup-product-metric strong,.setup-products-empty strong,
    .media-voice-profile-head h2,.media-voice-option-copy strong,.media-prompt-record>strong,
    .product-video-summary-copy strong,.product-video-permission strong,.product-video-item-copy>strong,
    .product-video-binding-state strong
) { color: var(--pro-text); }
html[data-theme="dark"] :is(
    .shop-account.missing strong,.shop-metadata dt,.shop-advanced-login summary,.shop-playlist-identity p,
    .shop-playlist-stats span,.playlist-option small,.setup-products-summary small,.setup-product-main small,
    .setup-product-metric small,.setup-products-pagination,.setup-products-empty,.media-voice-profile-head p,
    .media-voice-option-copy small,.media-prompt-record>small,.product-video-summary-copy span,
    .product-video-permission span,.product-video-item-copy>span,.product-video-binding-state small,.product-video-empty
) { color: var(--pro-text-muted); }
html[data-theme="dark"] :is(
    .thumb,.playlist-cover,.setup-product-thumb,.setup-product-main span,.media-product-video-route>span,
    .media-prompt-scope-icon,.media-voice-profile-icon,.media-prompt-permission-icon,
    .product-video-summary-thumb,.product-video-summary-stat,.product-video-item-icon,.product-video-empty>span
) { border-color: color-mix(in srgb, var(--pro-brand) 35%, var(--pro-border)); background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] .playlist-cover small { background: color-mix(in srgb, var(--pro-surface) 88%, transparent); color: var(--pro-text-secondary); }
html[data-theme="dark"] .setup-product-row { border-color: var(--pro-border); }
html[data-theme="dark"] .setup-product-thumb>i { border-color: var(--pro-surface-raised); }
html[data-theme="dark"] .qr-frame { background: #fff; color-scheme: light; }

/* Wallet and Media contain late legacy declarations with dark ink and light
   gradients. Keep disabled data readable and neutralize background images,
   not only background-color, so Dark Mode cannot expose white strips. */
html[data-theme="dark"] :is(
    .wallet-section-head h2,.wallet-rate-card>div:first-child strong,.wallet-rate-card dd,
    .media-voice-profile-key code,.media-prompt-steps strong,.media-mode-tabs strong
) { color: var(--pro-text); }
html[data-theme="dark"] :is(
    .wallet-section-head p,.wallet-section-head>span,.wallet-rate-card dt,
    .media-voice-profile-key small,.media-prompt-steps small,.media-mode-tabs small,
    .media-voice-profile-actions p
) { color: var(--pro-text-muted); }
html[data-theme="dark"] .wallet-rate-card>small { color: var(--pro-brand-strong); }
html[data-theme="dark"] .wallet-rate-card dl>div { border-color: var(--pro-border); }
html[data-theme="dark"] .wallet-rate-card.disabled { opacity: 1; background: var(--pro-surface-soft); }
html[data-theme="dark"] .wallet-rate-card.disabled>div:first-child strong { color: var(--pro-text-secondary); }
html[data-theme="dark"] .media-voice-profile-key {
    border-color: color-mix(in srgb, var(--pro-brand) 35%, var(--pro-border));
    background: var(--pro-brand-soft);
    color: var(--pro-text-secondary);
    box-shadow: none;
}
html[data-theme="dark"] .media-voice-profile-key small { color: var(--pro-brand-strong); }
html[data-theme="dark"] .media-voice-profile-key code { color: var(--pro-text-secondary); }
html[data-theme="dark"] .media-prompt-steps {
    border-color: var(--pro-border);
    background: var(--pro-surface-soft);
    background-image: none;
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] .media-prompt-steps>div { border-color: var(--pro-border); background: transparent; }
html[data-theme="dark"] .media-prompt-steps span { color: var(--pro-brand-strong); }
html[data-theme="dark"] .media-prompt-steps strong { color: var(--pro-text); }
html[data-theme="dark"] .media-prompt-steps small { color: var(--pro-text-muted); }

/* Shop creation and server capacity use a light-only legacy presentation.
   Theme the parent containers as well as their controls, and keep capacity
   stripes visible without flashing white blocks in Dark Mode. */
html[data-theme="dark"] .shop-create-form {
    border-color: var(--pro-border);
    background: var(--pro-surface);
    background-image: none;
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-sm);
}
html[data-theme="dark"] :is(.shop-create-fields label>span,.shop-mode-picker legend,.server-picker legend) { color: var(--pro-text-secondary); }
html[data-theme="dark"] :is(.shop-mode-options strong,.server-option-copy strong) { color: var(--pro-text); }
html[data-theme="dark"] :is(.shop-mode-options small,.server-option-copy small,.shop-create-actions>small,.server-picker-empty) { color: var(--pro-text-muted); }
html[data-theme="dark"] .shop-create-actions { border-color: var(--pro-border); }
html[data-theme="dark"] .server-picker-list {
    border-color: var(--pro-border);
    background: var(--pro-surface-soft);
    background-image: none;
    scrollbar-color: var(--pro-border-strong) transparent;
}
html[data-theme="dark"] .shop-security-note {
    border-color: color-mix(in srgb, var(--pro-brand) 38%, var(--pro-border));
    background: var(--pro-brand-soft);
    background-image: none;
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] .shop-security-note strong { color: var(--pro-text); }
html[data-theme="dark"] .shop-security-note p { color: var(--pro-text-muted); }
html[data-theme="dark"] .server-stripe-meter {
    border-color: var(--pro-border-strong);
    background: repeating-linear-gradient(90deg, var(--pro-surface-strong) 0 7px, var(--pro-surface-raised) 7px 10px);
}
html[data-theme="dark"] .server-stripe-meter i { background: repeating-linear-gradient(90deg, var(--pro-brand) 0 7px, var(--pro-brand-soft) 7px 10px); }
html[data-theme="dark"] .server-option.busy .server-stripe-meter i { background: repeating-linear-gradient(90deg, var(--pro-warning) 0 7px, var(--pro-warning-soft) 7px 10px); }
html[data-theme="dark"] .server-option.full .server-stripe-meter i { background: repeating-linear-gradient(90deg, var(--pro-danger) 0 7px, var(--pro-danger-soft) 7px 10px); }
html[data-theme="dark"] .server-option.offline .server-stripe-meter i { background: repeating-linear-gradient(135deg, var(--pro-text-muted) 0 5px, var(--pro-surface-strong) 5px 10px); }

/* Automation workspace */
html[data-theme="dark"] :is(
    .automation-shop-panel,.automation-shop-bar,.automation-rule-card,.automation-rule-config,
    .automation-history,.automation-dialog,.automation-shop-checks label,.automation-enabled,
    .automation-weekdays span,.automation-event-list article
) {
    border-color: var(--pro-border);
    background: var(--pro-surface-raised);
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] :is(.automation-panel-heading,.automation-history-head,.automation-dialog-head,.automation-dialog-foot,.automation-event-list article) { border-color: var(--pro-border); }
html[data-theme="dark"] .automation-shop-bar { border-color: color-mix(in srgb, var(--pro-brand) 36%, var(--pro-border)); background: linear-gradient(110deg, var(--pro-brand-soft), var(--pro-surface-raised) 72%); }
html[data-theme="dark"] .automation-shop-tabs a { color: var(--pro-text-secondary); }
html[data-theme="dark"] .automation-shop-tabs a:hover { background: var(--pro-surface-soft); }
html[data-theme="dark"] .automation-shop-tabs a.active { border-color: color-mix(in srgb, var(--pro-brand) 45%, var(--pro-border)); background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] :is(.automation-rule-card.enabled,.automation-shop-checks label:has(input:checked),.automation-enabled:has(input:checked)) { border-color: color-mix(in srgb, var(--pro-brand) 42%, var(--pro-border)); background: color-mix(in srgb, var(--pro-brand-soft) 72%, var(--pro-surface-raised)); }
html[data-theme="dark"] :is(.automation-rule-icon,.event-icon,.automation-empty-icon) { background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] :is(.automation-not-configured,.automation-history-head>strong,.event-status,.automation-state-pill) { background: var(--pro-surface-strong); color: var(--pro-text-secondary); }
html[data-theme="dark"] :is(.automation-rule-copy p,.automation-rule-config span,.automation-history-head p,.automation-event-list p,.automation-event-list small,.automation-field small,.automation-enabled small) { color: var(--pro-text-muted); }
html[data-theme="dark"] :is(.automation-rule-copy h3,.automation-history-head h2,.automation-event-list strong,.automation-field>span,.automation-dialog legend,.automation-enabled strong) { color: var(--pro-text); }
html[data-theme="dark"] :is(.automation-edit,.dialog-close,.automation-weekdays span) { border-color: var(--pro-border-strong); background: var(--pro-surface-strong); color: var(--pro-text-secondary); }
html[data-theme="dark"] :is(.automation-edit:hover,.automation-weekdays input:checked+span) { border-color: var(--pro-brand); background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] .automation-dialog::backdrop { background: var(--pro-overlay); }

/* Script authoring and workflow supporting cards */
html[data-theme="dark"] :is(
    .ai-script-overview article,.ai-script-flow,.ai-script-template-grid button,.ai-script-editor,
    .ai-script-settings .ai-script-enable,.ai-script-card,.ai-script-video-list>div,.ai-script-module,
    .ai-script-template-compact,.ai-script-mode-nav>a,.workflow-canvas__runtime,.workflow-graph__zoom,
    .workflow-graph__toolbar button,.workflow-graph__viewport,.workflow-script-node,.workflow-script-node__video,
    .workflow-script-node__videos>div,.workflow-script-node__actions button,.workflow-script-node__facts>span,
    .workflow-priority-controls button,.workflow-video-upload,.workflow-source-overview article,
    .workflow-upload-card__context,.workflow-upload-file-list,.workflow-legacy-assets
) {
    border-color: var(--pro-border);
    background: var(--pro-surface-raised);
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] :is(.ai-script-flow,.ai-script-card-video,.ai-script-mini-flow,.workflow-graph__viewport,.workflow-upload-card__context) { background: var(--pro-surface-soft); }
html[data-theme="dark"] :is(.ai-script-template-grid button:hover,.ai-script-mode-nav>a:hover,.workflow-graph__toolbar button:hover,.workflow-priority-controls button:hover:not(:disabled)) { border-color: var(--pro-brand); background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] :is(.ai-script-form-grid label>span,.ai-script-settings label>span:first-child,.ai-script-card>p span,.ai-script-video-list strong) { color: var(--pro-text-secondary); }
html[data-theme="dark"] :is(.ai-script-form-grid small,.ai-script-settings small,.ai-script-card>p strong,.ai-script-video-list small) { color: var(--pro-text-muted); }

/* Scene Studio controls; canvas/media remain neutral. */
html[data-theme="dark"] :is(
    .scene-studio-grid>.panel,.scene-inspector>.panel,.scene-create-form,.scene-composer-foot,
    .scene-rail-actions,.source-layer-help,.source-layer-row,.source-type-mark,.layer-state-button,
    .layer-lock-button,.chroma-settings,.source-property-form,.scene-settings-form,.chroma-enabled,
    .studio-modal-card,.source-type-grid label>span,.source-type-grid b,.source-create-image
) {
    border-color: var(--pro-border);
    background: var(--pro-surface-raised);
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] :is(.scene-composer-foot,.scene-rail-actions,.chroma-enabled,.source-type-grid label>span) { background: var(--pro-surface-soft); }
html[data-theme="dark"] :is(.scene-list-item>button,.source-layer-select,.chroma-settings summary b,.source-coordinates b) { color: var(--pro-text); }
html[data-theme="dark"] :is(.scene-studio-head p,.scene-canvas-tools,.scene-list-item small,.source-layer-select small,.source-property-head span,.chroma-settings summary small,.source-coordinates span) { color: var(--pro-text-muted); }
html[data-theme="dark"] :is(.scene-list-item>button:hover,.scene-list-item.active>button,.source-layer-row:hover,.source-layer-row.active,.source-type-grid input:checked+span) { border-color: color-mix(in srgb, var(--pro-brand) 44%, var(--pro-border)); background: var(--pro-brand-soft); }
html[data-theme="dark"] :is(.studio-icon-button,.source-type-mark,.source-type-grid b,.source-create-image) { border-color: color-mix(in srgb, var(--pro-brand) 40%, var(--pro-border)); background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] .scene-canvas-shell { background: #05080b; }

/* Wallet, partner/viewer and admin feature cards */
html[data-theme="dark"] :is(
    .admin-tabs,.admin-user-card,.admin-user-metrics>div,.admin-price-card,.admin-promo-list article,
    .admin-media-price-panel,.partner-package-editor,.partner-profile-options label,.partner-viewer-card,
    .partner-viewer-card dl,.viewer-package,.partner-card-section,.partner-empty,.viewer-live-card,
    .viewer-live-card footer,.admin-live-metrics,.admin-live-metrics>div,.admin-live-empty,.admin-grok-quota,
    .admin-grok-security,.admin-grok-provider-state,.admin-grok-login-progress,.admin-grok-alert,
    .admin-grok-account-icon,.admin-grok-form-intro,.admin-grok-form-checks span,.admin-grok-auth-card,
    .admin-grok-login-steps span,.admin-traffic-protection,.admin-traffic-kpis article,
    .admin-traffic-unavailable,.admin-traffic-legend i,.admin-traffic-data-table th,
    .admin-traffic-cache-warning,.admin-audit-details,.admin-audit-facts span,.admin-worker-progress
) {
    border-color: var(--pro-border);
    background: var(--pro-surface-raised);
    color: var(--pro-text);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] :is(.admin-tabs a.active,.partner-profile-options label:hover,.partner-card-section summary span) { border-color: var(--pro-brand); background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] :is(.partner-section-head>span,.viewer-section-head>span,.viewer-live-card header>span,.admin-grok-quota-note,.admin-grok-form-intro p,.admin-traffic-protection p) { color: var(--pro-text-muted); }
html[data-theme="dark"] :is(.partner-kpis article,.viewer-kpis article,.wallet-overview article,.admin-summary article) { border-color: var(--pro-border); background: var(--pro-surface-raised); color: var(--pro-text); }
html[data-theme="dark"] :is(.billing-state,.partner-state,.viewer-system-state) { border-color: var(--pro-border); background: var(--pro-surface-strong); color: var(--pro-text-secondary); }

/* Neutralize the remaining hard-coded light surfaces in late-loaded feature
   stylesheets. This list is intentionally grouped by semantic role so newly
   rendered states stay readable instead of inheriting white legacy cards. */
html[data-theme="dark"] :is(
    #new-shop-name,.shop-mode-options label,.shop-mode-options input,.server-option,.server-option-check,
    .product-picker-dialog,.product-picker-sidebar,.picker-search,.picker-page,.picker-footer,
    .picker-meta select,.picker-footer .secondary,.ai-script-shop-picker select,
    .ai-script-video-preview,.ai-script-card-video,.ai-script-video-list>div,
    .media-shop-picker select,.media-field input,.media-field select,.media-field textarea,
    .media-product-preview,.media-product-preview>span,.media-job,.media-asset,.media-empty,
    .media-credit-strip,.media-credit-strip>a,.media-prompt-ready,.media-prompt-ready textarea,
    .media-source-drop.has-saved-image,.media-product-search input,.media-product-actions button,
    .media-product-check,.media-product-thumb,.media-production-features span,.media-batch-summary,
    .media-script-review>header>b,.media-script-draft,.media-script-draft textarea,
    .media-script-review>footer button,.media-mode-tabs>a,.media-mode-tabs svg,
    .media-reply-option,.ai-script-mode-nav>a,.ai-script-module,.ai-script-mini-flow span,
    .ai-script-template-compact,.source-layer-row,.layer-order-button,.layer-state-button,
    .layer-lock-button,.source-playlist-preview-control,.source-playlist-preview-status,
    .source-playlist-preview-status button,.playlist-remove-button,.priority-lane-pulse,
    .priority-lane-kind,.priority-lane-metrics,.media-asset footer,
    .admin-worker-credentials,.admin-worker-visibility,.admin-worker-capacity,
    .admin-worker-register-switch>span:last-child,.admin-grok-device-picker select,
    .admin-grok-code-form input,.admin-grok-account-form textarea,.admin-grok-account-form code,
    .admin-grok-auth-heading>span,.admin-grok-auth-identity>i,.admin-security-event-icon,
    .admin-security-severity,.admin-traffic-head-state,.partner-policy-stats span,
    .partner-heading-badges span,.partner-sales-table th,
    .workflow-node--process li,.workflow-node--proof li,.workflow-node>a,.workflow-graph__foot a,
    .workflow-graph.is-graph-ready .workflow-port,.workflow-script-node__status,
    .workflow-script-node__rank,.workflow-script-node__eligibility,.workflow-script-node__eligibility>span,
    .workflow-script-node__actions button,.workflow-script-node__actions .button-link,
    .workflow-script-node__videos button,.ai-script-canvas-modal__dialog,
    .ai-script-canvas-modal__dialog>header,.ai-script-canvas-modal__body>.ai-script-template-section,
    .ai-script-secondary-workflows,.workflow-priority-mobile-connector,
    .workflow-priority-mobile-connector>span,.workflow-live-output__icon,
    .workflow-live-output__rules li b,.workflow-live-output .workflow-port--in,
    .workflow-video-upload__permission,.workflow-video-upload__permission>span,
    .workflow-upload-card__blocked,.workflow-upload-target select,.workflow-upload-file input,
    .workflow-upload-file input::file-selector-button,.workflow-upload-file-list,
    .workflow-upload-progress,.workflow-legacy-assets,.workflow-legacy-assets[open]>summary
) {
    border-color: var(--pro-border);
    background: var(--pro-surface-raised);
    color: var(--pro-text-secondary);
    box-shadow: var(--pro-shadow-xs);
}
html[data-theme="dark"] :is(
    .product-picker-dialog,.media-factory,.ai-script-page,.ai-script-page-v2,
    .media-product-preview,.media-batch-summary,.media-job-billing,.media-mode-tabs svg,
    .ai-script-card-video,.ai-script-mini-flow span,.ai-script-template-compact,
    .source-playlist-preview-control,.priority-lane-metrics,.media-asset footer,
    .admin-worker-visibility,.admin-worker-capacity,.admin-worker-register-switch>span:last-child,
    .admin-grok-account-form code,.admin-grok-form-checks span,.admin-grok-login-steps span,
    .partner-viewer-card dl,.viewer-live-card footer,.workflow-node--process li,
    .workflow-node--proof li,.ai-script-canvas-modal__body>.ai-script-template-section,
    .workflow-source-overview article,.workflow-upload-card__context,
    .workflow-upload-file-list,.workflow-legacy-assets[open]>summary
) { background: var(--pro-surface-soft); }
html[data-theme="dark"] :is(
    .shop-mode-options label:hover,.server-option:hover,.picker-tab.active,
    .product-sync-button,.product-sync-button:hover,.ai-script-auto-note,
    .media-card-title>span,.media-library-empty>span,.media-credit-strip>a:hover,
    .media-product-actions button:hover,.media-product-option:hover,
    .media-product-option.is-selected,.media-product-option:has(input:checked),
    .media-mode-tabs>a:hover,.media-mode-tabs>a.is-active,.media-reply-option:hover,
    .media-reply-option.is-selected,.media-reply-option:has(input:checked),
    .ai-script-mode-nav>a:hover,.ai-script-mode-nav>a>b,.ai-script-form-step>b,
    .source-layer-row.active,.source-layer-row:hover,.layer-order-button:hover,
    .layer-state-button:hover,.source-playlist-preview-status button:hover,
    .partner-heading-badges span,.partner-policy-stats span,.workflow-node>a,
    .workflow-graph__foot a,.workflow-script-node__rank,
    .workflow-priority-controls button:hover:not(:disabled),
    .workflow-priority-mobile-connector,.workflow-priority-mobile-connector>span,
    .workflow-live-output__icon,.workflow-live-output__rules li b
) {
    border-color: color-mix(in srgb, var(--pro-brand) 38%, var(--pro-border));
    background: var(--pro-brand-soft);
    color: var(--pro-brand-strong);
}
html[data-theme="dark"] :is(
    .shop-mode-options label:has(input:checked),.server-option:has(input:checked),
    .ai-script-status.draft,.media-job-billing.is-reserved,.media-reply-state,
    .playlist-preparation>span,.layer-lock-button.on,
    .source-playlist-preview-status:is(.is-thumbnail-only,.is-unavailable),
    .priority-lane-monitor.kind-rotation .priority-lane-kind,
    .admin-worker-visibility.is-visible,.admin-grok-quota-note,.admin-grok-security,
    .admin-grok-form-intro,.admin-traffic-cache-warning,.partner-state.pending,
    .workflow-canvas__runtime.is-preparing,.workflow-node--proof.is-preparing .workflow-node__icon
) {
    border-color: color-mix(in srgb, var(--pro-warning) 38%, var(--pro-border));
    background: var(--pro-warning-soft);
    color: var(--pro-warning);
}
html[data-theme="dark"] :is(
    .ai-script-runtime.is-live,.ai-script-readiness.is-ready,.media-prompt-ready,
    .source-playlist-preview-status.is-ready,.priority-lane-monitor.kind-product .priority-lane-kind,
    .admin-worker-media-role.is-visible,.admin-traffic-head-state.protected,
    .viewer-system-state.online,.workflow-canvas__runtime:is(.is-live,.is-ready),
    .workflow-script-node__eligibility.is-eligible,.workflow-video-upload__permission
) {
    border-color: color-mix(in srgb, var(--pro-success) 38%, var(--pro-border));
    background: var(--pro-success-soft);
    color: var(--pro-success);
}
html[data-theme="dark"] :is(
    .media-credit-warning,.media-job.is-failed,.media-job p,.media-script-review-error,
    .media-asset footer .danger,.media-delete-error,.playlist-preparation.is-failed>span,
    .source-delete-form button,.scene-delete-form button,.source-playlist-preview-status.is-error,
    .playlist-remove-button:hover:not(:disabled),.priority-lane-monitor.kind-reply .priority-lane-kind,
    .media-asset footer .media-delete-button,.admin-worker-capacity.is-full,
    .admin-grok-provider-state.offline,.admin-grok-alert,.admin-grok-auth-card.error,
    .admin-traffic-head-state:is(.alert,.unavailable),.admin-traffic-unavailable,
    .admin-audit-detail-list article.live-start-failed,.admin-security-severity.critical,
    .admin-security-event-list article.critical .admin-security-event-icon,
    .partner-admin-state.cancelled,.partner-viewer-status.blocked,.partner-state.cancelled,
    .viewer-live-card .danger:hover:not(:disabled),.workflow-script-node__actions .danger,
    .workflow-script-node__videos button,.workflow-upload-card__blocked
) {
    border-color: color-mix(in srgb, var(--pro-danger) 38%, var(--pro-border));
    background: var(--pro-danger-soft);
    color: var(--pro-danger);
}
html[data-theme="dark"] :is(
    .media-job p,.media-job-billing,.media-batch-summary,.media-credit-strip,
    .media-production-features span,.media-reply-intent,.ai-script-readiness,
    .ai-script-intent,.ai-script-mode-nav em,.source-playlist-preview-status,
    .priority-lane-metrics,.admin-worker-register-switch>span:last-child,
    .admin-grok-form-checks span,.admin-grok-login-steps span,.admin-traffic-head-state,
    .partner-section-head>span,.viewer-section-head>span,.viewer-live-card header>span,
    .workflow-script-node__status.is-draft,.workflow-script-node__eligibility.is-skipped,
    .workflow-priority-mobile-connector.is-draft
) { color: var(--pro-text-muted); }
html[data-theme="dark"] :is(
    .media-product-preview strong,.media-job strong,.media-asset strong,
    .media-script-draft strong,.ai-script-module strong,.source-layer-row strong,
    .priority-lane-metrics strong,.admin-worker-visibility strong,.admin-worker-capacity strong,
    .workflow-node--process strong,.workflow-node--proof strong,.workflow-script-node__facts strong
) { color: var(--pro-text); }
html[data-theme="dark"] :is(.admin-switch span::after,.automation-rule-card .switch span,.mini-switch::after,.switch span) {
    background: var(--pro-text-secondary);
}
html[data-theme="dark"] :is(.media-progress,.admin-worker-progress-track) { background: var(--pro-surface-strong); }
html[data-theme="dark"] :is(
    .promo-discount,.admin-media-price-icon,.admin-audit-list article>span,
    .automation-shop-avatar,.automation-summary-icon.orange,.program-brand-mark,.program-overlay span
) { border-color: color-mix(in srgb, var(--pro-brand) 40%, var(--pro-border)); background: var(--pro-brand-soft); color: var(--pro-brand-strong); }
html[data-theme="dark"] :is(.automation-summary-icon.red,.automation-form-error) { border-color: color-mix(in srgb, var(--pro-danger) 38%, var(--pro-border)); background: var(--pro-danger-soft); color: var(--pro-danger); }

/* Media pixels must never inherit theme filters or blending. */
html[data-theme="dark"] :is(img,video,canvas,.fleet-live-preview,.program-scene-preview,.scene-program-canvas) {
    filter: none !important;
    mix-blend-mode: normal;
}

@media (max-width: 1050px) {
    .theme-toggle [data-theme-label] { display: none; }
    .theme-toggle { width: 42px; padding: 0; }
    .admin-storage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-storage-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--pro-border); }
    .admin-storage-grid article:nth-child(4) { border-top: 1px solid var(--pro-border); }
}

@media (max-width: 700px) {
    html[data-theme] body { font-size: 14px; }
    html[data-theme] :is(input,select,textarea) { font-size: 16px; }
    .theme-toggle-auth { top: 10px; right: 10px; }
    .admin-storage-grid { grid-template-columns: 1fr; }
    .admin-storage-grid article { border-top: 1px solid var(--pro-border); border-left: 0; }
    .admin-storage-grid article:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] *,
    html[data-theme] *::before,
    html[data-theme] *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}