:root[data-theme=dark]{color-scheme:dark;--surface:#151823;--surface-alt:#202537;--ink:#edf0f8;--soft:#aeb7ca;--line:#333b50;--page:#0c0f17;--accent:#b5a6ff}
:root[data-theme=light]{color-scheme:light;--surface:#fff;--surface-alt:#edf0f8;--ink:#17223b;--soft:#56647d;--line:#d9dfeb;--page:#f3f5fb;--accent:#6444c9;--bg:#f3f5fb;--sidebar:#fff;--card:#fff;--card-hover:#f1f3fa;--border:#d9dfeb;--text:#17223b;--muted:#56647d;--primary-light:#6444c9}
html[data-theme] body{background:var(--page)!important;color:var(--ink)!important}
.theme-switch{position:fixed;right:16px;top:8px;z-index:1100;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:20px;font-size:11px;padding:6px 10px;cursor:pointer;box-shadow:0 2px 10px #0001}
.account-menu{position:relative;max-width:340px;margin:8px 0 14px;color:var(--ink);}
.account-menu>.account-box{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.account-menu>.account-box::-webkit-details-marker{display:none}.account-info{display:grid;gap:4px}.account-info span{font-size:11px;color:var(--soft)}.account-avatar{display:grid;place-items:center;border-radius:12px;background:#7453ed;color:white;min-width:36px;height:38px}
.account-dropdown{display:none;position:absolute;bottom:100%;left:0;width:max(100%,210px);max-width:calc(100vw - 32px);z-index:1000;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 36px #0004}
.account-menu:hover .account-dropdown,.account-menu:focus-within .account-dropdown,.account-menu.is-open .account-dropdown{display:grid!important}
.account-dropdown a,.account-dropdown button{padding:12px!important;text-align:left;background:none;border:0;border-radius:7px;color:var(--ink)!important;font:inherit;font-size:13px;cursor:pointer;text-decoration:none}
.account-dropdown a:hover,.account-dropdown button:hover{background:var(--surface-alt)}
.personal-page>.account-menu .account-dropdown{bottom:auto;top:100%}
.feature-form{display:grid;gap:18px;max-width:760px}.feature-form label{display:grid;gap:8px}.feature-form input,.feature-form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid var(--line);background:var(--surface-alt);color:var(--ink);font:inherit}.feature-form fieldset{border:1px solid var(--line);padding:14px;border-radius:10px;max-height:280px;overflow:auto}.feature-form .recipient-choice{display:flex;align-items:center;padding:8px}.feature-form input[type=checkbox]{width:auto}.profile-grid{display:grid;grid-template-columns:minmax(130px,1fr) 2fr;gap:16px;margin-bottom:24px}.profile-grid dt{color:var(--soft)}.profile-grid dd{overflow-wrap:anywhere}.create-user-form label{display:grid;gap:6px;font-size:12px}.create-user-form{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}
html[data-theme] :is(.sidebar,.admin-card,.stat-card,.task-card,.modal-content,.login-card,.personal-item,.music-folder,.account-box){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme] :is(input,textarea,select){background-color:var(--surface-alt);color:var(--ink);border-color:var(--line)}
html[data-theme] :is(.user-table th,.user-table td){color:var(--ink);border-color:var(--line);background:var(--surface)}
html[data-theme] :is(.personal-muted,.welcome,.stat-card span,.account-info span,.user-table small){color:var(--soft)}
html[data-theme=light] :is(.secondary-link,.personal-nav a,.incoming-heading a,.incoming-count,.small-button,.music-folder strong){color:var(--accent)}
html[data-theme=light] :is(.small-button,.task-content,.search-box,.filter-tabs,.task-list){background-color:var(--surface)}
html[data-theme] .studio{background:var(--page);color:var(--ink)}
html[data-theme] .studio :is(.topbar,.metric,.panel,.channel-spotlight,.result-card,.discovery-search,.table-search,.period-pill,.copy-uri,.table-empty,.chart-footer,.setup-banner,.channel-selector,.cloud-card){background:var(--surface)!important;color:var(--ink);border-color:var(--line)}
html[data-theme] .studio :is(th,td,.selected-row td){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme] .studio :is(h1,h2,h3,strong,.metric-value,.channel-cell){color:var(--ink)}
html[data-theme] .studio :is(p,small,.data-note,.section-label,.workspace-label,.credit,.breadcrumb,.metric-label,.spot-stats div,.empty p,.table-search,.chart-footer){color:var(--soft)}
html[data-theme] .studio .sidebar :is(a,button){color:var(--soft)}
html[data-theme] .studio .sidebar :is(.nav-active,a:hover,button:hover){background:var(--surface-alt);color:var(--accent)}
html[data-theme] .studio-dialog{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme] .studio-dialog :is(input,label,p,code){color:var(--ink)}
html[data-theme] :is(.oauth-instructions,.copy-uri){background:var(--surface-alt);border-color:var(--line)}
html[data-theme] #st-collaboration :is(#st-chat-panel,.st-chat-header,.st-peer-header,#st-chat-messages,.st-contact,#st-chat-form){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme] #st-collaboration :is(input,textarea){background:var(--surface-alt);color:var(--ink);border-color:var(--line)}
html[data-theme] #st-collaboration :is(.st-chat-help,.st-contact small,#st-peer-status){color:var(--soft)}
html[data-theme] #st-collaboration .st-message{background:var(--surface-alt);color:var(--ink)}
html[data-theme] #st-collaboration .st-message.mine{background:#6847cb;color:white}
html[data-theme] .flash.error{color:#e36775}html[data-theme=light] .flash.error{color:#a9223a}
@media(max-width:768px){.sidebar .account-menu{min-width:44px}.sidebar .account-menu .account-info{display:none}.sidebar .account-menu>.account-box{padding:4px}.sidebar .account-dropdown{position:fixed;bottom:80px;left:12px;width:235px}.feature-form{padding:18px}.profile-grid{grid-template-columns:1fr;gap:8px}.profile-grid dd{margin-bottom:12px}}
html[data-theme] .studio :is(.chart-panel,.table-panel,.panel-header){background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-theme] .studio :is(.btn-neutral,.dialog-close){background:var(--surface-alt);color:var(--ink);border-color:var(--line)}
html[data-theme] .studio .chart-wrap svg text{fill:var(--soft)}
html[data-theme] .studio .chart-wrap svg line{stroke:var(--line)}
html[data-theme=light] :is(.task-title,.admin-card-title h2,.form-group label,.login-header h1){color:var(--ink)}
@media(max-width:1100px){.app>.sidebar .sidebar-bottom{display:block}.app>.sidebar .logout-button{font-size:10px;padding:8px 0}.app>.sidebar .account-info{display:none}}
html[data-theme] .login-screen{background:var(--page)}
html[data-theme] :is(.login-box,.login-input){background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-theme] .login-heading h1{color:var(--ink)}
.theme-switch{z-index:10001}
@media(max-width:768px){.app>.sidebar .account-dropdown{left:76px;width:230px;max-width:calc(100vw - 88px)}}

.account-menu>.account-box{width:100%;text-align:left;font:inherit;color:var(--ink)}

/* Inputs embedded in a decorated wrapper must not paint a second rectangle. */
html[data-theme] :is(.search-box,.table-search,.login-input) input{background:transparent!important;box-shadow:none;border:0}
html[data-theme] .studio .channel-selector{background:transparent!important}
html[data-theme] .studio .channel-selector select{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--surface)!important}
html[data-theme] .studio .channel-selector option{background:var(--surface);color:var(--ink)}
html[data-theme] .theme-switch{width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:21px;line-height:1;border-radius:50%;background:var(--surface);color:var(--ink)}
.account-dropdown [data-theme-toggle]{font-size:21px;text-align:center}
.create-user-form{align-items:end;gap:12px!important}
.create-user-form label{min-width:0;display:grid;gap:8px;font-size:12px}
.create-user-form :is(input,select){height:42px!important;min-height:42px;max-height:42px;width:100%;min-width:0;margin:0;box-sizing:border-box;padding:0 12px;line-height:normal}
.create-user-form>.primary-button{height:42px;min-height:42px;align-self:end;padding:0 14px}
@media(min-width:1200px){.create-user-form{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media(max-width:600px){.create-user-form{grid-template-columns:1fr!important}}

html[data-theme] .theme-switch{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink);padding:4px;flex-shrink:0}
html[data-theme] .theme-switch.theme-inline{position:static;inset:auto;z-index:auto}
.dashboard-heading-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.studio .top-right{display:flex;align-items:center;gap:12px}
.theme-switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.smg-logo{width:140px;height:44px;display:block;flex-shrink:0}
html[data-theme=light] .smg-logo{filter:brightness(0)}
.sidebar .smg-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none;margin-bottom:30px}
.sidebar .smg-brand-name{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:0;line-height:1.3}
.studio .metrics.four-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1200px){.studio .metrics.four-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.studio .metrics.four-metrics{grid-template-columns:1fr}}
@media(max-width:1100px){.app>.sidebar .smg-logo{width:44px;height:30px}.app>.sidebar .smg-brand-name{display:none}}

.sidebar .smg-brand{align-items:center;justify-content:center;width:100%}.stat-card[data-filter]{cursor:pointer}.stat-card[data-filter]:focus-visible,.stat-card[data-filter].active{outline:2px solid var(--primary);outline-offset:2px}

.studio .metrics.four-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}.metric-trend{display:block;font-size:11px;margin-top:8px;color:var(--soft);line-height:1.5}.metric-trend.up{color:#299569}.metric-trend.down{color:#de5869}.channel-revenue{min-width:175px}.channel-revenue>small{display:block;font-size:11px;max-width:220px}.studio .metric-value{overflow-wrap:anywhere}@media(max-width:1400px){.studio .metrics.four-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.studio .metrics.four-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:660px){.studio .metrics.four-metrics{grid-template-columns:1fr}}
/* Keep trend status colors above the shared small-text theme rule. */
html[data-theme=light] .studio .metric-trend.up{color:#167344}
html[data-theme=light] .studio .metric-trend.down{color:#bf2938}
html[data-theme=dark] .studio .metric-trend.up{color:#4ade80}
html[data-theme=dark] .studio .metric-trend.down{color:#fb7185}
html[data-theme] .studio .metric-trend.flat{color:var(--soft)}

.creation-tabs{display:flex;gap:8px;margin-bottom:20px}.creation-tabs button{flex:1;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--surface-alt);color:var(--ink);cursor:pointer}.creation-tabs [aria-selected=true]{background:#7251db;color:white}.creation-tabs[hidden],#taskForm[hidden],#popupReminder[hidden]{display:none!important}#taskModal .modal-content{max-height:90vh;overflow-y:auto}#popupReminder .recipient-list{max-height:150px;overflow:auto}#popupReminder>a{display:block;margin-top:15px;color:var(--accent);font-size:12px}.studio .studio-logout{display:block;text-align:center;padding:10px;margin:12px 0;border:1px solid var(--line);border-radius:8px;color:var(--ink)}

/* Keep uploaded account photos inside a fixed flex item on every workspace. */
.account-menu .account-avatar{box-sizing:border-box;flex:0 0 38px;width:38px;min-width:38px;max-width:38px;height:38px;overflow:hidden}
.account-menu .account-avatar img{display:block;width:38px;height:38px;max-width:100%;object-fit:cover;border-radius:inherit}
.account-menu .account-info{min-width:0;flex:1;overflow-wrap:anywhere}