:root{
  --bg:#f2f5f7;--surface:#ffffff;--surface-2:#eef2f5;--text:#111827;--muted:#667085;
  --line:#d7dde5;--accent:#111827;--good:#ecfdf3;--good-line:#12b76a;
  --warn:#fffaeb;--warn-line:#f79009;--bad:#fff1f3;--bad-line:#f04438;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
}
button,input,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.app{max-width:1000px;margin:0 auto;padding:16px 14px 48px}
.header{padding:6px 2px 14px}
.brand{font-size:12px;font-weight:800;letter-spacing:.055em;color:var(--muted)}
h1{font-size:30px;line-height:1.08;margin:5px 0 6px}
.lead{font-size:14px;line-height:1.45;color:var(--muted);margin:0}
.runtime{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:11px
}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:6px 9px;font-size:12px;font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:#98a2b3}.dot.gooddot{background:#12b76a}.dot.warndot{background:#f79009}
.install-hint{background:#eef4ff;border:1px solid #b2ccff;border-radius:14px;padding:12px 13px;margin:0 0 14px;font-size:13px;line-height:1.45}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.tab{min-height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:15px;font-weight:850;padding:10px}
.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.panel{display:none}.panel.active{display:block}
.card{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:16px;margin-bottom:14px}
.card h2{font-size:18px;margin:0 0 4px}.card h3{font-size:15px;margin:0 0 5px}
.sub{font-size:13px;color:var(--muted);line-height:1.45;margin:0 0 14px}
.grid2,.grid3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.full{grid-column:1/-1}
label{display:block;font-size:13px;font-weight:750;min-width:0}
.field{display:flex;align-items:center;gap:8px;margin-top:6px;min-width:0}
input,select{
  width:100%;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:11px;
  background:#fff;color:var(--text);padding:10px 12px;font-size:16px;outline:none
}
input:focus,select:focus{border-color:#667085;box-shadow:0 0 0 3px rgba(17,24,39,.08)}
.unit{flex:0 0 auto;min-width:34px;color:var(--muted);font-size:13px}
button{
  min-height:46px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--text);
  padding:10px 14px;font-size:15px;font-weight:850;cursor:pointer
}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #84adff;outline-offset:2px}
.estimate,.summary-box{background:var(--surface-2);border-radius:14px;padding:14px;margin-top:12px}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.small{font-size:12px;color:var(--muted);line-height:1.5}
.divider{height:1px;background:var(--line);margin:15px 0}
.result-hero{background:#101828;color:#fff;border-radius:16px;padding:18px}
.eyebrow{font-size:12px;opacity:.72}.big{font-size:44px;font-weight:900;line-height:1;margin:6px 0}.hero-note{font-size:13px;opacity:.78}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:10px}
.metric{background:var(--surface-2);border-radius:13px;padding:12px;min-width:0}
.metric .k{font-size:11px;color:var(--muted);line-height:1.25}.metric .v{font-size:21px;font-weight:850;margin-top:4px;word-break:break-word}
.status{border-radius:12px;padding:12px 13px;margin-top:10px;font-size:14px;line-height:1.45}
.status.good{background:var(--good);border:1px solid var(--good-line)}
.status.warn{background:var(--warn);border:1px solid var(--warn-line)}
.status.bad{background:var(--bad);border:1px solid var(--bad-line)}
.hidden{display:none!important}
details{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
summary{font-size:15px;font-weight:850;cursor:pointer;min-height:42px;padding:6px 0}
.work{font-size:14px;line-height:1.72;color:#344054;padding:7px 0}
.pipe-head,.pipe-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end}
.pipe-head{font-size:11px;color:var(--muted);padding:0 2px 6px}.pipe-row{margin-bottom:8px}
.pipe-row button{width:46px;padding:8px}
.footer{font-size:11px;color:var(--muted);text-align:center;padding:4px 6px 0}
@media(max-width:760px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid2,.grid3,.metrics{grid-template-columns:1fr}h1{font-size:26px}.app{padding-left:11px;padding-right:11px}.big{font-size:39px}}
@media print{
  body{background:#fff;padding:0}.app{max-width:none;padding:0}.no-print,.tabs,.install-hint,.runtime{display:none!important}
  .panel{display:block!important}.card{break-inside:avoid;border-color:#bbb}.result-hero{background:#fff;color:#000;border:1px solid #bbb}
}