/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           var(--tg-theme-bg-color, #050510);
  --bg2:          var(--tg-theme-secondary-bg-color, #080818);
  --bg3:          #0d0d1f;
  --text:         var(--tg-theme-text-color, #f0f0ff);
  --hint:         var(--tg-theme-hint-color, #6060a0);
  --link:         var(--tg-theme-link-color, #9b8fff);
  --btn-bg:       var(--tg-theme-button-color, #7c6ff7);
  --btn-text:     var(--tg-theme-button-text-color, #ffffff);
  --accent:       var(--tg-theme-button-color, #7c6ff7);

  --accent-rgb:   124, 111, 247;
  --green:        #2dd87a;
  --yellow:       #ffc94d;
  --red:          #ff5f5f;

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  24px;

  --nav-h:        56px;
  --header-h:     44px;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);

  --glass:        rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.13);
  --glass-hover:  rgba(255,255,255,0.20);
  --glass-dark:   rgba(255,255,255,0.12);
  --shadow:       0 8px 32px rgba(0,0,0,0.5);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.25);

  --brand-grad:     linear-gradient(90deg, #d4ccff 0%, #b8aeff 45%, #7c6ff7 100%);
  --brand-grad-135: linear-gradient(135deg, #d4ccff, rgba(var(--accent-rgb), 1));
  --blur-glass:     12px;
}

/* ── Browser mode: slightly lighter theme ────────────────────────────────── */
/* Only applies when NOT inside Telegram WebApp (no tg-theme vars injected) */
body:not(.tg-webapp) {
  --bg:    #121228;
  --bg2:   #181832;
  --bg3:   #1e1e3c;
  --glass: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.15);
  --glass-hover: rgba(255,255,255,0.20);
  --hint:  #8080aa;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: var(--bg); z-index: 100;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
}

/* Ambient background blobs */
.ls-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.ls-bg::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.18) 0%, transparent 70%);
  filter: blur(60px);
  animation: ls-pulse 3s ease-in-out infinite;
}
.ls-bg::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  top: 60%; left: 55%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.12) 0%, transparent 70%);
  filter: blur(50px);
  animation: ls-pulse 3s ease-in-out infinite reverse;
}
@keyframes ls-pulse {
  0%,100% { opacity: 0.6; transform: translate(-50%,-60%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-60%) scale(1.15); }
}

/* Center content */
.ls-center {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  animation: ls-fadeIn 0.6s ease both;
}
@keyframes ls-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Orbit rings */
.ls-orbit-wrap {
  position: relative;
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.ls-orbit {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb),0.2);
}
.ls-orbit-1 { width: 80px;  height: 80px;  animation: ls-spin 4s linear infinite; }
.ls-orbit-2 { width: 110px; height: 110px; border-color: rgba(var(--accent-rgb),0.12); animation: ls-spin 7s linear infinite reverse; }
.ls-orbit-3 { width: 140px; height: 140px; border-color: rgba(var(--accent-rgb),0.07); animation: ls-spin 11s linear infinite; }
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* Orbiting dots */
.ls-dot-wrap {
  position: absolute; width: 80px; height: 80px;
  animation: ls-spin 4s linear infinite;
}
.ls-dot-wrap-2 {
  width: 110px; height: 110px;
  animation: ls-spin 7s linear infinite reverse;
}
.ls-dot {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),0.8), 0 0 20px rgba(var(--accent-rgb),0.4);
}
.ls-dot-2 {
  width: 6px; height: 6px;
  background: #9b8fff;
  box-shadow: 0 0 8px rgba(166,149,255,0.8);
}

/* Logo in center */
.ls-logo-wrap {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
}
.ls-logo-glow {
  position: absolute;
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.35) 0%, transparent 70%);
  animation: ls-pulse-logo 2s ease-in-out infinite;
}
@keyframes ls-pulse-logo {
  0%,100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.3); opacity: 1; }
}
.ls-logo {
  position: relative; z-index: 1;
  width: 48px; height: 48px;
  background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.3);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}

/* Brand */
.ls-brand {
  font-family: 'Outfit', sans-serif;
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}
.ls-brand span {
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Progress bar */
.ls-progress-track {
  width: 120px; height: 2px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px; overflow: hidden;
  margin-bottom: 12px;
}
.ls-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), #9b8fff);
  border-radius: 2px;
  animation: ls-progress 1.8s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes ls-progress {
  0%   { width: 0%; }
  40%  { width: 55%; }
  70%  { width: 75%; }
  90%  { width: 88%; }
  100% { width: 95%; }
}

/* Hint text */
.ls-hint {
  font-size: 12px; color: var(--hint);
  letter-spacing: 0.3px;
  animation: ls-blink 1.8s ease-in-out infinite;
}
@keyframes ls-blink {
  0%,100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* spin used by ptr-spinner and other elements */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── App Shell ────────────────────────────────────────────────────────────── */
.app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.app-header {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  padding: 0 20px;
  position: relative;
}
.header-title {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.3px;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Main / Pages ─────────────────────────────────────────────────────────── */
.app-main {
  flex: 1; overflow: hidden; position: relative;
}
.page {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 20px 16px calc(var(--nav-h) + var(--safe-bottom) + 12px);
  display: none;
  -webkit-overflow-scrolling: touch;
  animation: pageIn 0.22s ease;
}
.page.active { display: block; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bottom Nav ───────────────────────────────────────────────────────────── */
.bottom-nav {
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
  position: relative;
}
.bottom-nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.4), transparent);
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--hint); transition: color 0.2s, transform 0.15s;
  padding: 8px 0;
  position: relative;
}
.nav-btn.active { color: var(--accent); }
.nav-btn.active::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}
.nav-btn:active { transform: scale(0.92); }
.nav-icon { font-size: 22px; line-height: 1; }
.nav-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2px; }

/* ── Profile Header (Compact) ────────────────────────────────────────────── */
.profile-header-compact {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.profile-avatar-small {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.4), rgba(var(--accent-rgb),0.1));
  border: 1.5px solid rgba(var(--accent-rgb), 0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}

.profile-header-info {
  flex: 1;
}

.profile-name {
  font-size: 16px; font-weight: 600;
  color: var(--text);
}

.profile-since {
  font-size: 12px;
  color: var(--hint);
  margin-top: 2px;
}

.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.profile-status-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--hint);
  border: 2px solid var(--bg);
  transition: background 0.3s ease;
}
.profile-status-dot.status-active   { background: var(--green); }
.profile-status-dot.status-expiring { background: var(--yellow); }
.profile-status-dot.status-none     { background: var(--hint); }

/* ── Balance Card (Signal Hero) ──────────────────────────────────────────── */
.balance-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.32) 0%,
    rgba(var(--accent-rgb), 0.08) 60%,
    rgba(var(--accent-rgb), 0.14) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: var(--r-xl);
  padding: 18px 18px 16px;
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

/* Ambient signal rings — echoes the loading-screen orbit motif */
.balance-signal {
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  pointer-events: none;
}
.balance-signal-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.balance-signal-ring-1 { animation: balance-ring-pulse 3.6s ease-in-out infinite; }
.balance-signal-ring-2 {
  inset: 24px;
  border-color: rgba(var(--accent-rgb), 0.5);
  animation: balance-ring-pulse 3.6s ease-in-out infinite 0.6s;
}
@keyframes balance-ring-pulse {
  0%   { transform: scale(0.85); opacity: 0.15; }
  50%  { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(0.85); opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  .balance-signal-ring { animation: none; opacity: 0.3; }
}

.balance-top-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.balance-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.balance-amount {
  position: relative;
  font-size: 34px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  background: var(--brand-grad-135);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 14px;
}

.balance-buttons {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.balance-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.balance-btn-primary {
  background: var(--accent);
  color: var(--btn-text);
}

.balance-btn-primary:active {
  opacity: 0.85;
  transform: scale(0.95);
}

.balance-btn-secondary {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
}

.balance-btn-secondary:active {
  background: var(--glass-hover);
  transform: scale(0.95);
}

/* ── Status Strip (subscriptions + expiry, one connected card) ─────────────── */
.status-strip {
  display: flex;
  align-items: stretch;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.status-strip-col {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  min-width: 0;
}

.status-strip-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.status-strip-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
}

.status-strip-label {
  display: block;
  font-size: 11px;
  color: var(--hint);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-strip-divider {
  width: 1px;
  margin: 10px 0;
  background: var(--glass-border);
  flex-shrink: 0;
}

.profile-buy-cta {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 28px 20px;
  margin-bottom: 16px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.profile-buy-cta-icon { font-size: 40px; margin-bottom: 12px; }
.profile-buy-cta-title { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.profile-buy-cta-desc { font-size: 13px; color: var(--hint); margin-bottom: 20px; line-height: 1.5; }

/* ── Actions Section ─────────────────────────────────────────────────────── */
.actions-section {
  margin-bottom: 16px;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hint);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.action-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

.action-card:active {
  background: var(--glass-hover);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: scale(0.95);
}

.action-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.action-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

/* Tinted variants — helps the grid scan at a glance instead of three identical grey tiles */
.action-card-violet:active { border-color: rgba(var(--accent-rgb), 0.45); }
.action-card-violet .action-icon { filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.35)); }

.action-card-green:active { border-color: rgba(52, 212, 122, 0.4); }
.action-card-green .action-icon { filter: drop-shadow(0 0 8px rgba(52, 212, 122, 0.3)); }

.action-card-blue:active { border-color: rgba(166, 149, 255, 0.45); }
.action-card-blue .action-icon { filter: drop-shadow(0 0 8px rgba(166, 149, 255, 0.3)); }

/* ── Referral Block (Compact) ──────────────────────────────────────────── */
.referral-block {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 12px;
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

.referral-header {
  margin-bottom: 10px;
}

.referral-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.referral-link-display {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-family: monospace;
  color: var(--link);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.referral-link-display:active {
  background: var(--glass-hover);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.referral-tier-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.referral-tier {
  font-size: 11px;
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--link);
}

/* ── Compact referral row on main page ── */
.referral-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  cursor: pointer;
  transition: background .15s ease;
}
.referral-row:active { background: var(--glass-hover); }
.ref-tier-badge {
  font-size: 11px;
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--link);
  flex-shrink: 0;
}
.ref-link {
  font-size: 11px;
  font-family: monospace;
  color: var(--link);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  transition: opacity 0.2s;
}
.ref-link:active { opacity: 0.6; }

/* ── Profile Hero (Old - Hidden but kept for compatibility) */
.profile-hero {
  display: none; 
  width: 1px; 
  height: 32px; 
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
  flex-shrink: 0;
  margin: 0 4px;
}

/* CTA card */
.profile-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.06));
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px;
}
.profile-cta-title { font-size: 13px; font-weight: 700; }
.profile-cta-desc { font-size: 11px; color: var(--hint); margin-top: 2px; }

/* ── Stats Grid (kept for other uses) ────────────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 16px;
}
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px 14px;
  text-align: center;
  position: relative; overflow: hidden;
  transition: transform 0.15s;
}
.stat-card:active { transform: scale(0.97); }
.stat-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), transparent);
}
.stat-value {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--text), rgba(var(--accent-rgb),0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { font-size: 11px; color: var(--hint); margin-top: 3px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; }

/* ── Quick Actions (OLD - Hidden) ────────────────────────────────────────── */
.quick-actions { display: none; }
.quick-action { display: none; }
.quick-actions-header { display: none; }
.quick-actions-grid { display: none; }
.quick-action-card { display: none; }

/* ── Referral Block (OLD - Hidden) ───────────────────────────────────────── */
.referral-block-header { display: none; }
.referral-block-title { display: none; }
.referral-block-icon { display: none; }
.referral-info-btn { display: none; }
.referral-tier-row { display: none; }
.referral-tier-badge { display: none; }
.referral-progress-bar { display: none; }
.referral-progress-fill { display: none; }
.referral-progress-label { display: none; }
.referral-link-row { display: none; }
.referral-link-text { display: none; }
.referral-copy-icon { display: none; }
.referral-stats-row { display: none; }
.referral-stat { display: none; }
.referral-stat-divider { display: none; }
.referral-link-row:active { background: rgba(var(--accent-rgb),.08); border-color: rgba(var(--accent-rgb),.4); }
.referral-link-text {
  flex: 1; font-size: 12px; color: var(--link);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.referral-copy-icon { flex-shrink: 0; opacity: .45; }

.referral-stats-row {
  display: flex; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--glass-border);
}
.referral-stat { flex: 1; text-align: center; }
.referral-stat-divider {
  width: 1px; height: 36px;
  background: var(--glass-border); flex-shrink: 0;
}
.referral-stat-icon { display: block; font-size: 15px; margin-bottom: 2px; }
.referral-stat-val { display: block; font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.1; }
.referral-stat-earned { color: var(--green); }
.referral-stat-lbl { display: block; font-size: 10px; color: var(--hint); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

/* ── Subscriptions ────────────────────────────────────────────────────────── */
.subs-list { display: flex; flex-direction: column; gap: 10px; }

.sub-card {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  position: relative; overflow: hidden;
}
.sub-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 3px 0 0 3px;
}
.sub-card.expired::before { background: var(--red); }
.sub-card.expiring::before { background: var(--yellow); }
.sub-card:active { transform: scale(0.98); }
.sub-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.sub-card-title { font-weight: 700; font-size: 15px; }
.sub-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; letter-spacing: 0.2px;
}
.badge-active   { background: rgba(48,209,88,0.15);  color: var(--green); }
.badge-expiring { background: rgba(255,214,10,0.15); color: var(--yellow); }
.badge-expired  { background: rgba(255,95,95,0.15);  color: var(--red); }
.sub-card-meta  { font-size: 13px; color: var(--hint); }

/* ── Sub Detail ───────────────────────────────────────────────────────────── */
.sub-detail-card {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 4px 16px; margin-bottom: 16px;
}
.sub-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--glass-border);
  font-size: 14px;
}
.sub-detail-row:last-child { border-bottom: none; }
.sub-detail-label { color: var(--hint); font-size: 13px; }

.sub-link-block {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px; margin-bottom: 12px;
}
.sub-link-text {
  font-size: 12px; color: var(--link);
  word-break: break-all; margin-bottom: 12px;
  line-height: 1.6;
}
.sub-link-actions {
  display: flex; gap: 8px;
}
.sub-link-actions .btn {
  flex: 1; padding: 10px 8px; font-size: 13px;
}
.days-left {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 2px 8px; border-radius: 20px;
  margin-left: 6px;
}

/* ── Import Apps ──────────────────────────────────────────────────────────── */
.qr-container { margin-top: 10px; }
.import-apps-title {
  font-size: 11px; font-weight: 700; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.import-apps-list { display: flex; flex-direction: column; gap: 6px; }
.import-app-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 13px 16px;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  cursor: pointer; color: var(--text);
  font-size: 15px; font-family: inherit;
  transition: transform 0.15s, border-color 0.15s;
}
.import-app-btn:active { transform: scale(0.97); border-color: rgba(var(--accent-rgb),0.4); }
.import-app-icon { font-size: 22px; line-height: 1; }
.import-app-name { font-weight: 600; }

/* ── Buy Wizard ───────────────────────────────────────────────────────────── */
.option-list { display: flex; flex-direction: column; gap: 8px; }

.option-btn {
  width: 100%; text-align: left;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer; font-size: 15px; color: var(--text);
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
  display: flex; justify-content: space-between; align-items: center;
  font-family: inherit;
}
.option-btn:active { transform: scale(0.98); }
.option-btn.selected,
.option-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.08);
}
.option-btn-price {
  font-weight: 800; font-size: 16px;
  color: var(--accent);
}

.selected-plan-info {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--r-md);
  padding: 13px 16px; margin-bottom: 14px;
  font-size: 14px; color: var(--text);
  font-weight: 500;
}

/* ── Support / Tickets ────────────────────────────────────────────────────── */
.support-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.btn-new-ticket {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 20px;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.btn-new-ticket:active { background: rgba(var(--accent-rgb), 0.28); }

.tickets-list { display: flex; flex-direction: column; gap: 8px; }

.ticket-card {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px 14px 14px 0;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  display: flex; align-items: stretch; gap: 12px;
  overflow: hidden;
}
.ticket-card-left {
  width: 4px; flex-shrink: 0;
  background: var(--green);
  border-radius: 0 3px 3px 0;
}
.ticket-card.closed .ticket-card-left { background: var(--hint); }
.ticket-card-body { flex: 1; min-width: 0; }
.ticket-card-arrow { color: var(--hint); font-size: 20px; align-self: center; padding-right: 4px; }
.ticket-card:active { transform: scale(0.985); }
.ticket-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px; gap: 8px;
}
.ticket-card-subject { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-status-open   { color: var(--green);  font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.ticket-status-closed { color: var(--hint);   font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.ticket-card-preview  { font-size: 12px; color: var(--hint); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-card-date     { font-size: 11px; color: var(--hint); opacity: 0.7; }
.empty-state-hint     { font-size: 12px; color: var(--hint); margin-top: 6px; }

/* ── Ticket Detail ────────────────────────────────────────────────────────── */
.page-ticket-shell {
  display: none;
  flex-direction: column;
  padding-bottom: 0 !important;
}
.page-ticket-shell.active { display: flex; }

.ticket-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  margin-bottom: 12px; flex-shrink: 0;
}
.ticket-back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--text); cursor: pointer;
  transition: background 0.15s;
}
.ticket-back-btn:active { background: rgba(var(--accent-rgb), 0.15); }
.ticket-topbar-info { flex: 1; min-width: 0; }
.ticket-subject { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ticket-messages {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.msg-row { display: flex; }
.msg-row-user  { justify-content: flex-end; }
.msg-row-admin { justify-content: flex-start; }

.msg-bubble {
  max-width: 72%; padding: 8px 12px;
  border-radius: 16px; font-size: 13px; line-height: 1.45;
  animation: msgIn 0.18s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-user {
  background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb),0.75));
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 12px rgba(var(--accent-rgb), 0.25);
}
.msg-admin {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.msg-sender { font-size: 10px; font-weight: 700; opacity: 0.65; margin-bottom: 2px; }
.msg-text   { word-break: break-word; white-space: pre-wrap; }
.msg-time   { font-size: 10px; opacity: 0.5; margin-top: 4px; text-align: right; }
.msg-user .msg-time { color: rgba(255,255,255,0.65); }

/* Reply bar */
.ticket-reply-wrap {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.reply-tools {
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0; padding-bottom: 2px;
}
.reply-tool-btn {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px;
  opacity: 0.7; transition: opacity 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.reply-tool-btn:active { opacity: 1; }
.reply-input-wrap { flex: 1; min-width: 0; position: relative; }
.ticket-reply-wrap .reply-textarea {
  width: 100%; min-height: 36px; max-height: 100px;
  padding: 8px 12px; resize: none;
  border-radius: 18px;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  color: var(--text); font-size: 13px;
  font-family: inherit; transition: border-color 0.2s;
  overflow-y: auto; display: block;
}
.ticket-reply-wrap .reply-textarea:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.5); }
.reply-send-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--accent);
  border: none; border-radius: 50%;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s, transform 0.1s;
  margin-bottom: 2px;
}
.reply-send-btn:active { transform: scale(0.92); opacity: 0.85; }
.reply-send-btn:disabled { opacity: 0.4; }

/* Emoji picker */
.emoji-picker {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg2); border: 1px solid var(--glass-border);
  border-radius: var(--r-md); padding: 8px;
  display: flex; flex-wrap: wrap; gap: 4px;
  z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  max-height: 160px; overflow-y: auto;
}
.emoji-btn {
  background: none; border: none; cursor: pointer;
  font-size: 22px; padding: 4px; border-radius: 8px;
  transition: background 0.1s; line-height: 1;
}
.emoji-btn:active { background: rgba(var(--accent-rgb),0.15); }

/* File preview */
.file-preview { margin-bottom: 4px; }
.file-preview-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2); border: 1px solid var(--glass-border);
  border-radius: var(--r-sm); padding: 6px 10px;
  position: relative;
}
.file-preview-img { max-height: 80px; max-width: 120px; border-radius: 6px; object-fit: cover; }
.file-preview-doc { font-size: 13px; }
.file-preview-icon { font-size: 20px; }
.file-preview-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.file-preview-remove {
  background: rgba(255,80,80,0.15); border: none; cursor: pointer;
  color: #ff5050; border-radius: 50%; width: 20px; height: 20px;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Msg file attachment */
.msg-file { margin-top: 6px; }
.msg-file-img { max-width: 100%; border-radius: 8px; display: block; }
.msg-file-doc {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.15); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; text-decoration: none; color: inherit;
}

.ticket-actions-row {
  padding: 6px 0 2px;
  flex-shrink: 0;
}
.ticket-actions-row .btn-sm {
  font-size: 13px; padding: 8px 16px;
  border-radius: 20px; width: 100%;
}

.reply-textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text); font-size: 14px; resize: none;
  font-family: inherit; transition: border-color 0.2s;
}
.reply-textarea:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.5); }

/* ── Topup ────────────────────────────────────────────────────────────────── */
.amount-presets {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.preset-btn {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  padding: 12px 4px; font-size: 14px; font-weight: 700;
  cursor: pointer; color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  font-family: inherit;
}
.preset-btn:active { transform: scale(0.95); }
.preset-btn.selected {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.amount-input, .text-input {
  width: 100%; padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text); font-size: 16px; font-family: inherit;
  transition: border-color 0.2s;
}
.amount-input:focus, .text-input:focus {
  outline: none; border-color: rgba(var(--accent-rgb), 0.5);
}
.amount-input::placeholder, .text-input::placeholder,
.reply-textarea::placeholder { color: var(--hint); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  padding: 14px 20px; border-radius: var(--r-md);
  border: none; cursor: pointer; font-size: 15px; font-weight: 700;
  font-family: inherit; transition: transform 0.15s, opacity 0.15s;
  letter-spacing: -0.1px;
}
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb),0.75));
  color: var(--btn-text);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.35);
}
.btn-secondary {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  color: var(--text);
}
.btn-full { width: 100%; }
.btn-icon {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  cursor: pointer; font-size: 16px;
  padding: 6px 10px; line-height: 1;
  transition: transform 0.15s;
}
.btn-icon:active { transform: scale(0.9); }

/* ── Section Title ────────────────────────────────────────────────────────── */
.section-title {
  font-size: 11px; font-weight: 700; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 10px;
}

/* ── Empty State ──────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center; color: var(--hint);
  padding: 48px 20px; font-size: 15px;
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; display: block; }

/* ── Spacing ──────────────────────────────────────────────────────────────── */
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
  left: 50%; transform: translateX(-50%);
  background: rgba(30,30,40,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 11px 22px; border-radius: 24px;
  font-size: 14px; font-weight: 500;
  z-index: 200; white-space: nowrap;
  animation: toastAnim 2.6s ease forwards;
  box-shadow: var(--shadow);
}
@keyframes toastAnim {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* ── Buy step ─────────────────────────────────────────────────────────────── */
.buy-step { display: block; }
.buy-step.hidden { display: none; }

/* ── Divider ──────────────────────────────────────────────────────────────── */
.divider {
  height: 1px; background: var(--glass-border);
  margin: 16px 0;
}

/* ── Import Modal ─────────────────────────────────────────────────────────── */
.import-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end;
  animation: overlayIn 0.2s ease;
}
@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.import-modal {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 20px 16px calc(var(--safe-bottom) + 20px);
  max-height: 85vh;
  overflow-y: auto;
  animation: sheetIn 0.25s cubic-bezier(0.32,0.72,0,1);
}
@keyframes sheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.import-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.import-modal-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px;
}
.import-modal-close {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--hint); font-size: 13px;
  font-family: inherit;
}

.import-copied-badge {
  background: rgba(48,209,88,0.12);
  border: 1px solid rgba(48,209,88,0.25);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 14px; font-weight: 600; color: var(--green);
  margin-bottom: 16px; text-align: center;
}

.import-url-box {
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 12px; color: var(--link);
  word-break: break-all; margin-bottom: 8px;
  cursor: pointer; transition: background 0.2s;
}
.import-step-note {
  font-size: 12px; color: var(--hint); margin-bottom: 16px; text-align: center;
}

.import-steps-title {
  font-size: 11px; font-weight: 700; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.import-apps-grid {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.import-app-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--glass-border);
}
.import-app-row:last-child { border-bottom: none; }

.import-app-icon { font-size: 22px; flex-shrink: 0; }
.import-app-info {
  display: flex; flex-direction: column; gap: 1px;
}
.import-app-name { font-size: 14px; font-weight: 600; }
.import-app-hint { font-size: 12px; color: var(--hint); }

/* ── New styles ───────────────────────────────────────────────── */

/* PTR */
.ptr-indicator { position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:50;padding:10px;display:flex;align-items:center;justify-content:center; }
.ptr-spinner { width:24px;height:24px;border:2px solid rgba(var(--accent-rgb),.2);border-top-color:rgba(var(--accent-rgb),.9);border-radius:50%;animation:spin .7s linear infinite; }

/* Active sub (OLD - Hidden) */
.active-sub-card { display: none !important; }
.active-sub-header { display: none; }
.active-sub-status { display: none; }
.active-sub-dot { display: none; }
.active-sub-menu { display: none; }
.active-sub-info { display: none; }
.active-sub-name { display: none; }
.active-sub-traffic { display: none; }
.active-sub-meta { display: none; }
.active-sub-actions { display: none; }
.traffic-row { display: none; }
.traffic-col { display: none; }
.traffic-icon { display: none; }
.traffic-label { display: none; }
.traffic-value { display: none; }
.profile-cta { display: none; }
.banner-left { display:flex;align-items:center;gap:10px; }
.banner-dot { width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(45,224,139,.2);animation:pulse 2s infinite;flex-shrink:0; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 3px rgba(45,224,139,.2);}50%{box-shadow:0 0 0 6px rgba(45,224,139,.08);} }
.banner-days { font-size:14px;font-weight:700;color:var(--green); }
.banner-date { font-size:12px;color:var(--hint);margin-top:1px; }
.banner-btn { background:rgba(45,224,139,.15);border:1px solid rgba(45,224,139,.3);border-radius:var(--r-xs);padding:6px 12px;font-size:12px;font-weight:700;color:var(--green);cursor:pointer;white-space:nowrap; }
.banner-btn:active { background:rgba(45,224,139,.25); }

/* Sub card actions */
.sub-card-actions { display:flex;gap:8px;margin-top:12px; }
.sub-quick-btn { flex:1;padding:9px 8px;border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--glass-border);color:var(--text);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,transform .1s;display:flex;align-items:center;justify-content:center;gap:5px; }
.sub-quick-btn:active { transform:scale(.96);background:var(--glass-hover); }
.sub-quick-btn-extend { background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.25);color:rgba(var(--accent-rgb),1); }

/* Traffic */
.traffic-row { display:flex;gap:12px;margin-top:8px; }
.traffic-item { font-size:12px;color:var(--hint);font-weight:500; }

/* Sub detail hero */
.sub-detail-hero { border-radius:var(--r-lg);padding:20px;margin-bottom:14px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.06));border:1px solid rgba(var(--accent-rgb),.2); }
.sub-detail-hero-expired { background:linear-gradient(135deg,rgba(255,95,95,.15),rgba(255,95,95,.05));border-color:rgba(255,95,95,.2); }
.sub-detail-hero-expiring { background:linear-gradient(135deg,rgba(255,204,0,.15),rgba(255,204,0,.05));border-color:rgba(255,204,0,.2); }
.sub-detail-hero-status { margin-bottom:8px;display:flex;align-items:center;gap:8px; }
.sub-detail-hero-expire { font-size:15px;color:var(--hint); }

/* Sub actions grid */
.sub-actions-grid { display:flex;gap:10px;margin-top:16px; }
.sub-action-big { flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-md);cursor:pointer;font-size:13px;font-weight:700;color:var(--text);font-family:inherit;transition:transform .15s,background .15s; }
.sub-action-big:active { transform:scale(.96);background:var(--glass-hover); }
.sub-action-big-accent { background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.3);color:rgba(var(--accent-rgb),1); }
.sub-action-icon { font-size:22px; }

/* Transactions */
.transactions-list { display:flex;flex-direction:column;gap:4px; }
.tx-card { display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-border); }
.tx-icon { font-size:22px;flex-shrink:0;width:36px;text-align:center; }
.tx-body { flex:1;min-width:0; }
.tx-label { font-size:14px;font-weight:600; }
.tx-promo { font-size:11px;color:var(--green);margin-top:2px;font-weight:600; }
.tx-date  { font-size:12px;color:var(--hint);margin-top:2px; }
.tx-right { display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0; }
.tx-amount-pos { font-size:15px;font-weight:800;color:var(--green); }
.tx-amount-neg { font-size:15px;font-weight:800;color:var(--text); }
.tx-status { font-size:11px;font-weight:700; }
.tx-status-ok      { color:var(--green); }
.tx-status-pending { color:var(--yellow); }
.tx-status-fail    { color:var(--red); }

/* ── Referrals ──────────────────────────────────────────────────────────── */
.referral-info-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 12px;
}

.referral-info-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.referral-link-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: monospace;
  color: var(--link);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.referral-link-box:active {
  background: rgba(0,0,0,0.5);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.referral-stats-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 12px;
}

.referral-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.referral-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
}

.referral-stat-icon {
  font-size: 24px;
}

.referral-stat-label {
  font-size: 11px;
  color: var(--hint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.referral-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.referral-list-section {
  margin-bottom: 16px;
}

.referral-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.referral-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.referral-item:active {
  background: var(--glass-hover);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.referral-item-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.referral-item-info {
  flex: 1;
  min-width: 0;
}

.referral-item-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.referral-item-date {
  font-size: 11px;
  color: var(--hint);
  margin-top: 2px;
}

.referral-item-id {
  font-size: 11px;
  color: var(--link);
  font-weight: 600;
  flex-shrink: 0;
}

/* Skeleton */
.skeleton-card { background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:16px;margin-bottom:10px; }
.skeleton-line { height:14px;border-radius:7px;background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%;animation:shimmer 1.4s infinite; }
.skeleton-line.w60 { width:60%; }
.skeleton-line.w40 { width:40%; }
.skeleton-line.mt8 { margin-top:8px; }
@keyframes shimmer { 0%{background-position:-200% 0;}100%{background-position:200% 0;} }

/* Pay check */
.pay-check { color:var(--green);font-weight:800;font-size:16px; }

/* Import modal overrides */
.import-modal-drag-handle { width:36px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:8px auto 16px; }
.import-app-row { width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--glass-border);color:var(--text);font-family:inherit;transition:background .15s;text-align:left; }
.import-app-row:last-child { border-bottom:none; }
.import-app-row:active { background:var(--glass-hover); }
.import-arrow { color:var(--hint);font-size:20px;margin-left:auto;flex-shrink:0; }
.import-app-badge { font-size:10px;font-weight:700;padding:1px 6px;background:rgba(var(--accent-rgb),.15);color:rgba(var(--accent-rgb),.9);border-radius:20px;margin-left:4px; }
.import-divider { height:1px;background:var(--glass-border);margin:14px 0 12px; }
.import-manual-title { font-size:11px;font-weight:700;color:var(--hint);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px; }
.import-modal { transform:translateY(100%);transition:transform .28s cubic-bezier(0.32,0.72,0,1); }
.import-modal-visible { transform:translateY(0); }

/* Btn spinner */
.btn-spinner { display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:4px; }

/* Btn secondary */
.btn-secondary { background:var(--glass);border:1px solid var(--glass-border);color:var(--text); }

/* ── About ────────────────────────────────────────────────────────────────── */
.about-text {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px;
  font-size: 15px; line-height: 1.65;
  margin-bottom: 16px;
  white-space: pre-wrap;
}
.about-links {
  display: flex; flex-direction: column; gap: 8px;
}
.about-link {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--link); text-decoration: none;
  font-size: 15px; font-weight: 500;
  transition: border-color 0.15s;
}
.about-link:active { border-color: rgba(var(--accent-rgb),0.4); }

/* ── How To ───────────────────────────────────────────────────────────────── */
.howto-content { display: flex; flex-direction: column; gap: 12px; }

.howto-step {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px;
}
.howto-step-num {
  width: 32px; height: 32px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb),.6));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb),.35);
}
.howto-step-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.howto-step-desc  { font-size: 13px; color: var(--hint); line-height: 1.5; }

.howto-apps {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px;
}
.howto-app-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.howto-app-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: 14px; font-weight: 500;
}
.howto-app-item:last-child { border-bottom: none; }
.howto-app-platform {
  margin-left: auto;
  font-size: 12px; color: var(--hint); font-weight: 400;
}

/* ── Howto App Cards ──────────────────────────────────────────────────────── */
.howto-app-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 10px;
}
.howto-app-card-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.howto-app-card-icon { font-size: 24px; flex-shrink: 0; }
.howto-app-card-name { font-size: 15px; font-weight: 700; }
.howto-app-card-platforms { font-size: 11px; color: var(--hint); margin-top: 2px; }
.howto-app-card-links { display: flex; gap: 8px; flex-wrap: wrap; }
.howto-app-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.howto-app-btn:hover { opacity: .85; }
.howto-app-btn-secondary {
  background: var(--bg3, rgba(255,255,255,.08));
  color: var(--text);
  border: 1px solid var(--glass-border);
}
.howto-routing-hint {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 13px;
}
.howto-routing-hint > span { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* ── Admin Panel ──────────────────────────────────────────────────────────── */
.admin-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 16px;
}
.admin-stat-card {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px 12px; text-align: center;
  position: relative; overflow: hidden;
}
.admin-stat-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.5), transparent);
}
.admin-stat-val {
  font-size: 20px; font-weight: 800; letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--text), rgba(var(--accent-rgb),.8));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.admin-stat-lbl { font-size: 11px; color: var(--hint); margin-top: 3px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }

/* Admin tabs */
.admin-tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 4px;
}
.admin-tab {
  flex: 1; padding: 9px 6px;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--hint); font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-tab.active {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent);
}
.admin-tab-content { display: block; }
.admin-tab-content.hidden { display: none; }

/* Admin user cards */
.admin-user-card {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px; margin-bottom: 8px;
  position: relative; overflow: hidden;
}
.admin-user-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
  border-radius: 3px 0 0 3px;
}
.admin-user-banned::before { background: var(--red); }
.admin-user-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.admin-user-name { font-weight: 700; font-size: 15px; }
.admin-badge-banned {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,95,95,.15); color: var(--red);
}
.admin-user-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--hint); margin-bottom: 10px;
}
.admin-user-id { margin-left: auto; font-size: 12px; }
.admin-user-actions { display: flex; gap: 8px; }

/* Admin key cards */
.admin-key-card {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px; margin-bottom: 8px;
}
.admin-key-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.admin-key-title { font-weight: 700; font-size: 15px; }
.admin-key-meta { display: flex; gap: 12px; font-size: 13px; color: var(--hint); }

/* Admin action buttons */
.admin-action-btn {
  flex: 1; padding: 9px 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s, transform .1s;
}
.admin-action-btn:active { transform: scale(.96); }
.admin-action-btn:disabled { opacity: .5; pointer-events: none; }
.admin-action-green { background: rgba(48,209,88,.1); border-color: rgba(48,209,88,.25); color: var(--green); }
.admin-action-red   { background: rgba(255,95,95,.1);  border-color: rgba(255,95,95,.25);  color: var(--red); }

/* Broadcast result */
.broadcast-result {
  margin-top: 12px; padding: 12px 16px;
  border-radius: var(--r-md); font-size: 14px; font-weight: 600;
  text-align: center;
}
.broadcast-result-ok  { background: rgba(48,209,88,.12); border: 1px solid rgba(48,209,88,.25); color: var(--green); }
.broadcast-result-err { background: rgba(255,95,95,.12); border: 1px solid rgba(255,95,95,.25); color: var(--red); }

/* ── About Sheet ──────────────────────────────────────────────────────────── */
.about-sheet-text {
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 14px; line-height: 1.65;
  margin-bottom: 12px;
  white-space: pre-wrap;
  max-height: 200px; overflow-y: auto;
}
.about-sheet-links { display: flex; flex-direction: column; gap: 8px; }
.about-sheet-link {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--link); text-align: left;
  font-size: 15px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.about-sheet-link:active { border-color: rgba(var(--accent-rgb),0.4); }

/* ── Admin: user sheet ───────────────────────────────────────────────────── */
.admin-user-sheet-modal { max-height: 88vh; overflow-y: auto; }
.admin-sheet-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.admin-sheet-info-item { background: var(--glass); border-radius: 10px; padding: 10px 12px; }
.admin-sheet-info-lbl { font-size: 11px; color: var(--hint); margin-bottom: 2px; }
.admin-sheet-info-val { font-size: 15px; font-weight: 600; }
.admin-sheet-keys { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.admin-sheet-key { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--glass); border-radius: 10px; padding: 10px 12px; }
.admin-sheet-key-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden; }
.admin-sheet-key-info .status-badge { flex-shrink: 0; }
.admin-sheet-key-date { font-size: 12px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-sheet-key-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-sheet-key-date { font-size: 12px; color: var(--hint); }
.admin-sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-bottom: 16px; }
.admin-form-row { display: flex; gap: 8px; align-items: center; }
.admin-form-row .text-input { flex: 1; }
.mt-12 { margin-top: 12px; }

/* ── Admin: badges ───────────────────────────────────────────────────────── */
.admin-badge-active { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: rgba(52,199,89,.15); color: var(--green); font-weight: 600; }
.admin-badge-banned { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: rgba(255,95,95,.15); color: var(--red); font-weight: 600; }

/* ── Admin: plan cards ───────────────────────────────────────────────────── */
.admin-plan-card { display: flex; align-items: center; justify-content: space-between; background: var(--glass); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.admin-plan-info { display: flex; flex-direction: column; gap: 2px; }
.admin-plan-name { font-weight: 700; font-size: 15px; }
.admin-plan-meta { font-size: 12px; color: var(--hint); }
.admin-form-card { background: var(--glass); border-radius: 14px; padding: 14px; }
.admin-form-card .text-input { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }

/* ── Admin: host cards ───────────────────────────────────────────────────── */
.admin-host-card { background: var(--glass); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-host-info { min-width: 0; flex: 1; }
.admin-host-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.admin-host-meta { display: flex; flex-direction: column; gap: 3px; }
.admin-host-online { color: var(--green); font-size: 13px; font-weight: 600; }
.admin-host-offline { color: var(--red); font-size: 13px; font-weight: 600; }

/* ── Admin: settings form ────────────────────────────────────────────────── */
.admin-setting-block { margin-bottom: 14px; }
.admin-setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
.admin-setting-label { font-size: 14px; color: var(--text); }

/* ── Admin: toggle switch ────────────────────────────────────────────────── */
.admin-toggle { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.admin-toggle input { opacity: 0; width: 0; height: 0; }
.admin-toggle-slider { position: absolute; inset: 0; background: var(--glass-hover); border-radius: 26px; transition: .2s; cursor: pointer; }
.admin-toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.admin-toggle input:checked + .admin-toggle-slider { background: var(--accent); }
.admin-toggle input:checked + .admin-toggle-slider::before { transform: translateX(18px); }

/* ── Admin: user card clickable ──────────────────────────────────────────── */
.admin-user-card { cursor: pointer; transition: background .15s; }
.admin-user-card:active { background: var(--glass-hover); }

/* ── Admin: improved user card rows ─────────────────────────────────────── */
.admin-user-row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.admin-user-row-mid { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.admin-user-row-bot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hint); }
.aum-chip { font-size: 12px; background: var(--glass); border-radius: 20px; padding: 3px 9px; color: var(--text); }
.aum-chip-green { color: var(--green); }
.admin-user-reg { margin-left: auto; }
.admin-user-chevron { margin-left: auto; font-size: 18px; color: var(--hint); line-height: 1; }

/* ── Admin: balance presets ──────────────────────────────────────────────── */
.sheet-balance-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sheet-preset-btn { flex: 1; min-width: 56px; padding: 8px 4px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; color: var(--green); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.sheet-preset-btn:active { background: var(--glass-hover); }
.sheet-preset-red { color: var(--red); }

/* ── Admin: improved key card in sheet ───────────────────────────────────── */
.admin-sheet-key2 {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--glass); border-radius: 12px; padding: 10px 12px;
}
.ask2-top {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ask2-date {
  font-size: 12px; color: var(--hint); margin-left: auto;
  white-space: nowrap;
}
.ask2-email {
  font-size: 11px; color: var(--hint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ask2-actions {
  display: flex; gap: 6px; margin-top: 2px;
}
.ask2-btn {
  flex: 1; padding: 7px 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
  color: var(--text); font-family: inherit;
  text-align: center;
}
.ask2-btn:active { background: var(--glass-hover); }
.ask2-btn-red { color: var(--red); border-color: rgba(255,95,95,.25); background: rgba(255,95,95,.07); }
.ask2-btn-green { color: var(--green); }
.ask2-empty { color: var(--hint); font-size: 13px; padding: 8px 0; }
.auk-days { font-size: 11px; background: rgba(var(--accent-rgb),.15); color: var(--accent); border-radius: 20px; padding: 2px 7px; white-space: nowrap; }
.auk-days-warn { background: rgba(255,159,10,.15); color: #ff9f0a; }

/* ── Admin: IP chips ─────────────────────────────────────────────────────── */
.admin-sheet-ips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.admin-ip-chip { font-family: var(--mono, monospace); font-size: 12px; padding: 4px 10px; background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 20px; color: var(--accent); white-space: nowrap; }

/* ── Admin: improved keys tab ────────────────────────────────────────────── */
.admin-keys-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.aks-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.aks-active  { background: rgba(52,199,89,.15); color: var(--green); }
.aks-expiring{ background: rgba(255,159,10,.15); color: #ff9f0a; }
.aks-expired { background: rgba(255,95,95,.15);  color: var(--red); }
.admin-key-card2 { background: var(--bg2); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.akc2-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.akc2-left { display: flex; align-items: center; gap: 8px; }
.akc2-id { font-size: 12px; color: var(--hint); }
.akc2-mid { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.akc2-date { font-size: 13px; font-weight: 500; }
.akc2-owner { font-size: 12px; color: var(--accent); background: rgba(var(--accent-rgb),.1); border-radius: 20px; padding: 2px 8px; }
.akc2-email { font-size: 11px; color: var(--hint); margin-bottom: 8px; word-break: break-all; }
.akc2-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ── Trial offer ─────────────────────────────────────────────────────────── */
.trial-offer { background: linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.08)); border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 16px; padding: 18px; margin: 12px 0; text-align: center; }
.trial-offer-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.trial-offer-desc { font-size: 13px; color: var(--hint); margin-bottom: 4px; }

/* ── Referral Info Sheet ──────────────────────────────────────────────────── */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: overlayIn 0.2s ease;
}
.bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 401;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px 16px calc(var(--safe-bottom) + 24px);
  max-height: 80vh; overflow-y: auto;
  animation: sheetIn 0.25s cubic-bezier(0.32,0.72,0,1);
}
.sheet-handle {
  width: 36px; height: 4px; border-radius: 99px;
  background: var(--glass-border);
  margin: 0 auto 16px;
}
.sheet-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px;
  margin-bottom: 12px; text-align: center;
}

.referral-info-desc {
  font-size: 13px; color: var(--hint); margin-bottom: 16px; line-height: 1.5;
}
.referral-tiers-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.referral-tier-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3, rgba(255,255,255,.04));
  border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 10px 14px;
  transition: border-color .2s;
}
.referral-tier-item.rti-active {
  border-color: rgba(var(--accent-rgb),.5);
  background: rgba(var(--accent-rgb),.08);
}
.rti-emoji { font-size: 24px; flex-shrink: 0; }
.rti-info { flex: 1; }
.rti-name { font-size: 14px; font-weight: 700; }
.rti-range { font-size: 12px; color: var(--hint); margin-top: 1px; }
.rti-pct {
  font-size: 18px; font-weight: 800;
  color: var(--green);
}
.referral-info-note {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 10px 12px;
  font-size: 13px; color: var(--hint); line-height: 1.4;
  margin-bottom: 8px;
}
.referral-info-note-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── Admin: search row ───────────────────────────────────────────────────── */
.admin-search-row { margin-bottom: 12px; }
.admin-search-row .text-input { width: 100%; }

/* ── Admin: sheet keys loading ───────────────────────────────────────────── */
.admin-sheet-keys-loading { padding: 4px 0; }

/* ── Confirm dialog ──────────────────────────────────────────────────────── */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end;
  animation: overlayIn 0.18s ease;
}
.confirm-sheet {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 20px 16px calc(var(--safe-bottom) + 20px);
  animation: sheetIn 0.22s cubic-bezier(0.32,0.72,0,1);
}
.confirm-title {
  font-size: 16px; font-weight: 700; text-align: center;
  margin-bottom: 8px; letter-spacing: -0.2px;
}
.confirm-desc {
  font-size: 14px; color: var(--hint); text-align: center;
  margin-bottom: 20px; line-height: 1.5;
}
.confirm-btns { display: flex; gap: 10px; }
.confirm-btns .btn { flex: 1; }

/* ── Sync tab ─────────────────────────────────────────────────────────────── */
.sync-info-card {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.05));
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: var(--r-md);
  padding: 16px;
}
.sync-info-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.sync-info-desc  { font-size: 13px; color: var(--hint); line-height: 1.55; }

.sync-by-host {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.sync-host-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.sync-host-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-host-stat { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; }
.sync-stat-green  { background: rgba(48,209,88,.15);  color: var(--green); }
.sync-stat-blue   { background: rgba(var(--accent-rgb),.15); color: var(--accent); }
.sync-stat-red    { background: rgba(255,95,95,.15);  color: var(--red); }
.sync-stat-orange { background: rgba(255,159,10,.15); color: #ff9f0a; }

/* ── Server Status ────────────────────────────────────────────────────────── */
.status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--divider, #ffffff10);
}
.status-row:last-child { border-bottom: none; }

.status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.online  { background: var(--green); box-shadow: 0 0 0 3px rgba(48,209,88,.2); }
.status-dot.offline { background: var(--red);   box-shadow: 0 0 0 3px rgba(255,95,95,.15); }

.status-name { font-size: 14px; font-weight: 500; flex: 1; }

.status-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.status-uptime {
  font-size: 12px;
  color: var(--hint);
}

.uptime-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 500;
}

.badge-green  { background: rgba(48,209,88,.15);  color: #30d158; }
.badge-yellow { background: rgba(255,214,10,.15); color: #ffd60a; }
.badge-red    { background: rgba(255,95,95,.15);  color: #ff453a; }

.status-loading,
.status-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--hint);
  text-align: center;
}

/* ── Promo code ──────────────────────────────────────────────────────────── */
.promo-row{display:flex;gap:8px;margin:12px 0 4px}
.promo-input{
  flex:1;padding:10px 14px;border-radius:10px;
  border:1.5px solid var(--glass-border);
  background:var(--bg2);
  color:var(--text);font-size:14px;outline:none;
  transition:border-color .2s;
  -webkit-appearance:none;
}
.promo-input::placeholder{color:var(--hint)}
.promo-input:focus{border-color:rgba(var(--accent-rgb),.6);background:var(--bg2)}
.btn-promo{
  padding:10px 16px;border-radius:10px;
  background:var(--accent);color:var(--btn-text);
  font-size:13px;font-weight:700;border:none;cursor:pointer;
  white-space:nowrap;transition:opacity .2s,transform .1s;
  letter-spacing:-.1px;
}
.btn-promo:active{transform:scale(.96)}
.btn-promo:disabled{opacity:.45;cursor:default}
.promo-message{font-size:13px;min-height:18px;margin-bottom:8px;transition:color .2s}
.promo-ok{color:var(--green)}
.promo-error{color:var(--red)}


/* ── Sub Detail v2 ────────────────────────────────────────────────────────── */
.sdd-expire-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 10px; gap: 8px;
}
.sdd-expire-date {
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px;
}
.sdd-days-label {
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.sdd-progress-wrap { margin-top: 12px; }
.sdd-progress-track {
  height: 5px; border-radius: 99px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.sdd-progress-fill {
  height: 100%; border-radius: 99px;
  transition: width 0.6s ease;
}

/* Traffic card */
.sdd-traffic-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 14px;
}

.sdd-traffic-header {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px;
}

.sdd-traffic-title {
  font-size: 14px; font-weight: 700; color: var(--text1);
  display: flex; align-items: center; gap: 6px;
}

.sdd-traffic-total {
  display: flex; flex-direction: column; align-items: flex-end;
}

.sdd-traffic-total-val {
  font-size: 18px; font-weight: 900; background: linear-gradient(90deg, var(--accent), #b8aeff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: -0.5px;
}

.sdd-traffic-total-lbl {
  font-size: 10px; color: var(--hint); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
  margin-top: 2px;
}

.sdd-traffic-stats {
  display: flex; flex-direction: column; gap: 16px;
}

.sdd-traffic-item {
  display: flex; flex-direction: column; gap: 8px;
}

.sdd-traffic-item-header {
  display: flex; align-items: center; gap: 8px;
}

.sdd-traffic-icon {
  font-size: 18px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
}

.sdd-up {
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.15);
}

.sdd-dn {
  color: #b8aeff;
  background: rgba(167, 139, 250, 0.15);
}

.sdd-traffic-lbl {
  font-size: 12px; color: var(--text2); font-weight: 600;
}

.sdd-traffic-val {
  font-size: 18px; font-weight: 800; letter-spacing: -0.3px;
}

.sdd-traffic-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 120px;
}

.sdd-traffic-loading .sdd-traffic-header {
  width: 100%;
}

/* Link card */
.sdd-link-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 13px 14px;
  cursor: pointer; margin-bottom: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.sdd-link-card:active {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.06);
}
.sdd-link-icon { font-size: 16px; flex-shrink: 0; }
.sdd-link-text {
  flex: 1; font-size: 12px; color: var(--link);
  word-break: break-all; line-height: 1.5;
}
.sdd-link-copy { font-size: 16px; flex-shrink: 0; opacity: 0.6; }

/* QR code block */
.sdd-qr-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 16px; gap: 10px;
}
.sdd-qr-frame {
  background: #fff;
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
}
.sdd-qr-img {
  display: block; width: 180px; height: 180px;
  border-radius: 4px;
}
.sdd-qr-hint {
  font-size: 12px; color: var(--hint);
  text-align: center;
}

/* Action buttons */
.sdd-actions {
  display: flex; gap: 10px; margin-top: 4px;
}
.sdd-btn-extend, .sdd-btn-import, .sdd-btn-sync {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 18px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  cursor: pointer; font-size: 14px; font-weight: 700;
  font-family: inherit; transition: transform 0.15s, background 0.15s;
}
.sdd-btn-extend:active, .sdd-btn-import:active, .sdd-btn-sync:active { transform: scale(0.96); }
.sdd-btn-extend {
  background: var(--glass);
  color: var(--text);
}
.sdd-btn-extend:active { background: var(--bg2); }
.sdd-btn-import, .sdd-btn-sync {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.1));
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
.sdd-btn-import:active, .sdd-btn-sync:active {
  background: rgba(var(--accent-rgb), 0.28);
}
.sdd-btn-extend span:first-child,
.sdd-btn-import span:first-child,
.sdd-btn-sync span:first-child { font-size: 24px; }

/* ── Hide Yandex Metrika widget ─────────────────────────────────────────────── */
#ym-badge, .ym-badge, [class*="ym-badge"],
div[id^="yaCounter"], div[class*="yaCounter"],
.metrika-badge, [data-metrika],
a[href*="metrika.yandex"], a[href*="mc.yandex"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* ── Settings page ────────────────────────────────────────────────────────── */
.settings-group {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 4px 0;
  margin-bottom: 14px;
  overflow: hidden;
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}
.settings-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hint, #888);
  padding: 12px 16px 6px;
}
.settings-group-desc {
  font-size: 12px;
  color: var(--hint, #888);
  padding: 0 16px 8px;
  line-height: 1.5;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--glass-border, rgba(255,255,255,.06));
}
.settings-row:first-of-type { border-top: none; }
.settings-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.settings-row-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.settings-row-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #eee);
}
.settings-row-sub {
  font-size: 12px;
  color: var(--hint, #888);
  margin-top: 1px;
}
.settings-row-action {
  background: var(--glass, rgba(255,255,255,.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent, #7c6ff7);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  transition: background .15s;
}
.settings-row-action:active { transform: scale(.96); }

/* Toggle switch */
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.settings-toggle input { opacity: 0; width: 0; height: 0; }
.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--glass-dark);
  border-radius: 13px;
  cursor: pointer;
  transition: background .2s;
}
.settings-toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: var(--btn-text);
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--accent, #7c6ff7);
}
.settings-toggle input:checked + .settings-toggle-slider::before {
  transform: translateX(18px);
}

.settings-empty-hint {
  padding: 16px;
  font-size: 13px;
  color: var(--hint, #888);
  text-align: center;
}
.settings-danger-btn {
  width: 100%;
  padding: 13px;
  background: rgba(255,95,95,.08);
  border: 1px solid rgba(255,95,95,.25);
  border-radius: 12px;
  color: var(--red, #ff5f5f);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin: 4px 0;
  transition: background .15s;
}
.settings-danger-btn:active { background: rgba(255,95,95,.15); }


/* ── Subscription rename button ───────────────────────────────────────────── */
.sub-rename-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: .6;
  transition: opacity .15s, background .15s;
  line-height: 1;
}
.sub-rename-btn:hover { opacity: 1; background: rgba(255,255,255,.08); }
.sub-rename-btn:active { transform: scale(.9); }

/* ── Settings danger action ───────────────────────────────────────────────── */
.settings-row-action-danger {
  background: rgba(255,95,95,.08) !important;
  border-color: rgba(255,95,95,.25) !important;
  color: var(--red, #ff5f5f) !important;
}
.settings-row-action-danger:active { background: rgba(255,95,95,.18) !important; }

/* ── Admin user card v2 ───────────────────────────────────────────────────── */
.admin-user-card2 {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass, rgba(255,255,255,.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,.08));
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.admin-user-card2:active { transform: scale(.98); background: rgba(255,255,255,.1); }
.admin-user-card2.auc-banned { border-color: rgba(255,95,95,.25); background: rgba(255,95,95,.05); }

.auc-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent,#7c6ff7), #b8aeff);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.auc-banned .auc-avatar { background: linear-gradient(135deg, #ff5f5f, #ff8f8f); }

.auc-body { flex: 1; min-width: 0; }
.auc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.auc-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; }
.auc-status-active { background: rgba(45,216,122,.15); color: #2dd87a; }
.auc-status-banned { background: rgba(255,95,95,.15); color: #ff5f5f; }

.auc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.auc-chip { font-size: 11px; color: var(--hint); background: rgba(255,255,255,.05); padding: 2px 7px; border-radius: 8px; }
.auc-chip-green { color: #2dd87a; background: rgba(45,216,122,.1); }

.auc-bottom { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.auc-id, .auc-email, .auc-reg { font-size: 11px; color: var(--hint); }
.auc-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }

.auc-chevron { font-size: 18px; color: var(--hint); flex-shrink: 0; }

/* ── Admin user sheet v2 ──────────────────────────────────────────────────── */
.aus-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.08));
  margin-bottom: 16px;
}
.aus-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent,#7c6ff7), #b8aeff);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.aus-header-info { flex: 1; min-width: 0; }
.aus-header-name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.aus-header-meta { font-size: 11px; color: var(--hint); line-height: 1.5; }

.aus-stats-row {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 12px 0;
  margin-bottom: 16px;
}
.aus-stat { flex: 1; text-align: center; }
.aus-stat-val { font-size: 15px; font-weight: 700; color: var(--text); }
.aus-stat-lbl { font-size: 10px; color: var(--hint); margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }
.aus-stat-green { color: #2dd87a; }
.aus-stat-red { color: #ff5f5f; }
.aus-stat-divider { width: 1px; height: 32px; background: var(--glass-border, rgba(255,255,255,.08)); flex-shrink: 0; }

.aus-section-title {
  font-size: 11px; font-weight: 600; color: var(--hint);
  text-transform: uppercase; letter-spacing: .6px;
  margin: 14px 0 8px;
}
.aus-count {
  display: inline-block;
  background: rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.aus-balance-presets {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.aus-preset {
  flex: 1; min-width: 52px;
  padding: 8px 4px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-radius: 10px;
  color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.aus-preset:active { background: rgba(255,255,255,.14); }
.aus-preset-red { color: #ff5f5f; border-color: rgba(255,95,95,.25); background: rgba(255,95,95,.07); }

.aus-balance-row { display: flex; gap: 8px; align-items: center; }
.aus-apply-btn {
  padding: 10px 16px;
  background: var(--accent, #7c6ff7);
  border: none; border-radius: 10px;
  color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: opacity .15s;
}
.aus-apply-btn:active { opacity: .8; }
.aus-apply-green { background: #2dd87a; color: #000; }

.aus-keys-list { display: flex; flex-direction: column; gap: 6px; }
.aus-key-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border, rgba(255,255,255,.07));
  border-radius: 10px;
  padding: 10px 12px;
}
.aus-key-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.aus-key-name { font-size: 12px; color: var(--text); font-weight: 500; }
.aus-key-date { font-size: 11px; color: var(--hint); }
.aus-key-actions { display: flex; gap: 6px; flex-shrink: 0; }
.aus-key-btn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-radius: 8px;
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.aus-key-btn:active { background: rgba(255,255,255,.14); }
.aus-key-btn-red { border-color: rgba(255,95,95,.25); background: rgba(255,95,95,.07); }
.aus-empty, .aus-keys-loading { font-size: 13px; color: var(--hint); padding: 8px 0; text-align: center; }

.aus-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.aus-action-btn {
  padding: 11px 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-radius: 12px;
  color: var(--text); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: center;
  transition: background .15s;
}
.aus-action-btn:active { background: rgba(255,255,255,.14); }
.aus-action-red { border-color: rgba(255,95,95,.25); background: rgba(255,95,95,.07); color: #ff5f5f; }
.aus-action-green { border-color: rgba(45,216,122,.25); background: rgba(45,216,122,.07); color: #2dd87a; }


/* ── Enhanced Main Page Styles ───────────────────────────────────────────── */

/* Active subscription card */
.active-sub-card {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08) 0%, rgba(var(--accent-rgb),0.03) 100%);
  border: 1px solid rgba(45,216,122,0.3);
  border-radius: var(--r-md);
  padding: 16px;
  margin: 16px 0;
  backdrop-filter: blur(10px);
}

.active-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.active-sub-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #2dd87a;
}

.active-sub-dot {
  font-size: 12px;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.active-sub-menu {
  background: transparent;
  border: none;
  color: var(--hint);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.active-sub-menu:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text);
}

.active-sub-info {
  margin-bottom: 12px;
}

.active-sub-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}

.active-sub-traffic {
  margin: 14px 0;
}

.traffic-row {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.traffic-col {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}

.traffic-icon {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.traffic-label {
  display: block;
  color: var(--hint);
  font-size: 11px;
  margin-bottom: 3px;
}

.traffic-value {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.active-sub-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.action-btn {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn-primary {
  background: var(--accent);
  color: var(--btn-text);
}

.action-btn-primary:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.action-btn-secondary {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
}

.action-btn-secondary:active {
  background: var(--glass-hover);
}

/* Server status widget */
.servers-widget {
  background: linear-gradient(135deg, var(--bg2) 0%, rgba(var(--accent-rgb),0.06) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px;
  margin: 16px 0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

.servers-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.servers-widget-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(90deg, var(--text), rgba(var(--accent-rgb), 0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.servers-widget-refresh {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--hint);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.servers-widget-refresh:hover {
  background: var(--accent);
  color: var(--btn-text);
  border-color: var(--accent);
  transform: rotate(180deg);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.3);
}

.servers-widget-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.server-widget-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.server-widget-item:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.1);
}

.server-widget-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.server-widget-status {
  display: flex;
  gap: 8px;
  font-size: 12px;
}

.server-widget-metric {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 1);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-weight: 600;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

/* Quick action grid with header -->
.quick-actions-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin: 18px 0 10px 0;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: linear-gradient(135deg, var(--glass) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size: 11px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

.quick-action-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,0.15) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

.quick-action-card:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.06) 100%);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.12);
  transform: translateY(-3px);
}

.quick-action-card:active {
  background: var(--glass-hover);
  transform: scale(0.95) translateY(-2px);
}

.qa-icon {
  font-size: 22px;
  display: block;
  line-height: 1;
  transition: transform 0.3s ease;
}

.quick-action-card:hover .qa-icon {
  transform: scale(1.1);
}

.qa-label {
  display: block;
  text-align: center;
  line-height: 1.2;
  font-weight: 700;
  font-size: 12px;
}

.qa-hint {
  display: block;
  font-size: 10px;
  color: var(--hint);
  font-weight: 500;
  opacity: 0.75;
}

/* CTA with icon */
.profile-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.15) 0%, rgba(var(--accent-rgb),0.08) 100%);
  border: 1px solid rgba(var(--accent-rgb),0.3);
  border-radius: var(--r-md);
  padding: 16px;
  margin: 16px 0;
}

.profile-cta-icon {
  font-size: 40px;
  flex-shrink: 0;
}

.profile-cta-text {
  flex: 1;
}

.profile-cta-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.profile-cta-desc {
  font-size: 13px;
  color: var(--hint);
}

.profile-cta .btn {
  margin-top: 8px;
}

/* Improved quick actions for smaller screens */
@media (max-width: 360px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Protocol tabs in sub detail ─────────────────────────────────────────── */
.proto-section {
  margin-bottom: 4px;
}

.proto-tabs-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.proto-tab {
  flex: 1;
  padding: 9px 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
  transition: all 0.15s;
  position: relative;
}

.proto-tab-selected {
  background: rgba(124,111,247,0.2);
  border-color: rgba(124,111,247,0.45);
  color: #b8aeff;
}

.proto-tab-soon {
  opacity: 0.65;
  cursor: default;
}

.proto-soon-badge {
  position: absolute;
  top: -8px;
  right: 8px;
  background: rgba(255,201,77,0.2);
  color: #ffc94d;
  font-size: 9px;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 5px;
}

/* Amnezia placeholder */
.amnezia-placeholder {
  background: rgba(255,201,77,0.07);
  border: 1px solid rgba(255,201,77,0.2);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
}

/* Sub card quick actions */
.sub-card-quick-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.sub-quick-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  transition: all 0.15s;
}

.sub-quick-btn:active {
  transform: scale(0.97);
}

.sub-quick-renew {
  background: rgba(124,111,247,0.12);
  border-color: rgba(124,111,247,0.3);
  color: #b8aeff;
}

.sub-quick-import {
  background: rgba(45,216,122,0.1);
  border-color: rgba(45,216,122,0.28);
  color: #2dd87a;
}

/* Protocol badge on sub card */
.sub-proto-badge {
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 2px 7px;
  color: var(--hint);
  white-space: nowrap;
}

/* Protocol choice buttons in buy wizard */
.proto-choice-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 10px;
  border-radius: var(--r-md);
}
/* ══════════════════════════════════════════════════════════════════════════
   UX/UI REDESIGN — Onboarding, Hero, Referral progress, Smart empty states
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Onboarding sheet ────────────────────────────────────────────────────── */
.onb-overlay { position: fixed; inset:0; z-index: 500; background: rgba(3,3,12,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: overlayIn .25s ease; }
.onb-sheet {
  position: fixed; left:0; right:0; bottom:0; z-index: 501;
  background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
  border: 1px solid var(--glass-border);
  border-radius: 24px 24px 0 0;
  padding: 10px 20px calc(var(--safe-bottom) + 22px);
  max-height: 88vh; overflow-y: auto;
  animation: sheetIn .32s cubic-bezier(0.32,0.72,0,1);
}
.onb-hero { text-align:center; padding: 18px 4px 6px; }
.onb-logo { width:56px; height:56px; margin:0 auto 14px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; background: var(--brand-grad-135); box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.35); }
.onb-title { font-family:'Outfit',sans-serif; font-size:22px; font-weight:800; letter-spacing:-0.3px; margin-bottom:6px; }
.onb-subtitle { font-size:14px; color:var(--hint); line-height:1.5; margin-bottom:22px; padding: 0 6px; }
.onb-steps { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.onb-step { display:flex; align-items:flex-start; gap:12px; background: var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:13px 14px; animation: onbStepIn .4s ease backwards; }
.onb-step:nth-child(1){animation-delay:.05s} .onb-step:nth-child(2){animation-delay:.12s} .onb-step:nth-child(3){animation-delay:.19s}
@keyframes onbStepIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.onb-step-icon { width:36px; height:36px; flex-shrink:0; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; background: rgba(var(--accent-rgb),0.15); }
.onb-step-title { font-size:14px; font-weight:700; margin-bottom:2px; }
.onb-step-desc { font-size:12.5px; color:var(--hint); line-height:1.45; }
.onb-trial-pill { display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--green); background: rgba(45,216,122,0.12); border:1px solid rgba(45,216,122,0.3); border-radius:99px; padding:7px 14px; margin: 0 auto 18px; width:fit-content; }
.onb-skip { display:block; text-align:center; font-size:13px; color:var(--hint); margin-top:14px; background:none; border:none; width:100%; padding:6px; cursor:pointer; }

/* ── Hero card (main screen, single CTA) ────────────────────────────────── */
.hero-card {
  position: relative; overflow:hidden;
  border-radius: var(--r-xl);
  padding: 22px 20px 20px;
  margin-bottom: 14px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  animation: heroIn .45s cubic-bezier(0.22,1,0.36,1);
}
@keyframes heroIn { from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
.hero-card-trial {
  background: linear-gradient(135deg, rgba(45,216,122,0.22) 0%, rgba(var(--accent-rgb),0.16) 55%, rgba(var(--accent-rgb),0.06) 100%);
  border: 1px solid rgba(45,216,122,0.35);
}
.hero-card-buy {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.30) 0%, rgba(var(--accent-rgb),0.08) 60%, rgba(var(--accent-rgb),0.14) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
}
.hero-card-active {
  background: linear-gradient(135deg, rgba(45,216,122,0.16) 0%, rgba(255,255,255,0.03) 70%);
  border: 1px solid rgba(45,216,122,0.28);
}
.hero-card-expiring {
  background: linear-gradient(135deg, rgba(255,183,77,0.20) 0%, rgba(255,255,255,0.03) 70%);
  border: 1px solid rgba(255,183,77,0.3);
}
/* Quiet variant: nothing urgent needed from the user — smaller, calmer, non-gradient CTA */
.hero-card-quiet { padding: 18px 18px 16px; box-shadow: none; }
.hero-card-quiet .hero-title { font-size: 17px; }
.hero-card-quiet .hero-desc { margin-bottom: 12px; }
.hero-card-quiet .hero-cta {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--glass-border);
  box-shadow: none;
}
.hero-eyebrow { position:relative; display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; color: var(--green); margin-bottom:8px; }
.hero-card-buy .hero-eyebrow, .hero-card-active .hero-eyebrow { color: rgba(var(--accent-rgb),0.95); }
.hero-card-active .hero-eyebrow { color: var(--green); }
.hero-card-expiring .hero-eyebrow { color: var(--yellow); }
.hero-title { position:relative; font-family:'Outfit',sans-serif; font-size:21px; font-weight:800; letter-spacing:-0.3px; line-height:1.25; margin-bottom:6px; }
.hero-desc { position:relative; font-size:13.5px; color: var(--hint); line-height:1.5; margin-bottom:16px; max-width:92%; }
.hero-cta {
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; border:none; border-radius:14px;
  font-size:15px; font-weight:700; cursor:pointer; color: var(--btn-text);
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.35);
  transition: transform .15s ease, opacity .15s ease;
}
.hero-cta:active { transform: scale(0.97); opacity:0.9; }
.hero-cta-green { background: linear-gradient(135deg, var(--green), #23b869); box-shadow: 0 6px 18px rgba(45,216,122,0.35); }
.hero-secondary-link { position:relative; display:block; text-align:center; font-size:12.5px; color:var(--hint); margin-top:10px; background:none; border:none; width:100%; padding:4px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

/* ── Smart empty-state card (with icon, copy, and next action) ────────────── */
.empty-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 30px 22px 24px;
  text-align: center;
  backdrop-filter: blur(8px);
  animation: heroIn .35s ease;
}
.empty-card-icon {
  width:56px; height:56px; margin: 0 auto 14px;
  border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:26px; background: rgba(var(--accent-rgb),0.12);
}
.empty-card-title { font-weight:700; font-size:16px; margin-bottom:6px; }
.empty-card-desc { font-size:13px; color: var(--hint); line-height:1.55; margin-bottom:20px; max-width: 280px; margin-left:auto; margin-right:auto; }

/* ── Secondary info block (balance/network moved below the fold) ──────────── */
.secondary-block-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--hint); margin: 18px 0 8px; }

/* ── Referral: progress-to-next-tier ────────────────────────────────────── */
.ref-progress-card {
  background: var(--glass); border:1px solid var(--glass-border); border-radius: var(--r-xl);
  padding: 18px; margin-bottom: 14px; backdrop-filter: blur(8px);
}
.ref-progress-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
.ref-progress-tier { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; }
.ref-progress-tier-emoji { font-size:22px; }
.ref-progress-pct { font-size:13px; font-weight:700; color: var(--green); background: rgba(45,216,122,0.12); border-radius:99px; padding:3px 10px; }
.ref-progress-track { position:relative; height:8px; border-radius:99px; background: rgba(255,255,255,0.08); overflow:hidden; margin-bottom:8px; }
.ref-progress-fill { position:absolute; inset:0 auto 0 0; height:100%; border-radius:99px; background: linear-gradient(90deg, var(--accent), #9b8fff); transition: width .5s cubic-bezier(0.22,1,0.36,1); }
.ref-progress-hint { font-size:12.5px; color: var(--hint); }
.ref-progress-hint b { color: var(--text); font-weight:700; }
.ref-progress-maxed { font-size:12.5px; color: var(--green); font-weight:600; }

.ref-hero-stats { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin-bottom:14px; }
.ref-hero-stat { background: var(--glass); border:1px solid var(--glass-border); border-radius: var(--r-lg); padding:14px; text-align:center; }
.ref-hero-stat-value { font-family:'Outfit',sans-serif; font-size:22px; font-weight:800; background: var(--brand-grad-135); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ref-hero-stat-label { font-size:11px; color: var(--hint); margin-top:4px; text-transform:uppercase; letter-spacing:0.4px; }

.ref-explain-card { background: rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.22); border-radius: var(--r-lg); padding:14px 16px; margin-bottom:16px; display:flex; gap:12px; align-items:flex-start; }
.ref-explain-icon { font-size:20px; flex-shrink:0; }
.ref-explain-text { font-size:12.5px; color: var(--hint); line-height:1.55; }
.ref-explain-text b { color: var(--text); }

.ref-tier-cards { display:flex; flex-direction:column; gap:10px; margin-bottom: 18px; }
.ref-tier-card { position:relative; display:flex; align-items:center; gap:12px; background: var(--glass); border:1px solid var(--glass-border); border-radius: var(--r-lg); padding:13px 14px; transition: all .2s ease; }
.ref-tier-card-current { border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.10); }
.ref-tier-card-done { opacity: 0.72; }
.ref-tier-emoji { font-size:24px; width:38px; text-align:center; flex-shrink:0; }
.ref-tier-body { flex:1; min-width:0; }
.ref-tier-name-row { display:flex; align-items:center; gap:6px; }
.ref-tier-name { font-size:14px; font-weight:700; }
.ref-tier-current-chip { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; color: var(--accent); background: rgba(var(--accent-rgb),0.18); border-radius:99px; padding:2px 8px; }
.ref-tier-range { font-size:12px; color: var(--hint); margin-top:2px; }
.ref-tier-benefit { font-size:11.5px; color: var(--hint); margin-top:3px; line-height:1.4; }
.ref-tier-pct { font-size:17px; font-weight:800; color: var(--green); flex-shrink:0; }
.ref-tier-check { position:absolute; top:10px; right:12px; color: var(--green); font-size:14px; }

.ref-cta-sticky { position: sticky; bottom: 0; padding-top:6px; }