/* ══════════════════════════════════════════════════════════
   PIXELchat — база: токены темы, фон, стекло, форма входа
   Всё, что можно перекрасить, живёт в CSS-переменных:
   theme.js переопределяет их на :root.
   ══════════════════════════════════════════════════════════ */

:root{
  /* тёмная схема для системных элементов: скроллбаров, пикеров, выпадашек */
  color-scheme:dark;

  /* фон страницы */
  --bg-0:#04030b;
  --bg-1:#0a0820;
  --au-1:#1e7fd8;
  --au-2:#8b3df0;
  --au-3:#ff4f9a;
  --au-a:.55;

  /* акценты */
  --accent:#5ce1ff;
  --accent-2:#a06bff;
  --accent-3:#ff6fae;
  --good:#3ce88a;
  --bad:#ff5f7e;
  --warn:#ff9f45;
  --gold:#ffd166;
  --on-accent:#04121c;

  /* текст */
  --ink:#eaf5ff;
  --muted:#8fa0c8;
  --muted-d:#6a789c;

  /* стекло */
  --glass-rgb:255,255,255;
  --glass-a:.11;
  --blur:32px;
  --sat:190%;
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.08);
  --sheen:rgba(255,255,255,.28);
  --shade:rgba(0,0,0,.30);
  --hover:rgba(255,255,255,.08);
  --shadow:0 34px 90px -20px rgba(0,0,0,.75),0 4px 26px rgba(0,0,0,.4);
  --radius:4px;

  /* эффекты фона */
  --fx-grid-a:.16;
  --fx-scan-a:.30;
  --fx-vig-a:.72;
  --stars-a:1;

  /* типографика */
  --f-px:'Press Start 2P','Courier New',monospace;
  --f-term:'VT323','Consolas',monospace;
  --f-ui:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --fs:1;

  --ease:cubic-bezier(.22,.9,.24,1);
  --ease-back:cubic-bezier(.34,1.6,.5,1);
}

/* стеклянная поверхность — один рецепт на весь интерфейс */
.glass{
  background:linear-gradient(155deg,
    rgba(var(--glass-rgb),var(--glass-a)),
    rgba(var(--glass-rgb),calc(var(--glass-a) * .38)) 42%,
    rgba(var(--glass-rgb),calc(var(--glass-a) * .18)));
  border:1px solid var(--line);
  backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  box-shadow:var(--shadow),inset 0 1px 0 var(--sheen),inset 0 -1px 0 rgba(var(--glass-rgb),.05);
  border-radius:var(--radius);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--f-ui);
  font-size:calc(16px * var(--fs));
  color:var(--ink);
  background:radial-gradient(120% 90% at 50% 0%,var(--bg-1) 0%,var(--bg-1) 45%,var(--bg-0) 100%);
  overflow-x:hidden;
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
}
/* слой обоев страницы: тема может подставить сюда свою картинку через --app-bg */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--app-bg,none);
  background-size:var(--app-bg-size,cover);
  background-position:var(--app-bg-pos,center);
  background-repeat:var(--app-bg-repeat,no-repeat);
  opacity:var(--app-bg-a,1);
  mix-blend-mode:var(--app-bg-blend,normal);
  filter:var(--app-bg-filter,none);
}
/* Свой курсор прячет системный только на «пустых» местах.
   Везде, где важно точное попадание — поля, кнопки, модалки —
   системный курсор остаётся видимым. */
body.cursor-off{cursor:auto}
body:not(.cursor-off){cursor:none}
body:not(.cursor-off) button,
body:not(.cursor-off) a,
body:not(.cursor-off) label,
body:not(.cursor-off) summary,
body:not(.cursor-off) [role="button"],
body:not(.cursor-off) .chat,
body:not(.cursor-off) .contact,
body:not(.cursor-off) .tabitem{cursor:pointer}
body:not(.cursor-off) input,
body:not(.cursor-off) textarea,
body:not(.cursor-off) select,
body:not(.cursor-off) [contenteditable="true"]{cursor:text}
body:not(.cursor-off) input[type="range"],
body:not(.cursor-off) input[type="color"],
body:not(.cursor-off) input[type="checkbox"],
body:not(.cursor-off) input[type="radio"]{cursor:pointer}
body:not(.cursor-off) .modal,
body:not(.cursor-off) .modal *{cursor:auto}
body:not(.cursor-off) .modal button,
body:not(.cursor-off) .modal label,
body:not(.cursor-off) .modal .contact{cursor:pointer}
body:not(.cursor-off) .modal input,
body:not(.cursor-off) .modal textarea{cursor:text}
@media (pointer:coarse){
  body,body button{cursor:auto!important}
  .chaser{display:none!important}
}

img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── Слои фона ─────────────────────────────────────────── */
.bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:var(--stars-a);transition:opacity .4s}

.aurora{position:fixed;inset:-20%;z-index:1;pointer-events:none;filter:blur(90px);opacity:var(--au-a);transition:opacity .4s}
.aurora span{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen}
.aurora .a1{width:46vmax;height:46vmax;left:-8vmax;top:-6vmax;background:radial-gradient(circle,var(--au-1),transparent 65%);animation:drift1 26s var(--ease) infinite alternate}
.aurora .a2{width:40vmax;height:40vmax;right:-6vmax;top:10vmax;background:radial-gradient(circle,var(--au-2),transparent 65%);animation:drift2 32s var(--ease) infinite alternate}
.aurora .a3{width:34vmax;height:34vmax;left:30vmax;bottom:-14vmax;background:radial-gradient(circle,var(--au-3),transparent 68%);animation:drift3 38s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(14vmax,8vmax,0) scale(1.25)}}
@keyframes drift2{to{transform:translate3d(-12vmax,10vmax,0) scale(1.15)}}
@keyframes drift3{to{transform:translate3d(10vmax,-12vmax,0) scale(1.3)}}

.fx-grid{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:var(--fx-grid-a);
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 30%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,transparent) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(90% 70% at 50% 45%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 45%,#000 20%,transparent 78%);
  animation:gridpan 24s linear infinite;
  transition:opacity .4s;
}
@keyframes gridpan{to{background-position:32px 32px,32px 32px}}

.fx-scan{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:var(--fx-scan-a);
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.42) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;transition:opacity .4s;
}
.fx-scan::after{
  content:'';position:absolute;left:0;right:0;height:140px;
  background:linear-gradient(180deg,transparent,rgba(140,220,255,.055),transparent);
  animation:sweep 7.5s linear infinite;
}
@keyframes sweep{0%{top:-20%}100%{top:120%}}

.fx-vignette{position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(110% 85% at 50% 45%,transparent 45%,
    color-mix(in srgb,var(--bg-0) 92%,transparent) 100%);opacity:var(--fx-vig-a);transition:opacity .4s}

/* ── Спутник курсора ───────────────────────────────────── */
.chaser{position:fixed;left:0;top:0;z-index:90;pointer-events:none;will-change:transform}
.chaser i{position:absolute;display:block;background:var(--accent)}
.chaser i:nth-child(1){width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;
  box-shadow:0 0 12px var(--accent),0 0 26px var(--accent)}
.chaser i:nth-child(2){width:6px;height:6px;margin:-3px 0 0 -3px;opacity:.7;box-shadow:0 0 10px var(--accent)}
.chaser i:nth-child(3){width:4px;height:4px;margin:-2px 0 0 -2px;opacity:.45;background:var(--accent-2);
  box-shadow:0 0 10px var(--accent-2)}
body.cursor-off .chaser{display:none}

/* ── Загрузчик ─────────────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:26px;
  background:var(--bg-0);transition:opacity .6s var(--ease),visibility .6s;
}
.boot.is-done{opacity:0;visibility:hidden}
.boot__logo{display:flex;gap:6px;font-family:var(--f-px);font-size:clamp(14px,3.4vw,26px)}
.boot__logo span{opacity:0;transform:translateY(-14px);animation:drop .42s var(--ease-back) forwards;
  text-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,transparent)}
.boot__logo span.c{color:var(--accent)}
.boot__logo span:nth-child(1){animation-delay:.02s}
.boot__logo span:nth-child(2){animation-delay:.07s}
.boot__logo span:nth-child(3){animation-delay:.12s}
.boot__logo span:nth-child(4){animation-delay:.17s}
.boot__logo span:nth-child(5){animation-delay:.22s}
.boot__logo span:nth-child(6){animation-delay:.27s}
.boot__logo span:nth-child(7){animation-delay:.32s}
.boot__logo span:nth-child(8){animation-delay:.37s}
.boot__logo span:nth-child(9){animation-delay:.42s}
@keyframes drop{to{opacity:1;transform:translateY(0)}}
.boot__bar{width:min(300px,62vw);height:12px;border:2px solid var(--line);padding:2px;background:rgba(var(--glass-rgb),.04)}
.boot__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  animation:fill 1.25s .35s var(--ease) forwards}
@keyframes fill{to{width:100%}}
.boot__hint{margin:0;font-family:var(--f-term);font-size:20px;color:var(--muted);letter-spacing:.06em}

/* ── Шапка входа ───────────────────────────────────────── */
.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px clamp(16px,4vw,42px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand__mark{
  width:26px;height:26px;flex:none;background:var(--accent);
  clip-path:polygon(0 0,100% 0,100% 62%,50% 62%,30% 100%,30% 62%,0 62%);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent);
  animation:blip 3.6s var(--ease) infinite;
}
@keyframes blip{0%,88%,100%{transform:none}92%{transform:translateY(-3px) scale(1.06)}}
.brand__name{font-family:var(--f-px);font-size:13px;letter-spacing:.02em}
.brand__name b{color:var(--accent);font-weight:400}

/* ── Сцена входа ───────────────────────────────────────── */
.stage{
  position:relative;z-index:10;
  display:grid;grid-template-columns:minmax(280px,.85fr) minmax(340px,460px);
  align-items:center;justify-content:center;gap:clamp(20px,5vw,70px);
  padding:10px clamp(16px,4vw,42px) 60px;max-width:1180px;margin:0 auto;
}
@media (max-width:940px){
  .stage{grid-template-columns:1fr;gap:6px;padding-bottom:44px}
  .companion{order:-1}
}

.companion{display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;transform:translateY(26px);animation:rise .9s .55s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}

.bubble{
  position:relative;width:290px;max-width:86vw;min-height:96px;
  padding:14px 16px 15px;margin-bottom:8px;
  background:linear-gradient(155deg,rgba(var(--glass-rgb),calc(var(--glass-a) + .02)),rgba(var(--glass-rgb),calc(var(--glass-a) * .4)));
  border:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(var(--sat));-webkit-backdrop-filter:blur(22px) saturate(var(--sat));
  box-shadow:0 18px 44px -14px rgba(0,0,0,.7),inset 0 1px 0 var(--sheen);
  border-radius:var(--radius);
  transition:transform .5s var(--ease-back),opacity .35s;
}
.bubble.is-pop{animation:pop .5s var(--ease-back)}
@keyframes pop{0%{transform:scale(.9) translateY(6px)}60%{transform:scale(1.03)}100%{transform:none}}
.bubble__name{display:inline-block;font-family:var(--f-px);font-size:8px;letter-spacing:.12em;
  color:var(--accent);margin-bottom:9px}
.bubble__text{margin:0;font-family:var(--f-term);font-size:21px;line-height:1.25;
  color:var(--ink);letter-spacing:.02em;min-height:2.5em}
.bubble__text::after{content:'▌';color:var(--accent);animation:caret 1s steps(2) infinite;margin-left:2px}
.bubble.is-idle .bubble__text::after{opacity:.35}
@keyframes caret{50%{opacity:0}}
.bubble__tail{
  position:absolute;left:50%;margin-left:-8px;bottom:-9px;width:16px;height:10px;
  background:rgba(var(--glass-rgb),calc(var(--glass-a) * .8));
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,42% 100%);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
@media (max-width:940px){.bubble{max-width:min(340px,86vw)}}

.sprite-wrap{position:relative;display:grid;place-items:center}
#sprite{
  width:clamp(150px,26vw,240px);height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 28%,transparent)) drop-shadow(0 16px 22px rgba(0,0,0,.55));
  animation:hover 5.5s ease-in-out infinite;
}
@keyframes hover{50%{transform:translateY(-6px)}}
.platform{position:absolute;bottom:6px;width:64%;aspect-ratio:4/1;pointer-events:none}
.platform i{position:absolute;inset:0;border-radius:50%}
.platform i:nth-child(1){background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 42%,transparent),transparent 68%);
  filter:blur(9px);animation:glow 5.5s ease-in-out infinite}
.platform i:nth-child(2){background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent-2) 28%,transparent),transparent 62%);
  filter:blur(18px);transform:scale(1.4)}
@keyframes glow{50%{opacity:.55;transform:scale(.88)}}
.companion__tag{margin:2px 0 0;font-family:var(--f-px);font-size:8px;letter-spacing:.1em;color:var(--muted-d)}

/* ── Карточка входа ────────────────────────────────────── */
.auth{display:flex;justify-content:center;perspective:1400px;
  opacity:0;animation:cardIn 1s .35s var(--ease) forwards}
@keyframes cardIn{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}
.card{position:relative;width:100%;max-width:460px;padding:30px clamp(20px,4vw,34px) 24px;
  transform-style:preserve-3d;transition:transform .35s var(--ease)}
.card__sheen{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden;
  background:radial-gradient(340px 260px at var(--mx,50%) var(--my,0%),rgba(var(--glass-rgb),.14),transparent 62%);
  opacity:0;transition:opacity .4s;
}
.card:hover .card__sheen{opacity:1}
.corner{position:absolute;width:8px;height:8px;background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 80%,transparent);opacity:.85}
.corner.tl{left:-2px;top:-2px}.corner.tr{right:-2px;top:-2px}
.corner.bl{left:-2px;bottom:-2px}.corner.br{right:-2px;bottom:-2px}
.card.is-shake{animation:shake .45s var(--ease)}
@keyframes shake{10%,90%{transform:translateX(-5px)}30%,70%{transform:translateX(7px)}50%{transform:translateX(-4px)}}

.card__head{margin-bottom:22px}
.card__title{margin:0 0 8px;font-family:var(--f-px);font-size:clamp(13px,2.4vw,16px);line-height:1.5}
.card__sub{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}

.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;margin-bottom:22px;
  border-radius:calc(var(--radius) - 1px);background:var(--shade);border:1px solid var(--line-soft)}
.tabs__pill{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:2px;
  box-shadow:0 4px 18px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px 0 var(--sheen);
  transition:transform .45s var(--ease-back);
}
.tabs.is-reg .tabs__pill{transform:translateX(100%)}
.tab{position:relative;z-index:1;padding:11px 6px;font-family:var(--f-px);font-size:9px;
  color:var(--muted);transition:color .3s}
.tab.is-active{color:var(--ink)}

.panes{position:relative;transition:height .5s var(--ease)}
.pane{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:16px;
  opacity:0;transform:translateX(26px) scale(.985);pointer-events:none;
  transition:opacity .38s var(--ease),transform .48s var(--ease)}
.pane.is-active{opacity:1;transform:none;pointer-events:auto;position:relative}
.pane.is-left{transform:translateX(-26px) scale(.985)}

/* ── Поля ──────────────────────────────────────────────── */
.field{position:relative;padding-bottom:2px}
.field input{
  width:100%;padding:19px 44px 11px 44px;
  font-family:var(--f-ui);font-size:14.5px;color:var(--ink);
  background:var(--shade);border:1px solid var(--line-soft);border-radius:calc(var(--radius) - 1px);
  outline:none;transition:background .3s,border-color .3s,box-shadow .3s;
}
.field input::placeholder{color:transparent}
.field input:hover{background:var(--hover)}
.field input:focus{
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);
}
.field label{position:absolute;left:44px;top:15px;pointer-events:none;font-size:14px;color:var(--muted);
  transition:transform .28s var(--ease),color .28s,letter-spacing .28s;transform-origin:0 0}
.field input:focus + label,.field input:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.72);color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.field__ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none}
.field__ico svg{width:16px;height:16px;fill:var(--muted-d);transition:fill .3s}
.field input:focus ~ .field__ico svg{fill:var(--accent)}
.field__line{position:absolute;left:0;bottom:2px;height:2px;width:100%;transform:scaleX(0);transform-origin:50%;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  transition:transform .45s var(--ease)}
.field input:focus ~ .field__line{transform:scaleX(1)}
.field input[data-secret]{padding-right:48px;font-family:var(--f-term);font-size:19px;letter-spacing:.08em}
.field input[data-secret][type="text"]{font-family:var(--f-ui);font-size:14.5px;letter-spacing:.01em}

.peek{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  display:grid;place-items:center;border-radius:2px;transition:background .25s}
.peek:hover{background:var(--hover)}
.peek svg{width:16px;height:16px;fill:var(--muted)}
.peek.is-on svg{fill:var(--accent)}

.field.is-bad input{border-color:color-mix(in srgb,var(--bad) 65%,transparent);
  background:color-mix(in srgb,var(--bad) 8%,transparent)}
.field.is-bad .field__ico svg{fill:var(--bad)}
.field.is-ok input{border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.field.is-ok .field__ico svg{fill:var(--good)}

.err{display:block;max-height:0;overflow:hidden;opacity:0;
  font-family:var(--f-term);font-size:17px;color:var(--bad);
  transition:max-height .3s var(--ease),opacity .3s,padding .3s}
.err.is-on{max-height:44px;opacity:1;padding-top:6px}
.err--block{margin-top:-8px}

.strength{display:flex;align-items:center;gap:4px;margin-top:10px}
.strength i{flex:1;height:6px;background:var(--hover);transition:background .35s,transform .35s var(--ease-back)}
.strength i.on{transform:scaleY(1.5)}
.strength[data-lv="1"] i.on{background:var(--bad)}
.strength[data-lv="2"] i.on{background:var(--warn)}
.strength[data-lv="3"] i.on{background:var(--gold)}
.strength[data-lv="4"] i.on{background:var(--good)}
.strength[data-lv="5"] i.on{background:var(--accent)}
.strength em{font-family:var(--f-px);font-size:7px;font-style:normal;color:var(--muted-d);
  white-space:nowrap;min-width:94px;text-align:right}
.strength[data-lv="4"] em,.strength[data-lv="5"] em{color:var(--good)}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);user-select:none}
.check--wide{margin-top:-4px;line-height:1.45}
.check input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.check i{position:relative;flex:none;width:18px;height:18px;background:var(--shade);border:1px solid var(--line);
  transition:background .25s,border-color .25s}
.check i::after{content:'';position:absolute;left:4px;top:7px;width:3px;height:3px;
  box-shadow:0 3px 0 var(--on-accent),3px 6px 0 var(--on-accent),6px 3px 0 var(--on-accent),
             9px 0 0 var(--on-accent),12px -3px 0 var(--on-accent);
  opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s var(--ease-back)}
.check input:checked + i{background:var(--accent);border-color:var(--accent)}
.check input:checked + i::after{opacity:1;transform:none}
.check:hover i{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

.link{font-size:13px;color:var(--accent);position:relative;padding:2px 0;transition:color .25s}
.link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0;transition:transform .3s var(--ease)}
.link:hover::after{transform:scaleX(1)}
.swap{margin:2px 0 0;font-size:13px;color:var(--muted);text-align:center}

/* ── Пиксельные кнопки ─────────────────────────────────── */
.pxbtn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 18px;font-family:var(--f-px);font-size:10px;letter-spacing:.06em;
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,
                    100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,
                    6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  transition:transform .18s var(--ease),filter .3s,background .3s;overflow:hidden;
}
.pxbtn:active{transform:translateY(2px) scale(.99)}
/* display:flex выше перебивал атрибут hidden — спрятанные кнопки были видны */
.pxbtn[hidden],.minibtn[hidden]{display:none}
.pxbtn--primary{
  margin-top:4px;color:var(--on-accent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 60%,#fff) 0%,var(--accent) 42%,
             color-mix(in srgb,var(--accent) 70%,#000) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(0,0,0,.22);
  filter:drop-shadow(0 10px 26px color-mix(in srgb,var(--accent) 40%,transparent));
}
.pxbtn--primary:hover{filter:drop-shadow(0 12px 34px color-mix(in srgb,var(--accent) 65%,transparent)) brightness(1.06)}
.pxbtn--primary::before{content:'';position:absolute;top:0;bottom:0;width:46%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:shine 4.2s var(--ease) infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.pxbtn--ghost{
  flex:1;padding:12px 8px;font-size:8px;color:var(--ink);
  background:rgba(var(--glass-rgb),calc(var(--glass-a) * .5));
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 var(--sheen);
}
.pxbtn--ghost svg{width:14px;height:14px;fill:var(--accent);flex:none}
.pxbtn--ghost:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}

.pxbtn__load{display:none;gap:4px}
.pxbtn__load i{width:6px;height:6px;background:currentColor;animation:bounce .7s infinite}
.pxbtn__load i:nth-child(2){animation-delay:.1s}
.pxbtn__load i:nth-child(3){animation-delay:.2s}
.pxbtn__load i:nth-child(4){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-6px);opacity:1}}
.pxbtn.is-busy{pointer-events:none}
.pxbtn.is-busy .pxbtn__lbl{display:none}
.pxbtn.is-busy .pxbtn__load{display:flex}
.pxbtn.is-done{background:linear-gradient(180deg,color-mix(in srgb,var(--good) 55%,#fff),var(--good) 45%,
  color-mix(in srgb,var(--good) 70%,#000))}

.divider{position:relative;margin:22px 0 16px;text-align:center}
.divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.divider span{position:relative;padding:0 12px;font-family:var(--f-px);font-size:8px;color:var(--muted-d)}
.quick{display:flex;gap:8px}
.card__foot{margin:20px 0 0;text-align:center;font-family:var(--f-term);font-size:16px;color:var(--muted-d)}
.mono{color:var(--muted)}

/* ── Тост ──────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:120;transform:translate(-50%,140%);
  padding:13px 20px;border-radius:var(--radius);
  font-family:var(--f-px);font-size:9px;
  background:linear-gradient(155deg,rgba(var(--glass-rgb),calc(var(--glass-a) + .06)),rgba(var(--glass-rgb),var(--glass-a)));
  border:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(var(--sat));-webkit-backdrop-filter:blur(24px) saturate(var(--sat));
  box-shadow:0 20px 50px -12px rgba(0,0,0,.8),inset 0 1px 0 var(--sheen);
  transition:transform .55s var(--ease-back),opacity .4s;opacity:0;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}
.toast.is-good{border-color:color-mix(in srgb,var(--good) 50%,transparent);color:var(--good)}
.toast.is-bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent);color:var(--bad)}

/* ── Светлая тема: точечные правки ─────────────────────── */
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"] .fx-scan{display:none}
html[data-theme="light"] .pxbtn--primary::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent)}
html[data-theme="light"] .aurora{mix-blend-mode:normal}
html[data-theme="light"] .aurora span{mix-blend-mode:multiply}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05s!important}
  .boot{display:none}
}
html.no-anim *,html.no-anim *::before,html.no-anim *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.06s!important}

/* ── Уровни тяжёлых эффектов (html[data-fx]) ────────────────────────
   auto сам решает mid/high по устройству в theme.js, но каждый может
   переключить руками в Настройки → Ещё → Эффекты. */
html[data-fx="mid"]{
  --blur:10px;
}
html[data-fx="mid"] .aurora{filter:blur(28px)}
html[data-fx="mid"] .fx-grid,html[data-fx="mid"] .fx-scan{display:none}
/* chat.css местами жёстко прописывает blur(8–26px) в обход --blur —
   это самый дорогой compositing-эффект, на средних телефонах режем разом */
html[data-fx="mid"] *{backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}

html[data-fx="low"]{
  --blur:0px;
}
html[data-fx="low"] .aurora,
html[data-fx="low"] .fx-grid,
html[data-fx="low"] .fx-scan,
html[data-fx="low"] #bg,
html[data-fx="low"] .chaser{display:none!important}
/* без blur-подложки панели остаются читаемыми на своём обычном фоне —
   у .glass он и так задан отдельным градиентом, не только через blur */
html[data-fx="low"] *{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  animation:none!important;box-shadow:none!important;
}