:root {
    --ui-page: #fffdfa;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-orange: #c2410c;
    --ui-orange-hover: #9a3412;
    --ui-orange-soft: #fff7ed;
    --ui-text: #172033;
    --ui-text-secondary: #475569;
    --ui-text-muted: #5f6b7a;
    --ui-border: #d9dee7;
    --ui-border-strong: #c7ced8;
}

html,
body,
.admin-body {
    background: var(--ui-page);
    color: var(--ui-text);
}

.workspace,
.admin-workspace {
    color: var(--ui-text);
}

.sidebar,
.topbar,
.panel,
.profile-card,
.playlist-card,
.shop-card,
.settings-card,
.security-card,
.rule-card,
.product-card,
.script-card,
.automation-rule-card,
.automation-summary article,
.wallet-overview article,
.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 {
    border-color: var(--ui-border);
    background: var(--ui-surface);
}

h1,
h2,
h3,
.page-head h1,
.admin-page-heading h1,
.panel-head h2 {
    color: var(--ui-text);
}

.page-head p,
.admin-page-heading p,
.panel-head small,
.metric-grid article > span,
.metric-grid article > small,
.detail-list dt,
.mini-list p small,
.mini-list > div > span:last-child,
td small,
.account-chip small,
.sidebar-foot small,
.shop-account.missing strong,
.shop-metadata dt,
.shop-playlist-identity p,
.playlist-option small,
.scene-studio-head p,
.scene-list-item small,
.source-layer-select small,
.source-property-head span,
.automation-summary small,
.automation-shop-tabs small,
.automation-shop-bar small,
.automation-not-configured,
.automation-rule-config span,
.automation-history-head > span,
.automation-history-empty,
.automation-event-list small,
.automation-field small,
.automation-shop-checks small,
.automation-enabled small,
.wallet-overview small,
.wallet-section-head > span,
.admin-section-head > span,
.admin-user-main small,
.admin-user-metrics span,
.admin-price-card small,
.admin-promo-list small,
.admin-audit-list small,
.admin-audit-list code,
.admin-empty,
.wallet-empty,
.admin-dialog-body small,
.admin-password-reset small,
.admin-own-password small,
.admin-kpi small,
.admin-activity-list small,
.admin-revenue-bars span,
.admin-live-info small,
.admin-live-metrics span,
.admin-live-empty small,
.admin-account small,
.admin-topbar > div:first-child span,
.admin-grok-profile-note,
.admin-grok-empty p,
.admin-grok-account small {
    color: var(--ui-text-muted);
}

.eyebrow,
.admin-page-heading .eyebrow,
.back-link,
.panel-head > a,
.text-button,
.credit-pill strong {
    color: var(--ui-orange-hover);
}

input,
select,
textarea {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface);
    color: var(--ui-text);
}

input::placeholder,
textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}

.primary,
.console-button.primary,
.playlist-upload-button,
.media-generate-button,
.admin-tabs a.active,
.nav-item.active,
.brand-mark,
.admin-brand > span,
.admin-sidebar nav a.active {
    border-color: var(--ui-orange);
    background: var(--ui-orange);
    color: #ffffff;
}

.primary:hover:not(:disabled),
.console-button.primary:hover:not(:disabled),
.playlist-upload-button:hover,
.media-generate-button:hover:not(:disabled),
.nav-item.active:hover,
.admin-sidebar nav a.active:hover {
    border-color: var(--ui-orange-hover);
    background: var(--ui-orange-hover);
    color: #ffffff;
}

.secondary,
.console-button.secondary,
.button-link:not(.primary),
.icon-button,
.quick-grid button,
.quick-grid a {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface);
    color: #334155;
}

.secondary:hover:not(:disabled),
.console-button.secondary:hover:not(:disabled),
.icon-button:hover,
.quick-grid button:hover:not(:disabled),
.quick-grid a:hover {
    border-color: var(--ui-orange);
    background: var(--ui-orange-soft);
    color: var(--ui-orange-hover);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    color: #667085;
}

th {
    border-color: var(--ui-border);
    background: var(--ui-orange-soft);
    color: #7c2d12;
}

td {
    border-color: var(--ui-border);
    color: #334155;
}

tbody tr:hover {
    background: #fffaf5;
}

.metric-icon,
.metric-icon.cyan,
.metric-icon.amber,
.metric-icon.blue,
.script-mark,
.rule-icon,
.media-card-title > span,
.media-library-empty > span,
.automation-rule-icon,
.admin-avatar,
.admin-account > span {
    border-color: #fed7aa;
    background: var(--ui-orange-soft);
    color: var(--ui-orange-hover);
}

.setup-product-thumb > i {
    background: #15803d;
    color: #ffffff;
}

/* Preserve dark media canvases, but restore readable text inside them. */
.preview-phone strong,
.preview-phone small,
.preview-caption,
.program-phone .program-placeholder,
.program-phone .program-overlay small {
    color: #ffffff;
}

.preview-caption {
    background: rgba(3, 9, 12, .86);
}

/* Live console uses the same light surfaces as the rest of the workspace. */
.live-console {
    --lc-bg: var(--ui-page);
    --lc-panel: var(--ui-surface);
    --lc-line: var(--ui-border);
    --lc-muted: var(--ui-text-muted);
    --lc-text: var(--ui-text);
    --lc-cyan: var(--ui-orange);
    --lc-green: #15803d;
    --lc-pink: #be123c;
    --lc-amber: #a16207;
    color: var(--ui-text);
}

.live-menu-mark,
.console-chip b,
.status-ready,
.cyan {
    color: var(--ui-orange-hover);
}

.console-panel {
    border-color: var(--ui-border);
    background: var(--ui-surface);
    box-shadow: none;
}

.console-panel-title {
    border-bottom-color: var(--ui-border);
    background: var(--ui-surface-soft);
    color: #7c2d12;
}

.preview-live-dot,
.playlist-actions,
.playlist-switches em,
.pinned-product-copy span,
.pin-feedback,
.script-copy b,
.script-copy i,
.live-stat-grid span,
.trend-legend,
.live-trend-head,
.live-trend-foot,
.trend-empty,
.panel-state,
.stats-live-state {
    color: var(--ui-text-muted);
}

.preview-live-dot.active,
.panel-state.state-error,
.stats-live-state.state-error {
    color: #be123c;
}

.preview-live-dot.working {
    color: #92400e;
}

.playlist-switches .mini-switch,
.mini-switch,
.switch {
    border-color: var(--ui-border-strong);
    background: #d8dee7;
}

.mini-switch.on,
.switch.on {
    border-color: var(--ui-orange);
    background: var(--ui-orange);
}

.panel-state,
.stats-live-state {
    border-color: var(--ui-border);
    background: var(--ui-surface-soft);
}

.panel-state.state-pinned,
.panel-state.state-queued,
.stats-live-state.active {
    border-color: #86c99a;
    background: #f0fdf4;
    color: #166534;
}

.pinned-price-row b,
.pink {
    color: #be123c;
}

.pinned-price-row s {
    color: var(--ui-text-muted);
}

.script-copy {
    color: var(--ui-text-secondary);
}

.script-copy strong,
.pinned-product-copy strong,
.live-scene-count strong {
    color: var(--ui-text);
}

.live-scene-summary small {
    color: var(--ui-text-muted);
}

.product-box,
.pinned-product .product-box span {
    color: var(--ui-orange-hover);
}

.live-trend-card {
    border-color: var(--ui-border);
    background: var(--ui-surface-soft);
}

.trend-grid line {
    stroke: #d6dce5;
}

.console-modal-scrim,
.studio-modal-scrim {
    background: rgba(15, 23, 42, .5);
}

.console-modal-card {
    border-color: var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .2);
}

.console-modal-card > header,
.console-modal-toolbar {
    border-color: var(--ui-border);
}

.console-modal-card header p,
.console-modal-toolbar,
.modal-empty,
.script-editor-form label,
.script-editor-form small,
.pin-product-row span {
    color: var(--ui-text-muted);
}

.modal-close {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface);
    color: var(--ui-text);
}

.console-modal-toolbar input,
.script-editor-form input,
.script-editor-form select,
.script-editor-form textarea {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface);
    color: var(--ui-text);
}

.pin-product-row,
.script-enabled {
    border-color: var(--ui-border);
    background: var(--ui-surface-soft);
}

.pin-product-row strong {
    color: var(--ui-text);
}

.pin-product-row b {
    color: #be123c;
}

/* Scene inspector controls must stay readable on the light inspector panels. */
.source-image-upload small,
.source-create-image small,
.source-create-video small,
.source-video-picker small {
    color: var(--ui-text-muted);
}

.source-property-actions .background-action {
    border-color: #fdba74;
    background: var(--ui-orange-soft);
    color: var(--ui-orange-hover);
}

.source-delete-form,
.scene-delete-form {
    border-color: #fecaca;
}

.source-delete-form button,
.scene-delete-form button {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

/* Scene Studio: scene/layer hierarchy on the left, canvas in the center, properties on the right. */
.scene-studio-grid {
    grid-template-columns: minmax(310px, 340px) minmax(460px, 1fr) minmax(320px, 360px);
    gap: 16px;
    min-height: 780px;
}

.scene-studio-grid > .panel,
.scene-inspector.panel {
    border-color: var(--ui-border);
    background: var(--ui-surface);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.scene-rail {
    display: flex;
    max-height: 900px;
    flex-direction: column;
    overflow: hidden;
}

.scene-list {
    max-height: 220px;
    padding: 10px 12px;
}

.scene-list-item > button {
    min-height: 58px;
}

.scene-rail-actions {
    margin-top: 0;
    padding: 10px 12px 12px;
}

.source-layers-panel {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    border-top: 1px solid var(--ui-border);
}

.source-layers-panel .scene-panel-head {
    min-height: 62px;
}

.source-layer-help {
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.55;
}

.source-layer-help strong {
    color: var(--ui-text);
}

.source-layer-scale {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 2px;
    color: var(--ui-text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.source-layer-scale i {
    height: 1px;
    background: linear-gradient(90deg, #f97316, #fed7aa);
}

.source-layer-list {
    max-height: none;
    min-height: 0;
    flex: 1;
    padding: 8px 10px 14px;
}

.source-layer-row {
    display: grid;
    min-height: 76px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 7px;
    padding: 9px;
    border-color: var(--ui-border);
    background: #fff;
}

.source-layer-row.active {
    border-color: #fb923c;
    background: #fff7ed;
    box-shadow: inset 3px 0 0 #f97316;
}

.source-layer-select {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
}

.source-layer-select strong {
    color: var(--ui-text);
    font-size: 13px;
}

.source-layer-select small {
    margin-top: 5px;
    color: var(--ui-text-muted);
    font-size: 10px;
}

.source-type-mark {
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid #fed7aa;
    border-radius: 9px;
    background: #fff7ed;
    color: #c2410c;
}

.source-type-mark.source-type-image {
    background: #f3f4f6;
}

.source-type-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.source-type-mark canvas[data-source-layer-chroma-canvas] {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #f3f4f6;
    background-image:
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

.source-type-mark canvas[data-source-layer-chroma-canvas][hidden] {
    display: none !important;
}

.source-type-mark.is-image-missing::after {
    content: attr(data-source-layer-fallback);
    color: #c2410c;
    font-size: 8px;
    font-weight: 800;
}

.source-layer-actions {
    display: grid;
    grid-template-columns: repeat(4, 36px);
    justify-content: end;
    gap: 7px;
}

.source-layer-actions form {
    display: flex;
}

.layer-order-button,
.layer-state-button,
.layer-lock-button {
    display: grid;
    width: 36px;
    min-height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.layer-order-button:hover,
.layer-state-button:hover,
.layer-lock-button:hover {
    border-color: #fb923c;
    background: #fff7ed;
    color: #c2410c;
}

.layer-order-button:disabled,
.layer-state-button:disabled,
.layer-lock-button:disabled {
    cursor: wait;
    opacity: .55;
}

.layer-order-button svg,
.layer-state-button svg,
.layer-lock-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.layer-state-button.on {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
}

.layer-lock-button.on {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.layer-state-button .icon-visible,
.layer-lock-button .icon-locked {
    display: none;
}

.layer-state-button.on .icon-visible,
.layer-lock-button.on .icon-locked {
    display: block;
}

.layer-state-button.on .icon-hidden,
.layer-lock-button.on .icon-unlocked {
    display: none;
}

.scene-inspector.panel {
    min-width: 0;
    overflow: hidden auto;
}

.source-properties-panel {
    min-height: 100%;
}

.scene-composer {
    min-height: 780px;
}

.scene-canvas-shell {
    min-height: 680px;
    background:
        linear-gradient(45deg, #eceff3 25%, transparent 25%),
        linear-gradient(-45deg, #eceff3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eceff3 75%),
        linear-gradient(-45deg, transparent 75%, #eceff3 75%),
        #f8fafc;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.scene-program-canvas {
    background: #111827;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .18);
}

.scene-program-canvas::before {
    opacity: .08;
}

.scene-source.is-hidden {
    visibility: hidden;
    opacity: 0 !important;
    pointer-events: none;
}

.scene-source.is-locked .resize-handle {
    display: none;
}

.scene-source-content > img,
.scene-source-content .scene-media-preview > img,
.scene-source-content .scene-media-preview > video,
.scene-chroma-canvas {
    display: block;
}

.scene-source-content .scene-media-preview > img[hidden],
.scene-source-content .scene-media-preview > video[hidden] {
    display: none !important;
}

.scene-media-preview.is-awaiting-preview {
    background:
        radial-gradient(circle at 50% 42%, rgba(249, 115, 22, .13), transparent 34%),
        linear-gradient(145deg, #f8fafc, #eef2f7);
}

.scene-media-preview.is-awaiting-preview .scene-media-fallback {
    opacity: 1;
    color: rgba(154, 52, 18, .62);
}

.scene-media-preview.is-transparent-placeholder {
    background: transparent;
}

.scene-media-preview.is-transparent-placeholder .scene-media-fallback {
    color: rgba(255, 255, 255, .58);
    text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

.scene-media-preview.is-transparent-placeholder .scene-media-badge {
    right: 7%;
    bottom: 4%;
    left: 7%;
    border-color: rgba(255, 255, 255, .45);
    background: rgba(17, 24, 39, .72);
}

.scene-playlist-preview .scene-media-fallback {
    position: relative;
    z-index: 2;
    display: grid;
    max-width: 78%;
    gap: 7px;
    padding: 12px 14px;
    border: 1px solid rgba(249, 115, 22, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    color: #9a3412;
    text-align: center;
}

.scene-playlist-preview .scene-media-fallback[hidden] {
    display: none !important;
}

.scene-playlist-preview .scene-media-fallback b {
    color: #9a3412;
    font-size: clamp(8px, 1vw, 11px);
    letter-spacing: .08em;
}

.scene-playlist-preview .scene-media-fallback small {
    margin: 0;
    color: #7c4a35;
    font-size: clamp(7px, .85vw, 9px);
    line-height: 1.4;
}

.scene-playlist-preview.is-preview-loading .scene-media-fallback {
    border-color: rgba(59, 130, 246, .28);
    color: #1d4ed8;
}

.scene-playlist-preview.is-preview-loading .scene-media-fallback b {
    color: #1d4ed8;
}

.scene-playlist-preview.is-transparent-placeholder:is(.is-preview-loading, .is-preview-unavailable, .is-preview-error) {
    background:
        radial-gradient(circle at 50% 42%, rgba(249, 115, 22, .13), transparent 34%),
        linear-gradient(145deg, #f8fafc, #eef2f7);
}

[data-scene-playlist-preview-control][hidden] {
    display: none !important;
}

.source-playlist-preview-control {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fffaf5;
}

.source-playlist-preview-control > label {
    display: grid;
    gap: 6px;
}

.source-playlist-preview-control > small {
    color: #7c6f67;
    font-size: 9px;
    line-height: 1.45;
}

.source-playlist-preview-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 9px 8px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: 9px;
    line-height: 1.4;
}

.source-playlist-preview-status.is-ready {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.source-playlist-preview-status.is-loading {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.source-playlist-preview-status:is(.is-thumbnail-only, .is-unavailable) {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.source-playlist-preview-status.is-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.source-playlist-preview-status button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #fdba74;
    border-radius: 7px;
    background: #fff;
    color: #c2410c;
    font: inherit;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
}

.source-playlist-preview-status button:hover {
    border-color: #f97316;
    background: #fff7ed;
}

.source-playlist-preview-status button:focus-visible,
.source-playlist-preview-control select:focus-visible {
    outline: 3px solid rgba(249, 115, 22, .2);
    outline-offset: 2px;
}

@media (max-width: 1440px) {
    .scene-studio-grid {
        grid-template-columns: minmax(290px, 320px) minmax(430px, 1fr) minmax(300px, 330px);
    }
}

@media (max-width: 1220px) {
    .scene-studio-grid {
        grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    }

    .scene-inspector.panel {
        grid-column: 1 / -1;
        max-height: none;
    }
}

@media (max-width: 780px) {
    .scene-studio-grid {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .scene-rail {
        max-height: none;
    }

    .scene-list {
        display: grid;
        max-height: 220px;
        overflow: auto;
    }

    .scene-list-item {
        flex: initial;
    }

    .source-layer-list {
        max-height: 420px;
    }

    .scene-composer {
        min-height: 0;
    }

    .scene-canvas-shell {
        min-height: 590px;
    }
}

/* Media factory had a separate brown palette; normalize it to the shared theme. */
.media-factory,
.media-factory-head h1,
.media-card-title strong,
.media-product-preview strong,
.media-job > strong,
.media-asset-copy strong {
    color: var(--ui-text);
}

.media-factory-head p,
.media-card-title small,
.media-source-drop small,
.media-product-preview em,
.media-auto-add small,
.media-field > small,
.media-job > small,
.media-credit-strip small,
.media-asset-copy p,
.media-empty,
.media-queue-empty,
.media-library-empty {
    color: var(--ui-text-muted);
}

.media-shop-picker span,
.media-product-preview small,
.media-card-title > span,
.media-source-drop b,
.media-library-head > b,
.media-asset-copy small {
    color: var(--ui-orange-hover);
}

.media-model-locks {
    border: 1px solid #fed7aa;
    background: var(--ui-orange-soft);
    color: var(--ui-text);
}

.media-model-locks small,
.media-model-locks i {
    color: var(--ui-orange-hover);
}

.media-credit-strip {
    border-color: #fdba74;
    background: var(--ui-orange-soft);
}

.media-credit-strip > div {
    border-color: #fdba74;
}

.media-generate-button small {
    color: #ffffff;
}

.media-card-title > b,
.media-job header span {
    color: var(--ui-text-muted);
}

.media-job footer button,
.media-asset footer button,
.media-asset footer a {
    color: var(--ui-orange-hover);
}

/* Later-loaded automation and wallet styles used text that was too pale. */
.automation-summary small,
.automation-shop-tabs small,
.automation-not-configured,
.automation-rule-config span,
.automation-history-head > span,
.automation-history-empty,
.automation-event-list small,
.automation-shop-checks small,
.automation-enabled small,
.automation-field small,
.wallet-overview small,
.wallet-section-head > span,
.admin-section-head > span {
    color: var(--ui-text-muted);
}

.automation-shop-bar,
.automation-rule-config,
.admin-health-list article,
.admin-user-metrics > div {
    background: var(--ui-surface-soft);
}

/* Admin follows the same white/orange system instead of a separate dark sidebar. */
.admin-body {
    --admin-sidebar: var(--ui-surface);
    --admin-sidebar-soft: var(--ui-surface-soft);
    --admin-orange: var(--ui-orange);
    --admin-border: var(--ui-border);
    --admin-muted: var(--ui-text-muted);
}

.admin-sidebar {
    border-right: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
}

.admin-brand {
    border-bottom-color: var(--ui-border);
    color: var(--ui-text);
}

.admin-brand small,
.admin-sidebar nav p,
.admin-sidebar-status small {
    color: var(--ui-text-muted);
}

.admin-sidebar nav p {
    color: #7c2d12;
}

.admin-sidebar nav a {
    color: var(--ui-text-secondary);
}

.admin-sidebar nav a:hover {
    background: var(--ui-orange-soft);
    color: var(--ui-orange-hover);
}

.admin-sidebar-status {
    border-color: var(--ui-border);
    background: var(--ui-surface-soft);
}

.admin-topbar {
    border-bottom-color: var(--ui-border);
    background: rgba(255, 255, 255, .97);
}

.admin-top-actions form button:hover {
    border-color: var(--ui-orange);
    background: var(--ui-orange-soft);
    color: var(--ui-orange-hover);
}

.admin-page-heading .eyebrow,
.admin-grok-device-picker span,
.admin-grok-account-eyebrow,
.admin-grok-provider-card > span {
    color: var(--ui-orange-hover);
}

.admin-empty,
.wallet-empty {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-soft);
}

.admin-own-password > div > small,
.admin-media-price-panel label > small,
.admin-price-card label > small,
.admin-grok-provider-card > div:nth-child(2) > span,
.admin-grok-core-card > span,
.admin-grok-core-card dt,
.admin-grok-account dt,
.admin-grok-account header small,
.admin-grok-section-head > span {
    color: var(--ui-text-muted);
}

.admin-grok-provider-mark > span,
.admin-grok-account-icon {
    color: var(--ui-orange-hover);
}

.playlist-product-cell {
    min-width: 280px;
}

.playlist-product-view {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.playlist-product-view > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.playlist-product-view strong,
.playlist-product-view small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-product-view strong {
    color: var(--ui-text);
    font-size: 12px;
}

.playlist-product-view small {
    color: var(--ui-text-muted);
    font-size: 10px;
}

.playlist-product-view.is-attached small {
    color: #16734b;
}

.playlist-product-thumb {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    background: var(--ui-surface-soft);
}

.playlist-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-product-thumb i {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ui-border-strong);
    border-radius: 4px;
}

.playlist-product-editor {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.playlist-product-editor select {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
}

.playlist-product-editor button {
    min-height: 44px;
}

.playlist-remove-cell {
    width: 170px;
    text-align: right;
}

.playlist-remove-cell form {
    display: flex;
    justify-content: flex-end;
}

.playlist-remove-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff;
    color: #b91c1c;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
}

.playlist-remove-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.playlist-remove-button:hover:not(:disabled) {
    border-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

.playlist-remove-button:disabled {
    cursor: wait;
    opacity: .65;
}

.admin-media-permission-form {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: var(--ui-orange-soft);
}

.admin-media-permission-heading {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-media-permission-heading > div {
    display: grid;
    gap: 3px;
}

.admin-media-permission-heading strong {
    color: var(--ui-text);
}

.admin-media-permission-heading small {
    color: var(--ui-text-muted);
    line-height: 1.45;
}

.admin-media-permission-heading > span {
    color: var(--ui-orange-hover);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-permission-option {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
    cursor: pointer;
}

.admin-permission-option input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    accent-color: var(--ui-orange);
}

.admin-permission-option > span {
    display: grid;
    gap: 3px;
}

.admin-permission-option strong {
    color: var(--ui-text);
    font-size: 12px;
}

.admin-permission-option small {
    color: var(--ui-text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.admin-media-permission-form > button {
    min-height: 64px;
}

@media (max-width: 760px) {
    .workspace,
    .admin-workspace {
        background: var(--ui-page);
    }

    .playlist-product-editor,
    .admin-media-permission-form {
        grid-template-columns: 1fr;
    }

    .admin-media-permission-heading,
    .admin-media-permission-form > button {
        grid-column: auto;
    }

    .admin-media-permission-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/* Readability pass shared by the workspace, admin and authentication pages. */
body,
button,
input,
select,
textarea {
    font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
}

body {
    font-size: 15px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.page-head h1,
.admin-page-heading h1,
.panel-head h2 {
    font-family: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", sans-serif;
}

.brand strong { font-size: 15px; }
.brand small { font-size: 9px; }
.nav-label { font-size: 10px; }
.nav-item { font-size: 13px; }
.sidebar-foot strong { font-size: 12px; }
.sidebar-foot small { font-size: 10px; }
.topbar-title strong { font-size: 15px; }
.crumb { font-size: 11px; }
.credit-pill span { font-size: 11px; }
.credit-pill strong { font-size: 13px; }
.account-chip strong { font-size: 12px; }
.account-chip small { font-size: 9px; }
.eyebrow { font-size: 10px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; }
.status-badge { font-size: 12px; }
.metric-grid article > span { font-size: 12px; }
.metric-grid article > small { font-size: 10px; }
.panel-head > a,
.text-button { font-size: 11px; }
th { font-size: 10px; }
td { font-size: 12px; }
td small { font-size: 10px; }
.state { font-size: 9px; }
.mini-state { font-size: 10px; }
.live-chip { font-size: 9px; }

/* Live console keeps compact density, but no longer relies on 7-9px labels. */
.live-console {
    font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
}

.live-profile-picker select { font-size: 14px; }
.console-chip { font: 700 12px/1 "Aptos", "Segoe UI", sans-serif; }
.console-clock { font: 700 12px/1 "Cascadia Mono", Consolas, monospace; }
.console-panel-title { font: 750 11px/1.2 "Aptos", "Segoe UI", sans-serif; }
.console-button { font-size: 11px; }
.playlist-actions,
.playlist-switches em { font-size: 11px; }
.console-table { font-size: 10px; }
.console-table th { font-size: 10px; }
.console-table td { font-size: 11px; }
.live-status-list div { font-size: 12px; }
.panel-state,
.stats-live-state,
.live-scene-active { font-size: 9px; }
.pinned-product-copy { font-size: 10px !important; }
.pinned-product-copy strong { font-size: 11px; }
.pin-feedback { font-size: 10px; }
.script-copy { font-size: 11px; }
.script-copy strong { font-size: 11px; }
.quick-grid button,
.quick-grid a { font-size: 11px; line-height: 1.25; }
.quick-feedback { font-size: 10px; }
.stats-panel .live-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 6px;
    padding: 14px 10px 10px;
}
.live-stat-grid strong { font: 800 16px/1 "Cascadia Mono", Consolas, monospace; }
.live-stat-grid span { margin-top: 6px; font-size: 10px; }
.live-trend-head { font: 700 9px/1.2 "Aptos", "Segoe UI", sans-serif; }
.trend-empty { font-size: 9px; }
.live-trend-foot { font: 500 8px/1 "Cascadia Mono", Consolas, monospace; }
.shopee-preview-status { font: 700 8px/1 "Aptos", "Segoe UI", sans-serif; }
.preview-panel .program-stage {
    padding: 4px;
}
.preview-panel .program-phone {
    height: auto;
    max-height: none;
    align-self: stretch;
    justify-self: center;
    border-radius: 6px;
}
.live-scene-summary strong { font-size: 12px; }
.live-scene-summary small { font-size: 9px; }
.live-scene-count { font-size: 9px; }
.live-scene-count strong { font-size: 9px; }
.live-source-mark { font-size: 8px; }
.live-source-copy strong { font-size: 10px; }
.live-source-copy small { font-size: 8px; }

@media (max-width: 760px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }

    .console-panel-title { font-size: 12px; }
    .console-table { font-size: 11px; }
}

/* Real-time media lane inside the live playlist panel. */
.priority-lane-monitor {
    border-color: #fed7aa;
    background: linear-gradient(135deg, #fffaf5, #fff7ed);
    color: #1f2937;
}
.priority-lane-pulse { border-color: #fdba74; background: #fff; }
.priority-lane-monitor.is-active .priority-lane-pulse i { background: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .12); }
.priority-lane-copy small,
.priority-lane-next small,
.priority-lane-metrics small { color: #9a5b36; }
.priority-lane-copy strong,
.priority-lane-next strong { color: #1f2937; }
.priority-lane-copy em,
.priority-lane-next span { color: #6b7280; }
.priority-lane-kind { border-color: #fed7aa; background: #fff; color: #9a3412; }
.priority-lane-monitor.kind-product .priority-lane-kind { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.priority-lane-monitor.kind-rotation .priority-lane-kind { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.priority-lane-monitor.kind-reply .priority-lane-kind { border-color: #fecaca; background: #fff1f2; color: #b91c1c; }
.priority-lane-metrics { border-color: #fed7aa; background: #fff; }
.priority-lane-metrics > span { border-left-color: #ffedd5; }
.priority-lane-metrics b { color: #7c2d12; }
.priority-lane-next { border-left-color: #fed7aa; }
@media (max-width: 980px) { .priority-lane-next { border-top-color: #fed7aa; } }

/* Keep completed vertical videos fully visible and make destructive actions reliable. */
.media-asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    align-items: start;
    gap: 18px;
}

.media-asset {
    grid-template-rows: auto auto auto;
    min-width: 0;
    border-color: #fed7aa;
    box-shadow: 0 10px 28px rgba(124, 45, 18, .07);
}

.media-video-shell {
    display: grid;
    width: 100%;
    max-height: none;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #090909;
}

.media-video-shell video {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    background: #090909;
}

.media-video-shell > span {
    z-index: 2;
    pointer-events: none;
}

.media-asset-copy {
    align-content: start;
}

.media-asset footer {
    align-items: center;
    padding: 12px;
    border-top: 1px solid #ffedd5;
    background: #fffaf5;
}

.media-asset-state {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.media-added.is-error {
    color: #b91c1c;
}

.media-asset footer .media-delete-button {
    display: inline-flex;
    min-width: 112px;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #fecaca;
    border-radius: 11px;
    padding: 10px 13px;
    background: #fff1f2;
    color: #b91c1c;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.media-asset footer .media-delete-button:hover {
    border-color: #fca5a5;
    background: #ffe4e6;
    color: #991b1b;
}

.media-asset footer .media-delete-button:focus-visible {
    outline: 3px solid rgba(239, 68, 68, .22);
    outline-offset: 2px;
}

.media-asset footer .media-delete-button:disabled {
    cursor: wait;
    opacity: .6;
}

.media-delete-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.media-delete-error {
    margin: 0;
    padding: 10px 12px;
    border-top: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .media-asset-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    }
}

@media (max-width: 520px) {
    .media-asset-grid {
        grid-template-columns: 1fr;
    }

    .media-asset footer {
        align-items: stretch;
        flex-direction: column;
    }

    .media-asset footer .media-delete-button {
        width: 100%;
    }
}

.shop-playlist-table .media-cell .playlist-media-safe-label {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    color: #64748b;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .01em;
    white-space: normal;
}