.solar-loading { min-height:1800px; padding-top:130px!important; }
.simulator-page { --section-py:70px; }
.sim-intro { padding:125px 0 28px; }
.sim-breadcrumb { font-size:.76rem; color:#746879; display:flex; gap:10px; margin-bottom:28px; }
.sim-intro h1 { font-size:clamp(2.1rem,4.1vw,3.5rem); line-height:1.08; font-weight:600; margin:12px 0 16px; }
.sim-intro h1 em { color:var(--primary); font-style:normal; }
.sim-intro>p { max-width:640px; font-size:.94rem; }
.sim-topline { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.local-pill { color:#35644e; background:#edf3ed; border:1px solid #d4e2d4; font-size:.7rem; border-radius:20px; padding:7px 12px; white-space:nowrap; }
.sim-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:30px; align-items:start; padding-bottom:80px; }
.sim-workspace { min-width:0; }
.stepper { display:flex; list-style:none; padding:0; margin:0 0 22px; gap:6px; }
.stepper li { flex:1; }
.stepper button { display:flex; align-items:center; gap:8px; width:100%; padding:14px 0; border:0; border-bottom:2px solid #dfdae3; background:transparent; color:#6d6275; font-size:.78rem; text-align:left; cursor:pointer; }
.stepper button span { font-size:.65rem; width:24px; height:24px; border:1px solid #ddd4e4; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.stepper button[aria-current="step"] { border-color:#63348c; color:#512573; font-weight:650; }
.stepper button[aria-current="step"] span { background:#60318d; border-color:#60318d; color:white; }
.form-panel { padding:28px; border:1px solid var(--border); border-radius:12px; background:white; }
.form-panel h2 { font-size:1.4rem; margin-bottom:8px; }
.form-panel .step-description { font-size:.84rem; margin-bottom:22px; line-height:1.65; }
.preset-row { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.preset-row button { border:1px solid #ded7e6; border-radius:6px; background:#faf8fc; padding:9px 12px; font-size:.75rem; color:#573b6d; cursor:pointer; }
.appliance { border:1px solid #e3dee7; border-radius:8px; padding:17px; margin-bottom:12px; background:#fdfcfe; }
.appliance-head { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.appliance-head .device-number { font-size:.63rem; color:#776581; }
.appliance-head select { border:0; font-weight:600; padding:0 20px 0 0; background:transparent; font-size:.89rem; color:#35253f; min-height:32px; max-width:240px; width:100%; }
.remove-appliance { margin-left:auto; padding:5px; width:30px; height:30px; border:0; background:none; color:#775c6a; font-size:1.2rem; cursor:pointer; }
.input-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.field { display:flex; flex-direction:column; gap:6px; font-size:.73rem; color:#65596f; }
.field input,.field select,.field textarea { width:100%; min-width:0; border:1px solid #d8d1de; border-radius:5px; background:#fff; padding:9px 10px; color:#302538; font:inherit; font-size:.9rem; min-height:41px; }
.field input:focus,.field select:focus { border-color:#754997; }
.field small { font-size:.67rem; color:#7b6c83; line-height:1.5; }
.field input:invalid:not(:placeholder-shown) { border-color:#b68159; }
.appliance-options { display:flex; gap:12px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.check-label { display:flex; align-items:center; gap:7px; font-size:.73rem; color:#614d71; cursor:pointer; }
input[type=checkbox] { accent-color:#60318d; width:16px; height:16px; }
.appliance-options .field { flex:1; min-width:90px; }
.appliance-options .field input { padding:6px 9px; min-height:34px; }
.custom-name { margin-bottom:12px; }
.add-device { width:100%; padding:12px; min-height:43px; border:1px dashed #b8a5c8; border-radius:7px; color:#60318d; background:#faf8fc; font-size:.83rem; cursor:pointer; }
.input-help { font-size:.71rem; color:#74677c; line-height:1.7; margin-top:17px; }
.step-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:24px; }
.step-actions .btn { padding:13px 17px; font-size:.8rem; }
.quiet-button { border:0; color:#65536f; padding:10px 0; background:transparent; font-size:.8rem; cursor:pointer; }
.site-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px 18px; margin-top:22px; }
.site-fields .full { grid-column:1/-1; }
.site-fields label { font-size:.79rem; }
.info-note { background:#f1edf6; border-left:3px solid #8a66a4; border-radius:0 5px 5px 0; padding:13px 15px; font-size:.77rem; line-height:1.6; color:#695477; margin:18px 0; }
.demo-note { background:#fff6e3; border:1px solid #ead9af; padding:12px 15px; border-radius:7px; font-size:.74rem; color:#705523; line-height:1.65; }
.sim-sidebar { position:sticky; top:104px; min-width:0; }
.energy-card { background:#efedf2; border:1px solid #e0dae7; border-radius:12px; overflow:hidden; }
.energy-heading { padding:22px 24px 0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.energy-heading .eyebrow { font-size:.58rem; }
.view-switch { display:flex; border:1px solid #d7cede; border-radius:5px; padding:2px; background:#ffffff80; }
.view-switch button { font-size:.65rem; border:0; background:none; border-radius:3px; padding:5px 9px; color:#7b678a; cursor:pointer; }
.view-switch button[aria-pressed=true] { background:white; color:#542b75; box-shadow:0 1px 3px #0001; }
.scene-stage { height:245px; position:relative; perspective:950px; overflow:hidden; }
.scene-sun { position:absolute; font-size:33px; color:#c59a49; right:55px; top:22px; }
.scene-orbit { position:absolute; width:260px; height:200px; left:calc(50% - 130px); top:27px; transform-style:preserve-3d; transform:rotateX(57deg) rotateZ(var(--rotation,-28deg)); }
.ground-plane { position:absolute; inset:-35px -30px; background:#dbdfd0; transform:translateZ(-2px); border:1px solid #c9cdbd; border-radius:5px; box-shadow:15px 18px 0 #d6d2dc; }
.house-volume { transform-style:preserve-3d; position:absolute; left:30px; top:24px; width:180px; height:130px; }
.house-front { position:absolute; top:130px; height:85px; width:180px; transform-origin:top; transform:translateZ(85px) rotateX(-90deg); background:#f7f2e4; border:1px solid #c7bdaf; }
.house-side { position:absolute; left:180px; top:0; width:130px; height:85px; background:#d5caba; transform-origin:top left; transform:translateZ(85px) rotateZ(90deg) rotateX(-90deg); border:1px solid #bdb4a5; }
.house-back { position:absolute; width:180px; height:85px; transform-origin:top; transform:translateZ(85px) rotateX(-90deg); background:#cbbfad; }
.roof-plane { position:absolute; inset:-8px; background:repeating-linear-gradient(90deg,#7e8588 0 3px,#899093 3px 13px); transform:translateZ(85px); border:3px solid #b8bdba; box-shadow:0 5px 6px #0003; padding:13px; }
.panel-array { display:grid; grid-template-columns:repeat(6,1fr); gap:3px; max-height:100%; }
.pv-panel { height:25px; background:repeating-linear-gradient(90deg,transparent 0 8px,#90a7bf 8px 9px),repeating-linear-gradient(0deg,#233c62 0 6px,#7b8fa7 6px 7px); border:1px solid #c0cbd9; box-shadow:1px 2px 0 #242c41; }
.house-door { position:absolute; left:70px; bottom:0; width:31px; height:54px; background:#7a6555; border:3px solid #c3b7a0; }
.house-window { position:absolute; left:17px; bottom:26px; width:34px; height:28px; background:linear-gradient(90deg,transparent 47%,#d7d5cc 47% 53%,transparent 53%),linear-gradient(0deg,#6c929c 47%,#d7d5cc 47% 53%,#6c929c 53%); border:3px solid #e6ddcc; }
.wall-inverter { position:absolute; width:18px; height:26px; background:#f9faff; right:13px; top:13px; border:2px solid #aaa5b0; border-radius:3px; }
.wall-inverter i { display:block; margin:6px 3px; height:4px; background:#60a17e; }
.wall-battery { position:absolute; width:25px; height:31px; right:11px; bottom:4px; border:2px solid #a4a0a9; background:#ded9e2; border-radius:3px; }
.wall-battery.charged { background:#5d4b6e; }
.wall-battery i { display:block; margin:5px 6px; height:3px; background:#b6cda9; }
.wall-wire { position:absolute; right:5px; height:68px; top:0; border-right:2px solid #bd874d; width:17px; border-bottom:2px solid #bd874d; }
.garden-tree { position:absolute; width:30px; height:30px; border-radius:50%; background:#86977a; transform:translateZ(16px); box-shadow:6px 10px 0 #72896b; }
.tree-one { left:-6px; top:10px; }.tree-two { right:-15px; top:150px; width:40px; height:40px; }
.grid-pole { position:absolute; width:5px; height:75px; right:-8px; top:-25px; background:#8a7d76; transform:rotateX(-90deg); transform-origin:bottom; border-top:5px solid #605568; }
.grid-pole::after { content:''; position:absolute; width:30px; height:3px; left:-12px; top:10px; background:#605568; }
.grid-pole.disconnected { opacity:.35; }
.scene-caption { position:absolute; bottom:3px; left:0; width:100%; text-align:center; font-size:.7rem; color:#6d5a7b; }
.rotation-control { display:flex; align-items:center; justify-content:center; gap:10px; font-size:.63rem; color:#776382; margin:12px 20px 0; }
.rotation-control input { accent-color:#75518e; width:100px; height:16px; }
.energy-diagram { padding:8px 20px 0; }
.energy-diagram svg { width:100%; height:auto; display:block; }
.diagram-node rect { fill:#faf9fc; stroke:#d3cadc; }
.diagram-node text { font:9px 'Segoe UI',sans-serif; text-anchor:middle; fill:#70627d; letter-spacing:.04em; }
.diagram-node .node-number { font-size:13px; font-weight:600; fill:#443050; }
.diagram-node.active rect { stroke:#a8905d; fill:#fff9ec; }
.diagram-node.disconnected { opacity:.6; }
.energy-wire { fill:none; stroke:#ccc4d4; stroke-width:2; }
.energy-wire.flowing { stroke:#ac8438; stroke-dasharray:7 5; animation:energyFlow 2s linear infinite; }
.energy-wire.battery.flowing { stroke:#78539c; }
.energy-wire.grid.flowing { stroke:#467e94; }
.grid-cross { stroke:#ae6867; stroke-width:2; fill:none; }
@keyframes energyFlow { to { stroke-dashoffset:-48; } }
.scenario-controls { display:flex; gap:5px; margin:8px 23px 0; padding:4px; border:1px solid #dcd5e3; border-radius:7px; }
.scenario-controls button { flex:1; border:0; background:transparent; padding:8px 4px; color:#756581; font-size:.75rem; border-radius:4px; cursor:pointer; }
.scenario-controls button span { margin-right:4px; }
.scenario-controls button[aria-pressed=true] { background:white; box-shadow:0 1px 5px #29203112; color:#502874; font-weight:600; }
.energy-explanation { padding:15px 24px 0; font-size:.77rem; line-height:1.6; margin-bottom:8px; }
.scene-note { display:block; padding:0 24px 22px; font-size:.62rem; color:#6e6178; line-height:1.5; }
.energy-card[data-mode=night] .scene-stage,.energy-card[data-mode=outage] .scene-stage { background:linear-gradient(#d8d3e2,transparent); }
.energy-card[data-mode=night] .house-window,.energy-card[data-mode=outage] .house-window { background:#e5bb6a; }
.live-totals { background:white; border:1px solid var(--border); border-radius:10px; padding:20px 24px; margin-top:15px; }
.live-title { font-size:.65rem; letter-spacing:.08em; color:#715d7f; margin-bottom:13px; }
.live-metrics { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.live-metric strong { font-size:1.65rem; font-weight:550; letter-spacing:-.04em; color:#3e2a4a; }
.live-metric strong small { font-size:.73rem; letter-spacing:0; font-weight:400; color:#705e7b; }
.live-metric span { display:block; color:#746a7c; font-size:.71rem; margin-top:3px; }
.live-error,.form-error { padding:12px 0; color:#9c3a31; font-size:.82rem; }
.result-lead { margin-bottom:22px; }.result-lead h2 { margin-bottom:8px; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }
.result-metric { padding:17px; border-radius:7px; background:#f3eff7; border:1px solid #e4dce9; }
.result-metric strong { font-size:1.65rem; font-weight:600; color:#563375; display:block; line-height:1.3; }
.result-metric span { font-size:.76rem; color:#715c80; }.result-metric small { display:block; font-size:.65rem; margin-top:5px; color:#705b7e; }
.bom-wrap { overflow-x:auto; margin-top:15px; }
.bom { border-collapse:collapse; width:100%; font-size:.76rem; }
.bom caption { text-align:left; font-weight:650; font-size:1rem; color:#3f2e4c; margin-bottom:14px; }
.bom th { text-align:left; color:#7a6986; font-size:.65rem; font-weight:500; border-bottom:1px solid #d7cedf; padding:10px 5px; }
.bom td { border-bottom:1px solid #ece6f1; padding:13px 5px; vertical-align:top; }
.bom td:nth-child(n+2),.bom th:nth-child(n+2) { text-align:right; white-space:nowrap; }
.bom td:first-child { min-width:140px; }
.bom small { display:block; color:#73604c; font-size:.65rem; }
.cost-lines { padding:16px 0; }.cost-line { display:flex; justify-content:space-between; gap:20px; font-size:.77rem; margin:9px 0; color:#6c5b78; }
.cost-total { background:#30203e; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:21px; border-radius:8px; }
.cost-total span { font-size:.8rem; }.cost-total strong { font-size:1.7rem; font-weight:550; }.cost-total small { font-size:.7rem; }
.warning { border-left:3px solid #bd8e37; background:#fff8e9; padding:12px 14px; color:#7c5c29; font-size:.75rem; line-height:1.65; margin-top:12px; }
.assumptions { margin-top:24px; border-top:1px solid #e6e0eb; padding-top:17px; font-size:.76rem; }
.assumptions summary { cursor:pointer; font-weight:600; color:#503464; padding:7px 0; }
.assumptions p { margin-top:12px; font-size:.74rem; line-height:1.75; }.assumptions ul { margin:14px 0; padding-left:18px; color:#6b5a75; line-height:1.8; }
.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }.result-actions .btn { font-size:.78rem; padding:12px 10px; }
.quote-hint { font-size:.7rem; color:#7b6a85; margin-top:12px; line-height:1.65; }
.simulator-page .footer { margin-top:0; }
@media(max-width:1050px) { .sim-layout { gap:20px; }.form-panel { padding:20px; }.input-grid { grid-template-columns:1fr 1fr; }.appliance-options { gap:8px; }.energy-heading { padding-inline:16px; }.energy-heading .eyebrow { font-size:.52rem; }.scene-orbit { scale:.9; } }
@media(max-width:760px) { .sim-intro { padding-top:110px; }.sim-topline { align-items:flex-start; }.sim-topline .eyebrow { font-size:.55rem; }.local-pill { font-size:.55rem; padding:6px 9px; }.sim-intro h1 { font-size:2.5rem; }.sim-layout { grid-template-columns:1fr; }.sim-sidebar { position:static; }.form-panel { padding:20px 17px; }.stepper button { font-size:.68rem; gap:6px; }.stepper button span { width:20px; height:20px; }.site-fields { gap:15px; }.energy-heading .eyebrow { font-size:.61rem; }.scene-stage { height:255px; }.scene-orbit { scale:1; }.sim-breadcrumb { margin-bottom:22px; }.result-actions { grid-template-columns:1fr; }.live-metric strong { font-size:1.9rem; }.sim-layout { padding-bottom:45px; } }
@media(max-width:380px) { .site-fields { grid-template-columns:1fr; }.stepper button { font-size:.6rem; }.stepper button span { width:18px;height:18px; }.sim-intro h1 { font-size:2.1rem; }.sim-topline { flex-direction:column; gap:10px; }.appliance { padding:13px; } }
@media(prefers-reduced-motion:reduce) { .energy-wire.flowing { animation:none; stroke-dasharray:none; } }
/* Keep long option labels readable and floating shortcuts clear of mobile forms. */
@media(max-width:600px) {
  .site-fields { grid-template-columns:1fr; }
  .simulator-page .whatsapp-float,.simulator-page .scroll-top { display:none; }
}