:root {
    --ground: #FFF6FA; --ground-2: #F7E6EF; --surface: #FFFFFF; --surface-2: #F9EEF4;
    --ink: #241A21; --ink-soft: #6B5A64; --ink-faint: #98858F;
    --line: #EDDAE4; --accent: #C92D63; --accent-soft: #FFE4EC;
    --good: #1B6B45; --good-soft: #DEF0E6; --warn: #8A5300; --warn-soft: #F7EEDE;
    --bad: #9A2432; --bad-soft: #F6E2E5;
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
    --grid: #F3E6ED; --baseline: #DCC5D1;
    --serif: "Literata", Georgia, serif;
    --sans: "Golos Text", "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
    --shadow: 0 1px 2px rgba(120,40,80,.05), 0 4px 16px rgba(120,40,80,.07);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #1B1219; --ground-2: #241424; --surface: #241722; --surface-2: #2D1D2A;
      --ink: #F3E8EE; --ink-soft: #C4ABB8; --ink-faint: #8F7684;
      --line: #3C2938; --accent: #FF84A5; --accent-soft: #452132;
      --good: #6FCB98; --good-soft: #16301F; --warn: #E9A94A; --warn-soft: #2C2418;
      --bad: #F08A96; --bad-soft: #3A1C21;
      --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
      --grid: #33222F; --baseline: #4C3546;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    }
  }
  :root[data-theme="dark"] {
    --ground: #1B1219; --ground-2: #241424; --surface: #241722; --surface-2: #2D1D2A;
    --ink: #F3E8EE; --ink-soft: #C4ABB8; --ink-faint: #8F7684;
    --line: #3C2938; --accent: #FF84A5; --accent-soft: #452132;
    --good: #6FCB98; --good-soft: #16301F; --warn: #E9A94A; --warn-soft: #2C2418;
    --bad: #F08A96; --bad-soft: #3A1C21;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --grid: #33222F; --baseline: #4C3546;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }

  * { box-sizing: border-box; }
  body { margin:0; background: var(--ground) linear-gradient(175deg, var(--ground) 0%, var(--ground-2) 100%) fixed; color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  .topbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding: 14px clamp(16px, 4vw, 40px); background: var(--surface); border-bottom: 1px solid var(--line); }
  .wordmark { font-family: var(--sans); font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; }
  .wordmark span { color: var(--accent); }
  .proto-badge { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); background: var(--warn-soft); border-radius: 99px; padding: 3px 10px; }
  .who { margin-left:auto; display:flex; align-items:center; gap:8px; color: var(--ink-soft); font-size:.82rem; }
  .avatar { width:26px; height:26px; border-radius:50%; background: var(--accent-soft); color: var(--accent); display:grid; place-items:center; font-family: var(--mono); font-size:.7rem; font-weight:500; }

  nav.tabs { display:flex; gap:2px; padding: 0 clamp(16px, 4vw, 40px); background: var(--surface); border-bottom: 1px solid var(--line); overflow-x:auto; }
  nav.tabs button { background:none; border:none; border-bottom: 2px solid transparent; padding: 11px 14px 9px; cursor:pointer; color: var(--ink-soft); font-weight: 500; font-size: .9rem; white-space: nowrap; }
  nav.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
  nav.tabs button:hover { color: var(--ink); }

  main { padding: 20px clamp(16px, 4vw, 40px) 56px; max-width: 1180px; margin: 0 auto; }
  .screen { display:none; }
  .screen.active { display:block; }

  .filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin: 2px 0 18px; }
  .seg { display:inline-flex; background: var(--surface); border:1px solid var(--line); border-radius: 8px; padding:2px; }
  .seg button { border:none; background:none; border-radius:6px; padding: 4px 12px; cursor:pointer; font-size:.82rem; color: var(--ink-soft); }
  .seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight:600; }
  .filters select { font: inherit; font-size:.85rem; color: var(--ink); background: var(--surface); border:1px solid var(--line); border-radius:8px; padding: 5px 10px; }
  .quality { margin-left:auto; display:flex; align-items:center; gap:7px; font-size:.8rem; color: var(--ink-soft); }
  .dot { width:8px; height:8px; border-radius:50%; background: var(--good); }

  .tiles { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:12px; margin-bottom:16px; }
  .tile { background: var(--surface); border:1px solid var(--line); border-radius:12px; padding: 14px 16px 12px; box-shadow: var(--shadow); }
  .tile .lbl { font-size:.78rem; color: var(--ink-soft); margin-bottom:2px; }
  .tile .val { font-size:1.7rem; font-weight:600; letter-spacing:-.01em; }
  .tile .sub { display:flex; align-items:baseline; gap:8px; font-size:.78rem; color: var(--ink-faint); margin-top:2px; }
  .tile .sub .delta-up, .tile .sub .delta-down { white-space: nowrap; }
  .delta-up { color: var(--good); font-weight:600; }
  .delta-down { color: var(--bad); font-weight:600; }

  .card { background: var(--surface); border:1px solid var(--line); border-radius:12px; padding: 16px 18px 14px; box-shadow: var(--shadow); margin-bottom:16px; }
  .card h2 { margin:0 0 2px; font-size:1rem; font-weight:600; }
  .card .note { font-size:.8rem; color: var(--ink-faint); margin: 0 0 10px; }
  .legend { display:flex; gap:16px; flex-wrap:wrap; font-size:.8rem; color: var(--ink-soft); margin: 6px 0 4px; }
  .legend .key { display:inline-flex; align-items:center; gap:6px; }
  .legend .sw { width:14px; height:3px; border-radius:2px; display:inline-block; }

  .chartwrap { position:relative; overflow-x:auto; }
  .chartwrap svg { display:block; width:100%; height:auto; min-width:640px; }
  .tt { position:absolute; pointer-events:none; background: var(--ink); color: var(--ground); border-radius:8px; padding:8px 10px; font-size:.76rem; line-height:1.5; box-shadow: var(--shadow); opacity:0; transform: translate(-50%, -8px); transition: opacity .12s; min-width: 150px; z-index:5; }
  .tt.show { opacity:1; }
  .tt .t-head { font-family: var(--mono); font-size:.68rem; opacity:.7; margin-bottom:3px; }
  .tt .row { display:flex; justify-content:space-between; gap:14px; }
  .tt .row b { font-variant-numeric: tabular-nums; font-weight:600; }
  .tt .sw { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px; }

  .tablewrap { overflow-x:auto; }
  table { border-collapse: collapse; width:100%; font-size:.86rem; }
  th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-faint); font-weight:500; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); white-space:nowrap; }
  td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--grid); vertical-align: middle; white-space:nowrap; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  td.num { font-family: var(--mono); font-size:.8rem; }
  tr:last-child td { border-bottom:none; }
  .pill { display:inline-block; font-size:.7rem; font-weight:600; border-radius:99px; padding: 2px 9px; }
  .pill.probe { background: var(--warn-soft); color: var(--warn); }
  .pill.ok { background: var(--good-soft); color: var(--good); }
  .muted { color: var(--ink-faint); }
  .gate { font-family: var(--mono); color: var(--ink-faint); cursor: help; border-bottom: 1px dotted var(--ink-faint); }

  .banner { display:flex; gap:10px; align-items:flex-start; background: var(--surface); border:1px solid var(--line); border-left: 3px solid var(--accent); border-radius:10px; padding: 10px 14px; font-size:.82rem; color: var(--ink-soft); margin-bottom:16px; }
  .banner b { color: var(--ink); }

  .rates { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-bottom:6px; }
  .rate { background: var(--surface-2); border:1px solid var(--line); border-radius:10px; padding: 10px 12px; display:flex; flex-direction:column; }
  .rate label { display:block; flex:1; font-size:.74rem; color: var(--ink-soft); margin-bottom:4px; }
  .rate input { width:100%; font-family: var(--mono); font-size:1rem; color: var(--ink); background: var(--surface); border:1px solid var(--line); border-radius:7px; padding: 6px 9px; }
  .rate .u { font-size:.72rem; color: var(--ink-faint); }
  .journal { font-size:.76rem; color: var(--ink-faint); margin: 8px 0 14px; }
  .journal code { font-family: var(--mono); font-size:.72rem; background: var(--surface-2); border-radius:4px; padding: 1px 5px; }

  footer { padding: 18px clamp(16px, 4vw, 40px) 40px; max-width:1180px; margin:0 auto; font-size:.78rem; color: var(--ink-faint); border-top: 1px solid var(--line); }
  @media (max-width: 620px) { .who span:first-child { display:none; } }

  /* ── вход ── */
  #login { display:none; min-height:100vh; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:32px 20px; text-align:center; }
  body.pre-login #login { display:flex; }
  body.pre-login .topbar, body.pre-login nav.tabs, body.pre-login main, body.pre-login footer { display:none; }
  #logoBig { touch-action:none; cursor:crosshair; }
  .login-word { font-family:var(--sans); font-size:2.3rem; font-weight:600; letter-spacing:-.02em; margin-top:6px; }
  .login-word span { color:var(--accent); }
  .login-sub { margin:0 0 18px; font-size:.95rem; color:var(--ink-soft); max-width:440px; }
  .gbtn { display:inline-flex; align-items:center; gap:11px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:99px; padding:12px 26px; font-weight:600; font-size:.95rem; cursor:pointer; box-shadow:var(--shadow); }
  .gbtn:hover { border-color:var(--accent); }
  .login-note { margin-top:16px; font-size:.78rem; color:var(--ink-faint); max-width:430px; line-height:1.5; }
  .logo-sm { width:36px; height:36px; flex:none; cursor:crosshair; }

  /* ── панель на живых данных: правки поверх макета ── */
  /* Шесть плиток вместо пяти в макете: без явной сетки шестая висит сиротой на второй строке. */
  .tiles { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  @media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1240px) { .tiles { grid-template-columns: repeat(6, 1fr); } }
  .tile .val { font-size: clamp(1.15rem, 1.9vw, 1.7rem); }
  /* Кнопка входа через Google — это ссылка (переход на сервер), а не button,
     поэтому наследует подчёркивание и цвет ссылки. Снимаем. */
  a.gbtn { text-decoration: none; color: var(--ink); }
  a.gbtn:hover { text-decoration: none; }

  /* ── экран входа: локальная учётка видима, а не спрятана ──────────────────
     Аварийный вход ищут в момент, когда основной уже не работает. Прятать его
     в свёрнутый блок бледным текстом — значит спрятать именно тогда, когда он
     нужен. Google остаётся главной кнопкой, пароль — явной второй опцией. */
  .or { display:flex; align-items:center; gap:12px; width:100%; max-width:300px; margin:20px 0 4px; color:var(--ink-faint); font-size:.78rem; }
  .or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }

  .pw-form { display:flex; flex-direction:column; align-items:center; gap:7px; margin-top:6px; }
  .pw-form label { font-size:.8rem; font-weight:500; color:var(--ink-soft); }
  .pw-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .pw-form input {
    font:inherit; font-size:.92rem; padding:10px 16px; border-radius:99px;
    border:1px solid var(--line); background:var(--surface); color:var(--ink); min-width:210px;
  }
  .pw-form input:focus { border-color:var(--accent); }
  .pw-form button {
    font:inherit; font-size:.92rem; font-weight:600; padding:10px 22px; border-radius:99px;
    border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;
  }
  .pw-form button:hover { border-color:var(--accent); color:var(--accent); }
  .pw-hint { margin:2px 0 0; font-size:.76rem; color:var(--ink-faint); }

  /* Фирменный знак: крупный на экране входа реагирует на курсор, мелкий в шапке — нет. */
  #logoBig { touch-action: none; cursor: crosshair; margin-bottom: 2px; }
  .logo-sm { width: 36px; height: 36px; flex: none; }

  /* Плашка качества данных: видна на всех экранах, а не только в «Обзоре» —
     правило проекта «данные неполны → плашка в дашборде» относится ко всему. */
  #qualityBanner { margin-bottom: 16px; }
  .qbar { display:flex; gap:12px; align-items:flex-start; border-radius:10px; padding:11px 15px;
          font-size:.85rem; border:1px solid var(--line); background:var(--surface); }
  .qbar.warn { background:var(--warn-soft); border-color:transparent; color:var(--warn); }
  .qbar.fail { background:var(--bad-soft); border-color:transparent; color:var(--bad); }
  .qbar b { color:inherit; }
  .qbar ul { margin:5px 0 0; padding-left:18px; }
  .qbar li { margin:1px 0; }