/* =========================================================================
   BMS Online Dashboard - Realistic 3D Hardware Simulation & index.json + Android
   4xN (PC) / 2xN (Mobile) Grid with Interactive 3D Showcase & Live Table Modal
   ========================================================================= */

/* --- Base Typography --- */
.bms-family-list,
.bms-card-grid,
.bms-group-card,
.bms-toolbar-card,
.bms-fw-modal-overlay,
.cell-modal-overlay {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

.bms-family-list *,
.bms-card-grid *,
.bms-group-card *,
.bms-toolbar-card *,
.bms-fw-modal-overlay *,
.cell-modal-overlay * {
  box-sizing: border-box;
}

/* =========================================================================
   1. TOOLBAR
   ========================================================================= */
.bms-toolbar-card {
  background: var(--mh-card-bg, #ffffff);
  border: 1px solid var(--mh-card-border, #e2e8f0);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bms-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 420px;
  flex-wrap: wrap;
}

.bms-search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  min-width: 180px;
}

.bms-search-box svg {
  position: absolute;
  left: 10px;
  color: var(--mh-text-faint, #94a3b8);
  pointer-events: none;
}

.bms-search-box input {
  width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 2.15rem;
  font-size: 0.84rem;
  font-family: inherit;
  border: 1px solid var(--mh-card-border, #e2e8f0);
  border-radius: 8px;
  background: var(--mh-card-surface, #f8fafc);
  color: var(--mh-text-main, #0f172a);
  outline: none;
  transition: all 0.18s ease;
}

.bms-search-box input:focus {
  border-color: #0d9488;
  background: var(--mh-card-bg, #ffffff);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.bms-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.35rem 0.65rem;
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--mh-card-surface, #f8fafc);
  border: 1px solid var(--mh-card-border, #e2e8f0);
  color: var(--mh-text-muted, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  text-decoration: none !important;
}

.filter-btn:hover {
  border-color: #cbd5e1;
  color: var(--mh-text-main, #0f172a);
  background: #f1f5f9;
}

.filter-btn.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

.bms-toolbar-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.bms-toolbar-hint {
  font-size: 0.78rem;
  color: var(--mh-text-muted, #64748b);
}

/* =========================================================================
   2. GRID CARDS: 4 x N (PC) / 2 x N (MOBILE)
   ========================================================================= */
.bms-family-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .bms-family-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .bms-family-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .bms-family-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.bms-fw-card {
  background: var(--mh-card-bg, #ffffff);
  border: 1px solid var(--mh-card-border, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), 0 8px 20px rgba(0, 0, 0, 0.02);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}

.bms-fw-card:hover {
  transform: translateY(-4px);
  border-color: #0d9488;
  box-shadow: 0 10px 30px rgba(13, 148, 136, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* =========================================================================
   3. 3D HARDWARE DEVICE SIMULATION RENDERING
   ========================================================================= */
.bms-fw-3d-preview {
  background: transparent;
  padding: 1.1rem 0.85rem 0.9rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--mh-card-border, #e2e8f0);
  min-height: 155px;
  overflow: hidden;
}

.bms-fw-chip-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #38bdf8;
  font-family: var(--mh-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

.bms-fw-chip-pill.android-pill {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(6, 78, 59, 0.6);
}

.bms-fw-badge.android-badge {
  background: #065f46;
  color: #a7f3d0;
  border: 1px solid #10b981;
}

/* 3D Perspective Stage */
.sim-3d-stage {
  perspective: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sim-3d-device {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-3d-shadow {
  position: absolute;
  bottom: -10px;
  left: 5%;
  width: 90%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(3px);
  pointer-events: none;
}

/* Photorealistic transparent artwork: one BMS plus its ESP32 board. */
.fw-photo-stage {
  min-height: 132px;
  isolation: isolate;
  position: relative;
}

.fw-photo-device {
  width: min(100%, 210px);
  height: 132px;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .5));
  transform: translateY(2px) scale(1.04);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), filter .32s ease;
}

.fw-product-pair {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.25rem;
}

.fw-product-item {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}

.fw-product-item .fw-photo-device {
  width: 100%;
  height: 100px;
  transform: none;
}

.fw-product-item figcaption {
  max-width: 100%;
  color: #cbd5e1;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fw-product-plus {
  color: #67e8f9;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 0 14px rgba(103, 232, 249, .65);
}

.bms-fw-card:hover .fw-photo-device {
  transform: translateY(-2px) scale(1.09);
  filter: drop-shadow(0 20px 17px rgba(0, 0, 0, .58));
}

.bms-fw-card:hover .fw-product-item .fw-photo-device {
  transform: translateY(-2px) scale(1.04);
}

/* At 0 W only the content becomes neutral; the card background stays themed. */
.bms-fw-card.is-zero-power .fw-photo-device,
.bms-fw-card.is-zero-power:hover .fw-photo-device {
  filter: grayscale(1) saturate(0) opacity(.56) drop-shadow(0 13px 12px rgba(71, 85, 105, .28));
}

.bms-fw-card.is-zero-power .bms-fw-card-body,
.bms-fw-card.is-zero-power .bms-fw-main-title,
.bms-fw-card.is-zero-power .bms-fw-board-tag,
.bms-fw-card.is-zero-power .bms-fw-count-chip,
.bms-fw-card.is-zero-power .bms-fw-action-link,
.bms-fw-card.is-zero-power .bms-fw-power-val,
.bms-fw-card.is-zero-power .bms-fw-badge,
.bms-fw-card.is-zero-power .bms-fw-chip-pill,
.bms-fw-card.is-zero-power figcaption,
.bms-fw-card.is-zero-power svg {
  color: var(--mh-text-faint, #94a3b8) !important;
  border-color: color-mix(in srgb, var(--mh-text-faint, #94a3b8) 38%, transparent) !important;
}

.bms-fw-card.is-zero-power .bms-fw-power-val,
.bms-fw-card.is-zero-power .bms-fw-badge,
.bms-fw-card.is-zero-power .bms-fw-chip-pill {
  background: color-mix(in srgb, var(--mh-text-faint, #94a3b8) 10%, transparent) !important;
}

.bms-fw-card.is-zero-power .fw-product-plus {
  color: var(--mh-text-faint, #94a3b8);
  text-shadow: none;
}

.bms-fw-card.is-offline .fw-photo-halo { opacity: .16; }
.bms-fw-card.is-offline .fw-photo-live-dot {
  animation: none;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .14);
}
.bms-fw-card.is-offline .bms-fw-count-chip { color: #64748b; }

.fw-photo-halo {
  position: absolute;
  z-index: 1;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fw-live-color) 24%, transparent);
  filter: blur(30px);
  opacity: 0;
}

.fw-photo-live-dot {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fw-live-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fw-live-color) 18%, transparent), 0 0 13px var(--fw-live-color);
  animation: fw-photo-pulse 1.8s ease-in-out infinite;
}

@keyframes fw-photo-pulse {
  50% { opacity: .55; transform: scale(.82); }
}

.bms-fw-showcase-visual .fw-photo-stage { min-height: 238px; width: 100%; }
.bms-fw-showcase-visual .fw-photo-device { width: min(100%, 390px); height: 238px; }
.bms-fw-showcase-visual .fw-product-item .fw-photo-device { width: 100%; height: 180px; }
.bms-fw-showcase-visual .fw-product-item figcaption { font-size: .72rem; }

@media (prefers-reduced-motion: reduce) {
  .fw-photo-device { transition: none; }
  .fw-photo-live-dot { animation: none; }
}

/* --- 0. ANDROID SMARTPHONE / BLE GATEWAY (3D SIMULATOR) --- */
.android-phone-device {
  width: 136px;
  height: 108px;
  transform: rotateX(8deg) rotateY(-8deg);
}

.phone-chassis {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #334155 0%, #0f172a 60%, #020617 100%);
  border-radius: 12px;
  border: 1.5px solid #10b981;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.35);
  position: relative;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.phone-bevel-edge {
  position: absolute;
  inset: 1px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.phone-screen-glass {
  flex: 1;
  background: #090d16;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 4px 3px;
  border: 1px solid #1e293b;
}

.phone-screen-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  z-index: 6;
}

.phone-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.45rem;
  color: #94a3b8;
  font-family: var(--mh-mono, monospace);
  padding: 0 1px;
}

.phone-time {
  font-weight: 700;
  color: #f8fafc;
}

.phone-punch-hole {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000000;
  border: 0.8px solid #334155;
}

.phone-icons {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.4rem;
}

.phone-live-app {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 2;
  margin: 1px 0;
}

.phone-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.6);
  padding: 1px 3px;
  border-radius: 3px;
}

.phone-app-brand {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.52rem;
  font-weight: 800;
  color: #10b981;
  font-family: var(--mh-mono, monospace);
}

.phone-brand-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10b981;
}

.phone-mqtt-tag {
  font-size: 0.42rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.2);
  padding: 0 2px;
  border-radius: 2px;
}

.phone-app-body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 3px;
}

.phone-soc-circle {
  position: relative;
  width: 26px;
  height: 26px;
}

.phone-soc-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.phone-soc-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 3.5;
}

.phone-soc-bar {
  fill: none;
  stroke: #10b981;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.phone-soc-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--mh-mono, monospace);
}

.phone-soc-text small {
  font-size: 0.38rem;
  color: #94a3b8;
}

.phone-metrics {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.p-metric {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.48rem;
  font-family: var(--mh-mono, monospace);
}

.p-lbl { color: #64748b; font-size: 0.42rem; }
.p-val { color: #f8fafc; font-weight: 700; }
.p-val.chg { color: #34d399; }
.p-val.dsc { color: #f87171; }

.phone-wave-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 3px;
  padding: 1px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.phone-bt-tag {
  font-size: 0.42rem;
  font-weight: 700;
  color: #38bdf8;
  font-family: var(--mh-mono, monospace);
}

.phone-home-pill {
  width: 24px;
  height: 2px;
  background: #64748b;
  border-radius: 99px;
  margin: 1px auto 0;
}

/* --- 1. CYD (Cheap Yellow Display 2.8") --- */
.cyd-device {
  width: 140px;
  height: 108px;
  transform: rotateX(8deg) rotateY(-8deg);
}

.cyd-pcb-chassis {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  border-radius: 8px;
  border: 1px solid #fef08a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  position: relative;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.cyd-corner-hole {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #78350f;
  border: 1px solid #fef08a;
}
.cyd-corner-hole.tl { top: 3px; left: 3px; }
.cyd-corner-hole.tr { top: 3px; right: 3px; }
.cyd-corner-hole.bl { bottom: 3px; left: 3px; }
.cyd-corner-hole.br { bottom: 3px; right: 3px; }

.cyd-silk-brand {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.52rem;
  font-weight: 800;
  color: #78350f;
  letter-spacing: 0.02em;
  font-family: var(--mh-mono, monospace);
}

.cyd-screen-bezel {
  flex: 1;
  background: #020617;
  border-radius: 4px;
  border: 1.5px solid #1e293b;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}

.cyd-screen-glass {
  width: 100%;
  height: 100%;
  position: relative;
  background: #090d16;
}

.cyd-screen-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  z-index: 5;
}

.cyd-live-ui {
  position: relative;
  z-index: 2;
  padding: 3px 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cyd-ui-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.52rem;
  color: #94a3b8;
  font-family: var(--mh-mono, monospace);
}

.cyd-ui-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #f8fafc;
  font-weight: 700;
}

.cyd-ui-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10b981;
}

.cyd-ui-mode {
  color: #38bdf8;
  font-size: 0.48rem;
  background: rgba(56, 189, 248, 0.15);
  padding: 0 2px;
  border-radius: 2px;
}

.cyd-ui-main {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  margin: 1px 0;
}

.cyd-ui-gauge-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cyd-ui-soc-ring {
  position: relative;
  width: 28px;
  height: 28px;
}

.cyd-soc-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.cyd-soc-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 3.5;
}

.cyd-soc-bar {
  fill: none;
  stroke: #10b981;
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}

.cyd-soc-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.52rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--mh-mono, monospace);
}

.cyd-soc-num small {
  font-size: 0.4rem;
  color: #94a3b8;
}

.cyd-ui-lbl {
  font-size: 0.42rem;
  color: #94a3b8;
  font-weight: 700;
}

.cyd-ui-metrics-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cyd-m-row {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.5rem;
  font-family: var(--mh-mono, monospace);
}

.cyd-m-l { color: #64748b; font-size: 0.45rem; }
.cyd-m-v { color: #f8fafc; font-weight: 700; }
.cyd-m-v.chg { color: #34d399; }
.cyd-m-v.dsc { color: #f87171; }

.cyd-ui-cells-bar {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 2px;
  border-radius: 2px;
}

.cyd-c-b {
  flex: 1;
  background: #10b981;
  border-radius: 1px;
}

.cyd-ui-btn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1px;
}

.cyd-btn-tab {
  flex: 1;
  text-align: center;
  font-size: 0.42rem;
  font-weight: 700;
  color: #64748b;
  background: #1e293b;
  border-radius: 2px;
  padding: 1px 0;
}

.cyd-btn-tab.active {
  background: #0d9488;
  color: #ffffff;
}

.cyd-rgb-led {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rgb-glow, #38bdf8);
  box-shadow: 0 0 6px var(--rgb-glow, #38bdf8);
}

.cyd-sd-slot {
  position: absolute;
  top: 30px;
  left: -2px;
  width: 4px;
  height: 18px;
  background: #475569;
  border-radius: 1px;
  border-left: 1px solid #94a3b8;
}

/* --- ESP32 DEVKIT (Classic & S3) --- */
.esp32-device,
.esp32s3-device,
.esp32s3-max-device {
  width: 130px;
  height: 98px;
  transform: rotateX(10deg) rotateY(-8deg);
}

.esp-pcb-body {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #090d16 0%, #111827 100%);
  border-radius: 7px;
  border: 1px solid #1e293b;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  position: relative;
  padding: 5px;
}

.pcb-gold-traces {
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(217, 119, 6, 0.35);
  border-radius: 5px;
  pointer-events: none;
}

.esp-antenna-copper {
  position: absolute;
  top: 4px;
  left: 16px;
  right: 16px;
  height: 14px;
  background: repeating-linear-gradient(90deg, #d97706 0px, #d97706 3px, transparent 3px, transparent 6px);
  border-top: 2px solid #f59e0b;
  border-bottom: 2px solid #b45309;
}

.esp-metal-shield {
  position: absolute;
  top: 22px;
  left: 20px;
  right: 20px;
  height: 48px;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 40%, #f1f5f9 60%, #64748b 100%);
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shield-glint {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.4) 48%, rgba(255, 255, 255, 0.6) 50%, transparent 58%);
  pointer-events: none;
}

.shield-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  color: #334155;
  font-family: var(--mh-mono, monospace);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  font-size: 0.48rem;
}

.shield-brand { font-size: 0.45rem; font-weight: 800; letter-spacing: 0.05em; }
.shield-model { font-size: 0.6rem; font-weight: 900; color: #0f172a; }
.shield-sub { font-size: 0.4rem; font-weight: 600; color: #475569; }

.esp-micro-usb {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 8px;
  background: linear-gradient(to bottom, #94a3b8, #475569);
  border-radius: 2px 2px 0 0;
  border: 1px solid #cbd5e1;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.dual-typec-ports {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

.typec-jack {
  width: 18px;
  height: 8px;
  background: linear-gradient(to bottom, #94a3b8, #334155);
  border-radius: 2px 2px 0 0;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.typec-jack span {
  font-size: 0.35rem;
  color: #f8fafc;
  font-weight: 700;
  font-family: var(--mh-mono, monospace);
}

.esp-pwr-led {
  position: absolute;
  bottom: 12px;
  left: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}

.esp-io2-led {
  position: absolute;
  bottom: 12px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--io2-color, #38bdf8);
  box-shadow: 0 0 6px var(--io2-color, #38bdf8);
}

.neopixel-rgb {
  position: absolute;
  bottom: 12px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--neo-color, #10b981);
  box-shadow: 0 0 8px var(--neo-color, #10b981);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.esp-btn {
  position: absolute;
  bottom: 18px;
  width: 10px;
  height: 10px;
  background: #1e293b;
  border: 1px solid #64748b;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.esp-btn span { font-size: 0.32rem; color: #94a3b8; font-weight: 700; }
.esp-btn.btn-en, .esp-btn.btn-boot { left: 8px; }
.esp-btn.btn-boot, .esp-btn.btn-rst { right: 8px; }

.esp-pin-headers {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 4px;
  background: repeating-linear-gradient(to bottom, #d97706 0px, #d97706 3px, #1e293b 3px, #1e293b 6px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.esp-pin-headers.left-header { left: 1px; }
.esp-pin-headers.right-header { right: 1px; }

.silk-label-classic,
.silk-label-main,
.silk-label-s3max {
  position: absolute;
  top: 73px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.48rem;
  font-weight: 700;
  color: #94a3b8;
  font-family: var(--mh-mono, monospace);
  letter-spacing: -0.01em;
}

/* RS485 Screw Terminal Block (S3-MAX) */
.rs485-terminal-block {
  position: absolute;
  top: 3px;
  left: 14px;
  right: 14px;
  height: 15px;
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  border-radius: 3px;
  border: 1px solid #4ade80;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
}

.term-screw {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fef08a;
  border: 1px solid #ca8a04;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

.max-channel-leds {
  position: absolute;
  top: 20px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-around;
}

.ch-led {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 5px #10b981;
}

/* --- DEDICATED BMS CONTROLLER BOX (ANT / Daly / JBD / LVTOPSUN) --- */
.bms-box-device {
  width: 130px;
  height: 98px;
  transform: rotateX(12deg) rotateY(-10deg);
}

.bms-box-body {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 8px;
  border: 2px solid var(--brand-tint, #2563eb);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.2);
  position: relative;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bms-heatsink-fins {
  display: flex;
  gap: 3px;
  height: 12px;
  background: #0f172a;
  padding: 2px 4px;
  border-radius: 3px;
}

.bms-heatsink-fins span {
  flex: 1;
  background: #334155;
  border-radius: 1px;
}

.bms-box-badge {
  font-family: var(--mh-mono, monospace);
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--brand-tint, #38bdf8);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  margin-bottom: 4px;
}

.bms-comm-ports {
  display: flex;
  gap: 6px;
}

.comm-port {
  padding: 2px 5px;
  background: #020617;
  border: 1px solid #334155;
  border-radius: 3px;
}

.comm-port span {
  font-size: 0.45rem;
  font-weight: 700;
  color: #94a3b8;
  font-family: var(--mh-mono, monospace);
}

.bms-status-indicators {
  display: flex;
  gap: 5px;
  align-items: center;
}

.ind-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #334155;
}

.ind-led.run-led.on { background: #10b981; box-shadow: 0 0 6px #10b981; }
.ind-led.rx-led { background: #38bdf8; box-shadow: 0 0 6px #38bdf8; }

/* Live Pulse Animations */
@keyframes livePulseAnim {
  0% { transform: scale(0.92); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0.8; }
}

@keyframes liveBlinkAnim {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.live-pulse { animation: livePulseAnim 1.6s infinite ease-in-out; }
.live-blink { animation: liveBlinkAnim 0.8s infinite ease-in-out; }

/* =========================================================================
   4. CARD BODY DETAILS
   ========================================================================= */
.bms-fw-card-body {
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

.bms-fw-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.bms-fw-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.bms-fw-main-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--mh-text-main, #0f172a);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.bms-fw-ver-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.bms-fw-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.78rem;
  font-family: var(--mh-mono, monospace);
  letter-spacing: -0.01em;
}

.bms-fw-board-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
  background: var(--mh-card-surface, #f1f5f9);
  color: var(--mh-text-muted, #475569);
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--mh-card-border, #e2e8f0);
}

.bms-fw-power-val {
  font-family: var(--mh-mono, monospace);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}

.bms-fw-power-val.chg {
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
}

.bms-fw-power-val.dsc {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

.bms-fw-power-val.idle {
  color: var(--mh-text-muted, #64748b);
}

.bms-fw-card-mid {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bms-fw-count-chip {
  font-size: 0.78rem;
  color: var(--mh-text-muted, #64748b);
}

.bms-fw-count-chip b {
  color: var(--mh-text-main, #0f172a);
  font-weight: 700;
}

.bms-fw-card-bottom {
  padding-top: 0.5rem;
  border-top: 1px solid var(--mh-card-border, #f1f5f9);
  margin-top: auto;
}

.bms-fw-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #2563eb;
  transition: transform 0.15s ease;
}

.bms-fw-card:hover .bms-fw-action-link {
  transform: translateX(4px);
  color: #1d4ed8;
}

/* =========================================================================
   5. POPUP MODAL (3D SHOWCASE + ORIGINAL BMS TABLE)
   ========================================================================= */
.bms-fw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.bms-fw-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.bms-fw-modal-dialog {
  width: min(1180px, 100%);
  max-height: calc(100vh - 2.5rem);
  background: var(--mh-card-bg, #ffffff);
  border: 1px solid var(--mh-card-border, #cbd5e1);
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.bms-fw-modal-overlay.is-active .bms-fw-modal-dialog {
  transform: scale(1);
}

.bms-fw-modal-head {
  padding: 0.9rem 1.25rem;
  background: var(--mh-card-surface, #f8fafc);
  border-bottom: 1px solid var(--mh-card-border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
}

.bms-fw-modal-titles {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.bms-fw-modal-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.bms-fw-modal-h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--mh-text-main, #0f172a);
}

.bms-fw-modal-sub-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.bms-fw-modal-stats {
  font-size: 0.8rem;
  color: var(--mh-text-muted, #64748b);
}

.bms-fw-modal-stats b {
  color: var(--mh-text-main, #0f172a);
  font-weight: 700;
}

.bms-fw-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--mh-card-border, #cbd5e1);
  background: var(--mh-card-bg, #ffffff);
  color: var(--mh-text-muted, #64748b);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.bms-fw-modal-close:hover {
  background: #f1f5f9;
  color: var(--mh-text-main, #0f172a);
}

.bms-fw-modal-scroll {
  overflow-y: auto;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 3D Showcase Box in Modal */
.bms-fw-showcase-box {
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 30% 50%, #1e293b 0%, #0f172a 100%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 1.25rem;
  gap: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.bms-fw-showcase-visual {
  flex: 0 1 430px;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-3d-stage.is-modal-view {
  transform: scale(1.15);
}

.bms-fw-showcase-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.showcase-tag-list {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.showcase-tag {
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--mh-mono, monospace);
}

.showcase-notes {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #cbd5e1;
}

@media (max-width: 640px) {
  .bms-fw-showcase-box {
    flex-direction: column;
    text-align: center;
    gap: 0.85rem;
  }
  .bms-fw-showcase-visual {
    flex-basis: auto;
    min-width: 0;
    width: 100%;
  }
  .sim-3d-stage.is-modal-view {
    transform: none;
  }
  .showcase-tag-list {
    justify-content: center;
  }
}

.bms-table-hint {
  display: none;
  font-size: 0.74rem;
  color: #0f766e;
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.18);
  padding: 0.4rem 0.75rem;
  border-radius: 7px;
  text-align: center;
}

@media (max-width: 768px) {
  .bms-fw-modal-overlay {
    padding: 0.5rem;
  }
  .bms-fw-modal-dialog {
    max-height: calc(100vh - 1rem);
    border-radius: 12px;
  }
  .bms-table-hint {
    display: block;
  }
}

.bms-fw-modal-foot {
  padding: 0.7rem 1.25rem;
  background: var(--mh-card-surface, #f8fafc);
  border-top: 1px solid var(--mh-card-border, #e2e8f0);
  font-size: 0.75rem;
  color: var(--mh-text-faint, #94a3b8);
  text-align: center;
  flex-shrink: 0;
}

/* =========================================================================
   6. DEVICE CARD & ORIGINAL DATA TABLE
   ========================================================================= */
.bms-device-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bms-device-card {
  background: var(--mh-card-bg, #ffffff);
  border: 1px solid var(--mh-card-border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.bms-device-head {
  padding: 0.65rem 0.95rem;
  background: var(--mh-card-surface, #f8fafc);
  border-bottom: 1px solid var(--mh-card-border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bms-dev-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.bms-code-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mh-mono, monospace);
  font-weight: 700;
  font-size: 0.88rem;
  color: #2563eb;
  text-decoration: none !important;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.bms-code-link:hover {
  color: #1d4ed8;
  text-decoration: none !important;
}

.bms-code-link .online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  flex-shrink: 0;
}

.bms-dev-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mh-text-muted, #64748b);
  font-family: var(--mh-mono, monospace);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.bms-dev-packs {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mh-text-muted, #64748b);
}

.bms-dev-age {
  font-size: 0.72rem;
  color: var(--mh-text-faint, #94a3b8);
}

.bms-dev-right {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
}

.bms-dev-power {
  font-family: var(--mh-mono, monospace);
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.bms-dev-power.chg { color: #059669; }
.bms-dev-power.dsc { color: #dc2626; }
.bms-dev-power.idle { color: var(--mh-text-faint, #94a3b8); }

.bms-open-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none !important;
  background: var(--mh-card-bg, #ffffff);
  border: 1px solid var(--mh-card-border, #e2e8f0);
  color: var(--mh-text-muted, #475569);
  transition: all 0.15s ease;
}

.bms-open-btn:hover {
  background: #f1f5f9;
  color: var(--mh-text-main, #0f172a);
  border-color: #cbd5e1;
}

.bms-monitor-btn {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.06);
}
.bms-monitor-btn:hover {
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
  border-color: #2563eb;
}
html[data-ui-theme="dark"] .bms-monitor-btn { color: #93c5fd; }

/* Scrollable Original Table */
.bms-table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--mh-card-bg, #ffffff);
}

.bms-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
}

.bms-table thead {
  background: var(--mh-card-surface, #f8fafc);
  border-bottom: 1px solid var(--mh-card-border, #e2e8f0);
}

.bms-table th {
  padding: 0.55rem 0.85rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mh-text-muted, #64748b);
}

.bms-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--mh-card-border, #f1f5f9);
  vertical-align: middle;
  color: var(--mh-text-main, #0f172a);
}

.bms-table tbody tr:last-child td {
  border-bottom: none;
}

.bms-table tbody tr:hover td {
  background: rgba(13, 148, 136, 0.02);
}

.col-pack    { min-width: 130px; text-align: left; }
.col-soc     { min-width: 135px; }
.col-diff    { min-width: 95px; }
.col-maxcell { min-width: 90px; }
.col-v       { min-width: 80px; }
.col-i       { min-width: 90px; }
.col-p       { min-width: 95px; }
.col-rem     { min-width: 105px; }

/* Pack Button */
.bms-pack-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: #1d4ed8;
  font-weight: 700;
  font-size: 0.8rem;
  font-family: var(--mh-mono, monospace);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.bms-pack-btn:hover {
  background: rgba(37, 99, 235, 0.16);
  border-color: #2563eb;
  transform: translateY(-1px);
}

.bms-pack-btn svg {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  max-width: 13px !important;
  min-height: 13px !important;
  max-height: 13px !important;
  color: #2563eb;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* SOC Metric Bar + Value */
.soc-metric {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.soc-bar {
  flex: 1 1 60px;
  max-width: 80px;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 99px;
  overflow: hidden;
}

.soc-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.soc-fill.soc-ok   { background: #10b981; }
.soc-fill.soc-warn { background: #f59e0b; }
.soc-fill.soc-low  { background: #ef4444; }
.soc-fill.soc-none { background: #cbd5e1; }

.soc-val {
  font-family: var(--mh-mono, monospace);
  font-weight: 700;
  font-size: 0.8rem;
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.soc-val.soc-ok   { color: #059669; }
.soc-val.soc-warn { color: #d97706; }
.soc-val.soc-low  { color: #dc2626; }

/* Status Badges */
.diff-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  font-family: var(--mh-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.diff-badge.diff-ok   { color: #059669; background: rgba(5, 150, 105, 0.09); }
.diff-badge.diff-warn { color: #d97706; background: rgba(217, 119, 6, 0.12); }
.diff-badge.diff-bad  { color: #dc2626; background: rgba(220, 38, 38, 0.12); }
.diff-badge.diff-none { color: var(--mh-text-faint, #94a3b8); }

.current-badge,
.power-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  font-family: var(--mh-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.current-badge.chg,
.power-badge.chg {
  color: #059669;
  background: rgba(5, 150, 105, 0.09);
}

.current-badge.dsc,
.power-badge.dsc {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.09);
}

.current-badge.idle,
.power-badge.idle {
  color: var(--mh-text-faint, #94a3b8);
}

.mono-val {
  font-family: var(--mh-mono, monospace);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mono-val small {
  font-size: 0.72rem;
  color: var(--mh-text-muted, #64748b);
  margin-left: 1px;
}

/* =========================================================================
   7. CELL POPUP MODAL (.cell-modal-overlay)
   ========================================================================= */
.cell-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cell-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.cell-modal-container {
  width: min(840px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--mh-card-bg, #ffffff);
  border: 1px solid var(--mh-card-border, #cbd5e1);
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.45);
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cell-modal-overlay.is-active .cell-modal-container {
  transform: scale(1);
}

.cell-modal-header {
  padding: 0.9rem 1.25rem;
  background: var(--mh-card-surface, #f8fafc);
  border-bottom: 1px solid var(--mh-card-border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cell-modal-title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cell-modal-pack-tag {
  font-family: var(--mh-mono, monospace);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--mh-text-main, #0f172a);
}

.cell-modal-dev-link {
  font-family: var(--mh-mono, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  text-decoration: none !important;
}

.cell-modal-s-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.cell-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--mh-card-border, #cbd5e1);
  background: var(--mh-card-bg, #ffffff);
  color: var(--mh-text-muted, #64748b);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cell-modal-close:hover {
  background: #f1f5f9;
  color: var(--mh-text-main, #0f172a);
}

.cell-modal-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  background: var(--mh-card-surface, #f8fafc);
  border-bottom: 1px solid var(--mh-card-border, #e2e8f0);
}

@media (max-width: 700px) {
  .cell-modal-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cell-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
}

.cell-metric-item .m-lbl {
  font-size: 0.68rem;
  color: var(--mh-text-muted, #64748b);
  font-weight: 600;
}

.cell-metric-item .m-val {
  font-family: var(--mh-mono, monospace);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mh-text-main, #0f172a);
}

.cell-metric-item .m-val.chg { color: #059669; }
.cell-metric-item .m-val.dsc { color: #dc2626; }

.soc-item {
  position: relative;
}

.soc-circle-gauge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: conic-gradient(#10b981 var(--soc-deg, 0deg), rgba(0, 0, 0, 0.08) 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}

.soc-circle-body {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mh-card-surface, #f8fafc);
}

.soc-circle-text {
  font-family: var(--mh-mono, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  color: #059669;
}

.cell-grid-wrap {
  padding: 1.15rem;
  overflow-y: auto;
}

.cell-grid {
  display: grid;
  gap: 0.75rem;
}

.cell-grid.grid-16s {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.cell-grid.grid-8s {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .cell-grid.grid-16s,
  .cell-grid.grid-8s {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cell-card {
  background: var(--mh-card-surface, #f8fafc);
  border: 1px solid var(--mh-card-border, #e2e8f0);
  border-radius: 10px;
  padding: 0.6rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s ease;
}

.cell-card.is-max {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.06);
}

.cell-card.is-min {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.06);
}

.cell-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2px;
}

.cell-index {
  font-family: var(--mh-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mh-text-muted, #64748b);
}

.cell-tag {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}

.cell-tag.max { background: #f59e0b; color: #ffffff; }
.cell-tag.min { background: #3b82f6; color: #ffffff; }

.cell-battery-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cell-battery-terminal {
  width: 8px;
  height: 3px;
  background: #cbd5e1;
  border-radius: 2px 2px 0 0;
}

.cell-battery-shell {
  width: 22px;
  height: 44px;
  border: 1.5px solid #94a3b8;
  border-radius: 4px;
  padding: 1.5px;
  background: var(--mh-card-bg, #ffffff);
  display: flex;
  flex-direction: column-reverse;
}

.cell-battery-fill {
  width: 100%;
  background: #10b981;
  border-radius: 2px;
  transition: height 0.3s ease;
}

.cell-bottom-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.cell-voltage {
  font-family: var(--mh-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mh-text-main, #0f172a);
}

.cell-delta {
  font-family: var(--mh-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
}

.cell-delta.pos { color: #d97706; }
.cell-delta.neg { color: #2563eb; }
.cell-delta.eq  { color: var(--mh-text-faint, #94a3b8); }

.cell-modal-footer {
  padding: 0.75rem 1.15rem;
  background: var(--mh-card-surface, #f8fafc);
  border-top: 1px solid var(--mh-card-border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cell-legend {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.leg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--mh-text-muted, #64748b);
}

.leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.leg-dot.max-dot { background: #f59e0b; }
.leg-dot.min-dot { background: #3b82f6; }

.cell-hint-text {
  font-size: 0.72rem;
  color: var(--mh-text-faint, #94a3b8);
}