/* =========================================================
   Originfly Appearance Theme — Light / Dark (2026-09-19)
   Dark remains the default. Light mode is intentionally a portal-surface
   theme; media/review canvases stay dark for accurate viewing contrast.
   ========================================================= */
/* Phase 5B1 — migrated light-theme ownership from main.css.
   Kept before the existing theme body so historical theme.css overrides
   retain their previous cascade precedence. */
html[data-theme="light"] .script-line.is-reading { background:rgba(37,99,235,.08); box-shadow:inset 3px 0 #2563eb; }
html[data-theme="light"] .script-read-modal-body select { background:var(--of-light-surface); color:var(--of-light-text); border-color:var(--of-light-border); }
html[data-theme="light"] .script-read-language-status { background:var(--of-light-surface-soft); border-color:var(--of-light-border); }
html[data-theme="light"] .script-read-language-status span { color:#475569; }
html[data-theme="light"] .script-read-language-status.ok { background:#f0fdf4; border-color:var(--of-status-success-border); }
html[data-theme="light"] .script-read-language-status.ok b { color:var(--of-status-success-text); }
html[data-theme="light"] .script-read-language-status.missing { background:#fff1f2; border-color:#fecaca; }
html[data-theme="light"] .script-read-language-status.missing b { color:var(--of-status-danger-text); }

html[data-theme="light"] .script-workspace {
    --script-bg:#eef3f8; --script-panel:var(--of-light-surface-soft); --script-panel-2:var(--of-light-surface); --script-panel-3:var(--of-light-surface);
    --script-border:var(--of-light-border); --script-text:#172033; --script-muted:var(--of-light-text-muted); --script-accent:#2563eb;
    --script-paper:#fffdf8; --script-paper-text:var(--of-light-text); --script-paper-edge:#d6d3d1;
}
html[data-theme="light"] .script-menubar,html[data-theme="light"] .script-footer { background:var(--of-light-surface-soft); }
html[data-theme="light"] .script-widget-rail { background:var(--of-light-surface-raised); }
html[data-theme="light"] .script-widget-rail button.active { background:#dbeafe; color:#1d4ed8; }
html[data-theme="light"] .script-menu-dropdown { background:var(--of-light-surface); box-shadow:0 15px 38px rgba(15,23,42,.18); }
html[data-theme="light"] .script-header-action { background:var(--of-light-surface); color:#172033; border-color:var(--of-light-border); }
html[data-theme="light"] .script-header-action:hover { background:#eff6ff; border-color:#93c5fd; }
html[data-theme="light"] .script-editor-scroll { background:#e5ebf2; }
html[data-theme="light"] .script-editor-scroll.is-cards { background:#e8eef5; }
html[data-theme="light"] .script-type-button.active { background:#dbeafe; color:#1d4ed8; }
html[data-theme="light"] .script-mobile-type-action.active { background:#dbeafe; color:#1d4ed8; border-color:#60a5fa; }
html[data-theme="light"] .script-type-button:hover { background:#eff6ff; border-color:#60a5fa; color:#1d4ed8; }
html[data-theme="light"] .script-type-tooltip { background:#172033; color:#fff; border-color:#334155; }
html[data-theme="light"] .script-search-wrap input,html[data-theme="light"] .script-pad-wrap textarea,html[data-theme="light"] .script-notes-input,html[data-theme="light"] .script-selected-line-preview,html[data-theme="light"] .script-add-comment textarea,html[data-theme="light"] .script-beat-card textarea,html[data-theme="light"] .script-stat-grid>div,html[data-theme="light"] .script-all-comments button { background:var(--of-light-surface); color:#172033; }
html[data-theme="light"] .script-beat-card,html[data-theme="light"] .script-draft-card,html[data-theme="light"] .script-comment-card,html[data-theme="light"] .script-story-card { background:var(--of-light-surface); }
html[data-theme="light"] .script-story-card-body { color:var(--of-light-text-secondary); }
html[data-theme="light"] .script-card-sequence { background:#dbeafe; color:#1e3a8a; }
html[data-theme="light"] .script-scene-card-num { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
html[data-theme="light"] .script-outline-sequence { background:var(--of-light-surface); }
html[data-theme="light"] .script-stat-grid b { color:#1d4ed8; }
html[data-theme="light"] .script-modal { background:var(--of-light-surface-soft); color:#172033; border-color:var(--of-light-border); }
html[data-theme="light"] .script-modal-head,html[data-theme="light"] .script-modal-actions { border-color:#dbe2ea; }
html[data-theme="light"] .script-modal-head span { color:var(--of-light-text-muted); }
html[data-theme="light"] .script-modal-head button,html[data-theme="light"] .script-modal-actions button { background:var(--of-light-surface); color:#172033; border-color:var(--of-light-border); }
html[data-theme="light"] .script-modal-actions button.primary { background:#2563eb; color:#fff; border-color:#3b82f6; }
html[data-theme="light"] .script-modal-body label { color:#475569; }
html[data-theme="light"] .script-modal-body input,html[data-theme="light"] .script-modal-body textarea { background:var(--of-light-surface); color:var(--of-light-text); border-color:var(--of-light-border); }

/* Phase 5B2 — Script project dashboard / assignment-card light-theme ownership.
   Moved from main.css without changing declarations; kept before the existing
   theme body so historical theme.css overrides retain cascade precedence. */
html[data-theme="light"] .script-project-dashboard{background:var(--of-light-surface-raised);color:var(--of-light-text-strong)}
html[data-theme="light"] .script-add-assignment{background:var(--of-light-surface);border-color:#93c5fd;color:#1d4ed8}html[data-theme="light"] .script-add-assignment:hover{background:#eff6ff}
html[data-theme="light"] .script-list-empty{background:var(--of-light-surface);border-color:var(--of-light-border);color:var(--of-light-text-muted)}
html[data-theme="light"] .script-work-toggle{background:var(--of-light-surface);border-color:var(--of-light-border);color:#15803d}html[data-theme="light"] .script-work-toggle:hover{background:var(--of-light-surface-soft);border-color:#94a3b8}html[data-theme="light"] .script-work-toggle.is-running{color:#a16207}html[data-theme="light"] .script-work-progress-labels{color:var(--of-light-text-muted)}html[data-theme="light"] .script-work-track{background:#e2e8f0;border-color:var(--of-light-border)}html[data-theme="light"] .script-work-status{background:var(--of-light-surface-soft);border-color:var(--of-light-border);color:#475569}html[data-theme="light"] .script-work-status.is-running{background:#ecfdf5;border-color:var(--of-status-success-border);color:var(--of-status-success-text)}html[data-theme="light"] .script-work-status.is-retake{background:#fef2f2;border-color:var(--of-status-danger-border);color:#b91c1c}
html[data-theme="light"] .script-assignment-card{background:var(--of-light-surface);border-color:var(--of-light-border);box-shadow:0 4px 14px rgba(15,23,42,.08)}
html[data-theme="light"] .script-assignment-name{color:var(--of-light-text-strong)}html[data-theme="light"] .script-assignment-sub{color:var(--of-light-text-muted)}
html[data-theme="light"] .script-assignment-thumb{background:var(--of-light-surface-soft);border-color:var(--of-light-border);color:var(--of-light-text-secondary)}
html[data-theme="light"] .script-item-writer,html[data-theme="light"] .script-item-writer-select{background:var(--of-light-surface-soft);border-color:var(--of-light-border);color:var(--of-light-text-strong)}
html[data-theme="light"] .script-assignment-summary:hover{background:var(--of-light-surface-soft)}html[data-theme="light"] .script-assignment-action,html[data-theme="light"] .script-assignment-expand{background:var(--of-light-surface);border-color:var(--of-light-border);color:var(--of-light-text-secondary)}html[data-theme="light"] .script-assignment-action:hover:not(:disabled),html[data-theme="light"] .script-assignment-expand:hover{background:var(--of-light-surface-raised);border-color:#94a3b8;color:var(--of-light-text-strong)}html[data-theme="light"] .script-input-action{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}html[data-theme="light"] .script-download-action{background:#f0fdf4;border-color:#86efac;color:#166534}html[data-theme="light"] .script-view-action{background:#7c3aed;border-color:#7c3aed;color:#fff}html[data-theme="light"] .script-view-action:hover:not(:disabled){background:#6d28d9;border-color:#6d28d9;color:#fff}html[data-theme="light"] .script-assignment-expand.is-expanded{background:#e2e8f0;color:var(--of-light-text-strong)}
html[data-theme="light"] .script-assignment-versions{background:var(--of-light-surface-soft);border-color:#e2e8f0}
html[data-theme="light"] .script-version-row{background:var(--of-light-surface);border-color:#d7dee8}html[data-theme="light"] .script-version-meta b{color:var(--of-light-text-strong)}html[data-theme="light"] .script-version-meta span{color:var(--of-light-text-muted)}html[data-theme="light"] .script-version-delete{background:#fff1f2;border-color:#fca5a5;color:#991b1b}html[data-theme="light"] .script-version-delete:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}html[data-theme="light"] .script-version-add{background:var(--of-light-surface);border-color:#60a5fa;color:#1d4ed8}html[data-theme="light"] .script-version-add:hover{background:#eff6ff;border-color:#2563eb;color:#1e40af}
html[data-theme="light"] .script-item-modal{background:var(--of-light-surface-soft);border-color:var(--of-light-border);color:var(--of-light-text-strong)}html[data-theme="light"] .script-item-modal-close{background:var(--of-light-surface);border-color:var(--of-light-border);color:var(--of-light-text-secondary)}html[data-theme="light"] .script-item-modal label:not(.script-item-thumb-picker):not(.script-item-input-picker){color:#475569}html[data-theme="light"] .script-item-modal input[type=text],html[data-theme="light"] .script-item-modal input[type=number],html[data-theme="light"] .script-item-modal select{background:var(--of-light-surface);border-color:var(--of-light-border);color:var(--of-light-text-strong)}html[data-theme="light"] .script-item-thumb-picker>div{background:var(--of-light-surface);border-color:#94a3b8}
html[data-theme="light"] .script-item-input-label{color:#475569}html[data-theme="light"] .script-item-input-picker{background:var(--of-light-surface);border-color:#94a3b8;color:#1e3a8a}html[data-theme="light"] .script-item-input-picker:hover{background:#eff6ff;border-color:#60a5fa}html[data-theme="light"] .script-item-input-file{background:var(--of-light-surface);border-color:#d7dee8}html[data-theme="light"] .script-item-input-file span{color:var(--of-light-text-strong)}html[data-theme="light"] .script-item-input-button{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}html[data-theme="light"] .script-input-download-row{background:var(--of-light-surface);border-color:#d7dee8}html[data-theme="light"] .script-input-download-row b{color:var(--of-light-text-strong)}
html[data-theme="light"] .script-version-badge{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
html[data-theme="light"] .script-assignment-card.is-desktop,
html[data-theme="light"] .script-assignment-card.is-mobile{background:var(--of-light-surface);border-color:var(--of-light-border);box-shadow:var(--of-shadow-surface-small)}
html[data-theme="light"] .script-desktop-assignment-row,
html[data-theme="light"] .script-mobile-assignment-header{background:var(--of-light-surface)}
html[data-theme="light"] .script-desktop-assignment-row:hover{background:var(--of-light-surface-soft)}
html[data-theme="light"] .script-assignment-card.is-desktop .script-assignment-thumb,
html[data-theme="light"] .script-assignment-card.is-mobile .script-assignment-thumb{background:var(--of-light-surface-soft);border-color:var(--of-light-border);color:var(--of-light-text-secondary)}
html[data-theme="light"] .script-assignment-card .script-assignment-name{color:var(--of-light-text-strong)}
html[data-theme="light"] .script-type-badge{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
html[data-theme="light"] .script-identity-mandays{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
html[data-theme="light"] .script-stage-badge{background:var(--of-light-surface);border-color:#94a3b8;color:var(--of-light-text-strong)}html[data-theme="light"] .script-stage-badge::after{background:var(--of-light-surface);border-color:#94a3b8}html[data-theme="light"] .script-stage-badge small{color:var(--of-light-text-muted)}
html[data-theme="light"] .script-stage-panel{background:var(--of-light-surface-soft);border-color:var(--of-light-border)}html[data-theme="light"] .script-stage-panel .script-work-row,html[data-theme="light"] .script-mobile-assignment-body .script-stage-writer,html[data-theme="light"] .script-mobile-assignment-body .script-assignment-actions{border-color:#d7dee8}
html[data-theme="light"] .script-writer-picker{background:var(--of-light-surface);border-color:var(--of-light-border);color:var(--of-light-text-strong)}html[data-theme="light"] .script-writer-picker .script-item-writer-select{color:var(--of-light-text-strong)!important}
html[data-theme="light"] .script-mobile-assignment-body{background:var(--of-light-surface-soft);border-color:#e2e8f0}
html[data-theme="light"] .script-input-action{background:var(--of-light-surface);border-color:var(--of-light-border);color:#1d4ed8}html[data-theme="light"] .script-download-action{background:var(--of-light-surface);border-color:var(--of-light-border);color:#15803d}html[data-theme="light"] .script-view-action{background:#7e22ce;border-color:#7e22ce;color:#fff}
html[data-theme="light"] .script-assignment-card.is-desktop .script-assignment-versions,html[data-theme="light"] .script-assignment-card.is-mobile .script-assignment-versions{background:var(--of-light-surface-soft);border-color:#e2e8f0}
html[data-theme="light"] .script-assignment-card.is-desktop .script-desktop-writer-control .script-writer-picker {
    background:var(--of-light-surface-soft); border-color:#c2cdda; color:var(--of-light-text-strong);
}
html[data-theme="light"] .script-assignment-card.is-desktop .script-desktop-writer-control .script-item-writer-select { color:var(--of-light-text-strong)!important; }

/* Phase 5B3 — Review / Retake light-theme ownership.
   Moved from main.css without changing declarations; kept before the existing
   theme body so historical theme.css overrides retain cascade precedence. */
html[data-theme="light"] .script-review-banner.is-approved{background:#ecfdf5;border-color:var(--of-status-success-border);color:var(--of-status-success-text)}html[data-theme="light"] .script-review-banner.is-retake{background:#fef2f2;border-color:var(--of-status-danger-border);color:var(--of-status-danger-text)}
html[data-theme="light"] .script-version-status.status-approved{background:#ecfdf5;color:var(--of-status-success-text)}html[data-theme="light"] .script-version-status.status-retake{background:#fef2f2;color:var(--of-status-danger-text)}
html[data-theme="light"] .script-retake-review-modal textarea{background:var(--of-light-surface);color:var(--of-light-text-strong);border-color:var(--of-light-border)}
html[data-theme="light"] .review-frame-stepper{background:#edf3fb;border-color:#b8c8dd;color:#142c49}
html[data-theme="light"] .review-frame-stepper select{background:var(--of-light-surface);color:#1b2b3f;border-color:#9eafc8}

/* Phase 5B4 — Animation light-theme ownership.
   Moved from main.css without changing declarations; kept before the existing
   theme body so historical theme.css overrides retain cascade precedence. */
html[data-theme="light"] .animation-shot-status-legend { color: var(--of-light-text-secondary); }
html[data-theme="light"] #animation-expanded-player { background: #eef2f6; color: var(--of-light-text-strong); }
html[data-theme="light"] .animation-expanded-header { background: #e2e8f0; border-color: #94a3b8; }
html[data-theme="light"] .animation-expanded-close { background: var(--of-light-surface); border-color: #94a3b8; color: #991b1b; }
html[data-theme="light"] .animation-compare-button { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
html[data-theme="light"] .animation-compare-button[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
html[data-theme="light"] .animation-compare-header { background: #eff6ff; border-color: #94a3b8; color: var(--of-light-text-strong); }
html[data-theme="light"] .animation-compare-header button,
html[data-theme="light"] .animation-compare-header select { background: var(--of-light-surface); border-color: #94a3b8; color: var(--of-light-text-strong); }
html[data-theme="light"] .animation-retake-image { background: var(--of-light-surface-soft); border-color: #e7a3a3; }
html[data-theme="light"] .animation-retake-image figcaption { color: var(--of-status-danger-text); }
html[data-theme="light"] .animation-retake-image figcaption span { color: var(--of-light-text-secondary); }
html[data-theme="light"] .animation-retake-image-download { background: #e2e8f0; color: var(--of-light-text-strong); border-color: #b8c8dd; }
html[data-theme="light"] .animation-image-notes { color: var(--of-light-text-strong); border-color: var(--of-light-border); }
html[data-theme="light"] .animation-image-note { border-color: var(--of-light-border); }
html[data-theme="light"] .animation-image-note-author span,
html[data-theme="light"] .animation-image-note time,
html[data-theme="light"] .animation-image-note-empty,
html[data-theme="light"] .animation-image-note-form textarea::placeholder { color: #475569; }
html[data-theme="light"] .animation-image-note-form textarea { background: var(--of-light-surface); color: var(--of-light-text-strong); border-color: #94a3b8; }

:root {
    --of-theme-transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] {
    color-scheme: light;
    /* Phase 5C2A — conservative light-theme design-token foundation.
       These values are exact aliases of existing colors; no visual change intended. */
    --of-light-page-bg:#eef2f7;
    --of-light-surface:#ffffff;
    --of-light-surface-soft:#f8fafc;
    --of-light-surface-raised:#f1f5f9;
    --of-light-text:#111827;
    --of-light-text-strong:#0f172a;
    --of-light-text-secondary:#334155;
    --of-light-text-muted:#64748b;
    --of-light-border:#cbd5e1;
    /* Phase 5C3B — common light-theme semantic status tokens.
       Exact aliases of the established palette; no visual change intended. */
    --of-status-info-bg:#dbeafe;
    --of-status-info-text:#1e40af;
    --of-status-info-border:#93c5fd;
    --of-status-success-bg:#dcfce7;
    --of-status-success-text:#166534;
    --of-status-success-border:#86efac;
    --of-status-warning-bg:#fef3c7;
    --of-status-warning-text:#92400e;
    --of-status-warning-border:#fcd34d;
    --of-status-danger-bg:#fee2e2;
    --of-status-danger-text:#991b1b;
    --of-status-danger-border:#fca5a5;
    /* Phase 5D3B — exact light-theme focus-ring aliases.
       Keep strong and standard rings separate; no visual shadow change intended. */
    --of-shadow-focus-strong:0 0 0 3px rgba(37,99,235,.14);
    --of-shadow-focus:0 0 0 2px rgba(37,99,235,.18);
    /* Phase 5D3C — exact light-theme elevation aliases.
       Keep dialog/sheet elevation separate from subtle row/card elevation. */
    --of-shadow-dialog:0 24px 70px rgba(15,23,42,.22);
    --of-shadow-surface-subtle:0 1px 2px rgba(15,23,42,.04);
    /* Phase 5D3D1 — exact small raised-surface elevation alias.
       Shared by the audited compact card/control surfaces; no visual change intended. */
    --of-shadow-surface-small:0 4px 12px rgba(15,23,42,.08);
    /* Phase 5D3D2 — exact standard colored-action hover-ring alias.
       Keep the stronger .35 hover ring separate; no visual change intended. */
    --of-shadow-action-hover:inset 0 0 0 2px rgba(255,255,255,.3);
    /* Phase 5D3D3 — exact stronger colored-action hover-ring alias.
       Keep this .35 variant separate from the standard .3 ring; no visual change intended. */
    --of-shadow-action-hover-strong:inset 0 0 0 2px rgba(255,255,255,.35);
}

/* Account Settings appearance control */
.account-theme-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:104px;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--of-radius-2xl);
    background:rgba(0,0,0,.25);
}
.account-theme-copy { min-width:0; }
.account-theme-title { color:#fff; font-size:14px; font-weight:900; }
.account-theme-subtitle { margin-top:4px; color:#9ca3af; font-size:11px; line-height:1.4; font-weight:600; }
.account-theme-switch { position:relative; width:142px; height:54px; flex:0 0 142px; cursor:pointer; user-select:none; }
.account-theme-switch input { position:absolute; opacity:0; pointer-events:none; }
.account-theme-track {
    position:absolute;
    inset:0;
    border-radius:var(--of-radius-pill);
    border:1px solid rgba(255,255,255,.14);
    background:#15181d;
    box-shadow:inset 0 2px 7px rgba(0,0,0,.35);
    transition:var(--of-theme-transition);
}
.account-theme-thumb {
    position:absolute;
    top:5px;
    left:5px;
    width:62px;
    height:42px;
    border-radius:var(--of-radius-pill);
    background:linear-gradient(180deg,#fff,#dfe4ea);
    box-shadow:0 4px 12px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.85);
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
    z-index:1;
}
.account-theme-switch input:checked ~ .account-theme-track .account-theme-thumb { transform:translateX(68px); }
.account-theme-option {
    position:absolute;
    top:0;
    bottom:0;
    width:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    z-index:2;
    font-size:11px;
    font-weight:900;
    transition:color .18s ease;
}
.account-theme-option-light { left:0; color:#f59e0b; }
.account-theme-option-dark { right:0; color:#cbd5e1; }
.account-theme-switch input:not(:checked) ~ .account-theme-option-light { color:#a16207; }
.account-theme-switch input:not(:checked) ~ .account-theme-option-dark { color:#64748b; }
.account-theme-switch input:checked ~ .account-theme-option-light { color:#94a3b8; }
.account-theme-switch input:checked ~ .account-theme-option-dark { color:#111827; }
.account-theme-switch input:focus-visible ~ .account-theme-track { outline:2px solid #60a5fa; outline-offset:3px; }

@media (max-width: 520px) {
    .account-theme-card { align-items:flex-start; flex-direction:column; }
    .account-theme-switch { align-self:flex-end; flex-basis:54px; }
}

/* ---------- Portal light palette ---------- */
html[data-theme="light"] body {
    background:var(--of-light-page-bg) !important;
    color:var(--of-light-text);
}

html[data-theme="light"] .account-settings-modal,
html[data-theme="light"] [class~="bg-[#383838]"],
html[data-theme="light"] [class~="bg-[#3a3a3a]"],
html[data-theme="light"] [class~="bg-[#3b3b3b]"],
html[data-theme="light"] [class~="bg-[#3d3d3d]"],
html[data-theme="light"] [class~="bg-[#414141]"],
html[data-theme="light"] [class~="bg-[#444]"],
html[data-theme="light"] [class~="bg-[#444444]"],
html[data-theme="light"] [class~="bg-[#464646]"],
html[data-theme="light"] [class~="bg-[#4a4a4a]"],
html[data-theme="light"] [class~="bg-[#4d4d4d]"],
html[data-theme="light"] [class~="bg-[#555]"],
html[data-theme="light"] [class~="bg-[#5a5a5a]"] {
    background-color:var(--of-surface-strong,#e7edf4) !important;
}

html[data-theme="light"] [class~="bg-[#2a2a2a]"],
html[data-theme="light"] [class~="bg-[#2b2b2b]"],
html[data-theme="light"] [class~="bg-[#2d2d2d]"],
html[data-theme="light"] [class~="bg-[#2e2e2e]"],
html[data-theme="light"] [class~="bg-[#2f2f2f]"],
html[data-theme="light"] [class~="bg-[#303030]"],
html[data-theme="light"] [class~="bg-[#333]"],
html[data-theme="light"] [class~="bg-[#333333]"],
html[data-theme="light"] [class~="bg-[#343434]"],
html[data-theme="light"] [class~="bg-[#374151]"] {
    background-color:var(--of-surface-raised,#f0f4f8) !important;
}

html[data-theme="light"] [class~="bg-[#0f0f0f]"],
html[data-theme="light"] [class~="bg-[#101010]"],
html[data-theme="light"] [class~="bg-[#111]"],
html[data-theme="light"] [class~="bg-[#121212]"],
html[data-theme="light"] [class~="bg-[#141414]"],
html[data-theme="light"] [class~="bg-[#151515]"],
html[data-theme="light"] [class~="bg-[#171717]"],
html[data-theme="light"] [class~="bg-[#181818]"],
html[data-theme="light"] [class~="bg-[#191919]"],
html[data-theme="light"] [class~="bg-[#1a1a1a]"],
html[data-theme="light"] [class~="bg-[#1b1b1b]"],
html[data-theme="light"] [class~="bg-[#1d1d1d]"],
html[data-theme="light"] [class~="bg-[#1e1e1e]"],
html[data-theme="light"] [class~="bg-[#1f1f1f]"],
html[data-theme="light"] [class~="bg-[#202020]"],
html[data-theme="light"] [class~="bg-[#222]"],
html[data-theme="light"] [class~="bg-[#232323]"],
html[data-theme="light"] [class~="bg-[#242424]"],
html[data-theme="light"] [class~="bg-[#252525]"],
html[data-theme="light"] [class~="bg-[#262626]"],
html[data-theme="light"] [class~="bg-[#282828]"],
html[data-theme="light"] [class~="bg-[#292929]"],
html[data-theme="light"] [class~="bg-[#1f2937]"],
html[data-theme="light"] [class~="bg-[#202328]"],
html[data-theme="light"] [class~="bg-[#23262b]"],
html[data-theme="light"] [class~="bg-[#25282d]"] {
    background-color:var(--of-surface-base,#f8fafc) !important;
}

html[data-theme="light"] [class~="bg-black"] { background-color:var(--of-surface-input,#fff) !important; }
html[data-theme="light"] [class~="bg-black/10"],
html[data-theme="light"] [class~="bg-black/15"],
html[data-theme="light"] [class~="bg-black/20"],
html[data-theme="light"] [class~="bg-black/25"],
html[data-theme="light"] [class~="bg-black/30"],
html[data-theme="light"] [class~="bg-black/35"],
html[data-theme="light"] [class~="bg-black/40"],
html[data-theme="light"] [class~="bg-black/50"],
html[data-theme="light"] [class~="bg-black/55"] { background-color:var(--of-surface-tint,rgba(15,23,42,.055)) !important; }
html[data-theme="light"] [class~="bg-white/5"] { background-color:rgba(15,23,42,.035) !important; }
html[data-theme="light"] [class~="bg-white/10"] { background-color:rgba(15,23,42,.06) !important; }
html[data-theme="light"] [class~="bg-white/20"] { background-color:rgba(15,23,42,.10) !important; }

html[data-theme="light"] [class~="text-white"] { color:var(--of-text-main,#111827) !important; }
html[data-theme="light"] :is([class~="text-gray-100"], [class~="text-gray-200"]) { color:var(--of-text-main,#1f2937) !important; }
html[data-theme="light"] :is([class~="text-gray-300"], [class~="text-slate-300"]) { color:var(--of-text-secondary,#334155) !important; }
html[data-theme="light"] :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="text-gray-600"], [class~="text-gray-700"], [class~="text-slate-400"]) { color:var(--of-text-muted,#475569) !important; }

html[data-theme="light"] [class~="border-gray-400"],
html[data-theme="light"] [class~="border-gray-500"],
html[data-theme="light"] [class~="border-gray-600"],
html[data-theme="light"] [class~="border-gray-600/50"],
html[data-theme="light"] [class~="border-gray-600/70"],
html[data-theme="light"] [class~="border-gray-600/80"],
html[data-theme="light"] [class~="border-gray-700"],
html[data-theme="light"] [class~="border-gray-700/50"],
html[data-theme="light"] [class~="border-gray-700/80"],
html[data-theme="light"] [class~="border-gray-800"],
html[data-theme="light"] [class~="border-white/5"],
html[data-theme="light"] [class~="border-white/10"],
html[data-theme="light"] [class~="border-white/15"],
html[data-theme="light"] [class~="border-white/20"] { border-color:var(--of-light-border) !important; }

html[data-theme="light"] input:not([type="range"]):not([type="color"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    color:var(--of-light-text);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color:var(--of-text-muted,#475569) !important; opacity:1; }

/* Shared readable text palette. Soft badges use dark ink; solid actions
   define their own text color, including nested labels and hover states. */
html[data-theme="light"] :is([class~="text-blue-100"], [class~="text-blue-100/80"], [class~="text-blue-200"], [class~="text-blue-200/80"], [class~="text-blue-300"], [class~="text-blue-400"], [class~="text-blue-50"]) { color:var(--of-text-blue,#1e40af) !important; }
html[data-theme="light"] :is([class~="bg-blue-500/10"], [class~="bg-blue-500/15"], [class~="bg-blue-500/20"], [class~="bg-blue-500/5"], [class~="bg-blue-500/50"], [class~="bg-blue-600/10"], [class~="bg-blue-600/20"], [class~="bg-blue-600/25"], [class~="bg-blue-600/40"], [class~="bg-blue-900/20"], [class~="bg-blue-900/25"], [class~="bg-blue-900/30"], [class~="bg-blue-900/35"], [class~="bg-blue-900/40"], [class~="bg-blue-900/60"], [class~="bg-blue-950/10"], [class~="bg-blue-950/20"], [class~="bg-blue-950/30"], [class~="bg-blue-950/40"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-blue-400"], [class~="bg-blue-500"], [class~="bg-blue-500/70"], [class~="bg-blue-600"], [class~="bg-blue-600/80"], [class~="bg-blue-600/90"], [class~="bg-blue-700"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]) { --of-text-main:#fff; --of-text-secondary:#fff; --of-text-muted:#fff; --of-text-blue:#fff; --of-text-sky:#fff; --of-text-cyan:#fff; --of-text-indigo:#fff; --of-text-purple:#fff; --of-text-violet:#fff; --of-text-pink:#fff; --of-text-red:#fff; --of-text-orange:#fff; --of-text-amber:#fff; --of-text-yellow:#fff; --of-text-green:#fff; --of-text-emerald:#fff; --of-text-teal:#fff; background-color:#1d4ed8 !important; color:#fff !important; }
html[data-theme="light"] :is([class~="bg-blue-400"], [class~="bg-blue-500"], [class~="bg-blue-500/70"], [class~="bg-blue-600"], [class~="bg-blue-600/80"], [class~="bg-blue-600/90"], [class~="bg-blue-700"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]):hover { box-shadow:var(--of-shadow-action-hover); }
html[data-theme="light"] :is([class~="text-sky-100"], [class~="text-sky-200"]) { color:var(--of-text-sky,#075985) !important; }
html[data-theme="light"] :is([class~="bg-sky-500/10"], [class~="bg-sky-500/12"], [class~="bg-sky-500/20"], [class~="bg-sky-600/25"], [class~="bg-sky-950/10"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="text-cyan-200"], [class~="text-cyan-300"]) { color:var(--of-text-cyan,#155e75) !important; }
html[data-theme="light"] :is([class~="bg-cyan-900/40"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-indigo-950/30"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-indigo-500"], [class~="bg-indigo-600"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]) { --of-text-main:#fff; --of-text-secondary:#fff; --of-text-muted:#fff; --of-text-blue:#fff; --of-text-sky:#fff; --of-text-cyan:#fff; --of-text-indigo:#fff; --of-text-purple:#fff; --of-text-violet:#fff; --of-text-pink:#fff; --of-text-red:#fff; --of-text-orange:#fff; --of-text-amber:#fff; --of-text-yellow:#fff; --of-text-green:#fff; --of-text-emerald:#fff; --of-text-teal:#fff; background-color:#4338ca !important; color:#fff !important; }
html[data-theme="light"] :is([class~="bg-indigo-500"], [class~="bg-indigo-600"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]):hover { box-shadow:var(--of-shadow-action-hover); }
html[data-theme="light"] :is([class~="text-purple-100"], [class~="text-purple-200"], [class~="text-purple-300"], [class~="text-purple-400"], [class~="text-purple-50"]) { color:var(--of-text-purple,#6b21a8) !important; }
html[data-theme="light"] :is([class~="bg-purple-500/15"], [class~="bg-purple-600/20"], [class~="bg-purple-900/20"], [class~="bg-purple-900/30"], [class~="bg-purple-900/35"], [class~="bg-purple-900/40"], [class~="bg-purple-950/10"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-600/90"], [class~="bg-purple-700/80"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]) { --of-text-main:#fff; --of-text-secondary:#fff; --of-text-muted:#fff; --of-text-blue:#fff; --of-text-sky:#fff; --of-text-cyan:#fff; --of-text-indigo:#fff; --of-text-purple:#fff; --of-text-violet:#fff; --of-text-pink:#fff; --of-text-red:#fff; --of-text-orange:#fff; --of-text-amber:#fff; --of-text-yellow:#fff; --of-text-green:#fff; --of-text-emerald:#fff; --of-text-teal:#fff; background-color:#7e22ce !important; color:#fff !important; }
html[data-theme="light"] :is([class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-600/90"], [class~="bg-purple-700/80"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]):hover { box-shadow:var(--of-shadow-action-hover); }
html[data-theme="light"] :is([class~="text-violet-200"], [class~="text-violet-300"]) { color:var(--of-text-violet,#5b21b6) !important; }
html[data-theme="light"] :is([class~="bg-violet-500/5"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="text-pink-200"]) { color:var(--of-text-pink,#9d174d) !important; }
html[data-theme="light"] :is([class~="bg-pink-900/40"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="text-red-100"], [class~="text-red-200"], [class~="text-red-300"], [class~="text-red-300/40"], [class~="text-red-300/80"], [class~="text-red-400"], [class~="text-red-500"]) { color:var(--of-text-red,#991b1b) !important; }
html[data-theme="light"] :is([class~="bg-red-500/10"], [class~="bg-red-500/20"], [class~="bg-red-500/5"], [class~="bg-red-600/20"], [class~="bg-red-800/60"], [class~="bg-red-900/10"], [class~="bg-red-900/20"], [class~="bg-red-900/25"], [class~="bg-red-900/30"], [class~="bg-red-900/35"], [class~="bg-red-900/40"], [class~="bg-red-900/45"], [class~="bg-red-900/50"], [class~="bg-red-900/60"], [class~="bg-red-950/10"], [class~="bg-red-950/25"], [class~="bg-red-950/40"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-red-400"], [class~="bg-red-500"], [class~="bg-red-500/70"], [class~="bg-red-500/80"], [class~="bg-red-500/90"], [class~="bg-red-600"], [class~="bg-red-600/75"], [class~="bg-red-600/80"], [class~="bg-red-700"], [class~="bg-red-700/90"], [class~="bg-red-800"], [class~="bg-red-800/70"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]) { --of-text-main:#fff; --of-text-secondary:#fff; --of-text-muted:#fff; --of-text-blue:#fff; --of-text-sky:#fff; --of-text-cyan:#fff; --of-text-indigo:#fff; --of-text-purple:#fff; --of-text-violet:#fff; --of-text-pink:#fff; --of-text-red:#fff; --of-text-orange:#fff; --of-text-amber:#fff; --of-text-yellow:#fff; --of-text-green:#fff; --of-text-emerald:#fff; --of-text-teal:#fff; background-color:#b91c1c !important; color:#fff !important; }
html[data-theme="light"] :is([class~="bg-red-400"], [class~="bg-red-500"], [class~="bg-red-500/70"], [class~="bg-red-500/80"], [class~="bg-red-500/90"], [class~="bg-red-600"], [class~="bg-red-600/75"], [class~="bg-red-600/80"], [class~="bg-red-700"], [class~="bg-red-700/90"], [class~="bg-red-800"], [class~="bg-red-800/70"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]):hover { box-shadow:var(--of-shadow-action-hover); }
html[data-theme="light"] :is([class~="text-orange-100"], [class~="text-orange-200"], [class~="text-orange-300"], [class~="text-orange-300/40"], [class~="text-orange-400"], [class~="text-orange-500"]) { color:var(--of-text-orange,#9a3412) !important; }
html[data-theme="light"] :is([class~="bg-orange-500/10"], [class~="bg-orange-900/20"], [class~="bg-orange-900/30"], [class~="bg-orange-900/40"], [class~="bg-orange-900/50"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-600/80"], [class~="bg-orange-600/90"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]) { --of-text-main:#fff; --of-text-secondary:#fff; --of-text-muted:#fff; --of-text-blue:#fff; --of-text-sky:#fff; --of-text-cyan:#fff; --of-text-indigo:#fff; --of-text-purple:#fff; --of-text-violet:#fff; --of-text-pink:#fff; --of-text-red:#fff; --of-text-orange:#fff; --of-text-amber:#fff; --of-text-yellow:#fff; --of-text-green:#fff; --of-text-emerald:#fff; --of-text-teal:#fff; background-color:#c2410c !important; color:#fff !important; }
html[data-theme="light"] :is([class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-600/80"], [class~="bg-orange-600/90"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]):hover { box-shadow:var(--of-shadow-action-hover); }
html[data-theme="light"] :is([class~="text-amber-100"], [class~="text-amber-200"], [class~="text-amber-300"], [class~="text-amber-300/80"], [class~="text-amber-400"], [class~="text-amber-500/80"]) { color:var(--of-text-amber,#92400e) !important; }
html[data-theme="light"] :is([class~="bg-amber-500/10"], [class~="bg-amber-500/20"], [class~="bg-amber-500/5"], [class~="bg-amber-900/10"], [class~="bg-amber-900/35"], [class~="bg-amber-900/40"], [class~="bg-amber-900/60"], [class~="bg-amber-950/10"], [class~="bg-amber-950/20"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-amber-400"], [class~="bg-amber-500"], [class~="bg-amber-500/90"], [class~="bg-amber-600"], [class~="bg-amber-700"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]) { --of-text-main:#713f12; --of-text-secondary:#713f12; --of-text-muted:#713f12; --of-text-blue:#713f12; --of-text-sky:#713f12; --of-text-cyan:#713f12; --of-text-indigo:#713f12; --of-text-purple:#713f12; --of-text-violet:#713f12; --of-text-pink:#713f12; --of-text-red:#713f12; --of-text-orange:#713f12; --of-text-amber:#713f12; --of-text-yellow:#713f12; --of-text-green:#713f12; --of-text-emerald:#713f12; --of-text-teal:#713f12; background-color:#fcd34d !important; color:#713f12 !important; }
html[data-theme="light"] :is([class~="bg-amber-400"], [class~="bg-amber-500"], [class~="bg-amber-500/90"], [class~="bg-amber-600"], [class~="bg-amber-700"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]):hover { box-shadow:var(--of-shadow-action-hover); }
html[data-theme="light"] :is([class~="text-yellow-100"], [class~="text-yellow-200"], [class~="text-yellow-300"], [class~="text-yellow-400"], [class~="text-yellow-400/70"], [class~="text-yellow-500"]) { color:var(--of-text-yellow,#854d0e) !important; }
html[data-theme="light"] :is([class~="bg-yellow-500/10"], [class~="bg-yellow-600/20"], [class~="bg-yellow-800/50"], [class~="bg-yellow-900/20"], [class~="bg-yellow-900/30"], [class~="bg-yellow-900/40"], [class~="bg-yellow-900/50"], [class~="bg-yellow-950/10"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-yellow-400"], [class~="bg-yellow-500"], [class~="bg-yellow-500/90"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]) { --of-text-main:#713f12; --of-text-secondary:#713f12; --of-text-muted:#713f12; --of-text-blue:#713f12; --of-text-sky:#713f12; --of-text-cyan:#713f12; --of-text-indigo:#713f12; --of-text-purple:#713f12; --of-text-violet:#713f12; --of-text-pink:#713f12; --of-text-red:#713f12; --of-text-orange:#713f12; --of-text-amber:#713f12; --of-text-yellow:#713f12; --of-text-green:#713f12; --of-text-emerald:#713f12; --of-text-teal:#713f12; background-color:#fcd34d !important; color:#713f12 !important; }
html[data-theme="light"] :is([class~="bg-yellow-400"], [class~="bg-yellow-500"], [class~="bg-yellow-500/90"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]):hover { box-shadow:var(--of-shadow-action-hover); }
html[data-theme="light"] :is([class~="text-green-100"], [class~="text-green-200"], [class~="text-green-300"], [class~="text-green-400"], [class~="text-green-400/80"], [class~="text-green-500"]) { color:var(--of-text-green,#166534) !important; }
html[data-theme="light"] :is([class~="bg-green-500/10"], [class~="bg-green-500/20"], [class~="bg-green-500/30"], [class~="bg-green-600/15"], [class~="bg-green-600/20"], [class~="bg-green-600/40"], [class~="bg-green-600/55"], [class~="bg-green-700/35"], [class~="bg-green-700/60"], [class~="bg-green-900/10"], [class~="bg-green-900/20"], [class~="bg-green-900/30"], [class~="bg-green-900/35"], [class~="bg-green-900/40"], [class~="bg-green-900/50"], [class~="bg-green-950/10"], [class~="bg-green-950/30"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-600/70"], [class~="bg-green-700"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]) { --of-text-main:#fff; --of-text-secondary:#fff; --of-text-muted:#fff; --of-text-blue:#fff; --of-text-sky:#fff; --of-text-cyan:#fff; --of-text-indigo:#fff; --of-text-purple:#fff; --of-text-violet:#fff; --of-text-pink:#fff; --of-text-red:#fff; --of-text-orange:#fff; --of-text-amber:#fff; --of-text-yellow:#fff; --of-text-green:#fff; --of-text-emerald:#fff; --of-text-teal:#fff; background-color:#15803d !important; color:#fff !important; }
html[data-theme="light"] :is([class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-600/70"], [class~="bg-green-700"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]):hover { box-shadow:var(--of-shadow-action-hover); }
html[data-theme="light"] :is([class~="text-emerald-100"], [class~="text-emerald-200"], [class~="text-emerald-300"], [class~="text-emerald-400"], [class~="text-emerald-400/70"]) { color:var(--of-text-emerald,#065f46) !important; }
html[data-theme="light"] :is([class~="bg-emerald-500/10"], [class~="bg-emerald-500/15"], [class~="bg-emerald-500/20"], [class~="bg-emerald-500/25"], [class~="bg-emerald-500/5"], [class~="bg-emerald-600/20"], [class~="bg-emerald-600/25"], [class~="bg-emerald-900/20"], [class~="bg-emerald-900/35"], [class~="bg-emerald-900/40"], [class~="bg-emerald-950/10"], [class~="bg-emerald-950/20"], [class~="bg-emerald-950/30"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-emerald-500"], [class~="bg-emerald-500/70"], [class~="bg-emerald-600"], [class~="bg-emerald-700"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]) { --of-text-main:#fff; --of-text-secondary:#fff; --of-text-muted:#fff; --of-text-blue:#fff; --of-text-sky:#fff; --of-text-cyan:#fff; --of-text-indigo:#fff; --of-text-purple:#fff; --of-text-violet:#fff; --of-text-pink:#fff; --of-text-red:#fff; --of-text-orange:#fff; --of-text-amber:#fff; --of-text-yellow:#fff; --of-text-green:#fff; --of-text-emerald:#fff; --of-text-teal:#fff; background-color:#047857 !important; color:#fff !important; }
html[data-theme="light"] :is([class~="bg-emerald-500"], [class~="bg-emerald-500/70"], [class~="bg-emerald-600"], [class~="bg-emerald-700"]):is(button, a, [class~="text-white"], [class~="text-black"], [class~="text-gray-100"]):hover { box-shadow:var(--of-shadow-action-hover); }
html[data-theme="light"] :is([class~="text-teal-200"], [class~="text-teal-400"]) { color:var(--of-text-teal,#115e59) !important; }
html[data-theme="light"] :is([class~="bg-teal-900/40"]) { background-color:var(--of-soft-surface,#f1f5f9) !important; }
html[data-theme="light"] :is([class~="bg-[#111]/30"], [class~="bg-[#111]/70"], [class~="bg-[#111]/80"], [class~="bg-[#151515]/95"], [class~="bg-[#181818]/90"], [class~="bg-[#1a1a1a]/50"], [class~="bg-[#1a1a1a]/60"], [class~="bg-[#1a1a1a]/95"], [class~="bg-[#202020]/80"], [class~="bg-[#222]/60"], [class~="bg-[#222]/70"], [class~="bg-[#222]/80"], [class~="bg-[#242424]/85"], [class~="bg-[#242424]/95"], [class~="bg-[#2a2a2a]/50"], [class~="bg-[#2a2a2a]/70"], [class~="bg-[#2a2a2a]/80"], [class~="bg-[#2a2a2a]/85"], [class~="bg-[#2d2d2d]/80"], [class~="bg-[#333]/80"], [class~="bg-[#383838]/30"], [class~="bg-[#383838]/95"], [class~="bg-gray-500"], [class~="bg-gray-600"], [class~="bg-gray-700"], [class~="bg-gray-800"], [class~="bg-gray-800/80"], [class~="bg-slate-800"]) { background-color:var(--of-surface-raised,#e7edf4) !important; }
html[data-theme="light"] [class~="hover:text-white"]:hover { color:var(--of-text-main,#111827) !important; }
html[data-theme="light"] [class~="group"]:hover [class~="group-hover:text-gray-200"] { color:var(--of-text-main,#1f2937) !important; }
/* Media controls retain a dark viewing surface and light, readable labels. */
html[data-theme="light"] :is(#review-workspace-root, #image-viewer-modal, #video-viewer-modal, #pdf-viewer-modal, #model-viewer-modal, #animation-animatics-mobile-player-overlay, .of-crop-modal, .of-about-simple) { --of-text-main:#f8fafc; --of-text-secondary:#e2e8f0; --of-text-muted:#cbd5e1; --of-surface-base:#171d26; --of-surface-raised:#263244; --of-surface-strong:#334155; --of-surface-input:#0b1018; --of-surface-tint:rgba(0,0,0,.28); --of-soft-surface:#253247; --of-surface-hover:#334155; --of-text-blue:#bfdbfe; --of-text-sky:#bae6fd; --of-text-cyan:#a5f3fc; --of-text-indigo:#c7d2fe; --of-text-purple:#e9d5ff; --of-text-violet:#ddd6fe; --of-text-pink:#fbcfe8; --of-text-red:#fecaca; --of-text-orange:#fed7aa; --of-text-amber:#fde68a; --of-text-yellow:#fef08a; --of-text-green:#bbf7d0; --of-text-emerald:#a7f3d0; --of-text-teal:#99f6e4; color:#f8fafc; }

/* Common hover surfaces follow the surrounding light or media palette. */
html[data-theme="light"] [class~="hover:bg-[#222]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#242424]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#262626]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#303030]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#333]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#333]/80"]:hover,
html[data-theme="light"] [class~="hover:bg-[#343434]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#374151]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#383838]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#3a3a3a]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#3b3b3b]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#3d3d3d]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#414141]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#444444]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#444]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#464646]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#4d4d4d]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#555]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#5a5a5a]"]:hover,
html[data-theme="light"] [class~="hover:bg-[#5b6573]"]:hover { background-color:var(--of-surface-hover,#dbe4ee) !important; }

/* Mobile navigation is custom CSS rather than utility-only markup. */
html[data-theme="light"] .mobile-bottom-nav {
    background:rgba(248,250,252,.98) !important;
    border-top-color:var(--of-light-border) !important;
    box-shadow:0 -8px 26px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .mobile-bottom-nav > button { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] .mobile-bottom-nav > button:active { background:rgba(15,23,42,.06) !important; }
html[data-theme="light"] .mobile-bottom-nav .mobile-nav-active { color:#2563eb !important; background:rgba(37,99,235,.10) !important; }

/* Account Settings gets a clean light surface even though its markup retains dark utility names. */
html[data-theme="light"] .account-settings-modal { background:var(--of-light-surface-soft) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .account-settings-header {
    background:#2563eb !important;
    border-bottom-color:#1d4ed8 !important;
}
html[data-theme="light"] .account-settings-title { color:#fff !important; }
html[data-theme="light"] .account-theme-card { background:var(--of-light-surface); border-color:#d7dee8; box-shadow:0 8px 24px rgba(15,23,42,.05); }
html[data-theme="light"] .account-theme-title { color:var(--of-light-text); }
html[data-theme="light"] .account-theme-subtitle { color:var(--of-light-text-muted); }
html[data-theme="light"] .account-theme-track { background:#e8edf3; border-color:var(--of-light-border); box-shadow:inset 0 2px 6px rgba(15,23,42,.10); }

/* Stronger contrast for the marked Account Settings controls in Light mode. */
html[data-theme="light"] .account-settings-close {
    background:#dc2626 !important;
    border-color:#ef4444 !important;
    color:#fff !important;
}
html[data-theme="light"] .account-settings-close:hover {
    background:#b91c1c !important;
    border-color:#dc2626 !important;
    color:#fff !important;
}
html[data-theme="light"] .account-settings-role-badge {
    background:#334155 !important;
    border-color:#475569 !important;
    color:#fff !important;
}

/* Warm light-orange lower Account Settings panels in Light mode. */
html[data-theme="light"] .account-settings-name-panel,
html[data-theme="light"] .account-settings-actions-panel {
    background:#fff1e6 !important;
    border-color:#fdba74 !important;
    box-shadow:0 8px 22px rgba(194,65,12,.07) !important;
}
html[data-theme="light"] .account-settings-logout,
html[data-theme="light"] .account-settings-remove-profile,
html[data-theme="light"] .account-settings-change-login {
    background:#991b1b !important;
    border-color:#b91c1c !important;
    color:#fff !important;
}
html[data-theme="light"] .account-settings-logout:hover,
html[data-theme="light"] .account-settings-remove-profile:not(:disabled):hover,
html[data-theme="light"] .account-settings-change-login:not(:disabled):hover {
    background:#7f1d1d !important;
    border-color:#991b1b !important;
    color:#fff !important;
}
html[data-theme="light"] .account-settings-remove-profile:disabled,
html[data-theme="light"] .account-settings-change-login:disabled {
    background:#7f1d1d !important;
    border-color:#991b1b !important;
    color:#fff !important;
    opacity:.58;
}

/* Login light mode: preserve the wallpaper colours without a tinted overlay.
   Muted panels provide readable contrast independently of the chosen photo. */
html[data-theme="light"] .of-login-page { background-color:#94a3b8 !important; }
html[data-theme="light"] .of-login-page::before { background:transparent !important; }
html[data-theme="light"] .of-login-page :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="text-slate-400"]) { color:#475569 !important; }
/* The unboxed heading sits on the wallpaper, so give its light lettering
   a dark outline instead of applying the form's dark-on-light palette. */
html[data-theme="light"] .of-login-page .of-login-wrap > .text-center:first-child :is(.of-login-kicker, h1, p) {
    color:#f8fafc !important;
    text-shadow:-1px 0 #172335, 1px 0 #172335, 0 -1px #172335, 0 1px #172335, 0 2px 6px rgba(15,23,42,.9);
}
html[data-theme="light"] .of-login-card { background:rgba(223,230,238,.5) !important; border-color:#a6b5c6 !important; box-shadow:0 20px 50px rgba(15,23,42,.20) !important; }
html[data-theme="light"] .of-login-card::before { background:none !important; }
html[data-theme="light"] .of-login-tabs { background:#cbd6e2 !important; border-color:#a6b5c6 !important; }
html[data-theme="light"] .of-login-tab { color:#475569 !important; }
html[data-theme="light"] .of-login-tab:hover { color:#182b40 !important; background:#d8e2ed !important; }
html[data-theme="light"] .of-login-tab.active { color:#163a63 !important; background:#c1d5ea !important; border-color:#789abe !important; box-shadow:0 2px 5px rgba(15,23,42,.08) !important; }
html[data-theme="light"] .of-login-card input:not([type="checkbox"]) { color-scheme:light; background:#edf1f5 !important; color:#182b40 !important; border-color:#708299 !important; box-shadow:none !important; }
html[data-theme="light"] .of-login-card input::placeholder { color:#5b6b7d !important; opacity:1; }
html[data-theme="light"] .of-login-card input:focus { border-color:#285b8f !important; box-shadow:0 0 0 2px rgba(40,91,143,.20) !important; }
html[data-theme="light"] .of-login-card button[class~="bg-[#333333]"] { background:#285b8f !important; color:#fff !important; border-color:#234f7b !important; }
html[data-theme="light"] .of-login-card button[class~="bg-[#333333]"]:hover { background:#234f7b !important; }
html[data-theme="light"] .of-login-card :is([class~="text-orange-100"], [class~="text-orange-300"]) { color:#8a3716 !important; }
html[data-theme="light"] .of-login-card [class~="bg-orange-500/10"] { background:#efe0cf !important; border-color:#c99c70 !important; }
html[data-theme="light"] .of-login-card button[class~="text-orange-300"] { background:#e9ddd0 !important; border-color:#c99c70 !important; }
html[data-theme="light"] .of-login-card button[class~="text-orange-300"]:hover { background:#e3d1be !important; color:#7c2d12 !important; }
html[data-theme="light"] .of-login-card [class~="bg-orange-600"] { background:#a84a1a !important; color:#fff !important; border-color:#964117 !important; }
html[data-theme="light"] .of-login-card [class~="bg-orange-600"]:hover { background:#964117 !important; }
html[data-theme="light"] .of-login-feature-link { color:#234f7b !important; background:#d9e2ec !important; border-color:#a6b5c6 !important; box-shadow:0 8px 24px rgba(15,23,42,.12) !important; }
html[data-theme="light"] .of-login-feature-link:hover { color:#163a63 !important; background:#cbd9e8 !important; border-color:#789abe !important; }

/* Planning has many semantic classes with direct dark colors in main.css. */
html[data-theme="light"] .planning-cell-input,
html[data-theme="light"] .planning-readonly,
html[data-theme="light"] .planning-toggle,
html[data-theme="light"] .planning-sheet-toolbar,
html[data-theme="light"] .planning-plan-scroll,
html[data-theme="light"] .planning-plan-empty,
html[data-theme="light"] .planning-episode-create-panel,
html[data-theme="light"] .planning-episode-create-input,
html[data-theme="light"] .planning-episode-create-tile,
html[data-theme="light"] .planning-shot-thumb-button { background:var(--of-light-surface-soft) !important; color:#1f2937 !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .planning-table th,
html[data-theme="light"] .planning-plan-main-head th,
html[data-theme="light"] .planning-plan-sub-head th { background:#e7edf4 !important; color:var(--of-light-text-secondary) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .planning-table td,
html[data-theme="light"] .planning-plan-row td,
html[data-theme="light"] .planning-action-group,
html[data-theme="light"] .planning-client-group { background:var(--of-light-surface) !important; color:#1f2937 !important; border-color:#d7dee8 !important; }
html[data-theme="light"] .planning-table tr:hover td,
html[data-theme="light"] .planning-plan-row:hover td { background:var(--of-light-surface-raised) !important; }

/* Attendance keeps its calendar, sticky names, filters and editor on the same
   light palette. Scope these rules to the window so dark mode is unchanged. */
html[data-theme="light"] #modal-container[data-modal-type="attendance"] > div {
    background:var(--of-light-surface-raised) !important;
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] :is(
    [class~="bg-[#202020]"], [class~="bg-[#242424]"], [class~="bg-[#252525]"],
    [class~="bg-[#292929]"], [class~="bg-[#2d2d2d]"], [class~="bg-[#303030]"]
) {
    background-color:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-secondary) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] :is(select, textarea, input:not([type="checkbox"])) {
    color-scheme:light;
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
    border-color:#94a3b8 !important;
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] option {
    background:var(--of-light-surface);
    color:var(--of-light-text-strong);
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] .attendance-weekend-saturday {
    background-color:#e8eef5 !important;
    color:#334155 !important;
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] .attendance-weekend-sunday {
    background-color:#dde5ef !important;
    color:#334155 !important;
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] [class~="bg-emerald-500/20"] {
    background-color:#dcfce7 !important;
    color:#166534 !important;
    border-color:#86efac !important;
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] [class~="bg-amber-500/20"] {
    background-color:#fef3c7 !important;
    color:#92400e !important;
    border-color:#fcd34d !important;
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] [class~="bg-blue-500/20"] {
    background-color:#dbeafe !important;
    color:#1e40af !important;
    border-color:#93c5fd !important;
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] [class~="opacity-40"] { opacity:1; }
html[data-theme="light"] #modal-container[data-modal-type="attendance"] button[class~="hover:text-white"]:hover {
    color:var(--of-light-text-strong) !important;
    border-color:#64748b !important;
}
html[data-theme="light"] #modal-container[data-modal-type="attendance"] [class~="ring-offset-[#202020]"] { --tw-ring-offset-color:#fff; }

/* Work Monitor + Attendance custom surfaces. */
html[data-theme="light"] .work-monitor-saved-views-panel,
html[data-theme="light"] .work-monitor-view-tab,
html[data-theme="light"] .work-monitor-view-editor input { background:var(--of-light-surface-soft) !important; color:var(--of-light-text-secondary) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .work-monitor-view-actions button,
html[data-theme="light"] .work-monitor-view-editor button { background:#e7edf4 !important; color:var(--of-light-text-secondary) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .work-monitor-view-tab.is-active { background:#d8f3f5 !important; color:#155e75 !important; border-color:#22b8c7 !important; }
html[data-theme="light"] .attendance-analytics-desktop-row > div,
html[data-theme="light"] .attendance-analytics-desktop-head > div { border-color:#d7dee8 !important; }

/* Desktop Work Analytics has its own dark semantic lane colors in main.css.
   In Light Mode, convert only the xl/desktop table to light surfaces; the
   mobile analytics cards intentionally keep their existing working layout. */
@media (min-width:1280px) {
  html[data-theme="light"] section:has(> .attendance-analytics-desktop-head) {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 2px 10px rgba(15,23,42,.045);
  }
  html[data-theme="light"] .attendance-analytics-desktop-head > div:nth-child(1),
  html[data-theme="light"] .attendance-analytics-desktop-head > div:nth-child(4) { background:#e7edf4 !important; }
  html[data-theme="light"] .attendance-analytics-desktop-head > div:nth-child(2) { background:#eaf2fb !important; }
  html[data-theme="light"] .attendance-analytics-desktop-head > div:nth-child(3) { background:#f1edf9 !important; }
  html[data-theme="light"] .attendance-analytics-desktop-head {
    background:#e7edf4 !important;
    border-color:var(--of-light-border) !important;
    color:#475569 !important;
  }
  html[data-theme="light"] .attendance-analytics-desktop-row > div:nth-child(1) { background:var(--of-light-surface) !important; border-right-color:#d7dee8 !important; }
  html[data-theme="light"] .attendance-analytics-desktop-row > div:nth-child(2) { background:#f4f8fc !important; border-right-color:#d7dee8 !important; }
  html[data-theme="light"] .attendance-analytics-desktop-row > div:nth-child(3) { background:#faf7ff !important; border-right-color:#d7dee8 !important; }
  html[data-theme="light"] .attendance-analytics-desktop-row > div:nth-child(4) {
    background-color:var(--of-light-surface) !important;
    background-image:repeating-linear-gradient(
      to right,
      transparent 0,
      transparent var(--attendance-stage-divider-x),
      rgba(148,163,184,.55) var(--attendance-stage-divider-x),
      rgba(148,163,184,.55) calc(var(--attendance-stage-divider-x) + 1px),
      transparent calc(var(--attendance-stage-divider-x) + 1px),
      transparent var(--attendance-stage-lane-pitch)
    ) !important;
  }
  html[data-theme="light"] .attendance-analytics-worked-days-value { color:#1d4ed8 !important; }
  html[data-theme="light"] .attendance-analytics-total-mandays-value { color:#6d28d9 !important; }
  html[data-theme="light"] .attendance-analytics-total-mandays-value.is-empty { color:#94a3b8 !important; }

  html[data-theme="light"] .attendance-analytics-desktop-stage-unit {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 1px 4px rgba(15,23,42,.045) !important;
  }
  html[data-theme="light"] .attendance-analytics-desktop-stage-unit > .attendance-analytics-desktop-stage {
    background-color:var(--of-light-surface) !important;
  }
  html[data-theme="light"] .attendance-analytics-desktop-stage > div:first-child > span:first-child {
    color:#1e293b !important;
  }
  html[data-theme="light"] .attendance-analytics-desktop-stage > div:first-child > span:last-child {
    color:var(--of-light-text-secondary) !important;
  }
  html[data-theme="light"] .attendance-analytics-desktop-stage-unit > .attendance-analytics-desktop-stage-mandays {
    background:var(--of-light-surface-soft) !important;
    border-left-color:var(--of-light-border) !important;
  }
  html[data-theme="light"] .attendance-analytics-desktop-stage-mandays-head { color:var(--of-light-text-secondary) !important; }
  html[data-theme="light"] .attendance-analytics-desktop-stage-mandays-value { color:var(--of-light-text-strong) !important; }
  html[data-theme="light"] .attendance-analytics-desktop-stage-mandays-value.is-empty { color:#94a3b8 !important; }
  html[data-theme="light"] .attendance-analytics-desktop-stage [class~="bg-[#15171a]"] {
    background:#e2e8f0 !important;
    border-color:var(--of-light-border) !important;
  }
  html[data-theme="light"] .attendance-analytics-desktop-row [class~="bg-[#191919]"] {
    background:var(--of-light-surface-raised) !important;
  }
}

/* Neutral modal backdrop stays visibly modal in both themes. */
html[data-theme="light"] #modal-container:not(.hidden) { background-color:rgba(15,23,42,.28) !important; }


/* upload_version_light_theme_v1_20261006:
   Upload File is an app surface, not a media-review canvas. Mirror the portal
   appearance choice while keeping the existing dark-mode upload design intact. */
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-modal-fit {
    background:var(--of-light-surface-soft) !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-heading,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-actions {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-heading h2 {
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-mobile-close {
    background:var(--of-light-surface-raised) !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-secondary) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-mobile-close:hover,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-mobile-close:active {
    background:var(--of-light-surface-soft) !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-context > div,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-block,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-source-block {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:nth-child(2) > div {
    background:var(--of-light-surface-soft) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-field-label,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-name,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-drop-hint,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-or {
    color:var(--of-light-text-muted) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-picker,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-file-picker,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-link-input,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-source-block > .mt-2,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-selected-files {
    background:var(--of-light-surface-soft) !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-picker:hover,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-file-picker:hover,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-selected-file-row:hover {
    background:var(--of-light-surface-raised) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-file-picker-label,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-selected-file-name {
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-or::before,
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-or::after {
    background:var(--of-light-border) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-link-input:focus {
    border-color:var(--of-status-info-text) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-file-picker.is-dragover {
    background:var(--of-status-info-bg) !important;
    border-color:var(--of-status-info-border) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-file-picker.is-dragover .upload-version-drop-hint {
    color:var(--of-status-info-text) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-cancel {
    background:var(--of-light-surface-raised) !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-cancel:hover {
    background:var(--of-light-surface-soft) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-selected-file-remove {
    background:var(--of-status-danger-bg) !important;
    border-color:var(--of-status-danger-border) !important;
    color:var(--of-status-danger-text) !important;
}
@media (max-width: 767px) {
    html[data-theme="light"] #modal-container[data-modal-type="upload-version"],
    html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-modal-fit {
        background:var(--of-light-surface-soft) !important;
    }
    html[data-theme="light"] #modal-container[data-modal-type="upload-version"] .upload-version-actions {
    }
}

/* Media/review workspaces intentionally remain dark. This keeps image, video,
   PDF, 3D and markup evaluation visually consistent between themes. */
html[data-theme="light"] #image-viewer-modal,
html[data-theme="light"] #video-viewer-modal,
html[data-theme="light"] #pdf-viewer-modal,
html[data-theme="light"] #model-viewer-modal,
html[data-theme="light"] #review-workspace-root,
html[data-theme="light"] #review-workspace-root * { color-scheme:dark; }
html[data-theme="light"] #image-viewer-modal,
html[data-theme="light"] #video-viewer-modal,
html[data-theme="light"] #pdf-viewer-modal,
html[data-theme="light"] #model-viewer-modal { background:#050607 !important; }
html[data-theme="light"] #image-viewer-modal [class~="text-white"],
html[data-theme="light"] #video-viewer-modal [class~="text-white"],
html[data-theme="light"] #pdf-viewer-modal [class~="text-white"],
html[data-theme="light"] #model-viewer-modal [class~="text-white"] { color:#fff !important; }

/* Photos/media should never be color-inverted or recolored by the theme. */
html[data-theme="light"] img,
html[data-theme="light"] video,
html[data-theme="light"] canvas,
html[data-theme="light"] model-viewer { filter:none; }

/* ---------- Main dashboard light-mode polish (2026-09-19) ----------
   Keep the workflow/stage work area dark for status contrast, while the
   surrounding Originfly dashboard uses a clearer layered light palette. */
html[data-theme="light"] .portal-sidebar {
    background:var(--of-light-surface-soft) !important;
    border-right-color:#d8e1ec !important;
    box-shadow:4px 0 18px rgba(15,23,42,.045);
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] .portal-sidebar > div:nth-child(2) { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .portal-sidebar button,
html[data-theme="light"] .desktop-sidebar-button-group .desktop-sidebar-btn,
html[data-theme="light"] .desktop-sidebar-button-group .desktop-sidebar-btn.is-planning {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-secondary) !important;
    box-shadow:0 2px 7px rgba(15,23,42,.055) !important;
}
html[data-theme="light"] .portal-sidebar button:hover,
html[data-theme="light"] .desktop-sidebar-button-group .desktop-sidebar-btn:hover,
html[data-theme="light"] .desktop-sidebar-button-group .desktop-sidebar-btn.is-planning:hover {
    background:#eaf2ff !important;
    border-color:#93b4ea !important;
    color:#1d4ed8 !important;
}
html[data-theme="light"] .portal-sidebar button.text-red-400 { color:#b91c1c !important; }

/* Keep the shared desktop Logout action visually consistent in Light Mode. */
html[data-theme="light"] .portal-desktop-logout-button {
    background:#8b1e1e !important;
    color:#ffffff !important;
    border-color:#7f1d1d !important;
    box-shadow:0 2px 8px rgba(127,29,29,.18) !important;
}
html[data-theme="light"] .portal-desktop-logout-button:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
    border-color:#6f1717 !important;
}
html[data-theme="light"] .portal-main-shell {
    background:#f4f7fb !important;
}
html[data-theme="light"] .portal-project-strip {
    background:var(--of-light-surface) !important;
    border-bottom:1px solid #dbe3ee !important;
    box-shadow:0 5px 18px rgba(15,23,42,.035);
}
html[data-theme="light"] .portal-project-strip .mobile-project-card > div:first-child {
    --tw-ring-offset-color:var(--of-light-surface) !important;
}
html[data-theme="light"] .portal-project-strip .mobile-project-card > div:nth-child(2) {
    color:#475569 !important;
}
html[data-theme="light"] .portal-project-strip .mobile-project-card > div:nth-child(2).font-semibold {
    color:#1d4ed8 !important;
}
html[data-theme="light"] .portal-project-strip .project-add-button {
    background:var(--of-light-surface-soft) !important;
    border:1px solid var(--of-light-border) !important;
    color:#2563eb !important;
    box-shadow:0 4px 12px rgba(15,23,42,.07) !important;
}
html[data-theme="light"] .portal-project-strip .project-add-button:hover {
    background:#eff6ff !important;
    border-color:#93c5fd !important;
    color:#1d4ed8 !important;
}
html[data-theme="light"] .portal-episode-strip {
    background:var(--of-light-surface) !important;
    border-bottom-color:#dbe3ee !important;
    box-shadow:0 3px 12px rgba(15,23,42,.03) !important;
}
html[data-theme="light"] .portal-filterbar {
    background:var(--of-light-surface) !important;
    border-bottom-color:#d8e1ec !important;
    box-shadow:0 3px 12px rgba(15,23,42,.03);
}
html[data-theme="light"] .portal-filterbar > div > span {
    color:#475569 !important;
    font-weight:700;
}
html[data-theme="light"] .portal-filterbar select,
html[data-theme="light"] .portal-filterbar input[type="search"] {
    background:var(--of-light-surface-soft) !important;
    border:1px solid var(--of-light-border) !important;
    color:var(--of-light-text-strong) !important;
    border-radius:var(--of-radius-control-compact) !important;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.04) !important;
}
html[data-theme="light"] .portal-filterbar select:hover,
html[data-theme="light"] .portal-filterbar input[type="search"]:focus {
    background:var(--of-light-surface) !important;
    border-color:#93c5fd !important;
}
html[data-theme="light"] .portal-dashboard-panel {
    background:#eef3f8 !important;
    border-color:#d8e1ec !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
}
html[data-theme="light"] .portal-add-assignment-btn {
    background:#eff6ff !important;
    border-color:#93c5fd !important;
    color:#1d4ed8 !important;
}
html[data-theme="light"] .portal-add-assignment-btn:hover {
    background:#dbeafe !important;
    border-color:#60a5fa !important;
    color:#1e40af !important;
}
html[data-theme="light"] .portal-dashboard-panel [id^="assignment-card-"] {
    background:var(--of-light-surface) !important;
    border-color:#d4deea !important;
    box-shadow:0 4px 13px rgba(15,23,42,.055) !important;
}
html[data-theme="light"] .portal-dashboard-panel .assignment-desktop-row {
    background:var(--of-light-surface) !important;
}
html[data-theme="light"] .portal-dashboard-panel .assignment-desktop-row:hover {
    background:#f8fbff !important;
}
html[data-theme="light"] .portal-dashboard-panel .assignment-desktop-thumb {
    background:#e7edf4 !important;
    border-right-color:#d4deea !important;
}
html[data-theme="light"] .portal-dashboard-panel .assignment-identity-name {
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] .portal-dashboard-panel .assignment-stage-workspace-shell {
    background:var(--of-light-surface-soft) !important;
    border-left-color:#d4deea !important;
}
html[data-theme="light"] .portal-dashboard-panel .assignment-desktop-arrow > div {
    background:#e9eff6 !important;
    border-color:var(--of-light-border) !important;
    color:#475569 !important;
}
html[data-theme="light"] .portal-dashboard-panel .assignment-expanded-details {
    background:var(--of-light-surface-soft) !important;
    border-top-color:#d8e1ec !important;
}

/* Light-mode assignment workflow workspace: keep the status accents and action
   colors, but use the same pale dashboard surfaces on both desktop and mobile. */
html[data-theme="light"] .assignment-stage-step {
    background:#e7edf4 !important;
    border-color:#c3cfdd !important;
    color:var(--of-light-text-strong) !important;
    box-shadow:inset 0 3px 0 var(--stage-status-accent), 0 1px 2px rgba(15,23,42,.04) !important;
}
html[data-theme="light"] .assignment-stage-step:hover {
    background:#dce6f1 !important;
    border-color:#94a3b8 !important;
}
html[data-theme="light"] .assignment-stage-state-locked {
    background:#edf1f5 !important;
    border-color:#d1d9e3 !important;
    opacity:1;
}
html[data-theme="light"] .assignment-stage-slide-name { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .assignment-stage-slide-meta { color:#475569 !important; }
html[data-theme="light"] .assignment-stage-state-locked .assignment-stage-slide-meta { color:#475569 !important; }
html[data-theme="light"] .assignment-stage-owner-assigned .assignment-stage-slide-meta,
html[data-theme="light"] .assignment-stage-owned-by-you .assignment-stage-slide-meta { color:#475569 !important; }
html[data-theme="light"] .assignment-stage-slide-state-dot,
html[data-theme="light"] .assignment-selected-stage-status-dot {
    border-color:rgba(15,23,42,.14) !important;
}
html[data-theme="light"] .assignment-stage-selected {
    border-color:#64748b !important;
    outline-color:rgba(37,99,235,.34) !important;
}
html[data-theme="light"] .assignment-selected-stage-panel,
html[data-theme="light"] .assignment-selected-stage-pointer {
    background:#e8eef5 !important;
}
html[data-theme="light"] .assignment-selected-stage-panel {
    border-color:#c5d0dc !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 1px 2px rgba(15,23,42,.04) !important;
}
html[data-theme="light"] .assignment-selected-stage-cell + .assignment-selected-stage-cell {
    border-color:var(--of-light-border) !important;
}
html[data-theme="light"] .assignment-selected-stage-status-body,
html[data-theme="light"] .assignment-selected-stage-assignee-readonly {
    color:#1f2937 !important;
}
html[data-theme="light"] .assignment-selected-stage-label,
html[data-theme="light"] .assignment-selected-stage-empty,
html[data-theme="light"] .assignment-selected-stage-panel [class~="text-gray-400"] {
    color:#475569 !important;
}
html[data-theme="light"] .assignment-selected-stage-panel [class~="bg-[#222]"],
html[data-theme="light"] .assignment-selected-stage-play button,
html[data-theme="light"] .assignment-selected-stage-avatar {
    background:var(--of-light-surface-soft) !important;
    border-color:var(--of-light-border) !important;
    color:#475569 !important;
}

/* The assignee control is part of the selected-stage strip, so its trigger and
   detached overlay menu also follow the light palette. */
html[data-theme="light"] .assignment-stage-assignee-trigger {
    background:var(--of-light-surface-soft) !important;
    border-color:#c2cdda !important;
    color:var(--of-light-text-strong) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
}
html[data-theme="light"] .assignment-stage-assignee-trigger:hover,
html[data-theme="light"] .assignment-stage-assignee-picker.is-open .assignment-stage-assignee-trigger {
    background:#eef3f8 !important;
    border-color:#9aa9ba !important;
}
html[data-theme="light"] .assignment-stage-assignee-avatar {
    background:#e2e8f0 !important;
    border-color:var(--of-light-border) !important;
}
html[data-theme="light"] .assignment-stage-assignee-avatar-fallback {
    color:#6d28d9 !important;
    background:#ede9fe !important;
    border-color:#c4b5fd !important;
}
html[data-theme="light"] .assignment-stage-assignee-trigger-label { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .assignment-stage-assignee-chevron { color:#475569 !important; }
html[data-theme="light"] .assignment-stage-assignee-dot {
    border-color:rgba(15,23,42,.12) !important;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.55), 0 0 0 1px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .assignment-stage-assignee-menu {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-strong) !important;
    box-shadow:0 16px 32px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .assignment-stage-assignee-option { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .assignment-stage-assignee-option:hover,
html[data-theme="light"] .assignment-stage-assignee-option:focus-visible { background:var(--of-light-surface-raised) !important; }
html[data-theme="light"] .assignment-stage-assignee-option.is-selected {
    background:#dbeafe !important;
    color:#1e3a8a !important;
}
html[data-theme="light"] .assignment-stage-assignee-option.is-selected:hover,
html[data-theme="light"] .assignment-stage-assignee-option.is-selected:focus-visible { background:#bfdbfe !important; }
html[data-theme="light"] .assignment-stage-assignee-option-unassigned {
    border-color:#e2e8f0 !important;
    color:#475569 !important;
}
html[data-theme="light"] .assignment-stage-assignee-empty { color:var(--of-light-text-muted) !important; }

/* Mobile dashboard follows the same layered light palette. */
html[data-theme="light"] .mobile-shell { background:#f4f7fb !important; }
html[data-theme="light"] .mobile-topbar,
html[data-theme="light"] .mobile-project-strip,
html[data-theme="light"] .mobile-filterbar { background:var(--of-light-surface) !important; border-color:#d8e1ec !important; }
html[data-theme="light"] .mobile-content { background:#eef3f8 !important; }
html[data-theme="light"] .mobile-add-assignment { background:#eff6ff !important; border-color:#93c5fd !important; color:#1d4ed8 !important; }
html[data-theme="light"] .mobile-assignment-card { background:var(--of-light-surface) !important; border-color:#d4deea !important; box-shadow:0 4px 13px rgba(15,23,42,.06) !important; }
html[data-theme="light"] .mobile-assignment-header { background:var(--of-light-surface) !important; }
html[data-theme="light"] .mobile-assignment-body { background:var(--of-light-surface-soft) !important; }

/* Team and Records use translucent dark utilities that the shared opaque
   palette cannot cover. Keep these overrides local to the two windows;
   their existing responsive layout and all dark-mode styles stay intact. */
html[data-theme="light"] :is(.team-access-modal, .records-modal) {
    background:var(--of-light-surface-raised) !important;
    color:var(--of-light-text-strong);
    box-shadow:0 16px 48px rgba(15,23,42,.12) !important;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-[#111]/30"], [class~="bg-[#111]/80"],
    [class~="bg-[#1a1a1a]/50"], [class~="bg-[#1a1a1a]/60"],
    [class~="bg-[#222]/60"], [class~="bg-[#222]/80"],
    [class~="bg-gray-800"], [class~="bg-gray-800/50"], [class~="bg-gray-800/80"],
    [class~="bg-white/5"]
) { background:var(--of-light-surface) !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-black/20"], [class~="bg-black/25"], [class~="bg-black/30"],
    [class~="bg-black/40"], [class~="bg-black/50"], [class~="bg-black/60"]
) { background:#e8eef5 !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-white/10"], [class~="bg-white/20"]
) { background:#e2e8f0 !important; }
html[data-theme="light"] .records-modal #invoice-summary-stats > div > div {
    background:var(--of-light-surface) !important;
    box-shadow:0 3px 12px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .records-modal [class~="from-white/5"] {
    background-image:linear-gradient(to right,var(--of-light-surface-soft),var(--of-light-surface)) !important;
}
html[data-theme="light"] .records-modal #invoice-list-container [class~="opacity-80"] { opacity:1; }
html[data-theme="light"] .records-modal #invoice-list-container [class~="italic"][class~="opacity-50"] {
    opacity:1;
    color:var(--of-light-text-muted);
}

/* Inputs, native menus and date pickers must use the same light surface. */
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    input:not([type="radio"]):not([type="checkbox"]), select, textarea
) {
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
    border-color:#94a3b8 !important;
    color-scheme:light !important;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.04) !important;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(input, select, textarea):focus {
    border-color:#2563eb !important;
    outline:2px solid rgba(37,99,235,.25);
    outline-offset:1px;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(input, textarea)::placeholder {
    color:var(--of-light-text-muted) !important;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) option {
    background:var(--of-light-surface);
    color:var(--of-light-text-strong);
}

/* Preserve role/payment meanings with darker ink and pale accent surfaces. */
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="text-gray-500"], [class~="text-gray-600"]
) { color:#475569 !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="text-blue-50"], [class~="text-blue-100"], [class~="text-blue-200"],
    [class~="text-blue-200/80"], [class~="text-blue-300"], [class~="text-blue-400"]
) { color:#1d4ed8 !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="text-purple-50"], [class~="text-purple-100"], [class~="text-purple-300"], [class~="text-purple-400"]
) { color:#7e22ce !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="text-green-100"], [class~="text-green-300"], [class~="text-green-400"],
    [class~="text-green-400/80"], [class~="text-green-500"]
) { color:#166534 !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="text-emerald-100"], [class~="text-emerald-200"],
    [class~="text-emerald-300"], [class~="text-emerald-400/70"]
) { color:#065f46 !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="text-yellow-100"], [class~="text-yellow-200"], [class~="text-yellow-300"],
    [class~="text-yellow-400"], [class~="text-yellow-400/70"], [class~="text-yellow-500"]
) { color:#854d0e !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="text-red-100"], [class~="text-red-200"], [class~="text-red-300"],
    [class~="text-red-400"], [class~="text-red-500"]
) { color:#b91c1c !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="text-orange-300"], [class~="text-orange-400"]
) { color:#9a3412 !important; }

html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-blue-500/15"], [class~="bg-blue-900/20"],
    [class~="bg-blue-900/30"], [class~="bg-blue-900/35"], [class~="bg-blue-950/10"]
) { background:var(--of-status-info-bg) !important; border-color:var(--of-status-info-border) !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-purple-500/15"], [class~="bg-purple-900/30"], [class~="bg-purple-950/10"]
) { background:#f3e8ff !important; border-color:#d8b4fe !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-green-500/10"], [class~="bg-green-500/20"], [class~="bg-green-600/20"],
    [class~="bg-green-900/10"], [class~="bg-green-900/20"],
    [class~="bg-green-900/35"], [class~="bg-green-950/10"]
) { background:var(--of-status-success-bg) !important; border-color:var(--of-status-success-border) !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-emerald-900/20"], [class~="bg-emerald-950/10"]
) { background:#d1fae5 !important; border-color:#6ee7b7 !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-yellow-500/10"], [class~="bg-yellow-900/20"],
    [class~="bg-yellow-900/40"], [class~="bg-yellow-950/10"]
) { background:#fef9c3 !important; border-color:#facc15 !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-red-900/10"], [class~="bg-red-900/30"],
    [class~="bg-red-900/35"], [class~="bg-red-950/10"]
) { background:var(--of-status-danger-bg) !important; border-color:var(--of-status-danger-border) !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) [class~="bg-orange-900/30"] {
    background:#ffedd5 !important;
    border-color:#fdba74 !important;
}

/* Keep neutral hover states light, and white labels on solid action buttons. */
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-blue-600"], [class~="bg-blue-600/80"], [class~="bg-blue-600/90"]
) { background:#2563eb !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) [class~="bg-purple-600/90"] {
    background:#9333ea !important;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) [class~="hover:text-white"]:hover {
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="hover:bg-white/5"], [class~="hover:bg-white/10"],
    [class~="hover:bg-white/[0.035]"], [class~="hover:bg-[#333]"],
    [class~="hover:bg-gray-500"], [class~="hover:bg-gray-700"]
):hover { background:#e2e8f0 !important; color:var(--of-light-text-strong) !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) button[class~="bg-gray-600"] {
    background:#e2e8f0 !important;
    color:var(--of-light-text-secondary) !important;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="bg-blue-600"], [class~="bg-blue-600/80"], [class~="bg-blue-600/90"],
    [class~="bg-purple-600"], [class~="bg-purple-600/90"],
    [class~="bg-green-600"], [class~="bg-red-600"], [class~="bg-red-700"]
) { color:#fff !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) [class~="bg-green-600"] {
    background:#15803d !important;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="hover:bg-blue-500"], [class~="hover:bg-blue-600"], [class~="hover:bg-blue-700"]
):hover { background:#1d4ed8 !important; color:#fff !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="hover:bg-red-500"], [class~="hover:bg-red-500/70"],
    [class~="hover:bg-red-500/80"], [class~="hover:bg-red-600"], [class~="hover:bg-red-700"]
):hover { background:#b91c1c !important; color:#fff !important; }
html[data-theme="light"] :is(.team-access-modal, .records-modal) [class~="hover:bg-green-500"]:hover {
    background:#166534 !important;
    color:#fff !important;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) :is(
    [class~="hover:bg-green-500/30"], [class~="hover:bg-green-600/40"]
):hover { background:#bbf7d0 !important; color:#166534 !important; }
html[data-theme="light"] .team-access-modal .peer:checked + [class~="peer-checked:bg-blue-600"] {
    background:#2563eb !important;
    color:#fff !important;
}
html[data-theme="light"] .team-access-modal > [class~="absolute"][class~="inset-0"] {
    background:rgba(15,23,42,.30) !important;
}
html[data-theme="light"] .records-modal .records-monitor-stat-receive :is(.records-monitor-stat-label, .records-monitor-stat-value) { color:#166534 !important; }
html[data-theme="light"] .records-modal .records-monitor-stat-pay :is(.records-monitor-stat-label, .records-monitor-stat-value) { color:#991b1b !important; }
html[data-theme="light"] .records-modal .records-monitor-stat-filter-active {
    border-color:#2563eb !important;
    box-shadow:inset 0 0 0 1px #2563eb !important;
}
html[data-theme="light"] .records-modal .records-monitor-bottom-actions {
    background:var(--of-light-surface-raised) !important;
    border-top:1px solid var(--of-light-border);
    box-shadow:0 -8px 20px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] :is(.team-access-modal, .records-modal) .custom-scrollbar::-webkit-scrollbar-thumb {
    background:#94a3b8;
}
/* Planning light palette. Keep layout and the dark media canvases intact. */
html[data-theme="light"] .planning-modal-shell {
    color-scheme:light;
    background:var(--of-light-surface-raised) !important;
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] .planning-modal-shell :is(.planning-topbar, .planning-project-picker-strip-wrap, .planning-animation-episode-strip-wrap, .planning-sheet-wrap, .planning-grid-board, .planning-plan-scroll, .planning-plan-table, .planning-mobile-card) {
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:none !important;
}
html[data-theme="light"] .planning-modal-shell .planning-sheet-toolbar {
    background:var(--of-light-surface-soft) !important;
    color:var(--of-light-text-secondary) !important;
    border-color:var(--of-light-border) !important;
}
html[data-theme="light"] .planning-modal-shell .planning-plan-table :is(th, td) {
    border-color:var(--of-light-border) !important;
    color:#1e293b !important;
}
html[data-theme="light"] .planning-modal-shell .planning-plan-table thead th {
    background:#e7edf4 !important;
    color:var(--of-light-text-secondary) !important;
    box-shadow:none !important;
}
html[data-theme="light"] .planning-modal-shell .planning-plan-table tbody td { background:var(--of-light-surface) !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-table tbody tr:nth-child(even) td { background:var(--of-light-surface-soft) !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-table tbody tr:hover td { background:#eff6ff !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-plan-assignment, .planning-client-public-mandays-cell, .planning-client-public-amount-cell) {
    border-color:var(--of-light-border) !important;
    box-shadow:1px 0 0 var(--of-light-border) !important;
}
/* Subtle stage colors keep wide Asset sheets easy to follow. */
html[data-theme="light"] .planning-modal-shell .planning-plan-table thead .planning-stage-tone-0 { background:#e2e8f0 !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-table thead .planning-stage-tone-1 { background:#dcfce7 !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-table thead .planning-stage-tone-2 { background:#ede9fe !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-table thead .planning-stage-tone-3 { background:#fef3c7 !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-table thead .planning-stage-tone-4 { background:#cffafe !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-table thead .planning-stage-tone-5 { background:#fce7f3 !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-table thead :is(.planning-plan-client-head, .planning-client-group) { background:#fef3c7 !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-table :is(.planning-plan-empty-stage, .planning-plan-disabled-stage) { background:#e7edf4 !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-input, .planning-cell-input, .planning-plan-input, .planning-plan-select, .planning-category-filter-select, .planning-project-create-input, .planning-episode-create-input) {
    color-scheme:light !important;
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
    border-color:#94a3b8 !important;
    box-shadow:none !important;
}
html[data-theme="light"] .planning-modal-shell :is(input, select, textarea) option { background:var(--of-light-surface) !important; color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .planning-modal-shell :is(input, textarea)::placeholder { color:var(--of-light-text-muted) !important; opacity:1 !important; }
html[data-theme="light"] .planning-modal-shell :is(input, select, textarea):hover { border-color:#64748b !important; }
html[data-theme="light"] .planning-modal-shell :is(input, select, textarea):focus {
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
    border-color:#2563eb !important;
    box-shadow:var(--of-shadow-focus) !important;
}
html[data-theme="light"] .planning-modal-shell .planning-row-pipeline-select:disabled { background:#e7edf4 !important; color:#475569 !important; opacity:1; }
html[data-theme="light"] .planning-modal-shell :is(.planning-top-close, .planning-toolbar-btn, .planning-plan-file-btn, .planning-row-pipeline-btn, .planning-animation-episode-add, .planning-project-create-close, .planning-project-create-btn.muted, .planning-crop-close-pro, .planning-crop-secondary-pro, .planning-mobile-expand-toggle) {
    background:#e7edf4 !important;
    color:var(--of-light-text-secondary) !important;
    border-color:#94a3b8 !important;
    box-shadow:none !important;
}
html[data-theme="light"] .planning-modal-shell :is(.planning-top-close, .planning-toolbar-btn, .planning-plan-file-btn, .planning-row-pipeline-btn, .planning-animation-episode-add, .planning-project-create-close, .planning-project-create-btn.muted, .planning-crop-close-pro, .planning-crop-secondary-pro, .planning-mobile-expand-toggle):hover {
    background:#dbeafe !important;
    color:#1e40af !important;
    border-color:#60a5fa !important;
    filter:none !important;
}
@media (max-width:767px) {
    html[data-theme="light"] .planning-modal-shell .planning-plan-file-btn.has-input {
        background:var(--of-status-success-bg) !important;
        border-color:var(--of-status-success-border) !important;
        color:var(--of-status-success-text) !important;
    }
    html[data-theme="light"] .planning-modal-shell .planning-plan-file-btn.has-input:hover {
        background:var(--of-status-success-bg) !important;
        border-color:var(--of-status-success-text) !important;
        color:var(--of-status-success-text) !important;
    }
}
html[data-theme="light"] .planning-modal-shell :is(.planning-toolbar-btn.primary, .planning-toolbar-btn.info, .planning-project-create-btn.primary, .planning-crop-primary-pro, .planning-mobile-bottom-btn.primary) {
    background:#2563eb !important;
    color:#fff !important;
    border-color:#2563eb !important;
    box-shadow:none !important;
}
html[data-theme="light"] .planning-modal-shell :is(.planning-toolbar-btn.primary, .planning-toolbar-btn.info, .planning-project-create-btn.primary, .planning-crop-primary-pro, .planning-mobile-bottom-btn.primary):hover:not(:disabled) { background:#1d4ed8 !important; color:#fff !important; filter:none !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-toolbar-btn.success, .planning-plan-create-btn, .planning-mobile-create-one, .planning-mobile-bottom-btn.success) { background:#15803d !important; color:#fff !important; border-color:#15803d !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-toolbar-btn.success, .planning-plan-create-btn, .planning-mobile-create-one, .planning-mobile-bottom-btn.success):hover:not(:disabled) { background:#166534 !important; color:#fff !important; filter:none !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-preview-btn, .planning-mobile-bottom-btn.preview) { background:#4338ca !important; color:#fff !important; border-color:#4338ca !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-preview-btn, .planning-mobile-bottom-btn.preview):hover:not(:disabled) { background:#3730a3 !important; color:#fff !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-plan-clear-btn, .planning-plan-delete-btn, .planning-mobile-delete, .planning-animation-episode-delete, .planning-project-thumb-clear, .planning-row-pipeline-btn.danger) { background:var(--of-status-danger-bg) !important; color:var(--of-status-danger-text) !important; border-color:var(--of-status-danger-border) !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-plan-clear-btn, .planning-plan-delete-btn, .planning-mobile-delete, .planning-animation-episode-delete, .planning-project-thumb-clear, .planning-row-pipeline-btn.danger):hover { background:#fecaca !important; color:#7f1d1d !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-label, .planning-row-stage-caption, .planning-plan-total-chip, .planning-client-public-total-wrap > span, .planning-mobile-field > span, .planning-mobile-two-col label > span, .planning-mobile-card-title span, .planning-mobile-details > summary span, .planning-animation-file-control > span, .planning-shot-thumb-control > span, .planning-project-create-fields label, .planning-episode-create-label, .planning-filter-count-chip, .planning-plan-empty, .planning-mobile-empty, .planning-mobile-no-stage) { color:#475569 !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-plan-name, .planning-mobile-card-title strong, .planning-mobile-stage-title, .planning-mobile-details > summary, .planning-animation-episode-name, .planning-project-create-head h3, .planning-episode-create-panel h3, .planning-crop-header-pro h2) { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-plan-row-index, .planning-mobile-card-number, .planning-animation-episode-thumb, .planning-filter-count-chip) { background:#e7edf4 !important; color:var(--of-light-text-secondary) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-mobile-card-expandable, .planning-mobile-details, .planning-mobile-stage, .planning-mobile-empty, .planning-mobile-no-stage, .planning-plan-empty) { background:var(--of-light-surface-soft) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-mobile-stage-list, .planning-mobile-client-block) { border-color:var(--of-light-border) !important; }
html[data-theme="light"] .planning-modal-shell .planning-mobile-card.is-expanded .planning-mobile-card-summary { background:var(--of-light-surface-raised) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .planning-modal-shell .planning-mobile-bottom-actions { background:rgba(248,250,252,.98) !important; border-color:var(--of-light-border) !important; box-shadow:0 -8px 24px rgba(15,23,42,.08) !important; }
/* Completion and budget warnings remain distinct on pale surfaces. */
html[data-theme="light"] .planning-modal-shell .planning-mobile-card.is-complete,
html[data-theme="light"] .planning-modal-shell .planning-plan-row.is-complete > td.planning-plan-assignment.planning-assignment-cell-wide { background:#f0fdf4 !important; border-color:var(--of-status-success-border) !important; box-shadow:inset 3px 0 0 #16a34a !important; }
html[data-theme="light"] .planning-modal-shell .planning-mobile-card.is-complete :is(.planning-mobile-card-summary, .planning-mobile-card-expandable) { background:#f0fdf4 !important; }
html[data-theme="light"] .planning-modal-shell .planning-mobile-card.is-complete :is(.planning-mobile-card-number, .planning-mobile-expand-toggle),
html[data-theme="light"] .planning-modal-shell .planning-plan-row.is-complete > td.planning-plan-assignment :is(.planning-plan-row-index, .planning-plan-file-btn),
html[data-theme="light"] .planning-modal-shell .planning-client-balance-pill { background:var(--of-status-success-bg) !important; color:var(--of-status-success-text) !important; border-color:var(--of-status-success-border) !important; }
html[data-theme="light"] .planning-modal-shell .planning-plan-row.is-complete > td.planning-plan-assignment .planning-row-stage-caption { color:var(--of-status-success-text) !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-client-balance-pill.is-over, .planning-row-validation-note) { background:#fef2f2 !important; color:var(--of-status-danger-text) !important; border-color:var(--of-status-danger-border) !important; }
html[data-theme="light"] .planning-modal-shell .planning-row-validation-note strong { color:var(--of-status-danger-text) !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-assignment-thumb-preview, .planning-project-create-thumb, .planning-episode-create-tile, .planning-animation-episode-tile) { background:var(--of-light-surface-soft) !important; color:#475569 !important; border-color:#94a3b8 !important; box-shadow:none !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-assignment-thumb-preview, .planning-project-create-thumb, .planning-episode-create-tile, .planning-animation-episode-tile):hover { background:#eff6ff !important; color:#1e40af !important; border-color:#60a5fa !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-animation-episode-tile.is-selected, .planning-episode-create-tile.has-file) { background:#eff6ff !important; color:#1e40af !important; border-color:#2563eb !important; }
html[data-theme="light"] .planning-modal-shell .planning-animation-episode-tile.is-selected { box-shadow:inset 3px 0 0 #2563eb !important; }
html[data-theme="light"] .planning-modal-shell .planning-episode-check { color:#1d4ed8 !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-project-create-panel, .planning-episode-create-panel, .planning-crop-modal-pro) { background:var(--of-light-surface) !important; color:var(--of-light-text-strong) !important; border-color:var(--of-light-border) !important; box-shadow:var(--of-shadow-dialog) !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-project-create-overlay, .planning-crop-overlay-pro) { background:rgba(15,23,42,.42) !important; }
@media (max-width: 767px) {
  html[data-theme="light"] .planning-modal-shell .planning-project-create-overlay-project { background:var(--of-light-surface) !important; }
}
html[data-theme="light"] .planning-modal-shell .planning-project-create-body-main-style .planning-project-create-fields .planning-project-records-toggle { background:var(--of-light-surface-raised) !important; border-color:#94a3b8 !important; }
html[data-theme="light"] .planning-modal-shell .planning-project-create-body-main-style .planning-project-create-fields .planning-project-records-toggle :is(span, strong) { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-project-create-fields label > span, .planning-episode-create-label > span) { color:#b91c1c !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-project-thumb-change, .planning-episode-tile-change) { background:rgba(15,23,42,.78) !important; color:#fff !important; }
html[data-theme="light"] .planning-modal-shell :is(.planning-crop-header-pro, .planning-crop-footer-pro, .planning-crop-stage-pro) { background:var(--of-light-surface-raised) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .planning-modal-shell .planning-crop-icon-pro { background:#dbeafe !important; color:#1e40af !important; border-color:#93c5fd !important; box-shadow:none !important; }
html[data-theme="light"] .planning-modal-shell .planning-shot-insert-row > td { background:var(--of-light-surface-raised) !important; }
html[data-theme="light"] .planning-modal-shell .planning-shot-insert-separator span { background:#eff6ff !important; color:#1e40af !important; border-color:#93c5fd !important; opacity:1; }
html[data-theme="light"] .planning-modal-shell .planning-shot-insert-separator::before { background:#94a3b8 !important; }
html[data-theme="light"] .planning-modal-shell .planning-shot-insert-separator:is(:hover, :focus-visible) span { background:#dbeafe !important; border-color:#2563eb !important; }
html[data-theme="light"] .planning-modal-shell [class~="text-blue-100"] { color:#1e40af !important; }
html[data-theme="light"] .planning-modal-shell :is([class~="text-amber-100"], [class~="text-amber-200"]) { color:var(--of-status-warning-text) !important; }
html[data-theme="light"] .planning-modal-shell [class~="bg-amber-950/20"] { background:#fffbeb !important; }
html[data-theme="light"] .planning-modal-shell [class~="text-emerald-100"] { color:#065f46 !important; }
html[data-theme="light"] .planning-modal-shell [class~="bg-emerald-950/20"] { background:#ecfdf5 !important; }
html[data-theme="light"] .planning-modal-shell [class~="bg-blue-950/20"] { background:#eff6ff !important; }
html[data-theme="light"] .planning-modal-shell .custom-scrollbar { scrollbar-color:#94a3b8 var(--of-light-surface-raised); }
html[data-theme="light"] .planning-modal-shell .custom-scrollbar::-webkit-scrollbar-track { background:var(--of-light-surface-raised); }
html[data-theme="light"] .planning-modal-shell .custom-scrollbar::-webkit-scrollbar-thumb { background:#94a3b8; }
/* Preview controls follow the theme; shot images/video retain a black stage. */
html[data-theme="light"] .planning-shot-preview-shell { color-scheme:light; background:var(--of-light-surface); color:var(--of-light-text-strong); border-color:var(--of-light-border); }
html[data-theme="light"] .planning-shot-preview-shell :is(.planning-shot-preview-header, .planning-shot-preview-controls, .planning-shot-preview-shot-meta) { background:var(--of-light-surface-soft); color:var(--of-light-text-strong); border-color:var(--of-light-border); }
html[data-theme="light"] .planning-shot-preview-shell .planning-shot-preview-title strong { color:var(--of-light-text-strong); }
html[data-theme="light"] .planning-shot-preview-shell :is(.planning-shot-preview-title span, .planning-shot-preview-time) { color:#475569; }
html[data-theme="light"] .planning-shot-preview-shell :is(.planning-shot-preview-counter, .planning-shot-preview-close, .planning-shot-preview-skip) { background:#e7edf4; color:var(--of-light-text-secondary); border-color:#94a3b8; }
html[data-theme="light"] .planning-shot-preview-shell .planning-shot-preview-play { background:#4338ca; color:#fff; border-color:#4338ca; }
html[data-theme="light"] .planning-shot-preview-shell .planning-shot-preview-shot-meta span { color:#4338ca; }
html[data-theme="light"] .planning-shot-preview-shell .planning-shot-preview-empty { color:#cbd5e1; }
html[data-theme="light"] .planning-shot-preview-shell .planning-shot-preview-boundary { background:#475569; box-shadow:0 0 0 1px #fff; }
/* Companies: light management tables, admin settings, and their dialogs. */
html[data-theme="light"] :is(.company-page-shell, .company-subscription-test-panel) {
    color-scheme:light;
    background:var(--of-light-surface-raised) !important;
    color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] .company-page-shell :is(.company-page-header, .company-list-ui-card, .company-admin-ui-card, .company-add-form, .company-sheet-scroll, .subscription-plan-editor-card, .billing-provider-admin-workspace) {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:none !important;
}
html[data-theme="light"] .company-page-shell :is(.company-tab-switch-wrap, .company-window-tabs) { background:var(--of-light-surface-raised) !important; border-color:var(--of-light-border) !important; box-shadow:none !important; }
html[data-theme="light"] .company-page-shell :is(.company-window-tab-btn, .company-back-btn, .company-close-btn, .company-small-close-btn, .billing-provider-refresh-btn) { background:#e7edf4 !important; color:var(--of-light-text-secondary) !important; border-color:#94a3b8 !important; }
html[data-theme="light"] .company-page-shell :is(.company-window-tab-btn, .company-back-btn, .company-close-btn, .company-small-close-btn, .billing-provider-refresh-btn):hover { background:#dbeafe !important; color:#1e40af !important; border-color:#60a5fa !important; }
html[data-theme="light"] .company-page-shell .company-window-tab-btn.active { background:#eff6ff !important; color:#1e40af !important; border-color:#2563eb !important; box-shadow:inset 0 0 0 1px #93c5fd !important; }
html[data-theme="light"] .company-page-shell .company-window-tab-btn.active::before { background:none; }
html[data-theme="light"] .company-page-shell :is(.company-window-tab-icon, .company-window-tab-status, .company-admin-mini-status span) { background:#e2e8f0; color:var(--of-light-text-secondary); border-color:var(--of-light-border); }
html[data-theme="light"] .company-page-shell .company-window-tab-btn.active :is(.company-window-tab-icon, .company-window-tab-status) { background:var(--of-status-info-bg); color:var(--of-status-info-text); border-color:var(--of-status-info-border); }
html[data-theme="light"] .company-page-shell :is(.company-window-tab-text small, .company-sheet-sub, .company-sheet-muted, .billing-provider-summary-grid span, .billing-provider-security-note, .billing-webhook-meta, .billing-webhook-empty) { color:#475569; }
html[data-theme="light"] .company-page-shell .company-window-tab-btn.active .company-window-tab-text small { color:#1e40af; }
html[data-theme="light"] .company-page-shell :is(.company-panel-heading, .company-results-card, .company-sheet-cell) { border-color:var(--of-light-border) !important; }
html[data-theme="light"] .company-page-shell .company-sheet-table thead th { background:#e7edf4; color:var(--of-light-text-secondary); border-color:var(--of-light-border); }
html[data-theme="light"] .company-page-shell .company-sheet-row { background:var(--of-light-surface); }
html[data-theme="light"] .company-page-shell .company-sheet-row:nth-child(even) { background:var(--of-light-surface-soft); }
html[data-theme="light"] .company-page-shell .company-sheet-row:hover { background:#eff6ff; }
html[data-theme="light"] .company-page-shell :is(.company-sheet-cell, .company-sheet-name, .company-sheet-strong, .billing-provider-summary-grid strong) { color:var(--of-light-text-strong); }
html[data-theme="light"] .company-page-shell .company-sheet-row.company-row-red-500 .company-sheet-cell:first-child { color:#b91c1c; }
html[data-theme="light"] .company-page-shell .company-sheet-row.company-row-orange-500 .company-sheet-cell:first-child { color:#c2410c; }
html[data-theme="light"] .company-page-shell .company-sheet-row.company-row-yellow-500 .company-sheet-cell:first-child { color:var(--of-status-warning-text); }
html[data-theme="light"] .company-page-shell .company-sheet-progress { background:#e2e8f0; border-color:var(--of-light-border); }
html[data-theme="light"] .company-page-shell :is(.company-sheet-status.active, .company-sheet-type-pill.allowed, .billing-provider-state.billing-provider-ok, .billing-webhook-status.is-processed) { background:var(--of-status-success-bg); color:var(--of-status-success-text); border-color:var(--of-status-success-border); }
html[data-theme="light"] .company-page-shell :is(.company-sheet-status.warning, .billing-provider-state.billing-provider-off, .billing-webhook-status.is-ignored) { background:var(--of-status-warning-bg); color:var(--of-status-warning-text); border-color:var(--of-status-warning-border); }
html[data-theme="light"] .company-page-shell :is(.company-sheet-status.danger, .company-sheet-type-pill.blocked, .billing-webhook-status.is-failed) { background:var(--of-status-danger-bg); color:var(--of-status-danger-text); border-color:var(--of-status-danger-border); }
html[data-theme="light"] .company-page-shell .company-sheet-status.trial { background:#ffedd5; color:#9a3412; border-color:#fdba74; }
html[data-theme="light"] .company-page-shell :is(.billing-provider-state.billing-provider-warn, .billing-webhook-status.is-received, .subscription-plan-version-badge) { background:var(--of-status-info-bg); color:var(--of-status-info-text); border-color:var(--of-status-info-border); }
html[data-theme="light"] .company-page-shell :is(.billing-provider-mode-badge, .billing-provider-test-btn) { background:#cffafe; color:#155e75; border-color:#67e8f9; }
html[data-theme="light"] .company-page-shell .billing-provider-test-btn:hover { background:#a5f3fc; color:#164e63; }
html[data-theme="light"] .company-page-shell :is(.billing-provider-summary-grid > div, .billing-webhook-list) { background:var(--of-light-surface-soft); border-color:var(--of-light-border); }
html[data-theme="light"] .company-page-shell .billing-webhook-row { border-color:var(--of-light-border); }
html[data-theme="light"] .company-page-shell .billing-provider-security-note { background:#ecfeff; border-color:#0891b2; }
html[data-theme="light"] .company-page-shell .company-add-popup-backdrop { background:rgba(15,23,42,.42); }
html[data-theme="light"] .company-page-shell :is([class~="bg-[#2a2a2a]/70"], [class~="bg-[#2a2a2a]/80"], [class~="bg-[#2a2a2a]/85"], [class~="bg-[#242424]/95"]) { background:var(--of-light-surface-soft) !important; }
html[data-theme="light"] .company-page-shell [class~="bg-indigo-950/30"] { background:#eef2ff !important; }
html[data-theme="light"] .company-page-shell :is([class~="bg-gray-700"], [class~="bg-slate-600/55"]) { background:#e2e8f0 !important; color:var(--of-light-text-secondary) !important; border-color:#94a3b8 !important; }
html[data-theme="light"] .company-page-shell :is([class~="bg-emerald-600/20"], [class~="bg-emerald-600/25"], [class~="bg-green-600/20"]) { background:var(--of-status-success-bg) !important; color:var(--of-status-success-text) !important; border-color:var(--of-status-success-border) !important; }
html[data-theme="light"] .company-page-shell :is([class~="text-gray-500"], [class~="text-gray-600"]) { color:#475569 !important; }
html[data-theme="light"] .company-page-shell [class~="text-blue-300"] { color:#1e40af !important; }
html[data-theme="light"] .company-page-shell :is([class~="text-emerald-100"], [class~="text-emerald-200"], [class~="text-emerald-300"], [class~="text-green-200"]) { color:var(--of-status-success-text) !important; }
html[data-theme="light"] .company-page-shell :is([class~="text-red-300"], [class~="text-red-200"]) { color:var(--of-status-danger-text) !important; }
html[data-theme="light"] .company-page-shell :is([class~="text-amber-200"], [class~="text-amber-300"]) { color:var(--of-status-warning-text) !important; }
html[data-theme="light"] .company-page-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { color-scheme:light !important; background:var(--of-light-surface) !important; color:var(--of-light-text-strong) !important; border-color:#94a3b8 !important; box-shadow:none !important; }
html[data-theme="light"] .company-page-shell :is(input, textarea)::placeholder { color:var(--of-light-text-muted) !important; opacity:1 !important; }
html[data-theme="light"] .company-page-shell option { background:var(--of-light-surface) !important; color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .company-page-shell :is(input, select, textarea):focus { border-color:#2563eb !important; box-shadow:var(--of-shadow-focus) !important; }
/* Solid actions retain white text, including selected project-type buttons. */
html[data-theme="light"] .company-page-shell :is(.company-sheet-action, [class~="bg-blue-600"], [class~="bg-indigo-600"], [class~="bg-green-600"], [class~="bg-emerald-600"], [class~="bg-orange-600"]) { color:#fff !important; }
html[data-theme="light"] .company-page-shell :is(.company-sheet-action.blue, [class~="bg-blue-600"]) { background:#2563eb !important; border-color:#2563eb !important; }
html[data-theme="light"] .company-page-shell :is(.company-sheet-action.indigo, [class~="bg-indigo-600"]) { background:#4f46e5 !important; border-color:#4f46e5 !important; }
html[data-theme="light"] .company-page-shell :is(.company-sheet-action.green, [class~="bg-green-600"]) { background:#15803d !important; border-color:#15803d !important; }
html[data-theme="light"] .company-page-shell :is(.company-sheet-action.emerald, [class~="bg-emerald-600"]) { background:#047857 !important; border-color:#047857 !important; }
html[data-theme="light"] .company-page-shell :is(.company-sheet-action.orange, [class~="bg-orange-600"]) { background:#c2410c !important; border-color:#c2410c !important; }
html[data-theme="light"] .company-page-shell .company-sheet-action.purple { background:#7c3aed !important; border-color:#7c3aed !important; }
html[data-theme="light"] .company-page-shell .company-sheet-action.cyan { background:#0e7490 !important; border-color:#0e7490 !important; }
html[data-theme="light"] .company-page-shell .company-sheet-action.red { background:#b91c1c !important; border-color:#b91c1c !important; }
html[data-theme="light"] .company-page-shell :is(.company-sheet-action, [class~="bg-blue-600"], [class~="bg-indigo-600"], [class~="bg-green-600"], [class~="bg-emerald-600"], [class~="bg-orange-600"]):hover { filter:none; box-shadow:var(--of-shadow-action-hover-strong); }
html[data-theme="light"] .company-page-shell .custom-scrollbar { scrollbar-color:#94a3b8 var(--of-light-surface-raised); }
html[data-theme="light"] .company-page-shell .custom-scrollbar::-webkit-scrollbar-track { background:var(--of-light-surface-raised); }
html[data-theme="light"] .company-page-shell .custom-scrollbar::-webkit-scrollbar-thumb { background:#94a3b8; }
/* Root-admin lifecycle details opened from Companies. */
html[data-theme="light"] .company-subscription-test-overlay { background:rgba(15,23,42,.42); }
html[data-theme="light"] .company-subscription-test-panel { background:var(--of-light-surface) !important; border-color:var(--of-light-border); box-shadow:var(--of-shadow-dialog); }
html[data-theme="light"] .company-subscription-test-panel :is(.company-subscription-test-header, .subscription-manage-history-row, .subscription-audit-row) { border-color:var(--of-light-border); }
html[data-theme="light"] .company-subscription-test-panel :is(.company-subscription-test-summary > div, .subscription-audit-list) { background:var(--of-light-surface-soft); border-color:var(--of-light-border); }
html[data-theme="light"] .company-subscription-test-panel :is(.company-subscription-test-summary strong, .subscription-manage-history-plan, .subscription-audit-title) { color:var(--of-light-text-strong); }
html[data-theme="light"] .company-subscription-test-panel :is(.subscription-manage-loading, .subscription-manage-subtitle, .company-subscription-test-summary span, .subscription-manage-section-title, .subscription-manage-history-meta, .subscription-manage-history-ref, .subscription-manage-history-empty, .subscription-audit-detail, .subscription-audit-meta, .company-subscription-test-result small) { color:#475569; }
html[data-theme="light"] .company-subscription-test-panel :is(.subscription-upgrade-close, .subscription-test-mode-badge, .subscription-test-history-status) { background:#e7edf4; color:var(--of-light-text-secondary); border-color:#94a3b8; }
html[data-theme="light"] .company-subscription-test-panel .subscription-upgrade-close:hover { background:#dbeafe; color:#1e40af; }
html[data-theme="light"] .company-subscription-test-panel :is(.subscription-manage-status.is-active, .subscription-test-history-status.is-success) { background:var(--of-status-success-bg); color:var(--of-status-success-text); border-color:var(--of-status-success-border); }
html[data-theme="light"] .company-subscription-test-panel :is(.subscription-manage-status.is-warning, .subscription-test-history-status.is-cancelled, .subscription-test-history-status.is-scheduled) { background:var(--of-status-warning-bg); color:var(--of-status-warning-text); border-color:var(--of-status-warning-border); }
html[data-theme="light"] .company-subscription-test-panel :is(.subscription-manage-status.is-danger, .subscription-test-history-status.is-failed) { background:var(--of-status-danger-bg); color:var(--of-status-danger-text); border-color:var(--of-status-danger-border); }
html[data-theme="light"] .company-subscription-test-panel :is(.company-subscription-test-result, .subscription-history-plan-version) { background:#eff6ff; color:var(--of-status-info-text); border-color:var(--of-status-info-border); }
html[data-theme="light"] .company-subscription-test-panel :is(.company-subscription-next-summary, .subscription-manage-safety) { background:#fffbeb; color:var(--of-status-warning-text); border-color:var(--of-status-warning-border); }
html[data-theme="light"] .company-subscription-test-panel :is(.company-subscription-next-title > span, .company-subscription-next-title strong, .company-subscription-balance-estimate > span, .company-subscription-balance-estimate strong, .subscription-manage-safety strong, .company-subscription-result-balance strong) { color:var(--of-status-warning-text); }
html[data-theme="light"] .company-subscription-test-panel .company-subscription-next-meta span { background:var(--of-status-warning-bg); color:var(--of-status-warning-text); border-color:var(--of-status-warning-border); }
html[data-theme="light"] .company-subscription-test-panel :is(.company-subscription-balance-estimate small, .company-subscription-result-balance) { color:#475569; }
html[data-theme="light"] .company-subscription-test-panel .company-subscription-balance-estimate { border-color:var(--of-status-warning-border); }
html[data-theme="light"] .company-subscription-test-panel .company-subscription-test-actions .is-renew { background:#2563eb; border-color:#2563eb; }
html[data-theme="light"] .company-subscription-test-panel .company-subscription-test-actions .is-expire { background:#b91c1c; border-color:#b91c1c; }
html[data-theme="light"] .company-subscription-test-panel .company-subscription-test-actions button { color:#fff; }
html[data-theme="light"] .company-subscription-test-panel .company-subscription-test-actions button:hover:not(:disabled) { filter:none; box-shadow:var(--of-shadow-action-hover-strong); }

/* Pipeline / Workflow Presets: shared light palette for the canvas, mobile
   node connector, saved workflows, categories, and their detached dialogs. */
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal) { background:var(--of-light-surface-raised) !important; color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .assignment-pipeline-modal :is(.assignment-pipeline-canvas, .assignment-pipeline-side, .assignment-pipeline-bottom-toolbar, .assignment-pipeline-side .grid.grid-cols-2.gap-2.mb-3) { background:var(--of-light-surface-soft) !important; border-color:var(--of-light-border) !important; box-shadow:none !important; }
html[data-theme="light"] .assignment-pipeline-modal > [class~="border-b"] { border-color:var(--of-light-border) !important; }
html[data-theme="light"] .assignment-pipeline-modal :is(.assignment-pipeline-close-btn, .assignment-node-connector-mobile-close, .assignment-pipeline-mobile-canvas-tools button) { background:#e2e8f0 !important; color:var(--of-light-text-secondary) !important; border-color:#94a3b8 !important; box-shadow:none !important; }
html[data-theme="light"] .assignment-pipeline-modal :is(.assignment-pipeline-close-btn, .assignment-node-connector-mobile-close, .assignment-pipeline-mobile-canvas-tools button):is(:hover, :active) { background:var(--of-status-info-bg) !important; color:var(--of-status-info-text) !important; }
html[data-theme="light"] .assignment-pipeline-modal :is(.assignment-node-connector-mobile-title-wrap strong, h2) { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] .assignment-pipeline-modal h2 + div { color:#475569 !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-node-connector-mobile-kicker,
html[data-theme="light"] .assignment-pipeline-modal .assignment-pipeline-side::before,
html[data-theme="light"] .assignment-pipeline-modal .assignment-pipeline-bottom-toolbar::before { color:var(--of-status-info-text) !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-node-connector-mobile-backdrop { background:rgba(15,23,42,.42) !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-node-tray-item-main { background:var(--of-light-surface) !important; color:var(--of-light-text-strong) !important; border-color:#94a3b8 !important; box-shadow:0 2px 5px rgba(15,23,42,.06) !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-node-tray-item-main:hover { background:#eff6ff !important; border-color:#2563eb !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-node-tray-add { background:var(--of-status-info-bg) !important; color:var(--of-status-info-text) !important; border-color:var(--of-status-info-border) !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-node-tray-add:hover { background:#bfdbfe !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-node-tray-remove { background:#b91c1c !important; color:#fff !important; box-shadow:none !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-pipeline-mobile-window-tabs { background:var(--of-light-surface) !important; border-color:var(--of-light-border) !important; box-shadow:0 -4px 18px rgba(15,23,42,.10) !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-pipeline-mobile-window-tabs button { background:transparent !important; color:#475569 !important; border-color:var(--of-light-border) !important; box-shadow:none !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-pipeline-mobile-window-tabs button:is(:hover, :active) { background:#e7edf4 !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-pipeline-mobile-window-tabs button.is-active,
html[data-theme="light"] .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"],
html[data-theme="light"] .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"],
html[data-theme="light"] .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="workflows"],
html[data-theme="light"] .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="categories"] { background:var(--of-status-info-bg) !important; color:var(--of-status-info-text) !important; border-color:var(--of-status-info-border) !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-pipeline-mobile-window-tabs button:is([data-mobile-pipeline-tab], [data-mobile-pipeline-action]) .assignment-pipeline-tab-icon { background:transparent !important; color:inherit !important; opacity:1 !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-action="save"]:active { background:var(--of-status-success-bg) !important; color:var(--of-status-success-text) !important; }

html[data-theme="light"] :is(.assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) { background:rgba(15,23,42,.42) !important; color:var(--of-light-text-strong); }
html[data-theme="light"] :is(.assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) > div { background:var(--of-light-surface) !important; border-color:var(--of-light-border) !important; box-shadow:var(--of-shadow-dialog) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="text-white"], [class~="text-gray-100"], [class~="text-gray-200"]) { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="text-gray-600"]) { color:#475569 !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="text-blue-100"], [class~="text-blue-100/80"], [class~="text-blue-200"], [class~="text-blue-300"], [class~="text-sky-100"], [class~="text-sky-200"]) { color:var(--of-status-info-text) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="text-red-100"], [class~="text-red-200"], [class~="text-red-300"]) { color:var(--of-status-danger-text) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="text-green-300"], [class~="text-emerald-200"]) { color:var(--of-status-success-text) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="text-amber-100"], [class~="text-amber-300/80"]) { color:var(--of-status-warning-text) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="bg-blue-900/30"], [class~="bg-blue-900/40"], [class~="bg-blue-950/30"], [class~="bg-blue-950/88"], [class~="bg-sky-500/10"], [class~="bg-sky-600/25"], [class~="bg-sky-950/10"]) { background:#eff6ff !important; border-color:var(--of-status-info-border) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="bg-red-900/30"], [class~="bg-red-900/35"], [class~="bg-red-900/40"], [class~="bg-red-900/50"]) { background:#fef2f2 !important; border-color:var(--of-status-danger-border) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="bg-green-900/40"], [class~="bg-emerald-950/10"]) { background:#f0fdf4 !important; border-color:var(--of-status-success-border) !important; }
html[data-theme="light"] .assignment-pipeline-modal [class~="bg-amber-900/40"] { background:#fffbeb !important; border-color:var(--of-status-warning-border) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) button[class~="bg-blue-900/30"]:hover { background:var(--of-status-info-bg) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) button:is([class~="bg-red-900/30"], [class~="bg-red-900/35"], [class~="bg-red-900/50"]):hover { background:var(--of-status-danger-bg) !important; }
html[data-theme="light"] .assignment-pipeline-modal [data-assignment-workflow-tab-btn][class~="bg-sky-600/25"] { background:var(--of-status-info-bg) !important; color:var(--of-status-info-text) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal .assignment-workflow-card, #assignment-mobile-workflow-panel [data-action="preview"])[class~="border-blue-400"] { background:#eff6ff !important; border-color:#2563eb !important; box-shadow:0 0 0 1px #2563eb !important; }
html[data-theme="light"] .assignment-pipeline-modal .assignment-workflow-card:hover { border-color:#2563eb !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { color-scheme:light !important; background:var(--of-light-surface) !important; color:var(--of-light-text-strong) !important; border-color:#94a3b8 !important; box-shadow:none !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is(input, textarea)::placeholder { color:var(--of-light-text-muted) !important; opacity:1 !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) option { background:var(--of-light-surface) !important; color:var(--of-light-text-strong) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is(input, select, textarea):focus { border-color:#2563eb !important; box-shadow:var(--of-shadow-focus) !important; }
html[data-theme="light"] .assignment-workflow-save-dialog .assignment-workflow-save-category-check { accent-color:#2563eb; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="bg-blue-600"], [class~="bg-green-600"], [class~="bg-emerald-600"], [class~="bg-red-600"]) { color:#fff !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) [class~="bg-blue-600"] { background:#2563eb !important; border-color:#2563eb !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) [class~="bg-green-600"] { background:#15803d !important; border-color:#15803d !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) [class~="bg-emerald-600"] { background:#047857 !important; border-color:#047857 !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) [class~="bg-red-600"] { background:#b91c1c !important; border-color:#b91c1c !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-pipeline-style-dialog, #assignment-mobile-workflow-panel) :is([class~="bg-blue-600"], [class~="bg-green-600"], [class~="bg-emerald-600"], [class~="bg-red-600"]):hover { box-shadow:var(--of-shadow-action-hover-strong) !important; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-mobile-workflow-panel) .custom-scrollbar { scrollbar-color:#94a3b8 var(--of-light-surface-raised); }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-mobile-workflow-panel) .custom-scrollbar::-webkit-scrollbar-track { background:var(--of-light-surface-raised); }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, .assignment-workflow-save-dialog, #assignment-mobile-workflow-panel) .custom-scrollbar::-webkit-scrollbar-thumb { background:#94a3b8; }

/* SVG paint follows the theme without rebuilding or changing the graph data.
   Existing selection attributes keep selected nodes and lines distinct. */
html[data-theme="light"] .assignment-pipeline-canvas .node-group rect { fill:var(--of-light-surface); stroke:#64748b; }
html[data-theme="light"] .assignment-pipeline-canvas .node-group rect[stroke="#38bdf8"] { fill:var(--of-status-info-bg); stroke:#2563eb; filter:drop-shadow(0 0 4px rgba(37,99,235,.25)); }
html[data-theme="light"] .assignment-pipeline-canvas .node-group text { fill:var(--of-light-text-strong); }
html[data-theme="light"] .assignment-pipeline-canvas .edge-line { stroke:#64748b; }
html[data-theme="light"] .assignment-pipeline-canvas .edge-line[stroke="#f59e0b"] { stroke:#b45309; }
html[data-theme="light"] .assignment-pipeline-canvas .node-port { stroke:#f8fafc; }
html[data-theme="light"] .assignment-pipeline-canvas .input-port { fill:#15803d; }
html[data-theme="light"] .assignment-pipeline-canvas .output-port { fill:#2563eb; }
html[data-theme="light"] .assignment-pipeline-canvas .pipeline-selection-rect { fill:rgba(37,99,235,.12); stroke:#2563eb; }
html[data-theme="light"] .assignment-pipeline-canvas .temp-edges path { stroke:#2563eb; }
html[data-theme="light"] .assignment-pipeline-canvas .temp-edges path[stroke="#10b981"] { stroke:#15803d; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, #assignment-mobile-workflow-panel) svg rect[fill="url(#wfPreviewBg)"] { fill:var(--of-light-surface-raised); }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, #assignment-mobile-workflow-panel) svg rect[fill="#2d2d2d"] { fill:var(--of-light-surface); stroke:#64748b; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, #assignment-mobile-workflow-panel) svg text[fill="#f3f4f6"] { fill:var(--of-light-text-strong); }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, #assignment-mobile-workflow-panel) svg path[stroke="#60a5fa"] { stroke:#2563eb; opacity:1; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, #assignment-mobile-workflow-panel) svg circle[fill="#10b981"] { fill:#15803d; }
html[data-theme="light"] :is(.assignment-pipeline-modal, .assignment-workflow-picker-modal, #assignment-mobile-workflow-panel) svg circle[fill="#3b82f6"] { fill:#2563eb; }

/* Light-theme details, form dialogs, and subscription panels. */
html[data-theme="light"] .account-theme-switch .account-theme-option-light { color:#854d0e; }
html[data-theme="light"] .account-theme-switch .account-theme-option-dark { color:#475569; }
html[data-theme="light"] #modal-container [class~="opacity-70"][class~="uppercase"],
html[data-theme="light"] #modal-container [class~="opacity-40"][class~="pointer-events-none"][class~="grayscale"],
html[data-theme="light"] .attendance-freelancer-calendar [class~="opacity-40"] { opacity:1; }
html[data-theme="light"] :is([class~="bg-[#151b24]"], [class~="bg-[#151f2d]"], [class~="bg-[#4b5563]"]) { background-color:var(--of-surface-raised,#e7edf4) !important; }
html[data-theme="light"] [class~="hover:bg-[#5b6573]"]:hover { background-color:#dbe4ef !important; }
html[data-theme="light"] .freelancer-budget-modal { background:var(--of-light-surface-soft) !important; }
html[data-theme="light"] .freelancer-budget-modal > .pr-9.mb-5 { background:var(--of-light-surface-soft) !important; }
html[data-theme="light"] .freelancer-budget-modal > .flex.flex-col { background:var(--of-light-surface-soft) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] .freelancer-budget-modal > button[onclick="cancelFreelancerBudgetAssignment()"] { background:#e7edf4 !important; color:var(--of-light-text-secondary) !important; }

html[data-theme="light"] .admin-credentials-modal { background:var(--of-light-surface-soft); color:var(--of-light-text); border-color:var(--of-light-border); box-shadow:0 16px 40px rgba(15,23,42,.18); }
html[data-theme="light"] :is(.admin-credentials-header, .admin-credentials-footer) { background:#e7edf4; border-color:var(--of-light-border); }
html[data-theme="light"] .admin-credentials-verify { background:#f0f4f8; border-color:var(--of-light-border); }
html[data-theme="light"] :is(.admin-credentials-heading-copy h2, .admin-credentials-section-heading) { color:var(--of-light-text); }
html[data-theme="light"] :is(.admin-credential-label, .admin-credentials-kicker, .admin-credentials-heading-copy p, .admin-credentials-note, .admin-credentials-note svg, .admin-credential-eye) { color:#475569; }
html[data-theme="light"] :is(.admin-credentials-symbol, .admin-credentials-required) { background:var(--of-status-info-bg); color:var(--of-status-info-text); border-color:var(--of-status-info-border); }
html[data-theme="light"] :is(.admin-credentials-symbol-warning, .admin-credentials-disabled-message) { background:#fffbeb; color:var(--of-status-warning-text); border-color:var(--of-status-warning-border); }
html[data-theme="light"] .admin-credential-input { background:var(--of-light-surface); color:var(--of-light-text); border-color:#94a3b8; caret-color:#1d4ed8; }
html[data-theme="light"] .admin-credential-input:focus { background:var(--of-light-surface); border-color:#2563eb; }
html[data-theme="light"] :is(.admin-credentials-close, .admin-credentials-btn-secondary) { background:#f0f4f8; color:var(--of-light-text-secondary); border-color:#94a3b8; }
html[data-theme="light"] :is(.admin-credentials-close, .admin-credentials-btn-secondary, .admin-credential-eye):hover { background:var(--of-status-info-bg); color:var(--of-status-info-text); }
html[data-theme="light"] .admin-credentials-btn-primary { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
html[data-theme="light"] .admin-credentials-btn-primary:hover { background:#1e40af; }

html[data-theme="light"] :is(.subscription-upgrade-picker, .subscription-manage-shell, .subscription-test-checkout) { background:var(--of-light-surface-soft); color:var(--of-light-text); border-color:var(--of-light-border); box-shadow:var(--of-shadow-dialog); }
html[data-theme="light"] :is(.subscription-upgrade-picker, .subscription-manage-shell, .subscription-test-checkout) :is([class^="subscription-"], h2, h3, strong, span) { color:inherit; border-color:var(--of-light-border); }
html[data-theme="light"] :is(.subscription-choice-card, .subscription-manage-hero, .subscription-test-plan-summary) { background:#e7edf4; }
html[data-theme="light"] .subscription-choice-card.is-selected { background:#dbeafe; border-color:#2563eb; box-shadow:0 0 0 1px #2563eb; }
html[data-theme="light"] .subscription-choice-card:hover { border-color:#2563eb; }
html[data-theme="light"] :is(.subscription-manage-date-grid > div, .subscription-manage-limit-grid > div, .subscription-test-plan-grid > div, .subscription-test-pricing-grid > div, .subscription-manage-next-grid > div, .subscription-audit-list) { background:var(--of-light-surface-soft); border-color:var(--of-light-border); }
html[data-theme="light"] :is(.subscription-manage-shell, .subscription-test-checkout, .subscription-upgrade-picker) :is(.subscription-manage-project-types span, .subscription-test-project-types span, .subscription-choice-current-badge, .subscription-history-plan-version, .subscription-manage-plan-version, .subscription-choice-plan-version, .subscription-manage-button, .subscription-upgrade-close) { background:#e7edf4; color:var(--of-light-text-secondary); border-color:#94a3b8; }
html[data-theme="light"] :is(.subscription-manage-shell, .subscription-test-checkout, .subscription-upgrade-picker) :is(.subscription-test-safety-note, .subscription-manage-safety, .subscription-test-mode-badge, .subscription-manage-next-plan, .subscription-test-pricing.is-scheduled) { background:#fffbeb; color:#854d0e; border-color:var(--of-status-warning-border); }
html[data-theme="light"] :is(.subscription-manage-safety, .subscription-test-safety-note) strong { color:#854d0e; }
html[data-theme="light"] :is(.subscription-test-pricing, .subscription-test-result) { background:#eff6ff; }
html[data-theme="light"] :is(.subscription-manage-shell, .subscription-test-checkout) :is(.subscription-test-result.is-success, .subscription-manage-status.is-active, .subscription-test-history-status.is-success) { background:var(--of-status-success-bg); color:var(--of-status-success-text); border-color:var(--of-status-success-border); }
html[data-theme="light"] :is(.subscription-manage-shell, .subscription-test-checkout) :is(.subscription-test-result.is-failed, .subscription-test-pricing.is-error, .subscription-manage-status.is-danger, .subscription-test-history-status.is-failed) { background:var(--of-status-danger-bg); color:var(--of-status-danger-text); border-color:var(--of-status-danger-border); }
html[data-theme="light"] :is(.subscription-manage-shell, .subscription-test-checkout) :is(.subscription-manage-status.is-warning, .subscription-test-history-status.is-cancelled, .subscription-test-history-status.is-scheduled) { background:var(--of-status-warning-bg); color:var(--of-status-warning-text); border-color:var(--of-status-warning-border); }
html[data-theme="light"] :is(.subscription-manage-shell, .subscription-test-checkout, .subscription-upgrade-picker) :is(.subscription-choice-select, .subscription-test-action.is-success, .subscription-manage-footer button.is-primary, .subscription-test-checkout-footer button.is-primary) { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
html[data-theme="light"] .subscription-upgrade-picker .subscription-choice-select.is-renew { background:#fcd34d; color:#713f12; border-color:#d97706; }
html[data-theme="light"] .subscription-test-checkout .subscription-test-action.is-failed { background:#b91c1c; color:#fff; border-color:#b91c1c; }
html[data-theme="light"] :is(.subscription-manage-shell, .subscription-test-checkout, .subscription-upgrade-picker) :is(.subscription-choice-select.is-current, .subscription-choice-select:disabled, .subscription-test-action.is-cancelled, .subscription-manage-footer button:not(.is-primary), .subscription-test-checkout-footer button:not(.is-primary)) { background:#e7edf4; color:var(--of-light-text-secondary); border-color:#94a3b8; }
html[data-theme="light"] :is(.subscription-manage-footer, .subscription-test-checkout-footer) { background:#f0f4f8; }
html[data-theme="light"] .subscription-choice-divider { background:var(--of-light-border); }
html[data-theme="light"] :is(.subscription-choice-select, .subscription-test-action):hover:not(:disabled) { filter:none; box-shadow:var(--of-shadow-action-hover); }

/* mobile_new_project_light_mode_v1_20260922:
   Give the full-screen New Project workspace a dedicated light palette on phones.
   The mobile fullscreen rules in main.css intentionally use a dark surface for dark mode;
   these scoped overrides keep light mode bright and readable without affecting desktop. */
@media (max-width: 767px) {
  html[data-theme="light"] #modal-container[data-modal-type="project"] {
    background:var(--of-light-surface-raised) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit {
    background:var(--of-light-surface-soft) !important;
    color:var(--of-light-text-strong) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit h2 {
    color:var(--of-light-text-strong) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit > button[onclick="closeModal()"] {
    background:#e2e8f0 !important;
    color:var(--of-light-text-secondary) !important;
    border:1px solid var(--of-light-border) !important;
    box-shadow:var(--of-shadow-surface-small) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit > button[onclick="closeModal()"]:hover {
    background:#dbeafe !important;
    color:#1d4ed8 !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit [onclick*="project-img-upload"] {
    background:var(--of-light-page-bg) !important;
    border-color:#94a3b8 !important;
    color:#475569 !important;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.05) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit [onclick*="project-img-upload"]:hover {
    background:#e2e8f0 !important;
    border-color:#3b82f6 !important;
    color:#1d4ed8 !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit [onclick*="project-img-upload"] .absolute.inset-0 span {
    color:#ffffff !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit > .w-full > label {
    color:#475569 !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] :is(#new-project-name, #new-project-type) {
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
    border-color:#94a3b8 !important;
    box-shadow:0 1px 2px rgba(15,23,42,.06) !important;
    caret-color:#1d4ed8 !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] :is(#new-project-name, #new-project-type):focus {
    background:var(--of-light-surface) !important;
    border-color:#2563eb !important;
    box-shadow:var(--of-shadow-focus-strong) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit > label {
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-modal-fit > label > span {
    color:var(--of-light-text-strong) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-create-submit {
    background:#1d4ed8 !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
    box-shadow:0 8px 18px rgba(37,99,235,.18) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="project"] .new-project-create-submit:hover {
    background:#1e40af !important;
  }
}


/* mobile_asset_new_assignment_light_mode_v1_20260922:
   Make the Asset New Assignment fullscreen workspace genuinely light on phones.
   Scope through the Asset Category control so Animation / AI Movie shot creation
   and every desktop modal keep their existing appearance. */
@media (max-width: 767px) {
  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) {
    background:var(--of-light-surface-raised) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-modal-fit {
    background:var(--of-light-surface-soft) !important;
    color:var(--of-light-text-strong) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-modal-fit h2 {
    color:var(--of-light-text-strong) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-modal-fit > button[onclick="closeModal()"] {
    background:#e2e8f0 !important;
    color:var(--of-light-text-secondary) !important;
    border:1px solid var(--of-light-border) !important;
    box-shadow:var(--of-shadow-surface-small) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-modal-fit > button[onclick="closeModal()"]:hover {
    background:#dbeafe !important;
    color:#1d4ed8 !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-thumb-upload {
    background:var(--of-light-page-bg) !important;
    border-color:#94a3b8 !important;
    color:#475569 !important;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.05) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-thumb-upload:hover {
    background:#e2e8f0 !important;
    border-color:#3b82f6 !important;
    color:#1d4ed8 !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-modal-fit label {
    color:#475569 !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) :is(#new-assignment-name, #new-assignment-mandays, #new-assignment-asset-category, #new-assignment-workflow-template, .new-assignment-input-box input[type="text"]) {
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
    border-color:#94a3b8 !important;
    box-shadow:0 1px 2px rgba(15,23,42,.06) !important;
    caret-color:#1d4ed8 !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) :is(#new-assignment-name, #new-assignment-mandays, #new-assignment-asset-category, #new-assignment-workflow-template, .new-assignment-input-box input[type="text"]):focus {
    background:var(--of-light-surface) !important;
    border-color:#2563eb !important;
    box-shadow:var(--of-shadow-focus-strong) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-modal-fit > div:has(> #new-assignment-asset-category) {
    background:#f8fbff !important;
    border-color:#bfdbfe !important;
    box-shadow:var(--of-shadow-surface-subtle) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-modal-fit > div:has(> #new-assignment-workflow-template) {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 1px 3px rgba(15,23,42,.06) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) #new-assignment-workflow-template ~ .mt-2 {
    background:#fffbeb !important;
    color:#92400e !important;
    border-color:#fcd34d !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) #new-assignment-workflow-template ~ .mt-3 > span {
    background:var(--of-light-surface-soft) !important;
    color:var(--of-light-text-secondary) !important;
    border-color:var(--of-light-border) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-input-box {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 1px 3px rgba(15,23,42,.06) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-input-box > button {
    background:var(--of-light-surface-soft) !important;
    color:var(--of-light-text-secondary) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-input-box > button:hover {
    background:#eff6ff !important;
    color:#1d4ed8 !important;
    border-color:#93c5fd !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-input-box .text-center.text-gray-500 {
    color:var(--of-light-text-muted) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-create-submit {
    background:#1d4ed8 !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
    box-shadow:0 8px 18px rgba(37,99,235,.18) !important;
  }

  html[data-theme="light"] #modal-container[data-modal-type="assignment"]:has(#new-assignment-asset-category) .new-assignment-create-submit:hover {
    background:#1e40af !important;
  }
}


/* asset_review_light_mode_v1_20260922:
   Asset Review follows the portal light theme on desktop, tablet and mobile.
   The actual media canvas stays dark/neutral for image and video judgement;
   surrounding review chrome, history, comments and markup controls become light. */
html[data-theme="light"] #review-workspace-root.review-asset-project {
  --of-text-main:var(--of-light-text-strong);
  --of-text-secondary:var(--of-light-text-secondary);
  --of-text-muted:var(--of-light-text-muted);
  --of-surface-base:var(--of-light-surface-soft);
  --of-surface-raised:var(--of-light-surface-raised);
  --of-surface-strong:#e2e8f0;
  --of-surface-input:var(--of-light-surface);
  --of-surface-tint:rgba(15,23,42,.055);
  --of-soft-surface:#eff6ff;
  --of-surface-hover:#e7edf4;
  --of-text-blue:#1d4ed8;
  --of-text-red:#b91c1c;
  --of-text-green:#166534;
  color:var(--of-light-text-strong) !important;
  background:var(--of-light-page-bg) !important;
  color-scheme:light;
}
html[data-theme="light"] #review-workspace-root.review-asset-project,
html[data-theme="light"] #review-workspace-root.review-asset-project * { color-scheme:light; }

html[data-theme="light"] #review-workspace-root.review-asset-project .review-workspace {
  background:var(--of-light-page-bg) !important;
  color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-workspace-header {
  background:var(--of-light-surface) !important;
  border-bottom-color:#d7dee8 !important;
  box-shadow:0 8px 24px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-header-thumb {
  background:var(--of-light-surface-soft) !important;
  border-color:var(--of-light-border) !important;
  color:#2563eb !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-header-kicker { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-header-identity h2 { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-close-btn {
  background:var(--of-light-surface-raised) !important;
  border-color:var(--of-light-border) !important;
  color:var(--of-light-text-secondary) !important;
  box-shadow:0 2px 8px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-close-btn:hover {
  background:#fee2e2 !important;
  border-color:#fca5a5 !important;
  color:#991b1b !important;
}

html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-history-panel,.review-details-panel) {
  background:var(--of-light-surface-soft) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-panel { border-right-color:#d7dee8 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-details-panel { border-left-color:#d7dee8 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-panel-title,.review-side-title) { color:var(--of-light-text-secondary) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-panel-title small {
  background:#e2e8f0 !important;
  border-color:var(--of-light-border) !important;
  color:#475569 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-filters button {
  background:var(--of-light-surface) !important;
  border-color:var(--of-light-border) !important;
  color:var(--of-light-text-secondary) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-filters button:hover { background:var(--of-light-surface-raised) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-filters button.is-active {
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#ffffff !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-item {
  background:var(--of-light-surface) !important;
  border-color:#d7dee8 !important;
  color:var(--of-light-text-strong) !important;
  box-shadow:var(--of-shadow-surface-subtle) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-item:hover { background:var(--of-light-surface-raised) !important; border-color:#94a3b8 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-item.is-selected {
  background:#eff6ff !important;
  border-color:#60a5fa !important;
  box-shadow:inset 3px 0 #2563eb !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-item.is-retake { border-color:#fecdd3 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-item.is-retake.is-selected {
  background:#fff1f2 !important;
  border-color:#fb7185 !important;
  box-shadow:inset 3px 0 #e11d48 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-thumb {
  background:var(--of-light-surface-soft) !important;
  border-color:var(--of-light-border) !important;
  color:#475569 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-history-file,.review-summary-file) { color:var(--of-light-text-secondary) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-history-meta,.review-summary-meta) { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-note { color:#be123c !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-history-counts span {
  background:var(--of-light-surface-raised) !important;
  border-color:var(--of-light-border) !important;
  color:#475569 !important;
}

html[data-theme="light"] #review-workspace-root.review-asset-project .review-viewer-panel { background:#e7edf4 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-compare-toolbar {
  background:var(--of-light-surface) !important;
  border-bottom-color:#d7dee8 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-version-select span { color:#475569 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-version-select select {
  background:var(--of-light-surface) !important;
  border-color:#94a3b8 !important;
  color:var(--of-light-text-strong) !important;
  box-shadow:var(--of-shadow-surface-subtle) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-version-select select:focus {
  border-color:#2563eb !important;
  outline:none !important;
  box-shadow:var(--of-shadow-focus-strong) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-mode-row>button,.review-tool-btn,.review-draw-toggle,.review-smooth-toggle,.review-shape-toggle,.review-eraser-toggle,.review-partial-eraser-toggle) {
  background:var(--of-light-surface-soft) !important;
  border-color:var(--of-light-border) !important;
  color:var(--of-light-text-secondary) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-mode-row>button,.review-tool-btn):hover:not(:disabled) { background:#e7edf4 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-mode-row>button.is-active,.review-tool-btn.is-active) {
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#ffffff !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-opacity-control { color:#475569 !important; }

/* Keep the reviewed media itself neutral/dark even while the review chrome is light. */
html[data-theme="light"] #review-workspace-root.review-asset-project .review-media-shell {
  background:#dfe6ee !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-media-stage,.review-side-by-side>div) {
  background:#070809 !important;
  border-color:#94a3b8 !important;
  color-scheme:dark;
}
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-media-stage,.review-side-by-side>div) * { color-scheme:dark; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-compare-label {
  background:#e7edf4 !important;
  border-bottom-color:var(--of-light-border) !important;
  color:var(--of-light-text-secondary) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-preview-strip {
  background:rgba(255,255,255,.94) !important;
  border-color:var(--of-light-border) !important;
  box-shadow:0 5px 16px rgba(15,23,42,.12) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-timeline-meta { color:var(--of-light-text-secondary) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-timeline-meta span { color:#be123c !important; }

/* Phase 5C2K2 — Asset Review markup/comments/details/action-footer neutral token reuse.
   Exact aliases only; accent/status colors and white text on solid controls stay literal. */
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-markup-toolbar,.review-compact-always-tools) {
  background:var(--of-light-surface) !important;
  border-color:#d7dee8 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-markup-toolbar-status {
  background:var(--of-light-surface-soft) !important;
  border-color:var(--of-light-border) !important;
  color:#475569 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-markup-mode-strip>button {
  background:var(--of-light-surface-soft) !important;
  border-color:var(--of-light-border) !important;
  color:var(--of-light-text-secondary) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-markup-mode-strip>button:hover:not(:disabled) { background:#e7edf4 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-markup-mode-strip>button.is-active {
  background:#dbeafe !important;
  border-color:#60a5fa !important;
  color:#1d4ed8 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-model-navigation-controls {
  background:var(--of-light-surface-soft) !important;
  border-color:var(--of-light-border) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-model-navigation-hint,
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-brush-size,.review-saved-toggle) { color:#475569 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-save-markup {
  background:#2563eb !important;
  border-color:#3b82f6 !important;
  color:#ffffff !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-brush-preview-wrap,.review-custom-color) {
  background:var(--of-light-surface-raised) !important;
  border-color:var(--of-light-border) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-markup-disabled {
  background:var(--of-light-surface-raised) !important;
  border-color:#d7dee8 !important;
  color:var(--of-light-text-muted) !important;
}

html[data-theme="light"] #review-workspace-root.review-asset-project .review-version-summary {
  background:var(--of-light-surface) !important;
  border-bottom-color:#d7dee8 !important;
  color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-note {
  background:#fff1f2 !important;
  border-color:#fecdd3 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-note strong { color:#be123c !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-note span { color:#881337 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-note small { color:#9f1239 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-attachments strong { color:#475569 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-attachments button {
  background:var(--of-light-surface-soft) !important;
  border-color:var(--of-light-border) !important;
  color:#1d4ed8 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-side-section { border-bottom-color:#d7dee8 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-comment-card,.review-markup-card) {
  background:var(--of-light-surface) !important;
  border-color:#d7dee8 !important;
  box-shadow:var(--of-shadow-surface-subtle) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-comment-head strong,.review-markup-card strong) { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-comment-head span,.review-markup-card span) { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-comment-text { color:var(--of-light-text-secondary) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-frame-chip {
  background:#eff6ff !important;
  border-color:#93c5fd !important;
  color:#1d4ed8 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-markup-summary { color:#475569 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-compose {
  background:var(--of-light-surface-soft) !important;
  border-top-color:#d7dee8 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-compose-title strong { color:#9f1239 !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-compose-title span,
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-upload-row>span,
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-compose-hint { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-compose textarea {
  background:var(--of-light-surface) !important;
  border-color:#94a3b8 !important;
  color:var(--of-light-text-strong) !important;
  caret-color:#be123c !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-upload-btn {
  background:var(--of-light-surface) !important;
  border-color:var(--of-light-border) !important;
  color:var(--of-light-text-secondary) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-upload-btn:hover { background:var(--of-light-surface-raised) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-file-item {
  background:var(--of-light-surface) !important;
  border-color:#d7dee8 !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-file-item span { color:var(--of-light-text-secondary) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-empty-small {
  border-color:var(--of-light-border) !important;
  color:var(--of-light-text-muted) !important;
  background:var(--of-light-surface) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-empty-main { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-empty-main strong { color:var(--of-light-text-secondary) !important; }

html[data-theme="light"] #review-workspace-root.review-asset-project :is(.review-details-actions,.review-action-footer) {
  background:var(--of-light-surface) !important;
  border-color:#d7dee8 !important;
  box-shadow:0 -8px 22px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-footer-info span { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-footer-info strong { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-download-btn {
  background:#334155 !important;
  border-color:#475569 !important;
  color:#ffffff !important;
}
html[data-theme="light"] #review-workspace-root.review-asset-project .review-retake-btn { color:#ffffff !important; }
html[data-theme="light"] #review-workspace-root.review-asset-project .review-approve-btn { color:#ffffff !important; }

/* Phase 5C2K3 — Asset Review tablet/mobile/fullscreen neutral token reuse.
   Compact Review chrome and the mobile custom-color sheet now reuse exact
   shared light-theme aliases; media-stage/status/accent colors stay unchanged. */
/* Compact Asset Review (tablet + mobile). */
@media (max-width:1100px) {
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-workspace {
    background:var(--of-light-page-bg) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-workspace-header {
    background:var(--of-light-surface) !important;
    border-bottom-color:#d7dee8 !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-close-btn {
    background:var(--of-light-surface-raised) !important;
    color:var(--of-light-text-secondary) !important;
    border:1px solid var(--of-light-border) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-header-selects .review-version-select select {
    background:var(--of-light-surface) !important;
    border-color:#94a3b8 !important;
    color:var(--of-light-text-strong) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-media-shell,
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-media-shell:has(.review-side-by-side) {
    background:#e2e8f0 !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-always-tools,
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-always-tools>.review-markup-toolbar {
    background:var(--of-light-surface) !important;
    border-color:#d7dee8 !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-tools-popover>.review-markup-toolbar,
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-tools-popover>.review-markup-disabled {
    background:var(--of-light-surface) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 18px 48px rgba(15,23,42,.18) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-mode-dock .review-mode-row {
    background:rgba(255,255,255,.96) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 12px 28px rgba(15,23,42,.12) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-mode-dock .review-mode-row>button {
    background:var(--of-light-surface-raised) !important;
    color:var(--of-light-text-secondary) !important;
    border-color:#e2e8f0 !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-mode-dock .review-mode-row>button.is-active {
    background:#2563eb !important;
    border-color:#60a5fa !important;
    color:#ffffff !important;
  }
}

@media (max-width:767px) {
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-workspace-header {
    background:rgba(255,255,255,.96) !important;
    border-bottom-color:#d7dee8 !important;
    box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-header-selects .review-version-select select,
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-header-selects .review-version-select select option {
    color-scheme:light !important;
    background:var(--of-light-surface) !important;
    color:var(--of-light-text-strong) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-header-selects .review-version-select select option:checked {
    background:#dbeafe !important;
    color:#1d4ed8 !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-header-selects .review-version-select select option:disabled { color:#94a3b8 !important; }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-tools-backdrop { background:rgba(15,23,42,.10) !important; }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-tools-popover>.review-markup-toolbar {
    background:rgba(255,255,255,.96) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 20px 54px rgba(15,23,42,.18) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-tools-popover .review-markup-mode-strip>button {
    background:var(--of-light-surface-raised) !important;
    border-color:#d7dee8 !important;
    color:var(--of-light-text-secondary) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-tools-popover .review-markup-mode-strip>button.is-active {
    background:#dbeafe !important;
    border-color:#60a5fa !important;
    color:#1d4ed8 !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-tools-popover :is(.review-color-row,.review-brush-size,.review-markup-toolbar-status,.review-model-navigation-controls) {
    background:var(--of-light-surface-soft) !important;
    border-color:#d7dee8 !important;
    color:var(--of-light-text-secondary) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-tools-popover .review-brush-size-value {
    background:#e2e8f0 !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-strong) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-mobile-action-dock {
    background:rgba(255,255,255,.96) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:0 12px 30px rgba(15,23,42,.13) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools {
    background:rgba(255,255,255,.97) !important;
    border-top-color:#d7dee8 !important;
    box-shadow:0 -8px 22px rgba(15,23,42,.08) !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools .review-mobile-tools-toggle {
    background:var(--of-light-surface-raised) !important;
    border-color:var(--of-light-border) !important;
    color:var(--of-light-text-secondary) !important;
    box-shadow:none !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools .review-mobile-tools-toggle.is-active {
    background:#dbeafe !important;
    border-color:#60a5fa !important;
    color:#1d4ed8 !important;
  }
  html[data-theme="light"] #review-workspace-root.review-asset-project.review-compact-asset-layout .review-retake-preview-strip.review-retake-timeline-inline-mobile {
    background:var(--of-light-surface-soft) !important;
    border-color:var(--of-light-border) !important;
    box-shadow:none !important;
  }
}

/* Review's mobile custom-color sheet is part of the Asset Review workflow too. */
html[data-theme="light"] body:has(#review-workspace-root.review-asset-project) .review-mobile-color-picker-overlay { background:rgba(15,23,42,.28) !important; }
html[data-theme="light"] body:has(#review-workspace-root.review-asset-project) .review-mobile-color-sheet {
  background:var(--of-light-surface) !important;
  border-color:var(--of-light-border) !important;
  color:var(--of-light-text-strong) !important;
  box-shadow:0 -18px 50px rgba(15,23,42,.18) !important;
}
html[data-theme="light"] body:has(#review-workspace-root.review-asset-project) .review-mobile-color-head span,
html[data-theme="light"] body:has(#review-workspace-root.review-asset-project) .review-mobile-color-current>span:last-child { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] body:has(#review-workspace-root.review-asset-project) .review-mobile-color-head button,
html[data-theme="light"] body:has(#review-workspace-root.review-asset-project) .review-mobile-color-current,
html[data-theme="light"] body:has(#review-workspace-root.review-asset-project) .review-mobile-color-cancel {
  background:var(--of-light-surface-soft) !important;
  border-color:var(--of-light-border) !important;
  color:var(--of-light-text-secondary) !important;
}

/* Work Monitor desktop: preserve the dark Project / Assignment header band in
   Light Mode, but keep its labels high-contrast and readable. */
@media (min-width:768px) {
  html[data-theme="light"] .work-monitor-desktop-table thead th[class*="bg-[#28364a]"] {
    color:#ffffff !important;
  }
}

/* project_groups_light_v1_20260922 */
/* Unselected project covers need full opacity against the light surface.
   Their selection ring still distinguishes the active project. */
html[data-theme="light"] .mobile-project-thumb {
  opacity:1 !important;
}
html[data-theme="light"] .project-group-folder-thumb {
  background:#e7edf5;
  border-color:#aebdce;
  box-shadow:0 5px 14px rgba(15,23,42,.10);
}
html[data-theme="light"] .project-group-folder-thumb::before { background:#2563eb; border-color:#60a5fa; }
html[data-theme="light"] .project-group-folder-badge { background:rgba(15,23,42,.72); color:#fff; }
html[data-theme="light"] .project-group-name { color:var(--of-light-text-strong); }
html[data-theme="light"] .project-group-cluster.is-expanded {
  background:#eef4fb;
  border-color:#93c5fd;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 6px 16px rgba(15,23,42,.08);
}
html[data-theme="light"] .project-group-inline-label { color:#1d4ed8; }
html[data-theme="light"] .project-group-child-type { background:var(--of-light-surface); border-color:var(--of-light-border); color:#475569; }
html[data-theme="light"] .project-group-add-project { background:var(--of-light-surface); color:#2563eb; border-color:#60a5fa; }
html[data-theme="light"] .project-group-add-project:hover { background:#dbeafe; color:#1d4ed8; }
html[data-theme="light"] .project-create-inside-group { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }
html[data-theme="light"] #modal-container[data-modal-type="project-create-choice"] .project-create-choice-modal {
  background:var(--of-light-surface) !important;
  border-color:var(--of-light-border) !important;
  color:var(--of-light-text-strong) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="project-create-choice"] .project-create-choice-modal h2,
html[data-theme="light"] #modal-container[data-modal-type="project-create-choice"] .project-create-choice-modal .text-white { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] #modal-container[data-modal-type="project-create-choice"] .project-create-choice-modal .text-gray-400 { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] #modal-container[data-modal-type="project-create-choice"] .project-create-choice-modal > button { background:var(--of-light-surface-raised) !important; color:var(--of-light-text-secondary) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] #modal-container[data-modal-type="project-create-choice"] .project-create-choice-card { background:var(--of-light-surface-soft) !important; border-color:var(--of-light-border) !important; }
html[data-theme="light"] #modal-container[data-modal-type="project-create-choice"] .project-create-choice-card:first-of-type { background:#eff6ff !important; border-color:#93c5fd !important; }
html[data-theme="light"] #modal-container[data-modal-type="project-create-choice"] .project-create-choice-icon { background:var(--of-light-surface); border-color:var(--of-light-border); }

/* New Group uses the same clear Light Mode treatment on desktop/tablet as the
   existing New Project window. Mobile keeps its full-screen layout below. */
html[data-theme="light"] #modal-container[data-modal-type="project-group"] .new-project-group-modal-fit {
  background:var(--of-light-surface) !important;
  color:var(--of-light-text-strong) !important;
  border-color:var(--of-light-border) !important;
  box-shadow:0 24px 60px rgba(15,23,42,.18) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="project-group"] .new-project-group-modal-fit h2 { color:var(--of-light-text-strong) !important; }
html[data-theme="light"] #modal-container[data-modal-type="project-group"] .new-project-group-modal-fit .text-gray-400 { color:var(--of-light-text-muted) !important; }
html[data-theme="light"] #modal-container[data-modal-type="project-group"] .new-project-group-modal-fit > button[onclick="closeModal()"] {
  background:var(--of-light-surface-raised) !important;
  color:var(--of-light-text-secondary) !important;
  border:1px solid var(--of-light-border) !important;
}
html[data-theme="light"] #modal-container[data-modal-type="project-group"] .project-group-create-picker {
  background:var(--of-light-surface-raised) !important;
  border-color:#94a3b8 !important;
  color:#475569 !important;
}
html[data-theme="light"] #modal-container[data-modal-type="project-group"] #new-project-group-name {
  background:var(--of-light-surface) !important;
  color:var(--of-light-text-strong) !important;
  border-color:#94a3b8 !important;
}
html[data-theme="light"] #modal-container[data-modal-type="project-group"] #new-project-group-name:focus {
  border-color:#2563eb !important;
  box-shadow:var(--of-shadow-focus-strong) !important;
}

@media (max-width:767px) {
  html[data-theme="light"] #modal-container[data-modal-type="project-group"] { background:var(--of-light-surface-raised) !important; }
  html[data-theme="light"] #modal-container[data-modal-type="project-group"] .new-project-group-modal-fit { background:var(--of-light-surface-soft) !important; color:var(--of-light-text-strong) !important; }
  html[data-theme="light"] #modal-container[data-modal-type="project-group"] .new-project-group-modal-fit h2 { color:var(--of-light-text-strong) !important; }
  html[data-theme="light"] #modal-container[data-modal-type="project-group"] .new-project-group-modal-fit .text-gray-400 { color:var(--of-light-text-muted) !important; }
  html[data-theme="light"] #modal-container[data-modal-type="project-group"] .new-project-group-modal-fit > button[onclick="closeModal()"] { background:#e2e8f0 !important; color:var(--of-light-text-secondary) !important; border:1px solid var(--of-light-border) !important; }
  html[data-theme="light"] #modal-container[data-modal-type="project-group"] .project-group-create-picker { background:var(--of-light-page-bg) !important; border-color:#94a3b8 !important; color:#475569 !important; }
  html[data-theme="light"] #modal-container[data-modal-type="project-group"] #new-project-group-name { background:var(--of-light-surface) !important; color:var(--of-light-text-strong) !important; border-color:#94a3b8 !important; }
  html[data-theme="light"] #modal-container[data-modal-type="project-group"] #new-project-group-name:focus { border-color:#2563eb !important; box-shadow:var(--of-shadow-focus-strong) !important; }
}

/* The expanded folder frame is a pseudo-element so it never resizes the strip. */
html[data-theme="light"] .project-group-cluster.is-expanded {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
html[data-theme="light"] .project-group-cluster.is-expanded::before {
    background: #eef4fb;
    border-color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 6px 16px rgba(15,23,42,.08);
}
/* Project group gallery follows the account appearance. */
html[data-theme="light"] .project-group-gallery { color:var(--of-light-text-strong); }
html[data-theme="light"] .project-group-gallery-eyebrow,
html[data-theme="light"] .project-group-gallery-empty,
html[data-theme="light"] .project-gallery-type { color:var(--of-light-text-muted); opacity:1; }
html[data-theme="light"] .project-group-gallery-count { border-color:var(--of-light-border); color:var(--of-light-text-secondary); }
html[data-theme="light"] .project-gallery-card { background:var(--of-light-surface); border-color:var(--of-light-border); color:var(--of-light-text-strong); }
html[data-theme="light"] .project-gallery-card:hover { border-color:var(--of-project-accent); }
html[data-theme="light"] .project-gallery-thumbnail { background:var(--of-light-surface-raised); }
html[data-theme="light"] .project-gallery-initials { color:var(--of-light-text-secondary); }
html[data-theme="light"] .project-gallery-create { background:var(--of-light-surface-soft); border-color:var(--of-status-info-border); }
html[data-theme="light"] .project-gallery-create .project-gallery-thumbnail { background:var(--of-status-info-bg); }
html[data-theme="light"] .project-gallery-plus { color:var(--of-status-info-text); }


/* Compact Account Settings actions on desktop and mobile. */
.account-settings-profile-actions,
.account-settings-actions-panel {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
}
.account-settings-profile-actions > button,
.account-settings-actions-panel > button {
    flex:1 1 0;
    min-width:0;
    width:auto;
    min-height:44px;
    padding:10px 8px;
    line-height:1.35;
}
.account-settings-actions-panel { align-self:start; }
.account-settings-modal .account-theme-card {
    flex-direction:row;
    align-items:center;
    gap:12px;
    min-height:0;
    padding:12px 16px;
}
.account-settings-modal .account-theme-switch {
    align-self:center;
    flex:0 0 142px;
}

/* Mobile Account Settings fills the viewport while the body scrolls. */
@media (max-width:767px) {
    #modal-container[data-modal-type="profile-settings"] {
        padding:0 !important;
        align-items:stretch !important;
        overflow:hidden;
    }
    #modal-container[data-modal-type="profile-settings"] .account-settings-modal {
        display:flex;
        flex-direction:column;
        width:100%;
        max-width:none;
        height:100vh;
        height:100dvh;
        max-height:none;
        margin:0;
        border:0;
        border-radius:0;
    }
    .account-settings-modal > .account-settings-header {
        flex-shrink:0;
        padding-top:calc(16px + env(safe-area-inset-top, 0px));
        padding-left:calc(20px + env(safe-area-inset-left, 0px));
        padding-right:calc(20px + env(safe-area-inset-right, 0px));
    }
    .account-settings-modal > .account-settings-header + div {
        flex:1 1 0;
        min-height:0;
        max-height:none;
        overflow-y:auto;
        overscroll-behavior:contain;
        padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
        padding-left:calc(20px + env(safe-area-inset-left, 0px));
        padding-right:calc(20px + env(safe-area-inset-right, 0px));
    }
}

/* Keep Account Settings compact on phones while retaining scroll on short screens. */
@media (max-width:767px) {
    #modal-container[data-modal-type="profile-settings"] .account-settings-header {
        padding:calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    }
    .account-settings-modal .account-settings-title { font-size:18px; line-height:1.3; }
    #modal-container[data-modal-type="profile-settings"] .account-settings-header + div {
        padding:10px calc(12px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
    }
    .account-settings-modal > .account-settings-header + div > * + * { margin-top:8px; }
    .account-settings-modal > .account-settings-header + div > div:first-child {
        padding:10px; gap:10px; border-radius:var(--of-radius-lg);
    }
    .account-settings-modal > .account-settings-header + div > div:first-child > div:first-child { gap:12px; }
    .account-settings-modal > .account-settings-header + div > div:first-child .relative > :is(img,div) { width:52px; height:52px; }
    .account-settings-modal .account-settings-role-badge { margin-top:4px; padding:2px 9px; }
    .account-settings-modal .account-settings-profile-actions > button { padding:8px 6px; min-height:40px; font-size:11px; }
    .account-settings-modal .account-theme-card { padding:8px 12px; gap:8px; border-radius:var(--of-radius-lg); }
    .account-settings-modal .account-theme-switch { width:142px; height:40px; flex-basis:142px; }
    .account-settings-modal .account-theme-thumb { top:4px; height:30px; }
    .account-settings-modal .account-settings-name-panel,
    .account-settings-modal .account-settings-actions-panel { padding:10px 12px; border-radius:var(--of-radius-lg); }
    .account-settings-modal .account-settings-name-panel > div.border-t { margin-top:10px; padding-top:10px; }
    .account-settings-modal .account-settings-name-panel .mb-3 { margin-bottom:6px; }
    .account-settings-modal .account-settings-name-panel .w-9 { width:26px; height:26px; border-radius:var(--of-radius-sm); }
    .account-settings-modal .account-settings-name-panel input { height:40px; padding:7px 10px; font-size:16px; border-radius:var(--of-radius-control); }
    .account-settings-modal .account-settings-name-panel .space-y-3 > * + * { margin-top:8px; }
    .account-settings-modal .account-settings-name-panel #account-settings-save { margin-top:10px; min-height:40px; padding:8px 10px; }
    .account-settings-modal .grid.gap-5 { gap:8px; }
    .account-settings-modal .account-settings-actions-panel > button,
    .account-settings-modal .account-settings-logout { min-height:40px; padding:8px 10px; }
}

/* Bell notifications: the desktop layout keeps its original anchored dropdown.
   Override only the mobile viewport, without relying on new Tailwind utilities. */
@media (max-width: 767px) {
    .of-notifications-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    .of-notifications-panel > .overflow-y-auto {
        min-height: 0;
    }
}