:root {
  --bg: #080d0d;
  --card: #111817;
  --line: rgba(169, 207, 199, .10);
  --muted: #899795;
  --text: #eef3f1;
  --blue: #63cdb8;
  --cyan: #63cdb8;
  --green: #63cdb8;
  --danger: #d89191;
}
body,
.screen {
  background: radial-gradient(circle at 50% -18%, #17302c 0, #0b1211 34%, #070a0a 72%);
}
.ambient { opacity: .08; filter: blur(100px); }
.ambient-one,
.ambient-two { background: #42bda7; }
.brand { gap: 11px; }
.brand-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(99, 205, 184, .22);
}
.brand small { color: #71807d; }
.card,
.period-card,
.vpn-app-card {
  background: rgba(17, 24, 23, .96);
  border-color: var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  backdrop-filter: blur(14px);
}
.hero,
.subscription { border-radius: 20px; }
.eyebrow { color: #7bb8aa; }
.pill,
.status-dot {
  color: #79e3aa;
  background: rgba(39, 181, 105, .13);
  border: 1px solid rgba(75, 218, 137, .25);
  box-shadow: 0 0 16px rgba(48, 205, 118, .10);
}
.pill.connected {
  color: #8df2b7;
  border-color: rgba(91, 230, 151, .38);
  box-shadow: 0 0 20px rgba(48, 205, 118, .18);
}
.pill.loading {
  color: #aebbb8;
  background: #151d1c;
  border-color: var(--line);
  box-shadow: none;
}
.pill.off,
.status-dot.off {
  color: #aebbb8;
  background: #151d1c;
  border-color: var(--line);
  box-shadow: none;
}
.primary,
.secondary {
  border: 1px solid var(--line);
  box-shadow: none;
}
.primary { background: #55bca7; color: #06100e; }
.secondary { background: #17201f; color: #dce4e1; }
.stat,
.server-icon,
.support-icon,
.back-button,
.quick-amounts button,
.payment-method,
.check-vpn,
.amount-box,
textarea { background: #151d1c; }
.server-icon,
.support-icon { color: #72b8a9; }
.progress { background: #17201f; }
.progress i { background: #62c3af; }
.device-panel { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: #111918; }
.device-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.device-list { display: grid; gap: 7px; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 9px 10px; border-radius: 12px; background: #151d1c; }
.device-row b, .device-row small { display: block; }
.device-row b { font-size: 12px; font-weight: 750; }
.device-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.device-state { flex: 0 0 auto; padding: 5px 8px; border-radius: 99px; font-size: 9px; font-weight: 800; }
.device-state.registered { color: #8fd9ca; background: rgba(84, 184, 164, .14); }
.device-empty { padding: 10px; color: var(--muted); font-size: 11px; text-align: center; }
.period-card.popular { background: #15201e; }
.period-card.selected,
.payment-method.selected,
textarea:focus {
  border-color: #5caa9a;
  box-shadow: 0 0 0 2px rgba(92, 170, 154, .10);
}
.popular-badge { background: #5ab8a5; color: #06110f; }
.period-icon,
.setup-steps span,
.payment-method > span,
.happ-logo,
.direct-support-avatar {
  background: #192624;
  color: #79c7b7;
}
.direct-support { background: #121b1a; border-color: var(--line); }
.direct-support small,
.direct-support i,
.text-action,
.balance small { color: #72b8a9; }
.platform-tabs button.selected,
.quick-amounts button.active {
  background: #1b2926;
  color: #dce9e6;
  border-color: #467d72;
  box-shadow: none;
}
.selected-plan { background: #15231f; border-color: var(--line); color: #8bc9bb; }
.form-result { color: #86c8b9; }
.toast { background: #e3ebe8; color: #07100e; }