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

:root {
  /* Тёмная тема для нативных элементов (select-попапы, скроллбары, date-picker):
     без этого Chrome/Edge на Windows рисуют выпадающий список <select> системным
     белым, даже если сам select оформлен под тёмную тему — попап живёт вне DOM
     и берёт цвета из OS/UA, а не из наших custom-свойств. */
  color-scheme: dark;

  /* ---------- AuthKit tokens (substituted fonts: Inter / Space Grotesk / JetBrains Mono) ---------- */
  --color-midnight-canvas: #05060f;
  --color-steel-plate: #2f343e;
  --color-fog-veil: #9da7ba;
  --color-moon-mist: #c7d3ea;
  --color-frost-glow: #d1e4fa;
  --color-ice-highlight: #d8ecf8;
  --gradient-ice-highlight: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%);
  --color-pure-white: #ffffff;
  --color-void-violet: #663af3;
  --color-void-violet-hover: #7a52f5;
  --color-blueprint-blue: #b6d9fc;
  --color-glass-edge: rgba(186, 215, 247, 0.12);
  --color-glass-edge-strong: rgba(186, 215, 247, 0.24);
  --color-luminous-fill: rgba(199, 211, 234, 0.12);

  /* Surfaces */
  --surface-canvas: var(--color-midnight-canvas);
  --surface-frosted: rgba(186, 214, 247, 0.03);
  --surface-frosted-alt: rgba(186, 214, 247, 0.05);
  --surface-frosted-hover: rgba(186, 214, 247, 0.06);
  --surface-deep-glass: rgba(5, 6, 15, 0.97);

  /* Status — functional signal only, deliberately separate from the violet accent.
     Brightened vs. a light-theme palette so they still read clearly on near-black. */
  --status-ok: #34d399;
  --status-warn: #fbbf24;
  --status-crit: #f87171;
  --status-info: #60a5fa;
  --status-ok-bg: rgba(52, 211, 153, 0.12);
  --status-warn-bg: rgba(251, 191, 36, 0.12);
  --status-crit-bg: rgba(248, 113, 113, 0.12);
  --status-info-bg: rgba(96, 165, 250, 0.12);

  /* Back-compat alias used inline in dashboard.html */
  --muted: var(--color-fog-veil);

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-eyebrow: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: 0.08em;
  --text-body: 14px;
  --leading-body: 1.43;
  --text-body-lg: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --tracking-heading-sm: -0.01em;
  --text-heading: 28px;
  --text-heading-lg: 36px;
  --text-display: 44px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-48: 48px;

  /* Radius — pill for interactive, 16px cards/modals, 6px badges/inputs */
  --radius-small: 6px;
  --radius-nested: 10px;
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-icon: 9999px;

  /* Elevation — inset frost highlight + soft outer halo, never a flat drop-shadow */
  --shadow-card:
    inset 0 1px 1px rgba(199, 211, 234, 0.10),
    inset 0 24px 48px rgba(199, 211, 234, 0.03),
    0 12px 24px rgba(0, 0, 0, 0.35);
  --shadow-modal:
    inset 0 1px 1px rgba(216, 236, 248, 0.2),
    inset 0 24px 48px rgba(168, 216, 245, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow-sm: 0 0 6px rgba(186, 207, 247, 0.24);
}

* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-frost-glow);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}

/* Ambient atmosphere: faint blueprint grid + a soft spotlight halo pinned to the
   top of the viewport. Fixed + behind everything, never intercepts clicks/scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(186, 215, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(186, 215, 247, 0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 0%, transparent 75%);
}
body::after {
  content: "";
  position: fixed;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 500px;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 0%, rgba(102, 58, 243, 0.16) 0%, rgba(124, 145, 182, 0.08) 40%, transparent 70%);
  pointer-events: none;
}

/* ---------- Top navigation ---------- */
.topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  padding: var(--spacing-12) var(--spacing-24);
  border-bottom: 1px solid var(--color-glass-edge);
  background: rgba(5, 6, 15, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-width: 100%;
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand, .logout { flex-shrink: 0; }
.brand {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--gradient-ice-highlight);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: auto;
}
.brand span { color: var(--color-fog-veil); font-weight: 400; -webkit-text-fill-color: var(--color-fog-veil); }

.nav-desktop.topbar-links,
nav.nav-desktop { display: flex; gap: var(--spacing-4); }
.topbar nav a, .logout {
  color: var(--color-fog-veil);
  text-decoration: none;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-pill);
  font-size: var(--text-body);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.topbar nav a:hover { color: var(--color-frost-glow); background: var(--surface-frosted-hover); }
.topbar nav a.active {
  color: var(--color-pure-white);
  background: rgba(102, 58, 243, 0.18);
  box-shadow: 0 0 0 1px rgba(102, 58, 243, 0.32) inset;
}
.logout:hover { color: var(--status-crit); background: var(--status-crit-bg); }

/* Мобильное меню — гамбургер, раскрывающий список ссылок вниз. Реализовано на
   <details>/<summary> без единой строчки JS: нативный, доступный toggle. */
.nav-mobile { display: none; }
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: var(--color-frost-glow);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle:hover { background: var(--surface-frosted-hover); }
.nav-mobile[open] .nav-toggle { background: rgba(102, 58, 243, 0.18); color: var(--color-pure-white); }
.nav-mobile-panel {
  position: absolute;
  top: 100%;
  right: var(--spacing-16);
  left: var(--spacing-16);
  margin-top: var(--spacing-8);
  display: flex;
  flex-direction: column;
  background: var(--surface-deep-glass);
  border-radius: var(--radius-nested);
  box-shadow: var(--shadow-modal);
  padding: var(--spacing-8);
  z-index: 20;
}
.nav-mobile-panel a {
  color: var(--color-frost-glow);
  text-decoration: none;
  font-size: var(--text-body-lg);
  font-weight: 500;
  padding: var(--spacing-12) var(--spacing-12);
  border-radius: var(--radius-nested);
}
.nav-mobile-panel a.active { background: rgba(102, 58, 243, 0.18); color: var(--color-pure-white); }
.nav-mobile-panel a:active { background: var(--surface-frosted-hover); }
.nav-mobile-panel .nav-mobile-logout {
  color: var(--status-crit);
  border-top: 1px solid var(--color-glass-edge);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-16);
  border-radius: 0;
}

@media (max-width: 720px) {
  nav.nav-desktop, a.logout.nav-desktop { display: none; }
  .nav-mobile { display: block; }
}

.content { max-width: 1280px; margin: 0 auto; padding: var(--spacing-48) var(--spacing-24) 80px; position: relative; }

/* ---------- Stat cards ----------
   12-колоночный грид с явным span на карточку вместо равных auto-fit ячеек:
   у карточек с коротким содержимым (число/статус) span поменьше, у карточек
   с длинной подписью, суммой в рублях или доп. строкой (выручка, пользователи,
   бот) — span побольше, чтобы контент не резался и не было пустого воздуха
   пополам с обрезанным текстом в одинаковых квадратах (запрос владельца
   2026-08-10: "не обязательно всё вписывать в квадрат"). */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-48);
}
.stat-card {
  background: var(--surface-frosted);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-20);
  border-left: 2px solid transparent;
  grid-column: span 2;
  min-width: 0; /* иначе длинное число/текст распирает грид-трек вместо переноса */
}
.stat-card.crit { border-left-color: var(--status-crit); }
.stat-card.warn { border-left-color: var(--status-warn); }
.stat-card--md { grid-column: span 3; }
.stat-card--lg { grid-column: span 6; }

@media (max-width: 960px) {
  .stat-grid { grid-template-columns: repeat(6, 1fr); }
  .stat-card { grid-column: span 2; }
  .stat-card--md { grid-column: span 3; }
  .stat-card--lg { grid-column: span 6; }
}
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card,
  .stat-card--md { grid-column: span 1; }
  .stat-card--lg { grid-column: span 2; }
}

.stat-label {
  font-family: var(--font-eyebrow);
  font-size: var(--text-caption);
  color: var(--color-fog-veil);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8); }
.stat-sub { font-size: var(--text-caption); color: var(--color-fog-veil); margin-top: var(--spacing-4); }

/* Нативный select, но со своей закрытой "коробочкой" (пилюля с рамкой + свой
   шеврон вместо системной стрелки) — попап со списком опций теперь тоже тёмный
   благодаря color-scheme: dark на :root, так что весь контрол целиком выглядит
   частью дизайна, а не белой системной вставкой поверх тёмной карточки. */
.stat-period-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-frosted-alt) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239da7ba' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--color-fog-veil);
  border: 1px solid var(--color-glass-edge);
  border-radius: var(--radius-pill);
  padding: 3px 26px 3px 10px;
  font-size: 11px;
  font-family: var(--font-sans);
  cursor: pointer;
  flex-shrink: 0;
}
.stat-period-select:hover { color: var(--color-frost-glow); border-color: var(--color-glass-edge-strong); }
.stat-period-select:focus { outline: none; border-color: var(--color-void-violet); }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: var(--spacing-4);
  color: var(--color-frost-glow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card--md .stat-value,
.stat-card--lg .stat-value { font-size: var(--text-heading); }

/* ---------- Panels / sections ---------- */
.panel { margin-bottom: var(--spacing-48); }
.panel h2 {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 500;
  margin: 0 0 var(--spacing-12);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--color-frost-glow);
}
.link-more {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-fog-veil);
  text-decoration: none;
}
.link-more:hover { color: var(--color-frost-glow); }

/* ---------- Tables ---------- */
/* Таблица скроллится сама по X внутри своей карточки — страница вокруг стоит на
   месте (на мобильных раньше двигался весь сайт, т.к. overflow был не ограничен).
   По Y — тоже своя прокрутка с потолком высоты: у коротких таблиц (2-5 строк) это
   вообще не видно (max-height просто не достигается), у длинных — появляется
   скролл внутри карточки, а не растягивание всей страницы. Шапка (thead) внутри
   такого скролла — sticky, чтобы при прокрутке длинных таблиц названия колонок не
   уезжали наверх (запрос владельца 2026-08-05). */
.table-scroll {
  background: var(--surface-frosted);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table th {
  text-align: left;
  font-family: var(--font-eyebrow);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
  font-weight: 500;
  color: var(--color-moon-mist);
  padding: var(--spacing-12) var(--spacing-20);
  background: var(--color-steel-plate);
  border-bottom: 1px solid var(--color-glass-edge);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table td {
  padding: var(--spacing-12) var(--spacing-20);
  border-bottom: 1px solid var(--color-glass-edge);
  font-size: var(--text-body);
  color: var(--color-frost-glow);
  white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-frosted-hover); }
.data-table tr.row-both td { background: rgba(102, 58, 243, 0.08); }
.data-table tr.row-both:hover td { background: rgba(102, 58, 243, 0.14); }
.data-table td.num, .mono { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.data-table td.empty { color: var(--color-fog-veil); text-align: center; padding: var(--spacing-24); white-space: normal; }
.metric-desc {
  white-space: normal;
  font-size: var(--text-caption);
  color: var(--color-fog-veil);
  margin-top: var(--spacing-4);
  max-width: 320px;
  line-height: var(--leading-caption);
}
.metric-key-sub {
  opacity: 0.6;
  font-size: var(--text-caption);
  margin-top: 2px;
  color: var(--color-fog-veil);
}

/* ---------- Status dot ---------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.dot.ok { background: var(--status-ok); color: var(--status-ok); }
.dot.crit { background: var(--status-crit); color: var(--status-crit); }
.dot.warn { background: var(--status-warn); color: var(--status-warn); }
.dot.info { background: var(--status-info); color: var(--status-info); }

/* ---------- Badges / chips ---------- */
.chip {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
  font-weight: 500;
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-small);
}
.chip.critical { background: var(--status-crit-bg); color: var(--status-crit); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2) inset; }
.chip.warning { background: var(--status-warn-bg); color: var(--status-warn); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2) inset; }
.chip.info { background: var(--status-info-bg); color: var(--status-info); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2) inset; }
.chip.ok { background: var(--status-ok-bg); color: var(--status-ok); box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.2) inset; }

/* ---------- Charts ---------- */
.chart-controls { display: flex; gap: var(--spacing-8); margin-bottom: var(--spacing-16); flex-wrap: wrap; }
.chart-controls select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-frosted-alt) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239da7ba' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--spacing-12) center;
  color: var(--color-frost-glow);
  border: 1px solid var(--color-glass-edge);
  border-radius: var(--radius-pill);
  padding: var(--spacing-8) 32px var(--spacing-8) var(--spacing-12);
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
}
.chart-controls select:hover { border-color: var(--color-glass-edge-strong); }
.chart-controls select:focus { outline: none; border-color: var(--color-void-violet); }
.chart-wrap {
  background: var(--surface-frosted);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-20);
  max-width: 100%;
}
.chart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-20);
  padding-bottom: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--color-glass-edge);
}
.chart-stat { display: flex; flex-direction: column; gap: 2px; }
.chart-stat-label {
  font-family: var(--font-eyebrow);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
  color: var(--color-fog-veil);
  font-weight: 400;
}
.chart-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-frost-glow);
}
.chart-stat-empty { font-size: var(--text-body); color: var(--color-fog-veil); }
.chart-canvas-box {
  position: relative;
  width: 100%;
  height: 260px;
}
@media (min-width: 640px) {
  .chart-canvas-box { height: 340px; }
}
@media (min-width: 1024px) {
  .chart-canvas-box { height: 440px; }
}

/* ---------- Login (Auth-Form Modal Card) ---------- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--surface-canvas);
}
.login-card {
  background: var(--surface-deep-glass);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  padding: var(--spacing-24) 28px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 300px;
}
.login-card .brand { text-align: center; margin-bottom: var(--spacing-8); font-size: 28px; }
.login-card input {
  background: rgba(199, 211, 234, 0.06);
  border: 1px solid var(--color-glass-edge);
  color: var(--color-pure-white);
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-small);
  font-size: var(--text-body);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s ease;
}
.login-card input::placeholder { color: var(--color-moon-mist); opacity: 0.6; }
.login-card input:focus { border-color: var(--color-glass-edge-strong); }
.login-card button {
  background: var(--color-void-violet);
  border: none;
  color: var(--color-pure-white);
  font-weight: 500;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-size: var(--text-body);
  font-family: var(--font-sans);
  height: 40px;
  transition: background 0.15s ease;
}
.login-card button:hover { background: var(--color-void-violet-hover); }
.login-card .error { color: var(--status-crit); font-size: var(--text-caption); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  height: 36px;
  padding: 0 var(--spacing-16);
  border-radius: var(--radius-pill);
  font-size: var(--text-body);
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: var(--color-void-violet); color: var(--color-pure-white); }
.btn-primary:hover { background: var(--color-void-violet-hover); }
.btn-ghost { background: var(--surface-frosted-hover); color: var(--color-pure-white); box-shadow: 0 0 0 1px var(--color-glass-edge) inset; }
.btn-ghost:hover { background: rgba(186, 214, 247, 0.12); }
.btn-outline { background: transparent; color: var(--color-frost-glow); box-shadow: 0 0 0 1px var(--color-glass-edge) inset; }
.btn-outline:hover { box-shadow: 0 0 0 1px var(--color-glass-edge-strong) inset; }
.btn-danger { background: transparent; color: var(--status-crit); padding: 0 var(--spacing-8); height: 28px; font-size: var(--text-caption); }
.btn-danger:hover { background: var(--status-crit-bg); }
.btn-ok { background: var(--status-ok-bg); color: var(--status-ok); box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25) inset; }
.btn-ok:hover { background: rgba(52, 211, 153, 0.2); }
.btn-sm { height: 28px; padding: 0 var(--spacing-12); font-size: var(--text-caption); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: 0 0 0 1px var(--color-glass-edge) inset; background: transparent; color: var(--color-fog-veil); }
.btn:disabled:hover { background: transparent; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--surface-frosted);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-24);
  max-width: 640px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); }
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--spacing-16);
  /* Без этого грид-ячейка не сжимает нативные виджеты (особенно input[type=date]
     на iOS — у него большая "внутренняя" минимальная ширина) и они вылезают за
     карточку вместо переноса/сжатия — ровно то, о чём сообщили на мобильном. */
  min-width: 0;
}
.form-field.span-2 { grid-column: 1 / -1; }
.form-label {
  font-family: var(--font-eyebrow);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-fog-veil);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
}
.form-input, .form-select, .form-textarea {
  background: rgba(199, 211, 234, 0.06);
  border: 1px solid var(--color-glass-edge);
  color: var(--color-frost-glow);
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-small);
  font-size: var(--text-body);
  font-family: var(--font-sans);
  outline: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-textarea { min-height: 72px; resize: vertical; font-family: var(--font-sans); }
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239da7ba' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-12) center;
  padding-right: 32px;
}
/* iOS Safari рисует input[type=date] своим "родным" составным виджетом, который
   игнорирует наш border-radius/padding и вылезает за пределы pill-рамки — сняли это
   системное оформление явно, вместо того чтобы полагаться на то, что оно само впишется
   в наш box model (реальный баг с телефона, не поймать в обычном браузерном тесте). */
input.form-input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;
  color-scheme: dark;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-moon-mist); opacity: 0.45; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-glass-edge-strong); background: rgba(199, 211, 234, 0.1); }
.form-checkbox-row { display: flex; align-items: center; gap: var(--spacing-8); font-size: var(--text-body); color: var(--color-frost-glow); }
.form-checkbox-row input { width: 16px; height: 16px; accent-color: var(--color-void-violet); }
.form-hint { font-size: var(--text-caption); color: var(--color-fog-veil); margin-top: 2px; }
.form-actions { display: flex; gap: var(--spacing-8); margin-top: var(--spacing-8); }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-24); flex-wrap: wrap; gap: var(--spacing-12); }

/* ---------- Hostings ---------- */
.hosting-row-inactive { opacity: 0.45; }
.hosting-provider { font-weight: 500; color: var(--color-frost-glow); }
.hosting-sub { font-size: var(--text-caption); color: var(--color-fog-veil); margin-top: 2px; }
.hosting-due { display: inline-flex; flex-direction: column; gap: 2px; }
.hosting-due-chip {
  display: inline-block;
  width: fit-content;
  font-size: var(--text-caption);
  font-weight: 500;
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-small);
}
.hosting-due-chip.crit { background: var(--status-crit-bg); color: var(--status-crit); }
.hosting-due-chip.warn { background: var(--status-warn-bg); color: var(--status-warn); }
.hosting-due-chip.ok { background: var(--surface-frosted-alt); color: var(--color-fog-veil); box-shadow: 0 0 0 1px var(--color-glass-edge) inset; }
/* Оранжевая подсветка "нет стоимости" (владелец 2026-08-14) — тот же токен, что и
   warn (#fbbf24, янтарно-оранжевый), но отдельный класс: смысл другой (не срок
   платежа, а неполнота учёта), не должен путаться с обычным warn по дате. */
.hosting-due-chip.missing-cost { background: var(--status-warn-bg); color: var(--status-warn); font-weight: 600; }
.hosting-row-missing-cost { box-shadow: inset 3px 0 0 var(--status-warn); }
.hosting-row-missing-cost .hosting-provider { color: var(--status-warn); }
.hosting-actions { display: flex; gap: var(--spacing-8); white-space: nowrap; }
.badge-autorenew {
  font-size: var(--text-caption);
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-small);
  font-weight: 500;
}
.badge-autorenew.on { background: var(--status-ok-bg); color: var(--status-ok); }
.badge-autorenew.off { background: var(--surface-frosted-alt); color: var(--color-fog-veil); }

.hint { color: var(--color-fog-veil); font-size: var(--text-caption); max-width: 70ch; margin: 0 0 var(--spacing-16); }
.cell-sub { display: block; color: var(--color-fog-veil); font-size: var(--text-caption); font-weight: 400; margin-top: 2px; }
.badge-stale {
  font-size: var(--text-caption);
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-small);
  background: var(--status-warn-bg);
  color: var(--status-warn);
  font-weight: 500;
}
tr.is-stale { opacity: 0.6; }

/* ---------- Домены подписки (.ru vs .com) ---------- */
.domain-split-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-frosted-alt);
  box-shadow: 0 0 0 1px var(--color-glass-edge) inset;
  margin-bottom: var(--spacing-12);
}
.domain-split-seg.ru { background: var(--status-warn); }
.domain-split-seg.com { background: var(--status-info); }
.domain-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  font-size: var(--text-caption);
  color: var(--color-fog-veil);
}
.domain-status-legend-item { display: inline-flex; align-items: center; gap: var(--spacing-8); }
.data-table td.center, .data-table th.center { text-align: center; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: var(--spacing-16); }
}