/* ═══════════════════════════════════════════════════════════════════════
   ANRO Ads — только КАРКАС модуля (шапка, навигация, крошки, карточка входа).
   Атомы (kpi-card, v3-tbl, btn-*, status-badge, filter-*, period-btn,
   empty-state-block) НЕ определяем: они приходят из канонических
   /passets/css/tokens.css + /passets/css/dashboard.css портала.
   Переопределять канонические классы запрещено (DESIGN_SYSTEM.md п.4).

   Magic numbers запрещены: все размеры этого файла — в токенах --ads-* ниже.
   ═══════════════════════════════════════════════════════════════════════ */
/* Шрифт — тот же файл, что у портала (отдаётся роутом /passets/, без CDN). */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/passets/fonts/inter-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/passets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Переменные каркаса портала. dashboard.css на них ссылается, а живут они в
   inline-<style> layout_v3.html — в файле, которого у модуля нет. Без них
   канонические атомы (period-btn, chip, v3-tbl) остаются без фона и рамок.
   Значения скопированы ОТТУДА (layout_v3.html :root, замер 18.09.2026) —
   все 12, которые dashboard.css требует и которых нет в tokens.css.
   Свои значения тут выдумывать нельзя: это был бы дрейф дизайна. */
:root {
  --bg-page: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-surface: #ffffff;
  --border: #e2e8f0;
  --border-sidebar: #f1f5f9;
  --nav-active-bg: #f1f5f9;
  --nav-active-color: #1e293b;
  --nav-hover: #f3f4f6;
  --text-1: #111827;
  --text-2: #374151;
  --text-3: #6b7280;
  --text-4: #9ca3af;
}

:root {
  --ads-topbar-h: 52px;
  --ads-content-max: 1680px;
  --ads-brand: #3b82f6;          /* = --color-accent портала */
  --ads-nav-gap: 2px;
  --ads-line: 1px;
  --ads-crumb-sep-op: 0.45;
  --ads-shadow-card: 0 10px 30px rgba(15, 23, 42, .08);
  --ads-login-w: 380px;
  --ads-input-h: 38px;
  --ads-inp-num-w: 96px;   /* поле порога: «300 кликов» должно влезать целиком */
  --ads-note-w: 200px;
  --ads-code-bg: #f1f5f9;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
               Roboto, Arial, sans-serif;
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-size: var(--fs-md);
}
a { color: var(--ads-brand); }

/* ── шапка ── */
.am-top {
  height: var(--ads-topbar-h);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--color-bg);
  border-bottom: var(--ads-line) solid var(--color-border);
  position: sticky; top: 0; z-index: 20;
}
.am-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-semibold); color: var(--color-text); text-decoration: none;
  white-space: nowrap;
}
.am-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-6); height: var(--space-6);
  border-radius: var(--radius-badge);
  background: var(--ads-brand); color: #fff; font-size: var(--fs-sm);
}
.am-nav { display: flex; gap: var(--ads-nav-gap); flex-wrap: wrap; }
.am-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-text-muted); text-decoration: none; font-size: var(--fs-2sm);
  font-weight: var(--fw-medium);
}
.am-nav a:hover { background: var(--surface-2); color: var(--color-text); }
.am-nav a.active { background: var(--surface-2); color: var(--ads-brand); }
.am-spacer { flex: 1 1 auto; }
.am-right { display: flex; align-items: center; gap: var(--space-3); }
.am-user { font-size: var(--fs-sm); color: var(--color-text-muted); }
.am-langs { display: flex; gap: var(--ads-nav-gap); }
.am-langs a {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs);
  font-size: var(--fs-xs); color: var(--color-text-muted); text-decoration: none;
}
.am-langs a.active { background: var(--surface-2); color: var(--color-text); }

/* ── крошки (разделитель ›, DESIGN_SYSTEM п.9) ── */
.am-crumb {
  padding: var(--space-4) var(--space-5) 0;
  font-size: var(--fs-2sm); color: var(--color-text-muted);
}
.am-crumb a { color: var(--color-text-muted); text-decoration: none; }
.am-crumb a:hover { color: var(--ads-brand); }
.am-crumb .sep { opacity: var(--ads-crumb-sep-op); margin: 0 var(--space-2); }
.am-crumb .cur { color: var(--color-text); }

/* ── контент ── */
.am-main {
  max-width: var(--ads-content-max);
  padding: var(--space-4) var(--space-5) var(--space-10);
}
.am-sec { margin-top: var(--space-5); }
.am-sec-h {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-3);
}
.am-hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.am-card {
  background: var(--color-bg); border: var(--ads-line) solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-4);
}
.am-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 900px) { .am-grid2 { grid-template-columns: 1fr; } }
.am-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm); background: var(--ads-code-bg);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs);
}
.am-up { color: var(--color-good); }
.am-down { color: var(--color-bad); }
.am-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); }
.am-dl dt { color: var(--color-text-muted); font-size: var(--fs-sm); }
.am-dl dd { margin: 0; }
.am-inline-form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.am-inp {
  height: var(--ads-input-h); padding: 0 var(--space-3);
  border: var(--ads-line) solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text); font-size: var(--fs-2sm);
}
.am-inp-num { max-width: var(--ads-inp-num-w); text-align: right; }
.am-inp-note { max-width: var(--ads-note-w); }
.am-ta {
  width: 100%; min-height: var(--space-10); padding: var(--space-2) var(--space-3);
  border: var(--ads-line) solid var(--color-border); border-radius: var(--radius-input);
  font-size: var(--fs-2sm); font-family: inherit;
}

/* ── всплывашки ── */
.am-toasts { padding: var(--space-3) var(--space-5) 0; display: grid; gap: var(--space-2); }
.am-toast {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-input);
  border-left: var(--border-accent-w) solid var(--color-accent);
  background: var(--color-bg); font-size: var(--fs-2sm); box-shadow: var(--shadow-sm);
}
.am-toast.ok    { border-left-color: var(--color-good); }
.am-toast.error { border-left-color: var(--color-bad); }
.am-toast.info  { border-left-color: var(--color-neu); }

/* ── вход ── */
.am-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-soft); padding: var(--space-5);
}
.am-login-card {
  width: 100%; max-width: var(--ads-login-w); background: var(--color-bg);
  border: var(--ads-line) solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-6); box-shadow: var(--ads-shadow-card);
}
.am-login-card h1 { font-size: var(--fs-xl); margin: var(--space-3) 0 var(--space-1); }
.am-login-card p { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--fs-2sm); }
.am-login-card label {
  display: block; margin-bottom: var(--space-3); font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.am-login-card label input {
  display: block; width: 100%; height: var(--ads-input-h); margin-top: var(--space-1);
  padding: 0 var(--space-3); border: var(--ads-line) solid var(--color-border);
  border-radius: var(--radius-input); font-size: var(--fs-md);
}
.am-wide { width: 100%; }
.am-empty { padding: var(--space-10) var(--space-5); text-align: center; color: var(--color-text-muted); }
.am-empty .ico { font-size: var(--fs-hero); display: block; margin-bottom: var(--space-3); }