/* ── HA Monitor Pro v3 ── */
.hamp-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f5f7ff;
    border-radius: 16px;
    padding: 20px;
    margin: 0 0 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.hamp-dark { background: #1a1a2e; color: #e0e0f0; }

.hamp-loading { display:flex;align-items:center;justify-content:center;gap:14px;padding:40px;font-size:14px;opacity:.6; }
.hamp-spinner { width:32px;height:32px;border:3px solid rgba(99,120,255,.2);border-top-color:#6378ff;border-radius:50%;animation:hamp-spin .7s linear infinite; }
@keyframes hamp-spin { to{transform:rotate(360deg)} }
.hamp-error { text-align:center;padding:30px;color:#e74c3c; }
.hamp-retry { margin-top:10px;padding:8px 20px;border:none;border-radius:8px;background:#e74c3c;color:#fff;cursor:pointer;font-size:14px; }

/* ══ FLOW ══ */
.hamp-flow-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:8px; }
.hamp-flow-title  { font-size:17px;font-weight:700; }
.hamp-updated     { font-size:12px;opacity:.5; }
.hamp-flow-diagram {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:auto auto;
    gap:20px;
    align-items:center;
    justify-items:center;
    padding:20px 10px;
    min-height:240px;
}
.hamp-flow-svg { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0; }
.hamp-node {
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:#fff;border-radius:50%;
    width:90px;height:90px;gap:2px;
    box-shadow:0 4px 16px rgba(0,0,0,.12);
    text-align:center;padding:8px;
}
.hamp-dark .hamp-node { background:#252545; }
.hamp-node-icon  { font-size:20px;line-height:1; }
.hamp-node-val   { font-size:12px;font-weight:700;color:#2c3e80;line-height:1.3; }
.hamp-dark .hamp-node-val { color:#7b8fff; }
.hamp-node-label { font-size:10px;opacity:.55;margin-top:1px; }
.hamp-node-solar   { border:3px solid #f39c12; }
.hamp-node-grid    { border:3px solid #3498db; }
.hamp-node-center  { border:3px solid #2ecc71;width:100px;height:100px; }
.hamp-node-battery { border:3px solid #9b59b6; }
.hamp-flow-line { stroke-width:2.5;fill:none;stroke-dasharray:6,4;animation:hamp-dash 1.5s linear infinite; }
.hamp-flow-line-rev { animation-direction:reverse; }
@keyframes hamp-dash { to{stroke-dashoffset:-20} }
.hamp-flow-stats { display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,0,0,.07); }
.hamp-stat { flex:1;min-width:80px;display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff;border-radius:10px;padding:10px 6px;box-shadow:0 2px 8px rgba(0,0,0,.06); }
.hamp-dark .hamp-stat { background:#252545; }
.hamp-stat-icon  { font-size:18px; }
.hamp-stat-val   { font-size:15px;font-weight:700;color:#2c3e80; }
.hamp-dark .hamp-stat-val { color:#7b8fff; }
.hamp-stat-label { font-size:10px;opacity:.5; }

/* ══ CARDS ══ */
.hamp-db-title   { font-size:20px;font-weight:800;margin-bottom:6px; }
.hamp-db-meta    { font-size:12px;opacity:.5;display:flex;align-items:center;gap:6px;margin-bottom:18px; }
.hamp-dot        { width:8px;height:8px;border-radius:50%;background:#27ae60;box-shadow:0 0 6px #27ae60;animation:hamp-pulse 2s infinite; }
@keyframes hamp-pulse { 0%,100%{opacity:1}50%{opacity:.3} }
.hamp-section-hdr { font-size:13px;font-weight:700;opacity:.5;text-transform:uppercase;letter-spacing:.8px;margin:18px 0 10px;padding-bottom:6px;border-bottom:2px solid rgba(99,120,255,.15); }
.hamp-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px;margin-bottom:4px; }
.hamp-card { background:#fff;border-radius:12px;padding:15px;box-shadow:0 2px 10px rgba(0,0,0,.07);transition:transform .15s,box-shadow .15s; }
.hamp-dark .hamp-card { background:#252545; }
.hamp-card:hover { transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12); }
.hamp-card-icon  { font-size:22px;margin-bottom:6px; }
.hamp-card-name  { font-size:11px;opacity:.55;font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px; }
.hamp-card-value { font-size:23px;font-weight:700;color:#2c3e80; }
.hamp-dark .hamp-card-value { color:#7b8fff; }
.hamp-card-unit  { font-size:12px;opacity:.65;margin-left:2px; }
.hamp-gauge-bg   { background:#e8ecff;border-radius:99px;height:7px;overflow:hidden;margin-top:8px; }
.hamp-dark .hamp-gauge-bg { background:#333360; }
.hamp-gauge-fill { height:100%;border-radius:99px;transition:width .6s ease; }
.hamp-binary     { display:flex;align-items:center;gap:8px;margin-top:6px; }
.hamp-bin-state  { padding:3px 12px;border-radius:99px;font-size:12px;font-weight:700; }
.hamp-on  { background:#ffeaea;color:#e74c3c; }
.hamp-off { background:#eafaf1;color:#27ae60; }
.hamp-unavail { opacity:.3;font-size:14px;margin-top:4px; }

/* ══ CHARTS ══ */
.hamp-chart-header  { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px; }
.hamp-chart-title   { font-size:15px;font-weight:700; }
.hamp-chart-controls{ display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.hamp-range-btn { padding:4px 11px;border:1px solid #dde;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;transition:all .15s; }
.hamp-range-btn.active { background:#6378ff;color:#fff;border-color:#6378ff; }
.hamp-dark .hamp-range-btn { background:#252545;border-color:#444;color:#ccd; }
.hamp-dark .hamp-range-btn.active { background:#6378ff; }
.hamp-updated-small { font-size:11px;opacity:.4; }
.hamp-chart-container { position:relative; }

@media(max-width:600px){
    .hamp-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
    .hamp-flow-diagram { grid-template-columns:1fr 1fr; }
    .hamp-node { width:72px;height:72px; }
    .hamp-node-center { width:82px;height:82px; }
}