:root {
  --bg:           #000000;
  --surface:      #111115;
  --surface2:     #1c1c21;
  --surface3:     #28282e;
  --accent:       #0a84ff;
  --accent-dim:   rgba(10,132,255,.15);
  --green:        #30d158;
  --yellow:       #ffd60a;
  --red:          #ff453a;
  --danger:       #ff453a;
  --warning:      #ffd60a;
  --text:         #ffffff;
  --text-dim:     #aeaeb2;
  --text-muted:   #636366;
  --radius:       16px;
  --radius-sm:    12px;
  --radius-xs:    8px;
  --nav-height:   56px;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --safe-top:     env(safe-area-inset-top, 0px);

  /* glass tokens */
  --glass-bg:      rgba(12, 12, 17, 0.75);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-shine:   rgba(255, 255, 255, 0.11);
  --glass-blur:    blur(40px) saturate(2.0) brightness(1.07);
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: 16px;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* extra bottom padding so content doesn't hide behind floating pill */
  padding: 16px 16px calc(62px + var(--safe-bottom) + 28px);
  -webkit-overflow-scrolling: touch;
}
.tab-content.active { display: block; }

/* ── Bottom Nav — Liquid Glass Pill ─────────────────────────────────── */

#bottom-nav {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 64px;
  padding: 8px 10px;
  border-radius: 32px;

  /* layered glass */
  background:
    linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0.06) 100%),
    rgba(8, 8, 12, 0.82);

  backdrop-filter: blur(52px) saturate(2.2) brightness(1.10);
  -webkit-backdrop-filter: blur(52px) saturate(2.2) brightness(1.10);

  border: 1px solid rgba(255,255,255,0.11);
  box-shadow:
    0 14px 44px rgba(0,0,0,0.50),
    0 4px 16px  rgba(0,0,0,0.30),
    0 1.5px 0   rgba(255,255,255,0.15) inset,
    0 -1px 0    rgba(0,0,0,0.30) inset;

  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 100;
  overflow: visible;
}

/* refraction line on top edge */
#bottom-nav::before {
  content: '';
  position: absolute;
  top: -0.5px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.32) 30%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0.32) 70%,
    transparent 100%);
  pointer-events: none;
  border-radius: 1px;
}

/* ambient glow under pill — tints with accent colour */
#bottom-nav::after {
  content: '';
  position: absolute;
  bottom: -20px; left: 20%; right: 20%;
  height: 20px;
  background: radial-gradient(ellipse at center,
    rgba(10,132,255,0.18) 0%, transparent 72%);
  pointer-events: none;
  filter: blur(8px);
}

/* ── sliding pill indicator ── */
.nav-pill {
  position: absolute;
  top: 8px;
  height: 48px;
  border-radius: 24px;
  overflow: hidden;

  background: linear-gradient(
    155deg,
    rgba(255,255,255,0.17) 0%,
    rgba(255,255,255,0.07) 55%,
    rgba(0,0,0,0.05) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.13) inset,
    0 2px 10px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.10) inset;

  transition:
    left  0.42s cubic-bezier(0.34, 1.50, 0.64, 1),
    width 0.42s cubic-bezier(0.34, 1.50, 0.64, 1);
  pointer-events: none;
  z-index: 0;
  will-change: left, width;
}
/* inner top shimmer on pill */
.nav-pill::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.40) 40%,
    rgba(255,255,255,0.40) 60%,
    transparent);
}

/* ── nav buttons ── */
.nav-btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  background: none;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 6px 0;
  border-radius: 24px;
  transition: color 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.nav-btn.active { color: var(--accent); }

/* bounce when re-tapping the active tab */
@keyframes nav-bounce {
  0%   { transform: scale(1)    translateY(0); }
  25%  { transform: scale(1.28) translateY(-5px); }
  52%  { transform: scale(0.92) translateY(2px); }
  76%  { transform: scale(1.09) translateY(-2px); }
  100% { transform: scale(1)    translateY(0); }
}
.nav-btn.nav-bounce {
  animation: nav-bounce 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nav-icon {
  width: 23px; height: 23px;
  fill: currentColor;
  transition: filter 0.28s ease;
}
/* soft glow on active icon */
.nav-btn.active .nav-icon {
  filter: drop-shadow(0 0 5px rgba(10,132,255,0.60));
}

.nav-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2px;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 14px 20px;
  width: 100%;
  margin-top: 8px;
  transition: opacity .15s, transform .1s;
  -webkit-appearance: none;
}
.btn:active { opacity: .8; transform: scale(.98); }

.btn-primary   { background: var(--accent);   color: #fff; }
.btn-secondary { background: var(--surface2); color: var(--text); }
.btn-danger    { background: rgba(255,69,58,.15); color: var(--red); }
.btn-green     { background: rgba(48,209,88,.15); color: var(--green); }
.btn-sm {
  padding: 10px 14px;
  font-size: 14px;
  border-radius: var(--radius-xs);
  margin-top: 6px;
}

/* ── Gauge (Home) ──────────────────────────────────────────────────────── */

.gauge-wrap {
  position: relative;
  width: 220px; height: 220px;
  margin: 8px auto 20px;
}
.gauge-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.gauge-days  { font-size: 56px; font-weight: 700; line-height: 1; }
.gauge-label { font-size: 14px; color: var(--text-dim); margin-top: 4px; }

/* ── Chips ─────────────────────────────────────────────────────────────── */

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px;
  flex: 1;
  justify-content: center;
}
.chip.green { background: rgba(48,209,88,.12); color: var(--green); }
.chip.blue  { background: var(--accent-dim);   color: var(--accent); }
.chip.yellow{ background: rgba(255,214,10,.12); color: var(--yellow); }

/* ── Device cards ──────────────────────────────────────────────────────── */

.device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--surface2);
  cursor: pointer;
}
.device-row:last-child { border-bottom: none; padding-bottom: 0; }
.device-row:first-child { padding-top: 0; }

.device-icon {
  width: 40px; height: 40px;
  background: var(--accent-dim);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.device-info { flex: 1; min-width: 0; }
.device-name { font-weight: 600; font-size: 15px; }
.device-sub  { font-size: 12px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device-chevron { color: var(--text-muted); font-size: 18px; }

/* ── Key block ─────────────────────────────────────────────────────────── */

.key-block {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 11px;
  line-height: 1.5;
  word-break: break-all;
  color: var(--accent);
  cursor: pointer;
  position: relative;
  margin: 4px 0;
  border: 1px solid rgba(10,132,255,.2);
}
.key-block::after {
  content: "Нажми чтобы скопировать";
  position: absolute;
  bottom: -18px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  font-family: -apple-system, sans-serif;
}

/* ── Plan cards ────────────────────────────────────────────────────────── */

.plan-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.plan-card.selected { border-color: var(--accent); background: var(--accent-dim); }
.plan-card:active { transform: scale(.99); }

.plan-name   { font-size: 18px; font-weight: 700; }
.plan-price  { font-size: 32px; font-weight: 800; margin: 4px 0; }
.plan-price span { font-size: 16px; font-weight: 500; color: var(--text-dim); }
.plan-old    { font-size: 14px; color: var(--text-muted); text-decoration: line-through; }
.plan-badge  { display: inline-block; background: var(--green); color: #000; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; margin-left: 8px; }

/* ── Input ─────────────────────────────────────────────────────────────── */

.input-wrap {
  position: relative;
  margin-bottom: 8px;
}
.input-field {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--surface3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  padding: 14px 16px;
  outline: none;
  -webkit-appearance: none;
  transition: border-color .15s;
}
.input-field:focus { border-color: var(--accent); }
.input-field::placeholder { color: var(--text-muted); }
.input-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: block;
}

/* ── Bottom sheet ──────────────────────────────────────────────────────── */

.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  backdrop-filter: blur(4px);
}
.bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  z-index: 201;
  padding: 12px 16px calc(var(--safe-bottom) + 16px);
  max-height: 85vh;
  overflow-y: auto;
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.sheet-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
  text-align: center;
}
.hidden { display: none !important; }

/* ── SNI grid ──────────────────────────────────────────────────────────── */

.sni-section-title {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 12px 0 6px;
}
.sni-option {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface2);
  cursor: pointer;
  gap: 12px;
}
.sni-option:last-child { border-bottom: none; }
.sni-option:active { opacity: .7; }
.sni-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--surface3);
  flex-shrink: 0;
}
.sni-dot.active { background: var(--accent); }
.sni-name { flex: 1; font-size: 15px; }
.sni-domain { font-size: 12px; color: var(--text-muted); }

/* ── Rows (profile) ────────────────────────────────────────────────────── */

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--surface2);
}
.row:last-child { border-bottom: none; }
.row-label { font-size: 15px; }
.row-value { font-size: 15px; color: var(--text-dim); font-weight: 500; }
.row-value.accent { color: var(--accent); }

/* ── Payment history ───────────────────────────────────────────────────── */

.payment-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--surface2);
}
.payment-row:last-child { border-bottom: none; }
.payment-icon {
  width: 36px; height: 36px;
  background: var(--accent-dim);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.payment-plan { font-weight: 600; font-size: 14px; }
.payment-date { font-size: 12px; color: var(--text-dim); }
.payment-amount { font-weight: 700; font-size: 15px; color: var(--green); }

/* ── Spinner ───────────────────────────────────────────────────────────── */

.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--surface2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 24px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ─────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface3);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  z-index: 300;
  white-space: nowrap;
  animation: toastIn .2s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Section header ────────────────────────────────────────────────────── */

.section-header {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
  margin-top: 8px;
}

/* ── Empty state ───────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.empty-text { font-size: 14px; line-height: 1.5; }

/* ── Loading ───────────────────────────────────────────────────────────── */

.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  color: var(--text-dim);
  font-size: 14px;
}

/* ── Divider ───────────────────────────────────────────────────────────── */

.divider {
  height: 1px;
  background: var(--surface2);
  margin: 8px 0;
}

/* ── Inactive badge ────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.badge-green  { background: rgba(48,209,88,.15); color: var(--green); }
.badge-red    { background: rgba(255,69,58,.15);  color: var(--red); }
.badge-yellow { background: rgba(255,214,10,.15); color: var(--yellow); }

/* ── Promo input row ───────────────────────────────────────────────────── */

.promo-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.promo-row .input-field { flex: 1; text-transform: uppercase; letter-spacing: 1px; }
.promo-apply-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 16px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Step indicator ────────────────────────────────────────────────────── */

.step-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 16px;
}
.step-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--surface3);
  transition: background .2s, width .2s;
}
.step-dot.active { background: var(--accent); width: 18px; border-radius: 3px; }

/* ══════════════════════════════════════════════════════════════
   EXTENDED COMPONENTS
   ══════════════════════════════════════════════════════════════ */

/* ── Standalone button classes (usable without .btn base) ── */
.btn-primary, .btn-secondary, .btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 14px 20px;
  width: 100%;
  transition: opacity .15s, transform .1s;
  -webkit-appearance: none;
}
.btn-primary  { background: var(--accent);   color: #fff; }
.btn-secondary{ background: var(--surface2); color: var(--text); }
.btn-danger   { background: rgba(255,69,58,.15); color: var(--red); }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { opacity:.8; transform:scale(.98); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity:.5; cursor:not-allowed; }

/* ── Tab header ── */
.tab-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-top: 4px;
}
.tab-title {
  font-size: 24px;
  font-weight: 800;
  flex: 1;
}
.username-chip, .count-chip {
  background: var(--surface2);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}

/* ── Semi-circle gauge ── */
.semi-gauge-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 8px;
}
.semi-gauge-svg {
  width: 100%;
  display: block;
  overflow: visible;
}
.semi-gauge-bg {
  fill: none;
  stroke: var(--surface2);
  stroke-width: 11;
  stroke-linecap: round;
}
.semi-gauge-fill {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  transition: stroke-dasharray 0.9s cubic-bezier(0.34, 1.1, 0.64, 1),
              stroke 0.4s ease;
}
.semi-gauge-center {
  position: absolute;
  /* Arc top ≈ 13% of viewBox height, opening ≈ 87%.
     Visual center of dome ≈ 50%, nudge slightly lower → 56% */
  top: 56%;
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.semi-gauge-pct {
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
}
.semi-gauge-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .1px;
}
.semi-gauge-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ── Gauge card (legacy wrapper, keep for layout) ── */
.gauge-card {
  margin-bottom: 16px;
}

/* ── Info rows ── */
.info-row-group {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%),
    rgba(44,44,50,0.70);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--surface2);
}
.info-row:last-child { border-bottom: none; }
.info-row-label { font-size: 15px; color: var(--text-dim); }
.info-row-value { font-size: 15px; font-weight: 600; }

/* ── Action grid ── */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.action-tile {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 22px;        /* softer rounding */
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 8px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity .15s;

  /* soft glass tile */
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%),
    rgba(44, 44, 50, 0.72);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.07) inset;
}
/* top shimmer */
.action-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.18) 50%, transparent);
  pointer-events: none;
}
.action-tile svg {
  width: 26px; height: 26px;
  fill: currentColor;
  opacity: 0.75;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.30));
  transition: opacity .2s, filter .2s;
}
.action-tile:active {
  transform: scale(0.93);
  opacity: .85;
}

/* accent variant — blue tint */
.action-tile.accent {
  background:
    linear-gradient(145deg, rgba(10,132,255,0.18) 0%, rgba(10,132,255,0.06) 100%),
    rgba(10,30,60,0.50);
  border-color: rgba(10,132,255,0.22);
  color: var(--accent);
  box-shadow:
    0 4px 20px rgba(10,132,255,0.18),
    0 1px 0 rgba(10,132,255,0.15) inset;
}
.action-tile.accent svg { opacity: 0.9; }
.action-tile.accent::before {
  background: linear-gradient(90deg,
    transparent, rgba(10,132,255,0.25) 50%, transparent);
}

/* ── Empty hint ── */
.empty-hint {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

/* ── Error card ── */
.error-card {
  background: rgba(255,69,58,.08);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  color: var(--text);
}
.error-card p { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.error-detail { font-size: 13px; color: var(--text-muted); }

/* ── Card list (devices) ── */
.card-list {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0 16px;
  margin-bottom: 16px;
}
.card-list .device-row:first-child { padding-top: 14px; }
.card-list .device-row:last-child + .key-block { border-radius: 0 0 var(--radius) var(--radius); }

/* ── Device row (updated) ── */
.device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface2);
}
.device-row:last-child { border-bottom: none; }
.device-info { flex: 1; min-width: 0; }
.device-name { font-size: 15px; font-weight: 600; }
.device-sni  { font-size: 12px; color: var(--text-dim); margin-top: 1px; }

.device-actions { display: flex; gap: 2px; }

/* ── Icon buttons ── */
.icon-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 7px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
.icon-btn:active { background: var(--surface2); }
.icon-btn.danger { color: var(--red); }

/* ── Key block (device inline) ── */
.key-block {
  background: var(--surface2);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 12px 14px;
  margin: -4px 0 4px;
  border-top: 1px solid var(--surface3);
}
.key-text {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
  word-break: break-all;
  display: block;
  line-height: 1.5;
  margin-bottom: 8px;
}
.btn-copy-key {
  background: var(--accent-dim);
  color: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-copy-key:active { opacity: .8; }

/* ── Plan list ── */
.plan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.plan-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.plan-card.featured { border-color: var(--surface3); }
.plan-card.selected { border-color: var(--accent) !important; background: var(--accent-dim); }
.plan-card:active { transform: scale(.99); }
.plan-badge {
  display: inline-block;
  background: var(--green);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}
/* ─── Achievements accordion ───────────────────────────────────────────── */
.ach-accordion {
  margin-top: 24px;
  border-radius: 16px;
  background: var(--surface, rgba(28,28,30,0.72));
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.ach-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  gap: 12px;
  transition: background .15s ease;
}
.ach-summary::-webkit-details-marker { display: none; }
.ach-summary:active { background: rgba(255,255,255,0.04); }

.ach-summary-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.ach-summary-icon { font-size: 20px; flex-shrink: 0; }
.ach-summary-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #fff);
}
.ach-chevron {
  flex-shrink: 0;
  color: var(--text-dim, #8e8e93);
  transition: transform .22s ease;
}
.ach-accordion[open] .ach-chevron { transform: rotate(180deg); }
.ach-accordion[open] .ach-summary { border-bottom: 1px solid rgba(255,255,255,0.06); }
.ach-accordion .ach-list {
  padding: 12px;
  animation: ach-slide-down .26s ease;
}
@keyframes ach-slide-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="light"] .ach-accordion {
  background: #fff;
  border-color: #e5e5ea;
}
html[data-theme="light"] .ach-summary-title { color: #1c1c1e; }
html[data-theme="light"] .ach-chevron { color: #6e6e73; }
html[data-theme="light"] .ach-accordion[open] .ach-summary { border-bottom-color: #e5e5ea; }

/* ─── Legal / terms link row ───────────────────────────────────────────── */
.legal-link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-top: 10px;
  background: var(--surface, rgba(28,28,30,0.72));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  color: var(--text, #fff);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.legal-link-row:active { transform: scale(.98); background: rgba(255,255,255,0.04); }
.legal-link-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent, #0a84ff);
  background: rgba(10,132,255,0.12);
  border-radius: 8px;
}
.legal-link-icon svg { width: 18px; height: 18px; }
.legal-link-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}
.legal-link-chevron {
  width: 18px; height: 18px;
  fill: var(--text-dim, #8e8e93);
  flex-shrink: 0;
}
html[data-theme="light"] .legal-link-row {
  background: #fff;
  border-color: #e5e5ea;
  color: #1c1c1e;
}

/* ─── Live support (Telegram) card ─────────────────────────────────────── */
.live-support-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(55,174,226,0.12) 0%, rgba(30,150,200,0.06) 100%);
  border: 1px solid rgba(55,174,226,0.25);
  border-radius: 16px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.live-support-card:active { transform: scale(.98); }

.live-support-avatar {
  position: relative;
  flex-shrink: 0;
  width: 44px; height: 44px;
}
.live-support-avatar svg { width: 100%; height: 100%; border-radius: 50%; }
.live-support-online {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #30d158;
  border: 2px solid var(--bg, #000);
  box-shadow: 0 0 0 0 rgba(48,209,88,0.6);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(48,209,88,0); }
}

.live-support-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-support-title-row { display: flex; align-items: center; gap: 8px; }
.live-support-title { font-size: 15px; font-weight: 700; color: var(--text, #fff); }
.live-support-badge {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #30d158, #28b64a);
  letter-spacing: 0.03em;
}
.live-support-sub { font-size: 13px; color: var(--text-dim, #8e8e93); }
.live-support-chevron {
  width: 20px; height: 20px;
  fill: var(--text-dim, #8e8e93);
  flex-shrink: 0;
}
html[data-theme="light"] .live-support-card {
  background: linear-gradient(135deg, rgba(55,174,226,0.10) 0%, rgba(30,150,200,0.04) 100%);
  border-color: rgba(55,174,226,0.35);
}
html[data-theme="light"] .live-support-title { color: #1c1c1e; }
html[data-theme="light"] .live-support-online { border-color: #fff; }

/* ─── Collapsible help accordion ───────────────────────────────────────── */
.help-accordion {
  margin: 18px 16px 0;
  border-radius: 14px;
  background: var(--surface, rgba(28,28,30,0.72));
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.help-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #fff);
  gap: 12px;
  transition: background 0.15s ease;
}
.help-summary::-webkit-details-marker { display: none; }
.help-summary:active { background: rgba(255,255,255,0.04); }

.help-summary-left {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.help-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.help-summary-title {
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.help-chevron {
  flex-shrink: 0;
  color: var(--text-secondary, #8e8e93);
  transition: transform 0.22s ease;
}
.help-accordion[open] .help-chevron { transform: rotate(180deg); }

.help-content {
  padding: 4px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  animation: help-slide-down 0.26s ease;
}
@keyframes help-slide-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.help-steps {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.help-step-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a84ff, #64d2ff);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
}
.help-step-body {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text, #fff);
}
.help-step-body b { font-weight: 600; }
.help-inline-icon {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  background: rgba(120,120,128,0.22);
  border-radius: 5px;
  font-size: 12px;
}
.help-inline-svg {
  padding: 2px 5px;
  vertical-align: -4px;
  line-height: 0;
}
.help-inline-svg svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.help-inline-mirror svg {
  transform: scaleX(-1);
}

/* Light theme overrides */
html[data-theme="light"] .help-accordion {
  background: #fff;
  border-color: #e5e5ea;
}
html[data-theme="light"] .help-summary { color: #1c1c1e; }
html[data-theme="light"] .help-content { border-top-color: #e5e5ea; }
html[data-theme="light"] .help-step-body { color: #1c1c1e; }
html[data-theme="light"] .help-inline-icon { background: #f2f2f7; }
html[data-theme="light"] .help-chevron { color: #6e6e73; }

.plan-hit-ribbon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff453a 0%, #ff9f0a 100%);
  box-shadow: 0 4px 12px rgba(255, 69, 58, 0.4), 0 0 0 1px rgba(255, 159, 10, 0.3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  animation: hit-pulse 1.8s ease-in-out infinite;
  z-index: 2;
}
@keyframes hit-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(255,69,58,0.4), 0 0 0 1px rgba(255,159,10,0.3); }
  50%      { transform: scale(1.06); box-shadow: 0 6px 18px rgba(255,69,58,0.55), 0 0 0 1px rgba(255,159,10,0.5); }
}
.plan-name  { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.plan-price { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.plan-note  { font-size: 13px; color: var(--text-dim); }

/* ── Text input ── */
.text-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--surface3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  padding: 13px 14px;
  outline: none;
  -webkit-appearance: none;
  transition: border-color .15s;
}
.text-input:focus { border-color: var(--accent); }
.text-input::placeholder { color: var(--text-muted); }
.input-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: block;
}

/* ── Promo row ── */
.promo-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.promo-input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.promo-btn {
  flex-shrink: 0;
  padding: 13px 16px;
  width: auto;
  font-size: 15px;
  border-radius: var(--radius-sm);
}
.promo-status {
  font-size: 13px;
  padding: 6px 2px;
  margin-bottom: 8px;
  border-radius: 6px;
}
.promo-status.success { color: var(--green); }
.promo-status.error   { color: var(--red); }

/* ── Pay status ── */
.pay-status {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.pay-status.success { background: rgba(48,209,88,.1); color: var(--green); }
.pay-status.error   { background: rgba(255,69,58,.1); color: var(--red); }

/* ── Small spinner ── */
.spinner-sm {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--surface3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

/* ── Toast (update) ── */
.toast {
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* ── Bottom sheet (update) ── */
.sheet-overlay {
  opacity: 0;
  transition: opacity .28s;
}
.sheet-overlay.open { opacity: 1; }
.bottom-sheet {
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.bottom-sheet.open { transform: translateY(0); }

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--surface2);
  margin-bottom: 4px;
}
.sheet-header h2 { font-size: 17px; font-weight: 700; }
.sheet-close {
  background: var(--surface2);
  border: none;
  color: var(--text-dim);
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sheet-body { padding: 12px 0; }
.sheet-text { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-bottom: 16px; }

/* ── SNI list (sheet) ── */
.sni-list {
  list-style: none;
  padding: 0;
}
.sni-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--surface2);
  cursor: pointer;
  transition: opacity .15s;
}
.sni-item:last-child { border-bottom: none; }
.sni-item:active, .sni-item.loading { opacity: .6; }
.sni-name { font-size: 15px; font-weight: 500; }
.sni-desc { font-size: 12px; color: var(--text-muted); }

/* ── Key card (in sheet) ── */
.key-card {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 14px;
  border: 1px solid rgba(10,132,255,.2);
}
.key-text-lg {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
  word-break: break-all;
  display: block;
  line-height: 1.6;
}

/* ── Profile card ── */
.profile-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%),
    rgba(44,44,50,0.70);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.07) inset;
}
.profile-avatar {
  width: 52px; height: 52px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.profile-info { display: flex; flex-direction: column; gap: 3px; }
.profile-name { font-size: 17px; font-weight: 700; }
.profile-id   { font-size: 13px; color: var(--text-muted); }
.copyable-id {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
}
.copyable-id::after {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  background: currentColor;
  opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.copyable-id:active { color: var(--accent); }

/* ── Section title ── */
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}

/* ── Ref card ── */
.ref-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%),
    rgba(44,44,50,0.70);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 8px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.ref-desc { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
.ref-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.ref-stat {
  flex: 1;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.ref-stat-val   { display: block; font-size: 26px; font-weight: 800; }
.ref-stat-label { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ref-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 2px;
}
.ref-link-text {
  flex: 1;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
  word-break: break-all;
  line-height: 1.4;
}

/* ── Celebrate overlay ── */
.celebrate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 16, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  animation: celebrate-fade-in 260ms ease forwards;
}
.celebrate-overlay.celebrate-leaving {
  animation: celebrate-fade-out 260ms ease forwards;
}
@keyframes celebrate-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes celebrate-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.celebrate-confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.celebrate-confetti {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(var(--rot-start, 0deg));
  animation-name: celebrate-fall;
  animation-timing-function: cubic-bezier(.22, .68, .37, 1);
  animation-fill-mode: forwards;
}
@keyframes celebrate-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -40px, 0) rotate(var(--rot-start, 0deg));
  }
  10% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--x-drift, 0px), 110vh, 0) rotate(var(--rot-end, 360deg));
  }
}

.celebrate-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  text-align: center;
  pointer-events: none;
}
.celebrate-emoji {
  font-size: 96px;
  line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(10, 132, 255, 0.35));
  animation: celebrate-bounce 900ms cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes celebrate-bounce {
  0%   { transform: scale(0)      rotate(-18deg); opacity: 0; }
  45%  { transform: scale(1.25)   rotate(8deg);   opacity: 1; }
  65%  { transform: scale(0.92)   rotate(-4deg); }
  85%  { transform: scale(1.04)   rotate(2deg); }
  100% { transform: scale(1)      rotate(0deg);   opacity: 1; }
}
.celebrate-title {
  margin-top: 14px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  animation: celebrate-rise 600ms 300ms cubic-bezier(.22, .68, .37, 1) both;
}
.celebrate-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
  max-width: 320px;
  animation: celebrate-rise 600ms 420ms cubic-bezier(.22, .68, .37, 1) both;
}
@keyframes celebrate-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Payment summary ── */
.pay-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 12px;
  margin-bottom: 12px;
}
.pay-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.pay-summary-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.pay-summary-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Payment list ── */
.pay-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.pay-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.pay-card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border-radius: 12px;
  font-size: 20px;
  line-height: 1;
}
.pay-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pay-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pay-card-top .pay-plan {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.pay-card-top .pay-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.pay-card-mid {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.pay-card-mid .pay-dot { opacity: 0.5; }
.pay-card-bot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.pay-card-bot .pay-chip,
.pay-card-bot .pay-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  margin: 0;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  background: transparent;
  box-sizing: border-box;
  vertical-align: middle;
}
.pay-card-bot .pay-chip {
  color: var(--accent);
  background: rgba(10, 132, 255, 0.14);
}
.pay-card-bot .pay-status-paid {
  color: #30d158;
  background: rgba(48, 209, 88, 0.14);
}
.pay-card-bot .pay-status-free {
  color: #ff9f0a;
  background: rgba(255, 159, 10, 0.14);
}

/* ── Guide tab ── */
.guide-intro {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 20px;
}
.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.platform-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%),
    rgba(28, 28, 33, 0.80);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 18px 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.22s cubic-bezier(0.34,1.5,0.64,1), border-color .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.07) inset;
  position: relative;
  overflow: hidden;
}
.platform-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 50%, transparent);
  pointer-events: none;
}
.platform-card:active { transform: scale(0.95); }
.platform-card.active  { border-color: var(--accent); background:
    linear-gradient(145deg, rgba(10,132,255,0.16) 0%, rgba(10,132,255,0.05) 100%),
    rgba(10,20,50,0.50); }
.platform-icon { font-size: 34px; line-height: 1; }
.platform-name { font-size: 14px; font-weight: 700; color: var(--text); }
.platform-app  { font-size: 11px; color: var(--text-muted); }

/* ── Guide steps card ── */
.guide-steps-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%),
    rgba(20, 20, 26, 0.82);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 20px 16px 16px;
  margin-top: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.26), 0 1px 0 rgba(255,255,255,0.06) inset;
  animation: fadeSlideIn 0.3s cubic-bezier(0.34,1.3,0.64,1);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.guide-steps-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.guide-step:last-of-type { margin-bottom: 0; }
.guide-step-num {
  min-width: 26px;
  height: 26px;
  background: var(--accent-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.guide-step-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  padding-top: 3px;
}
.guide-step-text b { color: var(--text); }
.guide-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: opacity .15s, transform .1s;
}
.guide-download-btn:active { opacity: .85; transform: scale(.98); }
.guide-download-btn svg {
  width: 18px; height: 18px;
  fill: #fff;
}

/* ── VPN About card (home tab) ── */
.vpn-about-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%),
    rgba(16, 16, 20, 0.85);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.24), 0 1px 0 rgba(255,255,255,0.05) inset;
  margin-bottom: 20px;
}
.vpn-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vpn-feature-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.vpn-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vpn-feature-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.vpn-feature-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ─── AI Assistant card button in profile ──────────────────────────── */
.ai-assist-card {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s ease, border-color .2s ease;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
.ai-assist-card:active {
  transform: scale(.985);
  border-color: rgba(10,132,255,.35);
}
.ai-assist-card:hover { border-color: rgba(10,132,255,.25); }

/* Soft gradient glow behind the card */
.ai-assist-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(10,132,255,.18), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(180,90,255,.14), transparent 60%);
  pointer-events: none;
}

/* Avatar bubble with emoji */
.ai-assist-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #0a84ff 0%, #7c3aed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 16px -4px rgba(10,132,255,.45),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.ai-assist-emoji {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.ai-assist-online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 0 rgba(48,209,88,.55);
  animation: ai-assist-pulse 2.2s ease-out infinite;
}
@keyframes ai-assist-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(48,209,88,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(48,209,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); }
}

/* Text block */
.ai-assist-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ai-assist-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-assist-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ai-assist-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0a84ff, #7c3aed);
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 2px 6px -2px rgba(10,132,255,.5);
}
.ai-assist-sub {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-assist-chevron {
  width: 20px;
  height: 20px;
  fill: var(--text-muted);
  flex-shrink: 0;
}

/* ─── Support chat (inside bottom sheet) ─────────────────────────── */
.support-chat {
  display: flex;
  flex-direction: column;
  height: 70vh;
  max-height: 600px;
}
.support-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 14px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  margin-bottom: 10px;
}
.support-chat-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.support-bot-avatar {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: linear-gradient(135deg, #6478ff, #a064ff);
  border-radius: 50%;
}
.support-chat-title-text { display: flex; flex-direction: column; line-height: 1.2; }
.support-chat-name { font-weight: 600; font-size: 15px; }
.support-chat-sub  { font-size: 11px; opacity: 0.55; }
.support-chat-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  color: inherit;
  opacity: 0.6;
}
.support-chat-close svg { width: 22px; height: 22px; fill: currentColor; }

.support-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.support-msg { display: flex; }
.support-msg-user { justify-content: flex-end; }
.support-msg-bot  { justify-content: flex-start; }
.support-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.support-msg-user .support-bubble {
  background: linear-gradient(135deg, #6478ff, #a064ff);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.support-msg-bot .support-bubble {
  background: rgba(128, 128, 128, 0.15);
  color: inherit;
  border-bottom-left-radius: 6px;
}
.support-typing { display: inline-flex; align-items: center; gap: 4px; padding: 14px 16px; }
.support-typing span {
  display: inline-block;
  width: 7px; height: 7px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.4;
  animation: support-typing-bounce 1.2s infinite ease-in-out;
}
.support-typing span:nth-child(2) { animation-delay: 0.15s; }
.support-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes support-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 0.9; }
}

.support-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 2px 4px;
  border-top: 1px solid rgba(128, 128, 128, 0.15);
}
.support-chat-input {
  flex: 1;
  resize: none;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(128, 128, 128, 0.08);
  color: inherit;
  max-height: 120px;
  line-height: 1.3;
}
.support-chat-input:focus { outline: none; border-color: #6478ff; }
.support-chat-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #6478ff, #a064ff);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.support-chat-send:active { transform: scale(0.94); }
.support-chat-send svg { width: 20px; height: 20px; fill: currentColor; }

/* ──────────────────────────────────────────────────────────────────────────
   Animation pack (press-scale, shimmer, empty-state, new-glow, copy-check,
   regen spinner, error shake, inline checkmark) — v20260420a
   ────────────────────────────────────────────────────────────────────────── */

/* #8  Press-scale — spring release */
.plan-card,
.device-row,
.pay-card,
.ai-assist-card,
.btn-primary,
.btn-secondary,
.btn-danger,
.icon-btn,
.nav-btn,
.sni-item,
.btn-copy-key,
.promo-btn,
.support-chat-send {
  transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, border-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.plan-card:active,
.device-row:active,
.pay-card:active,
.ai-assist-card:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.icon-btn:active,
.sni-item:active,
.btn-copy-key:active,
.promo-btn:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

/* #3  Shimmer-skeleton */
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(128,128,128,0.10) 0%,
    rgba(128,128,128,0.22) 50%,
    rgba(128,128,128,0.10) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
  border-radius: 10px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; margin-bottom: 10px;
  background: rgba(128,128,128,0.06);
  border-radius: 14px;
}
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 11px; border-radius: 6px; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-30 { width: 30%; }
.skeleton-gauge {
  width: 200px; height: 115px; margin: 0 auto 16px;
  border-radius: 200px 200px 0 0 / 115px 115px 0 0;
}

/* #13 Empty-state illustration */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  color: var(--text-muted, #8e8e93);
}
.empty-state-svg {
  width: 120px; height: 120px; margin-bottom: 12px;
  opacity: 0.7;
}
.empty-state-svg path,
.empty-state-svg circle,
.empty-state-svg rect,
.empty-state-svg line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: empty-draw 1.6s ease-out forwards;
}
.empty-state-svg .es-bounce {
  transform-origin: center 60%;
  animation: empty-bounce 2.4s ease-in-out infinite 1.6s;
}
@keyframes empty-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes empty-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.empty-state-title { font-size: 15px; font-weight: 500; margin: 4px 0 2px; color: inherit; }
.empty-state-sub   { font-size: 13px; opacity: 0.7; text-align: center; }

/* #14 New-record accent glow */
@keyframes new-record-glow {
  0%   { box-shadow: 0 0 0 0 rgba(100, 120, 255, 0.65), 0 0 0 0 rgba(100, 120, 255, 0.35); background-color: rgba(100,120,255,0.08); }
  50%  { box-shadow: 0 0 0 6px rgba(100, 120, 255, 0.00), 0 0 22px 4px rgba(100, 120, 255, 0.35); background-color: rgba(100,120,255,0.05); }
  100% { box-shadow: 0 0 0 0 rgba(100, 120, 255, 0.00), 0 0 0 0 rgba(100, 120, 255, 0.00); background-color: transparent; }
}
.new-record {
  animation: new-record-glow 1.6s ease-out;
  border-radius: 14px;
}

/* #17 Copy checkmark flash on card */
@keyframes copy-flash-green {
  0%   { background-color: transparent; }
  20%  { background-color: rgba(48, 209, 88, 0.22); }
  100% { background-color: transparent; }
}
.copy-flash { animation: copy-flash-green 0.85s ease-out; }

.icon-btn .check-ok {
  stroke: #30d158;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: check-draw 0.35s ease-out forwards;
}
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

/* #18 Regen spinner rotation */
@keyframes regen-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(540deg); }  /* 1.5 turns */
}
.icon-btn.regen-spinning svg {
  animation: regen-spin 0.9s cubic-bezier(.5,.1,.5,1) forwards;
  transform-origin: center;
}

/* #20 Error shake */
@keyframes error-shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-7px); }
  30%      { transform: translateX(7px); }
  45%      { transform: translateX(-5px); }
  60%      { transform: translateX(5px); }
  75%      { transform: translateX(-2px); }
  90%      { transform: translateX(2px); }
}
@keyframes error-border-pulse {
  0%   { border-color: rgba(255, 69, 58, 0.0); box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.0); }
  20%  { border-color: rgba(255, 69, 58, 0.9); box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.25); }
  100% { border-color: rgba(255, 69, 58, 0.0); box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.0); }
}
.input-error {
  animation: error-shake 0.45s ease-in-out, error-border-pulse 0.9s ease-out;
  border-color: #ff453a !important;
}

/* #21 Inline checkmark (promo ok) */
.promo-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
}
.promo-input-wrap .promo-input {
  flex: 1;
  padding-right: 36px;
}
.promo-check {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.promo-check.show { opacity: 1; }
.promo-check circle {
  fill: none;
  stroke: #30d158;
  stroke-width: 2;
  stroke-dasharray: 63;
  stroke-dashoffset: 63;
}
.promo-check path {
  fill: none;
  stroke: #30d158;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.promo-check.show circle { animation: promo-ring 0.35s ease-out forwards; }
.promo-check.show path   { animation: promo-tick 0.28s ease-out 0.18s forwards; }
@keyframes promo-ring { to { stroke-dashoffset: 0; } }
@keyframes promo-tick { to { stroke-dashoffset: 0; } }

/* JS-driven press feedback (reliable on mobile WebView) */
.is-pressed {
  transform: scale(0.94) !important;
  transition: transform 0.08s ease-out !important;
  filter: brightness(0.93);
}

.semi-gauge-cross {
  width: 60px; height: 60px;
  filter: drop-shadow(0 0 14px rgba(255, 69, 58, 0.5));
  animation: cross-pop 0.5s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes cross-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── Onboarding ─────────────────────────────────────────────── */
.ob-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  opacity: 0; transition: opacity 0.3s;
  padding: 20px;
}
.ob-overlay.show { opacity: 1; }
.ob-card {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 100%);
  border-radius: 24px;
  padding: 24px 20px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  position: relative;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.3s;
}
.ob-overlay.show .ob-card { transform: scale(1); opacity: 1; }
.ob-skip {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,0.08); color: #aeaeb2;
  border: none; border-radius: 12px;
  padding: 6px 12px; font-size: 13px;
  cursor: pointer;
}
.ob-viewport { overflow: hidden; }
.ob-slides { display: flex; transition: transform 0.45s cubic-bezier(.34,1.1,.64,1); }
.ob-slide { min-width: 100%; padding: 12px 8px; text-align: center; }
.ob-duke-wrap {
  width: 180px; height: 200px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  animation: ob-duke-entrance 0.7s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 12px 30px rgba(255,255,255,0.12));
}
.ob-duke { width: 100%; height: 100%; }
.ob-anim-hello .ob-duke { animation: ob-wiggle 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.ob-anim-connect .ob-duke { animation: ob-bounce 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.ob-anim-try   .ob-duke { animation: ob-spin-pop 2.8s ease-in-out infinite; transform-origin: 50% 60%; }
.duke-eye { animation: duke-eye-pulse 2.5s ease-in-out infinite; }
@keyframes duke-eye-pulse {
  0%, 90%, 100% { filter: drop-shadow(0 0 8px rgba(255,255,255,0.9)); opacity: 1; }
  95%           { filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); opacity: 0.3; }
}
@keyframes ob-duke-entrance {
  0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes ob-wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes ob-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes ob-spin-pop {
  0%, 60%, 100% { transform: scale(1) rotate(0); }
  70%           { transform: scale(1.1) rotate(6deg); }
  85%           { transform: scale(1.05) rotate(-6deg); }
}
.ob-title {
  font-size: 22px; font-weight: 700; color: #fff;
  margin-bottom: 10px;
  animation: ob-slide-up 0.5s 0.15s ease-out both;
}
.ob-text {
  font-size: 15px; color: #aeaeb2; line-height: 1.5;
  padding: 0 4px;
  animation: ob-slide-up 0.5s 0.25s ease-out both;
}
.ob-text b { color: #fff; }
@keyframes ob-slide-up {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.ob-dots {
  display: flex; justify-content: center; gap: 8px;
  margin: 20px 0 16px;
}
.ob-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s;
}
.ob-dot.active { background: #fff; width: 24px; border-radius: 4px; }
.ob-actions {
  display: flex; gap: 10px;
}
.ob-prev, .ob-next {
  flex: 1; padding: 13px; border: none; border-radius: 14px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.ob-prev { background: rgba(255,255,255,0.1); color: #fff; }
.ob-next { background: #ffffff; color: #1c1c1e; }
.ob-prev:active, .ob-next:active { transform: scale(0.96); }

/* ─── Apple-style tooltips (iOS popover) ──────────────────────── */
.tt-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9400;
  opacity: 0;
  transition: opacity 0.3s;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.tt-backdrop.show { opacity: 1; }

.tt-spotlight {
  position: fixed;
  z-index: 9500;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55),
              0 0 0 2px rgba(10,132,255,0.9) inset,
              0 0 24px rgba(10,132,255,0.5);
  opacity: 0;
  transition: opacity 0.3s;
  animation: tt-ring-pulse 2s ease-in-out infinite;
}
.tt-spotlight.show { opacity: 1; }
@keyframes tt-ring-pulse {
  0%,100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 2px rgba(10,132,255,0.9) inset, 0 0 12px rgba(10,132,255,0.4); }
  50%     { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 2px rgba(10,132,255,1) inset,  0 0 30px rgba(10,132,255,0.7); }
}

.tt-popover {
  position: fixed;
  z-index: 9600;
  background: rgba(30, 30, 32, 0.92);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.12);
  opacity: 0;
  transform: scale(0.94) translateY(8px);
  transform-origin: 50% 100%;
  transition: opacity 0.3s cubic-bezier(.34,1.1,.64,1), transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.tt-popover.show { opacity: 1; transform: scale(1) translateY(0); }
.tt-popover.tt-bottom { transform-origin: 50% 0%; }

.tt-body { padding: 14px 16px 12px; }
.tt-title {
  font-size: 15px; font-weight: 600; color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.tt-text {
  font-size: 13px; line-height: 1.4;
  color: rgba(235, 235, 245, 0.7);
  margin-bottom: 12px;
}
.tt-got-it {
  width: 100%; padding: 9px;
  background: rgba(10,132,255,0.9);
  color: #fff; border: none;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.tt-got-it:active { transform: scale(0.97); background: rgba(10,132,255,1); }

.tt-arrow {
  position: absolute;
  width: 20px; height: 10px;
  overflow: hidden;
}
.tt-arrow::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: rgba(30, 30, 32, 0.92);
  backdrop-filter: blur(30px) saturate(180%);
  transform: rotate(45deg);
  top: -7px; left: 3px;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.12);
}
.tt-top .tt-arrow { bottom: -10px; }
.tt-bottom .tt-arrow { top: -10px; transform: scaleY(-1); }

/* ─── Bytes counter card ─────────────────────────────────────── */
.bytes-card {
  background: linear-gradient(135deg, rgba(10,132,255,0.12), rgba(48,209,88,0.08));
  border: 1px solid rgba(10,132,255,0.25);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 12px 16px;
}
.bytes-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.bytes-card-title { font-size: 13px; color: #aeaeb2; font-weight: 500; }
.bytes-card-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: #30d158; font-weight: 600;
}
.bytes-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #30d158;
  animation: bytes-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px #30d158;
}
@keyframes bytes-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.7); }
}
.bytes-value {
  font-size: 28px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(10,132,255,0.4);
}
.bytes-card-sub { font-size: 12px; color: #8e8e93; margin-top: 2px; }

/* ─── Connection globe (Apple / Starlink aesthetic) ──────────── */
.globe-card {
  background: radial-gradient(ellipse at 50% 0%, rgba(10,132,255,0.08), rgba(255,255,255,0.03) 60%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 16px 16px 14px;
  margin: 12px 16px;
  overflow: hidden;
  position: relative;
}
.globe-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(10,132,255,0.18), transparent 55%);
  pointer-events: none;
}
.globe-card-head { margin-bottom: 6px; position: relative; z-index: 1; }
.globe-card-title {
  font-size: 15px; color: #fff; font-weight: 600; display: block;
  letter-spacing: -0.2px;
}
.globe-card-sub { font-size: 12px; color: rgba(235,235,245,0.6); }

.globe-wrap {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 0 6px;
}
.globe-svg {
  width: 100%; max-width: 300px; height: auto; display: block;
  filter: drop-shadow(0 8px 24px rgba(10,132,255,0.35));
}

.globe-grid {
  transform-origin: 140px 140px;
  animation: globe-rotate 40s linear infinite;
}
@keyframes globe-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.globe-dots circle { animation: globe-dots-shimmer 4s ease-in-out infinite; }
@keyframes globe-dots-shimmer {
  0%,100% { opacity: 0.35; }
  50%     { opacity: 0.8;  }
}

.globe-pulse { fill: transparent; stroke-width: 1.5; }
.globe-user-pulse { stroke: #0a84ff; animation: globe-pulse-ring 2.2s ease-out infinite; }
.globe-de-pulse   { stroke: #30d158; animation: globe-pulse-ring 2.2s 0.7s ease-out infinite; }
@keyframes globe-pulse-ring {
  0%   { r: 5;  opacity: 0.95; stroke-width: 2; }
  100% { r: 20; opacity: 0;    stroke-width: 0.5; }
}

.globe-arc-group { filter: drop-shadow(0 0 8px rgba(100,210,255,0.5)); }

.globe-label {
  fill: #fff; font-size: 10px; font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.globe-label-de { fill: rgba(235,235,245,0.9); }

/* Stat pills under globe */
.globe-pills {
  display: flex; gap: 8px; margin-top: 10px;
  width: 100%;
}
.globe-pill {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.globe-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  animation: bytes-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.globe-pill-label { color: rgba(235,235,245,0.55); }
.globe-pill-val   { color: #fff; font-weight: 600; margin-left: auto; }

/* Light theme overrides for globe */
html[data-theme="light"] .globe-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .globe-card::before {
  background: radial-gradient(circle at 50% 120%, rgba(10,132,255,0.1), transparent 55%);
}
html[data-theme="light"] .globe-card-title { color: #1c1c1e; }
html[data-theme="light"] .globe-card-sub   { color: #8e8e93; }
html[data-theme="light"] .globe-pill {
  background: #f2f2f7; border-color: rgba(0,0,0,0.06);
}
html[data-theme="light"] .globe-pill-label { color: #8e8e93; }
html[data-theme="light"] .globe-pill-val   { color: #1c1c1e; }

/* ─── Ref program new look ───────────────────────────────────── */
.ref-goal-head { text-align: center; margin-bottom: 12px; }
.ref-goal-title { font-size: 16px; font-weight: 700; color: #fff; display: block; margin-bottom: 2px; }
.ref-goal-sub { font-size: 13px; color: #aeaeb2; }
.ref-goal-sub b { color: #30d158; }
.ref-progress-row { display: flex; align-items: center; gap: 10px; }
.ref-progress-track {
  flex: 1; height: 10px; border-radius: 5px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
.ref-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #30d158, #0a84ff);
  border-radius: 5px;
  transition: width 0.8s cubic-bezier(.34,1.1,.64,1);
  box-shadow: 0 0 12px rgba(48,209,88,0.4);
  animation: ref-shimmer 2.5s ease-in-out infinite;
}
@keyframes ref-shimmer {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.3); }
}
.ref-progress-num {
  font-size: 14px; font-weight: 700; color: #fff; min-width: 40px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Settings card / theme segmented ────────────────────────── */
.settings-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;
}
.settings-row { display: flex; justify-content: space-between; align-items: center; }
.settings-row-label { font-size: 14px; color: #fff; }
.theme-segmented {
  display: inline-flex; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 3px;
}
.theme-segmented button {
  background: transparent; border: none;
  padding: 6px 12px; border-radius: 8px;
  font-size: 13px; color: #aeaeb2; cursor: pointer;
  transition: all 0.2s;
}
.theme-segmented button.active {
  background: #fff; color: #1c1c1e; font-weight: 600;
}

/* ─── Light theme: override CSS variables + specific components ── */
html[data-theme="light"] {
  --bg:         #f2f2f7;
  --surface:    #ffffff;
  --surface2:   #f2f2f7;
  --surface3:   #e5e5ea;
  --accent:     #0a84ff;
  --green:      #34c759;
  --yellow:     #ff9500;
  --red:        #ff3b30;
  --text:       #1c1c1e;
  --text-dim:   #3c3c43;
  --text-muted: #8e8e93;
}
html[data-theme="light"] body { background: #f2f2f7; color: #1c1c1e; }

/* Bottom nav pill inversion */
html[data-theme="light"] #bottom-nav {
  background: rgba(255,255,255,0.9) !important;
  border-top: 1px solid rgba(0,0,0,0.08);
}
html[data-theme="light"] .nav-btn { color: #8e8e93; }
html[data-theme="light"] .nav-btn.active { color: #0a84ff; }
html[data-theme="light"] .nav-btn .nav-icon { fill: currentColor; }
html[data-theme="light"] .nav-pill { background: rgba(10,132,255,0.1) !important; }

/* Surface cards — lift white + subtle borders */
html[data-theme="light"] .gauge-card,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .ref-card,
html[data-theme="light"] .pay-card,
html[data-theme="light"] .vpn-about-card,
html[data-theme="light"] .ai-assist-card,
html[data-theme="light"] .info-row-group,
html[data-theme="light"] .device-card,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .bytes-card,
html[data-theme="light"] .globe-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .pay-summary,
html[data-theme="light"] .error-card,
html[data-theme="light"] .empty-state {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Generic text fixes */
html[data-theme="light"] .bytes-value,
html[data-theme="light"] .globe-card-title,
html[data-theme="light"] .settings-row-label,
html[data-theme="light"] .ref-goal-title,
html[data-theme="light"] .semi-gauge-pct,
html[data-theme="light"] .plan-name,
html[data-theme="light"] .plan-price,
html[data-theme="light"] .vpn-feature-title,
html[data-theme="light"] .profile-name,
html[data-theme="light"] .ai-assist-title,
html[data-theme="light"] .pay-plan,
html[data-theme="light"] .pay-amount,
html[data-theme="light"] .section-title,
html[data-theme="light"] .tab-title,
html[data-theme="light"] .device-name,
html[data-theme="light"] .info-row-value {
  color: #1c1c1e !important;
}
html[data-theme="light"] .semi-gauge-status,
html[data-theme="light"] .bytes-card-title,
html[data-theme="light"] .bytes-card-sub,
html[data-theme="light"] .globe-card-sub,
html[data-theme="light"] .ref-goal-sub,
html[data-theme="light"] .ai-assist-sub,
html[data-theme="light"] .vpn-feature-sub,
html[data-theme="light"] .profile-id,
html[data-theme="light"] .device-sub,
html[data-theme="light"] .info-row-label,
html[data-theme="light"] .pay-method,
html[data-theme="light"] .pay-date,
html[data-theme="light"] .username-chip,
html[data-theme="light"] .empty-state-title,
html[data-theme="light"] .empty-state-sub,
html[data-theme="light"] .meta,
html[data-theme="light"] .guide-intro {
  color: #3c3c43 !important;
}

/* Primary button stays blue with white text (OK). Secondary needs grey bg + dark text. */
html[data-theme="light"] .btn-primary {
  background: #0a84ff !important; color: #fff !important;
}
html[data-theme="light"] .btn-secondary {
  background: #e5e5ea !important; color: #1c1c1e !important;
}
html[data-theme="light"] .btn-secondary:active { background: #d1d1d6 !important; }
html[data-theme="light"] .btn-danger {
  background: rgba(255,59,48,0.12) !important; color: #ff3b30 !important;
}
html[data-theme="light"] .btn-green {
  background: rgba(52,199,89,0.14) !important; color: #34c759 !important;
}

/* Icon buttons, inputs */
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .btn-copy-key,
html[data-theme="light"] .btn-copy-ref,
html[data-theme="light"] .promo-btn {
  background: #e5e5ea !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .icon-btn svg,
html[data-theme="light"] .btn-copy-key svg,
html[data-theme="light"] .btn-copy-ref svg { fill: #1c1c1e !important; }
html[data-theme="light"] .text-input,
html[data-theme="light"] .input-field,
html[data-theme="light"] .promo-input {
  background: #ffffff !important;
  color: #1c1c1e !important;
  border-color: #d1d1d6 !important;
}
html[data-theme="light"] .text-input::placeholder,
html[data-theme="light"] .input-field::placeholder,
html[data-theme="light"] .promo-input::placeholder { color: #8e8e93 !important; }

/* Tab header title chip, pay-card icon bg, etc */
html[data-theme="light"] .pay-card-icon {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .pay-chip { background: #e5e5ea !important; color: #1c1c1e !important; }
html[data-theme="light"] .pay-summary-val { color: #1c1c1e !important; }
html[data-theme="light"] .pay-summary-label { color: #8e8e93 !important; }
html[data-theme="light"] .pay-dot { color: #c7c7cc !important; }

/* Platform / device cards / SNI */
html[data-theme="light"] .platform-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #1c1c1e !important;
}
html[data-theme="light"] .platform-card.active {
  background: #0a84ff !important; color: #fff !important;
}
html[data-theme="light"] .platform-card.active .platform-app { color: rgba(255,255,255,0.85) !important; }
html[data-theme="light"] .platform-name { color: inherit !important; }
html[data-theme="light"] .platform-app  { color: #8e8e93; }
html[data-theme="light"] .guide-steps-card { background: #fff !important; border: 1px solid rgba(0,0,0,0.08); color: #1c1c1e; }
html[data-theme="light"] .guide-step-text,
html[data-theme="light"] .guide-steps-title { color: #1c1c1e !important; }
html[data-theme="light"] .guide-step-num { background: #0a84ff !important; color: #fff !important; }

/* Sheets / modals */
html[data-theme="light"] .bottom-sheet { background: #ffffff !important; color: #1c1c1e; }
html[data-theme="light"] .sheet-overlay { background: rgba(0,0,0,0.3) !important; }
html[data-theme="light"] .sni-item { background: #f2f2f7 !important; color: #1c1c1e !important; }
html[data-theme="light"] .sni-item.active { background: #0a84ff !important; color: #fff !important; }

/* Skeletons */
html[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, #e5e5ea 0%, #f2f2f7 50%, #e5e5ea 100%) !important;
  background-size: 200% 100% !important;
}

/* Toast */
html[data-theme="light"] .toast { background: #1c1c1e !important; color: #fff !important; }

/* Gauge track: lighter, more visible */
html[data-theme="light"] .semi-gauge-bg { stroke: rgba(0,0,0,0.08) !important; }

/* Ref progress track */
html[data-theme="light"] .ref-progress-track { background: #e5e5ea; }

/* Empty state SVG */
html[data-theme="light"] .empty-state-svg { color: #8e8e93; }

/* Onboarding stays dark (premium feel) — no light override */

/* ─── Dark explicit (override any "auto" after user chose) ───── */
html[data-theme="dark"] {
  --bg:         #000000;
  --surface:    #111115;
  --surface2:   #1c1c21;
  --surface3:   #28282e;
  --text:       #ffffff;
  --text-dim:   #aeaeb2;
  --text-muted: #636366;
}

/* ─── Inline device rename ────────────────────────────────────── */
.rename-wrap {
  display: flex; gap: 6px; align-items: center;
  flex: 1; min-width: 0;
  animation: rename-pop 0.18s ease-out;
}
@keyframes rename-pop {
  from { transform: scaleY(0.9); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
.rename-input {
  flex: 1; min-width: 0;
  background: var(--surface2);
  border: 1.5px solid var(--accent);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  outline: none;
}
.rename-ok, .rename-cancel {
  width: 32px !important; height: 32px !important;
  padding: 0 !important;
  flex-shrink: 0;
}
.rename-ok { background: rgba(48,209,88,0.18) !important; color: #30d158 !important; }
.rename-ok svg { stroke: #30d158 !important; }
.rename-cancel { background: rgba(255,59,48,0.15) !important; color: #ff453a !important; }
.rename-cancel svg { stroke: #ff453a !important; }
html[data-theme="light"] .rename-input { background: #fff; color: #1c1c1e; }

/* ─── Achievements ─────────────────────────────────────────────────────── */
.ach-ready-badge,
.ach-done-badge,
.ach-progress-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
  letter-spacing: 0.01em;
}
.ach-ready-badge {
  background: linear-gradient(135deg, #ffb340, #ff9f0a);
  color: #1c1c1e;
  box-shadow: 0 0 0 1px rgba(255,179,64,0.35), 0 4px 12px rgba(255,159,10,0.28);
  animation: ach-pulse 1.6s ease-in-out infinite;
}
.ach-done-badge { background: rgba(48,209,88,0.18); color: #30d158; }
.ach-progress-badge { background: rgba(120,120,128,0.24); color: var(--text-secondary, #9a9aa0); }
@keyframes ach-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.ach-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 16px;
}

.ach-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface, rgba(28,28,30,0.72));
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ach-card.ach-ready {
  border-color: rgba(255,179,64,0.45);
  background: linear-gradient(135deg, rgba(255,179,64,0.08), rgba(255,159,10,0.04) 50%, var(--surface, rgba(28,28,30,0.72)));
  box-shadow: 0 0 0 1px rgba(255,179,64,0.25), 0 8px 24px rgba(255,159,10,0.15);
}
.ach-card.ach-claimed { opacity: 0.72; }
.ach-card.ach-locked .ach-icon { filter: grayscale(0.35) brightness(0.85); }

.ach-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}
.ach-card.ach-ready .ach-icon {
  background: radial-gradient(circle at 30% 30%, rgba(255,204,0,0.3), rgba(255,159,10,0.1) 70%);
  box-shadow: 0 0 20px rgba(255,179,64,0.35);
}
.ach-card.ach-claimed .ach-icon {
  background: rgba(48,209,88,0.14);
}

.ach-body { flex: 1; min-width: 0; }
.ach-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.ach-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #fff);
  letter-spacing: -0.01em;
}
.ach-count {
  font-size: 12px;
  color: var(--text-secondary, #8e8e93);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ach-desc {
  font-size: 12.5px;
  color: var(--text-secondary, #8e8e93);
  line-height: 1.3;
  margin-bottom: 8px;
}
.ach-progress-track {
  height: 5px;
  background: rgba(120,120,128,0.22);
  border-radius: 999px;
  overflow: hidden;
}
.ach-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0a84ff, #64d2ff);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ach-card.ach-ready .ach-progress-fill {
  background: linear-gradient(90deg, #ff9f0a, #ffcc00);
}
.ach-card.ach-claimed .ach-progress-fill {
  background: linear-gradient(90deg, #30d158, #64d2ff);
}

.ach-right { flex-shrink: 0; }
.btn-claim-ach {
  appearance: none; border: none; cursor: pointer;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1c1c1e;
  background: linear-gradient(135deg, #ffcc00, #ff9f0a);
  box-shadow: 0 4px 14px rgba(255,159,10,0.4);
  white-space: nowrap;
  transition: transform 0.12s ease;
}
.btn-claim-ach:active { transform: scale(0.95); }
.btn-claim-ach:disabled { opacity: 0.6; cursor: not-allowed; }

.ach-reward-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #8e8e93);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(120,120,128,0.16);
  white-space: nowrap;
}
.ach-done-tick {
  display: flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(48,209,88,0.18);
  color: #30d158;
}

/* Light theme overrides */
html[data-theme="light"] .ach-card {
  background: #fff;
  border-color: #e5e5ea;
}
html[data-theme="light"] .ach-card.ach-ready {
  background: linear-gradient(135deg, #fff5e0, #fff 60%);
  border-color: #ffcc80;
}
html[data-theme="light"] .ach-title { color: #1c1c1e; }
html[data-theme="light"] .ach-icon { background: #f2f2f7; }
html[data-theme="light"] .ach-progress-track { background: #e5e5ea; }
html[data-theme="light"] .ach-progress-badge { background: #e5e5ea; color: #6e6e73; }
html[data-theme="light"] .ach-reward-hint { background: #f2f2f7; color: #6e6e73; }


/* ─── Web Login overlay (Telegram Login Widget) ─────────────────────────── */
html.web-login-mode { overflow: hidden; }
html.web-login-mode #app { display: none !important; }

.web-login-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 25% 20%, #1c2b50 0%, #0a0e1a 60%),
    #0a0e1a;
  color: #fff;
  padding: 24px;
  -webkit-tap-highlight-color: transparent;
}
.web-login-overlay.hidden { display: none; }

.web-login-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: webLoginIn 0.5s cubic-bezier(.4,0,.2,1);
}
@keyframes webLoginIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.web-login-duck {
  font-size: 84px;
  line-height: 1;
  filter: drop-shadow(0 8px 22px rgba(255, 200, 80, .35));
  animation: duckBob 3.2s ease-in-out infinite;
}
@keyframes duckBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.web-login-title {
  margin: 18px 0 8px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.web-login-sub {
  margin: 0 0 28px;
  font-size: 16px;
  color: #b0b6c4;
  line-height: 1.4;
}

.tg-login-widget {
  display: flex;
  justify-content: center;
  min-height: 50px;
  margin-bottom: 24px;
}
.tg-login-widget iframe { max-width: 100% !important; }

.web-login-hint {
  margin: 0;
  font-size: 13px;
  color: #6e7588;
  line-height: 1.5;
}

/* Success animation overlay */
.web-login-success {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 30%, #1c2b50 0%, #0a0e1a 70%),
    #0a0e1a;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  overflow: hidden;
}
.web-login-success.hidden { display: none; }
.web-login-success.show { opacity: 1; }

.web-login-duck-big {
  font-size: 110px;
  line-height: 1;
  filter: drop-shadow(0 10px 30px rgba(255, 200, 80, .55));
  animation: duckPop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes duckPop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.login-success-title {
  margin: 24px 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}
.login-success-sub {
  margin: 0;
  font-size: 16px;
  color: #b0b6c4;
}

.login-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
}
.login-confetti-dot {
  position: absolute;
  top: 30%;
  width: 9px; height: 9px;
  border-radius: 50%;
  opacity: 0;
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(.5,.0,.7,1);
  animation-fill-mode: forwards;
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translate(0, -10vh) rotate(0); }
  100% { opacity: 0; transform: translate(calc((var(--dx, 0) * 1px)), 90vh) rotate(540deg); }
}

/* Native Telegram OAuth button */
.tg-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #54a9eb 0%, #3a96d9 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(58, 150, 217, .35);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.tg-login-btn:hover { filter: brightness(1.05); }
.tg-login-btn:active {
  transform: translateY(1px) scale(.99);
  box-shadow: 0 3px 10px rgba(58, 150, 217, .35);
}
.tg-login-btn svg {
  display: block;
  flex: 0 0 auto;
}

/* Spinner shown while we POST to /api/web/login */
.tg-login-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 4px;
}
.tg-spinner-ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(84, 169, 235, .25);
  border-top-color: #54a9eb;
  animation: tgSpin .9s linear infinite;
}
@keyframes tgSpin {
  to { transform: rotate(360deg); }
}
.tg-spinner-text {
  font-size: 14px;
  color: #b0b6c4;
}

.tg-login-cancel {
  margin-top: 4px;
  background: transparent;
  border: none;
  color: #6e7588;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.tg-login-cancel:hover {
  color: #b0b6c4;
  background: rgba(255,255,255,.04);
}

/* ─── Web (browser) mode: только страница устройств ─────────────────────── */

/* Шапка в миниаппе скрыта */
.web-header { display: none; }

html.web-mode body {
  background: #0a0e1a;
}

html.web-mode #app {
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 40px;
  min-height: 100vh;
  background: #0a0e1a;
}

/* Шапка в браузере */
html.web-mode .web-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(10,14,26,1) 0%, rgba(10,14,26,.95) 70%, rgba(10,14,26,0) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html.web-mode .web-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
html.web-mode .web-header-duck {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(255,200,80,.4));
}
html.web-mode .web-header-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
html.web-mode .web-header-logout {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: #b0b6c4;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, transform .1s;
}
html.web-mode .web-header-logout:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
html.web-mode .web-header-logout:active {
  transform: scale(.94);
}

/* Скрываем все табы кроме devices */
html.web-mode #tab-home,
html.web-mode #tab-buy,
html.web-mode #tab-guide,
html.web-mode #tab-profile {
  display: none !important;
}

/* Принудительно показываем devices как активную */
html.web-mode #tab-devices {
  display: block !important;
  padding-top: 8px;
}

/* Убираем нижний навбар */
html.web-mode #bottom-nav {
  display: none !important;
}