/* Final semantic palette. Opaque surfaces keep labels readable over any wallpaper. */
:root:is([data-theme],[data-palette]) {
 --ui-canvas:#07090d; --ui-panel:#10141c; --ui-card:#181e29; --ui-control:#222b3a;
 --ui-text:#f2f5fa; --ui-muted:#aebbd0; --ui-icon:#b8c8e0; --ui-border:#323e51;
 --ui-hover:#283346; --ui-active:#263b5c; --ui-active-text:#c9deff; --ui-link:#99c2ff;
 --ui-outgoing:#223754; --ui-danger:#ff9aab;
}
:root[data-theme=day] {
 --ui-canvas:#edf1f7; --ui-panel:#ffffff; --ui-card:#f4f6fa; --ui-control:#e8edf5;
 --ui-text:#172235; --ui-muted:#516078; --ui-icon:#4e6383; --ui-border:#ced7e5;
 --ui-hover:#dce5f1; --ui-active:#dde9fc; --ui-active-text:#204c87; --ui-link:#275cac;
 --ui-outgoing:#dfebfc; --ui-danger:#b42340;
 color-scheme:light;
}
:root[data-palette=gray] {
 --ui-canvas:#20242b; --ui-panel:#2c323c; --ui-card:#353d49; --ui-control:#414c5c;
 --ui-text:#f5f7fb; --ui-muted:#c2ccdb; --ui-icon:#c2d2e9; --ui-border:#576476;
 --ui-hover:#49586e; --ui-active:#3c526f; --ui-active-text:#e1edff; --ui-link:#b6d3ff;
 --ui-outgoing:#3b506e; --ui-danger:#ffb2bf;
 color-scheme:dark;
}
:root:is([data-theme],[data-palette]) {
 --bg:var(--ui-canvas); --pan:var(--ui-panel); --pan2:var(--ui-card); --in:var(--ui-control);
 --tx:var(--ui-text); --tx2:var(--ui-muted); --line:var(--ui-border); --hov:var(--ui-hover);
 --sel:var(--ui-active); --acc:var(--ui-link); --red:var(--ui-danger);
 --frost-glass:var(--ui-card); --frost-control:var(--ui-control);
 --frost-icon:var(--ui-icon); --frost-muted:var(--ui-muted);
}
:root:is([data-theme],[data-palette]) body {background-color:var(--ui-canvas);color:var(--ui-text)}
:root:is([data-theme],[data-palette]) #app {background:var(--ui-canvas);gap:8px}
:root:is([data-theme],[data-palette]) :is(#workspace,#side,#details,#main) {
 background-color:var(--ui-panel);border-radius:var(--user-radius,18px);box-shadow:none;
 backdrop-filter:none;
}
:root:is([data-theme],[data-palette]) #side {overflow:hidden}
:root:is([data-theme],[data-palette]) #titlebar {background:var(--ui-canvas);color:var(--ui-muted)}
:root:is([data-theme],[data-palette]) :is(#head,#comp,.profile-heading,.settings-nav,.profile-sidebar) {background:var(--ui-panel);color:var(--ui-text)}
:root:is([data-theme],[data-palette]) :is(.reference-home,.reference-directory,.full-profile-layout,.profile-shell) {background:var(--ui-panel);color:var(--ui-text)}
:root:is([data-theme],[data-palette]) :is(.md,.menu,.toast,.cc) {background:var(--ui-panel);color:var(--ui-text);border-color:var(--ui-border)}
:root:is([data-theme],[data-palette]) :is(.md.settings-window,.md.profile-full,.md.profile-friend,.reference-group-dialog,.reference-wizard) {
 background:var(--ui-panel);border-radius:var(--user-radius,18px);overflow:hidden;backdrop-filter:none;
}
:root:is([data-theme],[data-palette]) .full-profile-layout {gap:0;border-radius:inherit}
:root:is([data-theme],[data-palette]) :is(.settings-card,.profile-card,.channel-card,.reference-form-card,.reference-action,.reference-account,
 .reference-recent button,.reference-channel-card,.detail-bio,.profile-stats>div,.premium-hero,.premium-lab,.premium-plans section,
 .audio-card,.camera-settings,.fc,.vp,.channel-pinned,.detail-file,.library-file) {background:var(--ui-card);color:var(--ui-text);border-color:var(--ui-border)}
:root:is([data-theme],[data-palette]) :is(.sec,.profile-actions button,.channel-profile-action,.channel-owner-tools button,.channel-media-more,
 .settings-bio,.settings-search,.settings-select,.sbox,.solo,.fld,.language-search,.language-current,.language-option,
 #cin,#crec,.profile-tabs,.channel-library-tabs,.premium-folder-tabs) {background:var(--ui-control);color:var(--ui-text);border-color:var(--ui-border)}
:root:is([data-theme],[data-palette]) :is(.workspace-menu button,.settings-menu button,.settings-themes button,.tabs button,.premium-folder-tabs button,
 .profile-tabs button,.channel-library-tabs button,.reference-action small,.reference-recent small,.channel-library-empty,
 .settings-row-icon,.settings-value,.settings-chevron,.tg small,.sub,.r2 span,.r1 time,.hi small,.mt,.meta,.channel-post-meta,
 .profile-identity small,.profile-identity p,.profile-sidebar p,.profile-card p,.profile-stats small,.channel-profile-description p,
 .channel-profile-identity small,.channel-detail-row small,.channel-detail-row b,.channel-profile-stats small,
 .detail-bio,.sbox input::placeholder,#txt::placeholder,.solo::placeholder) {color:var(--ui-muted)}
:root:is([data-theme],[data-palette]) :is(.rb b,.r1>b,#details h4,.channel-profile-heading,.channel-profile-description>small,
 .channel-profile-stats b,.profile-identity h2,.profile-sidebar h2) {color:var(--ui-text)}
:root:is([data-theme],[data-palette]) :is(.ib,.workspace-menu button>span:first-child,.channel-detail-icon,.channel-profile-stats svg) {color:var(--ui-icon)}
:root:is([data-theme],[data-palette]) :is(.tabs button.on,.premium-folder-tabs button.on,.workspace-menu button.on,.settings-menu button.on,
 .profile-tabs button.on,.channel-library-tabs button.on,.channel-profile-action.on,.language-option.on) {
 background:var(--ui-active);color:var(--ui-active-text);box-shadow:none;
}
:root:is([data-theme],[data-palette]) :is(.row.on,.row.on:hover) {background:var(--ui-active)}
:root:is([data-theme],[data-palette]) :is(.sec:hover,.workspace-menu button:hover,.settings-menu button:hover,.row:hover,.profile-tabs button:hover,
 .channel-profile-action:hover,.channel-library-tabs button:hover,.premium-folder-tabs button:hover) {background:var(--ui-hover);color:var(--ui-text)}
:root:is([data-theme],[data-palette]) :is(.workspace-menu button.on,.settings-menu button.on)>span:first-child {color:var(--ui-active-text);filter:none}
:root:is([data-theme],[data-palette]) :is(.bub,.channel-post.bub) {background:var(--ui-card);color:var(--ui-text);backdrop-filter:none}
:root:is([data-theme],[data-palette]) .me .bub {background:var(--ui-outgoing)}
:root:is([data-theme],[data-palette]) :is(.mn,.channel-post-name,.channel-link,.settings-link) {color:var(--ui-link)}
:root:is([data-theme],[data-palette]) .day {background:var(--ui-control);color:var(--ui-muted);backdrop-filter:none}
/* These labels sit directly on user photos: use a fixed opaque pair, independent of theme. */
:root:is([data-theme],[data-palette]) .ph span {display:inline-block;background:#182233;color:#f5f8ff;padding:8px 16px;border-radius:999px}
:root:is([data-theme],[data-palette]) .profile-hero .cover-button {background:#f8faff;color:#1c2b42;opacity:1;border:1px solid #ccd7e7;border-radius:999px;box-shadow:0 2px 12px #0003}
:root:is([data-theme],[data-palette]) .profile-hero .cover-button:hover {background:#e3ecfa;color:#172235}
:root:is([data-theme],[data-palette]) .profile-identity {align-items:flex-start}
:root:is([data-theme],[data-palette]) .profile-identity>.profile-identity-copy {align-self:flex-start;padding-top:55px;min-width:0}
:root:is([data-theme],[data-palette]) .profile-friend .profile-identity>.profile-identity-copy {padding-top:40px}
:root:is([data-theme],[data-palette]) .profile-identity h2 {overflow-wrap:anywhere}
:root:is([data-theme],[data-palette]) .reference-hero>div {background:#101a2b;color:#f5f8ff}
:root:is([data-theme],[data-palette]) .reference-hero p {color:#c2cfe2}
:root:is([data-theme],[data-palette]) :is(.danger,.red,.settings-row.danger) {color:var(--ui-danger)}
:root:is([data-theme],[data-palette]) button:focus-visible,:root:is([data-theme],[data-palette]) input:focus-visible,:root:is([data-theme],[data-palette]) textarea:focus-visible,:root:is([data-theme],[data-palette]) select:focus-visible {
 outline:2px solid var(--ui-link);outline-offset:3px;
}
:root:is([data-theme],[data-palette]) :is(input,textarea,select) {color:var(--ui-text)}
:root:is([data-theme],[data-palette]) button:disabled {cursor:not-allowed}
:root[data-contrast=true] {--ui-muted:var(--ui-text)}
/* Preserve the explicit icon-color preference while keeping theme defaults readable. */
:root[data-icon-color=accent] :is(.ib,.settings-row-icon) {color:var(--brand)}
:root[data-icon-color=mono] .ib {color:var(--ui-text)}

:root:is([data-theme],[data-palette]) input::placeholder {color:var(--ui-muted);opacity:1}

:root:is([data-theme],[data-palette]) .premium-folder-tabs {margin:4px 6px 8px;padding:7px;border-radius:16px;gap:7px}
:root:is([data-theme],[data-palette]) .premium-folder-tabs button {border-radius:999px}
:root:is([data-theme],[data-palette]) :is(.reference-channel small,.reference-detail-profile small,.profile-stats small) {color:var(--ui-muted)}
:root:is([data-theme],[data-palette]) .frost-call-aside section {background:var(--ui-panel);color:var(--ui-text);backdrop-filter:none}
:root:is([data-theme],[data-palette]) :is(.frost-call-aside header .sec,.frost-call-count,#frostCallQuality,.reference-call-expanded .reference-call-header .ib) {background:var(--ui-control);color:var(--ui-text)}
:root:is([data-theme],[data-palette]) :is(.frost-call-metric,.frost-call-member small,.frost-call-title time,.frost-call-aside .tg) {color:var(--ui-muted)}
:root:is([data-theme],[data-palette]) .frost-call-metric b {color:var(--ui-text)}
:root:is([data-theme],[data-palette]) .reference-call-expanded .reference-call-controls button small {color:var(--ui-text)}

/* Small primary labels need stronger contrast than the old bright-blue fill. */
:root:is([data-theme],[data-palette]) .pri {background:#2464cc!important;color:#ffffff!important}
:root:is([data-theme],[data-palette]) .pri:hover {background:#1f57b4!important}
:root:is([data-theme],[data-palette]) .bdg:not(.mu) {background:#2464cc;color:#ffffff}