/* ============================================================
   ShadowPath VPN — Design System & Global Styles
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:       #070B14;
  --surface:  #0D1220;
  --card:     #111827;
  --card2:    #161F30;

  /* Borders */
  --border:   #1E2D45;
  --border2:  #243450;

  /* Brand — Gold */
  --gold:     #F5A623;
  --gold-d:   rgba(245, 166, 35, 0.12);
  --gold-g:   rgba(245, 166, 35, 0.25);

  /* Semantic — Green (success / active) */
  --green:    #34D399;
  --green-d:  rgba(52, 211, 153, 0.12);

  /* Semantic — Red (error / danger) */
  --red:      #F87171;
  --red-d:    rgba(248, 113, 113, 0.12);

  /* Semantic — Cyan (info / Telegram) */
  --cyan:     #22D3EE;
  --cyan-d:   rgba(34, 211, 238, 0.10);

  /* Text */
  --text:     #E2E8F0;
  --muted:    #64748B;
  --muted2:   #94A3B8;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radius */
  --r-sm:   9px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;

  /* Shadows */
  --shadow-card: 0 24px 80px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 4px 20px var(--gold-g);

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-base:   0.18s ease;
  --t-slow:   0.25s ease;

  /* Layout */
  --wrap-max: 960px;
  --header-h: 58px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family:             var(--font-sans);
  font-size:               15px;
  line-height:             1.5;
  background:              var(--bg);
  color:                   var(--text);
  min-height:              100vh;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:              hidden;
}

a {
  color:           inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size:   inherit;
}

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

.mono {
  font-family: var(--font-mono);
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar        { width: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--border2); border-radius: 99px; }

/* ── Focus ──────────────────────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Ambient Background ─────────────────────────────────── */
.bg-wrap {
  position:       fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:        0;
  overflow:       hidden;
  pointer-events: none;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
}

.bg-blob--gold {
  top:        -20%;
  left:       -10%;
  width:      600px;
  height:     600px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.07) 0%, transparent 65%);
}

.bg-blob--green {
  bottom:     -10%;
  right:      -10%;
  width:      500px;
  height:     500px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.05) 0%, transparent 65%);
}

/* ── App Shell ──────────────────────────────────────────── */
#app {
  position: relative;
  z-index:  1;
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position:         sticky;
  top:              0;
  z-index:          100;
  min-height:       var(--header-h);
  display:          flex;
  align-items:      center;
  padding:          0 20px;
  gap:              16px;
  border-bottom:    1px solid var(--border);
}
.site-header::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index:          -1;
  background:       rgba(7, 11, 20, 0.90);
  backdrop-filter:  blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Auth header variant (centred, no nav) */
.site-header--auth {
  justify-content: space-between;
  position:        relative;
  background:      transparent;
  border-bottom:   none;
  backdrop-filter: none;
  padding:         20px 24px;
  height:          auto;
}

.logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
  text-decoration: none;
}

.logo__icon {
  width:   32px;
  height:  32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
}

.logo__icon svg {
  filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.45));
}

.logo__text {
  font-size:      15px;
  font-weight:    800;
  letter-spacing: -0.02em;
  color:          var(--text);
}

.logo__text em {
  font-style: normal;
  color:      var(--gold);
}

.header-nav {
  display:     flex;
  align-items: center;
  gap:         2px;
  flex:        1;
}

.header-nav__item {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       6px 13px;
  border-radius: var(--r-sm);
  font-size:     13px;
  font-weight:   500;
  color:         var(--muted2);
  background:    transparent;
  border:        none;
  transition:    all var(--t-fast);
}

.header-nav__item:hover {
  color:      var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.header-nav__item.is-active {
  color:      var(--gold);
  background: var(--gold-d);
}

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

.balance-chip {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       6px 14px;
  background:    var(--card);
  border:        1px solid var(--border2);
  border-radius: var(--r-sm);
  font-family:   var(--font-mono);
  font-size:     13px;
  font-weight:   600;
  color:         var(--text);
  cursor:        pointer;
  transition:    border-color var(--t-base);
}

.balance-chip:hover { border-color: var(--gold); }

.balance-chip__dot {
  width:         7px;
  height:        7px;
  background:    var(--gold);
  border-radius: 50%;
  box-shadow:    0 0 8px var(--gold);
  flex-shrink:   0;
}

.header-status-badge {
  font-size:   12px;
  color:       var(--muted);
  display:     flex;
  align-items: center;
  gap:         6px;
}

.header-status-badge::before {
  content:       '';
  width:         7px;
  height:        7px;
  background:    var(--green);
  border-radius: 50%;
  box-shadow:    0 0 8px var(--green);
  animation:     pulse 2s infinite;
}

.avatar-btn {
  width:         34px;
  height:        34px;
  background:    linear-gradient(135deg, var(--gold), #D97706);
  border-radius: 10px;
  border:        none;
  font-weight:   800;
  font-size:     14px;
  color:         #000;
  transition:    transform var(--t-fast);
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.avatar-btn:hover { transform: scale(1.05); }

/* ── Page Wrapper ────────────────────────────────────────── */
.wrap {
  max-width: var(--wrap-max);
  margin:    0 auto;
  padding:   26px 20px 100px;
}

/* ── Page Transition ─────────────────────────────────────── */
.page {
  animation: page-in var(--t-base) ease;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       20px;
  transition:    border-color var(--t-base);
}

.card:hover { border-color: var(--border2); }

.card--sm { padding: 15px; }

.card--gold {
  background:    linear-gradient(135deg, #1a1008 0%, #0f1520 100%);
  border:        1px solid rgba(245, 166, 35, 0.25);
  border-radius: 18px;
  padding:       24px;
  position:      relative;
  overflow:      hidden;
}

.card--gold::before {
  content:        '';
  position:       absolute;
  top:            -60px;
  right:          -60px;
  width:          200px;
  height:         200px;
  background:     radial-gradient(circle, var(--gold-d) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Section Header ──────────────────────────────────────── */
.section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   13px;
}

.section-title {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--muted2);
}

.section-link {
  font-size:   13px;
  color:       var(--gold);
  font-weight: 600;
  background:  none;
  border:      none;
  cursor:      pointer;
  transition:  opacity var(--t-fast);
}

.section-link:hover { text-decoration: underline; }

/* ── Page Title ──────────────────────────────────────────── */
.page-title {
  font-size:      22px;
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  4px;
}

.page-sub {
  color:     var(--muted);
  font-size: 14px;
}

/* ── Hero (Home) ─────────────────────────────────────────── */
.hero {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 18px;
  padding:       24px;
  margin-bottom: 18px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           16px;
}

.hero__greeting {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  6px;
}

.hero__name {
  font-size:      24px;
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  4px;
}

.hero__sub {
  font-size: 14px;
  color:     var(--muted2);
}

.hero__right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            8px;
  flex-shrink:    0;
}

.balance-display__label {
  font-size:      11px;
  color:          var(--muted);
  font-weight:    600;
  letter-spacing: .05em;
  text-align:     right;
  margin-bottom:  3px;
}

.balance-display__value {
  font-size:      28px;
  font-weight:    800;
  letter-spacing: -0.03em;
  color:          var(--gold);
}

/* ── Status Row ──────────────────────────────────────────── */
.status-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  background:    var(--card2);
  border:        1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 18px;
}

.status-pulse {
  width:         9px;
  height:        9px;
  background:    var(--green);
  border-radius: 50%;
  position:      relative;
  flex-shrink:   0;
}

.status-pulse::after {
  content:       '';
  position:      absolute;
  inset:         -3px;
  background:    var(--green);
  border-radius: 50%;
  opacity:       .3;
  animation:     pulse-ring 2s ease-in-out infinite;
}

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

.status-sep {
  width:      1px;
  height:     16px;
  background: var(--border);
  flex-shrink: 0;
}

.status-info {
  font-size:     13px;
  color:         var(--muted2);
  flex:          1;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ── Metrics Grid ────────────────────────────────────────── */
.metrics {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-bottom:         18px;
}

.metric {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       16px;
  text-align:    center;
}

.metric__value {
  font-family:    var(--font-mono);
  font-size:      26px;
  font-weight:    800;
  letter-spacing: -0.03em;
  line-height:    1;
  margin-bottom:  5px;
}

.metric__key {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* ── Server Cards ────────────────────────────────────────── */
.servers-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-bottom:         18px;
}

.server-card {
  background:    var(--card2);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       15px;
  cursor:        pointer;
  transition:    all var(--t-base);
  position:      relative;
  overflow:      hidden;
}

.server-card:hover {
  border-color: var(--border2);
  transform:    translateY(-2px);
}

.server-card.is-active { border-color: rgba(52, 211, 153, .4); }

.server-card.is-active::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     2px;
  background: var(--green);
}

.server-card__flag   { font-size: 24px; margin-bottom: 7px; display: block; }
.server-card__name   { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.server-card__loc    { font-size: 11px; color: var(--muted); margin-bottom: 8px; }

.server-card__ping {
  font-family: var(--font-mono);
  font-size:   12px;
  font-weight: 600;
}

.server-card__ping--ok  { color: var(--green); }
.server-card__ping--mid { color: var(--gold); }
.server-card__ping--bad { color: var(--red); }

.server-card__badge {
  position:      absolute;
  top:           10px;
  right:         10px;
  width:         8px;
  height:        8px;
  background:    var(--green);
  border-radius: 50%;
  box-shadow:    0 0 8px var(--green);
}

/* ── Device Row ──────────────────────────────────────────── */
.device-row {
  display:       flex;
  align-items:   center;
  gap:           13px;
  padding:       14px 15px;
  background:    var(--card2);
  border:        1px solid var(--border);
  border-radius: 14px;
  transition:    border-color var(--t-base);
}

.device-row + .device-row { margin-top: 10px; }
.device-row:hover          { border-color: var(--border2); }

.device-row__icon {
  width:          42px;
  height:         42px;
  background:     var(--gold-d);
  border-radius:  12px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
}

.device-row__info  { flex: 1; min-width: 0; }
.device-row__name  {
  font-size:     13px;
  font-weight:   600;
  margin-bottom: 1px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.device-row__sub   { font-size: 12px; color: var(--muted); }

.progress {
  height:        5px;
  background:    var(--border);
  border-radius: 99px;
  overflow:      hidden;
  margin-top:    7px;
}

.progress__fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--green), #059669);
  border-radius: 99px;
  transition:    width 0.4s ease;
}

/* ── Tags ────────────────────────────────────────────────── */
.tag {
  display:      inline-flex;
  align-items:  center;
  gap:          5px;
  padding:      3px 9px;
  border-radius: 20px;
  font-size:    11px;
  font-weight:  700;
}

.tag::before {
  content:       '';
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}

.tag--green  { background: var(--green-d); color: var(--green); }
.tag--red    { background: var(--red-d);   color: var(--red); }
.tag--gold   { background: var(--gold-d);  color: var(--gold); }

.popular-badge {
  display:       inline-block;
  background:    var(--gold);
  color:         #000;
  border-radius: 20px;
  padding:       4px 14px;
  font-size:     11px;
  font-weight:   800;
  letter-spacing: .03em;
  box-shadow:    0 2px 12px var(--gold-g);
}

/* ── Action Grid ─────────────────────────────────────────── */
.action-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.action-btn {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       15px;
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 15px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--text);
  text-align:    left;
  width:         100%;
  transition:    all var(--t-base);
}

.action-btn:hover {
  border-color: var(--border2);
  transform:    translateY(-1px);
}

.action-btn__icon {
  width:          38px;
  height:         38px;
  border-radius:  11px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  border:          none;
  border-radius:   11px;
  font-size:       13px;
  font-weight:     600;
  cursor:          pointer;
  transition:      all var(--t-base);
  padding:         9px 18px;
  white-space:     nowrap;
  line-height:     1;
}

.btn:active { transform: scale(.96); }

.btn--gold    { background: var(--gold); color: #000; }
.btn--gold:hover { background: #FFBA45; box-shadow: var(--shadow-gold); }

.btn--outline {
  background: transparent;
  color:      var(--text);
  border:     1px solid var(--border2);
}
.btn--outline:hover { border-color: var(--gold); color: var(--gold); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color:      var(--muted2);
  border:     1px solid var(--border);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }

.btn--danger {
  background: var(--red-d);
  color:      var(--red);
  border:     1px solid rgba(248, 113, 113, .2);
}
.btn--danger:hover { background: rgba(248, 113, 113, .2); }

.btn--cyan {
  background: rgba(34, 211, 238, 0.08);
  color:      var(--cyan);
  border:     1.5px solid rgba(34, 211, 238, 0.20);
}
.btn--cyan:hover { background: rgba(34, 211, 238, 0.14); border-color: rgba(34, 211, 238, 0.35); }

.btn--sm   { padding: 7px 14px; font-size: 12px; border-radius: 9px; }
.btn--lg   { padding: 12px 24px; font-size: 14px; border-radius: 13px; }
.btn--full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* Primary (full-width, auth page) */
.btn--primary {
  width:         100%;
  padding:       13px;
  background:    var(--gold);
  color:         #000;
  border:        none;
  border-radius: var(--r-md);
  font-size:     14px;
  font-weight:   700;
}

.btn--primary:hover  { background: #FFBA45; box-shadow: var(--shadow-gold); }
.btn--primary:active { transform: scale(.97); }

/* ── Inputs ──────────────────────────────────────────────── */
.form-group   { margin-bottom: 15px; }

.form-label {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  color:          var(--muted2);
  margin-bottom:  6px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.form-input {
  width:         100%;
  background:    var(--card2);
  border:        1.5px solid var(--border2);
  border-radius: var(--r-md);
  padding:       12px 16px;
  color:         var(--text);
  font-size:     14px;
  outline:       none;
  transition:    border-color var(--t-base), box-shadow var(--t-base);
}

.form-input:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px var(--gold-d);
}

.form-input::placeholder { color: var(--muted); }
.form-input.is-error     { border-color: var(--red); box-shadow: 0 0 0 3px rgba(248, 113, 113, .08); }

.error-msg        { font-size: 12px; color: var(--red); margin-top: 5px; display: none; }
.error-msg.is-visible { display: block; }

/* Phone input prefix */
.phone-wrap               { position: relative; }
.phone-wrap .form-input   { padding-left: 38px; }
.phone-prefix {
  position:       absolute;
  left:           16px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      14px;
  font-weight:    600;
  pointer-events: none;
  z-index:        1;
}

/* Password toggle */
.input-wrap              { position: relative; }
.input-wrap .form-input  { padding-right: 46px; }

.eye-btn {
  position:  absolute;
  right:     12px;
  top:       50%;
  transform: translateY(-50%);
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--muted);
  padding:    4px;
  transition: color var(--t-fast);
  display:    flex;
  align-items: center;
}

.eye-btn:hover { color: var(--text); }

/* Password strength */
.strength        { height: 3px; background: var(--border); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.strength__fill  { height: 100%; border-radius: 99px; transition: all .3s; width: 0; }
.strength__label { font-size: 11px; margin-top: 4px; font-weight: 500; min-height: 16px; }

/* ── Auth Page ───────────────────────────────────────────── */
.auth-main {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  min-height:      calc(100vh - 80px);
}

.auth-card {
  width:         100%;
  max-width:     420px;
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--r-2xl);
  padding:       36px;
  box-shadow:    var(--shadow-card);
}

.auth-title {
  font-size:      24px;
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  5px;
}

.auth-sub {
  font-size:     14px;
  color:         var(--muted2);
  margin-bottom: 24px;
}

/* Tabs (Login / Register) */
.tabs {
  display:       flex;
  background:    var(--card2);
  border-radius: var(--r-md);
  padding:       4px;
  margin-bottom: 24px;
  gap:           4px;
}

.tab {
  flex:          1;
  padding:       9px;
  text-align:    center;
  font-size:     13px;
  font-weight:   600;
  border-radius: var(--r-sm);
  cursor:        pointer;
  transition:    all var(--t-base);
  color:         var(--muted2);
  background:    transparent;
  border:        none;
}

.tab.is-active { background: var(--gold); color: #000; }

/* Method toggle (email / phone) */
.method-toggle {
  display:       flex;
  background:    var(--card2);
  border-radius: 10px;
  padding:       3px;
  margin-bottom: 18px;
  gap:           3px;
}

.method-btn {
  flex:          1;
  padding:       7px 10px;
  font-size:     12px;
  font-weight:   600;
  border-radius: 8px;
  cursor:        pointer;
  transition:    all var(--t-base);
  color:         var(--muted2);
  background:    transparent;
  border:        none;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           5px;
}

.method-btn.is-active {
  background: var(--card);
  color:      var(--text);
  border:     1px solid var(--border2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Forgot password */
.forgot {
  text-align:    right;
  margin-top:   -8px;
  margin-bottom: 14px;
}

.forgot__link {
  font-size:   12px;
  color:       var(--muted2);
  transition:  color var(--t-fast);
}

.forgot__link:hover { color: var(--gold); }

/* Divider */
.divider {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      16px 0;
}

.divider__line {
  flex:       1;
  height:     1px;
  background: var(--border);
}

.divider__text {
  font-size:      11px;
  font-weight:    600;
  color:          var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space:    nowrap;
}

/* Success state */
.success-wrap     { display: none; text-align: center; padding: 16px 0; }
.success-wrap.is-visible { display: block; }

.success-icon {
  width:          68px;
  height:         68px;
  background:     var(--green-d);
  border-radius:  50%;
  display:        flex;
  align-items:    center;
  justify-content: center;
  margin:         0 auto 16px;
  animation:      pop .4s cubic-bezier(.4, 0, .2, 1);
}

.success-title  { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.success-sub    { font-size: 14px; color: var(--muted2); margin-bottom: 20px; }
.success-loader { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); }

/* Policy note */
.policy {
  font-size:   12px;
  color:       var(--muted);
  text-align:  center;
  margin-top:  16px;
  line-height: 1.65;
}

.policy a {
  color:            var(--muted2);
  border-bottom:    1px solid transparent;
  transition:       all var(--t-fast);
}

.policy a:hover { color: var(--gold); border-color: rgba(245, 166, 35, .3); }

/* ── Tariff Cards ────────────────────────────────────────── */
.tariff-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-bottom:         18px;
  align-items:           end;
}

.tariff-wrap { position: relative; }
.tariff-wrap--popular { padding-top: 22px; }

.tariff {
  background:    var(--card2);
  border:        1.5px solid var(--border);
  border-radius: 15px;
  padding:       17px;
  text-align:    center;
  transition:    all var(--t-base);
  height:        100%;
}

.tariff--popular   { border-color: var(--gold); }
.tariff__plan      { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.tariff__period    { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tariff__price     { font-family: var(--font-mono); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.tariff__per       { font-size: 11px; color: var(--muted); margin-bottom: 13px; }
.popular-label     { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2; }

/* ── Referrals ───────────────────────────────────────────── */
.ref-hero {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 18px;
  padding:       26px;
  margin-bottom: 18px;
  text-align:    center;
  position:      relative;
  overflow:      hidden;
}

.ref-hero::after {
  content:    '';
  position:   absolute;
  bottom:     -60px;
  right:      -60px;
  width:      200px;
  height:     200px;
  background: radial-gradient(circle, var(--gold-d) 0%, transparent 70%);
}

.steps       { display: flex; flex-direction: column; gap: 14px; }
.step        { display: flex; align-items: flex-start; gap: 13px; }
.step__num   { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.step__num--gold  { background: var(--gold-d); color: var(--gold); }
.step__num--green { background: var(--green-d); color: var(--green); }
.step__text  { padding-top: 4px; font-size: 14px; color: var(--muted2); }

/* Copy row */
.copy-row           { display: flex; gap: 8px; }
.copy-row .form-input { flex: 1; font-family: var(--font-mono); font-size: 12px; }

/* ── Profile Rows ────────────────────────────────────────── */
.profile-row {
  display:       flex;
  align-items:   center;
  gap:           13px;
  padding:       14px 15px;
  background:    var(--card2);
  border:        1px solid var(--border);
  border-radius: 14px;
  cursor:        pointer;
  transition:    border-color var(--t-base);
}

.profile-row + .profile-row { margin-top: 10px; }
.profile-row:hover           { border-color: var(--border2); }

.profile-row__icon {
  width:          40px;
  height:         40px;
  border-radius:  12px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
}

/* ── Wizard ──────────────────────────────────────────────── */
.wizard {
  display:          none;
  position:         fixed;
  inset:            0;
  z-index:          600;
  background:       rgba(0, 0, 0, .85);
  backdrop-filter:  blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items:      center;
  justify-content:  center;
  padding:          20px;
}

.wizard.is-open { display: flex; }

.wizard__panel {
  width:         100%;
  max-width:     480px;
  background:    var(--surface);
  border-radius: var(--r-2xl);
  border:        1px solid var(--border2);
  padding:       0 0 20px;
  max-height:    90vh;
  overflow-y:    auto;
  animation:     wiz-up .26s cubic-bezier(.4, 0, .2, 1);
}

.wizard__bar {
  width:         38px;
  height:        4px;
  background:    var(--border2);
  border-radius: 99px;
  margin:        18px auto 0;
}

.wizard__header {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     16px 20px 0;
}

.wizard__back {
  width:          34px;
  height:         34px;
  background:     rgba(255, 255, 255, .05);
  border:         1px solid var(--border);
  border-radius:  var(--r-sm);
  display:        flex;
  align-items:    center;
  justify-content: center;
  cursor:         pointer;
  flex-shrink:    0;
  transition:     background var(--t-fast);
}

.wizard__back:hover { background: rgba(255, 255, 255, .08); }

.wizard__title-main { font-size: 15px; font-weight: 700; }
.wizard__title-step { font-size: 12px; color: var(--muted); margin-top: 1px; }

.wizard__dots {
  display:     flex;
  gap:         4px;
  align-items: center;
}

.wiz-dot {
  height:        6px;
  border-radius: 99px;
  background:    var(--border2);
  transition:    all var(--t-slow);
}

.wiz-dot--done   { background: var(--gold); width: 6px; }
.wiz-dot--active { background: var(--gold); width: 18px; }
.wiz-dot--inactive { width: 6px; }

.wizard__body { padding: 16px 20px; }

.wizard__step         { display: none; }
.wizard__step.is-active { display: block; }

/* Choice grid (device selection) */
.choice-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-full  { grid-column: span 2; }

.choice {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            9px;
  padding:        20px 10px;
  background:     var(--card2);
  border:         1.5px solid var(--border);
  border-radius:  14px;
  cursor:         pointer;
  font-size:      13px;
  font-weight:    600;
  color:          var(--muted2);
  transition:     all var(--t-base);
  text-align:     center;
}

.choice:hover,
.choice.is-selected { border-color: var(--gold); color: var(--gold); background: var(--gold-d); }

/* Proto list (protocol / tariff / server selection) */
.proto-list    { display: flex; flex-direction: column; gap: 9px; }

.proto {
  display:     flex;
  align-items: center;
  gap:         13px;
  padding:     14px 15px;
  background:  var(--card2);
  border:      1.5px solid var(--border);
  border-radius: 13px;
  cursor:      pointer;
  transition:  all var(--t-base);
}

.proto:hover,
.proto.is-selected { border-color: var(--gold); background: var(--gold-d); }

.proto__icon {
  width:          38px;
  height:         38px;
  border-radius:  10px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
}

.proto__name { font-size: 14px; font-weight: 600; }
.proto__sub  { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* Summary rows */
.summary-rows { background: var(--card2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }

.summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         12px 15px;
  font-size:       13px;
}

.summary-row + .summary-row { border-top: 1px solid var(--border); }
.summary-row__key   { color: var(--muted2); }
.summary-row__value { font-weight: 600; }

/* ── Bottom Navigation ───────────────────────────────────── */
.bottom-nav {
  display:     none;
  position:    fixed;
  bottom:      0;
  left:        0;
  right:       0;
  background:  rgba(13, 18, 32, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top:  1px solid var(--border);
  padding:     8px 0 max(8px, env(safe-area-inset-bottom));
  z-index:     200;
}

.bottom-nav__item {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  padding:        5px;
  cursor:         pointer;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .03em;
  color:          var(--muted);
  border:         none;
  background:     transparent;
  transition:     color var(--t-fast);
}

.bottom-nav__item.is-active { color: var(--gold); }

/* ── Toast ───────────────────────────────────────────────── */
.toast-portal {
  position:       fixed;
  bottom:         80px;
  left:           50%;
  transform:      translateX(-50%);
  z-index:        999;
  pointer-events: none;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
}

.toast {
  padding:       10px 20px;
  border-radius: var(--r-md);
  font-size:     13px;
  font-weight:   700;
  box-shadow:    0 4px 20px rgba(52, 211, 153, .4);
  animation:     toast-in .25s ease;
  text-align:    center;
  white-space:   nowrap;
}

.toast--green  { background: var(--green); color: #000; }
.toast--gold   { background: var(--gold);  color: #000; }
.toast--red    { background: var(--red);   color: #fff; }
.toast--cyan   { background: var(--cyan);  color: #000; }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  animation:     spin .7s linear infinite;
  display:       inline-block;
  flex-shrink:   0;
}

.spinner--dark  { border: 2px solid rgba(0, 0, 0, .2);   border-top-color: #000; }
.spinner--light { border: 2px solid rgba(255, 255, 255, .1); border-top-color: var(--muted2); }

/* ── Divider line ────────────────────────────────────────── */
hr {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     18px 0;
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background:  var(--surface);
  border-top:  1px solid var(--border);
  padding:     28px 20px 40px;
  margin-top:  40px;
}

.footer-inner  { max-width: var(--wrap-max); margin: 0 auto; }

.footer-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   24px;
  margin-bottom:         24px;
}

.footer-col-title {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  10px;
}

.footer-link {
  display:     block;
  font-size:   13px;
  color:       var(--muted2);
  margin-bottom: 7px;
  transition:  color var(--t-fast);
  cursor:      pointer;
  background:  transparent;
  border:      none;
  padding:     0;
  text-align:  left;
  width:       100%;
}

.footer-link:hover { color: var(--gold); }

.footer-req {
  font-size:   12px;
  color:       var(--muted);
  line-height: 1.8;
}

.footer-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding-top:     20px;
  border-top:      1px solid var(--border);
  gap:             16px;
  flex-wrap:       wrap;
}

.footer-copy { font-size: 12px; color: var(--muted); }

.footer-badges {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.badge-18 {
  background:    var(--red-d);
  color:         var(--red);
  border:        1px solid rgba(248, 113, 113, .2);
  border-radius: 6px;
  padding:       2px 7px;
  font-size:     11px;
  font-weight:   800;
}

/* ── Cookie Bar ──────────────────────────────────────────── */
.cookie-bar {
  position:      fixed;
  bottom:        16px;
  left:          50%;
  transform:     translateX(-50%);
  z-index:       500;
  background:    var(--card);
  border:        1px solid var(--border2);
  border-radius: 16px;
  padding:       14px 18px;
  display:       flex;
  align-items:   center;
  gap:           16px;
  max-width:     600px;
  width:         calc(100% - 32px);
  box-shadow:    0 8px 40px rgba(0, 0, 0, .4);
  animation:     toast-in .3s ease;
}

.cookie-bar.is-hidden { display: none; }

.cookie-bar__text {
  flex:      1;
  font-size: 13px;
  color:     var(--muted2);
}

.cookie-bar__text a { color: var(--gold); }

.cookie-bar__actions {
  display:     flex;
  gap:         8px;
  flex-shrink: 0;
}

/* ── Utility ─────────────────────────────────────────────── */
.visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  overflow:   hidden;
  clip:       rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(1);   opacity: .3; }
  50%       { transform: scale(1.6); opacity: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

@keyframes wiz-up {
  from { transform: scale(.95); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  30%       { transform: translateX(7px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(2px); }
}

/* Skeleton shimmer */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ── Toast portal (переопределить позиционирование) ─────────── */
.toast-portal {
  position:        fixed;
  bottom:          24px;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         9999;
  pointer-events:  none;
  display:         flex;
  flex-direction:  column-reverse;   /* новые снизу → старые сверху */
  align-items:     center;
  gap:             8px;
  width:           max-content;
  max-width:       calc(100vw - 32px);
}

.toast-portal > * {
  pointer-events: auto;
}

/* ── Button loading state ──────────────────────────────────── */
button[aria-busy="true"] {
  cursor:    not-allowed;
  opacity:   .85;
}

/* ── Field error visibility ─────────────────────────────────── */
.error-msg              { display: none; }
.error-msg.is-visible   { display: block; }

/* ── Form opacity during loading ────────────────────────────── */
[aria-busy="true"] input,
[aria-busy="true"] select,
[aria-busy="true"] textarea {
  opacity: .6;
  pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
  .header-nav          { display: none; }
  .bottom-nav          { display: flex; }
  .wrap                { padding: 18px 14px 90px; }
  .hero                { flex-direction: column; align-items: flex-start; }
  .hero__right         { align-items: flex-start; width: 100%; flex-direction: row; justify-content: space-between; }
  .servers-grid        { grid-template-columns: 1fr 1fr; }
  .tariff-grid         { grid-template-columns: 1fr; }
  .footer-grid         { grid-template-columns: 1fr; gap: 20px; }
  .toast-portal        { bottom: 90px; }
  .cookie-bar          { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .auth-card           { padding: 24px; border-radius: 20px; }
  .auth-title          { font-size: 20px; }
  .action-grid         { grid-template-columns: 1fr; }
  .servers-grid        { grid-template-columns: 1fr 1fr; }
}

/* ── Tariff Cards (billing page) ───────────────────────────── */
.tariff-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-bottom:         18px;
  align-items:           end;
}

.trf-wrap         { position: relative; }
.trf-wrap--popular { padding-top: 22px; }

.trf {
  background:    var(--card2);
  border:        1.5px solid var(--border);
  border-radius: 15px;
  padding:       17px;
  text-align:    center;
  transition:    all var(--t-base);
  height:        100%;
}

.trf.popular     { border-color: var(--gold); }
.trf--selected   { border-color: var(--green); box-shadow: 0 0 0 2px rgba(52,211,153,0.15); }

.trf-plan   { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.trf-period { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.trf-price  { font-family: var(--font-mono); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.trf-per    { font-size: 11px; color: var(--muted); margin-bottom: 13px; }

.popular-label { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2; }
.pop-badge {
  display:        inline-block;
  background:     var(--gold);
  color:          #000;
  border-radius:  20px;
  padding:        4px 14px;
  font-size:      11px;
  font-weight:    800;
  letter-spacing: .03em;
  box-shadow:     0 2px 12px var(--gold-g);
}

/* ── Auth header variant ────────────────────────────────────── */
.site-header--auth {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 24px;
  position:        relative;
  z-index:         10;
}

.hdr-badge {
  font-size:   12px;
  color:       var(--muted);
  display:     flex;
  align-items: center;
  gap:         6px;
}
.hdr-badge::before {
  content:       '';
  width:         7px;
  height:        7px;
  background:    var(--green);
  border-radius: 50%;
  box-shadow:    0 0 8px var(--green);
  animation:     pulse 2s infinite;
}

/* ── Hero (home) ────────────────────────────────────────────── */
.hero {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 18px;
  padding:       24px;
  margin-bottom: 18px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           16px;
}
.hero-left   { flex: 1; }
.hero-right  { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.hero-greeting { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.hero-name     { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; }
.hero-sub      { font-size: 14px; color: var(--muted2); }
.bal-big { text-align: right; }
.bal-lbl { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 3px; }
.bal-val { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--gold); }

/* ── Status row ─────────────────────────────────────────────── */
.status-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  background:    var(--card2);
  border:        1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 18px;
}
.pulse {
  width:         9px;
  height:        9px;
  background:    var(--green);
  border-radius: 50%;
  position:      relative;
  flex-shrink:   0;
}
.pulse::after {
  content:       '';
  position:      absolute;
  inset:         -3px;
  background:    var(--green);
  border-radius: 50%;
  opacity:       .3;
  animation:     pulse-ring 2s ease-in-out infinite;
}
.status-txt  { font-size: 13px; font-weight: 600; color: var(--green); }
.status-sep  { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }
.status-info { font-size: 13px; color: var(--muted2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Metrics ─────────────────────────────────────────────────── */
.metrics {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-bottom:         18px;
}
.metric          { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; text-align: center; }
.metric-v        { font-family: var(--font-mono); font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 5px; }
.metric-k        { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* ── Server grid ─────────────────────────────────────────────── */
.servers {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-bottom:         18px;
}
.srv {
  background:    var(--card2);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       15px;
  cursor:        pointer;
  transition:    all var(--t-base);
  position:      relative;
  overflow:      hidden;
}
.srv:hover { border-color: var(--border2); transform: translateY(-2px); }
.srv.on    { border-color: rgba(52,211,153,.4); }
.srv.on::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--green); }
.srv-flag  { font-size: 24px; margin-bottom: 7px; display: block; }
.srv-name  { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.srv-loc   { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.srv-ping  { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.srv-ping.ok  { color: var(--green); }
.srv-ping.mid { color: var(--gold); }
.srv-ping.bad { color: var(--red); }
.srv-badge { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 8px var(--green); }

/* ── Device row ─────────────────────────────────────────────── */
.dev {
  display:       flex;
  align-items:   center;
  gap:           13px;
  padding:       14px 15px;
  background:    var(--card2);
  border:        1px solid var(--border);
  border-radius: 14px;
  transition:    border-color var(--t-base);
  margin-bottom: 10px;
}
.dev:hover  { border-color: var(--border2); }
.dev-ico    { width: 42px; height: 42px; background: var(--gold-d); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dev-info   { flex: 1; min-width: 0; }
.dev-name   { font-size: 13px; font-weight: 600; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-sub    { font-size: 12px; color: var(--muted); }
.prog       { height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; margin-top: 7px; }
.prog-fill  { height: 100%; background: linear-gradient(90deg, var(--green), #059669); border-radius: 99px; }

/* ── Section headers ─────────────────────────────────────────── */
.sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sec-ttl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted2); }
.sec-lnk { font-size: 13px; color: var(--gold); cursor: pointer; font-weight: 600; background: none; border: none; transition: opacity var(--t-fast); }
.sec-lnk:hover { text-decoration: underline; }

/* ── Quick action grid ──────────────────────────────────────── */
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.act {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       15px;
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 15px;
  cursor:        pointer;
  transition:    all var(--t-base);
  font-size:     13px;
  font-weight:   600;
  color:         var(--text);
  text-align:    left;
  width:         100%;
}
.act:hover { border-color: var(--border2); transform: translateY(-1px); }
.act-ic    { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Referrals ──────────────────────────────────────────────── */
.ref-hero {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 18px;
  padding:       26px;
  margin-bottom: 18px;
  text-align:    center;
  position:      relative;
  overflow:      hidden;
}
.ref-hero::after {
  content:    '';
  position:   absolute;
  bottom:     -60px;
  right:      -60px;
  width:      200px;
  height:     200px;
  background: radial-gradient(circle, var(--gold-d) 0%, transparent 70%);
  pointer-events: none;
}
.steps { display: flex; flex-direction: column; gap: 14px; }
.step  { display: flex; align-items: flex-start; gap: 13px; }
.step-n { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.step-n.g  { background: var(--gold-d);  color: var(--gold); }
.step-n.ok { background: var(--green-d); color: var(--green); }
.step-t { padding-top: 4px; font-size: 14px; color: var(--muted2); }

/* ── Copy row ───────────────────────────────────────────────── */
.copy-row           { display: flex; gap: 8px; }
.copy-row .form-input { flex: 1; }

/* ── Profile rows ───────────────────────────────────────────── */
.prof-row {
  display:       flex;
  align-items:   center;
  gap:           13px;
  padding:       14px 15px;
  background:    var(--card2);
  border:        1px solid var(--border);
  border-radius: 14px;
  cursor:        pointer;
  transition:    border-color var(--t-base);
}
.prof-row + .prof-row { margin-top: 10px; }
.prof-row:hover       { border-color: var(--border2); }
.prof-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Gold card ─────────────────────────────────────────────── */
.gcard {
  background:    linear-gradient(135deg, #1a1008 0%, #0f1520 100%);
  border:        1px solid rgba(245,166,35,0.25);
  border-radius: 18px;
  padding:       24px;
  position:      relative;
  overflow:      hidden;
  margin-bottom: 18px;
}
.gcard::before {
  content:        '';
  position:       absolute;
  top:            -60px;
  right:          -60px;
  width:          200px;
  height:         200px;
  background:     radial-gradient(circle, var(--gold-d) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Wizard choice grid ─────────────────────────────────────── */
.choice-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-full  { grid-column: span 2; }
.choice {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             9px;
  padding:         20px 10px;
  background:      var(--card2);
  border:          1.5px solid var(--border);
  border-radius:   14px;
  cursor:          pointer;
  font-size:       13px;
  font-weight:     600;
  color:           var(--muted2);
  transition:      all var(--t-base);
  text-align:      center;
}
.choice:hover,
.choice.sel { border-color: var(--gold); color: var(--gold); background: var(--gold-d); }

/* ── Proto list (purchase flow) ─────────────────────────────── */
.proto-list   { display: flex; flex-direction: column; gap: 9px; }
.proto {
  display:     flex;
  align-items: center;
  gap:         13px;
  padding:     14px 15px;
  background:  var(--card2);
  border:      1.5px solid var(--border);
  border-radius: 13px;
  cursor:      pointer;
  transition:  all var(--t-base);
}
.proto:hover,
.proto.sel { border-color: var(--gold); background: var(--gold-d); }
.proto-ico  { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.proto-name { font-size: 14px; font-weight: 600; }
.proto-sub  { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ── Summary rows ───────────────────────────────────────────── */
.summary-rows { background: var(--card2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.summary-row  { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; font-size: 13px; }
.summary-row + .summary-row { border-top: 1px solid var(--border); }

/* ── Tags ───────────────────────────────────────────────────── */
.tag         { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tag-g    { background: var(--green-d); color: var(--green); }
.tag-r    { background: var(--red-d);   color: var(--red); }
.tag-gold { background: var(--gold-d);  color: var(--gold); }

/* ── Spinner ─────────────────────────────────────────────────── */
.spinner       { width: 16px; height: 16px; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; flex-shrink: 0; }
.spinner--dark { border: 2px solid rgba(0,0,0,.2);   border-top-color: #000; }
.spinner--light{ border: 2px solid rgba(255,255,255,.1); border-top-color: var(--muted2); }

/* ── Auth success wrap ──────────────────────────────────────── */
.success-wrap          { display: none; text-align: center; padding: 16px 0; }
.success-wrap.is-visible { display: block; }
.success-icon { width: 68px; height: 68px; background: var(--green-d); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; animation: pop .4s cubic-bezier(.4,0,.2,1); }
.success-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.success-sub   { font-size: 14px; color: var(--muted2); margin-bottom: 20px; }
.success-loader { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); }

/* ── Config viewer (success page) ───────────────────────────── */
.config-viewer { padding: 4px 0; }

/* ── Responsive additions ───────────────────────────────────── */
@media (max-width: 720px) {
  .servers   { grid-template-columns: 1fr 1fr; }
  .metrics   { grid-template-columns: repeat(3, 1fr); }
  .act-grid  { grid-template-columns: 1fr; }
  .tariff-grid { grid-template-columns: 1fr; }
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-right { flex-direction: row; justify-content: space-between; width: 100%; align-items: center; }
}
@media (max-width: 480px) {
  .servers   { grid-template-columns: 1fr 1fr; }
  .choice-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Accessibility: focus on gold-bg buttons ───────────────── */
.btn--gold:focus-visible,
.btn--primary:focus-visible,
.tab.is-active:focus-visible {
  outline-color: var(--text);
}

/* ── Accessibility: reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Responsive: 720px additions ───────────────────────────── */
@media (max-width: 720px) {
  .cookie-bar { bottom: 80px; }
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__actions .btn { flex: 1; }
  .site-footer { padding: 20px 14px 30px; }
  .auth-card { padding: 28px 20px; }
  .bal-lbl { text-align: left; }
  .bal-val { font-size: 20px; }
}

/* ── Responsive: small phones ──────────────────────────────── */
@media (max-width: 380px) {
  .servers { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
}

/* ── Skip-to-content (a11y) ────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--gold);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.skip-link:focus {
  top: 16px;
}