:root { color-scheme: light; --ink:#12332d; --muted:#667a75; --line:#d8e2de; --paper:#fff; --wash:#f3f7f4; --accent:#e85f43; --green:#167b65; }
* { box-sizing:border-box; }
body { margin:0; background:var(--wash); color:var(--ink); font:16px/1.5 system-ui,-apple-system,sans-serif; }
main { width:min(1120px,calc(100% - 32px)); margin:48px auto 80px; }
header { margin:0 0 36px; max-width:820px; }
.account-bar { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.account-bar p { margin:.25rem 0 1rem; color:var(--muted); }
#signed-in { display:flex; align-items:center; gap:14px; }
#signed-in[hidden],#signed-out[hidden] { display:none; }
#signed-in button { margin-left:auto; }
#account-picture { width:46px; height:46px; border-radius:50%; object-fit:cover; }
#account-email { color:var(--muted); }
.google-login { display:inline-block; padding:12px 18px; border:1px solid #b8c7c1; border-radius:10px; background:white; color:var(--ink); text-decoration:none; font-weight:800; }
.google-login:hover { background:#edf4f1; }
.google-login[aria-disabled="true"] { opacity:.55; pointer-events:none; }
.eyebrow { color:var(--accent); font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:.2em 0; font:700 clamp(2.2rem,6vw,4.5rem)/1.02 Georgia,serif; }
h2 { display:inline; margin:0; font-size:1.45rem; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:26px; padding:clamp(20px,4vw,40px); margin:24px 0; box-shadow:0 16px 48px rgba(20,50,42,.06); }
.service-example { background:linear-gradient(135deg,#fff,#eef8f4); }
.service-example h2 { display:block; font:700 clamp(1.7rem,4vw,2.6rem)/1.1 Georgia,serif; }
.service-link { display:inline-block; margin-top:8px; padding:12px 16px; border-radius:11px; background:var(--green); color:#fff; text-decoration:none; font-weight:800; }
.section-head,.connection-title,.add-menu { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.step { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); color:white; font-weight:800; margin-right:12px; }
.connection { border:1px solid var(--line); border-radius:18px; padding:20px; margin:18px 0; }
.fields,.period { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
label { display:grid; gap:6px; color:var(--muted); font-weight:650; }
input,select,button { font:inherit; }
input,select { width:100%; padding:12px 14px; border:1px solid #becdc7; border-radius:10px; background:white; color:var(--ink); }
.password-field { position:relative; display:block; }
.password-field .password { padding-right:50px; }
button.password-toggle { position:absolute; right:5px; top:50%; transform:translateY(-50%); min-width:40px; padding:7px; border-radius:8px; background:transparent; color:var(--ink); line-height:1; }
button.password-toggle:hover { background:#edf4f1; }
.credential-status { display:inline-block; margin-left:8px; padding:4px 9px; border-radius:999px; font-size:.78rem; font-weight:800; }
.status-unknown,.status-check-failed { color:#6e6251; background:#f3eee6; }
.status-working { color:#12614e; background:#e4f4ed; }
.status-not-working { color:#a83d2c; background:#fdebe7; }
button { border:0; border-radius:12px; background:var(--accent); color:white; padding:13px 20px; font-weight:800; cursor:pointer; }
button:disabled { opacity:.45; cursor:wait; }
button.secondary { background:var(--green); }
button.remove { padding:5px; color:#a33d2b; background:transparent; font-size:.88rem; }
.privacy,.status { color:var(--muted); }
.controllers { margin-top:16px; display:grid; gap:8px; }
.controller-row { grid-template-columns:auto 1fr; align-items:start; background:var(--wash); border-radius:10px; padding:10px 12px; color:var(--ink); }
.controller-row input { width:auto; margin-top:5px; }
.analysis-consent { grid-template-columns:auto 1fr; align-items:start; margin-top:18px; padding:14px; border-radius:12px; background:#eef8f4; color:var(--ink); }
.analysis-consent input { width:auto; margin-top:5px; }
.error { color:#b43e2e; }
.forecast-panel h2 { display:block; font:700 clamp(1.7rem,4vw,2.6rem)/1.1 Georgia,serif; }
.forecast-panel h3 { margin-top:28px; }
.forecast-chart { width:100%; height:auto; min-height:220px; margin:16px 0; border:1px solid var(--line); border-radius:14px; background:linear-gradient(#fff,#f4f8f6); }
.forecast-band { fill:rgba(22,123,101,.18); }
.forecast-min,.forecast-max { fill:none; stroke-width:2; }
.forecast-min { stroke:#e85f43; }
.forecast-max { stroke:#167b65; }
.forecast-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.forecast-stat { padding:14px; border-radius:12px; background:var(--wash); }
.forecast-stat span { display:block; color:var(--muted); font-size:.82rem; }
.forecast-stat strong { display:block; margin-top:4px; }
.charger-match { margin-top:10px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.match-badge { display:inline-block; margin-left:8px; padding:3px 8px; border-radius:999px; font-size:.78rem; font-weight:800; }
.match-same { color:#12614e; background:#e4f4ed; }
.match-different { color:#a83d2c; background:#fdebe7; }
.match-unknown { color:#6e6251; background:#f3eee6; }
@media (max-width:700px) { .fields,.period,.forecast-stats { grid-template-columns:1fr; } main { margin-top:24px; } }