:root {
  --navy: #152033;
  --navy-2: #1c2a44;
  --blue: #2f6fed;
  --bg: #eef2f7;
  --card: #fff;
  --text: #1a2332;
  --muted: #667085;
  --line: #e4e9f0;
  --green: #12a15c;
  --red: #d64545;
  --amber: #d48b16;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
}

.login-body {
  align-items: center;
  background: var(--navy);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  padding: 36px 32px 28px;
  width: min(420px, calc(100vw - 32px));
}

.brand-mark {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.brand-mark svg { height: 28px; width: 28px; }
.brand-mark strong { font-size: 20px; }
.login-card p { color: var(--muted); margin: 0 0 22px; }
.login-card .tagline { color: var(--blue); font-weight: 600; margin: 0 0 8px; }
.login-card label { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.login-card input {
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  padding: 10px 12px;
}
.login-card button, .app-topbar button, .page-card button.primary {
  background: var(--blue);
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font: 600 14px/1 "Segoe UI", system-ui, sans-serif;
  padding: 11px 14px;
  width: 100%;
}
.login-error { color: var(--red); font-size: 13px; min-height: 1.2em; }
.enroll-qr {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  margin: 0 0 12px;
  padding: 12px;
}
.enroll-qr svg {
  display: block;
  height: auto;
  width: min(220px, 100%);
}

.app-frame { display: flex; min-height: 100vh; }
.app-sidebar {
  background: var(--navy);
  color: #d7deea;
  display: flex;
  flex-direction: column;
  flex: 0 0 240px;
  padding: 18px 12px 16px;
}
.app-sidebar .brand { padding: 4px 10px 18px; }
.app-sidebar .brand strong { color: #fff; display: block; font-size: 18px; }
.app-sidebar .brand span { color: #8b97ab; font-size: 12px; }
.app-sidebar nav a {
  align-items: center;
  border-radius: 8px;
  color: inherit;
  display: flex;
  gap: 8px;
  padding: 9px 10px;
  text-decoration: none;
}
.app-sidebar nav a:hover, .app-sidebar nav a.active {
  background: var(--navy-2);
  color: #fff;
}
.app-sidebar nav a.active { box-shadow: inset 3px 0 0 var(--blue); }
.app-sidebar .grow { flex: 1; }
.app-sidebar .debug-link { color: #8b97ab; font-size: 12px; margin-top: 8px; }

.app-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-topbar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 20px;
}
.app-topbar input[type="search"] {
  border: 1px solid var(--line);
  border-radius: 999px;
  flex: 1;
  max-width: 420px;
  padding: 8px 14px;
}
.tenant-select, .app-topbar button.ghost {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  width: auto;
}
.who { color: var(--muted); font-size: 13px; text-align: right; }
.who strong { color: var(--text); display: block; }

.app-content { padding: 22px 24px 40px; }
.app-content h1 { font-size: 26px; margin: 0 0 6px; }
.lede { color: var(--muted); margin: 0 0 18px; }

.kpi-grid, .split, .table-wrap, .page-card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  padding: 0;
  background: none;
  box-shadow: none;
}
.kpi {
  background: var(--card);
  border-radius: 14px;
  padding: 14px 16px;
}
.kpi span { color: var(--muted); font-size: 12px; }
.kpi b { display: block; font-size: 22px; margin-top: 4px; }
.split { display: grid; gap: 16px; grid-template-columns: 1.3fr .7fr; }
.page-card { padding: 16px; }
.page-card h2 { font-size: 16px; margin: 0 0 12px; }
.page-card h3 { font-size: 14px; margin: 16px 0 8px; }

table.data { border-collapse: collapse; width: 100%; }
table.data th, table.data td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
}
table.data th { color: var(--muted); font-size: 12px; font-weight: 600; }
.device-row { cursor: pointer; }
.device-row:hover { background: #f4f7fb; }
.device-row a { color: inherit; text-decoration: none; }
.device-row a:hover, .device-row a:focus { color: var(--blue); text-decoration: underline; }

.device-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.device-head h1 { margin-bottom: 4px; }
.device-serial { color: var(--muted); font-family: ui-monospace, Consolas, monospace; margin: 0 0 10px; }
.device-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0;
}
.device-vitals {
  background: #f4faf6;
  border: 1px solid #d5eadc;
  border-radius: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
}
.device-vitals.is-stale {
  background: #fff8eb;
  border-color: #f5d9a6;
}
.device-vitals.is-offline {
  background: #f8fafc;
  border-color: var(--line);
}
.device-vitals.is-alarm {
  background: #fef3f2;
  border-color: #fecdca;
}
.device-vitals .dot { height: 10px; width: 10px; }
.vitals-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
}
.vitals-countdown {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.vitals-meter {
  background: #e4eee7;
  border-radius: 99px;
  height: 6px;
  margin: 10px 0 8px;
  overflow: hidden;
}
.vitals-meter span {
  background: var(--green);
  display: block;
  height: 100%;
  width: 0;
  transition: width .45s linear;
}
.device-vitals.is-stale .vitals-meter span { background: #dc6803; }
.device-vitals.is-offline .vitals-meter span,
.device-vitals.is-alarm .vitals-meter span { width: 100% !important; }
.device-vitals.is-offline .vitals-meter span { background: #98a2b3; }
.device-vitals.is-alarm .vitals-meter span { background: var(--red); }
.vitals-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.vitals-chips li {
  background: #fff;
  border: 1px solid #d5eadc;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
}
.vitals-feed {
  border-top: 1px solid #d5eadc;
  list-style: none;
  margin: 12px 0 0;
  padding: 10px 0 0;
}
.vitals-feed li {
  font-size: 13px;
  padding: 3px 0;
}
.vitals-feed time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .vitals-meter span { transition: none; }
}
.autofill-trap {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}
.pending-flag {
  background: #f5d90a;
  border-radius: 50%;
  color: #6b4f00;
  cursor: help;
  display: inline-flex;
  font: 700 11px/1 "Segoe UI", system-ui, sans-serif;
  height: 16px;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  text-decoration: none;
  vertical-align: middle;
  width: 16px;
}
.pending-banner {
  background: #fff8eb;
  border: 1px solid #f5d9a6;
  border-radius: 10px;
  color: #7a5c00;
  font-size: 13px;
  margin: 0 0 12px;
  padding: 8px 12px;
}
.page-card a.button,
.device-actions button, .device-actions a.button {
  background: var(--blue);
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font: 600 14px/1 "Segoe UI", system-ui, sans-serif;
  padding: 11px 14px;
  text-decoration: none;
  width: auto;
}
.device-actions button.ghost, .device-actions a.button.ghost {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
}
.device-actions button.ghost.danger,
.device-actions button.danger,
button.danger {
  background: #fff;
  border: 1px solid #fda29b;
  color: var(--red);
}
.device-actions button.ghost.danger:hover,
.device-actions button.danger:hover,
button.danger:hover {
  background: #fef3f2;
}
.device-actions button:disabled,
.device-actions a.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .45;
}

.tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 16px;
  overflow: auto;
}
.tab-strip button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font: 600 13px/1 "Segoe UI", system-ui, sans-serif;
  padding: 10px 12px;
  width: auto;
}
.tab-strip button[aria-selected="true"] {
  border-bottom-color: var(--blue);
  color: var(--text);
}
.kv-grid {
  display: grid;
  gap: 8px 24px;
  grid-template-columns: minmax(140px, 200px) 1fr;
  margin: 0;
}
.kv-grid dt { color: var(--muted); }
.kv-grid dd { margin: 0; }
.placeholder { color: var(--muted); margin: 0; }
.dot { border-radius: 99px; display: inline-block; height: 8px; margin-right: 6px; width: 8px; }
.dot.online { background: var(--green); }
.dot.offline { background: #98a2b3; }
.dot.alert { background: var(--red); }
.dot.online.beat {
  animation: hb-beat 0.7s ease-out;
}
.status-live { align-items: center; display: inline-flex; gap: 4px; }
.status-active { color: inherit; font-weight: 600; }
@keyframes hb-beat {
  0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0.55); transform: scale(1); }
  35% { box-shadow: 0 0 0 7px rgba(18, 183, 106, 0); transform: scale(1.55); }
  100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dot.online.beat { animation: none; }
}
.badge {
  background: #eef4ff;
  border-radius: 999px;
  color: var(--blue);
  font-size: 12px;
  padding: 2px 8px;
}
.fw-badge {
  background: #ecfdf3;
  border-radius: 999px;
  color: #067647;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
}
.fw-badge.outdated {
  background: #fff4e5;
  color: #b54708;
}
.firmware-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 0 20px;
  padding: 14px 16px;
}
.firmware-version {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.firmware-version:first-child { border-top: 0; }
.firmware-version p { color: var(--muted); margin: 6px 0 0; }
.firmware-actions { margin-top: 10px; }
.firmware-usb { margin-top: 16px; align-items: end; }
.firmware-usb .firmware-actions { margin: 0; }
.ota-progress { margin-top: 12px; }
.ota-progress-bar {
  background: #eef2f6;
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.ota-progress-bar span {
  background: var(--blue);
  display: block;
  height: 100%;
  width: 0;
}
#clearAlarmButton {
  background: var(--red);
}

.debug-shell .app-content { padding: 0; }
.debug-shell .topbar { border-radius: 0; margin: 0; }

.app-sidebar nav a svg {
  fill: none;
  flex: 0 0 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
}
.search-wrap { flex: 1; max-width: 420px; position: relative; }
.search-wrap input { width: 100%; }
.search-results {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
  left: 0;
  max-height: 320px;
  overflow: auto;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
}
.search-results a {
  border-radius: 8px;
  color: inherit;
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  text-decoration: none;
}
.search-results a:hover, .search-results a:focus { background: #f4f7fb; }
.search-results small { color: var(--muted); }
.search-empty { color: var(--muted); padding: 12px; }
.alarm-dot {
  background: var(--red);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 8px;
  text-transform: uppercase;
}
.offline-banner {
  background: #fff4e5;
  border-radius: 8px;
  color: #9a6700;
  font-size: 12px;
  padding: 6px 10px;
}
.alarm-box {
  align-items: center;
  background: rgba(6, 8, 14, .72);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 2000;
}
.alarm-box[hidden] { display: none !important; }
.alarm-card {
  animation: alarm-pulse 1.1s ease-in-out infinite;
  background: var(--red);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  color: #fff;
  max-width: 420px;
  padding: 22px 24px;
  text-align: center;
}
.alarm-card strong { display: block; font-size: 21px; }
.alarm-card p { margin: 8px 0 16px; opacity: .92; }
.alarm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.alarm-actions button {
  background: #fff;
  border: 0;
  border-radius: 10px;
  color: var(--red);
  cursor: pointer;
  font: 600 14px/1 "Segoe UI", system-ui, sans-serif;
  padding: 11px 14px;
  width: auto;
}
.alarm-actions .secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .6);
  color: #fff;
}
@keyframes alarm-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .alarm-card { animation: none; }
}

.config-sync-overlay {
  align-items: center;
  background: rgba(10, 16, 28, .78);
  backdrop-filter: blur(4px);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 2100;
}
.config-sync-overlay[hidden] { display: none !important; }
.config-sync-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  max-width: 460px;
  padding: 28px 26px 24px;
  text-align: center;
  width: min(460px, calc(100vw - 32px));
}
.config-sync-head { margin-bottom: 18px; position: relative; }
.config-sync-head strong {
  display: block;
  font-size: 24px;
  line-height: 1.2;
}
.config-sync-head p {
  color: var(--muted);
  margin: 6px 0 0;
}
.config-sync-spinner,
.config-sync-check,
.config-sync-queued,
.config-sync-error {
  border-radius: 999px;
  height: 56px;
  line-height: 56px;
  margin: 0 auto 12px;
  width: 56px;
}
.config-sync-spinner {
  animation: config-spin .9s linear infinite;
  border: 4px solid #e4e9f0;
  border-top-color: var(--blue);
  display: none;
}
.config-sync-check,
.config-sync-queued,
.config-sync-error {
  color: #fff;
  display: none;
  font-size: 30px;
  font-weight: 800;
}
.config-sync-check { background: var(--green); }
.config-sync-queued { background: var(--amber); font-size: 26px; }
.config-sync-error { background: var(--red); }
.config-sync-card.is-busy .config-sync-spinner { display: block; }
.config-sync-card.is-success .config-sync-check { display: block; }
.config-sync-card.is-queued .config-sync-queued { display: block; }
.config-sync-card.is-error .config-sync-error { display: block; }
.config-sync-flow {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto 1fr;
  margin: 8px 0 18px;
}
.config-sync-node {
  background: #f4f7fb;
  border: 2px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 10px;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.config-sync-node.active {
  border-color: var(--blue);
  color: var(--text);
}
.config-sync-node.done {
  background: #ecfdf3;
  border-color: var(--green);
  color: var(--green);
}
.config-sync-node-icon {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  letter-spacing: .06em;
  width: 34px;
}
.config-sync-track {
  min-width: 88px;
  position: relative;
}
.config-sync-line {
  background: #d8dee8;
  border-radius: 99px;
  display: block;
  height: 4px;
}
.config-sync-packet {
  animation: config-packet 1.1s ease-in-out infinite;
  background: var(--blue);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(47, 111, 237, .18);
  display: block;
  height: 12px;
  left: 0;
  position: absolute;
  top: -4px;
  width: 12px;
}
.config-sync-card.is-success .config-sync-packet,
.config-sync-card.is-error .config-sync-packet {
  animation: none;
  left: calc(100% - 12px);
}
.config-sync-steps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  text-align: left;
}
.config-sync-steps li {
  border-left: 3px solid #e4e9f0;
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  padding: 6px 0 6px 12px;
}
.config-sync-steps li.active {
  border-left-color: var(--blue);
  color: var(--text);
  font-weight: 600;
}
.config-sync-steps li.done {
  border-left-color: var(--green);
  color: var(--green);
}
.config-sync-result {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  min-height: 1.2em;
}
.config-sync-result.ok { color: var(--green); }
.config-sync-result.queued { color: var(--amber); }
.config-sync-result.error { color: var(--red); }

.config-queue-bar {
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: 14px;
  bottom: 18px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
  max-width: 360px;
  padding: 12px 14px;
  position: fixed;
  right: 18px;
  width: min(360px, calc(100vw - 32px));
  z-index: 1900;
}
.config-queue-bar[hidden] { display: none !important; }
.config-queue-head {
  align-items: center;
  display: flex;
  gap: 8px;
}
.config-queue-head strong { flex: 1; font-size: 14px; }
.config-queue-badge {
  align-items: center;
  background: var(--amber);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  min-width: 24px;
  padding: 0 6px;
}
.config-queue-link {
  background: none;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  font: 600 13px/1 "Segoe UI", system-ui, sans-serif;
  padding: 4px;
  width: auto;
}
.config-queue-list {
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 10px 0 0;
  max-height: 180px;
  overflow: auto;
  padding: 8px 0 0;
}
.config-queue-list[hidden] { display: none !important; }
.config-queue-list li {
  color: var(--text);
  font-size: 12px;
  padding: 4px 0;
}
.config-queue-list span { color: var(--muted); margin-right: 6px; }
.config-queue-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.config-queue-actions button:first-child {
  background: var(--amber);
  border: 0;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font: 600 13px/1 "Segoe UI", system-ui, sans-serif;
  padding: 9px 12px;
  width: auto;
}
@keyframes config-spin {
  to { transform: rotate(360deg); }
}
@keyframes config-packet {
  0% { left: 0; opacity: .4; }
  50% { opacity: 1; }
  100% { left: calc(100% - 12px); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .config-sync-spinner,
  .config-sync-packet { animation: none; }
}

.kpi { position: relative; }
.kpi small { color: var(--muted); display: block; font-size: 11px; margin-top: 4px; }
.tenant-tile, .person-row, .org-node, .event-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  display: block;
  margin: 0 0 8px;
  padding: 12px;
  text-decoration: none;
}
.tenant-tile:hover, .person-row:hover, .device-row:hover { background: #f4f7fb; }
.tenant-tile strong, .person-row strong { display: block; }
.avatar {
  align-items: center;
  background: #e8eef8;
  border-radius: 50%;
  color: var(--navy);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  margin-right: 10px;
  width: 32px;
}
.person-row { align-items: center; display: flex; }
.pill {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
}
.pill.online { background: #e7f8ee; color: var(--green); }
.pill.offline { background: #f2f4f7; color: var(--muted); }
.pill.alert { background: #fdecec; color: var(--red); }
.pill.demo { background: #fff4e5; color: var(--amber); }
.org-tree { display: grid; gap: 10px; }
.org-node h3 { font-size: 15px; margin: 0 0 6px; }
.org-children { margin: 8px 0 0 16px; }
.form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.form-grid label, .stack-form label { color: var(--muted); display: grid; font-size: 12px; gap: 4px; }
.form-grid input, .form-grid select, .stack-form input, .stack-form select, .stack-form textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  padding: 8px 10px;
}
.mini-map { border-radius: 12px; height: 220px; margin: 12px 0; }
.location-panel {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 210px);
  padding-bottom: 12px;
}
.location-panel[hidden] { display: none; }
.location-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 10px;
}
.location-toolbar h2 { flex: 1; margin: 0; }
.location-history-toggle {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: 8px;
}
.location-map {
  background: #e8edf3;
  border-radius: 12px;
  flex: 1;
  height: calc(100vh - 250px);
  min-height: 520px;
  width: 100%;
}
.battery-bar {
  background: #eef2f7;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  width: 140px;
}
.battery-bar span { background: var(--green); display: block; height: 100%; }
.mode-toolbar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(160px, 220px) 1fr;
  margin: 0 0 16px;
}
.mode-toolbar .lede { margin: 0 0 6px; }
.mode-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 0 0 18px;
}
.mode-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  padding: 14px;
  text-align: left;
  width: 100%;
}
.mode-card:hover { border-color: #c5d0e0; }
.mode-card.selected {
  background: #fff;
  border-color: var(--mode, var(--blue));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mode, var(--blue)) 22%, transparent);
}
.mode-card-top {
  align-items: center;
  display: flex;
  gap: 10px;
}
.mode-icon {
  align-items: center;
  background: color-mix(in srgb, var(--mode, var(--blue)) 14%, #fff);
  border-radius: 12px;
  color: var(--mode, var(--blue));
  display: inline-flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.mode-icon svg { height: 22px; width: 22px; }
.mode-card h3 { font-size: 16px; margin: 0; }
.mode-card .audience { color: var(--muted); font-size: 12px; }
.mode-card p { color: var(--text); font-size: 13px; margin: 0; }
.mode-watches { color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.mode-watches li {
  background: #fff;
  border-radius: 999px;
  font-size: 11px;
  list-style: none;
  padding: 3px 8px;
}
.mode-life {
  color: var(--mode, var(--blue));
  font-size: 13px;
  font-weight: 700;
}
.day-usage { margin: 0 0 18px; }
.day-usage h3 { font-size: 14px; margin: 0 0 8px; }
.day-chart { margin-top: 8px; }
.day-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.day-breakdown li {
  background: #f4f7fb;
  border-radius: 999px;
  font-size: 12px;
  padding: 4px 10px;
}
.day-breakdown .track { background: #eee9ff; }
.day-breakdown .radio { background: #eef4ff; }
.lifetime-panel {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.2fr);
  margin: 0 0 16px;
}
.lifetime-panel h3 { font-size: 14px; margin: 0 0 10px; }
.lifetime-bars { display: grid; gap: 8px; }
.life-row { display: grid; gap: 4px; }
.life-row span { color: var(--muted); font-size: 12px; }
.life-track {
  background: #eef2f7;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.life-track i {
  background: var(--mode, var(--blue));
  display: block;
  height: 100%;
}
.life-row.active span { color: var(--text); font-weight: 600; }
.lifetime-curve {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: block;
  width: 100%;
}
.battery-calc { margin: 22px 0 8px; }
.battery-calc h3 { font-size: 15px; margin: 16px 0 8px; }
.battery-calc label { color: var(--muted); display: grid; font-size: 12px; gap: 4px; margin: 10px 0; }
.battery-calc input[type="range"] { width: 100%; }
.calc-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin: 14px 0;
}
.calc-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.calc-card.timer { background: #eef4ff; }
.calc-card.listen { background: #f4f6f8; }
.calc-card h4 { font-size: 13px; margin: 0 0 6px; min-height: 2.4em; }
.calc-value { color: var(--blue); font-size: 32px; font-weight: 700; line-height: 1; }
.calc-card.listen .calc-value { color: var(--text); }
.calc-unit, .calc-detail { color: var(--muted); font-size: 13px; margin-top: 6px; }
.calc-detail { color: var(--text); font-weight: 600; }
.hardware-note {
  background: #e8f6f8;
  border-left: 4px solid #17a2b8;
  border-radius: 8px;
  color: #0c5460;
  font-size: 13px;
  margin: 12px 0;
  padding: 12px;
}
.advanced-settings { margin-top: 8px; }
.advanced-settings summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 10px;
}
.empty { color: var(--muted); padding: 16px 0; }
.log-tail {
  background: #0f1724;
  border-radius: 10px;
  color: #d7deea;
  font: 12px/1.4 ui-monospace, Consolas, monospace;
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}
.epaper-stub {
  background: linear-gradient(180deg, #d9d4c4, #cfc9b6);
  border-radius: 12px;
  color: #3c3a32;
  min-height: 140px;
  padding: 20px;
}
.status-ok { align-items: center; display: flex; gap: 8px; }
.zone-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 0 10px;
  padding: 12px;
}
.zone-card.selected { border-color: var(--blue); box-shadow: 0 0 0 2px #dbe7ff; }
.day-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.zone-summary {
  background: #f4f7fb;
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  margin: 8px 0;
  padding: 8px 10px;
}
.day-chip {
  align-items: center;
  background: #f4f7fb;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
  padding: 4px 8px;
}

.device-battery-gauge {
  max-width: 168px;
  margin: 0 0 12px;
}
.ss-batt-gauge {
  display: grid;
  justify-items: center;
  min-width: 0;
}
.ss-batt-title {
  color: var(--muted);
  font-size: 12px;
}
.ss-batt-gauge svg {
  display: block;
  height: auto;
  margin: 2px auto 0;
  width: min(112px, 100%);
}
.ss-batt-body {
  fill: #fff;
  stroke: #94a3b8;
  stroke-width: 1.6;
}
.ss-batt-tip {
  fill: #94a3b8;
}
.ss-batt-fill {
  transition: width .45s ease, fill .25s ease;
}
.ss-batt-gauge[data-tone="ok"] .ss-batt-fill { fill: #12a15c; }
.ss-batt-gauge[data-tone="mid"] .ss-batt-fill { fill: #d48b16; }
.ss-batt-gauge[data-tone="low"] .ss-batt-fill { fill: #d64545; }
.ss-batt-gauge[data-tone="charge"] .ss-batt-fill {
  fill: #2563eb;
  animation: ss-batt-charge 1.8s ease-in-out infinite;
}
@keyframes ss-batt-charge {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}
.ss-batt-label {
  fill: #152033;
  font: 700 12px "Segoe UI", system-ui, sans-serif;
  pointer-events: none;
}
.ss-batt-bolt {
  fill: #fff;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .18));
}
.ss-batt-status {
  color: #2563eb;
  display: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2px;
}
.ss-batt-gauge.is-charging .ss-batt-status { display: block; }
.ss-batt-gauge.is-compact.is-charging .ss-batt-body { stroke: #2563eb; }
.ss-batt-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  margin-top: 4px;
}
.ss-batt-detail {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.ss-batt-gauge.is-compact .ss-batt-title,
.ss-batt-gauge.is-compact .ss-batt-value,
.ss-batt-gauge.is-compact .ss-batt-detail { display: none; }
.ss-batt-gauge.is-compact svg {
  margin: 0 auto;
  width: min(88px, 100%);
}
.ss-batt-gauge.is-charging .ss-batt-value,
.ss-batt-gauge.is-overcharge .ss-batt-value { color: #2563eb; }
.ss-batt-gauge.is-low .ss-batt-value { color: var(--red); }
.ss-batt-gauge.is-mid .ss-batt-value { color: var(--amber); }
.ss-batt-gauge.is-charging .ss-batt-body,
.ss-batt-gauge.is-overcharge .ss-batt-body {
  stroke: #2563eb;
}

.signal-metric-inline {
  cursor: default;
  display: inline-flex;
  position: relative;
}
.signal-metric-inline[data-tip]::after {
  background: #1a2332;
  border-radius: 6px;
  bottom: calc(100% + 6px);
  color: #fff;
  content: attr(data-tip);
  font-size: 12px;
  font-weight: 600;
  left: 0;
  opacity: 0;
  padding: 6px 8px;
  pointer-events: none;
  position: absolute;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  white-space: nowrap;
  z-index: 4;
}
.signal-metric-inline[data-tip]:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.sig { display: block; height: 26px; width: 26px; }
.sig-wifi path {
  fill: none;
  stroke: #ccd4dd;
  stroke-linecap: round;
  stroke-width: 2.4;
}
.sig-wifi circle { fill: #ccd4dd; }
.sig-cell rect { fill: #ccd4dd; }
.sig-wifi path.on { stroke: var(--navy); }
.sig-wifi circle.on, .sig-cell rect.on { fill: var(--navy); }
.sig[data-level="1"] path.on { stroke: var(--red); }
.sig[data-level="1"] circle.on, .sig[data-level="1"] rect.on { fill: var(--red); }
.sig[data-level="2"] path.on { stroke: var(--amber); }
.sig[data-level="2"] circle.on, .sig[data-level="2"] rect.on { fill: var(--amber); }
.sig[data-level="3"] path.on,
.sig[data-level="4"] path.on { stroke: var(--green); }
.sig[data-level="3"] circle.on, .sig[data-level="3"] rect.on,
.sig[data-level="4"] circle.on, .sig[data-level="4"] rect.on { fill: var(--green); }

@media (max-width: 980px) {
  .app-frame { flex-direction: column; }
  .app-sidebar { flex: none; flex-direction: row; overflow: auto; width: 100%; }
  .kpi-grid, .split { grid-template-columns: 1fr 1fr; }
  .lifetime-panel, .mode-toolbar, .calc-cards { grid-template-columns: 1fr; }
}