/* Monitor GUI — стиль по DESIGN.md (Resend: чёрный «терминал разработчика»).
   Чистый чёрный канвас, хайрлайн-границы #292d30, без теней, Inter + моно. */

:root {
  /* Цвета */
  --color-void-black: #000000;
  --color-graphite-rail: #292d30;
  --color-smoke: #464a4d;
  --color-ash: #6c6c6c;
  --color-steel: #6e727a;
  --color-fog: #a1a4a5;
  --color-mist: #abafb4;
  --color-frost: #f0f0f0;
  --color-pure-white: #ffffff;
  --color-electric-blue: #3b9eff;
  --color-resend-violet: #9281f7;
  --color-surface-card: #0b0e14;
  --color-overlay: #1b1b1b;

  /* Статус-цвета (только как «данные»: бейджи экспертов) */
  --color-delivered-green: #3ad389;
  --color-bounced-red: #ff9592;
  --color-complained-yellow: #ffca16;
  --color-opened-blue: #70b8ff;
  --color-clicked-lavender: #baa7ff;

  /* Шрифты */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Радиусы */
  --radius-buttons: 6px;
  --radius-badges: 6px;
  --radius-cards: 16px;

  /* Отступы */
  --page-max-width: 1100px;
  --card-padding: 32px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-void-black);
  color: var(--color-frost);
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* --- Навигация --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 59px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(25px);
  border-bottom: 1px solid var(--color-graphite-rail);
}
.nav__brand {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-pure-white);
  letter-spacing: -0.01em;
}
.nav__brand .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 8px;
  background: var(--color-resend-violet);
  vertical-align: middle;
}
.nav__links { display: flex; gap: 4px; }
.nav__link {
  background: none; border: none; cursor: pointer;
  color: rgba(240, 240, 240, 0.71);
  font-family: var(--font-inter); font-size: 14px;
  padding: 6px 10px; border-radius: var(--radius-buttons);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav__link:hover { color: var(--color-frost); }
.nav__link.is-active { color: var(--color-pure-white); background: rgba(255, 255, 255, 0.04); }
.nav__spacer { flex: 1; }
.nav__status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--color-fog);
}
.nav__status[hidden] { display: none; }
.nav__lang {
  margin-right: 14px;
  background: var(--color-void-black);
  color: var(--color-frost);
  border: 1px solid var(--color-graphite-rail);
  border-radius: var(--radius-buttons);
  font-family: var(--font-inter); font-size: 12px;
  padding: 4px 8px; cursor: pointer;
}

/* --- Модалка «Читать оригинал» (скриншот статьи) --- */
.reader-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px);
}
.reader-overlay[hidden] { display: none; }
.reader-box {
  display: flex; flex-direction: column;
  width: min(900px, 100%); max-height: 92vh;
  background: var(--color-void-black);
  border: 1px solid var(--color-graphite-rail);
  border-radius: var(--radius-cards);
  overflow: hidden;
}
.reader-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-graphite-rail);
}
.reader-title { flex: 1; font-family: var(--font-inter); font-size: 14px; color: var(--color-frost); }
.reader-src { font-size: 12px; color: var(--color-smoke); text-decoration: none; }
.reader-src:hover { color: var(--color-frost); }
.reader-body { overflow: auto; padding: 0; background: var(--color-overlay); }
.reader-body:has(.reader-shot) { padding: 0; }
.reader-shot { width: 100%; height: auto; display: block; }
.reader-loading, .reader-fail {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 24px; color: var(--color-smoke);
  font-family: var(--font-inter); font-size: 14px; text-align: center;
}
.reader-fail a { color: var(--color-frost); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-smoke); }
.status-dot.ok { background: var(--color-delivered-green); }
.status-dot.bad { background: var(--color-bounced-red); }

/* --- Каркас страницы --- */
.page { max-width: var(--page-max-width); margin: 0 auto; padding: 48px 24px 120px; }
.view { display: none; }
.view.is-active { display: block; }

.hero__eyebrow {
  display: inline-block;
  border: 1px solid var(--color-graphite-rail);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 14px; color: var(--color-frost);
  margin-bottom: 20px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--color-pure-white);
  margin: 0 0 16px;
}
.hero__subtitle {
  font-size: 18px; line-height: 1.6; color: var(--color-fog);
  margin: 0 0 32px; max-width: 640px;
}

/* --- Карточки --- */
.card {
  background: var(--color-void-black);
  border: 1px solid var(--color-graphite-rail);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}
.card + .card { margin-top: 16px; }
.card__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-ash); margin: 0 0 12px;
}

/* --- Формы --- */
label.field { display: block; margin-bottom: 16px; }
.field__name { display: block; font-size: 14px; color: var(--color-fog); margin-bottom: 8px; }
input[type="text"], input[type="password"], textarea, select {
  width: 100%;
  background: var(--color-surface-card);
  border: 1px solid var(--color-graphite-rail);
  border-radius: var(--radius-buttons);
  color: var(--color-frost);
  font-family: var(--font-inter);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--color-electric-blue); }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.row > .grow { flex: 1; min-width: 240px; }

/* --- Кнопки --- */
.btn {
  cursor: pointer;
  font-family: var(--font-inter); font-weight: 500; font-size: 14px;
  padding: 9px 16px; border-radius: var(--radius-buttons);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.btn--primary {
  background: transparent;
  border: 1px solid var(--color-electric-blue);
  color: var(--color-pure-white);
}
.btn--primary:hover { background: rgba(59, 158, 255, 0.10); }
.btn--ghost {
  background: transparent; border: 1px solid var(--color-graphite-rail);
  color: var(--color-frost);
}
.btn--ghost:hover { border-color: var(--color-smoke); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* --- Полоса экспертов --- */
.experts { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 0; }
.expert-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--color-graphite-rail);
  border-radius: var(--radius-badges);
  padding: 6px 10px; font-size: 12px; color: var(--color-mist);
  cursor: pointer; user-select: none;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.expert-badge:hover { border-color: var(--color-smoke); }
.expert-badge.is-off { opacity: 0.35; }
.expert-badge .swatch { width: 8px; height: 8px; border-radius: 2px; }

/* Цвета ролей (как «данные») */
.role--economist { color: var(--color-opened-blue); }
.role--political_scientist { color: var(--color-clicked-lavender); }
.role--sociologist { color: var(--color-delivered-green); }
.role--pr { color: var(--color-complained-yellow); }
.bg--economist { background: var(--color-opened-blue); }
.bg--political_scientist { background: var(--color-clicked-lavender); }
.bg--sociologist { background: var(--color-delivered-green); }
.bg--pr { background: var(--color-complained-yellow); }
.bd--economist { border-left-color: var(--color-opened-blue); }
.bd--political_scientist { border-left-color: var(--color-clicked-lavender); }
.bd--sociologist { border-left-color: var(--color-delivered-green); }
.bd--pr { border-left-color: var(--color-complained-yellow); }

/* --- Лента дискуссии --- */
.stream { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.stream:empty { display: none; }

.event-line {
  font-size: 13px; color: var(--color-fog);
  border-left: 2px solid var(--color-smoke);
  padding: 2px 0 2px 12px;
  white-space: pre-wrap;
}

.turn {
  background: var(--color-void-black);
  border: 1px solid var(--color-graphite-rail);
  border-left: 3px solid var(--color-graphite-rail);
  border-radius: var(--radius-cards);
  padding: 20px 24px;
  animation: fade-up 0.2s ease;
}
.turn__head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.turn__role { font-weight: 600; font-size: 14px; }
.turn__round { font-size: 12px; color: var(--color-ash); font-family: var(--font-mono); }
.turn__text { color: var(--color-frost); white-space: pre-wrap; line-height: 1.6; }
.turn__sources { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; }
.turn__sources a { color: var(--color-resend-violet); text-decoration: none; word-break: break-all; }
.turn__sources a:hover { text-decoration: underline; }

/* --- Управление источниками --- */
.source-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--color-graphite-rail);
}
.source-row:first-child { border-top: none; }
.source-row input[type="checkbox"] { accent-color: var(--color-electric-blue); }
.src-info { flex: 1; min-width: 0; }
.src-name { color: var(--color-frost); font-size: 14px; }
.src-url { color: var(--color-ash); font-family: var(--font-mono); font-size: 12px; word-break: break-all; }

/* --- Карточки новостей (Ленты) --- */
.article {
  background: var(--color-void-black);
  border: 1px solid var(--color-graphite-rail);
  border-radius: var(--radius-cards);
  padding: 20px 24px;
}
.article__title { font-weight: 600; font-size: 16px; color: var(--color-pure-white); margin: 0 0 6px; }
.article__title a { color: var(--color-pure-white); text-decoration: none; }
.article__title a:hover { text-decoration: underline; }
.article__meta { font-family: var(--font-mono); font-size: 12px; color: var(--color-ash); margin-bottom: 10px; }
.article__summary { color: var(--color-fog); margin-bottom: 14px; }
.pub-tag {
  display: inline-block; border-radius: var(--radius-badges); padding: 1px 6px; font-size: 11px;
  border: 1px solid var(--color-graphite-rail); color: var(--color-mist); margin-right: 8px;
}

/* --- Итоговое решение --- */
.decision { border-color: var(--color-smoke); }
.decision__verdict { font-size: 20px; line-height: 1.3; color: var(--color-pure-white); margin: 0 0 8px; }
.decision__meta { font-size: 12px; color: var(--color-ash); font-family: var(--font-mono); margin-bottom: 16px; }
.decision__section { margin-top: 16px; }
.decision__section h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ash); }
.decision ul { margin: 0; padding-left: 18px; }
.decision li { margin: 4px 0; color: var(--color-frost); }
.position { padding: 8px 0; border-top: 1px solid var(--color-graphite-rail); }
.position__role { font-weight: 600; font-size: 13px; }
.position__stance { color: var(--color-frost); }
.position__arg { color: var(--color-fog); font-size: 13px; }

.confbar { height: 6px; background: var(--color-surface-card); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.confbar__fill { height: 100%; background: var(--color-electric-blue); }

/* --- Баннеры / разное --- */
.banner { border-radius: var(--radius-buttons); padding: 12px 16px; font-size: 14px; margin-top: 16px; }
.banner--error { border: 1px solid var(--color-bounced-red); color: var(--color-bounced-red); }
.banner--ok { border: 1px solid var(--color-delivered-green); color: var(--color-delivered-green); }
.muted { color: var(--color-fog); }
.mono-path { font-family: var(--font-mono); font-size: 12px; color: var(--color-frost); word-break: break-all; }

/* --- Daily: пункты дайджеста и важность --- */
.digest-item { padding: 10px 0; border-top: 1px solid var(--color-graphite-rail); }
.digest-item:first-child { border-top: none; }
.digest-item a { color: var(--color-frost); text-decoration: none; }
.digest-item a:hover { text-decoration: underline; }
.imp-badge {
  display: inline-block; border-radius: var(--radius-badges); padding: 1px 7px;
  font-size: 11px; font-weight: 600; margin-right: 8px; border: 1px solid var(--color-graphite-rail);
}
.imp-high { color: var(--color-bounced-red); border-color: var(--color-bounced-red); }
.imp-medium { color: var(--color-complained-yellow); border-color: var(--color-complained-yellow); }
.imp-low { color: var(--color-ash); }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--color-smoke); border-top-color: var(--color-frost); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 8px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }