* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --blue: #0A84FF;
  --blue2: #005BFF;
  --white: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --line: rgba(255,255,255,.18);
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #01040a;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body {
  background: #01040a;
}

.svgFilters {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(0,132,255,.42), transparent 34%),
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(180deg, #071329 0%, #02050d 48%, #000 100%);
  overflow: hidden;
}

.bg-orb {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .45;
  animation: orbFloat 8s ease-in-out infinite alternate;
}

.bg-orb.one {
  right: -120px;
  top: -90px;
  background: #0077ff;
}

.bg-orb.two {
  left: -150px;
  bottom: 80px;
  background: #185bff;
  animation-delay: -2s;
  opacity: .24;
}

@keyframes orbFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-25px,25px,0) scale(1.12); }
}

.grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 84%);
}

.app {
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin: 0 auto;
  padding: 22px 16px 116px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.overline {
  letter-spacing: 6px;
  color: rgba(255,255,255,.50);
  font-size: 11px;
  font-weight: 850;
  margin: 2px 0 12px;
}

.brandLogo {
  width: 152px;
  height: 110px;
  border-radius: 32px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brandLogo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 35px rgba(0,132,255,.42));
}

.brandLogo span {
  display: none;
  line-height: .82;
  font-style: italic;
  font-size: 38px;
  font-weight: 1000;
}

.brandLogo span b {
  color: var(--blue);
  font-size: 42px;
}

.brandLogo.fallbackLogo span {
  display: block;
}

.brandSide p {
  margin: 14px 0 0;
  max-width: 300px;
  color: var(--muted);
  line-height: 1.38;
  font-size: 16px;
  font-weight: 650;
}

.tapBtn {
  margin-top: 26px;
  min-width: 124px;
  border: 0;
  border-radius: 22px;
  padding: 15px 14px;
  color: #fff;
  font-weight: 950;
  background:
    linear-gradient(145deg, rgba(36,145,255,.82), rgba(0,64,180,.62)),
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.34), transparent 35%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 20px 55px rgba(0,110,255,.34);
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
}

.glass-strong {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.065) 44%, rgba(255,255,255,.12)),
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.28), transparent 34%),
    radial-gradient(circle at 94% 6%, rgba(0,132,255,.24), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 30px 90px rgba(0,0,0,.52);
  backdrop-filter: blur(34px) saturate(210%);
  -webkit-backdrop-filter: blur(34px) saturate(210%);
}

.glass-strong::before {
  content: "";
  position: absolute;
  inset: -55%;
  background:
    linear-gradient(120deg, transparent 32%, rgba(255,255,255,.28) 43%, transparent 56%),
    radial-gradient(circle at 45% 45%, rgba(255,255,255,.13), transparent 38%);
  transform: rotate(14deg);
  opacity: .78;
  filter: url(#liquidGlassStrong);
  animation: glassMove 6s ease-in-out infinite alternate;
  pointer-events: none;
}

.glass-strong::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.09);
  pointer-events: none;
}

@keyframes glassMove {
  from { transform: translateX(-18px) rotate(12deg); }
  to { transform: translateX(22px) rotate(16deg); }
}

.screen {
  display: none;
}

.screen.active {
  display: block;
  animation: screenEnter .36s cubic-bezier(.2,.9,.2,1) both;
}

.screen.leaving {
  display: block;
  position: absolute;
  pointer-events: none;
  animation: screenLeave .22s ease both;
}

@keyframes screenEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.975);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes screenLeave {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(.985);
    filter: blur(8px);
  }
}

.accessCard,
.card {
  border-radius: 32px;
  padding: 22px;
  margin-bottom: 14px;
}

.accessCard > *,
.card > * {
  position: relative;
  z-index: 1;
}

.accessCard {
  min-height: 210px;
}

.accessText span,
.mini {
  display: block;
  color: rgba(255,255,255,.56);
  font-size: 12px;
  letter-spacing: .5px;
  font-weight: 900;
  margin-bottom: 8px;
}

h1, h2 {
  margin: 0;
  letter-spacing: -1.2px;
  font-weight: 1000;
}

h1 {
  font-size: 29px;
  padding-right: 72px;
}

h2 {
  font-size: 25px;
}

p {
  color: var(--muted);
  line-height: 1.43;
  font-weight: 650;
}

.accessText p {
  margin: 8px 0 0;
}

.statusBubble {
  position: absolute;
  right: 20px;
  top: 24px;
  z-index: 2;
  width: 62px;
  height: 62px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(62,165,255,.98), rgba(0,83,255,.96)),
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.35), transparent 32%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 20px 58px rgba(0,111,255,.48);
  font-size: 30px;
  font-weight: 1000;
}

.mainBtn,
.deviceBtn,
.copyBtn {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 21px;
  padding: 15px 16px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.075)),
    radial-gradient(circle at 24% 0%, rgba(255,255,255,.32), transparent 35%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 16px 45px rgba(0,0,0,.30);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  font-size: 15px;
  font-weight: 950;
}

.mainBtn {
  width: 100%;
  margin-top: 22px;
  background:
    linear-gradient(145deg, rgba(40,150,255,.98), rgba(0,79,255,.96)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.40), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 18px 58px rgba(0,111,255,.45);
}

.liquid-press {
  position: relative;
  overflow: hidden;
  transition:
    transform .18s cubic-bezier(.2,.9,.2,1),
    filter .18s ease,
    box-shadow .18s ease;
}

.liquid-press::before {
  content: "";
  position: absolute;
  inset: -75%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.30), transparent 57%);
  transform: rotate(16deg);
  opacity: .75;
  filter: url(#liquidGlassSoft);
  pointer-events: none;
}

.liquid-press:active {
  transform: scale(.955);
  filter: brightness(1.18) saturate(1.18);
}

.liquid-press:active::before {
  animation: pressWave .32s ease both;
}

@keyframes pressWave {
  from { transform: translateX(-24px) rotate(16deg); opacity: .45; }
  to { transform: translateX(36px) rotate(16deg); opacity: .95; }
}

.sectionHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 4px 12px;
}

.sectionHead h2 {
  font-size: 24px;
}

.sectionHead b {
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,111,255,.23);
  border: 1px solid rgba(90,160,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.keysList {
  display: grid;
  gap: 11px;
}

.keyCard {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.052)),
    radial-gradient(circle at 90% 0%, rgba(0,132,255,.18), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 20px 58px rgba(0,0,0,.34);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
}

.keyCard::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.16), transparent 55%);
  filter: url(#liquidGlassSoft);
  opacity: .65;
  pointer-events: none;
}

.keyTop {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.keyTitle {
  font-size: 19px;
  font-weight: 1000;
  margin-bottom: 5px;
}

.keyMeta {
  color: rgba(255,255,255,.56);
  font-weight: 720;
  font-size: 13px;
}

.daysBadge {
  height: fit-content;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(20,220,120,.17);
  color: #41f28a;
  font-size: 12px;
  font-weight: 1000;
}

.daysBadge.bad {
  background: rgba(255,70,90,.17);
  color: #ff6174;
}

.keyText {
  display: none;
}

.copyBtn {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 13px;
  background: rgba(255,255,255,.10);
}

.empty {
  border-radius: 27px;
  padding: 28px 18px;
  text-align: center;
  color: rgba(255,255,255,.58);
}

.deviceGrid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.deviceBtn.active {
  background:
    linear-gradient(145deg, rgba(40,150,255,.96), rgba(0,79,255,.86)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.36), transparent 34%);
}

.instructionBox {
  animation: instructionIn .28s ease both;
}

.instructionText {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.step {
  padding: 14px;
  border-radius: 19px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  font-weight: 750;
  line-height: 1.35;
}

@keyframes instructionIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.infoLine {
  margin-top: 12px;
  padding: 15px;
  border-radius: 19px;
  background: rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.infoLine span {
  color: rgba(255,255,255,.55);
  font-weight: 800;
}

.infoLine b {
  font-weight: 1000;
}

.refGrid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.refGrid div {
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}

.refGrid b {
  display: block;
  font-size: 30px;
  font-weight: 1000;
}

.refGrid span {
  color: rgba(255,255,255,.56);
  font-size: 13px;
  font-weight: 800;
}

.tabbar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
  max-width: 540px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 8px;
  border-radius: 32px;
}

.tabbar::before {
  animation-duration: 4s;
}

.tab {
  border: 0;
  border-radius: 24px;
  padding: 11px 7px 10px;
  color: rgba(255,255,255,.54);
  background: transparent;
  font-weight: 950;
  font-size: 12px;
}

.tab span {
  display: block;
  font-size: 20px;
  margin-bottom: 3px;
  filter: drop-shadow(0 6px 16px rgba(0,132,255,.25));
}

.tab b {
  display: block;
}

.tab.active {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(30,132,255,.52), rgba(0,58,165,.48)),
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.32), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.27),
    0 15px 45px rgba(0,86,255,.28);
}

.toast {
  position: fixed;
  z-index: 50;
  left: 18px;
  right: 18px;
  top: max(14px, env(safe-area-inset-top));
  max-width: 540px;
  margin: 0 auto;
  padding: 15px 16px;
  border-radius: 23px;
  color: #fff;
  font-weight: 900;
  opacity: 0;
  transform: translateY(-14px);
  transition: .24s ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@supports (backdrop-filter: url("#liquidGlassStrong")) {
  .glass-strong {
    backdrop-filter: url("#liquidGlassStrong") blur(26px) saturate(210%);
  }

  .mainBtn,
  .deviceBtn,
  .copyBtn,
  .tapBtn {
    backdrop-filter: url("#liquidGlassSoft") blur(20px) saturate(200%);
  }
}

@media (max-width: 380px) {
  .brandLogo {
    width: 138px;
    height: 100px;
  }

  h1 {
    font-size: 25px;
  }

  h2 {
    font-size: 23px;
  }

  .tapBtn {
    min-width: 106px;
    font-size: 13px;
  }
}

/* ===== DARZ FIX: ровные кнопки как в iOS / Telegram glass ===== */

.top {
  justify-content: flex-start !important;
}

.brandSide {
  width: 100%;
}

.tapBtn {
  display: none !important;
}

/* Карточка логотипа */
.brandLogo {
  width: 150px !important;
  height: 112px !important;
  border-radius: 30px !important;
  padding: 12px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.06)),
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.35), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(0,132,255,.26), transparent 42%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 20px 60px rgba(0,0,0,.38),
    0 0 45px rgba(0,132,255,.18) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
}

.brandLogo img {
  border-radius: 18px;
}

/* Основные синие кнопки */
.mainBtn {
  height: 52px !important;
  border-radius: 19px !important;
  padding: 0 18px !important;
  background:
    linear-gradient(145deg, #48a5ff 0%, #0a84ff 48%, #0057ff 100%) !important;
  border: 1px solid rgba(160,210,255,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 16px 40px rgba(0,101,255,.36) !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
}

/* Кнопки внутри карточек: копировать / устройства */
.copyBtn,
.deviceBtn {
  height: 50px !important;
  border-radius: 18px !important;
  padding: 0 16px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.07)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.34), transparent 35%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 12px 32px rgba(0,0,0,.22) !important;
  color: #fff !important;
  font-weight: 1000 !important;
}

.deviceBtn.active {
  background:
    linear-gradient(145deg, #48a5ff 0%, #0a84ff 50%, #0057ff 100%) !important;
  border: 1px solid rgba(160,210,255,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 16px 42px rgba(0,101,255,.34) !important;
}

/* Нижнее меню — ровная стеклянная капсула */
.tabbar {
  left: 12px !important;
  right: 12px !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  max-width: 540px !important;
  height: 82px !important;
  padding: 8px !important;
  border-radius: 34px !important;
  gap: 8px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.06)),
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.28), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(0,132,255,.22), transparent 42%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 24px 70px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(34px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(210%) !important;
}

/* Эффект блика внутри нижней капсулы */
.tabbar::before {
  opacity: .55 !important;
  background:
    linear-gradient(120deg, transparent 30%, rgba(255,255,255,.24), transparent 58%) !important;
}

/* Кнопки нижнего меню */
.tab {
  height: 66px !important;
  border-radius: 27px !important;
  padding: 8px 6px 7px !important;
  color: rgba(255,255,255,.56) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important;
  transition: transform .18s ease, background .22s ease, color .22s ease, box-shadow .22s ease !important;
}

.tab span {
  font-size: 22px !important;
  margin-bottom: 4px !important;
  line-height: 1 !important;
}

.tab b {
  font-size: 12px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

.tab.active {
  color: #fff !important;
  background:
    linear-gradient(145deg, rgba(80,160,255,.85), rgba(0,83,210,.75)),
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.36), transparent 36%) !important;
  border: 1px solid rgba(170,215,255,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 14px 38px rgba(0,96,255,.34) !important;
}

.tab:active {
  transform: scale(.94) !important;
}

/* Карточки ключей более ровные */
.keyCard {
  border-radius: 27px !important;
  padding: 16px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.055)),
    radial-gradient(circle at 90% 0%, rgba(0,132,255,.20), transparent 40%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

.daysBadge {
  border-radius: 999px !important;
  padding: 9px 12px !important;
  background: rgba(24, 218, 125, .18) !important;
  color: #46f58f !important;
  border: 1px solid rgba(70,245,143,.16) !important;
}

/* Убираем лишнюю кибер-резкость */
.grid {
  opacity: .10 !important;
}

.bg {
  background:
    radial-gradient(circle at 84% 0%, rgba(0,132,255,.35), transparent 34%),
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.08), transparent 26%),
    linear-gradient(180deg, #061024 0%, #02050d 50%, #000 100%) !important;
}

@media (max-width: 380px) {
  .tabbar {
    height: 78px !important;
    border-radius: 31px !important;
  }

  .tab {
    height: 62px !important;
    border-radius: 24px !important;
  }

  .tab span {
    font-size: 20px !important;
  }

  .tab b {
    font-size: 11px !important;
  }
}