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

:root {
  --bg:           var(--tg-theme-bg-color, #0d0d1a);
  --bg2:          var(--tg-theme-secondary-bg-color, #13132a);
  --bg3:          #181830;
  --text:         var(--tg-theme-text-color, #ececf8);
  --hint:         var(--tg-theme-hint-color, #7878a8);
  --link:         var(--tg-theme-link-color, #a695ff);
  --btn-bg:       var(--tg-theme-button-color, #7b68ee);
  --btn-text:     var(--tg-theme-button-text-color, #ffffff);
  --accent:       var(--tg-theme-button-color, #7b68ee);

  --accent-rgb:   123, 104, 238;
  --green:        #34d47a;
  --yellow:       #ffd166;
  --red:          #ff6b6b;

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

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

  --glass:        rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.10);
  --glass-hover:  rgba(255,255,255,0.10);
  --shadow:       0 8px 32px rgba(0,0,0,0.35);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.25);
}

/* ── Browser mode: slightly lighter theme ────────────────────────────────── */
/* Only applies when NOT inside Telegram WebApp (no tg-theme vars injected) */
body:not(.tg-webapp) {
  --bg:    #111127;
  --bg2:   #181836;
  --bg3:   #1e1e40;
  --glass: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.12);
  --hint:  #8888b8;
}

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(123,104,238,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(166,149,255,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(123,104,238,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(123,104,238,0.12); animation: ls-spin 7s linear infinite reverse; }
.ls-orbit-3 { width: 140px; height: 140px; border-color: rgba(123,104,238,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(123,104,238,0.8), 0 0 20px rgba(123,104,238,0.4);
}
.ls-dot-2 {
  width: 6px; height: 6px;
  background: #a695ff;
  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(123,104,238,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(123,104,238,0.12);
  border: 1px solid rgba(123,104,238,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: linear-gradient(90deg, #e8e4ff 0%, #c4b8ff 45%, #8b6fff 100%);
  -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), #a695ff);
  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: linear-gradient(90deg, #e8e4ff 0%, #c4b8ff 45%, #8b6fff 100%);
  -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 Hero ─────────────────────────────────────────────────────────── */
.profile-hero {
  position: relative;
  border-radius: var(--r-xl);
  padding: 22px 20px 20px;
  margin-bottom: 12px;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.28) 0%,
    rgba(var(--accent-rgb), 0.10) 55%,
    transparent 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
.profile-hero::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.3) 0%, transparent 70%);
  pointer-events: none;
}
.profile-hero-inner {
  display: flex; align-items: center; gap: 16px;
  position: relative; margin-bottom: 18px;
}
.avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.4), rgba(var(--accent-rgb),0.15));
  border: 2px solid rgba(var(--accent-rgb), 0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.3);
}
.profile-info { flex: 1; min-width: 0; }
.profile-name {
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-since { font-size: 12px; color: var(--hint); margin-top: 2px; }

/* Hero balance row */
.hero-balance-row {
  display: flex; align-items: center;
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 12px 16px;
  position: relative;
}
.hero-balance-item { flex: 1; text-align: center; }
.hero-balance-val {
  display: block; font-size: 17px; font-weight: 800;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--text), rgba(var(--accent-rgb),0.9));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-balance-lbl { display: block; font-size: 10px; color: var(--hint); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.hero-balance-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

/* 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: 14px 16px; margin-bottom: 12px;
}
.profile-cta-title { font-size: 14px; font-weight: 700; }
.profile-cta-desc { font-size: 12px; 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 ────────────────────────────────────────────────────────── */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 16px; }
.quick-action { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px 6px 12px; cursor: pointer; transition: background .15s, transform .1s; }
.quick-action:active { transform: scale(.95); background: var(--bg2); }
.quick-action-icon { font-size: 22px; line-height: 1; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.quick-action-label { font-size: 11px; color: var(--hint); text-align: center; line-height: 1.2; }

/* ── Referral Block ───────────────────────────────────────────────────────── */
.referral-block {
  background: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
}
.referral-block-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.referral-block-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.referral-block-icon { font-size: 15px; }
.referral-info-btn {
  background: rgba(255,255,255,.06);
  border: none; border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--hint); cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.referral-info-btn:active { background: rgba(108,99,255,.2); color: var(--accent); }

.referral-tier-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.referral-tier-badge {
  font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(108,99,255,.3), rgba(108,99,255,.12));
  border: 1px solid rgba(108,99,255,.35);
  color: #a78bfa;
  padding: 3px 10px; border-radius: 20px;
}
.referral-progress-bar {
  flex: 1; height: 5px; border-radius: 99px;
  background: var(--glass-border); overflow: hidden;
}
.referral-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #a78bfa);
  transition: width .5s ease;
}
.referral-progress-label { font-size: 11px; color: var(--hint); margin-bottom: 14px; }

.referral-link-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 9px 12px;
  cursor: pointer; margin-bottom: 14px;
  transition: border-color .15s, background .15s;
  color: var(--hint);
}
.referral-link-row:active { background: rgba(108,99,255,.08); border-color: rgba(108,99,255,.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,69,58,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: flex-start; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 10px; flex-shrink: 0;
}
.ticket-topbar-info { flex: 1; min-width: 0; }
.ticket-subject { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 4px; }

.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(108,99,255,.2);border-top-color:rgba(108,99,255,.9);border-radius:50%;animation:spin .7s linear infinite; }

/* Active sub banner */
.active-sub-banner { display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(45,224,139,.12),rgba(45,224,139,.05));border:1px solid rgba(45,224,139,.25);border-radius:var(--r-md);padding:12px 14px;margin-bottom:12px; }
.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(108,99,255,.1);border-color:rgba(108,99,255,.25);color:rgba(108,99,255,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(108,99,255,.2),rgba(108,99,255,.06));border:1px solid rgba(108,99,255,.2); }
.sub-detail-hero-expired { background:linear-gradient(135deg,rgba(255,71,87,.15),rgba(255,71,87,.05));border-color:rgba(255,71,87,.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(108,99,255,.12);border-color:rgba(108,99,255,.3);color:rgba(108,99,255,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); }

/* 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(108,99,255,.15);color:rgba(108,99,255,.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;
}

/* ── 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,69,58,.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,69,58,.1);  border-color: rgba(255,69,58,.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,69,58,.12); border: 1px solid rgba(255,69,58,.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,71,87,.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,69,58,.25); background: rgba(255,69,58,.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,69,58,.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(108,99,255,.18), rgba(108,99,255,.08)); border: 1px solid rgba(108,99,255,.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(108,99,255,.5);
  background: rgba(108,99,255,.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,69,58,.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,69,58,.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,69,58,.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: var(--bg2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 14px;
}
.sdd-traffic-title {
  font-size: 11px; font-weight: 700; color: var(--hint);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 14px;
}
.sdd-traffic-stats {
  display: flex; align-items: center;
}
.sdd-traffic-item {
  flex: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.sdd-traffic-icon {
  font-size: 16px; font-weight: 800; line-height: 1;
}
.sdd-up { color: var(--accent); }
.sdd-dn { color: #a78bfa; }
.sdd-traffic-val {
  font-size: 16px; font-weight: 800; letter-spacing: -0.3px;
}
.sdd-traffic-lbl {
  font-size: 10px; color: var(--hint); text-transform: uppercase;
  letter-spacing: 0.4px; font-weight: 600;
}
.sdd-traffic-divider {
  width: 1px; height: 40px; background: var(--glass-border); flex-shrink: 0;
}

/* 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: 16px;
  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; }

/* Action buttons */
.sdd-actions {
  display: flex; gap: 10px; margin-top: 4px;
}
.sdd-btn-extend, .sdd-btn-import {
  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 { transform: scale(0.96); }
.sdd-btn-extend {
  background: var(--glass);
  color: var(--text);
}
.sdd-btn-extend:active { background: var(--bg2); }
.sdd-btn-import {
  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 {
  background: rgba(var(--accent-rgb), 0.28);
}
.sdd-btn-extend span:first-child,
.sdd-btn-import span:first-child { font-size: 24px; }