/* ============================================================
   Deluxe — Web Blue: пиксель-точный перенос макета Figma
   (спека снята из canvas.fig 2026-08-20, blueprints/*.json)
   Канва 1920px; масштаб <1920 через zoom (ставится из JS).
   Токены: фон #0a0f1e; акцент #6687f7; бордер-акцент #80acff;
   стекло rgba(255,255,255,.01/.02) + бордер rgba(255,255,255,.06)
   + radius 15 + backdrop blur. Шрифт Inter (Display-optical),
   акцентные слова — Baskervville Italic.
   ============================================================ */
:root {
  --bg: #0a0f1e;
  --accent: #6687f7;
  --accent-2: #80acff;
  --cta: #9987f5;
  --glass: rgba(255, 255, 255, 0.01);
  --glass-2: rgba(255, 255, 255, 0.02);
  --line: rgba(255, 255, 255, 0.06);
  --line-8: rgba(255, 255, 255, 0.08);
  --w90: rgba(255, 255, 255, 0.9);
  --w80: rgba(255, 255, 255, 0.8);
  --w70: rgba(255, 255, 255, 0.7);
  --w60: rgba(255, 255, 255, 0.6);
  --w50: rgba(255, 255, 255, 0.5);
  --w40: rgba(255, 255, 255, 0.4);
  --w30: rgba(255, 255, 255, 0.3);
  --danger: #f76666;
  --warn: #f7e666;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: #fff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-optical-sizing: auto;
  line-height: 1;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; border: 0; background: none; color: #fff; outline: none; }
::placeholder { color: var(--w40); opacity: 1; }
img { display: block; }

.serif { font-family: 'Baskervville', serif; font-style: italic; color: var(--accent); }

/* иконки: inline-svg, наследуют currentColor */
.ic { display: inline-flex; flex: none; align-items: center; justify-content: center; vertical-align: middle; }
.ic svg { width: 100%; height: 100%; display: block; }

/* канва 1920 */
#root { width: 1920px; margin: 0 auto; position: relative; }

/* ---------------- общие атомы ---------------- */

/* стеклянная карточка (fill .01, бордер .06, r15, blur100) */
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 15px;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
}
.glass2 {
  background: var(--glass-2);
  border: 1px solid var(--line);
  border-radius: 15px;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
}

/* primary-кнопка: #6687f7, бордер #80acff, r15 */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--accent);
  border: 1px solid var(--accent-2);
  border-radius: 15px;
  color: #fff;
  font-size: 15px; font-weight: 500;
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary .ic { width: 13px; height: 13px; }

/* ghost-кнопка (hero/CTA «Поддержка») */
.btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 15px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--w70);
  font-size: 14px; font-weight: 500;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); }
.btn-ghost .ic { width: 12px; height: 12px; }

/* тосты/модалки (служебные, вне макета — в его стиле) */
.toast-wrap { position: fixed; right: 24px; bottom: 24px; z-index: 400; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: #101114; border: 1px solid var(--line); border-radius: 15px;
  padding: 13px 18px; font-size: 14px; color: var(--w80);
  animation: dxfade .2s ease;
}
.toast.ok { border-color: rgba(102, 135, 247, 0.4); }
.toast.err { border-color: rgba(247, 102, 102, 0.4); }
@keyframes dxfade { from { opacity: 0; transform: translateY(8px); } }
.dx-modal-overlay {
  position: fixed; inset: 0; background: rgba(4, 5, 6, 0.72); z-index: 300;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dx-modal {
  width: 453px; background: #0f1526; border: 1px solid var(--line); border-radius: 15px;
  padding: 28px 25px;
}
.dx-modal h3 { font-size: 20px; font-weight: 600; }
.dx-modal .m-sub { font-size: 14px; font-weight: 500; color: var(--w50); margin-top: 9px; }
.dx-modal .field { margin-top: 20px; }
.dx-modal .field label { display: block; font-size: 14px; font-weight: 500; color: var(--w50); margin-bottom: 9px; }
.dx-modal .input {
  width: 100%; height: 43px; padding: 0 16px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 15px;
  font-size: 14px; font-weight: 600; color: #fff;
  backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
}
.dx-modal textarea.input { height: 110px; padding: 12px 16px; resize: none; line-height: 1.45; }
.dx-modal .m-actions { display: flex; gap: 12px; margin-top: 24px; }
.dx-modal .m-actions .btn-primary { height: 43px; flex: 1; font-size: 14px; font-weight: 600; }
.dx-modal .m-actions .btn-ghost { height: 43px; padding: 0 22px; }

/* ============================================================
   ЛЕНДИНГ
   ============================================================ */

/* overflow:hidden — обрезает «хвост» декоративных волн-псевдоэлементов,
   которые тянутся ниже футера и создавали пустую прокрутку */
.landing { position: relative; width: 1920px; background: var(--bg); overflow: hidden; }
/* фоновые волны страницы (0.02/0.01) */
.landing::before {
  content: ''; position: absolute; left: -1413px; top: 1106px; width: 4746px; height: 2670px;
  background: url('../img/bg-waves-2.png') center/cover no-repeat; opacity: 0.02; pointer-events: none;
}
.landing::after {
  content: ''; position: absolute; left: -2382px; top: 2552px; width: 4746px; height: 2670px;
  background: url('../img/bg-waves-2.png') center/cover no-repeat; opacity: 0.01; pointer-events: none;
}

/* --- hero-фон: волны + вуали + градиент в фон --- */
.hero {
  position: relative; width: 1920px; height: 1080px; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg .l1 { position: absolute; inset: 0; background: url('../img/bg-waves-2.png') center/cover no-repeat; }
.hero-bg .l2 { position: absolute; inset: 0; background: rgba(10, 11, 12, 0.1); }
/* a1b7cf44 (фото) в макете — только МАСКА для вуалей, сама не рисуется */
.hero-bg .l3 { display: none; }
.hero-bg .veil1 { position: absolute; left: -824px; top: -270px; width: 2079px; height: 1544px; background: rgba(10, 11, 12, 0.37); filter: blur(175px); }
.hero-bg .veil2 { position: absolute; left: -824px; top: -270px; width: 1491px; height: 1544px; background: rgba(10, 11, 12, 0.3); filter: blur(175px); }
.hero-bg .grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 19, 19, 0) 0%, #0a0f1e 100%); }

/* --- плавающий стеклянный хедер 503x57 --- */
/* закреплён: остаётся на экране при скролле (центрируем margin'ом —
   transform нельзя, его перебила бы анимация dxDrop) */
.site-header {
  position: fixed; left: 50%; margin-left: -226px; top: 23px; width: 452px; height: 57px; z-index: 120;
  background: rgba(20, 22, 27, 0.55);
  border: 1px solid var(--line);
  border-radius: 15px;
  backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
}
.site-header .logo { position: absolute; left: 24px; top: 19px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.site-header nav a {
  position: absolute; top: 20px; display: flex; align-items: center;
  font-size: 14px; font-weight: 400; color: var(--w60);
}
.site-header nav a .ic { margin-right: 6px; }
.site-header nav a.nav-home { left: 28px; }
.site-header nav a.nav-home .ic { width: 14px; height: 14px; }
.site-header nav a.nav-price { left: 130px; }
.site-header nav a.nav-price .ic { width: 13px; height: 13px; }
.site-header nav a.nav-docs { left: 214px; }
.site-header nav a.nav-docs .ic { width: 12px; height: 12px; }
.site-header nav a.active { font-weight: 500; color: var(--w90); }
.site-header nav a.active .ic { color: #fff; }
.site-header .cab-btn {
  position: absolute; left: 322px; top: 7px; width: 106px; height: 43px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); border-radius: 15px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: #fff;
}
.site-header .cab-btn.ghosted { background: rgba(102, 135, 247, 0.3); color: var(--w60); }
.site-header .cab-btn .ic { width: 13px; height: 13px; }

/* --- hero главный текст (лево, x148 y540) --- */
.hero-inner { position: absolute; left: 148px; top: 540px; width: 621px; z-index: 5; }
.hero-inner h1 {
  width: 621px; font-size: 50px; line-height: 1.29; font-weight: 600; color: rgba(255, 255, 255, 0.85);
}
.hero-inner h1 .l2c { color: #fff; }
.hero-inner h1 .serif { font-weight: 500; }
.hero-inner h1 .dot { font-weight: 500; color: var(--w80); }
.hero-inner .sub {
  margin-top: 27px; width: 572px; font-size: 16px; font-weight: 500; line-height: 1.19; color: var(--w70);
}
.hero-inner .actions { margin-top: 46px; display: flex; gap: 17px; }
.hero-inner .actions .btn-primary { width: 168px; height: 38px; font-size: 14px; }
.hero-inner .actions .btn-ghost { width: 129px; height: 38px; }

/* --- строка статистики hero (x148 y886) --- */
.hero-stats {
  position: absolute; left: 148px; top: 886px; height: 18px; z-index: 5;
  display: flex; gap: 35px; align-items: center;
}
.hero-stats span { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--w70); }
.hero-stats span b { font-weight: 600; color: #fff; }
.hero-stats .ic { width: 12px; height: 12px; color: var(--accent); }

/* --- секции лендинга --- */
.section-head { text-align: center; position: relative; z-index: 5; }
.section-head .eyebrow { display: block; font-size: 15px; font-weight: 600; color: var(--accent); }
.section-head h2 { margin-top: 13px; font-size: 50px; font-weight: 600; line-height: 1.16; color: #fff; }
.section-head p { margin: 20px auto 0; font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--w70); }

/* «Почему deluxe» */
.why { position: relative; width: 1920px; height: 1718px; margin-top: 118px; }
.why .section-head { position: absolute; left: 732px; top: 0; width: 456px; }
.why .section-head p { width: 456px; }

/* нотч-карточки: стекло + выемка через mask */
.why-card {
  position: absolute;
  background: var(--glass);
  border: 1px solid var(--line-8);
  border-radius: 15px;
  overflow: hidden;
}
.why-big { left: 147px; top: 289px; width: 1624px; height: 699px;
  -webkit-mask: radial-gradient(circle 49.5px at 811.5px 718.5px, transparent 49px, #000 50px);
          mask: radial-gradient(circle 49.5px at 811.5px 718.5px, transparent 49px, #000 50px); }
.why-left { left: 147px; top: 1019px; width: 796px; height: 699px;
  -webkit-mask: radial-gradient(circle 49.5px at 811.5px -11.5px, transparent 49px, #000 50px);
          mask: radial-gradient(circle 49.5px at 811.5px -11.5px, transparent 49px, #000 50px); }
.why-right { left: 975px; top: 1019px; width: 796px; height: 699px;
  -webkit-mask: radial-gradient(circle 49.5px at -16.5px -11.5px, transparent 49px, #000 50px);
          mask: radial-gradient(circle 49.5px at -16.5px -11.5px, transparent 49px, #000 50px); }
.why-card .shot { position: absolute; opacity: 0.7; pointer-events: none; }
.why-big .shot { left: 305px; top: -63px; width: 1165px; height: 640px; }
.why-left .shot { left: 49px; top: 130px; width: 747px; height: 747px; }
.why-right .shot { left: -142px; top: 270px; width: 962px; height: 788px; }
.why-card h3 { position: absolute; font-size: 30px; font-weight: 600; line-height: 1.4; color: #fff; }
.why-card h3 em { font-style: normal; color: var(--accent); }
.why-big h3 { left: 65px; top: 427px; width: 511px; }
.why-left h3, .why-right h3 { left: 65px; top: 46px; width: 474px; }
.why-card .desc { position: absolute; left: 65px; width: 438px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--w50); }
.why-big .desc { top: 524px; }
.why-left .desc, .why-right .desc { top: 143px; }
.why-big .actions { position: absolute; left: 65px; top: 596px; display: flex; gap: 23px; }
.why-big .actions .btn-primary { width: 168px; height: 38px; font-size: 14px; }
.why-big .actions .btn-ghost { width: 110px; height: 38px; }

/* блёрбы поверх большой карточки (abs страницы 1981 − начало .why 1198 = 783) */
.why-blurb { position: absolute; top: 783px; width: 336px; z-index: 6; }
.why-blurb.b1 { left: 946px; }
.why-blurb.b2 { left: 1361px; }
.why-blurb .tile {
  width: 38px; height: 38px; border-radius: 15px; background: rgba(102, 135, 247, 0.15);
  display: flex; align-items: center; justify-content: center;
}
.why-blurb .tile .ic { width: 16px; height: 16px; color: var(--accent); }
.why-blurb h4 { margin-top: 14px; font-size: 20px; font-weight: 600; color: #fff; }
.why-blurb p { margin-top: 14px; font-size: 14px; font-weight: 500; line-height: 1.22; color: rgba(255, 255, 255, 0.75); }

/* круглый лого-разделитель в выемке */
.why-hub {
  position: absolute; left: 926px; top: 975px; width: 65px; height: 65px; z-index: 7;
  border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.why-hub b { font-size: 26px; font-weight: 800; color: #fff; }

/* Тарифы */
.plans { position: relative; width: 1920px; margin-top: 202px; }
.plans .section-head { margin: 0 auto; width: 564px; }
.plans-grid { position: relative; width: 1593px; margin: 38px auto 0; }
.plan-card {
  position: absolute;
  background: var(--glass);
  border: 1px solid var(--line-8);
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  width: 378px; height: 493px;
}
.plan-card.small { height: 267px; }
.plan-card.wide { width: 783px; height: 267px; }
.plan-card .divider { position: absolute; left: 20px; width: 338px; height: 0.5px; background: rgba(255, 255, 255, 0.15); }
.plan-card.wide .divider { width: 743px; }
.plan-card .d1 { top: 23px; }
.plan-card .d2 { top: 264px; }
.plan-card .popular {
  position: absolute; left: 20px; top: 16px; width: 338px; height: 15px;
  display: flex; align-items: center;
}
.plan-card .popular b { font-size: 12px; font-weight: 600; color: var(--w50); }
.plan-card .popular i { flex: 1; margin-left: 8px; height: 0.5px; background: rgba(255, 255, 255, 0.15); }
.plan-card h3 { position: absolute; left: 20px; top: 52px; display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 600; color: #fff; }
.plan-card h3 .ic { width: 18px; height: 18px; color: var(--accent); }
.plan-card .pdesc { position: absolute; left: 20px; top: 82px; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: var(--w50); }
.plan-card .price { position: absolute; left: 20px; top: 115px; font-size: 50px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.plan-card .price small { font-size: 50px; color: var(--w30); }
.plan-card .buy {
  position: absolute; left: 20px; top: 201px; width: 338px; height: 40px;
  background: var(--accent); border-radius: 15px;
}
.plan-card.wide .buy { width: 743px; }
.plan-card .buy .ic { position: absolute; left: 17px; top: 16px; width: 9px; height: 9px; color: #fff; }
.plan-card .buy span { position: absolute; right: 18px; top: 11px; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.plan-card .incl { position: absolute; left: 20px; top: 286px; width: 338px; }
.plan-card .incl b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.plan-card .incl ul { margin-top: 3px; }
.plan-card .incl li { list-style: none; margin-top: 15px; display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: var(--w50); white-space: nowrap; }
.plan-card .incl li .ic { width: 13px; height: 13px; flex: none; color: var(--accent); }

/* баннер «Сброс HWID» на всю ширину (нижний ряд) */
.plan-card.hwid {
  left: 0; width: 1593px; height: 130px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; box-shadow: none;
}
.plan-card.hwid .hwid-l { }
.plan-card.hwid .hwid-title { display: flex; align-items: center; gap: 13px; font-size: 22px; font-weight: 600; color: #fff; }
.plan-card.hwid .hwid-title .ic { color: var(--accent); }
.plan-card.hwid .hwid-sub { margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--w50); }
.plan-card.hwid .hwid-r { display: flex; align-items: center; gap: 32px; }
.plan-card.hwid .hwid-price { font-size: 40px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.plan-card.hwid .hwid-price small { font-size: 40px; color: var(--w30); }
.plan-card.hwid .hwid-buy {
  position: static; width: 200px; height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); border-radius: 15px;
}
.plan-card.hwid .hwid-buy span { position: static; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.plan-card.hwid .hwid-buy .ic { position: static; width: 10px; height: 10px; color: #fff; }

/* CTA — фон ТЁМНЫЙ (плашка #9987f5 в макете — маска, не рисуется);
   за текстом — гигантский знак логотипа ~2-3% синего */
.cta {
  position: relative; width: 851px; height: 400px; margin: 72px auto 0;
  border-radius: 15px; overflow: hidden; text-align: center;
}
.cta .wm {
  position: absolute; left: 14px; top: 29px; width: 823px; height: 591px;
  color: rgba(102, 135, 247, 0.03); pointer-events: none;
}
.cta .wm svg { width: 100%; height: 100%; }
.cta h2 { margin-top: 96px; font-size: 50px; font-weight: 600; line-height: 1.17; color: #fff; }
.cta p { margin: 29px auto 0; width: 468px; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--w70); }
.cta .actions { margin-top: 23px; display: flex; justify-content: center; gap: 21px; }
.cta .actions .btn-primary { width: 168px; height: 38px; font-size: 14px; }
.cta .actions .btn-ghost { width: 110px; height: 38px; }

/* footer */
.site-footer { position: relative; width: 1316px; margin: 76px auto 0; padding-bottom: 0; height: 355px; }
.site-footer .brand-logo { display: flex; align-items: center; }
.site-footer .brand-logo b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.site-footer .brand-desc { margin-top: 6px; width: 334px; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--w50); }
.site-footer .col { position: absolute; top: 2px; }
.site-footer .col.c1 { left: 1013px; }
.site-footer .col.c2 { left: 1204px; }
.site-footer .col h4 { font-size: 13px; font-weight: 600; color: var(--w80); }
.site-footer .col a { display: block; margin-top: 15px; font-size: 13px; font-weight: 500; color: var(--w30); }
.site-footer .col a.hot { font-weight: 600; color: var(--w60); }
.site-footer .rule { position: absolute; left: 0; top: 127px; width: 1316px; height: 1px; background: rgba(255, 255, 255, 0.1); }
.site-footer .copy { position: absolute; left: 0; top: 155px; font-size: 11px; font-weight: 500; color: var(--w30); }
.site-footer .copy b { font-weight: 500; color: rgba(255, 255, 255, 0.45); }
.site-footer .copy em { font-style: normal; color: var(--accent); }
.site-footer .socials { position: absolute; top: 156px; right: 0; display: flex; gap: 55px; }
.site-footer .socials a { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 400; color: var(--w30); }
.site-footer .socials a .ic { width: 12px; height: 12px; }
.site-footer .giant {
  position: absolute; left: 0; top: 174px; font-size: 150px; font-weight: 500; line-height: 1.2;
  background: linear-gradient(180deg, rgba(102, 135, 247, 0.37) 0%, rgba(60, 79, 145, 0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; user-select: none;
}

/* ============================================================
   АВТОРИЗАЦИЯ (Регистрация/Вход)
   ============================================================ */

.auth-page { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--bg); }
.auth-bg { position: absolute; inset: 0; }
.auth-bg .l1 { position: absolute; inset: 0; background: url('../img/bg-waves-3.png') center/cover no-repeat; border-radius: 15px; }
.auth-bg .l2 { position: absolute; inset: 0; background: rgba(10, 11, 12, 0.6); }
.auth-bg .l3 { display: none; }
.auth-bg .veil1 { position: absolute; left: -824px; top: -270px; width: 2079px; height: 1544px; background: rgba(10, 11, 12, 0.75); filter: blur(175px); }
.auth-bg .veil2 { position: absolute; left: -824px; top: -270px; width: 1491px; height: 1544px; background: rgba(10, 11, 12, 0.5); filter: blur(175px); }
.auth-page .site-header { top: 17px; }

.auth-panel { position: absolute; left: 103px; top: 235px; width: 453px; z-index: 5; }
.auth-panel h1 { width: 400px; font-size: 40px; font-weight: 600; line-height: 1.2; color: #fff; }
.auth-panel .sub { margin-top: 22px; width: 453px; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--w70); }

.auth-form { margin-top: 29px; }
.a-field { position: relative; width: 453px; height: 69px; margin-bottom: 19px; }
.a-field label { position: absolute; left: 0; top: 0; font-size: 14px; font-weight: 500; color: var(--w70); white-space: nowrap; }
.a-field .rule { position: absolute; top: 9px; right: 0; height: 0.5px; background: rgba(255, 255, 255, 0.15); }
.a-field .box {
  position: absolute; left: 0; top: 30px; width: 453px; height: 39px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-8);
  border-radius: 12px;
  backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
  display: flex; align-items: center;
}
.a-field .box .ic { width: 12px; height: 12px; margin-left: 16px; color: var(--w40); }
.a-field .box input { flex: 1; height: 100%; padding: 0 14px 0 11px; font-size: 13px; font-weight: 400; color: #fff; }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin-top: -1px; height: 16px; }
.auth-row .terms { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--w70); cursor: pointer; }
.auth-row .terms a { color: var(--accent); }
.auth-row .terms input { appearance: none; width: 13px; height: 13px; border-radius: 15px; background: var(--w50); cursor: pointer; flex: none; }
.auth-row .terms input:checked { background: var(--accent); box-shadow: inset 0 0 0 3px rgba(10, 11, 12, .8); }
.auth-row .alt { font-size: 13px; font-weight: 400; color: var(--w50); }

.auth-submit {
  margin-top: 19px; width: 453px; height: 41px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); border: 1px solid var(--accent-2); border-radius: 15px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 15px; font-weight: 500; color: #fff;
}
.auth-submit .ic { width: 14px; height: 14px; }
.auth-switch { margin-top: 21px; font-size: 13px; font-weight: 500; color: var(--w50); }
.auth-switch a { color: var(--accent); }
.form-error { display: none; margin-bottom: 15px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--danger); }
.form-error.show { display: block; }
.form-error.ok { color: #7df78b; }

/* ============================================================
   КАБИНЕТ / АДМИНКА — общая оболочка
   ============================================================ */

.shell { position: relative; width: 1920px; min-height: 1080px; background: var(--bg); overflow: hidden; }
.shell.with-photo .shell-bg .l1 { position: absolute; inset: 0; background: url('../img/bg-waves-2.png') center/cover no-repeat; }
.shell.with-photo .shell-bg .l2 { position: absolute; inset: 0; background: rgba(10, 11, 12, 0.6); }
.shell.with-photo .shell-bg .veil1 { position: absolute; left: -824px; top: -270px; width: 2079px; height: 1544px; background: rgba(10, 11, 12, 0.75); filter: blur(175px); }
.shell.with-photo .shell-bg .veil2 { position: absolute; left: -824px; top: -270px; width: 1491px; height: 1544px; background: rgba(10, 11, 12, 0.5); filter: blur(175px); }
.shell-bg { position: absolute; inset: 0; pointer-events: none; }

/* хедер кабинета: x103 y29, gap 57 */
.shell-nav { position: absolute; left: 103px; top: 29px; height: 43px; z-index: 30; display: flex; align-items: flex-start; }
.shell-nav .back { width: 25px; height: 20px; color: var(--accent); margin-top: 0; }
.shell-nav .back .ic { width: 25px; height: 20px; }
.shell-nav a.item {
  position: relative; margin-left: 57px; display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 400; color: var(--w50); padding-top: 1px;
}
.shell-nav a.item:first-of-type { margin-left: 60px; }
.shell-nav a.item .ic { width: 12px; height: 12px; }
.shell-nav a.item.active { font-weight: 500; color: #fff; }
.shell-nav a.item.active .ic { color: #fff; }
.shell-nav a.item.active::after {
  content: ''; position: absolute; left: 0; top: 41px; width: 100%; height: 1px;
  background: #fff; border-radius: 15px;
}
.shell-nav .logout { margin-left: 57px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 400; color: var(--w50); padding-top: 1px; }
.shell-nav .logout .ic { width: 12px; height: 12px; }

/* заголовочный блок страницы: x103 y148 */
.page-head { position: absolute; left: 103px; top: 148px; z-index: 5; }
.page-head .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--accent); }
.page-head .eyebrow.med { font-weight: 500; }
.page-head .eyebrow .ic { width: 13px; height: 13px; }
.page-head h1 { margin-top: 25px; font-size: 35px; font-weight: 600; color: #fff; }
.page-head .sub { margin-top: 27px; font-size: 14px; font-weight: 500; color: var(--w50); }

/* контентная зона под шапкой — всё позиционируется абсолютно по макету */
.abs { position: absolute; }

/* ---------------- Профиль ---------------- */

.pr-hero { position: absolute; left: 102px; top: 145px; z-index: 5; }
.pr-hero .eyebrow { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--accent); }
.pr-hero .eyebrow .ic { width: 13px; height: 13px; }
.pr-hero .who { margin-top: 26px; display: flex; }
.pr-hero .who img { width: 73px; height: 73px; border-radius: 15px; object-fit: cover; }
.pr-hero .who h1 { margin-left: 18px; font-size: 35px; font-weight: 600; line-height: 1.2; color: #fff; }
.pr-hero .who h1 .nick { font-weight: 500; font-style: italic; color: var(--accent); }
.pr-hero .sub { margin-top: 25px; font-size: 14px; font-weight: 500; color: var(--w50); }

.pr-stats { position: absolute; left: 103px; top: 357px; width: 352px; z-index: 5; }
.pr-stats .row { position: relative; display: flex; align-items: center; height: 19px; margin-bottom: 22px; }
.pr-stats .row .ic { width: 15px; height: 15px; color: var(--w50); margin-right: 7px; }
.pr-stats .row .k { font-size: 16px; font-weight: 400; color: var(--w50); white-space: nowrap; }
.pr-stats .row .lead { flex: 1; height: 0.5px; margin: 0 10px; background: rgba(255, 255, 255, 0.1); }
.pr-stats .row .v { font-size: 16px; font-weight: 500; color: #fff; white-space: nowrap; }

.pr-ref { position: absolute; left: 1269px; top: 233px; width: 548px; z-index: 5; }
.pr-ref h3 { font-size: 17px; font-weight: 600; color: var(--w90); }
.pr-ref .linkbox {
  margin-top: 16px; width: 548px; height: 43px; display: flex; align-items: center;
  background: var(--glass); border: 1px solid var(--line); border-radius: 15px;
  backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
}
.pr-ref .linkbox span { flex: 1; margin-left: 16px; font-size: 14px; font-weight: 600; color: var(--w80); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-ref .linkbox button { margin-right: 18px; font-size: 14px; font-weight: 600; color: var(--accent); }
.pr-ref .note { margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--w50); }

.pr-inviter { position: absolute; left: 1269px; top: 379px; width: 548px; height: 169px; z-index: 5; }
.pr-inviter .hdr { position: absolute; left: 22px; top: 15px; display: flex; align-items: center; gap: 7px; }
.pr-inviter .hdr .ic { width: 17px; height: 17px; color: #fff; }
.pr-inviter .hdr b { font-size: 17px; font-weight: 600; color: #fff; }
.pr-inviter img { position: absolute; left: 22px; top: 57px; width: 50px; height: 50px; border-radius: 15px; object-fit: cover; }
.pr-inviter .nick { position: absolute; left: 84px; top: 59px; font-size: 18px; font-weight: 500; font-style: italic; color: #fff; }
.pr-inviter .role { position: absolute; left: 84px; top: 83px; font-size: 15px; font-weight: 500; color: var(--accent); }
.pr-inviter .note { position: absolute; left: 22px; top: 130px; font-size: 13px; font-weight: 500; color: var(--w50); }

/* три карточки 548x245 на y584 */
.pr-card { position: absolute; top: 584px; width: 548px; height: 245px; z-index: 5; }
.pr-card.c1 { left: 103px; }
.pr-card.c2 { left: 686px; }
.pr-card.c3 { left: 1269px; }
.pr-card .hdr { position: absolute; left: 22px; top: 16px; display: flex; align-items: center; gap: 7px; }
.pr-card .hdr .ic { width: 17px; height: 17px; color: #fff; }
.pr-card .hdr b { font-size: 17px; font-weight: 600; color: #fff; }
.pr-card .rows { position: absolute; left: 22px; top: 59px; width: 504px; }
.pr-card .rows .row { display: flex; justify-content: space-between; margin-bottom: 22px; height: 17px; }
.pr-card.c3 .rows .row { margin-bottom: 19px; }
.pr-card .rows .k { font-size: 14px; font-weight: 400; color: var(--w50); }
.pr-card .rows .v { font-size: 14px; font-weight: 500; color: #fff; }
.pr-card .rows .v.acc { color: var(--accent); }
.pr-card .act {
  position: absolute; left: 22px; top: 178px; width: 504px; height: 41px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--accent); border: 1px solid var(--accent-2); border-radius: 15px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 15px; font-weight: 500; color: #fff;
}
.pr-card .act .ic { width: 13px; height: 13px; }

.pr-activity { position: absolute; left: 103px; top: 866px; width: 1714px; height: 124px; z-index: 5; }
.pr-activity .hdr { position: absolute; left: 22px; top: 13px; display: flex; align-items: center; gap: 9px; }
.pr-activity .hdr .ic { width: 15px; height: 15px; color: #fff; }
.pr-activity .hdr b { font-size: 17px; font-weight: 600; color: #fff; }
.pr-activity .item { position: absolute; top: 55px; }
.pr-activity .item .when { font-size: 14px; font-weight: 400; color: var(--w50); }
.pr-activity .item .what { margin-top: 10px; font-size: 14px; font-weight: 500; color: #fff; }
.pr-activity .item .what em { font-style: normal; color: var(--accent); }

/* ---------------- Тикеты (кабинет + админ) ---------------- */

.tk-btn-new {
  position: absolute; left: 103px; top: 303px; width: 260px; height: 40px; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--accent); border: 1px solid var(--accent-2); border-radius: 15px;
  font-size: 15px; font-weight: 500; color: #fff;
}
.tk-btn-new .ic { width: 15px; height: 15px; }

.tk-table { position: absolute; left: 103px; width: 1240px; height: 611px; z-index: 5; }
.tk-table .thead {
  position: absolute; left: 0; top: 0; width: 1240px; height: 44px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 15px;
  backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px);
}
.tk-table .thead span { position: absolute; top: 13px; display: block; white-space: nowrap; font-size: 15px; font-weight: 600; color: #fff; }
.tk-table .thead span .ic { width: 13px; height: 13px; }
/* header-иконки: прямой svg (.ich) вместо обёртки .ic — inline-flex .ic не центрируется в abspos-шапке */
.thead span svg.ich { vertical-align: middle; margin-right: 7px; }
.tk-table .row {
  position: absolute; left: 13px; width: 1213px; height: 44px; cursor: pointer;
  display: block; border-radius: 15px;
}
.tk-table .row.sel {
  background: var(--glass-2); border: 1px solid var(--line);
  backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px);
}
.tk-table .row span { position: absolute; top: 13px; font-size: 15px; font-weight: 500; color: var(--w70); white-space: nowrap; overflow: hidden; }
.tk-table .row.sel span { font-weight: 600; color: #fff; }
.tk-table .row .chev { position: absolute; right: 22px; top: 15px; width: 13px; height: 13px; color: var(--w70); }
.tk-table .row.sel .chev { color: #fff; transform: rotate(90deg); }
.tk-table .row img.ava { position: absolute; width: 14px; height: 14px; border-radius: 50%; object-fit: cover; top: 15px; }
.tk-pager .pg-gap{display:inline-flex;align-items:center;padding:0 4px;color:rgba(255,255,255,.35);font-size:13px;user-select:none;}

.tk-pager { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.tk-pager button.nav {
  width: 28px; height: 28px; border-radius: 15px; background: rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: center; color: var(--w70);
}
.tk-pager button.nav .ic { width: 12px; height: 12px; }
.tk-pager button.pg { font-size: 14px; font-weight: 600; color: var(--w50); padding: 4px 6px; }
.tk-pager button.pg.active { color: #fff; }

.tk-chat { position: absolute; left: 1363px; width: 454px; height: 611px; z-index: 5; }
.tk-chat .topbar {
  position: absolute; left: 0; top: 0; width: 454px; height: 53px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 15px;
  backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px);
  display: flex; align-items: center;
}
.tk-chat .topbar .ic { width: 17px; height: 17px; margin-left: 23px; color: #fff; }
.tk-chat .topbar b { margin-left: 8px; font-size: 16px; font-weight: 600; color: #fff; }
.tk-chat .topbar .num { margin-left: auto; margin-right: 24px; font-size: 14px; font-weight: 600; color: var(--w70); }
.tk-chat .topbar .status-dd {
  margin-left: auto; margin-right: 12px; height: 31px; padding: 0 12px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 15px;
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: #fff;
}
.tk-chat .topbar .status-dd .ic { width: 12px; height: 12px; margin: 0; color: var(--w70); }
.tk-chat .msgs { position: absolute; left: 23px; top: 76px; width: 411px; bottom: 145px; overflow-y: auto; scrollbar-width: none; }
.tk-chat .msgs::-webkit-scrollbar { display: none; }
.tk-chat .msg { position: relative; margin-bottom: 19px; }
.tk-chat .msg .ava {
  width: 36px; height: 35px; border-radius: 15px; object-fit: cover;
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}
.tk-chat .msg .ava.sup { background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; }
.tk-chat .msg .ava.sup .ic { width: 16px; height: 16px; }
.tk-chat .msg .nick { position: absolute; left: 45px; top: 0; font-size: 14px; font-weight: 600; color: #fff; }
.tk-chat .msg .time { position: absolute; left: 45px; top: 18px; font-size: 11px; font-weight: 500; color: var(--w50); }
.tk-chat .msg .bubble {
  margin-top: 10px; width: 361px; padding: 10px;
  background: rgba(255, 255, 255, 0.04); border: 0.5px solid rgba(255, 255, 255, 0.1); border-radius: 15px;
  font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--w80);
}
.tk-chat .msg.sup .bubble { width: 388px; background: var(--accent); border: 0; color: #fff; }
.tk-chat .composer {
  position: absolute; left: 0; bottom: 0; width: 454px; height: 53px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 15px;
  backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px);
  display: flex; align-items: center;
}
.tk-chat .composer.tall { height: 131px; flex-direction: column; align-items: stretch; }
.tk-chat .composer .quick {
  margin: 12px 22px 0; height: 31px; padding: 0 12px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 15px;
  display: flex; align-items: center; font-size: 13px; font-weight: 500; color: #fff;
}
.tk-chat .composer .quick .ic { width: 12px; height: 12px; margin-left: auto; color: var(--w70); }
.tk-chat .composer .qrule { margin: 14px 22px 0; height: 0.5px; background: rgba(255, 255, 255, 0.15); }
.tk-chat .composer .line { flex: 1; display: flex; align-items: center; }
.tk-chat .composer .line .ic.pen { width: 15px; height: 15px; margin-left: 23px; color: var(--w50); }
.tk-chat .composer .line input { flex: 1; height: 100%; padding: 0 11px; font-size: 15px; font-weight: 400; color: #fff; }
.tk-chat .composer .line input::placeholder { color: var(--w50); }
.tk-chat .composer .send {
  width: 28px; height: 26px; margin-right: 15px; flex: none;
  background: var(--accent); border: 0.5px solid var(--accent-2); border-radius: 15px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.tk-chat .composer .send .ic { width: 12px; height: 12px; }

/* инфо-плашка юзера (админ-тикеты) */
.tk-info { position: absolute; left: 103px; width: 1714px; height: 88px; z-index: 5; }
.tk-info img.ava { position: absolute; left: 20px; top: 18px; width: 51px; height: 51px; border-radius: 15px; object-fit: cover; }
.tk-info .nick { position: absolute; left: 87px; top: 21px; font-size: 20px; font-weight: 600; color: #fff; }
.tk-info .role { position: absolute; left: 87px; top: 48px; font-size: 15px; font-weight: 500; color: var(--accent); }
.tk-info .cell { position: absolute; top: 15px; }
.tk-info .cell .lbl { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 400; color: var(--w50); }
.tk-info .cell .lbl .ic { width: 15px; height: 15px; }
.tk-info .cell .val { margin-top: 13px; font-size: 16px; font-weight: 500; color: #fff; }

/* ---------------- Маркет ---------------- */

.mk-search {
  position: absolute; left: 103px; top: 304px; width: 404px; height: 43px; z-index: 5;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 15px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center;
}
.mk-search .ic { width: 13px; height: 13px; margin-left: 16px; color: var(--w50); }
.mk-search input { flex: 1; height: 100%; padding: 0 12px 0 10px; font-size: 14px; font-weight: 400; }
.mk-search input::placeholder { color: var(--w50); }

.mk-section { position: absolute; left: 103px; z-index: 5; }
.mk-section .hdr { display: flex; align-items: center; gap: 13px; }
.mk-section .hdr .ic { width: 16px; height: 16px; color: var(--accent); }
.mk-section .hdr b { font-size: 20px; font-weight: 600; color: #fff; }
.mk-grid { position: relative; margin-top: 30px; display: flex; gap: 84px; }
.mk-item { position: relative; width: 169px; height: 175px; cursor: pointer; }
.mk-item img { position: absolute; left: 33px; top: 0; width: 88px; height: 128px; border-radius: 15px; object-fit: contain; }
.mk-item .nm { position: absolute; left: 0; top: 149px; font-size: 17px; font-weight: 600; color: #fff; }
.mk-item .pill {
  position: absolute; right: 0; bottom: 0; width: 85px; height: 30px;
  background: var(--accent); border: 0.5px solid var(--accent-2); border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500; color: #fff;
}

/* ---------------- Админ / Пользователи ---------------- */

.au-search {
  position: absolute; left: 103px; top: 313px; width: 877px; height: 50px; z-index: 5;
  display: flex; align-items: center;
}
.au-search input { flex: 1; height: 100%; padding: 0 22px; font-size: 16px; font-weight: 500; }
.au-search input::placeholder { color: var(--w40); }
.au-search .ic { width: 16px; height: 16px; margin-right: 19px; color: var(--w40); }

.au-table { position: absolute; left: 103px; top: 380px; width: 877px; height: 699px; z-index: 5; }
.au-table .thead {
  position: absolute; left: 0; top: 0; width: 877px; height: 44px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 15px;
  backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px);
}
.au-table .thead span { position: absolute; top: 13px; display: block; white-space: nowrap; font-size: 15px; font-weight: 600; color: #fff; }
.au-table .thead span .ic { width: 14px; height: 14px; }
.au-table .row { position: absolute; left: 13px; width: 851px; height: 44px; border-radius: 15px; cursor: pointer; }
.au-table .row.sel {
  background: var(--glass-2); border: 1px solid var(--line);
  backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px);
}
.au-table .row span { position: absolute; top: 13px; font-size: 15px; font-weight: 500; color: var(--w70); white-space: nowrap; overflow: hidden; }
.au-table .row.sel span { font-weight: 600; color: #fff; }
.au-table .row img.ava { position: absolute; top: 14px; width: 15px; height: 15px; border-radius: 50%; object-fit: cover; }
.au-table .row .chev { position: absolute; right: 24px; top: 15px; width: 13px; height: 13px; color: var(--w70); }

.au-panel { position: absolute; left: 1000px; top: 313px; width: 802px; height: 766px; z-index: 5; }
.au-panel h2 { position: absolute; left: 24px; top: 28px; font-size: 18px; font-weight: 600; color: #fff; }
.au-panel .who { position: absolute; left: 24px; top: 90px; height: 52px; }
.au-panel .who img { position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 15px; object-fit: cover; }
.au-panel .who .nick { position: absolute; left: 64px; top: 1px; font-size: 20px; font-weight: 600; color: #fff; white-space: nowrap; }
.au-panel .who .plan { position: absolute; left: 120px; top: 3px; font-size: 17px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.au-panel .who .uid { position: absolute; left: 64px; top: 26px; font-size: 17px; font-weight: 600; color: var(--w70); white-space: nowrap; }
.au-panel .inforow { position: absolute; left: 24px; top: 170px; width: 746px; }
.au-panel .inforow .cell { position: absolute; top: 0; }
.au-panel .inforow .cell .lbl { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 400; color: var(--w50); }
.au-panel .inforow .cell .lbl .ic { width: 14px; height: 14px; }
.au-panel .inforow .cell .val { margin-top: 12px; font-size: 16px; font-weight: 500; color: #fff; white-space: nowrap; }
.au-panel .gbtn {
  position: absolute; height: 46px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #fff;
}
.au-panel .gbtn:hover { background: rgba(255, 255, 255, 0.04); }
.au-panel .gbtn .ic { width: 13px; height: 13px; }
.au-panel .gbtn .ic.warn { color: var(--warn); }
.au-panel .gbtn .ic.danger { color: var(--danger); }
.au-panel .chev-side { position: absolute; left: 752px; top: 301px; width: 15px; height: 15px; color: var(--w70); }
.au-panel textarea {
  position: absolute; left: 24px; top: 521px; width: 754px; height: 157px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 15px;
  padding: 12px 21px; font-size: 14px; font-weight: 500; color: #fff; resize: none; line-height: 1.4;
}
.au-panel textarea::placeholder { color: var(--w50); }
.au-panel .save {
  position: absolute; left: 24px; top: 695px; width: 754px; height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); border: 1px solid var(--accent-2); border-radius: 15px;
  font-size: 14px; font-weight: 600; color: #fff;
}
.au-panel .save .ic { width: 14px; height: 14px; }
.au-panel .empty { position: absolute; left: 24px; top: 90px; font-size: 14px; font-weight: 500; color: var(--w50); }

/* ---------------- Админ / Платежи ---------------- */

.pay-kpi { position: absolute; left: 103px; top: 313px; width: 1699px; height: 104px; z-index: 5; }
.pay-kpi .cell { position: absolute; top: 18px; }
.pay-kpi .cell .k { font-size: 16px; font-weight: 500; color: var(--w70); }
.pay-kpi .cell .v { margin-top: 12px; font-size: 25px; font-weight: 600; color: #fff; }
.pay-kpi .cell .v small { font-size: 25px; color: var(--w50); }

.pay-chart { position: absolute; left: 103px; top: 436px; width: 1037px; height: 429px; z-index: 5; }
.pay-chart .hdr { position: absolute; left: 25px; top: 17px; font-size: 17px; font-weight: 600; color: #fff; }
.pay-chart .ranges { position: absolute; right: 29px; top: 21px; display: flex; }
.pay-chart .ranges button { position: relative; font-size: 13px; font-weight: 500; color: var(--w50); margin-left: 25px; padding-bottom: 8px; }
.pay-chart .ranges button.active { font-weight: 600; color: #fff; }
.pay-chart .ranges button.active::after { content: ''; position: absolute; left: 0; bottom: 0; width: 52px; max-width: 100%; height: 1px; background: var(--accent); }
.pay-chart .plot { position: absolute; left: 25px; top: 60px; width: 987px; height: 680px; }
.pay-chart .totals { position: absolute; left: 25px; top: 338px; display: flex; gap: 60px; }
.pay-chart .totals .cell .k { font-size: 16px; font-weight: 500; color: var(--w70); }
.pay-chart .totals .cell .v { margin-top: 10px; font-size: 20px; font-weight: 600; color: #fff; }
.pay-chart .totals .cell .v small { font-size: 20px; color: var(--w50); }

.pay-form { position: absolute; left: 1164px; top: 436px; width: 635px; height: 550px; z-index: 5; }
.pay-form h2 { position: absolute; left: 25px; top: 17px; font-size: 17px; font-weight: 600; color: #fff; }
.pay-form .sub { position: absolute; left: 25px; top: 47px; font-size: 14px; font-weight: 500; color: var(--w50); }
.pay-form .mode { position: absolute; right: 25px; top: 28px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; }
.pay-form .mode .ic { width: 19px; height: 19px; }
.pay-form label { position: absolute; font-size: 14px; font-weight: 500; color: var(--w50); }
.pay-form .inp {
  position: absolute; height: 43px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 15px;
  backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
  display: flex; align-items: center;
}
.pay-form .inp input { flex: 1; height: 100%; padding: 0 16px; font-size: 14px; font-weight: 600; color: #fff; }
.pay-form .inp .gen { margin-right: 16px; font-size: 14px; font-weight: 600; color: var(--accent); flex: none; }
.pay-form .inp .ic { width: 15px; height: 15px; margin-right: 17px; color: #fff; flex: none; }
.pay-form .chk { position: absolute; left: 25px; top: 346px; display: flex; align-items: center; gap: 11px; cursor: pointer; }
.pay-form .chk input { appearance: none; width: 18px; height: 18px; border-radius: 15px; background: rgba(255, 255, 255, 0.1); cursor: pointer; }
.pay-form .chk input:checked { background: var(--accent); }
.pay-form .chk span { font-size: 14px; font-weight: 500; color: var(--w80); }
.pay-form .create {
  position: absolute; left: 25px; top: 475px; width: 585px; height: 43px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); border: 1px solid var(--accent-2); border-radius: 15px;
  backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
  font-size: 14px; font-weight: 600; color: #fff;
}
.pay-form .create .ic { width: 13px; height: 13px; }

.pay-promos { position: absolute; left: 103px; top: 889px; width: 1037px; height: 246px; z-index: 5; }
.pay-promos .thead { position: absolute; left: 25px; top: 20px; width: 949px; height: 18px; }
.pay-promos .thead span { position: absolute; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--w50); }
.pay-promos .thead span .ic { width: 14px; height: 14px; }
.pay-promos .row { position: absolute; left: 25px; width: 949px; height: 23px; cursor: pointer; }
.pay-promos .row span { position: absolute; top: 0; font-size: 17px; font-weight: 600; color: var(--w50); white-space: nowrap; }
.pay-promos .row.sel span { color: #fff; }
.pay-promos .row .marker { display: none; }
.pay-promos .row.sel .marker {
  display: block; position: absolute; left: 0; top: 5px; width: 2px; height: 13px;
  background: var(--accent); border-radius: 15px;
}

/* ---------------- Документы ---------------- */

.dc-tabs {
  position: absolute; left: 103px; top: 310px; width: 553px; height: 52px; z-index: 5;
  background: var(--glass); border: 1px solid var(--line); border-radius: 15px;
  display: flex; align-items: center; padding: 0 10px; gap: 11px;
}
.dc-tabs button {
  height: 35px; padding: 0 14px; border-radius: 15px;
  display: flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.02);
  font-size: 14px; font-weight: 500; color: var(--w50);
}
.dc-tabs button .ic { width: 13px; height: 13px; }
.dc-tabs button.active {
  background: rgba(102, 135, 247, 0.07);
  border-color: rgba(102, 135, 247, 0.1);
  font-weight: 600; color: var(--accent);
}
.dc-card { position: absolute; left: 103px; top: 396px; width: 1723px; z-index: 5; padding-bottom: 37px; }
.dc-card .hdr { position: absolute; left: 24px; top: 21px; display: flex; align-items: center; gap: 10px; }
.dc-card .hdr .ic { width: 16px; height: 16px; color: #fff; }
.dc-card .hdr b { font-size: 16px; font-weight: 600; color: #fff; }
.dc-card .body { margin: 65px 58px 0 24px; width: 1641px; }
.dc-card .body p { margin-bottom: 25px; font-size: 15px; font-weight: 500; line-height: 1.67; color: var(--w60); }
.dc-card .body p:last-child { margin-bottom: 0; }
.dc-card .scrollbar { position: absolute; right: 24px; top: 65px; width: 2px; height: 201px; background: var(--accent); border-radius: 15px; }

/* ============================================================
   АНИМАЦИИ
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* reveal при скролле (через CSS-animation, чтобы не мешать hover-transition) */
  .reveal { opacity: 0; }
  .reveal.in { animation: dxReveal 0.72s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  @keyframes dxReveal {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* появление hero при загрузке лендинга — по элементам, каскадом */
  .hero-inner h1     { animation: dxReveal 0.8s 0.05s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .hero-inner .sub   { animation: dxReveal 0.8s 0.16s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .hero-inner .actions { animation: dxReveal 0.8s 0.28s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .hero-stats span   { animation: dxReveal 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .hero-stats span:nth-child(1) { animation-delay: 0.40s; }
  .hero-stats span:nth-child(2) { animation-delay: 0.48s; }
  .hero-stats span:nth-child(3) { animation-delay: 0.56s; }
  .hero-stats span:nth-child(4) { animation-delay: 0.64s; }
  .site-header { animation: dxDrop 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  @keyframes dxDrop {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* вход страницы при смене роута (класс .route-in ставится из JS — только на навигацию) */
  .route-in { animation: dxPageIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes dxPageIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; } /* none, а не translateY(0): fill both с transform делал .landing containing-block'ом и ломал fixed-хедер */
  }
  /* смена вкладок документов — мягкая подмена текста */
  .dc-card .body { animation: dxFadeIn 0.4s ease both; }

  /* график админ-платежей: рисование линии + проявление заливки + поп маркера */
  .pay-chart .plot.animate .carea { opacity: 0; animation: dxFadeIn 0.9s ease 0.5s forwards; }
  .pay-chart .plot.animate .cline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dxDraw 1.1s cubic-bezier(0.4, 0.6, 0.2, 1) 0.15s forwards; }
  .pay-chart .plot.animate .cmarker { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dxPop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) 1s forwards; }
  @keyframes dxDraw { to { stroke-dashoffset: 0; } }
  @keyframes dxPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
}
@keyframes dxFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* модалка: затемнение + всплытие карточки */
.dx-modal-overlay { animation: dxFadeIn 0.22s ease both; }
.dx-modal { animation: dxModalIn 0.3s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes dxModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* тост: въезд справа */
.toast { animation: dxToastIn 0.32s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes dxToastIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* фокус-подсветка полей ввода */
.a-field .box, .dx-modal .input, .mk-search, .au-search, .pay-form .inp, .pr-ref .linkbox,
.tk-chat .composer .line, .tk-chat .composer .quick {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.a-field .box:focus-within, .pay-form .inp:focus-within, .mk-search:focus-within,
.au-search:focus-within, .tk-chat .composer .line:focus-within {
  border-color: rgba(102, 135, 247, 0.5);
  box-shadow: 0 0 0 3px rgba(102, 135, 247, 0.12);
}
.dx-modal .input:focus, .dx-modal textarea.input:focus,
.au-panel textarea:focus, .pay-form .inp input:focus {
  border-color: rgba(102, 135, 247, 0.5);
  box-shadow: 0 0 0 3px rgba(102, 135, 247, 0.12);
}

/* hover-переходы (без transform на карточках — чтобы не конфликтовать с reveal) */
.plan-card { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.plan-card:not(.hwid):hover { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 10px 44px rgba(0, 0, 0, 0.28); }
.plan-card.hwid:hover { border-color: rgba(255, 255, 255, 0.14); }
.why-card { transition: border-color 0.3s ease; }
.why-card:hover { border-color: rgba(128, 172, 255, 0.22); }

.buy, .btn-primary, .btn-ghost, .auth-submit, .act, .tk-btn-new, .create, .save, .gbtn, .cab-btn, .pill {
  transition: filter 0.18s ease, background 0.2s ease, border-color 0.2s ease, transform 0.14s ease;
}
.buy:hover, .act:hover, .tk-btn-new:hover, .create:hover, .save:hover, .cab-btn:hover, .auth-submit:hover { filter: brightness(1.09); }
.buy:active, .btn-primary:active, .act:active, .auth-submit:active, .tk-btn-new:active { transform: translateY(1px); }

/* навигация/ссылки */
.site-header nav a, .shell-nav a, .site-footer .col a, .docs-tabs button, .dc-tabs button, .ranges button {
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.site-header nav a:hover, .site-footer .col a:hover { color: #fff; }
.shell-nav a.item:hover { color: var(--w80); }

/* строки таблиц/тикетов/маркета */
.tk-table .row, .au-table .row, .pay-promos .row, .mk-item, .dc-tabs button, .tk-pager button {
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.16s ease, opacity 0.18s ease;
}
.tk-table .row:not(.sel):hover, .au-table .row:not(.sel):hover, .pay-promos .row:not(.sel):hover { background: rgba(255, 255, 255, 0.02); }
.mk-item:hover { transform: translateY(-4px); }
.mk-item img { transition: transform 0.25s ease; }
.mk-item:hover img { transform: scale(1.04); }

/* спиннер-заглушка возможных долгих ответов не нужен — оставляем мягкие тосты */
.toast { transition: opacity 0.2s ease; }

/* ============================================================
   МЕНЮ ПОКУПКИ (выбор способа оплаты)
   ============================================================ */
.dx-modal:has(.pay-modal) { width: 470px; }
.pay-modal { display: flex; flex-direction: column; }
.pay-modal .pm-head { font-size: 15px; font-weight: 500; color: var(--w50); margin-bottom: 18px; }
.pay-modal .pm-head b { font-weight: 600; color: var(--accent); }

/* селектор способа оплаты + инпуты (без backdrop-filter — иначе создают
   stacking-контексты и перекрывают выпадающий список) */
.pay-modal .pm-select, .pay-modal .pm-input {
  height: 46px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 15px;
  display: flex; align-items: center; margin-bottom: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pay-modal .pm-select { position: relative; z-index: 30; padding: 0 16px; cursor: pointer; }
.pay-modal .pm-select span { flex: 1; font-size: 14px; font-weight: 500; color: #fff; }
/* .ic — это тоже <span>, поэтому flex:1 выше растягивал стрелку по центру; держим её у края */
.pay-modal .pm-select .ic { flex: none; width: 13px; height: 13px; color: var(--w50); transition: transform 0.2s ease; }
.pay-modal .pm-select .ic svg { transform: rotate(90deg); }
.pay-modal .pm-select:hover { border-color: rgba(255, 255, 255, 0.12); }

/* поля (email/промокод) — гаснут при выборе FunPay (там не нужны) */
.pay-modal .pm-fields { transition: opacity 0.2s ease; }
.pay-modal.mode-funpay .pm-fields { opacity: 0.35; pointer-events: none; }
.pay-modal .pm-input { padding: 0 16px; }
.pay-modal .pm-input input { flex: 1; height: 100%; font-size: 14px; font-weight: 500; color: #fff; background: none; }
.pay-modal .pm-input input::placeholder { color: var(--w40); }
.pay-modal .pm-input:focus-within, .pay-modal .pm-select:focus-within { border-color: rgba(102, 135, 247, 0.5); box-shadow: 0 0 0 3px rgba(102, 135, 247, 0.12); }

/* выпадающий список способов */
.pay-modal .pm-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #14161b; border: 1px solid var(--line); border-radius: 15px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: dxModalIn 0.18s ease both;
}
.pay-modal .pm-opt { padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--w70); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.pay-modal .pm-opt:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.pay-modal .pm-opt.active { color: var(--accent); }

.pay-modal .pm-row { display: flex; gap: 12px; }
.pay-modal .pm-row .pm-input { flex: 1; }

/* кнопки — акцентные (как в референсе) */
.pay-modal .pm-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: 15px;
  background: var(--accent); border: 1px solid var(--accent-2);
  font-size: 14px; font-weight: 600; color: #fff;
  transition: filter 0.18s ease, transform 0.14s ease;
}
.pay-modal .pm-btn:hover { filter: brightness(1.09); }
.pay-modal .pm-btn:active { transform: translateY(1px); }
.pay-modal .pm-btn .ic { width: 13px; height: 13px; }
.pay-modal .pm-apply { flex: none; padding: 0 20px; }
.pay-modal .pm-pay { width: 100%; margin-top: 4px; }
.pay-modal .pm-alt { flex: 1; background: rgba(102, 135, 247, 0.14); border-color: rgba(102, 135, 247, 0.28); color: #fff; }
.pay-modal .pm-alt:hover { background: rgba(102, 135, 247, 0.22); filter: none; }
.pay-modal .pm-alt .ic { width: 14px; height: 14px; color: var(--accent); }

.pay-modal .pm-note { font-size: 12px; font-weight: 500; min-height: 0; margin: -4px 0 10px; color: var(--w50); }
.pay-modal .pm-note.ok { color: #7df78b; }
.pay-modal .pm-note.err { color: var(--danger); }
.pay-modal .pm-note:empty { margin: 0; }

.pay-modal .pm-or { display: flex; align-items: center; gap: 14px; margin: 16px 0; color: var(--w40); font-size: 12px; font-weight: 600; }
.pay-modal .pm-or::before, .pay-modal .pm-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.pay-modal .pm-cancel { margin-top: 14px; height: 40px; font-size: 14px; font-weight: 500; color: var(--w50); transition: color 0.2s ease; }
.pay-modal .pm-cancel:hover { color: #fff; }

/* ============================================================
   КНОПКА АДМИН-ПАНЕЛИ + АНИМАЦИИ КАБИНЕТА
   ============================================================ */
.au-like { transition: background 0.18s ease, border-color 0.18s ease, transform 0.14s ease; cursor: pointer; }
.au-like:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; }
.au-like:active { transform: translateY(1px); }

.admin-cta {
  height: 43px; border-radius: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: var(--accent); border: 1px solid var(--accent-2);
  box-shadow: 0 6px 24px rgba(102, 135, 247, 0.28);
  transition: filter 0.18s ease, transform 0.14s ease, box-shadow 0.2s ease;
}
.admin-cta .ic { width: 15px; height: 15px; }
.admin-cta:hover { filter: brightness(1.08); box-shadow: 0 8px 30px rgba(102, 135, 247, 0.4); }
.admin-cta:active { transform: translateY(1px); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes dxRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  /* активность: события внутри — лёгкий каскад */
  .shell .pr-activity .item { animation: dxRise 0.5s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .shell .pr-activity .item:nth-child(2) { animation-delay: 0.46s; }
  .shell .pr-activity .item:nth-child(3) { animation-delay: 0.52s; }
  .shell .pr-activity .item:nth-child(4) { animation-delay: 0.58s; }
  .shell .pr-activity .item:nth-child(5) { animation-delay: 0.64s; }
}

/* ============================================================
   КНОПКА ПАНЕЛИ В НАВБАРЕ + АНИМАЦИИ КАБИНЕТА
   ============================================================ */
.shell-nav .nav-panel-btn {
  margin-left: 44px; align-self: flex-start; margin-top: -7px;
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 15px; border-radius: 15px;
  background: rgba(102, 135, 247, 0.15); border: 1px solid rgba(102, 135, 247, 0.30);
  font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.shell-nav .nav-panel-btn .ic { width: 13px; height: 13px; }
.shell-nav .nav-panel-btn:hover { background: rgba(102, 135, 247, 0.25); box-shadow: 0 4px 18px rgba(102, 135, 247, 0.25); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes dxRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
}

/* ============================================================
   ПЛАТЕЖИ: переключатель Промокоды/Ключи + таблица ключей
   ============================================================ */
.pay-form .pay-toggle {
  position: absolute; top: 14px; right: 25px; z-index: 6;
  display: flex; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 15px;
}
.pay-form .pay-toggle button {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
  border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--w50); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pay-form .pay-toggle button .ic { width: 13px; height: 13px; }
.pay-form .pay-toggle button.active { background: var(--accent); color: #fff; }
.pay-form .pay-toggle button:not(.active):hover { color: #fff; }

.pay-form .pay-hint { position: absolute; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--w50); }

/* таблица ключей */
.pay-keys {
  position: absolute; left: 103px; top: 889px; width: 1037px; height: 246px; z-index: 5;
  padding: 20px 25px;
}
.pay-keys .khead, .pay-keys .krow {
  display: grid; grid-template-columns: 300px 130px 170px 1fr 34px; align-items: center;
}
.pay-keys .khead { height: 22px; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--w50); }
.pay-keys .khead span:last-child { text-align: right; }
.pay-keys .klist { height: 168px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.pay-keys .klist::-webkit-scrollbar { width: 6px; }
.pay-keys .klist::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.pay-keys .krow { height: 37px; font-size: 14px; font-weight: 500; color: var(--w70); border-top: 1px solid rgba(255, 255, 255, 0.05); }
.pay-keys .krow .kname { font-family: 'JetBrains Mono', monospace; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
.pay-keys .krow .kactive { color: #7df78b; }
.pay-keys .krow .kused { color: var(--w40); }
.pay-keys .krow .kdel {
  width: 28px; height: 28px; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--danger); background: rgba(247, 102, 102, 0.10);
  transition: background 0.18s ease;
}
.pay-keys .krow .kdel .ic { width: 13px; height: 13px; }
.pay-keys .krow .kdel:hover { background: rgba(247, 102, 102, 0.22); }
.pay-keys .kempty { padding: 52px 0; text-align: center; color: var(--w40); font-size: 14px; font-weight: 500; }

/* ============================================================
   Разделение: страница «Промокоды и ключи» + сводка на «Платежах»
   ============================================================ */
/* отдельная страница промокодов/ключей: список слева, форма справа (высоты выровнены) */
.promo-page .pay-form { top: 313px; }
.promo-page .pay-promos, .promo-page .pay-keys { top: 313px; height: 550px; }
.promo-page .pay-keys .klist { height: 472px; }
.promo-page .pay-promos { overflow: hidden; }

/* детальная статистика промокода (модалка) */
.promo-detail .pd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promo-detail .pd-name { font-size: 21px; font-weight: 700; color: #fff; font-family: 'JetBrains Mono', monospace; word-break: break-all; }
.promo-detail .pd-badge { flex: none; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 15px; }
.promo-detail .pd-badge.on { color: #7df78b; background: rgba(125, 247, 139, 0.12); }
.promo-detail .pd-badge.off { color: var(--w40); background: rgba(255, 255, 255, 0.05); }
.promo-detail .pd-big { margin-top: 20px; }
.promo-detail .pd-big b { display: block; font-size: 46px; font-weight: 700; line-height: 1; color: var(--accent); }
.promo-detail .pd-big span { display: block; margin-top: 9px; font-size: 14px; font-weight: 500; color: var(--w50); }
.promo-detail .pd-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.promo-detail .pd-stat { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.promo-detail .pd-stat .k { display: block; font-size: 12px; font-weight: 500; color: var(--w50); }
.promo-detail .pd-stat .v { display: block; margin-top: 5px; font-size: 16px; font-weight: 600; color: #fff; }
.promo-detail .pd-progress { margin-top: 18px; }
.promo-detail .pd-progress.unlim { font-size: 13px; font-weight: 500; color: var(--w50); text-align: center; padding: 10px; background: rgba(255, 255, 255, 0.03); border-radius: 12px; }
.promo-detail .pd-bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.promo-detail .pd-bar i { display: block; height: 100%; background: var(--accent); border-radius: 8px; transition: width 0.4s ease; }
.promo-detail .pd-progress > span { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--w50); }
.promo-detail .m-actions { margin-top: 24px; display: flex; gap: 12px; }
.promo-detail .m-actions .btn-primary { flex: 1; height: 44px; }
.promo-detail .pd-del { flex: none; height: 44px; padding: 0 22px; border-radius: 15px; font-size: 14px; font-weight: 600; color: var(--danger); background: rgba(247, 102, 102, 0.12); transition: background 0.18s ease; }
.promo-detail .pd-del:hover { background: rgba(247, 102, 102, 0.22); }

/* карточка-сводка на странице Платежей (справа, вместо формы) */
.pay-summary { position: absolute; left: 1164px; top: 436px; width: 635px; height: 429px; z-index: 5; padding: 25px; }
.pay-summary h2 { font-size: 17px; font-weight: 600; color: #fff; }
.pay-summary .sub { margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--w50); }
.pay-summary .srows { margin-top: 22px; }
.pay-summary .srow { display: flex; align-items: center; justify-content: space-between; height: 38px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.pay-summary .srow .k { font-size: 15px; font-weight: 500; color: var(--w50); }
.pay-summary .srow .v { font-size: 16px; font-weight: 600; color: #fff; }
.pay-summary .srow .v small { color: var(--w40); }
.pay-summary .sum-link {
  position: absolute; left: 25px; right: 25px; bottom: 25px; width: auto; top: auto; height: 46px;
}

/* ============================================================
   Ключи: типы/назначение, поиск, фильтры, продажи, статистика
   ============================================================ */
/* сегментные переключатели (форма + модалка продажи) */
.pay-form .segwrap { position: absolute; }
.pay-form .kseg, .dx-modal .kseg {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 15px;
}
.pay-form .kseg { height: 44px; }
.dx-modal .kseg { height: 42px; margin-top: 2px; }
.pay-form .kseg button, .dx-modal .kseg button {
  flex: 1; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--w50); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pay-form .kseg button.active, .dx-modal .kseg button.active { background: var(--accent); color: #fff; }
.pay-form .kseg button:not(.active):hover, .dx-modal .kseg button:not(.active):hover { color: #fff; }

/* поиск + чипы в списке ключей */
.pay-keys .k-search { height: 40px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.pay-keys .k-search .ic { width: 14px; height: 14px; margin: 0 10px 0 14px; color: var(--w40); flex: none; }
.pay-keys .k-search input { flex: 1; height: 100%; font-size: 14px; color: #fff; background: none; padding-right: 14px; }
.pay-keys .k-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pay-keys .k-chips button { height: 28px; padding: 0 12px; border-radius: 15px; font-size: 12px; font-weight: 600; color: var(--w50); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); cursor: pointer; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
.pay-keys .k-chips button.active { color: #fff; background: var(--accent); border-color: var(--accent-2); }
.pay-keys .k-chips button:not(.active):hover { color: #fff; }

/* переопределяем сетку строк ключей под новые колонки */
.pay-keys .khead, .pay-keys .krow { grid-template-columns: 1fr 168px 116px 150px 72px; gap: 10px; }
.pay-keys .ktag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 15px; white-space: nowrap; width: fit-content; }
.pay-keys .ktag.t-subscription { color: #6687f7; background: rgba(102, 135, 247, 0.13); }
.pay-keys .ktag.t-beta { color: #f7b866; background: rgba(247, 184, 102, 0.13); }
.pay-keys .ktag.t-hwid { color: #66d9f7; background: rgba(102, 217, 247, 0.13); }
.pay-keys .ktag.p-sale { color: var(--w60); background: rgba(255, 255, 255, 0.05); }
.pay-keys .ktag.p-giveaway { color: #c98bf7; background: rgba(201, 139, 247, 0.13); }
.pay-keys .krow .ksold { color: #f7b866; }
.pay-keys .krow .kactions { display: flex; gap: 6px; justify-content: flex-end; }
.pay-keys .krow .ksell { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--accent); background: rgba(102, 135, 247, 0.12); cursor: pointer; transition: background 0.18s ease; }
.pay-keys .krow .ksell .ic { width: 13px; height: 13px; }
.pay-keys .krow .ksell:hover { background: rgba(102, 135, 247, 0.22); }
/* высота списка на промо-странице с учётом поиска+чипов */
.promo-page .pay-keys .klist { height: 376px; }

/* карточка «Продажи ключей» на странице Платежей */
.pay-keystats { position: absolute; left: 103px; top: 889px; width: 1699px; height: 132px; z-index: 5; padding: 22px 25px; }
.pay-keystats .hdr { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: #fff; }
.pay-keystats .hdr .ic { width: 15px; height: 15px; color: var(--accent); }
.pay-keystats .ks-grid { position: relative; margin-top: 22px; height: 52px; }
.pay-keystats .ks-grid .cell { position: absolute; top: 0; }
.pay-keystats .ks-grid .cell .k { font-size: 14px; font-weight: 500; color: var(--w50); }
.pay-keystats .ks-grid .cell .v { margin-top: 9px; font-size: 22px; font-weight: 600; color: #fff; }

/* ============================================================
   ПЛАТЕЖИ v2: рубли, выбор периода, разбивки, топы
   ============================================================ */
/* контрол-бар периода */
.pay-controls {
  position: absolute; left: 103px; top: 313px; width: 1699px; height: 52px; z-index: 6;
  display: flex; align-items: center; padding: 0 14px; gap: 10px;
}
.pay-controls .pc-presets { display: flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 15px; }
.pay-controls .pc-presets button { height: 28px; padding: 0 13px; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--w50); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.pay-controls .pc-presets button.active { background: var(--accent); color: #fff; }
.pay-controls .pc-presets button:not(.active):hover { color: #fff; }
.pay-controls .pc-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.pay-controls input[type="date"] {
  color-scheme: dark; height: 36px; padding: 0 12px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 11px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pay-controls input[type="date"]:focus { border-color: rgba(102, 135, 247, 0.5); box-shadow: 0 0 0 3px rgba(102, 135, 247, 0.12); }
.pay-controls .pc-dash { color: var(--w40); font-size: 13px; }
.pay-controls .pc-apply {
  height: 36px; padding: 0 18px; border-radius: 11px; cursor: pointer;
  background: var(--accent); border: 1px solid var(--accent-2);
  font-size: 13px; font-weight: 600; color: #fff;
  transition: filter 0.18s ease, transform 0.14s ease;
}
.pay-controls .pc-apply:hover { filter: brightness(1.08); }
.pay-controls .pc-apply:active { transform: translateY(1px); }
.pay-controls .pc-range { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--w50); white-space: nowrap; }

/* дельта-чипы сравнения с прошлым периодом */
.pay-kpi .delta { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 15px; }
.pay-kpi .delta.up { color: #7df78b; background: rgba(125, 247, 139, 0.10); }
.pay-kpi .delta.down { color: var(--danger); background: rgba(247, 102, 102, 0.10); }
.pay-kpi .delta.flat { color: var(--w50); background: rgba(255, 255, 255, 0.05); }
.pay-kpi .cell .v small { font-size: 25px; color: var(--w40); }

/* подпись диапазона в шапке графика */
.pay-chart .chart-range { position: absolute; right: 29px; top: 21px; font-size: 13px; font-weight: 600; color: var(--w50); }

/* правая карточка: по продуктам + способы оплаты */
.pay-brk { position: absolute; left: 1164px; top: 517px; width: 635px; height: 429px; z-index: 5; padding: 20px 25px; }
.pay-brk .bhdr { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #fff; }
.pay-brk .bhdr .ic { width: 15px; height: 15px; color: var(--accent); }
.pay-brk .bhdr.b2 { margin-top: 16px; }
.pay-brk .brows { margin-top: 12px; }
.pay-brk .brow { margin-bottom: 10px; }
.pay-brk .brow .bl { display: flex; align-items: baseline; gap: 10px; }
.pay-brk .brow .nm { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.pay-brk .brow .cnt { font-size: 12px; font-weight: 500; color: var(--w40); }
.pay-brk .brow .rv { margin-left: auto; font-size: 14px; font-weight: 600; color: #fff; }
.pay-brk .brow .rv small { color: var(--w40); }
.pay-brk .brow .bar { margin-top: 5px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.pay-brk .brow .bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); transition: width 0.5s ease; }
.pay-brk .mrows { margin-top: 8px; }
.pay-brk .mrow { display: flex; align-items: center; height: 30px; }
.pay-brk .mrow .ml { font-size: 13px; font-weight: 600; color: var(--w70); padding: 3px 10px; background: rgba(102, 135, 247, 0.10); border-radius: 15px; }
.pay-brk .mrow .mc { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--w40); }
.pay-brk .mrow .mv { margin-left: auto; font-size: 13px; font-weight: 600; color: #fff; }
.pay-brk .mrow .mv small { color: var(--w40); }
.pay-brk .bempty { padding: 14px 0; font-size: 13px; font-weight: 500; color: var(--w40); }

/* топ покупателей */
.pay-buyers { position: absolute; left: 103px; top: 970px; width: 549px; height: 372px; z-index: 5; padding: 20px 25px; }
.pay-buyers .bhdr { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #fff; }
.pay-buyers .bhdr .ic { width: 15px; height: 15px; color: var(--accent); }
.pay-buyers .bhdr .bnote { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--w40); }
.pay-buyers .trows { margin-top: 14px; }
.pay-buyers .trow { display: flex; align-items: center; height: 52px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.pay-buyers .rank { width: 28px; height: 28px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--w50); background: rgba(255, 255, 255, 0.05); flex: none; }
.pay-buyers .rank.r1 { color: #ffd873; background: rgba(255, 216, 115, 0.12); }
.pay-buyers .rank.r2 { color: #cfd8e3; background: rgba(207, 216, 227, 0.12); }
.pay-buyers .rank.r3 { color: #f0a36b; background: rgba(240, 163, 107, 0.12); }
.pay-buyers .tn { margin-left: 13px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-buyers .tc { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--w40); flex: none; }
.pay-buyers .tv { margin-left: auto; font-size: 15px; font-weight: 600; color: #fff; flex: none; }
.pay-buyers .tv small { color: var(--w40); }
.pay-buyers .bempty { padding: 16px 0; font-size: 13px; color: var(--w40); }

/* последние платежи */
.pay-recent { position: absolute; left: 672px; top: 970px; width: 1130px; height: 372px; z-index: 5; padding: 20px 25px; }
.pay-recent .bhdr { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #fff; }
.pay-recent .bhdr .ic { width: 15px; height: 15px; color: var(--accent); }
.pay-recent .bhdr .bnote { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--w40); }
.pay-recent .rhead, .pay-recent .rrow {
  display: grid; grid-template-columns: 150px 1fr 1fr 110px 110px; gap: 12px; align-items: center;
}
.pay-recent .rhead { margin-top: 14px; height: 22px; font-size: 12px; font-weight: 600; color: var(--w40); text-transform: uppercase; letter-spacing: 0.04em; }
.pay-recent .rhead span:last-child { text-align: right; }
.pay-recent .rrows { margin-top: 2px; }
.pay-recent .rrow { height: 33px; font-size: 13px; font-weight: 500; color: var(--w70); border-top: 1px solid rgba(255, 255, 255, 0.05); }
.pay-recent .rrow .ru { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-recent .rrow .rp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-recent .rrow .rm { color: var(--w50); }
.pay-recent .rrow .ra { text-align: right; color: #fff; font-weight: 600; }
.pay-recent .rrow .ra small { color: var(--w40); }
.pay-recent .bempty { padding: 16px 0; font-size: 13px; color: var(--w40); }

/* карточка «Подписки» + компенсация (на месте топа покупателей) */
.pay-subs { position: absolute; left: 103px; top: 970px; width: 549px; height: 372px; z-index: 5; padding: 20px 25px; }
.pay-subs .bhdr { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #fff; }
.pay-subs .bhdr .ic { width: 15px; height: 15px; color: var(--accent); }
.pay-subs .sbig { margin-top: 16px; }
.pay-subs .sbig b { display: block; font-size: 42px; font-weight: 700; line-height: 1; color: var(--accent); }
.pay-subs .sbig span { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--w50); }
.pay-subs .ssrows { margin-top: 16px; }
.pay-subs .ssr { display: flex; align-items: center; justify-content: space-between; height: 34px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.pay-subs .ssr .k { font-size: 13px; font-weight: 500; color: var(--w50); }
.pay-subs .ssr .v { font-size: 14px; font-weight: 600; color: #fff; }

/* тултип графика выручки (hover по дням) */
.pay-chart .chart-tip {
  position: absolute; z-index: 12; display: none; pointer-events: none; white-space: nowrap;
  background: #14161b; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.pay-chart .chart-tip b { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--w50); }
.pay-chart .plot svg { cursor: crosshair; }

/* инлайн-компенсация: поле дней + кнопка (замена .comp-btn со звездой) */
.pay-subs .comp-row {
  position: absolute; left: 25px; right: 25px; bottom: 25px;
  display: flex; gap: 10px;
}
.pay-subs .comp-row input {
  flex: 0 0 96px; height: 46px; padding: 0 14px; text-align: center;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 15px;
  font-size: 14px; font-weight: 600; color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pay-subs .comp-row input:focus { border-color: rgba(102, 135, 247, 0.5); box-shadow: 0 0 0 3px rgba(102, 135, 247, 0.12); }
.pay-subs .comp-row input::placeholder { color: var(--w40); }
.pay-subs .comp-row .comp-btn {
  flex: 1; height: 46px; border-radius: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); border: 1px solid var(--accent-2);
  font-size: 14px; font-weight: 600; color: #fff;
  transition: filter 0.18s ease, transform 0.14s ease;
}
.pay-subs .comp-row .comp-btn:hover { filter: brightness(1.08); }
.pay-subs .comp-row .comp-btn:active { transform: translateY(1px); }

/* убираем спиннеры у поля дней компенсации */
.pay-subs .comp-row input::-webkit-outer-spin-button,
.pay-subs .comp-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pay-subs .comp-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* подпись авто-цены в форме ключей */
.pay-form .kf-note { position: absolute; width: 585px; font-size: 13px; font-weight: 600; color: var(--accent); }

/* ============================================================
   Промо-список v2: поиск + фильтры + grid-строки (как ключи)
   ============================================================ */
.pay-promos { padding: 20px 25px; overflow: hidden; }
.pay-promos .k-search { height: 40px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.pay-promos .k-search .ic { width: 14px; height: 14px; margin: 0 10px 0 14px; color: var(--w40); flex: none; }
.pay-promos .k-search input { flex: 1; height: 100%; font-size: 14px; color: #fff; background: none; padding-right: 14px; }
.pay-promos .k-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pay-promos .k-chips button { height: 28px; padding: 0 12px; border-radius: 15px; font-size: 12px; font-weight: 600; color: var(--w50); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); cursor: pointer; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
.pay-promos .k-chips button.active { color: #fff; background: var(--accent); border-color: var(--accent-2); }
.pay-promos .k-chips button:not(.active):hover { color: #fff; }
.pay-promos .phead, .pay-promos .prow {
  display: grid; grid-template-columns: 1fr 90px 150px 90px 120px; gap: 10px; align-items: center;
}
.pay-promos .phead { height: 22px; margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--w50); }
.pay-promos .phead span:last-child { text-align: right; }
.pay-promos .plist { height: 380px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.pay-promos .plist::-webkit-scrollbar { width: 6px; }
.pay-promos .plist::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.pay-promos .prow { height: 40px; font-size: 15px; font-weight: 500; color: var(--w70); border-top: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; transition: background 0.15s ease; }
.pay-promos .prow:hover { background: rgba(255, 255, 255, 0.02); }
.pay-promos .prow .pname { font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-promos .prow .pdisc { color: var(--accent); font-weight: 600; }
.pay-promos .prow .kactive { color: #7df78b; }
.pay-promos .prow .kused { color: var(--w40); }
.pay-promos .kempty { padding: 40px 0; text-align: center; color: var(--w40); font-size: 14px; font-weight: 500; }

/* статкарточки внизу «Платежей»: ключи (уже) + промокоды (справа) */
.pay-keystats.narrow { width: 1037px; }
.pay-keystats.narrow .ks-grid .cell .k { font-size: 13px; }
.pay-keystats.narrow .ks-grid .cell .v { font-size: 20px; }
.pay-promostats { position: absolute; left: 1164px; top: 1366px; width: 635px; height: 132px; z-index: 5; padding: 22px 25px; }
.pay-promostats .hdr { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: #fff; }
.pay-promostats .hdr .ic { width: 15px; height: 15px; color: var(--accent); }
.pay-promostats .ps-grid { display: flex; margin-top: 22px; }
.pay-promostats .cell { flex: 1; }
.pay-promostats .cell .k { font-size: 13px; font-weight: 500; color: var(--w50); }
.pay-promostats .cell .v { margin-top: 9px; font-size: 20px; font-weight: 600; color: #fff; }

/* сортировка в заголовках промо-списка */
.pay-promos .phead .psort { cursor: pointer; user-select: none; transition: color 0.15s ease; white-space: nowrap; }
.pay-promos .phead .psort:hover { color: #fff; }
.pay-promos .phead .psort.on { color: var(--accent); font-weight: 600; }

/* блок продаж в детальной карточке промокода */
.promo-detail .pd-sales { margin-top: 18px; padding: 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: 12px; }
.promo-detail .pds-loading { font-size: 13px; font-weight: 500; color: var(--w40); text-align: center; padding: 6px 0; }
.promo-detail .pds-title { font-size: 14px; font-weight: 600; color: #fff; }
.promo-detail .pds-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.promo-detail .pds-cell { background: rgba(255, 255, 255, 0.03); border-radius: 10px; padding: 10px 12px; }
.promo-detail .pds-cell .k { font-size: 11px; font-weight: 500; color: var(--w50); }
.promo-detail .pds-cell .v { margin-top: 5px; font-size: 16px; font-weight: 700; color: #fff; }
.promo-detail .pds-cell .v small { color: var(--w40); }
.promo-detail .pds-cell .c { margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--accent); }
.promo-detail .pds-sub { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--w50); }
.promo-detail .pds-prod { display: flex; align-items: center; height: 30px; font-size: 13px; font-weight: 500; border-top: 1px solid rgba(255,255,255,0.05); }
.promo-detail .pds-prod .n { color: #fff; font-weight: 600; }
.promo-detail .pds-prod .c { margin-left: 8px; color: var(--w40); }
.promo-detail .pds-prod .s { margin-left: auto; color: var(--w70); font-weight: 600; }
.promo-detail .pds-prod .s small { color: var(--w40); }

/* ============================================================
   Управление пользователями v2: шапка, инфо-грид, роль, действия
   ============================================================ */
.au-panel .au-head { position: absolute; left: 24px; top: 74px; right: 24px; display: flex; align-items: center; gap: 16px; }
.au-panel .au-head img { width: 52px; height: 52px; border-radius: 15px; object-fit: cover; flex: none; }
.au-panel .au-who .nick { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; color: #fff; }
.au-panel .au-who .uid { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--w40); }
.au-panel .au-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 15px; white-space: nowrap; }
.au-panel .au-badge.role { color: var(--accent); background: rgba(102, 135, 247, 0.13); }
.au-panel .au-badge.ban { color: var(--danger); background: rgba(247, 102, 102, 0.13); }

.au-panel .au-info {
  position: absolute; left: 24px; right: 24px; top: 156px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.au-panel .aicell { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; min-width: 0; }
.au-panel .aicell .lbl { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--w50); }
.au-panel .aicell .lbl .ic { width: 14px; height: 14px; }
.au-panel .aicell .val { margin-top: 7px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-panel .aicell .val small { color: var(--w40); }
.au-panel .aicell .val .clip { display: block; overflow: hidden; text-overflow: ellipsis; }

.au-panel .au-rolerow { position: absolute; left: 24px; right: 24px; top: 402px; display: flex; align-items: center; gap: 14px; }
.au-panel .au-rolerow .rl { font-size: 14px; font-weight: 600; color: var(--w50); flex: none; }
.au-panel .kseg { flex: 1; display: flex; gap: 4px; padding: 4px; height: 44px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 15px; }
.au-panel .kseg button { flex: 1; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--w50); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.au-panel .kseg button.active { background: var(--accent); color: #fff; }
.au-panel .kseg button:not(.active):hover { color: #fff; }

.au-panel .au-acts {
  position: absolute; left: 24px; right: 24px; top: 476px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.au-panel .au-acts .gbtn { position: static; width: auto; }
.au-panel .au-acts .gbtn.danger { color: var(--danger); border-color: rgba(247, 102, 102, 0.25); }
.au-panel .au-acts .gbtn.danger .ic { color: var(--danger); }
.au-panel .au-acts .gbtn.danger:hover { background: rgba(247, 102, 102, 0.10); }

/* метка бана в строке списка */
.au-table .rowban { font-style: normal; font-size: 10px; font-weight: 700; color: var(--danger); background: rgba(247, 102, 102, 0.13); border-radius: 8px; padding: 2px 6px; margin-left: 6px; vertical-align: 1px; }

/* ============================================================
   ПУШЕЧКА: каскады, свапы, живой hero, блики
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* универсальный каскад блоков страницы (ставится из shellPage при входе на роут) */
  .shell .rise { animation: dxRise 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) both; }

  /* плавная смена контента (переключение разделов, выбор юзера) */
  .swap-in { animation: dxSwap 0.32s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
  @keyframes dxSwap {
    from { opacity: 0; transform: translateY(8px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* живой hero: волны медленно дышат */
  .hero-bg .l1 { animation: dxSlowZoom 26s ease-in-out infinite alternate; will-change: transform; }
  @keyframes dxSlowZoom { from { transform: scale(1); } to { transform: scale(1.07) translateX(-12px); } }

  /* мягкое свечение главной кнопки hero и CTA */
  .hero-inner .btn-primary, .cta .btn-primary { animation: dxGlow 3.6s ease-in-out infinite; }
  @keyframes dxGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(102, 135, 247, 0.25); }
    50% { box-shadow: 0 8px 34px rgba(102, 135, 247, 0.55); }
  }

  /* круглый лого-разделитель «Почему» левитирует */
  .why-hub { animation: dxFloat 4.5s ease-in-out infinite alternate; }
  @keyframes dxFloat { from { transform: translateY(0); } to { transform: translateY(-8px); } }

  /* MOST POPULAR тариф — тонкий пульс рамки */
  .plan-card:has(.popular) { animation: dxCardGlow 4.5s ease-in-out infinite; }
  @keyframes dxCardGlow {
    0%, 100% { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); }
    50% { border-color: rgba(102, 135, 247, 0.45); box-shadow: 0 0 28px rgba(102, 135, 247, 0.16); }
  }

  /* сообщения чата тикетов появляются ступеньками */
  .tk-chat .msg { animation: dxRise 0.3s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .tk-chat .msg:nth-child(1) { animation-delay: 0.02s; }
  .tk-chat .msg:nth-child(2) { animation-delay: 0.07s; }
  .tk-chat .msg:nth-child(3) { animation-delay: 0.12s; }
  .tk-chat .msg:nth-child(4) { animation-delay: 0.17s; }
  .tk-chat .msg:nth-child(5) { animation-delay: 0.22s; }
  .tk-chat .msg:nth-child(n+6) { animation-delay: 0.26s; }

  /* строки списков — мини-каскад ТОЛЬКО при входе (.rise) или переключении секции (.swap-in),
     чтобы не мигать при каждой букве поиска */
  .rise .krow, .swap-in .krow, .rise .prow, .swap-in .prow { animation: dxRowIn 0.28s ease both; }
  .rise .krow:nth-child(1), .swap-in .krow:nth-child(1), .rise .prow:nth-child(1), .swap-in .prow:nth-child(1) { animation-delay: 0.02s; }
  .rise .krow:nth-child(2), .swap-in .krow:nth-child(2), .rise .prow:nth-child(2), .swap-in .prow:nth-child(2) { animation-delay: 0.05s; }
  .rise .krow:nth-child(3), .swap-in .krow:nth-child(3), .rise .prow:nth-child(3), .swap-in .prow:nth-child(3) { animation-delay: 0.08s; }
  .rise .krow:nth-child(4), .swap-in .krow:nth-child(4), .rise .prow:nth-child(4), .swap-in .prow:nth-child(4) { animation-delay: 0.11s; }
  .rise .krow:nth-child(5), .swap-in .krow:nth-child(5), .rise .prow:nth-child(5), .swap-in .prow:nth-child(5) { animation-delay: 0.14s; }
  .rise .krow:nth-child(n+6), .swap-in .krow:nth-child(n+6), .rise .prow:nth-child(n+6), .swap-in .prow:nth-child(n+6) { animation-delay: 0.17s; }
  @keyframes dxRowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

  /* поля форм входа/регистрации — каскад */
  .auth-panel .a-field { animation: dxRise 0.55s 0.10s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .auth-panel .a-field + .a-field { animation-delay: 0.17s; }
  .auth-panel .a-field + .a-field + .a-field { animation-delay: 0.24s; }
  .auth-panel .a-field + .a-field + .a-field + .a-field { animation-delay: 0.31s; }
  .auth-panel .auth-row, .auth-panel .auth-submit { animation: dxRise 0.55s 0.38s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .auth-panel .auth-switch { animation: dxRise 0.55s 0.46s cubic-bezier(0.2, 0.75, 0.25, 1) both; }

  /* карточки маркета — каскад только при входе на страницу (не при поиске) */
  .mk-section.rise .mk-item { animation: dxRise 0.5s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .mk-section.rise .mk-item:nth-child(1) { animation-delay: 0.05s; }
  .mk-section.rise .mk-item:nth-child(2) { animation-delay: 0.10s; }
  .mk-section.rise .mk-item:nth-child(3) { animation-delay: 0.15s; }
  .mk-section.rise .mk-item:nth-child(4) { animation-delay: 0.20s; }
  .mk-section.rise .mk-item:nth-child(5) { animation-delay: 0.25s; }
  .mk-section.rise .mk-item:nth-child(n+6) { animation-delay: 0.30s; }
}

/* блик по primary-кнопкам при наведении */
.btn-primary, .create, .auth-submit, .act, .tk-btn-new, .comp-btn, .pm-pay {
  position: relative; overflow: hidden;
}
.btn-primary::after, .create::after, .auth-submit::after, .act::after, .tk-btn-new::after, .comp-btn::after, .pm-pay::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-20deg); transition: left 0.45s ease; pointer-events: none;
}
.btn-primary:hover::after, .create:hover::after, .auth-submit:hover::after, .act:hover::after,
.tk-btn-new:hover::after, .comp-btn:hover::after, .pm-pay:hover::after { left: 125%; }

/* лого-хаб: реакция на наведение */
.why-hub b { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.4); }
.why-hub:hover b { transform: rotate(10deg) scale(1.12); }

/* инфо-карточки юзера — подсветка */
.au-panel .aicell { transition: border-color 0.2s ease, background 0.2s ease; }
.au-panel .aicell:hover { border-color: rgba(102, 135, 247, 0.3); background: rgba(102, 135, 247, 0.04); }

/* ============================================================
   Единый навбар: локальные табы кабинета (Аккаунт/Тикеты/Маркет)
   ============================================================ */
.cab-tabs {
  position: absolute; left: 103px; top: 100px; right: 103px; z-index: 25;
  display: flex; align-items: center; gap: 8px;
}
.cab-tabs .tab {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 15px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--w50);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.cab-tabs .tab .ic { width: 13px; height: 13px; }
.cab-tabs .tab:hover { color: #fff; }
.cab-tabs .tab.active { background: var(--accent); border-color: var(--accent-2); color: #fff; }
.cab-tabs .tab.panel { color: var(--accent); background: rgba(102, 135, 247, 0.12); border-color: rgba(102, 135, 247, 0.3); }
.cab-tabs .tab.panel:hover { background: rgba(102, 135, 247, 0.2); color: var(--accent); }
.cab-tabs .tsep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; flex: none; }
.cab-tabs .tab.out { color: var(--w40); }
.cab-tabs .tab.out:hover { color: var(--danger); border-color: rgba(247, 102, 102, 0.3); background: rgba(247, 102, 102, 0.08); }

/* ============================================================
   Логи безопасности (/panel/logs)
   ============================================================ */
.logs-page { position: relative; }
.logs-kpi-row { position: absolute; left: 103px; top: 300px; width: 1072px; height: 96px; }
.lg-kpi { position: absolute; top: 0; width: 244px; height: 96px; padding: 18px 22px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 18px; }
.lg-kpi .k { font-size: 13px; font-weight: 500; color: var(--w50); }
.lg-kpi .v { margin-top: 10px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.lg-kpi.c2 .v { color: #f76666; }
.lg-kpi.c3 .v { color: #f7b955; }
.lg-kpi.c4 .v { color: #f78a3c; }
.lg-kpi::before { content: ''; position: absolute; left: 0; top: 22px; width: 3px; height: 52px; border-radius: 3px; background: var(--accent); }
.lg-kpi.c2::before { background: #f76666; }
.lg-kpi.c3::before { background: #f7b955; }
.lg-kpi.c4::before { background: #f78a3c; }

.logs-panel { position: absolute; left: 103px; top: 424px; width: 1696px; min-height: 620px; padding: 22px 26px 26px; }
.logs-panel .lg-tools { display: flex; align-items: center; gap: 14px; }
.logs-panel .lg-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 15px; }
.logs-panel .lg-search .ic { width: 15px; height: 15px; color: var(--w40); flex: none; }
.logs-panel .lg-search input { flex: 1; background: none; border: none; outline: none; font-size: 14px; font-weight: 500; color: #fff; }
.logs-panel .lg-search input::placeholder { color: var(--w40); }
.logs-panel .lg-refresh { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 15px;
  font-size: 13px; font-weight: 600; color: var(--w70); cursor: pointer; transition: color .2s, background .2s; }
.logs-panel .lg-refresh .ic { width: 14px; height: 14px; }
.logs-panel .lg-refresh:hover { color: #fff; background: rgba(255,255,255,0.06); }

.logs-panel .lg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.logs-panel .lg-chips button { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 15px;
  font-size: 13px; font-weight: 600; color: var(--w50); cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.logs-panel .lg-chips button i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
  background: rgba(255,255,255,0.06); color: var(--w40); }
.logs-panel .lg-chips button:hover { color: #fff; }
.logs-panel .lg-chips button.active { background: var(--accent); border-color: var(--accent-2); color: #fff; }
.logs-panel .lg-chips button.active i { background: rgba(255,255,255,0.22); color: #fff; }

.logs-panel .lg-head, .logs-panel .lg-row { display: grid; align-items: center;
  grid-template-columns: 16px 108px 96px 1fr 190px 1.3fr; gap: 14px; }
.logs-panel .lg-head { margin-top: 18px; padding: 0 12px 10px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--w40); }
.logs-panel .lg-list { margin-top: 4px; max-height: 560px; overflow-y: auto; }
.logs-panel .lg-list.loading { min-height: 120px; }
.logs-panel .lg-row { height: 52px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; transition: background .15s; }
.logs-panel .lg-row:hover { background: rgba(255,255,255,0.03); }
.logs-panel .lg-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.logs-panel .dot.critical { background: #f76666; box-shadow: 0 0 8px rgba(247,102,102,.6); }
.logs-panel .dot.warning { background: #f7b955; box-shadow: 0 0 8px rgba(247,185,85,.5); }
.logs-panel .dot.info { background: var(--accent); }
.logs-panel .lg-time { font-size: 12.5px; font-weight: 500; color: var(--w40); white-space: nowrap; }
.logs-panel .lg-cat { justify-self: start; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 9px; white-space: nowrap; }
.lg-cat.crash { color: #f7b955; background: rgba(247,185,85,.13); }
.lg-cat.cheat { color: #f76666; background: rgba(247,102,102,.14); }
.lg-cat.anomaly { color: #f7c04b; background: rgba(247,192,75,.13); }
.lg-cat.other { color: var(--w50); background: rgba(255,255,255,.05); }
/* KPI-акценты страницы логов под новые категории */
.lg-kpi.c2 .v { color: #f76666; } .lg-kpi.c2::before { background: #f76666; }
.lg-kpi.c3 .v { color: #f7b955; } .lg-kpi.c3::before { background: #f7b955; }
.lg-kpi.c4 .v { color: #f7c04b; } .lg-kpi.c4::before { background: #f7c04b; }
.logs-panel .lg-title { font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logs-panel .lg-who { font-size: 12.5px; font-weight: 500; color: var(--w60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logs-panel .lg-detail { font-size: 12.5px; font-weight: 500; color: var(--w40); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logs-panel .lg-empty { padding: 46px 0; text-align: center; font-size: 14px; font-weight: 500; color: var(--w40); }

/* модалка детали лог-события */
.log-detail .lgm-top { display: flex; align-items: center; gap: 14px; }
.log-detail .lgm-top .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.log-detail .lgm-title { font-size: 19px; font-weight: 700; color: #fff; }
.log-detail .lgm-sub { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--w50); }
.log-detail .lgm-grid { margin: 20px 0; display: flex; flex-direction: column; gap: 2px; }
.log-detail .lgm-row { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.log-detail .lgm-row .k { font-size: 13px; font-weight: 500; color: var(--w40); }
.log-detail .lgm-row .v { font-size: 13px; font-weight: 500; color: #fff; word-break: break-word; }

/* ============================================================
   Отчёты клиента в тикете (краши/детекты) + модалки
   ============================================================ */
.tk-reports { position: absolute; left: 103px; width: 1714px; min-height: 260px; z-index: 5; padding: 20px 26px 24px; }
.tk-reports .rep-head { display: flex; align-items: center; gap: 10px; }
.tk-reports .rep-head .ic { width: 16px; height: 16px; color: var(--accent); }
.tk-reports .rep-head b { font-size: 17px; font-weight: 600; color: #fff; }
.tk-reports .rep-count { font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; }
.tk-reports .rep-hint { font-size: 13px; font-weight: 500; color: var(--w40); }
.tk-reports .rep-list { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tk-reports .rep-card { padding: 14px 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--line);
  border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.tk-reports .rep-card:hover { border-color: rgba(102,135,247,.35); background: rgba(102,135,247,.05); transform: translateY(-2px); }
.tk-reports .rep-card.done { opacity: .6; }
.rep-kind { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 9px; }
.rep-kind.crash { color: #f7b955; background: rgba(247,185,85,.13); }
.rep-kind.cheat { color: #f76666; background: rgba(247,102,102,.14); }
/* [2026-08-29] version badge (1.21.11 = Winston/rich, 1.16.5 = Winston) — client-reported, so absent on
   older reports sent before the version field existed. */
.rep-ver { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 9px; color: #6687f7; background: rgba(102,135,247,.13); }
.tk-reports .rep-sum { margin-top: 10px; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-reports .rep-meta { margin-top: 9px; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--w40); }
.tk-reports .rep-meta .ic { width: 12px; height: 12px; }
.tk-reports .rep-meta .ok { color: #7df78b; font-weight: 700; }
.tk-reports .rep-empty { grid-column: 1 / -1; padding: 30px 0; text-align: center; font-size: 14px; font-weight: 500; color: var(--w40); }

/* модалка отчёта */
.report-detail { max-width: 640px; }
.report-detail .rd-top { display: flex; align-items: center; gap: 12px; }
.report-detail .rd-title { font-size: 18px; font-weight: 700; color: #fff; }
.report-detail .rd-meta { margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--w40); }
.report-detail .rd-meta .ok { color: #7df78b; }
.report-detail .rd-detail { margin: 16px 0; padding: 14px 16px; max-height: 200px; overflow: auto;
  background: #0c1020; border: 1px solid var(--line); border-radius: 12px;
  font-family: Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: #c7d2ee; white-space: pre-wrap; word-break: break-word; }
.report-detail .rd-shot { margin: 16px 0; }
.report-detail .rd-shot .lbl, .lgm-shot .lbl { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--w50); }
.report-detail .rd-shot img, .lgm-shot img { width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; }
.report-detail .rd-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px;
  background: rgba(247,102,102,.08); border: 1px solid rgba(247,102,102,.2); font-size: 13.5px; font-weight: 500; color: #f0c0bd; line-height: 1.5; }
.report-detail .rd-note .ic { width: 14px; height: 14px; color: #f76666; margin-top: 2px; flex: none; }
.report-detail .rd-prevfix { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: rgba(125,247,139,.07);
  border: 1px solid rgba(125,247,139,.18); font-size: 13px; color: #cfeecf; line-height: 1.5; }
.report-detail .rd-prevfix b { color: #7df78b; }
.report-detail .rd-fix { margin-top: 16px; }
.report-detail .rd-fix label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--w70); }
.report-detail .rd-fix textarea { width: 100%; min-height: 92px; resize: vertical; padding: 12px 14px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px;
  font-size: 13.5px; font-weight: 500; color: #fff; line-height: 1.5; outline: none; font-family: inherit; }
.report-detail .rd-fix textarea:focus { border-color: var(--accent); }
.report-detail .rd-actions { margin-top: 14px; display: flex; gap: 10px; }
.lgm-shot { margin-top: 18px; }

/* зумируемый скриншот + лайтбокс */
.report-detail .rd-shot img.shot-zoomable, .lgm-shot img.shot-zoomable { cursor: zoom-in; transition: filter 0.15s ease; }
.report-detail .rd-shot img.shot-zoomable:hover, .lgm-shot img.shot-zoomable:hover { filter: brightness(1.08); }
.dx-lightbox {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px); cursor: zoom-out;
  animation: dxFadeIn 0.18s ease both;
}
.dx-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 20px 80px rgba(0,0,0,0.6); }
.dx-lightbox .lb-close { position: fixed; top: 22px; right: 30px; font-size: 40px; line-height: 1; color: #fff; opacity: 0.7; cursor: pointer; }
.dx-lightbox .lb-close:hover { opacity: 1; }

/* ============================================================
   Тикеты v2: пустые состояния + заблокированный композер
   ============================================================ */
.tk-table .tk-empty { position: absolute; left: 0; right: 0; top: 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tk-table .tk-empty .ic { width: 30px; height: 30px; color: var(--w30); margin-bottom: 4px; }
.tk-table .tk-empty .te-t { font-size: 16px; font-weight: 600; color: var(--w60); }
.tk-table .tk-empty .te-s { font-size: 13px; font-weight: 500; color: var(--w40); max-width: 340px; }
.tk-chat .msgs .tk-chat-empty { height: 100%; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 0 30px; }
.tk-chat .msgs .tk-chat-empty .ic { width: 26px; height: 26px; color: var(--w30); }
.tk-chat .msgs .tk-chat-empty span { font-size: 14px; font-weight: 500; color: var(--w40); max-width: 260px; }
/* композер без выбранного/закрытый тикет — явно неактивен */
.tk-chat .composer .line input:disabled { color: var(--w40); cursor: not-allowed; }
.tk-chat .composer .line input:disabled::placeholder { color: var(--w40); }
.tk-chat .composer .send:disabled { opacity: 0.4; cursor: not-allowed; }
.tk-chat .composer .send:disabled:hover::after { left: -70%; }

/* Очистка логов: кнопка + модалка выбора */
.logs-panel .lg-clear { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px;
  background: rgba(247, 102, 102, 0.08); border: 1px solid rgba(247, 102, 102, 0.25); border-radius: 15px;
  font-size: 13px; font-weight: 600; color: var(--danger); cursor: pointer; transition: background 0.2s ease; }
.logs-panel .lg-clear .ic { width: 14px; height: 14px; }
.logs-panel .lg-clear:hover { background: rgba(247, 102, 102, 0.16); }
.logs-clear h3 { font-size: 19px; font-weight: 700; color: #fff; }
.logs-clear .m-sub { margin: 8px 0 16px; font-size: 13px; font-weight: 500; color: var(--w50); line-height: 1.5; }
.logs-clear .lc-opt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 0.2s ease; }
.logs-clear .lc-opt:hover { border-color: rgba(255, 255, 255, 0.15); }
.logs-clear .lc-opt input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; cursor: pointer; }
.logs-clear .lc-opt span { display: flex; flex-direction: column; gap: 3px; }
.logs-clear .lc-opt b { font-size: 14px; font-weight: 600; color: #fff; }
.logs-clear .lc-opt i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--w40); }
.logs-clear .m-actions { margin-top: 16px; }
.logs-clear .lc-note { margin-top: 14px; font-size: 12px; font-weight: 500; color: var(--w40); }

/* кнопка «Удалить событие» в лог-модалке (.pd-del стилизован только в .promo-detail) */
.log-detail .m-actions { margin-top: 22px; display: flex; gap: 12px; }
.log-detail .pd-del { height: 43px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 15px; font-size: 14px; font-weight: 600; color: var(--danger);
  background: rgba(247, 102, 102, 0.12); border: 1px solid rgba(247, 102, 102, 0.22);
  cursor: pointer; transition: background 0.18s ease; }
.log-detail .pd-del:hover { background: rgba(247, 102, 102, 0.2); }
.log-detail .pd-del .ic { width: 13px; height: 13px; }
.log-detail .m-actions .btn-ghost { height: 43px; padding: 0 22px; }

/* ============================================================
   Тикеты v3: готовый ответ (дропдаун) + статус-дропдаун + темы
   ============================================================ */
.tk-chat .composer .quick { cursor: pointer; position: relative; }
.tk-chat .composer .quick > span { flex: 1; color: var(--w60); }
.tk-chat .composer .quick:hover { border-color: rgba(255, 255, 255, 0.14); }
.quick-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 60;
  background: #14161b; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55); animation: dxModalIn 0.16s ease both; }
.quick-menu .qm-opt { padding: 11px 15px; font-size: 13px; font-weight: 500; color: var(--w70);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.quick-menu .qm-opt:first-child { border-top: none; }
.quick-menu .qm-opt:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }

.tk-chat .topbar .status-dd { cursor: pointer; position: relative; }
.status-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; z-index: 60;
  background: #14161b; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55); animation: dxModalIn 0.16s ease both; }
.status-menu .sm-opt { padding: 10px 15px; font-size: 13px; font-weight: 500; color: var(--w70);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.status-menu .sm-opt:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.status-menu .sm-opt.active { color: var(--accent); }

/* бейдж темы в строке тикета */
.tk-table .row .tk-topic { font-style: normal; font-size: 11px; font-weight: 600; color: var(--accent);
  background: rgba(102, 135, 247, 0.13); border-radius: 8px; padding: 2px 8px; margin-right: 9px; vertical-align: 1px; }

/* select категории в модалке создания */
.dx-modal select.input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; }
.dx-modal select.input option { background: #14161b; color: #fff; }

/* == Авто-залив (админ-вкладка, редизайн 2026-08-23) == */
.ap-panel { position: absolute; left: 103px; top: 424px; width: 1696px; display: flex; flex-direction: column; gap: 22px; }
.ap-card { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 24px; }
.ap-card-h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.ap-card-h svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.ap-flabel { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--w50); margin-bottom: 11px; }
.ap-flabel svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.ap-drop { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 40px 20px; cursor: pointer; text-align: center;
  border: 1.6px dashed rgba(255,255,255,0.15); border-radius: 16px; background: rgba(255,255,255,0.02);
  transition: border-color .18s ease, background-color .18s ease; }
.ap-drop:hover, .ap-drop.over { border-color: var(--accent); background: rgba(166,198,245,0.05); }
.ap-drop-ic { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(166,198,245,0.12); color: var(--accent); margin-bottom: 4px; }
.ap-drop-ic svg { width: 28px; height: 28px; }
.ap-drop-t { font-size: 14px; font-weight: 600; color: #fff; }
.ap-drop-s { font-size: 12.5px; color: var(--w50); }
.ap-send { width: 100%; height: 52px; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: 13px; background: var(--accent); color: #0a0f1e; font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background-color .18s ease, opacity .18s ease; }
.ap-send svg { width: 17px; height: 17px; }
.ap-send:hover:not(:disabled) { background: var(--accent-2); }
.ap-send:disabled { opacity: .45; cursor: default; }
.ap-hint { font-size: 12.5px; color: #e6b25a; margin-top: 11px; min-height: 14px; }
.ap-thead, .ap-row { display: grid; grid-template-columns: 64px 1fr 160px 190px 190px 300px; align-items: center; gap: 14px; }
.ap-thead { padding: 0 14px 13px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--w50); }
.ap-list { display: flex; flex-direction: column; }
.ap-row { padding: 14px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
.ap-row:last-child { border-bottom: none; }
.ap-id { font-weight: 700; color: #fff; }
.ap-name { color: #fff; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap-ts { color: var(--w50); font-size: 12.5px; }
.ap-badge { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 13px; border-radius: 8px;
  font-size: 12px; font-weight: 600; white-space: nowrap; }
.ap-badge.q { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.72); }
.ap-badge.p { background: rgba(166,198,245,0.16); color: var(--accent); }
.ap-badge.d { background: rgba(88,214,141,0.14); color: #6ee7a0; }
.ap-badge.pub { background: rgba(88,214,141,0.22); color: #7ef0ad; }
.ap-badge.f { background: rgba(255,107,107,0.16); color: #ff8a8a; }
.ap-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-a { height: 28px; padding: 0 11px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: #fff; font-family: inherit; }
.ap-a:hover { background: rgba(255,255,255,0.1); }
.ap-a.pub { background: var(--accent); color: #0a0f1e; border-color: transparent; }
.ap-a.err { background: rgba(255,107,107,0.14); border-color: rgba(255,107,107,0.32); color: #ff8a8a; }
.ap-a.del { color: #ff8a8a; padding: 0 9px; }
.ap-empty { padding: 30px; text-align: center; color: var(--w50); font-size: 13px; }
.ap-logmodal { width: min(680px, 92vw); }
.ap-logtop { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.ap-logpre { max-height: 52vh; overflow: auto; margin: 0; padding: 14px; border-radius: 12px; white-space: pre-wrap; word-break: break-word;
  background: #05080f; border: 1px solid var(--line); color: rgba(255,255,255,0.82);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; line-height: 1.5; }