/* Account dropdown follows the supplied reference; no external icon or UI assets. */
.topbar-actions { gap:20px }
.header-import { display:flex; align-items:center; gap:8px; border:1px solid #292c2e; border-radius:20px; padding:7px 16px; font-size:13px; font-weight:600 }
.header-import:disabled { opacity:.65; cursor:not-allowed }
[data-profile-icon] { display:inline-flex; width:16px; height:16px; flex-shrink:0 }
[data-profile-icon] svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.profile-control { position:relative; flex-shrink:0 }
.profile-avatar { position:relative; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #414348; border-radius:50%; background:#343039; color:#e6c6e1; overflow:hidden; flex-shrink:0; font-size:13px; font-weight:600 }
.profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.profile-menu { position:absolute; z-index:20; top:calc(100% + 12px); right:-8px; width:228px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 80px); overflow-y:auto; border:1px solid #36383b; border-radius:8px; background:#242729; color:#b5b6b9; box-shadow:0 10px 24px #0005; font-size:14px; line-height:1.4 }
.profile-heading { display:flex; align-items:center; gap:8px; padding:9px 16px 13px; border-bottom:1px solid #37393c; min-height:62px }
.profile-heading>div { min-width:0 }
.profile-heading strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600 }
.profile-heading small { display:flex; align-items:center; gap:4px; margin-top:3px; color:#86888d; font-size:13px }
.profile-owner { width:11px; height:11px; color:#aa60ee }
.profile-menu button:not([data-theme-choice]) { display:flex; align-items:center; gap:9px; width:100%; padding:9px 16px; text-align:left; font-size:14px; font-weight:600; line-height:18px }
.profile-menu button:not(:disabled):hover { background:#303436; color:#f2f3f5 }
.profile-menu button:focus-visible { outline:2px solid #7297ff; outline-offset:-3px }
.profile-menu button:disabled { opacity:.6; cursor:not-allowed }
.profile-links { padding:4px 0 5px; border-bottom:1px solid #37393c }
.profile-preferences { padding:4px 0 8px; border-bottom:1px solid #37393c }
#profile-language { color:#e0e1e4; letter-spacing:.3px }
.profile-chevron { margin-left:auto; color:#85888b; font-size:22px; font-weight:400 }
#profile-languages { margin:0 8px 8px; padding:9px; border-radius:6px; background:#303436; font-size:12px }
#profile-languages small { display:block; margin-top:5px; color:#a1a5aa; line-height:1.5 }
.profile-themes { display:flex; margin:4px 8px 0; padding:2px; border-radius:10px; background:#303436 }
.profile-themes button { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 0 3px; border-radius:8px; font-size:12px; color:#a1a5aa }
.profile-themes button[aria-pressed=true] { background:#242729; color:#f1f2f4; box-shadow:0 1px 4px #0002 }
#profile-logout { color:#ff334e; padding-block:11px }
#profile-logout:hover { color:#ff657a; background:#35252b }
@media(max-width:460px) { .topbar-actions { gap:12px }.header-import { padding:6px 10px; font-size:11px }.breadcrumb { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.breadcrumb span { margin-inline:5px }.topbar { gap:10px } }

/* Light mode changes studio chrome, never the user's rendered overlay or OBS output. */
html[data-theme=light] { color-scheme:light; --bg:#f4f5f7; --surface:#fff; --surface-raised:#edf0f3; --border:#d5d9df; --muted:#596474; --text:#202936; --green:#416c17; --green-dark:#e4eedb }
html[data-theme=light] body.has-account { background:#f4f5f7 }
html[data-theme=light] :is(.sidebar,.topbar,.panel,.editor-panel,.editor-toolbar,.canvas-workspace,.settings-card,.overlay-card,.connection-panel) { background:#fff; border-color:#d5d9df; color:#202936 }
html[data-theme=light] :is(.breadcrumb strong,.nav-item,.workspace,.connection-copy h3,.settings-card h3,.panel-heading h3) { color:#283342 }
html[data-theme=light] :is(.nav-item.active,.nav-item:hover:not(.active),.button.secondary,.build-card,.roadmap) { background:#e9efdf; border-color:#c4d1b6; color:#344524 }
html[data-theme=light] :is(.eyebrow,.subtitle,.local-status,.build-card p,.brand small,.settings-card p,.settings-card dt,.settings-card li) { color:#596474 }
html[data-theme=light] #studio :is(input,textarea,select) { background:#fff; color:#202936; border-color:#c7cdd5 }
html[data-theme=light] #page-dashboard { --green:#3864ce; --border:#d5d9df; --surface:#fff; --text:#202936; --muted:#596474 }
html[data-theme=light] #page-dashboard :is(.panel,.metric-card) { background:#fff; border-color:#d5d9df }
html[data-theme=light] #page-dashboard :is(.metric-icon,.chart-toolbar,.activity-heading,.control-heading,.chart-footer) { border-color:#d5d9df }
html[data-theme=light] #page-dashboard :is(.segmented,.period-switch,.category-search) { background:#e9edf2; border-color:#c7cdd5 }
html[data-theme=light] #page-dashboard :is(.segmented button,.period-switch button,.chart-tabs button,.secondary) { color:#49566b }
html[data-theme=light] #page-dashboard .segmented button[aria-pressed=true] { background:#fff; color:#2349a5 }
html[data-theme=light] #page-dashboard .chart-tabs button[aria-pressed=true] { color:#2349a5 }
html[data-theme=light] #page-dashboard :is(.metric-card p,.chart-empty p,.chart-axis,.chart-scale,.micro-note,.category-results p,.activity-empty) { color:#596474 }
html[data-theme=light] #page-dashboard .chart-empty p { background:#fffffff2 }
html[data-theme=light] #page-dashboard .chart-area { background-image:radial-gradient(#b2c5e0 .8px,transparent .8px) }
html[data-theme=light] #page-dashboard :is(#chart-measure,#chart-measure option) { color:#202936; background:#fff }
html[data-theme=light] .profile-menu { background:#fff; border-color:#d5d9df; color:#424b57 }
html[data-theme=light] :is(.profile-heading,.profile-links,.profile-preferences) { border-color:#d5d9df }
html[data-theme=light] :is(.profile-themes,#profile-languages) { background:#edf0f3 }
html[data-theme=light] .profile-themes button { color:#596474 }
html[data-theme=light] .profile-themes button[aria-pressed=true] { background:#fff; color:#202936 }
html[data-theme=light] #profile-language { color:#202936 }
html[data-theme=light] .profile-menu button:not(:disabled):hover { background:#edf0f3; color:#202936 }
html[data-theme=light] #profile-logout:hover { color:#d9213b }
html[data-theme=light] .header-import { border-color:#c7cdd5 }