:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color-scheme:dark;background:#091923;color:#f1f9f7;line-height:1.5}
*{box-sizing:border-box}
body{margin:0}.wrap{max-width:1130px;margin:0 auto;padding:clamp(16px,3vw,32px)}
a{color:#a3ead0}.back{margin:0 0 20px}.skip-link{position:absolute;top:-90px;left:12px;background:#f8d778;color:#07141d;padding:10px 14px;z-index:10}.skip-link:focus{top:10px}
.intro{max-width:720px;margin-bottom:22px}.intro h1{font-size:clamp(1.75rem,3.6vw,2.65rem);line-height:1.12;margin:8px 0}.intro p{font-size:1.05rem;color:#d1ddd9}
.eyebrow{font-size:.77rem;color:#f7d878;letter-spacing:.12em;font-weight:800}
.builder{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;margin-bottom:18px}
.panel{min-width:0;background:#102731;border:1px solid #35535b;border-radius:16px;padding:clamp(15px,2vw,23px);margin-bottom:18px}
.builder .panel{margin:0}.panel h2{font-size:1.2rem;margin:0 0 6px}.hint{margin:0 0 15px;color:#c7d8d6;font-size:.91rem}
.appliances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.appliance-card{background:#173540;border:1px solid #49646c;border-radius:12px;min-width:0;padding:8px;cursor:grab;user-select:none}
.appliance-card:active{cursor:grabbing}.appliance-card.dragging{opacity:.5}
.tile-visual{display:flex;min-height:88px;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;touch-action:none}
.item-emoji{font-size:1.85rem;line-height:1.35}.tile-visual strong{font-size:.79rem}.tile-visual small{font-size:.72rem;color:#c4d2d0}
button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}
.add-button{width:100%;padding:6px 3px;border-radius:7px;border:1px solid #82cab1;background:#225444;color:white;font-size:.78rem;font-weight:750}
.add-button:hover{background:#306e5c}
.basket{background:#143333;border-color:#7da697;transition:border-color .15s,background .15s}
.basket.drop-active{border:2px dashed #f7d878;background:#194a47}
.chosen{min-height:260px;padding:8px;background:#0d2529;border:2px dashed #547571;border-radius:12px}
.empty{color:#adc6c1;text-align:center;padding:70px 8px;margin:0}
.chosen-item{display:flex;gap:9px;align-items:center;background:#203a43;border-left:4px solid #7bbbd2;border-radius:9px;margin:6px 0;padding:7px 5px}
.chosen-item.exceeds{background:#542d35;border-color:#f0a1a5}
.chosen-icon{font-size:1.2rem}
.chosen-description{min-width:0;flex:1}.chosen-description strong,.chosen-description small{display:block}.chosen-description strong{font-size:.89rem}.chosen-description small{font-size:.72rem;color:#dbefea}
.quantity{display:flex;align-items:center;gap:3px}.qty-value{min-width:20px;text-align:center;font-weight:800}
.qty-button{min-width:30px;min-height:31px;background:#20434b;border:1px solid #86a49e;border-radius:7px;color:white;font-size:1.03rem}
.secondary{margin-top:12px;color:#f1f9f7;background:transparent;border:1px solid #90bab0;border-radius:8px;padding:8px 12px}
.selectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.selectors label{font-weight:700}.selectors small{font-weight:400;color:#c5d9d4;display:block;font-size:.8rem}
select{width:100%;margin-top:8px;background:#173c45;border:1px solid #97b9b5;border-radius:10px;padding:10px;color:white}
.flow{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:20px 0 8px;padding:14px;background:#0c2028;border-radius:12px}
.flow div{padding:8px 10px;border:1px solid #4a7876;border-radius:8px;display:flex;align-items:center;gap:5px}.flow strong{font-size:.85rem}.flow-note{color:#cbdcd5;font-size:.85rem}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0}
.figures>div{background:#163943;border-radius:10px;padding:13px}.figures span{display:block;font-size:.83rem;color:#cee0dc}.figures strong{display:block;font-size:clamp(1.25rem,2.8vw,1.9rem);margin-top:4px}
.meter-label{display:flex;justify-content:space-between;gap:12px;font-weight:650;font-size:.91rem}
progress{width:100%;height:17px;accent-color:#62d3a7}
.result-status{padding:14px;border-radius:10px;font-weight:750;margin-top:13px}.result-status.neutral{background:#204044}.result-status.info{background:#203b52;border:1px solid #7cbde4;color:#e1f3ff}.result-status.green{background:#164f39;border:1px solid #85edb8}.result-status.amber{background:#57491f;border:1px solid #f8d278}.result-status.red{background:#64333a;border:1px solid #f39da2}
.solar-figures{margin-top:8px;border:1px solid #3c705a;padding:10px;border-radius:12px;background:#0f302e}
.solar-figures>div{background:#224942}
.solar-explanation{color:#bdf4d7;font-size:.95rem;font-weight:700;margin:10px 0 20px}
.explanation,.panel-info{color:#d7e6e3;font-size:.9rem}.safety{border-left:3px solid #f7d878;padding:10px 15px;background:#182e34;color:#d4e2df;font-size:.82rem}.demo-next{font-size:.92rem;margin:24px 0}
.drag-ghost{position:fixed;z-index:999;transform:translate(-50%,-50%);pointer-events:none;background:#17573f;color:#fff;border:2px solid #f7d878;border-radius:10px;padding:8px 12px;box-shadow:0 12px 30px #0007}
button:focus-visible,select:focus-visible,a:focus-visible,.appliance-card:focus-visible{outline:3px solid #f8d778;outline-offset:3px}
@media(max-width:860px){.selectors{grid-template-columns:repeat(2,minmax(0,1fr))}.builder{grid-template-columns:1fr}.chosen{min-height:150px}.empty{padding:35px 8px}}
@media(max-width:560px){.appliances{grid-template-columns:repeat(2,minmax(0,1fr))}.selectors,.figures{grid-template-columns:1fr}.flow{gap:5px}.flow div{padding:6px;font-size:.8rem}.panel{padding:14px}}
@media(prefers-reduced-motion:reduce){.basket{transition:none}}