/* ── Design tokens — AL.IOT Brand ── */
:root {
  --bg:        #040e08;
  --surface:   #081410;
  --surface-2: #0c1c15;
  --surface-3: #112419;
  --border:    #163820;
  --border-2:  #1e4d2b;
  --text:      #dff2e9;
  --muted:     #5c8870;
  --accent:    #00e040;
  --green:     #00d845;
  --alarm:     #ef4444;
  --warn:      #f59e0b;
  --radius:    8px;
  --shadow:    0 4px 24px rgba(0,0,0,.5);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family: 'Alexandria', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; min-height:100vh; font-size:14px; line-height:1.5; }
h1,h2,h3,p { margin:0; }
button,input,select { font:inherit; }

/* ── Shell ── */
.shell { min-height:100vh; }
.hidden { display:none !important; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:0 14px; border-radius:6px; font-weight:700; font-size:13px;
  cursor:pointer; border:1px solid transparent; transition:background .15s,border-color .15s;
}
.btn-primary { background:var(--accent); color:#032e10; border-color:var(--accent); font-weight:800; }
.btn-primary:hover { background:#00c835; border-color:#00c835; }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border-2); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-danger { background:transparent; color:var(--alarm); border-color:rgba(239,68,68,.4); }
.btn-danger:hover { background:rgba(239,68,68,.1); }
.btn-save { background:var(--green); color:#052010; border-color:var(--green); }
.btn-save:hover { background:#16a34a; }
.btn-icon { min-height:34px; padding:0 10px; font-size:16px; }
.btn-sm { min-height:32px; padding:0 12px; font-size:12px; }

/* ── Inputs ── */
input, select {
  width:100%; min-height:36px; padding:0 10px;
  background:var(--surface); border:1px solid var(--border-2); border-radius:6px;
  color:var(--text); outline:none;
}
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,224,64,.15); }
label { display:grid; gap:6px; font-size:12px; font-weight:700; color:var(--muted); }

/* ── Login ── */
.login-panel {
  min-height:100vh; display:grid;
  grid-template-columns: minmax(0,1fr) 380px;
  align-items:center; gap:48px; padding:48px;
  max-width:1280px; margin:0 auto;
}
.login-copy { max-width:580px; }
.login-logo-wrap {
  display:flex; align-items:center; gap:18px; margin-bottom:32px;
}
.login-logo-svg { width:58px; height:64px; flex-shrink:0; }
.login-brand-name {
  font-size:52px; font-weight:800; letter-spacing:-.04em;
  color:var(--text); line-height:1;
}
.login-brand-dot { color:var(--accent); }
.eyebrow {
  color:var(--accent); font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px;
}
h1 { font-size:clamp(32px,4vw,60px); line-height:.95; letter-spacing:-.02em; margin-bottom:20px; }
.subtle { color:var(--muted); font-size:15px; }
.login-form {
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:12px; padding:28px; display:grid; gap:16px;
}
.login-form h2 { font-size:18px; margin-bottom:4px; }
.form-error { min-height:18px; color:var(--alarm); font-size:13px; font-weight:700; }
.login-home-link {
  width:100%;
  text-decoration:none;
}

/* ── Dashboard shell ── */
.dashboard { display:grid; gap:0; min-height:100vh; grid-template-rows:auto auto 1fr; }

/* ── Topbar ── */
.topbar {
  display:flex; align-items:center; gap:16px; padding:0 24px;
  height:56px; background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo-svg { width:28px; height:31px; flex-shrink:0; }
.brand-name { font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--text); line-height:1; }
.brand-dot { color:var(--accent); }
.brand-live {
  width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0;
  box-shadow:0 0 0 3px rgba(0,224,64,.25);
  animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 3px rgba(0,224,64,.3); }
  50%      { box-shadow:0 0 0 7px rgba(0,224,64,.1); }
}
.tab-nav { display:flex; gap:2px; flex:1; justify-content:center; }
.tab {
  min-height:36px; padding:0 20px; border:1px solid transparent; border-radius:6px;
  background:transparent; color:var(--muted); font-weight:700; font-size:13px; cursor:pointer;
}
.tab:hover { color:var(--text); background:var(--surface-2); }
.tab.active { background:var(--surface-3); color:var(--text); border-color:var(--border-2); }
.topbar-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.device-select { min-height:34px; width:180px; font-size:13px; }
.user-label {
  max-width:140px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── Metrics strip ── */
.metrics-strip {
  display:grid; grid-template-columns:repeat(8, minmax(0,1fr));
  background:var(--surface); border-bottom:1px solid var(--border);
}
.metric-tile { padding:12px 20px; border-right:1px solid var(--border); }
.metric-tile:last-child { border-right:none; }
.metric-tile span { display:block; font-size:11px; font-weight:800; text-transform:uppercase; color:var(--muted); }
.metric-tile strong { display:block; font-size:26px; font-weight:800; line-height:1.1; margin-top:4px; }
.metric-tile.healthy strong { color:var(--green); }
.metric-tile.paused strong { color:var(--warn); }
.metric-tile.alarm strong { color:var(--alarm); }
.metric-tile.warning strong { color:var(--warn); }
.metric-tile.unassigned strong { color:#a78bfa; }

/* ── Views ── */
.view { display:grid; gap:16px; padding:20px 24px; }

/* ── Alarm banner ── */
.alarm-banner { display:grid; gap:8px; }
.alarm-banner-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface);
}
.alarm-banner-head span { color:var(--muted); font-size:12px; font-weight:800; }
.alarm-banner-help {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:1px solid var(--border-2);
  border-radius:999px;
  color:var(--accent) !important;
  cursor:help;
  margin-right:auto;
}
.alarm-banner-tip {
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:20;
  width:min(360px, calc(100vw - 48px));
  padding:10px 12px;
  border:1px solid var(--border-2);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text) !important;
  line-height:1.45;
  box-shadow:var(--shadow);
}
.alarm-banner-help:hover .alarm-banner-tip,
.alarm-banner-help:focus .alarm-banner-tip {
  display:block;
}
.alarm-banner-list {
  display:grid;
  gap:6px;
  max-height:260px;
  overflow:auto;
  padding-right:2px;
}
.alarm-card {
  display:grid;
  grid-template-columns:78px minmax(180px,260px) minmax(260px,1fr) minmax(260px,420px) minmax(160px,240px) auto;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.35);
  border-left:3px solid var(--alarm); border-radius:6px;
  cursor:pointer; transition:background .15s;
}
.alarm-card:hover { background:rgba(239,68,68,.14); }
.alarm-card.warn {
  background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.45);
  border-left-color:var(--warn);
}
.alarm-card.warn:hover { background:rgba(245,158,11,.14); }
.alarm-card-label { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; padding:3px 6px; border-radius:4px; background:var(--alarm); color:#fff; text-align:center; }
.alarm-card.warn .alarm-card-label { background:var(--warn); color:#1a0a00; }
.alarm-card-id { color:var(--text); font-weight:900; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alarm-card-detail,
.alarm-card-group { color:#b7d7c0; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alarm-card-detail { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alarm-card-time { color:#c7e7d0; font-weight:800; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alarm-card-actions { display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.alarm-card-nav { font-size:11px; font-weight:800; color:var(--accent); margin-left:auto; white-space:nowrap; }
.alarm-card-ack { font-size:11px; font-weight:800; color:var(--text); border:1px solid var(--border-2); border-radius:4px; padding:3px 7px; }
.alarm-card.warn .alarm-card-id { color:#fff4d6; }
.alarm-card.warn .alarm-card-detail { color:#f0cf8b; }
.alarm-card.warn .alarm-card-nav { color:#ffd45c; }
.alarm-card.warn .alarm-card-ack {
  color:#fff4d6;
  border-color:rgba(245,158,11,.5);
  background:rgba(245,158,11,.12);
}
.group-path-truncate {
  display:inline-block;
  max-width:min(260px, 100%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:bottom;
}

/* ── Panels ── */
.panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
}
.panel-hd {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:14px;
}
.panel-hd h2 { font-size:15px; font-weight:800; }

/* ── Monitor layout ── */
.monitor-body {
  display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start;
}
.monitor-toolbar {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:12px;
}
.auto-refresh-toggle {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  font-weight:800;
}
.auto-refresh-toggle input {
  width:auto;
  min-height:0;
}
.auto-refresh-toggle strong {
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
}
.auto-refresh-status {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  min-width:72px;
}
.monitor-aside { display:none; }
.monitor-main { display:grid; gap:16px; }

.pinned-site-panel {
  border-color:var(--border-2);
}
.pinned-site-panel .subtle {
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.pinned-site-body {
  display:grid;
  gap:12px;
  cursor:pointer;
}
.pinned-site-stats {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pinned-site-stats span {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.pinned-site-groups,
.pinned-scaffold-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px;
}
.pinned-group,
.pinned-scaffold-cell {
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid var(--border);
  border-left:3px solid var(--green);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.pinned-group:hover,
.pinned-scaffold-cell:hover {
  border-color:var(--border-2);
}
.pinned-group.alarm,
.pinned-scaffold-cell.alarm { border-left-color:var(--alarm); }
.pinned-group.warning,
.pinned-group.paused,
.pinned-scaffold-cell.warning,
.pinned-scaffold-cell.paused { border-left-color:var(--warn); }
.pinned-group .node-joint {
  width:16px;
  height:16px;
}
.pinned-group .node-joint::before {
  width:5px;
  height:5px;
}
.pinned-group .node-joint::after {
  inset:-4px;
}
.pinned-group strong,
.pinned-scaffold-cell strong {
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:900;
}
.pinned-group small,
.pinned-scaffold-cell span {
  flex-shrink:0;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.pinned-scaffold-full {
  max-height:520px;
  border:1px solid var(--border);
  border-radius:6px;
}
.pinned-scaffold-full .scaf-table {
  min-width:max-content;
}
.pinned-scaffold-full .scaf-cell {
  min-width:180px;
  height:130px;
}
.pinned-scaffold-full .scaf-cell-node {
  width:100%;
  border:0;
  border-bottom:1px solid var(--border);
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.pinned-scaffold-full .scaf-cell-node.alarm { background:rgba(239,68,68,.08); }
.pinned-scaffold-full .scaf-cell-node.warning,
.pinned-scaffold-full .scaf-cell-node.paused { background:rgba(245,158,11,.08); }
.pinned-scaf-notes {
  margin:0;
  padding:8px 10px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

/* ── Search box ── */
.search-box { width:180px; min-height:32px; font-size:12px; }

/* ── Event lists ── */
.evt-list { display:grid; gap:8px; max-height:200px; overflow-y:auto; }
.evt-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:6px; cursor:pointer; transition:border-color .15s;
  width:100%; text-align:left;
}
.evt-row:hover { border-color:var(--border-2); }
.evt-row.alarm { border-left:3px solid var(--alarm); }
.evt-row.warning { border-left:3px solid var(--warn); }
.evt-row-id { font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt-row-group { display:block; max-width:100%; color:#b7d7c0; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt-row-reason { color:var(--muted); font-size:12px; margin-left:auto; white-space:nowrap; }
.evt-row.alarm .evt-row-reason { color:var(--alarm); font-weight:700; }
.evt-row.warning .evt-row-reason { color:var(--warn); font-weight:700; }
.empty-state { color:var(--muted); font-size:13px; padding:8px 0; }

/* ── Badge ── */
.badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 7px; border-radius:999px;
  font-size:11px; font-weight:900; background:var(--surface-3); color:var(--muted);
}
.badge-alarm { background:rgba(239,68,68,.2); color:var(--alarm); }
.badge-warn  { background:rgba(245,158,11,.2); color:var(--warn); }

/* ── Status pill ── */
.status-pill {
  font-size:12px; font-weight:800; padding:5px 11px; border-radius:999px;
  border:1px solid var(--border-2); color:var(--muted);
}
.status-pill.alarm   { border-color:var(--alarm); color:var(--alarm); }
.status-pill.warning { border-color:var(--warn);  color:var(--warn);  }
.status-pill.normal  { border-color:var(--green);  color:var(--green);  }
.status-pill.paused  { border-color:var(--warn);  color:var(--warn);  }

/* ── Mini status chip ── */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:800; padding:4px 8px; border-radius:4px;
}
.chip.alarm   { background:rgba(239,68,68,.15); color:var(--alarm); }
.chip.warning { background:rgba(245,158,11,.15); color:var(--warn); }
.chip.normal  { background:rgba(0,224,64,.1);  color:var(--green); }
.chip.paused  { background:rgba(245,158,11,.15); color:var(--warn); }

/* ── Device grid ── */
.device-grid { display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); max-height:280px; overflow-y:auto; }
.device-card {
  background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
  padding:12px; cursor:pointer; transition:border-color .15s;
  border-left:3px solid var(--border);
}
.device-card:hover { border-color:var(--border-2); }
.device-card.alarm   { border-left-color:var(--alarm); background:rgba(239,68,68,.07); }
.device-card.warning { border-left-color:var(--warn); background:rgba(245,158,11,.06); }
.device-card.normal  { border-left-color:var(--green); }
.device-card.paused  { border-left-color:var(--warn); background:rgba(245,158,11,.06); }
.device-card.selected { outline:2px solid var(--accent); }
.device-card-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.device-card-hd strong { font-size:13px; font-weight:800; }
.device-card.alarm .device-card-hd strong,
.device-card.alarm .device-id-line { color:#fff1f2; }
.device-card.warning .device-card-hd strong,
.device-card.warning .device-id-line,
.device-card.paused .device-card-hd strong,
.device-card.paused .device-id-line { color:#fff4d6; }
.device-card.alarm .device-group-label { color:#d9fbe5; }
.device-card.alarm .chip.alarm { color:#ff6b6b; background:rgba(239,68,68,.2); }
.device-id-line { color:var(--muted); font-size:11px; font-weight:800; margin:-4px 0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-meta { display:grid; grid-template-columns:1fr 1fr minmax(0,1.35fr); gap:6px; }
.device-meta-item { min-width:0; }
.device-meta-item span { display:block; font-size:10px; font-weight:800; text-transform:uppercase; color:var(--muted); }
.device-meta-item strong { font-size:14px; }
.device-group-label {
  display:block;
  max-width:100%;
  font-size:11px;
  color:#d7f2df;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── Trend canvas ── */
#trendCanvas { width:100%; display:block; border-radius:6px; background:#040e08; }
.device-settings-form {
  display:flex;
  align-items:end;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.device-settings-form label {
  min-width:180px;
}
.device-settings-form input {
  min-height:32px;
}
.device-settings-form > span {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  padding-bottom:8px;
}

/* ── Events table ── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:740px; }
th { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
td { font-size:13px; padding:10px; border-bottom:1px solid var(--border); vertical-align:top; }
tr:last-child td { border-bottom:none; }
.c-alarm   { color:var(--alarm); font-weight:800; }
.c-warn    { color:var(--warn);  font-weight:800; }
.c-normal  { color:var(--green); font-weight:800; }
.c-paused  { color:var(--warn); font-weight:800; }

/* ── Sites / Whiteboard view ── */
#whiteboardView.view { padding:0; }
.sites-wrap {
  display:grid; grid-template-columns:220px minmax(0,1fr);
  height:calc(100vh - 140px);
}
.sites-wrap.panel-open { grid-template-columns:220px minmax(0,1fr) 280px; }
.sites-wrap.no-unassigned { grid-template-columns:minmax(0,1fr); }
.sites-wrap.no-unassigned.panel-open { grid-template-columns:minmax(0,1fr) 280px; }

.sites-left {
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.pool-hint { font-size:11px; color:var(--muted); padding:8px 16px 10px; line-height:1.4; }
.node-pool { flex:1; overflow-y:auto; padding:0 10px 10px; display:grid; gap:6px; align-content:start; }

/* ── Canvas area ── */
.canvas-wrap { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.canvas-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.canvas-bar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.save-status { font-size:12px; color:var(--muted); font-weight:700; white-space:nowrap; }

.breadcrumb { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.breadcrumb .btn { min-height:28px; padding:0 10px; font-size:12px; }
.breadcrumb .sep { color:var(--muted); font-size:12px; }

/* ── Topology canvas ── */
.topology-board {
  flex:1; position:relative; overflow:auto; min-height:500px;
  background-color:#040d08;
  background-image: radial-gradient(circle, rgba(0,224,64,.14) 1px, transparent 1px);
  background-size:28px 28px;
  user-select:none;
}

/* ── Group cards on canvas ── */
.map-group {
  position:absolute; min-width:240px; min-height:140px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--border-2);
  border-left:4px solid var(--green); border-radius:10px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  display:flex; flex-direction:column;
  transition: box-shadow .2s, transform .15s;
}
.map-group.alarm {
  border-left-color:var(--alarm);
  box-shadow: var(--shadow), 0 0 20px rgba(239,68,68,.14), inset 0 1px 0 rgba(255,255,255,.04);
  animation: alarm-card-glow 1.8s ease-in-out infinite;
}
.map-group.warning {
  border-left-color:var(--warn);
  box-shadow: var(--shadow), 0 0 16px rgba(245,158,11,.1), inset 0 1px 0 rgba(255,255,255,.04);
}
.map-group.normal  { border-left-color:var(--green); }
.map-group.paused  { border-left-color:var(--warn); opacity:.94; }
.map-group.selected { box-shadow:0 0 0 2px var(--accent), var(--shadow); }
.map-group:hover   { box-shadow:0 12px 40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); transform:translateY(-2px); }
@keyframes alarm-card-glow {
  0%,100% { box-shadow: var(--shadow), 0 0 14px rgba(239,68,68,.1); }
  50%      { box-shadow: var(--shadow), 0 0 32px rgba(239,68,68,.25); }
}

.mg-header {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--border); cursor:grab;
  border-radius:9px 9px 0 0;
}
.mg-header:active { cursor:grabbing; }
.mg-dot {
  position:relative;
  width:12px; height:12px; border-radius:50%; flex-shrink:0;
  background: radial-gradient(circle at 35% 30%, #00f060, #008030);
  box-shadow: 0 0 6px rgba(0,230,64,.7), 0 2px 4px rgba(0,0,0,.4);
  animation: pulse 2.5s ease-in-out infinite;
}
.map-group.alarm   .mg-dot {
  background: radial-gradient(circle at 35% 30%, #ff5050, #aa0000);
  box-shadow: 0 0 8px rgba(255,60,60,.8);
  animation: alarm-core-blink 0.9s ease-in-out infinite;
}
.map-group.warning .mg-dot {
  background: radial-gradient(circle at 35% 30%, #ffca30, #c07000);
  box-shadow: 0 0 6px rgba(245,158,11,.7);
  animation: warn-core-pulse 1.8s ease-in-out infinite;
}
.map-group.paused  .mg-dot { background:var(--warn); }
.mg-info { flex:1; min-width:0; }
.mg-name { display:block; font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-type { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.mg-header-btns { display:flex; gap:4px; flex-shrink:0; }
.mg-btn {
  min-height:26px; padding:0 8px; font-size:11px; font-weight:700;
  border:1px solid var(--border-2); border-radius:5px;
  background:var(--surface-2); color:var(--text); cursor:pointer;
}
.mg-btn:hover { background:var(--surface-3); }
.mg-btn.settings { color:var(--muted); font-size:14px; }

.mg-body { flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.mg-summary { display:flex; gap:8px; flex-wrap:wrap; }
.mg-stat { font-size:11px; font-weight:700; color:var(--muted); }

.mg-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mg-device-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; padding:4px 8px 4px 4px;
  border-radius:6px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border:1px solid var(--border);
  cursor:pointer; white-space:nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  transition: all .2s;
}
.mg-device-chip:hover {
  border-color:var(--border-2);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.mg-device-chip .node-joint { width:14px; height:14px; }
.mg-device-chip .node-joint::before { width:5px; height:5px; }
.mg-device-chip .node-joint::after { inset:-4px; }
.mg-device-chip.paused .dot { background:var(--warn); }

.mg-child-groups { display:grid; gap:5px; }
.mg-child-card {
  display:flex; align-items:center; gap:8px; padding:6px 9px;
  background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--green); border-radius:6px;
  cursor:pointer; transition:border-color .15s;
}
.mg-child-card.alarm   { border-left-color:var(--alarm); }
.mg-child-card.warning { border-left-color:var(--warn); }
.mg-child-card:hover { border-color:var(--border-2); }
.mg-child-card strong { font-size:12px; font-weight:800; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-child-card small { font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; }

.mg-empty { font-size:12px; color:var(--muted); padding:8px 0; }

/* Resize handle */
.resize-handle {
  position:absolute; bottom:0; right:0;
  width:20px; height:20px; cursor:nwse-resize;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:4px; opacity:.4;
  background:linear-gradient(135deg, transparent 50%, var(--border-2) 50%);
  border-radius:0 0 9px 0;
}
.resize-handle:hover { opacity:1; }

/* ── Scaffolding joint — node status indicator ── */
.node-joint {
  position: relative;
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 38% 32%, #1e5c38 0%, #0a2416 60%, #061a0e 100%);
  border: 1.5px solid rgba(0,200,70,.32);
  box-shadow:
    0 3px 8px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.4) inset;
}
/* inner bolt core */
.node-joint::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #00f060 0%, #00a030 70%);
  box-shadow: 0 0 6px rgba(0,230,64,.85), 0 0 2px rgba(0,230,64,1);
}
/* live pulse ring */
.node-joint::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,224,64,.55);
  animation: joint-ring 2.8s ease-out infinite;
  pointer-events: none;
}

/* Paused state */
.node-joint.paused {
  background: radial-gradient(circle at 38% 32%, #2a342f 0%, #101a14 60%);
  border-color: rgba(150,200,170,.18);
}
.node-joint.paused::before {
  background: radial-gradient(circle at 30% 30%, #a0b8a8, #4a6454);
  box-shadow: none;
}
.node-joint.paused::after { display:none; }

/* Alarm state */
.node-joint.alarm {
  background: radial-gradient(circle at 38% 32%, #5c1818 0%, #1e0808 60%, #100404 100%);
  border-color: rgba(239,68,68,.4);
}
.node-joint.alarm::before {
  background: radial-gradient(circle at 30% 30%, #ff6060 0%, #cc1010 70%);
  box-shadow: 0 0 6px rgba(255,60,60,.9), 0 0 2px rgba(255,60,60,1);
  animation: alarm-core-blink 0.9s ease-in-out infinite;
}
.node-joint.alarm::after {
  border-color: rgba(239,68,68,.6);
  animation: joint-ring 0.9s ease-out infinite;
}

/* Warning state */
.node-joint.warning {
  background: radial-gradient(circle at 38% 32%, #4a3208 0%, #1e1408 60%, #100c04 100%);
  border-color: rgba(245,158,11,.35);
}
.node-joint.warning::before {
  background: radial-gradient(circle at 30% 30%, #ffca30 0%, #c87800 70%);
  box-shadow: 0 0 6px rgba(245,158,11,.8), 0 0 2px rgba(245,158,11,1);
  animation: warn-core-pulse 1.8s ease-in-out infinite;
}
.node-joint.warning::after {
  border-color: rgba(245,158,11,.55);
  animation: joint-ring 1.8s ease-out infinite;
}

@keyframes joint-ring {
  0%   { transform: scale(0.82); opacity: .65; }
  100% { transform: scale(1.7);  opacity: 0; }
}
@keyframes alarm-core-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(255,60,60,.9); }
  50%       { opacity: .35; box-shadow: 0 0 14px rgba(255,60,60,1); }
}
@keyframes warn-core-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; box-shadow: 0 0 10px rgba(245,158,11,.9); }
}

/* ── Unassigned node chips in pool ── */
.pool-node {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border:1px solid var(--border);
  border-radius:8px; cursor:grab; transition:all .2s;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.pool-node:hover {
  border-color:var(--border-2);
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.pool-node:active { cursor:grabbing; transform:scale(.97); }
.pool-node strong { font-size:12px; font-weight:800; flex:1; }
.pool-node span { font-size:11px; color:var(--muted); }

/* ── Scaffold SVG overlay ── */
.scaffold-svg {
  position:absolute; top:0; left:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:1;
}
.topology-board.draw-mode { cursor:crosshair !important; }
.scaffold-draw-hint {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:rgba(0,224,64,.12); border:1px solid rgba(0,224,64,.3);
  color:var(--accent); font-size:12px; font-weight:700;
  padding:6px 14px; border-radius:999px; pointer-events:none; z-index:200;
  white-space:nowrap;
}

/* ── Standalone device nodes on canvas ── */
.device-node {
  position:absolute; z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:grab; user-select:none;
  transition: filter .15s;
}
.device-node:hover { filter: brightness(1.15); }
.device-node:active { cursor:grabbing; }
.device-node .node-joint { width:28px; height:28px; }
.device-node .node-joint::before { width:10px; height:10px; }
.device-node .node-joint::after { inset:-6px; }
.device-node-label {
  font-size:10px; font-weight:800; color:var(--text);
  text-align:center; white-space:nowrap;
  background:rgba(8,20,16,.85); border:1px solid var(--border);
  border-radius:4px; padding:2px 6px;
  max-width:100px; overflow:hidden; text-overflow:ellipsis;
}
.device-node.alarm .device-node-label { color:var(--alarm); border-color:rgba(239,68,68,.3); }
.device-node.warning .device-node-label { color:var(--warn); border-color:rgba(245,158,11,.25); }
.device-node.paused .device-node-label { color:var(--muted); }

/* View toggle group in canvas bar */
.view-toggle-group { display:flex; border:1px solid var(--border-2); border-radius:6px; overflow:hidden; }
.view-toggle-group .btn { border-radius:0; border:none; min-height:30px; padding:0 12px; font-size:12px; }
.view-toggle-group .btn + .btn { border-left:1px solid var(--border-2); }
.view-toggle-group .btn.view-active { background:var(--surface-3); color:var(--text); }

/* ── Scaffold table view ── */
.scaffold-table-container {
  flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:12px; min-height:0;
}
.scaffold-table-container.hidden { display:none !important; }
.scaf-toolbar { display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0; }
.scaf-node-palette {
  border:1px solid var(--border-2);
  border-radius:8px;
  background:var(--surface);
  padding:10px;
  display:grid;
  gap:8px;
  flex-shrink:0;
}
.scaf-palette-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.scaf-palette-head strong {
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}
.scaf-palette-head span {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.scaf-palette-list {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}
.scaf-palette-node {
  display:grid;
  grid-template-columns:auto minmax(100px, 1fr);
  grid-template-rows:auto auto;
  gap:2px 8px;
  align-items:center;
  min-width:190px;
  max-width:260px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:7px;
  background:linear-gradient(135deg, var(--surface-2), var(--surface-3));
  cursor:grab;
  user-select:none;
}
.scaf-palette-node:active { cursor:grabbing; }
.scaf-palette-node.placed { opacity:.62; }
.scaf-palette-node .node-joint {
  grid-row:1 / span 2;
  width:18px;
  height:18px;
}
.scaf-palette-node strong,
.scaf-palette-node small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.scaf-palette-node strong {
  font-size:12px;
  font-weight:800;
}
.scaf-palette-node small {
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.scaf-scroll { overflow:auto; flex:1; }
.scaf-table {
  border-collapse:collapse; table-layout:fixed;
  border:1px solid var(--border-2); border-radius:8px; overflow:hidden;
}
.scaf-corner {
  width:90px; min-width:90px; background:var(--surface-3);
  border:1px solid var(--border-2);
}
.scaf-col-hd {
  background:var(--surface-3); border:1px solid var(--border-2);
  min-width:180px; padding:2px;
  text-align:center; vertical-align:middle;
}
.scaf-row-hd {
  background:var(--surface-3); border:1px solid var(--border-2);
  width:90px; min-width:90px; padding:2px;
  text-align:center; vertical-align:middle;
}
.scaf-lbl-input {
  width:100%; min-height:0; padding:6px 8px;
  background:transparent; border:none; border-radius:0;
  font-size:12px; font-weight:800; color:var(--text);
  text-align:center; box-shadow:none;
}
.scaf-lbl-input:focus { background:rgba(0,224,64,.06); outline:none; color:var(--accent); }
.scaf-lbl-input::placeholder { color:var(--border-2); font-weight:600; }
.scaf-cell {
  background:var(--surface); border:1px solid var(--border-2);
  min-width:220px; height:170px; vertical-align:top; padding:0;
  transition:background .15s;
}
.scaf-cell.drag-over {
  background:rgba(0,224,64,.08);
  outline:2px dashed var(--accent); outline-offset:-2px;
}
.scaf-cell-node {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:4px 8px;
  padding:12px 32px 10px 10px;
  position:relative;
  min-height:76px;
  border-bottom:1px solid var(--border);
}
.scaf-cell-node.alarm { background:rgba(239,68,68,.08); }
.scaf-cell-node.warning,
.scaf-cell-node.paused { background:rgba(245,158,11,.08); }
.scaf-drag-handle {
  grid-row:1 / span 2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
}
.scaf-drag-handle:active { cursor:grabbing; }
.scaf-cell-node .node-joint {
  width:24px;
  height:24px;
}
.scaf-node-name {
  min-height:30px;
  width:100%;
  padding:4px 6px;
  background:transparent;
  border:1px solid transparent;
  border-radius:4px;
  box-shadow:none;
  color:var(--text);
  font-size:13px;
  font-weight:800;
}
.scaf-node-name:focus {
  border-color:var(--border-2);
  background:rgba(0,224,64,.04);
  outline:none;
}
.scaf-node-id {
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.scaf-drop-hint {
  color:var(--border-2); font-size:11px; font-weight:700;
  text-align:center; padding:28px 8px; user-select:none;
  border-bottom:1px solid var(--border);
}
.scaf-remove-btn {
  position:absolute; top:4px; right:4px;
  width:18px; height:18px; border-radius:50%;
  background:rgba(239,68,68,.75); border:none;
  color:#fff; font-size:9px; font-weight:900;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s; line-height:1;
}
.scaf-cell-node:hover .scaf-remove-btn { opacity:1; }
.scaf-notes {
  display:block; width:100%; min-height:70px; resize:vertical;
  padding:8px 10px; border:none; border-top:1px solid var(--border);
  border-radius:0; background:transparent;
  color:var(--muted); font-size:11px; font-family:inherit; line-height:1.45;
  box-shadow:none;
}
.scaf-notes:focus { outline:none; background:rgba(0,224,64,.03); color:var(--text); }
.scaf-notes::placeholder { color:var(--border-2); }

/* Board drop-zone highlight */
.topology-board.drag-over { background-color:#060e14; }
.map-group.drop-target { outline:2px dashed var(--accent); outline-offset:3px; }

/* Board empty state */
.board-empty {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; color:var(--muted); pointer-events:none;
}
.board-empty h3 { font-size:18px; margin-bottom:8px; }
.board-empty p  { font-size:13px; }

/* ── Rules panel ── */
.sites-right {
  background:var(--surface); border-left:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto;
}
.rules-panel-hd {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.rules-panel-hd h2 { font-size:15px; font-weight:800; }
.rules-form { padding:16px; display:grid; gap:16px; }
.sites-right .device-settings-form {
  display:grid;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:16px;
  margin-top:0;
  padding-top:16px;
  border-top:0;
}
.sites-right .device-settings-form label {
  min-width:0;
}
.sites-right .device-settings-form > span {
  padding-bottom:0;
}
.rules-section h3 { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:10px; }
.rules-section { display:grid; gap:10px; }
.rules-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rules-status { font-size:12px; color:var(--muted); font-weight:700; min-height:16px; }
.site-alarm-table {
  display:grid;
  gap:4px;
}
.site-alarm-table-head,
.site-alarm-row {
  display:grid;
  grid-template-columns:58px 44px minmax(0,1fr);
  gap:6px;
  align-items:start;
}
.site-alarm-table-head {
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.site-alarm-group-label {
  margin-top:4px;
  color:#b7d7c0;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.site-alarm-row {
  min-height:30px;
  padding:5px 6px;
  border:1px solid var(--border);
  border-left:3px solid var(--green);
  border-radius:5px;
  background:var(--surface-2);
}
.site-alarm-row.alarm { border-left-color:var(--alarm); background:rgba(239,68,68,.08); }
.site-alarm-row.warning,
.site-alarm-row.paused { border-left-color:var(--warn); background:rgba(245,158,11,.08); }
.site-alarm-row span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.site-alarm-level { color:var(--text); font-size:11px; font-weight:900; }
.site-alarm-event {
  display:grid;
  gap:2px;
  min-width:0;
}
.site-alarm-reason {
  color:var(--text);
  font-size:11px;
  font-weight:800;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.3;
}
.site-alarm-time {
  color:#b7d7c0;
  font-size:10px;
  font-weight:800;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.25;
}
.site-alarm-action {
  min-height:24px;
  padding:0 8px;
  font-size:11px;
}
.site-alarm-ack {
  color:var(--accent) !important;
  font-size:10px !important;
  font-weight:900 !important;
  text-transform:uppercase;
}

/* Trace log */
.history-actions {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.history-filters {
  display:grid;
  grid-template-columns:repeat(4, minmax(160px, 1fr));
  gap:10px;
  margin-bottom:14px;
}
.history-filters label {
  min-width:0;
}
.trace-list {
  display:grid;
  gap:8px;
  max-height:calc(100vh - 285px);
  overflow:auto;
}
.trace-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:6px;
  background:var(--surface-2);
  padding:10px 12px;
}
.trace-main strong,
.trace-main small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.trace-main strong { font-size:13px; font-weight:800; }
.trace-main small,
.trace-meta {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.trace-meta {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  max-width:420px;
}
.trace-meta span {
  border:1px solid var(--border);
  border-radius:4px;
  padding:2px 6px;
  background:var(--surface);
}

/* Activity history */
.activity-filters {
  display:grid;
  grid-template-columns:repeat(7, minmax(140px, 1fr));
  gap:10px;
  margin-bottom:14px;
}
.activity-list {
  display:grid;
  gap:8px;
  max-height:calc(100vh - 270px);
  overflow:auto;
}
.activity-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px, auto);
  gap:12px;
  align-items:center;
  border:1px solid var(--border);
  border-left:3px solid var(--green);
  border-radius:6px;
  background:var(--surface-2);
  padding:10px 12px;
}
.activity-row.alarm { border-left-color:var(--alarm); }
.activity-row.warning { border-left-color:var(--warn); }
.activity-main strong,
.activity-main small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.activity-main strong { font-size:13px; font-weight:800; }
.activity-main small { color:var(--muted); font-size:11px; font-weight:800; }
.activity-meta {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.activity-meta span {
  border:1px solid var(--border);
  border-radius:4px;
  padding:2px 6px;
  background:var(--surface);
}
.activity-status.alarm { color:var(--alarm); }
.activity-status.warning { color:var(--warn); }
.activity-status.normal { color:var(--green); }

.messages-list {
  display:grid;
  gap:10px;
}
.message-row {
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
}
.message-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.message-head strong,
.message-head small {
  display:block;
  overflow-wrap:anywhere;
}
.message-head strong { font-size:14px; font-weight:800; }
.message-head small { color:var(--muted); font-size:11px; font-weight:700; }
.message-body {
  color:var(--text);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.message-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.message-meta a,
.message-meta span {
  color:inherit;
  text-decoration:none;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  overflow-wrap:anywhere;
}
.message-meta a:hover { color:var(--accent); border-color:var(--border-2); }

/* User management */
.users-layout {
  display:grid;
  grid-template-columns: minmax(260px, 360px) minmax(280px, 420px) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
.users-form {
  display:grid;
  gap:12px;
}
.check-row {
  display:flex;
  grid-template-columns:none;
  align-items:center;
  gap:10px;
  color:var(--text);
}
.check-row input {
  width:auto;
  min-height:0;
}
.generated-password {
  display:grid;
  gap:4px;
  border:1px solid var(--border-2);
  border-radius:6px;
  background:var(--surface-2);
  padding:10px;
}
.generated-password span {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.generated-password strong {
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:16px;
  overflow-wrap:anywhere;
}
.users-list {
  display:grid;
  gap:8px;
  max-height:560px;
  overflow:auto;
}
.user-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  padding:10px 12px;
}
.user-row strong,
.user-row small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.user-row small {
  color:var(--muted);
  font-size:12px;
}
.self-label {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

/* ── Device picker combobox ── */
.device-picker { position:relative; width:280px; flex-shrink:0; }
.picker-input {
  width:100%; min-height:34px; padding:0 32px 0 10px;
  background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:6px; color:var(--text); font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.picker-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,224,64,.15); cursor:text; }
.picker-input-wrap { position:relative; }
.picker-input-wrap::after {
  content:'▾'; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:12px; pointer-events:none;
}
.picker-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:300;
  background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:10px; box-shadow:0 16px 48px rgba(0,0,0,.6);
  overflow:hidden;
}
.picker-search-wrap {
  padding:10px; border-bottom:1px solid var(--border);
}
.picker-search {
  width:100%; min-height:34px; padding:0 10px;
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:6px; color:var(--text); font-size:13px;
}
.picker-search:focus { border-color:var(--accent); outline:none; }
.picker-count-bar {
  padding:5px 12px 0; font-size:11px; color:var(--muted); font-weight:700;
}
.picker-scroller { overflow-y:auto; }
.picker-inner { position:relative; }
.picker-gh {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; font-size:10px; font-weight:900; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted); background:var(--surface-3);
  border-bottom:1px solid var(--border);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.picker-gh-count {
  font-size:10px; background:var(--surface); border-radius:99px;
  padding:1px 6px; color:var(--muted); flex-shrink:0;
}
.picker-item {
  display:flex; align-items:center; gap:10px; padding:0 12px;
  background:transparent; border:none; border-bottom:1px solid var(--border);
  color:var(--text); text-align:left; cursor:pointer; width:100%;
  transition:background .1s;
}
.picker-item:hover   { background:var(--surface-3); }
.picker-item.active  { background:rgba(0,224,64,.1); }
.picker-item.focused { background:var(--surface-3); outline:1px solid var(--accent); }
.pd { width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--green); }
.pd.alarm   { background:var(--alarm); box-shadow:0 0 5px rgba(239,68,68,.5); }
.pd.warning { background:var(--warn);  box-shadow:0 0 5px rgba(245,158,11,.4); }
.pd.paused  { background:var(--warn);  box-shadow:0 0 5px rgba(245,158,11,.4); }
.pi { flex:1; min-width:0; }
.pi strong { display:block; font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pi small  { display:block; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm { font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.pm.alarm   { color:var(--alarm); font-weight:700; }
.pm.warning { color:var(--warn);  font-weight:700; }
.picker-empty { padding:20px 12px; color:var(--muted); font-size:13px; }
.picker-kbd {
  display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--border);
  font-size:11px; color:var(--muted);
}
.picker-kbd kbd { background:var(--surface-3); border:1px solid var(--border-2); border-radius:3px; padding:1px 5px; }

/* ── Responsive ── */
@media (max-width:1100px) {
  .metrics-strip { grid-template-columns:repeat(4,1fr); }
  .monitor-body { grid-template-columns:1fr; }
  .monitor-aside { grid-template-columns:repeat(3,1fr); display:grid; }
  .users-layout { grid-template-columns:1fr; }
  .history-filters,
  .activity-filters { grid-template-columns:repeat(2, minmax(160px, 1fr)); }
  .activity-row { grid-template-columns:1fr; }
  .activity-meta { justify-content:flex-start; }
}
@media (max-width:860px) {
  .metrics-strip { grid-template-columns:repeat(4,1fr); }
  .topbar {
    height:auto; flex-wrap:wrap; padding:10px 14px 0; gap:8px;
    align-items:center;
  }
  .tab-nav {
    flex:none; flex-basis:100%; order:10;
    justify-content:flex-start; overflow-x:auto;
    scrollbar-width:none; padding-bottom:6px; gap:2px;
  }
  .tab-nav::-webkit-scrollbar { display:none; }
  .tab { flex-shrink:0; }
  .topbar-right { margin-left:auto; gap:6px; }
  .user-label { display:none; }
  .auto-refresh-controls { display:none; }
  .device-picker { width:200px; }
  .login-panel { grid-template-columns:1fr; padding:24px; }
  .sites-wrap { grid-template-columns:1fr; height:auto; }
  .sites-left { max-height:160px; }
  .monitor-aside { grid-template-columns:1fr; }
  .history-filters,
  .activity-filters { grid-template-columns:1fr; }
  /* canvas toolbar wraps on tablet */
  .canvas-bar { flex-wrap:wrap; gap:8px; padding:10px 14px; }
  .canvas-bar-right { flex-wrap:wrap; gap:6px; }
  /* trace & activity rows go single-column */
  .trace-row { grid-template-columns:1fr; gap:8px; }
  .trace-meta { justify-content:flex-start; max-width:none; }
  .activity-row { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .metrics-strip { grid-template-columns:repeat(2,1fr); }
  .metric-tile { padding:10px 14px; }
  .metric-tile strong { font-size:22px; }
  .view { padding:14px 16px; gap:12px; }
  .alarm-card {
    grid-template-columns:auto 1fr;
    gap:8px 10px;
    padding:10px 12px;
  }
  .alarm-card-detail,
  .alarm-card-time,
  .alarm-card-group { grid-column:1 / -1; white-space:normal; overflow:visible; }
  .alarm-card-actions { grid-column:1 / -1; justify-content:flex-start; }
  .alarm-card-nav { margin-left:0; }
  .device-picker { width:160px; }
  .topbar-right { gap:4px; }
  .login-panel { padding:20px 16px; }
  .login-logo-svg { width:40px; height:44px; }
  .login-brand-name { font-size:38px; }
  /* panel headings that have a search box or button: allow wrapping */
  .panel-hd { flex-wrap:wrap; }
  .search-box { width:100%; }
  /* device card meta: 2-column on small screens */
  .device-meta { grid-template-columns:1fr 1fr; }
  /* rules actions full width */
  .rules-actions { grid-template-columns:1fr; }
  /* canvas bar buttons tighter */
  .view-toggle-group .btn { padding:0 8px; font-size:11px; }
  .save-status { display:none; }
}

@media (max-width:480px) {
  .metrics-strip { grid-template-columns:repeat(2,1fr); }
  .metric-tile strong { font-size:20px; }
  #devicePickerAnchor { display:none; }
  .topbar { padding:8px 12px 0; }
  /* larger touch targets */
  .tab { padding:0 10px; font-size:12px; min-height:40px; }
  .btn { min-height:40px; }
  .btn-sm { min-height:36px; }
  .view { padding:12px; gap:10px; }
  .monitor-body { gap:12px; }
  .panel { padding:12px; }
  .device-grid { grid-template-columns:1fr; max-height:none; }
  /* history/trace meta wraps fully */
  .trace-meta span,
  .activity-meta span { font-size:10px; padding:2px 5px; }
  /* device card: show full height */
  .evt-list { max-height:160px; }
}