/* =========================================================================
   CatsVPN — Core color + typography tokens
   Premium minimalist VPN. Dark canvas, singular hot-pink accent from the
   paw logo, monospace for IPs/ping/throughput.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand ---------- */
  --brand-paw:        #F5905A;   /* акцент бренда — оранжевый со знака «шишки» */
  --brand-paw-soft:   #F7A577;   /* наведение, свечение */
  --brand-paw-deep:   #DC672A;   /* нажатие, тёмный акцент */
  --brand-paw-tint:   rgba(245, 144, 90, 0.12); /* подложка */

  /* ---------- Surfaces (dark canvas) ---------- */
  --bg-base:    #0B0B0F;   /* page background */
  --bg-elev-1:  #131318;   /* cards, list rows */
  --bg-elev-2:  #1B1B22;   /* popovers, sheets, modal */
  --bg-elev-3:  #24242D;   /* hover state on elev-2 */
  --bg-inset:   #07070A;   /* inputs, code blocks (recessed) */

  /* ---------- Borders / dividers ---------- */
  --border-hairline:  rgba(255, 255, 255, 0.06);
  --border-soft:      rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.18);
  --border-pink:      rgba(254, 84, 166, 0.45);

  /* ---------- Foreground (text) ---------- */
  --fg-1: #F5F5F7;   /* primary */
  --fg-2: #9A9AA8;   /* secondary, captions */
  --fg-3: #5B5B68;   /* tertiary, disabled, placeholder */
  --fg-on-pink: #14060B; /* text on bright pink fills */

  /* ---------- Semantic ---------- */
  --status-connected:    #50E3A4;
  --status-connecting:   #FFB454;
  --status-disconnected: #5B5B68;
  --status-error:        #FF5C5C;

  /* ---------- Shadows (deep, pink-tinted on accent surfaces) ---------- */
  --shadow-card:   0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.40);
  --shadow-sheet:  0 24px 60px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-glow-pink: 0 0 0 6px rgba(254,84,166,0.10), 0 0 48px rgba(254,84,166,0.45);
  --shadow-glow-green: 0 0 0 6px rgba(80,227,164,0.10), 0 0 48px rgba(80,227,164,0.35);

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.32, 0.72, 0.30, 1.00);
  --ease-emphasized: cubic-bezier(0.20, 0.90, 0.30, 1.20); /* slight overshoot */
  --ease-exit: cubic-bezier(0.40, 0.00, 1.00, 1.00);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-medium: 360ms;
  --dur-long: 640ms;     /* toggle morph, glow ramps */

  /* ---------- Type ---------- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui:      'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* =========================================================================
   Base + semantic typography
   Display = headers + the "ON / OFF" toggle copy.
   UI = body, labels, button text.
   Mono = ping ms, IP addrs, throughput, server codes.
   ========================================================================= */

html, body {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-feature-settings: "ss01", "ss02", "cv11"; /* alt forms where available */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — used very sparingly. Tight, confident. */
.t-display-xl { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -0.03em; }
.t-display-lg { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1.04; letter-spacing: -0.028em; }
.t-display-md { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 1.08; letter-spacing: -0.024em; }

/* Headlines */
.t-h1 { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.t-h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.014em; }
.t-h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.008em; }

/* Body + UI */
.t-body-lg { font-family: var(--font-ui); font-weight: 400; font-size: 17px; line-height: 1.45; }
.t-body    { font-family: var(--font-ui); font-weight: 400; font-size: 15px; line-height: 1.45; }
.t-body-sm { font-family: var(--font-ui); font-weight: 400; font-size: 13px; line-height: 1.4; }

.t-label   { font-family: var(--font-ui); font-weight: 500; font-size: 14px; line-height: 1.3; letter-spacing: 0.0; }
.t-caption { font-family: var(--font-ui); font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--fg-2); }

/* Eyebrow / overline — uppercased, tracked. Used for section markers. */
.t-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Mono — metrics, code-like values */
.t-mono    { font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.t-mono-sm { font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.t-mono-lg { font-family: var(--font-mono); font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* =========================================================================
   Панель поддержки — поверх токенов CatsVPN (colors_and_type.css выше).
   Всё, что ниже, перенесено из <helmet> дизайна «Панель поддержки.dc.html»,
   плюс то, чего в прототипе не было: наведение на строки, просмотр
   картинок, мелкие состояния.
   ========================================================================= */

html, body { margin: 0; height: 100%; overflow: hidden; }
* { box-sizing: border-box; }
a { color: var(--fg-1); text-decoration: none; }
a:hover { color: var(--brand-paw-soft); }
button, input, textarea { font-family: var(--font-ui); }
input:focus, textarea:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--brand-paw-soft); outline-offset: 2px; }
::placeholder { color: var(--fg-3); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bg-elev-3); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }
@keyframes cvDrawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cvToastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cats-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes cvSpin { to { transform: rotate(360deg); } }
[role="slider"]:focus-visible { outline: 2px solid var(--brand-paw-soft); outline-offset: 2px; border-radius: 6px; }

#root { height: 100%; }

/* Наведение на строку списка (в дизайне — style-hover). Выбранная строка
   и так на elev-2, поэтому !important ничего не ломает. */
.cv-row:hover { background: var(--bg-elev-2) !important; }

/* Картинка из переписки на весь экран. Дорожки сетки ограничены экраном —
   иначе высокий скриншот телефона уходил бы вниз за край и не прокручивался. */
.cv-lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 7, 10, 0.88);
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  animation: cvToastIn var(--dur-short) var(--ease-standard);
  cursor: zoom-out;
}
.cv-lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sheet);
}

.cv-thumb { cursor: zoom-in; }
.cv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cv-link { background: none; border: 0; padding: 0; color: var(--fg-2); cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.cv-link:hover { color: var(--fg-1); }
.cv-link-pad { padding: 8px; margin: -8px; min-height: 32px; }

/* Поле ввода в фокусе. Контур у самих полей снят (они в своих рамках) —
   подсвечиваем рамку, иначе с клавиатуры не видно, где курсор. */
.cv-field:focus-within { border-color: var(--border-strong) !important; }

/* Поле поиска — обычное текстовое, без системного крестика WebKit. */
input::-webkit-search-cancel-button, input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* На сенсорных экранах поля не мельче 16 px — иначе iOS увеличивает страницу. */
@media (pointer: coarse) {
  input, textarea { font-size: 16px !important; }
}

/* На средних ширинах в шапке не хватает места — подпись «Поддержка» и
   строка про черновики уходят первыми. */
@media (max-width: 1099px) {
  .cv-hide-md { display: none !important; }
}

/* Вид мини-приложения — от края до края (viewport-fit=cover), поэтому вырезы
   экрана и полоску «домой» обходим сами; внутри Telegram на весь экран —
   ещё и его собственные поля. */
.cv-safe {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
}

button:disabled { cursor: not-allowed; opacity: 0.55; }

/* Профиль клиента — ссылка в админку панели VPN. */
.cv-profile-link { border-radius: var(--radius-sm); margin: -4px; padding: 4px; transition: background var(--dur-short) var(--ease-standard); }
.cv-profile-link:hover { background: var(--bg-elev-3); color: inherit; }
.cv-icon-link { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--fg-2); flex-shrink: 0; transition: all var(--dur-short) var(--ease-standard); }
.cv-icon-link:hover { background: var(--bg-elev-1); color: var(--fg-1); }
.cv-profile-link:focus-visible, .cv-icon-link:focus-visible, .cv-link:focus-visible { outline: 2px solid var(--brand-paw-soft); outline-offset: 2px; }

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