/* Shared UI tokens; media, avatars and room scenery keep their own palette. */
:root {
  --accent:#c3a2ff; --accent-ink:#221035; --accent-soft:#2b203c;
  --ui-card:#17151e; --ui-raised:#211e2b; --ui-border:#494251;
  --ui-muted:#c2bbcf; --ui-quiet:#aba3b6; --ui-danger:#ffb9c0;
  --ui-radius:22px; --ui-glow:color-mix(in srgb,var(--accent) 14%,transparent);
  --mint:var(--accent); --surface:var(--ui-card); --surface2:var(--ui-raised);
  --line:var(--ui-border); --muted:var(--ui-muted);
}
:root[data-accent=ocean]{--accent:#8bc8ff;--accent-ink:#08223b;--accent-soft:#182d43}
:root[data-accent=mint]{--accent:#87e5c4;--accent-ink:#092c23;--accent-soft:#18352d}
:root[data-accent=amber]{--accent:#ffd08b;--accent-ink:#382408;--accent-soft:#392c1c}
:root[data-appearance=studio]{color-scheme:light;--bg:#f4f5fa;--text:#1a1c29;--ui-card:#fff;--ui-raised:#e9ebf3;--ui-border:#bfc3d2;--ui-muted:#50566a;--ui-quiet:#5f6577;--ui-danger:#a9203c;--ui-radius:12px;--ui-glow:transparent;--accent:#6431ba;--accent-ink:#fff;--accent-soft:#eae2f8}
:root[data-appearance=studio][data-accent=ocean]{--accent:#0757a6;--accent-ink:#fff;--accent-soft:#deebfa}
:root[data-appearance=studio][data-accent=mint]{--accent:#096b50;--accent-ink:#fff;--accent-soft:#d8efe6}
:root[data-appearance=studio][data-accent=amber]{--accent:#865000;--accent-ink:#fff;--accent-soft:#f5e8ce}
:root[data-appearance=midnight]{color-scheme:dark;--bg:#050609;--text:#f5f6fa;--ui-card:#101216;--ui-raised:#1b1e25;--ui-border:#454955;--ui-muted:#c0c4cf;--ui-quiet:#a9afbd;--ui-radius:8px;--ui-glow:transparent}
html,body,body.phone-page,body.live-app{background:var(--bg);color:var(--text)}
body{accent-color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
:is(button,a,input,select,textarea,summary):focus-visible{outline-color:var(--accent)}
.brand svg{stroke:var(--accent)}.brand svg path{fill:var(--accent)}
:is(.brand-dot,.studio-brand span,.cin-kicker,.launch-eyebrow,.cin-step-number,.cin-feature-card>span,.studio-local,.step-number,.eyebrow){color:var(--accent)}
:is(.cin-header nav,.cin-footer nav a,.cin-header a:hover){color:var(--text)}
:is(.cin-primary,.primary-button,.send-button,.cinema-play,.evening-primary,.header-enter){background:var(--accent);color:var(--accent-ink);border-color:transparent}
.cin-header .header-enter:hover{background:var(--text);color:var(--bg)}
:is(.cin-secondary,.language-picker select,.subtle-button,.tool-button,.search,.composer,.close-button,.demo-pill){background-color:var(--ui-card);color:var(--text);border-color:var(--ui-border)}
:is(.cin-feature-card,.document-callout,.cin-document select,.cin-document textarea,.request-item,.arrival-card,.plan-card,.admin-panel,.admin-stat,.story-teaser,.launch-outro){background:var(--ui-card);border-color:var(--ui-border);color:var(--text);border-radius:var(--ui-radius)}
:is(.cin-feature-card,.plan-card,.admin-panel){box-shadow:0 14px 42px #00000008}
:is(.hero-aside>p,.hero-aside>small,.cin-section-heading p,.cin-feature-card p,.cin-steps p,.cin-device-status p,.faq-list p,.cin-footer p,.cin-footer small,.document-lead,.document-callout,.cin-document section p,.cin-document li,.launch-main p,.plan-card small,.plan-card ul,.plan-card .plan-state,.admin-stat span,.admin-user small,.admin-panel label,.admin-dialog label,.admin-dialog dt,.admin-audit small,.people-intro,.muted,.private-note,.private-note p,.experience-footer,.live-status,.arrival-intro){color:var(--ui-muted)}
:is(.faq-list a,.request-status,.hero-intro h1 em,.cin-document a:not(.cin-primary):not(.cin-secondary),.story-letter blockquote){color:var(--accent)}
:is(.cin-feature-line,.cin-footer,.cin-header,.app-header,.phone-header,.faq-list details,.cin-steps li,.cin-device-status>div,.story-letter,.story-values article,.pricing-answers details,.admin-audit article){border-color:var(--ui-border)}
.cin-outro{background:radial-gradient(ellipse at top,var(--ui-glow),transparent 75%),var(--ui-card);border-color:var(--ui-border);border-radius:var(--ui-radius)}
.story-teaser{background:linear-gradient(120deg,var(--ui-glow),transparent),var(--ui-card)}
.plan-featured{background:linear-gradient(155deg,var(--ui-glow),transparent),var(--ui-card);border-color:var(--accent)}
.plan-card button{background:var(--ui-raised);color:var(--ui-muted);border-color:var(--ui-border)}
:is(.friend-card.active,.place-card.selected){background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.friend-card:hover{background:var(--ui-raised)}
.history-body{background:var(--ui-raised);color:var(--text)}.self .history-body{background:var(--accent-soft);color:var(--text)}
.count{background:var(--accent-soft);color:var(--accent)}
:is(.form-error,.phone-error){color:var(--ui-danger)}
.cinema-launch{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:transparent!important}
.ai-link,.guide-entry{color:var(--accent)!important;border-color:var(--ui-border)!important}
#lobby-open{background:var(--accent-soft);color:var(--accent);border-color:var(--ui-border)}
.guide-intro{background:var(--ui-card);border-color:var(--ui-border);color:var(--text)}.guide-intro span{color:var(--ui-muted);font-size:14px}.guide-intro button{background:var(--accent);color:var(--accent-ink)}.guide-intro #guide-dismiss{color:var(--ui-muted)}
.room-camera-controls{background:var(--ui-card);border-color:var(--ui-border);color:var(--text)}.room-camera-controls select{background:var(--ui-raised);color:var(--text);border-color:var(--ui-border)}
.studio-brand{color:var(--text)}.studio-intro h1 em,.studio-eyebrow{color:var(--accent)}
.studio-intro p{color:var(--ui-muted)}
:is(.admin-shortcuts a,.admin-panel button:not(.cin-primary),.admin-dialog button:not(.cin-primary),.admin-panel .admin-user){background:var(--ui-raised);color:var(--text);border-color:var(--ui-border)}
:is(.admin-panel input,.admin-panel select,.admin-dialog select,.admin-dialog textarea){background:var(--ui-card);color:var(--text);border-color:var(--ui-border)}
.admin-badge{background:var(--accent-soft);color:var(--accent)}
.app-header .appearance-trigger{margin-inline-start:auto;margin-inline-end:14px}
.appearance-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 13px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-card);color:var(--text);font:inherit;font-size:14px;white-space:nowrap;cursor:pointer}
.appearance-trigger svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
dialog.appearance-dialog{box-sizing:border-box;width:min(680px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;margin:auto;padding:30px;background:var(--ui-card);color:var(--text);border:1px solid var(--ui-border);border-radius:22px;box-shadow:0 25px 100px #0006}
.appearance-dialog::backdrop{background:#05060cc4;backdrop-filter:blur(7px)}
.appearance-heading{display:flex;align-items:start;justify-content:space-between;gap:18px}
.appearance-heading h2{font-size:26px;line-height:1.5;margin:7px 0 0;letter-spacing:0}
.appearance-eyebrow{font:600 12px 'Segoe UI',sans-serif;letter-spacing:1.6px;color:var(--accent)}
.appearance-heading button{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;background:var(--ui-raised);color:var(--text);border:1px solid var(--ui-border);border-radius:50%;font-size:25px;cursor:pointer}
.appearance-intro{font-size:16px;line-height:1.8;color:var(--ui-muted);margin:18px 0 25px}
.appearance-dialog fieldset{border:0;padding:0;margin:0 0 25px;min-width:0}
.appearance-dialog legend{padding:0;margin-bottom:12px;font-size:16px;font-weight:650;color:var(--text)}
.appearance-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.appearance-style{display:grid;grid-template-columns:20px 1fr;align-content:start;gap:9px;border:1px solid var(--ui-border);border-radius:14px;padding:12px;cursor:pointer;background:var(--bg);position:relative}
.appearance-style input{grid-row:2;align-self:center;width:18px;height:18px;margin:0;accent-color:var(--accent)}
.appearance-style strong{grid-column:2;grid-row:2;font-size:16px}.appearance-style small{grid-column:1/-1;font-size:14px;line-height:1.6;color:var(--ui-muted)}
.appearance-style:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.appearance-mini{grid-column:1/-1;height:83px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:7px 25px 12px;gap:6px;padding:10px;background:#21192e;border-radius:8px;border:1px solid #ffffff26}
.appearance-mini i{grid-column:1/-1;width:50%;background:#c3a2ff;border-radius:2px}
.appearance-mini b{grid-column:1/-1;background:linear-gradient(120deg,#67488b,#372347);border-radius:5px}
.appearance-mini em{background:#8d799e;border-radius:3px}
.appearance-mini[data-mini=studio]{background:#f4f5fa;border-color:#c4c7d3;gap:5px}.appearance-mini[data-mini=studio] i{background:#6431ba}.appearance-mini[data-mini=studio] b{background:#dde1ed;border-radius:0;width:70%}.appearance-mini[data-mini=studio] em{background:#9b9fb1;border-radius:0}
.appearance-mini[data-mini=midnight]{background:#050609;border-color:#555b66;grid-template-rows:5px 19px 10px;gap:8px;border-radius:3px}.appearance-mini[data-mini=midnight] b{background:#252830;border-radius:0}.appearance-mini[data-mini=midnight] em{background:#7f8592;border-radius:0}
.appearance-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.appearance-color{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;position:relative;padding:13px 8px;border:1px solid var(--ui-border);border-radius:12px;background:var(--bg);cursor:pointer;font-size:14px;min-height:56px}
.appearance-color input{position:absolute;opacity:0;width:1px;height:1px}.appearance-color:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.appearance-color:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.appearance-swatch{width:22px;height:22px;display:block;border-radius:50%;background:#ba93fb;border:1px solid #0002}.appearance-swatch[data-swatch=ocean]{background:#69b6ff}.appearance-swatch[data-swatch=mint]{background:#54caa4}.appearance-swatch[data-swatch=amber]{background:#f0b257}
.appearance-status{color:var(--ui-muted);font-size:14px;line-height:1.7;min-height:24px}
.appearance-dialog footer{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--ui-border)}
.appearance-dialog footer button{font:inherit;cursor:pointer;min-height:44px;font-size:14px;padding:10px 14px;border-radius:10px}.appearance-dialog [data-appearance-reset]{color:var(--ui-muted);background:transparent;border:0;text-decoration:underline;text-underline-offset:4px}
.story-teaser.cin-section{padding:40px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px 45px;align-items:center;margin-block:85px 0}
.story-teaser>.launch-eyebrow{grid-column:1/-1;margin:0}.story-teaser>h2{font-size:clamp(26px,3vw,40px);line-height:1.5;margin:0}.story-teaser>p:not(.launch-eyebrow){font-size:17px;line-height:1.9;margin:0}.story-teaser>a{justify-self:start;margin-top:12px}
.cin-feature-card a{color:var(--accent)}
.cin-feature-line{color:var(--ui-muted)}
.cin-device-status dd,.cin-device-status dt span{color:var(--ui-muted)}
.story-opening figcaption,.story-values article>span,.story-letter .story-signature{color:var(--ui-muted)}
.phone-page .arrival-card{padding:28px;border:1px solid var(--ui-border)}
.arrival-card label,.onboarding-footer,.onboarding-steps{color:var(--ui-muted)}
.sms-consent{color:var(--ui-muted)!important;font-size:14px!important}
.moderation-page>.safety-top{flex-wrap:wrap;gap:16px}
/* Studio uses an editorial layout; Midnight keeps the same content more compact. */
[data-appearance=studio] .hero-intro{grid-template-columns:1.2fr 1fr;border-bottom:1px solid var(--ui-border);padding-bottom:38px}
[data-appearance=studio] .cin-screen{border-radius:12px;box-shadow:0 18px 45px #17244818}
[data-appearance=studio] .cin-feature-card{border-top:3px solid var(--accent)}
[data-appearance=studio] .cin-feature-card h3{font-weight:650}
[data-appearance=midnight] .cin-hero{margin-top:30px}
[data-appearance=midnight] .cin-screen{border-radius:8px;box-shadow:none}
[data-appearance=midnight] .cin-screen>img{aspect-ratio:2.4;object-position:center 47%}
[data-appearance=midnight] .cin-section{padding-top:65px}
[data-appearance=midnight] .cin-feature-card{padding:26px;border-radius:8px;box-shadow:none}
[data-appearance=midnight] .cin-outro{padding-block:36px}
/* Light UI does not wash out the cinema screen, room or character previews. */
[data-appearance=studio] :is(dialog:not(.appearance-dialog),.studio-section,.studio-import,.studio-controls,.guide-panel,.guide-intro,.waiting-room,.room-voice-bar,.cinema-panel,.evening-dialog,.audio-setup-dialog,.lobby-card){background-color:var(--ui-card);color:var(--text);border-color:var(--ui-border)}
[data-appearance=studio] :is(.studio-main,.arrival-card,dialog:not(.appearance-dialog),.room-voice-bar,.guide-intro,.admin-panel,.cin-document) :is(p,label,small,legend,h2,h3,h4,dt,dd,summary){color:var(--text)}
[data-appearance=studio] :is(.studio-main,.arrival-card,dialog:not(.appearance-dialog),.room-voice-bar,.admin-panel) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){background:var(--ui-card);color:var(--text);border-color:var(--ui-border)}
[data-appearance=studio] :is(.studio-main,dialog:not(.appearance-dialog),.room-voice-bar,.arrival-card) button:not(.primary-button):not(.cin-primary):not(.evening-primary):not(.look-card){color:var(--text);border-color:var(--ui-border);background-color:var(--ui-raised)}
[data-appearance=studio] :is(.studio-visual,.world,.arrival-world,.cin-screen,.cin-room-image,.story-image,.cinema-theater,.place-card){color:#faf8ff}
[data-appearance=studio] .studio-visual :is(p,label,small,h2){color:#faf8ff}
[data-appearance=studio] .cinema-theater{--text:#faf8ff;--ui-card:#17151e;--ui-raised:#211e2b;--ui-muted:#c2bbcf;--accent:#c3a2ff;--accent-ink:#221035;--accent-soft:#2b203c;color:#faf8ff}
[data-appearance=studio] .cinema-theater .theater-voice{background:#18111f;color:#faf8ff}
[data-appearance=studio] .cinema-theater :is(.theater-voice p,.theater-voice label){color:#e2dce9}
[data-appearance=studio] .launch-notice{background:#dcefe2;color:#1c5130!important;border-color:#8bae97}
[data-appearance=studio] :is(.studio-detail,.studio-footnote,.onboarding-privacy,.availability,.back-link,.profile-confirmed,.list-caption,.world-tools>span){color:var(--ui-muted)}
[data-appearance=studio] .search input::placeholder{color:var(--ui-quiet)}
[data-appearance=studio] .world{--accent:#c3a2ff;--mint:#c3a2ff;--text:#faf8ff;--ui-muted:#c2bbcf}
[data-appearance=studio] :is(.studio-visual,.world,.arrival-world) .eyebrow{color:#d8bcff}
[data-appearance=studio] .moderation-page :is(select,textarea,.moderation-item){background:var(--ui-card);color:var(--text);border-color:var(--ui-border)}
[data-appearance=studio] :is(.cinema-host-panel,.watch-continue,.night-voting,.watch-card,.cinema-queue-item,.cinema-item,.evening-preferences,.moment-card,.game-area,.prop-offer,.reply-draft,.message-quote,.message-reaction-picker,.studio-section,.studio-import,.studio-controls){background:var(--ui-raised);color:var(--text);border-color:var(--ui-border)}
[data-appearance=studio] :is(.message-actions button,.message-actions .message-reaction){background:var(--ui-card);color:var(--text);border-color:var(--ui-border)}
[data-appearance=studio] .message-quote strong{color:var(--accent)}
[data-appearance=studio] .hangout-dialog .lobby-card{color:#fff;background-color:#20102c}
[data-appearance=studio] .hangout-dialog .lobby-card :is(small,strong){color:#fff}
[data-appearance=studio] .lobby-enter{background:var(--accent);color:var(--accent-ink)}
[data-appearance=studio] .cinema-host-panel :is(p,label,summary),[data-appearance=studio] .watch-continue p{color:var(--text)}
[data-appearance=studio] .studio-mobile-actions{background:var(--ui-card);border-color:var(--ui-border)}
[data-appearance=studio] .studio-mobile-actions a{color:var(--accent)}
[data-appearance=studio] :is(.studio-controls,.studio-section) :is(span,strong){color:var(--text)}
[data-appearance=studio] .studio-main .look-card :is(strong,small,span){color:#f5effb}
[data-appearance=studio] :is(.beta-session,.room-social-dock,.lounge-panel,.lounge-invite,.lounge-pair,.cinema-card,.media-card){background:var(--ui-card);color:var(--text);border-color:var(--ui-border)}
[data-appearance=studio] :is(.cinema-eyebrow,.lounge-kicker,.hangout-kicker,.evening-kicker,.cinema-status,#media-count,.below-world .section-head span){color:var(--accent)}
[data-appearance=studio] :is(.room-social-dock,.lounge-panel) :is(button,select){background:var(--ui-raised);color:var(--text);border-color:var(--ui-border)}
[data-appearance=studio] .lounge-panel :is(p,label,span,small){color:var(--ui-muted)}
[data-appearance=studio] .place-card{background:var(--ui-card);color:var(--text);border-color:var(--ui-border)}
[data-appearance=studio] .place-card.selected{background:var(--accent-soft);border-color:var(--accent)}
[data-appearance=studio] .place-card small{color:var(--ui-muted)}
[data-appearance=studio] .choice-mark{background:var(--accent-soft);color:var(--accent)}
[data-appearance=studio] :is(.cinema-film,.cinema-empty,.cinema-banner,.night-lobby,.night-vote-row,.memory-card){background:var(--ui-raised);color:var(--text);border-color:var(--ui-border)}
[data-appearance=studio] :is(.cinema-film-info small,.cinema-queue-heading>span,.watch-card span,.night-vote-row>span,.cinema-banner-copy>span,.cinema-banner-copy small){color:var(--ui-muted)}
.appearance-dialog{overscroll-behavior:contain}
@media(max-width:1000px){.cin-header{flex-wrap:wrap;gap:14px}.cin-header nav{order:3;flex-basis:100%;justify-content:center}.app-header .header-center{display:none}[data-appearance=studio] .hero-intro{grid-template-columns:1fr}}
@media(max-width:600px){.appearance-trigger{padding:9px}.appearance-trigger>span{display:none}.app-header .appearance-trigger{margin-inline:5px}.cin-header-actions{gap:8px}.appearance-dialog{padding:22px!important}.appearance-heading h2{font-size:23px}.appearance-styles{gap:7px}.appearance-style{padding:9px;gap:7px}.appearance-style small{font-size:13px}.appearance-mini{height:70px;padding:8px;grid-template-rows:5px 20px 10px}.appearance-colors{grid-template-columns:repeat(2,1fr)}.appearance-dialog footer{align-items:stretch}.appearance-dialog footer button{flex:1}.cin-header nav{gap:18px}.phone-header,.studio-header{gap:10px;flex-wrap:wrap}.phone-header .appearance-trigger{margin-inline-start:auto}[data-appearance=midnight] .cin-screen>img{aspect-ratio:1.4}[data-appearance=studio] .hero-intro{padding-bottom:25px}}
@media(max-width:800px){.story-teaser.cin-section{grid-template-columns:1fr;padding:28px;margin-top:55px;gap:18px}.phone-page .arrival-card{padding:22px}.story-teaser>.launch-eyebrow{grid-column:auto}}
@media(max-width:600px){.appearance-style{grid-template-columns:1fr}.appearance-style input{position:absolute;top:12px;inset-inline-end:12px;z-index:1}.appearance-style strong{grid-column:1;grid-row:auto;text-align:center;overflow-wrap:anywhere}.appearance-style small{text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
