@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
:root {
  --ground: #070707;
  --ink: #F4F4F2;
  --ink-42: rgba(244, 244, 242, 0.42);
  --ink-32: rgba(244, 244, 242, 0.32);
  --rule: rgba(255, 255, 255, 0.08);
  --green: #3DF07A;
  --red: #FF4A3D;
  --accent: var(--green);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 360px; height: 480px; overflow: hidden; background: var(--ground); }
body {
  font-family: 'Aeonik', 'Aeonik Pro', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible { outline: 1px solid var(--ink-42); outline-offset: 2px; }
::selection { background: rgba(61, 240, 122, 0.25); }

#app {
  position: relative; width: 360px; height: 480px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--ground);
}
#app.off { --accent: var(--red); }

/* ---------- Smart Alarm 3D (replaces the radar in the popup) ---------- */
.alarm3d { position: absolute; left: 0; top: 292px; width: 360px; height: 188px; display: block; pointer-events: none; }

/* ---------- radar: drawn live by radar.js from the Figma layer values ---------- */
.radar {
  position: absolute; left: 0; top: 312px; width: 360px; height: 168px; pointer-events: none;
  transition: filter 700ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms;
}
#app.off .radar { filter: sepia(1) hue-rotate(-48deg) saturate(2.6) brightness(0.92); }

/* ---------- header ---------- */
.head { position: absolute; left: 0; top: 0; width: 360px; height: 100px; }
.title {
  position: absolute; left: 19.7px; font-size: 26.77px; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.title:first-child { top: 19px; }
#subtitle { top: 47.9px; }
.test { position: absolute; left: 259.5px; top: 29px; width: 40px; font-size: 11px; line-height: 1.2; color: var(--ink-42); text-align: center; }
.test:hover { color: var(--ink); }
.test.busy { color: var(--accent); }
.toggle {
  position: absolute; left: 311.2px; top: 27px; width: 28px; height: 16px; border-radius: 8px;
  background: var(--green); border: 1px solid var(--green);
  transition: background 250ms, border-color 250ms;
}
.toggle .knob {
  position: absolute; top: 2px; left: 14px; width: 10px; height: 10px; border-radius: 50%; background: #000;
  transition: left 250ms cubic-bezier(0.2, 0.7, 0.2, 1), background 250ms;
}
#app.off .toggle { background: transparent; border-color: rgba(255, 255, 255, 0.3); }
#app.off .toggle .knob { left: 2px; background: rgba(244, 244, 242, 0.5); }

#app.readonly .toggle, #app.readonly .test { pointer-events: none; opacity: 0.35; }

/* ---------- tabs ---------- */
.tabs { position: absolute; left: 18.5px; top: 103px; display: flex; gap: 20px; }
.tab { font-size: 12px; line-height: 1.2; color: var(--ink-32); }
.tab.is-active { color: var(--ink); }
.rule { position: absolute; left: 18.5px; top: 129.2px; width: 312px; height: 1px; background: var(--rule); }

/* ---------- alarms ---------- */
.pane { position: absolute; left: 0; top: 130px; width: 360px; height: 350px; }
.rows { list-style: none; position: absolute; left: 18.5px; top: 0; width: 312px; }
.rows li { position: relative; height: 47px; border-bottom: 1px solid var(--rule); }
.rows .dot {
  position: absolute; left: 0; top: 20.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  transition: background 400ms;
}
.rows li.never .dot { background: transparent; border: 1px solid var(--accent); }
.rows .name { position: absolute; left: 16px; top: 14px; font-size: 14px; line-height: 1.2; white-space: nowrap; }
.rows .time { position: absolute; right: 0; top: 15px; font-size: 12px; line-height: 1.2; color: var(--ink-42); font-variant-numeric: tabular-nums; }
.rows li.firing .time { color: var(--red); }
.rows .empty { position: absolute; left: 16px; top: 15px; font-size: 12px; color: var(--ink-42); }
.caption {
  position: absolute; left: 0; top: 144.5px; width: 360px; text-align: center; font-size: 11px; line-height: 1.2; color: var(--ink-42);
  white-space: nowrap; transition: color 300ms;
}
.caption.calling { color: var(--red); }

/* ---------- logs ---------- */
.pane.logs { top: 131px; height: 349px; overflow-y: auto; overflow-x: hidden; }
.pane.logs::-webkit-scrollbar { width: 4px; }
.pane.logs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 2px; }
.pane.logs::-webkit-scrollbar-track { background: transparent; }
.log { list-style: none; padding: 10.5px 0 16px; }
.log li { position: relative; height: 25px; padding-left: 19.75px; font-size: 12px; line-height: 14px; white-space: nowrap; }
.log .t { position: absolute; left: 19.75px; width: 60px; color: var(--ink-42); font-variant-numeric: tabular-nums; }
.log .m { position: absolute; left: 95.75px; }
.log li.alarm .m { color: var(--red); }
.log li.failed .m { color: var(--ink-42); }
.log .day { height: 25px; padding-left: 19.75px; font-size: 11px; color: var(--ink-32); }