/* ============================================================
   NormNet VPN — Telegram Mini App · v2 (redesign within brand)
   Consumes NormNet brand tokens from ../styles.css.
   Adds a theme layer that maps to Telegram theme params (light/dark)
   while keeping Signal Green / Cyan brand identity.
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }

/* ---------- Theme layer ---------- */
:root {
  --brand: #00E37A;
  --brand-2: #00C2FF;
  --brand-ink: #06110A;
  --grad: linear-gradient(100deg, #00E37A 0%, #00C2FF 100%);
  --danger: #ff5a52;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 240ms;
  --dur-fast: 140ms;
}
/* DARK (default) */
[data-theme="dark"] {
  --bg: #0a0c10;
  --bg-elev: #11141a;
  --surface: #161a21;
  --surface-2: #1c212a;
  --surface-press: #232936;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);
  --txt: #f3f5f8;
  --txt-2: #aab2c0;
  --txt-3: #8b95a4;
  --shadow: 0 18px 50px -22px rgba(0,0,0,0.8);
  --skel: rgba(255,255,255,0.06);
  --skel-sheen: rgba(255,255,255,0.13);
  --brand-soft: rgba(0,227,122,0.12);
  --brand-line: rgba(0,227,122,0.32);
  /* Telegram native chrome (solid, sits above the app) */
  --tg-bar-bg: #000000;
  --tg-bar-txt: #ffffff;
  --tg-bar-sub: rgba(235,238,245,0.5);
  --tg-more-bg: rgba(255,255,255,0.1);
}
/* LIGHT */
[data-theme="light"] {
  --bg: #eef1f5;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --surface-press: #e9edf2;
  --line: rgba(10,20,40,0.08);
  --line-strong: rgba(10,20,40,0.14);
  --txt: #0f1722;
  --txt-2: #5a6573;
  --txt-3: #8b95a3;
  --shadow: 0 14px 40px -22px rgba(20,40,70,0.35);
  --skel: rgba(10,20,40,0.06);
  --skel-sheen: rgba(10,20,40,0.11);
  --brand-soft: rgba(0,180,100,0.12);
  --brand-line: rgba(0,180,100,0.34);
  --brand: #00b85f;
  --grad: linear-gradient(100deg, #00b85f 0%, #00a6d8 100%);
  --brand-ink: #ffffff;
  --tg-bar-bg: #ffffff;
  --tg-bar-txt: #0f1722;
  --tg-bar-sub: rgba(15,23,34,0.45);
  --tg-more-bg: rgba(15,23,34,0.06);
}

body {
  font-family: var(--font-body);
  background: #05060a;
  color: var(--txt);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ---------- Device frame (preview only) ---------- */
.stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.scaler { transform-origin: center center; }
.phone {
  width: 390px; height: 844px; border-radius: 54px; background: #000; padding: 11px;
  box-shadow: 0 0 0 2px #1c1f24, 0 40px 90px -20px rgba(0,0,0,0.8), 0 0 140px -50px rgba(0,227,122,0.3);
  position: relative;
}
.screen-frame {
  position: relative; width: 100%; height: 100%; border-radius: 44px; overflow: hidden;
  background: var(--bg); display: flex; flex-direction: column;
  transition: background var(--dur) var(--ease);
}

/* ---------- Telegram chrome ---------- */
/* iOS system status bar */
.ios-status {
  flex: 0 0 auto; position: relative; z-index: 21;
  background: var(--tg-bar-bg); color: var(--tg-bar-txt);
  height: 46px; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 24px 0 30px;
}
.ios-time { font-weight: 700; font-size: 15px; letter-spacing: 0.2px; font-feature-settings: "tnum"; }
.ios-ind { display: flex; align-items: center; gap: 6px; }
.ios-i { display: block; }
.ios-batt { width: 23px; height: 12px; border-radius: 3px; border: 1px solid currentColor; position: relative; padding: 1.6px; opacity: 0.95; }
.ios-batt::after { content: ""; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 2px; height: 4px; border-radius: 0 1.5px 1.5px 0; background: currentColor; }
.ios-batt-fill { display: block; height: 100%; width: 72%; border-radius: 1.5px; background: currentColor; }

/* Telegram mini-app header */
.tg-header {
  flex: 0 0 auto; position: relative; z-index: 20;
  background: var(--tg-bar-bg); color: var(--tg-bar-txt);
  padding: 0 10px 8px;
}
.tg-grabber {
  width: 36px; height: 5px; border-radius: 3px; margin: 6px auto 5px;
  background: var(--tg-bar-txt); opacity: 0.22;
}
.tg-bar { position: relative; height: 44px; display: flex; align-items: center; padding: 0 4px; }
.tg-heading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  text-align: center; pointer-events: none; max-width: 62%;
}
.tg-title {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.12;
  letter-spacing: -0.01em; color: var(--tg-bar-txt); white-space: nowrap;
}
.tg-sub { font-size: 12.5px; color: var(--tg-bar-sub); line-height: 1.2; margin-top: 1px; }
.tg-back {
  display: none; align-items: center; gap: 1px; margin-right: auto;
  background: none; border: 0; color: var(--tg-bar-txt); cursor: pointer;
  font-family: var(--font-body); font-size: 17px; font-weight: 400; padding: 4px 8px 4px 0;
}
.tg-back svg { margin-right: -1px; }
.tg-header.has-back .tg-back { display: flex; }
.tg-more {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tg-more-bg); color: var(--tg-bar-txt); border: 0; cursor: pointer;
}
.tg-more:active { transform: scale(0.94); }

/* ---------- Viewport / screens ---------- */
.viewport { position: relative; flex: 1 1 auto; overflow: hidden; z-index: 1; }
.screen {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  padding: 4px 16px 132px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  opacity: 0; visibility: hidden;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active { opacity: 1; visibility: visible; z-index: 2; }
.screen.leaving { opacity: 0; visibility: visible; z-index: 1; pointer-events: none; transform: scale(0.985) translateY(-6px); transition: opacity 0.26s var(--ease), transform 0.26s var(--ease); }
.screen.anim-in { animation: screen-enter 0.42s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes screen-enter { from { opacity: 0; transform: scale(0.992); } to { opacity: 1; transform: none; } }

/* staggered entrance for direct children of an entering screen */
.screen.anim-in > .stagger { animation: rise 0.52s var(--ease-out) both; }
.screen.anim-in > .stagger:nth-child(1) { animation-delay: 30ms; }
.screen.anim-in > .stagger:nth-child(2) { animation-delay: 70ms; }
.screen.anim-in > .stagger:nth-child(3) { animation-delay: 110ms; }
.screen.anim-in > .stagger:nth-child(4) { animation-delay: 150ms; }
.screen.anim-in > .stagger:nth-child(5) { animation-delay: 190ms; }
.screen.anim-in > .stagger:nth-child(6) { animation-delay: 230ms; }
.screen.anim-in > .stagger:nth-child(7) { animation-delay: 270ms; }
.screen.anim-in > .stagger:nth-child(8) { animation-delay: 310ms; }
@keyframes rise { from { opacity: 0.35; transform: translateY(11px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .screen.leaving { transition: none; transform: none; }
  .screen.anim-in { animation: none; }
  .screen.anim-in > .stagger { animation: none; }
}

/* ---------- Typography ---------- */
.h1 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin: 6px 0 0; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; margin: 0; }
.sub { color: var(--txt-2); font-size: 14.5px; line-height: 1.45; margin: 8px 0 0; text-wrap: pretty; }
.section-label { display: flex; align-items: center; justify-content: space-between; margin: 26px 2px 12px; }
.section-label h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0; }
.section-label .more { color: var(--brand); font-size: 14px; font-weight: 600; cursor: pointer; background: none; border: 0; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tap { cursor: pointer; transition: transform var(--dur-fast) var(--ease); }
.tap:active { transform: scale(0.98); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 22px; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  border: 1px solid transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.btn:active { transform: scale(0.985); }
.btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 10px 26px -14px rgba(0,227,122,0.5); }
.btn-soft { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.btn-ghost { background: transparent; color: var(--txt); border-color: var(--line-strong); }
.btn-ghost:active { background: var(--surface-2); }
.btn svg { flex: 0 0 auto; width: 22px; height: 22px; }
.btn-block { width: 100%; }
.btn .ripple { position: absolute; border-radius: 50%; transform: translate(-50%,-50%) scale(0); background: rgba(255,255,255,0.4); pointer-events: none; animation: ripple 600ms var(--ease-out); }
@keyframes ripple { to { transform: translate(-50%,-50%) scale(2.6); opacity: 0; } }

/* ---------- MainButton (Telegram-style sticky CTA) ---------- */
.mainbtn-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 14;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, var(--bg) 38%);
  transform: translateY(140%);
  pointer-events: none;
}
.mainbtn-wrap.show { transform: none; pointer-events: auto; }
.mainbtn {
  width: 100%; height: 54px; border-radius: var(--r-md);
  background: var(--grad); color: var(--brand-ink);
  font-family: var(--font-body); font-weight: 700; font-size: 16.5px;
  border: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 14px 34px -14px rgba(0,227,122,0.7);
  transition: transform var(--dur-fast) var(--ease);
}
.mainbtn:active { transform: scale(0.99); }
.mainbtn[disabled] { filter: grayscale(0.4) brightness(0.8); box-shadow: none; cursor: default; }
.mainbtn .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: spin 0.7s linear infinite; }
.mainbtn .mb-t { font-weight: 700; }
.mainbtn .mb-old { color: rgba(6,17,10,0.62); font-size: 13px; font-weight: 700; text-decoration: line-through; text-decoration-thickness: 2px; margin-left: 2px; }
.mainbtn .mb-pct { font-weight: 800; font-size: 12px; padding: 3px 8px; border-radius: 7px; background: rgba(6,17,10,0.82); color: #fff; letter-spacing: 0.01em; }
.mainbtn { gap: 9px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Bottom tab bar ---------- */
.tabbar {
  position: absolute; left: 12px; right: 12px; z-index: 15;
  bottom: calc(10px + env(safe-area-inset-bottom));
  height: 64px; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 44px -16px rgba(0,0,0,0.8), 0 6px 18px -10px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
[data-theme="dark"] .tabbar { background: rgba(22,26,34,0.98); border-color: rgba(255,255,255,0.16); box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -10px 30px -8px rgba(0,0,0,0.55), 0 22px 50px -18px rgba(0,0,0,0.9), 0 8px 22px -10px rgba(0,0,0,0.7); }
[data-theme="light"] .tabbar { background: rgba(255,255,255,0.98); }
.tabbar.hide { transform: translateY(160%); }
.tab {
  position: relative; flex: 1 1 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; cursor: pointer; color: var(--txt-3); padding: 0; z-index: 1;
  -webkit-appearance: none; appearance: none;
  transition: color var(--dur-fast);
}
.tab svg { width: 24px; height: 24px; transition: transform var(--dur-fast) var(--ease); }
.tab .tab-l { font-size: 11px; font-weight: 600; }
.tab.active { color: var(--brand); }
.tab.active svg { transform: translateY(-2px) scale(1.08); }
.tab:active svg { transform: scale(0.86); }
/* active pill behind icon + top accent dot */
/* active: single sliding highlight that glides between tabs */
.tab-ind { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 13px; background: var(--brand-soft); z-index: 0; opacity: 0; transform: translateX(0); transition: transform 0.42s cubic-bezier(0.34,1.32,0.5,1), width 0.42s cubic-bezier(0.34,1.32,0.5,1), opacity 0.3s var(--ease); pointer-events: none; }
.tab-ind.ready { opacity: 0.7; }
.tab .tab-l { transition: font-weight 0.2s; }
.tab.active .tab-l { font-weight: 700; }

/* ---------- Status hero (Home) ---------- */
.hero-status { display: flex; align-items: center; gap: 9px; justify-content: center; margin-top: 14px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.hero-status .dot { width: 9px; height: 9px; border-radius: 50%; }
.hero-status.ok { color: var(--brand); }
.hero-status.ok .dot { background: var(--brand); box-shadow: 0 0 0 0 rgba(0,227,122,0.5); animation: pdot 2.4s var(--ease-out) infinite; }
.hero-status.warn { color: #ff8a82; }
.hero-status.warn .dot { background: #ff8a82; }
.hero-status.off { color: var(--txt-3); }
.hero-status.off .dot { background: var(--txt-3); }
@keyframes pdot { 0% { box-shadow: 0 0 0 0 rgba(0,227,122,0.5); } 70%,100% { box-shadow: 0 0 0 8px rgba(0,227,122,0); } }
.hero-big { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: -0.02em; line-height: 1.06; margin: 8px 0 0; }
.hero-big b { color: var(--brand); }
.hero-date { text-align: center; color: var(--txt-3); font-size: 15px; margin-top: 8px; text-wrap: balance; }
.hero-date .hd-main { display: block; color: var(--txt-2); font-weight: 600; }
.hero-date .hd-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--txt-3); }

/* progress ring around shield */
.hero-ring { width: 184px; height: 184px; margin: 18px auto 4px; position: relative; }
.hero-ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-ring .track { fill: none; stroke: var(--line); stroke-width: 10; }
.hero-ring .prog { fill: none; stroke: url(#hg); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-out); }
.hero-ring .core {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.hero-ring .core .n { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
.hero-ring .core .l { color: var(--txt-3); font-size: 13px; margin-top: 5px; }
/* state-tinted ring + counter (draws the eye to time left) */
.hero-ring.warn .prog { stroke: #ff8a82; filter: none; }
.hero-ring.warn .core .n { color: #ff8a82; }
.hero-ring.warn .core .l { color: #ff8a82; opacity: 0.85; }
.hero-ring.trial .prog { stroke: var(--brand-2); }
.hero-ring.trial .core .n { color: var(--brand-2); }
@media (prefers-reduced-motion: no-preference) {
  .hero-ring.warn[data-deck-active], .hero-ring.warn { animation: ringBreath 2.6s var(--ease-out) infinite; }
}
@keyframes ringBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* chips row */
.chips { display: flex; gap: 9px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--txt-2); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.chip svg { width: 16px; height: 16px; }

/* quick action grid */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.qa {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  cursor: pointer; text-align: left; color: var(--txt); -webkit-appearance: none; appearance: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast);
}
.qa:active { transform: scale(0.97); background: var(--surface-press); }
.qa-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.qa-ic.neutral { background: var(--surface-2); border-color: var(--line); color: var(--txt-2); }
.qa-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.qa-s { color: var(--txt-2); font-size: 13px; margin-top: -4px; }
.qa-art { position: relative; overflow: hidden; }
.qa-art > *:not(.qa-deco) { position: relative; z-index: 1; }
.qa-deco { position: absolute; right: -14px; bottom: -14px; width: 92px; height: 92px; z-index: 0; opacity: 0.16; pointer-events: none; }
.qa-deco svg { width: 100%; height: 100%; }
.qa-art-dev { background: linear-gradient(135deg, var(--surface) 60%, rgba(0,227,122,0.07)); }
.qa-art-dev .qa-deco { color: var(--brand); }
.qa-art-ref { background: linear-gradient(135deg, var(--surface) 60%, rgba(0,194,255,0.08)); }
.qa-art-ref .qa-deco { color: var(--brand-2); }
.qa-art-ref .qa-ic { background: rgba(0,194,255,0.12); border-color: rgba(0,194,255,0.34); color: var(--brand-2); }

/* list rows */
.list { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px; cursor: pointer;
  background: var(--surface); color: var(--txt); -webkit-appearance: none; appearance: none; border: 0; width: 100%; text-align: left;
  transition: background var(--dur-fast);
}
.row + .row { border-top: 1px solid var(--line); }
.row:active { background: var(--surface-press); }
.row-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); }
.row-body { flex: 1 1 auto; min-width: 0; }
.row-t { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.row-s { display: block; color: var(--txt-3); font-size: 13px; margin-top: 2px; }
.row-chev { flex: 0 0 auto; color: var(--txt-3); }

/* FAQ accordion (Support) */
.faq + .faq { border-top: 1px solid var(--line); }
.faq-q { width: 100%; }
.faq-chev { transition: transform 0.28s var(--ease); }
.faq.open .faq-chev { transform: rotate(180deg); color: var(--brand); }
.faq.open .faq-q .row-t { color: var(--brand); }
.faq-a { display: none; }
.faq.open .faq-a { display: block; animation: faq-reveal 0.26s var(--ease) both; }
@keyframes faq-reveal { from { opacity: 0.4; } to { opacity: 1; } }
.faq-a-in { overflow: hidden; }
.faq-a-t { color: var(--txt-2); font-size: 14px; line-height: 1.5; margin: 0; padding: 0 16px 16px 70px; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .faq-chev, .faq.open .faq-a { transition: none; animation: none; } }
.row-val { flex: 0 0 auto; color: var(--txt-2); font-size: 14px; font-weight: 600; }

/* segmented control */
.seg { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.seg-opt {
  flex: 1 1 0; min-width: 0; height: 44px; border: 0; background: transparent; border-radius: 999px;
  color: var(--txt-3); font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: color var(--dur-fast), background var(--dur-fast);
}
.seg-opt.on { color: var(--txt); background: var(--surface); box-shadow: var(--shadow); }

/* plan tiles */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tile {
  position: relative; display: flex; flex-direction: column; min-height: 116px; padding: 13px 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; color: var(--txt);
  cursor: pointer; overflow: hidden; -webkit-appearance: none; appearance: none; text-align: left;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease), background var(--dur-fast);
}
.tile:active { transform: scale(0.98); }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-term { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--txt-2); white-space: nowrap; }
.tile-radio { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--brand-ink); background: transparent; }
.tile-radio svg { width: 12px; height: 12px; opacity: 0; transition: opacity var(--dur-fast); }
.tile-rib-row { margin-top: 10px; }
.tile-ribbon { display: inline-block; font-weight: 700; font-size: 10px; letter-spacing: 0.02em; line-height: 1; padding: 4px 8px; border-radius: 7px; white-space: nowrap; }
.rib-best { background: var(--grad); color: var(--brand-ink); }
.rib-pop { background: rgba(0,194,255,0.16); color: #57b9e8; border: 1px solid rgba(0,194,255,0.4); }
.tile-price { display: flex; align-items: baseline; margin-top: auto; padding-top: 12px; font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.tile-price b { font-size: 29px; line-height: 1; letter-spacing: -0.03em; }
.tile-price .suf { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--txt-3); margin-left: 3px; }
.tile-foot { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.tile-total { color: var(--txt-3); font-size: 12.5px; white-space: nowrap; }
.tile-disc { font-weight: 700; font-size: 10.5px; line-height: 1; padding: 3px 6px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); }
.tile.sel { border-color: var(--brand); background: var(--brand-soft); }
.tile.sel .tile-radio { background: var(--brand); border-color: var(--brand); }
.tile.sel .tile-radio svg { opacity: 1; }
.tile.accent-best { border-color: var(--brand-line); }
.tile.accent-pop { border-color: rgba(0,194,255,0.3); }
.tile.accent-best.sel { border-color: var(--brand); }
.tile-build { align-items: center; justify-content: center; text-align: center; gap: 4px; border-style: dashed; border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand); }
.tile-build .tb-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--brand-line); margin-bottom: 4px; }
.tile-build .tb-ic svg { width: 18px; height: 18px; }
.tile-build .tb-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--txt); }
.tile-build .tb-s { font-size: 12px; color: var(--txt-2); }
.tile-glow { position: absolute; z-index: 0; right: -25%; top: -35%; width: 90%; height: 130%; border-radius: 50%; background: radial-gradient(circle, rgba(0,227,122,0.2) 0%, rgba(0,194,255,0.1) 45%, transparent 70%); filter: blur(22px); pointer-events: none; }
.tile > *:not(.tile-glow):not(.tile-check) { position: relative; z-index: 1; }

/* ---------- Skeletons ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--skel); border-radius: 8px; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skel-sheen), transparent); transform: translateX(-100%); animation: sheen 1.3s infinite; }
@keyframes sheen { to { transform: translateX(100%); } }
.sk-line { height: 13px; border-radius: 7px; }
.sk-card { height: 96px; border-radius: var(--r-lg); }
[hidden] { display: none !important; }

/* ---------- Empty / error states ---------- */
.state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 24px; gap: 14px;
}
.state-ic { width: 72px; height: 72px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-3); }
.state-t { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.state-s { color: var(--txt-2); font-size: 14.5px; line-height: 1.5; max-width: 280px; text-wrap: pretty; }

/* ---------- Toast ---------- */
.toast {
  position: absolute; z-index: 30; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(16px);
  background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--txt);
  padding: 12px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  opacity: 0; pointer-events: none; box-shadow: var(--shadow);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- Bottom sheet ---------- */
.backdrop { position: absolute; inset: 0; z-index: 40; background: rgba(4,6,10,0.55); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.backdrop.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--bg-elev); border-top: 1px solid var(--line);
  border-radius: 26px 26px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  max-height: 86%; overflow-y: auto; scrollbar-width: none;
}
.sheet.show { transform: none; }
.sheet::-webkit-scrollbar { display: none; }
.sheet-grip { width: 38px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 4px auto 14px; }
.sheet-ic { width: 60px; height: 60px; border-radius: 18px; margin: 2px auto 14px; display: flex; align-items: center; justify-content: center; }
.sheet-ic.ok { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.sheet-ic.danger { background: rgba(255,90,82,0.1); border: 1px solid rgba(255,90,82,0.32); color: var(--danger); }
.sheet-title { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 21px; margin: 0; }
.sheet-text { text-align: center; color: var(--txt-2); font-size: 14.5px; line-height: 1.5; margin: 10px 0 18px; text-wrap: pretty; }
.sheet-cancel { width: 100%; height: 50px; margin-top: 10px; background: transparent; border: 0; color: var(--txt-3); font-family: var(--font-body); font-weight: 600; font-size: 15.5px; cursor: pointer; }

/* upgrade choice sheet */
.up-choice { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; margin-bottom: 10px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line); color: var(--txt); text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.up-choice:active { transform: scale(0.985); }
.up-choice-rec { border-color: var(--brand-line); background: var(--brand-soft); }
.up-choice .uc-badge { position: absolute; top: -9px; left: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--brand-ink); background: var(--grad); padding: 3px 9px; border-radius: 7px; }
.up-choice .uc-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.up-choice .uc-ic.neutral { background: var(--surface-2); border-color: var(--line); color: var(--txt-2); }
.up-choice .uc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.up-choice .uc-t { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.up-choice .uc-s { color: var(--txt-3); font-size: 12.5px; line-height: 1.35; }
.up-choice .uc-arrow { flex: 0 0 auto; color: var(--txt-3); }

/* manual upgrade — simple rows */
.up-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-top: 12px; }
.up-row-l { flex: 1 1 auto; min-width: 0; }
.up-row .up-title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; }
.up-row .up-cap { color: var(--txt-3); font-size: 13px; margin-top: 3px; }
.stepper { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.step-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); color: var(--txt); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background var(--dur-fast), opacity var(--dur-fast); }
.step-btn:active { transform: scale(0.92); }
.step-btn:disabled { opacity: 0.35; cursor: default; }
.step-val { min-width: 40px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.up-presets-row { display: flex; gap: 8px; margin-top: 10px; }
.up-preset { flex: 1 1 0; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--txt-2); font-family: var(--font-display); font-weight: 700; font-size: 14.5px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background var(--dur-fast), border-color var(--dur-fast); }
.up-preset:active { transform: scale(0.96); background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.up-note { color: var(--txt-3); font-size: 13px; line-height: 1.45; margin-top: 18px; text-align: center; text-wrap: pretty; }
.key-hint { color: var(--txt-3); font-size: 12.5px; line-height: 1.4; margin: 9px 2px 0; text-wrap: pretty; }
.dev-add { width: 100%; background: transparent; border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.dev-add:active { background: var(--surface-press); }
.dev-trial-cta { margin-top: 16px; padding: 18px; }
.dtc-top { display: flex; align-items: flex-start; gap: 13px; }
.dtc-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.dtc-t { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.dtc-s { color: var(--txt-2); font-size: 13.5px; line-height: 1.4; margin-top: 4px; text-wrap: pretty; }
.up-bal { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-top: 12px; }
.up-bal-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.up-bal-text { flex: 1 1 auto; min-width: 0; }
.up-bal-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.up-bal-s { color: var(--txt-3); font-size: 12.5px; margin-top: 2px; }

/* slide-to-confirm (destructive) */
.slide-confirm { margin: 6px 0 4px; }
.sc-track {
  position: relative; height: 60px; border-radius: 999px;
  background: rgba(255,90,82,0.1); border: 1px solid rgba(255,90,82,0.3);
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
}
.sc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 60px; border-radius: 999px; background: var(--danger); opacity: 0.9; }
.sc-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #ff9a95; font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding-left: 40px; pointer-events: none; white-space: nowrap;
  transition: opacity var(--dur-fast);
}
.sc-thumb {
  position: absolute; left: 4px; top: 4px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--danger); color: #fff; border: 0; cursor: grab;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 4px 14px -4px rgba(255,90,82,0.7);
  touch-action: none; z-index: 2;
}
.sc-thumb:active { cursor: grabbing; }
.slide-confirm.armed .sc-thumb { background: #fff; color: var(--danger); }
.slide-confirm.done .sc-track { background: var(--danger); border-color: var(--danger); }
.slide-confirm.done .sc-label { color: #fff; padding-left: 0; }

/* payment method rows */
.pay-method { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; background: var(--surface); color: var(--txt); border: 1.5px solid var(--line); border-radius: 18px; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; margin-bottom: 10px; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.pay-method:active { transform: scale(0.985); border-color: var(--brand-line); }
.pm-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.pm-sbp { background: rgba(0,194,255,0.13); border: 1px solid rgba(0,194,255,0.34); color: #57b9e8; }
.pm-card { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.pm-crypto { background: rgba(245,180,50,0.13); border: 1px solid rgba(245,180,50,0.34); color: #d99b1c; }
.pm-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.1; }
.pm-sub { color: var(--txt-3); font-size: 12.5px; line-height: 1.3; }
.pm-arrow { flex: 0 0 auto; color: var(--txt-3); }

/* withdraw input */
.wd-amount { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; margin: 4px 0 14px; border-radius: 16px; background: var(--brand-soft); border: 1px solid var(--brand-line); }
.wd-amount-k { color: var(--txt-2); font-size: 14.5px; }
.wd-amount-v { font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.wd-field-l { display: block; color: var(--txt-3); font-size: 13px; margin: 0 0 8px 2px; }
.wd-row { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 8px 0 18px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); transition: border-color var(--dur-fast); }
.wd-row:focus-within { border-color: var(--brand-line); }
.wd-input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--txt); font-family: var(--font-display); font-weight: 700; font-size: 26px; -webkit-appearance: none; appearance: none; }
.wd-input.err { color: var(--danger); }
.wd-cur { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--txt-3); }
.wd-max { height: 42px; padding: 0 16px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); font-weight: 600; font-size: 14px; cursor: pointer; }
.wd-err { color: var(--danger); font-size: 13px; margin: 8px 0 0 2px; }
.wd-remain { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; color: var(--txt-3); font-size: 14px; }
.wd-remain b { color: var(--txt); font-weight: 700; font-family: var(--font-display); }
.wd-remain span:last-child b { color: var(--brand); }

/* link field */
.link-field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.link-field code { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono, monospace); font-size: 13.5px; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-field .copy { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); cursor: pointer; }

/* stat cards */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { padding: 16px; }
.stat .k { color: var(--txt-3); font-size: 13px; }
.stat .v { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin-top: 6px; }

/* toggle */
.tg-switch { flex: 0 0 auto; position: relative; width: 50px; height: 30px; border-radius: 16px; background: var(--line-strong); border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background var(--dur) var(--ease); }
.tg-switch .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: transform var(--dur) var(--ease); }
.tg-switch.on { background: var(--brand); }
.tg-switch.on .knob { transform: translateX(20px); }
.locked-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 14px; font-weight: 600; font-size: 12.5px; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); white-space: nowrap; }

/* chat */
.chat-hi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; font-size: 15px; line-height: 1.5; margin-top: 10px; }
.bubble { max-width: 80%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; margin-top: 10px; }
.bubble.in { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; margin-right: auto; }
.bubble.out { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--txt); border-bottom-right-radius: 5px; margin-left: auto; }
.bubble .time { display: block; color: var(--txt-3); font-size: 11px; margin-top: 5px; }
.chat-input-bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 16; align-items: center; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
body.in-chat .chat-input-bar { display: flex; }
.chat-input-bar input { flex: 1 1 auto; height: 46px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt); font-size: 15px; outline: none; }
.chat-send { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--grad); color: var(--brand-ink); border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* spoiler */
.spoiler-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--txt); cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 16px; -webkit-appearance: none; appearance: none; }
.spoiler-head .sp-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-3); display: flex; align-items: center; justify-content: center; }
.spoiler-head .sp-chev { margin-left: auto; color: var(--txt-3); transition: transform var(--dur) var(--ease); }
.spoiler-body { overflow: hidden; max-height: 520px; opacity: 1; transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.spoiler.collapsed .sp-chev { transform: rotate(-90deg); }
.spoiler.collapsed .spoiler-body { max-height: 0; opacity: 0; }

/* carousel */
.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 12px -16px 0; padding: 0 16px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.cslide { flex: 0 0 100%; scroll-snap-align: center; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); min-height: 130px; }
.cstep { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; color: var(--brand); padding: 5px 10px; border-radius: 8px; background: var(--brand-soft); border: 1px solid var(--brand-line); margin-bottom: 12px; }
.cslide h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0; }
.cslide p { color: var(--txt-2); font-size: 14px; line-height: 1.45; margin: 8px 0 0; }
.cslide b { color: var(--brand); }
.dots { display: flex; gap: 7px; justify-content: center; margin-top: 14px; }
.dots i { width: 22px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: background var(--dur); }
.dots i.on { background: var(--brand); }

/* device row */
.dev-row { display: flex; align-items: center; gap: 14px; padding: 16px; }
.dev-row + .dev-row { border-top: 1px solid var(--line); }
/* swipe-to-disconnect (ITEM 3): transform-only slide reveals a red action beneath the row */
/* overscroll-behavior:auto (NOT contain): `.list` is overflow:hidden → a `.card.list` is a
   NON-scrollable scroll container; `contain` TRAPS a vertical pan started inside it (0 scrollable
   extent), blocking it from chaining to the `.mini-screen` scroller — cabinet scrolled only OFF the
   cards (owner-isolated on Android). globals.css ALSO overrides this (`.mini-frame .card.list`) so the
   live tg build is already fixed; this keeps the vendored source correct for the next rebuild. */
.card.list { overscroll-behavior: auto; }
.dev-row-wrap { position: relative; overflow: hidden; }
.dev-row-wrap + .dev-row-wrap { border-top: 1px solid var(--line); }
.dev-row-slide { position: relative; z-index: 1; background: var(--surface); will-change: transform; transition: transform 0.18s var(--ease, ease-out); touch-action: pan-y; }
.dev-swipe-action { position: absolute; inset: 0 0 0 auto; width: 100%; padding-right: 20px; display: flex; align-items: center; justify-content: flex-end; border: 0; background: rgba(255,90,82,0.16); color: #ff9a95; font-weight: 600; font-size: 14px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .dev-row-slide { transition: none; } }
.dev-tariff-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dev-tariff-head > * { flex: 0 0 auto; min-width: fit-content; }
.dev-tariff-date { color: var(--txt-3); font-size: 13px; flex: 0 0 auto; }
.dev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px rgba(0,227,122,0.7); flex: 0 0 auto; }
.dev-dot.awaiting { background: #ffd456; box-shadow: none; }
.dev-off { margin-left: auto; flex: 0 0 auto; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255,90,82,0.1); border: 1px solid rgba(255,90,82,0.32); color: #ff9a95; font-weight: 600; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.dev-row-hint { color: var(--brand); font-size: 12.5px; margin-top: 3px; }
.slot-dots { display: inline-flex; gap: 5px; }
.slot-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.slot-dots i.fill { background: var(--txt); box-shadow: none; }
/* owner v2 §3: full slot count = yellow limit, not green. */
.slot-dots.full i.fill { background: #F5A623; }

@media (prefers-reduced-motion: reduce) {
  .hero-status.ok .dot { animation: none; }
  .skeleton::after { animation: none; }
}

/* ---------- preview state switcher (outside phone) ---------- */
.state-switch { position: fixed; top: 18px; left: 18px; z-index: 50; }
.ss-lbl { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f7886; margin-bottom: 8px; font-family: var(--font-body); }
.ss-seg { display: inline-flex; gap: 4px; background: #11141a; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 4px; }
.ss-opt { height: 34px; padding: 0 14px; border: 0; background: transparent; border-radius: 999px; color: #aab2c0; font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.ss-opt.is-active { background: rgba(0,227,122,0.16); color: #00E37A; }
@media (max-width: 900px) { .state-switch { display: none; } }

/* ---------- hero state variants ---------- */
.hero-status.danger { color: var(--danger); }
.hero-status.danger .dot { background: var(--danger); animation: none; }
.hero-ring.empty .prog { stroke: var(--line-strong); }
.hero-ring .core-ic { color: var(--txt-2); }
.hero-ring .core-ic svg { width: 46px; height: 46px; }
.hero-ring .core-ic[hidden] { display: none; }
.hero-cta { margin-top: 18px; }
.hero-cta[hidden] { display: none; }
.chips[hidden] { display: none; }
.chip.danger { color: #ff9a95; background: rgba(255,90,82,0.1); border-color: rgba(255,90,82,0.3); }
.btn.pulse { animation: cta-pulse 2.4s ease-in-out infinite; }
@keyframes cta-pulse { 0%,100% { box-shadow: 0 12px 30px -14px rgba(0,227,122,0.6), 0 0 0 0 rgba(0,227,122,0.4); } 50% { box-shadow: 0 14px 34px -12px rgba(0,227,122,0.75), 0 0 0 7px rgba(0,227,122,0); } }
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; } }

/* ---------- subscription card (Settings, state-aware) ---------- */
.sub-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-plan { color: var(--txt-2); font-size: 14.5px; line-height: 1.45; margin-top: 10px; text-wrap: pretty; }
.sub-bar { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin-top: 14px; }
.sub-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--grad); }
.sub-bar.danger > span { background: var(--danger); }
.sub-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--txt-3); font-size: 13.5px; }
.sub-meta b { color: var(--txt); }
.sub-price { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--txt); margin: 16px 0 14px; }
.sub-price b { font-size: 30px; letter-spacing: -0.02em; }
.sub-price span { color: var(--txt-3); font-size: 13px; font-weight: 500; font-family: var(--font-body); }
.locked-badge.danger { color: #ff9a95; background: rgba(255,90,82,0.1); border-color: rgba(255,90,82,0.3); }
.locked-badge.off { color: var(--txt-2); background: var(--surface-2); border-color: var(--line); }
.dev-dot.danger { background: var(--danger); box-shadow: none; }

/* trial state — cyan accent (active access, not yet connected) */
.hero-status.trial { color: var(--brand-2); }
.hero-status.trial .dot { background: var(--brand-2); animation: pdot-trial 2.4s var(--ease-out) infinite; }
@keyframes pdot-trial { 0% { box-shadow: 0 0 0 0 rgba(0,194,255,0.5); } 70%,100% { box-shadow: 0 0 0 8px rgba(0,194,255,0); } }
.chip.trial { color: var(--brand-2); background: rgba(0,194,255,0.1); border-color: rgba(0,194,255,0.3); }
.locked-badge.trial { color: var(--brand-2); background: rgba(0,194,255,0.12); border-color: rgba(0,194,255,0.32); }
.sub-bar.trial > span { background: var(--brand-2); }
.dev-dot.trial { background: var(--brand-2); box-shadow: none; }
.ss-opt[data-sub="trial"].is-active, .ss-opt[data-sub="trialOn"].is-active { background: rgba(0,194,255,0.16); color: var(--brand-2); }

/* upgrade mode (plans) */
.upg-banner { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 13px 15px; border-radius: var(--r-md); background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--txt); font-size: 13.5px; line-height: 1.4; }
.upg-banner[hidden] { display: none; }
.upg-banner svg { flex: 0 0 auto; color: var(--brand); margin-top: 1px; }
.upg-banner b { font-weight: 700; }
.seg-opt.is-locked { opacity: 0.4; }
.seg-opt.is-current { position: relative; }
.seg-opt .seg-cur { display: block; font-size: 10px; font-weight: 700; color: var(--brand); margin-top: 1px; }

/* auto-server info sheet */
.srv-stats { display: flex; gap: 10px; margin: 4px 0 18px; }
.srv-stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.srv-v { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--brand); }
.srv-u { font-size: 12px; font-weight: 600; color: var(--txt-3); margin-left: 1px; }
.srv-k { font-size: 12px; color: var(--txt-3); }

/* ---------- constructor ---------- */
.con-hero { padding: 22px 20px; text-align: center; }
.con-hero-k { color: var(--txt-3); font-size: 13px; }
.con-price-row { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 6px; }
.con-price { font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.con-price-row { flex-direction: column; }
.con-save { font-size: 13px; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.con-save[hidden] { display: none; }
.con-save b { font-weight: 700; }
.con-sub { color: var(--txt-2); font-size: 14px; margin-top: 10px; }
.con-block { margin-top: 22px; }
.con-block-head { display: flex; align-items: center; justify-content: space-between; color: var(--txt-2); font-size: 14px; margin-bottom: 14px; }
.con-dev-right { display: inline-flex; align-items: baseline; gap: 7px; }
.con-dev-right b { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--txt); }
.con-dev-max { color: var(--txt-3); font-size: 13px; }
.con-vol { font-size: 11.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 3px 7px; border-radius: 7px; align-self: center; }
.con-vol[hidden] { display: none; }

/* big custom range */
.con-range { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; border-radius: 999px; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) var(--fill,0%), var(--surface-2) var(--fill,0%), var(--surface-2) 100%); outline: none; cursor: pointer; }
.con-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 4px solid var(--brand); box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5); cursor: grab; }
.con-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.con-range::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 4px solid var(--brand); cursor: grab; }
.con-range-scale { display: flex; justify-content: space-between; color: var(--txt-3); font-size: 12px; margin-top: 10px; padding: 0 2px; }

/* term pills with discount */
.con-terms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.con-term { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 4px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); color: var(--txt-2); cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color var(--dur-fast), background var(--dur-fast); }
.con-term:active { transform: scale(0.96); }
.con-term .ct-m { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--txt); white-space: nowrap; }
.con-term .ct-d { font-size: 10.5px; font-weight: 700; color: var(--brand); }
.con-term .ct-d.ct-empty { color: transparent; }
.con-term.on { border-color: var(--brand); background: var(--brand-soft); }

/* ---------- ambient aurora (dark theme only) — soft brand gradient ---------- */
[data-theme="dark"] .screen-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 22% 12%, rgba(0,227,122,0.14) 0%, transparent 60%),
    radial-gradient(60% 45% at 82% 88%, rgba(0,194,255,0.12) 0%, transparent 62%),
    var(--bg);
}
/* landing-style drifting aurora blobs — transform-only (compositor, no repaint) */
.app-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
[data-theme="light"] .app-bg { opacity: 0.5; }
.app-bg .ab { position: absolute; border-radius: 50%; filter: blur(46px); will-change: transform; opacity: 1; }
.app-bg .ab1 { width: 82%; height: 50%; top: -14%; left: -16%; background: radial-gradient(circle, rgba(0,227,122,0.72), transparent 66%); animation: ab-a 11s ease-in-out infinite alternate; }
.app-bg .ab2 { width: 74%; height: 48%; top: -8%; right: -18%; background: radial-gradient(circle, rgba(0,194,255,0.66), transparent 66%); animation: ab-b 13s ease-in-out infinite alternate; }
.app-bg .ab3 { width: 78%; height: 54%; bottom: -16%; left: 6%; background: radial-gradient(circle, rgba(0,194,255,0.44), transparent 68%); animation: ab-c 15s ease-in-out infinite alternate; }
@keyframes ab-a { to { transform: translate(42%, 48%) scale(1.32); } }
@keyframes ab-b { to { transform: translate(-40%, 52%) scale(1.26); } }
@keyframes ab-c { to { transform: translate(34%, -46%) scale(1.36); } }
[data-theme="dark"] .screen-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(135% 90% at 50% 42%, rgba(10,12,16,0.42) 0%, rgba(10,12,16,0.05) 50%, transparent 70%),
    linear-gradient(180deg, rgba(10,12,16,0.32) 0%, transparent 26%, transparent 60%, rgba(7,9,13,0.74) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .app-bg .ab { animation: none; }
}
/* danger states (expired / trial expired) tint the aurora red */
body[data-home="expired"] .app-bg .ab1, body[data-home="trialExpired"] .app-bg .ab1 { background: radial-gradient(circle, rgba(255,90,82,0.62), transparent 66%); }
body[data-home="expired"] .app-bg .ab2, body[data-home="trialExpired"] .app-bg .ab2 { background: radial-gradient(circle, rgba(255,90,82,0.5), transparent 66%); }
body[data-home="expired"] .app-bg .ab3, body[data-home="trialExpired"] .app-bg .ab3 { background: radial-gradient(circle, rgba(255,120,90,0.4), transparent 68%); }

/* ===== merged from upgrade.css (consolidated) ===== */
/* ============================================================
   NormNet VPN — «Улучшить подписку» (upgrade flow)
   Builds on v2.css tokens + base components.
   ============================================================ */

.screen[data-screen="upgrade"] { padding-bottom: 24px; }

.note-line { color: var(--txt-2); font-size: 14px; line-height: 1.5; margin-top: 16px; text-wrap: pretty; }

/* ---------- block scaffolding ---------- */
.up-block { margin-top: 14px; padding: 18px; }
.up-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.up-title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; }
.up-cap { color: var(--txt-3); font-size: 13px; margin-top: 3px; }
.up-hint { color: var(--txt-3); font-size: 12.5px; margin-top: 10px; }

/* ---------- stepper ---------- */
.stepper { display: flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; flex: 0 0 auto; }
.step-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); color: var(--txt); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.12s var(--ease), opacity 0.12s; -webkit-appearance: none; appearance: none; }
.step-btn:active { transform: scale(0.9); }
.step-btn:disabled { opacity: 0.32; cursor: default; box-shadow: none; }
.step-val { min-width: 36px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }

/* ---------- per-device price ---------- */
.perdev { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.perdev-k { color: var(--txt-2); font-size: 14px; }
.perdev-v { display: inline-flex; align-items: baseline; }
.perdev-old { color: var(--txt-3); text-decoration: line-through; text-decoration-thickness: 2px; margin-right: 9px; font-size: 15px; font-weight: 600; }
.perdev-old[hidden] { display: none; }
.perdev-v b { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; transition: color 0.35s var(--ease); }
.perdev-suf { color: var(--txt-3); font-size: 13px; margin-left: 2px; }
.perdev.win .perdev-v b { color: var(--brand); }
.perdev.flash { animation: pd-flash 0.6s var(--ease-out); }
@keyframes pd-flash { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---------- badges ---------- */
.vol-badge { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding: 10px 13px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); font-size: 13px; font-weight: 600; line-height: 1.3; }
.vol-badge[hidden] { display: none; }
.vol-badge svg { flex: 0 0 auto; }
.term-badge { display: inline-flex; align-items: center; height: 27px; padding: 0 12px; border-radius: 13px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); font-size: 12.5px; font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.term-badge[hidden] { display: none; }

/* ---------- term presets + slider ---------- */
.up-presets .seg-opt { font-size: 13px; height: 40px; }
.up-slider-row { margin-top: 20px; padding: 0 2px; }

/* ---------- timeline ---------- */
.timeline { position: relative; height: 14px; border-radius: 999px; background: var(--surface-2); margin: 18px 0 30px; }
.tl-fill { position: absolute; top: 0; height: 100%; border-radius: 999px; transition: width 0.45s var(--ease-out); }
.tl-add { left: 0; width: 100%; background: var(--brand-2); }
.tl-rem { left: 0; width: var(--rem, 100%); background: var(--brand); z-index: 2; }
.tl-now, .tl-end { position: absolute; top: 22px; font-size: 12.5px; }
.tl-now { left: 0; color: var(--txt-3); }
.tl-end { right: 0; color: var(--txt); font-weight: 700; }
.tl-legend { display: flex; gap: 18px; color: var(--txt-3); font-size: 12.5px; }
.tl-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tl-legend span[hidden] { display: none; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; }
.tl-dot.rem { background: var(--brand); }
.tl-dot.add { background: var(--brand-2); }

/* ---------- breakdown ---------- */
.bd-rows { display: flex; flex-direction: column; }
.bd-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.bd-row:first-child { border-top: 0; padding-top: 2px; }
.bd-k { color: var(--txt-2); font-size: 14px; line-height: 1.35; }
.bd-k .bd-sub { display: block; color: var(--txt-3); font-size: 12px; margin-top: 2px; }
.bd-v { color: var(--txt); font-weight: 600; font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-row.save .bd-v { color: var(--brand); }
.bd-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1.5px solid var(--line-strong); }
.bd-total span { color: var(--txt-2); font-size: 14.5px; }
.bd-total b { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; }
#breakdownCard.empty { opacity: 0.55; }

/* ---------- balance ---------- */
.bal-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; }
.bal-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.bal-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.bal-t { font-weight: 600; font-size: 15px; }
.bal-s { color: var(--txt-3); font-size: 13px; margin-top: 2px; }
.bal-block.disabled { opacity: 0.45; pointer-events: none; }

/* ---------- sticky summary ---------- */
.up-sticky {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 14;
  padding: 13px 16px calc(15px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 58%, color-mix(in srgb, var(--bg) 70%, transparent) 88%, transparent);
  display: none;
  pointer-events: none;
}
.screen-frame.show-sticky .up-sticky { display: block; pointer-events: auto; animation: sheet-up var(--dur) var(--ease-out); }
.ust-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 11px; padding: 0 3px; }
.ust-amount-wrap { min-width: 0; }
.ust-k { display: block; color: var(--txt-3); font-size: 12.5px; margin-bottom: 1px; }
.ust-amount { font-family: var(--font-display); font-weight: 700; font-size: 31px; letter-spacing: -0.02em; line-height: 1; }
.ust-strike { color: var(--txt-3); font-size: 14px; font-weight: 700; text-decoration: line-through; text-decoration-thickness: 2px; margin-left: 9px; }
.ust-strike[hidden] { display: none; }
.ust-plan { color: var(--txt-2); font-size: 12.5px; line-height: 1.35; text-align: right; max-width: 47%; text-wrap: pretty; }
.ust-plan b { color: var(--txt); }

/* ---------- success ---------- */
.success-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 4px; margin-bottom: 16px; }
.sm-cell { flex: 1 1 0; min-width: 0; text-align: center; display: flex; flex-direction: column; gap: 5px; }
.sm-k { color: var(--txt-3); font-size: 11.5px; }
.sm-v { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.sm-div { width: 1px; height: 32px; background: var(--line); flex: 0 0 auto; }
.success-pop { animation: succ-pop 0.5s var(--ease-out); }
@keyframes succ-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* confetti */
.confetti { position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: visible; pointer-events: none; }
.confetti i { position: absolute; top: 0; width: 8px; height: 8px; border-radius: 2px; opacity: 0; }
.confetti.go i { animation: confetti-drop 1.15s var(--ease-out) forwards; }
@keyframes confetti-drop { 0% { opacity: 1; transform: translateY(-10px) rotate(0deg); } 100% { opacity: 0; transform: translateY(240px) rotate(340deg); } }

@media (prefers-reduced-motion: reduce) {
  .success-pop { animation: none; }
  .confetti { display: none; }
  .perdev.flash { animation: none; }
  .tl-fill { transition: none; }
}

/* ---------- referral: withdraw progress scale ---------- */
.wd-progress { padding: 16px 18px; }
.wdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.wdp-t { color: var(--txt-2); font-size: 14px; }
.wdp-v { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.wd-progress.ready .wdp-v { color: var(--brand); }
.wdp-bar { height: 9px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.wdp-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--grad); transition: width 0.5s var(--ease-out); }
.wdp-foot { color: var(--txt-3); font-size: 12.5px; margin-top: 10px; }
.wd-progress.ready .wdp-foot { color: var(--brand); }

.btn[disabled] { opacity: 0.42; pointer-events: none; box-shadow: none; }

/* preview switchers: home state vs referral balance (mutually exclusive) */
#stateSwitch { display: none; }
body[data-active="home"] #stateSwitch { display: block; }
.ref-switch { display: none; }
body[data-active="referral"] .ref-switch { display: block; }

/* ---------- expiring-soon (warn / amber) state ---------- */
.hero-status.warn .dot { animation: pdot-warn 2.4s var(--ease-out) infinite; }
@keyframes pdot-warn { 0% { box-shadow: 0 0 0 0 rgba(255,138,130,0.5); } 70%,100% { box-shadow: 0 0 0 8px rgba(255,138,130,0); } }
.chip.warn { color: #ff8a82; background: rgba(255,138,130,0.10); border-color: rgba(255,138,130,0.30); }
.locked-badge.warn { color: #ff8a82; background: rgba(255,138,130,0.12); border-color: rgba(255,138,130,0.32); }
.dev-dot.warn { background: #ff8a82; box-shadow: none; }
.sub-bar.warn > span { background: #ff8a82; }
.ss-opt[data-sub="expiring"].is-active { background: rgba(255,138,130,0.16); color: #ff8a82; }
.btn .info-ic { width: 18px; height: 18px; opacity: 0.9; }
/* referral block rework */
.ref-empty { padding: 24px 20px; text-align: center; }
.ref-empty .re-ic { display: inline-flex; width: 54px; height: 54px; border-radius: 16px; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); margin-bottom: 14px; }
.ref-empty .re-t { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.ref-empty .re-s { color: var(--txt-2); font-size: 14px; line-height: 1.5; margin-top: 8px; text-wrap: pretty; }
.ref-hint { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 13px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); font-size: 13px; line-height: 1.4; }
.ref-hint svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--txt-3); margin-top: 1px; }
#refStats[hidden], #refActions[hidden], #refHint[hidden], #wdProgress[hidden], #refPayBtn[hidden], #refEmpty[hidden] { display: none !important; }
body[data-active="plans"] .ref-switch, body[data-active="constructor"] .ref-switch, body[data-active="upgrade"] .ref-switch { display: block; }

/* ---------- autopay ---------- */
.hero-autopay { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.hero-autopay .ha-ic { display: inline-flex; color: var(--brand); flex: 0 0 auto; }
.hero-autopay .ha-text { font-size: 13.5px; color: var(--txt-2); line-height: 1.35; }
.hero-autopay .ha-text b { color: var(--txt); font-family: var(--font-display); }

.pay-autopay { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.pay-autopay .pa-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pay-autopay .pa-ic { display: inline-flex; width: 38px; height: 38px; border-radius: 11px; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); flex: 0 0 auto; }
.pay-autopay .pa-t { font-weight: 600; font-size: 15px; }
.pay-autopay .pa-s { color: var(--txt-3); font-size: 12.5px; margin-top: 2px; line-height: 1.3; }

.pay-method.disabled { opacity: 0.45; }
.pay-method.disabled .pm-arrow { display: none; }
.pay-method.disabled .pm-sub { color: #f5b432; }

/* demo autopay switcher — stack under the home-state switcher */
.ap-demo { top: 110px; }
body[data-active="home"] .ap-demo { display: block; }
.ap-demo { display: none; }
.ss-opt[data-ap].is-active { background: rgba(0,227,122,0.16); color: var(--brand); }

/* slide-to-confirm */
.slide-confirm { position: relative; height: 60px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 14px; -webkit-user-select: none; user-select: none; touch-action: none; }
.slide-confirm .sc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(245,180,50,0.18); transition: width 0.2s var(--ease); }
.slide-confirm .sc-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14.5px; color: var(--txt-2); pointer-events: none; }
.slide-confirm .sc-knob { position: absolute; left: 4px; top: 4px; width: 52px; height: 52px; border-radius: 13px; background: #f5b432; color: #1a1206; display: flex; align-items: center; justify-content: center; cursor: grab; box-shadow: 0 4px 12px -3px rgba(245,180,50,0.6); }
.slide-confirm .sc-knob:active { cursor: grabbing; }
.slide-confirm.done .sc-fill { background: rgba(245,180,50,0.32); }
.slide-confirm.done .sc-label { opacity: 0; }

/* ---------- network status ---------- */
.status-badge { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; font-family: var(--font-body); }
.status-badge .sb-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.status-badge.ok { color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.status-badge.ok .sb-dot { background: var(--brand); box-shadow: 0 0 0 0 rgba(0,227,122,0.5); animation: sbPulse 2.4s var(--ease-out) infinite; }
@keyframes sbPulse { 0% { box-shadow: 0 0 0 0 rgba(0,227,122,0.5); } 70%,100% { box-shadow: 0 0 0 6px rgba(0,227,122,0); } }
@media (prefers-reduced-motion: reduce) { .status-badge.ok .sb-dot { animation: none; } }
.net-status { text-align: left; }
.net-rows { padding: 4px 4px; margin-bottom: 14px; }
.net-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px; font-size: 14.5px; color: var(--txt-2); }
.net-row + .net-row { border-top: 1px solid var(--line); }
.sheet-ic.ok { display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); }
.sheet-ic.ok .sb-dot { background: var(--brand); border-radius: 50%; box-shadow: 0 0 12px rgba(0,227,122,0.6); }

/* ---------- chat header ---------- */
.chat-head { position: sticky; top: -4px; z-index: 20; display: flex; align-items: center; gap: 11px; padding: 12px 16px; margin: -4px -16px 14px; background: rgba(20,24,31,0.92); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line-strong); }
[data-theme="light"] .chat-head { background: rgba(255,255,255,0.92); }
.chat-head .ch-back { flex: 0 0 auto; width: 34px; height: 34px; margin-left: -6px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--txt-2); cursor: pointer; border-radius: 10px; }
.chat-head .ch-back:active { background: var(--surface-2); }
.chat-head .ch-av { position: relative; flex: 0 0 auto; }
.chat-head .ch-av img { width: 42px; height: 42px; border-radius: 50%; display: block; }
.chat-head .ch-online { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2.5px solid var(--bg); box-shadow: 0 0 0 0 rgba(0,227,122,0.5); animation: sbPulse 2.4s var(--ease-out) infinite; }
.chat-head .ch-meta { flex: 1 1 auto; min-width: 0; }
.chat-head .ch-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.1; }
.chat-head .ch-status { display: flex; align-items: center; gap: 6px; color: var(--brand); font-size: 12.5px; margin-top: 3px; }
.chat-head .ch-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.chat-head .ch-tag { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); }
@media (prefers-reduced-motion: reduce) { .chat-head .ch-online { animation: none; } }

/* ---------- faq work-in-progress ---------- */
.faq-wrap { position: relative; border-radius: 18px; overflow: hidden; }
.faq-wrap .faq-blur { filter: blur(5px) saturate(0.7); opacity: 0.5; pointer-events: none; -webkit-user-select: none; user-select: none; }
.faq-wrap .faq-wip { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; background: rgba(13,16,22,0.32); }
.faq-wip .fw-badge { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--txt); font-family: var(--font-display); font-weight: 700; font-size: 14.5px; box-shadow: 0 8px 22px -10px rgba(0,0,0,0.7); }
.faq-wip .fw-badge svg { color: var(--brand); }
.faq-wip .fw-sub { color: var(--txt-2); font-size: 12.5px; }
.ref-soon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 64px 26px; }
.ref-soon-ic { width: 76px; height: 76px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.ref-soon-t { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; }
.ref-soon-s { color: var(--txt-2); font-size: 14.5px; line-height: 1.5; max-width: 290px; text-wrap: pretty; }
.ref-soon-s b { color: var(--brand); font-weight: 700; }
.ref-soon-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--txt); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ref-soon-badge svg { flex: 0 0 auto; color: var(--brand); }
.ref-wipwrap { position: relative; }
.ref-wipwrap.is-wip #refLive { filter: blur(7px) saturate(0.8); opacity: 0.5; pointer-events: none; -webkit-user-select: none; user-select: none; }
.ref-wipwrap.is-wip #refSoon { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.ref-wipwrap:not(.is-wip) #refSoon { display: none; }
.support-wipwrap { position: relative; min-height: 320px; }
.support-wipwrap.is-wip #supportLive { filter: blur(7px) saturate(0.8); opacity: 0.45; pointer-events: none; -webkit-user-select: none; user-select: none; }
.support-wipwrap.is-wip #supportLock { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.support-wipwrap:not(.is-wip) #supportLock { display: none; }
.ref-wrap { position: relative; border-radius: 18px; overflow: hidden; }
.ref-wrap .ref-blur { filter: blur(6px) saturate(0.7); opacity: 0.45; pointer-events: none; -webkit-user-select: none; user-select: none; }
.ref-wrap .ref-wip { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 20px; }
.ref-wrap .ref-wip { }

/* ---------- chat system msg + attach ---------- */
.chat-sys { display: flex; align-items: flex-start; gap: 8px; max-width: 84%; margin: 4px auto 6px; padding: 9px 13px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); font-size: 12.5px; line-height: 1.4; text-align: left; text-wrap: pretty; }
.chat-sys svg { flex: 0 0 auto; color: var(--txt-3); margin-top: 1px; }
.chat-attach { flex: 0 0 auto; width: 42px; height: 46px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--txt-2); cursor: pointer; border-radius: 12px; }
.chat-attach:active { background: var(--surface-2); color: var(--brand); }
.bubble.has-file { padding: 9px 10px; }
.bubble .file-chip { display: flex; align-items: center; gap: 10px; }
.bubble .fc-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.18); color: var(--brand); }
.bubble .fc-meta { display: flex; flex-direction: column; min-width: 0; }
.bubble .fc-name { font-size: 13.5px; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble .fc-size { font-size: 11.5px; color: var(--txt-3); margin-top: 1px; }

/* ---------- subcard autopay row ---------- */
.sub-autopay { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sub-autopay .sa-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sub-autopay .sa-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.sub-autopay .sa-ic svg { width: 19px; height: 19px; }
.sub-autopay .sa-t { font-weight: 600; font-size: 15px; }
.sub-autopay .sa-s { color: var(--txt-3); font-size: 12.5px; margin-top: 2px; }

/* ---------- payment status screens ---------- */
.pay-status { display: flex; flex-direction: column; }
.ps-center { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; padding: 20px 6px; }
.ps-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin: 18px 0 0; letter-spacing: -0.01em; }
.ps-sub { color: var(--txt-2); font-size: 14.5px; line-height: 1.5; margin: 10px 0 0; max-width: 320px; text-wrap: pretty; }
.ps-actions { padding: 14px 0 calc(20px + env(safe-area-inset-bottom)); }

/* processing — Nox + ring + dots */
.ps-nox { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; }
.ps-nox img { width: 116px; height: 116px; border-radius: 50%; display: block; }
.ps-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--brand); border-right-color: var(--brand-2); animation: psSpin 1s linear infinite; }
@keyframes psSpin { to { transform: rotate(360deg); } }
.ps-dots { display: flex; gap: 7px; margin-top: 22px; }
.ps-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); opacity: 0.35; animation: psDot 1.2s var(--ease-out) infinite; }
.ps-dots i:nth-child(2){ animation-delay: 0.18s; } .ps-dots i:nth-child(3){ animation-delay: 0.36s; }
@keyframes psDot { 0%,100%{ opacity:0.3; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-4px);} }
.ps-secure { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; color: var(--txt-3); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce){ .ps-ring{ animation: none; } .ps-dots i{ animation: none; opacity: 0.6; } }

/* error + success icon discs */
.ps-icon { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ps-icon.error { background: rgba(255,90,82,0.12); border: 1px solid rgba(255,90,82,0.34); color: #ff6a62; }
.ps-icon.ok { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.ps-reason { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 7px 13px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); font-size: 12.5px; }
.ps-reason svg { color: #ff9a95; }

/* success head */
.ps-success-head { position: relative; text-align: center; padding: 20px 6px 6px; }
.ps-success-head .ps-icon { margin: 0 auto; }
.ps-success-head .ps-title { font-size: 28px; }

/* SBP screen */
.ps-sbp { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 6px 0; }
.sbp-qr { margin-top: 22px; padding: 14px; background: #fff; border-radius: 20px; box-shadow: 0 14px 38px -14px rgba(0,0,0,0.7); }
.sbp-qr img { display: block; width: 220px; height: 220px; border-radius: 8px; }
.sbp-amount { margin-top: 16px; color: var(--txt-2); font-size: 14.5px; }
.sbp-amount b { font-family: var(--font-display); font-size: 18px; color: var(--txt); margin-left: 4px; }
.sbp-logo { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--txt-3); font-size: 12.5px; }
.sbp-mark { width: 16px; height: 16px; border-radius: 4px; background: conic-gradient(from 200deg, #00C24D, #1F8FFF, #F5A623, #E94B7B, #00C24D); }

/* demo outcome switcher visibility */
.pay-demo { top: 110px; display: none; }
body[data-active="plans"] .pay-demo, body[data-active="constructor"] .pay-demo, body[data-active="upgrade"] .pay-demo,
body[data-active="paySbp"] .pay-demo, body[data-active="payProcessing"] .pay-demo, body[data-active="payError"] .pay-demo, body[data-active="paySuccess"] .pay-demo { display: block; }
body[data-active="plans"] .ap-demo, body[data-active="constructor"] .ap-demo, body[data-active="upgrade"] .ap-demo { display: none; }
.ss-opt[data-out="err"].is-active { background: rgba(255,90,82,0.16); color: #ff6a62; }

/* ---------- Karing instruction ---------- */
.instr-os { margin-bottom: 14px; }
.instr-os-lbl { display: block; color: var(--txt-3); font-size: 12px; margin-bottom: 8px; }
.os-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.os-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.os-opt .os-i { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.os-opt .os-i svg { width: 22px; height: 22px; }
.os-opt:active { transform: scale(0.96); }
.os-opt.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.instr-steps { display: flex; flex-direction: column; gap: 10px; }
.instr-step { display: flex; gap: 13px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.instr-step .is-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.instr-step .is-body { flex: 1 1 auto; min-width: 0; }
.instr-step .is-t { font-weight: 600; font-size: 15.5px; }
.instr-step .is-s { color: var(--txt-2); font-size: 13px; line-height: 1.4; margin-top: 3px; text-wrap: pretty; }
.instr-step .btn { margin-top: 12px; width: 100%; }
.instr-media { margin-top: 12px; height: 132px; border-radius: 12px; border: 1.5px dashed var(--line-strong); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--txt-3); font-size: 12.5px; text-align: center; }
.instr-media svg { color: var(--txt-3); }

/* ---------- setup wizard ---------- */
.screen.wizard { display: flex; flex-direction: column; padding-bottom: 16px; }
.wiz-top { display: flex; align-items: center; gap: 12px; padding: 6px 0 18px; }
.wiz-progress { display: flex; gap: 6px; flex: 1 1 auto; }
.wiz-progress i { height: 4px; flex: 1 1 0; border-radius: 2px; background: var(--line-strong); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.wiz-progress i.done { background: var(--brand); }
.wiz-progress i.now { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.wiz-step-label { flex: 0 0 auto; font-size: 12px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.wiz-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-bottom: 6px; }
.wiz-body::-webkit-scrollbar { display: none; }
.wiz-title { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; line-height: 1.16; text-wrap: balance; }
.wiz-sub { color: var(--txt-2); font-size: 14.5px; line-height: 1.5; margin-top: 9px; text-wrap: pretty; }
.wiz-sub b { color: var(--txt); font-weight: 650; }
.wiz-hero { width: 62px; height: 62px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); margin-bottom: 16px; }
.wiz-hero svg { width: 30px; height: 30px; }
.wiz-callout { display: flex; gap: 11px; margin-top: 16px; padding: 14px 15px; border-radius: 14px; background: rgba(245,180,50,0.10); border: 1px solid rgba(245,180,50,0.30); }
.wiz-callout .wc-ic { flex: 0 0 auto; color: #f5b432; margin-top: 1px; }
.wiz-callout .wc-ic svg { display: block; }
.wiz-callout .wc-body { font-size: 13.5px; line-height: 1.5; color: var(--txt-2); text-wrap: pretty; }
.wiz-callout .wc-body b { color: var(--txt); font-weight: 650; }
.wiz-ktag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
.wiz-ktag .kt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.wiz-shot { margin-top: 16px; display: flex; justify-content: center; }
.wiz-shot img { display: block; width: auto; height: auto; max-width: 240px; max-height: 430px; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,0.28); background: #ededed; }
.wiz-shot-pair { display: flex; gap: 10px; margin-top: 16px; align-items: flex-start; justify-content: center; }
.wsp-item { flex: 1 1 0; min-width: 0; max-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.wsp-item img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,0.26); background: #ededed; }
.wsp-item figcaption { font-size: 12px; line-height: 1.3; color: var(--txt-2); text-align: center; text-wrap: pretty; }
.wiz-nav { position: sticky; bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding-top: 14px; margin-top: 8px; background: linear-gradient(to top, var(--bg) 60%, transparent); }
.wiz-nav .btn { margin: 0; }
.wiz-nav .btn-soft { padding-left: 22px; padding-right: 22px; }
.setup-count { margin-top: 18px; font-size: 14px; color: var(--txt-3); }
.setup-count b { color: var(--txt); font-variant-numeric: tabular-nums; }

/* ---------- error symbol rain ---------- */
.ps-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ps-rain span { position: absolute; top: -8%; font-family: var(--font-display); font-weight: 700; color: #ff5a52; opacity: 0; text-shadow: 0 0 10px rgba(255,90,82,0.35); animation-name: errFall; animation-timing-function: cubic-bezier(0.4,0,0.7,1); animation-iteration-count: 1; animation-fill-mode: both; }
@keyframes errFall {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  12% { opacity: 0.85; }
  80% { opacity: 0.7; }
  100% { transform: translateY(108vh) rotate(var(--rot, 30deg)); opacity: 0; }
}
.pay-status[data-screen="payError"] .ps-center, .pay-status .ps-actions { position: relative; z-index: 1; }
.ps-rain-ok span { color: #00E37A; text-shadow: 0 0 10px rgba(0,227,122,0.4); }
.pay-status[data-screen="paySuccess"] .ps-success-head, .pay-status[data-screen="paySuccess"] .instr { position: relative; z-index: 1; }

/* ---------- referral discount ---------- */
.disc-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; }
.disc-card .bal-ic.gift { color: #FFD66B; background: rgba(255,214,107,0.12); border-color: rgba(255,214,107,0.34); }
.disc-badge { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; background: rgba(255,214,107,0.14); border: 1px solid rgba(255,214,107,0.4); color: #FFD66B; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.ref-disc-banner { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding: 13px 14px; border-radius: 16px; text-decoration: none; color: inherit; background: linear-gradient(110deg, rgba(255,214,107,0.16), rgba(0,227,122,0.10)); border: 1px solid rgba(255,214,107,0.34); }
.ref-disc-banner .rdb-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,214,107,0.16); border: 1px solid rgba(255,214,107,0.4); color: #FFD66B; }
.ref-disc-banner .rdb-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ref-disc-banner .rdb-text b { font-size: 14.5px; }
.ref-disc-banner .rdb-text span { color: var(--txt-2); font-size: 12.5px; margin-top: 2px; }
.ref-disc-banner .rdb-chev { flex: 0 0 auto; color: var(--txt-3); }

/* welcome (2nd trial) */
.rw-badge { width: 132px; height: 132px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(255,214,107,0.22), rgba(0,227,122,0.10)); border: 1px solid rgba(255,214,107,0.4); }
.rw-pct { font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: -0.02em; background: linear-gradient(120deg, #FFD66B, #00E37A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rw-perks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.rw-perk { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); font-size: 13px; }
.rw-perk svg { color: var(--brand); }

/* demo discount slider */
.disc-demo { top: 168px; display: none; }
body[data-active="home"][data-home="trial"] .disc-demo, body[data-active="home"][data-home="trialOn"] .disc-demo { display: block; }
.disc-demo .ss-lbl b { color: var(--brand); }
.disc-demo-range { -webkit-appearance: none; appearance: none; width: 180px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--brand) var(--fill,0%), #2a2f3a var(--fill,0%)); outline: none; }
.disc-demo-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 2px solid #0b0e13; cursor: pointer; }
.disc-demo-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 2px solid #0b0e13; cursor: pointer; }
.disc-apply { display: block; margin-top: 10px; width: 100%; height: 34px; border: 0; border-radius: 10px; background: var(--brand); color: var(--brand-ink, #06250f); font-family: var(--font-body); font-weight: 700; font-size: 13px; cursor: pointer; }
.disc-apply:active { transform: scale(0.97); }

/* ---------- demo panel (grouped switchers) ---------- */
.demo-panel { position: fixed; top: 14px; left: 14px; z-index: 60; width: 216px; background: rgba(12,15,20,0.94); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.75); overflow: hidden; display: none; }
.demo-panel { display: block; }
.demo-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; background: transparent; border: 0; color: #8b93a3; font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; cursor: pointer; }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px rgba(0,227,122,0.6); }
.demo-chev { margin-left: auto; display: flex; transition: transform 0.25s var(--ease); }
.demo-panel.collapsed .demo-chev { transform: rotate(-90deg); }
.demo-panel.collapsed { width: max-content; }
.demo-body { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 14px; max-height: 74vh; overflow-y: auto; scrollbar-width: none; }
.demo-body::-webkit-scrollbar { display: none; }
.demo-panel.collapsed .demo-body { display: none; }
/* children flow statically inside the panel */
.demo-body .state-switch { position: static; top: auto; left: auto; }
.demo-body .ss-seg { flex-wrap: wrap; border-radius: 12px; padding: 5px; gap: 5px; }
.demo-body .ss-opt { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; white-space: nowrap; }
.demo-body .ss-opt.is-active { border-radius: 8px; }
.demo-body .ss-lbl { margin-bottom: 6px; }
/* all demo switchers always visible inside the grouped panel */
.demo-body #stateSwitch, .demo-body .ref-switch, .demo-body .ap-demo, .demo-body .pay-demo, .demo-body .disc-demo { display: block !important; }
@media (max-width: 900px) { .demo-panel { display: none !important; } }

/* subtle support link under the home cards */
.qa-support { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 13px 16px; border-radius: var(--r-lg); background: transparent; border: 1px solid var(--line); color: var(--txt-2); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.qa-support:active { background: var(--surface-2); }
.qa-support .qas-ic { display: inline-flex; color: var(--txt-3); flex: 0 0 auto; }
.qa-support > span:nth-child(2) { flex: 1 1 auto; text-align: left; }
.qa-support .qas-chev { color: var(--txt-3); flex: 0 0 auto; }

/* ---------- account section ---------- */
.acc-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); }
.acc-badge.ok { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.acc-badge.warn { background: rgba(245,180,50,0.12); border-color: rgba(245,180,50,0.34); color: #f5b432; }
.email-field { margin: 4px 0 14px; }
.email-field input { width: 100%; height: 50px; padding: 0 16px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--txt); font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color var(--dur) var(--ease); }
.email-field input::placeholder { color: var(--txt-3); }
.email-field input:focus { border-color: var(--brand); }
.email-field input.err { border-color: #ff5a52; }

/* reassurance banner (expired / trial expired) */
.hero-reassure { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 13px 15px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--brand-line); color: var(--txt); font-size: 13.5px; line-height: 1.35; box-shadow: var(--shadow); overflow: hidden; }
.hero-reassure.hr-in { animation: hr-drop 0.45s var(--ease-out); }
.hero-reassure.hr-out { animation: hr-lift 0.4s var(--ease) forwards; }
@keyframes hr-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes hr-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) { .hero-reassure.hr-in, .hero-reassure.hr-out { animation: none; } }
.hero-reassure[hidden] { display: none; }
.hero-reassure .hr-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.hero-reassure .hr-text { flex: 1 1 auto; text-wrap: pretty; }
@keyframes hr-pop { from { opacity: 0.001; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-reassure { animation: none; } }

/* device meter chip — segmented progress with clear dividers */
.chip.meter { gap: 9px; padding-right: 14px; }
.chip.meter .meter-segs { display: inline-flex; gap: 3px; }
.chip.meter .meter-segs i { width: 14px; height: 6px; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background 0.3s var(--ease); }
.chip.meter .meter-segs i.on { background: var(--txt); box-shadow: none; }
/* owner v2 §3: all slots occupied = a LIMIT → yellow (never green); count yellow too. */
.chip.meter.full .meter-segs i.on { background: #F5A623; box-shadow: none; }
.chip.meter.full b { color: #F5A623; }
.chip.meter b { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--txt-2); }
.chip.meter.trial .meter-segs i.on { background: var(--txt); box-shadow: none; }
.chip.meter.danger .meter-segs i { background: rgba(255,90,82,0.28); }
.chip.meter.danger .meter-segs i.on { background: #ff5a52; box-shadow: none; }
.chip.meter.muted { opacity: 0.55; }
.locked-badge.gift-badge { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line); }
.sheet-ic.gift-ic { animation: gift-bounce 0.6s var(--ease-out); }
@keyframes gift-bounce { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.chip.meter.muted .meter-segs i { background: var(--line); }
.chip.meter.muted b { color: var(--txt-3); }

/* support intro with Nox */
.sup-intro { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.sup-nox { position: relative; flex: 0 0 auto; }
.sup-nox img { width: 56px; height: 56px; border-radius: 50%; display: block; }
.sup-nox-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--brand); border: 2.5px solid var(--bg); box-shadow: 0 0 7px rgba(0,227,122,0.6); }
.sup-intro .sub b { color: var(--txt); font-weight: 600; }

/* theme chooser */
.theme-opts { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.theme-opt { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt); font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.theme-opt .to-ic { display: inline-flex; color: var(--txt-2); flex: 0 0 auto; }
.theme-opt .to-t { flex: 1 1 auto; text-align: left; }
.theme-opt .to-check { color: var(--brand); opacity: 0; transform: scale(0.6); transition: opacity var(--dur) var(--ease), transform 0.3s cubic-bezier(0.34,1.5,0.6,1); }
.theme-opt.sel { border-color: var(--brand-line); background: var(--brand-soft); }
.theme-opt.sel .to-ic { color: var(--brand); }
.theme-opt.sel .to-check { opacity: 1; transform: scale(1); }

/* gift link full (no truncation) */
.gift-link-card { padding: 8px 8px 8px 14px; margin-bottom: 14px; }
.gift-link { align-items: center; gap: 10px; }
.gift-link code { white-space: normal; word-break: break-all; line-height: 1.4; text-align: left; }
.gift-link .copy { flex: 0 0 auto; }

/* device name chips */
.dev-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.dev-chip { padding: 9px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dev-chip:active { transform: scale(0.96); }
.dev-chip.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }

/* ============================================================
   Auto-server sheet — support link
   ============================================================ */
.sheet-support {
  width: 100%; height: 46px; margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--brand); font-family: var(--font-body); font-weight: 600; font-size: 14px;
  -webkit-appearance: none; appearance: none; transition: opacity var(--dur-fast);
}
.sheet-support svg { width: 17px; height: 17px; }
.sheet-support:active { opacity: 0.6; }

/* ============================================================
   Home counter — glow-up (count-up + ring draw + end cap + halo)
   ============================================================ */
.hero-ring { width: 188px; height: 188px; }
.hero-ring::before {
  content: ""; position: absolute; inset: 16%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(0,227,122,0.20), transparent 70%);
  filter: blur(9px); transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hero-ring.warn::before { background: radial-gradient(circle, rgba(245,180,50,0.22), transparent 70%); }
.hero-ring.trial::before { background: radial-gradient(circle, rgba(0,194,255,0.22), transparent 70%); }
.hero-ring.empty::before { background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 72%); }
.hero-ring > svg { position: relative; z-index: 1; }
.hero-ring .core { z-index: 2; }
.hero-ring .core .n { font-size: 62px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.hero-ring.ok .core .n {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 13px rgba(0,227,122,0.35));
}
.hero-ring.warn .core .n { filter: drop-shadow(0 2px 13px rgba(245,180,50,0.40)); }
.hero-ring.trial .core .n { filter: drop-shadow(0 2px 13px rgba(0,194,255,0.40)); }
/* progress end-cap knob */
#heroCapWrap { transform-origin: 84px 84px; transition: transform 1s var(--ease-out), opacity 0.5s var(--ease-out); }
.hero-ring .cap { fill: var(--brand-2); filter: drop-shadow(0 0 6px rgba(0,194,255,0.85)); }
.hero-ring.warn .cap { fill: #ff8a82; filter: none; }
.hero-ring.trial .cap { fill: var(--brand-2); }
@media (prefers-reduced-motion: reduce) {
  #heroCapWrap { transition: none; }
}

/* ============================================================
   BOOT PRELOADER — Nox guardian (ported from landing)
   ============================================================ */
.nn-boot {
  position: absolute; inset: 0; z-index: 17; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: var(--bg);
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.nn-boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.nn-boot[hidden] { display: none; }
.nn-boot .nn-boot-bg { z-index: 0; }
.nn-boot::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(125% 80% at 50% 42%, rgba(10,12,16,0.5) 0%, rgba(10,12,16,0.1) 46%, transparent 66%),
    linear-gradient(180deg, rgba(10,12,16,0.4) 0%, transparent 26%, transparent 60%, rgba(7,9,13,0.82) 100%);
}
[data-theme="light"] .nn-boot::after {
  background:
    radial-gradient(125% 80% at 50% 42%, rgba(238,241,245,0.5) 0%, transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(238,241,245,0.7) 100%);
}
.pre-stage { position: relative; z-index: 1; display: grid; place-items: center; width: 248px; height: 318px; }
.pre-figure { position: relative; z-index: 2; width: 100%; height: 100%; animation: pre-float 3.4s var(--ease) infinite; }
.pre-nox { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.pre-scan {
  position: absolute; left: 6%; right: 6%; top: 0; height: 30%; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(0,227,122,0.45) 48%, rgba(0,194,255,0.45) 52%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 62%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 62%, transparent 100%);
  filter: blur(10px); animation: pre-scan 3.6s var(--ease) infinite;
}
.pre-glow {
  position: absolute; z-index: 1; top: 5%; left: 50%; width: 58%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(0,194,255,0.5), rgba(0,194,255,0) 68%);
  filter: blur(6px); animation: pre-glow 3.4s var(--ease) infinite;
}
.pre-sonar { position: absolute; z-index: 0; bottom: 3%; left: 50%; transform: translateX(-50%); width: 200px; height: 64px; }
.pre-sonar span { position: absolute; inset: 0; border: 1.5px solid rgba(0,227,122,0.55); border-radius: 50%; opacity: 0; animation: pre-sonar 2.8s var(--ease-out) infinite; }
.pre-sonar span:nth-child(2) { animation-delay: 0.93s; border-color: rgba(0,194,255,0.5); }
.pre-sonar span:nth-child(3) { animation-delay: 1.86s; }
.pre-shadow { position: absolute; z-index: 0; bottom: 2%; left: 50%; transform: translateX(-50%); width: 132px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 70%); filter: blur(5px); animation: pre-shadow 3.4s var(--ease) infinite; }
.pre-lockup {
  position: absolute; z-index: 5; top: 0; left: 50%; transform: translate(-50%, -116%); width: max-content;
  display: inline-flex; align-items: center; gap: 9px; animation: pre-float-lockup 3.4s var(--ease) infinite;
}
.pre-logomark { flex: none; width: 24px; height: auto; filter: drop-shadow(0 0 9px rgba(0,194,255,0.7)); }
.pre-logomark path { fill: #00E37A; animation: pre-logohue 2.6s var(--ease) infinite; }
.pre-logoword {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1;
  background: linear-gradient(100deg, #00E37A 0%, #00C2FF 36%, #B9F0FF 50%, #00C2FF 64%, #00E37A 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: pre-flow 2.6s linear infinite;
}
.pre-bracket { flex: none; width: 6px; height: 19px; border: 2px solid rgba(0,194,255,0.5); }
.pre-bracket--l { border-right: 0; }
.pre-bracket--r { border-left: 0; }
.pre-meta { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.pre-bar { width: 188px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pre-bar i { display: block; height: 100%; width: 40%; border-radius: 2px; background: var(--grad); animation: load-sweep 1.1s var(--ease) infinite; }
.pre-word { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 500; font-size: 13.5px; color: var(--txt-2); text-align: center; padding-inline: 20px; }
.pre-word__lock { width: 15px; height: 15px; color: var(--brand); flex: none; }
.pre-dots { display: inline-flex; gap: 3px; }
.pre-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.3; animation: pre-dots 1.4s var(--ease) infinite; }
.pre-dots i:nth-child(2) { animation-delay: 0.2s; }
.pre-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pre-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pre-float-lockup { 0%,100% { transform: translate(-50%, -116%); } 50% { transform: translate(-50%, calc(-116% - 9px)); } }
@keyframes pre-glow { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes pre-shadow { 0%,100% { opacity: 0.8; transform: translateX(-50%) scaleX(1); } 50% { opacity: 0.5; transform: translateX(-50%) scaleX(0.86); } }
@keyframes pre-scan { 0% { top: 6%; opacity: 0; } 18% { opacity: 1; } 50% { opacity: 1; } 64% { top: 62%; opacity: 0; } 100% { top: 62%; opacity: 0; } }
@keyframes pre-sonar { 0% { opacity: 0; transform: scale(0.25); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes pre-logohue { 0%,100% { fill: #00E37A; } 50% { fill: #00C2FF; } }
@keyframes pre-flow { 0% { background-position: 0 0; } 100% { background-position: 220% 0; } }
@keyframes load-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
@keyframes pre-dots { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pre-figure, .pre-glow, .pre-scan, .pre-sonar span, .pre-shadow, .pre-bar i, .pre-dots i,
  .pre-lockup, .pre-logomark path, .pre-logoword { animation: none; }
  .pre-scan { display: none; }
  .nn-boot { transition: opacity 0.2s, visibility 0.2s; }
}

/* ===== I3 connect instructions — 3-step list ===== */
.isteps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.istep{display:flex;gap:13px;align-items:flex-start}
.inum{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:var(--brand-ink);background:var(--grad);box-shadow:0 6px 16px -8px rgba(0,227,122,.7);margin-top:1px}
.istep.muted .inum{background:var(--surface-press);color:var(--txt-3);box-shadow:none}
.ibody{flex:1 1 auto;min-width:0}
.ititle{font-weight:700;font-size:15.5px;letter-spacing:-.005em}
.isub{color:var(--txt-2);font-size:13.5px;line-height:1.5;margin:4px 0 0;text-wrap:pretty}
.isub b{color:var(--txt);font-weight:650}
.iact{margin-top:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.iact .btn{padding:12px 14px;font-size:14px}
.or-sep{align-self:center;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--txt-3);text-transform:uppercase;margin:-1px 0}
.altlink{display:flex;align-items:flex-start;gap:7px;color:var(--txt-3);font-size:12.5px;font-weight:400;
  background:none;border:none;cursor:pointer;padding:0;text-align:left;line-height:1.4;white-space:normal;
  text-decoration:none}
.altlink:hover{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}
.pwr-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand);vertical-align:middle;margin:0 2px}
.pwr-ic svg{width:12px;height:12px}
.inote{display:flex;gap:7px;align-items:flex-start;margin-top:9px;font-size:12px;line-height:1.45;color:var(--txt-3)}
.inote svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;color:var(--txt-3)}
.inote b{color:var(--txt-2);font-weight:650}

/* ===== I3 success screen (reward) ===== */
.reward{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:8px}
.reward .orb{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--brand-ink);background:var(--grad-signal-h);box-shadow:0 0 0 8px var(--brand-soft),0 16px 40px -10px rgba(0,227,122,.7);
  animation:orb-pop .5s var(--ease-out) both}
.reward .orb path{stroke-dasharray:28;stroke-dashoffset:28;animation:check-draw .42s .26s var(--ease-out) forwards}
@keyframes orb-pop{0%{transform:scale(0);opacity:0}62%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes check-draw{to{stroke-dashoffset:0}}
.upsell{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:4px}
.promo{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;padding:14px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--line)}
.promo-ic{flex:0 0 auto;width:26px;height:26px;color:var(--brand)}
.promo-ic svg{width:26px;height:26px}
.promo-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.promo-tx b{font-size:14.5px;color:var(--txt)}
.promo-tx span{font-size:12.5px;line-height:1.45;color:var(--txt-2)}
.pulse-cta{box-shadow:0 0 0 1px var(--brand-line),0 14px 34px -12px rgba(0,227,122,.75);
  animation:pulse-cta 1.7s var(--ease) infinite;will-change:transform}
@keyframes pulse-cta{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.cabinet-link{align-self:stretch;min-height:46px;margin-top:8px;display:flex;align-items:center;justify-content:center;
  gap:6px;background:transparent;border:1px solid var(--line);border-radius:13px;color:var(--txt-3);
  font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:.15s var(--ease)}
.cabinet-link:hover{color:var(--txt-2);border-color:var(--line-strong);background:var(--surface-2)}
.cabinet-link:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){
  .reward .orb,.reward .orb path{animation:none}
  .reward .orb path{stroke-dashoffset:0}
  .pulse-cta{animation:none}
}
/* ===== F7: sticky checkout CTA bar (О6 ADHD-fix) ===== */
/* Mirrors .wiz-nav: sticky-bottom, gradient fade, always in viewport regardless of method-list scroll. */
.checkout-cta-bar{position:sticky;bottom:0;padding-top:10px;margin-top:10px;
  background:linear-gradient(to top,var(--bg) 60%,transparent);z-index:2}
.checkout-cta-bar .btn{margin:0}
/* Pick hint: micro-copy above the CTA, appears after first method tap (О6). */
.checkout-pick-hint{margin:0 0 8px;font-size:13px;text-align:center;
  color:var(--txt-2);font-weight:500;letter-spacing:.01em}
/* ===== A4: unified checkout redesign (summary top, method tiles, SbpMark) ===== */
/* Summary card — prominent price block at the top of checkout (trial + regular modes). */
.checkout-summary{display:flex;flex-direction:column;gap:4px;padding:14px 16px;
  margin-bottom:16px;background:var(--surface-2);border:1.5px solid var(--brand-line);
  border-radius:16px}
.checkout-summary__today{font-size:22px;font-weight:700;color:var(--txt);
  font-family:var(--font-display);letter-spacing:-.01em}
.checkout-summary__then{font-size:13px;color:var(--txt-2);margin-top:1px;line-height:1.4}
.checkout-summary__label{font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brand);margin-bottom:4px}
/* Method tile selected: swap chevron arrow for a filled checkmark (visual confirmation). */
.pay-method.selected{border-color:var(--brand);background:var(--brand-soft)}
.pay-method.selected .pm-arrow-chev{display:none}
.pay-method.selected .pm-arrow-check{display:flex}
.pm-arrow-chev{display:flex;flex:0 0 auto;color:var(--txt-3)}
.pm-arrow-check{display:none;flex:0 0 auto;color:var(--brand)}
/* Autopay benefit line — short caption under the autopay section header (А4). */
.checkout-autopay-benefit{font-size:12px;color:var(--txt-3);margin-top:3px;line-height:1.35}
/* Section label above method tiles — slightly bolder than np-label. */
.checkout-method-label{font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt-3);margin:0 0 10px}