/* aurora102 — «Аврора»: спокойная база. Фон, поверхности, рисованная графика и анимации
   задаёт вариант (aurora-variants.css, data-aurora-variant=a..e); цвет элементов
   управления — акцент панели (--primary из applyAccent). Без неона и свечения. */
:root[data-panel-style=aurora]{
 --surface:#0c0d11;--surface-1:#14151b;--surface-2:#1b1c23;--surface-3:#24252d;
 --on-surface:#eceef3;--on-surface-variant:#a3a7b3;--outline:#666b78;--outline-variant:#2b2d36;
 --radius-l:28px;--radius-m:var(--card-radius,20px);--radius-s:14px;
 --card-bg:rgba(24,25,32,.62);--card-line:rgba(255,255,255,.07);--card-blur:18px;--card-radius:20px;--card-shadow:0 18px 40px -26px rgba(0,0,0,.7);
 --nav-bg:rgba(16,17,22,.72);--glass-line:rgba(255,255,255,.07);--glass-strong:rgba(16,17,22,.9);
 --deco-1:#7c8bb0;--deco-2:#9a8fb8;--deco-3:#6fa3a6;
 --tint:#a9b6d4;--ac:color-mix(in srgb,var(--primary) 45%,var(--tint));--on-ac:#0e0f14;
 --ease-spring:cubic-bezier(.22,1.2,.36,1);--ease-out:cubic-bezier(.2,.8,.2,1);
 color-scheme:dark;
}
:root[data-panel-style=aurora] body{background:var(--surface);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* ---- фон: слои рисует вариант ---- */
.aurora-sky{display:none}
:root[data-panel-style=aurora] .aurora-sky{display:block;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--sky-bg,var(--surface))}
:root[data-panel-style=aurora] .aurora-sky>*{position:absolute;display:block;pointer-events:none}

/* ---- типографика ---- */
:root[data-panel-style=aurora] .topbar h1{font-size:28px;font-weight:720;letter-spacing:-.8px;color:var(--on-surface)}
:root[data-panel-style=aurora] .card h2{font-size:15px;font-weight:680;letter-spacing:-.15px}
:root[data-panel-style=aurora] .eyebrow{color:color-mix(in srgb,var(--ac) 60%,#fff);letter-spacing:1.4px;font-weight:650}
:root[data-panel-style=aurora] .page-heading h2{font-weight:720;letter-spacing:-.8px}

/* ---- поверхности ---- */
:root[data-panel-style=aurora] .card,:root[data-panel-style=aurora] .home-status-line,:root[data-panel-style=aurora] .home-overview{
 position:relative;isolation:isolate;border-radius:var(--card-radius);border:1px solid var(--card-line);background:var(--card-bg);
 backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));box-shadow:var(--card-shadow);transition:border-color .3s,box-shadow .4s var(--ease-out)}
:root[data-panel-style=aurora] .command-library,:root[data-panel-style=aurora] .music-queue-card{position:sticky}
:root[data-panel-style=aurora] .playlist-tracks-heading{background:var(--glass-strong)}
:root[data-panel-style=aurora] .card::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0),rgba(255,255,255,.035),transparent 65%)}
@media (hover:hover){:root[data-panel-style=aurora] .card:hover::before{opacity:1}:root[data-panel-style=aurora] .card:hover{border-color:color-mix(in srgb,var(--card-line) 50%,rgba(255,255,255,.14))}}
:root[data-panel-style=aurora] .card .card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.025);box-shadow:none}
:root[data-panel-style=aurora] .card .card::before{display:none}
:root[data-panel-style=aurora] .bubble{border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--glass-line)}
:root[data-panel-style=aurora] .bubble--bot{background:color-mix(in srgb,var(--ac) 12%,transparent);border-color:color-mix(in srgb,var(--ac) 20%,transparent);color:var(--on-surface)}
:root[data-panel-style=aurora] .kv,:root[data-panel-style=aurora] .item,:root[data-panel-style=aurora] .speaker-details{border-color:var(--glass-line)}

/* ---- кнопки ---- */
:root[data-panel-style=aurora] .btn{height:40px;padding:0 18px;border-radius:var(--btn-radius,999px);font-weight:650;font-size:13.5px;letter-spacing:0;transition:transform .3s var(--ease-spring),background .25s,filter .2s,box-shadow .25s;position:relative;overflow:hidden;isolation:isolate}
:root[data-panel-style=aurora] .btn:not(.btn--text):not(.btn--outlined):not(.btn--tonal):not(.btn--danger){background:var(--ac);color:var(--on-ac);box-shadow:none}
:root[data-panel-style=aurora] .btn--tonal{background:color-mix(in srgb,var(--ac) 14%,rgba(255,255,255,.03));color:color-mix(in srgb,var(--ac) 35%,#fff);box-shadow:none}
:root[data-panel-style=aurora] .btn--outlined{background:transparent;color:var(--on-surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
:root[data-panel-style=aurora] .btn--outlined:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
:root[data-panel-style=aurora] .btn--text{color:color-mix(in srgb,var(--ac) 70%,#fff)}
:root[data-panel-style=aurora] .btn--danger{background:rgba(232,110,128,.16);color:#f6c9d0;box-shadow:none}
:root[data-panel-style=aurora] .btn:not(:disabled):hover{transform:none;filter:brightness(1.07)}
:root[data-panel-style=aurora] .btn:not(:disabled):active{transform:scale(.97);transition-duration:.08s}
:root[data-panel-style=aurora] .icon-btn{border-radius:12px;transition:background .2s,transform .3s var(--ease-spring),color .2s}
:root[data-panel-style=aurora] .icon-btn:hover{background:rgba(255,255,255,.06);color:var(--on-surface)}
:root[data-panel-style=aurora] .icon-btn:active{transform:scale(.92)}
:root[data-panel-style=aurora] .icon-btn--filled,:root[data-panel-style=aurora] .np__play{background:var(--ac);color:var(--on-ac);box-shadow:none}
:root[data-panel-style=aurora] .np__play{border-radius:50%}
:root[data-panel-style=aurora] .icon-btn--tonal{background:color-mix(in srgb,var(--ac) 16%,transparent);color:color-mix(in srgb,var(--ac) 35%,#fff)}
.oc-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.14;transform:scale(0);animation:oc-ripple .55s var(--ease-out,ease-out) forwards;z-index:-1}
@keyframes oc-ripple{to{transform:scale(1);opacity:0}}

/* ---- поля и контролы ---- */
:root[data-panel-style=aurora] .input,:root[data-panel-style=aurora] select.input,:root[data-panel-style=aurora] textarea.input{border-radius:var(--input-radius,14px);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);transition:border-color .2s,box-shadow .2s}
:root[data-panel-style=aurora] .input:hover{border-color:rgba(255,255,255,.15)}
:root[data-panel-style=aurora] .input:focus,:root[data-panel-style=aurora] select.input:focus,:root[data-panel-style=aurora] textarea.input:focus{border:1px solid color-mix(in srgb,var(--ac) 70%,transparent);padding:10px 14px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent)}
:root[data-panel-style=aurora] .field>span{font-size:12.5px;font-weight:600;color:var(--on-surface-variant)}
:root[data-panel-style=aurora] .slider{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--ac) var(--pct,50%),rgba(255,255,255,.1) var(--pct,50%))}
:root[data-panel-style=aurora] .slider::-webkit-slider-thumb{width:20px;height:20px;border-radius:50%;background:#f4f4f7;border:0;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:transform .25s var(--ease-spring)}
:root[data-panel-style=aurora] .slider:active::-webkit-slider-thumb{transform:scale(1.12)}
:root[data-panel-style=aurora] .slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#f4f4f7;border:0}
:root[data-panel-style=aurora] .switch i{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .3s}
:root[data-panel-style=aurora] .switch i::after{background:#c7cad3;transition:left .35s var(--ease-spring),top .35s var(--ease-spring),width .35s var(--ease-spring),height .35s var(--ease-spring),background .3s}
:root[data-panel-style=aurora] .switch input:checked+i{background:var(--ac);box-shadow:none}
:root[data-panel-style=aurora] .switch input:checked+i::after{background:var(--on-ac)}
:root[data-panel-style=aurora] .chip{border-radius:var(--btn-radius,999px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);background:transparent;transition:background .2s}
:root[data-panel-style=aurora] .chip--on,:root[data-panel-style=aurora] .chips button.chip.chip--on:hover{background:color-mix(in srgb,var(--ac) 18%,transparent);color:var(--on-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 34%,transparent)}
:root[data-panel-style=aurora] .segmented{border-radius:14px;box-shadow:none;background:rgba(255,255,255,.035);padding:4px;gap:4px;border:1px solid var(--glass-line)}
:root[data-panel-style=aurora] .segmented button{border:0;border-radius:10px;transition:background .25s}
:root[data-panel-style=aurora] .segmented button[aria-checked=true],:root[data-panel-style=aurora] .segmented .selected,:root[data-panel-style=aurora] [role=tablist] [role=tab][aria-selected=true]{background:color-mix(in srgb,var(--ac) 20%,rgba(255,255,255,.04));color:var(--on-surface)}
:root[data-panel-style=aurora] .progress,:root[data-panel-style=aurora] .np__bar{background:rgba(255,255,255,.08);border-radius:99px}
:root[data-panel-style=aurora] .progress i,:root[data-panel-style=aurora] .np__bar i{background:var(--ac);border-radius:99px}
:root[data-panel-style=aurora] .cover{border-radius:16px;background:color-mix(in srgb,var(--ac) 16%,var(--surface-2));color:color-mix(in srgb,var(--ac) 40%,#fff)}
:root[data-panel-style=aurora] .ring{background:radial-gradient(circle,var(--surface-2) 56%,var(--surface-1) 57%);box-shadow:0 0 0 1px var(--glass-line)}
:root[data-panel-style=aurora] .banner{border-radius:16px;background:color-mix(in srgb,var(--deco-3) 16%,var(--surface-1));color:var(--on-surface);border:1px solid color-mix(in srgb,var(--deco-3) 24%,transparent)}
:root[data-panel-style=aurora] dialog{background:var(--surface-1);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 90px -20px rgba(0,0,0,.8)}
:root[data-panel-style=aurora] dialog::backdrop{background:rgba(5,5,8,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:root[data-panel-style=aurora] dialog h2{font-weight:700;letter-spacing:-.5px}
:root[data-panel-style=aurora] .login{z-index:60;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
:root[data-panel-style=aurora] .login__card{padding:32px 28px;gap:16px;text-align:center;justify-items:center}
:root[data-panel-style=aurora] .login__card .input,:root[data-panel-style=aurora] .login__card .btn{width:100%}
:root[data-panel-style=aurora] .login__logo{width:68px;height:68px;border-radius:20px;animation:oc-float 6s ease-in-out infinite}
@keyframes oc-float{50%{transform:translateY(-4px)}}
:root[data-panel-style=aurora] ::selection{background:color-mix(in srgb,var(--ac) 40%,transparent)}
:root[data-panel-style=aurora] *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}

/* ---- навигация ---- */
@media(min-width:840px){
 :root[data-panel-style=aurora] .oc-navigation{inset:14px auto 14px 14px;width:232px;padding:20px 12px;gap:4px;border-radius:var(--nav-radius,24px);border:1px solid var(--card-line);background:var(--nav-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));box-shadow:var(--card-shadow)}
 :root[data-panel-style=aurora] .app>.main{margin-left:260px}
 :root[data-panel-style=aurora] .nav-brand{padding:6px 10px 24px;font-size:16px;font-weight:720;letter-spacing:-.3px}
 :root[data-panel-style=aurora] .nav-brand img.rail__logo{border-radius:12px}
 :root[data-panel-style=aurora] .oc-navigation .dest{position:relative;z-index:1;min-height:44px;border-radius:12px;font-weight:600;font-size:13.5px;color:var(--on-surface-variant);transition:color .25s,background .25s}
 :root[data-panel-style=aurora] .oc-navigation .dest:hover{background:rgba(255,255,255,.04);color:var(--on-surface)}
 :root[data-panel-style=aurora] .oc-navigation .dest[aria-current]{background:transparent;color:var(--on-surface);box-shadow:none}
 :root[data-panel-style=aurora] .oc-navigation .dest[aria-current] .ms{color:color-mix(in srgb,var(--ac) 70%,#fff)}
 :root[data-panel-style=aurora] .content{padding:8px 30px 64px;max-width:1460px}
 :root[data-panel-style=aurora] .topbar{height:88px;padding:0 30px}
}
:root[data-panel-style=aurora] .nav-indicator{background:var(--ind-bg,rgba(255,255,255,.06));box-shadow:var(--ind-shadow,inset 0 0 0 1px rgba(255,255,255,.08))}
:root[data-panel-style=aurora] .topbar{background:transparent;border-bottom:1px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .35s,border-color .35s}
:root[data-panel-style=aurora] .topbar.is-scrolled{background:color-mix(in srgb,var(--surface) 80%,transparent);border-bottom-color:var(--glass-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
:root[data-panel-style=aurora] #emulator-btn{border-radius:var(--btn-radius,999px);background:transparent;border:1px solid rgba(255,255,255,.12)}
:root[data-panel-style=aurora] #emulator-btn[aria-pressed=true]{background:var(--ac);color:var(--on-ac);border-color:transparent}

/* ---- выбор стиля ---- */
.style-preview--aurora{background:#0c0d11}
.style-preview--aurora::before{content:'';position:absolute;inset:-20%;background:radial-gradient(circle at 25% 20%,#7c8bb0,transparent 40%),radial-gradient(circle at 80% 80%,#6fa3a6,transparent 40%);opacity:.3;filter:blur(16px)}
.style-preview--aurora .preview-nav{inset:10px auto 10px 10px;width:22%;border-radius:12px;background:rgba(24,25,32,.7);border:1px solid rgba(255,255,255,.1)}
.style-preview--aurora .preview-card{border-radius:14px;background:rgba(24,25,32,.6);border:1px solid rgba(255,255,255,.1)}
.style-preview--aurora .preview-button{border-radius:99px;background:var(--ac)}
.style-preview--aurora .preview-heading{background:#ffffffa0}
.panel-style-options:has(>:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
@container(max-width:640px){.panel-style-options:has(>:nth-child(3)){grid-template-columns:1fr 1fr}.panel-style-options>:first-child:nth-last-child(3){grid-column:1/-1}}
:root[data-panel-style=aurora] .panel-style-option,:root[data-panel-style=aurora] .accent-option{border-radius:16px;background:rgba(255,255,255,.025);border-color:var(--glass-line)}

@media(max-width:839px){
 :root[data-panel-style=aurora] .topbar h1{font-size:22px;letter-spacing:-.6px}
 :root[data-panel-style=aurora] .card{border-radius:calc(var(--card-radius) + 2px)}
}
/* производительность: на сенсорных и узких экранах без backdrop-filter над анимированным фоном */
:root[data-panel-style=aurora] .aurora-sky{contain:strict}
@media(max-width:839px),(pointer:coarse){
 :root[data-panel-style=aurora] .card,:root[data-panel-style=aurora] .home-status-line,:root[data-panel-style=aurora] .home-overview{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--card-bg),var(--surface-1) 50%)}
 :root[data-panel-style=aurora] .topbar.is-scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--surface) 94%,transparent)}
}
@media(prefers-reduced-motion:reduce){
 :root[data-panel-style=aurora] .aurora-sky *,:root[data-panel-style=aurora] .aurora-sky::before,:root[data-panel-style=aurora] .aurora-sky::after,:root[data-panel-style=aurora] .login__logo{animation:none!important}
}