/* =========================================================
   LUAX FULL UI v3.0 — Premium Glassmorphism + Unified Design
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --lx-bg: #05040b;
  --lx-bg2: #071018;
  --lx-card: rgba(14, 20, 30, 0.6);
  --lx-card-border: rgba(255, 255, 255, 0.08);
  --lx-card-hover: rgba(20, 28, 40, 0.8);
  --lx-line: rgba(255, 255, 255, 0.11);
  --lx-line2: rgba(56, 189, 248, 0.26);
  --lx-text: #f4f8fb;
  --lx-muted: #94a3b8;
  --lx-muted2: #c2ced9;
  --lx-accent: #38bdf8;
  --lx-accent-glow: rgba(56, 189, 248, 0.4);
  --lx-accent2: #818cf8;
  --lx-green: #55dca3;
  --lx-green-glow: rgba(85, 220, 163, 0.4);
  --lx-red: #fb7185;
  --lx-radius: 26px;
  --lx-nav-h: 86px;
  --wrap: 1120px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-x: hidden; scrollbar-gutter: stable; }
body.cabinet { scrollbar-gutter: stable; }

body {
  margin: 0; min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--lx-text);
  background-color: var(--lx-bg);
  background-image: 
    radial-gradient(ellipse at 10% 60%, rgba(56, 189, 248, 0.18), transparent 45%),
    radial-gradient(ellipse at 90% 20%, rgba(129, 140, 248, 0.13), transparent 45%),
    radial-gradient(ellipse at 50% -10%, rgba(56, 189, 248, 0.25), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgba(24, 231, 255, 0.07), transparent 40%);
  background-attachment: fixed;
  overflow-x: hidden;
}

body.landing, body.cabinet {
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   ВОССТАНОВЛЕННАЯ БАЗА (Таблицы, Формы, Сетки)
   ========================================================= */
.wrap { width: min(94vw, var(--wrap)); margin: 0 auto; padding: 30px 0 120px; }
h1, h2, h3 { color: #fff; margin-top: 0; }
a { color: var(--lx-accent); text-decoration: none; transition: 0.2s; }
a:hover { color: #fff; }
p { line-height: 1.5; color: var(--lx-muted2); }
.mini { font-size: 13px; color: var(--lx-muted); line-height: 1.4; }
.muted { color: var(--lx-muted); }

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

/* Core site chrome */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  height: 58px; min-height: 58px; width: 100%; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 max(4vw, calc((100% - 1120px) / 2));
  background: rgba(8, 7, 18, 0.65);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}
.brand, .topbar nav, .topbar nav a {
  display: inline-flex; align-items: center;
}
.brand {
  gap: 10px; color: #fff; font-family: Syne, Manrope, sans-serif;
  font-weight: 800; font-size: 16px; letter-spacing: -0.3px;
  text-decoration: none; transition: opacity 0.25s ease;
}
.brand:hover { opacity: 0.9; }
.brandIcon, .brandIcon img {
  width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
}
.brandIcon { overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.topbar nav { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topbar nav a {
  min-height: 36px; padding: 0 14px; border-radius: 12px;
  color: var(--lx-muted2); font-weight: 600; font-size: 13px; text-decoration: none;
  transition: all 0.22s ease;
}
.topbar nav a:hover { color: #fff; background: rgba(255,255,255,0.07); }
.topbar nav .navBtn {
  min-height: 36px; padding: 0 18px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff; font-weight: 600; font-size: 13px;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.topbar nav .navBtn:hover {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  color: #080712;
}
@keyframes flash-toast {
  0% {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  88% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -10px);
    visibility: hidden;
  }
}
.flash {
  position: fixed;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  width: min(90vw, 420px);
  margin: 0;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid rgba(85,220,163,0.3);
  background: rgba(85,220,163,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #d6ffe9;
  font-weight: 600;
  box-shadow: 0 16px 36px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  text-align: center;
  pointer-events: none;
  animation: flash-toast 4.5s ease-in-out forwards;
}
.flash.err {
  border-color: rgba(251,113,133,0.32);
  background: rgba(251,113,133,0.13); color: #ffd6de;
}
.footer {
  width: min(94vw, var(--wrap)); margin: 0 auto; padding: 34px 0 42px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  color: var(--lx-muted); font-size: 13px; text-align: center;
}
.footer b { color: #fff; }
body.cabinet > .topbar, body.cabinet > .footer,
body.landing > .topbar, body.landing > .footer,
body.admin > .topbar, body.admin > .footer { display: none; }

/* Restored layout helpers */
.authWrap, .cabinetWrap, .adminWrap, .page {
  width: min(94vw, var(--wrap)); margin: 0 auto; padding: 34px 0 130px;
}
.cabinetWrap { padding-top: 0px; max-width: min(94vw, 680px); }
.authWrap {
  min-height: calc(100vh - 160px);
  width: min(94vw, 520px);
  margin: 0 auto;
  padding: 80px 0 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.liftCard { box-shadow: 0 24px 64px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08); }

body.auth {
  background-image:
    radial-gradient(ellipse 60% 45% at 50% -8%, rgba(56, 189, 248, 0.16), transparent 55%),
    radial-gradient(ellipse 42% 36% at 92% 82%, rgba(129, 140, 248, 0.12), transparent 50%),
    radial-gradient(ellipse 36% 30% at 4% 20%, rgba(94, 234, 212, 0.08), transparent 50%);
}
.authWrap { position: relative; animation: lxFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.authBox {
  position: relative;
  overflow: hidden;
  background: var(--lx-card);
  border: 1px solid var(--lx-card-border);
  border-radius: 28px;
  padding: 32px 30px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.authBox::before {
  content: '';
  position: absolute;
  top: -90px; right: -90px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}
.authBox > * { position: relative; z-index: 1; }
.authBox h1, .adminHero h1, .cabinetHero h1 {
  font-family: Syne, Manrope, sans-serif;
  font-size: clamp(28px, 4vw, 36px); letter-spacing: -0.03em; margin: 8px 0 10px;
}
.authBox > .muted { margin: 0 0 20px; max-width: 54ch; line-height: 1.55; }
.authInfo { align-self: stretch; }
.authInfo.supportPanel {
  background: rgba(18, 14, 32, 0.45);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  padding: 22px 24px;
  backdrop-filter: blur(16px);
}
.authInfo h2 { margin: 4px 0 6px; font-size: 20px; }
.authInfo p.muted { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.form, .field { display: grid; gap: 8px; }
.form { margin-top: 18px; }
.field label, .checkLine {
  color: var(--lx-muted2); font-size: 13px; font-weight: 700;
}
.lxPassWrap {
  position: relative;
  display: flex;
  width: 100%;
}
.lxPassWrap input {
  width: 100%;
  padding-right: 44px;
}
.lxPassToggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--lx-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.lxPassToggle:hover {
  color: var(--lx-text);
}
.lxPassToggle svg {
  width: 18px;
  height: 18px;
}
.passMeter {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.passMeterBar {
  height: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}
.passMeterFill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease;
}
.passMeterLabel {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--lx-muted2);
}
.btn.full, button.full, a.full { width: 100%; }
.btn.green { background: #10b981; color: #fff; border-radius: 14px; box-shadow: none; }
.btn.green:hover { background: #059669; }
.btn.danger { background: rgba(251,113,133,0.16); color: #ffd6de; border: 1px solid rgba(251,113,133,0.35); border-radius: 14px; }
.btn.danger:hover { background: rgba(251,113,133,0.24); }
.btn.telegram { background: #229ed9; color: #fff; border-radius: 14px; box-shadow: none; }
.btn.telegram:hover { background: #1d86b8; }
.grad { color: #7dd3fc; font-weight: 800; }
.gradAlt { color: #7dd3fc; font-weight: 700; transition: color 0.2s ease; }
.gradAlt:hover { color: #7dd3fc; text-decoration: underline; }
.switchAuth, .tgDivider {
  margin-top: 18px; color: var(--lx-muted); font-size: 14px; text-align: center;
}
.authLinks {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--lx-muted);
  font-size: 14px;
  line-height: 1.5;
}
.authLinks .authSep {
  color: var(--lx-muted);
  opacity: 0.4;
  margin: 0 4px;
}
.tgDivider { display: flex; align-items: center; gap: 12px; }
.tgDivider::before, .tgDivider::after { content: ""; height: 1px; flex: 1; background: var(--lx-line); }
.miniAppAuto, .tgSuccessPanel {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  border-radius: 18px; background: rgba(42,171,238,0.1); border: 1px solid rgba(42,171,238,0.22);
}
.emailCodeLogin, .tgAuthBox, .tgLinkChoice, .tgOnlyHint {
  margin-top: 20px;
}
.emailCodeLogin, .tgAuthBox, .tgOnlyHint {
  padding: 20px;
  border-radius: 22px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
}
.emailCodeLogin .tgDivider,
.tgAuthBox .tgDivider {
  margin: 0 0 16px 0;
}
.tgWidgetWrap {
  display: grid;
  justify-items: center;
  min-width: 0;
  margin: 8px 0;
  min-height: 40px;
}
.codeInput {
  text-align: center;
  letter-spacing: 0.2em;
  font-weight: 800;
  font-family: monospace, inherit;
  font-size: 18px !important;
}
.miniAppAuto span, .tgOnlyHint p { color: var(--lx-muted); font-size: 13px; }
.miniAppOrb {
  width: 40px; height: 40px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(56, 189, 248,0.18); color: #7dd3fc; flex: 0 0 auto; font-weight: 900;
}
.miniAppOrb.ok { background: rgba(85,220,163,0.16); color: var(--lx-green); }
.choiceGrid, .compactChoiceGrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px;
}
.choiceCard, .toolCard {
  padding: 18px; border-radius: 20px; background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
}
.primaryChoice { background: rgba(56, 189, 248,0.12); border-color: rgba(56, 189, 248,0.22); }
.choiceCard b, .toolCard h3 { color: #fff; }
.choiceCard summary { cursor: pointer; color: #fff; font-weight: 800; }
.codeActions, .codeRow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  align-items: center;
}
.codeActions .btn, .codeActions input,
.codeRow .btn, .codeRow input {
  height: 48px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.codeActions .btn, .codeRow .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.codeActions input, .codeRow input {
  line-height: 46px !important;
}

.grid2, .grid3, .grid4, .adminActionGrid, .accountTools {
  display: grid; gap: 14px;
}
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
  min-width: 0; padding: 18px; border-radius: 18px;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.05);
}
.stat small { display: block; color: var(--lx-muted); font-weight: 700; font-size: 12px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat b { display: block; color: #fff; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.quickGrantForm, .grantInline {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto;
  gap: 12px; align-items: end;
}
.mailTestForm { grid-template-columns: minmax(220px, 1fr) auto; }
.adminActionGrid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 18px; }
.accountTools { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; }
.tgStatus {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px;
  border-radius: 999px; color: #7dd3fc; background: rgba(56, 189, 248,0.16);
  border: 1px solid rgba(56, 189, 248,0.28); font-weight: 800; font-size: 12px;
}
.statusChip.wait { background: rgba(245,158,11,0.14); color: #facc15; border: 1px solid rgba(245,158,11,0.28); }
.paymentTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.payAmount { color: #fff; font-weight: 900; font-size: 34px; white-space: nowrap; }
.paymentStatus {
  display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px;
  background: rgba(56, 189, 248,0.12); border: 1px solid rgba(56, 189, 248,0.22); color: #dbeafe;
}
.spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.24);
  border-top-color: #fff; animation: lxSpin 0.8s linear infinite; flex: 0 0 auto;
}
@keyframes lxSpin { to { transform: rotate(360deg); } }

/* Fallback dashboard before the JS shell takes over */
.luaxAppHomeV97 {
  display: grid; gap: 18px; margin-bottom: 24px;
}
.luaxAppHeroV97, .luaxInstallCardV97, .luaxNewsV97 {
  background: var(--lx-card); border: 1px solid var(--lx-card-border);
  border-radius: 28px; padding: 22px; backdrop-filter: blur(14px);
}
.luaxAppHeroV97 { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.luaxAppBrandV97 { display: flex; align-items: center; gap: 14px; }
.luaxAppLogoV97 {
  width: 48px; height: 48px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--lx-accent), var(--lx-accent2)); font-weight: 900;
}
.luaxAppBrandV97 b, .luaxNewsItemV97 b { display: block; color: #fff; }
.luaxAppBrandV97 span, .luaxNewsItemV97 span, .luaxNewsItemV97 time { color: var(--lx-muted); font-size: 13px; }
.luaxSupportPillV97, .luaxAppMiniBtnV97 {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px; border-radius: 14px;
  background: rgba(255,255,255,0.08); color: #fff; font-weight: 800;
}
.luaxAppStatsV97 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.luaxAppStatV97 {
  padding: 20px; border-radius: 24px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.luaxAppStatIconV97 { color: #7dd3fc; font-size: 24px; }
.luaxAppStatMainV97 { color: #fff; font-size: 30px; font-weight: 900; margin-top: 8px; }
.luaxAppStatSubV97 { color: var(--lx-muted); margin: 4px 0 14px; }
.luaxPlatformTabsV97 { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.luaxPlatformTabsV97 a {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,0.06); color: #fff; font-weight: 900;
}
.luaxPlatformTabsV97 a.active { background: rgba(56, 189, 248,0.25); color: #dbeafe; }
.luaxNewsHeadV97 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.luaxNewsHeadV97 h2 { margin: 0; font-size: 22px; }
.luaxNewsListV97 { display: grid; gap: 10px; }
.luaxNewsItemV97 {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px; border-radius: 16px; background: rgba(0,0,0,0.18);
}

/* Модернизированные карточки (админка, старые страницы) */
.panel, .card {
  background: var(--lx-card);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--lx-card-border);
  border-radius: var(--lx-radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}
.sectionHead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.sectionHead h2 { margin: 8px 0 4px; font-size: 22px; }

/* Бейджи и статусы */
.tag { background: rgba(56, 189, 248,0.15); color: #7dd3fc; padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.statusChip { padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.statusChip.on { background: rgba(85,220,163,0.15); color: var(--lx-green); border: 1px solid rgba(85,220,163,0.3); }
.statusChip.off { background: rgba(251,113,133,0.15); color: var(--lx-red); border: 1px solid rgba(251,113,133,0.3); }

/* Таблицы (Админка и устройства) */
.tableWrap { overflow-x: auto; background: rgba(0,0,0,0.2); border-radius: 20px; border: 1px solid var(--lx-card-border); }
.table { width: 100%; border-collapse: collapse; text-align: left; }
.table th { background: rgba(255,255,255,0.03); color: var(--lx-muted2); font-weight: 600; font-size: 13px; padding: 16px; border-bottom: 1px solid var(--lx-line); text-transform: uppercase; letter-spacing: 0.5px; }
.table td { padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--lx-text); font-size: 14px; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255,255,255,0.02); }

/* Базовые кнопки и инпуты */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #ffffff; color: #080712; border: none; padding: 14px 22px;
  border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: inherit; text-decoration: none;
}
.btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 16px rgba(0,0,0,0.15); color: #080712; }
.btn:active { transform: scale(0.97); }
.btn.secondary { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: #fff; box-shadow: none; border-radius: 12px; }
.btn.secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); color: #fff; }

input, select, textarea {
  width: 100%; background: rgba(0,0,0,0.35); border: 1px solid var(--lx-card-border);
  color: #fff; padding: 14px 18px; border-radius: 16px; font-size: 16px;
  outline: none; transition: 0.2s; font-family: inherit;
}
input:focus, select:focus { border-color: var(--lx-accent); background: rgba(0,0,0,0.55); box-shadow: 0 0 0 3px rgba(56, 189, 248,0.25); }
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #130d24 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
  border-color: rgba(56, 189, 248, 0.4) !important;
}
.inlineForm { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.inlineForm input { flex: 1; }
.copyBox { display: flex; gap: 10px; margin-top: 12px; }
.sectionHead .actions, .paymentActions {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 10px; margin-top: 0;
}
.sectionHead .actions .btn, .paymentActions .btn { white-space: nowrap; }
.appDownloadGrid, .appAddGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.appAddGrid .btn, .appDownloadGrid .btn { min-height: 54px; text-align: center; line-height: 1.2; }

/* =========================================================
   LANDING PAGE v4 — Modern cinematic hero
   ========================================================= */

body.landing {
  font-family: Manrope, Inter, sans-serif;
  background-color: #04060c;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(56, 189, 248, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 40%, rgba(94, 234, 212, 0.08), transparent 50%),
    radial-gradient(ellipse 45% 35% at 100% 70%, rgba(129, 140, 248, 0.1), transparent 50%),
    linear-gradient(180deg, #04060c 0%, #070912 45%, #05040b 100%);
}

.luaxLandingV107 {
  width: min(94vw, var(--wrap));
  margin: 0 auto;
  padding: 0 0 118px;
  position: relative;
}

.lxLHeader {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(4, 6, 12, 0.55);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  padding: 0 max(4vw, calc((100% - 1120px) / 2));
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lxBrand, .lxLPill {
  display: inline-flex; align-items: center; color: #fff; text-decoration: none;
}
.lxBrand {
  gap: 10px; font-family: Syne, Manrope, sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: -0.4px;
  transition: opacity 0.25s ease;
}
.lxBrand:hover { opacity: 0.88; }
.lxBrand img {
  width: 34px; height: 34px; border-radius: 11px;
}
.lxBrandVpn,
.brand .lxBrandVpn {
  margin-left: 0.18em;
  background: linear-gradient(120deg, #5eead4 0%, #38bdf8 45%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lxLHeaderActions { display: flex; align-items: center; gap: 8px; }
.lxLPill {
  min-height: 38px; padding: 0 16px; border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff; font-weight: 700; font-size: 13px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lxLPill:hover {
  background: #fff;
  border-color: #fff;
  color: #04060c;
}

/* —— Hero —— */
.lxHero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 88px 8px 96px;
  text-align: center;
  overflow: clip;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.lxHeroStage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lxHeroOrb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.lxHeroOrb--a {
  width: min(70vw, 560px); height: min(70vw, 560px);
  left: 50%; top: 18%;
  transform: translate(-50%, -20%);
  background: radial-gradient(circle, rgba(56,189,248,0.32) 0%, rgba(94,234,212,0.12) 40%, transparent 70%);
  animation: lxOrbRoamA 34s ease-in-out infinite;
}
.lxHeroOrb--b {
  width: min(50vw, 380px); height: min(50vw, 380px);
  right: 8%; bottom: 12%;
  background: radial-gradient(circle, rgba(129,140,248,0.22) 0%, transparent 70%);
  animation: lxOrbRoamB 27s ease-in-out infinite;
}
.lxHeroOrb--c {
  width: min(38vw, 280px); height: min(38vw, 280px);
  left: 10%; top: 58%;
  background: radial-gradient(circle, rgba(94,234,212,0.2) 0%, transparent 70%);
  animation: lxOrbRoamC 41s ease-in-out infinite;
}
.lxHeroGrid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 65% 55% at 50% 42%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 42%, #000 20%, transparent 75%);
  opacity: 0.6;
}

.lxHeroBadge {
  position: relative;
  width: 64px; height: 64px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  animation: lxFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.lxHeroBadge::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28), transparent 70%);
  filter: blur(10px);
  z-index: -1;
}
.lxHeroBadge svg { width: 34px; height: 34px; }
.lxHeroCheck {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: lxDrawCheck 1s ease 0.5s forwards;
}

.lxHeroCopy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 720px;
  padding: 0 12px;
}
.lxHeroBrand {
  margin: 0;
  font-family: Syne, Manrope, sans-serif;
  font-size: clamp(64px, 16vw, 132px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: #fff;
  text-shadow: 0 8px 40px rgba(0,0,0,0.45);
  animation: lxFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.lxHeroBrand span {
  display: inline-block;
  margin-left: 0.12em;
  background: linear-gradient(120deg, #5eead4 0%, #38bdf8 45%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lxHeroTitle {
  margin: 0;
  max-width: 18ch;
  font-family: Syne, Manrope, sans-serif;
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: rgba(248, 250, 252, 0.92);
  animation: lxFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}
.lxHeroLead {
  margin: 0;
  max-width: 36ch;
  color: rgba(186, 198, 214, 0.9);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.55;
  font-weight: 500;
  animation: lxFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
}
.lxDeviceCue {
  display: none;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  width: 100%;
  margin-top: 2px;
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  text-decoration: none;
  text-align: left;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(125, 211, 252, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  animation: lxFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
.lxDeviceCue.is-visible { display: inline-flex; }
.lxDeviceCue:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 234, 212, 0.45);
  background: rgba(56, 189, 248, 0.08);
  color: inherit;
}
.lxDeviceCueIc {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(94, 234, 212, 0.16), rgba(56, 189, 248, 0.12));
  border: 1px solid rgba(125, 211, 252, 0.28);
  color: #7dd3fc;
}
.lxDeviceCueIc svg { width: 22px; height: 22px; }
.lxDeviceCueTx {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}
.lxDeviceCueTx b {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f1f5f9;
}
.lxDeviceCueTx small {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.95);
}
.lxDeviceCueGo {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: #7dd3fc;
  background: rgba(125, 211, 252, 0.1);
  line-height: 0;
}
.lxDeviceCueGo svg {
  width: 14px;
  height: 14px;
  display: block;
}

.lxHeroCta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  margin-top: 8px;
  animation: lxFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

@keyframes lxFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lxOrbRoamA {
  0%   { transform: translate(-50%, -20%) scale(1); }
  20%  { transform: translate(-72%, -8%) scale(1.1); }
  40%  { transform: translate(-60%, -38%) scale(0.92); }
  60%  { transform: translate(-30%, -30%) scale(1.05); }
  80%  { transform: translate(-40%, -6%) scale(0.96); }
  100% { transform: translate(-50%, -20%) scale(1); }
}
@keyframes lxOrbRoamB {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-90px, -70px) scale(1.15); }
  50%  { transform: translate(30px, -120px) scale(0.9); }
  75%  { transform: translate(70px, -20px) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lxOrbRoamC {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(60px, -60px) scale(1.12); }
  55%  { transform: translate(110px, 30px) scale(0.9); }
  80%  { transform: translate(20px, 60px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lxDrawCheck {
  to { stroke-dashoffset: 0; }
}

.lxGradientBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #f8fafc;
  padding: 15px 28px; border-radius: 12px;
  font-weight: 800; font-size: 15px; color: #04060c;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  letter-spacing: -0.2px;
  text-decoration: none;
}
.lxGradientBtn:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 16px 36px rgba(56, 189, 248, 0.18);
  color: #04060c;
}
.lxGradientBtn:active { transform: scale(0.98); }

.lxGhostBtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 20px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(248,250,252,0.88); font-weight: 700; font-size: 14px;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.lxGhostBtn:hover {
  border-color: rgba(94, 234, 212, 0.45);
  background: rgba(94, 234, 212, 0.06);
  color: #fff;
}

/* —— Sections —— */
.lxLandingSection {
  margin-bottom: 88px;
  text-align: center;
  scroll-margin-top: 80px;
}
.lxSectionHead { margin-bottom: 28px; }
.lxSectionHead h2 {
  font-family: Syne, Manrope, sans-serif;
  font-size: clamp(28px, 4.5vw, 42px);
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
}
.lxSectionHead .muted,
.lxLandingSection > .muted {
  max-width: 46ch;
  margin: 0 auto;
  line-height: 1.6;
  color: rgba(170, 182, 200, 0.9);
}
.lxSectionHead .muted b { color: #e8eef7; font-weight: 700; }

.lxDeviceGrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px;
}
.lxDeviceGrid a {
  min-height: 112px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 22px 14px; border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  color: #e8eef7; font-weight: 700; font-size: 14px;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.lxDeviceGrid a:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.06);
  color: #fff;
}
.lxDeviceGrid svg { width: 28px; height: 28px; color: #7dd3fc; transition: transform 0.25s ease; }
.lxDeviceGrid a:hover svg { transform: scale(1.08); color: #5eead4; }

/* Tariffs */
.lxTariffFeatureGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 36px;
  text-align: left;
}
.lxTariffFeatureGrid--compact {
  margin: 4px 0 22px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.lxTariffFeatureGrid--compact .lxTariffCard { padding: 18px 16px 16px; gap: 10px; }
.lxTariffFeatureGrid--compact .lxTariffCard h3 { font-size: 15px; }
.lxTariffFeatureGrid--compact .lxTariffCard li { font-size: 12.5px; }
.lxTariffCard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.lxTariffCard:hover {
  transform: perspective(900px) rotateX(var(--lx-tilt-x, 0deg)) rotateY(var(--lx-tilt-y, 0deg)) translateY(-3px);
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.045);
}
.lxTariffCard--featured {
  background: linear-gradient(160deg, rgba(56,189,248,0.1), rgba(129,140,248,0.08));
  border-color: rgba(56, 189, 248, 0.35);
}
.lxTariffBadge {
  position: absolute;
  top: -11px; right: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #7dd3fc;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.lxTariffBadge svg { width: 11px; height: 11px; }
.lxTariffCardTop {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.lxTariffCard h3 {
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.02em;
}
.lxTariffCard h3 svg { width: 18px; height: 18px; flex: 0 0 auto; color: #7dd3fc; }
.lxTariffCard--featured h3 svg { color: #f9a8d4; }
.lxTariffCard > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(170, 182, 200, 0.92);
}
.lxTariffPrice {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 800;
  padding: 5px 10px; border-radius: 8px;
  white-space: nowrap;
}
.lxTariffPrice--mint { color: #5eead4; background: rgba(94, 234, 212, 0.12); }
.lxTariffPrice--violet { color: #a5b4fc; background: rgba(129, 140, 248, 0.14); }
.lxTariffPrice--rose { color: #f9a8d4; background: rgba(244, 114, 182, 0.14); }
.lxTariffCard ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.lxTariffCard li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; color: #e8eef7; line-height: 1.35;
}
.lxTariffCard li svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.lxTariffCard li.ok svg { color: #5eead4; }
.lxTariffCard li.no { color: rgba(170, 182, 200, 0.65); }
.lxTariffCard li.no svg { color: #fb7185; }

.lxPlansPeriodTitle {
  margin: 8px 0 18px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.lxPlanGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.lxPlanGrid a {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 28px 18px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff; text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.lxPlanGrid a:hover {
  transform: perspective(900px) rotateX(var(--lx-tilt-x, 0deg)) rotateY(var(--lx-tilt-y, 0deg)) translateY(-3px);
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.06);
  color: #fff;
}
.lxPlanGrid a.pop {
  background: linear-gradient(160deg, rgba(56,189,248,0.14), rgba(129,140,248,0.08));
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 12px 32px rgba(56, 189, 248, 0.14);
}
.lxPlanGrid a.pop::before {
  content: 'Популярный';
  position: absolute;
  top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: #041016; white-space: nowrap;
  background: linear-gradient(120deg, #5eead4, #38bdf8);
  padding: 4px 12px; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
  z-index: 2;
}
.lxPlanGrid strong {
  font-family: Syne, Manrope, sans-serif;
  font-size: 28px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
}
.lxPlanGrid span { color: rgba(186, 198, 214, 0.9); font-weight: 600; font-size: 13px; }

.lxWhyGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.lxWhyGrid div {
  padding: 28px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
  display: grid; justify-items: center; gap: 8px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.lxWhyGrid div:hover {
  transform: translateY(-3px);
  border-color: rgba(94, 234, 212, 0.3);
}
.lxWhyGrid svg { width: 28px; height: 28px; color: #7dd3fc; margin-bottom: 2px; }
.lxWhyGrid b { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.lxWhyGrid small {
  color: rgba(170, 182, 200, 0.9);
  font-weight: 600; font-size: 13px; line-height: 1.35;
}

.lxBottomNav {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 80;
  width: min(96vw, 500px); min-height: 68px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 6px; border-radius: 22px;
  background: rgba(4, 6, 12, 0.88);
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}
.lxBottomNav a {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: rgba(170, 182, 200, 0.65);
  border-radius: 16px; font-size: 10.5px; font-weight: 700;
  text-decoration: none; transition: color 0.2s ease, background 0.2s ease;
  padding: 6px 4px;
}
.lxBottomNav a.active {
  color: #fff;
  background: rgba(56, 189, 248, 0.12);
}
.lxBottomNav a:hover:not(.active) {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.05);
}
.lxBottomNav svg { width: 21px; height: 21px; }
.lxBottomNav a.active svg { color: #7dd3fc; }

@media (max-width: 900px) {
  .lxTariffFeatureGrid { grid-template-columns: 1fr; }
  .lxDeviceGrid { grid-template-columns: 1fr; }
  .lxWhyGrid { grid-template-columns: 1fr; }
}

/* Scroll reveal */
.lxReveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--lx-delay, 0s),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--lx-delay, 0s);
  will-change: opacity, transform;
}
.lxReveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .lxReveal { opacity: 1; transform: none; transition: none; }
}

/* How it works */
.lxHowGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}
.lxHowGrid::before {
  content: '';
  position: absolute;
  left: 16%; right: 16%; top: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.35) 20%, rgba(129, 140, 248, 0.35) 80%, transparent);
}
.lxHowStep {
  position: relative;
  text-align: left;
  padding: 22px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.lxHowStep:hover { transform: translateY(-3px); border-color: rgba(56,189,248,0.3); }
.lxHowNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  font-family: Syne, Manrope, sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #04060c;
  background: linear-gradient(135deg, #5eead4, #38bdf8);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);
}
.lxHowStep h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.lxHowStep p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(170, 182, 200, 0.92);
}

/* FAQ */
.lxFaqList { display: grid; gap: 10px; text-align: left; max-width: 720px; margin: 0 auto; }
.lxFaqItem {
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 4px 20px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lxFaqItem[open] { background: rgba(255,255,255,0.045); border-color: rgba(56, 189, 248, 0.25); }
.lxFaqItem summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
  list-style: none;
}
.lxFaqItem summary::-webkit-details-marker { display: none; }
.lxFaqItem summary svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  color: rgba(170, 182, 200, 0.8);
  transition: transform 0.25s ease;
}
.lxFaqItem[open] summary svg { transform: rotate(180deg); color: #7dd3fc; }
.lxFaqItem p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(170, 182, 200, 0.92);
}

/* Tariff card tilt + glow (desktop pointer only) */
.lxTariffCard, .lxPlanGrid a {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, background 0.25s ease;
}
@media (pointer: fine) {
  /* Uses ::after (not ::before) so it never collides with the "Популярный"
     ribbon, which owns ::before on .lxPlanGrid a.pop. */
  .lxTariffCard::after, .lxPlanGrid a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle 140px at var(--lx-glow-x, 50%) var(--lx-glow-y, 50%), rgba(125, 211, 252, 0.14), transparent 70%);
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
  }
  .lxTariffCard:hover::after, .lxPlanGrid a:hover::after { opacity: 1; }
}

/* =========================================================
   CABINET DASHBOARD v3 — Matching Landing Style
   ========================================================= */

/* Cabinet wrapper uses lxShell styles already present */

@media (prefers-reduced-motion: reduce) {
  .lxHeroOrb, .lxHeroBadge, .lxHeroCheck,
  .lxHeroBrand, .lxHeroTitle, .lxHeroLead, .lxHeroCta {
    animation: none !important;
  }
  .lxHeroCheck { stroke-dashoffset: 0; }
}

/* Cabinet Hero Card — matches landing hero feel */
.lxCabHero {
  background: linear-gradient(145deg, rgba(56, 189, 248,0.14) 0%, rgba(18,16,30,0.5) 100%);
  border-radius: 28px; padding: 28px; border: 1px solid rgba(56, 189, 248,0.2);
  display: flex; flex-direction: column; gap: 24px; margin-bottom: 20px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative; overflow: hidden; backdrop-filter: blur(20px);
}
.lxCabHero::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(56, 189, 248,0.25), transparent 70%);
  border-radius: 50%; filter: blur(40px); pointer-events: none;
}
.lxCabHero::after {
  content: ''; position: absolute; bottom: -40px; left: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(129, 140, 248,0.15), transparent 70%);
  border-radius: 50%; filter: blur(30px); pointer-events: none;
}
.lxCabHeroTop {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative; z-index: 2;
}
.lxCabBrand { display: flex; align-items: center; gap: 14px; }
.lxCabLogo {
  width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  display: grid; place-items: center;
  font-size: 22px; font-weight: 900; flex: 0 0 48px;
  box-shadow: 0 8px 20px rgba(56, 189, 248,0.4);
}
.lxCabBrandInfo b { display: block; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.lxCabBrandInfo span { color: var(--lx-muted); font-size: 13px; }
.lxCabSupportBtn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08);
  color: var(--lx-muted2); font-size: 13px; font-weight: 700; text-decoration: none;
  transition: all 0.2s ease; flex: 0 0 auto;
}
.lxCabSupportBtn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.lxCabStats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  position: relative; z-index: 2;
}
.lxCabStat {
  padding: 18px; border-radius: 20px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.06);
}
.lxCabStatIcon { color: #7dd3fc; font-size: 20px; margin-bottom: 6px; }
.lxCabStatMain {
  color: #fff; font-size: 28px; font-weight: 900; letter-spacing: -1px;
  line-height: 1; margin: 4px 0;
}
.lxCabStatSub { color: var(--lx-muted); font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.lxCabStatBtn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 14px; border-radius: 999px;
  background: rgba(56, 189, 248,0.16); border: 1px solid rgba(56, 189, 248,0.28);
  color: #7dd3fc; font-size: 12px; font-weight: 700; text-decoration: none;
  transition: all 0.2s ease;
}
.lxCabStatBtn:hover { background: rgba(56, 189, 248,0.28); color: #fff; }

/* Cabinet Quick Actions */
.lxCabActions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.lxCabActionCard {
  padding: 20px 16px; border-radius: 22px;
  background: rgba(18,16,30,0.65); border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(14px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-decoration: none; transition: all 0.25s cubic-bezier(0.2,0.8,0.2,1);
  cursor: pointer; position: relative; overflow: hidden;
}
.lxCabActionCard::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
  pointer-events: none;
}
.lxCabActionCard:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248,0.35);
  background: rgba(28,22,48,0.85);
  box-shadow: 0 14px 32px rgba(0,0,0,0.25);
}
.lxCabActionCard:active { transform: scale(0.96); }
.lxCabActionIc {
  width: 42px; height: 42px; border-radius: 14px;
  background: rgba(56, 189, 248,0.15); display: flex; align-items: center; justify-content: center;
  color: #7dd3fc; flex: 0 0 42px;
  box-shadow: 0 4px 12px rgba(56, 189, 248,0.2);
}
.lxCabActionIc svg { width: 22px; height: 22px; }
.lxCabActionIc.teal { background: rgba(20,184,166,0.15); color: #2dd4bf; box-shadow: 0 4px 12px rgba(20,184,166,0.2); }
.lxCabActionIc.pink { background: rgba(129, 140, 248,0.15); color: #f472b6; box-shadow: 0 4px 12px rgba(129, 140, 248,0.2); }
.lxCabActionIc.blue { background: rgba(59,130,246,0.15); color: #60a5fa; box-shadow: 0 4px 12px rgba(59,130,246,0.2); }
.lxCabActionCard b { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.lxCabActionCard span { color: var(--lx-muted); font-size: 12px; line-height: 1.4; }

/* Cabinet Section Card */
.lxCabCard {
  background: var(--lx-card); border: 1px solid var(--lx-card-border);
  border-radius: 24px; padding: 22px; margin-bottom: 16px;
  backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transition: border-color 0.25s ease;
}
.lxCabCard:hover { border-color: rgba(255,255,255,0.14); }
.lxCabCard h3 { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.lxCabCard .tag { margin-bottom: 6px; display: inline-block; }
.lxCabCardHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.lxCabCardHead h3 { margin: 0; }

/* Plan cards in cabinet */
.lxCabPlanGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.lxCabPlanCard {
  position: relative;
  padding: 22px 18px 18px; border-radius: 18px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 7px;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.lxCabPlanCard:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
}
.lxCabPlanCard.featured {
  background: linear-gradient(160deg, rgba(56,189,248,0.14), rgba(129,140,248,0.08));
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 12px 28px rgba(56, 189, 248, 0.12);
}
.lxCabPlanCard.featured:hover { border-color: rgba(56, 189, 248, 0.6); }
.lxCabPlanCard .badge {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  color: #7dd3fc; letter-spacing: 0.6px;
  background: rgba(125, 211, 252, 0.12);
  padding: 3px 9px; border-radius: 6px;
  margin-bottom: 2px;
}
.lxCabPlanCard.featured .badge { color: #041016; background: linear-gradient(120deg, #5eead4, #38bdf8); }
.lxCabPlanCard h4 { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.lxCabPlanCard .price { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -0.5px; }
.lxCabPlanCard .price span { font-size: 14px; font-weight: 600; color: var(--lx-muted2); }
.lxCabPlanCard .btn { margin-top: 10px; }

/* News items */
.lxCabNewsItem {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.04);
  text-decoration: none; transition: all 0.2s ease; margin-bottom: 8px;
}
.lxCabNewsItem:last-child { margin-bottom: 0; }
.lxCabNewsItem:hover { background: rgba(56, 189, 248,0.08); border-color: rgba(56, 189, 248,0.2); }
.lxCabNewsItem b { display: block; color: #fff; font-size: 14px; margin-bottom: 2px; }
.lxCabNewsItem span { color: var(--lx-muted); font-size: 12px; line-height: 1.4; }
.lxCabNewsItem time { color: var(--lx-muted); font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* Order history */
.lxCabOrderGrid { display: grid; gap: 10px; }
.lxCabOrder {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.04);
}
.lxCabOrder b { display: block; color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.lxCabOrder span { color: var(--lx-muted); font-size: 12px; }

/* Cabinet bottom nav - same style as landing */
.lxCabBottomNav {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999;
  width: min(96vw, 500px); min-height: 70px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 6px; border-radius: 28px;
  background: rgba(8,6,18,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.lxCabBottomNav a {
  min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: rgba(169,160,189,0.7); border-radius: 22px; font-size: 10.5px; font-weight: 700;
  text-decoration: none; transition: all 0.2s ease; padding: 6px 4px;
}
.lxCabBottomNav a.active {
  color: #fff;
  background: rgba(56, 189, 248,0.18);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248,0.25);
}
.lxCabBottomNav a:hover:not(.active) {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.06);
}
.lxCabBottomNav svg { width: 22px; height: 22px; transition: transform 0.2s ease; }
.lxCabBottomNav a.active svg { filter: drop-shadow(0 0 8px rgba(56, 189, 248,0.6)); }

/* Payment panel improvements */
.lxPayPanel {
  background: rgba(18,16,30,0.65); border: 1px solid rgba(56, 189, 248,0.2);
  border-radius: 24px; padding: 24px; margin-bottom: 16px;
  backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.lxPayPanel .tag { margin-bottom: 8px; display: inline-block; }
.lxPayPanel h2 { margin: 4px 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.lxPaySteps { background: rgba(0,0,0,0.25); border-radius: 16px; padding: 16px; margin: 16px 0; border: 1px solid rgba(255,255,255,0.04); }
.lxPayStep { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.lxPayStep:first-child { padding-top: 0; }
.lxPayStep:last-child { border: none; padding-bottom: 0; }
.lxPayStepNum {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  background: linear-gradient(135deg, var(--lx-accent), #7dd3fc);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  box-shadow: 0 4px 10px rgba(56, 189, 248,0.3);
}
.lxPayStepText { color: var(--lx-muted2); font-size: 14px; font-weight: 500; }
.lxPayStatus {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: rgba(56, 189, 248,0.1); border: 1px solid rgba(56, 189, 248,0.2);
  color: #e2d9ff; font-size: 14px; margin-bottom: 16px;
}
.lxPayActions { display: flex; gap: 10px; flex-wrap: wrap; }
.lxPayActions .btn { flex: 1; min-width: 0; }

/* Connection panel */
.lxConnectCard {
  background: rgba(18,16,30,0.65); border: 1px solid rgba(85,220,163,0.2);
  border-radius: 24px; padding: 24px; margin-bottom: 16px;
  backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.lxConnectCard .tag { background: rgba(85,220,163,0.12); color: var(--lx-green); border: 1px solid rgba(85,220,163,0.25); margin-bottom: 8px; display: inline-block; }
.lxConnectCard h2 { margin: 4px 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }

/* Telegram panel */
.lxTgCard {
  background: rgba(18,16,30,0.65); border: 1px solid rgba(42,171,238,0.18);
  border-radius: 24px; padding: 24px; margin-bottom: 16px;
  backdrop-filter: blur(14px);
}
.lxTgCard .tag { background: rgba(42,171,238,0.12); color: #60bfef; border: 1px solid rgba(42,171,238,0.25); margin-bottom: 8px; display: inline-block; }
.lxTgCard h2 { margin: 4px 0 8px; font-size: 18px; font-weight: 800; }

/* Support panel */
.lxSupportCard {
  background: rgba(18,16,30,0.65); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px; padding: 24px; margin-bottom: 16px;
  backdrop-filter: blur(14px);
}
.lxSupportCard h2 { margin: 4px 0 8px; font-size: 18px; font-weight: 800; }

/* Devices table wrapper */
.lxDevicesCard {
  background: rgba(18,16,30,0.65); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px; padding: 22px; margin-bottom: 16px;
  backdrop-filter: blur(14px);
}
.lxDevicesCard h2 { margin: 4px 0 8px; font-size: 18px; font-weight: 800; }

/* Profile info rows */
.lxInfoRow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lxInfoRow:last-child { border: none; padding-bottom: 0; }
.lxInfoRow small { display: block; font-size: 11px; color: var(--lx-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.lxInfoRow b { color: #fff; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }

/* Profile name inline edit */
.lxNoName { color: var(--lx-muted); font-weight: 400; font-style: italic; }
.lxEditNameBtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: rgba(56, 189, 248,0.10); color: var(--lx-accent);
  border: 1px solid rgba(56, 189, 248,0.22); cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.14s;
  white-space: nowrap; font-family: inherit; line-height: 1;
}
.lxEditNameBtn:hover { background: rgba(56, 189, 248,0.18); border-color: rgba(56, 189, 248,0.38); transform: translateY(-1px); }
.lxEditNameBtn:active { transform: scale(0.97); }
.lxNameEditRow { flex-direction: column; align-items: stretch !important; padding-top: 10px; padding-bottom: 10px; }
.lxNameForm { width: 100%; }
.lxNameFieldWrap { width: 100%; }
.lxNameInputRow {
  display: flex; gap: 8px; align-items: center;
  margin-top: 8px; flex-wrap: nowrap;
}
.lxNameInput {
  flex: 1; min-width: 0;
  padding: 9px 14px; border-radius: 11px; font-size: 14px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(56, 189, 248,0.28);
  color: #fff; outline: none; transition: border-color 0.18s, box-shadow 0.18s;
  font-family: inherit; width: auto;
}
.lxNameInput:focus { border-color: var(--lx-accent); box-shadow: 0 0 0 3px rgba(56, 189, 248,0.18); }
.lxSaveNameBtn {
  flex-shrink: 0; padding: 9px 18px; border-radius: 11px; font-size: 13px; font-weight: 700;
  background: var(--lx-accent); color: #fff; border: none; cursor: pointer;
  transition: background 0.18s, transform 0.14s; font-family: inherit; white-space: nowrap;
}
.lxSaveNameBtn:hover { background: #0ea5e9; transform: translateY(-1px); }
.lxSaveNameBtn:active { transform: scale(0.97); }
.lxSaveNameBtn.secondary {
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.12);
}
.lxSaveNameBtn.secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }
.lxCancelEditBtn {
  flex-shrink: 0;
  width: 36px; height: 36px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--lx-muted);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  font-family: inherit;
}
.lxCancelEditBtn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}
.lxProfileEditPanel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 2px;
}
.lxProfileEditHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.lxProfileEditTitle {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.lxProfileEditHint {
  margin: 4px 0 0;
  color: var(--lx-muted);
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.lxProfileEditLabel {
  display: block;
  margin-bottom: 6px;
  color: var(--lx-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.lxProfileEditActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lxProfileEditActions .lxSaveNameBtn { width: 100%; justify-content: center; }
.lxProfileEditCode {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media (max-width: 480px) {
  .lxNameInputRow { flex-wrap: wrap; }
  .lxNameInput { min-width: 100%; }
  .lxSaveNameBtn { flex: 1; }
  .lxCancelEditBtn { width: 40px; height: 40px; }
}



/* Status badges */
.lxStatusActive {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(85,220,163,0.12); color: var(--lx-green); border: 1px solid rgba(85,220,163,0.28);
}
.lxStatusPending {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(251,113,133,0.12); color: var(--lx-red); border: 1px solid rgba(251,113,133,0.28);
}

/* Tab content animation */
.lxCabTab { display: none; animation: lxFadeUp 0.35s ease both; }
.lxCabTab.active { display: block; }

/* Android TV (happ_tv.php) */
.tvStepBox { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; text-align: left; }
.tvStep { background: rgba(0,0,0,0.2); padding: 16px; border-radius: 16px; display: flex; gap: 16px; align-items: center; border: 1px solid rgba(255,255,255,0.05); }
.tvStep b { width: 32px; height: 32px; background: var(--lx-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.tvSubBox { margin-bottom: 24px; }
.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }


/* =========================================================
   НОВЫЙ ПРЕМИУМ-ИНТЕРФЕЙС (LUAX PRO SHELL V2.0)
   ========================================================= */

.lxOriginalHidden { display: none !important; }

body.cabinet main.cabinetWrap > :not(.lxShell):not(.lxModalOverlay) {
  display: none !important;
}
body.cabinet.lxShellFailed main.cabinetWrap > :not(.lxShell):not(.lxModalOverlay) {
  display: block !important;
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lxTabIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes lxSpoilerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.lxShell {
  padding-bottom: 118px !important;
  animation: none;
  max-width: 960px; margin: 0 auto; padding: 20px;
}

/* Cursor glow follower (cabinet desktop) */
.lxCursorFx {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}
body.lxCursorFxOn .lxCursorFx { opacity: 1; }
.lxCursorFxOrb {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;
}
.lxCursorFx.is-live .lxCursorFxOrb { opacity: 1; }
.lxCursorFxOrb--a {
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.28) 0%, rgba(56, 189, 248, 0.12) 42%, transparent 70%);
  filter: blur(8px);
}
.lxCursorFxOrb--b {
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.16) 0%, rgba(56, 189, 248, 0.06) 40%, transparent 68%);
  filter: blur(18px);
}
.lxCursorFxToggle {
  position: fixed;
  z-index: 980;
  left: 18px;
  bottom: calc(var(--lx-nav-h, 88px) + 14px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 24, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(186, 198, 214, 0.92);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.lxCursorFxToggle svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.85; }
.lxCursorFxToggle:hover {
  border-color: rgba(125, 211, 252, 0.35);
  color: #fff;
  transform: translateY(-1px);
}
.lxCursorFxToggle.is-on {
  border-color: rgba(94, 234, 212, 0.4);
  color: #5eead4;
  background: rgba(14, 28, 36, 0.82);
  box-shadow: 0 10px 28px rgba(56, 189, 248, 0.12);
}
.lxCursorFxToggle.is-on svg { opacity: 1; color: #5eead4; }
@media (pointer: coarse), (max-width: 720px) {
  .lxCursorFx, .lxCursorFxToggle { display: none !important; }
}
@media (min-width: 900px) {
  .lxCursorFxToggle { left: 24px; bottom: 24px; }
}

.lxHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 0 20px;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 520;
  background: transparent;
}
.lxHeaderBrand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: #fff;
  font-weight: 800; font-size: 18px; letter-spacing: -0.5px;
  flex: 0 1 auto; min-width: 0;
}
.lxHeaderBrand img { width: 36px; height: 36px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.lxHeaderNav { flex: 0 0 auto; }
.lxSupport {
  display: flex; align-items: center; gap: 8px;
  color: var(--lx-muted); text-decoration: none;
  font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,0.05); padding: 8px 16px; border-radius: 100px;
  transition: all 0.3s ease; backdrop-filter: blur(10px);
  flex: 0 0 auto;
}
.lxSupport svg { width: 18px; height: 18px; }
.lxSupport:hover, .lxSupport:active { background: rgba(255,255,255,0.1); color: #fff; transform: scale(0.97); }

.lxTab { display: none; }
.lxTab.active {
  display: block;
  animation: lxTabIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lxTitle { font-size: 32px; font-weight: 800; margin: 0 0 8px 0; letter-spacing: -1px; }
.lxLead { font-size: 16px; color: var(--lx-muted); margin: 0 0 24px 0; line-height: 1.5; }

/* BENTO HERO — subscription status card */
.lxBentoHero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px 20px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(155deg, rgba(18, 28, 42, 0.92) 0%, rgba(10, 14, 24, 0.88) 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.lxBentoHero.is-off {
  border-color: rgba(251, 113, 133, 0.22);
  background: linear-gradient(155deg, rgba(40, 18, 28, 0.9) 0%, rgba(12, 10, 16, 0.9) 100%);
}
.lxBentoAura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(94, 234, 212, 0.1), transparent 50%);
}
.lxBentoHero.is-off .lxBentoAura {
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(251, 113, 133, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(251, 113, 133, 0.06), transparent 50%);
}
.lxBentoHero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(120deg, #000 10%, transparent 70%);
  -webkit-mask-image: linear-gradient(120deg, #000 10%, transparent 70%);
}
.lxBentoMain {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lxBentoMeta {
  min-width: 0;
  display: grid;
  gap: 6px;
  justify-items: start;
}
.lxBentoStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(226, 236, 248, 0.92);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lxBentoHero.is-off .lxBentoStatus {
  color: #fecdd3;
  border-color: rgba(251, 113, 133, 0.25);
  background: rgba(251, 113, 133, 0.08);
}
.lxPulseDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.18);
  animation: lxPulse 2.2s ease-in-out infinite;
}
.lxBentoHero.is-off .lxPulseDot {
  background: #fb7185;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.2);
  animation: none;
}
@keyframes lxPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.15); }
}
.lxBentoLabel {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
}
.lxBentoValue {
  margin: 0;
  font-family: Syne, Manrope, Inter, sans-serif;
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #f8fafc;
  background: linear-gradient(120deg, #f8fafc 30%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lxBentoHero.is-off .lxBentoValue {
  background: linear-gradient(120deg, #ffe4e6 20%, #fb7185 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lxBentoHint {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.95);
}
.lxBentoHint .luax-local-time { color: inherit; }
.lxBentoVisual {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: visible;
  align-self: center;
}
.lxBentoVisual::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}
.lxBentoHero.is-off .lxBentoVisual {
  border-color: rgba(251, 113, 133, 0.22);
  background: rgba(251, 113, 133, 0.06);
}
.lxBentoHero.is-off .lxBentoVisual::before {
  background: radial-gradient(circle, rgba(251, 113, 133, 0.2), transparent 70%);
}
.lxBentoVisual svg { width: 34px; height: 34px; display: block; overflow: visible; }

.lxBentoAction {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.96);
  color: #0b1220;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.lxBentoAction svg { width: 18px; height: 18px; flex: 0 0 auto; }
.lxBentoAction:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow: 0 14px 28px rgba(56, 189, 248, 0.16);
}
.lxBentoAction:active { transform: scale(0.985); }

/* legacy aliases (trial banner still uses some) */
.lxBentoSub { text-align: left; }
.lxBentoSub span { display: block; font-size: 12px; color: var(--lx-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.lxBentoSub b { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.4px; }

/* MODERN TILES */
.lxModernTiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.lxM-Tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  position: relative;
  overflow: hidden;
}
.lxM-Tile:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(125, 211, 252, 0.28);
}
.lxM-Tile:active { transform: scale(0.98); }
.lxM-Tile .lxIc {
  width: 40px; height: 40px;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #7dd3fc;
  margin-bottom: 12px;
}
.lxM-Tile .lxIc svg { width: 20px; height: 20px; }
.lxM-Tile b { color: #fff; font-size: 15px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.3px; }
.lxM-Tile span { color: rgba(148, 163, 184, 0.95); font-size: 12.5px; line-height: 1.35; }
.lxM-Tile.tg .lxIc { background: rgba(42, 171, 238, 0.12); color: #38bdf8; }

/* BOTTOM NAV */
.lxNav {
  position: fixed; left: 0; right: 0; bottom: 0; transform: none;
  width: 100%; height: 76px;
  background: rgba(8, 7, 14, 0.94);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 0; border-top: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px 24px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px;
  padding: 8px max(14px, calc((100vw - 560px) / 2)) 10px; z-index: 9999;
  box-shadow: 0 -18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
}
@supports (padding-bottom: env(safe-area-inset-bottom)) { .lxNav { height: calc(76px + env(safe-area-inset-bottom)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); } }
.lxNav button { min-width: 0; width: 100%; max-width: none; background: transparent; border: none; color: var(--lx-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 54px; border-radius: 17px; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; overflow: hidden; }
.lxNav button svg { width: 22px; height: 22px; flex: 0 0 22px; opacity: 0.82; transition: all 0.2s ease; color: currentColor; }
.lxNav button span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.lxNav button.active { color: #fff; background: rgba(255,255,255,0.08); }
.lxNav button.active svg { opacity: 1; transform: translateY(-2px); filter: drop-shadow(0 2px 8px rgba(255,255,255,0.3)); }
.lxNav button:active { transform: scale(0.9); }

/* UNIVERSAL BUTTONS (Shell Actions) */
.lxForceBtn { display: flex; align-items: center; justify-content: center; width: 100%; gap: 10px; padding: 16px 20px; border-radius: 20px; background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; border: 1px solid rgba(255,255,255,0.05); cursor: pointer; box-sizing: border-box; text-align: center; line-height: 1.2; font-family: inherit; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); backdrop-filter: blur(10px); }
.lxForceBtn:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.lxForceBtn:active { transform: scale(0.96); background: rgba(255,255,255,0.06); }
.lxForceBtn.lxCopyBtn {
  background: linear-gradient(135deg, rgba(56, 189, 248,0.16), rgba(129, 140, 248,0.12));
  color: #f1ecfe;
  border: 1px solid rgba(56, 189, 248,0.35);
  box-shadow: 0 4px 16px rgba(56, 189, 248,0.15);
  font-weight: 700;
}
.lxForceBtn.lxCopyBtn .lxBtnIc { color: #7dd3fc; }
.lxForceBtn.lxCopyBtn:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248,0.28), rgba(129, 140, 248,0.22));
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 8px 24px rgba(56, 189, 248,0.28);
  transform: translateY(-2px);
}
.lxForceBtn.lxCopyBtn.is-copied {
  background: linear-gradient(135deg, rgba(85,220,163,0.2), rgba(16,185,129,0.15));
  color: #55dca3;
  border-color: rgba(85,220,163,0.5);
  box-shadow: 0 8px 24px rgba(85,220,163,0.25);
}
.lxBtnIc { display: flex; align-items: center; justify-content: center; }
.lxBtnIc svg { width: 20px; height: 20px; }
.lxExtraActions:not(:empty) { display: grid; gap: 10px; margin: 0; }

/* DEVICE SELECTION — Dynamic Island */
.lxDynIslandSpacer { height: 0; }
body.lx-island-on .lxDynIslandSpacer { height: 0; }
@media (max-width: 640px) {
  body.lx-island-on .lxDynIslandSpacer { height: 52px; }
  body.lx-island-on .lxHeader {
    padding-bottom: 10px;
  }
}
.lxDynIsland {
  position: fixed;
  top: var(--lx-island-offset, 72px);
  left: 50%;
  transform: translate3d(-50%, -12px, 0) scale(0.92);
  z-index: 510;
  width: min(88vw, 300px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.48s cubic-bezier(0.32, 0.72, 0, 1),
    top 0.2s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0.28s;
}
.lxDynIsland.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0) scale(1);
}
.lxDynIsland.is-open {
  width: min(94vw, 400px);
}
.lxDynIslandBlob {
  width: 100%;
  background: linear-gradient(165deg, #1c2230 0%, #0d1018 55%, #090b12 100%);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(56, 189, 248, 0.16),
    0 0 28px rgba(56, 189, 248, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform-origin: top center;
  transition:
    border-radius 0.48s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.35s ease,
    background 0.3s ease;
  will-change: transform, border-radius;
}
.lxDynIsland.is-open .lxDynIslandBlob {
  border-radius: 28px;
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(125, 211, 252, 0.28),
    0 0 36px rgba(56, 189, 248, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.lxDynIslandBlob.is-bounce {
  animation: lxIslandSquish 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes lxIslandSquish {
  0% { transform: scaleX(1.08) scaleY(0.9); }
  35% { transform: scaleX(0.94) scaleY(1.08); }
  60% { transform: scaleX(1.03) scaleY(0.97); }
  100% { transform: scaleX(1) scaleY(1); }
}
.lxDeviceIsland {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 10px 14px 10px 10px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  min-height: 52px;
  -webkit-tap-highlight-color: transparent;
}
.lxDeviceIsland:active { transform: none; }
.lxIslandIcon {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: background 0.3s ease, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.lxDynIsland.is-open .lxIslandIcon {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
}
.lxIslandIcon svg { width: 18px; height: 18px; }
.lxIslandCopy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lxDeviceIsland b {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.lxDeviceIsland small {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.9);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lxPickerChevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  opacity: 0.55;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
}
.lxPickerChevron::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translateY(-2px) rotate(45deg);
}
.lxDynIsland.is-open .lxPickerChevron {
  transform: rotate(180deg);
  opacity: 0.9;
}
.lxDynIslandBody {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.48s cubic-bezier(0.32, 0.72, 0, 1);
}
.lxDynIsland.is-open .lxDynIslandBody {
  grid-template-rows: 1fr;
}
.lxDynIslandBodyInner {
  overflow: hidden;
  min-height: 0;
}
.lxOsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0 10px 12px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition:
    opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.lxDynIsland.is-open .lxOsGrid {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.06s;
}
.lxOs {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  color: rgba(226, 232, 240, 0.72);
  padding: 12px 8px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.15;
  text-align: center;
}
.lxOsIcon {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.lxOsIcon svg { width: 18px; height: 18px; }
.lxOs:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  transform: translateY(-1px);
}
.lxOs:active { transform: scale(0.96); }
.lxOs.active {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.32);
  color: #fff;
}
.lxOs.active .lxOsIcon {
  background: rgba(56, 189, 248, 0.28);
  color: #7dd3fc;
}

@media (prefers-reduced-motion: reduce) {
  .lxDynIsland,
  .lxDynIslandBlob,
  .lxDynIslandBody,
  .lxOsGrid,
  .lxPickerChevron,
  .lxIslandIcon {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}

.lxInstallHero {
  margin: 0 0 12px;
}
.lxInstallHero .lxTitle {
  font-size: clamp(34px, 5vw, 48px);
}
.lxInstallHero .lxLead {
  margin-bottom: 0;
}
body.lx-island-on .lxTab[data-tab="install"] {
  padding-top: 0;
}

.lxDeviceSelectIntro { display: none; }
.lxDeviceSelectIntro b { display: block; color: #7dd3fc; font-size: 15px; margin-bottom: 4px; }
.lxDeviceSelectIntro span { font-size: 13px; color: var(--lx-muted); }

.lxInstruction { display: none; position: relative; z-index: 1; background: rgba(18,16,30,0.78); border: 1px solid rgba(255,255,255,0.09); border-radius: 28px; padding: 24px; margin: 8px 0 34px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 48px rgba(0,0,0,0.26); }
.lxInstruction.active { display: block; animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lxInstructionTop { display: flex; gap: 16px; margin-bottom: 20px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.lxInstructionDeviceIcon { width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.lxInstructionDeviceIcon svg { width: 28px; height: 28px; }
.lxInstruction h2 { margin: 0 0 4px 0; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.5px;}
.lxInstruction p { margin: 0; font-size: 14px; color: var(--lx-muted); line-height: 1.4; }
.lxInstructionSteps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px;
}
.lxStep {
  display: flex; gap: 12px; align-items: flex-start; min-height: 86px;
  padding: 14px; border-radius: 18px; background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.05);
}
.lxStep > b {
  width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--lx-accent), #7dd3fc);
  font-size: 13px; box-shadow: 0 8px 18px rgba(56, 189, 248,0.24);
}
.lxStep span { color: var(--lx-muted2); font-size: 13px; line-height: 1.4; font-weight: 650; }

/* Сброс старых форм PHP в новом интерфейсе */
#luax-connect.lxConnectFiltered { display:block!important; background:transparent!important; border:none!important; padding:0!important; box-shadow:none!important; margin-top:10px!important; }
#luax-connect.lxConnectFiltered > *:not(.appAddBlock):not(.appDownloadBlock) { display:none!important; }
#luax-connect.lxConnectFiltered .appAddBlock, #luax-connect.lxConnectFiltered .appDownloadBlock { display:grid; grid-template-columns: 1fr!important; gap:12px!important; margin:0 0 12px 0!important; padding:0!important; background:transparent!important; border:none!important; box-shadow:none!important; }
#luax-connect.lxConnectFiltered .appAddGrid, #luax-connect.lxConnectFiltered .appDownloadGrid { display:grid!important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))!important; gap:10px!important; }
#luax-connect.lxConnectFiltered a, #luax-connect.lxConnectFiltered button { min-height: 54px!important; }
#luax-connect.lxConnectFiltered p, #luax-connect.lxConnectFiltered h3, #luax-connect.lxConnectFiltered label, #luax-connect.lxConnectFiltered .copyBox { display:none!important; }

/* BEAUTIFUL PAY PANEL */
.lxBeautifulPayPanel { background: var(--lx-card); border-radius: 28px; padding: 26px; border: 1px solid var(--lx-card-border); text-align: center; margin-bottom: 24px; box-shadow: 0 12px 30px rgba(0,0,0,0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lxBeautifulPayPanel h2 { font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 20px 0; letter-spacing: -0.5px;}
.lxBeautifulPayPanel .paySteps { background: rgba(0,0,0,0.3); border-radius: 20px; padding: 16px; text-align: left; margin-bottom: 24px; border: 1px solid rgba(255,255,255,0.03); }
.lxBeautifulPayPanel .paySteps div { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 14px; }
.lxBeautifulPayPanel .paySteps div:last-child { border: none; padding-bottom: 0;}
.lxBeautifulPayPanel .paySteps div:first-child { padding-top: 0;}
.lxStepNum { width: 30px; height: 30px; background: linear-gradient(135deg, var(--lx-accent), #7dd3fc); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(56, 189, 248,0.3); }
.lxStepText { color: #f8fbff; font-size: 15px; line-height: 1.4; font-weight: 500;}
.lxPaymentAlert { background: rgba(251,113,133,0.1); color: #fb7185; padding: 16px; border-radius: 16px; font-size: 14px; margin: 0; line-height: 1.4; border: 1px solid rgba(251,113,133,0.2); font-weight: 600; }
.lxBeautifulPayPanel .paymentActions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  width: 100%;
}
.lxBeautifulPayPanel .paymentActions form {
  width: 100%;
  display: block;
  margin: 0;
}
.lxBeautifulPayPanel .btn {
  width: 100%;
  border: none;
  padding: 16px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lxBeautifulPayPanel a.btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
}
.lxBeautifulPayPanel a.btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}
.lxBeautifulPayPanel button.btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}
.lxBeautifulPayPanel button.btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.lxBeautifulPayPanel .btn:active {
  transform: scale(0.97);
}
.lxBeautifulPayPanel .paymentStatus {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

/* PROFILE — spoilers / accordion */
.lxProfileStack { display: flex; flex-direction: column; gap: 10px; }
.lxTab[data-tab="profile"] .lxTitle { font-size: clamp(24px, 5vw, 28px); margin-bottom: 4px; }
.lxTab[data-tab="profile"] .lxLead { font-size: 14px; margin-bottom: 14px; }
.lxProfileStack > .lxSpoiler,
.lxProfileStack > .lxProfileSummary {
  animation: lxSpoilerIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lxProfileStack > .lxProfileSummary { animation-delay: 0.02s; }
.lxProfileStack > .lxSpoiler:nth-child(2) { animation-delay: 0.06s; }
.lxProfileStack > .lxSpoiler:nth-child(3) { animation-delay: 0.1s; }
.lxProfileStack > .lxSpoiler:nth-child(4) { animation-delay: 0.14s; }
.lxProfileStack > .lxSpoiler:nth-child(5) { animation-delay: 0.18s; }
.lxProfileStack > .lxSpoiler:nth-child(6) { animation-delay: 0.22s; }

.lxSpoiler {
  background: var(--lx-card);
  border: 1px solid var(--lx-card-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.lxSpoilerHead {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease;
}
.lxSpoilerHead:hover { background: rgba(255,255,255,0.03); }
.lxSpoilerIc {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(125, 211, 252, 0.1);
  border: 1px solid rgba(125, 211, 252, 0.18);
  color: #7dd3fc;
}
.lxSpoilerIc svg { width: 18px; height: 18px; display: block; }
.lxSpoilerTx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lxSpoilerTx b { font-size: 14px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.25; }
.lxSpoilerTx small { font-size: 12px; color: var(--lx-muted); font-weight: 600; line-height: 1.3; }
.lxSpoilerBadge {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  background: rgba(94, 234, 212, 0.14);
  color: #5eead4;
  border: 1px solid rgba(94, 234, 212, 0.28);
}
.lxSpoilerChevron {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lx-muted);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
  line-height: 0;
}
.lxSpoilerChevron svg { width: 18px; height: 18px; display: block; }
.lxSpoiler.is-open .lxSpoilerChevron {
  transform: rotate(180deg);
  color: #7dd3fc;
}
.lxSpoilerBody {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  border-top: 1px solid transparent;
}
.lxSpoiler.is-open > .lxSpoilerBody {
  grid-template-rows: 1fr;
  border-top-color: rgba(255,255,255,0.06);
}
.lxSpoilerBodyPad {
  overflow: hidden;
  min-height: 0;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease, transform 0.28s ease, padding 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.lxSpoiler.is-open > .lxSpoilerBody > .lxSpoilerBodyPad {
  padding: 12px 16px 16px;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.04s;
}
.lxSpoilerBody > .lxSpoiler,
.lxSpoilerBodyPad > .lxSpoiler {
  margin-top: 0;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.2);
  box-shadow: none;
  border-color: rgba(255,255,255,0.07);
}
.lxSpoilerBodyPad > .lxSpoiler:last-child { margin-bottom: 0; }
.lxSpoilerBodyPad > .lxDeviceCards { margin-top: 4px; }
.lxSpoilerInner { padding-top: 0; }
.lxSpoilerContent {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
}
.lxSpoilerContent .tag { display: none !important; }
.lxSpoilerContent h2 { display: none !important; }
.lxSpoilerContent .muted {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
}
.lxSpoilerContent .btn {
  min-height: 40px;
  font-size: 13px;
  border-radius: 11px;
}

.lxProfileSummary {
  background: var(--lx-card);
  border-radius: 18px;
  padding: 14px 16px;
  border: 1px solid var(--lx-card-border);
  margin-bottom: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.lxCleanProfileCard, .lxCleanTelegramCard, .lxDeviceSettingsCard,
.lxProfileStack .lxSupportCard, .lxProfileStack .lxDevicesCard,
.lxProfileStack .panel, .lxProfileStack .card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.lxCleanHead {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lxProfileSummary .lxCleanHead { margin-bottom: 12px; }
.lxAvatar, .lxTelegramIcon {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  flex: 0 0 40px; flex-shrink: 0;
  background: rgba(255,255,255,0.1); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.lxTelegramIcon { background: rgba(42,171,238,0.15); color: #2aabee; }
.lxAvatar svg, .lxTelegramIcon svg { width: 20px; height: 20px; flex-shrink: 0; }
.lxCleanHead h2 { margin: 0 0 2px 0; font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.lxCleanHead p { margin: 0; font-size: 12.5px; color: var(--lx-muted); }
.lxTinyBadge { display: inline-block; background: #2aabee; color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 100px; text-transform: uppercase; margin-bottom: 4px; }
.lxCleanStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.lxCleanStat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 78px;
  background: rgba(0, 0, 0, 0.22);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.lxCleanStat small {
  display: block;
  font-size: 10px;
  color: var(--lx-muted);
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.45px;
  line-height: 1;
}
.lxCleanStat b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}
.lxCleanStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  width: fit-content;
}
.lxCleanStatus::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.lxCleanStatus.is-on {
  background: rgba(85, 220, 163, 0.12);
  color: #7ee0b5;
  border: 1px solid rgba(85, 220, 163, 0.28);
}
.lxCleanStatus.is-off {
  background: rgba(251, 113, 133, 0.12);
  color: #fda4af;
  border: 1px solid rgba(251, 113, 133, 0.28);
}
.lxCleanTariff {
  margin-top: 8px;
}
.lxCleanTariff .statusChip {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 11px;
  font-size: 12px;
}
.lxLogout { display: block; width: 100%; text-align: center; margin-top: 12px; padding: 10px; background: rgba(251,113,133,0.1); color: #fb7185; text-decoration: none; border-radius: 12px; font-weight: 700; font-size: 13px; transition: all 0.2s; }
.lxLogout:active { transform: scale(0.97); background: rgba(251,113,133,0.15); }
.lxCleanTelegramCard form { margin-top: 12px; }
.lxCleanTelegramCard form button,
.lxSpoilerBody form button.telegram {
  width: 100%; background: #2aabee; color: #fff; border: none; padding: 12px; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer;
}

.lxDeviceSettingsCard h3,
.lxSpoilerBody > h3 { margin: 10px 0 8px 0; font-size: 14px; font-weight: 800; color: #fff; }
.lxDeviceSettingsCard p { display: none; }
.lxDeviceSettingsCard form,
.lxSpoilerBody form {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 0;
  background: none;
  border: none;
}
.lxForceSettingsBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.lxForceSettingsBtn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}
.lxForceSettingsBtn.is-on {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(79, 70, 229, 0.15) 100%);
  border-color: rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
}

/* Device list — compact spoilers */
.lxDeviceCards { display: grid; gap: 6px; margin-top: 10px; }
.lxDeviceCard {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.lxDeviceCard:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(125, 211, 252, 0.22);
  transform: none;
  box-shadow: none;
}
.lxDeviceCard.open {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(125, 211, 252, 0.28);
}
.lxDeviceSummary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  min-height: 48px;
  user-select: none;
}
.lxDeviceSummaryMain { min-width: 0; flex: 1; }
.lxDeviceStatus { flex: 0 0 auto; display: flex; align-items: center; max-width: 42%; }
.lxDeviceChev {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  transition: transform 0.22s ease, background 0.18s ease;
}
.lxDeviceChev::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  transform: translateY(-1px) rotate(45deg);
}
.lxDeviceCard.open .lxDeviceChev {
  transform: rotate(180deg);
  background: rgba(125, 211, 252, 0.12);
}
.lxDeviceName { color: #fff; font-weight: 700; font-size: 13.5px; margin-bottom: 1px; line-height: 1.25; }
.lxDeviceMeta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--lx-muted); font-size: 11px; line-height: 1.3; }
.lxDeviceBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
}
.lxDeviceBadge svg,
.lxDeviceBadge > span[aria-hidden] {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  display: block;
}
.lxDeviceBadgeTx {
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.lxDeviceBadge--ok {
  background: rgba(85, 220, 163, 0.12);
  color: #7ee0b5;
  border: 1px solid rgba(85, 220, 163, 0.28);
}
.lxDeviceBadge--ban {
  background: rgba(251, 113, 133, 0.12);
  color: #fda4af;
  border: 1px solid rgba(251, 113, 133, 0.3);
}
.lxDeviceBadge--limit {
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  border: 1px solid rgba(250, 204, 21, 0.28);
}
.lxDeviceBody {
  display: none;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.12);
}
.lxDeviceCard.open .lxDeviceBody {
  display: block;
  animation: lxDeviceBodyIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lxDeviceBodyIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.lxDeviceDetails {
  display: grid;
  gap: 8px;
  padding: 12px 0 10px;
}
.lxDeviceDetail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
}
.lxDeviceDetail span { color: var(--lx-muted); flex-shrink: 0; }
.lxDeviceDetail b { color: #e8eef8; font-weight: 600; text-align: right; word-break: break-word; }
.lxDeviceWarn {
  color: #facc15;
  font-size: 12px;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.2);
}
.lxDeviceBody .lxDeviceActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lxDeviceBody .lxDeviceActions form { margin: 0; }
.lxDeviceBody .lxDeviceActions .btn {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
@media (max-width: 560px) {
  .lxDeviceSummary { flex-wrap: wrap; }
  .lxDeviceStatus { max-width: none; order: 3; width: 100%; }
  .lxDeviceChev { margin-left: auto; }
}
.lxSpoilerBody .lxInfoRow {
  padding: 8px 0;
  gap: 8px;
}
.lxSpoilerBody .lxInfoRow small { font-size: 10px; margin-bottom: 1px; }
.lxSpoilerBody .lxInfoRow b { font-size: 13px; }
.lxSpoilerBody .lxStatusActive,
.lxSpoilerBody .lxStatusPending {
  padding: 3px 8px; font-size: 11px;
}
.lxSpoilerBody h2, .lxSpoilerBody .sectionHead h2 {
  font-size: 15px !important;
  margin: 8px 0 !important;
}
.lxSpoilerBody .tag { font-size: 10px; padding: 4px 8px; margin-bottom: 6px; }
.lxSpoilerBody .muted, .lxSpoilerBody .mini { font-size: 12.5px; line-height: 1.4; }
.lxSpoilerBody .btn { min-height: 40px; padding: 0 14px; font-size: 13px; border-radius: 11px; }
.lxSpoilerBody .sectionHead { margin-bottom: 8px; }
.pulseIn { animation: fadeInUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }

@media (max-width: 860px) {
  .authWrap { grid-template-columns: 1fr; }
  .grid3, .grid4, .luaxAppStatsV97 { grid-template-columns: 1fr; }
  .quickGrantForm, .grantInline, .mailTestForm { grid-template-columns: 1fr; }
  .sectionHead, .paymentTop, .luaxAppHeroV97 {
    flex-direction: column; align-items: stretch;
  }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn, .actions form, .paymentActions .btn { width: 100%; }
  .payAmount { font-size: 28px; }
  .lxInstructionSteps { grid-template-columns: 1fr; }
  .lxShell { max-width: 720px; }
}

@media (max-width: 640px) {
  :root { --lx-radius: 22px; --lx-nav-h: 82px; }
  body { background-attachment: scroll; }
  body.cabinet {
    background-image:
      radial-gradient(ellipse 130% 58% at 50% -8%, rgba(56, 189, 248, 0.32), transparent 58%),
      radial-gradient(ellipse 100% 48% at 50% 42%, rgba(94, 234, 212, 0.12), transparent 62%),
      radial-gradient(ellipse 90% 42% at 50% 105%, rgba(129, 140, 248, 0.16), transparent 55%);
  }
  .lxDynIsland {
    width: min(92vw, 320px);
  }
  .lxDynIsland.is-open {
    width: min(94vw, 380px);
  }
  .lxDynIslandBlob {
    background: linear-gradient(165deg, #243044 0%, #141922 50%, #0e121a 100%);
    border-color: rgba(186, 230, 253, 0.34);
    box-shadow:
      0 14px 40px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(56, 189, 248, 0.28),
      0 0 32px rgba(56, 189, 248, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  .lxIslandIcon {
    background: rgba(125, 211, 252, 0.14);
    color: #bae6fd;
  }
  .topbar {
    width: 100%; min-height: auto; padding: 10px 14px;
  }
  .topbar::before { height: 64px; }
  .brand span:last-child { display: none; }
  .topbar nav { gap: 4px; }
  .topbar nav a { min-height: 38px; padding: 0 10px; font-size: 12px; }
  .authWrap, .adminWrap, .page, .wrap {
    width: min(92vw, var(--wrap)); padding-top: 22px;
  }
  .cabinetWrap {
    width: min(92vw, var(--wrap)); padding-top: 0px;
  }
  body.auth .authWrap {
    width: min(100% - 24px, 480px);
    min-height: auto;
    padding: 86px 0 96px;
    gap: 14px;
  }
  body.auth .lxLHeader {
    padding: 0 12px;
    height: 60px;
  }
  body.auth .lxBrand { font-size: 16px; }
  body.auth .lxBrand img { width: 30px; height: 30px; border-radius: 10px; }
  body.auth .lxLPill { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
  .panel, .card, .authBox { padding: 18px; border-radius: 22px; }
  body.auth .authBox {
    padding: 22px 18px;
    border-radius: 26px;
    background: rgba(18,16,30,0.82);
    box-shadow: 0 18px 46px rgba(0,0,0,0.32);
  }
  .authBox h1, .adminHero h1, .cabinetHero h1 { font-size: 30px; }
  body.auth .authBox h1 {
    font-size: clamp(30px, 10vw, 38px);
    line-height: 1.04;
    margin: 12px 0 10px;
  }
  body.auth .authBox > .muted {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 16px;
  }
  body.auth .form { margin-top: 16px; gap: 13px; }
  body.auth .field { gap: 7px; }
  body.auth .field label { font-size: 12px; }
  body.auth input, body.auth select, body.auth textarea {
    min-height: 52px;
    padding: 14px 15px;
    border-radius: 16px;
    font-size: 16px;
    background: rgba(0,0,0,0.28);
  }
  body.auth .btn {
    min-height: 52px;
    border-radius: 17px;
    padding: 14px 16px;
    font-size: 15px;
  }
  body.auth .switchAuth,
  body.auth .authLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    line-height: 1.35;
  }
  body.auth .emailCodeLogin,
  body.auth .tgAuthBox,
  body.auth .tgOnlyHint,
  body.auth .choiceCard {
    padding: 14px;
    border-radius: 19px;
  }
  body.auth .choiceGrid,
  body.auth .compactChoiceGrid,
  body.auth .codeActions,
  body.auth .codeRow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body.auth .miniAppAuto {
    align-items: flex-start;
    padding: 13px;
    border-radius: 18px;
  }
  body.auth .miniAppOrb {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }
  body.auth .tgDivider {
    margin-top: 14px;
    font-size: 12px;
  }
  body.auth .tgWidgetWrap {
    overflow: hidden;
  }
  body.auth .supportPanel {
    padding: 16px;
    border-radius: 22px;
    margin-bottom: 0;
    background: rgba(18,16,30,0.58);
  }
  body.auth .supportPanel h2 {
    font-size: 20px;
    margin: 8px 0 6px;
  }
  body.auth .supportPanel .muted {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .inlineForm, .copyBox, .codeRow { flex-direction: column; display: flex; }
  .tableWrap { border-radius: 16px; }
  .table th, .table td { padding: 12px; font-size: 13px; }

  .luaxLandingV107 { width: min(92vw, var(--wrap)); padding-top: 0; }
  .lxHero { padding: 80px 10px 88px; }
  .lxHeroBrand { font-size: clamp(56px, 18vw, 88px); }
  .lxHeroTitle { font-size: clamp(18px, 5vw, 24px); max-width: 16ch; }
  .lxHeroLead { font-size: 15px; }
  .lxHeroBadge { width: 56px; height: 56px; }
  .lxHeroBadge svg { width: 30px; height: 30px; }
  .lxLandingSection { margin-bottom: 56px; }
  .lxSectionHead h2 { font-size: 26px; }
  .lxDeviceGrid,
  .lxTariffFeatureGrid,
  .lxWhyGrid,
  .lxHowGrid { grid-template-columns: 1fr; }
  .lxHowGrid::before { display: none; }
  .lxPlanGrid { grid-template-columns: 1fr; }
  .lxHeroCta { width: 100%; flex-direction: column; }
  .lxHeroCta .lxGradientBtn,
  .lxHeroCta .lxGhostBtn { width: min(100%, 320px); }
  .lxDeviceCue { width: min(100%, 360px); }
  .lxBottomNav { bottom: 10px; width: min(94vw, 430px); }
  .lxNav { height: 74px; }
  .lxNav button { height: 52px; font-size: 10px; }
  .lxNav button svg { width: 21px; height: 21px; }
}

@media (max-width: 420px) {
  .btn { width: 100%; }
  .lxSupport span, .lxBottomNav span { font-size: 10px; }
  .lxModernTiles { grid-template-columns: 1fr; }
  .lxBentoMain { gap: 12px; }
  .lxBentoSub { text-align: left; }
  .lxOsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lxNav { border-radius: 22px 22px 0 0; padding-left: 10px; padding-right: 10px; }
  .lxStep { min-height: auto; }
  .appDownloadGrid, .appAddGrid,
  #luax-connect.lxConnectFiltered .appAddGrid,
  #luax-connect.lxConnectFiltered .appDownloadGrid {
    grid-template-columns: 1fr!important;
  }
}

/* =========================================================
   PRELOADER (v3.2)
   ========================================================= */
.lxPreloader{position:fixed;inset:0;z-index:9999;background:#05040b;display:grid;place-items:center;transition:opacity .5s ease,visibility .5s ease}
.lxPreloader.is-hide{opacity:0;visibility:hidden}
.lxPreloaderStack{text-align:center;display:flex;flex-direction:column;align-items:center;gap:30px}
.lxPreloaderCore{position:relative;width:118px;height:118px;display:grid;place-items:center}
.lxPreloaderTrace{position:absolute;left:50%;top:50%;width:126px;height:126px;pointer-events:none;transform:translate(-50%,-50%)}
.lxTraceTrack{fill:none;stroke:rgba(255,255,255,.045);stroke-width:16;stroke-linejoin:round;stroke-linecap:round}
.lxTraceLine{fill:none;stroke:url(#lxTraceGrad);stroke-width:16;stroke-linejoin:round;stroke-linecap:round;transition:none}
.lxPreloaderTrace::after{content:'';position:absolute;width:0;height:0;overflow:hidden;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><linearGradient id="lxTraceGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%2318e7ff"/><stop offset="100%" stop-color="%235d6dff"/></linearGradient></svg>')}
.lxPreloaderLogo{position:relative;width:66px;height:66px;object-fit:contain;z-index:2;border-radius:18px;animation:lxLogoPulse 2.4s ease-in-out infinite}
@keyframes lxLogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.lxPreloaderText{opacity:0;transform:translateY(8px);animation:lxPreTextIn .5s cubic-bezier(.2,.9,.2,1) .2s forwards}
@keyframes lxPreTextIn{to{opacity:1;transform:translateY(0)}}
.lxPreloaderTitle{color:#f8fbff;font-weight:800;font-size:17px;letter-spacing:-0.5px;margin-bottom:6px;text-shadow:0 0 20px rgba(24,231,255,.2)}
.lxPreloaderSub{color:var(--lx-muted);font-weight:600;font-size:13px;line-height:1.4}
.lxPreloaderDots{display:inline-flex;gap:4px;margin-left:6px;align-items:center;vertical-align:middle}
.lxPreloaderDots i{width:4px;height:4px;border-radius:50%;background:#18e7ff;opacity:.3;animation:lxPreDot 1.4s infinite}
.lxPreloaderDots i:nth-child(2){animation-delay:.2s}
.lxPreloaderDots i:nth-child(3){animation-delay:.4s}
@keyframes lxPreDot{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* =========================================================
   RESPONSIVE ADDITIONS v3
   ========================================================= */
@media (max-width: 640px) {
  .luaxLandingV107 { width: min(92vw, var(--wrap)); }
  .lxLHeader { padding: 0 4vw; }
  .lxHero { padding: 76px 8px 84px; }
  .lxHeroBrand { font-size: clamp(52px, 17vw, 80px); letter-spacing: -0.05em; }
  .lxHeroTitle { font-size: 18px; }
  .lxHeroLead { font-size: 14.5px; }
  .lxLandingSection { margin-bottom: 52px; }
  .lxDeviceGrid,
  .lxTariffFeatureGrid,
  .lxWhyGrid,
  .lxPlanGrid { grid-template-columns: 1fr; }
  .lxBottomNav, .lxCabBottomNav { bottom: 10px; width: min(94vw, 420px); border-radius: 20px; }
  .lxCabActions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lxCabStats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lxCabHero { padding: 20px; gap: 18px; }
  .lxCabStatMain { font-size: 22px; }
  .lxCabCard, .lxPayPanel, .lxConnectCard, .lxTgCard, .lxSupportCard, .lxDevicesCard { padding: 16px; border-radius: 20px; }
  .lxBentoHero { padding: 18px 16px 16px; border-radius: 18px; gap: 14px; }
  .lxBentoVisual { width: 56px; height: 56px; border-radius: 16px; }
  .lxBentoVisual svg { width: 30px; height: 30px; }
  .lxBentoValue { font-size: 28px; }
  .lxBentoStatus { font-size: 11.5px; }
  .lxBentoSub b { font-size: 20px; }
  .lxBentoSub span { font-size: 11px; }
  .cabinetWrap { max-width: min(92vw, 680px); }
}

@media (max-width: 420px) {
  .lxCabActions { grid-template-columns: 1fr; }
  .lxCabActionCard { flex-direction: row; align-items: center; gap: 14px; }
  .lxCabPlanGrid { grid-template-columns: 1fr; }
  .lxBottomNav, .lxCabBottomNav { border-radius: 20px 20px 0 0; bottom: 0; width: 100%; }
}

/* =========================================================
   DYNAMIC ISLAND — legacy morph keyframes (kept for safety)
   ========================================================= */
@keyframes lxIslandMorph {
  0% { transform: scale(1.08); filter: brightness(1.2); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* =========================================================
   DESKTOP (PC) OPTIMIZATIONS FOR LUAX CABINET
   ========================================================= */
@media (min-width: 641px) {
  body.cabinet .cabinetWrap {
    max-width: min(94vw, 960px);
  }
  .lxModernTiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lxBottomNav {
    display: none !important;
  }
  
  /* Top Header Nav Menu */
  .lxHeaderNav {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 100px;
  }
  .lxHeaderNav a {
    color: var(--lx-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: 100px;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  }
  .lxHeaderNav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
  }
  .lxHeaderNav a.active {
    color: #fff;
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
  }
}

@media (max-width: 800px) and (min-width: 641px) {
  .lxHeaderNav {
    gap: 4px;
  }
  .lxHeaderNav a {
    padding: 5px 11px;
    font-size: 12px;
    border: 1px solid transparent;
  }
  .lxHeaderNav a.active {
    padding: 5px 11px;
  }
}

@media (max-width: 640px) {
  .lxHeaderNav {
    display: none !important;
  }
  .lxSupport span {
    display: none !important;
  }
}

.lxInstructionNote {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  color: var(--lx-muted2);
  font-size: 13px;
  line-height: 1.5;
  grid-column: 1 / -1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lxInstructionNote b {
  color: #fff;
}
.lxInstructionNote.is-bare {
  margin-top: 14px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 12px;
}

/* Android TV send card */
.lxTvSendCard {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background:
    linear-gradient(160deg, rgba(129, 140, 248, 0.16), rgba(56, 189, 248, 0.08) 55%, rgba(0, 0, 0, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lxTvSendHead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.lxTvSendIcon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(167, 139, 250, 0.28);
}
.lxTvSendIcon svg { width: 20px; height: 20px; }
.lxTvSendTitle {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
}
.lxTvSendHint {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lx-muted);
}
.lxTvSendForm {
  display: grid;
  gap: 10px;
}
.lxTvCodeInput {
  width: 100%;
  box-sizing: border-box;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(0, 0, 0, 0.34);
  color: #fff;
  padding: 0 16px;
  text-align: center;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.lxTvCodeInput::placeholder {
  letter-spacing: 0.18em;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
}
.lxTvCodeInput:focus {
  border-color: rgba(196, 181, 253, 0.7);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
  background: rgba(0, 0, 0, 0.42);
}
.lxTvSendBtn {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(129, 140, 248, 0.28);
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.2s ease;
}
.lxTvSendBtn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.lxTvSendBtn:hover {
  box-shadow: 0 14px 28px rgba(129, 140, 248, 0.36);
  transform: translateY(-1px);
}
.lxTvSendBtn:active { transform: scale(0.98); }
.lxTvSendBtn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.lxTvStatus {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 650;
}
.lxTvStatus.is-err {
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.25);
  color: #ffbaba;
}
.lxTvStatus.is-ok {
  background: rgba(85, 220, 163, 0.15);
  border: 1px solid rgba(85, 220, 163, 0.35);
  color: #9effbf;
}
.lxTvStatus.is-loading {
  background: rgba(130, 110, 255, 0.12);
  border: 1px solid rgba(130, 110, 255, 0.25);
  color: #d9d7ff;
}
.lxTvAlt {
  margin-top: 4px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.lxTvAltLabelMobile { display: none; }
.lxTvAltMobile { display: none; }
.lxTvAltLabelDesktop { display: inline; }
.lxTvAltDesktop { display: block; }

@media (max-width: 820px) {
  .lxTvAltLabelDesktop { display: none; }
  .lxTvAltDesktop { display: none; }
  .lxTvAltLabelMobile { display: inline; }
  .lxTvAltMobile { display: block; }
}

.lxTvQr {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.lxTvQrLead {
  margin: 0;
  line-height: 1.45;
  color: var(--lx-muted);
  font-size: 13px;
}
.lxTvQrViewport {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 3 / 4;
  max-height: 420px;
  background: #05040b;
  border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.lxTvQrViewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0914;
}
.lxTvQr.is-scanning .lxTvQrViewport video {
  filter: none;
}
.lxTvQr:not(.is-scanning) .lxTvQrViewport video {
  opacity: 0.35;
}
.lxTvQrFrame {
  position: absolute;
  inset: 18% 14%;
  border-radius: 18px;
  border: 2px solid rgba(196, 181, 253, 0.85);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}
.lxTvQrFrame::before,
.lxTvQrFrame::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid #7dd3fc;
}
.lxTvQrFrame::before {
  top: -2px; left: -2px;
  border-right: 0; border-bottom: 0;
  border-top-left-radius: 10px;
}
.lxTvQrFrame::after {
  right: -2px; bottom: -2px;
  border-left: 0; border-top: 0;
  border-bottom-right-radius: 10px;
}
.lxTvQrHint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
}
.lxTvQrActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lxTvQrBtn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  height: 48px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.lxTvQrBtn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.lxTvQrBtnPrimary {
  flex: 1 1 auto;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  color: #fff;
  box-shadow: 0 10px 24px rgba(129, 140, 248, 0.28);
}
.lxTvQrBtnPrimary.is-on {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
}
.lxTvQrBtnGhost {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.1);
}
.lxTvQrStatus {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}
.lxTvQrStatus.is-loading {
  background: rgba(130, 110, 255, 0.12);
  border: 1px solid rgba(130, 110, 255, 0.25);
  color: #d9d7ff;
}
.lxTvQrStatus.is-ok {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #86efac;
}
.lxTvQrStatus.is-err {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}
.lxTvAlt > summary {
  list-style: none;
  padding: 14px 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  outline: none;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
}
.lxTvAlt > summary::-webkit-details-marker { display: none; }
.lxTvAlt > summary svg {
  width: 18px;
  height: 18px;
  opacity: 0.75;
  flex: 0 0 auto;
}
.lxTvAltBody {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  color: var(--lx-muted);
}
.lxTvAltBody > p {
  margin: 12px 0;
  line-height: 1.45;
}
.lxTvAltSteps {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.lxTvAltStep {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 1.4;
}
.lxTvAltStep b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.22);
  color: #e9d5ff;
  font-size: 12px;
  flex: 0 0 auto;
}

.lxTvDesktopHelp {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.lxTvHelpCard {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  margin-top: 12px;
}
.lxMobileInstallNote .lxTvHelpCard {
  margin-top: 4px;
}
.lxSubQrDesktopOnly { display: block; }
@media (max-width: 820px) {
  .lxSubQrDesktopOnly { display: none !important; }
}
.lxTvHelpCard > b {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}
.lxTvHelpCard > p {
  margin: 0;
  line-height: 1.45;
  color: var(--lx-muted);
  font-size: 13px;
}
.lxTvSubQrWrap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lxTvSubQrFrame {
  --lx-qr-r: 16px;
  position: relative;
  display: inline-block;
  padding: 2px;
  border-radius: calc(var(--lx-qr-r) + 2px);
  line-height: 0;
  isolation: isolate;
}
.lxTvSubQrSnakeRing {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.lxTvSubQrSnakeRing::before,
.lxTvSubQrSnakeRing::after {
  content: "";
  position: absolute;
  inset: -55%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 36%,
    #22d3ee 40%,
    #38bdf8 44%,
    #a78bfa 49%,
    #f472b6 53%,
    #fbbf24 57%,
    transparent 62%,
    transparent 100%
  );
  animation:
    lxQrSnakeSpin 5.6s linear infinite,
    lxQrSnakeHue 9s linear infinite;
  will-change: transform, filter;
}
.lxTvSubQrSnakeRing::after {
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 36%,
    #f472b6 40%,
    #fb7185 44%,
    #fbbf24 49%,
    #34d399 53%,
    #22d3ee 57%,
    transparent 62%,
    transparent 100%
  );
  animation-delay: -2.8s, -4.5s;
}
@keyframes lxQrSnakeSpin {
  to { transform: rotate(360deg); }
}
@keyframes lxQrSnakeHue {
  0%   { filter: hue-rotate(0deg) saturate(1.35) brightness(1.15); }
  25%  { filter: hue-rotate(90deg) saturate(1.7) brightness(1.3); }
  50%  { filter: hue-rotate(180deg) saturate(1.4) brightness(1.1); }
  75%  { filter: hue-rotate(270deg) saturate(1.8) brightness(1.25); }
  100% { filter: hue-rotate(360deg) saturate(1.35) brightness(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .lxTvSubQrSnakeRing::before,
  .lxTvSubQrSnakeRing::after {
    animation: none;
    inset: -10%;
  }
  .lxTvSubQrSnakeRing::before { transform: rotate(0deg); }
  .lxTvSubQrSnakeRing::after { transform: rotate(180deg); }
}
.lxTvSubQrHost {
  position: relative;
  z-index: 1;
  padding: 12px;
  border-radius: var(--lx-qr-r);
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
.lxTvSubQrHost img,
.lxTvSubQrHost canvas,
.lxTvSubQrHost table {
  display: block;
  margin: 0 auto;
}
.lxTvSubQrEmpty {
  margin: 8px 0 0;
  text-align: center;
  color: #fca5a5;
  font-size: 13px;
}
.lxTvSubQrLink {
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.85);
  padding: 10px 12px;
  font: 600 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.lxTvLanHint {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.14);
  overflow: hidden;
}
.lxTvLanHint > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
}
.lxTvLanHint > summary::-webkit-details-marker { display: none; }
.lxTvLanHint[open] > summary {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lxTvLanHint .lxTvAltSteps {
  margin: 12px;
}

.lxNoteRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.lxNoteIc {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  color: #7dd3fc;
}

/* Telegram link choice tabs styling */
.lxChoiceTabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 8px;
}
.lxChoiceTabBtn {
  background: none;
  border: none;
  padding: 10px 6px;
  color: var(--lx-muted);
  font-weight: 700;
  font-size: 13px;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  font-family: inherit;
}
.lxChoiceTabBtn.active {
  background: #ffffff;
  color: #080712;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}
.lxTgShellSetup .choiceCard {
  display: none !important;
}
.lxTgShellSetup[data-active-tab="new"] .choiceCard.card-new,
.lxTgShellSetup[data-active-tab="exist_code"] .choiceCard.card-exist-code,
.lxTgShellSetup[data-active-tab="exist_pass"] .choiceCard.card-exist-pass {
  display: flex !important;
  flex-direction: column;
}
@media (max-width: 520px) {
  .lxChoiceTabs {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Perfect alignment and uniform heights/radiuses for all login, register and setup buttons & inputs */
.authBox input,
.authBox .btn,
.lxTgShellSetup input,
.lxTgShellSetup .btn,
.emailCodeLogin input,
.emailCodeLogin .btn {
  height: 48px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
.authBox .btn,
.lxTgShellSetup .btn,
.emailCodeLogin .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.authBox input,
.lxTgShellSetup input,
.emailCodeLogin input {
  line-height: 46px !important;
  display: inline-block !important;
}

/* Premium Empty State Placeholder inside Installation OS Instructions */
.lxEmptyStateNote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(145deg, rgba(251, 113, 133, 0.05) 0%, rgba(18, 16, 30, 0.6) 100%);
  border: 1px solid rgba(251, 113, 133, 0.15);
  border-radius: 24px;
  margin-top: 20px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.3);
}
.lxEmptyStateIcon {
  width: 58px;
  height: 58px;
  background: rgba(251, 113, 133, 0.12);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fb7185;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(251, 113, 133, 0.18);
}
.lxEmptyStateIcon svg {
  width: 28px;
  height: 28px;
}
.lxEmptyStateNote h3 {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px 0;
  letter-spacing: -0.3px;
}
.lxEmptyStateNote p {
  font-size: 14px;
  color: var(--lx-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 44ch;
}

/* Mobile responsive layout for cabinet orders list */
@media (max-width: 480px) {
  .lxCabOrder {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  .lxCabOrder > div {
    width: 100%;
  }
  .lxCabOrder .btn {
    width: 100%;
    margin-top: 4px;
  }
}

/* =========================================================
   ADMIN PANEL v2 — Sidebar + Tabs Layout
   ========================================================= */

/* ---- Overall layout ---- */
.admLayout {
  display: flex;
  gap: 0;
  min-height: 100vh;
  width: min(98vw, 1280px);
  margin: 0 auto;
  padding: 20px 0 60px;
  align-items: flex-start;
}

/* ---- Sidebar ---- */
.admSidebar {
  position: sticky;
  top: 16px;
  width: 220px;
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: rgba(12, 10, 22, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-right: 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.admSidebarLogo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.admLogoFavicon {
  width: 36px; height: 36px; border-radius: 12px;
  flex: 0 0 auto; display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  object-fit: cover;
}
.admSidebarLogo .admLogoText span {
  display: block;
  font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2;
}
.admSidebarLogo .admLogoText small {
  display: block; font-size: 11px; color: var(--lx-muted); font-weight: 500;
}

.admNavItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 14px;
  color: var(--lx-muted2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  text-decoration: none;
  position: relative;
  user-select: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.admNavItem:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.06);
}
.admNavItem.active {
  background: rgba(56, 189, 248,0.18);
  border-color: rgba(56, 189, 248,0.3);
  color: #dbeafe;
}
.admNavItem .admNavIcon {
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 15px; flex: 0 0 auto;
  background: rgba(255,255,255,0.05);
  transition: all 0.2s;
  color: inherit;
}
.admNavItem .admNavIcon .admSvgIcon,
.admSvgIcon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.admNavItem.active .admNavIcon {
  background: rgba(56, 189, 248,0.28);
  color: #7dd3fc;
}
.admNavItem.admNavDanger {
  color: #fb7185;
}
.admNavItem.admNavDanger:hover {
  background: rgba(251,113,133,0.12);
  border-color: rgba(251,113,133,0.25);
  color: #fda4af;
}
.admStatIcon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(56, 189, 248,0.16);
  color: #7dd3fc;
}
.admStatIcon .admSvgIcon {
  width: 20px;
  height: 20px;
}
.admBtnIcon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 6px;
}
.admBtnIcon .admSvgIcon {
  width: 16px;
  height: 16px;
}
#btnVpnSave {
  display: inline-flex;
  align-items: center;
}
.admNavBadge {
  margin-left: auto;
  min-width: 20px; height: 20px;
  background: rgba(251,113,133,0.2);
  color: #fb7185;
  border-radius: 8px;
  font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
  padding: 0 5px;
}

.admSidebarSep {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 6px 4px;
}

.admSidebarFooter {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- Content area ---- */
.admContent {
  flex: 1;
  min-width: 0;
}

/* ---- Tabs ---- */
.admTab { display: none; }
.admTab.active { display: block; min-height: calc(100vh - 60px); }

/* ---- Hero (stats block) ---- */
.admHeroCard {
  background: var(--lx-card);
  border: 1px solid var(--lx-card-border);
  border-radius: var(--lx-radius);
  padding: 22px 26px;
  margin-bottom: 18px;
  backdrop-filter: blur(16px);
}
.admHeroHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.admHeroHead h1 {
  font-size: clamp(20px, 3vw, 28px);
  margin: 6px 0 4px;
  letter-spacing: -0.4px;
}
.admHeroHead .muted { margin: 0; font-size: 13.5px; }
.admHeadActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

/* ---- Stats grid ---- */
.admStatsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.admStatCard {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.2s, transform 0.2s;
}
.admStatCard:hover { border-color: rgba(56, 189, 248,0.3); transform: translateY(-2px); }
.admStatCard small {
  display: block;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--lx-muted); margin-bottom: 8px;
}
.admStatCard b {
  display: block;
  font-size: 30px; font-weight: 900; color: #fff; line-height: 1;
}

/* ---- Tab section card ---- */
.admSection {
  background: var(--lx-card);
  border: 1px solid var(--lx-card-border);
  border-radius: var(--lx-radius);
  padding: 22px 24px;
  margin-bottom: 16px;
  backdrop-filter: blur(14px);
}
.admSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.admSectionHead h2 { margin: 6px 0 4px; font-size: 20px; }
.admSectionHead .muted { margin: 0; font-size: 13px; }

/* ---- Quick grant ---- */
.admQuickGrant {
  background: rgba(56, 189, 248,0.08);
  border: 1px solid rgba(56, 189, 248,0.2);
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.admQuickGrant h3 { margin: 0 0 2px; font-size: 15px; color: #dbeafe; }
.admQuickGrant .muted { font-size: 13px; margin: 0 0 14px; }
.admQGRow {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
}
.admQGRow .field { flex: 1 1 200px; margin: 0; }
.admQGRow select { width: 160px; flex: 0 0 auto; }
.admQGRow .btn { flex: 0 0 auto; white-space: nowrap; height: 50px; }

/* ---- Search ---- */
.admSearch {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admSearch .field { flex: 1 1 220px; margin: 0; }
.admSearch .btn { flex: 0 0 auto; height: 50px; }

/* ---- Selected user card ---- */
.admUserCard {
  background: rgba(56, 189, 248,0.07);
  border: 1px solid rgba(56, 189, 248,0.22);
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.admUserCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admUserCardHead h2 { margin: 4px 0 0; font-size: 18px; }
.admUserInfoGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.admUserInfoCard {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
}
.admUserInfoCard small {
  display: block;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--lx-muted); margin-bottom: 5px;
}
.admUserInfoCard b {
  display: block; font-size: 14px; color: #fff; overflow-wrap: anywhere;
}
.admUserVpnBox {
  display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap;
}
.admUserVpnBox input { flex: 1 1 200px; font-size: 13px; }

/* ---- User actions row ---- */
.admUserActionsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* display:contents ломает submit у форм бан/удаления устройств — только для ряда подписки */
.admUserActionsRow > form { display: contents; }
.admUserActionsRow select {
  width: auto; min-width: 130px; flex: 0 1 auto; height: 46px;
  padding: 0 14px;
}
.admUserActionsRow input[name=expires_at] {
  width: auto; min-width: 180px; flex: 0 1 auto; height: 46px;
}
.admUserActionsRow input[name=vpn_source_link] {
  width: auto; min-width: 240px; flex: 1 1 240px; height: 46px;
}
.admUserActionsRow .btn { flex: 0 0 auto; height: 46px; font-size: 13.5px; padding: 0 16px; white-space: nowrap; }

.admDeviceActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.admDeviceActions form {
  display: inline-flex;
  margin: 0;
}
.admDeviceActions .btn {
  height: 40px;
  font-size: 13px;
  padding: 0 14px;
  white-space: nowrap;
}

/* ---- Tool cards ---- */
.admToolGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.admToolCard {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 20px 22px;
}
.admToolCard h3 { font-size: 15px; margin: 0 0 4px; }
.admToolCard .mini { margin-bottom: 14px; }

/* ---- Inline card (telegram, whitelist) ---- */
.admInlineCard {
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  margin-top: 14px;
}
.admInlineCard h3 { font-size: 15px; margin: 0 0 6px; }

/* ---- Mail status bar ---- */
.admMailBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.admMailDot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.admMailDot.ok { background: var(--lx-green); box-shadow: 0 0 8px rgba(85,220,163,0.6); }
.admMailDot.off { background: var(--lx-red); }

/* ---- Orders mini grid ---- */
.admOrdersMini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 10px;
  margin-top: 14px;
}
.admOrderMini {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
}
.admOrderMini b { display: block; color: #fff; font-size: 14px; margin-bottom: 4px; }
.admOrderMini span { font-size: 13px; color: var(--lx-muted); }

/* =========================================================
   MOBILE — horizontal tab bar
   ========================================================= */
@media (max-width: 900px) {
  .admLayout {
    flex-direction: column;
    padding: 10px 0 80px;
    width: min(96vw, 900px);
    gap: 12px;
  }
  .admSidebar {
    position: static;
    width: 100%;
    flex: none;
    margin-right: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: 18px;
    padding: 8px;
    gap: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .admSidebar::-webkit-scrollbar { display: none; }
  .admSidebarLogo, .admSidebarSep, .admSidebarFooter { display: none; }
  .admNavItem {
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 11px;
    white-space: nowrap;
    flex: 0 0 auto;
    text-align: center;
    width: auto;
  }
  .admNavItem .admNavIcon { width: 28px; height: 28px; }
  .admNavItem .admNavIcon .admSvgIcon { width: 16px; height: 16px; }
  .admNavBadge { position: absolute; top: 3px; right: 3px; }
  .admContent { width: 100%; }
  .admStatsGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admQGRow { flex-direction: column; }
  .admQGRow select, .admQGRow .btn { width: 100%; }
  .admUserInfoGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px) {
  .admStatsGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admToolGrid { grid-template-columns: 1fr; }
  .admHeroHead { flex-direction: column; }
  .admHeadActions { width: 100%; }
  .admHeadActions .btn { flex: 1; }
  .admUserInfoGrid { grid-template-columns: 1fr 1fr; }
  .admUserActionsRow { flex-direction: column; }
  .admUserActionsRow .btn,
  .admUserActionsRow select,
  .admUserActionsRow input[name=expires_at],
  .admUserActionsRow input[name=vpn_source_link] { width: 100%; }
}

@media (max-width: 768px) {
  .responsiveTable thead { display: none; }
  .responsiveTable tbody, .responsiveTable tr, .responsiveTable td { display: block; width: 100%; }
  .responsiveTable tr { margin-bottom: 16px; border: 1px solid var(--lx-card-border); border-radius: 18px; background: rgba(0,0,0,0.15); }
  .responsiveTable td { text-align: left; padding: 14px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,0.03); }
  .responsiveTable td:last-child { border-bottom: none; }
  .responsiveTable td::before { content: attr(data-label); display: block; font-weight: 700; color: var(--lx-muted); font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }
  .responsiveTable td > form, .responsiveTable td > div.mini { margin-top: 4px; }
  .responsiveTable td > form { width: 100%; }
  .responsiveTable td > form .btn { width: 100%; }
}

/* ---- Referral admin panel ---- */
.admRefPanel .admRefStats { margin: 0 0 16px; }
.admRefSearch { margin-bottom: 16px; }
.admRefBox, .admRefCard {
  margin: 0 0 18px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.14);
}
.admRefBoxTitle, .admRefSubTitle {
  margin: 0 0 12px;
  font-size: 16px;
}
.admRefTop { margin-top: 8px; }
.admRefCardHead {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.admRefCardMeta h3 { margin: 0 0 6px; font-size: 18px; word-break: break-word; }
.admRefMetaChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.admRefChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  color: var(--lx-muted);
}
.admRefChip b { color: #fff; font-weight: 700; }
.admRefReferrer { margin: 0; line-height: 1.5; }
.admRefManageBtn { flex: 0 0 auto; }
.admRefFormGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  align-items: end;
}
.admRefFormGrid .field { margin: 0; }
.admRefFormSubmit { height: 50px; }
.admRefMoneyRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.admRefMoneyForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.admRefMoneyForm .field { margin: 0; }
.admRefMoneyForm .btn { width: 100%; height: 44px; }
.admRefCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--lx-muted);
}
.admRefReferrerForm {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.admRefReferrerForm .field { flex: 1 1 220px; margin: 0; }
.admRefReferrerForm .btn { height: 50px; }
.admRefDangerRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.admRefDangerRow form { margin: 0; }
.admRefDangerRow .btn { width: 100%; height: 44px; font-size: 13px; }
.admRefActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.admRefActions .btn {
  height: 40px;
  font-size: 13px;
  padding: 0 12px;
  flex: 1 1 auto;
  min-width: 110px;
  text-align: center;
}

@media (max-width: 768px) {
  .admRefPanel .admSectionHead h2 { font-size: 20px; }
  .admRefPanel .admSectionHead .muted { font-size: 12.5px; }
  .admRefStats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px; }
  .admRefStats .admStatCard { padding: 12px; }
  .admRefStats .admStatCard b { font-size: 16px; word-break: break-word; }
  .admRefCardHead { flex-direction: column; }
  .admRefManageBtn { width: 100%; height: 48px; text-align: center; }
  .admRefFormGrid { grid-template-columns: 1fr 1fr; }
  .admRefFormSubmit { grid-column: 1 / -1; width: 100%; }
  .admRefMoneyRow { grid-template-columns: 1fr; }
  .admRefReferrerForm { flex-direction: column; align-items: stretch; }
  .admRefReferrerForm .btn { width: 100%; }
  .admRefDangerRow { grid-template-columns: 1fr 1fr; }
  .admRefActions { flex-direction: column; }
  .admRefActions .btn { width: 100%; min-width: 0; }
  .responsiveTable td[data-label="Действия"] { align-items: stretch; }
  .responsiveTable td[data-label="Действия"] .admRefActions { margin-top: 2px; }
}

@media (max-width: 420px) {
  .admRefFormGrid { grid-template-columns: 1fr; }
  .admRefDangerRow { grid-template-columns: 1fr; }
  .admRefStats { grid-template-columns: 1fr 1fr !important; }
}



/* LUAX_NO_MOBILE_ZOOM_CABINET */
body.cabinet,
body.auth,
body.admin {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}
@media (max-width: 900px) {
  body.cabinet input,
  body.cabinet select,
  body.cabinet textarea,
  body.auth input,
  body.auth select,
  body.auth textarea,
  body.admin input,
  body.admin select,
  body.admin textarea,
  .authBox input,
  .lxTgShellSetup input,
  .emailCodeLogin input,
  .codeActions input,
  .codeRow input {
    font-size: 16px !important;
  }
}
/* LUAX_CABINET_FACELIFT_V99 */
/* ============ Cabinet facelift: aurora bg, glow cards, premium nav ============ */

/* --- animated aurora backdrop --- */
@keyframes lxAuroraDrift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(-4%, -2%, 0) scale(1); }
}
@keyframes lxAuroraDrift2 {
  0%   { transform: translate3d(3%, 2%, 0) scale(1.05); }
  50%  { transform: translate3d(-3%, -3%, 0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.05); }
}
body.cabinet { position: relative; }
body.cabinet::before,
body.cabinet::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
body.cabinet::before {
  background:
    radial-gradient(ellipse 42% 30% at 18% 12%, rgba(56, 189, 248, 0.14), transparent 60%),
    radial-gradient(ellipse 38% 28% at 82% 18%, rgba(129, 140, 248, 0.12), transparent 60%);
  animation: lxAuroraDrift 26s ease-in-out infinite;
}
body.cabinet::after {
  background:
    radial-gradient(ellipse 36% 26% at 70% 78%, rgba(94, 234, 212, 0.09), transparent 60%),
    radial-gradient(ellipse 30% 24% at 22% 86%, rgba(56, 189, 248, 0.07), transparent 60%);
  animation: lxAuroraDrift2 34s ease-in-out infinite;
}

/* --- custom scrollbar --- */
body.cabinet::-webkit-scrollbar { width: 10px; }
body.cabinet::-webkit-scrollbar-track { background: transparent; }
body.cabinet::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56,189,248,0.35), rgba(129,140,248,0.35));
  border-radius: 99px;
  border: 2px solid rgba(5, 4, 11, 0.9);
}

/* --- gradient page titles --- */
.lxShell .lxTitle {
  background: linear-gradient(115deg, #ffffff 25%, #7dd3fc 70%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- hero: running conic border + breathing aura + shine sweep --- */
@keyframes lxHeroBorderSpin { to { --lx-hero-angle: 360deg; } }
@property --lx-hero-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.lxBentoHero {
  border-color: rgba(125, 211, 252, 0.16);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 0 42px rgba(56, 189, 248, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.lxBentoHero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(
    from var(--lx-hero-angle, 0deg),
    transparent 0%,
    rgba(56, 189, 248, 0.55) 8%,
    rgba(129, 140, 248, 0.4) 16%,
    transparent 26%,
    transparent 55%,
    rgba(94, 234, 212, 0.35) 66%,
    transparent 78%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: lxHeroBorderSpin 7s linear infinite;
  opacity: 0.9;
}
.lxBentoHero.is-off::after {
  background: conic-gradient(
    from var(--lx-hero-angle, 0deg),
    transparent 0%,
    rgba(251, 113, 133, 0.5) 10%,
    transparent 24%,
    transparent 60%,
    rgba(251, 113, 133, 0.28) 72%,
    transparent 84%
  );
}
@keyframes lxAuraBreath {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1.25; }
}
.lxBentoAura { animation: lxAuraBreath 6s ease-in-out infinite; }

/* --- status pills: glow pulse --- */
@keyframes lxStatusGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(85, 220, 163, 0.12); }
  50% { box-shadow: 0 0 20px rgba(85, 220, 163, 0.3); }
}
.lxCleanStatus.is-on { animation: lxStatusGlow 3.2s ease-in-out infinite; }

/* --- cards: inner top light + hover lift/glow --- */
.lxCabCard,
.lxSpoiler,
.lxDeviceSettingsCard {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.25s ease;
}
.lxCabCard:hover,
.lxSpoiler:hover {
  border-color: rgba(125, 211, 252, 0.22);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(56, 189, 248, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* --- quick tiles: gradient icons + hover halo --- */
.lxM-Tile {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.lxM-Tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(120px 90px at var(--lx-tile-x, 80%) 0%, rgba(56, 189, 248, 0.16), transparent 70%);
}
.lxM-Tile:hover::after { opacity: 1; }
.lxM-Tile:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    0 0 20px rgba(56, 189, 248, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lxM-Tile .lxIc {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.16));
  border: 1px solid rgba(125, 211, 252, 0.22);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.lxM-Tile:hover .lxIc {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.22);
}
.lxM-Tile.tg .lxIc {
  background: linear-gradient(135deg, rgba(42, 171, 238, 0.24), rgba(56, 189, 248, 0.14));
}

/* --- bottom nav: premium glass + gradient active pill --- */
.lxBottomNav {
  background: rgba(6, 9, 18, 0.82);
  border: 1px solid rgba(125, 211, 252, 0.14);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(56, 189, 248, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.lxBottomNav a {
  transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.lxBottomNav a.active {
  background: linear-gradient(160deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 16px rgba(56, 189, 248, 0.14);
}
.lxBottomNav a.active svg {
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.6));
}
.lxBottomNav a:active { transform: scale(0.94); }

/* --- desktop header nav: gradient active pill --- */
.lxHeaderNav a.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.26), rgba(129, 140, 248, 0.2));
  border-color: rgba(125, 211, 252, 0.4);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* --- avatar: gradient ring --- */
.lxAvatar {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(129, 140, 248, 0.28));
  border: 1px solid rgba(125, 211, 252, 0.3);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.12);
}

/* --- clean stats: subtle hover --- */
.lxCleanStat {
  transition: border-color 0.22s ease, background 0.22s ease;
}
.lxCleanStat:hover {
  border-color: rgba(125, 211, 252, 0.2);
  background: rgba(8, 14, 24, 0.4);
}

/* --- buttons inside the shell: shine sweep on hover --- */
.lxShell .btn,
.lxShell .luaxAppMiniBtnV97 {
  position: relative;
  overflow: hidden;
}
.lxShell .btn::after,
.lxShell .luaxAppMiniBtnV97::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-18deg);
  transition: left 0.5s ease;
}
.lxShell .btn:hover::after,
.lxShell .luaxAppMiniBtnV97:hover::after { left: 130%; }

/* --- device cards: accent left edge on open --- */
.lxDeviceCard.open {
  box-shadow: inset 2px 0 0 rgba(125, 211, 252, 0.5);
}

/* --- info rows: hover highlight --- */
.lxInfoRow { transition: background 0.2s ease; border-radius: 10px; }
.lxInfoRow:hover { background: rgba(255, 255, 255, 0.02); }

/* --- mobile: fixed pseudo-elements cause banding in iOS/Telegram webview, disable aurora --- */
@media (max-width: 900px), (pointer: coarse) {
  body.cabinet::before,
  body.cabinet::after { display: none; content: none; }
  .lxBentoHero::after { animation-duration: 10s; }
}
@media (prefers-reduced-motion: reduce) {
  body.cabinet::before,
  body.cabinet::after,
  .lxBentoHero::after,
  .lxBentoAura,
  .lxCleanStatus.is-on { animation: none !important; }
  .lxM-Tile:hover, .lxM-Tile:hover .lxIc { transform: none; }
}

/* LUAX_MOTION_LAYER_V1 */
@keyframes lxStaggerIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.lxRipple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(125, 211, 252, 0.28) 0%, rgba(125, 211, 252, 0.08) 45%, transparent 70%);
  transform: scale(0);
  animation: lxRippleGo 0.6s ease-out forwards;
  z-index: 0;
}
@keyframes lxRippleGo {
  to { transform: scale(1); opacity: 0; }
}

/* LUAX_ELEMENTS_V2 */

/* --- greeting block --- */
.lxGreet { margin: 2px 0 16px; animation: lxStaggerIn 0.55s cubic-bezier(0.22,1,0.36,1) both; }
.lxGreetHi {
  margin: 0 0 3px;
  font-family: Syne, Manrope, sans-serif;
  font-size: clamp(22px, 5.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #eef4fb;
}
.lxGreetHi b {
  background: linear-gradient(115deg, #7dd3fc 10%, #a5b4fc 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes lxWave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(16deg); }
  20%, 40% { transform: rotate(-8deg); }
}
.lxGreetWave { display: inline-block; transform-origin: 70% 75%; animation: lxWave 2.6s ease-in-out 0.6s 2; }
.lxGreetDate {
  margin: 0;
  font-size: 13px; font-weight: 600;
  color: var(--lx-muted);
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

/* --- bottom nav glider --- */
.lxNavGlider {
  position: absolute;
  top: 0; left: 0;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(56,189,248,0.24), rgba(129,140,248,0.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 18px rgba(56,189,248,0.18);
  transition: transform 0.38s cubic-bezier(0.3, 1.25, 0.4, 1), width 0.38s cubic-bezier(0.3, 1.25, 0.4, 1), opacity 0.2s ease;
  will-change: transform, width;
  pointer-events: none;
  z-index: 0;
}
.lxBottomNav { position: fixed; }
.lxBottomNav.has-glider a { position: relative; z-index: 1; }
.lxBottomNav.has-glider a.active { background: transparent; box-shadow: none; }

/* --- hero visual: float + radar rings --- */
.lxVisualLive { position: relative; }
@keyframes lxShieldFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.lxVisualLive svg { position: relative; z-index: 1; animation: lxShieldFloat 5.5s ease-in-out infinite; }
@keyframes lxRadar {
  0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1.65); opacity: 0; }
}
.lxRadarRing {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(125, 211, 252, 0.45);
  transform: translate(-50%, -50%) scale(0.55);
  animation: lxRadar 3.2s ease-out infinite;
  pointer-events: none;
}
.lxBentoHero.is-off .lxRadarRing { border-color: rgba(251, 113, 133, 0.4); }

/* --- floating sparks in hero --- */
@keyframes lxSparkFly {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 0.9; }
  85% { opacity: 0.25; }
  100% { transform: translateY(-130px) scale(1.15); opacity: 0; }
}
.lxSpark {
  position: absolute;
  bottom: -6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #bae6fd 0%, rgba(125, 211, 252, 0.5) 60%, transparent 100%);
  box-shadow: 0 0 8px rgba(125, 211, 252, 0.7);
  animation: lxSparkFly 9s linear infinite;
  pointer-events: none;
}
.lxBentoHero.is-off .lxSpark {
  background: radial-gradient(circle, #fecdd3 0%, rgba(251, 113, 133, 0.5) 60%, transparent 100%);
  box-shadow: 0 0 8px rgba(251, 113, 133, 0.6);
}

/* --- per-tile colour identities --- */
.lxModernTiles .lxM-Tile:nth-child(2) .lxIc {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(129, 140, 248, 0.14));
  border-color: rgba(167, 139, 250, 0.28);
  color: #c4b5fd;
  box-shadow: 0 4px 14px rgba(167, 139, 250, 0.12);
}
.lxModernTiles .lxM-Tile:nth-child(2)::after {
  background: radial-gradient(120px 90px at var(--lx-tile-x, 80%) 0%, rgba(167, 139, 250, 0.18), transparent 70%);
}
.lxModernTiles .lxM-Tile:nth-child(3) .lxIc {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.2), rgba(56, 189, 248, 0.12));
  border-color: rgba(94, 234, 212, 0.28);
  color: #5eead4;
  box-shadow: 0 4px 14px rgba(94, 234, 212, 0.12);
}
.lxModernTiles .lxM-Tile:nth-child(3)::after {
  background: radial-gradient(120px 90px at var(--lx-tile-x, 80%) 0%, rgba(94, 234, 212, 0.16), transparent 70%);
}

/* --- hero CTA: gradient prominence --- */
.lxBentoAction {
  background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 26px rgba(56, 189, 248, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: transform 0.22s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}
.lxBentoAction:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 34px rgba(56, 189, 248, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.lxBentoAction:active { transform: scale(0.97); }
.lxBentoHero.is-off .lxBentoAction {
  background: linear-gradient(135deg, #fb7185 0%, #f472b6 100%) !important;
  box-shadow: 0 10px 26px rgba(251, 113, 133, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

@media (prefers-reduced-motion: reduce) {
  .lxGreetWave, .lxVisualLive svg, .lxRadarRing, .lxSpark { animation: none !important; }
  .lxSpark { display: none; }
}



/* === LuaX auth polish: turnstile + passwordless === */
.luax-turnstile-wrap {
  display: flex;
  justify-content: stretch;
  align-items: center;
  margin: 2px 0 10px;
  min-height: 0;
}
.luax-turnstile-wrap .cf-turnstile {
  width: 100% !important;
}
.luax-turnstile-wrap iframe {
  max-width: 100%;
}

body.auth .emailCodeLogin {
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
body.auth .emailCodeLogin .tgDivider {
  margin: 0 0 14px;
}
body.auth .codeLoginFlow {
  display: grid;
  gap: 10px;
}
body.auth .codeVerifyRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
body.auth .codeVerifyRow .codeInput {
  height: 48px;
  margin: 0;
}
body.auth .codeVerifyRow .btn {
  min-width: 112px;
  padding-inline: 18px;
}
body.auth .codeLoginHint:empty {
  display: none;
}
body.auth .codeLoginHint {
  margin: 2px 0 0;
  text-align: left;
}

body.auth .tgAuthBox {
  margin-top: 18px;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  border-radius: 0;
}
body.auth .tgAuthBox .tgDivider {
  margin: 0 0 14px;
}
body.auth .tgAuthBox .mini {
  margin-top: 10px;
  text-align: center;
}

body.auth .authBox .form {
  display: grid;
  gap: 12px;
}
body.auth .authBox .form .field {
  margin: 0;
}

@media (max-width: 560px) {
  body.auth .codeVerifyRow {
    grid-template-columns: 1fr;
  }
  body.auth .codeVerifyRow .btn {
    width: 100%;
    min-width: 0;
  }
}


/* === LuaX auth code-login page === */
body.auth .codeLoginPage {
  display: grid;
  gap: 12px;
}
body.auth .codeStepCard {
  display: grid;
  gap: 12px;
}
body.auth .codeStepCard[hidden] {
  display: none !important;
}
body.auth .codeSentNote {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: rgba(255,255,255,0.86);
  line-height: 1.45;
}
body.auth .codeStepActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  margin-top: 2px;
}
body.auth .linkish {
  background: none;
  border: 0;
  padding: 0;
  color: #7dd3fc;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
}
body.auth .linkish:hover {
  text-decoration: underline;
}
body.auth .codeLoginPage .codeInput {
  letter-spacing: 0.28em;
}