:root {
  --hs-bg: #f5f4fc;
  --hs-card: #ffffff;
  --hs-border: #e8e7f0;
  --hs-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --hs-text: #1a1830;
  --hs-muted: #8b89a0;
  --hs-dim: #b0aec4;
  --hs-nav: #ffffff;
  --hs-nav-border: #e8e7f0;
  --hs-nav-hover: rgba(0,0,0,0.03);
  --hs-s2: #f8f7ff;
  --hs-chip: #f3f2fa;
  --hs-chip-border: #e2e0f0;
  --hs-chip-hover: #ebe9f7;
  --hs-hover: rgba(0,0,0,0.03);
  --hs-alert-bg: #fff5f5;
  --hs-alert-border: #fecaca;
  --hs-alert-icon: #fee2e2;
  --hs-alert-chip: #fff7ed;
  --hs-alert-chip-border: #fed7aa;
  --hs-floor: #f0eff8;
  --hs-floor-filter: none;
  --hs-warn-bg: #fffbeb;
  --hs-warn-border: #fde68a;
  --hs-warn-text: #92400e;
  --hs-fb-cta: rgba(168,85,247,0.04);
  --hs-logo-filter: none;
  --hs-chart-text: #c0bed4;
  --hs-chart-grid: rgba(0,0,0,0.07);
}

.dark {
  --hs-bg: #0c0b14;
  --hs-card: #161324;
  --hs-border: rgba(255,255,255,0.07);
  --hs-shadow: none;
  --hs-text: #e8e7f2;
  --hs-muted: #7c7a8c;
  --hs-dim: #55536a;
  --hs-nav: #0c0b14;
  --hs-nav-border: rgba(255,255,255,0.06);
  --hs-nav-hover: rgba(255,255,255,0.05);
  --hs-s2: #0f0d1a;
  --hs-chip: rgba(255,255,255,0.06);
  --hs-chip-border: rgba(255,255,255,0.09);
  --hs-chip-hover: rgba(255,255,255,0.1);
  --hs-hover: rgba(255,255,255,0.04);
  --hs-alert-bg: rgba(239,68,68,0.08);
  --hs-alert-border: rgba(239,68,68,0.2);
  --hs-alert-icon: rgba(239,68,68,0.15);
  --hs-alert-chip: rgba(249,115,22,0.1);
  --hs-alert-chip-border: rgba(249,115,22,0.2);
  --hs-floor: #060509;
  --hs-floor-filter: invert(0.88) opacity(0.75);
  --hs-warn-bg: rgba(245,158,11,0.06);
  --hs-warn-border: rgba(245,158,11,0.15);
  --hs-warn-text: #7c6a3a;
  --hs-fb-cta: rgba(168,85,247,0.07);
  --hs-logo-filter: invert(1) brightness(2);
  --hs-chart-text: #55536a;
  --hs-chart-grid: rgba(255,255,255,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; }
body { background: var(--hs-bg); color: var(--hs-text); transition: background 0.2s, color 0.2s; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(249,115,22,0.3); border-radius: 2px; }

.mi { font-family: 'Material Icons Round'; font-style: normal; line-height: 1; display: inline-block; vertical-align: middle; }

@keyframes pulse-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50% { opacity: 0.8; box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.pulse-live { animation: pulse-live 2s infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* Toggle switch */
.hs-toggle { width: 42px; height: 23px; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.hs-toggle .hs-toggle-dot { position: absolute; width: 19px; height: 19px; border-radius: 50%; background: white; top: 2px; left: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: left 0.2s; }
.hs-toggle.active { background: #22c55e; }
.hs-toggle.active .hs-toggle-dot { left: 21px; }
.hs-toggle:not(.active) { background: #d1d5db; }
.dark .hs-toggle:not(.active) { background: #2a2838; }

/* Full-height stretch */
.hs-page-stretch { min-height: calc(100vh - 56px - 40px); display: flex; flex-direction: column; }
.hs-page-stretch > .hs-stretch-fill { flex: 1; min-height: 0; }

/* Device card hover */
.hs-dev-card { transition: transform 0.2s, box-shadow 0.2s; }
.hs-dev-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(249,115,22,0.15); }

/* Alert row hover */
.hs-alert-row { border-left: 3px solid rgba(249,115,22,0.4); transition: border-color 0.15s; }
.hs-alert-row:hover { border-left-color: #f97316; }

/* Responsive */
@media (max-width: 1023px) {
  .hs-top-nav { display: none !important; }
  .hs-mobile-spacer { display: block !important; flex: 1 !important; }
  .hs-bot-nav { display: flex !important; }
  .hs-dash-grid { grid-template-columns: 1fr !important; }
  .hs-dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hs-detail-grid { grid-template-columns: 1fr !important; }
  .hs-alert-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
  .hs-alert-grid > div { padding: 8px 10px !important; }
  .hs-alert-grid .w-16 { width: 48px !important; height: 48px !important; }
  .hs-header-bar { padding: 0 12px !important; }
  .hs-main-pad { padding: 16px 12px 76px !important; }
  .hs-page-title { font-size: 22px !important; }
  .hs-hide-mobile { display: none !important; }
  .hs-devices-layout { flex-direction: column !important; align-items: stretch !important; }
  .hs-dev-list { width: 100% !important; flex-direction: row !important; overflow-x: auto !important; padding-bottom: 8px !important; }
  .hs-dev-list-item { min-width: 160px !important; }
  .hs-dev-panel-split { flex-direction: column !important; }
  .hs-dev-panel-split > .flex-1 { min-height: 220px !important; }
  .hs-dev-summary { width: 100% !important; border-left: none !important; border-top: 1px solid var(--hs-border) !important; flex-direction: row !important; }
  .hs-summary-label { display: none !important; }
  .hs-detail-full { grid-column: auto !important; }
  .hs-header-icons { gap: 4px !important; }
  .hs-fp-wrapper { overflow-x: auto !important; }
  .hs-page-stretch { min-height: auto !important; }
}

.hs-heatmap-img,
.hs-heatmap-thumb {
  transition: background-image 0.6s ease-in-out;
}

/* Floor plan layout — desktop two-column, mobile stacked */
.hs-fp-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hs-fp-plan-col { flex: 1; min-width: 0; }
.hs-fp-devices-col { margin-top: 16px; }

@media (min-width: 1024px) {
  .hs-fp-layout { flex-direction: row; gap: 20px; max-height: calc(100vh - 180px); }
  .hs-fp-layout .hs-fp-plan-col { flex: 1; min-width: 0; overflow: auto; }
  .hs-fp-layout .hs-fp-devices-col { flex: 1; min-width: 0; margin-top: 0; overflow-y: auto; max-height: 100%; }
  .hs-fp-empty-col { flex: 1; min-width: 0; }
}

/* Floor plan editor */
.hs-fp-wrapper { touch-action: none; }
.hs-heatmap-wrapper { cursor: move; touch-action: none; }
.hs-heatmap-wrapper:hover { border-color: #f97316 !important; }
.hs-rotate-edge { opacity: 0; transition: opacity 0.15s; }
.hs-heatmap-wrapper:hover .hs-rotate-edge { opacity: 1; background: rgba(249,115,22,0.25); }
.hs-rotate-edge:hover { background: rgba(249,115,22,0.5) !important; }

@media (max-width: 389px) {
  .hs-dev-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .hs-main-pad { padding: 16px 10px 76px !important; }
  .hs-header-bar { padding: 0 10px !important; }
  .hs-bot-nav .hs-nav-lbl { font-size: 8px !important; letter-spacing: 0 !important; }
}