/* ==========================================================================
   Battery Monitor — общая пиксельная тема для всех страниц.

   Тёмная тема — приборный VFD-дисплей (бирюзовое свечение на чёрной панели),
   светлая — монохромный LCD, как у бытовых тестеров ёмкости.
   Всё построено на сетке в 2 px: рамки, отступы, шрифтовые размеры.
   ========================================================================== */

:root {
  color-scheme: dark;
  --void:#0b0e14;      /* фон корпуса */
  --panel:#141b28;     /* панель */
  --panel-2:#1e2839;   /* вложенная панель, трек шкалы */
  --edge:#35435d;      /* рамка */
  --ink:#dbe9ff;       /* основной текст */
  --dim:#7c8eae;       /* вторичный текст */
  --teal:#4fe3c1;      /* норма, основной акцент */
  --lime:#a9e05f;      /* заряд */
  --amber:#ffb648;     /* внимание */
  --red:#ff6259;       /* тревога */
  --scan:rgba(255,255,255,.045);
  --drop:rgba(0,0,0,.55);

  --px:2px;
  --mono:ui-monospace,"DejaVu Sans Mono","Liberation Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --void:#c6d1bd; --panel:#dae2cf; --panel-2:#bcc9ae; --edge:#6b7a61;
    --ink:#0f1710; --dim:#4a5646;
    --teal:#0a6553; --lime:#3b7615; --amber:#8a5000; --red:#a3160e;
    --scan:rgba(0,0,0,.05);
    --drop:rgba(0,0,0,.22);
  }
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
.spacer { flex:1; }

html { background:var(--void); }

body {
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--mono); font-size:13px; line-height:1.5;
}

/* Развёртка «строк дисплея» — статичная, поверх всего. */
body::after {
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--scan) 0 1px,transparent 1px 3px);
}

svg { image-rendering:pixelated; }
a { color:var(--teal); }

/* ------------------------------------------------------------- Примитивы -- */

/* Рамка «в пиксель»: четыре смещённые копии блока дают контур без углов. */
.px-box {
  background:var(--panel);
  box-shadow:0 calc(-1*var(--px)) var(--edge), 0 var(--px) var(--edge),
             calc(-1*var(--px)) 0 var(--edge), var(--px) 0 var(--edge);
}
.px-box.raised { box-shadow:0 calc(-1*var(--px)) var(--edge), 0 var(--px) var(--edge),
             calc(-1*var(--px)) 0 var(--edge), var(--px) 0 var(--edge),
             4px 4px 0 var(--drop); }
.px-inset { background:var(--panel-2); box-shadow:inset 0 0 0 var(--px) var(--edge); }

/* Служебные подписи: маленький капслок с разрядкой. */
.label {
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  font-weight:700;
}

.num { font-variant-numeric:tabular-nums; }

/* Пиксельный пунктир-разделитель. */
.rule {
  height:var(--px);
  background-image:linear-gradient(90deg,var(--edge) 0 4px,transparent 4px 8px);
  background-size:8px var(--px); background-repeat:repeat-x;
}

/* Кнопка-«клавиша»: нажимается на 2 px вниз-вправо. */
.btn {
  font:inherit; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; color:var(--ink); background:var(--panel-2);
  border:0; padding:8px 14px; cursor:pointer; text-decoration:none;
  display:inline-block; white-space:nowrap;
  box-shadow:0 calc(-1*var(--px)) var(--edge), 0 var(--px) var(--edge),
             calc(-1*var(--px)) 0 var(--edge), var(--px) 0 var(--edge),
             var(--px) var(--px) 0 var(--drop);
}
.btn:hover { color:var(--teal); }
.btn:active { transform:translate(var(--px),var(--px));
  box-shadow:0 calc(-1*var(--px)) var(--edge), 0 var(--px) var(--edge),
             calc(-1*var(--px)) 0 var(--edge), var(--px) 0 var(--edge); }
.btn:disabled { color:var(--dim); cursor:default; transform:none; }
.btn.primary { background:var(--teal); color:var(--void); }
.btn.primary:hover { color:var(--void); filter:brightness(1.1); }
.btn.ghost { background:transparent; }
.btn.danger:hover { color:var(--red); }

:focus-visible { outline:var(--px) solid var(--teal); outline-offset:var(--px); }

/* --------------------------------------------------------- Шкала заряда -- */
/* Десять сегментов: заливка идёт ступенями, поверх — «прорези» между делениями. */
.batt { display:flex; align-items:center; gap:var(--px); }
.meter {
  position:relative; flex:1; height:16px; background:var(--panel-2);
  box-shadow:inset 0 0 0 var(--px) var(--edge);
}
.meter i {
  display:block; height:100%; background-color:var(--teal);
  background-image:linear-gradient(45deg,rgba(0,0,0,.22) 25%,transparent 25% 75%,rgba(0,0,0,.22) 75%);
  background-size:4px 4px;
  transition:width .5s steps(10), background-color .3s;
}
.meter::after {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--void) calc(10% - 2px) 10%);
}
.batt .nub { width:4px; height:8px; background:var(--edge); flex:0 0 auto; }

/* Цвета уровня заряда (специфичность выше базовой заливки шкалы). */
.meter i.lvl-ok   { background-color:var(--teal); }
.meter i.lvl-warn { background-color:var(--amber); }
.meter i.lvl-low  { background-color:var(--red); }
.t-ok { color:var(--teal); } .t-warn { color:var(--amber); } .t-low { color:var(--red); }
.t-dim { color:var(--dim); } .t-charge { color:var(--lime); }

/* ------------------------------------------------------------- Индикатор -- */
.led { width:8px; height:8px; flex:0 0 auto; background:var(--dim);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.35); }
.led.on { background:var(--teal); }
.led.off { background:var(--red); }

/* Мигающий курсор — «дисплей жив». */
.cursor { display:inline-block; width:7px; height:12px; background:var(--teal);
  vertical-align:-2px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 0%,50% { opacity:1; } 50.01%,100% { opacity:0; } }

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