*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f4f6f8;color:#17202a}
button,input,select{font:inherit}
button{cursor:pointer}

.app{max-width:1440px;margin:0 auto;padding:24px}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.brand{font-size:28px;font-weight:800;letter-spacing:-.04em}
.brand span{font-weight:500;color:#6b7280}
.topbar p{margin:5px 0 0;color:#697386;font-size:14px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}

.layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.75fr);gap:18px;align-items:start}
.main-column,.result-column{display:grid;gap:16px}
.result-column{position:sticky;top:16px}

.card,.result-card{background:#fff;border:1px solid #e3e7ec;border-radius:16px;padding:20px}
.result-card{background:#111827;color:#fff;border-color:#111827}

.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.section-head h2{font-size:16px;margin:0 0 4px}
.section-head p{margin:0;color:#7a8492;font-size:13px}

.result-card .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#aeb7c5}
.hero-price{font-size:42px;font-weight:800;letter-spacing:-.05em;margin:6px 0 12px;overflow-wrap:anywhere}

.status{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:700}
.status.good{background:#dcfce7;color:#166534}
.status.warn{background:#fef3c7;color:#92400e}
.status.bad{background:#fee2e2;color:#991b1b}
.status.neutral{background:#e5e7eb;color:#374151}

.result-actions{margin-top:18px}

.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:700;background:#e8edf2;color:#18212b}
.btn.primary{background:#fff;color:#111827;width:100%}
.btn.secondary{background:#111827;color:#fff}
.btn.ghost{background:transparent;border:1px solid #d8dde4}
.btn.small{padding:8px 10px;font-size:12px}
.btn.tiny{padding:6px 9px;font-size:11px}

.badge{background:#eef2f7;color:#364152;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}

.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.compact{margin-top:16px}

.grid label,label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:#495465;min-width:0}

input,select{width:100%;border:1px solid #d8dee6;background:#fff;color:#17202a;border-radius:10px;padding:11px 12px;min-height:44px;outline:none}
input:focus,select:focus{border-color:#667085;box-shadow:0 0 0 3px #eef2f6}

.inline-inputs{display:flex;align-items:center;gap:7px}
.inline-inputs input{min-width:0}
.inline-inputs span{font-size:12px;color:#7a8492}

.material-row,.extra-row,.printer-row{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:10px;align-items:end;padding:12px 0;border-bottom:1px solid #edf0f3}
.material-row:first-child,.extra-row:first-child,.printer-row:first-child{padding-top:0}

.remove{background:#fff;border:1px solid #e1e5ea;border-radius:9px;padding:10px 12px;color:#8b1e1e}

.breakdown-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #edf0f3;font-size:13px}
.breakdown-row.total{font-weight:800;border-bottom:0;padding-top:13px}
.breakdown-row .muted{color:#7a8492}

.scenario{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0;border-bottom:1px solid #edf0f3;font-size:13px}
.scenario strong{font-size:14px}

.simulation{margin-top:14px;background:#f7f8fa;border-radius:12px;padding:14px}
.simulation strong{font-size:22px}

.empty{padding:12px 0;color:#7a8492;font-size:13px}
.history-item{padding:10px 0;border-bottom:1px solid #edf0f3}
.history-item:last-child{border-bottom:0}
.history-title{font-weight:700;font-size:13px}
.history-meta{color:#7a8492;font-size:11px;margin-top:3px}

footer{display:flex;justify-content:space-between;gap:10px;color:#8a93a0;font-size:12px;padding:22px 2px}

.pro-upload{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px dashed #9bbcf4;background:#f5f9ff;border-radius:12px;padding:13px 14px;margin-bottom:16px}
.pro-upload p,.pro-card p{margin:4px 0 0;color:#6f7b8a;font-size:12px;font-weight:500}
.pro-pill{display:inline-block;background:#e9f1ff;color:#1769e0;border-radius:999px;padding:3px 7px;font-size:10px;margin-left:4px}
.primary-btn{background:#1677ff!important;color:#fff!important}
.pro-card{background:#fff8e6;border:1px solid #f3d78b;border-radius:16px;padding:18px}
.pro-title{font-weight:800;font-size:15px}
.info-note{margin-top:12px;background:#eef6ff;color:#1769e0;border-radius:9px;padding:9px 11px;font-size:12px}

.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:100}
.modal-backdrop[hidden]{display:none}
.modal{width:min(520px,100%);background:#fff;border-radius:20px;padding:26px;position:relative;box-shadow:0 24px 70px rgba(15,23,42,.22)}
.modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:28px;color:#7a8492}
.pro-crown{font-size:34px}
.modal h2{margin:5px 0}
.modal>p{color:#697386;font-size:14px}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}

.plan{
  border:1px solid #dce2ea;
  background:#fff;
  border-radius:14px;
  padding:16px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:5px;
  transition:all .2s ease;
}

.plan span{font-size:22px;font-weight:800}
.plan small{color:#7a8492}

.plan:hover{
  border-color:#1677ff;
  background:#f4f8ff;
  box-shadow:0 0 0 1px #1677ff;
  transform:translateY(-2px);
}

.pro-list{padding-left:20px;color:#445063;font-size:13px;line-height:1.9}

@media(max-width:1000px){
  .layout{grid-template-columns:1fr}
  .result-column{position:static}
  .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){
  .app{padding:14px}
  .topbar{align-items:flex-start;flex-direction:column}
  .grid.three,.grid.two,.grid.four{grid-template-columns:1fr}
  .material-row,.extra-row,.printer-row{grid-template-columns:1fr 1fr}
  .material-row .remove,.extra-row .remove,.printer-row .remove{grid-column:2}
  .hero-price{font-size:36px}
  footer{flex-direction:column}
  .pro-upload{align-items:flex-start;flex-direction:column}
  .pro-upload .btn{width:100%}
  .plans{grid-template-columns:1fr}
}