:root {
  --bg: #f4f5f7; --panel: #fff; --text: #1d2330; --muted: #6b7385; --line: #e2e5ea;
  --ok: #1f9d55; --warn: #d97706; --fail: #dc2626; --unknown: #9aa1ad; --accent: #2563eb;
  --mono: Consolas, "Cascadia Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171d; --panel: #1c2029; --text: #e6e8ec; --muted: #9aa1ad; --line: #2c313c; --accent: #60a5fa; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 13px/1.45 "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); }
[hidden] { display: none !important; }
a { color: var(--accent); }
button { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.danger { color: var(--fail); }
button:disabled { opacity: .5; cursor: default; }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: var(--panel); padding: 28px; border-radius: 10px; border: 1px solid var(--line); width: min(340px, 92vw); display: grid; gap: 12px; }
.login-box h1 { margin: 0 0 6px; font-size: 18px; }
.login-box input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.login-box button { padding: 8px; background: var(--accent); color: #fff; border: 0; }
.error { color: var(--fail); }

header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
header h1 { font-size: 16px; margin: 0; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.spacer { flex: 1; }
.muted { color: var(--muted); }
main { padding: 16px; display: grid; gap: 16px; }
section.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
section.panel h2 { font-size: 14px; margin: 0 0 10px; display: flex; gap: 10px; align-items: center; }
section.panel h3 { font-size: 13px; margin: 14px 0 6px; }
section.panel input:not([type]), section.panel select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.summary { display: flex; gap: 10px; flex-wrap: wrap; }
.pill { padding: 2px 10px; border-radius: 999px; font-weight: 600; border: 1px solid var(--line); }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.sql { white-space: pre-wrap; font-family: var(--mono); font-size: 11px; min-width: 320px; max-width: 640px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--unknown); vertical-align: middle; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.fail { background: var(--fail); }
.lvl-ok { color: var(--ok); } .lvl-warn { color: var(--warn); } .lvl-fail { color: var(--fail); }
.check { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.bad { color: var(--fail); font-weight: 600; }
.warnText { color: var(--warn); font-weight: 600; }

.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.chart { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.chart .title { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.chart .value { font-weight: 600; color: var(--text); }
.chart svg { width: 100%; height: 60px; display: block; }
.chart polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* "Who" on the Visitors tab: three tables side by side, but Territory holds full region names
   ("Ямало-Ненецкий автономный округ") while Gender and Age hold one short word. With equal columns
   the region name ate the whole cell and pushed Views and Share out of the panel, where nothing
   clipped them visibly - they were simply not on screen. So Territory gets the wider column, its
   long names wrap instead of stretching the row, and the panel scrolls rather than hiding anything. */
.charts.who { grid-template-columns: minmax(340px, 2.7fr) minmax(190px, 1fr) minmax(190px, 1fr); }  /* 2.7fr = 57% of the row against 46% at 1.7fr: Territory a quarter wider than it was. */
/* Deliberately NOT scoped to .who: the wider column needs the class that app.js puts on the div, but
   these three rules only need the stylesheet. If app.css ships ahead of app.js the Territory column
   stays narrow, and without them the region name would again push Views and Share off the panel with
   nothing on screen to show it had happened. Long text in any chart table wraps; numbers never do. */
.charts .chart { overflow-x: auto; }
.charts table td:first-child { white-space: normal; word-break: break-word; min-width: 120px; }
.charts table td.num { white-space: nowrap; }
@media (max-width: 1000px) { .charts.who { grid-template-columns: 1fr; } }

.toast { position: fixed; right: 16px; bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; max-width: 480px; box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 20; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; }
.kv div:nth-child(odd) { color: var(--muted); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
a.pill { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 4px; }
details summary { cursor: pointer; color: var(--accent); }

dialog.ask { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); padding: 18px 20px; width: min(460px, calc(100vw - 32px)); overflow: visible; }
dialog.ask::backdrop { background: rgba(0, 0, 0, .45); }
dialog.ask h3 { margin: 0 0 8px; font-size: 15px; }
dialog.ask p { margin: 0 0 12px; white-space: pre-line; }
dialog.ask label { display: grid; gap: 6px; margin-bottom: 12px; }
dialog.ask form { min-width: 0; }
dialog.ask input { width: 100%; min-width: 0; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
dialog.ask .actions { justify-content: flex-end; }
button.danger.solid { background: var(--fail); color: #fff; border-color: var(--fail); }
.toast .steps { margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: pre-wrap; max-height: 160px; overflow: auto; }

/* Deploy tab */
.dep-help { margin: 0 0 12px; max-width: 1100px; }
.dep-form { display: grid; gap: 10px; }
.dep-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; }
.dep-label { color: var(--muted); padding-top: 4px; }
.dep-dests { display: grid; gap: 4px; }
.dep-dest { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.dep-when { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.dep-form input[type=number] { width: 4.5em; }
.dep-form input[type=number], .dep-form input[type=password], .dep-form input[type=datetime-local], .dep-form input:not([type]) {
  font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.dep-form input[type=password], .dep-form input:not([type]) { width: min(420px, 100%); }
.tag { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
button.solid-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
td.wrap { white-space: normal; min-width: 160px; max-width: 520px; word-break: break-word; }
td.dep-status { min-width: 260px; }
/* The details row belongs to the package above it: no line between them, and not taller than needed. */
tr.dep-sub td { padding-top: 0; }
tr:has(+ tr.dep-sub) td { border-bottom: 0; }
/* Grid children default to min-width:auto, so one wide table widened the whole page instead of scrolling in its panel. */
main > * { min-width: 0; }
.dep-kv { margin: 8px 0; }
.mono { font-family: var(--mono); font-size: 11px; word-break: break-all; }
.steps-box { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: pre-wrap; max-height: 240px; overflow: auto; border-top: 1px solid var(--line); padding-top: 6px; }
@media (max-width: 700px) { .dep-row { grid-template-columns: 1fr; gap: 4px; } }