:root{--ink:#16213e;--muted:#667085;--bg:#f4f6fb;--card:#fff;--purple:#5840d8;--cyan:#16b8d4;--green:#10a76f;--amber:#d98200;--red:#d63b4c;--border:#e4e7ec}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
.topbar{padding:28px clamp(18px,5vw,72px);background:linear-gradient(125deg,#171133,#4a2fbe 55%,#0e9db9);color:#fff;display:flex;justify-content:space-between;gap:24px;align-items:center}.eyebrow{font-weight:800;letter-spacing:.15em;font-size:.75rem;margin:0 0 8px}.topbar h1{font-size:clamp(1.8rem,4vw,3.2rem);line-height:1;margin:0}.subtitle{opacity:.88;margin:10px 0 0}.primary,.secondary{border:0;border-radius:12px;padding:12px 17px;font-weight:750;cursor:pointer}.primary{background:#fff;color:#36259c;box-shadow:0 8px 24px #0003}.secondary{background:#ebe8ff;color:#3926a7}
main{width:min(1400px,94vw);margin:24px auto 48px}.card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 6px 24px #18264a0b}.notice{padding:13px 16px;border-radius:12px;margin-bottom:16px;background:#eef4ff;color:#344054;border:1px solid #d9e5ff}.notice.error{background:#fff1f1;color:#922b36;border-color:#ffc9cf}.notice.success{background:#edfbf5;color:#08734d;border-color:#bdeed9}
.controls{padding:20px}.control-grid{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:14px}.controls label{font-size:.78rem;color:var(--muted);font-weight:700}.controls input,.controls select{width:100%;margin-top:7px;padding:11px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;color:var(--ink);font-size:.92rem}.switch-row{display:flex;gap:24px;margin-top:16px;flex-wrap:wrap}.switch-row .check{display:flex;align-items:center;gap:8px;color:#344054}.check input{width:auto;margin:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.stat{background:#fff;border:1px solid var(--border);border-radius:16px;padding:17px}.stat .label{font-size:.78rem;color:var(--muted);font-weight:700}.stat .value{font-size:1.55rem;font-weight:850;margin-top:5px}.stat .detail{font-size:.78rem;color:var(--muted);margin-top:3px}
.chart-card{padding:20px;margin-bottom:28px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px}.section-heading h2{margin:0;font-size:1.25rem}.section-heading p{margin:5px 0 0;color:var(--muted);font-size:.88rem}.legend{display:flex;gap:14px;font-size:.78rem;color:var(--muted);flex-wrap:wrap}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:10px;height:10px;border-radius:50%;display:inline-block}.confirmed-dot{background:var(--purple)}.forecast-dot{background:var(--cyan)}.selected-dot{background:var(--green)}.chart-wrap{height:390px}
.days{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:14px}.day-card{background:#fff;border:1px solid var(--border);border-radius:17px;padding:17px;min-width:0}.day-card.best{border:2px solid var(--green);box-shadow:0 8px 28px #10a76f18}.day-head{display:flex;justify-content:space-between;gap:8px}.day-head h3{margin:0}.badge{font-size:.68rem;padding:5px 8px;border-radius:99px;font-weight:800;height:max-content}.badge.confirmed{background:#ece9ff;color:#4a32b7}.badge.forecast{background:#e4f9fd;color:#087b91}.badge.mixed{background:#fff4dc;color:#925d00}.slot{padding:10px 0;border-bottom:1px solid #edf0f4}.slot:last-child{border-bottom:0}.slot-time{font-weight:800}.slot-price{color:var(--green);font-weight:800}.slot-note,.day-meta{font-size:.77rem;color:var(--muted)}.day-cost{font-size:1.35rem;font-weight:850;margin:14px 0 2px}.best-label{color:var(--green);font-weight:800;font-size:.72rem;margin-top:8px}.explanation{padding:20px;margin-top:28px}.explanation h2{margin-top:0}.explanation p{line-height:1.55;color:#475467}.small{font-size:.82rem}footer{text-align:center;color:var(--muted);font-size:.78rem;padding:28px}
@media(max-width:1100px){.control-grid{grid-template-columns:repeat(3,1fr)}.days{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.topbar{align-items:flex-start;flex-direction:column}.control-grid{grid-template-columns:1fr 1fr}.days{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.section-heading{align-items:flex-start;flex-direction:column}.chart-wrap{height:320px}}
.badge.unavailable{background:#f2f4f7;color:#667085}.day-card.unavailable{background:#fafafa;border-style:dashed}.unavailable-message{font-weight:800;margin:28px 0 8px;color:#475467;line-height:1.35}

.primary:disabled{opacity:.72;cursor:wait}.form-actions{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.form-actions span{font-size:.8rem;color:var(--muted)}.form-submit{background:var(--purple);color:#fff;box-shadow:none}.loading-overlay[hidden]{display:none}.loading-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(13,18,38,.68);backdrop-filter:blur(5px)}.loading-panel{width:min(430px,92vw);padding:28px;text-align:center;border-radius:22px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.32)}.loading-panel h2{margin:6px 0 8px;font-size:1.35rem}.loading-panel p{margin:0;color:var(--muted)}.loading-graphic{width:180px;height:130px;margin:0 auto;color:var(--purple)}.loading-graphic svg{width:100%;height:100%;overflow:visible}.loader-charge{fill:var(--green);transform-origin:center;animation:chargeBars 1.15s ease-in-out infinite}.loader-charge.delay-one{animation-delay:.2s}.loader-bolt{fill:var(--amber);animation:boltPulse 1.15s ease-in-out infinite}.loader-pulse{animation:pulseRing 1.15s ease-out infinite;transform-origin:46px 94px}.loader-cable{stroke-dasharray:18 12;animation:cableFlow .75s linear infinite}.loading-dots{display:flex;justify-content:center;gap:7px;margin-top:18px}.loading-dots span{width:8px;height:8px;border-radius:50%;background:var(--purple);animation:dotBounce 1s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:.14s}.loading-dots span:nth-child(3){animation-delay:.28s}.is-loading{overflow:hidden}@keyframes chargeBars{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}@keyframes boltPulse{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}@keyframes pulseRing{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(1.45)}}@keyframes cableFlow{to{stroke-dashoffset:-30}}@keyframes dotBounce{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-6px);opacity:1}}@media(max-width:650px){.form-actions{align-items:flex-start;flex-direction:column}.form-submit{width:100%}}
/* v5 planner additions */
.control-grid{grid-template-columns:repeat(4,minmax(150px,1fr))}.section-heading.compact{align-items:center}.saved-indicator{font-size:.75rem;font-weight:800;color:var(--green);background:#edfbf5;border-radius:999px;padding:7px 10px}.price-alert{display:flex;gap:12px;align-items:center;justify-content:center;margin:0 0 16px;padding:14px 18px;border-radius:14px}.price-alert span{font-size:.88rem}.price-alert.negative{background:#fff0f2;border:1px solid #ffc3ca;color:#922b36}.price-alert.cheap{background:#fff8e7;border:1px solid #f7d894;color:#805100}.recommendation{padding:24px;margin:18px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border:2px solid #c8f0df;background:linear-gradient(135deg,#fff,#effcf7)}.recommendation h2{margin:5px 0 8px;font-size:clamp(1.35rem,2.8vw,2rem)}.recommendation p{margin:0;color:#475467}.eyebrow.dark{color:#08734d}.schedule-settings{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.schedule-settings span{display:flex;flex-direction:column;background:#fff;border:1px solid #d9eee5;border-radius:12px;padding:10px 13px;min-width:115px;font-size:.86rem}.schedule-settings b{font-size:.7rem;text-transform:uppercase;color:var(--muted);margin-bottom:3px}.recommendation-copy{background:var(--green);color:#fff;box-shadow:0 8px 22px #10a76f33;white-space:nowrap}.negative-dot{background:var(--red)}.warning-note{margin-top:10px;padding:8px 10px;border-radius:9px;background:#fff4dc;color:#925d00;font-size:.76rem;font-weight:700}
@media(max-width:1100px){.control-grid{grid-template-columns:repeat(2,1fr)}.recommendation{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.control-grid{grid-template-columns:1fr}.recommendation-copy{width:100%}.price-alert{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr}.topbar .primary{width:100%}}
/* v6 historical pricing */
.history-card{margin-bottom:28px}.history-heading{align-items:center}.history-controls{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.history-controls label{font-size:.78rem;color:var(--muted);font-weight:700}.history-controls select{display:block;margin-top:6px;padding:10px 12px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;color:var(--ink)}.history-status{font-size:.84rem;color:var(--muted);margin:4px 0 14px}.history-status.error{color:#922b36}.history-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.history-stat{padding:12px 14px;border-radius:12px;background:#f7f8fc;border:1px solid var(--border)}.history-stat b{display:block;font-size:1.1rem;margin-top:3px}.history-stat span{font-size:.72rem;color:var(--muted)}.history-chart-wrap{height:430px}@media(max-width:800px){.history-stats{grid-template-columns:repeat(2,1fr)}.history-controls{width:100%}.history-controls label{flex:1}.history-controls select{width:100%}}@media(max-width:500px){.history-stats{grid-template-columns:1fr}.history-chart-wrap{height:350px}}
/* v7 layout and usability improvements */
.topbar{position:sticky;top:0;z-index:120;box-shadow:0 8px 24px rgba(18,12,58,.18)}
.schedule-section{margin:20px 0 24px}.schedule-heading{align-items:center}.days{display:grid;grid-template-columns:1fr;gap:12px}.day-card{padding:0;overflow:hidden}.day-toggle{width:100%;border:0;background:#fff;color:var(--ink);display:grid;grid-template-columns:minmax(145px,1fr) 140px auto 26px;gap:12px;align-items:center;padding:16px 18px;text-align:left;cursor:pointer}.day-toggle:hover{background:#fafaff}.day-title-block,.day-toggle>span:first-child{display:flex;flex-direction:column;gap:3px}.day-toggle strong{font-size:1rem}.day-toggle small{color:var(--muted);font-size:.76rem}.toggle-icon{font-size:1.35rem;font-weight:800;text-align:center;color:var(--purple)}.day-content{padding:0 18px 18px}.day-card.collapsed .day-content{display:none}.day-card.best .day-toggle{background:linear-gradient(90deg,#effcf7,#fff)}.day-card.best{border-width:2px}.sparkline{width:120px;height:34px}.sparkline polyline{stroke:var(--purple);stroke-width:2}.day-card.best .sparkline polyline{stroke:var(--green);stroke-width:2.4}.slot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:12px 14px;border:1px solid var(--border);border-left-width:6px;border-radius:12px}.slot-price-wrap{text-align:right}.price-band{display:inline-block;font-size:.65rem;font-weight:850;padding:3px 7px;border-radius:999px;margin-bottom:4px}.price-negative{border-left-color:var(--red);background:#fff4f5}.price-negative .price-band{background:#ffdce1;color:#8c1d2b}.price-very-cheap{border-left-color:#078d5b;background:#effbf6}.price-very-cheap .price-band{background:#c9f2df;color:#076e48}.price-cheap{border-left-color:#5bbe77;background:#f5fcf7}.price-cheap .price-band{background:#dff4e4;color:#26723b}.price-standard{border-left-color:#e8ae28;background:#fffaf0}.price-standard .price-band{background:#ffedbd;color:#805100}.price-expensive{border-left-color:#e26446;background:#fff6f2}.price-expensive .price-band{background:#ffddd2;color:#8f331f}.recommended-slot{outline:3px solid rgba(16,167,111,.22);box-shadow:0 5px 18px rgba(16,167,111,.12)}
.recommendation{position:sticky;top:132px;z-index:80}
.legend{max-width:620px}.legend:after{content:'Price colours: red negative · dark green under 5p · green 5–15p · amber 15–25p · orange above 25p';display:block;width:100%;margin-top:3px}
@media(max-width:800px){.topbar{position:relative}.recommendation{position:relative;top:auto}.day-toggle{grid-template-columns:1fr auto 26px}.sparkline{grid-column:1 / 2;grid-row:2;width:100%;max-width:180px}.day-toggle .badge{grid-column:2;grid-row:1}.toggle-icon{grid-column:3;grid-row:1 / 3}.slot{align-items:flex-start}.slot-price-wrap{min-width:92px}}
@media(max-width:500px){.day-toggle{padding:14px}.day-content{padding:0 14px 14px}.slot{flex-direction:column}.slot-price-wrap{text-align:left}.schedule-heading .secondary{width:100%}}

/* v9 EcoFlow API integration */
.ecoflow-connect{margin-top:1.25rem}.ecoflow-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end}.ecoflow-actions{display:flex;gap:.65rem;flex-wrap:wrap}.ecoflow-status{margin-top:1rem;padding:.9rem 1rem;border-radius:12px;background:#f4f2ff;color:#3e3470}.ecoflow-status.error{background:#fff0f1;color:#8f2432}.ecoflow-status.ok{background:#eaf8f0;color:#11633d}.telemetry-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-top:1rem}.telemetry-tile{padding:1rem;border:1px solid #e7e3f7;border-radius:14px;background:#fff}.telemetry-tile span{display:block;color:#716b86;font-size:.8rem}.telemetry-tile strong{display:block;margin-top:.2rem;font-size:1.25rem}.automation-box{display:grid;gap:1rem;margin-top:1rem;padding:1rem;border:1px solid #ded8f4;border-radius:16px;background:linear-gradient(135deg,#fbfaff,#f5f2ff)}.automation-box h3{margin:0}.automation-box p{margin:.25rem 0 0}.automation-switch{font-weight:700;display:flex;gap:.55rem;align-items:center}.automation-controls{display:grid;grid-template-columns:1fr 1fr auto auto;gap:.8rem;align-items:end}.activity-log{margin-top:1rem}.activity-log pre{white-space:pre-wrap;max-height:260px;overflow:auto;background:#171329;color:#f0edff;padding:1rem;border-radius:12px}.badge.connected{background:#e7f8ef;color:#11633d}.badge.warning{background:#fff4d7;color:#7a5200}@media(max-width:900px){.ecoflow-grid,.automation-controls{grid-template-columns:1fr 1fr}.telemetry-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.ecoflow-grid,.automation-controls,.telemetry-grid{grid-template-columns:1fr}.ecoflow-actions{display:grid}.ecoflow-actions button{width:100%}}