:root{--bg:#0E141A;--panel:#141D25;--line:#22303C;--tx:#DCE5EC;--dim:#7B8C9B;--soare:#E9B441;
  --disp:"IBM Plex Sans Condensed",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:var(--disp);
  font-weight:300;overflow:hidden;-webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0}canvas{display:block}
.hud{position:absolute;top:0;left:0;padding:16px 18px;pointer-events:none;max-width:56%}
.hud .co{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.hud .big{font-size:clamp(26px,3.6vw,42px);font-weight:600;letter-spacing:-.02em;line-height:1;
  margin-top:6px;font-variant-numeric:tabular-nums}
.hud .st{font-family:var(--mono);font-size:12px;margin-top:8px;line-height:1.7;color:var(--dim)}
.hud .st b{font-weight:500;color:var(--tx)}
.vis{color:var(--soare)}.hid{color:#7E93AC}
.panel{position:absolute;right:0;top:0;bottom:0;width:312px;background:var(--panel);
  border-left:1px solid var(--line);padding:16px;overflow-y:auto;font-size:13px}
.panel h3{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:22px 0 10px;font-weight:500}
.panel h3:first-child{margin-top:0}
.row{display:flex;align-items:center;gap:10px;margin:9px 0}
.row label{font-family:var(--mono);font-size:10.5px;color:var(--dim);width:50px;flex:none;letter-spacing:.05em}
.row output{font-family:var(--mono);font-size:11.5px;width:62px;flex:none;text-align:right;
  font-variant-numeric:tabular-nums}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:2px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--soare);cursor:pointer}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--soare)}
select{width:100%;background:#0E161D;color:var(--tx);border:1px solid var(--line);border-radius:2px;
  padding:6px;font-family:var(--mono);font-size:11px}
input[type=text],input[type=tel],input[type=email]{flex:1;min-width:0;background:#0E161D;color:var(--tx);border:1px solid var(--line);
  border-radius:2px;padding:6px;font-family:var(--mono);font-size:11px}
input[type=text]::placeholder,input[type=tel]::placeholder,input[type=email]::placeholder{color:#4A5B6C}
.tabs{display:flex;gap:5px;margin:0 0 14px}
.tabs button{flex:1;padding:7px 4px;display:flex;align-items:center;justify-content:center;gap:5px;
  white-space:normal;line-height:1.25;text-align:center;letter-spacing:.04em}
.tabs button .n{font-weight:600;color:var(--soare);flex:none}
#pvChart{display:block;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
button{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:2px;
  padding:6px 9px;cursor:pointer}
button:hover{border-color:#3A4C5C;color:var(--tx)}
button[aria-pressed=true]{background:#243444;color:var(--tx);border-color:#3A4C5C}
button:focus-visible{outline:2px solid var(--soare);outline-offset:1px}
.drop{border:1px dashed #33465A;border-radius:3px;padding:16px 12px;text-align:center;
  font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.6;cursor:pointer}
.drop.on{border-color:var(--soare);color:var(--soare)}
.note{font-family:var(--mono);font-size:10px;color:#5F7183;line-height:1.75;margin-top:8px}
.times{font-family:var(--mono);font-size:11.5px;line-height:1.9;color:var(--dim)}
.times b{color:var(--tx);font-weight:500}
.corner{position:absolute;left:16px;bottom:12px;pointer-events:none}
#sky{width:186px;height:186px;display:block}
.legend{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.05em;margin-top:4px}
#load{position:absolute;inset:0;display:none;place-items:center;background:rgba(14,20,26,.9);
  font-family:var(--mono);font-size:13px;color:var(--soare);letter-spacing:.1em}
@media (max-width:820px){
  .panel{width:100%;top:auto;height:48%;border-left:0;border-top:1px solid var(--line);
    padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .hud{max-width:100%;padding:10px 12px}
  .hud .big{font-size:24px}
  .hud .st{font-size:10.5px;line-height:1.55;margin-top:4px}
  .corner{display:none}}
@media (pointer:coarse){
  /* sub 16px, iOS face zoom automat la focus pe input */
  input[type=text],input[type=tel],input[type=email],textarea,select{font-size:16px}
  button{padding:8px 11px}}
@supports (height:100dvh){body{height:100dvh}}
body{-webkit-tap-highlight-color:transparent}

/* raportul de-o pagină: invizibil pe ecran, singurul lucru la print */
#report{display:none}
@media print{
  body:not(.printIns)>:not(#report){display:none!important}
  body.printIns>:not(#insRep){display:none!important}
  html,body{height:auto;overflow:visible;background:#fff}
  #report{display:block!important;color:#111;background:#fff;
    font-family:var(--disp);font-size:12px;line-height:1.55;font-weight:400}
  #report h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:#777;margin:14px 0 6px}
  #report b{font-weight:600}
  .repHead{font-size:15px;border-bottom:1px solid #bbb;padding-bottom:8px}
  .repShot{width:100%;max-height:280px;object-fit:cover;margin:10px 0;border-radius:3px}
  .repCols{display:flex;gap:26px}
  .repCols>div{flex:1}
  #report table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:10px}
  #report td,#report th{padding:3px 4px;border-bottom:1px solid #ddd;
    text-align:right;color:#111!important}
  #report td:first-child,#report th:first-child{text-align:left}
  #report table.cmp tr.best td{color:#8A6300!important;font-weight:600}
  #report svg{width:100%;height:auto;margin-top:6px}
  #report svg text{fill:#555!important}
  .repFoot{margin-top:16px;font-family:var(--mono);font-size:9px;color:#999}
}
@page{margin:14mm}

/* harta pentru ales locul */
#mapModal{position:fixed;inset:0;background:rgba(8,12,16,.72);z-index:40;display:grid;place-items:center}
#mapModal[hidden]{display:none}
.mapBox{width:min(92vw,720px);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:10px}
.mapTop{display:flex;gap:6px;margin-bottom:8px}
.mapTop input{flex:1}
#mapEl{height:min(60vh,440px);border:1px solid var(--line);background:#0B1219}
.mapBot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}

/* introducerea / turul */
#intro{position:fixed;inset:0;background:rgba(8,12,16,.78);z-index:50;display:grid;place-items:center}
#intro[hidden]{display:none}
.introBox{width:min(92vw,440px);background:var(--panel);border:1px solid var(--line);
  border-radius:4px;padding:22px 24px;max-height:88vh;max-height:calc(100dvh - 40px);overflow:auto}
.introBox h2{margin:0;font-weight:600;font-size:26px;letter-spacing:-.01em}
.introLogo{display:block;height:32px;width:auto}
.introBox .tag{font-family:var(--mono);font-size:11px;color:var(--soare);margin:4px 0 6px;line-height:1.6}
.introBox ol{margin:8px 0 16px;padding-left:20px;line-height:1.8;font-size:13.5px}
.introBox ol li{margin:2px 0}

/* comparația panourilor */
table.cmp{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:9.5px;margin-top:10px}
table.cmp th{color:var(--dim);font-weight:400;text-align:right;padding:2px 3px;border-bottom:1px solid var(--line);white-space:nowrap}
table.cmp td{text-align:right;padding:3px;color:var(--tx);cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap}
table.cmp td:first-child,table.cmp th:first-child{text-align:left;max-width:118px;overflow:hidden;text-overflow:ellipsis}
table.cmp td a{color:var(--dim);text-decoration:none;padding:0 2px}
table.cmp td a:hover{color:var(--tx)}
table.cmp tr.best td{color:var(--soare)}
table.cmp tr.on td:first-child{text-decoration:underline;text-underline-offset:2px}
table.cmp tr:hover td{background:#1B2733}

/* consum: grila celor 12 luni + rândurile ascunse */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:4px 0}
.mgrid label{display:flex;flex-direction:column;gap:1px;font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.05em}
.mgrid input{width:100%;min-width:0;box-sizing:border-box;background:#0E161D;color:var(--tx);border:1px solid var(--line);
  border-radius:4px;padding:3px 4px;font-size:11px;font-family:var(--mono)}
.mgrid input::placeholder{color:#4A5B6C}
.mgrid[hidden],.row[hidden],.note[hidden]{display:none}
input[type=range]:disabled{opacity:.35}

/* BOM: componente și cost */
table.cmp.bom td{cursor:default}
table.cmp.bom td.nm{text-align:left;white-space:normal;line-height:1.35}
table.cmp.bom td.nm .dim{color:var(--dim)}
table.cmp.bom td.nm a{color:var(--dim);text-decoration:none}table.cmp.bom td.nm a:hover{color:var(--tx)}
table.cmp.bom tr.tot td{border-top:1px solid var(--line);color:var(--tx);font-weight:600}
table.cmp.bom tr:hover td{background:transparent}

/* grupuri pliabile pentru setările de detaliu + butonul „următorul pas" */
details.adv{margin:14px 0 4px;border-top:1px solid var(--line);padding-top:9px}
details.adv>summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);user-select:none}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"▸";display:inline-block;width:1.1em;color:var(--soare)}
details.adv[open]>summary::before{content:"▾"}
details.adv>summary:hover{color:var(--tx)}
details.adv[open]{padding-bottom:4px}
button.next{display:block;width:100%;margin:22px 0 6px;padding:10px 8px;border-color:#7A6330;color:var(--soare)}
button.next:hover{background:#243444;color:var(--tx);border-color:var(--soare)}
#payOut .dim{color:var(--dim);font-size:11px}
#roBox[hidden],#loanBox[hidden]{display:none}
#cfChart{display:block;margin-top:8px}
/* legenda orelor de soare */
#shLegend{margin:8px 0 2px;font-family:var(--mono);font-size:10px;color:var(--dim)}
#shLegend[hidden]{display:none}
#shLegend .bar{height:8px;border-radius:2px;margin:4px 0 2px}
#shLegend .ticks{display:flex;justify-content:space-between}
#shLegend .at{color:var(--tx);margin-top:4px}
#ptBox{margin:8px 0 2px;font-family:var(--mono);font-size:10px;color:var(--dim)}
#ptBox[hidden],#bEdBox[hidden],#bDrBox[hidden],#povRow[hidden]{display:none}
#ptBox .ptc{display:flex;gap:4px;align-items:stretch}
#ptBox .pty{display:flex;flex-direction:column;justify-content:space-between;min-width:30px;text-align:right}
#ptCv{flex:1;min-width:0;height:130px;image-rendering:pixelated;border-radius:3px;background:#1b2130;cursor:crosshair}
#ptBox .ptx{position:relative;height:13px;margin:2px 0 4px 34px}
#ptBox .ptx span{position:absolute;transform:translateX(-50%);white-space:nowrap}
#ptBox .ptleg{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:4px}
#ptBox .ptleg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
#ptBox .ptleg b{font-weight:400}
#ptSum{color:var(--tx)}

/* pagina dedicată „studiu de însorire" (/insorire): același motor, alt panou */
body:not(.ins) .insOnly{display:none!important}
body.ins .pvOnly{display:none!important}
#pgI .u{flex:none;color:var(--dim);font-size:11px;margin-left:6px}
#pgI input[type=time]{flex:1;min-width:0}
#pgI input[type=text]{flex:1;min-width:0}
#insPlanCv{width:100%;height:auto;aspect-ratio:1;border-radius:4px;background:#f4f2ee;margin:6px 0 8px;display:block}
#insList{margin:6px 0;font-family:var(--mono);font-size:11px}
#insList .r{display:flex;gap:6px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line)}
#insList .r input{flex:1;min-width:0;font-size:11px;padding:2px 4px}
#insList .r button{flex:none;padding:2px 7px}
#insOut{font-family:var(--mono);font-size:11px;margin:8px 0}
#insOut table{width:100%;border-collapse:collapse}
#insOut td,#insOut th{padding:3px 4px;border-bottom:1px solid var(--line);text-align:right}
#insOut td:first-child,#insOut th:first-child{text-align:left}
#insOut tr.sel{background:rgba(255,196,0,.12)}
#insOut tr[data-k]{cursor:pointer}
#insOut button.insX{padding:0 5px;font-size:10px;line-height:16px}
.insK{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
#insOut canvas{width:100%;height:46px;display:block;margin:6px 0 2px;border-radius:3px}
#insRep{display:none}
@media print{
  @page{size:A4 landscape;margin:9mm}
  #insRep{display:block!important;color:#111;background:#fff;font-family:var(--disp);font-size:10.5px;line-height:1.45}
  #insRep .pg{page-break-after:always;break-after:page;position:relative;height:190mm;overflow:hidden}
  #insRep .pg:last-child{page-break-after:auto;break-after:auto}
  #insRep h1{font-size:18px;margin:0 0 4px;letter-spacing:.02em}
  #insRep h2{font-size:12.5px;margin:10px 0 4px}
  #insRep p{margin:0 0 6px}
  #insRep table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:9px}
  #insRep td,#insRep th{border:1px solid #bbb;padding:2px 4px;text-align:right}
  #insRep td:first-child,#insRep th:first-child{text-align:left}
  #insRep .cols{display:flex;gap:7mm}
  #insRep .cols>div{flex:1;min-width:0}
  #insRep img.plan{height:168mm;width:auto;display:block}
  #insRep .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm}
  #insRep .grid img{width:100%;display:block;border:1px solid #ccc}
  #insRep .grid div{font-family:var(--mono);font-size:8.5px;text-align:center}
  #insRep .cartus{position:absolute;right:0;bottom:0;width:118mm;border:1.2px solid #111;font-family:var(--mono);font-size:8.5px}
  #insRep .cartus td{border:1px solid #111;text-align:left;padding:2px 4px}
  #insRep .cartus.left{right:auto;left:0;bottom:9mm}
  #insRep .foot{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:7.5px;color:#666;max-width:150mm}
  #insRep .bar{height:8px;display:block;width:100%}
}
.chipLink{display:inline-flex;align-items:center;padding:6px 10px;font-family:var(--mono);font-size:11px;color:var(--soare);text-decoration:none;border:1px dashed currentColor;border-radius:4px}

/* instalatori: bara de brand, formularul de oferte; licența studiului; filigranul ciornei */
#brand{display:flex;gap:10px;align-items:center;margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--bc,var(--soare));border-radius:3px;background:rgba(255,255,255,.02)}
#brand img{max-height:34px;max-width:90px;object-fit:contain;background:#fff;border-radius:2px;padding:2px}
#brand .bn{font-weight:600;font-size:13px}
#brand .bc{font-family:var(--mono);font-size:10.5px;color:var(--dim);line-height:1.5}
#brand .bc a{color:var(--dim)}
#offBox textarea{flex:1;min-width:0;background:var(--hi,#1B2733);color:var(--tx);border:1px solid var(--line);border-radius:2px;font:inherit;font-size:12px;padding:5px 6px;resize:vertical}
#offBox .consent,#payBox .consent{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--dim);line-height:1.45;margin:6px 0}
#offBox .consent input{margin-top:2px}
#offOut.ok{color:#3fb950}#offOut.err,#payOut2.err{color:#e5484d}
#payBox{margin:8px 0;padding:8px 10px;border:1px solid var(--line);border-radius:3px}
@media print{
  #insRep.draft .pg::after{content:attr(data-wm);position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) rotate(-28deg);
    font-size:64px;font-weight:700;letter-spacing:.08em;color:rgba(200,30,40,.13);white-space:nowrap;pointer-events:none}
  #report .repBrand{display:flex;gap:12px;align-items:center;border-bottom:2px solid var(--bc,#E9B441);padding-bottom:6px;margin-bottom:8px}
  #report .repBrand img{max-height:48px;max-width:160px;object-fit:contain}
}
.chipLink[hidden]{display:none}
.note a,.consent a{color:var(--soare)}