/* ================================================================
   Atlas VPN — Concept C
   Premium light glass UI / responsive desktop + mobile
   Loaded after cyber-neon.css and intentionally overrides it.
   ================================================================ */

:root {
  --bg: #f5f8ff;
  --bg-elev: #ffffff;
  --surface: rgba(255,255,255,.80);
  --surface-2: rgba(247,250,255,.96);
  --border: rgba(72,112,196,.12);
  --border-strong: rgba(72,112,196,.20);
  --text: #14213d;
  --muted: #6d7890;
  --muted-2: #9aa6ba;
  --accent: #2f6df6;
  --accent-2: #68a1ff;
  --accent-glow: rgba(47,109,246,.22);
  --accent-soft: rgba(47,109,246,.09);
  --danger: #ef4444;
  --warn: #f59e0b;
  --info: #2f6df6;
  --purple: #7c5cff;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 20px;
  --r-xl: 26px;
  --shadow: 0 12px 34px rgba(46,76,135,.10);
  --shadow-lg: 0 28px 70px rgba(46,76,135,.14);
  --glow: 0 18px 50px rgba(47,109,246,.18);
}

html, body {
  min-height: 100%;
  height: auto;
  background: #f5f8ff !important;
  color: var(--text) !important;
  overflow-x: hidden;
}

body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1000px 700px at -8% -8%, rgba(86,143,255,.20), transparent 62%),
    radial-gradient(900px 700px at 105% 8%, rgba(121,170,255,.17), transparent 63%),
    radial-gradient(1000px 650px at 58% 104%, rgba(113,153,255,.12), transparent 65%),
    linear-gradient(180deg, #f8fbff 0%, #f3f7ff 55%, #f8fbff 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Explicitly kill previous repeating/tiled background helpers. */
body::before,
body::after,
.stage::before,
.screen::before {
  background-image: none !important;
  mask-image: none !important;
}

.atlas-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.atlas-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .45;
  will-change: transform;
}
.atlas-bg__blob--one {
  width: 560px; height: 560px;
  left: -240px; top: -210px;
  background: rgba(82,142,255,.32);
}
.atlas-bg__blob--two {
  width: 520px; height: 520px;
  right: -230px; top: 10%;
  background: rgba(129,176,255,.24);
}
.atlas-bg__blob--three {
  width: 600px; height: 600px;
  left: 40%; bottom: -390px;
  background: rgba(108,143,255,.20);
}

* { scrollbar-color: rgba(71,106,174,.22) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(71,106,174,.20); border-radius: 8px; }

/* ---------------- Shell ---------------- */
.page-wrap {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px 0 104px;
  display: flex;
  flex-direction: column;
}
.content-area {
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: 0;
}
.content-area.has-nav { padding-bottom: 0; }

.atlas-auth-shell .page-wrap {
  margin-left: calc(238px + max(28px, (100vw - 1440px) / 2));
  margin-right: max(28px, (100vw - 1440px) / 2);
  width: auto;
  max-width: 1180px;
}

/* ---------------- Desktop sidebar ---------------- */
.atlas-sidebar {
  position: fixed;
  z-index: 80;
  top: 22px;
  bottom: 22px;
  left: max(22px, calc((100vw - 1440px) / 2));
  width: 218px;
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  border: 1px solid rgba(92,125,190,.12);
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(30px) saturate(155%);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  box-shadow: 0 26px 70px rgba(54,84,142,.11), inset 0 1px 0 rgba(255,255,255,.9);
}
.atlas-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 8px 14px;
  color: var(--text) !important;
  text-decoration: none !important;
}
.atlas-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #1f67ff, #6da7ff);
  box-shadow: 0 10px 22px rgba(47,109,246,.26), inset 0 1px 0 rgba(255,255,255,.42);
}
.atlas-mark svg { width: 24px; height: 24px; fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atlas-sidebar__wordmark { font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
.atlas-sidebar__wordmark span { color: #2f6df6; }
.atlas-sidebar__nav { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.atlas-sidebar__item {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  border-radius: 14px;
  color: #67738d !important;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none !important;
  transition: .2s ease;
}
.atlas-sidebar__item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.atlas-sidebar__item:hover { color: var(--accent) !important; background: rgba(47,109,246,.055); }
.atlas-sidebar__item.active {
  color: #fff !important;
  background: linear-gradient(135deg, #2e6cf5, #538cff);
  box-shadow: 0 10px 24px rgba(47,109,246,.24);
}
.atlas-sidebar__spacer { flex: 1; min-height: 18px; }
.atlas-sidebar__quick,
.atlas-sidebar__help {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-top: 8px;
  border-radius: 16px;
  border: 1px solid rgba(78,116,191,.12);
  background: rgba(248,251,255,.88);
  color: var(--text) !important;
  text-decoration: none !important;
}
.atlas-sidebar__quick:hover,
.atlas-sidebar__help:hover { border-color: rgba(47,109,246,.24); transform: translateY(-1px); }
.atlas-sidebar__quick-icon {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(47,109,246,.14), rgba(104,161,255,.15));
  color: var(--accent);
}
.atlas-sidebar__quick-icon svg,
.atlas-sidebar__help > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.atlas-sidebar__quick > span:last-child,
.atlas-sidebar__help > span { display: flex; flex-direction: column; min-width: 0; }
.atlas-sidebar__quick strong,
.atlas-sidebar__help strong { font-size: 11.5px; font-weight: 750; }
.atlas-sidebar__quick small,
.atlas-sidebar__help small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.atlas-sidebar__help { justify-content: space-between; }
.atlas-sidebar__help > svg { color: #6e88c4; flex-shrink: 0; }

/* ---------------- Header / topbar ---------------- */
.topbar,
.hero-topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 13px 16px;
  border: 1px solid rgba(78,116,191,.12) !important;
  border-radius: 21px !important;
  background: rgba(255,255,255,.76) !important;
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 16px 42px rgba(53,81,137,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #2b69f6, #6ca4ff) !important;
  box-shadow: 0 10px 24px rgba(47,109,246,.24) !important;
  filter: none !important;
}
.brand-logo svg { stroke: white !important; width: 20px !important; height: 20px !important; }
.brand-name { color: var(--text) !important; font-size: 17px !important; font-weight: 800 !important; }
.brand-name .sub { color: var(--accent) !important; }
.topbar-title { color: var(--text) !important; font-size: 18px !important; font-weight: 760 !important; }
.back-btn, .icon-btn, .btn-icon {
  background: rgba(248,251,255,.92) !important;
  color: #5c6984 !important;
  border: 1px solid rgba(78,116,191,.12) !important;
  box-shadow: 0 5px 14px rgba(61,88,142,.05);
}
.back-btn:hover, .icon-btn:hover, .btn-icon:hover { color: var(--accent) !important; border-color: rgba(47,109,246,.25) !important; }

/* Cabinet title replacement on large screens. */
body[data-page="cabinet"] .topbar .brand { display: none; }
body[data-page="cabinet"] .topbar::before {
  content: "Добро пожаловать!";
  display: block;
  flex: 1;
  color: var(--text);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.025em;
}
body[data-page="cabinet"] .topbar::after {
  content: "Ваша безопасность и приватность — наш приоритет";
  position: absolute;
  left: 16px;
  margin-top: 34px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}
body[data-page="cabinet"] .topbar { position: relative; padding-top: 10px; padding-bottom: 10px; }

/* ---------------- Cards ---------------- */
.card,
.stat-card,
.list-item,
.accordion-item,
.segment,
.tariff-card,
.active-sub,
.stats-row .s-item {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(78,116,191,.11) !important;
  color: var(--text) !important;
  box-shadow: 0 14px 34px rgba(54,83,139,.075), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter: blur(22px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
}
.card.elevated,
.tariff-card.popular {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(242,247,255,.88)) !important;
  border-color: rgba(47,109,246,.18) !important;
}
.card:hover,
.tariff-card:hover,
.list-item:hover { border-color: rgba(47,109,246,.19) !important; }
.section-head { margin: 22px 4px 11px !important; }
.section-head h3 { color: var(--text) !important; font-size: 15px !important; font-weight: 800 !important; }
.section-head .link { color: var(--accent) !important; }

/* ---------------- Text / fields ---------------- */
.card-title, .tariff-name, .list-item-title, .feature-title, .tl-title,
.modal-title, .notif-body .nb-title, .promo-title, .sub-name, .active-sub-name,
.balance-amount, .stat-card .value, .settings-label, .settings-value,
.accordion-head .q { color: var(--text) !important; text-shadow: none !important; }
.tariff-desc, .tariff-price .unit, .tariff-features li, .period,
.list-item-sub, .feature-sub, .tl-sub, .modal-subtitle,
.balance-label, .balance-meta, .active-sub-meta, .sub-expires,
.accordion-body-inner, .field-label, .bottom-note { color: var(--muted) !important; }

.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  background: rgba(248,251,255,.92) !important;
  border-color: rgba(78,116,191,.13) !important;
  color: var(--text) !important;
}
.input::placeholder, input::placeholder, textarea::placeholder { color: #a3afc2 !important; }
.input:focus, input:focus, textarea:focus, select:focus {
  border-color: rgba(47,109,246,.46) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(47,109,246,.09) !important;
  outline: none !important;
}

/* ---------------- Buttons ---------------- */
.btn-primary, .balance-btn, .modal-btn.primary, .btn-buy, .lottery-badge {
  background: linear-gradient(135deg, #2e6cf5, #5590ff) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(47,109,246,.24) !important;
  text-shadow: none !important;
}
.btn-primary:hover, .balance-btn:hover { box-shadow: 0 16px 36px rgba(47,109,246,.30) !important; transform: translateY(-1px); }
.btn-ghost, .action-btn, .modal-btn.secondary {
  background: rgba(248,251,255,.92) !important;
  color: #4f5e7b !important;
  border: 1px solid rgba(78,116,191,.13) !important;
  box-shadow: none !important;
}
.btn-ghost:hover, .action-btn:hover { color: var(--accent) !important; border-color: rgba(47,109,246,.24) !important; background: #fff !important; }

/* ---------------- Balance / cabinet ---------------- */
.balance-card {
  min-height: 116px;
  padding: 22px 24px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.balance-card::before,
.sub-card.pro::before,
.final-cta::before,
.cta-card::before,
.promo-banner::before {
  background: radial-gradient(circle, rgba(62,123,255,.16), transparent 70%) !important;
}
.balance-card::after {
  content: '';
  position: absolute;
  right: 36px;
  top: 50%;
  width: 130px;
  height: 90px;
  transform: translateY(-50%) rotate(-8deg);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(47,109,246,.08), rgba(103,159,255,.20));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  pointer-events: none;
}
.balance-row, .balance-meta, .balance-label { z-index: 1; }
.balance-amount {
  font-size: clamp(30px, 3.2vw, 40px) !important;
  font-weight: 850 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  color: #132246 !important;
}
.balance-btn { z-index: 2; padding: 9px 16px !important; border-radius: 12px !important; }

/* ---------------- Subscription cards ---------------- */
.config-card {
  background: rgba(245,248,255,.96) !important;
  border-color: rgba(78,116,191,.12) !important;
}
.config-card code { color: #285ecf !important; }
.sub-scroll { gap: 14px !important; }
.sub-card {
  border-radius: 20px !important;
  padding: 16px !important;
  overflow: hidden;
}
.sub-card .traffic-circle circle:first-child { stroke: #e5ecf7 !important; }
.sub-card .traffic-center { color: #1c2943 !important; }
.mini-stat {
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(247,250,255,.96);
  border: 1px solid rgba(78,116,191,.09);
}
.mini-stat .ms-lbl { color: #8e9ab0 !important; }
.mini-stat .ms-val { color: #21304d !important; }
.add-sub-card {
  background: linear-gradient(145deg, rgba(246,249,255,.94), rgba(255,255,255,.84)) !important;
  border: 1px dashed rgba(47,109,246,.28) !important;
}
.add-sub-card .add-ic { background: linear-gradient(135deg, #2e6cf5, #6ca5ff) !important; box-shadow: 0 12px 28px rgba(47,109,246,.20) !important; }
.add-sub-card .add-ic svg { stroke: #fff !important; }
.swipe-hint { color: var(--muted-2) !important; }

/* ---------------- Tariffs ---------------- */
.tariff-card {
  padding: 18px !important;
  border-radius: 20px !important;
  min-height: 0 !important;
}
.tariff-card.popular::before {
  background: rgba(47,109,246,.11) !important;
  color: #255fd6 !important;
  border: 1px solid rgba(47,109,246,.15);
  box-shadow: none !important;
}
.tariff-price { margin-bottom: 10px !important; }
.tariff-price .num, .price-amount {
  color: #173160 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  text-shadow: none !important;
}
.tariff-features { border-color: rgba(78,116,191,.10) !important; margin-bottom: 14px !important; }
.tariff-features li { padding: 4px 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; }
.tariff-features li::before {
  background-color: rgba(47,109,246,.09) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6df6' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") !important;
}

/* ---------------- Modal / notifications ---------------- */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(226,235,250,.66) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}
.modal {
  background: rgba(255,255,255,.96) !important;
  color: var(--text) !important;
  border: 1px solid rgba(78,116,191,.13) !important;
  box-shadow: 0 32px 80px rgba(46,74,129,.18) !important;
  border-radius: 24px !important;
}
.modal-handle::after { background: rgba(78,116,191,.18) !important; }
.notif-panel,
.notification-panel {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(78,116,191,.13) !important;
  color: var(--text) !important;
  box-shadow: 0 26px 70px rgba(46,74,129,.16) !important;
}
.notif-item.unread { background: rgba(47,109,246,.055) !important; }
.notif-ic.success, .notif-ic.info { background: rgba(47,109,246,.09) !important; }
.notif-body .nb-title .unread-dot { background: var(--accent) !important; box-shadow: none !important; }
.toast {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-18px) !important;
  max-width: min(460px, calc(100% - 24px));
  background: rgba(255,255,255,.96) !important;
  color: var(--text) !important;
  border: 1px solid rgba(78,116,191,.13) !important;
  box-shadow: 0 18px 45px rgba(46,74,129,.14) !important;
}
.toast.show { transform: translateX(-50%) translateY(0) !important; }
.toast .ic { stroke: var(--accent) !important; }

/* ---------------- Bottom dock ---------------- */
.bottom-nav {
  position: fixed !important;
  z-index: 90 !important;
  bottom: 20px !important;
  left: calc(50% + 115px) !important;
  right: auto !important;
  width: min(630px, calc(100vw - 330px)) !important;
  height: 66px !important;
  transform: translateX(-50%) !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(78,116,191,.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(50,78,132,.14), inset 0 1px 0 rgba(255,255,255,.9) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}
.nav-item { color: #8793aa !important; font-size: 10px !important; }
.nav-item svg { width: 19px !important; height: 19px !important; }
.nav-item.active { color: var(--accent) !important; }
.nav-item.active::before { display: none !important; }
.nav-item.active svg { filter: none !important; }
.nav-item.active .nm { font-weight: 750; }

/* ---------------- Landing ---------------- */
.atlas-public-shell .page-wrap { max-width: 1180px; }
body[data-page="landing"] .hero-topbar { margin-bottom: 18px; }
body[data-page="landing"] .land-hero {
  padding: 44px 28px 36px !important;
  border-radius: 28px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(78,116,191,.11);
  box-shadow: 0 22px 58px rgba(54,83,139,.08);
  backdrop-filter: blur(24px);
}
body[data-page="landing"] .land-hero h1 { color: #14213d !important; font-size: clamp(34px, 5vw, 56px) !important; max-width: 820px; margin-left: auto; margin-right: auto; }
body[data-page="landing"] .land-hero p { max-width: 660px !important; font-size: 15px !important; }
body[data-page="landing"] .land-hero .pill { background: rgba(47,109,246,.08) !important; border-color: rgba(47,109,246,.14) !important; color: #2f6df6 !important; }
body[data-page="landing"] .land-hero .btns { max-width: 520px; margin: 0 auto; flex-direction: row !important; }
body[data-page="landing"] .plan-grid { gap: 14px !important; }
body[data-page="landing"] .feature-card { min-height: 76px; }

/* ---------------- Utilities ---------------- */
.badge-success, .sub-status, .active-sub .badge-success { background: rgba(32,189,111,.10) !important; color: #16985d !important; }
.badge-warn { background: rgba(245,158,11,.11) !important; color: #b87505 !important; }
.badge-danger { background: rgba(239,68,68,.09) !important; color: #d53a3a !important; }
.head-badge, .count-pill, .tariff-badge { background: rgba(47,109,246,.08) !important; color: #2b65df !important; border-color: rgba(47,109,246,.14) !important; }
.feature-ic, .active-sub-ic { background: rgba(47,109,246,.08) !important; border-color: rgba(47,109,246,.13) !important; }
.feature-ic svg, .active-sub-ic svg { stroke: var(--accent) !important; }

/* ===================== Desktop ===================== */
@media (min-width: 1024px) {
  body[data-page="cabinet"] .balance-card { margin-bottom: 18px; }
  body[data-page="cabinet"] .promo-banner { max-width: 100%; }
  body[data-page="cabinet"] .sub-scroll-wrap { overflow: visible; }
  body[data-page="cabinet"] .sub-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 4px !important;
  }
  body[data-page="cabinet"] .sub-card,
  body[data-page="cabinet"] .add-sub-card {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    scroll-snap-align: none !important;
  }
  body[data-page="cabinet"] .sub-card { min-height: 260px; }
  body[data-page="cabinet"] .swipe-hint,
  body[data-page="cabinet"] .sub-dots { display: none !important; }

  body[data-page="tariffs"] .tariffs-grid,
  body[data-page="landing"] .plan-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  body[data-page="tariffs"] .tariffs-grid .tariff-card,
  body[data-page="landing"] .plan-grid .tariff-card {
    height: auto !important;
    min-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
  }
  body[data-page="tariffs"] .tariffs-grid .tariff-card .btn,
  body[data-page="landing"] .plan-grid .tariff-card .btn { margin-top: auto !important; }

  .notif-panel { top: 104px !important; right: max(24px, calc((100vw - 1440px) / 2)) !important; }
}

/* ===================== Tablet ===================== */
@media (max-width: 1200px) and (min-width: 821px) {
  .atlas-sidebar { width: 196px; }
  .atlas-auth-shell .page-wrap { margin-left: 226px; margin-right: 22px; }
  .bottom-nav { left: calc(50% + 96px) !important; width: min(590px, calc(100vw - 280px)) !important; }
  body[data-page="cabinet"] .sub-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="tariffs"] .tariffs-grid,
  body[data-page="landing"] .plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ===================== Mobile ===================== */
@media (max-width: 820px) {
  body { background-attachment: scroll !important; }
  .atlas-sidebar { display: none !important; }
  .atlas-auth-shell .page-wrap,
  .page-wrap {
    width: calc(100% - 20px) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 10px 0 88px !important;
  }
  .topbar, .hero-topbar {
    min-height: 58px !important;
    padding: 9px 10px !important;
    margin-bottom: 11px !important;
    border-radius: 18px !important;
  }
  body[data-page="cabinet"] .topbar .brand { display: flex !important; }
  body[data-page="cabinet"] .topbar::before,
  body[data-page="cabinet"] .topbar::after { display: none !important; }
  .brand-logo { width: 35px !important; height: 35px !important; border-radius: 11px !important; }
  .brand-name { font-size: 15px !important; }

  .balance-card { min-height: 104px; padding: 16px !important; border-radius: 18px !important; }
  .balance-card::after { width: 95px; height: 72px; right: 12px; opacity: .6; }
  .balance-amount { font-size: 29px !important; }
  .balance-btn { padding: 8px 12px !important; font-size: 11px !important; }

  .sub-scroll {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
  .sub-card { flex: 0 0 88% !important; scroll-snap-align: start !important; min-height: 0 !important; }
  .add-sub-card { flex: 0 0 76% !important; }
  .swipe-hint { display: flex !important; }

  body[data-page="tariffs"] .tariffs-grid,
  body[data-page="landing"] .plan-grid { grid-template-columns: 1fr !important; }
  .tariff-card { min-height: 0 !important; }

  .bottom-nav {
    left: 50% !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 68px !important;
    border-radius: 20px 20px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
  .home-ind { display: none !important; }

  .modal { width: calc(100% - 20px) !important; max-width: 480px !important; border-radius: 22px !important; padding: 16px !important; }
  .notif-panel { top: 68px !important; left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; }
  body[data-page="landing"] .land-hero { padding: 28px 18px 24px !important; border-radius: 22px; }
  body[data-page="landing"] .land-hero .btns { flex-direction: column !important; }
  body[data-page="landing"] .hero-nav { display: none !important; }
}

@media (max-width: 420px) {
  .page-wrap { width: calc(100% - 14px) !important; }
  .card, .tariff-card { border-radius: 17px !important; }
  .sub-card { flex-basis: 92% !important; }
  .balance-row { gap: 7px !important; }
  .balance-btn { padding: 8px 10px !important; }
  .bottom-nav { padding-left: 4px !important; padding-right: 4px !important; }
  .nav-item .nm { font-size: 9px !important; }
}

/* Public auth/payment pages keep a focused card width instead of stretching. */
body[data-page="login"] .page-wrap,
body[data-page="register"] .page-wrap,
body[data-page="forgot"] .page-wrap,
body[data-page="reset-password"] .page-wrap,
body[data-page="payment-success"] .page-wrap,
body[data-page="topup"] .page-wrap {
  width: min(480px, calc(100% - 24px));
  max-width: 480px;
}
body[data-page="login"] .soc-btn,
body[data-page="register"] .soc-btn {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(67,104,177,.13) !important;
  box-shadow: 0 8px 20px rgba(46,76,135,.06);
}
body[data-page="login"] .soc-btn img,
body[data-page="register"] .soc-btn img { filter: none !important; }
body[data-page="login"] .soc-btn svg,
body[data-page="register"] .soc-btn svg { stroke: #2f6df6 !important; }
body[data-page="login"] .checkbox svg,
body[data-page="register"] .checkbox svg { stroke: #fff !important; }
body[data-page="login"] .reg-link {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(67,104,177,.13) !important;
}
body[data-page="landing"] .hero-nav a {
  color: #66738d !important;
  background: rgba(248,251,255,.92) !important;
  border-color: rgba(67,104,177,.11) !important;
}
body[data-page="landing"] .hero-nav a:hover { color: var(--accent) !important; border-color: rgba(47,109,246,.22) !important; }
body[data-page="instructions"] .client-item:hover { border-color: rgba(47,109,246,.24) !important; }
body[data-page="instructions"] .client-link { border-color: rgba(47,109,246,.15) !important; }
body[data-page="transactions"] .transactions-card { background: rgba(255,255,255,.86) !important; border-color: rgba(67,104,177,.11) !important; box-shadow: 0 10px 28px rgba(46,76,135,.06); }
body[data-page="transactions"] .tx-amount.plus { color: #2f6df6 !important; }

/* Support chat and loaders — Concept C light treatment. */
body[data-page="support"] .chat-wrap.active {
  background: rgba(255,255,255,.56) !important;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(67,104,177,.10);
  box-shadow: 0 18px 46px rgba(46,76,135,.07);
}
body[data-page="support"] .chat-top,
body[data-page="support"] .chat-bot {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(67,104,177,.10) !important;
}
body[data-page="support"] .chat-top .cnum,
body[data-page="support"] .sys-msg,
body[data-page="support"] .chat-bot .cact,
body[data-page="support"] .chat-bot .cinp {
  background: #f7faff !important;
  border-color: rgba(67,104,177,.11) !important;
  color: #65738d !important;
}
body[data-page="support"] .csender,
body[data-page="support"] .ctime,
body[data-page="support"] .chat-top .cnum { color: #8a97ad !important; }
body[data-page="support"] .cmsg.user .cbub {
  background: #f6f9ff !important;
  border-color: rgba(67,104,177,.12) !important;
  color: #24324d !important;
}
body[data-page="support"] .cmsg.admin .cbub {
  background: rgba(47,109,246,.09) !important;
  border-color: rgba(47,109,246,.16) !important;
  color: #22304a !important;
}
body[data-page="support"] .cmsg.user .cav { background: rgba(47,109,246,.09) !important; border-color: rgba(47,109,246,.15) !important; color: #2f6df6 !important; }
body[data-page="support"] .chat-bot .cact.active { background: rgba(47,109,246,.09) !important; border-color: rgba(47,109,246,.20) !important; color: #2f6df6 !important; }
body[data-page="support"] .chat-bot .cinp textarea { color: #14213d !important; }
body[data-page="support"] .chat-bot .cinp textarea::placeholder { color: #a2aec1 !important; }
body[data-page="support"] .chat-bot .snd { background: linear-gradient(135deg,#2f6df6,#5d91ff) !important; color:#fff !important; box-shadow: 0 8px 20px rgba(47,109,246,.20) !important; }
body[data-page="support"] .drop-menu2 { background: rgba(255,255,255,.97) !important; border-color: rgba(67,104,177,.12) !important; box-shadow: 0 20px 50px rgba(46,76,135,.14); }
body[data-page="support"] .drop-i2 { border-color: rgba(67,104,177,.08) !important; }
body[data-page="support"] .key-block .kb-code { background: #fffaf0 !important; color:#a26906 !important; }
body[data-page="support"] .modal-tab.active { color:#fff !important; }
body[data-page="support"] .loading-overlay {
  background: rgba(236,242,253,.92) !important;
  backdrop-filter: blur(12px) !important;
}
body[data-page="support"] .loading-spinner { border-color: rgba(47,109,246,.14) !important; border-top-color:#2f6df6 !important; }
body[data-page="support"] .loading-text { color:#65738d !important; }

/* ---- Atlas brand mark + referral sidebar refinements (2026-08-31) ---- */
.atlas-mark {
  overflow: hidden;
  background: linear-gradient(145deg, #2b69f6, #6ca4ff);
}
.atlas-mark img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(12,75,220,.14));
}
.brand-logo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #2b69f6, #6ca4ff) !important;
}
.brand-logo > svg { display: none !important; }
.brand-logo::after {
  content: "";
  width: 78%;
  height: 78%;
  display: block;
  background: url('/assets/atlas-logo-mark.png') center / contain no-repeat;
}
.atlas-sidebar__referral {
  background: linear-gradient(145deg, rgba(244,248,255,.98), rgba(234,242,255,.94));
  border-color: rgba(47,109,246,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 10px 24px rgba(47,109,246,.07);
}
.atlas-sidebar__referral .atlas-sidebar__quick-icon {
  background: linear-gradient(135deg, #2f6df6, #68a1ff);
  color: #fff;
  box-shadow: 0 8px 18px rgba(47,109,246,.22);
}
.atlas-sidebar__referral small { line-height: 1.35; }

/* New supplied Atlas A mark: keep its blue gradient visible on light UI. */
.atlas-mark,
.brand-logo {
  background: linear-gradient(145deg, rgba(244,248,255,.98), rgba(232,241,255,.96)) !important;
  border: 1px solid rgba(47,109,246,.10);
  box-shadow: 0 10px 24px rgba(47,109,246,.10), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.atlas-mark img { width: 31px; height: 31px; }
.brand-logo::after { width: 82%; height: 82%; }

/* ================================================================
   Atlas blue polish — remove leftover legacy green glow
   ================================================================ */
.brand-logo,
.atlas-mark,
.feature-ic,
.active-sub-ic,
.page-hero .hero-ic,
.verify-hero .vh-ic,
.success-hero .sh-ic,
.empty-icon svg,
.final-cta .em,
.promo-hero .gift,
.final-card .rocket {
  filter: drop-shadow(0 8px 18px rgba(47,109,246,.18)) !important;
}

.feature-ic,
.active-sub-ic,
.page-hero .hero-ic,
.verify-hero .vh-ic,
.success-hero .sh-ic,
.tip-green,
.pi-green,
.vc-green {
  background: rgba(47,109,246,.09) !important;
  border-color: rgba(47,109,246,.16) !important;
  color: #2f6df6 !important;
}
.feature-ic svg,
.active-sub-ic svg,
.page-hero .hero-ic svg,
.verify-hero .vh-ic svg,
.success-hero .sh-ic svg,
.tip-green svg,
.pi-green svg,
.vc-green svg {
  stroke: #2f6df6 !important;
  color: #2f6df6 !important;
  filter: drop-shadow(0 3px 8px rgba(47,109,246,.18)) !important;
}

body[data-page="support"] .chat-bot .snd {
  background: linear-gradient(135deg,#2e6cf5,#5590ff) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(47,109,246,.24) !important;
}
body[data-page="support"] .chat-bot .cact.active,
body[data-page="support"] .chat-bot .cinp:focus-within {
  border-color: rgba(47,109,246,.34) !important;
}
body[data-page="support"] .chat-bot .cact.active {
  background: rgba(47,109,246,.10) !important;
  color: #2f6df6 !important;
}

/* Real mandatory consent checkboxes on registration */
body[data-page="register"] .consent-card {
  display: grid;
  gap: 12px;
}
body[data-page="register"] .native-consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  user-select: none;
}
body[data-page="register"] .native-consent input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}
body[data-page="register"] .native-consent__box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1.5px solid rgba(70,104,174,.26);
  background: rgba(248,251,255,.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body[data-page="register"] .native-consent__box svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .16s ease, transform .16s ease;
}
body[data-page="register"] .native-consent input:checked + .native-consent__box {
  background: linear-gradient(135deg,#2e6cf5,#5590ff);
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(47,109,246,.23);
}
body[data-page="register"] .native-consent input:checked + .native-consent__box svg {
  opacity: 1;
  transform: scale(1);
}
body[data-page="register"] .native-consent input:focus-visible + .native-consent__box {
  box-shadow: 0 0 0 4px rgba(47,109,246,.11), 0 7px 18px rgba(47,109,246,.18);
}
body[data-page="register"] .native-consent:active .native-consent__box { transform: scale(.94); }
body[data-page="register"] .native-consent__text {
  color: #5f6c84 !important;
  font-size: 12.5px;
  line-height: 1.5;
}
body[data-page="register"] .native-consent__text a {
  color: #2f6df6 !important;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(47,109,246,.30);
  text-underline-offset: 2px;
}
body[data-page="register"] #submitBtn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}


/* =================================================================
   Atlas logo lockup — clean mark, no backing tile (2026-08-31)
   ================================================================= */
.atlas-sidebar__brand,
.topbar .brand,
.hero-topbar .brand,
.brand {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 10px !important;
  min-width: 0;
}

.atlas-mark,
.brand-logo {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex: 0 0 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}

.atlas-mark img {
  width: 36px !important;
  height: 36px !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 5px 10px rgba(47,109,246,.16)) !important;
}

.brand-logo > svg { display: none !important; }
.brand-logo::after {
  content: "" !important;
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  background: url('/assets/atlas-logo-mark.png') center / contain no-repeat !important;
  filter: drop-shadow(0 5px 10px rgba(47,109,246,.16)) !important;
}

.atlas-sidebar__wordmark,
.brand-name {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: #15223d !important;
  font-weight: 850 !important;
  letter-spacing: -.03em !important;
}
.atlas-sidebar__wordmark { font-size: 17px !important; text-transform: uppercase; }
.atlas-sidebar__wordmark span,
.brand-name .sub { color: #2f6df6 !important; }

@media (max-width: 820px) {
  .atlas-mark,
  .brand-logo {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }
  .atlas-mark img,
  .brand-logo::after { width: 32px !important; height: 32px !important; }
  .brand-name { font-size: 15px !important; }
}