.phone-scroll-container {
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}
.screen-panel {
  min-height: 320px;
  padding: 18px 0 0 0;
  position: relative;
  background: transparent;
}
.screen-panel:not(:first-child) {
  margin-top: 0;
  box-shadow: none;
}
.screen-map-panel {
  background: transparent;
}
.screen-kpi-panel {
  background: rgba(2,6,23,0.45);
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.14);
  margin: 0 12px;
}
.screen-elm-panel {
  background: rgba(2,6,23,0.45);
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.14);
  margin: 0 12px;
  display: flex;
  flex-direction: column;
}
.phone-page{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:14px}
.bt-card{width:100%;max-width:260px;background:rgba(11,18,32,.7);border:1px solid rgba(148,163,184,.14);border-radius:12px;padding:14px;box-shadow:0 8px 22px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:12px}
.bt-icon-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.bt-icon-wrap .icon-bt{position:absolute;right:22px;bottom:8px;filter:drop-shadow(0 4px 10px rgba(34,211,238,.25))}
.bt-meta{display:flex;flex-direction:column;gap:6px}
.bt-title{font-weight:700;color:#e2e8f0}
.bt-status{display:flex;align-items:center;gap:8px;color:#22c55e;font-weight:600}
.bt-status .bt-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.15);display:inline-block}
.bt-voltage{color:#cbd5e1}
.bt-device{color:#94a3b8}
.btn-phone{margin-top:6px;display:inline-flex;align-items:center;justify-content:center;width:100%;padding:10px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.14);background:linear-gradient(135deg,#22d3ee,#06b6d4);color:#00131a;font-weight:700}
.btn-phone:hover{filter:brightness(1.05)}

.phone-kpis{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;gap:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:280px}
.kpi-card{background:rgba(11,18,32,.7);border:1px solid rgba(148,163,184,.14);border-radius:12px;padding:10px 12px}
.kpi-name{color:#94a3b8;font-size:12px;margin-bottom:4px}
.kpi-val{color:#e2e8f0;font-weight:700}
.unit{color:#94a3b8;font-weight:500;margin-left:4px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.18);font-size:11px;font-weight:600}
.pill-stable{background:rgba(34,197,94,.10);color:#22c55e;border-color:rgba(34,197,94,.25)}
.pill-good{background:rgba(34,197,94,.10);color:#22c55e;border-color:rgba(34,197,94,.25)}
.pill-clean{background:rgba(56,189,248,.10);color:#38bdf8;border-color:rgba(56,189,248,.25)}
.elm-status {
  text-align: center;
  color: #22d3ee;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 12px 0;
}
.elm-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 4px;
}
.elm-chip {
  font-size: 2rem;
  margin-bottom: 4px;
}
.elm-conn {
  font-size: 1rem;
  color: #22d3ee;
}
.elm-conn-status {
  color: #22c55e;
  font-weight: 700;
}
.elm-device {
  font-size: 0.95rem;
  color: #94a3b8;
}
.slide-in {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
.slide-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animated Data Visualization Section */
.animated-data-section {
  margin: 2.5rem auto 0 auto;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.live-kpi-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: rgba(2,6,23,0.45);
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.14);
  padding: 0.7rem 1.2rem;
  gap: 1.2rem;
}
.kpi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  font-family: 'Inter', Arial, sans-serif;
  animation: fadeInUp 1s ease;
}
.kpi-label {
  color: #22d3ee;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.kpi-value {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.kpi-unit {
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 500;
}
.animated-chart-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
/* App store button styles */


.app-badges-vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin-top: 1.2rem;
}
.store-link {
  display: inline-flex;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(2,6,23,0.60);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: box-shadow 0.2s, transform 0.1s ease;
}
.store-link:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.store-link:active { transform: translateY(1px); }
.store-badge {
  display: block;
  width: 180px;
  height: auto;
  object-fit: contain;
  border-radius: 0; /* container provides radius */
  background: transparent; /* remove white background */
}