:root {
  color-scheme: dark;
  --bg: #071923;
  --panel: #0d2b38;
  --panel-2: #113847;
  --line: #205061;
  --text: #effbff;
  --muted: #9bb8c3;
  --accent: #35d6a1;
  --warning: #ffb64d;
  --danger: #ff6b6b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: radial-gradient(circle at 10% 0%, #14445a 0, transparent 35%), var(--bg);
  color: var(--text);
}
button, input { font: inherit; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(1.25rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2.5rem) 1rem;
}
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .35rem; font-size: clamp(1.5rem, 4vw, 2.25rem); }
.eyebrow { margin-bottom: .35rem; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.muted, footer { color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.sync {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .42rem .7rem;
  color: var(--muted);
  font-size: .78rem;
}
.sync.ok { color: var(--accent); border-color: #24775f; }
.sync.bad { color: var(--danger); border-color: #7b3b43; }
button {
  border: 0;
  border-radius: .7rem;
  padding: .72rem 1rem;
  background: var(--accent);
  color: #04251d;
  font-weight: 800;
  cursor: pointer;
}
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
main { padding: 0 clamp(1rem, 4vw, 2.5rem) 2rem; }
.summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}
.summary article, .device-card, .empty, .login-card {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(17,56,71,.94), rgba(10,35,47,.94));
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
.summary article { padding: 1rem; }
.summary span { display: block; color: var(--muted); font-size: .78rem; }
.summary strong { display: block; margin-top: .45rem; font-size: clamp(1.25rem, 3vw, 1.8rem); }
.device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
.device-card { overflow: hidden; }
.device-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem; border-bottom: 1px solid var(--line); }
.device-head h2 { margin-bottom: .2rem; font-size: 1.12rem; }
.device-id { color: var(--muted); font: .78rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.badge { border-radius: 999px; padding: .38rem .62rem; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.badge.online { color: var(--accent); background: rgba(53,214,161,.12); }
.badge.offline { color: var(--muted); background: rgba(155,184,195,.12); }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; padding: 1rem; }
.metric { padding: .8rem; border-radius: .7rem; background: rgba(4,20,28,.45); }
.metric span { display: block; color: var(--muted); font-size: .72rem; }
.metric strong { display: block; margin-top: .3rem; font-size: 1.2rem; }
.units { padding: 0 1rem 1rem; }
.unit { display: grid; grid-template-columns: 2rem 1fr auto; gap: .65rem; align-items: center; padding: .7rem 0; border-top: 1px solid rgba(32,80,97,.7); }
.unit:first-child { border-top: 0; }
.unit-no { color: var(--accent); font-weight: 800; }
.unit-data { color: var(--muted); font-size: .78rem; }
.device-foot { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: rgba(4,20,28,.35); color: var(--muted); font-size: .74rem; }
.fault { color: var(--danger); font-weight: 800; }
.notice { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid #7b3b43; border-radius: .8rem; color: #ffd9dc; background: rgba(255,107,107,.1); }
.empty { padding: 2rem; text-align: center; }
footer { padding: 1rem clamp(1rem, 4vw, 2.5rem) calc(1.25rem + env(safe-area-inset-bottom)); font-size: .75rem; }
.login-page { display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 420px); padding: 1.5rem; }
.login-card form { display: grid; gap: 1rem; margin-top: 1.5rem; }
label { display: grid; gap: .45rem; color: var(--muted); font-size: .82rem; }
input { width: 100%; border: 1px solid var(--line); border-radius: .7rem; padding: .8rem; background: #061820; color: var(--text); }
.error { min-height: 1.2rem; margin: 0; color: var(--danger); font-size: .8rem; }
@media (max-width: 700px) {
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { align-items: flex-start; }
}