:root {
  --bg: #0b0f17;
  --bg-elev: #131a26;
  --bg-tile: #161e2c;
  --line: #24304333;
  --line-solid: #223049;
  --txt: #e7eef7;
  --txt-dim: #8a99ad;
  --up: #26d07c;
  --up-bg: #0f2a1e;
  --warn: #f5b301;
  --warn-bg: #2c2408;
  --down: #ff4d5e;
  --down-bg: #2c0f14;
  --pending: #4aa3ff;
  --pending-bg: #0d2136;
  --radius: 16px;
  --gap: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
body {
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Top bar ---------- */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
  border-bottom: 1px solid var(--line-solid);
  flex: 0 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .3px; }
.brand-name { font-size: 18px; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: radial-gradient(circle at 50% 45%, #0b0f17 0 4px, transparent 5px), linear-gradient(135deg, var(--up), var(--pending));
  box-shadow: 0 0 0 2px #0b0f17 inset;
}
.summary { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  font-size: 13px; padding: 5px 12px; border-radius: 999px;
  background: var(--bg-tile); border: 1px solid var(--line-solid); color: var(--txt-dim);
}
.pill b { color: var(--txt); font-variant-numeric: tabular-nums; }
.pill-up b { color: var(--up); }
.pill-warn b { color: var(--warn); }
.pill-down b { color: var(--down); }
.clock { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.clock time { font-size: 16px; color: var(--txt-dim); }
.conn { font-size: 14px; }
.conn-ok { color: var(--up); }
.conn-bad { color: var(--down); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- Grid ---------- */
.grid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.loading { color: var(--txt-dim); padding: 40px; text-align: center; width: 100%; }

.group-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--txt-dim); margin: 4px 4px 0;
  display: flex; align-items: center; gap: 8px;
}
.group-title .grp-count { color: var(--txt); font-weight: 700; }
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--gap);
}

.tile {
  background: var(--bg-tile);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
  position: relative;
  overflow: hidden;
  transition: transform .08s ease;
}
.tile:active { transform: scale(.98); }
.tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--txt-dim);
}
.tile.up::before { background: var(--up); }
.tile.down::before { background: var(--down); }
.tile.warn::before { background: var(--warn); }
.tile.pending::before { background: var(--pending); }
.tile.down { background: var(--down-bg); border-color: #5a2530; }
.tile.warn { background: var(--warn-bg); border-color: #5a4a12; }
.tile.pending { background: var(--pending-bg); }

.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-name { font-size: 15px; font-weight: 600; line-height: 1.2; word-break: break-word; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: var(--txt-dim); }
.up .dot { background: var(--up); box-shadow: 0 0 10px var(--up); }
.down .dot { background: var(--down); box-shadow: 0 0 10px var(--down); animation: pulse 1.1s infinite; }
.warn .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.pending .dot { background: var(--pending); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.tile-msg { font-size: 12px; color: var(--txt-dim); line-height: 1.35; word-break: break-word; }
.tile-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--txt-dim); }
.tile-uptime { font-variant-numeric: tabular-nums; }
.tile-ping { font-variant-numeric: tabular-nums; }
.tile.down .tile-msg { color: #ffb3bb; }
.tile.warn .tile-msg { color: #ffe08a; }

/* ---------- Footer ---------- */
#statusbar {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; font-size: 11px; color: var(--txt-dim);
  border-top: 1px solid var(--line-solid); background: var(--bg-elev);
}

/* ---------- Alarm overlay ---------- */
.alarm {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(44, 15, 20, .92);
  backdrop-filter: blur(2px);
  animation: alarmflash 1.1s steps(2, jump-none) infinite;
}
@keyframes alarmflash { 50% { background: rgba(90, 20, 30, .96); } }
.alarm[hidden] { display: none; }
.alarm-box { text-align: center; padding: 32px; max-width: 90%; }
.alarm-icon { font-size: 72px; line-height: 1; }
.alarm-title { font-size: 28px; font-weight: 800; letter-spacing: 1px; margin-top: 12px; color: #ffd7db; }
.alarm-sub { font-size: 15px; color: #ffb3bb; margin-top: 8px; }
.alarm-ack {
  margin-top: 24px; padding: 14px 28px; font-size: 16px; font-weight: 700;
  border: 1px solid #ff8892; border-radius: 12px; background: #3a141a; color: #fff;
}
.alarm-ack:active { background: #4a1a22; }

/* Larger tiles on wide/landscape kiosk screens */
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .brand-name { font-size: 20px; }
}

/* ---------- v2: login, header buttons, editor ---------- */
[hidden] { display: none !important; }
.hbtn { background:var(--bg-tile); border:1px solid var(--line-solid); color:var(--txt);
  border-radius:9px; width:34px; height:34px; font-size:15px; cursor:pointer; }
.hbtn.wide { width:auto; padding:0 12px; }
.hbtn:active { background:#1d2637; }

.login { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:40; }
.login-box { width:min(360px,88vw); background:var(--bg-tile); border:1px solid var(--line-solid);
  border-radius:18px; padding:28px 24px; text-align:center; }
.login-logo { width:72px; height:72px; border-radius:18px; margin-bottom:10px; }
.login-box h1 { font-size:20px; margin-bottom:16px; }
.login-box input { width:100%; margin:7px 0; padding:13px 14px; border-radius:11px; font-size:15px;
  background:var(--bg-elev); border:1px solid var(--line-solid); color:var(--txt); }
.login-btn { width:100%; margin-top:12px; padding:13px; border:none; border-radius:11px; font-weight:700;
  font-size:15px; color:#06121a; background:linear-gradient(135deg,var(--up),var(--pending)); cursor:pointer; }
.login-err { color:var(--down); font-size:13px; margin-top:10px; min-height:16px; }

.lock { font-size:11px; margin-left:5px; opacity:.75; }

.editor { position:fixed; inset:0; z-index:60; background:rgba(4,8,14,.75); display:flex; align-items:flex-start;
  justify-content:center; overflow:auto; padding:20px; }
.editor-box { width:min(560px,94vw); background:var(--bg-elev); border:1px solid var(--line-solid);
  border-radius:16px; padding:18px; margin-top:20px; }
.editor-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.editor-head h2 { font-size:18px; }
.editor-list { max-height:34vh; overflow:auto; margin-bottom:14px; border:1px solid var(--line-solid); border-radius:11px; }
.ed-item { padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.ed-item:hover { background:var(--bg-tile); }
.ed-nm { font-weight:600; }
.ed-meta { display:block; font-size:12px; color:var(--txt-dim); margin-top:2px; }
.editor-form h3 { font-size:14px; margin-bottom:8px; color:var(--txt-dim); }
.ef-row { display:flex; align-items:center; gap:10px; margin:7px 0; }
.ef-row label { width:80px; font-size:13px; color:var(--txt-dim); flex:0 0 auto; }
.ef-row input, .ef-row select { flex:1; padding:9px 11px; border-radius:9px; font-size:14px;
  background:var(--bg-tile); border:1px solid var(--line-solid); color:var(--txt); }
.ef-actions { display:flex; gap:10px; align-items:center; margin-top:12px; }
.ef-actions .login-btn { width:auto; margin:0; padding:11px 20px; }
.del-btn { padding:11px 16px; border:1px solid #5a2530; border-radius:11px; background:var(--down-bg);
  color:#ffb3bb; font-weight:700; cursor:pointer; margin-left:auto; }

/* v2 fix: #app must be the flex column so #grid scrolls (was breaking phone scroll) */
#app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
#grid { min-height: 0; }

/* v2 personalization: manage mode */
.hbtn.active { background:linear-gradient(135deg,var(--up),var(--pending)); color:#06121a; border-color:transparent; }
.grp-ctrls { margin-left:auto; display:inline-flex; gap:6px; }
.mini { font-size:12px; padding:3px 8px; border-radius:8px; background:var(--bg-tile);
  border:1px solid var(--line-solid); color:var(--txt); cursor:pointer; }
.mini:disabled { opacity:.3; }
.mini.on { background:var(--warn-bg); border-color:#5a4a12; color:#ffe08a; }
.tile-ctrls { display:flex; gap:6px; margin-top:8px; }
.tile-ctrls .mini { flex:1; text-align:center; }
.tile.ishidden { opacity:.45; }

/* card detail + maintenance */
.maint-banner { flex:0 0 auto; padding:9px 16px; background:#2c2408; color:#ffe08a;
  border-bottom:1px solid #5a4a12; font-size:13px; font-weight:600; text-align:center; }
.dt-status { display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; margin-bottom:14px;
  padding:10px 12px; border-radius:11px; background:var(--bg-tile); border:1px solid var(--line-solid); }
.dt-status.up { color:var(--up); } .dt-status.down { color:var(--down); } .dt-status.warn { color:var(--warn); }
.dt-uptime { display:flex; gap:10px; margin-bottom:14px; }
.up-stat { flex:1; text-align:center; padding:12px 6px; border-radius:12px; background:var(--bg-tile); border:1px solid var(--line-solid); }
.up-stat b { display:block; font-size:20px; font-variant-numeric:tabular-nums; }
.up-stat span { font-size:11px; color:var(--txt-dim); text-transform:uppercase; letter-spacing:1px; }
.dt-hist-wrap { margin-bottom:14px; }
.dt-hist { display:flex; gap:2px; align-items:flex-end; height:34px; overflow-x:auto; padding:4px; background:var(--bg-tile); border-radius:10px; border:1px solid var(--line-solid); }
.dt-hist .hb { flex:1 0 4px; min-width:4px; height:100%; border-radius:2px; background:var(--txt-dim); }
.dt-hist .hb.up { background:var(--up); } .dt-hist .hb.down { background:var(--down); } .dt-hist .hb.warn { background:var(--warn); }
.dt-hist-label { font-size:10px; color:var(--txt-dim); margin-top:4px; text-align:right; }
.dt-info { width:100%; border-collapse:collapse; font-size:13px; }
.dt-info td { padding:7px 4px; border-bottom:1px solid var(--line); }
.dt-info td:first-child { color:var(--txt-dim); width:38%; }
.dt-test-result { font-size:13px; color:var(--txt-dim); align-self:center; }
.maint-btns { display:flex; flex-direction:column; gap:10px; }
.maint-btns .login-btn, .maint-btns .del-btn { width:100%; margin:0; }