/* SELF-HOSTED FONTS — served from LittleFS, no internet needed */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;          /* variable font: one file, all weights */
  font-display: swap;
  src: url('sg.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('pm-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('pm-600.woff2') format('woff2');
}

/* CSS VARIABLES */
:root {
  --bg: #0a0a0d;
  --panel: #131318;
  --panel2: #1a1a21;
  --panel3: #24242e;
  --line: #2a2a36;
  --line2: #383846;
  --ink: #f2f3f7;
  --mut: #9298a8;
  --copper: #f20d12;        /* EIA red */
  --copper-hi: #ff4d4d;
  --copper-deep: #ae0408;
  --ok: #3dd68c;
  --ok-deep: #1f8f5a;
  --err: #f2555a;
  --err-deep: #c0353a;
  --blue: #5b9dff;
  --cyan: #4fd8db;
  --shp: 91, 157, 255;   /* blue rgb  (info) */
  --shs: 61, 214, 140;   /* green rgb */
  --shc: 240, 0, 0;      /* EIA red rgb (brand accents) */
  --she: 242, 85, 90;    /* error red rgb */
  --ff-d: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --ff-m: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
  --rad: 12px;
  --rad-s: 8px;
}

/* RESET & BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::selection {
  background: rgba(var(--shc), 0.28);
  color: #fff;
}
body {
  font: 1rem/1.45 var(--ff-d);
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(var(--shc), 0.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(var(--shp), 0.05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* faint switchyard grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%);
}
.lv {
  flex-direction: column;
  min-height: 100dvh;
}

/* APP SHELL */
#app,
.si .sic,
.lv {
  display: flex;
  align-items: center;
  justify-content: center;
}
#app {
  width: 100%;
  flex: 1;
  padding: 20px 0;
  position: relative;
  z-index: 1;
}
#app.dv {
  align-items: flex-start;
  padding: 40px 20px;
  min-height: 100vh;
}

/* NAV BAR — LOGIN FLOATING PILLS */
.av,
.lrp {
  position: fixed;
  bottom: 16px;
  z-index: 2;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--ff-m);
  color: var(--mut);
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(18, 23, 36, 0.92);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.av {
  left: 16px;
  display: flex;
  align-items: center;
  letter-spacing: 0.04em;
  user-select: none;
}
.lrp {
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
}
.lrp:hover {
  color: var(--copper);
  border-color: rgba(var(--shc), 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--shc), 0.15);
  transform: translateY(-2px);
}
.lrp:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#lmP {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
#lmP:hover {
  transform: translateX(-50%) translateY(-2px);
}
#lmP:active {
  transform: translateX(-50%) translateY(0) scale(0.97);
}

/* LAYOUT — CONTAINERS */
.card,
.ctn,
.hdr {
  background: linear-gradient(180deg, var(--panel2) 0%, var(--panel) 100%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.card,
.ctn,
.hdr,
.stw .card,
.tbw,
.ufm {
  border: 1px solid var(--line);
  border-radius: var(--rad);
}
.card,
.ctn {
  padding: 32px 36px;
}
/* bay rail — copper hairline that lights up on hover */
.card,
.hdr,
.ctn:not(.dash) {
  position: relative;
  overflow: hidden;
}
.card::before,
.hdr::before,
.ctn:not(.dash)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--shc), 0.0) 15%,
    rgba(var(--shc), 0.85) 50%,
    rgba(var(--shc), 0.0) 85%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0.45;
  animation: busbar 7s linear infinite;
  pointer-events: none;
}
.card:hover::before {
  opacity: 0.95;
  animation-duration: 2.6s;
}
@keyframes busbar {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* card entrance */
.card,
.hdr {
  animation: bay-in 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@keyframes bay-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.dash > .card:nth-of-type(1) { animation-delay: 0.05s; }
.dash > .card:nth-of-type(2) { animation-delay: 0.12s; }
.dash > .card:nth-of-type(3) { animation-delay: 0.19s; }
.dash > .card:nth-of-type(4) { animation-delay: 0.26s; }
.dash > .card:nth-of-type(5) { animation-delay: 0.33s; }
.ctn {
  width: 90%;
  max-width: 420px;
}
.ctn.dash {
  max-width: 80%;
  width: 100%;
  background: 0 0;
  box-shadow: none;
  border: none;
  margin: 0 auto;
}
.hdr {
  padding: 24px 32px;
}
.card {
  margin-bottom: 28px;
}

/* LAYOUT — FLEX PRIMITIVES */
.fg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.fr {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.fr > .fg {
  flex: 1;
  min-width: 220px;
}
.fac {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.rg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* TYPOGRAPHY */
h1 {
  font-family: var(--ff-d);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 6px;
}
.hdr h1 {
  font: 700 1.8rem/1.2 var(--ff-d);
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--ink);
  position: relative;
  padding-left: 18px;
}
/* live busbar tick before dashboard titles */
.hdr h1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 1.15em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--copper-hi), var(--copper-deep));
  box-shadow: 0 0 12px rgba(var(--shc), 0.6);
  animation: tick-glow 2.8s ease-in-out infinite;
}
@keyframes tick-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(var(--shc), 0.35); }
  50% { box-shadow: 0 0 16px rgba(var(--shc), 0.85); }
}
h2 {
  color: var(--copper);
  font: 600 1.3rem/1.2 var(--ff-d);
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}
.sch h2 {
  margin: 0;
}
p {
  font-size: 0.9rem;
  margin: 0;
}
label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.stl {
  font-family: var(--ff-m);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 12px;
  opacity: 0.95;
}
.dbd,
.empty,
.stl,
label,
p {
  color: var(--mut);
}
.ctn > h1:first-child {
  text-align: center;
  margin-bottom: 6px;
}
.ctn > p:first-of-type {
  text-align: center;
  margin-bottom: 20px;
}
.ufm h3 {
  color: var(--ink);
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: 600;
}
.dhd h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.02em;
}
.card > h3,
.cgt {
  color: var(--copper);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 26px 0 16px;
}
.card > h3:first-of-type {
  margin-top: 0;
}
.sch + .cgt {
  margin-top: 0;
  padding-top: 26px;
}
.cgt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* section rule after the title */
.cgt::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line2), transparent);
  margin-left: 4px;
}

/* SECTION HEADERS */
.dhd,
.hdr,
.sch {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hdr {
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sch {
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: 16px;
}
.sch + * {
  margin-top: 28px;
}
.sch .sho {
  margin-left: auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}
.oi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chv {
  font-size: 0.95rem;
  color: var(--mut);
  transition: 0.2s;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--rad-s);
  background: var(--panel3);
  border: 1px solid var(--line2);
  cursor: pointer;
}
.chv:hover {
  color: var(--copper);
  border-color: rgba(var(--shc), 0.6);
  background: var(--panel2);
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(var(--shc), 0.25);
}

/* FORMS & INPUTS */
input,
select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--rad-s);
  background: #0d1320;
  color: var(--ink);
  font-family: var(--ff-d);
  font-size: 0.95rem;
  outline: 0;
  transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
}
input::placeholder {
  color: #5b6680;
}
input:focus,
select:focus {
  border-color: var(--copper);
  background: #101727;
  box-shadow: 0 0 0 4px rgba(var(--shc), 0.12), 0 0 14px rgba(var(--shc), 0.1);
}
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--panel3) !important;
}
input[type='number'] {
  font-family: var(--ff-m);
  font-size: 0.9rem;
}
.piw {
  position: relative;
}
.piw input {
  padding-right: 38px;
}
.pwt {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  color: var(--mut);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s, transform 0.15s;
}
.pwt:hover {
  opacity: 0.75;
  transform: translateY(-50%) scale(1.12);
}
.ufm {
  background: var(--panel3);
  padding: 28px 32px;
  margin-bottom: 28px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}
.ufm .fg input {
  background: #0d1320;
  border-color: var(--line);
}

/* RADIO BUTTONS */
.rl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--line2);
  border-radius: var(--rad-s);
  background: var(--panel3);
  transition: 0.2s;
  height: 44px;
  margin: 0;
}
.rl:hover {
  border-color: rgba(var(--shc), 0.55);
  background: var(--panel2);
}
.rl input[type='radio'] {
  width: 18px;
  height: 18px;
  accent-color: var(--copper);
  margin: 0;
}
.rl input[type='radio']:checked + .rt {
  color: var(--copper);
  font-weight: 700;
}
.rl:has(input[type='radio']:checked) {
  border-color: var(--copper);
  background: rgba(var(--shc), 0.09);
  box-shadow: 0 0 0 3px rgba(var(--shc), 0.1), inset 0 0 18px rgba(var(--shc), 0.05);
}
.rl:has(input[type='radio']:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.rl input[type='radio']:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.rt {
  font-size: 0.9rem;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.18s;
}

/* TOGGLE SWITCH */
.tgr {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tgc {
  display: none;
}
.tgs {
  position: relative;
  width: 60px;
  height: 32px;
  background: #0d1320;
  border: 1.5px solid var(--line2);
  border-radius: 32px;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
.tgs::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 24px;
  height: 24px;
  background: var(--mut);
  border-radius: 50%;
  transform: translateY(-50%);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.45, 0.5, 1),
    background 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.tgc:checked + .tgs {
  background: linear-gradient(180deg, var(--ok-deep), #156b43);
  border-color: var(--ok-deep);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 12px rgba(var(--shs), 0.3);
}
.tgc:checked + .tgs::before {
  transform: translateY(-50%) translateX(28px);
  background: #eafff4;
  box-shadow: 0 0 8px rgba(var(--shs), 0.65), 0 2px 4px rgba(0, 0, 0, 0.35);
}
.tog:hover .tgs {
  border-color: rgba(var(--shc), 0.5);
  transform: scale(1.03);
}
.tog:active .tgs {
  transform: scale(0.97);
}
.tgc:focus + .tgs {
  outline: 3px solid rgba(var(--shc), 0.5);
  outline-offset: 3px;
}
.tgt {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--mut);
  flex-shrink: 0;
}
.tog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  margin: 0;
}

/* TOGGLE SWITCH — HAS() LAYOUT */
.fr:has(.tgr) {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: max-content;
  gap: 16px;
  margin-bottom: 16px;
}
.fr:has(.tgr) > .fg,
.fr:has(.tgr) > .tgg {
  flex: 0 1 auto;
  width: 100%;
  margin-bottom: 0;
}
.fr:has(.tgr) .tgr {
  width: 100%;
  justify-content: space-between;
}
.fg > .fr:has(.tgr) {
  flex-direction: row;
  width: 100%;
  gap: 12px;
  flex-wrap: wrap;
}
.fg > .fr:has(.tgr) > .tgg {
  width: auto;
  flex: 0 0 auto;
}
#tarW {
  gap: 8px;
}
#tarW .fg {
  margin-bottom: 0;
}

/* BUTTONS — BASE */
.btn,
.bta,
.blk,
.brm,
.clb,
.ltg,
.msb,
.rl,
.tog,
.tgs {
  cursor: pointer;
}
.btn,
.bta,
.brm,
.ltg,
.msb,
.rl,
.tgs {
  user-select: none;
}
.bta,
.blk,
.brm,
.rt {
  transition: 0.18s;
}
.btn {
  width: 100%;
  border: 0;
  padding: 12px;
  border-radius: var(--rad-s);
  font: 700 0.92rem var(--ff-d);
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, var(--copper-hi) 0%, var(--copper) 45%, var(--copper-deep) 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  margin-top: 6px;
  position: relative;
  overflow: hidden;
  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--shc), 0.25);
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.btn:active::before {
  width: 320px;
  height: 320px;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 18px rgba(var(--shc), 0.3);
  filter: brightness(1.06);
}
.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:focus-visible {
  outline: 3px solid rgba(var(--shc), 0.55);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--shc), 0.2), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.bta:disabled,
.brm:disabled,
.btn:disabled,
.btn:disabled:hover,
.clb:disabled,
.cai:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:disabled,
.btn:disabled:hover {
  transform: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  filter: none;
}
.card form .btn[type='submit'],
.hdr .btn,
.sch .btn,
.ufm .fac .btn {
  width: auto;
  padding: 10px 18px;
}
.hdr .btn {
  padding: 12px 28px;
  font-size: 0.88rem;
  margin-top: 0;
}

/* BUTTONS — VARIANTS */
.bok {
  background: linear-gradient(180deg, #57e8a8 0%, var(--ok) 45%, var(--ok-deep) 100%);
  color: #07261a;
  box-shadow: 0 2px 8px rgba(var(--shs), 0.3), 0 0 0 1px rgba(var(--shs), 0.25);
}
.bok:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(var(--shs), 0.4), 0 0 16px rgba(var(--shs), 0.25);
}
.bok:active:not(:disabled) {
  box-shadow: 0 1px 3px rgba(var(--shs), 0.3);
}
.bok:focus-visible {
  outline-color: rgba(var(--shs), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--shs), 0.2), 0 4px 12px rgba(var(--shs), 0.4);
}
.ber {
  background: #1d1316;
  color: #ff8a8d;
  border: 1px solid rgba(var(--she), 0.55);
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.ber:hover:not(:disabled) {
  background: #2a1518;
  border-color: var(--err);
  color: #ffb3b5;
  box-shadow: 0 4px 14px rgba(var(--she), 0.25), 0 0 14px rgba(var(--she), 0.18);
}
.ber:active:not(:disabled) {
  box-shadow: 0 1px 3px rgba(var(--she), 0.3);
}
.ber:focus-visible {
  outline-color: rgba(var(--she), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--she), 0.2), 0 4px 12px rgba(var(--she), 0.4);
}
.bsc {
  background: var(--panel3);
  color: var(--ink);
  border: 1px solid var(--line2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.bsc:hover:not(:disabled) {
  background: #2a3550;
  border-color: #455680;
  transform: translateY(-1px);
}
.bsc:active {
  background: #1d2538;
  transform: translateY(0);
}

/* BUTTONS — LINK */
.blk {
  background: 0 0;
  border: none;
  color: var(--copper);
  font-family: var(--ff-d);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--rad-s);
}
.blk:hover {
  background: rgba(var(--shc), 0.1);
  transform: translateY(-1px);
}
.blk:active {
  transform: translateY(0);
}
.sch .blk {
  background: linear-gradient(180deg, var(--copper-hi) 0%, var(--copper) 45%, var(--copper-deep) 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 700;
  border-radius: var(--rad-s);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--shc), 0.25);
}
.sch .blk:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  background: linear-gradient(180deg, var(--copper-hi) 0%, var(--copper) 45%, var(--copper-deep) 100%);
}

/* BUTTONS — SIZES */
.bsm,
.bxs {
  padding: 8px 16px;
}
.bsm {
  font-size: 0.85rem;
}
.bxs {
  font-size: 0.72rem;
}

/* BUTTONS — ADD / REMOVE */
.bta,
.brm {
  padding: 7px 18px;
  font-size: 0.72rem;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bta {
  background: var(--ok-deep);
  color: #eafff4;
  box-shadow: 0 2px 6px rgba(var(--shs), 0.3);
}
.bta:hover:not(:disabled),
.brm:hover:not(:disabled) {
  transform: translateY(-1px);
}
.bta:hover:not(:disabled) {
  background: var(--ok);
  color: #07261a;
  box-shadow: 0 4px 12px rgba(var(--shs), 0.45);
}
.bta:disabled,
.brm:disabled {
  background: var(--panel3);
  color: #5b6680;
  box-shadow: none;
}
.brm {
  background: var(--err-deep);
  color: #ffecec;
  box-shadow: 0 2px 6px rgba(var(--she), 0.3);
}
.brm:hover:not(:disabled) {
  background: var(--err);
  color: #2b0708;
  box-shadow: 0 4px 12px rgba(var(--she), 0.45);
}

/* NOTIFICATIONS */
.msg {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  z-index: 9999;
  display: none;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: toast-in 0.32s cubic-bezier(0.22, 1.2, 0.36, 1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.msg.ok {
  background: rgba(13, 49, 35, 0.94);
  color: #7df0bb;
  border: 1px solid rgba(var(--shs), 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 22px rgba(var(--shs), 0.18);
}
.msg.err {
  background: rgba(58, 16, 18, 0.94);
  color: #ffa3a6;
  border: 1px solid rgba(var(--she), 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 22px rgba(var(--she), 0.18);
}

/* UTILITIES */
.hidden {
  display: none !important;
}
.empty {
  text-align: center;
  padding: 40px 20px;
  font-size: 0.92rem;
  font-style: italic;
}

/* MODAL */
.mbd {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 10, 16, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1000;
  animation: fade-in 0.2s ease;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mpl {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line2);
  border-top: 2px solid var(--copper);
  border-radius: var(--rad);
  padding: 26px 30px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(var(--shc), 0.07);
  max-width: 380px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: pop-in 0.28s cubic-bezier(0.22, 1.3, 0.36, 1);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mpl h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.mac {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.rKey {
  display: block;
  width: 100%;
  padding: 1rem;
  background: #0d1320;
  border: 1px dashed rgba(var(--shc), 0.45);
  outline: 0;
  border-radius: 10px;
  resize: none;
  overflow: hidden;
  field-sizing: content;
  cursor: pointer;
  user-select: all;
  word-break: break-all;
  text-align: center;
  color: var(--copper);
  font-family: var(--ff-m);
  font-size: 0.9rem;
}

/* PASSWORD CHANGE — SHARED */
.pww {
  margin-top: 24px;
  background: rgba(13, 19, 32, 0.6);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  border-left: 3px solid var(--copper);
}
.pww .btn {
  padding: 14px 24px;
  margin-top: 8px;
  font-size: 0.9rem;
}
.pww .fg input {
  background: #0d1320;
  border: 1px solid var(--line);
  color: var(--ink);
}
.pww .fg input:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(var(--shc), 0.14);
}

/* TABLE — STANDARD */
.tbw {
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.dtbl,
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
}
.tbl {
  border-radius: var(--rad);
  overflow: hidden;
}
.tbl td,
.tbl th {
  padding: 15px 14px;
  text-align: center;
  white-space: nowrap;
}
.tbl th {
  background: linear-gradient(180deg, #2b3552, #222b42);
  color: var(--copper);
  font-family: var(--ff-m);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(var(--shc), 0.35);
}
.dtbl td,
.tbl td {
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  font-family: var(--ff-m);
  transition: 0.18s;
}
.dtbl tbody tr:nth-child(2n),
.tbl tr:nth-child(2n) {
  background: #151b2b;
}
.dtbl tbody tr {
  border-bottom: 1px solid var(--line);
  transition: 0.18s;
}
.dtbl tbody tr:hover,
.tbl tr:hover {
  background: #1c2640;
  box-shadow: inset 3px 0 0 rgba(var(--shc), 0.55);
}
.dtbl tbody tr:last-child td,
.tbl tr:last-child td {
  border-bottom: none;
}
.tbl .act {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.tbl td.act {
  white-space: normal;
}
.tbl .act .btn {
  width: auto;
  margin-top: 0;
  font-family: var(--ff-d);
}

/* TABLE — DEVICE (DTBL) */
.dtw {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  overflow: hidden;
  max-height: 320px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dtbl thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #222b42;
}
.dtbl th {
  letter-spacing: 0.1em;
  border: none;
}
.dtbl td:last-child,
.dtbl th:last-child {
  text-align: center;
  width: 120px;
}
.dtbl tbody {
  display: block;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}
.dtbl tbody tr,
.dtbl thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.dtbl td {
  padding: 14px 16px;
}
.dtbl td:first-child {
  font-family: var(--ff-m);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #c4cad8;
}
.dtbl thead th {
  padding: 10px 8px;
  background: linear-gradient(180deg, #2b3552, #222b42);
  font-family: var(--ff-m);
  font-weight: 600;
  color: var(--copper);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(var(--shc), 0.35);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  transition: 0.18s;
}
.dtbl tbody td {
  padding: 8px 6px;
  text-align: center;
}

/* STATUS CARDS — SHARED */
.stw {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 24px;
}
.stw .card {
  margin-bottom: 0;
  padding: 24px 28px;
  background: linear-gradient(160deg, #1c2438 0%, #131927 100%);
  border: 1px solid var(--line2);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1 1 0;
  min-width: 160px;
  position: relative;
  overflow: hidden;
  animation: none;
}
.stw .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  background-size: 100% 100%;
  opacity: 0;
  transition: opacity 0.3s;
  animation: none;
}
.stw .card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(var(--shc), 0.2);
  border-color: rgba(var(--shc), 0.4);
}
.stw .card:hover::before {
  opacity: 0.9;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  min-height: 110px;
  justify-content: center;
}
.mode .stv,
.mode .stv span {
  font-family: var(--ff-m);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.mode .stv {
  color: var(--copper);
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  text-shadow: 0 0 18px rgba(var(--shc), 0.5);
}
.bst .stv {
  font-family: var(--ff-m);
  color: var(--ok);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  text-shadow: 0 0 18px rgba(var(--shs), 0.45);
}
.si .sic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(var(--shc), 0.28), rgba(var(--shc), 0.08) 70%);
  border: 2px solid rgba(var(--shc), 0.35);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.4),
    inset 0 1px 3px rgba(255, 255, 255, 0.1),
    0 0 18px rgba(var(--shc), 0.12);
}
.stw .card:hover .sic {
  transform: scale(1.06);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 3px rgba(255, 255, 255, 0.14),
    0 0 24px rgba(var(--shc), 0.22);
}
.si .sic span {
  font-size: 2.1rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.si .cpv {
  font-size: 0.88rem;
}
/* live pulse when charging — driven by state class on cpT */
.si:has(.cpCIP) .sic {
  border-color: rgba(var(--shs), 0.6);
  background: radial-gradient(circle at 32% 28%, rgba(var(--shs), 0.3), rgba(var(--shs), 0.08) 70%);
  animation: charge-pulse 1.8s ease-in-out infinite;
}
@keyframes charge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--shs), 0.45), 0 3px 14px rgba(0, 0, 0, 0.4); }
  60% { box-shadow: 0 0 0 14px rgba(var(--shs), 0), 0 3px 14px rgba(0, 0, 0, 0.4); }
}
/* fault states throb red */
.si:has(.cpES) .sic,
.si:has(.cpTPF) .sic,
.si:has(.cpTF) .sic,
.si:has(.cpVE) .sic {
  border-color: rgba(var(--she), 0.6);
  background: radial-gradient(circle at 32% 28%, rgba(var(--she), 0.3), rgba(var(--she), 0.08) 70%);
  animation: fault-pulse 1.1s ease-in-out infinite;
}
@keyframes fault-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--she), 0.5), 0 3px 14px rgba(0, 0, 0, 0.4); }
  60% { box-shadow: 0 0 0 12px rgba(var(--she), 0), 0 3px 14px rgba(0, 0, 0, 0.4); }
}

/* CHARGER STATE CLASSES */
.cpv {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  font-family: var(--ff-d);
  color: var(--ink);
  transition: color 0.3s;
}
.cpU {
  color: #c6d0e4;
}
.cpNVC {
  color: #ffb020;
}
.cpVPI {
  color: var(--blue);
}
.cpCIP {
  color: var(--ok);
  text-shadow: 0 0 14px rgba(var(--shs), 0.5);
}
.cpVR {
  color: var(--cyan);
}
.cpVE {
  color: #ffd84d;
}
.cpES {
  color: var(--err);
  text-shadow: 0 0 14px rgba(var(--she), 0.5);
}
.cpTPF {
  color: #e467e0;
}
.cpTF {
  color: #a07bff;
}

/* DEVICE MANAGEMENT — USER VIEW */
.dgr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
  align-items: stretch;
}
.dhd {
  margin-bottom: 12px;
  padding: 0 4px;
  min-height: 32px;
}
.dbd {
  font-family: var(--ff-m);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  background: var(--panel3);
  border-radius: 999px;
  border: 1px solid var(--line2);
}
.dbd.mxr {
  color: var(--err);
  background: rgba(var(--she), 0.12);
  border-color: rgba(var(--she), 0.55);
  animation: tick-glow-err 2s ease-in-out infinite;
}
@keyframes tick-glow-err {
  0%, 100% { box-shadow: 0 0 4px rgba(var(--she), 0.2); }
  50% { box-shadow: 0 0 12px rgba(var(--she), 0.5); }
}
.rfb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, color 0.15s;
  position: relative;
}
.rfb:hover {
  background: var(--panel2);
  border-color: rgba(var(--shc), 0.55);
  color: var(--copper);
}
.rfb:active {
  transform: scale(0.95);
}

/* SUPER ADMIN — RELAY / LOAD CONTROL */
.brw {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.bgr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.bbl {
  font-family: var(--ff-m);
  font-weight: 600;
  color: var(--mut);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.ltg,
.msb {
  border: 1px solid rgba(var(--she), 0.5);
  transition: 0.2s;
  background: linear-gradient(180deg, #46181b, #331113);
  color: #ff9a9d;
  font-family: var(--ff-m);
}
.msb {
  width: 100%;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 80px;
  min-height: 44px;
}
.msb:active {
  transform: scale(0.96);
}
.ltg:focus-visible,
.msb:focus-visible {
  outline: 3px solid rgba(var(--shc), 0.5);
  outline-offset: 2px;
}
.ltg.active,
.msb.active {
  background: linear-gradient(180deg, #134a30, #0d3a25);
  border-color: rgba(var(--shs), 0.7);
  color: #7df0bb;
  box-shadow: 0 0 14px rgba(var(--shs), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: 0 0 10px rgba(var(--shs), 0.6);
}
.lwp {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1;
}
.ltg {
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 11px;
  width: 56px;
  min-height: 44px;
}
.ltg:hover:not(:disabled),
.msb:hover:not(:disabled) {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.clb:active:not(.active),
.cai:active:not(.active),
.ltg:active {
  transform: scale(0.95);
}
.ltg:disabled {
  background: var(--panel3) !important;
  border-color: var(--line) !important;
  color: #5b6680 !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* SUPER ADMIN — CALIBRATION */
.clb,
.cai {
  background: var(--panel3);
  border: 1px solid var(--line2);
  color: var(--ink);
  border-radius: 10px;
  font-weight: 600;
  transition: 0.18s;
  text-align: center;
}
.cai {
  padding: 8px 10px;
  font-family: var(--ff-m);
  font-size: 0.85rem;
  cursor: text;
}
.clb:hover:not(:disabled):not(.active),
.cai:hover:not(:disabled):not(.active) {
  background: var(--panel2);
  border-color: rgba(var(--shc), 0.5);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.clb:disabled,
.cai:disabled {
  background: var(--panel);
  border-color: var(--line);
  color: var(--mut);
  transform: none;
}
.cai:disabled {
  opacity: 1;
}
.clb.active,
.cai.active {
  background: linear-gradient(180deg, var(--copper), var(--copper-deep));
  border-color: var(--copper);
  color: #fff;
  box-shadow: 0 2px 10px rgba(var(--shc), 0.35);
}
.cai::-webkit-inner-spin-button,
.cai::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cai[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.cbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.clb {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  font-size: 12px;
  min-height: 44px;
  font-family: var(--ff-m);
  letter-spacing: 0.05em;
  cursor: pointer;
}

/* SUPER ADMIN — DUTY CYCLE */
.dcw {
  width: 100%;
  max-width: 200px;
  align-self: flex-start;
}

/* SUPER ADMIN — SERIAL LOGS */
.lct {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.lcb {
  width: auto;
  padding: 8px 16px;
  font-size: 13px;
}
.ltw {
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: #070b13;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.6);
}
.log {
  width: 100%;
  min-height: 300px;
  height: 50vh;
  max-height: 60vh;
  padding: 14px;
  border: none;
  outline: 0;
  font-family: var(--ff-m);
  font-size: 8px;
  line-height: 1.5;
  color: #9fe8c0;
  background: 0 0;
  overflow-y: auto;
  white-space: pre-wrap;
  resize: none;
  caret-color: var(--copper);
}
.log::placeholder {
  color: #3d4a63;
}

/* BRAND LOGO */
.lgo {
  display: block;
  width: min(250px, 72%);
  height: auto;
  margin: 4px auto 20px;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55));
  animation: bay-in 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
/* small variant used inside dashboard headers */
.hbr {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hbr .lgo {
  width: 132px;
  margin: 0;
}
@media (max-width: 768px) {
  .hbr {
    flex-direction: column;
    gap: 10px;
  }
  .hbr .lgo {
    width: 150px;
  }
}

/* SCROLLBARS */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(13, 19, 32, 0.6);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 8px;
  border: 2px solid rgba(13, 19, 32, 0.6);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--shc), 0.55);
}
* {
  scrollbar-width: thin;
  scrollbar-color: #31405f rgba(13, 19, 32, 0.6);
}

/* RESPONSIVE — mobile (max 768px) */
@media (max-width: 768px) {
  .rg {
    width: 100%;
    justify-content: flex-start;
    flex-direction: column;
  }
  #app.dv {
    padding: 20px 10px;
  }
  .ctn.dash {
    padding: 0;
  }
  .ctn {
    padding: 20px;
  }
  h1 {
    font-size: 1.5rem;
  }
  .hdr {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .hdr .btn,
  .sch .btn,
  .pww .btn,
  .fac .btn {
    width: 100%;
  }
  .card,
  .mpl {
    padding: 20px;
  }
  .sch {
    flex-direction: column;
    align-items: stretch;
  }
  .sch:has(.chv) {
    flex-direction: row;
    align-items: center;
  }
  .sch .sho {
    margin-left: 0;
    justify-content: flex-start;
  }
  .sch .blk {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    text-align: left;
  }
  .fr {
    flex-direction: column;
    gap: 0;
  }
  .fr > .fg {
    min-width: 100%;
    margin-bottom: 0;
  }
  .fac .btn,
  .card form .btn[type='submit'] {
    max-width: none;
  }
  .tbw {
    margin-top: 16px;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  .tbl {
    min-width: 600px;
  }
  .tbl td,
  .tbl th {
    padding: 12px 10px;
    font-size: 0.75rem;
  }
  .tbl th {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }
  .tbl .act {
    flex-direction: row;
    gap: 6px;
    flex-wrap: wrap;
  }
  .tbl .act .btn {
    min-width: 70px;
    padding: 8px 12px;
    font-size: 0.7rem;
  }
  .lv {
    padding: 80px 0;
  }
  .lv #app {
    padding: 0;
  }
  .av,
  .lrp {
    font-size: 0.78rem;
    padding: 8px 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .av {
    left: max(12px, env(safe-area-inset-left));
  }
  .lrp {
    right: max(12px, env(safe-area-inset-right));
  }
  .stw {
    justify-content: flex-start;
    gap: 12px;
  }
  .stw .card {
    flex: 1 1 calc(50% - 6px);
    min-width: 140px;
    padding: 20px 24px;
  }
  .mode .stv {
    font-size: 1.5rem;
  }
  .si .sic {
    width: 58px;
    height: 58px;
  }
  .si .sic span {
    font-size: 1.9rem;
  }
  .dgr {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .brw {
    flex-direction: column;
    align-items: stretch;
  }
  .lwp {
    justify-content: center;
  }
  .dtw {
    max-height: 280px;
  }
  .dtbl tbody {
    max-height: 220px;
  }
  .chv {
    width: 32px;
    height: 32px;
  }
  .rl {
    width: 100%;
  }
  .fr:has(.tgr) {
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }
  .fr:has(.tgr) > .fg {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .fr:not(:has(.tgr)) > .fg {
    margin-bottom: 16px;
  }
  .fg > .fr:has(.tgr) {
    flex-direction: column;
  }
  .fg > .fr:has(.tgr) > .tgg {
    width: 100%;
  }
  .tgr {
    gap: 8px;
    max-width: 100%;
    padding: 0;
    justify-content: space-between;
  }
  .blk {
    font-size: 0.85rem;
  }
  .cgt {
    flex-wrap: wrap;
    gap: 8px;
  }
}

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

/* RESPONSIVE — desktop (min 768px) */
@media (min-width: 768px) {
  .brw {
    gap: 20px;
  }
  .bgr {
    gap: 10px;
  }
  .bbl {
    font-size: 12px;
  }
  .msb {
    padding: 10px 24px;
    font-size: 15px;
    min-width: 100px;
  }
  .dtbl tbody td,
  .dtbl thead th {
    padding: 16px 14px;
    font-size: 0.88rem;
  }
  .dtbl thead th {
    font-size: 11px;
  }
  .clb {
    padding: 12px 16px;
    font-size: 0.85rem;
    min-height: 48px;
  }
  .cbs {
    gap: 14px;
  }
  .cai {
    min-height: 44px;
    font-size: 13px;
  }
  .ltg {
    padding: 12px 20px;
    font-size: 0.85rem;
    width: 72px;
  }
  .log {
    font-size: 0.85rem;
  }
  .cpv {
    font-size: 22px;
  }
}

/* RESPONSIVE — small (max 480px) */
@media (max-width: 480px) {
  .card,
  .mpl {
    padding: 16px;
  }
  .stw .card {
    flex: 1 1 100%;
    min-width: 0;
  }
  h1 {
    font-size: 1.35rem;
  }
}