/* GH-MARKER: ready for GitHub */
/* Fyra visual language v4 «Огонь из логотипа». Изолирован под .fx —
   селекторы не влияют на styles.css и наоборот. Палитра из логотипа.
   Сгенерировано из docs/superpowers/specs/assets/2026-07-23-visual-language-v4-mockup.src.html */
.fx{
  --void:#090A0D; --coal:#101216; --coal-2:#171A20;
  --wine:#240407; --wine-2:#3C0A0C;
  --gold:#FFC61A; --orange:#F26610; --flame:#EC2006; --crimson:#C20711;
  --flame-2:#F7791E; --ember:#FFC61A;
  --line:#23252C; --line-2:#363A44;
  --paper:#ECEEF2; --dim:#878C97; --dimmer:#565B66; --ok:#47C08A;
  --steel:#C6CAD1; --steel-2:#B4B9C2; --steel-ink:#15171C; --steel-dim:#565C66; --steel-line:#A3A9B3;
  --fd:'Unbounded', system-ui, sans-serif;
  --fb:'Onest', system-ui, sans-serif;
  --fm:'JetBrains Mono', ui-monospace, monospace;
  --gut:24px; --max:1280px; --r:2px;
  --fire:linear-gradient(180deg,#FFD23A 0%,#F7791E 34%,#EC2006 68%,#C20711 100%);
  --fire-soft:linear-gradient(180deg,#F7791E,#E01808);

  position:relative; background:var(--void); color:var(--paper);
  font-family:var(--fb); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.fx *,.fx *::before,.fx *::after{ box-sizing:border-box; }
.fx > *{ position:relative; z-index:1; }
/* зерно поверх лендинга — фикс, ниже контента */
.fx::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx a{ color:inherit; }
.fx button{ font:inherit; color:inherit; }
.fx :focus-visible{ outline:2px solid var(--flame); outline-offset:3px; }

.fx .mono{ font-family:var(--fm); font-variant-numeric:tabular-nums; }
.fx .num{ font-family:var(--fm); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.fx .lbl{ font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.fx .dsp{ font-family:var(--fd); font-weight:700; letter-spacing:-.04em; line-height:.92; text-wrap:balance; }
.fx .wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.fx .stamp{ display:inline-flex; align-items:center; gap:8px; padding:5px 10px;
  border:1px solid currentColor; font-family:var(--fm); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ember); }
.fx .stamp--live{ color:var(--flame); }
.fx .stamp--tilt{ transform:rotate(-3deg); }
.fx .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.fx .dot--pulse{ animation:fxk-pulse 1.5s ease-in-out infinite; }
@keyframes fxk-pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 currentColor } 50%{ opacity:.35; box-shadow:0 0 0 4px transparent } }
.fx.fx--anim [data-rise]{ opacity:0; transform:translateY(18px); }
.fx [data-rise].in{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){
  .fx [data-rise]{ opacity:1; transform:none; }
  .fx *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}
.fx .nav{ position:relative; z-index:20; border-bottom:1px solid var(--line); background:rgba(8,7,12,.86); backdrop-filter:blur(6px); }
.fx .nav__in{ display:flex; align-items:center; gap:28px; height:68px; }
.fx .logo{ font-family:var(--fd); font-weight:700; font-size:21px; letter-spacing:-.07em; display:flex; align-items:center; gap:9px; }
.fx .logo i{ width:12px; height:15px; background:var(--fire); display:block; box-shadow:0 0 12px -2px var(--flame);
  clip-path:polygon(50% 0, 72% 34%, 92% 62%, 74% 100%, 26% 100%, 12% 66%, 30% 40%); }
.fx .nav__links{ display:flex; gap:22px; }
.fx .nav__links a{ text-decoration:none; font-size:14px; color:var(--dim); padding-block:6px; border-bottom:1px solid transparent; }
.fx .nav__links a:hover{ color:var(--paper); border-color:var(--flame); }
.fx .nav__end{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.fx .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border:1px solid transparent; border-radius:var(--r); cursor:pointer;
  font-family:var(--fm); font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; transition:background .15s, color .15s, border-color .15s, box-shadow .15s; }
.fx .btn--fill{ background:var(--fire-soft); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.fx .btn--fill:hover{ background:linear-gradient(180deg,#FF8A2E,#EC2006); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 26px -10px rgba(236,32,6,.6); }
.fx .btn--line{ border-color:var(--line-2); color:var(--paper); }
.fx .btn--line:hover{ border-color:var(--paper); }
.fx .btn--ghost{ color:var(--dim); padding-inline:0; background:none; border:0; }
.fx .btn--ghost:hover{ color:var(--paper); }
.fx .btn--sm{ padding:10px 15px; font-size:11px; }
.fx .hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.fx .hero__glow{ position:absolute; z-index:0; pointer-events:none; inset:0;
  
  background:
    radial-gradient(70% 46% at 30% 108%, rgba(255,210,58,.20), transparent 60%),
    radial-gradient(90% 62% at 30% 116%, rgba(242,102,16,.24), transparent 62%),
    radial-gradient(120% 80% at 32% 128%, rgba(194,7,17,.34), transparent 66%),
    radial-gradient(40% 40% at 82% 6%, rgba(255,198,26,.07), transparent 70%);
  filter:blur(8px); }
.fx .hero__word{ position:absolute; z-index:0; pointer-events:none; user-select:none;
  bottom:-6%; left:-3%; font-family:var(--fd); font-weight:700; font-size:min(30vw,360px);
  letter-spacing:-.06em; line-height:.8; color:transparent;
  -webkit-text-stroke:1px rgba(239,234,225,.055); }
.fx .hero__in{ position:relative; z-index:2; padding-block:clamp(44px,6vw,84px) 0; }
.fx .hero__top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.fx .hero__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:52px; align-items:center; }
.fx .hero h1{ margin:0 0 26px; font-family:var(--fd); font-weight:700; font-size:clamp(36px,6vw,80px); line-height:.94; letter-spacing:-.05em; }
.fx .hero h1 em{ font-style:normal; color:var(--flame);
  background:var(--fire); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fx .hero__lead{ font-size:clamp(16px,1.4vw,19px); color:#B9B4C2; max-width:48ch; margin:0 0 30px; }
.fx .hero__cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.fx .hero__strip{ display:flex; flex-wrap:wrap; gap:0; margin-top:44px; border-top:1px solid var(--line); }
.fx .hero__stat{ flex:1 1 180px; padding:18px 20px 22px; border-right:1px solid var(--line); }
.fx .hero__stat:last-child{ border-right:0; }
.fx .hero__stat b{ display:block; font-family:var(--fm); font-weight:600; font-size:26px; letter-spacing:-.03em; margin-bottom:2px; }
.fx .hero__stat span{ font-size:13px; color:var(--dim); }
.fx .hero__stat.hot b{ color:var(--ember); }
.fx .obs{ position:relative; }
.fx .obs__frame{ position:relative; aspect-ratio:16/10; background:
    linear-gradient(160deg,#0c0d11 0%, #14161d 55%, #1c0a0c 100%);
  border:1px solid var(--line-2); overflow:hidden; }
.fx .obs__frame::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px); }
.fx .obs__label{ position:absolute; top:10px; left:12px; z-index:3; display:flex; align-items:center; gap:7px;
  font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#B9B4C2; }
.fx .obs__rec{ width:7px; height:7px; border-radius:50%; background:var(--flame); animation:fxk-pulse 1.5s ease-in-out infinite; }
.fx .obs__cam{ position:absolute; right:12px; bottom:12px; width:34%; aspect-ratio:4/3; border:1px solid rgba(239,234,225,.22); background:linear-gradient(150deg,#221c2b,#100d16); }
.fx .obs__cam::after{ content:'КАМЕРА'; position:absolute; left:8px; bottom:6px; font-family:var(--fm); font-size:9px; letter-spacing:.18em; color:rgba(239,234,225,.35); }
.fx .obs__src{ position:absolute; left:7%; top:16%; width:62%; }
.fx .obs__src::before, .fx .obs__src::after{ content:''; position:absolute; width:14px; height:14px; border:2px solid var(--flame); opacity:.9; }
.fx .obs__src::before{ left:-11px; top:-11px; border-right:0; border-bottom:0; }
.fx .obs__src::after{ right:-11px; bottom:-11px; border-left:0; border-top:0; }
.fx .alertcard{ position:relative; padding:16px 18px 16px 20px; background:rgba(9,8,13,.88);
  border:1px solid rgba(236,32,6,.35); box-shadow:0 0 60px -12px rgba(236,32,6,.55);
  backdrop-filter:blur(3px); }
.fx .alertcard::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--flame); }
.fx .alertcard__top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:7px; }
.fx .alertcard__who{ font-family:var(--fd); font-weight:700; font-size:clamp(14px,1.5vw,20px); letter-spacing:-.03em; }
.fx .alertcard__sum{ font-family:var(--fm); font-weight:600; font-size:clamp(14px,1.5vw,20px); color:var(--ember); font-variant-numeric:tabular-nums; }
.fx .alertcard__msg{ margin:0; font-size:clamp(12px,1.15vw,15px); color:#D8D3DE; line-height:1.4; }
.fx .alertcard__foot{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.fx .wave{ display:flex; align-items:center; gap:2px; height:20px; }
.fx .wave i{ width:2px; height:10px; background:var(--line-2); border-radius:1px; }
.fx .wave--live i{ background:var(--flame); animation:fxk-bob 1.05s ease-in-out infinite; }
@keyframes fxk-bob{ 0%,100%{ transform:scaleY(.35); opacity:.5 } 50%{ transform:scaleY(1); opacity:1 } }
.fx .ticker{ position:relative; border-bottom:1px solid var(--line); background:linear-gradient(90deg,var(--coal),#141018); overflow:hidden; }
.fx .ticker::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--void) 0%,transparent 12%,transparent 88%,var(--void) 100%); }
.fx .ticker__head{ position:absolute; inset-block:0; left:0; z-index:3; display:flex; align-items:center; gap:8px;
  padding-inline:var(--gut) 18px; background:var(--fire-soft); color:#fff; border-right:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  font-family:var(--fm); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.fx .ticker__track{ display:flex; width:max-content; animation:fxk-slide 52s linear infinite; }
.fx .ticker__seq{ display:flex; }
.fx .ticker__item{ display:flex; align-items:baseline; gap:12px; padding:14px 26px; border-right:1px solid var(--line); white-space:nowrap; font-family:var(--fm); font-size:13px; }
.fx .ticker__item .t{ color:var(--dimmer); font-size:11px; }
.fx .ticker__item .s{ color:var(--ember); font-weight:600; }
.fx .ticker__item .v{ color:var(--dim); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
@keyframes fxk-slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.fx .sec{ position:relative; padding-block:clamp(60px,7vw,110px); border-bottom:1px solid var(--line); }
.fx .sec__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:44px; align-items:end; margin-bottom:52px; }
.fx .sec__head h2{ margin:0; font-family:var(--fd); font-weight:700; font-size:clamp(28px,3.8vw,52px); line-height:1; letter-spacing:-.04em; }
.fx .sec__head p{ margin:0; color:var(--dim); max-width:54ch; }
.fx .sec__idx{ display:block; font-family:var(--fm); font-size:11px; letter-spacing:.2em; color:var(--flame); margin-bottom:16px; }
.fx .inv{ --paper:var(--steel-ink); --dim:var(--steel-dim); --dimmer:#7C828C;
  --line:var(--steel-line); --line-2:#8F95A0;
  --coal:#D0D4DA; --coal-2:#C2C7CF; --void:var(--steel);
  color:var(--steel-ink);
  background:var(--steel);
  
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.014) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #CDD1D8, #B7BCC5); }
.fx .inv .lbl{ color:#6B717B; }
.fx .inv .btn--line{ border-color:var(--steel-ink); color:var(--steel-ink); }
.fx .inv .btn--line:hover{ background:var(--steel-ink); color:var(--steel); }
.fx .rail{ position:relative; }
.fx .rail__axis{ position:relative; height:1px; background:var(--line); margin-bottom:0; }
.fx .rail__axis::before{ content:''; position:absolute; left:0; top:0; height:1px; width:64%; background:linear-gradient(90deg,var(--flame),rgba(236,32,6,0)); }
.fx .rail__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-top:0; }
.fx .step{ position:relative; background:var(--void); padding:0 0 22px; display:flex; flex-direction:column; transition:background .18s; }
.fx .step:hover{ background:var(--coal); }
.fx .step__tick{ position:absolute; top:-5px; left:22px; width:9px; height:9px; background:var(--void); border:1px solid var(--flame); transform:rotate(45deg); }
.fx .step.done .step__tick{ background:var(--flame); }
.fx .step__t{ padding:20px 22px 0; font-family:var(--fm); font-size:12px; letter-spacing:.08em; color:var(--flame); }
.fx .step__ttl{ padding:8px 22px 0; font-family:var(--fd); font-weight:700; font-size:19px; letter-spacing:-.035em; }
.fx .step__txt{ margin:8px 0 18px; padding-inline:22px; color:var(--dim); font-size:14px; flex:1; }
.fx .frame{ position:relative; margin-inline:22px; border:1px solid var(--line-2); background:linear-gradient(160deg,#0f0d15,#16111d); padding:13px; min-height:88px; display:flex; align-items:center; gap:11px; overflow:hidden; }
.fx .frame::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.fx .frame small{ font-family:var(--fm); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dimmer); }
.fx .seam{ position:relative; height:34px; background:var(--void);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34' viewBox='0 0 44 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34 V20 H11 V34 H22 V20 H33 V34 H44 V20 H44 V34 Z' fill='%23C6CAD1'/%3E%3Crect x='0' y='20' width='44' height='1' fill='%23C6CAD1' opacity='.35'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:bottom; }
.fx .seam__note{ position:absolute; right:var(--gut); top:50%; transform:translateY(-50%);
  font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#6B717B; }
.fx .sec--wine{ background:
    radial-gradient(64% 80% at 12% 4%, rgba(242,102,16,.14), transparent 58%),
    radial-gradient(50% 60% at 90% 100%, rgba(194,7,17,.22), transparent 62%),
    linear-gradient(180deg, var(--wine) 0%, #140306 100%);
  border-bottom:1px solid var(--wine-2); }
.fx .voices{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1px; background:rgba(239,234,225,.09); border:1px solid rgba(239,234,225,.09); }
.fx .voice{ position:relative; background:rgba(12,6,10,.72); padding:22px; display:flex; flex-direction:column; gap:14px; min-height:186px; transition:background .18s; }
.fx .voice:hover{ background:rgba(236,32,6,.09); }
.fx .voice__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.fx .voice__name{ font-family:var(--fd); font-weight:700; font-size:19px; letter-spacing:-.035em; }
.fx .voice__price{ font-family:var(--fm); font-size:11px; color:var(--ember); border:1px solid rgba(255,198,26,.4); padding:3px 7px; white-space:nowrap; }
.fx .voice__desc{ margin:0; color:#B6A9AE; font-size:14px; flex:1; }
.fx .voice__play{ display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; cursor:pointer; color:var(--paper); font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.fx .voice__play .tri{ width:0; height:0; border-left:9px solid var(--flame); border-block:6px solid transparent; }
.fx .voice__play:hover .wave i{ background:var(--flame-2); }
.fx .wgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.fx .wcard{ background:var(--void); padding:0; display:flex; flex-direction:column; }
.fx .wcard:hover{ background:var(--coal); }
.fx .wcard__vis{ height:132px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; background:linear-gradient(160deg,#0c0d11,#13151b); display:grid; place-items:center; padding:14px; }
.fx .wcard__body{ padding:16px 18px 20px; display:flex; gap:12px; }
.fx .wcard__idx{ font-family:var(--fm); font-size:11px; color:var(--dimmer); }
.fx .wcard h3{ margin:0 0 4px; font-size:16px; font-weight:500; }
.fx .wcard p{ margin:0; color:var(--dim); font-size:14px; }
.fx .pv-goal{ width:100%; }
.fx .pv-goal__row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; font-family:var(--fm); font-size:12px; }
.fx .pv-goal__bar{ height:8px; background:#221d2c; }
.fx .pv-goal__fill{ height:100%; width:69%; background:linear-gradient(90deg,var(--flame),var(--ember)); }
.fx .pv-wheel{ width:104px; aspect-ratio:1; border-radius:50%; border:1px solid var(--line-2);
  background:conic-gradient(var(--flame) 0 25%, var(--crimson) 25% 50%, var(--gold) 50% 62%, #1b1e26 62% 78%, var(--orange) 78% 100%);
  animation:fxk-spin 22s linear infinite; }
@keyframes fxk-spin{ to{ transform:rotate(360deg) } }
.fx .pv-chat{ width:100%; display:grid; gap:7px; font-size:12px; }
.fx .pv-chat__row{ display:flex; align-items:center; gap:8px; color:#B9B4C2; }
.fx .pv-chat__pf{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.fx .pv-bars{ display:flex; align-items:flex-end; gap:6px; height:72px; }
.fx .pv-bars i{ width:14px; background:linear-gradient(180deg,var(--flame),rgba(236,32,6,.15)); }
.fx .pv-face{ width:56px; height:56px; border-radius:50%; border:1px solid var(--flame); display:grid; place-items:center; box-shadow:0 0 34px -6px rgba(236,32,6,.7); font-family:var(--fd); font-size:18px; }
.fx .tiers{ width:100%; border-collapse:collapse; }
.fx .tiers th, .fx .tiers td{ text-align:left; padding:17px 14px; border-bottom:1px solid var(--line); }
.fx .tiers th{ font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#6B717B; }
.fx .tiers td{ font-size:17px; }
.fx .tiers td.p{ font-family:var(--fm); font-weight:600; font-variant-numeric:tabular-nums; }
.fx .tiers tr:hover td{ background:rgba(23,16,9,.06); }
.fx .tiers .cur td.p{ color:#B01508; }
.fx .pricehead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:44px; align-items:end; margin-bottom:44px; }
.fx .pricehead h2{ margin:0; font-family:var(--fd); font-weight:700; font-size:clamp(28px,4.2vw,56px); line-height:.96; letter-spacing:-.045em; }
.fx .pricehead p{ margin:0; color:#6B717B; }
.fx .char{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:52px; align-items:center; }
.fx .chat{ border:1px solid var(--line); background:var(--coal); }
.fx .chat__row{ display:flex; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line); }
.fx .chat__row:last-child{ border-bottom:0; }
.fx .chat__who{ font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer); width:78px; flex:0 0 auto; padding-top:3px; }
.fx .chat__row.bot{ background:rgba(236,32,6,.05); }
.fx .chat__row.bot .chat__who{ color:var(--flame); }
.fx .chat__txt{ margin:0; font-size:15px; }
.fx .end{ position:relative; padding-block:clamp(72px,9vw,132px); overflow:hidden; }
.fx .end__glow{ position:absolute; inset:auto -20% -60% -20%; height:120%; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%, rgba(236,32,6,.26), transparent 70%); filter:blur(10px); }
.fx .end__in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 172px; gap:40px; align-items:center; }
.fx .end h2{ margin:0 0 26px; font-family:var(--fd); font-weight:700; font-size:clamp(30px,5.6vw,74px); line-height:.94; letter-spacing:-.045em; }
.fx .seal{ width:172px; height:172px; position:relative; display:grid; place-items:center; }
.fx .seal svg{ position:absolute; inset:0; animation:fxk-spin 24s linear infinite; }
.fx .seal text{ font-family:var(--fm); font-size:9.4px; letter-spacing:.28em; fill:var(--dim); text-transform:uppercase; }
.fx .seal__core{ width:64px; height:64px; border:1px solid var(--flame); transform:rotate(45deg); box-shadow:0 0 40px -8px var(--flame); }
.fx .foot{ border-top:1px solid var(--line); }
.fx .foot__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px; padding-block:44px; }
.fx .foot h4{ margin:0 0 14px; font-family:var(--fm); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer); font-weight:600; }
.fx .foot a{ display:block; text-decoration:none; color:var(--dim); font-size:14px; padding-block:4px; }
.fx .foot a:hover{ color:var(--paper); }
.fx .foot__bottom{ border-top:1px solid var(--line); padding-block:20px; display:flex; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--dimmer); font-family:var(--fm); }
.fx .ava{ width:76px; height:76px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line-2);
  background:conic-gradient(from 210deg, #24262e, #12141a 60%, #24262e); display:grid; place-items:center;
  font-family:var(--fd); font-size:26px; color:#8B8695; box-shadow:0 0 40px -16px var(--flame); }
.fx .submit{ width:100%; margin-top:20px; padding:19px; font-size:14px; }
.fx .legal{ font-size:12px; color:var(--dimmer); margin-top:14px; }
.fx .panel + .panel{ margin-top:30px; }
.fx .panel__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
@media (max-width:980px){
  .fx .hero__grid{ grid-template-columns:1fr; gap:36px; }
  .fx .sec__head, .fx .pricehead, .fx .char, .fx .end__in{ grid-template-columns:1fr; gap:20px; }
  .fx .rail__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fx .seal{ display:none; }
}
@media (max-width:620px){
  .fx .rail__grid{ grid-template-columns:1fr; }
  .fx .hero__word{ font-size:44vw; }
}

/* Инлайн-стили лендинга, вынесенные в классы (CSP style-src без unsafe-inline). Сгенерировано. */
.fx .fxs-1{ font-size:24px;color:var(--ember);line-height:1.1 }
.fx .fxs-2{ display:block;margin-top:7px }
.fx .fxs-3{ width:100% }
.fx .fxs-4{ color:var(--ember) }
.fx .fxs-5{ color:var(--dimmer) }
.fx .fxs-6{ font-size:24px;line-height:1.1 }
.fx .fxs-7{ width:100%;box-shadow:0 0 40px -16px rgba(236,32,6,.8) }
.fx .fxs-8{ font-size:15px }
.fx .fxs-9{ font-size:12px }
.fx .fxs-10{ margin:9px 0 0 }
.fx .fxs-11{ color:var(--dimmer);font-size:11px }
.fx .fxs-12{ background:#A970FF }
.fx .fxs-13{ background:#29A9EA }
.fx .fxs-14{ background:#0077FF }
.fx .fxs-15{ height:34% }
.fx .fxs-16{ height:58% }
.fx .fxs-17{ height:42% }
.fx .fxs-18{ height:88% }
.fx .fxs-19{ height:66% }
.fx .fxs-20{ height:100% }
.fx .fxs-21{ height:52% }
.fx .fxs-22{ width:100%;border:1px solid var(--line-2);padding:10px 12px;background:rgba(9,8,13,.6) }
.fx .fxs-23{ margin-bottom:6px }
.fx .fxs-24{ font-size:13px }
.fx .fxs-25{ width:100%;aspect-ratio:16/9;border:1px solid var(--line-2);background:linear-gradient(150deg,#171a22,#0c0d11);display:grid;place-items:center }
.fx .fxs-26{ width:0;height:0;border-left:16px solid var(--flame);border-block:11px solid transparent }
.fx .fxs-27{ font-size:clamp(28px,3.8vw,52px);margin:0 0 20px }
.fx .fxs-28{ color:var(--dim);max-width:46ch;margin:0 0 24px }
.fx .fxs-29{ color:#B01508 }
.fx .fxs-30{ font-size:13px;color:#6B717B;margin-top:16px }
.fx .fxs-31{ font-size:18px;margin-bottom:12px }
.fx .fxs-32{ color:var(--dim);font-size:13px;margin:0;max-width:26ch }

/* ── Интеграция с layout: full-bleed внутри main.container ─────────────
   Лендинг спроектирован во всю ширину (лента, секции «угли»/сталь). Гасим
   боковые/верхний паддинги контейнера сайта ТОЛЬКО для страницы-лендинга
   (main.container.fx-page). Файл грузится лишь на главной → на другие
   страницы не влияет. */
.site-content > main.container.fx-page{ max-width:100%; padding:0; margin:0; }

/* ── Нейтрализация обратной протечки из styles.css ────────────────────
   Глобальные .nav/.hero/.logo/.btn стилизуются в styles.css (часть с !important)
   и матчат одноимённые классы внутри .fx. Явно перекрываем протекающие свойства. */
.fx .nav{ display:block; height:auto; padding-left:0; padding-right:0; text-align:left; }
.fx .nav > nav{ margin-left:0; }
.fx .hero{ padding:0; text-align:left; }
/* .btn: глобальные background/ховер-подъём/янтарный glow протекают в outline-кнопки */
.fx .btn{ background:transparent; }
.fx .btn:hover{ transform:none; }
.fx .btn--line:hover, .fx .btn--ghost:hover{ box-shadow:none; } /* убрать глобальный янтарный --glow (off-brand) */
.fx .btn--fill, .fx .btn--fill:visited{ color:#fff !important; }
.fx .btn--line, .fx .btn--line:visited,
.fx .btn--ghost, .fx .btn--ghost:visited{ color:var(--paper) !important; }

/* ══════════════════════════════════════════════════════════════════
   AUTH: вход и регистрация. Переопределяем существующие классы auth-*
   под .fx (разметку/поля/CSRF/логику НЕ трогаем). Загружается только
   на /login и /register (условие в layout.ejs).
   ══════════════════════════════════════════════════════════════════ */
.fx.fx-auth{ min-height:100vh; }
/* Секция .auth в styles.css:614 сама стилизована как карточка (светлый bg,
   radius 32px, border, margin 28-80px, max-width 640) — сбрасываем её в
   прозрачный full-screen контейнер-центровщик. Карточкой остаётся .fyra-card. */
.fx-auth .auth, .fx-auth .auth-container{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:44px 20px; margin:0; max-width:none;
  background:transparent; border:0; border-radius:0; box-shadow:none; }
/* Огненный подсвет фона auth: поднимается снизу вьюпорта (fixed → виден при любом
   скролле длинной формы) + слабый золотой намёк сверху-слева. «По стилю» лендинга. */
.fx-auth .auth::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(78% 46% at 50% 104%, rgba(255,122,30,.16), transparent 60%),
    radial-gradient(105% 62% at 50% 114%, rgba(236,32,6,.24), transparent 64%),
    radial-gradient(46% 38% at 10% -6%, rgba(255,198,26,.07), transparent 66%); }

/* .fyra-card в styles.css:939 держит background/border через !important — бьём
   максимальной специфичностью (.fx.fx-auth …) + захардкоженным НЕЙТРАЛЬНЫМ тёмным
   (не var, не синий #1A1F2E и не прохладный #101216), чтобы карточка не читалась синей. */
.fx.fx-auth .auth-card,
.fx.fx-auth .fyra-card.auth-card{ position:relative; z-index:1; width:100%; max-width:440px;
  background:#141414 !important; border:1px solid #2A2A2E !important; border-radius:2px !important;
  box-shadow:none !important; padding:34px 32px; }
.fx .auth-header{ text-align:center; margin-bottom:26px; }
.fx .auth-logo{ display:flex; justify-content:center; margin-bottom:16px; }
.fx .auth-logo img{ filter:drop-shadow(0 0 16px rgba(236,32,6,.4)); }
.fx .auth-title{ font-family:var(--fd); font-weight:700; font-size:26px; letter-spacing:-.03em; color:var(--paper); margin:0 0 6px; min-height:0; }
.fx .auth-subtitle{ color:var(--dim); font-size:14px; margin:0; }

.fx .auth-errors{ border:1px solid rgba(224,80,58,.4); background:rgba(224,80,58,.08); border-radius:2px; padding:12px 14px; margin-bottom:20px; }
.fx .auth-errors-list{ margin:0; padding-left:18px; }
.fx .auth-errors-item{ color:#F0A99C; font-size:14px; margin:3px 0; }
.fx .auth-notice--warning{ border-color:var(--line-2); background:var(--coal-2); }
.fx .auth-notice--ban{ border-color:rgba(224,80,58,.5); background:rgba(224,80,58,.08); }
.fx .auth-notice__text--warning, .fx .auth-notice__text--ban{ margin:0; font-size:14px; color:var(--dim); }
.fx .auth-notice__appeal{ margin:8px 0 0; font-size:14px; }
.fx .auth-notice__appeal a{ color:var(--flame); }

.fx .auth-form-group, .fx .auth-form-group-lg{ margin-bottom:16px; }
.fx .auth-label{ display:block; font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-bottom:7px; }
.fx .auth-label-hint{ color:var(--dimmer); text-transform:none; letter-spacing:0; font-weight:400; }
.fx .auth-input{ width:100%; background:var(--void); border:1px solid var(--line); border-radius:2px; color:var(--paper);
  font-family:var(--fb); font-size:15px; padding:12px 13px; transition:border-color .14s, box-shadow .14s; }
.fx .auth-input::placeholder{ color:var(--dimmer); }
.fx .auth-input:focus{ outline:none; border-color:var(--line-2); box-shadow:inset 0 -2px 0 var(--flame); }

.fx .auth-checkbox-row{ display:flex; gap:11px; align-items:flex-start; margin:12px 0; cursor:pointer;
  font-size:13.5px; color:var(--dim); line-height:1.45; }
.fx .auth-checkbox{ margin:2px 0 0; width:16px; height:16px; accent-color:var(--flame); flex:0 0 auto; }
.fx .auth-checkbox-text-link, .fx .auth-checkbox-text a{ color:var(--paper); text-decoration:underline;
  text-underline-offset:2px; text-decoration-color:var(--line-2); }
.fx .auth-checkbox-text-link:hover{ text-decoration-color:var(--flame); }

.fx .auth-submit-btn, .fx .fyra-btn-primary.auth-submit-btn{ display:flex; width:100%; align-items:center; justify-content:center;
  gap:9px; padding:15px; margin-top:8px; border:1px solid transparent; border-radius:2px; cursor:pointer;
  background:var(--fire-soft); color:#fff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  font-family:var(--fm); font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.fx .auth-submit-btn:hover{ background:linear-gradient(180deg,#FF8A2E,#EC2006); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 26px -10px rgba(236,32,6,.6); }

.fx .auth-forgot-container{ text-align:right; margin-top:12px; }
.fx .auth-forgot-link{ font-size:13px; color:var(--dim); text-decoration:none; border-bottom:1px solid transparent; }
.fx .auth-forgot-link:hover{ color:var(--paper); border-color:var(--flame); }

.fx .auth-oauth-section{ margin-top:24px; }
.fx .auth-oauth-divider{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.fx .auth-oauth-divider-line{ height:1px; flex:1; background:var(--line); }
.fx .auth-oauth-divider-text{ font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer); }
.fx .auth-oauth-buttons{ display:flex; gap:10px; justify-content:center; }
.fx .auth-oauth-btn{ width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--line);
  background:var(--void); border-radius:2px; cursor:pointer; transition:border-color .15s, background .15s; }
.fx .auth-oauth-btn:hover{ border-color:var(--line-2); background:var(--coal-2); }

.fx .auth-info-box{ margin-top:20px; border:1px solid var(--line); background:var(--void); border-radius:2px; padding:12px 14px; }
.fx .auth-info-text{ margin:0; font-size:13px; color:var(--dim); line-height:1.45; display:flex; gap:9px; align-items:flex-start; }

.fx .auth-footer{ margin-top:24px; text-align:center; }
.fx .auth-footer-text{ font-size:14px; color:var(--dim); margin:0; }
.fx .auth-footer-link{ color:var(--gold); text-decoration:none; border-bottom:1px solid transparent; }
.fx .auth-footer-link:hover{ border-color:var(--gold); }

/* ── Цвет ссылок внутри .fx ────────────────────────────────────────────
   Глобальное правило styles.css `a:not(.btn):not(...)` имеет специфичность
   (0,13,1) и перекрывает цвет всех не-.btn ссылок внутри .fx. Возвращаем
   управление через !important (кнопки .btn/.auth-submit-btn не затронуты —
   они в exclusion-list или отдельные классы). */
.fx .nav__links a{ color:var(--dim) !important; }
.fx .nav__links a:hover{ color:var(--paper) !important; }
.fx .foot a{ color:var(--dim) !important; }
.fx .foot a:hover{ color:var(--paper) !important; }
.fx .auth-footer-link{ color:var(--gold) !important; }
.fx .auth-forgot-link{ color:var(--dim) !important; }
.fx .auth-forgot-link:hover{ color:var(--paper) !important; }
.fx .auth-checkbox-text a, .fx .auth-checkbox-text-link{ color:var(--paper) !important; }
.fx .auth-notice__appeal a{ color:var(--flame) !important; }

/* ── Старая анимированная декорация фона ────────────────────────────────
   body::before/::after (styles.css:172/184) рисует амбер-линии/точки.
   Гасим на fx-страницах (лендинг+auth) и делаем body тёмным — как widget. */
body.fx-page{ background:#090A0D !important; }
body.fx-page::before, body.fx-page::after{ display:none !important; content:none !important; opacity:0 !important; }

/* ══════════════════════════════════════════════════════════════════
   DRAWER: вход/регистрация как выезжающее окно на главной (drawer-lite).
   Формы внутри переиспользуют .fx .auth-* стили. position:fixed у .fxd/.fxd-scrim
   специфичнее (.fx .fxd = 0,2,0), чем .fx > * (0,1,0) — перебивает position:relative.
   ══════════════════════════════════════════════════════════════════ */
.fx .fxd-scrim{ position:fixed; inset:0; z-index:90; background:rgba(5,4,9,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.fx .fxd-scrim.open{ opacity:1; visibility:visible; }
.fx .fxd{ position:fixed; top:0; right:0; bottom:0; z-index:100; width:min(460px,100%);
  background:var(--void); border-left:1px solid var(--line-2); box-shadow:-30px 0 80px -20px rgba(0,0,0,.7);
  transform:translateX(100%); transition:transform .38s cubic-bezier(.4,0,.15,1); overflow-y:auto; }
.fx .fxd.open{ transform:translateX(0); }
.fx .fxd__fire{ position:absolute; inset:auto 0 0 0; height:42%; pointer-events:none; z-index:0;
  background:radial-gradient(64% 82% at 50% 128%, rgba(236,32,6,.16), transparent 66%); }
.fx .fxd__top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  padding:20px 26px; border-bottom:1px solid var(--line); }
.fx .fxd__brand{ display:flex; align-items:center; gap:9px; font-family:var(--fd); font-weight:700; font-size:17px; letter-spacing:-.05em; }
.fx .fxd__brand i{ width:10px; height:13px; background:var(--fire); display:block; clip-path:polygon(50% 0,72% 34%,92% 62%,74% 100%,26% 100%,12% 66%,30% 40%); }
.fx .fxd__close{ width:34px; height:34px; border:1px solid var(--line); background:var(--coal); cursor:pointer; color:var(--dim); font-size:20px; line-height:1; border-radius:2px; }
.fx .fxd__close:hover{ color:var(--paper); border-color:var(--line-2); }
.fx .fxd__body{ position:relative; z-index:1; padding:26px; }
.fx .fxseg{ display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:2px; background:var(--coal); border:1px solid var(--line); margin-bottom:24px; }
.fx .fxseg button{ padding:11px; background:transparent; border:0; cursor:pointer; font-family:var(--fm); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.fx .fxseg button[aria-selected="true"]{ background:var(--fire-soft); color:#fff; }
.fx .fxpane{ display:none; }
.fx .fxpane.on{ display:block; }
.fx .fxpane h3{ font-family:var(--fd); font-weight:700; font-size:22px; letter-spacing:-.03em; margin:0 0 4px; }
.fx .fxpane__sub{ color:var(--dim); font-size:14px; margin:0 0 20px; }
.fx .fxd__oauth{ margin-top:20px; }
.fx .fxd__odiv{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fx .fxd__odiv::before, .fx .fxd__odiv::after{ content:''; height:1px; flex:1; background:var(--line); }
.fx .fxd__odiv span{ font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer); }
.fx .fxd__mini{ margin-top:18px; text-align:center; font-size:13px; color:var(--dim); }
.fx .fxd__mini a{ color:var(--gold) !important; cursor:pointer; border-bottom:1px solid transparent; }
.fx .fxd__mini a:hover{ border-color:var(--gold); }
@media (max-width:520px){ .fx .fxd{ width:100%; } }
@media (prefers-reduced-motion:reduce){ .fx .fxd, .fx .fxd-scrim{ transition:none; } }

/* ══════════════════════════════════════════════════════════════════
   AUTH v4 — прочие auth-страницы: 2fa / forgot / reset / verify / oauth_email.
   Разметка: <section class="auth"> → внутри .fyra-card.auth-card (как login).
   Эти страницы используют «общие» классы (.form, label, .alert-*, .btn-*),
   а не .auth-* — поэтому им нужны собственные правила.
   Всё под `.fx-auth .auth:not(.auth-container)`, чтобы НЕ задеть login/register
   (.auth.auth-container) и verify-ip (.auth-container). Карточка/центровка/фон-огонь
   переиспользуются из блоков AUTH и .fx-auth .auth::before выше.
   ══════════════════════════════════════════════════════════════════ */
.fx-auth .auth:not(.auth-container) h2{
  font-family:var(--fd); font-weight:700; font-size:23px; letter-spacing:-.03em;
  color:var(--paper); margin:0 0 10px; min-height:0; text-align:center; }
.fx-auth .auth:not(.auth-container) p{
  color:var(--dim); font-size:14px; line-height:1.5; margin:0 0 16px; }
.fx-auth .auth:not(.auth-container) strong{ color:var(--paper); }

/* Формы: <label>Текст <input></label> */
.fx-auth .auth:not(.auth-container) .form{ display:block; }
.fx-auth .auth:not(.auth-container) .form label{
  display:block; margin-bottom:16px;
  font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); }
.fx-auth .auth:not(.auth-container) .form input[type="text"],
.fx-auth .auth:not(.auth-container) .form input[type="email"],
.fx-auth .auth:not(.auth-container) .form input[type="password"],
.fx-auth .auth:not(.auth-container) .form input[type="tel"]{
  display:block; width:100%; margin-top:7px;
  background:var(--void); border:1px solid var(--line); border-radius:2px; color:var(--paper);
  font-family:var(--fb); font-size:15px; font-weight:400; letter-spacing:normal; text-transform:none;
  padding:12px 13px; transition:border-color .14s, box-shadow .14s; }
.fx-auth .auth:not(.auth-container) .form input::placeholder{ color:var(--dimmer); }
.fx-auth .auth:not(.auth-container) .form input:focus{
  outline:none; border-color:var(--line-2); box-shadow:inset 0 -2px 0 var(--flame); }

/* Кнопки (.btn / .btn-primary / .btn-secondary) — во всю ширину карточки */
.fx-auth .auth:not(.auth-container) .btn{
  display:inline-flex; width:100%; align-items:center; justify-content:center; gap:9px;
  margin-top:8px; padding:15px; border:1px solid var(--line-2); border-radius:2px; cursor:pointer;
  font-family:var(--fm); font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; background:transparent; color:var(--paper) !important;
  transition:background .15s, border-color .15s, box-shadow .15s; }
.fx-auth .auth:not(.auth-container) .btn-primary{
  background:var(--fire-soft); color:#fff !important; border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.fx-auth .auth:not(.auth-container) .btn-primary:hover{
  background:linear-gradient(180deg,#FF8A2E,#EC2006);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 26px -10px rgba(236,32,6,.6); }
.fx-auth .auth:not(.auth-container) .btn-secondary{ border-color:var(--line-2); color:var(--paper) !important; background:transparent; }
.fx-auth .auth:not(.auth-container) .btn-secondary:hover{ border-color:var(--paper); }
.fx-auth .auth:not(.auth-container) .btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* Алерты */
.fx-auth .auth:not(.auth-container) .alert{ border:1px solid var(--line); border-radius:2px; padding:12px 14px; margin-bottom:18px; font-size:14px; }
.fx-auth .auth:not(.auth-container) .alert ul{ margin:0; padding-left:18px; }
.fx-auth .auth:not(.auth-container) .alert li{ margin:3px 0; }
.fx-auth .auth:not(.auth-container) .alert-error{ border-color:rgba(224,80,58,.4); background:rgba(224,80,58,.08); color:#F0A99C; }
.fx-auth .auth:not(.auth-container) .alert-success{ border-color:rgba(71,192,138,.4); background:rgba(71,192,138,.08); color:#9FE3C4; }
.fx-auth .auth:not(.auth-container) .alert a{ color:var(--paper) !important; text-decoration:underline; text-underline-offset:2px; }

/* Ссылки «← Вернуться к входу» */
.fx-auth .auth:not(.auth-container) .fp-back-link,
.fx-auth .auth:not(.auth-container) .fp-back-link-mt{ text-align:center; margin-top:20px; }
.fx-auth .auth:not(.auth-container) .auth-back-link{ text-align:center; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.fx-auth .auth:not(.auth-container) .fp-back-link a,
.fx-auth .auth:not(.auth-container) .fp-back-link-mt a,
.fx-auth .auth:not(.auth-container) .auth-back-link a{
  color:var(--dim) !important; text-decoration:none; font-size:14px; border-bottom:1px solid transparent; }
.fx-auth .auth:not(.auth-container) .fp-back-link a:hover,
.fx-auth .auth:not(.auth-container) .fp-back-link-mt a:hover,
.fx-auth .auth:not(.auth-container) .auth-back-link a:hover{ color:var(--paper) !important; border-color:var(--flame); }
.fx-auth .auth:not(.auth-container) .muted{ color:var(--dim); font-size:14px; margin:0 0 8px; }

/* forgot_password: колонка способов восстановления */
.fx-auth .auth:not(.auth-container) .fp-methods{ display:flex; flex-direction:column; gap:12px; }
.fx-auth .auth:not(.auth-container) .fp-methods .form{ margin:0; }
.fx-auth .auth:not(.auth-container) .fp-btn-method{ margin-top:0; }
.fx-auth .auth:not(.auth-container) .fp-btn-telegram{
  background:#229ED9 !important; color:#fff !important; border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.fx-auth .auth:not(.auth-container) .fp-btn-telegram:hover{ background:#1B8ABF !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }

/* 2fa: статус повторной отправки (цвет успеха/ошибки ставит JS через .style) */
.fx-auth .auth:not(.auth-container) .tfa-status{ margin-top:12px; font-size:13px; text-align:center; color:var(--dim); min-height:18px; }

/* oauth_email: предупреждение о важности email + подсказки */
.fx-auth .auth:not(.auth-container) .oe-alert-warning{ border:1px solid rgba(255,198,26,.4); background:rgba(255,198,26,.06); }
.fx-auth .auth:not(.auth-container) .oe-alert-strong{
  display:flex; gap:8px; align-items:center; color:var(--ember);
  font-family:var(--fm); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.fx-auth .auth:not(.auth-container) .oe-alert-text,
.fx-auth .auth:not(.auth-container) .oe-alert-footer{ color:var(--dim); font-size:13px; margin:8px 0 0; }
.fx-auth .auth:not(.auth-container) .oe-alert-list{ color:var(--dim); font-size:13px; margin:8px 0 0; padding-left:18px; }
.fx-auth .auth:not(.auth-container) .oe-alert-list li{ margin:3px 0; }
.fx-auth .auth:not(.auth-container) .oe-errors-list{ margin:0; padding-left:18px; }
.fx-auth .auth:not(.auth-container) .oe-required-mark{ color:var(--flame); }
.fx-auth .auth:not(.auth-container) .oe-hint-text{ display:block; color:var(--dimmer); font-size:12px; margin:6px 0 0; }
.fx-auth .auth:not(.auth-container) .oe-footer-text{ color:var(--dimmer); font-size:12px; line-height:1.5; margin:16px 0 0; }

/* ══════════════════════════════════════════════════════════════════
   AUTH v4 — verify-ip (вход с нового устройства). Структура .auth-container >
   .auth-card (как login), но контент на «общих» классах: form-control, btn, vip-…
   (звёздочку перед слэшем тут писать НЕЛЬЗЯ — закроет комментарий, см. SPEC
   CSS-COMMENT-GLOB-CLOSES-COMMENT).
   Свой inline <style> удалён — весь вид отсюда. Guard: селекторы используют
   классы, которых НЕТ в login (.form-control, .vip-*, .auth-icon, .btn, .link…),
   поэтому `.fx-auth .auth-container` их не задевает у login. Центровка —
   из общего `.fx-auth .auth-container` выше.
   ══════════════════════════════════════════════════════════════════ */
/* Фон-огонь для verify-ip: его корень — .auth-container (div), а не .auth.
   :not(.auth) исключает login (там элемент — .auth.auth-container). */
.fx-auth .auth-container:not(.auth)::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(78% 46% at 50% 104%, rgba(255,122,30,.16), transparent 60%),
    radial-gradient(105% 62% at 50% 114%, rgba(236,32,6,.24), transparent 64%),
    radial-gradient(46% 38% at 10% -6%, rgba(255,198,26,.07), transparent 66%); }
.fx-auth .auth-container:not(.auth) .auth-icon{ width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.fx-auth .auth-container:not(.auth) .vip-icon{ background:var(--fire-soft); box-shadow:0 0 34px -8px rgba(236,32,6,.7); }
.fx-auth .auth-container:not(.auth) .auth-form{ margin-top:22px; }
.fx-auth .auth-container:not(.auth) .form-group{ margin-bottom:18px; }
.fx-auth .auth-container:not(.auth) .form-label{ display:block; margin-bottom:7px;
  font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.fx-auth .auth-container:not(.auth) .form-control{ width:100%; background:var(--void); border:1px solid var(--line);
  border-radius:2px; color:var(--paper); font-family:var(--fb); font-size:15px; padding:12px 13px;
  transition:border-color .14s, box-shadow .14s; }
.fx-auth .auth-container:not(.auth) .form-control::placeholder{ color:var(--dimmer); }
.fx-auth .auth-container:not(.auth) .form-control:focus{ outline:none; border-color:var(--line-2); box-shadow:inset 0 -2px 0 var(--flame); }
.fx-auth .auth-container:not(.auth) .vip-code-input{ text-align:center; letter-spacing:.35em; font-family:var(--fm); font-size:18px; }
.fx-auth .auth-container:not(.auth) .form-text{ display:block; margin-top:7px; font-size:12px; color:var(--dimmer); }
.fx-auth .auth-container:not(.auth) .btn{ display:inline-flex; width:100%; align-items:center; justify-content:center; gap:9px;
  margin-top:4px; padding:15px; border:1px solid var(--line-2); border-radius:2px; cursor:pointer;
  font-family:var(--fm); font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; background:transparent; color:var(--paper) !important;
  transition:background .15s, border-color .15s, box-shadow .15s; }
.fx-auth .auth-container:not(.auth) .btn-primary{ background:var(--fire-soft); color:#fff !important; border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.fx-auth .auth-container:not(.auth) .btn-primary:hover{ background:linear-gradient(180deg,#FF8A2E,#EC2006); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 26px -10px rgba(236,32,6,.6); }
.fx-auth .auth-container:not(.auth) .btn-block{ width:100%; display:flex; }
.fx-auth .auth-container:not(.auth) .alert{ border:1px solid var(--line); border-radius:2px; padding:12px 14px; margin-bottom:18px; font-size:14px; }
.fx-auth .auth-container:not(.auth) .alert-danger{ border-color:rgba(224,80,58,.4); background:rgba(224,80,58,.08); color:#F0A99C; }
.fx-auth .auth-container:not(.auth) .alert-info{ border-color:var(--line-2); background:var(--coal-2); color:var(--dim); }
.fx-auth .auth-container:not(.auth) .vip-alert-text{ margin:0; color:var(--paper); font-size:14px; }
.fx-auth .auth-container:not(.auth) .vip-alert-subtext{ margin:6px 0 0; color:var(--dim); font-size:13px; font-family:var(--fm); }
.fx-auth .auth-container:not(.auth) .vip-error-text{ margin:0; color:#F0A99C; font-size:14px; }
.fx-auth .auth-container:not(.auth) .security-notice{ border:1px solid var(--line); background:var(--void); border-radius:2px; padding:12px 14px; margin-bottom:18px; text-align:center; }
.fx-auth .auth-container:not(.auth) .vip-notice-title{ margin:0; color:var(--dim); font-size:13px; }
.fx-auth .auth-container:not(.auth) .vip-ip-display{ margin:6px 0 0; color:var(--ember); font-family:var(--fm); font-size:15px; word-break:break-all; }
.fx-auth .auth-container:not(.auth) .auth-help{ text-align:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.fx-auth .auth-container:not(.auth) .vip-muted{ margin:0; color:var(--dimmer); font-size:13px; }
.fx-auth .auth-container:not(.auth) .link{ color:var(--gold) !important; text-decoration:none; font-weight:600; border-bottom:1px solid transparent; }
.fx-auth .auth-container:not(.auth) .link:hover{ border-color:var(--gold); }
.fx-auth .auth-container:not(.auth) .security-info{ margin-top:18px; border:1px solid var(--line); border-left:3px solid var(--flame);
  background:rgba(236,32,6,.05); border-radius:2px; padding:12px 14px; }
.fx-auth .auth-container:not(.auth) .vip-warning-text{ margin:0; color:var(--dim); font-size:13px; }
.fx-auth .auth-container:not(.auth) .vip-warning-text strong{ color:var(--paper); }

/* ══════════════════════════════════════════════════════════════════
   AUTH v4 — oauth-consent (/oauth-consent). Своя разметка .oc-* + базовый
   layout из /css/oauth-consent.css (амбер-палитра). Здесь ПЕРЕОПРЕДЕЛЯЕМ
   цвета/шрифты под v4 по специфичности (.fx.fx-auth .oc-… = 0,3,0 бьёт
   одноклассовые .oc-… и .fx > * = 0,1,0). Разметку/логику НЕ трогаем.
   ══════════════════════════════════════════════════════════════════ */
.fx.fx-auth .oc-overlay{ background:
    radial-gradient(78% 46% at 50% 104%, rgba(255,122,30,.16), transparent 60%),
    radial-gradient(105% 62% at 50% 114%, rgba(236,32,6,.24), transparent 64%),
    radial-gradient(46% 38% at 10% -6%, rgba(255,198,26,.07), transparent 66%),
    var(--void); }
.fx.fx-auth .oc-modal{ background:#141414; border:1px solid #2A2A2E; border-radius:2px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.fx.fx-auth .oc-icon{ background:var(--fire-soft); border-radius:50%;
  box-shadow:0 0 34px -8px rgba(236,32,6,.7); }
.fx.fx-auth .oc-icon svg{ fill:#fff; }
.fx.fx-auth .oc-title{ font-family:var(--fd); font-weight:700; font-size:23px; letter-spacing:-.03em; color:var(--paper); }
.fx.fx-auth .oc-notice{ border:1px solid rgba(255,198,26,.3); background:rgba(255,198,26,.06); border-radius:2px; }
.fx.fx-auth .oc-notice-icon{ color:var(--gold); }
.fx.fx-auth .oc-notice-text{ color:var(--dim); }
.fx.fx-auth .oc-error{ border:1px solid rgba(224,80,58,.4); background:rgba(224,80,58,.08); border-radius:2px; color:#F0A99C; }
.fx.fx-auth .oc-checkbox-item{ background:var(--void); border:1px solid var(--line); border-radius:2px; }
.fx.fx-auth .oc-checkbox-item:hover{ border-color:var(--line-2); }
.fx.fx-auth .oc-checkbox-item.required{ border-left:3px solid var(--flame); }
.fx.fx-auth .oc-checkbox-input{ accent-color:var(--flame); }
.fx.fx-auth .oc-checkbox-label{ font-family:var(--fb); color:var(--paper); font-weight:500; }
.fx.fx-auth .oc-checkbox-desc{ color:var(--dim); }
.fx.fx-auth .oc-checkbox-desc a{ color:var(--gold) !important; text-decoration:none; }
.fx.fx-auth .oc-checkbox-desc a:hover{ text-decoration:underline; text-underline-offset:2px; }
.fx.fx-auth .oc-required-badge{ background:rgba(255,198,26,.14); color:var(--gold); border-radius:2px;
  font-family:var(--fm); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.fx.fx-auth .oc-optional-badge{ background:var(--coal-2); color:var(--dimmer); border-radius:2px;
  font-family:var(--fm); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.fx.fx-auth .oc-btn{ border-radius:2px; font-family:var(--fm); font-size:13px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; }
.fx.fx-auth .oc-btn-primary{ background:var(--fire-soft); color:#fff !important; border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.fx.fx-auth .oc-btn-primary:hover:not(:disabled){ background:linear-gradient(180deg,#FF8A2E,#EC2006);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 26px -10px rgba(236,32,6,.6); }
.fx.fx-auth .oc-btn-primary:disabled{ opacity:.5; }
.fx.fx-auth .oc-btn-secondary{ background:transparent; border:1px solid var(--line-2); color:var(--paper) !important; }
.fx.fx-auth .oc-btn-secondary:hover{ background:transparent; border-color:var(--paper); color:var(--paper) !important; }

/* ══════════════════════════════════════════════════════════════════
   AUTH v4 — telegram_connect / telegram_login. Разметка обёрнута в
   <section class="auth"> → .fyra-card.auth-card (тёмная карточка + фон-огонь
   переиспользуются из блоков AUTH выше). Здесь — свои классы tc-… и tl-…
   (звёздочку перед слэшем не писать — закроет комментарий),
   перекрашиваем из светлой палитры inline-styles.css в токены v4.
   ══════════════════════════════════════════════════════════════════ */
.fx-auth .tc-card, .fx-auth .tl-card{ margin:0; max-width:none; text-align:center; }
.fx-auth .tc-title, .fx-auth .tl-title{ font-family:var(--fd); font-weight:700; font-size:23px;
  letter-spacing:-.03em; color:var(--paper); margin:0 0 20px; }
.fx-auth .tc-benefits-box, .fx-auth .tl-info-box{ background:var(--void); border:1px solid var(--line);
  border-radius:2px; padding:18px; margin:20px 0; text-align:left; }
.fx-auth .tc-benefits-title{ margin:0 0 12px; font-family:var(--fm); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.fx-auth .tc-benefits-list{ margin:0; padding-left:20px; line-height:1.9; color:var(--dim); opacity:1; font-size:14px; }
.fx-auth .tl-info-text{ margin:0; line-height:1.7; color:var(--dim); opacity:1; font-size:14px; }
.fx-auth .tc-connect-container, .fx-auth .tl-connect-container{ margin:26px 0; }
.fx-auth .tc-connect-text, .fx-auth .tl-connect-text{ color:var(--dim); font-size:14px; margin:0 0 18px; opacity:1; }
.fx-auth .tc-warning-box{ margin-top:22px; padding:14px; background:rgba(255,198,26,.06);
  border:1px solid rgba(255,198,26,.3); border-radius:2px; font-size:13.5px; text-align:left; color:var(--dim); }
.fx-auth .tc-warning-box strong{ color:var(--paper); }
.fx-auth .tc-back-container, .fx-auth .tl-back-container{ margin-top:24px; }
.fx-auth .tc-back-btn, .fx-auth .tl-back-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border:1px solid var(--line-2); border-radius:2px; background:transparent;
  color:var(--paper) !important; text-decoration:none; font-family:var(--fm); font-size:12px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; transition:border-color .15s, background .15s; }
.fx-auth .tc-back-btn:hover, .fx-auth .tl-back-btn:hover{ border-color:var(--paper); background:transparent; }

/* ══════════════════════════════════════════════════════════════════
   AUTH v4 — appeal (/appeal). Своя разметка .appeal-page > несколько .card
   (h1 + карточки блокировки/формы). Не .auth-контейнер: центруем колонку и
   рисуем фон-огонь на самой секции. .card/.alert/.btn — глобальные (часть с
   !important), бьём специфичностью .fx-auth .appeal-page … + !important на bg.
   ══════════════════════════════════════════════════════════════════ */
.fx-auth .appeal-page{ position:relative; z-index:1; min-height:100vh; max-width:680px;
  margin:0 auto; padding:44px 20px; }
.fx-auth .appeal-page::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(78% 46% at 50% 104%, rgba(255,122,30,.16), transparent 60%),
    radial-gradient(105% 62% at 50% 114%, rgba(236,32,6,.24), transparent 64%),
    radial-gradient(46% 38% at 10% -6%, rgba(255,198,26,.07), transparent 66%); }
.fx-auth .appeal-page h1{ font-family:var(--fd); font-weight:700; font-size:clamp(26px,4vw,36px);
  letter-spacing:-.03em; color:var(--paper); margin:0 0 24px; }
.fx-auth .appeal-page h2{ font-family:var(--fd); font-weight:700; font-size:20px; letter-spacing:-.03em; color:var(--paper); margin:0 0 12px; }
.fx-auth .appeal-page h3{ font-family:var(--fd); font-weight:700; font-size:16px; letter-spacing:-.02em; color:var(--paper); margin:0 0 12px; }
.fx-auth .appeal-page .card{ background:#141414 !important; border:1px solid #2A2A2E !important;
  border-radius:2px !important; box-shadow:none !important; padding:24px 26px; margin-bottom:20px; }
.fx-auth .appeal-page p{ color:var(--dim); font-size:14px; line-height:1.55; margin:0 0 10px; }
.fx-auth .appeal-page strong{ color:var(--paper); }
.fx-auth .appeal-page a:not(.btn){ color:var(--gold) !important; text-decoration:none; border-bottom:1px solid transparent; }
.fx-auth .appeal-page a:not(.btn):hover{ border-color:var(--gold); }
.fx-auth .appeal-page .alert{ border:1px solid var(--line); border-radius:2px; padding:12px 14px;
  margin-bottom:16px; font-size:14px; background:var(--coal-2); }
.fx-auth .appeal-page .alert-danger{ border-color:rgba(224,80,58,.4); background:rgba(224,80,58,.08); color:#F0A99C; }
.fx-auth .appeal-page .alert-success{ border-color:rgba(71,192,138,.4); background:rgba(71,192,138,.08); color:#9FE3C4; }
.fx-auth .appeal-page .appeal-textarea{ background:var(--void); border:1px solid var(--line); border-radius:2px;
  color:var(--paper); font-family:var(--fb); font-size:15px; padding:12px 13px; transition:border-color .14s, box-shadow .14s; }
.fx-auth .appeal-page .appeal-textarea::placeholder{ color:var(--dimmer); }
.fx-auth .appeal-page .appeal-textarea:focus{ outline:none; border-color:var(--line-2); box-shadow:inset 0 -2px 0 var(--flame); }
.fx-auth .appeal-page .appeal-actions{ margin-top:16px; }
.fx-auth .appeal-page .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border:1px solid var(--line-2); border-radius:2px; cursor:pointer; text-decoration:none;
  background:transparent; color:var(--paper) !important; font-family:var(--fm); font-size:13px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; transition:background .15s, border-color .15s, box-shadow .15s; }
.fx-auth .appeal-page .btn:hover{ border-color:var(--paper); }
.fx-auth .appeal-page .btn-primary{ background:var(--fire-soft); color:#fff !important; border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.fx-auth .appeal-page .btn-primary:hover{ background:linear-gradient(180deg,#FF8A2E,#EC2006);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 26px -10px rgba(236,32,6,.6); }