:root{
  --bg:#f4f6f8;--surface:#fff;--text:#17212b;--muted:#667085;--border:#dde3ea;
  --blue:#2869e6;--purple:#7257f5;--green:#087a5b;--orange:#b54708;--dark:#15202b;
  --shadow:0 10px 30px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--text)}
#app{max-width:1220px;margin:0 auto;padding:22px}
.hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;background:linear-gradient(135deg,#142033,#344054);color:#fff;padding:28px;border-radius:20px;box-shadow:var(--shadow)}
.hero h1{margin:4px 0 8px;font-size:clamp(28px,4vw,42px);line-height:1.08}.hero p{margin:0;color:#d0d5dd;max-width:760px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:#98a2b3}
.heroActions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:10px;padding:11px 14px;font-weight:700;cursor:pointer}.btnPrimary{background:#fff;color:#101828}.btnSecondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
.statusbar{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;padding:10px 4px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 18px}.tab{border:1px solid var(--border);background:#fff;padding:11px 15px;border-radius:10px;font-weight:700;cursor:pointer}.tab.active{background:var(--dark);border-color:var(--dark);color:#fff}
.panel{display:none}.panel.active{display:block}.systems,.quoteSystems,.charts2,.editColumns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.systemCard,.quoteCard,.chartCard,.kpiCard,.editorBox,.resultCard,.notice{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 4px 16px rgba(16,24,40,.035)}
.systemA{border-top:5px solid var(--blue)}.systemB{border-top:5px solid var(--purple)}.systemLabel{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.08em}.systemCard h2{margin:6px 0 16px}
.metricGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{background:#f6f8fb;border-radius:11px;padding:12px}.metric span{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:20px;margin-top:3px}
.kpiRow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}.kpiCard span{color:var(--muted);font-size:12px}.kpiCard strong{display:block;font-size:20px;margin-top:5px}
.charts2{margin-top:16px}.chartCard{min-height:360px}.chartCard canvas{max-height:290px}
.notice{margin-top:16px;background:#fff8eb;color:#8a4b0f}.sectionHeader{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.sectionHeader h2{margin:4px 0 0}
.tableWrap{overflow:auto;background:#fff;border:1px solid var(--border);border-radius:16px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:12px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}th:first-child,td:first-child{text-align:left}th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.editorBox{margin-top:16px}.formGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.formGrid.compact{grid-template-columns:repeat(3,1fr)}.field label{display:block;font-size:12px;font-weight:700;color:#344054;margin-bottom:5px}.field input,.field select,.quoteControls input,.quoteControls select{width:100%;min-height:42px;border:1px solid var(--border);border-radius:9px;background:#fff;padding:9px 10px;font-size:16px}
.quoteControls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:16px}.quoteSystems{margin-bottom:16px}.quoteCard h3{margin-top:0}.costBreakdown{margin-top:15px;display:grid;gap:8px}.costLine{display:flex;justify-content:space-between;color:#475467}.costLine strong{color:#17212b}.totalCost{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--border);margin-top:14px;padding-top:14px}.totalCost strong{font-size:26px}.resultCard{margin-top:16px;font-size:16px}.resultCard.good{border-color:#9fe3c8;background:#ecfdf3;color:#05603a}
.versionsList{display:grid;gap:10px}.versionItem{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:13px;padding:14px}.versionMeta{display:flex;flex-direction:column}.versionMeta small{color:var(--muted)}.restoreBtn{border:1px solid var(--border);background:#fff;border-radius:9px;padding:8px 11px;cursor:pointer}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(244,246,248,.94);z-index:1000;font-weight:700}.overlay.error{padding:20px}.overlay.error>div{background:white;border:1px solid var(--border);border-radius:16px;padding:24px;max-width:520px}.hidden{display:none!important}.muted{color:var(--muted)}
@media print{.editor-only,.tabs,.statusbar{display:none!important}body{background:#fff}#app{max-width:none;padding:0}.panel{display:block!important;page-break-inside:auto}.systemCard,.chartCard,.quoteCard,.kpiCard,.tableWrap{box-shadow:none;break-inside:avoid}}
@media(max-width:820px){#app{padding:12px}.hero{align-items:flex-start;flex-direction:column}.systems,.quoteSystems,.charts2,.editColumns,.kpiRow,.quoteControls{grid-template-columns:1fr}.metricGrid{grid-template-columns:1fr 1fr}.formGrid,.formGrid.compact{grid-template-columns:1fr}.chartCard{min-height:320px}}

.btnSave{background:#087a5b;color:#fff;border:1px solid #087a5b}
.btnSave:hover{filter:brightness(.95)}
.manualSaveBox{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:16px;padding:16px 18px;border:1px solid #9fe3c8;
  background:#ecfdf3;border-radius:14px
}
.manualSaveBox strong{display:block;color:#05603a}
.manualSaveBox span{display:block;color:#3f6f60;font-size:12px;margin-top:3px}
.saveFlash{position:fixed;right:20px;bottom:20px;z-index:2000;background:#101828;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.2);font-weight:700}
@media(max-width:820px){.manualSaveBox{align-items:stretch;flex-direction:column}.manualSaveBox .btn{width:100%}}