:root{
  --yellow:#F5D80A; --yellow-dk:#d4ba00; --bg:#101014; --card:#1b1b22; --card2:#24242e;
  --text:#f2f2f5; --dim:#9a9aa8; --green:#3ec26b; --red:#ff5a5a; --blue:#4aa3ff; --orange:#ffb84a;
  --radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;min-height:100%;overscroll-behavior:none;}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
#app{max-width:760px;margin:0 auto;padding:14px 14px calc(40px + env(safe-area-inset-bottom));}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 12px;position:sticky;top:0;background:var(--bg);z-index:5;}
.brand{font-weight:800;font-size:19px;letter-spacing:.3px;}
.brand span{color:var(--yellow);}
.brandsub{font-size:11px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.stepper{display:flex;gap:6px;padding:2px 2px 14px;}
.stepdot{flex:1;height:6px;border-radius:4px;background:var(--card2);transition:background .25s;}
.stepdot.done{background:var(--yellow);}
.steptitle{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);margin:4px 4px 12px;}
.card{background:var(--card);border:1px solid #2a2a35;border-radius:var(--radius);padding:16px;margin-bottom:12px;}
.q{font-size:16.5px;font-weight:700;line-height:1.35;margin:0 0 4px;}
.hint{font-size:12.5px;color:var(--dim);line-height:1.45;margin:0 0 12px;}
label.fieldlbl{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);margin:12px 2px 6px;}
select,input[type=number],input[type=text]{
  width:100%;padding:13px 12px;border-radius:12px;border:2px solid #33333f;background:var(--card2);
  color:var(--text);font-size:16px;font-weight:600;outline:none;appearance:none;}
select:focus,input:focus{border-color:var(--yellow);}
.inrow{display:flex;gap:8px;}
.inrow > *:first-child{flex:1.6;}
.inrow > *:last-child{flex:1;}
.opt{display:block;width:100%;text-align:left;padding:13px 14px;margin-bottom:9px;border-radius:14px;border:2px solid #33333f;background:var(--card2);color:var(--text);font-size:15px;font-weight:600;cursor:pointer;line-height:1.35;}
.opt small{display:block;font-weight:500;color:var(--dim);font-size:12.5px;margin-top:3px;}
.opt.sel{border-color:var(--yellow);background:rgba(245,216,10,.08);}
.opt.sel small{color:var(--text);}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:10px 14px;border-radius:20px;border:2px solid #33333f;background:var(--card2);color:var(--text);font-size:13.5px;font-weight:700;cursor:pointer;}
.chip.sel{border-color:var(--yellow);background:rgba(245,216,10,.1);color:var(--yellow);}
.bigbtn{display:block;width:100%;padding:16px;border:none;border-radius:var(--radius);background:var(--yellow);color:#111;font-size:16px;font-weight:800;cursor:pointer;letter-spacing:.4px;box-shadow:0 4px 0 var(--yellow-dk);margin-top:6px;}
.bigbtn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--yellow-dk);}
.bigbtn.ghost{background:var(--card2);color:var(--text);box-shadow:0 4px 0 #15151c;}
.bigbtn:disabled{opacity:.45;box-shadow:none;transform:none;}
.btnrow{display:flex;gap:10px;margin-top:8px;}
.btnrow .bigbtn{margin-top:0;}
.btnrow .ghost{flex:1;}
.btnrow .go{flex:2;}
/* results */
.rec{background:linear-gradient(160deg,#2b2510,#1b1b22);border:2px solid var(--yellow);border-radius:var(--radius);padding:18px;margin-bottom:12px;}
.reclbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--yellow);margin-bottom:6px;}
.recname{font-size:22px;font-weight:800;line-height:1.2;}
.recsub{font-size:13px;color:var(--dim);margin-top:4px;line-height:1.45;}
.specgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.spec{background:rgba(0,0,0,.25);border-radius:12px;padding:10px 12px;}
.spec b{display:block;font-size:17px;color:var(--yellow);}
.spec span{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;}
.why{margin:12px 0 0;padding:0 0 0 2px;font-size:13.5px;line-height:1.55;color:var(--text);}
.why li{margin-bottom:4px;}
ul.why{list-style:none;}
ul.why li::before{content:"✓ ";color:var(--green);font-weight:800;}
.alt{background:var(--card);border:1px solid #2e2e3a;border-radius:14px;padding:13px 14px;margin-bottom:9px;}
.alt b{font-size:15px;}
.alt p{margin:4px 0 0;font-size:12.5px;color:var(--dim);line-height:1.45;}
.sup{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid #2e2e3a;border-radius:14px;padding:13px 14px;margin-bottom:9px;}
.supicon{font-size:22px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--card2);border-radius:11px;flex-shrink:0;}
.sup b{font-size:14.5px;display:block;}
.sup p{margin:3px 0 0;font-size:12.5px;color:var(--dim);line-height:1.45;}
.sup.why-active{border-color:#3a3a1a;}
.warn{background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.45);color:var(--red);border-radius:14px;padding:12px 14px;margin-bottom:9px;font-size:13.5px;font-weight:700;line-height:1.45;}
.note{background:rgba(74,163,255,.09);border:1px solid rgba(74,163,255,.35);color:var(--blue);border-radius:14px;padding:12px 14px;margin-bottom:9px;font-size:13px;font-weight:600;line-height:1.5;}
.sectlbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);margin:20px 4px 8px;}
.solargrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:6px;}
.solargrid .spec b{font-size:16px;}
.summary{background:var(--card);border:1px solid #2e2e3a;border-radius:14px;padding:14px;font-size:12.5px;line-height:1.6;color:var(--text);white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);color:#08130c;font-weight:800;padding:12px 22px;border-radius:14px;font-size:14px;z-index:99;opacity:0;transition:opacity .3s;pointer-events:none;}
.toast.show{opacity:1;}
.hidden{display:none;}
.editlink{color:var(--blue);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;}
@media print{
  body{background:#fff;color:#111;}
  .topbar,.stepper,.btnrow,.bigbtn,.noprint{display:none!important;}
  .card,.rec,.alt,.sup,.summary,.note{background:#fff;border-color:#bbb;color:#111;box-shadow:none;}
  .recname,.spec b,.pill b{color:#111;}
  .rec{border-color:#111;}
  .hint,.recsub,.sup p,.alt p,.spec span{color:#444;}
}

.sourcebar{margin:18px 4px 0;padding-top:14px;border-top:1px solid #2e2e3a;color:var(--dim);font-size:11.5px;line-height:1.55;text-align:center}
.sourcebar a{color:var(--blue);font-weight:700;text-decoration:none}
.data-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(62,194,107,.09);border:1px solid rgba(62,194,107,.28);color:var(--green);font-size:11px;font-weight:800;letter-spacing:.25px;margin:0 0 12px}
.install-note{background:rgba(245,216,10,.07);border:1px solid rgba(245,216,10,.25);border-radius:12px;padding:10px 12px;color:var(--text);font-size:12px;line-height:1.5;margin:0 0 12px}
button,select,input{touch-action:manipulation}
button:focus-visible,select:focus-visible,input:focus-visible,.editlink:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (min-width:720px){
  #app{padding-top:22px}
  .specgrid{grid-template-columns:repeat(3,1fr)}
  .solargrid{grid-template-columns:repeat(6,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}