:root{--cream:#FFF9EF;--paper:#FFE9C7;--honey:#E8984F;--choc:#3A2A24;--sage:#4FC98A;--terra:#FF7A55;--butter:#FFD25E;--cobalt:#4A6CF0;--sky:#5BC0EB;--line:rgba(58,42,36,.14);--sh:0 8px 0 rgba(255,138,61,.16),0 18px 40px rgba(58,42,36,.14);--acc:#FF7A55;--pink:#FF6FA5;--mint:#2EC4B6;--violet:#9B6BFF}
html,body{background:linear-gradient(160deg,#FFE7B8,#FFD3C2 45%,#C9E8F5)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#F2E4D2;color:var(--choc);font:15px/1.4 'Golos Text','Noto Sans Armenian','PingFang SC','Microsoft YaHei',system-ui,sans-serif;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#fx{position:fixed;inset:0;pointer-events:none;z-index:60}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic .a{fill:var(--acc);stroke:currentColor}
h1,h2,h3,.uf{font-family:Unbounded,'Noto Sans Armenian','PingFang SC','Microsoft YaHei',sans-serif;font-weight:800;margin:0}
.ui{position:fixed;z-index:10}
/* top bar */
#top{top:10px;left:10px;right:10px;display:flex;gap:8px;align-items:flex-start;pointer-events:none;flex-wrap:wrap}
#top>*{pointer-events:auto}
.chip{background:var(--cream);border:2px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:7px 12px;display:flex;align-items:center;gap:8px}
.money{display:inline-flex;align-items:center;gap:3px;color:#2E9E63}
.money.neg{color:#E5484D}
.money .ic{width:15px;height:15px}
#saved{opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s;color:#2E9E63;font-weight:600}
#saved.on{opacity:1;transform:none}
#brand{font-family:Unbounded,'Noto Sans Armenian',sans-serif;font-weight:800;font-size:13px;letter-spacing:.02em;background:linear-gradient(135deg,#FFF9EF,#FFE0C2)}
#brand b{color:var(--terra)}
#stat{flex-direction:column;align-items:flex-start;gap:0;min-width:0}
#stat .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
#stat .sub{font-size:12px;opacity:.75;white-space:nowrap}
#goal{font-size:13px;max-width:360px}
#goal .ic{width:18px;height:18px}
.sp{flex:1}
.rb{width:44px;height:44px;border-radius:14px;background:var(--cream);border:2px solid var(--line);display:grid;place-items:center;box-shadow:0 4px 0 #D7C2A6,0 8px 18px rgba(58,42,36,.12);transition:transform .12s,box-shadow .12s}
.rb:active{transform:translateY(3px);box-shadow:0 1px 0 #D7C2A6}
/* keycap nav */
#nav{bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;max-width:calc(100vw - 16px);overflow-x:auto;padding:4px 4px 8px;scrollbar-width:none}
#nav::-webkit-scrollbar{display:none}
.key{min-width:76px;height:58px;border-radius:14px;background:#FFF8EE;border:2px solid var(--line);box-shadow:0 4px 0 #D7C2A6,0 8px 18px rgba(58,42,36,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:Unbounded,'Noto Sans Armenian',sans-serif;font-weight:600;font-size:10px;transition:transform .12s cubic-bezier(.3,1.6,.6,1),box-shadow .12s}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 #D7C2A6,0 4px 8px rgba(58,42,36,.1)}
.key.on{background:linear-gradient(145deg,var(--cobalt),#6B8CFF);color:var(--cream);box-shadow:0 4px 0 #2B47A6,0 8px 18px rgba(74,108,240,.4);--acc:var(--butter)}
/* panel */
#panel{right:12px;top:72px;bottom:96px;width:390px;background:var(--cream);border:2px solid var(--line);border-radius:20px;box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .42s cubic-bezier(.3,1.35,.5,1),opacity .3s;overflow:hidden}
#panel.hide{transform:translateX(115%);opacity:0;pointer-events:none}
#panel .hd{display:flex;align-items:center;gap:10px;padding:14px 14px 10px}
#panel .hd h2{font-size:19px;flex:1}
#panel .bd{overflow-y:auto;padding:0 14px 16px;flex:1;overscroll-behavior:contain}
#panel.min .bd{display:none}
#panel.min .hd{cursor:pointer}
#panel.min .hd h2:after{content:'  · нажми, чтобы развернуть';font:600 12px 'Golos Text';opacity:.6}
#panel.min{bottom:auto}
.sec{margin:14px 0 6px;font-family:Unbounded,'Noto Sans Armenian',sans-serif;font-weight:600;font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.04em}
/* slots list */
.slot{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:#FFF8EE;border:2px solid transparent;margin-bottom:6px;cursor:pointer;transition:transform .2s}
.slot:hover{border-color:var(--line)}
.slot.sel{border-color:var(--cobalt)}
.slot .t{flex:1;min-width:0}
.slot .t b{display:block;font-size:12px;opacity:.65;font-weight:600}
.slot .t span{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .t span.empty{opacity:.45;font-weight:400}
.dot{width:12px;height:12px;border-radius:4px;transform:rotate(45deg);flex:none;background:#D7C9B8}
.dot.ok{background:var(--sage)}.dot.warn{background:var(--butter)}.dot.err{background:#E5484D}
.mini{font-size:12px;padding:6px 10px;border-radius:10px;background:var(--paper);font-weight:600}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:14px;background:linear-gradient(145deg,#FF8F6B,var(--terra));color:#fff;font-weight:600;box-shadow:0 4px 0 #D45A3C;transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #B6513A}
.btn.alt{background:#FFF8EE;color:var(--choc);box-shadow:0 4px 0 #D7C2A6;border:2px solid var(--line)}
.btn.blue{background:linear-gradient(145deg,#6B8CFF,var(--cobalt));box-shadow:0 4px 0 #2B47A6;--acc:var(--butter)}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:11px}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn .ic{width:18px;height:18px}
.btn:not(.alt) .ic{--acc:var(--cream);stroke:var(--cream)}
.btn.alt .ic{stroke:var(--choc)}
/* stickers */
.stk{position:relative;background:#FFF8EE;border-radius:14px;padding:10px 14px 10px 18px;margin:8px 0;box-shadow:0 4px 0 rgba(58,42,36,.06),0 8px 18px rgba(58,42,36,.08);font-size:14px;overflow:hidden}
.stk:before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--terra)}
.stk.warn:before{background:var(--butter)}.stk.ok:before{background:var(--sage)}
.stk:after{content:'';position:absolute;right:0;top:0;width:20px;height:20px;background:linear-gradient(225deg,#F2E4D2 50%,#E3CBB0 50%);border-bottom-left-radius:6px}
#toasts{top:76px;left:50%;transform:translateX(-50%);width:min(440px,92vw);display:flex;flex-direction:column;gap:6px;pointer-events:none}
#toasts .stk{pointer-events:auto;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.8) translateY(-10px);opacity:0}}
/* shop */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.tabs button{flex:none;padding:7px 11px;border-radius:999px;background:#FFF8EE;border:2px solid var(--line);font-size:13px;font-weight:600;display:flex;gap:6px;align-items:center}
.tabs button.on{background:var(--cobalt);color:var(--cream);border-color:var(--cobalt);--acc:var(--butter)}
.tabs .ic{width:16px;height:16px}
.pill{display:flex;align-items:center;gap:8px;background:#FFF8EE;border:2px solid var(--line);border-radius:999px;padding:6px 12px}
.pill input{border:0;background:none;outline:none;font:inherit;flex:1;min-width:0;color:var(--choc)}
.seg{display:flex;background:var(--paper);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;padding:6px 8px;border-radius:9px;font-size:12px;font-weight:600}
.seg button.on{background:#FFF8EE;box-shadow:0 2px 0 rgba(58,42,36,.1)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:var(--paper);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--cobalt);border:3px solid var(--cream);transform:rotate(45deg);border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--cobalt);border:3px solid var(--cream);transform:rotate(45deg);border-radius:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.card{position:relative;background:linear-gradient(175deg,#FFFDF8,#FFF2DC);border:2px solid var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:6px;transition:transform .25s cubic-bezier(.3,1.6,.5,1);touch-action:pan-y}
.card canvas{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--pc,#fff) 30%,#fff) 0%,#fff 70%)}
.card.poor{opacity:.72}
.card .why{color:#D4453B;font-weight:600}
.card:hover{transform:translateY(-2px)}
.card.inst{border-color:var(--sage)}
.card canvas{width:100%;aspect-ratio:4/3;border-radius:12px;background:var(--cream);display:block}
.card .nm{font-weight:600;font-size:14px;line-height:1.2;min-height:34px}
.card .specs{display:flex;flex-direction:column;gap:2px;font-size:12px;opacity:.85}
.card .specs span{display:flex;gap:5px;align-items:center}
.card .specs .ic{width:14px;height:14px}
.tag{position:absolute;top:12px;right:-4px;background:linear-gradient(135deg,#FFE28A,var(--butter));padding:4px 10px 4px 18px;border-radius:5px;font-weight:700;font-size:13px;transform:rotate(-3deg);box-shadow:0 2px 0 rgba(58,42,36,.15);color:#5c3b00}
.tag:before{content:'';position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#FFF8EE;box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
.card.bad .tag{background:#D9C3C3}
.why{font-size:12px;color:#B6513A;line-height:1.25}
.tier{display:flex;gap:3px}
.tier i{width:16px;height:8px;background:var(--paper);clip-path:polygon(25% 0,100% 0,75% 100%,0 100%)}
.tier i.on{background:var(--cobalt)}
/* swatches */
.sws{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:32px;height:32px;border-radius:50%;border:2px solid rgba(58,42,36,.15);position:relative}
.sw:after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.35) 0 45%,rgba(0,0,0,.08) 45% 100%)}
.sw.on{outline:3px solid var(--cobalt);outline-offset:2px}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mode{border-radius:12px;background:#FFF8EE;border:2px solid var(--line);padding:6px 4px;font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px}
.mode.on{border-color:var(--cobalt)}
.mode .pv{width:100%;height:12px;border-radius:6px;background:#3A2A24}
.mode .pv.static{background:var(--c1)}
.mode .pv.breathe{background:var(--c1);animation:br 2s ease-in-out infinite}
.mode .pv.wave,.mode .pv.duo{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c1));background-size:200% 100%;animation:wv 2s linear infinite}
.mode .pv.duo{background:repeating-linear-gradient(90deg,var(--c1) 0 10px,var(--c2) 10px 20px);animation:none}
.mode .pv.rainbow{background:linear-gradient(90deg,#ff5f5f,#ffd25a,#7cff8a,#3cf2ff,#9b6bff,#ff5f5f);background-size:200% 100%;animation:wv 2s linear infinite}
.mode .pv.twinkle{background:radial-gradient(circle at 20% 50%,var(--c2) 0 3px,transparent 4px),radial-gradient(circle at 60% 50%,var(--c1) 0 3px,transparent 4px),#2c1b4e;animation:br 1s steps(2) infinite}
@keyframes br{50%{opacity:.35}}@keyframes wv{to{background-position:200% 0}}
.styles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.style{background:#FFF8EE;border:2px solid var(--line);border-radius:14px;padding:6px;font-size:12px;font-weight:600;text-align:left}
.style canvas{width:100%;aspect-ratio:4/3;border-radius:10px;display:block;background:var(--cream)}
.style.on{border-color:var(--cobalt)}
/* power */
#power{left:22px;bottom:22px;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,var(--terra) 0 62%,transparent 63%),repeating-conic-gradient(#F08A6C 0 22.5deg,#C9583C 22.5deg 45deg);display:grid;place-items:center;color:var(--cream);box-shadow:0 6px 0 #A9472F,0 14px 30px rgba(224,112,79,.35);transition:transform .15s}
#power:active{transform:translateY(4px);box-shadow:0 2px 0 #A9472F}
#power .ic{width:40px;height:40px;stroke-width:3;stroke:var(--cream)}
#power.ready{animation:aura 2s ease-in-out infinite}
#power.on{background:radial-gradient(circle,#6FAF86 0 62%,transparent 63%),repeating-conic-gradient(#A8E0BA 0 22.5deg,#6FAF86 22.5deg 45deg);box-shadow:0 6px 0 #4E8A63,0 0 30px rgba(141,191,159,.7)}
@keyframes aura{50%{box-shadow:0 6px 0 #A9472F,0 0 0 14px rgba(224,112,79,.22),0 14px 30px rgba(224,112,79,.35)}}
#tools{left:44px;bottom:124px;display:flex;flex-direction:column;gap:8px}
/* bench hud */
#hud{inset:0;pointer-events:none;display:none}
#hud.on{display:block}
#hud .pl{position:absolute;background:rgba(246,235,221,.86);border:2px solid var(--line);border-radius:18px;padding:10px 14px;box-shadow:var(--sh)}
#hud .tl{left:12px;top:72px}#hud .tr{right:12px;top:72px}#hud .bl{left:12px;bottom:90px}#hud .br{right:12px;bottom:90px}
#hud .big{font-family:Unbounded,'Noto Sans Armenian',sans-serif;font-weight:800;font-size:72px;line-height:1}
#hud .lab{font-size:12px;font-weight:600;opacity:.7}
#hud .ctrl{position:absolute;left:50%;top:72px;transform:translateX(-50%);pointer-events:auto;display:flex;gap:8px;align-items:center}
#hud canvas{display:block}
.rings{display:flex;gap:12px}
.bar{height:12px;border-radius:6px;background:var(--paper);overflow:hidden;width:180px}.bar i{display:block;height:100%;background:var(--sage);border-radius:6px}
body.full #panel,body.full #nav,body.full #power,body.full #tools,body.full #top .chip:not(#brand){opacity:0;pointer-events:none}
/* modal */
#modal{inset:0;background:rgba(58,42,36,.35);display:none;align-items:center;justify-content:center;z-index:40;padding:12px}
#modal.on{display:flex}
.pass{background:var(--cream);border-radius:22px;border:2px solid var(--line);box-shadow:var(--sh);width:min(920px,100%);max-height:94vh;overflow:auto;padding:18px;display:grid;grid-template-columns:1fr 1.25fr;gap:16px;position:relative}
.pass.shake{animation:shk .35s}
@keyframes shk{25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,1px)}}
.pass canvas{width:100%;aspect-ratio:1;border-radius:16px;background:radial-gradient(circle at 50% 35%,#FFF4DC,#FFD9A6);display:block}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.fields div{background:#FFF8EE;border-radius:12px;padding:7px 10px}.fields b{display:block;font-size:11px;opacity:.65}.fields span{font-weight:600}
.fields .num{font-family:Unbounded,'Noto Sans Armenian',sans-serif;font-weight:800;font-size:22px}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:Unbounded,'Noto Sans Armenian',sans-serif;font-weight:800;border-radius:14px;padding:8px 14px;color:var(--choc)}
.badge.r0{background:var(--sage);font-size:15px}.badge.r1{background:var(--sky);font-size:16px}.badge.r2{background:var(--cobalt);color:var(--cream);font-size:17px}.badge.r3{background:var(--terra);color:var(--cream);font-size:19px}
.badge.r4{background:var(--butter);font-size:21px;box-shadow:0 0 0 3px var(--choc),0 0 30px rgba(244,201,93,.8)}
.badge.r4:before{content:'';width:18px;height:18px;background:var(--choc);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stamp{animation:stamp .6s cubic-bezier(.3,1.7,.5,1) both}
@keyframes stamp{0%{transform:scale(1.4) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(-2deg);opacity:1}}
/* compare */
.chart{display:flex;align-items:flex-end;gap:10px;height:130px;padding:20px 4px 0;border-bottom:2px solid var(--line)}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.chart .bar2{width:70%;border-radius:12px 12px 4px 4px;min-height:6px;transition:height .6s cubic-bezier(.3,1.4,.5,1)}
.chart .v{font-size:12px;font-weight:600}
.crown{position:absolute;top:-4px;width:14px;height:14px;background:var(--butter);transform:rotate(45deg);border:2px solid var(--choc);border-radius:3px}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.bcard{background:#FFF8EE;border-radius:14px;border:2px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:6px}
.bcard canvas{width:100%;aspect-ratio:1;border-radius:10px;background:radial-gradient(circle at 50% 35%,#FFF4DC,#FFD9A6);border-bottom:8px solid var(--honey)}
.plaque{background:#F3E2C4;border-radius:6px;padding:6px 8px;font-size:12px;box-shadow:inset 0 0 0 2px rgba(58,42,36,.08)}
.theme{display:flex;gap:10px;align-items:center;background:#FFF8EE;border:2px solid var(--line);border-radius:14px;padding:10px;margin-bottom:8px;width:100%;text-align:left}
.theme.on{border-color:var(--cobalt)}.theme.lock{opacity:.6}
.theme i{width:46px;height:46px;border-radius:12px;flex:none}
#help{top:72px;left:12px;width:min(360px,92vw);display:none;max-height:calc(100vh - 200px);overflow-y:auto;z-index:30;font-size:14px}
#help.on{display:block}
#flash{inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,226,170,.75),rgba(255,210,150,0) 70%);opacity:0;transition:opacity .6s;z-index:55}
#drag{position:fixed;z-index:70;pointer-events:none;width:110px;border-radius:14px;box-shadow:var(--sh);opacity:.92;transform:translate(-50%,-50%) rotate(-4deg);display:none;background:#FFF8EE;padding:6px;font-size:12px;font-weight:600}
#presx{top:14px;left:50%;transform:translateX(-50%);display:none}
body.present #panel,body.present #nav,body.present #power,body.present #tools,body.present #top{transform:translateY(160%);opacity:0;pointer-events:none;transition:transform .6s,opacity .4s}
body.present #presx{display:flex}
#intro{inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(246,235,221,.55);padding:16px}
#intro .box{background:var(--cream);border-radius:24px;border:2px solid var(--line);box-shadow:var(--sh);padding:22px;max-width:440px}
#intro h1{font-size:30px;margin-bottom:6px}#intro h1 b{color:var(--terra)}
#intro ul{padding-left:0;list-style:none;margin:12px 0 16px}#intro li{display:flex;gap:10px;align-items:center;margin:8px 0}
/* narrow / portrait: bottom sheet */
@media (max-width:760px),(max-aspect-ratio:1/1){
 #panel{left:8px;right:8px;width:auto;top:auto;bottom:84px;height:47vh}
 #panel.hide{transform:translateY(120%)}
 #panel.min{height:auto;top:auto;bottom:84px}
 .key{min-width:52px;height:52px;font-size:9px;padding:0 4px}
 #nav{bottom:8px;gap:5px}
 #power{width:64px;height:64px;left:auto;right:12px;bottom:auto;top:66px}
 #power .ic{width:30px;height:30px}
 #tools{left:auto;right:14px;bottom:auto;top:140px;flex-direction:column}
 #goal{display:none}
 #stat .nm{max-width:140px}
 #hud .big{font-size:42px}
 #hud .tl,#hud .tr{top:66px}#hud .tr{right:12px}#hud .bl,#hud .br{bottom:160px}#hud .ctrl{top:auto;bottom:290px;left:auto;right:12px;transform:none}
 body.hudon #power,body.hudon #tools{opacity:0;pointer-events:none}
 body.hudon #toasts{top:auto;bottom:230px}
 #hud .pl{padding:8px 10px}
 #hud .rings canvas{width:60px;height:60px}
 #hud .br canvas{width:150px;height:70px}
 .pass{grid-template-columns:1fr}
 .pass canvas{max-height:34vh;aspect-ratio:auto;height:34vh}
 .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (max-height:520px) and (min-aspect-ratio:1/1){
 #panel{top:62px;bottom:72px;width:340px}
 .key{height:48px;min-width:60px}
 #power{width:60px;height:60px;bottom:10px;left:10px}
 #power .ic{width:28px;height:28px}
 #tools{bottom:80px;left:18px;gap:6px}
 #tools .rb{width:40px;height:40px}
 #nav{left:auto;right:8px;transform:none;max-width:calc(100vw - 90px)}
 #help{font-size:13px;width:min(330px,60vw)}
 #panel .hd{padding:10px 12px 6px}
 #panel .hd h2{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #panel.min .hd h2:after{content:''}
 .grid{grid-template-columns:repeat(2,1fr);gap:8px}
 .card .nm{font-size:12px;min-height:30px}
 .card .specs{font-size:11px}
 .card>div[style]{display:none}
 .tag{font-size:11px;top:8px}
 #hud .big{font-size:40px}
}

@media (min-width:761px) and (min-aspect-ratio:1/1){
 body.hudon:not(.full) #hud .tr,body.hudon:not(.full) #hud .br{right:414px}
}
@media (max-height:520px) and (min-aspect-ratio:1/1){
 body.hudon:not(.full) #hud .tr,body.hudon:not(.full) #hud .br{right:364px}
}

.budget{background:#FFF0DC;border:2px solid var(--line);border-radius:14px;padding:8px 10px;margin-bottom:10px}
.nameIn{width:100%;font:600 15px 'Golos Text';color:var(--choc)}
.count{font-size:12px;opacity:.65;margin:2px 0 8px}
.pfilter{margin:10px 2px 4px;font-size:13px;display:flex;justify-content:space-between}
.sic{width:22px;height:22px;flex:none;display:inline-flex}
.sic .ic{width:22px;height:22px}
.s-cpu .ic{stroke:#FF7A55}.s-gpu .ic{stroke:#4A6CF0}.s-mb .ic{stroke:#2EC4B6}.s-ram .ic{stroke:#9B6BFF}.s-cooler .ic{stroke:#5BC0EB}
.s-case .ic{stroke:#E8984F}.s-ssd .ic{stroke:#FFD25E}.s-psu .ic{stroke:#FF6FA5}.s-fans .ic{stroke:#4FC98A}.s-cables .ic{stroke:#B48CFF}.s-skin .ic{stroke:#FF6FA5}.s-decor .ic{stroke:#FFA94D}
.langs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lang{padding:9px 6px;border-radius:12px;background:#FFF8EE;border:2px solid var(--line);font-size:12px;font-weight:600}
.lang.on{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.volrow{display:flex;align-items:center;gap:10px;font-size:13px;margin:8px 0}
.volrow input{flex:1}
.dlgbox{background:var(--cream);border-radius:22px;border:2px solid var(--line);box-shadow:var(--sh);padding:20px;width:min(420px,100%)}
#cfgbox{width:min(420px,100%);max-height:88vh;overflow:auto}
.startbox{max-width:480px;max-height:90vh;overflow:auto}
.startList{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:30vh;overflow:auto}
.startItem{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#FFF8EE;border:2px solid var(--line);border-radius:12px;padding:8px 12px;text-align:left}
.startItem span{font-size:12px;opacity:.7}