/* Sota Kece colour system. User preferences may override the --sota-user-* tokens. */
:root {
 --sota-page-accent:var(--sota-user-accent,#5a2d91);
 --sota-page-accent-alt:var(--sota-user-accent-alt,#007789);
 --sota-page-on-accent:var(--sota-user-on-accent,#fff);
 --sota-page-surface:var(--sota-user-surface,#fffaf2);
 --sota-page-surface-alt:var(--sota-user-surface-alt,#edf8fb);
 --sota-page-ink:var(--sota-user-ink,#203c53);
 --sota-page-muted:var(--sota-user-muted,#496278);
 --sota-page-line:var(--sota-user-border,#b9bedb);
 --sota-page-focus:var(--sota-user-focus,#38206d);
 --sota-page-warm:#fff0b5;--sota-page-coral:#ffe0d8;--sota-page-mint:#d9f3e8;--sota-page-lilac:#ede3ff;
}

/* Signed-in navigation and everyday pages. Personal room artwork keeps its own palette. */
#app:not(.bv-welcome) header.top {
 background:linear-gradient(105deg,#d8f7ee,#fff0b5 48%,#f7e0f4);
 border:1px solid var(--sota-page-line);border-bottom:4px solid var(--sota-page-accent-alt);
 color:var(--sota-page-ink);box-shadow:0 4px 18px #34255d18;
}
#app:not(.bv-welcome) header.top .brand {color:var(--sota-page-accent);}
#app:not(.bv-welcome) header.top .brand small {color:#4d5f72;}
#app:not(.bv-welcome) header.top .luvchip {background:#fff8df;color:#4c416c;border:1px solid #ddc180;box-shadow:none;}
#app nav.bottom {background:linear-gradient(100deg,#e3f8f2,#fff3cf 50%,#efe4ff);border:1px solid #ada3c9;box-shadow:0 5px 25px #44316e24;}
#app nav.bottom button {color:#4a4a6a;}
#app nav.bottom button.on {background:var(--sota-page-accent);color:var(--sota-page-on-accent);box-shadow:0 2px 8px #4d2b7526;}
#app nav.bottom [data-tab="moments"].on {background:#a83163;color:#fff;}
#app nav.bottom [data-tab="room"].on {background:#006f71;color:#fff;}
#app nav.bottom [data-tab="circles"].on {background:#8a4c13;color:#fff;}
#app nav.bottom [data-tab="crews"].on {background:#31558e;color:#fff;}
#app nav.bottom [data-tab="friends"].on {background:#813b83;color:#fff;}
#app:not(.bv-welcome):not(.bv-room) #view .glass.card:not(.kava-stage-card) {
 background:linear-gradient(145deg,var(--sota-page-surface-alt),var(--sota-page-surface) 70%);
 border:1px solid var(--sota-page-line);border-top:4px solid var(--sota-page-accent-alt);color:var(--sota-page-ink);
}
#app:not(.bv-welcome):not(.bv-room) #view .glass.card:not(.kava-stage-card):nth-child(3n+2) {border-top-color:#cf7640;background:linear-gradient(145deg,#fff0d8,var(--sota-page-surface) 70%);}
#app:not(.bv-welcome):not(.bv-room) #view .glass.card:not(.kava-stage-card):nth-child(3n) {border-top-color:var(--sota-page-accent);background:linear-gradient(145deg,#eee7ff,var(--sota-page-surface) 70%);}
#app:not(.bv-welcome):not(.bv-room) #view :is(.glass.card>h2,.glass.card>h3,.card>.row h3) {color:var(--sota-page-accent);}
#app:not(.bv-welcome):not(.bv-room) #view :is(.sub,.handle,.ago,.empty) {color:var(--sota-page-muted);}
#app:not(.bv-welcome):not(.bv-room) #view .moment {background:linear-gradient(135deg,#fff2d7,#f4e8fb);border-color:#c7afca;color:var(--sota-page-ink);}
#app:not(.bv-welcome):not(.bv-room) #view .scrawl {background:#e2f5ed;border-left-color:var(--sota-page-accent-alt);color:#234c49;}
#app:not(.bv-welcome):not(.bv-room) #view .pulse-item:hover {background:#fff0bf;}
#app:not(.bv-welcome):not(.bv-room) :is(.btn:not(.ghost),.authwrap #f-go) {background:var(--sota-page-accent);color:var(--sota-page-on-accent);box-shadow:0 3px 10px #46297825;}
#app:not(.bv-welcome):not(.bv-room) .btn.ghost {background:#e4f5ee;border:1px solid #9fcab9;color:#275752;box-shadow:none;}
#app:not(.bv-welcome):not(.bv-room) #view :is(input:not([type="checkbox"]):not([type="range"]):not([type="color"]),select,textarea) {background:#fffdf9;border:1px solid #a5aacd;color:var(--sota-page-ink);}

/* One colourful account surface, including the first-room setup screen. */
#app .authwrap {
 background:linear-gradient(140deg,#ddf8ee 0%,#fff3c8 48%,#f8ddec 83%,#e9dfff);
 border:1px solid #c3a7ca;border-top:5px solid var(--sota-page-accent-alt);box-shadow:0 14px 38px #45326020;
 color:var(--sota-page-ink);
}
#app .authwrap .brand {color:var(--sota-page-accent);}
#app .authwrap :is(.tagline,.sub,label) {color:var(--sota-page-muted);}
#app .authwrap .seg {background:#d7d0ed;border:1px solid #b4a4ce;}
#app .authwrap .seg button.on {background:var(--sota-page-accent);color:var(--sota-page-on-accent);}
#app .authwrap .seg button:not(.on) {color:#45375f;}
#app .authwrap :is(input:not([type="checkbox"]),select,textarea) {background:#fffefa;border:1.5px solid #b7a1cc;color:#283c50;box-shadow:none;}
#app .authwrap :is(input,textarea)::placeholder {color:#687088;opacity:1;}
#app .authwrap #a-go,#app .authwrap #f-go {background:linear-gradient(105deg,#532b91,#983061);color:#fff;border:1px solid #672f88;box-shadow:0 3px 0 #3a215f;}
#app.bv-welcome .bv-account-dialog {
 background:linear-gradient(135deg,#dff8f1,#fff2c3 48%,#f9dfed 82%,#eee2ff);
 border:2px solid #a986c4;color:var(--sota-page-ink);box-shadow:0 22px 70px #3e265455;
}
#app.bv-welcome .bv-account-dialog .bv-account-head {padding:14px 16px;border-radius:14px;background:linear-gradient(105deg,#522b87,#8b326b 62%,#126878);color:#fff;}
#app.bv-welcome .bv-account-dialog .bv-account-head h2 {color:#fff;text-shadow:none;}
#app.bv-welcome .bv-account-dialog .bv-account-head>button {background:#fff1bf;color:#4a2b65;border:1px solid #ffe4a0;}
#app.bv-welcome .bv-account-dialog .authwrap {border:0;box-shadow:none;background:transparent;}
#app.bv-welcome .bv-account-dialog label {color:#4a3a70;font-weight:800;}
#app.bv-welcome .bv-account-dialog .sub {color:#4b6073;}
#app.bv-welcome .bv-account-dialog .bv-link {color:#5d2b81;}
#app :is(#a-err,#f-err) {color:#9c2441;}

/* Real photo editing gets the same warm, colourful finish as the music page. */
.spp-dialog.spp-dialog {
 background:linear-gradient(135deg,#dcfff0,#fff1bf 48%,#ffe0ef 82%,#eee0ff);
 border:2px solid #c292c8;color:var(--sota-page-ink);box-shadow:0 20px 65px #3d24595e;
}
.spp-dialog.spp-dialog header {padding:14px 16px;border-radius:14px;background:linear-gradient(110deg,#4b2b89,#8b2f65 65%,#126879);color:#fff;}
.spp-dialog.spp-dialog :is(header h2,.spp-kicker) {color:#fff;}
.spp-dialog.spp-dialog .spp-close {background:#fff1bb;border-color:#ffe6a0;color:#502764;}
.spp-dialog.spp-dialog .spp-storage {background:#e5f9ed;border-color:#8bc2ac;color:#285a4c;}
.spp-dialog.spp-dialog .spp-preview-avatar {background:linear-gradient(135deg,#7ce7d3,#c5e9fb 48%,#dbc1f4);border:3px solid #8250a9;color:#24455d;box-shadow:0 0 0 5px #f9ffef;}
.spp-dialog.spp-dialog .spp-preview-cover {background:linear-gradient(110deg,#ffce73,#ffa4ac 53%,#d9adf0);border:2px solid #b76c9d;color:#633357;}
.spp-dialog.spp-dialog .spp-preview>span {font-weight:800;font-size:14px;}
.spp-dialog.spp-dialog label {color:#51315f;}
.spp-dialog.spp-dialog input[type="file"] {background:#fff8e6;border-color:#bca0cb;color:#354c64;}
.spp-dialog.spp-dialog input[type="file"]::file-selector-button {background:#d6f3e6;border:1px solid #8cb9a5;color:#24554d;}
.spp-dialog.spp-dialog .spp-hint {color:#5e5870;}
.spp-dialog.spp-dialog footer {border-color:#cca7c5;}
.spp-dialog.spp-dialog .spp-cancel {background:#efe2fc;border-color:#c5a6df;color:#563476;}
.spp-dialog.spp-dialog .spp-save {background:linear-gradient(110deg,#006e71,#47518e);border-color:#3d5c8a;color:#fff;}

/* Studio controls are colourful; the member's selected cover and preview remain literal. */
.bv-studio.bv-studio {--studio-bg:#fffaf2;--studio-panel:#f4f8fb;--studio-ink:#203c53;--studio-muted:#496278;--studio-line:#b4c5cd;--studio-mint:#16685b;background:var(--sota-page-surface);border-color:#ad94c5;color:var(--sota-page-ink);}
.bv-studio.bv-studio .bv-studio-head {background:linear-gradient(110deg,#4e288a,#86316e 60%,#176a7c);border-color:#9870b6;color:#fff;}
.bv-studio.bv-studio .bv-studio-head :is(h2,p,.bv-studio-kicker) {color:#fff;}
.bv-studio.bv-studio .bv-close {background:#fff0bb;color:#52316e;border-color:#ffe6a0;}
.bv-studio.bv-studio .bv-studio-controls {background:#eff8f1;color:var(--sota-page-ink);}
.bv-studio.bv-studio .bv-studio-preview {background:#eee5fa;border-color:#baa2cc;color:var(--sota-page-ink);}
.bv-studio.bv-studio .bv-example-label {background:#fff0c5;border-color:#d9ba7e;color:#544063;}
.bv-studio.bv-studio .bv-studio-preview>.sub {color:#4e5d72;}
.bv-studio.bv-studio :is(.bv-creator-intro,.bv-studio-covers,.bv-atmosphere-picker,.bv-studio-picker,.bv-creator-group,.bv-upload-box) {background:var(--sota-page-surface);border-color:#c9b7d7;color:var(--sota-page-ink);}
.bv-studio.bv-studio .bv-creator-group:nth-child(even) {background:#fff0cf;}
.bv-studio.bv-studio .bv-creator-group:nth-child(3n) {background:#e7f3fd;}
.bv-studio.bv-studio :is(.bv-studio-controls h3,.bv-studio-controls h4,.bv-studio-controls legend,.bv-studio-controls label) {color:#513676;}
.bv-studio.bv-studio :is(.bv-studio-controls p,.bv-studio-controls .sub,.bv-upload-status) {color:#4d6175;}
.bv-studio.bv-studio .bv-studio-controls :is(input:not([type="color"]):not([type="range"]):not([type="checkbox"]),select,textarea) {background:#fffefa;border:1px solid #ab9cc5;color:#283f54;}
.bv-studio.bv-studio .bv-studio-controls :is(input,textarea)::placeholder {color:#69718a;opacity:1;}
.bv-studio.bv-studio :is(.bv-studio-modes,.bv-preview-modes) {background:#e3d7f2;border:1px solid #b6a2d1;}
.bv-studio.bv-studio :is(.bv-studio-modes,.bv-preview-modes) button {color:#4c3a65;}
.bv-studio.bv-studio :is(.bv-studio-modes,.bv-preview-modes) button[aria-pressed="true"] {background:var(--sota-page-accent);color:var(--sota-page-on-accent);}
.bv-studio.bv-studio .bv-studio-custom>summary {background:#e3f5eb;color:#26574c;border-color:#a2c6b5;}
.bv-studio.bv-studio .bv-studio-footer {background:linear-gradient(110deg,#e4f5e9,#fff0c4 56%,#f4e0f4);border-color:#bfacc9;}
.bv-studio.bv-studio .bv-studio-footer .btn {background:#e5daf5;color:#513572;border-color:#b9a0d3;}
.bv-studio.bv-studio .bv-studio-footer #bv-save {background:var(--sota-page-accent);color:var(--sota-page-on-accent);border-color:var(--sota-page-accent);}
#app .bv-skin-room-head {background:linear-gradient(120deg,#ddf7ee,#fff0bf 55%,#f5dded);border-color:#bdb1d4;color:var(--sota-page-ink);}
#app .bv-skin-room-head :is(h1,.bv-skin-room-kicker) {color:var(--sota-page-accent);}

/* Circle creation and connection detail pages. */
.tc-dialog.tc-dialog {background:linear-gradient(135deg,#e2f9ee,#fff4cc 60%,#eee1f8);border-color:#bea1cf;color:var(--sota-page-ink);}
.tc-dialog.tc-dialog .tc-dialog-head {background:linear-gradient(110deg,#194d74,#643488);border-color:#a58ac1;color:#fff;}
.tc-dialog.tc-dialog .tc-dialog-head h2 {color:#fff;}
.tc-dialog.tc-dialog :is(label,h3) {color:#503772;}
:is(.tc-dialog,.tc-widget,.tc-create) .tc-button.tc-primary {background:var(--sota-page-accent);border-color:var(--sota-page-accent);color:var(--sota-page-on-accent);}
#app .kava-hero,#app .sc-hero {background:linear-gradient(115deg,#d9f7ea,#fff0bf 58%,#f5dcf0);border-color:#c19bcb;border-left-color:var(--sota-page-accent);}
#app :is(.kava-hero h1,.kava-hero h2,.sc-hero h1) {color:var(--sota-page-accent);}
#app .sc-workspace :is(.sc-toolbar,.sc-detail,.sc-privacy) {background:linear-gradient(145deg,#f0e8fb,var(--sota-page-surface) 65%);border-color:#b7acd0;}
#app .sc-workspace .sc-filters [aria-pressed="true"] {background:var(--sota-page-accent);color:var(--sota-page-on-accent);border-color:var(--sota-page-accent);}
#app .sc-workspace .sc-detail h2 {color:var(--sota-page-accent);}

/* Standalone Sota communications and call pages use their own explicit page roots. */
body:has(#workspace) .masthead {background:linear-gradient(110deg,#184e74,#60388a 70%,#873e78);border-bottom-color:#ffd36d;}
#workspace>.intro {padding:22px;border:1px solid #b9aed0;border-left:5px solid var(--sota-page-accent);border-radius:14px;background:linear-gradient(115deg,#d9f5e9,#fff0bf 60%,#f6e0f2);}
#workspace>.intro h1 {color:#503471;}
#workspace :is(.sidebar.panel,.room.panel,.signed-out.panel) {background:linear-gradient(145deg,var(--sota-page-surface-alt),var(--sota-page-surface) 70%);border-color:#b9afd0;}
#workspace .primary {background:var(--sota-page-accent);color:var(--sota-page-on-accent);}
#workspace .secondary {background:#e0f4e9;color:#28584e;border-color:#9fc6b1;}
#workspace .tabs [aria-selected="true"] {background:#ede2fa;border-color:var(--sota-page-accent);color:#523276;}
#workspace .board-column:nth-child(1) {background:#daf2ec;}
#workspace .board-column:nth-child(2) {background:#fff0bf;}
#workspace .board-column:nth-child(3) {background:#f2def2;}
#workspace .group-button.selected {background:#eee0fa;border-color:#a88bc1;box-shadow:inset 3px 0 var(--sota-page-accent);}
body.cr .nc-live-heading,body.cr .cr-settings {background:linear-gradient(110deg,#183c57,#432663);border-color:#a582bb;color:#f6edff;}
body.cr .cr-ended-card {background:linear-gradient(135deg,#d9f4e9,#fff0bf 60%,#f1ddf2);color:#42345d;border:1px solid #ae95bf;}
body.cr .cr-ended-card h1 {color:#49305f;}
body.cr .cr-invite-btn {background:#ffe08d;border-color:#edbc50;color:#4d2b5b;}

/* Legible focus and native controls remain consistent through all colourful surfaces. */
#app :is(.authwrap,.bv-account-dialog) :is(input,select,textarea,button):focus-visible,
.spp-dialog.spp-dialog :is(button,input):focus-visible,
.bv-studio.bv-studio .bv-studio-controls :is(button,input,select,textarea):focus-visible,
.tc-dialog.tc-dialog :is(button,input,select,textarea):focus-visible {outline:3px solid var(--sota-page-focus);outline-offset:3px;box-shadow:none;}
@media(prefers-reduced-motion:reduce) {
 #app :is(header.top,nav.bottom,.authwrap,.bv-account-dialog) :is(button,input,select,textarea),
 .spp-dialog.spp-dialog :is(button,input),.bv-studio.bv-studio .bv-studio-controls :is(button,input,select,textarea),
 .tc-dialog.tc-dialog :is(button,input,select,textarea) {transition:none;animation:none;}
}
@media(forced-colors:active) {
 #app :is(header.top,nav.bottom,.authwrap,.bv-account-dialog,.bv-account-head,.bv-skin-room-head,.kava-hero,.sc-hero),
 #app:not(.bv-welcome):not(.bv-room) #view :is(.glass.card,.moment,.scrawl),
 .spp-dialog.spp-dialog,.spp-dialog.spp-dialog :is(header,.spp-storage,.spp-preview,.spp-close,.spp-cancel,.spp-save,input),
 .bv-studio.bv-studio,.bv-studio.bv-studio :is(.bv-studio-head,.bv-studio-controls,.bv-creator-group,.bv-studio-footer,.bv-studio-modes,.bv-preview-modes),
 .tc-dialog.tc-dialog,.tc-dialog.tc-dialog .tc-dialog-head,
 #workspace :is(.intro,.panel,.board-column,.primary,.secondary,.group-button),
 body.cr :is(.nc-live-heading,.cr-settings,.cr-ended-card,.cr-invite-btn) {background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none;}
 #app nav.bottom button.on,#app .authwrap :is(#a-go,#f-go),
 .spp-dialog.spp-dialog :is(h2,label,.spp-kicker),
 .bv-studio.bv-studio .bv-studio-head :is(h2,p,.bv-studio-kicker) {background:Canvas;color:CanvasText;}
 #app :is(.authwrap,.bv-account-dialog) :is(input,select,textarea,button):focus-visible,
 .spp-dialog.spp-dialog :is(button,input):focus-visible,
 .bv-studio.bv-studio .bv-studio-controls :is(button,input,select,textarea):focus-visible {outline-color:Highlight;}
}

/* Visual page navigation and headings stay colourful before a personal design is chosen. */
#app[data-front-page] .sfp-navigation>a {background:linear-gradient(135deg,#e6fff4,#ffe8af);border-color:#b8c99a;color:#274e56;}
#app[data-front-page] .sfp-navigation>a:nth-child(2) {background:linear-gradient(135deg,#ffd9e8,#e8dcff);color:#5b2a70;border-color:#c8a0cf;}
#app[data-front-page] .sfp-navigation>a:nth-child(3) {background:linear-gradient(135deg,#c8f5ff,#b8e3f6);color:#174b74;border-color:#8db8db;}
#app[data-front-page] .sfp-navigation>a[aria-current=page] {background:linear-gradient(115deg,var(--sota-page-accent),var(--sota-page-accent-alt));color:var(--sota-page-on-accent);border-color:var(--sota-page-accent);}
#app[data-front-page] .sfp-detail-heading {background:linear-gradient(115deg,#dcfaed,#fff1bd 52%,#f5dbf2);border-color:#bca2cf;border-left:6px solid var(--sota-page-accent);}
#app[data-front-page] .sfp-detail-heading h1 {color:var(--sota-page-accent);}
#app[data-front-page] .sfp-back {color:#4c306b;}
@media(forced-colors:active){#app[data-front-page] :is(.sfp-navigation>a,.sfp-detail-heading){background:Canvas;color:CanvasText;border-color:CanvasText}#app[data-front-page] :is(.sfp-detail-heading h1,.sfp-back){color:CanvasText}}