/* ============================================================================
   RUVPN — дизайн-система
   Один источник истины для лендинга, страницы статуса и мини-аппа.
   Меняется здесь — меняется везде; локальных копий токенов быть не должно.
   ========================================================================= */

/* ── Токены ──────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  /* Поверхности: от глубины страницы к поднятому элементу */
  --bg:#f5f7fb;
  --bg-deep:radial-gradient(1100px 620px at 50% -12%, #e6edfd 0%, #f5f7fb 58%);
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#eef2f9;
  --line:#e6eaf2;
  --line-strong:#d6dde9;

  /* Текст: три уровня, дальше не дробим */
  --text:#0b1220;
  --text-2:#43506a;
  --muted:#7a879e;

  /* Акцент */
  --accent:#2563eb;
  --accent-2:#4f8bff;
  --accent-ink:#1b46c2;
  --accent-soft:#e9f0ff;
  --on-accent:#ffffff;

  /* Состояния */
  --ok:#0e9f6e;
  --ok-soft:#e2f7ee;
  --warn:#b7791f;
  --warn-soft:#fdf3d9;
  --bad:#e5484d;
  --bad-soft:#fdecec;
  --idle:#94a3b8;
  --idle-soft:#eef1f6;

  /* Глубина: тень = высота, а не украшение */
  --shadow-1:0 1px 2px rgba(11,18,32,.05), 0 1px 3px rgba(11,18,32,.04);
  --shadow-2:0 8px 24px rgba(18,32,70,.07), 0 2px 8px rgba(18,32,70,.05);
  --shadow-3:0 24px 60px rgba(18,32,70,.14), 0 6px 18px rgba(18,32,70,.08);

  --radius:22px;
  --radius-sm:14px;
  --radius-xs:10px;
  --radius-pill:999px;

  /* Движение: одна кривая на «выезд», одна пружина на отклик */
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --fast:140ms;
  --base:260ms;
  --slow:520ms;

  --maxw:1120px;
  --gutter:20px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#080b12;
    --bg-deep:radial-gradient(1100px 620px at 50% -12%, #16203a 0%, #080b12 58%);
    --surface:#101725;
    --surface-2:#0c121e;
    --surface-3:#18202f;
    --line:#1e2736;
    --line-strong:#2a3547;
    --text:#f2f5fa;
    --text-2:#aab6cb;
    --muted:#7a879e;
    --accent:#5b8dff;
    --accent-2:#7ba6ff;
    --accent-ink:#a8c4ff;
    --accent-soft:#16233f;
    --on-accent:#06080f;
    --ok:#34d399;
    --ok-soft:#0e2a22;
    --warn:#e3b341;
    --warn-soft:#2b2413;
    --bad:#ff6b6f;
    --bad-soft:#31171a;
    --idle:#64748b;
    --idle-soft:#161d29;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 10px 30px rgba(0,0,0,.5);
    --shadow-3:0 28px 70px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#080b12;
  --bg-deep:radial-gradient(1100px 620px at 50% -12%, #16203a 0%, #080b12 58%);
  --surface:#101725;
  --surface-2:#0c121e;
  --surface-3:#18202f;
  --line:#1e2736;
  --line-strong:#2a3547;
  --text:#f2f5fa;
  --text-2:#aab6cb;
  --muted:#7a879e;
  --accent:#5b8dff;
  --accent-2:#7ba6ff;
  --accent-ink:#a8c4ff;
  --accent-soft:#16233f;
  --on-accent:#06080f;
  --ok:#34d399;
  --ok-soft:#0e2a22;
  --warn:#e3b341;
  --warn-soft:#2b2413;
  --bad:#ff6b6f;
  --bad-soft:#31171a;
  --idle:#64748b;
  --idle-soft:#161d29;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 10px 30px rgba(0,0,0,.5);
  --shadow-3:0 28px 70px rgba(0,0,0,.6);
}

/* ── База ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--bg);
  background-image:var(--bg-deep);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  font-feature-settings:'cv11','ss01';
  -webkit-font-smoothing:antialiased;
  /* Safe Area: контент никогда не уезжает под вырез и системную полосу */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

img,svg,video{max-width:100%;height:auto;display:block}

/* Фокус видно всегда — кроме мыши. Доступность не приносится в жертву эстетике. */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }
:focus:not(:focus-visible){ outline:none }

::selection{ background:var(--accent); color:var(--on-accent) }

/* ── Типографика: крупная, с воздухом ────────────────────────────────────── */
.h1,.h2,.h3{ margin:0; font-weight:800; letter-spacing:-.022em; line-height:1.08 }
.h1{ font-size:clamp(34px, 7.2vw, 68px); letter-spacing:-.032em }
.h2{ font-size:clamp(26px, 4.4vw, 40px); letter-spacing:-.026em }
.h3{ font-size:clamp(19px, 2.4vw, 24px); line-height:1.25 }

.lead{ font-size:clamp(16px, 2.1vw, 19px); color:var(--text-2); margin:0 }
.small{ font-size:13.5px; color:var(--muted); margin:0 }
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.num{ font-variant-numeric:tabular-nums lining-nums }

/* ── Раскладка ───────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) }
.section{ padding:clamp(48px, 9vw, 108px) 0 }
.stack{ display:grid; gap:16px }
.stack-lg{ display:grid; gap:28px }

/* ── Карточки ────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:22px;
}
.card-lift{ transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease) }
@media (hover:hover){
  .card-lift:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2) }
}

/* Мягкое стекло — только там, где под ним действительно что-то есть */
.glass{
  background:color-mix(in srgb, var(--surface) 76%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

/* ── Кнопки: отклик на нажатие обязателен ────────────────────────────────── */
.btn{
  --btn-bg:var(--surface); --btn-fg:var(--text); --btn-line:var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:14px 24px;
  font:inherit; font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--btn-fg); background:var(--btn-bg);
  border:1px solid var(--btn-line); border-radius:var(--radius-pill);
  cursor:pointer; text-decoration:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--fast) var(--spring), box-shadow var(--base) var(--ease),
             background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:active{ transform:scale(.97) }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none }

.btn-primary{
  --btn-bg:linear-gradient(180deg, var(--accent-2), var(--accent));
  --btn-fg:var(--on-accent); --btn-line:transparent;
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 34%, transparent);
}
@media (hover:hover){ .btn-primary:hover{ box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 42%, transparent) } }

.btn-ghost{ --btn-bg:transparent; --btn-line:var(--line-strong) }
@media (hover:hover){ .btn-ghost:hover{ --btn-bg:var(--surface-3) } }

.btn-sm{ min-height:40px; padding:9px 16px; font-size:14px }

/* ── Значки состояния ────────────────────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 10px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
  background:var(--idle-soft); color:var(--text-2);
  border:1px solid transparent; white-space:nowrap;
}
.pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none }
.pill-ok{ background:var(--ok-soft); color:var(--ok) }
.pill-bad{ background:var(--bad-soft); color:var(--bad) }
.pill-idle{ background:var(--idle-soft); color:var(--idle) }

/* Живой пульс у «онлайн» — единственная бесконечная анимация на странице */
.pill-ok::before{ animation:pulse 2.4s var(--ease) infinite }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent) }
  70%    { box-shadow:0 0 0 6px transparent }
}

/* ── Скелетон загрузки ───────────────────────────────────────────────────── */
.skel{
  background:linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size:400% 100%;
  animation:shimmer 1.25s linear infinite;
  border-radius:var(--radius-xs); color:transparent !important;
}
@keyframes shimmer{ from{ background-position:100% 0 } to{ background-position:0 0 } }

/* ── Появление при скролле ───────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease) }
.reveal.in{ opacity:1; transform:none }

/* ── Пустые состояния и ошибки ───────────────────────────────────────────────
   Карточка никогда не остаётся пустой: либо данные, либо честное объяснение,
   почему их нет, и кнопка повтора. Пустое место читается как поломка. */
.state{
  display:grid; gap:12px; justify-items:center; text-align:center;
  padding:clamp(24px, 6vw, 40px) 20px; color:var(--text-2);
}
.state-icon{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-3); color:var(--muted); font-size:20px; flex:none;
}
.state-title{ font-weight:700; font-size:16px; color:var(--text); margin:0 }
.state-text{ font-size:14px; color:var(--muted); margin:0; max-width:38ch; line-height:1.5 }
.state-bad .state-icon{ background:var(--bad-soft); color:var(--bad) }

/* ── Полоска последних проверок ──────────────────────────────────────────────
   Один сегмент — одно реальное наблюдение сторожа. Пропуск наблюдения — это
   не «всё хорошо», у него собственный цвет. */
.timeline{ display:flex; gap:2px; align-items:stretch; height:26px; width:100% }
.timeline i{
  flex:1 1 0; min-width:2px; border-radius:2px; background:var(--idle-soft);
  transition:transform var(--fast) var(--ease);
}
.timeline i[data-state="ok"]{ background:var(--ok) }
.timeline i[data-state="bad"]{ background:var(--bad) }
.timeline i[data-state="none"]{ background:var(--line) }
@media (hover:hover){ .timeline i:hover{ transform:scaleY(1.18) } }

/* ── Сегментированный переключатель ─────────────────────────────────────────
   Выбор устройства в справке, окно графика в партнёрском кабинете. */
.seg{
  display:inline-flex; gap:4px; padding:4px; border-radius:var(--radius-pill);
  background:var(--surface-3); border:1px solid var(--line);
}
.seg button{
  appearance:none; border:0; cursor:pointer; font:inherit; font-weight:650; font-size:14px;
  padding:8px 16px; min-height:38px; border-radius:var(--radius-pill);
  background:transparent; color:var(--text-2);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.seg button[aria-selected="true"]{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-1) }
.seg button:active{ transform:scale(.97) }

/* ── Счётчик со стрелками ───────────────────────────────────────────────────
   Калькулятор партнёрской программы. */
.stepper{
  display:inline-flex; align-items:center; gap:4px; padding:4px;
  border-radius:var(--radius-pill); background:var(--surface-3); border:1px solid var(--line);
}
.stepper button{
  appearance:none; border:0; cursor:pointer; width:40px; height:40px; flex:none;
  border-radius:50%; background:var(--surface); color:var(--text);
  font-size:20px; line-height:1; font-weight:600; box-shadow:var(--shadow-1);
  transition:transform var(--fast) var(--spring);
}
.stepper button:active{ transform:scale(.9) }
.stepper button[disabled]{ opacity:.4; pointer-events:none }
.stepper output{
  min-width:5ch; text-align:center; font-weight:800; font-size:19px;
  font-variant-numeric:tabular-nums lining-nums;
}

/* ── Строка списка ──────────────────────────────────────────────────────────
   Узел в статусе, устройство в профиле, пункт меню — одна геометрия на всё. */
.row{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:14px 16px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--line); text-align:left;
}
.row + .row{ margin-top:8px }
.row-main{ flex:1 1 auto; min-width:0 }
.row-title{ font-weight:650; font-size:15px; color:var(--text); margin:0 }
.row-sub{ font-size:13px; color:var(--muted); margin:2px 0 0 }
.row-aside{ flex:none; text-align:right; font-variant-numeric:tabular-nums lining-nums }
a.row, button.row{ cursor:pointer; transition:background var(--fast) var(--ease) }
@media (hover:hover){ a.row:hover, button.row:hover{ background:var(--surface-2) } }
a.row:active, button.row:active{ transform:scale(.995) }

/* ── Оживающие числа ────────────────────────────────────────────────────────
   Разметка держит финальное значение: без JS и при reduce-motion число просто
   стоит на месте, а не остаётся нулём. */
.count{ font-variant-numeric:tabular-nums lining-nums }

/* ── Безопасные зоны ────────────────────────────────────────────────────────
   MAX и Telegram отдают webview под вырезом и панелью навигации. */
.safe-top{ padding-top:env(safe-area-inset-top) }
.safe-bottom{ padding-bottom:env(safe-area-inset-bottom) }

/* Ни одна страница не имеет права ехать вбок. Широкое содержимое прокручивается
   внутри себя, а не тащит за собой body. */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain }

/* Цель нажатия не меньше 44 px — палец не попадает в 30. */
.tap{ min-width:44px; min-height:44px }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Уважение к настройке «меньше движения» ──────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none }
  .skel{ animation:none }
}