#ecoflow-solar-dashboard {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0b0f14;
  color: #e8edf3;
  border-radius: 14px;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}

*, #ecoflow-solar-dashboard * { box-sizing: border-box; }

/* ── Header ── */
.eco-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #232d3d;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.eco-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #e8edf3;
}

.eco-title svg { color: #f5c842; }

.eco-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  color: #6b7c93;
  font-family: monospace;
}

.eco-refresh-btn {
  background: #141920;
  border: 1px solid #232d3d;
  color: #6b7c93;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.2s;
}
.eco-refresh-btn:hover { border-color: #f5c842; color: #f5c842; }

/* ── Fehler ── */
.eco-error {
  background: rgba(224,92,92,.08);
  border: 1px solid rgba(224,92,92,.3);
  border-radius: 8px;
  padding: 12px 16px;
  color: #e05c5c;
  font-size: 0.82rem;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ── Übersichtskarten ── */
.eco-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 600px) { .eco-summary { grid-template-columns: repeat(4, 1fr); } }

.eco-card {
  background: #1a2230;
  border: 1px solid #232d3d;
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.eco-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.eco-card.eco-solar::before   { background: #f5c842; }
.eco-card.eco-feed::before    { background: #4ea8de; }
.eco-card.eco-self::before    { background: #56cfb2; }
.eco-card.eco-draw::before    { background: #e05c5c; }

.eco-card-label {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7c93;
  margin-bottom: 10px;
}

.eco-card-value {
  font-size: 1.7rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: #e8edf3;
  line-height: 1;
}

.eco-unit {
  font-size: 0.78rem;
  font-weight: 400;
  color: #6b7c93;
  margin-left: 2px;
}

/* ── Abschnittstitel ── */
.eco-section-title {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7c93;
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid #232d3d;
}

/* ── Smart Meter ── */
.eco-meter {
  background: #1a2230;
  border: 1px solid #232d3d;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.eco-meter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.eco-meter-header strong { font-size: 0.88rem; color: #e8edf3; font-weight: 600; }

.eco-sn {
  font-family: monospace;
  font-size: 0.6rem;
  color: #6b7c93;
  display: block;
  margin-top: 2px;
}

.eco-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}
.eco-badge.online  { background: rgba(74,222,128,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.25); }
.eco-badge.offline { background: rgba(239,68,68,.12);  color: #ef4444; border: 1px solid rgba(239,68,68,.25); }

.eco-meter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 500px) { .eco-meter-grid { grid-template-columns: repeat(4, 1fr); } }

.eco-meter-cell {
  background: #141920;
  border: 1px solid #232d3d;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
}

.eco-meter-label { font-size: 0.6rem; color: #6b7c93; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.eco-meter-val   { font-family: monospace; font-size: 1.4rem; font-weight: 700; }
.eco-meter-unit  { font-size: 0.6rem; color: #6b7c93; }

.eco-col-solar { color: #f5c842; }
.eco-col-grid  { color: #4ea8de; }
.eco-col-flow  { color: #56cfb2; }
.eco-col-warn  { color: #e05c5c; }

/* ── Wechselrichter ── */
.eco-inverters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 480px) { .eco-inverters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .eco-inverters { grid-template-columns: repeat(4, 1fr); } }

.eco-inv-card {
  background: #1a2230;
  border: 1px solid #232d3d;
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.2s;
}
.eco-inv-card:hover { border-color: #2e3f58; }

.eco-inv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.eco-inv-name { font-size: 0.82rem; font-weight: 600; color: #e8edf3; }
.eco-inv-sn   { font-family: monospace; font-size: 0.58rem; color: #6b7c93; margin-top: 2px; }

.eco-metrics { display: flex; flex-direction: column; gap: 6px; }

.eco-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: #141920;
  border: 1px solid #232d3d;
  border-radius: 6px;
}

.eco-metric-label { font-size: 0.72rem; color: #6b7c93; }
.eco-metric-val   { font-family: monospace; font-size: 0.8rem; font-weight: 700; color: #e8edf3; }

.eco-bar-wrap { margin-top: 10px; }
.eco-bar-info { display: flex; justify-content: space-between; font-size: 0.6rem; color: #6b7c93; margin-bottom: 4px; }
.eco-bar-bg   { height: 3px; background: #232d3d; border-radius: 4px; overflow: hidden; }
.eco-bar-fill { height: 100%; background: linear-gradient(90deg, #f5c842, #56cfb2); border-radius: 4px; transition: width 0.6s ease; }