@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES – DARK THEME (default)
═══════════════════════════════════════════════════════════ */
:root {
  --bg-root:       #0f1825;
  --bg-card:       #182030;
  --bg-elevated:   #1e2c42;
  --bg-input:      #141e30;

  --border:        rgba(255,255,255,0.18);
  --border-hover:  rgba(255,255,255,0.30);

  --text-primary:  #f2f6ff;
  --text-secondary:#c0cfe8;
  --text-muted:    #8aa0c0;

  --accent:        #00d4ff;
  --accent-dim:    rgba(0,212,255,0.15);
  --accent-glow:   rgba(0,212,255,0.4);

  --status-normal:  #10b981;
  --status-warning: #f59e0b;
  --status-alarm:   #f97316;
  --status-danger:  #ef4444;
  --status-offline: #4b6080;

  --shadow-card: 0 4px 24px rgba(0,0,0,0.5);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* theme transition */
  --transition-theme: background .3s,color .3s,border-color .3s,box-shadow .3s;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
═══════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --bg-root:       #e8eef8;
  --bg-card:       #ffffff;
  --bg-elevated:   #edf3fc;
  --bg-input:      #e0e8f5;

  --border:        rgba(0,0,0,0.14);
  --border-hover:  rgba(0,0,0,0.26);

  --text-primary:  #081525;
  --text-secondary:#1e3050;
  --text-muted:    #445878;

  --accent:        #0076a8;
  --accent-dim:    rgba(0,118,168,0.12);
  --accent-glow:   rgba(0,118,168,0.35);

  --status-normal:  #047a5a;
  --status-warning: #c47000;
  --status-alarm:   #cc5800;
  --status-danger:  #c01a1a;
  --status-offline: #607080;

  --shadow-card: 0 4px 20px rgba(0,0,0,0.14);
}

/* ── Light theme: specific overrides that variables alone can't fix ── */

/* Body + structural backgrounds */
[data-theme="light"] body { background:var(--bg-root); color:var(--text-primary); }

/* Header */
[data-theme="light"] .header { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.1); }
[data-theme="light"] .header-site-name { color:#081525; }
[data-theme="light"] .header-company   { color:#445878; }
[data-theme="light"] .header-clock     { color:#445878; }
[data-theme="light"] .hdr-btn          { background:#edf3fc; color:#1e3050; border-color:rgba(0,0,0,.14); }
[data-theme="light"] .hdr-btn:hover    { background:#dde8f8; color:#081525; }
[data-theme="light"] .theme-toggle-btn { background:#edf3fc; color:#1e3050; border-color:rgba(0,0,0,.14); }
[data-theme="light"] .logo-placeholder { background:linear-gradient(135deg,#0076a8,#005580); }

/* Stats bar */
[data-theme="light"] .stats-bar  { background:#fff; border-color:rgba(0,0,0,.12); }
[data-theme="light"] .stat-label { color:#445878; }
[data-theme="light"] .stat-item  { border-color:rgba(0,0,0,.1); }
[data-theme="light"] .stat-item.total .stat-num { color:#081525; }

/* Tabs bar */
[data-theme="light"] .tabs-bar { background:#fff; border-color:rgba(0,0,0,.12); }
[data-theme="light"] .tab-btn  { background:#edf3fc; color:#1e3050; border-color:rgba(0,0,0,.14); }
[data-theme="light"] .tab-btn:hover { background:#dde8f8; color:#081525; }
[data-theme="light"] .tab-count { background:#e0e8f5; color:#445878; }

/* Banners */
[data-theme="light"] .offline-banner { background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.2); color:#a01010; }
[data-theme="light"] .simulation-banner { background:rgba(196,112,0,.08); border-color:rgba(196,112,0,.2); color:#8a5000; }

/* Section headers */
[data-theme="light"] .section-header { border-color:rgba(0,0,0,.12); }
[data-theme="light"] .section-header h2 { color:#081525; }

/* Area cards */
[data-theme="light"] .area-card { background:#fff; border-color:rgba(0,0,0,.14); }
[data-theme="light"] .area-card-title { color:#081525; }
[data-theme="light"] .area-stat-label { color:#445878; }
[data-theme="light"] .area-maxval { color:#445878; }
[data-theme="light"] .area-maxval strong { color:#1e3050; }

/* Pill group headers */
[data-theme="light"] .pill-group-name  { color:#081525; }
[data-theme="light"] .pill-group-count { color:#445878; }

/* Pill CARD */
[data-theme="light"] .pill-card { background:#fff; border-color:rgba(0,0,0,.15); }
[data-theme="light"] .pill-id-chip { background:#edf3fc; color:#445878; border-color:rgba(0,0,0,.14); }
[data-theme="light"] .pill-name       { color:#1e3050; }
[data-theme="light"] .pill-thresh-tiny{ color:#607080; }

/* Pill CAPSULE – light background needs dark text shadow so value is readable */
[data-theme="light"] .pill-capsule { background:#d8e8f8; border-color:rgba(0,0,0,.18); }
[data-theme="light"] .pill-val {
  color:#fff;
  text-shadow:0 0 8px rgba(0,0,0,1), 1px 1px 0 rgba(0,0,0,.9), -1px -1px 0 rgba(0,0,0,.9);
}
[data-theme="light"] .pill-unit { color:rgba(0,0,0,.55); }

/* Pill status chips */
[data-theme="light"] .pill-chip-normal  { background:rgba(4,122,90,.12);   color:#047a5a; }
[data-theme="light"] .pill-chip-warning { background:rgba(196,112,0,.12);  color:#c47000; }
[data-theme="light"] .pill-chip-alarm   { background:rgba(204,88,0,.12);   color:#cc5800; }
[data-theme="light"] .pill-chip-danger  { background:rgba(192,26,26,.12);  color:#c01a1a; }
[data-theme="light"] .pill-chip-offline { background:rgba(96,112,128,.12); color:#607080; }

/* Floor view on dashboard */
[data-theme="light"] .fv-header h2 { color:#081525; }
[data-theme="light"] .fv-pill-content { color:#0f172a; text-shadow:0 1px 0 rgba(255,255,255,.72), 0 0 7px rgba(255,255,255,.65); }
[data-theme="light"] .fv-pill-val { color:inherit; }

/* Alert ticker */
[data-theme="light"] .active-alerts-ticker {
  background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,247,237,.96));
  border-color:rgba(220,38,38,.18);
  box-shadow:0 8px 22px rgba(15,23,42,.08);
}
[data-theme="light"] .ticker-left { background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.16); }
[data-theme="light"] .ticker-label { color:#991b1b; }
[data-theme="light"] .ticker-summary { color:#5b6478; }
[data-theme="light"] .ticker-marquee { background:#fff; border-color:rgba(0,0,0,.10); }
[data-theme="light"] .ticker-text  { color:#1e3050; }
[data-theme="light"] .ticker-item { background:#f8fafc; border-color:rgba(0,0,0,.08); }
[data-theme="light"] .ticker-separator { color:#94a3b8; }
[data-theme="light"] .ticker-action { background:#fff; color:#991b1b; border-color:rgba(220,38,38,.18); }
[data-theme="light"] .ticker-action:hover { background:#fff1f2; border-color:rgba(220,38,38,.3); }

/* Floor-view canvas (dashboard) */
[data-theme="light"] .fv-canvas { border-color:rgba(0,0,0,.18); }

/* ═══════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg-root); color:var(--text-primary);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:var(--transition-theme);
}
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-root); }
::-webkit-scrollbar-thumb { background:var(--bg-elevated); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border); }
.hidden { display:none !important; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS (global)
═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
  border:none; transition:all .15s; white-space:nowrap; text-decoration:none;
}
.btn-primary {
  background:var(--accent); color:#fff;
}
[data-theme="light"] .btn-primary { color:#fff; background:#0090b8; }
.btn-primary:hover { filter:brightness(1.12); }
.btn-secondary {
  background:var(--bg-elevated); color:var(--text-primary);
  border:1px solid var(--border);
}
.btn-secondary:hover { border-color:var(--border-hover); background:var(--bg-input); }
.btn-ghost {
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--border);
}
.btn-ghost:hover { background:var(--bg-elevated); color:var(--text-primary); border-color:var(--border-hover); }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-danger { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background:rgba(239,68,68,.25); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.spin { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   ALERT TICKER
═══════════════════════════════════════════════════════════ */
.active-alerts-ticker {
  --ticker-accent:#ef4444;
  --ticker-accent-soft:rgba(239,68,68,.14);
  --ticker-duration:85s;
  min-height:48px;
  padding:7px 14px;
  display:grid;
  grid-template-columns:auto auto minmax(160px,1fr) auto;
  align-items:center;
  gap:10px;
  overflow:hidden;
  position:sticky;
  top:0;
  z-index:250;
  background:
    radial-gradient(circle at 8% 50%, rgba(239,68,68,.20), transparent 30%),
    linear-gradient(90deg,rgba(24,32,48,.98),rgba(31,43,63,.96));
  border-bottom:1px solid rgba(239,68,68,.32);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
}
.active-alerts-ticker.ticker-warning { --ticker-accent:#f59e0b; --ticker-accent-soft:rgba(245,158,11,.16); border-color:rgba(245,158,11,.32); }
.active-alerts-ticker.ticker-alarm   { --ticker-accent:#f97316; --ticker-accent-soft:rgba(249,115,22,.16); border-color:rgba(249,115,22,.34); }
.active-alerts-ticker.ticker-danger  { --ticker-accent:#ef4444; --ticker-accent-soft:rgba(239,68,68,.17); border-color:rgba(239,68,68,.40); }
.ticker-left {
  display:flex; align-items:center; gap:9px;
  padding:5px 9px 5px 6px;
  border-radius:999px;
  background:var(--ticker-accent-soft);
  border:1px solid color-mix(in srgb, var(--ticker-accent), transparent 70%);
  flex-shrink:0;
}
.ticker-icon {
  width:30px; height:30px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:var(--ticker-accent);
  box-shadow:0 0 18px color-mix(in srgb, var(--ticker-accent), transparent 55%);
  animation:ticker-icon-pulse 2.6s ease-in-out infinite;
}
.ticker-title-wrap { display:flex; flex-direction:column; gap:1px; line-height:1.05; }
.ticker-label { font-size:11px; font-weight:900; color:#fff; white-space:nowrap; letter-spacing:.08em; text-transform:uppercase; }
.ticker-summary { font-size:10px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.ticker-alert-chips { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ticker-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px; border-radius:999px;
  font-size:10px; font-weight:900; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid transparent;
}
.ticker-chip-warning { background:rgba(245,158,11,.13); color:#fbbf24; border-color:rgba(245,158,11,.25); }
.ticker-chip-alarm   { background:rgba(249,115,22,.13); color:#fb923c; border-color:rgba(249,115,22,.25); }
.ticker-chip-danger  { background:rgba(239,68,68,.14); color:#f87171; border-color:rgba(239,68,68,.28); animation:ticker-chip-pulse 1.8s ease-in-out infinite; }
.ticker-marquee {
  min-width:0; overflow:hidden; height:32px;
  display:flex; align-items:center;
  border-radius:999px;
  background:rgba(15,24,37,.72);
  border:1px solid rgba(255,255,255,.08);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.ticker-text {
  display:inline-flex; align-items:center; gap:14px;
  padding-left:100%;
  font-size:12px; font-weight:700; color:var(--text-secondary);
  animation:ticker-scroll var(--ticker-duration) linear infinite;
  white-space:nowrap; will-change:transform;
}
.active-alerts-ticker:hover .ticker-text { animation-play-state:paused; }
.ticker-item {
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
.ticker-item strong { color:var(--text-primary); font-weight:900; }
.ticker-item b { color:var(--ticker-accent); font-weight:900; font-variant-numeric:tabular-nums; }
.ticker-item .ticker-status {
  color:#fff; background:var(--ticker-accent);
  border-radius:999px; padding:2px 6px;
  font-size:9px; font-weight:900; letter-spacing:.05em;
}
.ticker-separator { color:var(--ticker-accent); opacity:.75; }
.ticker-action {
  border:1px solid color-mix(in srgb, var(--ticker-accent), transparent 68%);
  background:var(--ticker-accent-soft); color:#fff;
  border-radius:999px; padding:7px 12px;
  font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; transition:all .18s ease;
}
.ticker-action:hover { transform:translateY(-1px); background:color-mix(in srgb, var(--ticker-accent), transparent 78%); }
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
@keyframes ticker-icon-pulse { 0%,100%{box-shadow:0 0 14px color-mix(in srgb, var(--ticker-accent), transparent 58%)} 50%{box-shadow:0 0 28px color-mix(in srgb, var(--ticker-accent), transparent 35%)} }
@keyframes ticker-chip-pulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.28)} }
@media(max-width:900px){
  .active-alerts-ticker { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; }
  .ticker-alert-chips { display:none; }
  .ticker-summary { display:none; }
  .ticker-left { padding-right:8px; }
}
@media(max-width:600px){
  .active-alerts-ticker { grid-template-columns:auto minmax(0,1fr); padding:7px 10px; }
  .ticker-action { display:none; }
  .ticker-label { font-size:10px; }
  .ticker-icon { width:27px; height:27px; }
  .ticker-marquee { height:30px; }
  .ticker-text { font-size:11px; }
}
@media(prefers-reduced-motion:reduce){
  .ticker-text,.ticker-icon,.ticker-chip-danger { animation:none !important; }
}
.offline-banner, .simulation-banner {
  display:flex; align-items:center; gap:8px; padding:8px 20px; font-size:12px; font-weight:600;
}
.offline-banner    { background:rgba(239,68,68,.12); border-bottom:1px solid rgba(239,68,68,.3); color:#f87171; }
.simulation-banner { background:rgba(245,158,11,.1);  border-bottom:1px solid rgba(245,158,11,.3); color:#fbbf24; }

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
.header {
  display:flex; align-items:center; gap:12px; padding:0 20px; height:60px;
  background:var(--bg-card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 16px rgba(0,0,0,.25);
}
[data-theme="light"] .header { box-shadow:0 2px 16px rgba(0,0,0,.08); }
.header-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-placeholder {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#0080aa);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:#fff; flex-shrink:0;
}
.header-site-name { font-size:14px; font-weight:800; color:var(--text-primary); }
.header-company   { font-size:11px; color:var(--text-muted); }
.header-divider   { width:1px; height:24px; background:var(--border); margin:0 4px; }
.header-spacer    { flex:1; }
.header-clock     { font-size:13px; color:var(--text-muted); font-variant-numeric:tabular-nums; font-weight:600; }
.hdr-btn {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border-radius:8px; font-size:12px; font-weight:600;
  background:var(--bg-elevated); color:var(--text-secondary);
  border:1px solid var(--border); text-decoration:none; transition:all .15s;
}
.hdr-btn:hover { background:var(--bg-input); color:var(--text-primary); border-color:var(--border-hover); }

/* Theme toggle */
.theme-toggle-btn {
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-elevated); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; flex-shrink:0;
}
.theme-toggle-btn:hover { background:var(--bg-input); color:var(--text-primary); border-color:var(--border-hover); }

/* Connection badge */
.conn-badge {
  display:flex; align-items:center; gap:7px; padding:5px 12px;
  border-radius:8px; font-size:12px; font-weight:700;
}
.conn-badge.connected    { background:rgba(16,185,129,.15); color:#10b981; }
.conn-badge.simulation   { background:rgba(245,158,11,.15); color:#f59e0b; }
.conn-badge.disconnected { background:rgba(239,68,68,.12);  color:#ef4444; }
.conn-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.conn-dot.pulse { animation:dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.8)} }

/* Alert badge */
.alert-badge {
  display:flex; align-items:center; gap:5px; padding:5px 12px;
  border-radius:8px; font-size:12px; font-weight:700;
  background:rgba(239,68,68,.15); color:#ef4444;
  cursor:pointer; border:1px solid rgba(239,68,68,.25);
  transition:all .15s;
}
.alert-badge:hover { background:rgba(239,68,68,.25); }
.alert-badge.no-alerts { background:rgba(16,185,129,.1); color:#10b981; border-color:rgba(16,185,129,.2); }
.alert-count { font-size:14px; font-weight:900; }

/* ═══════════════════════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════════════════════ */
.stats-bar {
  display:flex; gap:0; background:var(--bg-card);
  border-bottom:1px solid var(--border);
}
.stat-item {
  flex:1; padding:10px 8px; text-align:center;
  border-right:1px solid var(--border);
  transition:background .15s; cursor:default;
}
.stat-item:last-child { border-right:none; }
.stat-num  { font-size:22px; font-weight:900; line-height:1; }
.stat-label{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-top:3px; }
.stat-item.total   .stat-num { color:var(--text-primary); }
.stat-item.normal  .stat-num { color:var(--status-normal); }
.stat-item.warning .stat-num { color:var(--status-warning); }
.stat-item.alarm   .stat-num { color:var(--status-alarm); }
.stat-item.danger  .stat-num { color:var(--status-danger); }
.stat-item.offline .stat-num { color:var(--status-offline); }

/* ═══════════════════════════════════════════════════════════
   TABS BAR
═══════════════════════════════════════════════════════════ */
.tabs-bar {
  display:flex; gap:4px; padding:10px 16px;
  background:var(--bg-card); border-bottom:1px solid var(--border);
  overflow-x:auto; flex-wrap:nowrap;
}
.tab-btn {
  display:flex; align-items:center; gap:6px; padding:7px 14px;
  border-radius:8px; border:1px solid var(--border);
  background:var(--bg-elevated); color:var(--text-secondary);
  font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:all .15s; position:relative;
}
.tab-btn:hover { background:var(--bg-input); color:var(--text-primary); border-color:var(--border-hover); }
.tab-btn.active { background:var(--accent-dim); color:var(--accent); border-color:rgba(0,212,255,.4); }
[data-theme="light"] .tab-btn.active { background:rgba(0,144,184,.1); color:#0090b8; border-color:rgba(0,144,184,.3); }
.tab-count { background:var(--bg-root); padding:1px 7px; border-radius:99px; font-size:10px; }
.tab-alert-dot { width:7px; height:7px; border-radius:50%; background:#ef4444; margin-right:2px; animation:dot-pulse 1.5s infinite; }

/* ═══════════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════════ */
.main-content { padding:16px 20px; max-width:1600px; margin:0 auto; }
.section-header {
  display:flex; align-items:center; gap:10px;
  margin:18px 0 12px; padding-bottom:10px; border-bottom:1px solid var(--border);
}
.section-header h2 { font-size:15px; font-weight:800; color:var(--text-primary); }
.section-icon { color:var(--accent); }

/* ═══════════════════════════════════════════════════════════
   AREA OVERVIEW CARDS (top of page)
═══════════════════════════════════════════════════════════ */
.area-overview-top {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:0;
}
@media(max-width:900px) { .area-overview-top { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px) { .area-overview-top { grid-template-columns:1fr 1fr; } }

.area-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:14px; padding:14px; cursor:pointer;
  transition:all .2s; position:relative; overflow:hidden;
}
.area-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg,transparent 60%,rgba(255,255,255,.02));
  pointer-events:none;
}
.area-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:var(--border-hover); }
.area-card.has-danger  { border-color:rgba(239,68,68,.45); }
.area-card.has-alarm   { border-color:rgba(249,115,22,.4); }
.area-card.has-warning { border-color:rgba(245,158,11,.35); }

.area-card-title {
  display:flex; align-items:center; gap:8px; font-size:12px;
  font-weight:800; color:var(--text-primary); margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em;
}
.area-stats { display:flex; gap:8px; margin-bottom:10px; }
.area-stat   { flex:1; text-align:center; }
.area-stat-num   { font-size:20px; font-weight:900; line-height:1; }
.area-stat-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.area-mini-chart { display:flex; gap:2px; align-items:flex-end; height:32px; margin-bottom:8px; }
.mini-bar        { width:8px; border-radius:2px 2px 0 0; min-height:4px; transition:height .5s ease; }
.area-maxval     { display:flex; justify-content:space-between; font-size:10px; color:var(--text-muted); }
.area-maxval strong { font-weight:700; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.normal  { background:var(--status-normal);  box-shadow:0 0 5px var(--status-normal); }
.dot.warning { background:var(--status-warning); box-shadow:0 0 5px var(--status-warning); animation:dot-pulse 2s infinite; }
.dot.alarm   { background:var(--status-alarm);   box-shadow:0 0 5px var(--status-alarm);   animation:dot-pulse 1.5s infinite; }
.dot.danger  { background:var(--status-danger);  box-shadow:0 0 5px var(--status-danger);  animation:dot-pulse 1s infinite; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM SENSOR CAPSULE CARDS – adapted from uploaded h2s-sensor demo
═══════════════════════════════════════════════════════════ */
.pill-group-header {
  display:flex; align-items:center; gap:8px; padding:12px 4px 8px;
  margin-top:10px; border-bottom:1px solid var(--border); margin-bottom:12px;
}
.pill-group-header:first-child { margin-top:0; }
.pill-group-name  { font-size:13px; font-weight:800; color:var(--text-primary); }
.pill-group-count { font-size:11px; color:var(--text-muted); }
.pill-group-alert {
  margin-left:auto; font-size:10px; font-weight:800;
  background:rgba(239,68,68,.15); color:#ef4444;
  padding:2px 9px; border-radius:99px; animation:pulse-red 2s infinite;
}
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:.5} }

.pill-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px; padding-bottom:18px; }
.pill-row-area { padding-top:4px; }

.pill-card {
  min-height:250px; display:flex; flex-direction:column;
  background-color:var(--bg-card);
  background-image:linear-gradient(165deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.006) 42%,rgba(0,0,0,.18) 100%);
  border:1px solid var(--border); border-radius:22px;
  padding:16px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s, background .3s;
  animation:pill-card-enter .45s cubic-bezier(.22,1,.36,1) both;
}
.pill-card:hover { transform:translateY(-3px); box-shadow:0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08); }
[data-theme="light"] .pill-card {
  background-color:#fff;
  background-image:linear-gradient(165deg,rgba(0,118,168,.055) 0%,rgba(255,255,255,.9) 45%,rgba(210,225,242,.35) 100%);
  box-shadow:0 8px 26px rgba(30,55,85,.12), inset 0 1px 0 rgba(255,255,255,.75);
}
@keyframes pill-card-enter { from{opacity:0;transform:scale(.97) translateY(14px)} to{opacity:1;transform:none} }

.pill-card-bg {
  position:absolute; inset:auto -20% -35% -20%; height:60%; opacity:.18; pointer-events:none; filter:blur(30px);
  background:radial-gradient(circle at 50% 50%, var(--status-normal), transparent 58%);
  transition:background .4s, opacity .4s;
}
.pill-card.pill-warning .pill-card-bg { background:radial-gradient(circle at 50% 50%, var(--status-warning), transparent 58%); opacity:.22; }
.pill-card.pill-alarm .pill-card-bg, .pill-card.pill-danger .pill-card-bg { background:radial-gradient(circle at 50% 50%, var(--status-danger), transparent 58%); opacity:.26; }
.pill-card.pill-offline .pill-card-bg, .pill-card.pill-disabled .pill-card-bg { background:radial-gradient(circle at 50% 50%, var(--status-offline), transparent 58%); opacity:.10; }
.pill-card.pill-warning { border-color:rgba(245,158,11,.46); }
.pill-card.pill-alarm   { border-color:rgba(249,115,22,.52); animation:pill-card-enter .45s cubic-bezier(.22,1,.36,1) both, alarm-pulse 2s ease-in-out infinite; }
.pill-card.pill-danger  { border-color:rgba(239,68,68,.64); animation:pill-card-enter .45s cubic-bezier(.22,1,.36,1) both, danger-pulse 1.35s ease-in-out infinite; }
.pill-card.pill-offline, .pill-card.pill-disabled { opacity:.72; }
@keyframes alarm-pulse  { 0%,100%{box-shadow:var(--shadow-card)} 50%{box-shadow:0 0 22px 4px rgba(249,115,22,.25)} }
@keyframes danger-pulse { 0%,100%{box-shadow:var(--shadow-card)} 50%{box-shadow:0 0 28px 5px rgba(239,68,68,.32)} }

.pill-head { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pill-head-left { display:flex; align-items:center; gap:10px; min-width:0; }
.pill-head-icon {
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); color:var(--accent); flex-shrink:0;
}
[data-theme="light"] .pill-head-icon { background:rgba(0,118,168,.07); border-color:rgba(0,118,168,.12); }
.pill-title { font-size:13px; font-weight:800; color:var(--text-primary); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.pill-subtitle { font-size:9px; color:var(--text-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; letter-spacing:.02em; }
.pill-divider { position:relative; z-index:2; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); margin:13px 0; }
[data-theme="light"] .pill-divider { background:linear-gradient(90deg,transparent,rgba(0,0,0,.09),transparent); }

.pill-status-chip {
  flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em;
  padding:5px 8px; border-radius:999px; border:1px solid transparent;
}
.pill-status-chip::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; animation:dot-pulse 2s ease-in-out infinite; }
.pill-chip-normal  { background:rgba(34,197,94,.10);  color:#22c55e; border-color:rgba(34,197,94,.18); }
.pill-chip-warning { background:rgba(245,158,11,.12);  color:#f59e0b; border-color:rgba(245,158,11,.22); }
.pill-chip-alarm   { background:rgba(249,115,22,.12);  color:#f97316; border-color:rgba(249,115,22,.22); }
.pill-chip-danger  { background:rgba(239,68,68,.12);   color:#ef4444; border-color:rgba(239,68,68,.22); }
.pill-chip-offline { background:rgba(75,96,128,.16);    color:var(--status-offline); border-color:rgba(75,96,128,.22); }
.pill-chip-disabled{ background:rgba(31,41,55,.16);     color:var(--text-muted); border-color:rgba(31,41,55,.22); }

.pill-main-body { position:relative; z-index:2; display:flex; align-items:stretch; gap:16px; flex:1; }
.pill-capsule-wrapper { position:relative; width:94px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.pill-glow-ring {
  position:absolute; top:-6px; left:6px; width:82px; height:162px; border-radius:999px;
  opacity:0; transition:opacity .5s, box-shadow .5s; pointer-events:none;
}
.pill-glow-ring.active { opacity:1; }
.pill-glow-ring.safe   { box-shadow:0 0 28px rgba(34,197,94,.20),0 0 60px rgba(34,197,94,.13),inset 0 0 20px rgba(34,197,94,.18); }
.pill-glow-ring.warn   { box-shadow:0 0 28px rgba(245,158,11,.22),0 0 60px rgba(245,158,11,.14),inset 0 0 20px rgba(245,158,11,.18); }
.pill-glow-ring.alarm  { box-shadow:0 0 29px rgba(249,115,22,.24),0 0 64px rgba(249,115,22,.15),inset 0 0 21px rgba(249,115,22,.19); }
.pill-glow-ring.danger { box-shadow:0 0 30px rgba(239,68,68,.26),0 0 66px rgba(239,68,68,.16),inset 0 0 22px rgba(239,68,68,.20); }
.pill-glow-ring.offline{ box-shadow:0 0 18px rgba(75,96,128,.12); }

.pill-capsule {
  width:76px; height:150px; border-radius:999px;
  border:1.5px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.008) 50%,rgba(0,0,0,.14) 100%);
  position:relative; overflow:hidden; box-shadow:inset 0 2px 11px rgba(0,0,0,.42); flex-shrink:0;
}
[data-theme="light"] .pill-capsule {
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(226,236,248,.56));
  border-color:rgba(0,0,0,.15); box-shadow:inset 0 2px 10px rgba(0,0,0,.10);
}
.pill-capsule::before {
  content:''; position:absolute; inset:3px; border-radius:999px; border:1px solid rgba(255,255,255,.055); z-index:5; pointer-events:none;
}
[data-theme="light"] .pill-capsule::before { border-color:rgba(255,255,255,.72); }
.pill-capsule::after {
  content:''; position:absolute; top:8%; left:24%; width:18%; height:36%; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.035)); z-index:6; pointer-events:none;
}
.pill-liquid {
  position:absolute; bottom:0; left:0; right:0; height:0%; min-height:0;
  transition:height .75s cubic-bezier(.34,1.56,.64,1), background .5s, box-shadow .5s;
  z-index:1; overflow:visible;
}
.pill-liquid::after {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.16),transparent 22%,transparent 78%,rgba(0,0,0,.16));
}
.pill-wave-container { position:absolute; top:-16px; left:-8px; right:-8px; height:24px; overflow:hidden; z-index:3; }
.pill-wave-svg { position:absolute; top:0; left:0; width:100%; height:24px; overflow:visible; }
.pill-bubble-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.pill-glass {
  position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 28%,transparent 75%,rgba(0,0,0,.11) 100%);
  z-index:7; pointer-events:none;
}
.pill-capsule-value { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:8; pointer-events:none; }
.pill-capsule-value span { font-size:17px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; transition:color .4s, text-shadow .4s; }
.pill-capsule-value span.light { color:rgba(255,255,255,.92); text-shadow:0 1px 7px rgba(0,0,0,.48); }
.pill-capsule-value span.dark  { color:var(--text-primary); text-shadow:none; }
.pill-ticks { position:absolute; inset:0; pointer-events:none; z-index:9; }
.pill-tick { position:absolute; right:4px; height:1px; background:rgba(255,255,255,.10); }
.pill-tick-major { width:10px; height:1.5px; background:rgba(255,255,255,.18); }
[data-theme="light"] .pill-tick-major { background:rgba(0,0,0,.18); }
.pill-tick-label { position:absolute; right:17px; transform:translateY(50%); font-size:8px; font-weight:800; color:rgba(255,255,255,.34); font-variant-numeric:tabular-nums; line-height:1; background:rgba(8,14,24,.60); padding:1px 3px; border-radius:4px; min-width:16px; text-align:center; }
[data-theme="light"] .pill-tick-label { color:rgba(0,0,0,.62); background:rgba(255,255,255,.72); }
.pill-tick-label.tick-bottom { transform:translateY(0); bottom:4px !important; }
.pill-tick-label.tick-top { transform:translateY(100%); bottom:calc(100% - 6px) !important; }
.pill-thresh-line { position:absolute; left:0; right:0; height:0; border-top:1px dashed; pointer-events:none; opacity:.8; z-index:10; }
.pill-ppm-label { margin-top:7px; font-size:8px; font-weight:800; color:var(--text-muted); letter-spacing:.15em; text-transform:uppercase; }

.pill-reading-panel { min-width:0; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:10px; }
.pill-reading-label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; color:var(--text-muted); margin-bottom:3px; }
.pill-reading-value { display:flex; align-items:baseline; gap:4px; }
.pill-reading-number { font-size:35px; font-weight:300; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; transition:color .4s; }
.pill-reading-unit { font-size:10px; font-weight:800; color:var(--text-secondary); letter-spacing:.07em; }
.pill-trend-line { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.pill-id-chip { font-size:9px; font-weight:900; font-family:monospace; background:var(--bg-elevated); color:var(--text-muted); padding:3px 7px; border-radius:7px; border:1px solid var(--border); }
.pill-trend-arrow { font-size:11px; font-weight:900; min-width:16px; text-align:right; }
.pill-thresholds { display:flex; flex-direction:column; gap:5px; }
.pill-threshold {
  display:grid; grid-template-columns:8px minmax(48px,1fr) auto; align-items:center; gap:6px;
  padding:5px 7px; border-radius:8px; border:1px solid transparent; transition:background .4s,border-color .4s;
}
.pill-threshold-dot { width:6px; height:6px; border-radius:50%; }
.pill-threshold-name { font-size:10px; font-weight:800; color:var(--text-secondary); }
.pill-threshold-range { font-size:8px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.pill-threshold-safe.active { background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.14); }
.pill-threshold-warn.active { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.14); }
.pill-threshold-alarm.active { background:rgba(249,115,22,.08); border-color:rgba(249,115,22,.14); }
.pill-threshold-danger.active { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.16); }
.pill-threshold-safe.active .pill-threshold-name { color:#22c55e; }
.pill-threshold-warn.active .pill-threshold-name { color:#f59e0b; }
.pill-threshold-alarm.active .pill-threshold-name { color:#f97316; }
.pill-threshold-danger.active .pill-threshold-name { color:#ef4444; }
.pill-footer { position:relative; z-index:2; display:flex; justify-content:space-between; gap:8px; margin-top:13px; padding-top:11px; border-top:1px solid rgba(255,255,255,.07); font-size:9px; color:var(--text-muted); letter-spacing:.03em; }
.pill-footer-vortex { color:var(--text-primary); font-weight:900; letter-spacing:.04em; }
[data-theme="light"] .pill-footer { border-top-color:rgba(0,0,0,.08); }

@media(max-width:700px){
  .pill-row { grid-template-columns:1fr; }
  .pill-card { min-height:230px; }
}

/* ═══════════════════════════════════════════════════════════
   FLOOR VIEW (dashboard – read-only with mini-pill sensors)
═══════════════════════════════════════════════════════════ */
#floor-view-section { margin-bottom:8px; }
.fv-header {
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.fv-header h2 { font-size:15px; font-weight:800; color:var(--text-primary); margin:0; }
.fv-edit-btn {
  margin-left:auto; display:flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; color:var(--accent);
  text-decoration:none; background:var(--accent-dim);
  padding:4px 11px; border-radius:8px; border:1px solid rgba(0,212,255,.25);
  transition:background .15s;
}
[data-theme="light"] .fv-edit-btn { color:#0090b8; background:rgba(0,144,184,.1); border-color:rgba(0,144,184,.25); }
.fv-edit-btn:hover { background:var(--accent-glow); }
.fv-canvas-wrap { overflow-x:auto; padding-bottom:4px; }
.fv-canvas {
  position:relative; overflow:hidden;
  border:1.5px solid var(--border); border-radius:12px;
  background-color:#07111e;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.45);
}
[data-theme="light"] .fv-canvas {
  background-color:#dde8f0;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;
}
.fv-empty {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  color:var(--text-muted); font-size:13px; text-align:center;
}

/* Mini vertical pill sensor marker on floor plan — compact sensitivity capsule */
.fv-pill-chip {
  position:absolute;
  width:58px;
  min-height:132px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  pointer-events:none;
  transform:translate(-50%, -8px);
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.34));
  z-index:25;
}
.fv-pill-capsule {
  --fv-col:#10b981;
  --fv-glow:rgba(16,185,129,.36);
  --fv-glow-strong:rgba(16,185,129,.56);
  width:48px;
  height:108px;
  border-radius:999px;
  border:1.6px solid var(--fv-col);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 45%, rgba(0,0,0,.16)),
    rgba(8,17,31,.88);
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:
    0 0 16px var(--fv-glow),
    0 0 34px color-mix(in srgb, var(--fv-col) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -14px 22px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:border-color .35s ease, box-shadow .45s ease, transform .35s ease;
}
[data-theme="light"] .fv-pill-capsule {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,246,255,.78) 44%, rgba(218,232,246,.70)),
    rgba(235,244,252,.93);
  box-shadow:
    0 0 16px var(--fv-glow),
    0 0 30px color-mix(in srgb, var(--fv-col) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -10px 18px rgba(15,23,42,.10);
}
.fv-pill-capsule::before {
  content:'';
  position:absolute;
  inset:3px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  z-index:6;
  pointer-events:none;
}
[data-theme="light"] .fv-pill-capsule::before { border-color:rgba(15,23,42,.10); }

/* Vertical live fill: low reading stays at bottom, high reading climbs upward */
.fv-pill-fill {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  min-height:0;
  border-radius:999px;
  overflow:visible;
  opacity:.94;
  transition:height 1.1s cubic-bezier(0.22,1,0.36,1), background .45s ease;
  z-index:1;
}
.fv-pill-fill::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(0,0,0,.20), transparent 28%, transparent 72%, rgba(255,255,255,.18));
  pointer-events:none;
}
.fv-pill-wave {
  position:absolute;
  top:-8px;
  left:-10px;
  right:-10px;
  height:20px;
  border-radius:45% 55% 50% 50%;
  background:inherit;
  opacity:.82;
  animation:fv-pill-wave-top 2.8s ease-in-out infinite;
  pointer-events:none;
}
.fv-pill-wave::after {
  content:'';
  position:absolute;
  inset:3px -7px;
  border-radius:42% 58% 48% 52%;
  background:inherit;
  opacity:.46;
  animation:fv-pill-wave-top 3.5s ease-in-out infinite reverse;
}
@keyframes fv-pill-wave-top {
  0%,100% { transform:translateX(-4px) scaleY(.86) rotate(-1deg); }
  50% { transform:translateX(6px) scaleY(1.10) rotate(1deg); }
}

.fv-pill-glass {
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 30%, transparent 72%, rgba(0,0,0,.18)),
    radial-gradient(circle at 35% 18%, rgba(255,255,255,.30), transparent 28%);
}
.fv-pill-capsule::after {
  content:'';
  position:absolute;
  top:12px;
  left:11px;
  width:9px;
  height:44px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.05));
  z-index:5;
  pointer-events:none;
}

.fv-pill-bubbles { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.fv-pill-bubbles span {
  position:absolute;
  bottom:11px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.34;
  animation:fv-pill-bubble-rise 2.9s ease-in infinite;
}
.fv-pill-bubbles span:nth-child(1){ left:15px; animation-delay:.05s; }
.fv-pill-bubbles span:nth-child(2){ left:29px; width:4px; height:4px; animation-delay:.65s; animation-duration:3.4s; }
.fv-pill-bubbles span:nth-child(3){ left:22px; animation-delay:1.15s; animation-duration:3.1s; }
.fv-pill-bubbles span:nth-child(4){ left:34px; width:2px; height:2px; animation-delay:1.65s; animation-duration:2.6s; }
@keyframes fv-pill-bubble-rise {
  0%{ transform:translateY(10px) translateX(0); opacity:0; }
  18%{ opacity:.36; }
  82%{ opacity:.22; }
  100%{ transform:translateY(-78px) translateX(8px); opacity:0; }
}

.fv-pill-content {
  position:absolute;
  inset:10px 5px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  z-index:7;
  min-width:0;
  color:#fff;
  text-align:center;
  text-shadow:0 1px 5px rgba(0,0,0,.72);
}
.fv-pill-name {
  font-size:7.5px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:.01em;
  max-width:38px;
  max-height:24px;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.95;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.fv-pill-val {
  font-size:12px;
  line-height:1;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.fv-pill-val small {
  display:block;
  font-size:6px;
  font-weight:900;
  margin-top:2px;
  opacity:.80;
  letter-spacing:.08em;
}
.fv-pill-channel {
  margin-top:5px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(8,17,31,.82);
  border:1px solid rgba(255,255,255,.14);
  color:#f8fafc;
  font-size:9px;
  line-height:1;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(0,0,0,.24), 0 0 12px var(--fv-glow);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  white-space:nowrap;
}
[data-theme="light"] .fv-pill-channel {
  background:rgba(255,255,255,.92);
  border-color:rgba(15,23,42,.12);
  color:#0f172a;
  text-shadow:none;
  box-shadow:0 5px 14px rgba(15,23,42,.16), 0 0 12px var(--fv-glow);
}
.fv-pill-status-dot {
  position:absolute;
  left:50%;
  bottom:7px;
  width:7px;
  height:7px;
  border-radius:999px;
  transform:translateX(-50%);
  z-index:8;
  border:1px solid rgba(255,255,255,.48);
  animation:pulseDot 2s ease-in-out infinite;
}
[data-theme="light"] .fv-pill-content {
  color:#07111e;
  text-shadow:0 1px 0 rgba(255,255,255,.78), 0 0 7px rgba(255,255,255,.70);
}
[data-theme="light"] .fv-pill-fill + .fv-pill-bubbles + .fv-pill-glass + .fv-pill-content {
  color:#07111e;
}
.fv-zone-danger .fv-pill-capsule { animation:fv-danger-pulse 1.6s ease-in-out infinite; }
@keyframes fv-danger-pulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.05); }
}

/* ═══════════════════════════════════════════════════════════
   STATUS COLORS aliases (used inline)
═══════════════════════════════════════════════════════════ */
.status-normal  { border-color:var(--status-normal);  }
.status-warning { border-color:var(--status-warning); }
.status-alarm   { border-color:var(--status-alarm);   }
.status-danger  { border-color:var(--status-danger);  }
.status-offline { border-color:var(--status-offline); }

/* ═══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
  font-size:13px; color:var(--text-primary);
  box-shadow:0 8px 32px rgba(0,0,0,.4); min-width:260px;
  animation:toast-in .4s cubic-bezier(.34,1.56,.64,1); cursor:pointer;
}
[data-theme="light"] .toast { box-shadow:0 8px 32px rgba(0,0,0,.15); }
.toast.removing { opacity:0; transform:translateX(20px); transition:all .35s; }
@keyframes toast-in { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }
.toast-icon { font-size:18px; flex-shrink:0; }
.toast-title { font-size:13px; font-weight:700; margin-bottom:2px; }
.toast-msg   { font-size:11px; color:var(--text-muted); }
.toast.warning { border-color:rgba(245,158,11,.4); }
.toast.alarm   { border-color:rgba(249,115,22,.4); }
.toast.danger  { border-color:rgba(239,68,68,.5); }

/* Live dashboard floor-plan readability + dynamic area overview */
.area-overview-selected {
  display:grid !important;
  margin-bottom:14px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.fv-obj-label,
.fv-road-label {
  position:absolute; left:50%; transform:translateX(-50%); pointer-events:none;
  white-space:nowrap; font-size:9px; font-weight:800; padding:2px 7px; border-radius:999px;
  background:rgba(8,16,30,.88); color:#dcefff; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}
.fv-obj-label { bottom:-18px; }
.fv-road-label { transform:translate(-50%,-50%); z-index:4; color:#eafffb; border-color:rgba(0,224,176,.35); }
[data-theme="light"] .fv-obj-label,
[data-theme="light"] .fv-road-label {
  background:rgba(255,255,255,.94); color:#12364a; border-color:rgba(0,118,168,.22);
  box-shadow:0 4px 12px rgba(20,40,60,.12);
}
[data-theme="light"] .fv-road-label { color:#07506a; }

/* Fix pack 2 – live dashboard equipment changes instantly with theme */
.fv-custom-equip-img { filter:invert(1) brightness(1.18) contrast(1.12) hue-rotate(5deg); }
[data-theme="light"] .fv-custom-equip-img { filter:brightness(.82) contrast(1.22) drop-shadow(0 2px 4px rgba(0,0,0,.28)); }

/* Compact dashboard overview + responsive polish */
.area-overview-top {
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  width:100%;
}
.compact-area-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.4,0,.2,1), border-color .25s, box-shadow .25s;
}
.compact-area-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,#22c55e,#f59e0b,#ef4444);
  opacity:0;
  transition:opacity .3s;
}
.compact-area-card:hover {
  transform:translateY(-2px);
  border-color:var(--border-hover);
  box-shadow:var(--shadow-card);
}
.compact-area-card:hover::before { opacity:1; }
.compact-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
.compact-card-title { display:flex; align-items:center; gap:8px; min-width:0; }
.compact-card-icon {
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(56,189,248,.10);
  flex-shrink:0;
}
.compact-card-icon.effluent { background:rgba(34,197,94,.12); }
.compact-card-icon.pajusco { background:rgba(139,92,246,.12); }
.compact-card-icon.mixer { background:rgba(56,189,248,.12); }
.compact-card-icon.valero { background:rgba(249,115,22,.12); }
.compact-card-name {
  font-size:13px;
  font-weight:900;
  color:var(--text-primary);
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.compact-badge {
  padding:4px 9px;
  border-radius:7px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}
.compact-badge.badge-safe { background:rgba(34,197,94,.14); color:#4ade80; }
.compact-badge.badge-warn { background:rgba(245,158,11,.15); color:#fbbf24; }
.compact-badge.badge-danger { background:rgba(239,68,68,.15); color:#f87171; animation:pulse 2s infinite; }
.compact-metrics { display:flex; gap:8px; margin-bottom:14px; }
.compact-metric {
  flex:1;
  text-align:center;
  padding:10px 4px;
  border-radius:9px;
  background:var(--bg-input);
  border:1px solid var(--border);
}
.compact-metric-num { font-size:22px; font-weight:950; line-height:1; margin-bottom:4px; }
.compact-metric-num.ok { color:#4ade80; }
.compact-metric-num.warn { color:#fbbf24; }
.compact-metric-num.danger { color:#f87171; }
.compact-metric-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.compact-sensors-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 10px;
  background:var(--bg-input);
  border-radius:9px;
  border:1px solid var(--border);
  min-height:34px;
}
.compact-sensors-label {
  font-size:10px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.compact-live-pulse {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#22c55e;
  animation:live-blink 2s infinite;
}
.overview-dots { display:flex; gap:4px; flex-wrap:wrap; align-items:center; min-width:0; }
.overview-dot {
  width:8px;
  height:8px;
  border-radius:2px;
  transition:transform .2s, box-shadow .2s;
  display:inline-block;
}
.overview-dot:hover { transform:scale(1.55); z-index:10; }
.overview-dot.ok { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.45); }
.overview-dot.warn { background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.55); }
.overview-dot.danger { background:#ef4444; box-shadow:0 0 12px rgba(239,68,68,.65); animation:danger-glow 1.5s infinite; }
.overview-dot.offline { background:#64748b; box-shadow:0 0 5px rgba(100,116,139,.35); opacity:.75; }
.compact-empty { font-size:10px; color:var(--text-muted); }
.compact-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.compact-stat { display:flex; align-items:baseline; gap:4px; }
.compact-stat-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.compact-stat-value { font-size:13px; font-weight:900; color:var(--text-secondary); white-space:nowrap; }
.compact-stat-value.good { color:#4ade80; }
.compact-stat-value.mid { color:#fbbf24; }
.compact-stat-value.bad { color:#f87171; }
.compact-trend { display:flex; align-items:center; gap:3px; font-size:11px; font-weight:900; white-space:nowrap; }
.compact-trend.trend-flat { color:var(--text-muted); }
.compact-trend.trend-up { color:#f87171; }
[data-theme="light"] .compact-area-card,
[data-theme="light"] .compact-metric,
[data-theme="light"] .compact-sensors-row { background:#fff; border-color:rgba(0,0,0,.13); }
[data-theme="light"] .compact-metric,
[data-theme="light"] .compact-sensors-row { background:#f2f6fc; }
[data-theme="light"] .compact-card-name { color:#081525; }
[data-theme="light"] .compact-stat-label,
[data-theme="light"] .compact-metric-label,
[data-theme="light"] .compact-sensors-label { color:#445878; }

/* Move 0/25/50 capsule labels outside the glass tube */
.pill-capsule-wrapper { width:104px; padding-right:22px; }
.pill-scale-labels {
  position:absolute;
  top:0;
  left:76px;
  width:25px;
  height:150px;
  pointer-events:none;
  z-index:12;
}
.pill-scale-label {
  position:absolute;
  left:6px;
  transform:translateY(-50%);
  min-width:18px;
  text-align:left;
  font-size:9px;
  line-height:1;
  font-weight:950;
  color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.pill-scale-label:first-child { transform:translateY(0); }
.pill-scale-label:last-child { transform:translateY(-100%); }
[data-theme="light"] .pill-scale-label { color:#1e3050; text-shadow:0 1px 0 rgba(255,255,255,.75); }
.pill-tick { right:2px; }
.pill-tick-major { width:9px; }
.pill-tick-label { display:none; }

/* Better hover affordance for the full sensor info tooltip */
.pill-card:hover .pill-title { color:var(--accent); }
.pill-subtitle { max-width:165px; font-weight:800; }

/* Live dashboard responsiveness */
.main-content { width:100%; max-width:1680px; padding-inline:clamp(10px,2vw,22px); }
.pill-row { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.tabs-bar { gap:6px; scrollbar-width:thin; }
.stats-bar { overflow-x:auto; }
.fv-canvas-wrap { max-width:100%; overflow:auto; }
@media(max-width:900px){
  .header { flex-wrap:wrap; gap:8px; }
  .header-divider { display:none; }
  .stats-bar { grid-template-columns:repeat(3,minmax(100px,1fr)); display:grid; }
  .pill-row { grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
  .compact-footer { flex-wrap:wrap; }
}
@media(max-width:640px){
  .main-content { padding-inline:10px; }
  .tabs-bar { padding:8px 10px; }
  .tab-btn { padding:7px 10px; font-size:11px; }
  .stats-bar { grid-template-columns:repeat(2,minmax(96px,1fr)); }
  .area-overview-top { grid-template-columns:1fr; }
  .pill-row { grid-template-columns:1fr; }
  .pill-card { padding:14px; min-height:auto; }
  .pill-main-body { gap:10px; }
  .pill-reading-number { font-size:30px; }
  .pill-threshold-range { display:none; }
}

/* True animated vertical pill capsules for Floor Plan markers */
.fv-pill-chip {
  width:62px;
  min-height:138px;
  transform:translate(-50%, -10px);
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.32));
}
.fv-pill-glow-ring {
  position:absolute;
  top:-7px;
  left:50%;
  width:58px;
  height:120px;
  transform:translateX(-50%);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:opacity .45s ease, box-shadow .45s ease, transform .45s ease;
}
.fv-pill-glow-ring.active { opacity:1; }
.fv-pill-glow-ring.safe,
.fv-pill-glow-ring.warn,
.fv-pill-glow-ring.danger {
  box-shadow:
    0 0 26px var(--fv-glow),
    0 0 58px color-mix(in srgb, var(--fv-col) 24%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--fv-col) 30%, transparent);
}
.fv-pill-glow-ring.offline {
  box-shadow:0 0 18px rgba(75,96,128,.18), inset 0 0 14px rgba(75,96,128,.12);
}
.fv-zone-danger .fv-pill-glow-ring,
.fv-zone-warn .fv-pill-glow-ring {
  animation:fv-pill-glow-breathe 1.7s ease-in-out infinite;
}
@keyframes fv-pill-glow-breathe {
  0%,100% { transform:translateX(-50%) scale(.98); opacity:.82; }
  50% { transform:translateX(-50%) scale(1.08); opacity:1; }
}
.fv-pill-capsule {
  position:relative;
  z-index:1;
  width:50px;
  height:112px;
  overflow:hidden;
  border-radius:999px;
  border:1.7px solid var(--fv-col);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.025) 44%, rgba(0,0,0,.18)),
    rgba(8,17,31,.90);
  box-shadow:
    0 0 18px var(--fv-glow),
    0 0 38px color-mix(in srgb, var(--fv-col) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -15px 24px rgba(0,0,0,.30);
  transition:border-color .35s ease, box-shadow .45s ease, transform .35s ease;
}
[data-theme="light"] .fv-pill-capsule {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,247,255,.82) 44%, rgba(214,230,246,.74)),
    rgba(236,246,255,.96);
  box-shadow:
    0 0 18px var(--fv-glow),
    0 0 34px color-mix(in srgb, var(--fv-col) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -12px 20px rgba(15,23,42,.10);
}
.fv-pill-capsule::before {
  inset:3px;
  z-index:7;
  border-color:rgba(255,255,255,.17);
}
.fv-pill-capsule::after {
  top:11px;
  left:12px;
  width:9px;
  height:44px;
  z-index:8;
  background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.045));
}
.fv-pill-liquid {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  min-height:0;
  z-index:1;
  overflow:visible;
  border-radius:999px;
  opacity:.96;
  transition:height .82s cubic-bezier(.34,1.56,.64,1), background .45s ease, box-shadow .45s ease;
}
.fv-pill-liquid::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(0,0,0,.18), transparent 24%, transparent 76%, rgba(255,255,255,.18));
}
.fv-pill-wave-container {
  position:absolute;
  top:-15px;
  left:-9px;
  right:-9px;
  height:24px;
  overflow:hidden;
  z-index:3;
  pointer-events:none;
}
.fv-pill-wave-svg {
  position:absolute;
  inset:0;
  width:100%;
  height:24px;
  overflow:visible;
}
.fv-pill-bubble-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
}
.fv-pill-glass {
  z-index:6;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 28%, transparent 74%, rgba(0,0,0,.16)),
    radial-gradient(circle at 35% 17%, rgba(255,255,255,.30), transparent 30%);
}
.fv-pill-content { z-index:9; inset:9px 5px 8px; }
.fv-pill-val { font-size:12px; text-shadow:0 1px 6px rgba(0,0,0,.68); }
.fv-pill-val small { font-size:6px; letter-spacing:.08em; }
.fv-pill-status-dot {
  z-index:10;
  bottom:7px;
  box-shadow:0 0 12px var(--fv-glow-strong);
}
.fv-pill-channel {
  margin-top:6px;
  z-index:2;
  box-shadow:0 6px 16px rgba(0,0,0,.25), 0 0 14px var(--fv-glow);
}
.fv-zone-danger .fv-pill-capsule { animation:fv-danger-pulse 1.45s ease-in-out infinite; }
.fv-zone-warn .fv-pill-capsule { animation:fv-warn-pulse 2.1s ease-in-out infinite; }
@keyframes fv-warn-pulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.025); }
}
@media(max-width:720px){
  .fv-pill-chip { width:54px; min-height:124px; }
  .fv-pill-glow-ring { width:52px; height:110px; }
  .fv-pill-capsule { width:44px; height:100px; }
  .fv-pill-val { font-size:11px; }
  .fv-pill-channel { font-size:8px; padding:3px 6px; }
}

/* Corrected Floor Plan sensor markers: reuse the same true pill-capsule animation language as the main sensor cards */
.fv-pill-chip {
  width:72px;
  min-height:156px;
  transform:translate(-50%, -12px);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.36));
  pointer-events:none;
}
.fv-pill-chip .pill-glow-ring.fv-pill-glow-ring {
  position:absolute;
  top:-10px;
  left:50%;
  width:70px;
  height:150px;
  transform:translateX(-50%);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--fv-col) 20%, transparent) 0%, transparent 70%);
  transition:opacity .45s ease, box-shadow .45s ease, transform .45s ease;
}
.fv-pill-chip .pill-glow-ring.fv-pill-glow-ring.active {
  opacity:1;
  box-shadow:
    0 0 24px var(--fv-glow),
    0 0 54px var(--fv-glow),
    0 0 86px color-mix(in srgb, var(--fv-col) 18%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--fv-col) 26%, transparent);
}
.fv-zone-warn .pill-glow-ring.fv-pill-glow-ring,
.fv-zone-danger .pill-glow-ring.fv-pill-glow-ring {
  animation:fv-pill-glow-breathe 1.7s ease-in-out infinite;
}
.fv-pill-chip .pill-capsule.fv-pill-capsule.floor-mini-capsule {
  position:relative;
  z-index:1;
  width:58px;
  height:132px;
  border-radius:9999px;
  border:1.6px solid var(--fv-col);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.025) 42%, rgba(0,0,0,.18) 100%),
    rgba(8,17,31,.88);
  overflow:hidden;
  box-shadow:
    0 0 18px var(--fv-glow),
    0 0 38px color-mix(in srgb, var(--fv-col) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -16px 26px rgba(0,0,0,.30);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:border-color .35s ease, box-shadow .45s ease, transform .35s ease, background .35s ease;
}
[data-theme="light"] .fv-pill-chip .pill-capsule.fv-pill-capsule.floor-mini-capsule {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(238,247,255,.84) 42%, rgba(218,233,248,.76) 100%),
    rgba(236,246,255,.96);
  box-shadow:
    0 0 18px var(--fv-glow),
    0 0 34px color-mix(in srgb, var(--fv-col) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -13px 22px rgba(15,23,42,.10);
}
.fv-pill-chip .pill-capsule.fv-pill-capsule.floor-mini-capsule::before {
  content:'';
  position:absolute;
  inset:3px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.16);
  z-index:7;
  pointer-events:none;
}
[data-theme="light"] .fv-pill-chip .pill-capsule.fv-pill-capsule.floor-mini-capsule::before {
  border-color:rgba(15,23,42,.10);
}
.fv-pill-chip .pill-capsule.fv-pill-capsule.floor-mini-capsule::after {
  content:'';
  position:absolute;
  top:10px;
  left:14px;
  width:10px;
  height:48px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.045));
  z-index:8;
  pointer-events:none;
}
.fv-pill-chip .pill-liquid.fv-pill-liquid {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  min-height:0;
  z-index:1;
  overflow:visible;
  border-radius:0 0 999px 999px;
  opacity:.96;
  transition:height .82s cubic-bezier(.34,1.56,.64,1), background .45s ease, box-shadow .45s ease;
}
.fv-pill-chip .pill-liquid.fv-pill-liquid::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.18), transparent 24%, transparent 76%, rgba(255,255,255,.18));
}
.fv-pill-chip .pill-wave-container.fv-pill-wave-container {
  position:absolute;
  top:-17px;
  left:-10px;
  right:-10px;
  height:26px;
  overflow:hidden;
  z-index:4;
  pointer-events:none;
}
.fv-pill-chip .pill-wave-svg.fv-pill-wave-svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:26px;
  overflow:visible;
}
.fv-pill-chip .pill-bubble-canvas.fv-pill-bubble-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
}
.fv-pill-chip .pill-glass.fv-pill-glass {
  position:absolute;
  inset:0;
  border-radius:9999px;
  z-index:6;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 28%, transparent 74%, rgba(0,0,0,.16)),
    radial-gradient(circle at 35% 17%, rgba(255,255,255,.30), transparent 30%);
}
.fv-pill-chip .pill-capsule-value.fv-pill-content-mini {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  pointer-events:none;
  text-align:center;
}
.fv-pill-chip .pill-capsule-value.fv-pill-content-mini .fv-pill-val {
  display:block;
  font-size:13px;
  line-height:.96;
  font-weight:950;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 7px rgba(0,0,0,.72);
}
.fv-pill-chip .pill-capsule-value.fv-pill-content-mini .fv-pill-val.dark {
  color:var(--text-primary);
  text-shadow:0 1px 5px rgba(0,0,0,.32);
}
[data-theme="light"] .fv-pill-chip .pill-capsule-value.fv-pill-content-mini .fv-pill-val.dark {
  color:#07111e;
  text-shadow:0 1px 0 rgba(255,255,255,.75), 0 0 7px rgba(255,255,255,.58);
}
.fv-pill-chip .pill-capsule-value.fv-pill-content-mini .fv-pill-val small {
  display:block;
  font-size:6px;
  line-height:1;
  font-weight:900;
  margin-top:3px;
  opacity:.84;
  letter-spacing:.08em;
}
.fv-pill-chip .fv-pill-status-dot {
  z-index:11;
  bottom:8px;
  width:7px;
  height:7px;
  border:1px solid rgba(255,255,255,.52);
}
.fv-pill-chip .fv-pill-channel {
  margin-top:7px;
  z-index:2;
  box-shadow:0 6px 16px rgba(0,0,0,.25), 0 0 16px var(--fv-glow);
}
@media(max-width:720px){
  .fv-pill-chip { width:60px; min-height:136px; }
  .fv-pill-chip .pill-glow-ring.fv-pill-glow-ring { width:60px; height:130px; }
  .fv-pill-chip .pill-capsule.fv-pill-capsule.floor-mini-capsule { width:50px; height:116px; }
  .fv-pill-chip .pill-capsule-value.fv-pill-content-mini .fv-pill-val { font-size:12px; }
}

/* Floor Plan capsules adapted from uploaded h2s_single_pill.html design */
.fv-pill-chip.fv-single-pill-wrapper {
  position:absolute;
  width:56px;
  min-height:158px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  transform:translate(-50%, -8px);
  filter:none;
  pointer-events:auto;
  z-index:32;
  cursor:default;
}
.fv-single-glow-ring {
  position:absolute;
  top:-5px;
  left:50%;
  width:66px;
  height:142px;
  transform:translateX(-50%);
  border-radius:33px;
  border:1.25px solid var(--fv-col, #22C55E);
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:opacity .4s ease, box-shadow .4s ease, transform .4s ease;
}
.fv-single-glow-ring.active {
  opacity:.32;
  box-shadow:
    0 0 30px var(--fv-glow, rgba(34,197,94,.18)),
    0 0 72px color-mix(in srgb, var(--fv-col, #22C55E) 26%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--fv-col, #22C55E) 12%, transparent);
}
.fv-zone-warn .fv-single-glow-ring.active { opacity:.42; }
.fv-zone-alarm .fv-single-glow-ring.active { opacity:.50; box-shadow:0 0 36px var(--fv-glow, rgba(249,115,22,.34)), 0 0 82px color-mix(in srgb, var(--fv-col, #F97316) 30%, transparent), inset 0 0 32px color-mix(in srgb, var(--fv-col, #F97316) 14%, transparent); }
.fv-zone-danger .fv-single-glow-ring.active {
  opacity:.58;
  animation:fv-single-pill-pulse 1.5s ease-in-out infinite;
}
@keyframes fv-single-pill-pulse {
  0%,100% { opacity:.34; box-shadow:0 0 25px color-mix(in srgb, var(--fv-col,#EF4444) 22%, transparent), inset 0 0 22px color-mix(in srgb, var(--fv-col,#EF4444) 8%, transparent); }
  50% { opacity:.72; box-shadow:0 0 52px color-mix(in srgb, var(--fv-col,#EF4444) 50%, transparent), 0 0 96px color-mix(in srgb, var(--fv-col,#EF4444) 25%, transparent), inset 0 0 35px color-mix(in srgb, var(--fv-col,#EF4444) 18%, transparent); }
}
.fv-single-pill {
  position:relative;
  z-index:1;
  width:56px;
  height:132px;
  border-radius:28px;
  background:#151A25;
  border:1.5px solid #1E293B;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding-bottom:10px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 18px 36px rgba(0,0,0,.38),
    0 0 18px color-mix(in srgb, var(--fv-col,#22C55E) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -18px 26px rgba(0,0,0,.26);
}
[data-theme="light"] .fv-single-pill {
  background:linear-gradient(180deg,#f8fbff 0%,#e6eef8 100%);
  border-color:#c8d6e6;
  box-shadow:
    0 14px 28px rgba(15,23,42,.16),
    0 0 18px color-mix(in srgb, var(--fv-col,#22C55E) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -14px 22px rgba(15,23,42,.08);
}
.fv-single-pill.safe { border-color:color-mix(in srgb, var(--fv-col,#22C55E) 48%, #1E293B); }
.fv-single-pill.warn { border-color:color-mix(in srgb, var(--fv-col,#F59E0B) 58%, #1E293B); }
.fv-single-pill.alarm { border-color:color-mix(in srgb, var(--fv-col,#F97316) 64%, #1E293B); animation:fv-single-pill-body-alarm 1.8s ease-in-out infinite; }
.fv-single-pill.danger { border-color:color-mix(in srgb, var(--fv-col,#EF4444) 68%, #1E293B); animation:fv-single-pill-body-danger 1.5s ease-in-out infinite; }
@keyframes fv-single-pill-body-alarm {
  0%,100% { box-shadow:0 18px 36px rgba(0,0,0,.38),0 0 18px color-mix(in srgb, var(--fv-col,#F97316) 18%, transparent),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -18px 26px rgba(0,0,0,.26); }
  50% { box-shadow:0 18px 36px rgba(0,0,0,.38),0 0 30px color-mix(in srgb, var(--fv-col,#F97316) 40%, transparent),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -18px 26px rgba(0,0,0,.26); }
}
@keyframes fv-single-pill-body-danger {
  0%,100% { box-shadow:0 18px 36px rgba(0,0,0,.38),0 0 18px color-mix(in srgb, var(--fv-col,#EF4444) 20%, transparent),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -18px 26px rgba(0,0,0,.26); }
  50% { box-shadow:0 18px 36px rgba(0,0,0,.38),0 0 34px color-mix(in srgb, var(--fv-col,#EF4444) 46%, transparent),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -18px 26px rgba(0,0,0,.26); }
}
.fv-single-glass {
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:38px;
  height:66px;
  border-radius:19px;
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 40%, transparent 100%);
  pointer-events:none;
  z-index:5;
}
[data-theme="light"] .fv-single-glass { background:linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.16) 44%, transparent 100%); }
.fv-single-shine {
  position:absolute;
  top:11px;
  left:14px;
  width:7px;
  height:35px;
  border-radius:3.5px;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 100%);
  pointer-events:none;
  z-index:6;
}
[data-theme="light"] .fv-single-shine { background:linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.22) 100%); }
.fv-single-fill {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:0%;
  border-radius:0 0 27px 27px;
  transition:height .8s cubic-bezier(.4,0,.2,1), background .4s ease, box-shadow .4s ease;
  overflow:hidden;
  z-index:1;
  background:var(--fv-col,#22C55E);
}
.fv-single-fill::after {
  content:'';
  position:absolute;
  top:0;
  left:-50%;
  right:-50%;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  animation:fv-single-wave 2.2s ease-in-out infinite;
}
@keyframes fv-single-wave {
  0%,100% { transform:translateX(-12%) scaleY(.7); }
  50% { transform:translateX(12%) scaleY(1.3); }
}
.fv-single-fill.alarm { animation:fv-single-fill-alarm-glow 1.8s ease-in-out infinite; }
.fv-single-fill.danger { animation:fv-single-fill-glow 1.5s ease-in-out infinite; }
@keyframes fv-single-fill-alarm-glow {
  0%,100% { box-shadow:0 0 24px color-mix(in srgb, var(--fv-col,#F97316) 24%, transparent); }
  50% { box-shadow:0 0 42px color-mix(in srgb, var(--fv-col,#F97316) 48%, transparent); }
}
@keyframes fv-single-fill-glow {
  0%,100% { box-shadow:0 0 25px color-mix(in srgb, var(--fv-col,#EF4444) 28%, transparent); }
  50% { box-shadow:0 0 50px color-mix(in srgb, var(--fv-col,#EF4444) 58%, transparent); }
}
.fv-single-value {
  position:relative;
  z-index:7;
  text-align:center;
  margin-bottom:2px;
  color:#F8FAFC;
  text-shadow:0 2px 12px rgba(0,0,0,.62);
}
[data-theme="light"] .fv-single-value { color:#0f172a; text-shadow:0 1px 0 rgba(255,255,255,.74), 0 2px 10px rgba(255,255,255,.35); }
.fv-single-number {
  font-size:20px;
  font-weight:800;
  line-height:1;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}
.fv-single-unit {
  font-size:8px;
  font-weight:600;
  opacity:.7;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.fv-single-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  margin-top:6px;
  position:relative;
  z-index:7;
}
.fv-single-dot.alarm { animation:fv-single-dot-blink 1.25s ease-in-out infinite; }
.fv-single-dot.danger { animation:fv-single-dot-blink 1s ease-in-out infinite; }
@keyframes fv-single-dot-blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.fv-single-scale {
  position:absolute;
  right:7px;
  top:18px;
  bottom:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  z-index:4;
  pointer-events:none;
}
.fv-scale-mark { width:5px; height:1px; background:rgba(255,255,255,.12); }
.fv-scale-mark.major { width:8px; background:rgba(255,255,255,.22); }
[data-theme="light"] .fv-scale-mark { background:rgba(15,23,42,.16); }
[data-theme="light"] .fv-scale-mark.major { background:rgba(15,23,42,.30); }
.fv-pill-chip.fv-single-pill-wrapper .fv-pill-channel {
  margin-top:0;
  background:#0F141E;
  border:1px solid #1E293B;
  border-radius:8px;
  padding:5px 10px;
  font-size:10px;
  font-weight:700;
  color:#94A3B8;
  letter-spacing:.5px;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.26), 0 0 16px color-mix(in srgb, var(--fv-col,#22C55E) 18%, transparent);
  transition:all .3s ease;
}
[data-theme="light"] .fv-pill-chip.fv-single-pill-wrapper .fv-pill-channel {
  background:rgba(255,255,255,.90);
  border-color:rgba(15,23,42,.14);
  color:#334155;
  box-shadow:0 8px 16px rgba(15,23,42,.12), 0 0 16px color-mix(in srgb, var(--fv-col,#22C55E) 24%, transparent);
}
.fv-pill-chip.fv-single-pill-wrapper:hover .fv-single-pill { transform:scale(1.05); }
.fv-pill-chip.fv-single-pill-wrapper:hover .fv-single-fill::after { animation-duration:1.1s; }
.fv-pill-chip.fv-single-pill-wrapper:hover .fv-pill-channel { border-color:#334155; color:#E2E8F0; }
[data-theme="light"] .fv-pill-chip.fv-single-pill-wrapper:hover .fv-pill-channel { color:#0f172a; border-color:rgba(15,23,42,.28); }
.fv-single-alert {
  min-height:14px;
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:3px 8px;
  border-radius:6px;
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.fv-single-alert.show { opacity:1; }
.fv-single-alert.danger { background:rgba(239,68,68,.15); color:#F87171; }
.fv-single-alert.alarm { background:rgba(249,115,22,.15); color:#FDBA74; }
.fv-single-alert.warn { background:rgba(245,158,11,.15); color:#FBBF24; }
@media(max-width:720px){
  .fv-pill-chip.fv-single-pill-wrapper { width:48px; min-height:138px; gap:4px; transform:translate(-50%, -6px); }
  .fv-single-glow-ring { width:56px; height:120px; border-radius:28px; }
  .fv-single-pill { width:48px; height:112px; border-radius:24px; padding-bottom:9px; }
  .fv-single-glass { top:7px; width:32px; height:56px; border-radius:16px; }
  .fv-single-shine { top:10px; left:12px; width:6px; height:30px; }
  .fv-single-number { font-size:17px; letter-spacing:-.8px; }
  .fv-single-unit { font-size:7px; }
  .fv-single-dot { width:7px; height:7px; margin-top:5px; }
  .fv-pill-chip.fv-single-pill-wrapper .fv-pill-channel { padding:4px 8px; font-size:9px; }
  .fv-single-scale { top:16px; bottom:30px; right:6px; }
}

/* Per-floor Floor Designer capsule size is reused by Live Dashboard floor capsules */
.fv-pill-chip.fv-single-pill-wrapper {
  transform:translate(-50%, -8px) scale(var(--fv-pill-scale, 1));
  transform-origin:top center;
}
@media(max-width:720px){
  .fv-pill-chip.fv-single-pill-wrapper {
    transform:translate(-50%, -6px) scale(var(--fv-pill-scale, 1));
  }
}

/* Crisp live floor-plan pill sizing without transform blur.
   The capsule is resized using real dimensions so small sizes keep clean borders. */
.fv-pill-chip.fv-single-pill-wrapper,
.fd-floor-pill-shell {
  --fvp-scale: var(--fv-pill-scale, 1);
  --fvp-w: calc(56px * var(--fvp-scale));
  --fvp-h: calc(132px * var(--fvp-scale));
  --fvp-shell-h: calc(158px * var(--fvp-scale));
  --fvp-glow-w: calc(66px * var(--fvp-scale));
  --fvp-glow-h: calc(142px * var(--fvp-scale));
  --fvp-glow-r: calc(33px * var(--fvp-scale));
  --fvp-radius: calc(28px * var(--fvp-scale));
  width: var(--fvp-w) !important;
  min-height: var(--fvp-shell-h) !important;
  gap: max(3px, calc(5px * var(--fvp-scale))) !important;
  overflow: visible;
}
.fv-pill-chip.fv-single-pill-wrapper {
  transform: translate(-50%, -8px) !important;
  transform-origin: top center;
}
.fv-single-pill-wrapper .fv-single-glow-ring,
.fd-floor-pill-shell .fv-single-glow-ring {
  top: calc(-5px * var(--fvp-scale));
  width: var(--fvp-glow-w);
  height: var(--fvp-glow-h);
  border-radius: var(--fvp-glow-r);
  border-width: max(1.15px, calc(1.25px * var(--fvp-scale)));
}
.fv-single-pill-wrapper .fv-single-pill,
.fd-floor-pill-shell .fv-single-pill {
  width: var(--fvp-w);
  height: var(--fvp-h);
  border-radius: var(--fvp-radius);
  padding-bottom: max(7px, calc(10px * var(--fvp-scale)));
  border-width: max(1.35px, calc(1.5px * var(--fvp-scale)));
}
.fv-single-pill-wrapper .fv-single-glass,
.fd-floor-pill-shell .fv-single-glass {
  top: calc(8px * var(--fvp-scale));
  width: calc(38px * var(--fvp-scale));
  height: calc(66px * var(--fvp-scale));
  border-radius: calc(19px * var(--fvp-scale));
}
.fv-single-pill-wrapper .fv-single-shine,
.fd-floor-pill-shell .fv-single-shine {
  top: calc(11px * var(--fvp-scale));
  left: calc(14px * var(--fvp-scale));
  width: max(5px, calc(7px * var(--fvp-scale)));
  height: calc(35px * var(--fvp-scale));
  border-radius: max(2.5px, calc(3.5px * var(--fvp-scale)));
}
.fv-single-pill-wrapper .fv-single-fill,
.fd-floor-pill-shell .fv-single-fill {
  border-radius: 0 0 calc(27px * var(--fvp-scale)) calc(27px * var(--fvp-scale));
}
.fv-single-pill-wrapper .fv-single-fill::after,
.fd-floor-pill-shell .fv-single-fill::after {
  height: max(4px, calc(6px * var(--fvp-scale)));
}
.fv-single-pill-wrapper .fv-single-number,
.fd-floor-pill-shell .fv-single-number {
  font-size: max(14px, calc(20px * var(--fvp-scale)));
  letter-spacing: calc(-1px * var(--fvp-scale));
}
.fv-single-pill-wrapper .fv-single-unit,
.fd-floor-pill-shell .fv-single-unit {
  font-size: max(6px, calc(8px * var(--fvp-scale)));
  letter-spacing: calc(1.1px * var(--fvp-scale));
}
.fv-single-pill-wrapper .fv-single-dot,
.fd-floor-pill-shell .fv-single-dot {
  width: max(6px, calc(8px * var(--fvp-scale)));
  height: max(6px, calc(8px * var(--fvp-scale)));
  margin-top: max(4px, calc(6px * var(--fvp-scale)));
}
.fv-single-pill-wrapper .fv-single-scale,
.fd-floor-pill-shell .fv-single-scale {
  right: max(5px, calc(7px * var(--fvp-scale)));
  top: calc(18px * var(--fvp-scale));
  bottom: calc(34px * var(--fvp-scale));
}
.fv-single-pill-wrapper .fv-scale-mark,
.fd-floor-pill-shell .fv-scale-mark {
  width: max(4px, calc(5px * var(--fvp-scale)));
  height: max(1px, calc(1px * var(--fvp-scale)));
}
.fv-single-pill-wrapper .fv-scale-mark.major,
.fd-floor-pill-shell .fv-scale-mark.major {
  width: max(7px, calc(8px * var(--fvp-scale)));
}
.fv-single-pill-wrapper .fv-pill-channel,
.fd-floor-pill-shell .fv-pill-channel,
.fv-pill-chip.fv-single-pill-wrapper .fv-pill-channel {
  background:#0F141E;
  border:1px solid #1E293B;
  border-radius:max(6px, calc(8px * var(--fvp-scale)));
  padding:max(3px, calc(5px * var(--fvp-scale))) max(7px, calc(10px * var(--fvp-scale)));
  font-size:max(8px, calc(10px * var(--fvp-scale)));
  font-weight:700;
  color:#94A3B8;
  letter-spacing:.5px;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.26), 0 0 16px color-mix(in srgb, var(--fv-col,#22C55E) 18%, transparent);
  transition:all .3s ease;
}
[data-theme="light"] .fv-single-pill-wrapper .fv-pill-channel,
[data-theme="light"] .fd-floor-pill-shell .fv-pill-channel,
[data-theme="light"] .fv-pill-chip.fv-single-pill-wrapper .fv-pill-channel {
  background:rgba(255,255,255,.90);
  border-color:rgba(15,23,42,.14);
  color:#334155;
  box-shadow:0 8px 16px rgba(15,23,42,.12), 0 0 16px color-mix(in srgb, var(--fv-col,#22C55E) 24%, transparent);
}
.fv-single-pill-wrapper:hover .fv-single-pill { transform: scale(1.04); }
.fv-single-pill-wrapper:hover .fv-single-fill::after { animation-duration: 1.1s; }
@media(max-width:720px){
  .fv-pill-chip.fv-single-pill-wrapper { transform:translate(-50%, -6px) !important; }
}

/* Advanced live dashboard */
.danger-focus-panel{position:sticky;top:0;z-index:80;margin:0;padding:16px 22px;background:linear-gradient(90deg,rgba(127,29,29,.98),rgba(239,68,68,.92));color:white;box-shadow:0 16px 50px rgba(239,68,68,.35);display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer}.danger-focus-panel.hidden{display:none}.df-left{display:flex;align-items:center;gap:14px}.df-icon{font-size:32px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));animation:dangerPulse 1s infinite}.df-left strong{display:block;font-size:22px;letter-spacing:.02em}.df-left span:last-child{display:block;font-size:14px;opacity:.95}.df-action{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.14);color:white;border-radius:999px;padding:10px 16px;font-weight:800}.danger-focus-active .header{box-shadow:0 0 0 2px rgba(239,68,68,.25),0 20px 50px rgba(239,68,68,.18)}@keyframes dangerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}.floor-heatmap{position:absolute;inset:10px;border-radius:26px;pointer-events:none;z-index:0;opacity:.38;filter:blur(.2px)}.floor-heatmap-safe{background:radial-gradient(circle at 50% 45%,rgba(16,185,129,.18),transparent 60%)}.floor-heatmap-warning{background:radial-gradient(circle at 50% 45%,rgba(245,158,11,.28),transparent 62%)}.floor-heatmap-alarm{background:radial-gradient(circle at 50% 45%,rgba(249,115,22,.36),transparent 64%)}.floor-heatmap-danger{background:radial-gradient(circle at 50% 45%,rgba(239,68,68,.48),rgba(239,68,68,.10) 58%,transparent 76%);animation:heatPulse 1.4s infinite}.fv-shell,.fv-canvas-inner{position:relative}.fv-content{position:relative;z-index:1}@keyframes heatPulse{0%,100%{opacity:.28}50%{opacity:.62}}.pill-card{cursor:pointer}.pill-card:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(0,0,0,.22)}body.tv-mode{overflow:hidden}body.tv-mode .header{padding:14px 24px}body.tv-mode .tabs-bar{padding:10px 24px}body.tv-mode .main-content{max-width:none;padding:14px 24px}body.tv-mode .stats-bar{grid-template-columns:repeat(6,1fr);padding:10px 24px}body.tv-mode .stat-num{font-size:30px}body.tv-mode .pill-title{font-size:15px}body.tv-mode .pill-reading-number{font-size:40px}body.tv-mode .pill-card{min-height:350px}body.tv-mode .area-overview-top{grid-template-columns:repeat(4,1fr)}@media(max-width:800px){.danger-focus-panel{align-items:flex-start;flex-direction:column}.df-left strong{font-size:18px}}

/* ── Reading freshness indicator ─────────────────────────────────────────── */
.reading-age {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  padding: 2px 7px;
  border-radius: 999px;
  transition: background .3s, color .3s;
  white-space: nowrap;
}
.reading-age.stale {
  background: rgba(245,158,11,.12);
  color: #f59e0b;
}
.reading-age.very-stale {
  background: rgba(239,68,68,.12);
  color: #ef4444;
}