/* Energy Calculator (WP-safe) – all styles scoped to #ecc-app */
#ecc-app { --bg1:#ffffff; --bg2:#f6fbff; --ink:#072d4b; --muted:#5e7791; --accent:#0e79ff; --accent2:#42a5f5; --card:rgba(255,255,255,0.9); --ring:rgba(14,121,255,0.35); font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--ink); background:linear-gradient(180deg,var(--bg1),var(--bg2)); border-radius:14px; box-shadow:0 12px 30px rgba(7,25,55,.08); max-width:1100px; margin:18px auto; padding:14px; }
#ecc-app *, #ecc-app *::before, #ecc-app *::after { box-sizing:border-box; }

.ecc-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.ecc-title { margin:0; font-size:1.1rem; color:var(--accent); font-weight:800; letter-spacing:.2px; }
.ecc-actions { display:flex; gap:8px; }

.ecc-btn { appearance:none; border:none; border-radius:10px; padding:8px 10px; font-weight:700; cursor:pointer; background:rgba(5,20,50,.06); border:1px solid rgba(5,20,50,.06); }
.ecc-btn:hover { transform:translateY(-1px); }
.ecc-primary { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; border:none; }

.ecc-main { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.ecc-left { flex:0 1 380px; min-width:280px; }
.ecc-right { flex:1 1 640px; min-width:300px; }

.ecc-card { background:var(--card); border:1px solid rgba(5,20,50,.05); border-radius:12px; padding:12px; margin-bottom:12px; box-shadow:0 6px 24px rgba(7,25,55,.06); }
.ecc-h2 { margin:.2rem 0 .6rem; font-size:1rem; color:#0b5bb0; }

.ecc-grid2, .ecc-grid3 { display:grid; gap:8px; }
.ecc-grid2 { grid-template-columns:1fr 1fr; }
.ecc-grid3 { grid-template-columns:1fr 1fr 1fr; }
.ecc-input, select { width:100%; padding:8px; border-radius:8px; border:1px solid rgba(7,25,55,.12); background:#fff; }
.ecc-input:focus, select:focus { outline:none; box-shadow:0 0 0 3px var(--ring); border-color:transparent; }

.ecc-switch { display:flex; align-items:center; gap:8px; margin:8px 0; font-weight:600; color:var(--muted); }
.ecc-tou { display:none; }
.ecc-tou.ecc-show { display:grid; }

.ecc-divider { display:flex; align-items:center; gap:10px; color:var(--muted); margin:8px 0; }
.ecc-divider::before, .ecc-divider::after { content:""; flex:1; height:1px; background:rgba(7,25,55,.12); }
.ecc-or { align-self:end; color:var(--muted); font-size:.9rem; padding-bottom:4px; }

.ecc-table-wrap { overflow:auto; border-radius:8px; }
.ecc-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.94rem; }
.ecc-table thead th { position:sticky; top:0; background:#eaf5ff; color:#0b3864; padding:8px; text-align:left; }
.ecc-table tbody td { padding:6px 8px; border-bottom:1px dashed rgba(7,25,55,.08); }
.ecc-table input { width:100%; padding:6px; border-radius:8px; border:1px solid rgba(7,25,55,.12); }
.ecc-table button { padding:6px 8px; border-radius:8px; border:1px solid rgba(7,25,55,.12); background:#fff; cursor:pointer; }
.ecc-table .ecc-del { color:#b21; }

.ecc-note { margin-top:8px; color:var(--muted); font-size:.9rem; }

.ecc-charts { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ecc-summary-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.ecc-summary .ecc-summary-grid div { background:#fff; border:1px solid rgba(7,25,55,.08); padding:8px; border-radius:8px; }

.ecc-footer { margin-top:10px; color:var(--muted); font-size:.85rem; text-align:center; }

@media (max-width:900px){
  #ecc-app { padding:12px; }
  .ecc-main { flex-direction:column; }
  .ecc-left, .ecc-right { min-width:unset; width:100%; }
  .ecc-charts { grid-template-columns:1fr; }
  .ecc-summary-grid { grid-template-columns:1fr 1fr; }
}

/* Dark mode (scoped) */
#ecc-app.ecc-dark { background:linear-gradient(180deg,#0a1224,#061725); color:#e6f4ff; }
#ecc-app.ecc-dark .ecc-card { background:rgba(14,20,36,.65); border-color:rgba(255,255,255,.06); }
#ecc-app.ecc-dark .ecc-title { color:#72b4ff; }
#ecc-app.ecc-dark .ecc-table thead th { background:#0b2344; color:#bfe0ff; }
#ecc-app.ecc-dark .ecc-summary .ecc-summary-grid div { background:rgba(255,255,255,.06); }