/* PIXELL NEXUS — тема «Pop Editorial» (вариант Б). Подключается ПОСЛЕ app.css и только переопределяет токены и стили компонентов. Логика и разметка не меняются. */
html:root,html:root[data-theme=light]{
  --bg:#F3EFE6;--bg2:#FFFFFF;--s1:#FFFFFF;--s2:#FFFFFF;--s3:#EDE8DC;
  --o1:rgba(17,17,17,.04);--o2:rgba(17,17,17,.07);--o3:rgba(17,17,17,.12);--o4:rgba(17,17,17,.3);--fld:#FFFFFF;
  --line:#111111;--line2:#111111;--tx:#111111;--tx2:#2B2B2B;--mu:#4D4D4D;
  --acc:#111111;--on-acc:#C8FF2E;--rc:#111111;--on-rc:#C8FF2E;--blue:#111111;--b:#111111;--b2:#111111;--v:#111111;--cy:#111111;--org:#FF5B2E;
  --ok:#0F6B2F;--warn:#8A4300;--bad:#C4260F;--info:#1D4FD7;
  --grad:#111111;--on-pri:#FFFFFF;--glow:3px 3px 0 #FF5B2E;--sh:4px 4px 0 #111111;--shs:3px 3px 0 #111111;
  --bar:#111111;--tint:#C8FF2E;--lime:#C8FF2E;--pop:#FF5B2E;--lilac:#B8A4FF;--sky:#8FD3FF;--sun:#FFE14D;--pink:#FFB3D1;
  --r-s:10px;--r-m:14px;--r-l:22px;--r-xl:26px;color-scheme:light}
html:root[data-theme=dark]{
  --bg:#141416;--bg2:#1B1B1F;--s1:#1B1B1F;--s2:#232328;--s3:#2B2B31;
  --o1:rgba(245,241,232,.05);--o2:rgba(245,241,232,.09);--o3:rgba(245,241,232,.15);--o4:rgba(245,241,232,.32);--fld:#1B1B1F;
  --line:#F5F1E8;--line2:#F5F1E8;--tx:#F5F1E8;--tx2:#DAD5C8;--mu:#ABA69B;
  --acc:#C8FF2E;--on-acc:#111111;--rc:#C8FF2E;--on-rc:#111111;--blue:#C8FF2E;--b:#C8FF2E;--b2:#C8FF2E;--v:#C8FF2E;--cy:#C8FF2E;--org:#FF5B2E;
  --ok:#C8FF2E;--warn:#FFE14D;--bad:#FF8A70;--info:#8FD3FF;
  --grad:#C8FF2E;--on-pri:#111111;--glow:3px 3px 0 #FF5B2E;--sh:4px 4px 0 #C8FF2E;--shs:3px 3px 0 #F5F1E8;
  --bar:#000000;--tint:#C8FF2E;color-scheme:dark}
body[data-room=studio]{--bg:#E3F2FA;--bg2:#FFFFFF}
body[data-room=mailing]{--bg:#FBE8DD;--bg2:#FFFFFF}
html:root[data-theme=dark] body[data-room=studio]{--bg:#0E1A22}
html:root[data-theme=dark] body[data-room=mailing]{--bg:#221410}
::selection{background:#C8FF2E;color:#111}
:focus-visible{outline:3px solid #FF5B2E;outline-offset:2px}

/* бегущая строка */
.mq{padding-top:var(--sat);background:#111;color:#C8FF2E;overflow:hidden;white-space:nowrap;font:700 11px/28px var(--disp);letter-spacing:.06em}
.mq span{display:inline-block;animation:mq 28s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* типографика */
h1{background:none;-webkit-text-fill-color:currentColor;color:var(--tx);font-family:var(--disp);font-weight:700;letter-spacing:-.02em}
h2{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em}
.stat b,.kpi b,.big-n{font-family:var(--disp);font-weight:700;letter-spacing:-.02em}
.more-h{font-family:var(--disp)}
.mu{color:var(--mu)}

/* карточки-«наклейки» */
.card,.card.glass{background:var(--s1);border:2px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh)}
a.card:hover,.card.agent:hover,.eco-t:hover{border-color:var(--line);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.card.acc.live{border-color:var(--line);box-shadow:var(--sh);background:var(--lime);color:#111}
.card.acc.live .mu,.card.acc.live .m{color:#111}
.room{border:2px solid var(--line);box-shadow:var(--sh);color:#111;border-radius:24px}
.room.studio{background:#8FD3FF}.room.mailing{background:#FF5B2E;color:#111}
a.room:hover{border-color:var(--line);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.confirm{background:#FFE14D;color:#111;border:2px solid #111;box-shadow:var(--shs)}
.confirm .mu,.confirm .xs{color:#2B2B2B}
.chip{background:var(--s1);border:2px solid var(--line);color:var(--tx);font-weight:600;border-radius:99px}

/* кнопки */
.btn{border:2px solid var(--line);background:var(--s1);color:var(--tx);border-radius:14px;font-weight:700;box-shadow:var(--shs);transition:transform .12s,box-shadow .12s}
.btn:hover{filter:none}.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.pri{background:var(--grad);color:var(--on-pri);border-color:var(--line);box-shadow:var(--glow)}
.btn.pri:hover{box-shadow:var(--glow);filter:none}
.btn.dng{color:var(--bad);border-color:var(--bad);box-shadow:3px 3px 0 var(--bad);background:var(--s1)}
.btn.dng:hover{background:var(--s1)}
.btn.ico{box-shadow:var(--shs)}

/* пилюли, сегменты, бейджи */
.pill{border:2px solid var(--line);background:var(--s1);color:var(--tx);font-weight:600}
.pill:hover{border-color:var(--line);color:var(--tx);background:var(--lime,#C8FF2E)}
.pill.on{background:var(--tx);color:var(--bg);border-color:var(--line);box-shadow:none}
.seg{background:var(--s1);border:2px solid var(--line);border-radius:14px;padding:3px}
.seg button,.seg a.segb{color:var(--tx);font-weight:600}
.seg button.on,.seg a.segb.on{background:var(--tx);color:var(--bg)}
.badge{border:2px solid var(--line);font-weight:700;background:var(--s1);color:var(--tx)}
.badge.ok{background:#C8FF2E;color:#111;border-color:#111}
.badge.warn{background:#FFE14D;color:#111;border-color:#111}
.badge.bad{background:#FF5B2E;color:#111;border-color:#111}
.badge.info{background:#8FD3FF;color:#111;border-color:#111}
.notice{border:2px solid var(--line);color:var(--tx)}
.notice.warn,.demo-banner{background:#FFE14D;color:#111;border:2px solid #111}
.notice.bad{background:#FFB3A3;color:#111;border-color:#111}
.notice.ok-n{background:#C8FF2E;color:#111;border-color:#111}
.notice svg{color:#111}

/* поля, переключатели, прогресс */
.inp,input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{background:var(--fld);border:2px solid var(--line);border-radius:12px;color:var(--tx)}
.inp:focus{border-color:var(--line);box-shadow:3px 3px 0 #FF5B2E}
.switch{background:var(--s3);border:2px solid var(--line)}
.bar{height:10px;border:2px solid var(--line);background:var(--s1)}
.bar i{background:var(--tx);border-radius:0}
.tbl th{border-bottom:2px solid var(--line);color:var(--tx);font-weight:700}
.tbl td{border-bottom:1px solid var(--o3)}
.list>*{border-top:1px dashed var(--o4)}

/* окна и уведомления */
dialog{border:2px solid var(--line);box-shadow:var(--sh);background:var(--s1)}
dialog::backdrop{background:rgba(17,17,17,.55);backdrop-filter:none}
.toast{border:2px solid var(--line);box-shadow:var(--shs);background:var(--s1);color:var(--tx);animation:popin .35s cubic-bezier(.3,1.6,.5,1) both}
.toast.ok{border-color:var(--line);background:#C8FF2E;color:#111}.toast.bad{border-color:var(--line);background:#FFB3A3;color:#111}

/* верх, меню, нижняя панель */
.top{background:var(--bg);backdrop-filter:none;border-bottom:2px solid var(--line)}
.side{background:var(--s1);border-right:2px solid var(--line)}
.brand i{background:none;box-shadow:none;border-radius:9px}
.brand b{font-family:var(--disp);letter-spacing:.14em}
.nav a{color:var(--tx);font-weight:600;border-radius:14px}
.nav a:hover{background:var(--o2);color:var(--tx)}
.nav a.on{background:#C8FF2E;color:#111;box-shadow:inset 0 0 0 2px #111}
.nav a.on:before{background:#111;box-shadow:none}
.side-foot{border-top:2px solid var(--line)}
.nav-soon .nav-s{opacity:.7}
.convs .it{color:var(--tx);border-radius:12px}.convs .it.on{background:#C8FF2E;color:#111}
@media(max-width:860px){
  .tabbar{left:0;right:0;bottom:0;height:calc(var(--tab) + var(--sab));padding-bottom:var(--sab);border-radius:0;background:#111;border:0;border-top:2px solid var(--line);backdrop-filter:none;box-shadow:none}
  .tabbar a{color:#fff}.tabbar a.on,.tabbar .tab-more.on{color:#C8FF2E}.tabbar a.on svg{filter:none}
  body.menu-open:after{background:rgba(17,17,17,.5)}
}

/* сообщения ассистента */
.bub{border:2px solid var(--line);background:var(--s1);color:var(--tx)}
.msg.u .bub{background:#B8A4FF;color:#111;border:2px solid #111}
.msg.e .bub{background:#FFB3A3;color:#111;border-color:#111}

/* загрузка и ядро */
#splash{background:var(--bg)}
.splash-orb{border-radius:22px;background:#C8FF2E;border:2px solid #111;box-shadow:4px 4px 0 #111;animation:wob 2.4s ease-in-out infinite}
.splash-t{color:var(--tx);font-family:var(--disp)}
.core .orb{background:radial-gradient(circle at 35% 30%,#fff,#C8FF2E 40%,#FF5B2E 95%);box-shadow:none}
.core.err .orb{background:radial-gradient(circle at 35% 30%,#fff,#FF5B2E 55%,#8A1D0B)}
@keyframes wob{50%{transform:rotate(-8deg) scale(1.08)}}

/* анимации: «выпрыгивание» блоков */
@keyframes popin{from{opacity:0;transform:translateY(16px) scale(.95) rotate(-1deg)}to{opacity:1;transform:none}}
.page>*{animation-name:popin;animation-duration:.55s;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}
@media (prefers-reduced-motion:reduce){.mq span,.splash-orb,.toast{animation:none!important}}