/*
  shalVPN Product Design v2 foundation.
  Phase 1 only: design tokens and opt-in shell/component classes.
  Keep this file additive; route handlers, POST/API behavior and business logic live elsewhere.
*/

:root {
  --shal-v2-background: #07101b;
  --shal-v2-surface: #101e32;
  --shal-v2-surface-elevated: #142a44;
  --shal-v2-primary: #3ad0ff;
  --shal-v2-accent: #2f8cff;
  --shal-v2-success: #69f5b9;
  --shal-v2-warning: #ffd25a;
  --shal-v2-text: #ecf6ff;
  --shal-v2-muted: #aebed2;
  --shal-v2-danger: #ff586e;
  --shal-v2-border: rgba(174, 190, 210, .16);
  --shal-v2-border-strong: rgba(58, 208, 255, .34);
  --shal-v2-focus: rgba(58, 208, 255, .28);
  --shal-v2-shadow-panel: 0 18px 48px rgba(0, 0, 0, .28);
  --shal-v2-shadow-soft: 0 10px 30px rgba(0, 0, 0, .22);
  --shal-v2-radius-xs: 8px;
  --shal-v2-radius-sm: 12px;
  --shal-v2-radius-md: 16px;
  --shal-v2-radius-lg: 20px;
  --shal-v2-radius-xl: 28px;
  --shal-v2-space-1: 4px;
  --shal-v2-space-2: 8px;
  --shal-v2-space-3: 12px;
  --shal-v2-space-4: 16px;
  --shal-v2-space-5: 20px;
  --shal-v2-space-6: 24px;
  --shal-v2-space-8: 32px;
  --shal-v2-space-10: 40px;
  --shal-v2-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --shal-v2-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.v2-shell,
.v2-public-shell,
.v2-auth-shell,
.v2-cabinet-shell,
.v2-admin-shell {
  color: var(--shal-v2-text);
  font-family: var(--shal-v2-font-sans);
}

.v2-public-shell,
.v2-auth-shell,
.v2-cabinet-shell {
  background:
    radial-gradient(circle at 18% 10%, rgba(58, 208, 255, .14), transparent 28%),
    linear-gradient(180deg, var(--shal-v2-background), #050b13 100%);
}

.v2-admin-shell {
  min-height: 100%;
  background: var(--shal-v2-background);
}

.v2-container {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.v2-auth-card {
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.v2-auth-card::before {
  background: linear-gradient(90deg, var(--shal-v2-primary), var(--shal-v2-accent), var(--shal-v2-success));
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.v2-auth-card h1 {
  letter-spacing: 0;
}

.v2-auth-copy {
  color: var(--shal-v2-muted);
  margin-bottom: var(--shal-v2-space-5);
}

.v2-auth-actions,
.v2-auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--shal-v2-space-3);
  margin-top: var(--shal-v2-space-4);
}

.v2-auth-links {
  color: var(--shal-v2-muted);
  justify-content: space-between;
}

.v2-auth-links a,
.v2-auth-link {
  color: var(--shal-v2-primary);
  font-weight: 850;
  text-decoration: none;
}

.v2-auth-links a:hover,
.v2-auth-link:hover {
  text-decoration: underline;
}

.v2-auth-card .oauth-entrypoints {
  margin-top: var(--shal-v2-space-6);
}

.v2-auth-card .oauth-btn {
  border-color: var(--shal-v2-border);
  border-radius: var(--shal-v2-radius-md);
}

.v2-hero {
  display: grid;
  gap: var(--shal-v2-space-6);
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  padding: var(--shal-v2-space-6) 0 var(--shal-v2-space-8);
}

.v2-hero-copy,
.v2-hero-panel {
  border: 1px solid var(--shal-v2-border);
  border-radius: var(--shal-v2-radius-xl);
  background:
    radial-gradient(circle at 18% 0, rgba(58, 208, 255, .16), transparent 32%),
    linear-gradient(180deg, rgba(20, 42, 68, .92), rgba(16, 30, 50, .92));
  box-shadow: var(--shal-v2-shadow-panel);
  padding: clamp(24px, 4vw, 48px);
}

.v2-kicker {
  align-items: center;
  background: rgba(58, 208, 255, .10);
  border: 1px solid rgba(58, 208, 255, .28);
  border-radius: 999px;
  color: #bcefff;
  display: inline-flex;
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .04em;
  margin-bottom: var(--shal-v2-space-4);
  padding: 7px 12px;
  text-transform: uppercase;
}

.v2-hero h1 {
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  line-height: .94;
  margin: 0 0 var(--shal-v2-space-4);
}

.v2-lead {
  color: var(--shal-v2-muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 760px;
}

.v2-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--shal-v2-space-3);
  margin-top: var(--shal-v2-space-5);
}

.v2-grid-3,
.v2-grid-4 {
  display: grid;
  gap: var(--shal-v2-space-4);
}

.v2-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v2-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v2-section {
  margin: var(--shal-v2-space-8) 0;
}

.v2-section-head {
  display: flex;
  gap: var(--shal-v2-space-4);
  justify-content: space-between;
  margin-bottom: var(--shal-v2-space-4);
}

.v2-section-head p {
  color: var(--shal-v2-muted);
  max-width: 680px;
}

.v2-step-list {
  counter-reset: v2-step;
  display: grid;
  gap: var(--shal-v2-space-3);
  margin: 0;
  padding: 0;
}

.v2-step-list li {
  align-items: flex-start;
  counter-increment: v2-step;
  display: grid;
  gap: var(--shal-v2-space-3);
  grid-template-columns: 34px minmax(0, 1fr);
  list-style: none;
}

.v2-step-list li::before {
  align-items: center;
  background: rgba(58, 208, 255, .12);
  border: 1px solid rgba(58, 208, 255, .28);
  border-radius: 999px;
  color: var(--shal-v2-primary);
  content: counter(v2-step);
  display: inline-flex;
  font-weight: 950;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.v2-platform-card {
  color: inherit;
  display: grid;
  gap: var(--shal-v2-space-3);
  text-decoration: none;
}

.v2-platform-card small,
.v2-payment-card small,
.v2-device-card small {
  color: var(--shal-v2-muted);
  display: block;
}

.v2-download-section {
  scroll-margin-top: 120px;
}

.v2-legal-card,
.v2-error-card {
  max-width: 980px;
  margin-inline: auto;
}

.v2-legal-actions {
  border-bottom: 1px solid var(--shal-v2-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--shal-v2-space-3);
  margin-bottom: var(--shal-v2-space-5);
  padding-bottom: var(--shal-v2-space-4);
}

.v2-legal-content {
  color: var(--shal-v2-text);
}

.v2-legal-content p,
.v2-legal-content li {
  color: var(--shal-v2-muted);
}

.v2-admin-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--shal-v2-background);
}

.main:has(.v2-admin-layout) > .wrap {
  width: min(1500px, calc(100% - 24px));
}

.v2-admin-sidebar {
  border-right: 1px solid var(--shal-v2-border);
  background: #0d192a;
  padding: var(--shal-v2-space-5);
}

.v2-admin-brand {
  color: var(--shal-v2-text);
  font-size: 1.05rem;
  font-weight: 950;
  margin-bottom: var(--shal-v2-space-5);
}

.v2-admin-nav {
  display: grid;
  gap: var(--shal-v2-space-2);
}

.v2-admin-nav-item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--shal-v2-radius-md);
  color: var(--shal-v2-muted);
  display: flex;
  font-weight: 850;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 12px;
  text-decoration: none;
}

.v2-admin-nav-item:hover,
.v2-admin-nav-item:focus-visible,
.v2-admin-nav-item[aria-current="page"] {
  background: rgba(58, 208, 255, .10);
  border-color: rgba(58, 208, 255, .28);
  color: var(--shal-v2-text);
}

.v2-admin-nav-item.is-disabled {
  cursor: not-allowed;
  opacity: .58;
}

.v2-admin-nav-item small {
  color: var(--shal-v2-muted);
  font-size: .72rem;
}

.v2-admin-sidebar-note {
  border: 1px solid rgba(255, 210, 90, .22);
  border-radius: var(--shal-v2-radius-md);
  color: #ffe7a3;
  font-size: .86rem;
  line-height: 1.45;
  margin-top: var(--shal-v2-space-5);
  padding: var(--shal-v2-space-3);
  background: rgba(255, 210, 90, .08);
}

.v2-admin-content {
  min-width: 0;
  padding: var(--shal-v2-space-6);
}

.v2-admin-topbar {
  background:
    radial-gradient(circle at 12% 0, rgba(58, 208, 255, .13), transparent 34%),
    linear-gradient(180deg, rgba(20, 42, 68, .88), rgba(16, 30, 50, .86));
  border: 1px solid var(--shal-v2-border);
  border-radius: var(--shal-v2-radius-xl);
  box-shadow: var(--shal-v2-shadow-soft);
  margin-bottom: var(--shal-v2-space-5);
  padding: var(--shal-v2-space-6);
}

.v2-admin-topbar h1 {
  margin: 0 0 var(--shal-v2-space-2);
}

.v2-admin-topbar p {
  color: var(--shal-v2-muted);
  margin: 0;
  max-width: 860px;
}

.v2-admin-shell .card {
  background: linear-gradient(180deg, rgba(20, 42, 68, .90), rgba(16, 30, 50, .90));
  border: 1px solid var(--shal-v2-border);
  border-radius: var(--shal-v2-radius-lg);
  box-shadow: var(--shal-v2-shadow-soft);
  margin-bottom: var(--shal-v2-space-5);
}

.v2-admin-shell table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.v2-admin-shell th,
.v2-admin-shell td {
  border-bottom: 1px solid var(--shal-v2-border);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.v2-admin-shell th {
  color: var(--shal-v2-muted);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.v2-admin-shell form[action="/admin/users/delete"],
.v2-admin-shell form[action="/admin/security/action"],
.v2-admin-shell form[action="/admin/friend-access"],
.v2-admin-shell form[action="/admin/balance/add"],
.v2-admin-shell form[action="/admin/servers"] {
  border: 1px solid rgba(255, 210, 90, .28);
  border-radius: var(--shal-v2-radius-md);
  background: rgba(255, 210, 90, .055);
  padding: var(--shal-v2-space-3);
}

.v2-admin-shell form[action="/admin/users/delete"] {
  border-color: rgba(255, 88, 110, .32);
  background: rgba(255, 88, 110, .07);
}

.v2-admin-content:has(.support-tg-shell) {
  padding: 0;
}

.v2-admin-content:has(.support-tg-shell) .v2-breadcrumbs,
.v2-admin-content:has(.support-tg-shell) .v2-admin-topbar {
  margin-left: var(--shal-v2-space-5);
  margin-right: var(--shal-v2-space-5);
}

.v2-admin-content:has(.support-tg-shell) .support-tg-shell {
  height: calc(100vh - 210px);
  min-height: 680px;
}

.v2-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--shal-v2-space-2);
  color: var(--shal-v2-muted);
  font-size: .9rem;
  margin-bottom: var(--shal-v2-space-4);
}

.v2-btn {
  align-items: center;
  appearance: none;
  border: 1px solid var(--shal-v2-border);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font: 800 .95rem/1 var(--shal-v2-font-sans);
  gap: var(--shal-v2-space-2);
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
  white-space: nowrap;
}

.v2-btn:focus-visible {
  box-shadow: 0 0 0 4px var(--shal-v2-focus);
  outline: 0;
}

.v2-btn:hover {
  transform: translateY(-1px);
}

.v2-btn-primary {
  background: linear-gradient(135deg, var(--shal-v2-accent), var(--shal-v2-primary));
  border-color: transparent;
  color: #03101d;
}

.v2-btn-secondary {
  background: rgba(255, 255, 255, .04);
  color: var(--shal-v2-text);
}

.v2-btn-ghost {
  background: transparent;
  color: var(--shal-v2-muted);
}

.v2-btn-danger {
  background: rgba(255, 88, 110, .12);
  border-color: rgba(255, 88, 110, .36);
  color: #ffd8de;
}

.v2-btn:disabled,
.v2-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}

.v2-card,
.v2-payment-card,
.v2-device-card,
.v2-platform-card,
.v2-admin-panel {
  background: linear-gradient(180deg, rgba(20, 42, 68, .92), rgba(16, 30, 50, .92));
  border: 1px solid var(--shal-v2-border);
  border-radius: var(--shal-v2-radius-lg);
  box-shadow: var(--shal-v2-shadow-soft);
  padding: var(--shal-v2-space-6);
}

.v2-card-elevated {
  background: var(--shal-v2-surface-elevated);
  box-shadow: var(--shal-v2-shadow-panel);
}

.v2-form {
  display: grid;
  gap: var(--shal-v2-space-4);
}

.v2-field {
  display: grid;
  gap: var(--shal-v2-space-2);
}

.v2-field label {
  color: var(--shal-v2-text);
  font-weight: 850;
}

.v2-input,
.v2-select,
.v2-textarea {
  background: rgba(7, 16, 27, .82);
  border: 1px solid var(--shal-v2-border);
  border-radius: var(--shal-v2-radius-md);
  color: var(--shal-v2-text);
  font: inherit;
  min-height: 46px;
  padding: 12px 14px;
  width: 100%;
}

.v2-textarea {
  min-height: 112px;
  resize: vertical;
}

.v2-input:focus,
.v2-select:focus,
.v2-textarea:focus {
  border-color: var(--shal-v2-primary);
  box-shadow: 0 0 0 4px var(--shal-v2-focus);
  outline: 0;
}

.v2-status-pill {
  align-items: center;
  border: 1px solid var(--shal-v2-border);
  border-radius: 999px;
  display: inline-flex;
  font-size: .82rem;
  font-weight: 900;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}

.v2-status-active,
.v2-status-success {
  background: rgba(105, 245, 185, .12);
  border-color: rgba(105, 245, 185, .32);
  color: #c9ffe9;
}

.v2-status-warning,
.v2-status-pending {
  background: rgba(255, 210, 90, .12);
  border-color: rgba(255, 210, 90, .34);
  color: #ffe7a3;
}

.v2-status-danger,
.v2-status-failed {
  background: rgba(255, 88, 110, .12);
  border-color: rgba(255, 88, 110, .34);
  color: #ffd3da;
}

.v2-alert {
  border: 1px solid var(--shal-v2-border);
  border-radius: var(--shal-v2-radius-md);
  color: var(--shal-v2-text);
  padding: var(--shal-v2-space-4);
}

.v2-alert-info {
  background: rgba(58, 208, 255, .09);
  border-color: rgba(58, 208, 255, .28);
}

.v2-alert-success {
  background: rgba(105, 245, 185, .09);
  border-color: rgba(105, 245, 185, .28);
}

.v2-alert-warning {
  background: rgba(255, 210, 90, .10);
  border-color: rgba(255, 210, 90, .30);
}

.v2-alert-danger {
  background: rgba(255, 88, 110, .10);
  border-color: rgba(255, 88, 110, .30);
}

.v2-admin-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.v2-admin-table th,
.v2-admin-table td {
  border-bottom: 1px solid var(--shal-v2-border);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.v2-admin-table th {
  color: var(--shal-v2-muted);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.v2-danger-flow {
  display: grid;
  gap: var(--shal-v2-space-4);
}

.v2-danger-target,
.v2-danger-diff,
.v2-danger-audit {
  border: 1px solid var(--shal-v2-border);
  border-radius: var(--shal-v2-radius-md);
  background: rgba(255, 255, 255, .035);
  padding: var(--shal-v2-space-4);
}

.v2-affected-systems {
  display: flex;
  flex-wrap: wrap;
  gap: var(--shal-v2-space-2);
}

.v2-cabinet-nav {
  margin: 0 auto var(--shal-v2-space-5);
  width: min(1180px, calc(100% - 32px));
}

.v2-cabinet-nav__inner {
  align-items: center;
  background: rgba(16, 30, 50, .78);
  border: 1px solid var(--shal-v2-border);
  border-radius: var(--shal-v2-radius-lg);
  box-shadow: var(--shal-v2-shadow-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 8px;
}

.v2-cabinet-nav a {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--shal-v2-muted);
  display: inline-flex;
  font-weight: 850;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.v2-cabinet-nav a:hover,
.v2-cabinet-nav a:focus-visible {
  background: rgba(58, 208, 255, .10);
  border-color: rgba(58, 208, 255, .24);
  color: var(--shal-v2-text);
}

.v2-cabinet-nav a[aria-current="page"] {
  background: rgba(58, 208, 255, .16);
  border-color: rgba(58, 208, 255, .36);
  color: var(--shal-v2-primary);
}

.v2-cabinet-shell {
  box-shadow: var(--shal-v2-shadow-soft);
}

.v2-cabinet-onboarding {
  min-height: auto;
  padding-top: var(--shal-v2-space-5);
}

.v2-connection-card {
  border: 1px solid var(--shal-v2-border);
  box-shadow: var(--shal-v2-shadow-glow);
}

.v2-platform-equal-grid .onb-platform {
  min-height: 118px;
}

.v2-platform-equal-grid .onb-platform .emoji {
  background: rgba(58, 208, 255, .10);
  border: 1px solid rgba(58, 208, 255, .22);
  border-radius: 18px;
  color: var(--shal-v2-primary);
  display: grid;
  font-size: 1.35rem;
  height: 42px;
  place-items: center;
  width: 42px;
}

.v2-platform-advanced {
  opacity: .82;
}

@media (max-width: 900px) {
  .v2-hero,
  .v2-grid-3,
  .v2-grid-4 {
    grid-template-columns: 1fr;
  }

  .v2-section-head {
    display: block;
  }

  .v2-admin-layout {
    grid-template-columns: 1fr;
  }

  .v2-admin-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--shal-v2-border);
  }

  .v2-cabinet-nav__inner {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .v2-container {
    width: min(100% - 24px, 1180px);
  }

  .v2-card,
  .v2-auth-card,
  .v2-payment-card,
  .v2-device-card,
  .v2-platform-card,
  .v2-admin-panel {
    border-radius: var(--shal-v2-radius-md);
    padding: var(--shal-v2-space-4);
  }

  .v2-btn {
    width: 100%;
  }

  .v2-cabinet-nav {
    width: min(100% - 24px, 1180px);
  }

  .v2-cabinet-nav a {
    flex: 1 1 calc(50% - 8px);
  }
}