/* Quelvy — общая дизайн-система сайта и Telegram Mini App.
   Тёмный стиль: почти чёрный фон, светящиеся размытые пятна (фиолетовый, розовый, янтарный, мятный),
   шрифт Inter, плавающая шапка-«пилюля», кнопка с градиентом фиолетовый → розовый → янтарный. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: dark;
  /* Цвета акцентов в виде RGB — для полупрозрачных подсветок rgba(var(--primary-rgb), .2) */
  --primary-rgb: 124, 58, 237;   /* фиолетовый */
  --accent-rgb: 236, 72, 153;    /* розовый */
  --amber-rgb: 245, 158, 11;     /* янтарный */
  --mint-rgb: 45, 212, 191;      /* мятный — из логотипа */

  /* Цвета (роль → токен) */
  --color-primary: #a78bfa;
  --color-primary-hover: #c4b5fd;
  --color-on-primary: #0b0b10;
  --color-accent: #f472b6;
  --color-on-accent: #ffffff;
  --gradient-brand: linear-gradient(90deg, #7c3aed 0%, #db2777 55%, #f59e0b 100%);
  --gradient-soft: linear-gradient(90deg, #a78bfa, #f472b6, #fbbf24);
  --color-background: #0b0b10;
  --color-surface: #131319;     /* карточка */
  --color-surface-2: #1a1a22;   /* поле, кнопка, вложенный блок */
  --color-surface-3: #23232d;   /* наведение */
  --color-foreground: #e7e7ee;
  --color-heading: #fafafc;
  --color-muted: #1a1a22;
  --color-muted-foreground: #a1a1b0;
  --color-text-2: #d4d4de;
  --color-text-4: #6e6e7c;
  --color-border: #262631;
  --color-destructive: #fb7185;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-ring: #a78bfa;
  --color-link: #c4b5fd;

  /* Карточки — тёмные, с тонкой светлой рамкой и глубокой тенью (старые имена «glass» оставлены для разметки) */
  --glass-bg: #131319;
  --glass-bg-strong: #1a1a22;
  --glass-border: #24242e;
  --glass-edge: transparent;
  --glass-blur: 0px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -22px rgba(0, 0, 0, .85);

  /* Типографика, отступы, скругления, движение */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);   /* мягкое «затухающее» движение */
  --dur-fast: 180ms;
  --dur: 300ms;
  --dur-hover: 450ms;                      /* наведение на блоки — плавно, без рывков */
  --dur-slow: 480ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  background: var(--color-background); color: var(--color-foreground);
  font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { color: var(--color-heading); letter-spacing: -0.025em; }
a { color: var(--color-link); }
::selection { background: rgba(var(--primary-rgb), .35); color: #fff; }
[hidden] { display: none !important; }

/* Видимый фокус для клавиатуры — на всех интерактивных элементах */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* Цветные размытые пятна — фон первого экрана и шапки кабинета */
.mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.mesh::before, .mesh::after, .mesh span {
  content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
}
.mesh::before { width: 55vw; height: 55vw; left: -12vw; top: -18vw; background: #6d28d9; }
.mesh::after  { width: 50vw; height: 50vw; right: -14vw; top: 2vw; background: #be185d; }
.mesh span:nth-child(1) { width: 42vw; height: 38vw; left: 22vw; top: 14vw; background: #b45309; opacity: .38; }
.mesh span:nth-child(2) { width: 26vw; height: 26vw; right: 18vw; top: -10vw; background: #0f766e; opacity: .45; }

/* ---------- Карточка ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  font: 600 15px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: #fafafc; color: #0b0b10; }
.btn-primary:hover:not(:disabled) { background: #fff; box-shadow: 0 8px 24px -10px rgba(255, 255, 255, .35); }
.btn-accent { background: var(--gradient-brand); color: #fff; box-shadow: 0 8px 20px -10px rgba(var(--accent-rgb), .7); }
.btn-accent:hover:not(:disabled) { filter: brightness(1.06) saturate(1.05); box-shadow: 0 12px 28px -10px rgba(var(--accent-rgb), .75); }
.btn-ghost { background: var(--color-surface-2); color: var(--color-foreground); border-color: var(--color-border); }
.btn-ghost:hover:not(:disabled) { border-color: #3a3a47; background: var(--color-surface-3); }
.btn-danger { background: transparent; color: var(--color-destructive); border-color: transparent; }
.btn-danger:hover:not(:disabled) { background: rgba(251, 113, 133, .1); }
.btn-sm { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
/* Кнопка-«пилюля» с градиентной рамкой (как «Sign up») */
.btn-outline-grad { border: 1.5px solid transparent; border-radius: var(--radius-pill); color: var(--color-heading);
  background: linear-gradient(#111117, #111117) padding-box, var(--gradient-brand) border-box; }
.btn-outline-grad:hover:not(:disabled) { box-shadow: 0 8px 22px -12px rgba(var(--primary-rgb), .6); }

/* ---------- Поля ввода ---------- */
.field-label { display: block; font-size: 14px; font-weight: 600; color: var(--color-foreground); margin: var(--space-4) 0 var(--space-2); }
.input {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-foreground);
  font: 400 16px/1.4 var(--font); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: #6e6e7c; }
.input:hover { border-color: #3a3a47; }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .2); }
textarea.input { min-height: 110px; resize: vertical; }
select.input { appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: calc(100% - 14px) 50%; background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a1a1b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- Значки-статусы ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-ok { color: #34d399; background: rgba(16, 185, 129, .12); border-color: rgba(52, 211, 153, .3); }
.badge-paused { color: var(--color-muted-foreground); background: var(--color-muted); border-color: var(--color-border); }
.badge-error { color: #fbbf24; background: rgba(245, 158, 11, .12); border-color: rgba(251, 191, 36, .3); }

/* ---------- Сегментированный переключатель (вкладки) — как «Monthly / Annual» ---------- */
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.segmented button {
  flex: 1; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--color-muted-foreground); font: 600 14px/1 var(--font); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented button svg { width: 16px; height: 16px; }
.segmented button:hover { color: var(--color-heading); background: var(--color-muted); }
.segmented button.on, .segmented button[aria-selected="true"] { background: #fafafc; color: #0b0b10; }

/* ---------- Логотип ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 21px/1 var(--font); letter-spacing: -0.035em; color: var(--color-heading); text-decoration: none; }
.logo-mark { width: 30px; height: 30px; flex: none; }

/* ---------- Всплывающее сообщение ---------- */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; z-index: 50;
  padding: 14px 16px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.45;
  background: #fafafc; color: #0b0b10; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.show { opacity: 1; transform: none; }

/* ---------- Иконки (SVG в стиле Lucide) ---------- */
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Наведение на блоки ----------
   Блок плавно приподнимается, тень становится глубже, рядом с курсором — лёгкое цветное пятно.
   Координаты курсора (--mx, --my) задаёт скрипт страницы. */
.card { --mx: 50%; --my: 50%; position: relative; isolation: isolate;
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(var(--primary-rgb), .12), rgba(var(--accent-rgb), .06) 45%, transparent 70%);
  opacity: 0; transition: opacity var(--dur-hover) var(--ease);
}
@media (hover: hover) {
  .card:hover::before { opacity: 1; }
  .card:hover { transform: translateY(-3px); border-color: #3b3552; box-shadow: var(--shadow-lg); }
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
}

/* ---------- Уважение к «уменьшить движение» ---------- */
/* Повторяющиеся и «летающие» анимации выключаем, а мягкие проявления (прозрачность) оставляем —
   иначе на телефонах в режиме энергосбережения сайт выглядит совсем неживым. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .card:hover, .btn:hover:not(:disabled) { transform: none !important; }
}

/* На сенсорных экранах наведения нет — даём отклик на касание */
@media (hover: none) {
  .card:active { transform: scale(.985); transition-duration: 150ms; }
  .btn:active:not(:disabled) { transform: scale(.97); }
}