:root {
  --bg: #03070d;
  --card: rgba(9, 17, 30, .72);
  --card2: rgba(12, 27, 48, .72);
  --text: #f4f7ff;
  --muted: #8e99ad;
  --line: rgba(122, 178, 255, .18);
  --accent: #69b7ff;
  --accent2: #2a76ff;
  --shadow-blue: rgba(38, 135, 255, .22);
}

html, body {
  background:
    radial-gradient(circle at 78% 8%, rgba(35, 112, 255, .20), transparent 28%),
    radial-gradient(circle at 8% 20%, rgba(32, 143, 255, .13), transparent 32%),
    linear-gradient(180deg, #06101e 0%, #03070d 48%, #02040a 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  right: -88px;
  top: 42px;
  width: 430px;
  height: 430px;
  background: url("/assets/projectv-logo.svg") center / contain no-repeat;
  opacity: .105;
  filter: blur(.2px) saturate(1.15);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.03), transparent 26%),
    radial-gradient(circle at 50% 110%, rgba(50,140,255,.12), transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 18px 20px 34px !important;
}

.top {
  margin-bottom: 18px !important;
  gap: 16px !important;
}

.logo {
  width: 78px !important;
  height: 78px !important;
  border-radius: 25px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    url("/assets/projectv-logo.svg") center / 86% no-repeat !important;
  border: 1px solid rgba(111, 180, 255, .52);
  box-shadow:
    0 0 0 1px rgba(105, 183, 255, .12) inset,
    0 0 28px rgba(52, 139, 255, .32),
    0 18px 44px rgba(0, 0, 0, .34) !important;
  color: transparent !important;
  font-size: 0 !important;
  flex: 0 0 auto;
}

.brand {
  font-size: 31px !important;
  font-weight: 520 !important;
  letter-spacing: -.035em !important;
  line-height: 1.04 !important;
}

.brand-sub {
  font-size: 17px !important;
  color: rgba(197, 207, 228, .68) !important;
  font-weight: 430 !important;
  margin-top: 6px !important;
}

.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15, 30, 52, .80), rgba(8, 14, 25, .62)),
    rgba(8, 14, 25, .58) !important;
  border: 1px solid rgba(132, 184, 255, .20) !important;
  border-radius: 26px !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.025) inset !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 22px !important;
}

#cabinet .hero::before {
  content: "";
  width: 58px;
  height: 58px;
  border-radius: 19px;
  background:
    url("/assets/projectv-logo.svg") center / 75% no-repeat,
    rgba(31, 69, 115, .22);
  border: 1px solid rgba(105, 183, 255, .24);
  box-shadow: 0 0 28px rgba(55, 151, 255, .18);
  display: block;
  margin-bottom: 14px;
}

h1 {
  font-size: 30px !important;
  font-weight: 560 !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
}

p {
  font-size: 17px !important;
  color: rgba(194, 204, 224, .70) !important;
  line-height: 1.48 !important;
  font-weight: 400 !important;
}

.section-title {
  margin: 20px 6px 12px !important;
  color: rgba(170, 185, 210, .78) !important;
  font-size: 14px !important;
  font-weight: 620 !important;
  letter-spacing: .18em !important;
}

.list {
  gap: 10px !important;
  position: relative;
}

#cabinet .list::before {
  content: "";
  position: absolute;
  right: -110px;
  top: 25px;
  width: 360px;
  height: 360px;
  background: url("/assets/projectv-logo.svg") center / contain no-repeat;
  opacity: .055;
  pointer-events: none;
  z-index: -1;
}

.card {
  min-height: 92px;
  border-radius: 23px !important;
  padding: 14px 18px 14px 14px !important;
  background:
    linear-gradient(135deg, rgba(14, 27, 46, .78), rgba(7, 13, 23, .66)),
    rgba(9, 17, 30, .62) !important;
  border: 1px solid rgba(125, 177, 245, .17) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.018) inset !important;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

.card:active {
  transform: scale(.992) !important;
  background: rgba(18, 35, 58, .76) !important;
}

.left {
  gap: 14px !important;
}

.icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 19px !important;
  background:
    linear-gradient(180deg, rgba(105,183,255,.08), rgba(105,183,255,.025)),
    rgba(14, 28, 48, .75) !important;
  border: 1px solid rgba(105,183,255,.16);
  box-shadow:
    0 0 22px rgba(72, 154, 255, .08),
    0 0 0 1px rgba(255,255,255,.015) inset;
  color: #83c5ff !important;
  font-size: 0 !important;
  position: relative;
}

.icon::before {
  content: "";
  width: 31px;
  height: 31px;
  display: block;
  background: #83c5ff;
  opacity: .96;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

.i-key { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 14a5 5 0 1 1 4.58-7h8.42v4h-3v3h-3v3h-4.42A5 5 0 0 1 7 14Zm0-3a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E"); }
.i-star { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m12 2 2.95 6.2 6.8.9-4.98 4.72 1.24 6.76L12 17.3l-6.01 3.28 1.24-6.76L2.25 9.1l6.8-.9L12 2Z'/%3E%3C/svg%3E"); }
.i-gear { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2-1.5-2-3.5-2.4 1a8 8 0 0 0-2.6-1.5L14 2h-4l-.4 2.5A8 8 0 0 0 7 6L4.6 5l-2 3.5 2 1.5c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2 1.5 2 3.5L7 18a8 8 0 0 0 2.6 1.5L10 22h4l.4-2.5A8 8 0 0 0 17 18l2.4 1 2-3.5-2-1.5ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E"); }
.i-card { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h18V7H3v2Zm3 6h5v-2H6v2Z'/%3E%3C/svg%3E"); }
.i-help { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 16a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4Zm1.1-4h-2.2c0-3.2 3.2-3 3.2-5.1 0-1-.8-1.7-2-1.7-1.4 0-2.2.8-2.3 2.1H7.6C7.8 6.8 9.5 5 12.2 5c2.5 0 4.2 1.5 4.2 3.7 0 2.8-3.3 3.1-3.3 5.3Z'/%3E%3C/svg%3E"); }
.i-rules { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.5V8h4.5L14 3.5ZM8 12h8v-2H8v2Zm0 4h8v-2H8v2Zm0 4h5v-2H8v2Z'/%3E%3C/svg%3E"); }
.i-heart { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 21s-8.5-5.1-10.5-11C.4 6.8 2.5 4 5.6 4c1.9 0 3.3 1 4.1 2.2C10.5 5 11.9 4 13.8 4c3.1 0 5.2 2.8 4.1 6C15.9 15.9 12 21 12 21Z'/%3E%3C/svg%3E"); }

.name {
  font-size: 22px !important;
  font-weight: 520 !important;
  letter-spacing: -.025em !important;
  line-height: 1.12 !important;
}

.desc {
  color: rgba(190, 201, 220, .65) !important;
  font-size: 16px !important;
  font-weight: 390 !important;
  margin-top: 6px !important;
  line-height: 1.25 !important;
}

.arrow {
  color: rgba(198, 211, 230, .62) !important;
  font-size: 31px !important;
  font-weight: 300 !important;
}

.back {
  font-size: 18px !important;
  font-weight: 560 !important;
  color: rgba(232, 238, 250, .82) !important;
}

.btn {
  font-weight: 560 !important;
}

@media (max-width: 390px) {
  .app { padding-left: 16px !important; padding-right: 16px !important; }
  .brand { font-size: 28px !important; }
  h1 { font-size: 28px !important; }
  .name { font-size: 20px !important; }
  .desc { font-size: 15px !important; }
  .logo { width: 70px !important; height: 70px !important; }
}

/* ===== Platform icons for setup menu ===== */

.i-ios::before,
.i-macos::before,
.i-appletv::before {
  width: 28px;
  height: 28px;
  background: #f3f6ff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 384 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M318.7 268.7c-.2-48.5 39.6-71.7 41.4-72.8-22.7-33.1-58-37.6-70.4-38.1-29.9-3.1-58.4 17.6-73.6 17.6-15.3 0-38.8-17.2-63.8-16.7-32.8.5-63 19.1-79.9 48.5-34.1 59-8.7 146.3 24.5 194.3 16.2 23.4 35.5 49.6 60.9 48.7 24.5-1 33.7-15.8 63.3-15.8s37.9 15.8 63.8 15.3c26.3-.5 42.9-23.8 59-47.4 18.6-27.2 26.2-53.5 26.6-54.9-.6-.2-51.1-19.6-51.8-77.8zM270.1 111.5c13.5-16.3 22.6-39 20.1-61.5-19.5.8-43.1 13-57.1 29.3-12.5 14.4-23.5 37.5-20.6 59.6 21.8 1.7 44.1-11.1 57.6-27.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 384 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M318.7 268.7c-.2-48.5 39.6-71.7 41.4-72.8-22.7-33.1-58-37.6-70.4-38.1-29.9-3.1-58.4 17.6-73.6 17.6-15.3 0-38.8-17.2-63.8-16.7-32.8.5-63 19.1-79.9 48.5-34.1 59-8.7 146.3 24.5 194.3 16.2 23.4 35.5 49.6 60.9 48.7 24.5-1 33.7-15.8 63.3-15.8s37.9 15.8 63.8 15.3c26.3-.5 42.9-23.8 59-47.4 18.6-27.2 26.2-53.5 26.6-54.9-.6-.2-51.1-19.6-51.8-77.8zM270.1 111.5c13.5-16.3 22.6-39 20.1-61.5-19.5.8-43.1 13-57.1 29.3-12.5 14.4-23.5 37.5-20.6 59.6 21.8 1.7 44.1-11.1 57.6-27.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.i-android::before,
.i-androidtv::before {
  width: 30px;
  height: 30px;
  background: #f3f6ff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7.2 4.4 5.8 2.1l.8-.5L8 3.9A8.4 8.4 0 0 1 12 3c1.4 0 2.8.3 4 .9l1.4-2.3.8.5-1.4 2.3c2.2 1.3 3.7 3.4 3.9 5.9H3.3c.2-2.5 1.7-4.6 3.9-5.9ZM9 7.3a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6Zm6 0a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6ZM5 11h14v6.7a1.3 1.3 0 0 1-1.3 1.3H17V22h-1.5v-3H8.5v3H7v-3h-.7A1.3 1.3 0 0 1 5 17.7V11Zm-2 0h1v6H3v-6Zm17 0h1v6h-1v-6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7.2 4.4 5.8 2.1l.8-.5L8 3.9A8.4 8.4 0 0 1 12 3c1.4 0 2.8.3 4 .9l1.4-2.3.8.5-1.4 2.3c2.2 1.3 3.7 3.4 3.9 5.9H3.3c.2-2.5 1.7-4.6 3.9-5.9ZM9 7.3a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6Zm6 0a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6ZM5 11h14v6.7a1.3 1.3 0 0 1-1.3 1.3H17V22h-1.5v-3H8.5v3H7v-3h-.7A1.3 1.3 0 0 1 5 17.7V11Zm-2 0h1v6H3v-6Zm17 0h1v6h-1v-6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.i-windows::before {
  width: 28px;
  height: 28px;
  background: #f3f6ff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M2 4.5 11 3v8H2v-6.5Zm10-1.6 10-1.4V11H12V2.9ZM2 13h9v8L2 19.5V13Zm10 0h10v9.5L12 21V13Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M2 4.5 11 3v8H2v-6.5Zm10-1.6 10-1.4V11H12V2.9ZM2 13h9v8L2 19.5V13Zm10 0h10v9.5L12 21V13Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.i-linux::before {
  width: 28px;
  height: 28px;
  background: #f3f6ff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2c2.2 0 3.6 2 3.6 4.9 0 1.4-.4 2.6-1.1 3.6 1.8 1.1 3 3 3 5.3 0 2-1 3.8-2.5 4.9-.6.5-.7 1.3-.7 2.3h-4.6c0-1-.1-1.8-.7-2.3A6.1 6.1 0 0 1 6.5 15.8c0-2.3 1.2-4.2 3-5.3-.7-1-1.1-2.2-1.1-3.6C8.4 4 9.8 2 12 2Zm-1.5 4.4a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Zm3 0a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8ZM9.5 14.2c.7.5 1.6.8 2.5.8s1.8-.3 2.5-.8v-1.1c-.7.4-1.6.6-2.5.6s-1.8-.2-2.5-.6v1.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2c2.2 0 3.6 2 3.6 4.9 0 1.4-.4 2.6-1.1 3.6 1.8 1.1 3 3 3 5.3 0 2-1 3.8-2.5 4.9-.6.5-.7 1.3-.7 2.3h-4.6c0-1-.1-1.8-.7-2.3A6.1 6.1 0 0 1 6.5 15.8c0-2.3 1.2-4.2 3-5.3-.7-1-1.1-2.2-1.1-3.6C8.4 4 9.8 2 12 2Zm-1.5 4.4a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Zm3 0a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8ZM9.5 14.2c.7.5 1.6.8 2.5.8s1.8-.3 2.5-.8v-1.1c-.7.4-1.6.6-2.5.6s-1.8-.2-2.5-.6v1.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* чуть мягче фон иконок именно в меню устройств */
#setupMenu .icon,
#setup .icon,
#devices .icon {
  background:
    linear-gradient(180deg, rgba(105,183,255,.10), rgba(105,183,255,.03)),
    rgba(14, 28, 48, .72) !important;
  border: 1px solid rgba(105,183,255,.20) !important;
  box-shadow:
    0 0 18px rgba(72,154,255,.07),
    0 0 0 1px rgba(255,255,255,.015) inset !important;
}


/* fallback for dynamic emoji icons */
.icon.emoji {
  font-size: 25px !important;
  color: #f3f6ff !important;
}

.icon.emoji::before {
  display: none !important;
}


/* ===== cabinet duplicate cleanup v34 ===== */

#cabinet .hero::before {
  content: none !important;
  display: none !important;
}

#cabinet .hero h1 {
  display: none !important;
}

#cabinet .hero {
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
}

#cabinet .hero p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.42 !important;
}

#cabinet .section-title {
  margin-top: 14px !important;
}


/* ===== Project V premium compact liquid glass v41 ===== */

:root {
  --pv-bg-0: #02050b;
  --pv-bg-1: #06101d;
  --pv-card: rgba(8, 18, 32, .46);
  --pv-card-strong: rgba(9, 22, 39, .58);
  --pv-line: rgba(118, 181, 255, .20);
  --pv-line-soft: rgba(255, 255, 255, .055);
  --pv-text: rgba(246, 250, 255, .94);
  --pv-muted: rgba(188, 200, 220, .62);
  --pv-blue: #78bdff;
  --pv-blue-soft: rgba(79, 156, 255, .22);
}

html,
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(55, 128, 255, .18), transparent 34%),
    radial-gradient(circle at 92% 20%, rgba(49, 143, 255, .14), transparent 31%),
    radial-gradient(circle at 50% 105%, rgba(20, 77, 150, .14), transparent 42%),
    linear-gradient(180deg, #07111f 0%, #030811 48%, #02040a 100%) !important;
  color: var(--pv-text) !important;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;
  font-weight: 400 !important;
}

/* большой 3D V на фоне — мягко, без перегруза */
body::before {
  content: "" !important;
  position: fixed !important;
  right: -116px !important;
  top: 88px !important;
  width: 500px !important;
  height: 500px !important;
  background: url("/assets/projectv-logo.svg") center / contain no-repeat !important;
  opacity: .115 !important;
  filter: blur(.35px) saturate(1.25) drop-shadow(0 0 40px rgba(52, 141, 255, .35)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.035), transparent 24%),
    radial-gradient(circle at 68% 25%, rgba(130, 195, 255, .06), transparent 32%),
    radial-gradient(circle at 48% 82%, rgba(40, 100, 180, .08), transparent 40%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.app {
  position: relative !important;
  z-index: 1 !important;
  max-width: 560px !important;
  padding: 18px 18px 30px !important;
}

/* верхний бренд */
.top {
  gap: 15px !important;
  margin-bottom: 20px !important;
  align-items: center !important;
}

.logo {
  width: 66px !important;
  height: 66px !important;
  border-radius: 22px !important;
  background:
    url("/assets/projectv-logo.svg") center / 92% no-repeat !important;
  border: 0 !important;
  box-shadow:
    0 0 28px rgba(75, 160, 255, .28),
    0 16px 36px rgba(0, 0, 0, .34) !important;
  color: transparent !important;
  font-size: 0 !important;
}

.brand {
  font-size: 28px !important;
  font-weight: 470 !important;
  letter-spacing: -.045em !important;
  line-height: 1.05 !important;
  color: rgba(248, 251, 255, .95) !important;
}

.brand-sub {
  margin-top: 5px !important;
  font-size: 16px !important;
  font-weight: 390 !important;
  letter-spacing: -.01em !important;
  color: rgba(190, 202, 224, .60) !important;
}

/* компактная стеклянная инфо-рамка */
.hero {
  border-radius: 24px !important;
  padding: 17px 18px !important;
  margin-bottom: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(7, 16, 29, .46) !important;
  border: 1px solid var(--pv-line) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
}

#cabinet .hero::before,
#cabinet .hero h1 {
  display: none !important;
  content: none !important;
}

#cabinet .hero p,
.hero p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
  font-weight: 390 !important;
  letter-spacing: -.01em !important;
  color: rgba(194, 206, 228, .66) !important;
}

/* заголовок Меню */
.section-title {
  margin: 15px 8px 10px !important;
  font-size: 12px !important;
  font-weight: 590 !important;
  letter-spacing: .155em !important;
  color: rgba(178, 191, 214, .62) !important;
}

/* список */
.list {
  gap: 9px !important;
}

/* стеклянные кнопки */
.card {
  min-height: 82px !important;
  padding: 12px 15px 12px 12px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
    rgba(8, 18, 32, .47) !important;
  border: 1px solid rgba(125, 184, 255, .19) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(255,255,255,.022) !important;
  backdrop-filter: blur(20px) saturate(1.32) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.32) !important;
}

.card:active {
  transform: scale(.988) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(12, 28, 50, .55) !important;
}

.left {
  gap: 13px !important;
}

/* иконки легче и аккуратнее */
.icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(120,189,255,.16), rgba(120,189,255,.035)),
    rgba(8, 20, 36, .44) !important;
  border: 1px solid rgba(128, 193, 255, .24) !important;
  box-shadow:
    0 0 22px rgba(72,154,255,.12),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

.icon::before {
  width: 27px !important;
  height: 27px !important;
  background: var(--pv-blue) !important;
  opacity: .95 !important;
}

/* текст на карточках: тоньше, ближе к Opengater */
.name {
  font-size: 19px !important;
  font-weight: 470 !important;
  letter-spacing: -.035em !important;
  line-height: 1.12 !important;
  color: rgba(248, 251, 255, .94) !important;
}

.desc {
  margin-top: 5px !important;
  font-size: 14px !important;
  font-weight: 380 !important;
  letter-spacing: -.012em !important;
  line-height: 1.28 !important;
  color: rgba(186, 199, 220, .58) !important;
}

.arrow {
  font-size: 30px !important;
  font-weight: 240 !important;
  color: rgba(202, 215, 235, .56) !important;
}

/* остальные экраны тоже чуть компактнее */
.back {
  margin-bottom: 16px !important;
  font-size: 17px !important;
  font-weight: 520 !important;
  color: rgba(230, 238, 252, .78) !important;
}

h1,
.hero h1,
#sectionTitle,
#guideTitle,
#externalTitle {
  font-size: 25px !important;
  font-weight: 520 !important;
  letter-spacing: -.04em !important;
  line-height: 1.12 !important;
}

.big-icon {
  width: 68px !important;
  height: 68px !important;
  border-radius: 22px !important;
}

.step,
.note {
  background:
    linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.02)),
    rgba(8, 18, 32, .46) !important;
  border: 1px solid rgba(125, 184, 255, .17) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

/* телефоны поуже */
@media (max-width: 390px) {
  .app {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .logo {
    width: 62px !important;
    height: 62px !important;
  }

  .brand {
    font-size: 26px !important;
  }

  .brand-sub {
    font-size: 15px !important;
  }

  .card {
    min-height: 78px !important;
    border-radius: 21px !important;
  }

  .icon {
    width: 51px !important;
    height: 51px !important;
    border-radius: 17px !important;
  }

  .icon::before {
    width: 25px !important;
    height: 25px !important;
  }

  .name {
    font-size: 18px !important;
  }

  .desc {
    font-size: 13.5px !important;
  }
}