/* Appearance choices are shared; Studio overrides only presentation. */
.settings>.page-heading,.settings>.settings-layout{width:100%}.settings-layout--appearance{grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr)}.settings-layout--appearance>.card{width:100%}.panel-appearance{container-type:inline-size}
@media(max-width:1100px){.settings-layout--appearance{grid-template-columns:minmax(0,1fr)}}
@container(max-width:600px){.accent-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel-style-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%}
.panel-style-option{position:relative;display:grid;gap:14px;min-width:0;padding:14px;text-align:left;background:var(--surface-2);color:var(--on-surface);border:1px solid var(--outline-variant);border-radius:18px;cursor:pointer;font:inherit}
.panel-style-option:hover{border-color:var(--primary)}.panel-style-option[aria-pressed=true]{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.panel-style-option:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.panel-style-option>.ms{position:absolute;bottom:18px;right:16px;visibility:hidden;color:var(--primary)}.panel-style-option[aria-pressed=true]>.ms{visibility:visible}
.style-option-label{display:grid;gap:5px;padding-right:32px}.style-option-label>b{font-size:16px}.style-preview{height:150px;position:relative;overflow:hidden;display:block;border:1px solid var(--outline-variant);background:#141218;border-radius:12px}
.style-preview i{position:absolute;display:block}.preview-nav{inset:12px auto 12px 10px;width:22%;border-radius:12px;background:#211e26}.preview-nav:after{content:'';position:absolute;inset:22px 6px auto;height:12px;background:var(--secondary-container);border-radius:6px;box-shadow:0 22px 0 #ffffff08,0 44px 0 #ffffff08}
.preview-heading{top:18px;left:calc(25% + 12px);width:29%;height:7px;background:#ffffffa0;border-radius:4px}.preview-card{top:40px;bottom:17px;border-radius:14px;background:#211e26;border:1px solid #ffffff0c}.preview-card--one{left:calc(25% + 12px);width:31%}.preview-card--two{left:calc(58% + 12px);right:12px}.preview-button{bottom:30px;left:calc(25% + 24px);width:20%;height:16px;background:var(--primary);border-radius:12px}
.style-preview--studio{background:radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--primary) 28%,transparent),transparent 70%),#101115}.style-preview--studio .preview-nav{inset:0 auto 0 0;width:26%;border-radius:0;background:#111216;border-right:1px solid #ffffff09}.style-preview--studio .preview-card{border-radius:7px;background:#1a1c22;box-shadow:0 4px 9px #0003}.style-preview--studio .preview-button{border-radius:4px;background:var(--primary)}
@media(max-width:540px){.panel-style-options{gap:10px}.panel-style-option{padding:10px;gap:10px}.style-preview{height:112px}.style-option-label>b{font-size:14px}.style-option-label>.small{font-size:11px}.style-option-label{padding-right:0}.panel-style-option>.ms{top:16px;right:14px;bottom:auto;background:var(--secondary-container);border-radius:50%;font-size:18px}}

:root[data-panel-style=studio]{--surface:#101115;--surface-1:#1a1c22;--surface-2:#202229;--surface-3:#292c35;--on-surface:#f0f0f5;--on-surface-variant:#a0a1af;--outline:#696b79;--outline-variant:#30323d;--radius-s:10px;--radius-m:14px}
:root[data-panel-style=studio] body{background:radial-gradient(ellipse 75% 500px at 95% 0,color-mix(in srgb,var(--primary) 13%,transparent),transparent 80%),var(--surface);background-attachment:fixed;font-size:14px;line-height:1.55}
:root[data-panel-style=studio] .topbar{background:transparent;border-bottom:0;height:86px}:root[data-panel-style=studio] .topbar h1{font-size:28px;font-weight:750;letter-spacing:-.8px}
:root[data-panel-style=studio] h2,:root[data-panel-style=studio] h3{font-weight:700;letter-spacing:-.25px}
:root[data-panel-style=studio] .card{border-radius:15px;padding:20px;border:1px solid color-mix(in srgb,var(--outline-variant) 70%,transparent);background:var(--surface-1);box-shadow:0 2px 10px #00000012;gap:16px}
:root[data-panel-style=studio] .card h2{font-size:15px;letter-spacing:0}
:root[data-panel-style=studio] .page-heading .eyebrow,:root[data-panel-style=studio] .page-heading h2{display:none}:root[data-panel-style=studio] .page-heading{padding:0 0 16px}
:root[data-panel-style=studio] .btn{border-radius:8px;padding:0 16px;height:38px;font-size:13px;font-weight:650;letter-spacing:0}
:root[data-panel-style=studio] .btn--outlined{border-color:var(--outline-variant);background:color-mix(in srgb,var(--surface-2) 50%,transparent);color:var(--on-surface)}
:root[data-panel-style=studio] .btn--tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
:root[data-panel-style=studio] .btn--text{background:transparent;color:var(--primary)}
:root[data-panel-style=studio] .icon-btn{border-radius:9px}
:root[data-panel-style=studio] .input,:root[data-panel-style=studio] select,:root[data-panel-style=studio] textarea{border-radius:8px;background:var(--surface);border-color:var(--outline-variant);font-size:14px}
:root[data-panel-style=studio] .input:focus,:root[data-panel-style=studio] select:focus,:root[data-panel-style=studio] textarea:focus{border-color:var(--primary)}
:root[data-panel-style=studio] .chip{border-radius:7px;min-height:30px;font-size:12px;border-color:var(--outline-variant)}
:root[data-panel-style=studio] .field>span{font-size:12px;font-weight:550;color:var(--on-surface-variant)}
:root[data-panel-style=studio] .segmented{border-radius:9px;border-color:var(--outline-variant);padding:3px;gap:3px;background:var(--surface)}
:root[data-panel-style=studio] .segmented button{border-radius:6px;border:0}:root[data-panel-style=studio] .segmented .selected{background:var(--secondary-container)}
:root[data-panel-style=studio] .slider{height:10px}:root[data-panel-style=studio] .slider::-webkit-slider-thumb{width:16px;height:16px;border-radius:50%;box-shadow:none;border:2px solid var(--primary);background:var(--primary)}:root[data-panel-style=studio] .slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:0;background:var(--primary)}
:root[data-panel-style=studio] .home-status-line{border-radius:12px;background:var(--surface-1);border-color:var(--outline-variant)}
:root[data-panel-style=studio] .bubble{border-radius:11px}:root[data-panel-style=studio] .page-heading{margin-bottom:4px}:root[data-panel-style=studio] .eyebrow{font-size:10px;letter-spacing:1.2px}
:root[data-panel-style=studio] .np__title{font-size:clamp(20px,2.5vw,30px);font-weight:750;line-height:1.25;letter-spacing:-.65px}:root[data-panel-style=studio] .cover{border-radius:10px;width:104px;height:104px}
:root[data-panel-style=studio] .np__play{width:48px;height:48px;border-radius:50%;background:var(--primary)}:root[data-panel-style=studio] .np__bar{height:5px}
:root[data-panel-style=studio] .plugin-editor{background:var(--surface);border:1px solid var(--outline-variant);border-radius:16px}:root[data-panel-style=studio] dialog{border-radius:16px}
:root[data-panel-style=studio] .plugin-card--tile,:root[data-panel-style=studio] .tuya-device,:root[data-panel-style=studio] .yandex-playlist{border-radius:12px}
:root[data-panel-style=studio] .accent-option,:root[data-panel-style=studio] .panel-style-option{border-radius:10px}
:root[data-panel-style=studio] .scenario-step{border-radius:12px}:root[data-panel-style=studio] .scenario-picker{border-radius:14px}
@media(min-width:840px){:root[data-panel-style=studio] .oc-navigation{inset:0 auto 0 0;width:224px;padding:24px 16px;gap:5px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:0;border-right:1px solid color-mix(in srgb,var(--outline-variant) 55%,transparent);border-radius:0}:root[data-panel-style=studio] .nav-brand{font-size:15px;padding:0 5px 24px;gap:10px}:root[data-panel-style=studio] .nav-brand small{font-size:11px}:root[data-panel-style=studio] .oc-navigation .dest{min-height:42px;border-radius:9px;padding:0 12px;font-size:13px;font-weight:550;gap:12px}:root[data-panel-style=studio] .oc-navigation .dest .ms{font-size:21px;width:22px;height:22px}:root[data-panel-style=studio] .oc-navigation .dest[aria-current]{background:var(--secondary-container);color:var(--on-secondary-container)}:root[data-panel-style=studio] .app>.main{margin-left:224px}:root[data-panel-style=studio] .content{padding:10px 24px 64px;max-width:1440px}:root[data-panel-style=studio] .applications-caption{padding:20px 12px 7px;font-size:10px;font-weight:650;letter-spacing:1px}}
@media(max-width:839px){:root[data-panel-style=studio] .topbar{height:64px}:root[data-panel-style=studio] .topbar h1{font-size:20px}:root[data-panel-style=studio] .oc-navigation{border-radius:0;background:var(--surface-1);border-top:1px solid var(--outline-variant)}:root[data-panel-style=studio] .oc-navigation .dest{border-radius:8px}:root[data-panel-style=studio] .content{padding:14px 14px 110px}:root[data-panel-style=studio] .card{padding:16px}:root[data-panel-style=studio] .cover{width:76px;height:76px}:root[data-panel-style=studio] .np__title{font-size:20px}:root[data-panel-style=studio] .plugin-editor{border-radius:0}}

/* vivid75 — the onboarding palette across the whole panel. */
:root:not([data-panel-style=studio]){--surface:#111016;--surface-1:#1d1b24;--surface-2:#25222e;--surface-3:#302a3b;--on-surface:#f0edf7;--on-surface-variant:#b5aebe;--outline:#84778e;--outline-variant:#3a3245;--radius-l:28px;--radius-m:20px;--radius-s:14px}
:root:not([data-panel-style=studio]) body{background:radial-gradient(ellipse 900px 650px at 94% 0,color-mix(in srgb,var(--primary) 12%,transparent),transparent 70%),radial-gradient(ellipse 700px 600px at 5% 100%,color-mix(in srgb,var(--primary) 4%,transparent),transparent 80%),var(--surface);background-attachment:fixed}
:root:not([data-panel-style=studio]) .card{border-radius:26px;background:linear-gradient(140deg,color-mix(in srgb,var(--primary) 3%,transparent),transparent 70%),var(--surface-1);border-color:color-mix(in srgb,var(--primary) 18%,#ffffff09);box-shadow:0 10px 30px #00000012,inset 0 1px 0 #ffffff03}
:root:not([data-panel-style=studio]) .card h2{font-weight:600;letter-spacing:-.25px}
:root:not([data-panel-style=studio]) .topbar h1{font-size:26px;letter-spacing:-.65px;font-weight:600}
:root:not([data-panel-style=studio]) .btn{border-radius:99px;font-weight:600;letter-spacing:0}
:root:not([data-panel-style=studio]) .input,:root:not([data-panel-style=studio]) select.input,:root:not([data-panel-style=studio]) textarea.input{border-radius:14px;background:color-mix(in srgb,var(--surface) 85%,var(--primary) 2%);border-color:color-mix(in srgb,var(--primary) 23%,var(--surface-2))}
:root[data-panel-style=studio]{--surface:#101115;--surface-1:#1d1f27;--surface-2:#272a35;--surface-3:#333747;--on-surface:#f4f3fa;--on-surface-variant:#b6b7c7;--outline:#808496;--outline-variant:#3b3e4d}
:root[data-panel-style=studio] body{background:radial-gradient(ellipse 900px 600px at 96% 0,color-mix(in srgb,var(--primary) 18%,transparent),transparent 75%),var(--surface);background-attachment:fixed}
:root[data-panel-style=studio] .card{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 4%,transparent),transparent 65%),var(--surface-1);border-color:color-mix(in srgb,var(--primary) 19%,var(--outline-variant));box-shadow:0 6px 24px #00000020,inset 0 1px 0 #ffffff04}
:root .topbar{background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--outline-variant) 35%,transparent)}
:root .btn{transition:background .18s,box-shadow .18s,filter .18s,transform .18s}
:root .btn:not(.btn--text):not(.btn--outlined):not(.btn--tonal):not(.btn--danger){box-shadow:0 5px 18px color-mix(in srgb,var(--primary) 16%,transparent)}
:root .btn:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-1px)}
:root .btn--tonal{background:var(--secondary-container);color:var(--on-secondary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 14%,transparent)}
:root .btn--outlined{color:var(--primary);background:color-mix(in srgb,var(--primary) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 36%,var(--outline-variant))}
:root .btn--text{background:transparent;box-shadow:none}
:root .input:focus,:root select.input:focus,:root textarea.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
:root .icon-btn--tonal,:root .settings-tabs>[aria-selected=true]{background:var(--secondary-container);color:var(--on-secondary-container)}
:root .oc-navigation .dest[aria-current]{background:var(--secondary-container);color:var(--on-secondary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 20%,transparent)}
:root .panel-style-option[aria-pressed=true],:root .accent-option[aria-pressed=true]{box-shadow:0 0 0 1px var(--primary),0 5px 20px color-mix(in srgb,var(--primary) 10%,transparent)}
:root .style-preview--soft{background:radial-gradient(ellipse at 95% 0,color-mix(in srgb,var(--primary) 20%,transparent),transparent 75%),#111016}
:root .style-preview--soft .preview-card{background:#25202f;border-color:#c4a5ff24;border-radius:18px}
:root .style-preview--soft .preview-nav{background:#211b2c}
:root .style-preview--soft .preview-button{box-shadow:0 3px 12px color-mix(in srgb,var(--primary) 30%,transparent)}
:root .style-preview--studio .preview-card{background:#252936;border-color:#c4a5ff25}
@media(min-width:840px){:root:not([data-panel-style=studio]) .oc-navigation{background:color-mix(in srgb,var(--surface) 90%,var(--primary) 3%);border-right-color:color-mix(in srgb,var(--primary) 12%,transparent)}}
@media(max-width:839px){:root:not([data-panel-style=studio]) .topbar h1{font-size:20px;letter-spacing:-.35px}:root .oc-navigation{background:color-mix(in srgb,var(--surface-1) 94%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}}
@media(prefers-reduced-motion:reduce){:root .btn{transition:none}:root .btn:not(:disabled):hover{transform:none}}