@font-face {
  font-family: "Golos Text";
  src: url("/static/fonts/golos-cyrillic.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  src: url("/static/fonts/golos-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* мир: плёнка ячеек, никелевые шины, белая печать */
  --wrap: #1e5bb0;
  --wrap-deep: #174a92;
  --wrap-ink: #ffffff;
  --wrap-soft: #c9dbf3;          /* вторичный текст на синем */
  --wrap-line: rgba(255, 255, 255, 0.22);
  --ink: #0f2a4d;
  --ink-2: #4a5d76;              /* вторичный текст на светлом */
  --ground: #eef2f6;
  --panel: #ffffff;
  --nickel: #c3c9d1;
  --nickel-2: #dfe3e8;
  --terminal: #d5402f;
  --cap-min: #0f2a4d;
  --cell-fill: #4f86d3;

  /* состояния */
  --on: #2e9e5b;
  --off: #e08a1e;
  --nolink: #8a97a8;
  --crit: #d5402f;

  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* четыре кегля */
  --t-label: 12px;
  --t-body: 15px;
  --t-metric: 22px;
  --t-hero: 56px;

  --r: 10px;
  --gap: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wrap: #1b4f9c;
    --wrap-deep: #143d79;
    --ink: #e6edf6;
    --ink-2: #9db0c7;
    --ground: #0b1626;
    --panel: #122238;
    --nickel: #3a4c63;
    --nickel-2: #24364d;
    --cap-min: #e6edf6;
    --cell-fill: #3d73c2;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--ink);
  background: var(--ground);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--wrap); color: #fff; }
:focus-visible { outline: 2px solid var(--wrap); outline-offset: 2px; border-radius: 6px; }
.field :focus-visible { outline-color: #fff; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--wrap); text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { a { color: #8fb6ec; } }
* { scrollbar-width: thin; scrollbar-color: var(--nickel) transparent; }

.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }

.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ каркас */

.app { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }

@media (min-width: 960px) {
  .app { grid-template-columns: 400px 1fr; }
  .field { position: sticky; top: 0; height: 100dvh; overflow: auto; }
}

/* ------------------------------------------------------------------ синее поле */

.field {
  background: var(--wrap);
  color: var(--wrap-ink);
  padding: 14px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; flex-direction: column; line-height: 1.2; }
.brand b { font-size: var(--t-body); font-weight: 700; }
.brand span { font-size: var(--t-label); color: var(--wrap-soft); letter-spacing: 0.08em; text-transform: uppercase; }
.topbar .ghost { color: #fff; }

.pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: #fff;
  color: #0f2a4d;              /* плашка всегда белая — текст тёмный в обеих темах */
  font-weight: 700;
  font-size: var(--t-body);
}
.pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--nolink); }
.pill small { font-weight: 500; color: #4a5d76; font-size: var(--t-body); }
.pill[data-state="on"] .dot { background: var(--on); }
.pill[data-state="off"] { background: #fff4e3; }
.pill[data-state="off"] .dot { background: var(--off); }
.pill[data-state="nolink"] .dot { background: var(--nolink); }

.ring-wrap { position: relative; width: min(260px, 72vw); aspect-ratio: 1; margin: 2px auto 0; }
.ring-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ring-track { stroke: var(--wrap-line); }
.ring-arc { stroke: #fff; transition: stroke-dashoffset 900ms var(--ease), stroke 300ms; }
.ring-arc[data-level="low"] { stroke: #ffc46b; }
.ring-arc[data-level="critical"] { stroke: #ff8a7a; }
.ring-tick { stroke: var(--wrap); stroke-width: 3; }
.ring-tick-label { fill: var(--wrap-soft); font-size: 10px; font-weight: 600; }
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.soc { font-size: var(--t-hero); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.soc sup { font-size: var(--t-metric); font-weight: 700; vertical-align: top; margin-left: 2px; letter-spacing: 0; }
.ah { margin-top: 6px; color: var(--wrap-soft); font-size: var(--t-body); }
.runtime { margin-top: 2px; font-weight: 700; }

.fresh { display: flex; justify-content: space-between; gap: 12px; color: var(--wrap-soft); font-size: var(--t-label);
  letter-spacing: 0.04em; }
.fresh b { color: #fff; font-weight: 600; }
.fresh.stale b { color: #ffc46b; }

.notice {
  background: var(--wrap-deep); border-radius: var(--r); padding: 12px 14px;
  display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-body);
}
.notice .icon { margin-top: 2px; }
.notice[hidden] { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r);
  border: 0; cursor: pointer; font-weight: 700;
  transition: transform 160ms var(--ease), background 160ms, opacity 160ms;
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-white { background: #fff; color: var(--wrap); }
.btn-white:hover { background: #e9f0fa; }
.btn-primary { background: var(--wrap); color: #fff; }
.btn-primary:hover { background: var(--wrap-deep); }
.btn-quiet { background: transparent; color: var(--ink-2); border: 1px solid var(--nickel); }
.btn-quiet:hover { color: var(--ink); border-color: var(--ink-2); }
.btn.spin .icon { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ghost { background: none; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; color: inherit; display: inline-flex; }
.ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* ------------------------------------------------------------------ навигация */

.topnav { display: none; gap: 4px; padding: 14px 28px 0; }
.topnav a, .tabbar a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-2);
  font-weight: 600; padding: 10px 14px; border-radius: var(--r);
}
.topnav a:hover { color: var(--ink); background: var(--nickel-2); }
.topnav a[aria-current="page"] { color: var(--ink); background: var(--panel); box-shadow: 0 1px 2px rgba(15, 42, 77, 0.12); }

.tabbar {
  position: sticky; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--panel); border-top: 1px solid var(--nickel);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a { flex-direction: column; gap: 2px; font-size: var(--t-label); padding: 8px 4px 10px; border-radius: 0; }
.tabbar a[aria-current="page"] { color: var(--wrap); }
@media (prefers-color-scheme: dark) { .tabbar a[aria-current="page"] { color: #8fb6ec; } }

/* на телефоне в «Журнале» и «Настройках» синее поле сжимается до полосы */
@media (max-width: 959px) {
  body:not([data-view="summary"]) .field .ring-wrap,
  body:not([data-view="summary"]) .field .ah-row,
  body:not([data-view="summary"]) .field .fresh,
  body:not([data-view="summary"]) .field #refresh { display: none; }
  body:not([data-view="summary"]) .field { padding-bottom: 16px; }
}

/* ------------------------------------------------------------------ содержимое */

main { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
@media (min-width: 960px) { main { padding: 20px 28px 40px; max-width: 1100px; } }
.view { display: flex; flex-direction: column; gap: var(--gap); }
.view[hidden] { display: none; }

.panel { background: var(--panel); border: 1px solid var(--nickel); border-radius: var(--r); padding: 16px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: var(--t-body); font-weight: 700; }
.panel-head .meta { color: var(--ink-2); font-size: var(--t-label); letter-spacing: 0.04em; }

/* полоса V / A / W */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; }
.strip > div { padding: 14px 16px; min-width: 0; }
.strip > div + div { border-left: 1px solid var(--nickel); }
.strip .value { display: block; font-size: var(--t-metric); font-weight: 700; margin-top: 4px; white-space: nowrap; }
.strip .value small { font-size: var(--t-body); font-weight: 600; color: var(--ink-2); margin-left: 3px; }
.strip .sub { font-size: var(--t-label); color: var(--ink-2); }
@media (max-width: 420px) {
  .strip > div { padding: 12px 10px; }
  .strip .value { font-size: 19px; }
}
.sign-plus { color: var(--on); }
.sign-minus { color: var(--off); }

/* ------------------------------------------------------------------ сборка ячеек */

.pack { display: flex; flex-direction: column; gap: 0; max-width: 640px; }
.cells { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cell {
  position: relative;
  background: var(--wrap);
  color: #fff;
  border-radius: 4px 4px 3px 3px;
  height: 84px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 4px 6px;
}
.cell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--nickel); z-index: 1; }
.cell .fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--cell-fill);
  transition: height 900ms var(--ease);
}
.cell > span { position: relative; }
.cell .n { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--wrap-soft); }
.cell .v { font-size: 12px; font-weight: 700; text-align: center; letter-spacing: -0.01em; }
.cell.max::before { background: var(--terminal); }
.cell.min::before { background: var(--cap-min); }

.busbar { position: relative; height: 6px; margin: 8px 2px; border-radius: 3px; background: var(--nickel); overflow: hidden; }
.busbar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 22%;
  border-radius: 3px; background: var(--wrap);
  opacity: 0; left: -22%;
}
.pack.flow-charge .busbar::after { animation: flow-right 1.6s var(--ease) 2; }
.pack.flow-discharge .busbar::after { animation: flow-left 1.6s var(--ease) 2; }
@keyframes flow-right { 0% { left: -22%; opacity: 1; } 100% { left: 100%; opacity: 1; } }
@keyframes flow-left { 0% { left: 100%; opacity: 1; } 100% { left: -22%; opacity: 1; } }
@media (prefers-color-scheme: dark) { .busbar::after { background: #8fb6ec; } }

.pack-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--ink-2); font-size: var(--t-label); }
.pack-legend i { display: inline-block; width: 14px; height: 5px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.temps { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.temps span { white-space: nowrap; }
.temps b { font-weight: 700; }

@media (max-width: 420px) {
  .cells { gap: 4px; }
  .cell { height: 74px; padding: 9px 2px 5px; }
  .cell .v { font-size: 11px; }
}

/* ------------------------------------------------------------------ графики */

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid line { stroke: var(--nickel-2); }
.chart .axis text { fill: var(--ink-2); font-size: 11px; }
.chart .outage { fill: var(--off); opacity: 0.16; }
.chart .soc-line { stroke: var(--wrap); stroke-width: 2.25; fill: none; }
.chart .soc-area { fill: var(--wrap); opacity: 0.08; }
.chart .pw-pos { fill: var(--on); opacity: 0.55; }
.chart .pw-neg { fill: var(--off); opacity: 0.7; }
.chart .gap { fill: var(--nolink); opacity: 0.18; }
@media (prefers-color-scheme: dark) { .chart .soc-line { stroke: #8fb6ec; } .chart .soc-area { fill: #8fb6ec; } }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: var(--t-label); margin-top: 8px; }
.chart-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }

.seg { display: inline-flex; border: 1px solid var(--nickel); border-radius: var(--r); padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--ink-2); font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--wrap); color: #fff; }

/* ------------------------------------------------------------------ журнал */

.events { list-style: none; margin: 0; padding: 0; }
.events li { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: baseline; padding: 11px 0; }
.events li + li { border-top: 1px solid var(--nickel-2); }
.events li.empty { display: block; padding: 4px 0; }
.events .mark { width: 10px; height: 10px; border-radius: 50%; align-self: center; }
.events .mark.outage { background: var(--off); }
.events .mark.no_link { background: var(--nolink); }
.events .what b { font-weight: 700; }
.events .what span { display: block; color: var(--ink-2); font-size: var(--t-label); letter-spacing: 0.02em; }
.events .dur { font-weight: 700; white-space: nowrap; }
.events .dur.live { color: var(--off); }
.empty { color: var(--ink-2); padding: 8px 0; }

.log {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  max-height: 420px; overflow: auto; margin: 0;
  background: var(--ground); border-radius: 8px; padding: 10px 12px;
  white-space: pre-wrap; word-break: break-word;
}
.log .t { color: var(--ink-2); }
.log .WARNING { color: #b26a00; }
.log .ERROR, .log .CRITICAL { color: var(--crit); }
@media (prefers-color-scheme: dark) { .log .WARNING { color: #f0b35a; } .log .ERROR { color: #ff8a7a; } }
select {
  border: 1px solid var(--nickel); border-radius: 8px; padding: 6px 10px; background: var(--panel);
}

/* ------------------------------------------------------------------ настройки */

.settings-form { display: flex; flex-direction: column; gap: var(--gap); }
.fieldset { border: 1px solid var(--nickel); border-radius: var(--r); background: var(--panel); padding: 16px; margin: 0; }
.fieldset legend { padding: 0 6px; margin-left: -6px; font-weight: 700; }
.fieldset > p { margin: 4px 0 14px; color: var(--ink-2); max-width: 65ch; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 12px 0; }
.row + .row { border-top: 1px solid var(--nickel-2); }
.row label { font-weight: 600; }
.row .hint { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--t-label); letter-spacing: 0.02em; display: flex; gap: 12px; flex-wrap: wrap; }
.row .hint button { background: none; border: 0; padding: 0; color: var(--wrap); cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { .row .hint button { color: #8fb6ec; } }
.num { display: inline-flex; align-items: center; border: 1px solid var(--nickel); border-radius: 8px; background: var(--ground); }
.num:focus-within { border-color: var(--wrap); box-shadow: 0 0 0 3px rgba(30, 91, 176, 0.18); }
.num input { width: 86px; border: 0; background: transparent; padding: 10px 4px 10px 12px; text-align: right; font-weight: 700; outline: none; }
.num span { padding-right: 12px; color: var(--ink-2); min-width: 3.2em; }
.row.changed .num { border-color: var(--wrap); }
.row.invalid .num { border-color: var(--crit); }

.scale { position: relative; height: 34px; margin: 6px 0 4px; }
.scale .bar { position: absolute; left: 0; right: 0; top: 12px; height: 8px; border-radius: 4px; background: var(--nickel-2); overflow: hidden; }
.scale .bar i { position: absolute; top: 0; bottom: 0; left: 0; }
.scale .tick { position: absolute; top: 4px; width: 3px; height: 24px; margin-left: -1.5px; border-radius: 2px; }
.scale .tick.warn { background: #e0b31e; }
.scale .tick.low { background: var(--off); }
.scale .tick.critical { background: var(--crit); }

.formbar { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--ground); padding: 12px 0; border-top: 1px solid var(--nickel); }
@media (max-width: 959px) { .formbar { bottom: var(--tabbar-h, 58px); } }
.row .hint button[hidden] { display: none; }
.formbar .msg { flex: 1 1 220px; }
.msg.err { color: var(--crit); font-weight: 600; }
.msg.ok { color: var(--on); font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: var(--r);
  transition: opacity 200ms, transform 300ms var(--ease); pointer-events: none; z-index: 10; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 960px) {
  .tabbar { display: none; }
  .topnav { display: flex; }
  .app > .tabbar { display: none; }
}

/* ------------------------------------------------------------------ широкие экраны */

@media (min-width: 1440px) {
  main { max-width: 1680px; }
  .view { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .view > * { min-width: 0; }

  /* сводка: V/A/W на всю ширину; сборка слева; температура и сутки справа */
  #view-summary > .strip { grid-column: 1 / -1; }
  #view-summary > :nth-child(2) { grid-row: span 2; }
  .pack { max-width: none; }

  /* журнал: график на всю ширину; события и лог рядом */
  #view-journal > :first-child { grid-column: 1 / -1; }
  #view-journal .log { max-height: 640px; }

  /* настройки: две колонки полей, панель сохранения снизу на всю ширину */
  #view-settings { display: block; }
  .settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .settings-form > .fieldset:nth-of-type(2) { grid-row: span 2; }
  .formbar { grid-column: 1 / -1; }
}

@media (min-width: 1680px) {
  :root { --t-label: 13px; --t-body: 16px; --t-metric: 26px; --t-hero: 68px; --gap: 20px; }
  .app { grid-template-columns: 460px 1fr; }
  .field { padding: 20px 28px 28px; gap: 18px; }
  .ring-wrap { width: 320px; }
  main { padding: 24px 36px 48px; }
  .panel { padding: 20px; }
  .cell { height: 108px; padding: 12px 6px 8px; }
  .cell .n { font-size: 11px; }
  .cell .v { font-size: 15px; }
  .cells { gap: 8px; }
  .busbar { height: 7px; margin: 10px 2px; }
  .btn { min-height: 52px; }
  .icon { width: 22px; height: 22px; }
  .chart .axis text { font-size: 12px; }
  .log { font-size: 13.5px; }
}

@media (min-width: 2200px) {
  :root { --t-label: 14px; --t-body: 18px; --t-metric: 30px; --t-hero: 80px; --gap: 24px; }
  .app { grid-template-columns: 540px 1fr; }
  .ring-wrap { width: 380px; }
  main { max-width: 2000px; padding: 28px 48px 56px; }
  .cell { height: 132px; }
  .cell .v { font-size: 17px; }
  .cell .n { font-size: 12px; }
  .chart .axis text { font-size: 13px; }
  .log { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}