button, input, select, textarea{font-family:inherit}
a, a:visited, a:hover, a:active{color:inherit;text-decoration:none !important}

/* prevent sticky dark focus/visited states in Telegram WebView */
a, button, .tg-menu-btn, .tg-cab-item{
  -webkit-tap-highlight-color: transparent;
}
.tg-menu-btn:focus, .tg-menu-btn:focus-visible,
.tg-cab-item:focus, .tg-cab-item:focus-visible,
.btn:focus, .btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 6px rgba(118,210,255,.22);
}
a:hover{color:inherit;text-decoration:none}
:root{
  --c-ink:#111E47;
  --c-ink2:#103D94;
  --c-sky:#76D2FF;
  --c-bg:#F2F7FF;

  --page-max: 1120px;
  --page-pad: 26px;

  --glass: rgba(255,255,255,.76);
  --border: rgba(17, 30, 71, .10);

  --shadow: 0 18px 56px rgba(17, 30, 71, .16);
  --shadow2: 0 10px 26px rgba(17, 30, 71, .10);

  --radius: 22px;

  --primary: #4F86FF;
  --accent: #76D2FF;
  --dark:#111E47;

  --ease: cubic-bezier(.2,.9,.2,1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
}




*{box-sizing:border-box}
html{ -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; }
html,body{height:100%; background: var(--c-bg); overflow-anchor: none; overflow-x: hidden;}

body{  margin:0;
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--c-ink);
  background: var(--c-bg);
  font-size:20px;
  overflow-y: scroll;
}

/* Premium motion: calm by default, respectful of reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

.bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(980px 680px at 22% 12%, rgba(79,134,255,.16) 0%, rgba(79,134,255,0) 62%),
    radial-gradient(980px 680px at 84% 18%, rgba(118,210,255,.26) 0%, rgba(118,210,255,0) 60%),
    radial-gradient(1100px 760px at 50% 92%, rgba(16,61,148,.10) 0%, rgba(16,61,148,0) 68%),
    linear-gradient(180deg, #F7FAFF 0%, #F2F7FF 62%, #F8FBFF 100%);
}

.bg::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.bg::after{
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -20%;
  height: 55%;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 60%, rgba(118,210,255,.16) 0%, rgba(118,210,255,0) 70%),
    radial-gradient(60% 80% at 30% 70%, rgba(79,134,255,.12) 0%, rgba(79,134,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(79,134,255,.05) 70%, rgba(118,210,255,.08) 100%);
  opacity: .85;
}

/* Universe background (Mini App menu) */
.universe-canvas{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  pointer-events:none;
}

body.tg-menu-page .bg{
  background:
    radial-gradient(980px 680px at 22% 12%, rgba(79,134,255,.16) 0%, rgba(79,134,255,0) 62%),
    radial-gradient(980px 680px at 84% 18%, rgba(118,210,255,.26) 0%, rgba(118,210,255,0) 60%),
    radial-gradient(1100px 760px at 50% 92%, rgba(16,61,148,.10) 0%, rgba(16,61,148,0) 68%),
    linear-gradient(180deg, #F7FAFF 0%, #F2F7FF 62%, #F8FBFF 100%);
}
body.tg-menu-page .bg::after{
  opacity: .85;
}

.topbar{padding:22px 0}

.topbar-inner{
  max-width: 1120px;
  margin:0 auto;
  padding: 0 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none !important;
  color:inherit;
}

.logo{
  width:52px;
  height:52px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit:contain;
}

.brand-name{
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.0;
  font-size:20px;
}

.brand-sub{
  font-size:15px;
  color: rgba(17, 30, 71, .62);
  margin-top:4px;
}

.page{
  max-width: var(--page-max);
  margin:0 auto;
  padding: 0 var(--page-pad) 56px;
}

.hero{padding: 8px 0 20px}

.h1{
  margin:0;
  font-size:52px;
  letter-spacing:-.04em;
  line-height:1.05;
}

.p{
  margin:12px 0 0;
  color: rgba(17, 30, 71, .66);
  font-size:20px;
  line-height:1.55;
  max-width: 820px;
}

.layout{
  display:grid;
  grid-template-columns: 1fr 440px;
  gap: 20px;
  align-items:start;
}

.card{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

/* ===================================================================
   FIX: Telegram iOS/Android WebView can render backdrop-filter as black rectangles.
   On section pages (Devices / History / Referral) we prefer solid cards.
   =================================================================== */
.tg-section-page .card,
.tg-section-page .devices-status,
.tg-section-page .device-item{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.tg-section-page .card{
  background: rgba(255,255,255,.94) !important;
}

.tg-section-page .devices-status,
.tg-section-page .device-item{
  background: rgba(255,255,255,.92) !important;
}


/* Telegram mobile WebView can render backdrop-filter as black rectangles.
   For miniapp section pages prefer a solid card background. */
html.is-miniapp .tg-section-page .card,
html.tg-miniapp .tg-section-page .card{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(255,255,255,.94) !important;
}

.card-left{padding: 28px}

.card-right{
  padding: 24px;
  position: sticky;
  top: 18px;
  overflow:hidden;
}

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

.card-right::before{
  content:"";
  position:absolute;
  inset:-90px -120px auto auto;
  width:380px;
  height:380px;
  border-radius:999px;
  background: radial-gradient(circle at 32% 32%, rgba(118,210,255,.46), rgba(16,61,148,0) 70%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}

.section-title{
  font-weight:700;
  letter-spacing:-.02em;
  font-size:20px;
  margin-bottom:16px;
}

.side-title{
  position:relative;
  z-index:1;
  font-weight:700;
  letter-spacing:-.02em;
  font-size:20px;
  margin-bottom:18px;
}

.segmented{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.segmented-item{
  position:relative;
  text-align:left;
  border:1px solid rgba(17,30,71,.12);
  background: rgba(255,255,255,.56);
  border-radius: 20px;
  padding: 20px;
  cursor:pointer;
  transform: translateZ(0);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

/*seg-z*/
.segmented-item > *{
  position:relative;
  z-index: 1;
}

.segmented-item.is-active::before,
.segmented-item.is-active::after{
  z-index: 0;
}

.segmented-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.64);
}

.segmented-item.is-active{
  transform: translateY(-2px);
  border-color: rgba(118,210,255,.55);
  background: linear-gradient(135deg, rgba(118,210,255,.26), rgba(16,61,148,.06));
  box-shadow: 0 18px 40px rgba(17,30,71,.12);
}

.segmented-item.is-active::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: 28px;
  background: radial-gradient(circle at 22% 18%, rgba(118,210,255,.55), rgba(16,61,148,0) 64%);
  filter: blur(22px);
  opacity:.16;
  z-index: -1;
  pointer-events:none;
}

.segmented-item.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 20px;
  background: radial-gradient(240px 140px at 24% 24%, rgba(255,255,255,.65), rgba(255,255,255,0) 65%);
  opacity:.38;
  pointer-events:none;
}

.seg-title{
  font-weight:700;
  letter-spacing:-.02em;
  font-size:20px;
}

.seg-sub{
  margin-top:6px;
  font-size:16px;
  color: rgba(17, 30, 71, .64);
}

/* Purchase: plan benefits (traffic + devices) */
.plan-benefits{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}
.benefit-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border: 1px solid rgba(17,30,71,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
}
.benefit-ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(17,30,71,.92);
  background: rgba(118,210,255,.22);
  border: 1px solid rgba(118,210,255,.26);
}
.benefit-title{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 16px;
  line-height: 1.15;
}
.benefit-sub{
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.25;
  color: rgba(17,30,71,.62);
}

.divider{
  height:1px;
  background: rgba(17,30,71,.12);
  margin: 22px 0;
}

.slider-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 6px;
  margin-bottom: 16px;
}

.slider-caption{
  font-size: 17px;
  color: rgba(17, 30, 71, .66);
}

.pill{
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.60);
  border:1px solid rgba(17,30,71,.12);
  font-size: 17px;
  color: rgba(17, 30, 71, .86);
  box-shadow: 0 12px 26px rgba(17,30,71,.10);
}

.slider-shell{
  position:relative;
  padding: 34px 16px 44px;
  min-height: 148px;
  border-radius: 20px;
  border:1px solid rgba(17,30,71,.12);
  background: rgba(255,255,255,.50);
  overflow:hidden;
}

.slider{
  -webkit-appearance:none;
  appearance:none;
  height: 70px;
  background: transparent;
  outline:none;
  position:absolute;
  left: var(--slider-outer-inset, 16px);
  right: var(--slider-outer-inset, 16px);
  top:50%;
  transform: translateY(-50%);
  width:auto;
  z-index:6;
}

.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 18px 44px rgba(16,61,148,.22);
  border: 5px solid rgba(255,255,255,.88);
  cursor:grab;
  transition: transform .12s var(--ease);
}

.slider:active::-webkit-slider-thumb{
  transform: scale(1.06);
  cursor:grabbing;
}

.slider::-moz-range-thumb{
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--primary);
  border: 5px solid rgba(255,255,255,.88);
  box-shadow: 0 18px 44px rgba(16,61,148,.22);
  cursor:grab;
}

.slider-track{
  position:absolute;
  left: var(--slider-rail-inset, 16px);
  right: var(--slider-rail-inset, 16px);
  top:50%;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(17,30,71,.10);
  z-index:1;
}

.slider-fill{
  position:absolute;
  left: var(--slider-rail-inset, 16px);
  top:50%;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,61,148,.70), rgba(118,210,255,.94));
  z-index:2;
  width:0%;
  transition: width .10s linear;
}

.slider-stops{
  position:absolute;
  left: var(--slider-rail-inset, 16px);
  right: var(--slider-rail-inset, 16px);
  top:50%;
  transform: translateY(-50%);
  display:flex;
  justify-content:space-between;
  z-index:3;
  pointer-events:none;
}

.stop{
  width: 18px;
  height: 18px;
  border-radius:999px;
  border:1px solid rgba(17,30,71,.20);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 18px rgba(17,30,71,.08);
  transition: background .20s var(--ease), border-color .20s var(--ease);
}

.stop.is-active{
  background: rgba(118,210,255,.74);
  border-color: rgba(118,210,255,.98);
}

.thumb-glow{
  position:absolute;
  width:240px;
  height:240px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(118,210,255,.40), rgba(118,210,255,0) 66%);
  filter: blur(2px);
  top:50%;
  transform: translate(-50%, -50%);
  z-index:0;
  opacity:.95;
  transition: left .06s linear;
  will-change: left;
  pointer-events:none;
}

.slider-hit{
  position:absolute;
  left: var(--slider-outer-inset, 16px);
  right: var(--slider-outer-inset, 16px);
  top:50%;
  height: 86px;
  transform: translateY(-50%);
  z-index:5;
  cursor:pointer;
  border-radius: 20px;
  background: rgba(0,0,0,0);
}


/* Slider labels under stop dots (desktop purchase slider)
   Must match the real stop positions: slider-track and slider-stops use left/right:24px.
   We keep labels on the same rails to avoid any drift. */
.slider-step-labels{
  position:absolute;
  left: var(--slider-rail-inset, 16px);
  right: var(--slider-rail-inset, 16px);
  bottom: 24px;
  height: 22px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  pointer-events:none;
}

.slider-step-labels .step-label{
  position:relative;
  width:18px; /* exactly stop diameter */
  display:flex;
  justify-content:center;
  align-items:flex-end;
  white-space: nowrap;
}


.slider-step-labels .step-num{
  display:inline-block;
  font-weight: 650;
  font-size: 17px;
  line-height: 1;
  color: rgba(17, 30, 71, .72);
  letter-spacing: -.02em;
  transform: scale(1);
  transform-origin: 50% 100%;
  transition: transform .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}

.slider-step-labels .step-label.is-active .step-num{
  transform: scale(1.12);
  color: rgba(17, 30, 71, .92);
}

.slider-step-labels .step-suffix{ display:none; }


.slider-legend{
  display:flex;
  justify-content:space-between;
  margin-top: 16px;
  font-size: 17px;
  color: rgba(17, 30, 71, .64);
  padding: 0 2px;
}

.promo{position:relative; z-index:1}

.field-title{
  font-weight:700;
  letter-spacing:-.02em;
  font-size:18px;
  margin-bottom: 12px;
}

.promo-label{
  display:flex;
  align-items:baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.promo-title{ display:inline; }
.promo-note{ white-space:nowrap; }

.promo-row{
  display:flex;
  gap: 12px;
  align-items:center;
}

.input{
  width:100%;
  border:1px solid rgba(17,30,71,.12);
  background: rgba(255,255,255,.68);
  border-radius: 18px;
  padding: 16px 16px;
  outline:none;
  color: rgba(17,30,71,.92);
  font-size: 18px;
}

.input:focus{
  border-color: rgba(118,210,255,.90);
  box-shadow: 0 0 0 6px rgba(118,210,255,.26);
}

.status{
  margin-top: 12px;
  min-height: 24px;
  font-size: 16px;
  color: rgba(17, 30, 71, .72);
}

/* Promo applied chip (prevents huge SVG/checkmark) */
.promo-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(118, 210, 255, .16);
  border: 1px solid rgba(118, 210, 255, .28);
  color: rgba(17, 30, 71, .84);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.promo-ico{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
}

.pricebox{
  position:relative;
  z-index:1;
  margin-top: 16px;
}

.line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top: 10px;
}

.line.big{margin-top: 12px}

.muted{
  color: rgba(17, 30, 71, .64);
  font-size: 17px;
}

.money-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.money{
  font-weight:700;
  letter-spacing:-.03em;
  font-size: 22px;
}


/* miniapp promo badge inside price (no extra rows, no layout shift) */
#payRub{
  position: relative;
}
#payRub.has-discount{
  padding-right: 58px;
}
#payRub.has-discount::after{
  content: attr(data-discount);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17,30,71,.10);
  border: 1px solid rgba(17,30,71,.14);
  color: rgba(17,30,71,.78);
}
.money-xl{
  font-size: 48px;
  letter-spacing: -.04em;
}

.money-old{
  font-size: 16px;
  color: rgba(17, 30, 71, .55);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(17, 30, 71, .45);
}

.money-anim{
  display:inline-block;
}

.money-anim.is-swap{
  animation: moneySwap .14s var(--ease) both;
}

@keyframes moneySwap{
  from{opacity:.55}
  to{opacity:1}
}

.discount{
  margin-top: 12px;
  font-size: 16px;
  color: rgba(16,61,148,.95);
}

.hidden{display:none}


.pay-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 820px){
  .pay-actions{ grid-template-columns:1fr 1fr; }
}

.paymethod{
  width:100%;
  border:1px solid var(--c-border);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-radius:18px;
  padding:14px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 12px 28px rgba(17,30,71,.10);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align:left;
}
.paymethod:active{ transform:scale(.99); }
.paymethod:hover{
  border-color:rgba(16,61,148,.26);
  box-shadow:0 16px 34px rgba(17,30,71,.14);
}
.paymethod:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.paymethod-logo{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:contain;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(17,30,71,.10);
  padding:6px;
}
.paymethod-text{ flex:1; display:flex; flex-direction:column; gap:2px; }
.paymethod-title{ font-weight:800; font-size:16px; line-height:1.1; }
.paymethod-sub{ font-size:12.5px; color:var(--c-muted); line-height:1.2; }
.paymethod-cta{
  font-weight:800;
  font-size:13px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(17,30,71,.12);
  background:rgba(255,255,255,.9);
}
.paymethod--yookassa .paymethod-cta{
  border-color:rgba(255,200,0,.40);
  background:rgba(255, 238, 186, .80);
}
.paymethod--cryptobot .paymethod-cta{
  border-color:rgba(118,210,255,.55);
  background:rgba(202, 242, 255, .80);
}

.crypto-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.crypto-actions .btn{ flex:1; min-width:0; }
.crypto-actions .btn{ white-space:normal; }
.crypto-actions .btn{ width:100%; }
.crypto-copied{ margin-top:10px; text-align:center; }
@media (max-width: 520px){
  .crypto-actions{ flex-direction:column; }
}

.pay-actions{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.pay-gate{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.gate-hint{
  margin-top: 0;
  font-size: 15px;
  line-height: 1.35;
}

.small{
  position:relative;
  z-index:1;
  margin-top: 16px;
  font-size: 16px;
  color: rgba(17, 30, 71, .64);
  line-height:1.45;
}

.btn{
  border:0;
  border-radius: 20px;
  padding: 16px 16px;
  cursor:pointer;
  font-size: 17px;
  font-weight: 700;
  transition: transform .10s var(--ease), filter .20s var(--ease), background .20s var(--ease);
  white-space:nowrap;
}

.btn:active{transform: scale(.99)}

.btn-ghost{
  background: rgba(255,255,255,.48);
  border:1px solid rgba(17,30,71,.12);
  color: rgba(17, 30, 71, .92);
  padding: 14px 16px;
}

.btn-soft{
  background: rgba(255,255,255,.60);
  border:1px solid rgba(17,30,71,.12);
  color: rgba(17, 30, 71, .92);
}

.btn-primary{
  background: linear-gradient(135deg, rgba(16,61,148,.96), rgba(118,210,255,.94));
  color: white;
  box-shadow: 0 18px 40px rgba(16,61,148,.20);
}

.btn-dark{
  background: rgba(17,30,71,.95);
  color:white;
  box-shadow: 0 18px 40px rgba(17,30,71,.18);
}

.btn-xl{
  padding: 18px 16px;
  font-size: 18px;
}

.footer{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 18px;
  padding: 14px 4px;

  gap: 10px;
}

.footer-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}


.footer-support,
.support-inline{
  text-decoration:none !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.support-inline{ margin-top: 10px; }

@media (max-width: 1180px){
  .layout{grid-template-columns: 1fr}
  .card-right{position: static}
  .h1{font-size: 44px}
}

@media (max-width: 640px){
  body{font-size:20px}
  .page{padding: 0 18px 44px}

  /* header */
  .topbar-inner{padding: 0 18px; flex-wrap:nowrap; align-items:center; gap: 10px}
  .topbar-card{padding: 10px 12px}
  .brand{flex:1 1 auto; min-width:0}
  .brand-text{min-width:0; overflow:hidden}
  .brand-sub{display:none}
  .brand-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 46vw}
  .account{width:auto; justify-content:flex-end; flex: 0 0 auto}
  .account-pill{max-width:none; min-width:0}
  .account-text{display:none}
  .account-name,.account-handle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .btn-ghost{padding: 10px 12px; font-size:14px; border-radius:16px}
  .btn-sm{padding: 8px 10px; font-size:13px; border-radius:14px}
  .account-avatar{width:40px;height:40px;border-radius:14px}

  .segmented{grid-template-columns: 1fr}
  .promo-row{flex-direction:column; align-items:stretch}
}

/* ---------------------------------- */
/* mobile: devices page overflow fixes */

@media (max-width: 640px){
  /* On narrow screens the active segmented card scale can create horizontal overflow */
  .connect-segmented .segmented-item.is-active{ transform: translateY(-2px); }
}

@media (max-width: 520px){
  /* Device rows: stack action button under text so nothing sticks out of the screen */
  .device-item{ flex-direction: column; align-items: stretch; }
  .device-main{ width: 100%; }
  .device-name, .device-meta{ white-space: normal; overflow: visible; text-overflow: clip; }
  .device-meta{ word-break: break-word; }
  .device-item .btn-danger{ width: 100%; justify-content: center; }
}

@media (max-width: 420px){
  .brand-name{font-size:18px}
  .logo{width:44px; height:44px}
}


/* topbar separation */
.topbar{padding:18px 0 12px}
.topbar-card{
  background: rgba(255,255,255,.72);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow2);
  padding: 14px 16px;
}

/* account widget */
.account{display:flex;align-items:center;gap:12px}
.account-pill{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border:1px solid var(--border);
  box-shadow: 0 10px 28px rgba(17,30,71,.10);
}
.account-avatar{
  width:44px;height:44px;
  border-radius: 16px;
  object-fit: cover;
  background: radial-gradient(80px 80px at 30% 20%, rgba(118,210,255,.55) 0%, rgba(79,134,255,.18) 60%, rgba(255,255,255,.0) 100%);
  border:1px solid rgba(17,30,71,.10);
}
.account-text{display:flex;flex-direction:column;min-width:140px}
.account-name{font-weight:700;letter-spacing:-.02em;font-size:15px;line-height:1.1}
.account-handle{margin-top:2px;font-size:13px;color: rgba(17,30,71,.60);line-height:1.1}
.btn-sm{padding:10px 12px;font-size:14px;border-radius: 14px}


/* ensure hidden wins over component display */
.hidden{display:none !important}




/* connect types switch */
.connect-types{
  display:flex;
  gap: 6px;
  flex-wrap:wrap;
  margin: 12px 0 10px;
}
.connect-types .btn-mini{
  padding: 10px 12px;
  border-radius: 14px;
}
.connect-types .is-active{
  background: rgba(79,134,255,.14);
  border-color: rgba(79,134,255,.35);
}

/* connect: stretch segmented selector to full width (avoid shrinking in flex wrapper) */
.connect-types{
  align-items: stretch;
}
.connect-types > .segmented{
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}


/* connect page */
.connect-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 12px;
  margin-bottom: 16px;
}

.pill-soft{
  background: rgba(255,255,255,.50);
  border-color: rgba(17,30,71,.14);
}

.connect-link-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.connect-link-title{
  font-weight: 800;
  letter-spacing: -.02em;
}

.codebox{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(17,30,71,.14);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 10px 26px rgba(17,30,71,.10);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.connect-hint{
  margin-top: 10px;
  color: rgba(17,30,71,.70);
  font-size: 14px;
  line-height: 1.4;
}

.connect-empty{
  border: 1px dashed rgba(17,30,71,.20);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.38);
}
.connect-empty-title{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 18px;
}
.connect-empty-sub{
  margin-top: 6px;
  color: rgba(17,30,71,.70);
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.connect-segmented{ margin-top: 10px; }

.apps-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (max-width: 980px){
  .apps-grid{ grid-template-columns: 1fr; }
}
.app-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(17,30,71,.14);
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 26px rgba(17,30,71,.08);
  color: rgba(17,30,71,.92);
  text-decoration:none !important;
  font-weight: 800;
}
.app-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(17,30,71,.12);
}

.connect-divider{
  height: 1px;
  background: rgba(17,30,71,.12);
  margin: 18px 0;
}

.connect-steps{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(17,30,71,.86);
  font-size: 15px;
  line-height: 1.55;
}

.connect-note{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(118,210,255,.40);
  background: rgba(118,210,255,.16);
  color: rgba(17,30,71,.86);
  font-size: 14px;
  line-height: 1.45;
}




.connect-top-left{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: min(520px, 100%);
}

.connect-top-right{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 220px;
}

.select-label{
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgba(17,30,71,.86);
  font-size: 13px;
}
.select{
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(17,30,71,.14);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 26px rgba(17,30,71,.06);
  padding: 0 12px;
  font-weight: 800;
  color: rgba(17,30,71,.92);
}

.stepper{
  margin-top: 6px;
}

.step{
  display:flex;
  gap: 14px;
  padding: 14px 0;
}

.step-last{ padding-bottom: 0; }

.step-rail{
  width: 38px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.step-dot{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: rgba(17,30,71,.95);
  border: 1px solid rgba(17,30,71,.12);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
  background: rgba(255,255,255,.72);
}

.step-dot-green{
  background: linear-gradient(180deg, rgba(118,210,255,.55), rgba(255,255,255,.80));
}
.step-dot-blue{
  background: linear-gradient(180deg, rgba(79,134,255,.28), rgba(255,255,255,.82));
}
.step-dot-purple{
  background: linear-gradient(180deg, rgba(184,117,255,.26), rgba(255,255,255,.82));
}

.step-line{
  width: 2px;
  flex: 1 1 auto;
  background: linear-gradient(180deg, rgba(17,30,71,.18), rgba(17,30,71,.04));
  margin-top: 10px;
  border-radius: 99px;
}

.step-body{
  flex: 1 1 auto;
  padding: 4px 0 0;
}

.step-title{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 18px;
  color: rgba(17,30,71,.94);
}

.step-sub{
  margin-top: 6px;
  color: rgba(17,30,71,.68);
  font-size: 15px;
  line-height: 1.55;
}

.step-actions{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.btn-mini{ padding: 10px 12px; border-radius: 14px; }

.toast{
  margin-top: 12px;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(118,210,255,.40);
  background: rgba(118,210,255,.16);
  color: rgba(17,30,71,.86);
  font-weight: 800;
  font-size: 13px;
}

.connect-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(17,30,71,.82);
  font-size: 14px;
  line-height: 1.55;
}



/* connect: minimal stepper in white purchase style */
.connect-toprow{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 18px;
}

.connect-top-left{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: min(520px, 100%);
}

.connect-top-right{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 300px;
}

.select-label{
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgba(17,30,71,.86);
  font-size: 14px;
}

.platform-segmented .segmented-item{
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 16px;
}

.stepper{ margin-top: 4px; }

.step{
  display:flex;
  gap: 14px;
  padding: 14px 0;
}

.step-last{ padding-bottom: 0; }

.step-rail{
  width: 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.step-dot{
  width: 32px;
  height: 32px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgba(17,30,71,.92);
  border: 1px solid rgba(17,30,71,.12);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
  background: radial-gradient(120px 70px at 30% 20%, rgba(118,210,255,.62) 0%, rgba(79,134,255,.18) 55%, rgba(255,255,255,.82) 100%);
}

.step-line{
  width: 2px;
  flex: 1 1 auto;
  background: linear-gradient(180deg, rgba(17,30,71,.18), rgba(17,30,71,.03));
  margin-top: 10px;
  border-radius: 99px;
}

.step-body{ flex: 1 1 auto; padding: 2px 0 0; }

.step-title{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 18px;
  color: rgba(17,30,71,.94);
}

.step-sub{
  margin-top: 6px;
  color: rgba(17,30,71,.68);
  font-size: 15px;
  line-height: 1.5;
}

.step-actions{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.btn-compact{
  padding: 11px 14px;
  font-size: 15px;
  border-radius: 16px;
}

.toast{
  margin-top: 12px;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(118,210,255,.40);
  background: rgba(118,210,255,.16);
  color: rgba(17,30,71,.86);
  font-weight: 800;
  font-size: 14px;
}

.connect-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(17,30,71,.82);
  font-size: 15px;
  line-height: 1.6;
}


.step-body .btn-compact{margin-top: 12px}

.btn, .btn:visited, .btn:hover, .btn:active{text-decoration:none !important}


/* header: minimal centered nav */
.topnav-min{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 22px;
  flex: 1 1 auto;
}
.topnav-min-link{
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgba(17,30,71,.66);
  padding: 10px 6px;
  border-radius: 14px;
  transform: translateZ(0);
  transition: transform .14s ease, color .14s ease, background .14s ease;
}
.topnav-min-link:hover{
  transform: scale(1.04);
  color: rgba(17,30,71,.88);
}
.topnav-min-link.is-active{
  color: rgba(17,30,71,.94);
}
@media (max-width: 900px){
  .topnav-min{display:none;}
}


/* connect: scale up */
.connect-scale .section-title{ font-size: 22px; }
.connect-scale .seg-title{ font-size: 16px; }
.connect-scale .seg-sub{ font-size: 14px; }

.connect-top{ display:flex; flex-direction:column; gap: 16px; margin-top: 8px; margin-bottom: 18px; }
.connect-device{ display:flex; flex-direction:column; align-items:center; gap: 6px; }
.connect-device .select-label{ font-size: 16px; text-align:center; }
.platform-segmented-big{
  width: 100%;
  justify-content:center;
}
.platform-segmented-big .segmented-item{
  padding: 12px 14px;
  font-size: 16px;
}

.step-title{ font-size: 22px; }
.step-sub{ font-size: 17px; line-height: 1.6; margin-bottom: 12px; display:block; }
.step-actions{ margin-top: 14px; }
.btn-compact{ padding: 14px 16px; font-size: 16px; }

.step-body a.btn{ display:inline-flex; align-items:center; }

@media (max-width: 980px){
  .platform-segmented-big .segmented-item{ flex: 1 1 auto; }
}


/* connect: device picker polish */
.select-label-big{
  font-size: 18px !important;
  color: rgba(17,30,71,.92);
  letter-spacing: -.02em;
}
.connect-device-hint{
  margin-top: 2px;
  font-size: 14px;
  color: rgba(17,30,71,.62);
  text-align:center;
}

.platform-segmented-big{
  width: 100%;
  justify-content:center;
  gap: 6px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,30,71,.10);
  box-shadow: 0 14px 40px rgba(17,30,71,.10);
}

.platform-segmented-big .segmented-item{
  padding: 14px 18px;
  font-size: 17px;
  border-radius: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgba(17,30,71,.70);
  background: transparent;
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.platform-segmented-big .segmented-item:hover{
  background: rgba(17,30,71,.04);
  color: rgba(17,30,71,.88);
}

.platform-segmented-big .segmented-item.is-active{
  color: rgba(17,30,71,.95);
  background: radial-gradient(180px 80px at 35% 15%, rgba(118,210,255,.46) 0%, rgba(79,134,255,.16) 55%, rgba(255,255,255,.82) 100%);
  border-color: rgba(79,134,255,.20);
}

@media (max-width: 980px){
  .platform-segmented-big{ gap: 6px; }
  .platform-segmented-big .segmented-item{ flex: 1 1 auto; padding: 14px 12px; }
}

.connect-scale .p{font-size:18px;line-height:1.6}

.segmented-item{font-family:inherit}


/* connect: smooth hover for device buttons */
.platform-segmented-big .segmented-item{
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
  will-change: background, color, border-color, box-shadow;
}
.platform-segmented-big .segmented-item:hover{
  border-color: rgba(17,30,71,.10);
}

/* connect: smooth hover for primary actions */
.btn-compact{
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
  will-change: transform, box-shadow;
}
.btn-compact:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(17,30,71,.12);
}





.platform-segmented-big .segmented-item:hover{
  transform: none !important;
  background: rgba(17,30,71,.04);
  border-color: rgba(17,30,71,.12);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
}

.platform-segmented-big .segmented-item.is-active{
  transform: none !important;
  box-shadow: 0 18px 42px rgba(79,134,255,.14);
}


/* page spacing under header */
.page{ padding-top: 18px; }
.hero{ margin-top: 10px; }


/* --- device picker: subtle lift with smooth animation --- */
.platform-segmented-big .segmented-item{
  text-align:center;
  transform: translateY(0);
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
  will-change: transform, background, color, border-color, box-shadow;
}

.platform-segmented-big .segmented-item:hover{
  transform: translateY(-1px);
  background: rgba(17,30,71,.04);
  border-color: rgba(17,30,71,.12);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
}

.platform-segmented-big .segmented-item.is-active{
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(79,134,255,.14);
}


/* connect: tighten type selector vertical rhythm */
.connect-top{ gap: 12px; }
.connect-types{ margin-top: -2px; }


/* connect: device label left + larger */
.connect-device{ align-items: flex-start; }
.select-label-big{ text-align:left !important; font-size: 20px !important; }
.connect-device-hint{ text-align:left; }
.platform-segmented-big{ justify-content:flex-start; }


/* connect: make spacing between titles and segments consistent */
.connect-scale .section-title{ margin-bottom: 12px; }
.connect-device .select-label-big{ margin-bottom: 12px; }
.platform-segmented-big{ margin-top: 0; }

/* connect: type buttons subtle lift */
.connect-segmented .segmented-item{
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
  will-change: transform, background, color, border-color, box-shadow;
}
.connect-segmented .segmented-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
}
.connect-segmented .segmented-item.is-active{
  transform: translateY(-1px);
}


.os-android{ -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%0A%3Cpath%20d=%22M17.6%209.48%2019.44%206.3a.5.5%200%200%200-.86-.5l-1.9%203.29A7.96%207.96%200%200%200%2012%207.5c-1.63%200-3.15.49-4.38%201.33L5.72%205.8a.5.5%200%201%200-.86.5l1.84%203.18A6.99%206.99%200%200%200%205%2014v5a1%201%200%200%200%201%201h1v-2h10v2h1a1%201%200%200%200%201-1v-5c0-1.8-.67-3.44-1.4-4.52ZM9%2013a1%201%200%201%201%200-2%201%201%200%200%201%200%202Zm6%200a1%201%200%201%201%200-2%201%201%200%200%201%200%202Z%22/%3E%0A%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%0A%3Cpath%20d=%22M17.6%209.48%2019.44%206.3a.5.5%200%200%200-.86-.5l-1.9%203.29A7.96%207.96%200%200%200%2012%207.5c-1.63%200-3.15.49-4.38%201.33L5.72%205.8a.5.5%200%201%200-.86.5l1.84%203.18A6.99%206.99%200%200%200%205%2014v5a1%201%200%200%200%201%201h1v-2h10v2h1a1%201%200%200%200%201-1v-5c0-1.8-.67-3.44-1.4-4.52ZM9%2013a1%201%200%201%201%200-2%201%201%200%200%201%200%202Zm6%200a1%201%200%201%201%200-2%201%201%200%200%201%200%202Z%22/%3E%0A%3C/svg%3E"); }


/* device buttons: match subscription buttons behavior + align icons */
.platform-segmented-big .segmented-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
  will-change: transform, background, color, border-color, box-shadow;
}

.platform-segmented-big .segmented-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
}

.platform-segmented-big .segmented-item.is-active{
  transform: translateY(-1px);
}

/* icon spacing: use gap instead of margin */
.os-icon{
  margin-right: 0 !important;
}


/* connect: spacing between selectors */
.connect-device{ margin-top: 18px; }

/* device picker: make it behave like type picker */
.platform-segmented-big .segmented-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  transform: translateY(0) !important;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
  will-change: transform, background, color, border-color, box-shadow;
}

.platform-segmented-big .segmented-item:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
}

.platform-segmented-big .segmented-item.is-active{
  transform: translateY(-1px) !important;
}

/* inline SVG icons */
.os-svg{ width: 24px; height: 24px; flex: 0 0 24px;
  fill: currentColor;
  opacity: .92;
}@keyframes softFlash{
  0%{ transform: translateY(0); filter: saturate(1); }
  45%{ transform: translateY(-1px); filter: saturate(1.12); }
  100%{ transform: translateY(0); filter: saturate(1); }
}
.soft-flash{ animation: softFlash .34s var(--ease); }


/* connect: device buttons match type buttons behavior */
.platform-segmented-big .segmented-item{
  display:flex !important;
  flex-direction: row !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  transition: transform .16s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease) !important;
  will-change: transform, background, border-color, box-shadow;
}

.platform-segmented-big .segmented-item:not(.is-active):hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px rgba(17,30,71,.10) !important;
}

.platform-segmented-big .segmented-item.is-active{
  transform: translateY(-2px) !important;
}

.platform-segmented-big .segmented-item.is-active:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 42px rgba(79,134,255,.14) !important;
}

.os-svg{
  width: 26px !important;
  height: 26px !important;
  margin-right: 0 !important;
  opacity: .92;
}

.platform-segmented-big .seg-title{
  font-size: 16px !important;
  line-height: 1.2;
}


/* fix: active device button should not change background on hover */
.platform-segmented-big .segmented-item.is-active:hover{
  background: radial-gradient(180px 80px at 35% 15%, rgba(118,210,255,.46) 0%, rgba(79,134,255,.16) 55%, rgba(255,255,255,.82) 100%);
  color: rgba(17,30,71,.95);
  border-color: rgba(79,134,255,.20);
}




/* buttons */
/* segmented */
/* segmented soft apply */
@keyframes softApply {
  0% { transform: translateY(0); }
  35% { transform: translateY(-1px) scale(1.01); }
  100% { transform: translateY(-1px); }
}
.segmented-item.soft-apply{
  animation: softApply .22s ease;
}


/* Disabled state for subscription type selectors (still clickable) */
.segmented-item.is-disabled{
  opacity: 1;
  filter: none;
  background: rgba(17, 30, 71, .06);
  border-color: rgba(17, 30, 71, .12);
}
.segmented-item.is-disabled .seg-title{
  color: rgba(17, 30, 71, .70);
}
.segmented-item.is-disabled .seg-sub{
  color: rgba(17, 30, 71, .52);
}


.segmented-item.is-disabled:hover{
  background: rgba(17, 30, 71, .08);
  border-color: rgba(17, 30, 71, .14);
  transform: translateY(-1px);
}
.segmented-item.is-disabled:active{
  transform: translateY(0);
}
/* Device picker: match the same soft animation as subscription type buttons */
.platform-segmented-big .segmented-item{
  transition: transform .16s var(--ease), background .25s var(--ease), border-color .25s var(--ease),
    box-shadow .25s var(--ease), filter .25s var(--ease);
}
.platform-segmented-big .segmented-item:hover{
  transform: translateY(-2px) !important;
}
.platform-segmented-big .segmented-item.is-active{
  transform: translateY(-6px) scale(1.02) !important;
}
.platform-segmented-big .segmented-item.is-active:hover{
  transform: translateY(-6px) scale(1.02) !important;
}








/* theme toggle (inline svg) */
#themeToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(17,30,71,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 46px rgba(17,30,71,.10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
  color: rgba(17,30,71,.86);
}
#themeToggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 54px rgba(17,30,71,.14);
}#themeToggle .theme-sun{ display:none; }

/* stepper: quick top-to-bottom reveal on changes */
@keyframes stepReveal {
  0% { opacity: .0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.stepper.reveal .step{
  animation: stepReveal .16s ease both;
}
.stepper.reveal .step:nth-child(1){ animation-delay: 0ms; }
.stepper.reveal .step:nth-child(2){ animation-delay: 50ms; }
.stepper.reveal .step:nth-child(3){ animation-delay: 100ms; }


/* --- theme: dark (alpina v3) --- */
/* cards */
/* headings + muted text fixes (kills blue-on-blue) */
/* pill (period label) */
/* buttons */
/* segmented controls */
/* stepper colors */
/* code box */
/* ensure content above background */
.topbar{ position: relative; z-index: 2; }
.page{ position: relative; z-index: 1; }

/* Devices page */
.devices-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.devices-card{ padding: 26px; }

.devices-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 6px;
}

.devices-title{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.devices-sub{
  margin-top: 6px;
  color: rgba(17, 30, 71, .64);
  font-size: 18px;
}

.devices-segment{
  margin-top: 16px;
}

.devices-status-row{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.devices-status{
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 10px 28px rgba(17, 30, 71, .08);
}

.devices-status-title{
  font-size: 16px;
  font-weight: 700;
}

.devices-status-sub{
  margin-top: 4px;
  color: rgba(17, 30, 71, .62);
  font-size: 16px;
}

.devices-list{
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  contain: none;
}

.devices-list.is-updating{
  opacity: .78;
  transition: opacity 160ms var(--ease);
}

/* Mini App: hide the old bottom navigation on section pages.
   Navigation should be via Telegram BackButton to tg-menu.html. */
html.is-miniapp .bottomnav,
html.tg-miniapp .bottomnav{
  display:none !important;
}

.device-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(17, 30, 71, .09);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
  transform: translateZ(0);
}

.device-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(17, 30, 71, .14);
  border-color: rgba(17, 30, 71, .18);
}

@media (max-width: 900px){
  .device-item{
    flex-direction: column;
    align-items: stretch;
  }
  .device-name, .device-meta{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .device-item .btn{
    width: 100%;
    justify-content: center;
  }
}


.device-main{ min-width:0; }

.device-name{
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.device-meta{
  margin-top: 4px;
  font-size: 15px;
  color: rgba(17, 30, 71, .62);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Desktop: keep one-line ellipsis, mobile: wrap (default). */
@media (min-width: 901px){
  .device-name,
  .device-meta{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.device-skeleton{
  height: 62px;
  border-radius: 18px;
  border: 1px solid rgba(17, 30, 71, .10);
  background: rgba(17, 30, 71, .06);
  animation: skeletonPulse 1.25s ease-in-out infinite;
}

@keyframes skeletonPulse{
  0%,100%{ opacity: .55; }
  50%{ opacity: .88; }
}

.devices-reveal .device-item{
  animation: deviceIn var(--dur-3) var(--ease-out) both;
}

.devices-reveal .device-item:nth-child(1){ animation-delay: 0ms; }
.devices-reveal .device-item:nth-child(2){ animation-delay: 24ms; }
.devices-reveal .device-item:nth-child(3){ animation-delay: 48ms; }
.devices-reveal .device-item:nth-child(4){ animation-delay: 72ms; }
.devices-reveal .device-item:nth-child(5){ animation-delay: 96ms; }

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

.devices-empty{
  margin-top: 10px;
  padding: 18px 16px;
  border: 1px dashed rgba(17, 30, 71, .18);
  border-radius: 18px;
  background: rgba(255,255,255,.56);
  color: rgba(17, 30, 71, .70);
  font-size: 18px;
}

.btn-danger{
  background: linear-gradient(135deg, rgba(255,75,75,.92) 0%, rgba(255,137,137,.88) 100%);
  color: #fff;
  border: 1px solid rgba(255,75,75,.22);
  box-shadow: 0 16px 44px rgba(255,75,75,.26);
}

.btn-danger:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 54px rgba(255,75,75,.34);
}

.refresh-toggle svg{
  opacity: .9;
}
.refresh-toggle:hover svg{
  opacity: 1;
}

/* icon button */
.icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(16,61,148,.10);
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow1);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(16,61,148,.16);
  background: rgba(255,255,255,.78);
}
.icon-btn:active{
  transform: translateY(0);
}
.icon-btn svg{
  opacity: .92;
}
.icon-btn:hover svg{ opacity: 1; }

.icon-btn.is-loading{
  opacity: .78;
  pointer-events: none;
}

.icon-btn.is-loading svg{
  animation: spin 900ms linear infinite;
}

@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.icon-btn-sm{
  width: 36px;
  height: 36px;
  border-radius: 13px;
}

.devices-title-row{
  display:flex;
  align-items:center;
  gap: 10px;
}

.devices-updating{
  opacity: .65;
  transition: opacity 160ms var(--ease);
}

/* prevent unpleasant scroll jumps when devices list re-renders */
.devices-page,
.devices-card,
.devices-body,
.devices-list,
.devices-content{
  overflow-anchor: none;
}


/* mobile bottom navigation (shown when top nav is hidden) */
.bottomnav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 10px 14px 14px;
  background: rgba(255,255,255,.86);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.bottomnav-inner{
  max-width: 1120px;
  margin: 0 auto;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 10px;
}
.bottomnav-link{
  flex: 1 1 0;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 18px;
  text-decoration:none !important;
  color: rgba(17,30,71,.70);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -.01em;
  transform: translateZ(0);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  border: 1px solid transparent;
}
.bottomnav-link:hover{ background: rgba(17,30,71,.04); }
.bottomnav-link:active{ background: rgba(17,30,71,.06); }
.bottomnav-link svg{ width: 20px; height: 20px; }
.bottomnav-link.is-active{
  background: rgba(118,210,255,.16);
  border-color: rgba(118,210,255,.40);
  color: rgba(17,30,71,.92);
}
@media (min-width: 901px){
  .bottomnav{display:none;}
}
@media (max-width: 900px){
  /* make room for bottom nav */
  .page{ padding-bottom: 110px !important; }
}

/* --------------------------- */
/* YooKassa widget modal */

html.modal-open{ overflow: hidden; }

.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(13, 20, 35, 0.38);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.modal-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

.modal-card{
  width: 440px;
  max-width: 100%;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
  overflow: hidden;
  transform: translateY(10px) scale(.985);
  transition: transform .22s ease;
}

.modal-backdrop.is-open .modal-card{
  transform: translateY(0) scale(1);
}

.modal-head{
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(17,30,71,.10);
}

.modal-head-text{ min-width: 0; }

.modal-title{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 18px;
  color: rgba(17,30,71,.95);
}

.modal-sub{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
}

.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(17,30,71,.12);
  background: rgba(255,255,255,.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.icon-btn:hover{ transform: scale(1.02); background: rgba(118,210,255,.10); border-color: rgba(118,210,255,.45); }
.icon-btn:active{ transform: scale(.98); }
.icon-btn svg{ width: 20px; height: 20px; fill: rgba(17,30,71,.86); }

.modal-body{ padding: 18px; }

#yooWidgetMount{
  width: 100%;
  min-height: 280px;
}

.yoo-result{
  width: 100%;
  padding: 10px 4px 2px;
  text-align: center;
}

.yoo-result.hidden{ display: none; }

.yoo-result-card{
  width: 100%;
  border: 1px solid rgba(17,30,71,.10);
  background: rgba(255,255,255,.86);
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.yoo-result-icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(118,210,255,.16);
  border: 1px solid rgba(118,210,255,.35);
}

.yoo-result-icon.is-error{
  background: rgba(255, 120, 120, .12);
  border-color: rgba(255, 120, 120, .30);
}

.yoo-result-title{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 18px;
  color: rgba(17,30,71,.96);
}

.yoo-result-text{
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(17,30,71,.78);
}

.yoo-result-sub{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(17,30,71,.72);
}

.yoo-mini-spinner{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(17,30,71,.20);
  border-top-color: rgba(17,30,71,.72);
  animation: yooSpin .9s linear infinite;
}

@keyframes yooSpin{ to { transform: rotate(360deg); } }

.yoo-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.yoo-actions .btn{ min-width: 140px; }

/* Animated checkmark */
.yoo-check{
  width: 44px;
  height: 44px;
}

.yoo-check circle{
  stroke: rgba(17,30,71,.82);
  stroke-width: 2.6;
  fill: none;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: yooCircle .55s ease forwards;
}

.yoo-check path{
  stroke: rgba(17,30,71,.88);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: yooCheck .38s ease forwards;
  animation-delay: .20s;
}

@keyframes yooCircle{ to { stroke-dashoffset: 0; } }
@keyframes yooCheck{ to { stroke-dashoffset: 0; } }

.yoo-x{
  width: 44px;
  height: 44px;
}

.yoo-x path{
  stroke: rgba(17,30,71,.86);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: yooX .42s ease forwards;
}

@keyframes yooX{ to { stroke-dashoffset: 0; } }

@media (max-width: 420px){
  .modal-head{ padding: 14px 14px; }
  .modal-body{ padding: 14px; }
  .modal-title{ font-size: 16px; }
}

/* Devices actions */
.devices-actions{
  display:flex;
  justify-content:center;
  padding: 14px 4px 6px;
}
.devices-add-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(26,166,85,.24);
  background: rgba(26,166,85,.08);
  color: rgba(26,166,85,1);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
  width: 100%;
  max-width: 320px;
}
.devices-add-btn svg{
  flex: 0 0 auto;
}
.devices-add-btn span{
  white-space: nowrap;
}
.devices-add-btn:hover{
  transform: translateY(-1px);
  background: rgba(26,166,85,.12);
  border-color: rgba(26,166,85,.32);
}
.devices-add-btn:active{
  transform: translateY(0);
}
@media (max-width: 420px){
  .devices-add-btn{
    max-width: 100%;
  }
}

/* SPA page transitions */
main.page{
  will-change: opacity, transform;
}
main.page.spa-leave{
  opacity: 0;
  transform: translateY(-4px) scale(.995);
  filter: blur(2px);
  transition: opacity var(--dur-2) var(--ease-in), transform var(--dur-2) var(--ease-in), filter var(--dur-2) var(--ease-in);
}
main.page.spa-enter{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
}
main.page.spa-enter.spa-enter-active{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out);
}

/* SPA loading indicator (prevents perceived flicker while waiting for network) */
.spa-loader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-40%) scaleX(.18);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(118,210,255,0) 0%, rgba(118,210,255,.55) 45%, rgba(79,134,255,.55) 55%, rgba(79,134,255,0) 100%);
  transition: opacity var(--dur-1) var(--ease-out);
}
html.spa-pending .spa-loader{
  opacity: 1;
  animation: spaLoader 900ms var(--ease) infinite;
}

html.spa-pending main.page{
  opacity: .96;
}
@keyframes spaLoader{
  0%{ transform: translateX(-45%) scaleX(.18); }
  40%{ transform: translateX(-5%) scaleX(.55); }
  70%{ transform: translateX(25%) scaleX(.42); }
  100%{ transform: translateX(70%) scaleX(.20); }
}

/* Avoid accidental horizontal nudge during SPA swaps */
html.spa-pending, html.spa-pending body{ overflow-x: hidden; }


/* Refresh icon: force stroke-only rendering (no filled wedges on mobile SVG rendering) */
.refresh-icon, .refresh-icon * { fill: none !important; }


.support-wide{
  width: 100%;
  padding: 12px 14px;
  border-radius: 18px;
}


/* Page loader (skeleton) */
.page-loader{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(242,247,255,.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.page-loader.hidden{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.loader-wrap{
  width: min(560px, calc(100% - 24px));
  display: grid;
  gap: 12px;
}
.loader-lines{
  display: grid;
  gap: 10px;
  padding: 2px 4px;
}
.skeleton{
  position: relative;
  background: rgba(17,30,71,.07);
  overflow: hidden;
  border-radius: 16px;
  animation: skeletonPulse 1.25s ease-in-out infinite;
}
.sk-card{ height: 92px; border-radius: 22px; }
.sk-line{ height: 16px; border-radius: 999px; }
.sk-line-sm{ width: 72%; }

/* --------------------------- */
/* Premium motion overrides (final layer) */

/* Type/platform selectors: subtle lift, no wobble */
.platform-segmented-big .segmented-item{
  transform: translateY(0) !important;
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out) !important;
}
.platform-segmented-big .segmented-item:not(.is-active):hover{
  transform: translateY(-1px) !important;
}
.platform-segmented-big .segmented-item.is-active{
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 40px rgba(17,30,71,.12) !important;
}

/* Buttons: crisp press, no rubber scaling */
.btn:active{ transform: translateY(0) scale(.995); }


/* ===================================================================
   LUXE FINAL LAYER
   =================================================================== */

:root{
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.45, 0, 1, 1);

  --radius: 22px;
  --radius-sm: 16px;
  --radius-xs: 14px;

  --luxe-surface: rgba(255,255,255,.76);
  --luxe-surface-2: rgba(255,255,255,.62);
  --luxe-stroke: rgba(17,30,71,.10);
  --luxe-stroke-2: rgba(17,30,71,.14);

  --luxe-shadow: 0 20px 60px rgba(17,30,71,.12);
  --luxe-shadow-soft: 0 12px 34px rgba(17,30,71,.10);
  --luxe-shadow-float: 0 26px 70px rgba(17,30,71,.14);
}

body{
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* Background: slightly quieter, more "studio" feel */
.bg::before{ opacity: .22; }
.bg::after{ opacity: .70; }

/* Typography tightening */
.brand-name{ font-size: 19px; letter-spacing: -0.02em; }
.brand-sub{ font-size: 14px; }
.h1{ font-size: 50px; letter-spacing: -0.045em; }
.p{ font-size: 18px; }

.section-title,
.side-title{ letter-spacing: -0.01em; }

/* Cards */
.card{
  background: var(--luxe-surface);
  border-color: var(--luxe-stroke);
  box-shadow: var(--luxe-shadow);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
}
.card-right{ box-shadow: var(--luxe-shadow-soft); }

/* Inputs */
.input{
  border-color: var(--luxe-stroke);
  background: rgba(255,255,255,.78);
}
.input:focus{
  outline: none;
  border-color: rgba(79,134,255,.34);
  box-shadow: 0 0 0 4px rgba(79,134,255,.10);
}

/* Buttons: calm, crisp, no toy scaling */
.btn{
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  box-shadow: none;
  transform: translateZ(0);
  transition:
    transform 160ms var(--ease),
    background 200ms var(--ease),
    border-color 200ms var(--ease),
    box-shadow 200ms var(--ease),
    color 200ms var(--ease);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-ghost,
.btn-soft{
  background: var(--luxe-surface-2);
  border-color: var(--luxe-stroke);
}
.btn-ghost:hover,
.btn-soft:hover{
  background: rgba(255,255,255,.78);
  border-color: var(--luxe-stroke-2);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
}

.btn-primary{
  background: linear-gradient(135deg, rgba(16,61,148,.94), rgba(79,134,255,.92));
  box-shadow: 0 22px 54px rgba(16,61,148,.18);
}
.btn-primary:hover{
  box-shadow: 0 26px 66px rgba(16,61,148,.22);
}

.btn-danger{ box-shadow: 0 18px 54px rgba(255,75,75,.20); }
.btn-danger:hover{ box-shadow: 0 22px 64px rgba(255,75,75,.26); }

/* Segmented controls: keep container clean (no boxed background) */
.segmented{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
/* Active state should be clearly distinct */
.segmented-item:not(.is-active){
  background: rgba(255,255,255,.56);
  border-color: rgba(17,30,71,.12);
  box-shadow: none;
}
.segmented-item.is-active{
  border-color: rgba(118,210,255,.55);
  background: linear-gradient(135deg, rgba(118,210,255,.26), rgba(16,61,148,.06));
  box-shadow: 0 18px 40px rgba(17,30,71,.12);
}
/* Slider: keep original absolute layout; glow sits behind controls */
.slider-shell{ overflow: hidden; }
.thumb-glow{ z-index: 0; }
/* Devices cards */
.device-item{
  background: rgba(255,255,255,.80);
  border-color: var(--luxe-stroke);
  box-shadow: 0 14px 42px rgba(17,30,71,.10);
}
.device-item:hover{ box-shadow: 0 22px 64px rgba(17,30,71,.14); }

/* Bottom nav: tighter, premium */
.bottomnav{
  background: rgba(255,255,255,.90);
  box-shadow: 0 -16px 46px rgba(17,30,71,.10);
}
.bottomnav-link{
  font-weight: 800;
  letter-spacing: -0.01em;
}
.bottomnav-link.is-active{
  background: rgba(79,134,255,.10);
  border-color: rgba(79,134,255,.24);
}

/* Loader: calm, minimal */
.page-loader{
  background: rgba(242,247,255,.74);
}
.skeleton{
  background: rgba(17,30,71,.06);
  animation: skeletonPulse 1.55s ease-in-out infinite;
}

/* Modal close button: no bouncy scaling */
.modal-head .icon-btn:hover{ transform: translateY(-1px); }
.modal-head .icon-btn:active{ transform: translateY(0); }

/* Mobile tuning */
@media (max-width: 900px){
  body{ font-size: 17px; }
  .h1{ font-size: 38px; }
  .p{ font-size: 16px; }
}


/* Extra polish: texture + stable premium transitions */

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.bg{ z-index:0; }
header.topbar, main.page{ position:relative; z-index:2; }

.topbar-card{
  background: var(--luxe-surface);
  border-color: var(--luxe-stroke);
  box-shadow: var(--luxe-shadow-soft);
}

.account-pill{
  background: rgba(255,255,255,.72);
  border-color: var(--luxe-stroke);
  box-shadow: 0 14px 40px rgba(17,30,71,.10);
}

/* SPA transitions: calmer (less blur), more "expensive" */
main.page.spa-leave{
  transform: translateY(-2px) scale(.997);
  filter: blur(1px);
}
main.page.spa-enter{
  transform: translateY(8px);
  filter: blur(1px);
}

/* Backdrop: lighter, less "club" */
.modal-backdrop{
  background: rgba(13, 20, 35, 0.30);
  backdrop-filter: blur(14px);
}

/* Focus rings: consistent */
.btn:focus-visible,
.input:focus-visible,
.segmented-item:focus-visible,
.bottomnav-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(79,134,255,.12) !important;
  border-color: rgba(79,134,255,.28) !important;
}

/* ===================================================================
   Connect: platform buttons should not "jump" on tap
   =================================================================== */
.platform-segmented-big .segmented-item{
  transform: translateY(0) !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.platform-segmented-big .segmented-item:hover,
.platform-segmented-big .segmented-item:active,
.platform-segmented-big .segmented-item.is-active,
.platform-segmented-big .segmented-item.is-active:hover{
  transform: translateY(0) !important;
}
.platform-segmented-big .segmented-item{
  box-shadow: none !important;
}
.platform-segmented-big .segmented-item:not(.is-active):hover{
  background: rgba(17,30,71,.04) !important;
  border-color: rgba(17,30,71,.12) !important;
}
.platform-segmented-big .segmented-item.is-active{
  box-shadow: 0 12px 28px rgba(17,30,71,.10), 0 0 0 1px rgba(79,134,255,.18) inset !important;
}

/* Remove heavy segmented glow for platform buttons (keeps them stable) */
.platform-segmented-big .segmented-item.is-active::before,
.platform-segmented-big .segmented-item.is-active::after{
  content: none !important;
}

/* ===================================================================
   Connect page: no full-screen loading, no layout jumps
   =================================================================== */
/* Notice area opens/closes smoothly without shifting content abruptly */
.connect-notice-slot{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height 280ms var(--ease-out), opacity 200ms var(--ease-out), margin-top 220ms var(--ease-out);
}
.connect-notice-slot.is-open{
  max-height: 240px;
  opacity: 1;
  margin-top: 10px;
}

.connect-disabled{
  opacity: .62;
  filter: saturate(.92);
  pointer-events: none;
}

/* Platform buttons: same language as subscription type (no gradients) */
.platform-segmented-big .segmented-item{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(17,30,71,.12) !important;
}

.platform-segmented-big .segmented-item .os-svg{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.platform-segmented-big .segmented-item.is-active{
  background: rgba(79,134,255,.10) !important;
  border-color: rgba(79,134,255,.28) !important;
  box-shadow: 0 10px 22px rgba(17,30,71,.10), 0 0 0 1px rgba(255,255,255,.55) inset !important;
}

.platform-segmented-big .segmented-item:not(.is-active):hover{
  background: rgba(17,30,71,.04) !important;
  border-color: rgba(17,30,71,.14) !important;
}




/* hard-disable any fullscreen blur overlay loaders */
.page-loader,
.fullscreen-loader,
.blur-overlay,
.spa-overlay{
  display:none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}



/* Platform picker (Connect): match segmented style, no gradients, clear active state */
.platform-segmented-big .segmented-item{
  background: rgba(255,255,255,.56);
  border: 1px solid rgba(17,30,71,.12);
  box-shadow: none;
  transform: translateY(0) !important;
}
.platform-segmented-big .segmented-item:hover{
  background: rgba(255,255,255,.72);
  transform: translateY(0) !important;
}
.platform-segmented-big .segmented-item.is-active{
  background: rgba(118,210,255,.14) !important;
  border-color: rgba(118,210,255,.55) !important;
  box-shadow: 0 16px 34px rgba(17,30,71,.12);
  transform: translateY(0) !important;
}
.platform-segmented-big .segmented-item.is-active::before,
.platform-segmented-big .segmented-item.is-active::after{
  display:none !important;
}
.platform-segmented-big .segmented-item svg{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.platform-segmented-big .segmented-item{
  gap: 6px;
}


/* HARD FIX: prevent device cards overflow on mobile/webview */
@media (max-width: 900px){
  .devices-list, #devicesList{ width:100%; max-width:100%; }
  .device-item{ width:100%; max-width:100%; }
  .device-main{ min-width:0; }
  .device-name, .device-meta{ max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
  .device-item .btn, .device-item .btn-danger{ width:100%; max-width:100%; }
}

/* Hard-fix: prevent any horizontal overflow in device cards on small screens (Telegram iOS WebView can be picky).
   These rules are placed at the end of the file so they win over earlier base typography. */
@media (max-width: 900px){
  .devices-list, #devicesList{ overflow-x:hidden !important; }
  .device-item .device-name,
  .device-item .device-meta{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
}


/* Mini App (Telegram iOS WebView) performance: backdrop-filter on fixed elements can cause flicker/pop-in while scrolling */
.is-miniapp .bottomnav,
.is-miniapp .topbar,
.is-miniapp .toast,
.is-miniapp .connect-notice{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #ffffff !important;
}

/* Telegram Mini App: prevent "pop-in" while scrolling (iOS WebView can flicker on animated lists) */
.tg-miniapp .devices-reveal .device-item,
.tg-miniapp .stepper.reveal .step,
.is-miniapp .devices-reveal .device-item,
.is-miniapp .stepper.reveal .step{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.tg-miniapp body,
.is-miniapp body{
  -webkit-overflow-scrolling: touch;
}

/* Also ensure no accidental fullscreen blur overlay ever appears */
.tg-miniapp .page-loader,
.tg-miniapp .blur-overlay,
.tg-miniapp .fullscreen-loader,
.is-miniapp .page-loader,
.is-miniapp .blur-overlay,
.is-miniapp .fullscreen-loader{
  display: none !important;
}

/* Telegram Mini App navigation: use Telegram Back button instead of the bottom nav */
.tg-miniapp .bottomnav,
.is-miniapp .bottomnav{
  display: none !important;
}

/* Telegram Mini App: keep scrolling smooth (avoid heavy filters on iOS WebView) */
.is-miniapp .glass,
.is-miniapp .blur,
.is-miniapp .backdrop,
.is-miniapp .page-blur,
.is-miniapp .page-loader{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Mini App main menu */
.hero-tight{ margin-bottom: 12px; }

.tg-subs-wrap{ margin: 12px 0 16px; }
.tg-subs-hint{ font-size: 13px; opacity: .58; text-align: center; margin-bottom: 10px; }

.tg-summary{
  margin: 8px 0 14px;
}

.tg-summary-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tg-subs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tg-sub-card{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
  padding: 12px 12px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tg-sub-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tg-sub-title{
  font-weight: 650;
  letter-spacing: -0.01em;
}

.tg-sub-badge{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  white-space: nowrap;
}

.tg-sub-badge.is-active{
  border-color: rgba(0, 122, 255, .28);
  background: rgba(0, 122, 255, .10);
}

.tg-sub-meta{
  font-size: 13px;
  opacity: .78;
  margin-top: 8px;
}

.tg-sub-skel{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.04);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.tg-sub-skel::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: translateX(-60%);
  animation: tgSkel 1.1s linear infinite;
}

@keyframes tgSkel { to { transform: translateX(60%); } }

.tg-menu{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-bottom: 10px; }

.tg-user{
  margin-top: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tg-user-card{
  width: 100%;
  max-width: 520px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 14px 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}

.tg-user-avatar{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow:hidden;
  flex: 0 0 54px;
  border: 2px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

.tg-user-avatar img{ width:100%; height:100%; object-fit: cover; display:block; }

.tg-user-meta{ min-width:0; }
.tg-user-name{ font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; }
.tg-user-sub{ margin-top: 2px; font-size: 13px; opacity: .62; }

.tg-menu-grid{ display:flex; gap:10px; flex-wrap: nowrap; }

/* Primary action on menu (full width) */
.tg-primary{ width: 100%; margin-top: 10px; margin-bottom: 8px; }
.tg-primary-btn{
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.8,.2,1), border-color .16s cubic-bezier(.2,.8,.2,1);
}
.tg-primary-btn:hover{
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
}
.tg-primary-btn:active{ transform: scale(.995); }
.tg-primary-ico{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79,134,255,.10);
  color: var(--primary);
  flex: 0 0 30px;
}
.tg-primary-ico svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.tg-primary-label{
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tg-menu-btn{
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.8,.2,1), border-color .16s cubic-bezier(.2,.8,.2,1);
}

.tg-menu-btn:active{ transform: scale(.99); }

.tg-menu-btn:hover{
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

.tg-menu-ico{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79,134,255,.10);
  color: var(--primary);
}

.tg-menu-ico svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}

.tg-menu-label{
  font-weight: 650;
  letter-spacing: -0.01em;
  text-align: center;
}

.tg-links{
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: 2px;
}

.tg-link{
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.82);
}

.tg-link:active{ transform: scale(.99); }

@media (max-width: 420px){
  .tg-menu-grid{ gap: 8px; }
  .tg-menu-btn{ padding: 12px 8px; }
  .tg-menu-label{ font-size: 13px; }
}

.footer-mini{ padding-top: 8px; }
.footer-note{ font-size: 12px; opacity: .6; text-align: center; }



/* --- MiniApp Menu polish --- */
.tg-menu-top{ display:flex; justify-content:center; padding-top: clamp(56px, 12svh, 120px); }

.tg-logo-center{
  width: 260px;
  height: 260px;
  margin: 10px auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border: none;
  box-shadow: none;
}
.tg-logo-center img{
  width: 252px;
  height: 252px;
  display:block;
  object-fit: contain;
  transform: translateY(24px) scale(1.62);
  transform-origin: 50% 50%;
  will-change: transform;
}
.tg-user-center{
  text-align:center;
  padding: 14px 14px 4px;
}
.tg-avatar-wrap{
  width: 74px;
  height: 74px;
  border-radius: 26px;
  margin: 6px auto 10px;
  overflow:hidden;
  border: 1px solid rgba(17,30,71,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
}
.tg-avatar-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }

.tg-menu-root{
  max-width: 520px;
  margin: 0 auto;
  padding: 0 14px 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms cubic-bezier(.2,.8,.2,1), transform 260ms cubic-bezier(.2,.8,.2,1);
}
html.tg-miniapp.is-ready .tg-menu-root{ opacity: 1; transform: translateY(0); }

html.tg-miniapp .topbar{ display:none !important; }
html.tg-miniapp .bottomnav{ display:none !important; }

/* remove extra page top spacing now that headers are gone */
.page{ padding-top: 10px !important; }


/* Hard: no decorative stars in any mode */
.bg::before{ display:none !important; }

/* ===== Mini App polish v4 ===== */

/* Stronger, stable gradient in Telegram miniapp (no stars) */
html.tg-miniapp .bg{
  background:
    radial-gradient(980px 680px at 22% 12%, rgba(79,134,255,.22) 0%, rgba(79,134,255,0) 62%),
    radial-gradient(980px 680px at 84% 18%, rgba(118,210,255,.24) 0%, rgba(118,210,255,0) 60%),
    radial-gradient(1100px 760px at 50% 92%, rgba(16,61,148,.10) 0%, rgba(16,61,148,0) 68%),
    linear-gradient(180deg, #F7FAFF 0%, #F2F7FF 62%, #F8FBFF 100%);
}

/* Universe gradient overrides only for the TG menu in miniapp */
html.tg-miniapp body.tg-menu-page .bg,
html.is-miniapp body.tg-menu-page .bg{
  background:
    radial-gradient(980px 680px at 22% 12%, rgba(79,134,255,.16) 0%, rgba(79,134,255,0) 62%),
    radial-gradient(980px 680px at 84% 18%, rgba(118,210,255,.26) 0%, rgba(118,210,255,0) 60%),
    radial-gradient(1100px 760px at 50% 92%, rgba(16,61,148,.10) 0%, rgba(16,61,148,0) 68%),
    linear-gradient(180deg, #F7FAFF 0%, #F2F7FF 62%, #F8FBFF 100%);
}
html.tg-miniapp body.tg-menu-page .bg::after,
html.is-miniapp body.tg-menu-page .bg::after{
  opacity: .85;
}

/* Smooth page enter (perceived instant load) */
html.tg-miniapp body.tg-menu-page main.page,
html.tg-miniapp body.tg-section-page main.page{
  opacity: 1;
  transform: translateY(10px);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
html.tg-miniapp.is-ready body.tg-menu-page main.page,
html.tg-miniapp.is-ready body.tg-section-page main.page{
  transform: translateY(0);
}

/* Menu layout: move everything a bit lower, logo slightly above center */
html.tg-miniapp body.tg-menu-page main.page{
  min-height: 100svh;
  padding-top: 8svh !important;
  padding-bottom: 24px;
}
html.tg-miniapp body.tg-menu-page .tg-menu-top{ display:flex; justify-content:center; padding-top: clamp(56px, 12svh, 120px); }
html.tg-miniapp body.tg-menu-page .tg-menu-root{
  margin-top: 0;
}



/* --- Mini App Menu: robust centering + sizing (hotfix) --- */
body.tg-menu-page main.page{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tg-menu-top,
.tg-menu-root,
.tg-subs-wrap,
.tg-menu,
.tg-subs,
.tg-menu-grid{
  width: 100%;
  box-sizing: border-box;
}

.tg-menu-root{
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.tg-subs{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tg-menu-grid{
  justify-content: space-between;
}

@media (min-width: 901px){
  .tg-menu-root{ max-width: 680px; padding: 0 18px 30px; }
  .tg-menu-btn{ padding: 14px 12px; gap: 10px; }
  .tg-menu-ico{ width: 22px; height: 22px; }
  .tg-menu-label{ font-size: 15px; }
}

@media (max-width: 520px){
  .tg-menu-root{ padding-left: 12px; padding-right: 12px; }
  .tg-menu-btn{ padding: 12px 8px; }
}

/* Make sure menu content is visible even if tg-miniapp class isn't present (e.g., Telegram Desktop quirks) */
html.is-ready .tg-menu-root{ opacity: 1; transform: translateY(0); }


/* --- Miniapp menu refinements (subscriptions layout) --- */
.tg-subs{ gap: 12px; }
.tg-sub-card{ padding: 14px 14px; min-height: 96px; gap: 8px; }
.tg-sub-head{ display:flex; align-items:center; gap: 10px; }
.tg-sub-title{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; letter-spacing: -0.01em; }
.tg-sub-status{ width: 22px; height: 22px; border-radius: 999px; display:flex; align-items:center; justify-content:center; flex: 0 0 22px; border: 1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.03); color: rgba(0,0,0,.32); }
.tg-sub-status svg{ width: 14px; height: 14px; }
.tg-sub-card.is-active{ border-color: rgba(0, 122, 255, .22); }
.tg-sub-status.is-active{ border-color: rgba(0, 122, 255, .28); background: rgba(0, 122, 255, .12); color: rgba(0, 122, 255, .92); }
.tg-sub-time{ font-size: 22px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; }
.tg-sub-card.is-inactive .tg-sub-time{ opacity: .55; }
.tg-sub-meta{ font-size: 12px; opacity: .70; margin-top: 0; }

/* Keep subscription blocks centered and prevent horizontal drift */
.tg-menu-root{ width: 100%; box-sizing: border-box; }
.tg-subs-wrap, .tg-menu{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-bottom: 10px; }
.tg-subs{ width: 100%; }
@media (max-width: 720px){
  .tg-subs{ grid-template-columns: 1fr; }
}

/* Hide footer action buttons in miniapp (Bot/Support/Channel) */
html.tg-miniapp .footer, html.is-miniapp .footer{ display:none !important; }
html.tg-miniapp .footer-actions, html.is-miniapp .footer-actions{ display:none !important; }

/* === Miniapp menu: subscriptions v2 (clean, no protruding badges) === */
body.tg-menu-page .tg-subs-wrap{ margin: 12px 0 16px; }
body.tg-menu-page .tg-menu{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-bottom: 10px; }
body.tg-menu-page .tg-subs{ display:block; }
body.tg-menu-page .tg-subs-card{
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 14px 14px;
}

body.tg-menu-page .tg-sub-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 16px;
}

body.tg-menu-page .tg-sub-row + .tg-sub-row{ margin-top: 8px; }

body.tg-menu-page .tg-sub-name{
  font-weight: 650;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.tg-menu-page .tg-sub-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

body.tg-menu-page .tg-sub-pill{
  font-size: 13px;
  font-weight: 650;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  white-space: nowrap;
}

body.tg-menu-page .tg-sub-icon{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.32);
  flex: 0 0 22px;
}
body.tg-menu-page .tg-sub-icon svg{ width: 14px; height: 14px; }

body.tg-menu-page .tg-sub-row.is-active{
  background: rgba(79,134,255,.08);
}
body.tg-menu-page .tg-sub-row.is-active .tg-sub-pill{
  border-color: rgba(0, 122, 255, .22);
  background: rgba(0, 122, 255, .10);
  color: rgba(0, 122, 255, .95);
}
body.tg-menu-page .tg-sub-row.is-active .tg-sub-icon{
  border-color: rgba(0, 122, 255, .22);
  background: rgba(0, 122, 255, .12);
  color: rgba(0, 122, 255, .95);
}

body.tg-menu-page .tg-sub-row.is-inactive{
  background: rgba(0,0,0,.02);
}
body.tg-menu-page .tg-sub-row.is-inactive .tg-sub-pill{
  opacity: .75;
}

/* Skeleton placeholder */
body.tg-menu-page .tg-sub-skel{
  min-height: 110px;
  background: rgba(0,0,0,.035);
  border-color: rgba(0,0,0,.035);
  box-shadow: none;
}

/* Remove any legacy miniapp footer links if present */
html.tg-miniapp .tg-links, html.is-miniapp .tg-links{ display:none !important; }



/* ===== MiniApp Menu v9: no-scroll desktop, better subs rows ===== */
html.tg-miniapp body.tg-menu-page{
  overflow: hidden;
}

html.tg-miniapp body.tg-menu-page main.page{
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0 !important;
}

/* Keep logo visible but not too high; adapt to viewport height */
html.tg-miniapp body.tg-menu-page .tg-menu-top{ display:flex; justify-content:center; padding-top: clamp(56px, 12svh, 120px); }

html.tg-miniapp body.tg-menu-page .tg-logo-center{
  width: clamp(240px, 30vh, 420px);
  height: clamp(240px, 30vh, 420px);
  margin: 0 auto 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Root fills remaining height; content sits near bottom without scrolling */
html.tg-miniapp body.tg-menu-page .tg-menu-root{
  width: min(720px, 100%);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 14px clamp(16px, 5svh, 44px) !important;
}

/* Reduce margins so everything fits on desktop webview */
html.tg-miniapp body.tg-menu-page .tg-subs-wrap{ margin: 12px 0 16px; }
html.tg-miniapp body.tg-menu-page .tg-menu{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-bottom: 10px; }

/* Sub rows: no ellipsis, no badge overflow */
body.tg-menu-page .tg-sub-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

body.tg-menu-page .tg-sub-name{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  line-height: 1.15;
}

body.tg-menu-page .tg-sub-right{
  gap: 8px;
}

body.tg-menu-page .tg-sub-pill{
  padding: 7px 10px;
  font-size: 12.5px;
}

/* Desktop: make menu buttons feel full-sized */
@media (min-width: 901px){
  .tg-menu-grid{ gap: 12px; }
  .tg-menu-btn{ min-height: 108px; padding: 14px 12px; }
  .tg-menu-ico{ width: 40px; height: 40px; }
  .tg-menu-label{ font-size: 14px; }
}

/* Guard against horizontal drift */
.tg-menu-root, .tg-subs-wrap, .tg-subs, .tg-subs-card, .tg-menu, .tg-menu-grid{
  box-sizing: border-box;
  max-width: 100%;
}


/* --- Mini App Menu v10: no-scroll desktop + stable layout --- */
body.tg-menu-page{
  overflow: hidden;
}

body.tg-menu-page main.page{
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  justify-content: center !important;
}

body.tg-menu-page .tg-menu-top{ display:flex; justify-content:center; padding-top: clamp(56px, 12svh, 120px); }

body.tg-menu-page .tg-logo-center img{
  width: clamp(132px, 20vw, 190px) !important;
  height: auto;
}

body.tg-menu-page .tg-menu-root{
  margin-top: clamp(12px, 3.5vh, 22px) !important;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-height: 720px){
  body.tg-menu-page .tg-menu-btn{ min-height: 82px !important; }
  body.tg-menu-page .tg-sub-row{ padding-top: 10px !important; padding-bottom: 10px !important; }
  body.tg-menu-page .tg-subs-card{ padding: 12px 12px !important; }
}

@media (max-width: 420px){
  body.tg-menu-page .tg-sub-right{
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
  body.tg-menu-page .tg-sub-pill{ max-width: 100%; }
  body.tg-menu-page .tg-sub-name{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}


/* Keep 3 menu buttons in one row */
body.tg-menu-page .tg-menu-grid{ flex-wrap: nowrap !important; }
body.tg-menu-page .tg-menu-btn{ flex: 1 1 0 !important; }


/* --- TG MENU: desktop packing + no overflow (v12) --- */
body.tg-menu-page main.page{
  padding-left: 18px;
  padding-right: 18px;
}

/* Logo bigger but less empty air */
.tg-menu-top{ display:flex; justify-content:center; padding-top: clamp(56px, 12svh, 120px); }
.tg-logo-center img{
  width: clamp(110px, 16vw, 170px);
  height: auto;
}

/* Reduce vertical gaps between blocks so everything fits on desktop without scroll */
.tg-subs-wrap{ margin: 12px 0 16px; }
.tg-primary{ width: 100%; margin-top: 10px; margin-bottom: 8px; }
.tg-menu{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-bottom: 10px; }

/* Primary connect button: less "fat", inline label */
.tg-primary-btn{
  min-height: 64px;
  padding: 10px 14px;
  flex-direction: row;
  gap: 10px;
  border-radius: 18px;
}
.tg-primary-ico svg{ width: 22px; height: 22px; }
.tg-primary-label{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display:flex;
  align-items: baseline;
  gap: 8px;
}
.tg-primary-device{
  font-size: 14px;
  font-weight: 650;
  opacity: .70;
  white-space: nowrap;
}

/* Menu buttons: smaller height, always 3 in a row */
.tg-menu-grid{
  gap: 10px;
}
.tg-menu-btn{
  min-height: 70px;
  padding: 10px 8px;
  border-radius: 18px;
}
.tg-menu-label{ font-size: 14px; font-weight: 750; }
.tg-menu-ico svg{ width: 22px; height: 22px; }

/* Ensure no accidental scroll on desktop for menu */
html.tg-miniapp body.tg-menu-page{
  overflow: hidden;
}
html.tg-miniapp body.tg-menu-page main.page{
  min-height: 100svh;
}



/* --- Mini App Menu: desktop layout fixes (v13) --- */
body.tg-menu-page{
  overflow: hidden;
}

body.tg-menu-page main.page{
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  justify-content: center;
}

/* Bring everything closer: less air on desktop, still comfy on mobile */
html.tg-miniapp body.tg-menu-page .tg-menu-top{ display:flex; justify-content:center; padding-top: clamp(56px, 12svh, 120px); }

html.tg-miniapp body.tg-menu-page .tg-subs-wrap{ margin: 12px 0 16px; }

html.tg-miniapp body.tg-menu-page .tg-primary{ width: 100%; margin-top: 10px; margin-bottom: 8px; }

body.tg-menu-page .tg-menu{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-bottom: 10px; }

body.tg-menu-page .tg-menu-grid{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
}

body.tg-menu-page .tg-menu-btn{
  min-height: 84px;
  padding: 12px 10px;
}

body.tg-menu-page .tg-menu-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(79,134,255,.10);
  color: var(--primary);
}

body.tg-menu-page .tg-menu-ico svg{
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

body.tg-menu-page .tg-primary-btn{
  padding: 10px 14px !important;
  border-radius: 18px !important;
  min-height: 52px !important;
}


body.tg-menu-page .tg-primary-ico{
  width: 34px !important;
  height: 34px !important;
  border-radius: 14px !important;
  background: rgba(79,134,255,.10) !important;
  color: var(--primary) !important;
  flex: 0 0 34px !important;
}
body.tg-menu-page .tg-primary-ico svg{
  width: 20px !important;
  height: 20px !important;
}


/* Ensure the 3 buttons are always visible on Telegram Desktop */
@media (min-width: 901px){
  body.tg-menu-page .tg-menu-root{ max-width: 680px; padding: 0 18px 0; }
  body.tg-menu-page .tg-menu-btn{ min-height: 88px; }
}

/* Never stack into 2+1 in the menu grid */
body.tg-menu-page .tg-menu-grid > a{
  flex: 1 1 0;
  min-width: 0;
}



@media (min-width: 901px){
  .tg-menu-top{ padding-top: clamp(34px, 8svh, 80px); }
  .tg-menu-root{ padding-bottom: 14px; }
}
html.tg-miniapp body.tg-menu-page{ overflow: hidden; }
html.tg-miniapp body.tg-menu-page .page{ min-height: 100svh; overflow: hidden; }



/* --- Miniapp menu spacing fix v15 (desktop was pushing buttons off-screen) --- */
html.tg-miniapp body.tg-menu-page main.page{
  min-height: 100svh !important;
  height: 100svh !important;
  overflow: hidden !important;
  padding-top: clamp(14px, 3svh, 28px) !important;
  padding-bottom: clamp(12px, 2svh, 18px) !important;
}

html.tg-miniapp body.tg-menu-page .tg-menu-top{
  padding-top: 0 !important;
  margin-top: clamp(18px, 3svh, 30px) !important;
  margin-bottom: 8px !important;
}

html.tg-miniapp body.tg-menu-page .tg-logo-center img{
  height: clamp(82px, 13svh, 120px) !important;
  width: auto !important;
}

html.tg-miniapp body.tg-menu-page .tg-primary{
  margin-top: 8px !important;
  margin-bottom: 4px !important;
}

html.tg-miniapp body.tg-menu-page .tg-menu{
  margin-top: 4px !important;
  padding-bottom: 0 !important;
}

@media (min-width: 901px){
  html.tg-miniapp body.tg-menu-page .tg-menu-root{
    padding-bottom: 10px !important;
  }
  html.tg-miniapp body.tg-menu-page .tg-primary-btn{
    min-height: 52px !important;
    padding: 12px 14px !important;
  }
  html.tg-miniapp body.tg-menu-page .tg-menu-btn{
    min-height: 86px !important;
    padding: 12px 10px !important;
  }
}

/* If Telegram Desktop doesn't set tg-miniapp, still keep menu within viewport */
body.tg-menu-page main.page{
  min-height: 100svh;
}



/* === Miniapp menu desktop spacing hard-fix (no scroll, no offscreen buttons) === */
html.tg-miniapp body.tg-menu-page main.page{
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  padding-top: 14px !important;
  padding-bottom: 14px;
}

html.tg-miniapp body.tg-menu-page .tg-menu-top{
  padding-top: clamp(18px, 5svh, 56px) !important;
}

body.tg-menu-page .tg-menu-root{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 0;
}

body.tg-menu-page .tg-subs-wrap{
  margin: 10px 0 8px;
}

.tg-primary{
  margin-top: 6px;
  margin-bottom: 4px;
}

body.tg-menu-page .tg-menu{
  margin-top: 4px;
  padding-bottom: 0;
}

@media (min-width: 901px){
  html.tg-miniapp body.tg-menu-page main.page{
    padding-top: 10px !important;
    padding-bottom: 10px;
  }
  html.tg-miniapp body.tg-menu-page .tg-menu-top{
    padding-top: 18px !important;
  }
  .tg-logo-center{
    width: auto;
    height: auto;
    margin: 6px auto 6px;
  }
  .tg-logo-center img{
    width: 210px;
    height: auto;
  }
  .tg-menu-root{ max-width: 720px; }
  .tg-subs{ gap: 10px; }
  .tg-primary-btn{ padding: 14px 16px; }
  .tg-menu-grid{ gap: 12px; }
}

@media (max-height: 620px){
  html.tg-miniapp body.tg-menu-page .tg-menu-top{
    padding-top: 12px !important;
  }
  .tg-logo-center img{ width: 190px; }
  body.tg-menu-page .tg-subs-wrap{ margin: 8px 0 6px; }
  .tg-primary-btn{ padding: 12px 14px; }
}

/* ===== Menu spacing + desktop visibility fix (requested) ===== */
/* Telegram Desktop иногда даёт маленький viewport: из-за этого нижние кнопки могли уезжать вниз.
   Здесь мы:
   - убираем жёсткое overflow:hidden;
   - уменьшаем вертикальные отступы;
   - делаем логотип адаптивным по высоте;
   - сокращаем расстояния между блоками (подписки -> подключиться -> меню). */

html.tg-miniapp body.tg-menu-page main.page{
  height: auto !important;
  min-height: 100svh;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-top: 10px !important;
  padding-bottom: 12px !important;
}

html.tg-miniapp body.tg-menu-page .tg-menu-top{
  padding-top: clamp(10px, 3svh, 40px) !important;
}

html.tg-miniapp body.tg-menu-page .tg-logo-center{
  width: clamp(170px, 22svh, 220px) !important;
  height: clamp(170px, 22svh, 220px) !important;
  margin: 6px auto 4px !important;
}

html.tg-miniapp body.tg-menu-page .tg-logo-center img{
  width: clamp(120px, 16svh, 150px) !important;
  height: clamp(120px, 16svh, 150px) !important;
}

html.tg-miniapp body.tg-menu-page .tg-subs-wrap{
  margin: 10px 0 6px !important;
}

html.tg-miniapp body.tg-menu-page .tg-primary{
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}

html.tg-miniapp body.tg-menu-page .tg-menu{
  margin-top: 4px !important;
  gap: 8px !important;
  padding-bottom: 0 !important;
}

html.tg-miniapp body.tg-menu-page .tg-menu-grid{
  gap: 10px !important;
}

/* ===== TG MENU: compact + always-visible buttons (v13) =====
   - поднимаем весь контент выше (особенно Telegram Desktop)
   - резко уменьшаем расстояния между блоками
   - никогда не режем нижние кнопки: если места мало - разрешаем скролл
*/

/* Base: stop any previous centered / no-scroll layouts */
body.tg-menu-page{ overflow-x: hidden !important; }

body.tg-menu-page main.page{
  height: 100svh !important;
  min-height: 100svh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}

/* Telegram Mini App: override legacy flex-end root that pushed blocks down */
html.tg-miniapp body.tg-menu-page main.page{
  height: 100svh !important;
  min-height: 100svh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}

/* Logo block: much less top air */
body.tg-menu-page .tg-menu-top{
  padding-top: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}
html.tg-miniapp body.tg-menu-page .tg-menu-top{
  padding-top: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* Make logo smaller on desktop to lift menu up */
body.tg-menu-page .tg-logo-center img{
  width: clamp(96px, 12vw, 150px) !important;
  height: auto !important;
}
html.tg-miniapp body.tg-menu-page .tg-logo-center img{
  height: clamp(68px, 10svh, 104px) !important;
  width: auto !important;
}

/* Root: pack blocks, never push to bottom */
body.tg-menu-page .tg-menu-root{
  width: min(720px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 4px !important;
  padding: 0 14px 10px !important;
  flex: 0 0 auto !important;
}
html.tg-miniapp body.tg-menu-page .tg-menu-root{
  width: min(720px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 4px !important;
  padding: 0 14px 10px !important;
  flex: 0 0 auto !important;
}

/* Tighten spacing between subs, connect, and menu */
body.tg-menu-page .tg-subs-wrap{ margin: 6px 0 4px !important; }
body.tg-menu-page .tg-primary{ margin-top: 4px !important; margin-bottom: 2px !important; }
body.tg-menu-page .tg-menu{ margin-top: 2px !important; padding-bottom: 0 !important; }

html.tg-miniapp body.tg-menu-page .tg-subs-wrap{ margin: 6px 0 4px !important; }
html.tg-miniapp body.tg-menu-page .tg-primary{ margin-top: 4px !important; margin-bottom: 2px !important; }
html.tg-miniapp body.tg-menu-page .tg-menu{ margin-top: 2px !important; padding-bottom: 0 !important; }

/* Slightly shorter buttons so 3 cards fit even on smaller desktop viewports */
body.tg-menu-page .tg-primary-btn{ min-height: 52px !important; padding: 12px 14px !important; }
body.tg-menu-page .tg-menu-btn{ min-height: 76px !important; padding: 12px 10px !important; }

html.tg-miniapp body.tg-menu-page .tg-primary-btn{ min-height: 52px !important; padding: 12px 14px !important; }
html.tg-miniapp body.tg-menu-page .tg-menu-btn{ min-height: 76px !important; padding: 12px 10px !important; }

/* --- TG MENU: mobile offset (v14) ---
   Desktop/Windows is intentionally packed and lifted.
   On phones we add a bit more top air so subs + buttons sit slightly lower.
*/
@media (max-width: 520px){
  body.tg-menu-page main.page,
  html.tg-miniapp body.tg-menu-page main.page{
    padding-top: 18px !important;
    padding-bottom: 14px !important;
  }

  body.tg-menu-page .tg-menu-top,
  html.tg-miniapp body.tg-menu-page .tg-menu-top{
    padding-top: 18px !important;
    margin-bottom: 10px !important;
  }

  body.tg-menu-page .tg-menu-root,
  html.tg-miniapp body.tg-menu-page .tg-menu-root{
    margin-top: 12px !important;
    padding-bottom: 16px !important;
  }
}



/* --- Cabinet (Личный кабинет) --- */
.tg-cabinet{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
}
.tg-cabinet-btn{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  color: rgba(17,30,71,.92);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.01em;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tg-cabinet-btn:hover{
  background: rgba(255,255,255,.92);
  transform: translateY(-1px);
}
.tg-cabinet-btn:active{
  transform: translateY(0);
}
.tg-cabinet-avatar{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(79,134,255,.22), rgba(255,111,167,.18));
  border: 1px solid rgba(79,134,255,.22);
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,30,71,.86);
  overflow:hidden;
  flex: 0 0 auto;
}
.tg-cabinet-avatar.is-initials{
  background-image: none !important;
}
.tg-cabinet-title{
  white-space: nowrap;
}
.tg-cabinet-chev{
  opacity: .7;
  margin-left: 2px;
  flex: 0 0 auto;
}

.tg-cabinet-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 252px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(13,20,35,.16);
  transform-origin: top left;
  transform: translateY(-8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.tg-cabinet.is-open .tg-cabinet-menu{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.tg-cabinet-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  color: rgba(17,30,71,.90);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}
.tg-cabinet-item:visited{
  color: rgba(17,30,71,.90);
}
.tg-cabinet-item:hover{
  background: rgba(79,134,255,.10);
}
.tg-cabinet-item:active{
  background: rgba(79,134,255,.14);
}
.tg-cabinet-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(79,134,255,.10);
  border: 1px solid rgba(79,134,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--primary);
  flex: 0 0 auto;
}
.tg-cabinet-ico svg{
  width: 18px;
  height: 18px;
}
.tg-cabinet-text{
  flex: 1 1 auto;
}

@media (max-width: 480px){
  .tg-cabinet{ top: 12px; left: 12px; }
  .tg-cabinet-btn{ padding: 9px 11px; border-radius: 16px; }
  .tg-cabinet-menu{ min-width: 230px; border-radius: 16px; }
}
.tg-cabinet-item:active{ background: rgba(255,255,255,0.10); }

/* Keep cabinet out of the way on small phones */
@media (max-width: 420px){
  .tg-cabinet{ left: 10px; top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .tg-cabinet-title{ display: none; }
  .tg-cabinet-btn{ padding: 10px; }
}

/* --- History / Referral pages --- */
.cab-gate{ text-align: center; padding: 10px 6px; }
.cab-gate-title{ font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.cab-gate-sub{ opacity: 0.8; }

.cab-loader{ padding: 10px 0; opacity: 0.8; }
.cab-status{ padding-top: 8px; font-size: 13px; opacity: 0.9; }
.cab-empty{ padding: 14px 0; opacity: 0.75; }

.cab-history-list{ display: grid; gap: 10px; }
.cab-history-item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 12px 12px;
}
.cab-history-row{ display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.cab-history-left{ min-width: 0; }
.cab-history-title{ font-weight: 800; font-size: 14px; }
.cab-history-sub{ font-size: 12px; opacity: 0.80; margin-top: 4px; word-break: break-word; }
.cab-history-right{ text-align: right; flex-shrink: 0; }
.cab-history-amount{ font-weight: 800; font-size: 14px; }
.cab-history-date{ font-size: 12px; opacity: 0.75; margin-top: 4px; }

.cab-ref-block{ display: grid; gap: 10px; }
.cab-label{ font-weight: 800; font-size: 13px; opacity: 0.9; }
.cab-ref-row{ display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.cab-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92);
}
.cab-ref-actions{ display: flex; gap: 10px; }
.cab-ref-stats{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cab-stat{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 12px;
}
.cab-stat-title{ font-size: 12px; opacity: 0.75; font-weight: 700; }
.cab-stat-value{ font-size: 16px; font-weight: 800; margin-top: 6px; }

/* --- Main logo: a bit bigger + subtle stars --- */
.tg-logo-center img{
  width: clamp(110px, 26vw, 170px);
  height: auto;
}
.tg-logo-stars{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tg-logo-star{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.0;
  animation: tgStarFly var(--dur, 1200ms) ease-out forwards;
}
.tg-logo-star svg{
  width: 100%;
  height: 100%;
  fill: rgba(255,255,255,0.65);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.30));
}
@keyframes tgStarFly{
  0%{
    transform: translate(-50%, -50%) scale(0.75) rotate(0deg);
    opacity: 0.0;
  }
  12%{
    opacity: 0.55;
  }
  100%{
    transform: translate(calc(-50% + var(--dx, 30px)), calc(-50% + var(--dy, -20px))) scale(1.0) rotate(var(--rot, 20deg));
    opacity: 0.0;
  }
}
@media (prefers-reduced-motion: reduce){
  .tg-logo-star{ display: none !important; }
}




/* ===================================================================
   TG menu buttons: keep light style even after click/visited/focus
   =================================================================== */
.tg-menu-btn,
.tg-menu-btn:visited{
  color: rgba(17,30,71,.92) !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(17,30,71,.10) !important;
}
.tg-menu-btn:focus,
.tg-menu-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(79,134,255,.12);
}
.tg-menu-btn:active{
  background: rgba(255,255,255,.96) !important;
}
.tg-menu-btn *{ -webkit-tap-highlight-color: transparent; }

/* ===================================================================
   Referral page UI
   =================================================================== */
.ref-card{
  padding: 18px;
}
.ref-link-block{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-bottom: 14px;
}
.ref-link-title{
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgba(17,30,71,.92);
}
.ref-link-row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.ref-link-row input{
  flex: 1 1 280px;
  min-width: 220px;
}
.ref-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ref-actions .btn{
  flex: 1 1 220px;
}
.ref-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ref-stat{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(17,30,71,.10);
  background: rgba(255,255,255,.72);
}
.ref-stat-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,30,71,.56);
}
.ref-stat-value{
  margin-top: 6px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  color: rgba(17,30,71,.92);
}
.ref-status{
  margin-top: 6px;
  font-weight: 800;
  color: rgba(17,30,71,.74);
}

.ref-history{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ref-history-card{
  padding: 12px 12px;
  border-radius: 20px;
  border: 1px solid rgba(17,30,71,.10);
  background: rgba(255,255,255,.72);
}
.ref-history-title{
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}
.ref-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(17,30,71,.08);
}
.ref-row:first-child{ border-top: none; padding-top: 0; }
.ref-row-title{
  font-weight: 800;
  letter-spacing: -.02em;
}
.ref-row-sub{
  margin-top: 3px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(17,30,71,.58);
}
.ref-row-meta{
  font-weight: 800;
  font-size: 12px;
  color: rgba(17,30,71,.52);
  white-space: nowrap;
}
.ref-empty{
  font-weight: 800;
  color: rgba(17,30,71,.58);
  padding: 8px 0;
}

/* modal */
.ref-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  background: rgba(13,20,35,.42);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ref-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.ref-modal-card{
  width: 520px;
  max-width: 100%;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.94);
  box-shadow: 0 32px 90px rgba(13,20,35,.30);
  padding: 18px 18px 16px;
}
.ref-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ref-modal-title{
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 18px;
}
.ref-modal-close{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(17,30,71,.10);
  background: rgba(17,30,71,.04);
  cursor: pointer;

  font-family: inherit;
  font-weight: 700;}
.ref-modal-close:hover{ background: rgba(17,30,71,.06); }

.ref-modal-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ref-modal-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ref-modal-row .input{ flex: 1 1 220px; }
.ref-modal-hint{
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,30,71,.58);
}
.ref-modal-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.ref-modal-actions .btn{ flex: 1 1 0; }

.ref-radio{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ref-radio label{
  flex: 1 1 0;
}
.ref-radio input{
  display:none;
}
.ref-radio-pill{
  width: 100%;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(17,30,71,.10);
  background: rgba(17,30,71,.03);
  font-weight: 800;
  color: rgba(17,30,71,.82);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.ref-radio input:checked + .ref-radio-pill{
  background: rgba(118,210,255,.16);
  border-color: rgba(118,210,255,.40);
  color: rgba(17,30,71,.92);
}
.ref-range{
  width: 100%;
}

/* responsive */
@media (max-width: 900px){
  .ref-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ref-history{ grid-template-columns: 1fr; }
}



/* tg-menu: profile dropdown */
.tg-topbar{
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 0 14px;
  pointer-events: none;
}
.tg-topbar > *{ pointer-events: auto; }

.tg-cab-trigger{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  color: var(--c-ink);
  cursor:pointer;
  user-select:none;
}
.tg-cab-trigger .tg-cab-ico{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(79,134,255,.10);
  color: rgba(16,61,148,.85);
}

.tg-cab-avatar-wrap{ position: relative; overflow: hidden; }
.tg-cab-avatar{ width: 100%; height: 100%; object-fit: cover; border-radius: 999px; display: none; }
.tg-cab-avatar-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight: 700; font-size: 12px; line-height: 1; color: rgba(16,61,148,.85); }

.tg-cab-trigger .tg-cab-ico svg{
  width: 18px;
  height: 18px;
  display:block;
}

.tg-cab-trigger .tg-cab-ava{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(79,134,255,.10);
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tg-cab-trigger .tg-cab-ava img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tg-cab-trigger .tg-cab-title{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
}
.tg-cab-trigger .tg-cab-chev{
  width: 18px;
  height: 18px;
  margin-left: 2px;
  color: rgba(16,61,148,.85);
  flex: 0 0 auto;
}
.tg-cab-menu{
  position:absolute;
  left: 50%;
  top: 54px;
  width: min(320px, calc(100vw - 28px));
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 56px rgba(0,0,0,.16);
  padding: 10px;

  display:block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px) scale(.98);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.tg-cab-menu.is-open{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
.tg-cab-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-ink);
  cursor:pointer;
}
.tg-cab-item:hover{
  background: rgba(79,134,255,.08);
  border-color: rgba(79,134,255,.14);
}
.tg-cab-item:active{ transform: scale(.99); }
.tg-cab-item .tg-menu-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(79,134,255,.10);
}
.tg-cab-item .tg-cab-label{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

/* tg-menu: larger logo + subtle sparks */
.tg-logo-center{
  position: relative;
}
.tg-logo-center img{
  width: 192px;
  height: 192px;
}
@media (max-width: 520px){
  .tg-logo-center{ width: 250px; height: 250px; }
  .tg-logo-center img{ width: 182px; height: 182px; }
}
.logo-sparks{
  position:absolute;
  inset: 0;
  pointer-events:none;
  overflow: visible;
  z-index: 5;
}
.logo-spark{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(79,134,255,.22);

  position:absolute;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--primary);
  opacity: .0;
  transform: translate(-50%, -50%);
  animation: sparkFly 1.9s var(--ease) forwards;
  filter: drop-shadow(0 6px 10px rgba(16,61,148,.10));}
.logo-spark svg{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.0;
  stroke-linejoin: round;
  stroke-linecap: round;
}
@keyframes sparkFly{
  0%{ opacity: 0; transform: translate(-50%, -50%) scale(.90) rotate(0deg); }
  16%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.02) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce){
  .logo-spark{ display:none !important; animation:none !important; }
}

/* mini pages: top back row */
.page-toprow{
  display:flex;
  justify-content:flex-start;
  padding: 4px 14px 0;
}
.page-back{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 700;
}
.page-back .ico{
  width: 18px;
  height: 18px;
  color: rgba(16,61,148,.85);
}


@media (max-width: 360px){
  .tg-logo-center img{ transform: translateY(24px) scale(1.62); }
}


/* enforce bigger logo on main tg-menu */
body.tg-menu-page .tg-logo-center img{
  width: 252px !important;
  height: 252px !important;
  transform: translateY(14px) scale(1.5) !important;
}


/* ===== v9: Logo sizing + 4-point sparks (override) ===== */
.tg-logo-center{
  width: 300px !important;
  height: 300px !important;
  margin: 18px auto 8px !important;
}

.tg-logo-center img{
  width: 244px !important;
  height: 244px !important;
  transform: translateY(24px) !important;
  transform-origin: 50% 50% !important;
}


.logo-spark{
  width: 18px !important;
  height: 18px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(79,134,255,.22) !important;
}
.logo-spark.is-bolt{ background: rgba(79,134,255,.14) !important; }
.logo-spark.is-star{ background: rgba(118,210,255,.14) !important; }
.logo-spark svg{
  width: 10px !important;
  height: 10px !important;
  stroke-width: 2.0 !important;
}


@media (max-width: 520px){
  .tg-logo-center{
    width: 280px !important;
    height: 280px !important;
    margin: 18px auto 8px !important;
  }

  .tg-logo-center img{
    width: 268px !important;
    height: 268px !important;
    transform: translateY(26px) scale(1.66) !important;
  }
}


/* hard-hide any legacy injected cabinet button (old builds) */
.tg-cabinet, .tg-cabinet-btn{ display:none !important; }

/* icon button (used in referral headers) */
.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(17,30,71,.12);
  background: rgba(255,255,255,.9);
  color: rgba(16,61,148,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  transition: transform .12s var(--ease), background .12s var(--ease);
  font-family: inherit;
}
.icon-btn:hover{ background: rgba(255,255,255,.98); }
.icon-btn:active{ transform: scale(.98); }
.icon-btn svg{ width: 20px; height: 20px; stroke: currentColor; fill:none; stroke-width: 2.2; }
.icon-btn .chev{ transition: transform .18s var(--ease); }
.ref-history-card.is-collapsed .icon-btn .chev{ transform: rotate(-90deg); }

/* referral collapsible history */
.ref-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
  min-height: 44px;
}
.ref-history-head .ref-history-title{ display:flex; align-items:center; min-height:44px; }
.ref-history-tools{ display:flex; gap: 10px; }
.ref-history-body{
  overflow:hidden;
  max-height: 700px;
  opacity: 1;
  transition: max-height .22s var(--ease), opacity .18s var(--ease);
}
.ref-history-card.is-collapsed .ref-history-body{
  max-height: 0;
  opacity: 0;
}

/* purchase history: source icon */
.cab-history-row{ gap: 12px; }
.cab-history-left{ display:flex; gap: 12px; align-items:flex-start; }
.cab-history-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(17,30,71,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  overflow:hidden;
}
.cab-history-icon img{ width: 22px; height: 22px; object-fit: contain; display:block; }
.cab-history-icon .yk{
  width: 22px; height: 22px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,0,127,.92), rgba(255,153,0,.92));
  color: white;
  font-weight: 800;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
}

.cab-history-text{ display:flex; flex-direction:column; min-width:0; }

/* Payment status overlay (purchase page) */
.pay-overlay{
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(9, 16, 38, .40);
  backdrop-filter: blur(10px);
}
.pay-overlay.hidden{ display:none; }
.pay-overlay-card{
  width: min(460px, 100%);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.60);
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(7, 15, 40, .18);
  overflow: hidden;
}
.pay-overlay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 16px 10px 16px;
}
.pay-overlay-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgba(17, 30, 71, .92);
}
.pay-overlay-body{ padding: 8px 16px 16px 16px; }
.pay-overlay-row{ display:flex; gap: 14px; align-items:flex-start; }
.pay-overlay-text{ font-size: 16px; line-height: 1.35; color: rgba(17, 30, 71, .72); padding-top: 2px; }
.pay-overlay-actions{ display:flex; gap: 10px; margin-top: 14px; }

.pay-spinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(79,134,255,.20);
  border-top-color: rgba(79,134,255,.92);
  animation: paySpin 1s linear infinite;
  flex: 0 0 22px;
  margin-top: 1px;
}
@keyframes paySpin{ to{ transform: rotate(360deg); } }

.pay-overlay-icon{
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 22px;
  margin-top: 1px;
  color: var(--primary);
}
.pay-overlay-icon svg{ width: 22px; height: 22px; fill: currentColor; }

/* =============================================================
   Miniapp section pages: look like a native miniapp, not a website
   + hard fix for Telegram WebView black rectangles
   ============================================================= */
html.tg-miniapp body.tg-section-page,
html.is-miniapp body.tg-section-page{
  background: #F2F7FF !important;
}
html.tg-miniapp body.tg-section-page::before,
html.is-miniapp body.tg-section-page::before{
  content:"";
  position: fixed;
  inset: 0;
  background: #F2F7FF;
  z-index: -3;
  pointer-events: none;
}

/* kill decorative background on section pages (it can glitch in WebView) */
html.tg-miniapp body.tg-section-page .bg,
html.is-miniapp body.tg-section-page .bg{
  display: none !important;
}

/* miniapp navigation is via Telegram BackButton */
html.tg-miniapp body.tg-section-page .topbar,
html.is-miniapp body.tg-section-page .topbar,
html.tg-miniapp body.tg-section-page .footer,
html.is-miniapp body.tg-section-page .footer,
html.tg-miniapp body.tg-section-page .bottomnav,
html.is-miniapp body.tg-section-page .bottomnav{
  display: none !important;
}

/* compact native-like canvas */
html.tg-miniapp body.tg-section-page main.page,
html.is-miniapp body.tg-section-page main.page{
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 14px 18px !important;
  transform: none !important;
}

/* small in-card header (used on Devices) */
.mini-only{ display: none; }
html.tg-miniapp .mini-only,
html.is-miniapp .mini-only{ display: block; }

/* Purchase page: show either cards (mobile) or slider (desktop)
   - Web (desktop): slider only
   - Web (mobile): cards only
   - Miniapp (any width): cards only
*/
@media (min-width: 861px){
  html:not(.is-miniapp):not(.tg-miniapp) .purchase-mobile-only{
    display: none !important;
  }

  /* Desktop web: keep the label "Выберите срок подписки" visible */
  html:not(.is-miniapp):not(.tg-miniapp) .section-title--period{
    display: block !important;
  }
  /* (Optional) hide any extra caption above the slider if present */
  html:not(.is-miniapp):not(.tg-miniapp) .slider-header .slider-caption{
    display: none !important;
  }
}

@media (max-width: 860px){
  .purchase-desktop-only{
    display: none !important;
  }
}

html.is-miniapp .purchase-desktop-only,
html.tg-miniapp .purchase-desktop-only{
  display: none !important;
}

html.tg-miniapp body.tg-section-page .miniapp-head,
html.is-miniapp body.tg-section-page .miniapp-head{
  margin: 2px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(17, 30, 71, .10);
}
html.tg-miniapp body.tg-section-page .miniapp-title,
html.is-miniapp body.tg-section-page .miniapp-title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
}
html.tg-miniapp body.tg-section-page .miniapp-sub,
html.is-miniapp body.tg-section-page .miniapp-sub{
  margin-top: 4px;
  font-size: 14px;
  color: rgba(17, 30, 71, .62);
  line-height: 1.35;
}

/* remove website-like hero + right aside */
html.tg-miniapp body.tg-section-page .hero,
html.is-miniapp body.tg-section-page .hero{
  display: none !important;
}
html.tg-miniapp body.tg-section-page .layout,
html.is-miniapp body.tg-section-page .layout{
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
html.tg-miniapp body.tg-section-page:not(.purchase-page) .right,
html.is-miniapp body.tg-section-page:not(.purchase-page) .right{
  display: none !important;
}

/* Devices: remove the big container "box" behind device cards in miniapp */
html.tg-miniapp body.devices-page .card-left,
html.is-miniapp body.devices-page .card-left{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* no blur anywhere on section pages (prevents black boxes) */
html.tg-miniapp body.tg-section-page .card,
html.is-miniapp body.tg-section-page .card,
html.tg-miniapp body.tg-section-page .devices-status,
html.is-miniapp body.tg-section-page .devices-status,
html.tg-miniapp body.tg-section-page .device-item,
html.is-miniapp body.tg-section-page .device-item,
html.tg-miniapp body.tg-section-page .bottomnav,
html.is-miniapp body.tg-section-page .bottomnav{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.tg-miniapp body.tg-section-page .card,
html.is-miniapp body.tg-section-page .card{
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 14px 34px rgba(17,30,71,.10) !important;
}
html.tg-miniapp body.tg-section-page .card-left,
html.is-miniapp body.tg-section-page .card-left{
  padding: 18px !important;
}

html.tg-miniapp body.tg-section-page .section-title,
html.is-miniapp body.tg-section-page .section-title{
  font-size: 18px !important;
  margin-bottom: 12px !important;
}

/* Purchase miniapp: titles a bit more compact */
html.is-miniapp body.purchase-page .section-title{
  font-size: 15px !important;
  margin-bottom: 10px !important;
}

html.tg-miniapp body.tg-section-page .device-item,
html.is-miniapp body.tg-section-page .device-item{
  background: #FFFFFF !important;
  box-shadow: 0 10px 22px rgba(17,30,71,.08) !important;
}

html.tg-miniapp body.tg-section-page .device-skeleton,
html.is-miniapp body.tg-section-page .device-skeleton{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(17, 30, 71, .10) !important;
}

/* =============================
   Mini App - Purchase redesign (mobile-first)
   ============================= */
html.is-miniapp body.purchase-page{
  overflow-x: hidden;
  --bottomnav-h: 0px;
}

/* Fun but premium: subtle animated background accents (Mini App purchase only) */
html.is-miniapp body.purchase-page .bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(242,247,255,1) 0%, rgba(118,210,255,.20) 45%, rgba(242,247,255,1) 100%);
}
html.is-miniapp body.purchase-page .bg::before,
html.is-miniapp body.purchase-page .bg::after{
  content:"";
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(50px);
  opacity: .35;
  pointer-events: none;
  z-index: -1;
  animation: miniBlobFloat 16s ease-in-out infinite;
}
html.is-miniapp body.purchase-page .bg::before{
  left: -160px;
  top: 10%;
  background: radial-gradient(circle at 30% 30%, rgba(118,210,255,.70), rgba(16,61,148,.25), rgba(255,255,255,0) 65%);
}
html.is-miniapp body.purchase-page .bg::after{
  right: -200px;
  top: 55%;
  background: radial-gradient(circle at 40% 40%, rgba(16,61,148,.30), rgba(118,210,255,.40), rgba(255,255,255,0) 65%);
  animation-duration: 20s;
  animation-delay: -6s;
}
@keyframes miniBlobFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  45%{ transform: translate3d(24px,-18px,0) scale(1.06); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

/* Staggered reveal for benefits on plan switch */
html.is-miniapp body.purchase-page #planBenefits.is-reveal .benefit-row{
  animation: miniFadeUp .22s ease both;
}
html.is-miniapp body.purchase-page #planBenefits.is-reveal .benefit-row:nth-child(2){ animation-delay: .04s; }
html.is-miniapp body.purchase-page #planBenefits.is-reveal .benefit-row:nth-child(3){ animation-delay: .08s; }
@keyframes miniFadeUp{
  from{ opacity: .65; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Glint on selected period */
html.is-miniapp body.purchase-page .period-card{
  position: relative;
  overflow: hidden;
}
html.is-miniapp body.purchase-page .period-card::after{
  content:"";
  position:absolute;
  inset: -40%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%);
  transform: translateX(-60%) rotate(8deg);
  opacity: 0;
  pointer-events:none;
}
html.is-miniapp body.purchase-page .period-card.is-active::after{
  opacity: .8;
  animation: miniGlint .7s ease;
}
@keyframes miniGlint{
  0%{ transform: translateX(-70%) rotate(8deg); opacity: 0; }
  20%{ opacity: .8; }
  100%{ transform: translateX(70%) rotate(8deg); opacity: 0; }
}

/* Slightly more playful tap feedback */
html.is-miniapp body.purchase-page .segmented-item.is-tap,
html.is-miniapp body.purchase-page .period-card.is-tap,
html.is-miniapp body.purchase-page #miniContinueButton.is-tap{
  transform: translateY(1px) scale(.99);
}
html.is-miniapp body.purchase-page .page,
html.is-miniapp body.purchase-page .layout,
html.is-miniapp body.purchase-page .left,
html.is-miniapp body.purchase-page .card{
  max-width: 100%;
}

/* Force single-column layout in Mini App purchase */
html.is-miniapp body.purchase-page .layout{
  grid-template-columns: 1fr !important;
}
html.is-miniapp body.purchase-page aside.right{
  display:none !important;
}

/* Hide slider UI in Mini App (we keep the range input for logic) */
html.is-miniapp body.purchase-page .slider-header,
html.is-miniapp body.purchase-page .slider-shell,
html.is-miniapp body.purchase-page .slider-legend{
  display:none !important;
}

html.is-miniapp body.purchase-page .divider{
  display:none !important;
}

/* Hide long hero + footer/nav in Mini App purchase (mobile flow) */
html.is-miniapp body.purchase-page .hero,
html.is-miniapp body.purchase-page .footer,
html.is-miniapp body.purchase-page .bottomnav{
  display:none !important;
}

/* Plan selector: same size boxes, no weird focus corner */
html.is-miniapp body.purchase-page .segmented{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
html.is-miniapp body.purchase-page .segmented-item{
  height: 78px;
  min-height: 78px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(16,61,148,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,247,255,.78));
  box-shadow: 0 10px 22px rgba(17,30,71,.08) !important;
  outline: none !important;
  text-align:left;

  display:flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

html.is-miniapp body.purchase-page .segmented-item:focus,
html.is-miniapp body.purchase-page .segmented-item:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
html.is-miniapp body.purchase-page .segmented-item.is-active{
  border-color: rgba(16,61,148,.34);
  background: linear-gradient(180deg, rgba(242,247,255,.96), rgba(242,247,255,.82));
  box-shadow: 0 14px 30px rgba(16,61,148,.12) !important;
  transform: translateY(-1px);
}
html.is-miniapp body.purchase-page .seg-title{ font-size: 15px; line-height: 1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html.is-miniapp body.purchase-page .seg-sub{ font-size: 12px; opacity: .78; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Subtle motion (premium, not noisy) */
html.is-miniapp body.purchase-page .is-pop{
  animation: miniappPop .22s ease;
}
@keyframes miniappPop{
  0%{ transform: scale(1); }
  55%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}

html.is-miniapp body.purchase-page .segmented-item:active{
  transform: scale(.99);
}

/* Benefits: compact single card (2 rows) */
html.is-miniapp body.purchase-page .plan-benefits{
  display:flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(16,61,148,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,247,255,.78));
  box-shadow: 0 10px 22px rgba(17,30,71,.08);
}
html.is-miniapp body.purchase-page .plan-benefits .benefit-row{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
}
html.is-miniapp body.purchase-page .plan-benefits .benefit-divider{
  height: 1px;
  width: 100%;
  background: rgba(16,61,148,.10);
}
html.is-miniapp body.purchase-page .benefit-ico{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(118,210,255,.22);
  border: 1px solid rgba(118,210,255,.28);
  color: rgba(16,61,148,.92);
  flex: 0 0 32px;
}
html.is-miniapp body.purchase-page .benefit-ico svg{
  width: 18px;
  height: 18px;
}
html.is-miniapp body.purchase-page .benefit-text{ min-width:0; }
html.is-miniapp body.purchase-page .benefit-title,
html.is-miniapp body.purchase-page .benefit-sub{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.is-miniapp body.purchase-page .benefit-title{ -webkit-line-clamp: 2; }
html.is-miniapp body.purchase-page .benefit-sub{ -webkit-line-clamp: 2; }

/* Tariff head row (left price + right savings) */
html.is-miniapp body.purchase-page .tariff-head{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(16,61,148,.10);
  background: rgba(255,255,255,.84);
}
html.is-miniapp body.purchase-page .mini-tariff-row{
  display:flex;
  align-items:center;
  gap: 10px;
}
html.is-miniapp body.purchase-page .mini-tariff-left{
  display:flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
html.is-miniapp body.purchase-page .mini-tariff-label{
  font-size: 12px;
  opacity: .8;
}
html.is-miniapp body.purchase-page .mini-tariff-value{
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
html.is-miniapp body.purchase-page .mini-tariff-savings{
  margin-left:auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(118,210,255,.18);
  border: 1px solid rgba(118,210,255,.28);
  display:flex;
  align-items:center;
  gap: 6px;
  max-width: 68%;
  min-width: 0;
  flex: 0 1 auto;
}
html.is-miniapp body.purchase-page .mini-tariff-savings-ico{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 900;
  color: rgba(16,61,148,.92);
  background: rgba(16,61,148,.12);
  border: 1px solid rgba(16,61,148,.16);
  flex: 0 0 auto;
}
html.is-miniapp body.purchase-page .mini-tariff-savings-text{
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  min-width: 0;
}

/* Period cards (only days, centered, no wrap) */
html.is-miniapp body.purchase-page .period-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
html.is-miniapp body.purchase-page .period-card{
  border-radius: 18px;
  border: 1px solid rgba(16,61,148,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,247,255,.78));
  padding: 18px 12px;
  min-height: 66px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 22px rgba(17,30,71,.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
html.is-miniapp body.purchase-page .period-card.is-active{
  border-color: rgba(16,61,148,.34);
  background: linear-gradient(180deg, rgba(242,247,255,.96), rgba(242,247,255,.82));
  box-shadow: 0 14px 30px rgba(16,61,148,.12);
  transform: translateY(-1px);
}
html.is-miniapp body.purchase-page .period-card:active{
  transform: scale(.99);
}
html.is-miniapp body.purchase-page .period-center,
html.is-miniapp body.purchase-page .period-text{
  display:flex;
  align-items: baseline;
  justify-content:center;
  gap: 6px;
  white-space: nowrap;
}
html.is-miniapp body.purchase-page .period-num{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
}
html.is-miniapp body.purchase-page .period-unit{
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,30,71,.58);
  letter-spacing: -0.01em;
}


html.is-miniapp body.purchase-page .period-card{
  position: relative;
  overflow: visible;
}
html.is-miniapp body.purchase-page .period-center{
  display:flex;
  align-items: baseline;
  justify-content:center;
  gap: 6px;
  white-space: nowrap;
}
html.is-miniapp body.purchase-page .period-unit{
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,30,71,.58);
  letter-spacing: -0.01em;
}
html.is-miniapp body.purchase-page .period-badge{
  position:absolute;
  top: -8px;
  right: -8px;
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(16,61,148,.14);
  box-shadow: 0 10px 22px rgba(17,30,71,.12);
  color: rgba(16,61,148,.92);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: -0.01em;
  pointer-events:none;
}
html.is-miniapp body.purchase-page .period-badge-ico{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(118,210,255,.20);
  border: 1px solid rgba(118,210,255,.32);
  color: rgba(16,61,148,.92);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
html.is-miniapp body.purchase-page .period-badge.hidden{ display:none; }


/* Continue button - sticky bottom */
html.is-miniapp body.purchase-page .mini-continue-wrap{
  position: sticky;
  bottom: 10px;
  margin-top: 14px;
  padding: 10px 10px;
  background: rgba(242,247,255,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(17,30,71,.10);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(17,30,71,.08);
  z-index: 20;
}
html.is-miniapp body.purchase-page #miniContinueButton{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 11px 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  border-radius: 16px;
  background: var(--c-ink2);
  color: #fff;
  box-shadow: 0 14px 28px rgba(16,61,148,.18);
  border: 1px solid rgba(255,255,255,.10);
}
html.is-miniapp body.purchase-page #miniContinueButton:hover{
  filter: brightness(1.02);
}
html.is-miniapp body.purchase-page #miniContinueButton:active{
  transform: translateY(1px) scale(.99);
}
html.is-miniapp body.purchase-page #miniContinueButton:active{
  transform: scale(.99);
}
html.is-miniapp body.purchase-page .mini-spacer{
  height: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* Pop animation used by mini UI */
html.is-miniapp body.purchase-page .is-pop{
  animation: miniPop .18s ease;
}
@keyframes miniPop{
  0%{ transform: scale(.98); }
  100%{ transform: scale(1); }
}

/* Bottom sheet */
html.is-miniapp body.purchase-page .mini-sheet{
  position: fixed;
  inset: 0;
  z-index: 80;
  display:none;
}
html.is-miniapp body.purchase-page .mini-sheet.is-open{ display:block; }
html.is-miniapp body.purchase-page .mini-sheet-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(6px);
}
html.is-miniapp body.purchase-page .mini-sheet-panel{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82svh;
  background: rgba(255,255,255,.94);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -20px 60px rgba(0,0,0,.22);
  transform: translateY(18px);
  transition: transform .18s ease;
}
html.is-miniapp body.purchase-page .mini-sheet.is-open .mini-sheet-panel{
  transform: translateY(0);
}
html.is-miniapp body.purchase-page .mini-sheet-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
html.is-miniapp body.purchase-page .mini-sheet-title{
  font-weight: 800;
  font-size: 16px;
}
html.is-miniapp body.purchase-page .mini-sheet-body{
  padding: 0 16px 18px;
  overflow:auto;
  max-height: calc(82svh - 54px);
}

/* Make payment card look native inside the sheet */
html.is-miniapp body.purchase-page .mini-sheet-body .card-right{
  box-shadow: none;
  border: 1px solid rgba(16,61,148,.12);
}

/* miniapp purchase: compact pay sheet (no-scroll target) */
html.is-miniapp body.purchase-page .mini-sheet-panel{
  max-height: 78svh;
}
html.is-miniapp body.purchase-page .mini-sheet-body{
  padding: 0 12px 12px;
  max-height: calc(78svh - 46px);
  overflow: hidden;
}

/* tighten payment card inside sheet */
html.is-miniapp body.purchase-page .mini-sheet-body .mini-sheet-card{
  padding: 10px 10px 10px;
  border-radius: 16px;
  margin-top: -10px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .side-title{
  font-size: 14px;
  margin: 0 0 6px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .promo{
  margin-top: 8px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .promo-label{
  font-size: 12px;
  margin-bottom: 6px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .promo-row{
  gap: 8px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .promo-row .input{
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .promo-row .btn{
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 12px;
}

/* price box smaller */
html.is-miniapp body.purchase-page .mini-sheet-body .pricebox{
  padding: 10px 12px;
  border-radius: 14px;
  margin: 6px 0 8px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .pricebox .line.big{
  font-size: 14px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .pricebox .money{
  font-size: 18px;
}

/* payment methods: 2-up grid */
html.is-miniapp body.purchase-page .mini-sheet-body #payActions.pay-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod{
  padding: 10px 10px;
  border-radius: 14px;
  box-shadow: 0 10px 18px rgba(17,30,71,.10);
  gap: 10px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod-logo{
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod-title{
  font-size: 13px;
  line-height: 1.1;
}
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod-sub,
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod-cta{
  display: none;
}

/* hide long helper text inside sheet to save height */
html.is-miniapp body.purchase-page .mini-sheet-body .small{
  display: none;
}
html.is-miniapp body.purchase-page .mini-sheet-body .status{
  font-size: 12px;
  margin-top: 6px;
}

/* Prevent horizontal overflow from any child */
html.is-miniapp body.purchase-page *{
  max-width: 100%;
}
html.mini-sheet-open, html.mini-sheet-open body{
  overflow: hidden !important;
}


/* miniapp purchase v15 tweaks */
html.is-miniapp body.purchase-page{
  overflow-x: hidden;
}
html.is-miniapp body.purchase-page main{
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
html.is-miniapp body.purchase-page .section-title--period{margin-top: 6px;}
html.is-miniapp body.purchase-page .plan-benefits{
  gap: 0;
  margin-top: 10px;
  padding: 10px 12px;
}
html.is-miniapp body.purchase-page .benefit-ico{
  width: 30px;
  height: 30px;
  border-radius: 11px;
}
html.is-miniapp body.purchase-page .plan-benefits .benefit-row{
  padding: 7px 0;
}
html.is-miniapp body.purchase-page .benefit-title{
  font-size: 14px;
  line-height: 1.15;
}
html.is-miniapp body.purchase-page .benefit-sub{
  font-size: 12px;
  line-height: 1.15;
}
html.is-miniapp body.purchase-page .period-cards{
  margin-top: 10px;
  gap: 10px;
  padding: 6px 6px 0 6px;
  overflow: visible;
}
html.is-miniapp body.purchase-page .period-card{
  position: relative;
  height: 54px;
  border-radius: 18px;
  padding: 10px 8px;
  min-height: 54px;
}
html.is-miniapp body.purchase-page .period-label{
  white-space: nowrap;
}
html.is-miniapp body.purchase-page .period-num{
  font-size: 18px;
}
html.is-miniapp body.purchase-page .period-unit{
  font-size: 13px;
  color: rgba(17,30,71,.48);
}
html.is-miniapp body.purchase-page .period-sticker{
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(16,61,148,.14);
  box-shadow: 0 10px 22px rgba(17,30,71,.12);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: rgba(16,61,148,.92);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html.is-miniapp body.purchase-page .period-sticker::before{
  content: "%";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 900;
  color: rgba(16,61,148,.92);
  background: rgba(118,210,255,.22);
  border: 1px solid rgba(118,210,255,.35);
}
html.is-miniapp body.purchase-page .period-sticker.hidden{
  display:none;
}

html.is-miniapp body.purchase-page .mini-tariff-row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
}
html.is-miniapp body.purchase-page .mini-tariff-left{
  display:flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
html.is-miniapp body.purchase-page .mini-tariff-label{
  white-space: nowrap;
}
html.is-miniapp body.purchase-page .mini-tariff-value{
  white-space: nowrap;
}
html.is-miniapp body.purchase-page .mini-tariff-savings{
  flex: 0 0 auto;
  white-space: nowrap;
  max-width: none;
}


/* Miniapp purchase: period center + savings sticker */

html.is-miniapp body.purchase-page .plan-benefits{
  margin-top: 10px;
  padding: 10px 12px;
}
html.is-miniapp body.purchase-page .plan-benefits .benefit-row{
  padding: 6px 0;
  gap: 10px;
}
html.is-miniapp body.purchase-page .benefit-ico{
  width: 30px;
  height: 30px;
  border-radius: 11px;
  flex: 0 0 30px;
}
html.is-miniapp body.purchase-page .benefit-ico svg{
  width: 18px;
  height: 18px;
}
html.is-miniapp body.purchase-page .benefit-title{
  font-size: 14px;
}
html.is-miniapp body.purchase-page .benefit-sub{
  margin-top: 2px;
  font-size: 12.5px;
}
html.is-miniapp body.purchase-page .section-title--period{margin-top: 6px;}


/* Miniapp purchase micro-interactions */
html.is-miniapp body.purchase-page .segmented-item,
html.is-miniapp body.purchase-page .period-btn{
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform;
}
html.is-miniapp body.purchase-page .segmented-item.is-active{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
}
html.is-miniapp body.purchase-page .period-btn.is-active{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
}
@keyframes tapPop{
  0%{transform: scale(1)}
  40%{transform: scale(.985)}
  100%{transform: scale(1)}
}
html.is-miniapp body.purchase-page .is-tap{
  animation: tapPop .18s ease both;
}


html.is-miniapp body.purchase-page .card-left{
  padding-bottom: 18px;
}

/* miniapp purchase sheet v23: remove double box + restore vertical methods + bigger price */
html.is-miniapp body.purchase-page .mini-sheet-body{
  overflow: hidden;
}
html.is-miniapp body.purchase-page .mini-sheet-body{
  padding: 8px 16px 16px;
}


html.is-miniapp body.purchase-page .mini-sheet-body .card-right,
html.is-miniapp body.purchase-page .mini-sheet-body .mini-sheet-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html.is-miniapp body.purchase-page .mini-sheet-body .mini-sheet-card{
  padding: 0 !important;
  border-radius: 0 !important;
}

html.is-miniapp body.purchase-page .mini-sheet-body .pricebox{
  padding: 12px 14px;
  border-radius: 16px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .pricebox .line.big{
  font-size: 14.5px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .pricebox .money{
  font-size: 26px;
}

/* restore payment methods as a vertical list (like original) */
html.is-miniapp body.purchase-page .mini-sheet-body #payActions.pay-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

html.is-miniapp body.purchase-page .mini-sheet-body .paymethod{
  padding: 14px 14px;
  border-radius: 18px;
  gap: 12px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod-logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod-title{
  font-size: 16px;
}
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod-sub,
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod-cta{
  display: block;
}
html.is-miniapp body.purchase-page .mini-sheet-body .paymethod-cta{
  display: inline-block;
}


/* miniapp purchase sheet: single "Оплата" title + slightly lifted panel */
html.is-miniapp body.purchase-page .mini-sheet-body #paymentCard > .side-title{
  display: none;
}
html.is-miniapp body.purchase-page .mini-sheet-panel{
  bottom: 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
html.is-miniapp body.purchase-page .mini-sheet-head{
  padding-bottom: 6px;
}
html.is-miniapp body.purchase-page .mini-sheet-body{
  padding-top: 6px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* extra safety: keep the last payment method away from the bottom edge */
html.is-miniapp body.purchase-page .mini-sheet-body #payActions.pay-actions{
  margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}


/* === miniapp purchase sheet v26: no-scroll + higher content + remove blob behind sheet === */
html.is-miniapp body.purchase-page .mini-sheet-panel{
  overflow: hidden;
}
html.is-miniapp body.purchase-page .mini-sheet-body{
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
  max-height: calc(78svh - 46px);
  padding-top: 2px !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}
html.is-miniapp body.purchase-page .mini-sheet-body .card-right::before{
  content: none !important;
}
html.is-miniapp body.purchase-page .mini-sheet-body .divider{
  display: none !important;
}
html.is-miniapp body.purchase-page .mini-sheet-body .pricebox{
  margin-top: 8px !important;
}
html.mini-sheet-open body.purchase-page .bg::before,
html.mini-sheet-open body.purchase-page .bg::after{
  opacity: 0 !important;
}



/* miniapp: prevent layout shift in payment sheet */
#miniSheet #discountLine{display:none !important;}
#miniSheet #promoStatus{min-height:18px; line-height:18px; margin-top:6px; font-size:13px; color: rgba(17,30,71,.72); display:flex; align-items:center; gap:6px;}
#miniSheet #promoStatus:empty{opacity:0;}
#miniSheet #promoStatus:not(:empty){opacity:1;}
#miniSheet #promoStatus .promo-chip{display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background: rgba(16,61,148,.10); border:1px solid rgba(16,61,148,.14); color: rgba(16,61,148,.92); font-weight:600;}
#miniSheet #promoStatus .promo-ico{width:14px;height:14px; display:inline-block;}
#miniSheet .money-wrap{flex-direction:row; align-items:baseline; gap:10px;}
#miniSheet .money-old{font-size:14px; white-space:nowrap;}
#miniSheet #payRub{white-space:nowrap;}
#miniSheet .line.big{align-items:center;}


/* === WEB SITE HEADER (NON-MINIAPP) === */
html.is-miniapp .web-header{ display:none !important; }

html:not(.is-miniapp) .web-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(242,247,255,0.86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(17,30,71,0.08);
  margin: 0 0 18px;
}

html:not(.is-miniapp) .web-header-inner{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  height: 64px;
  display:flex;
  align-items:center;
  gap: 16px;
  position: relative;
  justify-content: center;
}

html:not(.is-miniapp) .web-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: inherit;
  min-width: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

html:not(.is-miniapp) .web-brand-text{
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111E47;
}

html:not(.is-miniapp) .web-logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
}

html:not(.is-miniapp) .web-brand-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html:not(.is-miniapp) .web-nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
  justify-content: center;
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
}

html:not(.is-miniapp) .web-nav-link{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  text-decoration:none;
  color: rgba(17,30,71,0.78);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
  border-radius: 999px;
  background: transparent;
}

html:not(.is-miniapp) .web-nav-link:hover{
  color: rgba(17,30,71,0.92);
  background: rgba(255,255,255,0.65);
}

html:not(.is-miniapp) .web-nav-link.is-active,
html:not(.is-miniapp) .web-nav-link[aria-current="page"]{
  color: #111E47;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 22px rgba(17,30,71,0.08);
}

/* Move external "Поддержка" to the right as a subtle button */
html:not(.is-miniapp) .web-nav-link[target="_blank"]{
  background: rgba(118,210,255,0.16);
  border: 1px solid rgba(16,61,148,0.12);
  color: rgba(16,61,148,0.92);
}
html:not(.is-miniapp) .web-nav-link[target="_blank"]:hover{
  background: rgba(118,210,255,0.22);
}



html:not(.is-miniapp) .web-header-actions{
  position:absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  align-items:center;
  gap: 10px;
}

html:not(.is-miniapp) .web-login-btn{
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 750;
  font-size: 14px;
  letter-spacing: -0.01em;
}

html:not(.is-miniapp) .account-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,30,71,0.10);
  background: rgba(255,255,255,0.76);
  box-shadow: 0 12px 26px rgba(17,30,71,0.10);
}

html:not(.is-miniapp) .account-avatar{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(118,210,255,0.18);
}

html:not(.is-miniapp) .account-meta{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}

html:not(.is-miniapp) .account-name{
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: 14px;
  line-height: 1.1;
  color: rgba(17,30,71,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

html:not(.is-miniapp) .account-handle{
  font-weight: 650;
  font-size: 12px;
  line-height: 1.1;
  color: rgba(17,30,71,0.56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

html:not(.is-miniapp) .account-logout{
  margin-left: 6px;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,30,71,0.10);
  background: rgba(17,30,71,0.06);
  color: rgba(17,30,71,0.86);
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor:pointer;
}

html:not(.is-miniapp) .account-logout:hover{
  background: rgba(17,30,71,0.09);
}
@media (max-width: 860px){
  html:not(.is-miniapp) .web-header-inner{ height: 58px; }
  html:not(.is-miniapp) .web-header-inner{ justify-content: space-between; }
  html:not(.is-miniapp) .web-logo{ width: 30px; height: 30px; border-radius: 10px; }
  html:not(.is-miniapp) .web-brand{ position: static; top: auto; left: auto; transform: none; }
  html:not(.is-miniapp) .web-nav{ flex: 1 1 auto; justify-content: flex-end; margin: 0 0 0 auto; }
  html:not(.is-miniapp) .web-brand-text{ display:none; }
}


/* purchase: web vs miniapp */

/* purchase: tariff head (web + miniapp) */
body.purchase-page .tariff-head{
  margin-top: 10px;
}

/* In web desktop layout the payable amount is shown on the right, so hide the duplicated top price row */
@media (min-width: 861px){
  html:not(.is-miniapp) body.purchase-page .tariff-head{ display:none; }
}
body.purchase-page .mini-tariff-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
body.purchase-page .mini-tariff-left{
  display:flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
body.purchase-page .mini-tariff-label{
  color: rgba(17,30,71,0.65);
  font-weight: 600;
  font-size: 14px;
}
body.purchase-page .mini-tariff-value{
  color: #111E47;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
body.purchase-page .mini-tariff-savings{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(118,210,255,0.22);
  border: 1px solid rgba(16,61,148,0.14);
  color: #103D94;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(17,30,71,0.08);
}
body.purchase-page .mini-tariff-savings-ico{
  width: 16px;
  height: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(16,61,148,0.14);
}
body.purchase-page .mini-tariff-savings-ico svg{
  width: 14px;
  height: 14px;
}
body.purchase-page .mini-tariff-savings-text{
  line-height: 1.1;
}


/* web: не показываем miniapp bottom-sheet и нижнюю навигацию */
html:not(.is-miniapp) body.purchase-page .mini-continue-wrap{ display:none !important; }
html:not(.is-miniapp) body.purchase-page .bottomnav{ display:none !important; }
html:not(.is-miniapp) body.purchase-page #miniPaySheet{ display:none !important; }

/* miniapp: скрываем слайдер (в miniapp выбор срока только карточками) */
html.tg-miniapp body.purchase-page .slider-header,
html.tg-miniapp body.purchase-page .slider-shell,
html.tg-miniapp body.purchase-page .slider-legend,
html.is-miniapp body.purchase-page .slider-header,
html.is-miniapp body.purchase-page .slider-shell,
html.is-miniapp body.purchase-page .slider-legend{ display:none !important; }

/* web: показываем верхнюю строку "Тариф за" + плашка экономии */
html:not(.is-miniapp) body.purchase-page .tariff-head{ display:block; }

/* web: на карточках сроков не показываем проценты (экономия только в плашке сверху) */
html:not(.is-miniapp) body.purchase-page .period-badge{ display:none !important; }

/* web: адаптив - телефон = карточки, десктоп = слайдер */
html:not(.is-miniapp) body.purchase-page .period-cards{ display:flex; }
html:not(.is-miniapp) body.purchase-page .slider-header,
html:not(.is-miniapp) body.purchase-page .slider-shell,
html:not(.is-miniapp) body.purchase-page .slider-legend{ display:none; }

@media (min-width: 860px){
  html:not(.is-miniapp) body.purchase-page .period-cards{ display:none; }
  html:not(.is-miniapp) body.purchase-page .slider-header,
  html:not(.is-miniapp) body.purchase-page .slider-shell,
  html:not(.is-miniapp) body.purchase-page .slider-legend{ display:block; }

  /* web desktop: цена уже справа в блоке оплаты, тут оставляем только плашку экономии */
  html:not(.is-miniapp) body.purchase-page .mini-tariff-left{ display:none; }
  html:not(.is-miniapp) body.purchase-page .mini-tariff-row{ justify-content:flex-start; }
}

/* web: немного больше воздуха для блоков */
html:not(.is-miniapp) body.tg-section-page main.page{ padding-top: 18px; }

/* web: карточки сроков не должны расширять страницу */
html:not(.is-miniapp) body.purchase-page .period-cards,
html:not(.is-miniapp) body.purchase-page .period-card{ max-width:100%; }

/* web purchase: привести UI к фирменному виду (без miniapp-селекторов) */
html:not(.is-miniapp) body.purchase-page .plan-benefits{
  display:flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(16,61,148,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,247,255,.78));
  box-shadow: 0 10px 22px rgba(17,30,71,.08);
}
html:not(.is-miniapp) body.purchase-page .plan-benefits .benefit-row{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
}
html:not(.is-miniapp) body.purchase-page .benefit-ico{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(118,210,255,.22);
  border: 1px solid rgba(118,210,255,.28);
  color: rgba(16,61,148,.92);
  flex: 0 0 32px;
}
html:not(.is-miniapp) body.purchase-page .benefit-ico svg{ width: 18px; height: 18px; }
html:not(.is-miniapp) body.purchase-page .benefit-text{ min-width:0; }

html:not(.is-miniapp) body.purchase-page .period-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 860px){
  html:not(.is-miniapp) body.purchase-page .period-cards{ grid-template-columns: repeat(4, 1fr); }
}
html:not(.is-miniapp) body.purchase-page .period-card{
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(16,61,148,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,247,255,.78));
  border-radius: 18px;
  padding: 18px 12px;
  min-height: 66px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 22px rgba(17,30,71,.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  cursor: pointer;
}
html:not(.is-miniapp) body.purchase-page .period-card.is-active{
  border-color: rgba(16,61,148,.34);
  background: linear-gradient(180deg, rgba(242,247,255,.96), rgba(242,247,255,.82));
  box-shadow: 0 14px 30px rgba(16,61,148,.12);
  transform: translateY(-1px);
}
html:not(.is-miniapp) body.purchase-page .period-card:active{ transform: scale(.99); }
html:not(.is-miniapp) body.purchase-page .period-center,
html:not(.is-miniapp) body.purchase-page .period-text{
  display:flex;
  align-items: baseline;
  justify-content:center;
  gap: 6px;
  white-space: nowrap;
}
html:not(.is-miniapp) body.purchase-page .period-num{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
}
html:not(.is-miniapp) body.purchase-page .period-unit{
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,30,71,.58);
  letter-spacing: -0.01em;
}


html:not(.is-miniapp) .web-cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
html:not(.is-miniapp) .web-note{
  margin-top: 12px;
}


/* Web purchase: desktop-only period UI */
@media (min-width: 861px){
  html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .tariff-head{
    display:none;
  }
  html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .section-title--period{
    display:flex;
    padding-left: var(--slider-rail-inset, 16px);
    padding-right: var(--slider-rail-inset, 16px);
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    max-width: 100%;
  }

  html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .section-title--period .period-title-text{
    flex: 1;
    min-width: 0;
  }

  /* Savings pill sits to the right of the title on desktop */
  html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .section-title--period #tariffSavingsPill{
    margin-left: auto;
    padding: 8px 12px;
    font-size: 14px;
    box-shadow: 0 12px 26px rgba(17,30,71,.10);
  }

  html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .section-title--period #tariffSavingsPill .mini-tariff-savings-ico,
  html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .section-title--period #tariffSavingsPill .mini-tariff-savings-ico svg{
    width: 18px;
    height: 18px;
  }
  html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .slider-header .pill{
    padding: 9px 12px;
    font-size: 15px;
    box-shadow: 0 10px 22px rgba(17,30,71,.08);
  }
  html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .slider-header{
    margin-bottom: 12px;
  }
}


/* Purchase (web desktop) - make period title + slider look like a single unit */
@media (min-width: 861px){
  .purchase-page .section-title--period{
    display:flex;
    padding-left: var(--slider-rail-inset, 16px);
    padding-right: var(--slider-rail-inset, 16px);
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    max-width: 560px;
    margin-left:auto;
    margin-right:auto;
  }
  .purchase-page .tariff-head{ display:none; }
.purchase-page{ --slider-outer-inset:16px; --slider-rail-inset:41px; }

  .purchase-page #sliderShell{
    max-width: 560px;
    margin-left:auto;
    margin-right:auto;
  }
  .purchase-page .mini-tariff-savings{
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(118,210,255,0.20);
    border: 1px solid rgba(118,210,255,0.35);
    box-shadow: 0 10px 24px rgba(17,30,71,0.08);
  }
  .purchase-page .mini-tariff-savings-text{
    font-weight: 800;
    color: rgba(17,30,71,0.92);
  }
}


/* web-only: remove bottom nav (бот/поддержка/канал) */
html:not(.is-miniapp) .bottom-nav,
html:not(.is-miniapp) .footer,
html:not(.is-miniapp) .site-footer { display: none !important; }

/* web connect-only page */
.connect-web .site-header { display:none !important; }
.connect-web .connect-top { display:flex; justify-content:center; padding:18px 0 8px; }
.connect-web .brand-mini { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.connect-web .brand-logo { width:170px; height:auto; }
.connect-web .connect-layout { margin-top:8px; }
.connect-web .mono-box { margin-top:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.72); border:1px solid rgba(17,30,71,.10); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.connect-web .connect-actions { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.connect-web .connect-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.connect-web .badge { padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; }
.connect-web .badge-ok { background:rgba(118,210,255,.25); color:#103D94; border:1px solid rgba(118,210,255,.55); }
.connect-web .badge-muted { background:rgba(17,30,71,.06); color:rgba(17,30,71,.65); border:1px solid rgba(17,30,71,.08); }
.connect-web .disabled { pointer-events:none; opacity:.55; }


/* Language switch */
.lang-switch{ position:relative; display:flex; align-items:center; }
.lang-switch::after{ content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; color:rgba(255,255,255,.75); pointer-events:none; }
.lang-switch .lang-combo{ -webkit-appearance:none; appearance:none; border:1px solid rgba(255,255,255,.18); background:rgba(15,30,70,.65); color:rgba(255,255,255,.96); padding:8px 34px 8px 12px; border-radius:12px; font-weight:700; font-size:12px; letter-spacing:.02em; cursor:pointer; box-shadow:0 12px 28px rgba(0,0,0,.22); outline:none; }
.lang-switch .lang-combo:hover{ transform:translateY(-1px); }
.lang-switch .lang-combo:focus{ border-color:rgba(118,210,255,.55); box-shadow:0 0 0 3px rgba(118,210,255,.18), 0 12px 28px rgba(0,0,0,.22); }
.lang-switch .lang-combo option{ color:#0b1228; }


/* prevent first-paint flicker */
html:not(.is-ready) body{ opacity:0; }
html.is-ready body{ opacity:1; transition:opacity 160ms ease; }


/* EN: hide RU-only purchase options */
.lang-en .purchase-page button.segmented-item[data-plan="whitelist"]{ display:none !important; }
.lang-en .purchase-page #payYooKassaButton{ display:none !important; }
.lang-en .purchase-page #payYooKassa{ display:none !important; }


.i18n-pending .page{ opacity:0; transition:opacity 90ms ease; }

html[data-lang="en"] .purchase-page #subscriptionTypeTitle,
html[data-lang="en"] .purchase-page #planType{ display:none !important; }


/* =========================
   WEB UX OVERHAUL (NO MINI-APP CHANGES)
   These rules apply only to the public website pages.
   ========================= */
html:not(.is-miniapp):not(.tg-miniapp) body{
  background: #F6F7FB;
  color: #0F172A;
}

html:not(.is-miniapp):not(.tg-miniapp) .bg{ display:none !important; }

/* Header */
html:not(.is-miniapp):not(.tg-miniapp) .web-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

html:not(.is-miniapp):not(.tg-miniapp) .web-header-inner{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px var(--page-pad);
  display:flex;
  align-items:center;
  gap: 18px;
}

html:not(.is-miniapp):not(.tg-miniapp) .web-nav{
  display:flex;
  gap: 6px;
  align-items:center;
  flex-wrap: wrap;
}

html:not(.is-miniapp):not(.tg-miniapp) .web-nav-link{
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  color: rgba(15,23,42,.76);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

html:not(.is-miniapp):not(.tg-miniapp) .web-nav-link:hover{
  background: rgba(15,23,42,.05);
  color: rgba(15,23,42,.92);
}

html:not(.is-miniapp):not(.tg-miniapp) .web-nav-link.is-active{
  background: rgba(37,99,235,.10);
  color: #1D4ED8;
}

/* Language combo (styled select) */
html:not(.is-miniapp):not(.tg-miniapp) .lang-switch{
  position: relative;
}

html:not(.is-miniapp):not(.tg-miniapp) .lang-combo{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 14px;
  padding: 10px 42px 10px 12px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  color: rgba(15,23,42,.92);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  cursor: pointer;
}

html:not(.is-miniapp):not(.tg-miniapp) .lang-switch::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  opacity: .7;
  pointer-events: none;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.5 7.5a1 1 0 0 1 1.4 0L10 10.6l3.1-3.1a1 1 0 1 1 1.4 1.4l-3.8 3.8a1 1 0 0 1-1.4 0L5.5 8.9a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

html:not(.is-miniapp):not(.tg-miniapp) .lang-combo:focus{
  outline: none;
  box-shadow: 0 0 0 5px rgba(37,99,235,.16), 0 10px 24px rgba(15,23,42,.08);
}

/* Buttons */
html:not(.is-miniapp):not(.tg-miniapp) .btn{
  border-radius: 14px;
}

html:not(.is-miniapp):not(.tg-miniapp) .btn-primary{
  background: #2563EB;
  border: 1px solid rgba(37,99,235,.25);
}

html:not(.is-miniapp):not(.tg-miniapp) .btn-primary:hover{
  filter: brightness(0.98);
}

/* Cards / layout */
html:not(.is-miniapp):not(.tg-miniapp) .card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 22px 60px rgba(15,23,42,.08);
}

html:not(.is-miniapp):not(.tg-miniapp) .section-title{
  color: rgba(15,23,42,.92);
}

/* EN: no subscription type selector block */
html.lang-en:not(.is-miniapp):not(.tg-miniapp) #subscriptionTypeTitle,
html.lang-en:not(.is-miniapp):not(.tg-miniapp) #planType{
  display:none !important;
}

/* === Web language dropdown (custom, non-native) === */
html.lang-preload-hide body{ opacity:0 !important; }
html.is-ready body{ opacity:1 !important; }

.lang-dropdown{ position:relative; display:flex; align-items:center; }
.lang-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  transition:transform .08s ease, background .12s ease, border-color .12s ease;
}
.lang-pill:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); }
.lang-pill:active{ transform:scale(.98); }
.lang-flag{ font-size:16px; line-height:1; }
.lang-code{ font-size:12px; line-height:1; opacity:.95; }
.lang-chev{ font-size:12px; opacity:.7; transform:translateY(-1px); }

.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:180px;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(14,18,34,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  z-index:90;
}
.lang-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.92);
  font-weight:700;
  cursor:pointer;
}
.lang-item:hover{ background:rgba(255,255,255,.08); }
.lang-item.is-active{ background:rgba(118,210,255,.12); border:1px solid rgba(118,210,255,.22); }
.lang-item-flag{ font-size:16px; }
.lang-item-text{ font-size:13px; }

/* Remove legacy language select if still present somewhere */
.lang-switch{ display:none !important; }

/* Slightly tighten web header */
.web-header .web-header-inner{ gap:14px; }
.web-header-actions{ gap:10px; }
.web-nav{ gap:10px; }
.web-nav-link{ border-radius:999px; padding:8px 12px; }

/* Web (white) theme overrides for language dropdown */
html:not(.is-miniapp):not(.tg-miniapp) .lang-pill{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  color:rgba(15,23,42,.86);
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
}
html:not(.is-miniapp):not(.tg-miniapp) .lang-pill:hover{ background:#fff; border-color:rgba(15,23,42,.18); }
html:not(.is-miniapp):not(.tg-miniapp) .lang-menu{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 18px 60px rgba(15,23,42,.18);
}
html:not(.is-miniapp):not(.tg-miniapp) .lang-item{ color:rgba(15,23,42,.88); }
html:not(.is-miniapp):not(.tg-miniapp) .lang-item:hover{ background:rgba(15,23,42,.04); }
html:not(.is-miniapp):not(.tg-miniapp) .lang-item.is-active{ background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.18); }


/* === Web header + language dropdown polish === */
.web-header{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.web-header-inner{
  gap: 18px;
}
.web-nav{
  gap: 14px;
}
.web-nav-link{
  padding: 10px 12px;
  border-radius: 14px;
}
.web-nav-link:hover{
  background: rgba(17,30,71,.06);
}
.lang-pill{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,30,71,.12);
  box-shadow: 0 10px 26px rgba(17,30,71,.10);
  border-radius: 16px;
  padding: 10px 12px;
  gap: 10px;
}
.lang-pill .lang-code{ color: rgba(17,30,71,.80); font-weight: 700; letter-spacing: .02em; }
.lang-pill .lang-chev{ color: rgba(17,30,71,.55); }
.lang-menu{
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(17,30,71,.12);
  box-shadow: 0 18px 45px rgba(17,30,71,.14);
  border-radius: 16px;
  padding: 8px;
}
.lang-item{
  border-radius: 14px;
  padding: 10px 12px;
}
.lang-item:hover{
  background: rgba(17,30,71,.06);
}

/* === Home page redesign === */
body.web-home-page .page.home-page{
  max-width: 1200px;
}
.home-hero{
  margin-top: 18px;
}
.home-hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}
.home-title{
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
}
.home-sub{
  margin: 0 0 18px 0;
  font-size: 16px;
  color: rgba(17,30,71,.70);
  max-width: 560px;
}
.home-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.home-auth-note{
  font-size: 13px;
}
.home-glass-card{
  height: 100%;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.62));
  border: 1px solid rgba(17,30,71,.10);
  box-shadow: 0 18px 45px rgba(17,30,71,.12);
  padding: 18px;
}
.home-glass-title{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(17,30,71,.60);
  margin-bottom: 12px;
}
.home-kpi-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.home-kpi{
  border-radius: 18px;
  background: rgba(242,247,255,.70);
  border: 1px solid rgba(17,30,71,.08);
  padding: 12px 12px;
}
.home-kpi-title{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
}
.home-kpi-text{
  font-size: 13px;
  color: rgba(17,30,71,.70);
}
.home-steps{
  margin-top: 18px;
}
.home-section-title{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(17,30,71,.60);
  margin: 10px 0 10px 0;
}
.home-steps-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.home-step-card{
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,30,71,.10);
  box-shadow: 0 14px 34px rgba(17,30,71,.10);
  padding: 14px 14px;
  display:flex;
  gap: 12px;
  align-items:center;
}
.home-step-num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(118,210,255,.30);
  border: 1px solid rgba(16,61,148,.20);
  color: rgba(16,61,148,.95);
}
.home-step-text{
  font-weight: 700;
  color: rgba(17,30,71,.85);
}
@media (max-width: 980px){
  .home-hero-inner{
    grid-template-columns: 1fr;
  }
  .home-title{
    font-size: 38px;
  }
  .home-steps-grid{
    grid-template-columns: 1fr;
  }
}

/* === Purchase: remove savings pill in title, add discount badge near price === */
html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page #tariffSavingsPill{
  display:none !important;
}
.price-discount-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(118,210,255,.28);
  border: 1px solid rgba(16,61,148,.18);
  color: rgba(16,61,148,.95);
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 10px 22px rgba(17,30,71,.10);
}
.price-discount-pct{
  width: 18px;
  height: 18px;
  border-radius: 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(16,61,148,.10);
}
body.purchase-page .mini-tariff-right{
  margin-left: auto;
  display:flex;
  align-items:center;
}

/* Hide discount badge in Telegram Mini App */
html.is-miniapp .price-discount-badge,
html.tg-miniapp .price-discount-badge{
  display:none !important;
}


/* === Web UX v12: header + language selector + auth modal (web only) === */
html:not(.is-miniapp):not(.tg-miniapp) .lang-pill{
  border: 1px solid rgba(17,30,71,0.12);
  background: rgba(255,255,255,0.78);
  color: #111E47;
  box-shadow: 0 10px 22px rgba(17,30,71,0.08);
}
html:not(.is-miniapp):not(.tg-miniapp) .lang-pill:hover{
  background: rgba(255,255,255,0.92);
  border-color: rgba(17,30,71,0.18);
}
html:not(.is-miniapp):not(.tg-miniapp) .lang-menu{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(17,30,71,0.12);
  box-shadow: 0 18px 50px rgba(17,30,71,0.16);
}
html:not(.is-miniapp):not(.tg-miniapp) .lang-item{
  color: rgba(17,30,71,0.92);
}
html:not(.is-miniapp):not(.tg-miniapp) .lang-item:hover{
  background: rgba(17,30,71,0.06);
}
html:not(.is-miniapp):not(.tg-miniapp) .lang-item.is-active{
  background: rgba(118,210,255,0.22);
  border-color: rgba(16,61,148,0.14);
}

/* single "Sign in" button */
html:not(.is-miniapp):not(.tg-miniapp) .web-login-btn{
  background: rgba(118,210,255,0.18);
  border: 1px solid rgba(16,61,148,0.14);
  color: rgba(16,61,148,0.98);
}
html:not(.is-miniapp):not(.tg-miniapp) .web-login-btn:hover{
  background: rgba(118,210,255,0.26);
}

/* Auth modal */
.auth-modal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.auth-modal.hidden{ display:none; }
.auth-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(17,30,71,0.42);
  backdrop-filter: blur(10px);
}
.auth-modal-card{
  position: relative;
  width: min(420px, 100%);
  border-radius: 22px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(17,30,71,0.10);
  box-shadow: 0 30px 80px rgba(17,30,71,0.22);
  overflow: hidden;
}
.auth-modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 16px 16px 10px;
}
.auth-modal-title{
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: #111E47;
}
.auth-modal-body{
  padding: 10px 16px 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* Make page content stable: avoid any language flicker by keeping hidden state until JS ready */
html:not(.is-miniapp):not(.tg-miniapp):not(.is-ready) body{ opacity: 0; }

/* Connect/devices: when type selector hidden, remove the extra top spacing */
.card.connect-scale.no-type{ padding-top: 14px; }
.card.connect-scale.no-type .connect-top{ margin-top: 0 !important; }
#devicesContent.no-type{ padding-top: 0; }
#devicesContent.no-type .section-title{ margin-top: 0; }

/* Purchase: period title alignment */
html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .section-title--period{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove the deprecated savings pill to avoid layout shifts */
html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page #tariffSavingsPill{ display:none !important; }



/* === Web header nav icons === */
.web-nav-link{
  display:flex;
  align-items:center;
  gap:10px;
}
.web-nav-link .nav-ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.web-nav-link .nav-ico svg{
  width:18px;
  height:18px;
  display:block;
}
.web-nav-link span[data-i18n]{
  line-height:1;
}

/* Google Sign-In button container */
.google-render{
  display:flex;
  justify-content:center;
}
.google-render > div,
.google-render iframe{
  border-radius: 999px !important;
}

/* Hide subscription type selector on purchase for EN */
html[data-lang="en"] body.purchase-page #subscriptionTypeTitle,
html[data-lang="en"] body.purchase-page #planType{
  display:none !important;
}

/* Purchase period title alignment (desktop) */
html:not(.is-miniapp):not(.tg-miniapp) body.purchase-page .section-title--period{
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content:flex-start !important;
}

/* When type selector is hidden, remove divider line + extra spacing */
#devicesContent.no-type .connect-divider,
.card.connect-scale.no-type .connect-divider{
  display:none !important;
}
#devicesContent.no-type .devices-head{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.card.connect-scale.no-type .section-title[data-i18n="connect.choose_device"]{
  margin-top: 0 !important;
}