/* ===== FaktiVisuals · Liquid Glass ===== */
:root{
  --red-500:#FF2D3D; --red-600:#E0142B; --red-700:#B00C22; --red-800:#7A0716; --red-900:#3D030B;
  --chrome:#E9E6EA; --ink:#F5F2F3; --muted:#A79DA1;
  --bg:#07040a; --bg-2:#120609;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.14); --stroke-hi:rgba(255,255,255,.32);
  --radius:22px; --radius-sm:14px;
  --blur:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --grad:linear-gradient(135deg,#FF5864 0%,#FF2D3D 35%,#B00C22 75%,#5a0410 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Manrope,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
code{font-family:ui-monospace,Consolas,monospace;font-size:.85em;background:rgba(255,45,61,.12);border:1px solid rgba(255,45,61,.25);padding:.1em .4em;border-radius:6px;word-break:break-all}
::selection{background:var(--red-500);color:#fff}

/* ---------- Фон (контрастный — чтобы было что преломлять) ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;contain:strict;background:
  radial-gradient(1200px 700px at 70% -10%,#3a0914 0%,transparent 60%),
  radial-gradient(900px 600px at -10% 110%,#260510 0%,transparent 60%),var(--bg)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75}
.b1{width:560px;height:560px;background:radial-gradient(circle,#ff3b4b,#b00c22 60%);top:-140px;right:-60px}
.b2{width:460px;height:460px;background:radial-gradient(circle,#c4122a,#4a0410 70%);bottom:-160px;left:-120px;animation-delay:-8s}
.b3{width:320px;height:320px;background:#ff6a75;top:42%;left:52%;opacity:.35;animation-delay:-14s}
@keyframes float{to{transform:translate3d(-80px,90px,0) scale(1.18)}}
.grid-lines{position:absolute;inset:-64px;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 85%)}
@keyframes gridMove{to{transform:translate3d(56px,56px,0)}}
.stripe{position:absolute;height:2px;width:140vmax;left:-20vmax;background:linear-gradient(90deg,transparent,#ff2d3d 30%,#fff 50%,#ff2d3d 70%,transparent);opacity:.55;transform:rotate(-24deg);filter:drop-shadow(0 0 8px #ff2d3d)}
.s1{top:28%}.s2{top:62%;opacity:.35;transform:rotate(-24deg) translateX(10vw)}.s3{top:88%;opacity:.25}
.shard{position:absolute;width:180px;opacity:.5;filter:drop-shadow(0 0 20px rgba(255,45,61,.5));transform:rotate(18deg)}
.sh1{top:55%;left:6%}.sh2{top:12%;left:42%;width:110px;opacity:.35;animation-direction:reverse}.sh3{bottom:6%;right:8%;width:140px;opacity:.4}

/* ---------- Liquid Glass (как Glass effect в Figma) ----------
   Параметры на любом элементе:
   --lg-refraction (px), --lg-depth (px), --lg-dispersion (0–.3), --lg-frost (px),
   --lg-light (угол света), --lg-light-int (яркость бликов 0–1) */
.glass,.glass-pill,.btn-glass,.lens{
  --lg-refraction:44; --lg-depth:16; --lg-dispersion:0; --lg-frost:0;
  --lg-light:-135; --lg-light-int:.9;
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 60%),rgba(12,5,8,.18);
  border:0;
  box-shadow:
    0 24px 48px -22px rgba(0,0,0,.75),
    0 2px 6px rgba(0,0,0,.25);
}
/* fallback для Safari/Firefox: матовое стекло */
/* В Chromium кромку и блики рисует SVG-фильтр — CSS-обводку отключаем */
.lg-on :is(.glass,.glass-pill,.btn-glass,.lens){box-shadow:0 24px 48px -22px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.25)}
.lg-on :is(.glass,.glass-pill,.btn-glass,.lens)::before{display:none}
.lg-on .lg-cheap,.lg-fallback :is(.glass,.glass-pill,.btn-glass,.lens){
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%)}
.glass,.lens{border-radius:var(--radius)}
.glass-pill{border-radius:999px}
/* specular-кромка: свет падает под углом --lg-light, блики на двух противоположных краях */
.glass::before,.glass-pill::before,.btn-glass::before,.lens::before{
  display:none;content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1.2px;
  background:linear-gradient(135deg,
    rgba(255,255,255,.9) 0%,rgba(255,255,255,.12) 18%,rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,rgba(255,120,130,.35) 84%,rgba(255,255,255,.6) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* блик за курсором */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);z-index:-1;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.10),rgba(255,45,61,.08) 40%,transparent 70%)}
.glass:hover::after{opacity:1}
/* контентные карточки чуть плотнее — ради читаемости текста */
.feature,.step,.qa,.footer-inner,.cta-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 60%),rgba(14,5,9,.42)}
.feature,.step,.cta-card{--lg-refraction:56;--lg-depth:20}
.nav{--lg-refraction:44;--lg-depth:16}
.hud{--lg-refraction:50;--lg-depth:16}

/* ---------- Навигация ---------- */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;width:min(1160px,calc(100% - 24px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 18px;border-radius:999px;transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(20,8,12,.55)}
.brand{display:flex;align-items:center;gap:10px;font-family:Unbounded,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.brand b{color:var(--red-500);font-weight:700}
.brand img{filter:drop-shadow(0 0 10px rgba(255,45,61,.6))}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:8px 16px;border-radius:999px;color:var(--muted);font-weight:600;font-size:.95rem;transition:color .25s,background .25s}
.nav-links a:hover{color:var(--ink);background:var(--glass-2)}
.nav-actions{display:flex;align-items:center;gap:8px}
.lang{display:flex;padding:3px}
.lang button{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.8rem;color:var(--muted);transition:.25s var(--ease)}
.lang button.active{background:var(--grad);color:#fff;box-shadow:0 4px 14px -4px var(--red-500)}
.burger{all:unset;display:none;cursor:pointer;width:40px;height:40px;border-radius:50%;place-items:center;align-content:center;gap:6px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;margin:0 auto;transition:.3s var(--ease)}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:999px;font-weight:700;font-size:1rem;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;position:relative;overflow:hidden;user-select:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px -8px rgba(255,45,61,.7)}
.btn-primary::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn-primary:hover::before{left:120%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 40px -8px rgba(255,45,61,.9)}
.btn-primary.is-soon{cursor:default;filter:saturate(.75)}
.btn-glass{color:#fff}
.btn-glass:hover{transform:translateY(-2px) scale(1.02)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;max-width:1200px;margin:0 auto;padding:130px 24px 60px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;font-size:.85rem;font-weight:600;color:var(--chrome)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red-500);position:relative}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red-500);animation:pulse 2s infinite;will-change:transform,opacity}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}
h1{font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:clamp(2.3rem,5.4vw,4.9rem);line-height:1.06;letter-spacing:-.045em;margin:22px 0 22px;color:#fff;white-space:nowrap}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(255,45,61,.35))}
.lead{font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:700;color:var(--chrome)}
.sub{color:var(--muted);max-width:500px;margin:0 0 32px;font-size:1.1rem;line-height:1.65}
.cta{display:flex;flex-wrap:wrap;gap:12px}

.hero-visual{position:relative;aspect-ratio:1;display:grid;place-items:center;perspective:1000px}
.orbit{will-change:transform;position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(circle,rgba(255,45,61,.28),transparent 62%);animation:spin 40s linear infinite}
.orbit::before,.orbit::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px dashed rgba(255,45,61,.25)}
.orbit::after{inset:-6%;border:1px solid rgba(255,255,255,.05)}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-wrap{width:78%;transition:transform .6s var(--ease);transform-style:preserve-3d}
.hero-logo{width:124.4%;max-width:none;margin:-12.2%;animation:spinSlow 30s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.hud{position:absolute;padding:10px 16px;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:flex-start;animation:bob 6s ease-in-out infinite}
.hud small{font-size:.7rem;color:var(--muted);letter-spacing:.12em;font-weight:700}
.hud b{font-family:Unbounded,sans-serif;font-size:1.15rem;color:#fff}
.orb{padding:0;border-radius:50%}
.orb-1{width:74px;height:74px;top:9%;left:4%}
.orb-2{width:52px;height:52px;bottom:18%;right:3%;animation-delay:-2s}
@keyframes bob{50%{transform:translateY(-12px)}}

/* Линза над логотипом — витрина преломления */
.lens{position:absolute;width:44%;aspect-ratio:1;border-radius:50%;top:28%;left:28%;z-index:3;cursor:grab;touch-action:none;
  --lg-refraction:90;--lg-depth:46;--lg-dispersion:0;--lg-frost:0;--lg-light-int:1;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.10),transparent 45%);animation:lensFloat 9s ease-in-out infinite}
.lens.dragging{animation:none;cursor:grabbing}
@keyframes lensFloat{0%,100%{transform:translate(-30%,-20%)}50%{transform:translate(35%,25%)}}

/* ---------- Секции ---------- */
.section{max-width:1200px;margin:0 auto;padding:100px 24px}
.section-head{text-align:center;max-width:640px;margin:0 auto 54px}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red-500);margin-bottom:12px}
h2{font-family:Unbounded,sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.15;letter-spacing:-.02em}
.section-head p{color:var(--muted);margin-top:12px}

/* Функции */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.feature{padding:28px;transition:transform .45s var(--ease),border-color .45s}
.feature:hover{transform:translateY(-6px)}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.f-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;margin-bottom:20px;background:radial-gradient(120% 120% at 25% 15%,rgba(255,45,61,.28),rgba(255,45,61,0) 60%),rgba(0,0,0,.28);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 14px 30px -14px rgba(255,45,61,.6)}
.f-icon svg{width:40px;height:40px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));transition:transform .5s var(--ease)}
.feature:hover .f-icon svg{transform:scale(1.08) rotate(-4deg)}
.feature h3{font-size:1.15rem;margin-bottom:8px}
.feature p{color:var(--muted);font-size:.95rem}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags li{font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--stroke);color:var(--chrome)}

/* Галерея */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.shot{overflow:hidden;padding:10px;transition:transform .45s var(--ease)}
.shot:hover{transform:scale(1.015)}
.shot.wide{grid-column:span 2;grid-row:span 2}
.shot img,.ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--radius) - 8px)}
.shot.wide .ph,.shot.wide > img{height:calc(100% - 34px);aspect-ratio:auto;min-height:220px}
.ph{display:grid;place-items:center;align-content:center;gap:10px;color:var(--muted);font-size:.85rem;font-weight:600;
  background:radial-gradient(circle at 50% 40%,rgba(255,45,61,.18),transparent 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 12px,transparent 12px 24px)}
.ph img{width:56px;opacity:.55;aspect-ratio:auto;filter:grayscale(.3)}
.shot figcaption{padding:10px 6px 2px;font-weight:600;font-size:.9rem;color:var(--chrome)}

/* Установка */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{padding:28px 24px}
.num{font-family:Unbounded,sans-serif;font-size:2.4rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px;line-height:1}
.step h3{font-size:1.05rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.92rem}
.step a{color:var(--red-500);font-weight:700;border-bottom:1px solid rgba(255,45,61,.4)}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.qa{padding:0 24px;border-radius:var(--radius-sm)}
.qa summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--stroke);position:relative;transition:transform .35s var(--ease),background .35s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] summary i{transform:rotate(45deg);background:var(--red-600);border-color:transparent}
.qa .ans p{color:var(--muted);padding-bottom:20px}
.qa[open] .ans{animation:open .4s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}


/* CTA */
.cta-card{text-align:center;padding:64px 24px;overflow:hidden}
.cta-card .cta{justify-content:center;margin-top:26px}
.cta-card p{color:var(--muted);margin-top:12px}
.cta-logo{width:104px;max-width:none;margin:-10px auto 10px;animation:spinSlow 20s linear infinite}

/* Футер */
.footer{padding:0 24px 28px}
.footer-inner{max-width:1200px;margin:0 auto;padding:24px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.socials{display:flex;gap:10px}
.socials a{display:flex;align-items:center;gap:8px;padding:10px 18px;font-weight:700;font-size:.9rem;transition:transform .3s var(--ease),border-color .3s}
.socials a:hover{transform:translateY(-2px);color:#fff}
.copy{width:100%;color:var(--muted);font-size:.8rem;border-top:1px solid var(--stroke);padding-top:16px}

/* ---------- Анимация появления ---------- */
/* без filter/opacity у предков в покое — иначе backdrop-filter «не видит» фон */
.reveal{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.hero .reveal:nth-child(2){--d:80ms}.hero .reveal:nth-child(3){--d:160ms}.hero .reveal:nth-child(4){--d:240ms}.hero .reveal:nth-child(5){--d:320ms}.hero .reveal:nth-child(6){--d:400ms}

/* Без backdrop-filter — делаем фон плотнее */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-pill{background:rgba(28,12,16,.92)}
}

/* ---------- Адаптив ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:120px}
  .hero-text{display:flex;flex-direction:column;align-items:center}
  .hero-visual{max-width:440px;width:100%;margin:0 auto;order:-1}
  .hero .cta{justify-content:center}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  :root{--blur:16px}
  .burger{display:grid}
  .nav-links{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;padding:10px;border-radius:var(--radius);
    background:rgba(20,8,12,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--stroke);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:.3s var(--ease)}
  .nav.open .nav-links{opacity:1;transform:none;pointer-events:auto}
  .nav.open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav.open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav-links a{padding:14px 16px}
  .section{padding:70px 18px}
  .steps,.gallery{grid-template-columns:1fr}
  .shot.wide{grid-column:auto;grid-row:auto}
  .shot.wide .ph,.shot.wide > img{height:auto;aspect-ratio:16/9;min-height:0}
    .btn{padding:14px 22px}
  .blob{filter:blur(70px)}
  .sh1,.sh3{display:none}
  .b1{opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none;filter:none}
}

.hero.paused *,.cta-card.paused *{animation-play-state:paused!important}
.hero-logo,.cta-logo{will-change:transform}

/* ---------- Аккаунт ---------- */
.account{position:relative}
.auth-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:7px;height:36px;padding:0 15px 0 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.85rem;color:var(--ink);transition:transform .25s var(--ease),background .25s}
.auth-btn svg{width:17px;height:17px;flex:none}
.auth-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.1)}
.auth-btn.is-user svg{color:var(--red-500)}
.auth-btn span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);padding:4px;min-width:120px;background:rgba(20,8,12,.88)}
.account-menu[hidden]{display:none}
.account-menu button{all:unset;box-sizing:border-box;display:block;width:100%;padding:9px 14px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.85rem;color:var(--ink);text-align:center}
.account-menu button:hover{background:rgba(255,45,61,.18);color:#fff}

/* ---------- Окно входа ---------- */
.modal-open,.modal-open body{overflow:hidden}
.auth-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .25s var(--ease)}
.auth-modal[hidden]{display:none}
.auth-modal.show{opacity:1}
.auth-backdrop{position:absolute;inset:0;background:rgba(6,2,4,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.auth-card{position:relative;width:100%;max-width:400px;max-height:calc(100dvh - 40px);overflow:auto;padding:30px 28px 26px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 55%),rgba(22,8,12,.78);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);
  transform:translateY(14px) scale(.97);transition:transform .3s var(--ease)}
.auth-modal.show .auth-card{transform:none}
.auth-logo{width:54px;height:54px;display:block;margin:0 auto 10px;filter:drop-shadow(0 0 14px rgba(255,45,61,.55))}
.auth-card h2{text-align:center;font-size:1.45rem;margin-bottom:18px}
.auth-close{all:unset;position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.2s}
.auth-close:hover{background:rgba(255,255,255,.08);color:#fff}
.auth-close svg{width:18px;height:18px}

.auth-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(0,0,0,.3);margin-bottom:20px}
.auth-tabs button{all:unset;position:relative;z-index:1;text-align:center;padding:9px 0;border-radius:999px;cursor:pointer;font-weight:700;font-size:.88rem;color:var(--muted);transition:color .25s}
.auth-tabs button.active{color:#fff}
.auth-tab-bg{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--grad);box-shadow:0 6px 18px -6px var(--red-500);transition:transform .35s var(--ease)}
.auth-tabs.second .auth-tab-bg{transform:translateX(100%)}

.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form[hidden]{display:none}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:.82rem;font-weight:700;color:var(--muted)}
.field input{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.28);color:var(--ink);font:inherit;font-size:.95rem;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus{border-color:rgba(255,45,61,.7);box-shadow:0 0 0 3px rgba(255,45,61,.18);background:rgba(0,0,0,.36)}
.field.invalid input{border-color:#ff5864}
.field small{font-size:.75rem;color:var(--muted);opacity:.8}
.field-err{font-style:normal;font-size:.78rem;color:#ff6b76;min-height:0}
.field-err:empty{display:none}
.field.invalid small{display:none}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:46px}
.pass-toggle{all:unset;position:absolute;right:6px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:10px;cursor:pointer;color:var(--muted);
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/19px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/19px no-repeat}
.pass-toggle:hover,.pass-toggle.on{color:var(--red-500)}
.form-err{font-size:.85rem;color:#ff6b76;text-align:center}
.form-err:empty{display:none}
.auth-submit{margin-top:4px;width:100%}
.auth-submit:disabled{opacity:.7;cursor:default}

@media (max-width:760px){
  .auth-btn{padding:0 11px}
  .auth-btn span{display:none}
  .auth-btn.is-user span{display:inline;max-width:80px}
  .auth-card{padding:26px 20px 22px}
}

@media (max-width:420px){
  .brand{font-size:.9rem;gap:8px}
  .brand img{width:28px;height:28px}
  .nav-actions{gap:5px}
  .lang button{padding:6px 9px}
}