*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #eef1f5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #10151c;
  -webkit-font-smoothing: antialiased;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: .35; }

.container { max-width: 1080px; margin: 0 auto; padding: 40px 28px 64px; }

.header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.header-tag { font: 600 12px/1 ui-monospace, 'Cascadia Code', 'Consolas', monospace; letter-spacing: .14em; text-transform: uppercase; color: #2a5db0; margin-bottom: 12px; }
.header h1 { font: 600 30px/1.15 system-ui, sans-serif; margin: 0; letter-spacing: -.015em; color: #10151c; }
.header p { font: 400 15px/1.55 system-ui, sans-serif; margin: 9px 0 0; color: #5b6675; max-width: 560px; }
.mw-box { background: #fff; border: 1px solid #e1e7ef; border-radius: 12px; padding: 14px 18px; min-width: 200px; box-shadow: 0 1px 2px rgba(16,21,28,.04); }
.mw-label { font: 500 11px/1.2 ui-monospace, 'Cascadia Code', 'Consolas', monospace; letter-spacing: .06em; text-transform: uppercase; color: #8a96a6; margin-bottom: 8px; }
.mw-value { font: 600 24px/1 ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #10151c; }
.mw-value span { font-size: 14px; color: #8a96a6; }
.mw-note { font: 400 12px/1.4 system-ui, sans-serif; color: #8a96a6; margin-top: 6px; }

.card { background: #fff; border: 1px solid #e1e7ef; border-radius: 16px; padding: 24px 26px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(16,21,28,.05); }

.input-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: end; }
.input-label { display: block; font: 500 13px/1.2 system-ui, sans-serif; color: #5b6675; margin-bottom: 8px; }
.input-label .dim { color: #a3adba; }
.input-wrap { position: relative; }
.input-field {
  width: 100%; font: 600 22px/1 ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #10151c;
  background: #f6f8fb; border: 1.5px solid #dde4ed; border-radius: 10px;
  padding: 14px 52px 14px 16px; outline: none; transition: border-color .15s, background .15s;
}
.input-field:focus { border-color: #2a5db0; background: #fff; }
.input-suffix { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 500 13px ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #a3adba; }
.op-sign { font: 300 26px/1 system-ui, sans-serif; color: #c3cdd9; padding-bottom: 14px; }
.net-box { background: #f0f4fa; border: 1px solid #dde6f4; border-radius: 10px; padding: 11px 16px; }
.net-box-label { display: block; font: 500 12px/1.2 system-ui, sans-serif; color: #2a5db0; margin-bottom: 7px; }
.net-box-label .dim { color: #7e9dd0; }
.net-box-value { font: 600 24px/1 ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #1c3a6e; }
.net-box-value span { font-size: 13px; color: #7e9dd0; }

.two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; margin-bottom: 22px; }

.left-card { display: flex; flex-direction: column; }
.section-label { font: 500 12px/1 ui-monospace, 'Cascadia Code', 'Consolas', monospace; letter-spacing: .08em; text-transform: uppercase; color: #8a96a6; }
.big-value { font: 600 46px/1 ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #2a5db0; letter-spacing: -.02em; margin-top: 14px; }
.big-sub { font: 500 14px system-ui, sans-serif; color: #8a96a6; margin-top: 6px; }

.bar-chart { display: flex; height: 46px; border-radius: 9px; overflow: hidden; margin-top: 24px; background: #f0f2f6; }
.bar-segment { height: 100%; transition: width .25s ease; }

.legend { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.legend-row { display: flex; align-items: center; gap: 10px; }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legend-label { font: 500 14px system-ui, sans-serif; color: #3b4654; flex: 1; }
.legend-pct { font: 500 13px ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #8a96a6; width: 48px; text-align: right; }
.legend-val { font: 600 14px ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #10151c; width: 96px; text-align: right; }

.totals-row { margin-top: auto; padding-top: 20px; display: flex; gap: 24px; border-top: 1px solid #eef1f5; margin-top: 22px; }
.total-big { font: 600 22px/1 ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #10151c; }
.total-sub { font: 400 12px system-ui, sans-serif; color: #8a96a6; margin-top: 5px; }

.breakdown-label { font: 500 12px/1 ui-monospace, 'Cascadia Code', 'Consolas', monospace; letter-spacing: .08em; text-transform: uppercase; color: #8a96a6; margin-bottom: 18px; }
.bd-row { display: flex; justify-content: space-between; padding: 11px 0; }
.bd-row + .bd-row { border-top: 1px dashed #eef1f5; }
.bd-row .label { color: #5b6675; font: 400 15px system-ui, sans-serif; }
.bd-row .label .dim { color: #a3adba; font-size: 13px; }
.bd-row .label-dark { color: #3b4654; font-weight: 500; font: 500 15px system-ui, sans-serif; }
.bd-row .val { font: 600 15px ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #10151c; }
.bd-row .val-red { font: 600 15px ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #b34a3a; }
.bd-row-accent { background: #fafbfd; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 6px; border-top: 1px solid #e8edf3; }
.bd-row-total { border-top: 1px solid #e8edf3; padding: 13px 0; }
.bd-final { display: flex; justify-content: space-between; align-items: center; padding: 15px 14px; margin-top: 8px; background: #f0f4fa; border: 1px solid #dde6f4; border-radius: 10px; }
.bd-final .label { color: #1c3a6e; font-weight: 600; }
.bd-final .val { font: 600 19px ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #2a5db0; }

.ref-section { margin-top: 4px; }
.ref-title { font: 500 12px/1 ui-monospace, 'Cascadia Code', 'Consolas', monospace; letter-spacing: .08em; text-transform: uppercase; color: #8a96a6; margin-bottom: 6px; }
.ref-desc { font: 400 13px/1.5 system-ui, sans-serif; color: #8a96a6; margin: 0 0 18px; }
.ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ref-card { background: #fff; border: 1px solid #e1e7ef; border-radius: 16px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(16,21,28,.05); }
.ref-card h3 { font: 600 17px system-ui, sans-serif; margin: 0 0 16px; color: #10151c; }
.ref-card h3 span { font-weight: 400; color: #8a96a6; font-size: 14px; }
.ref-rows { display: flex; flex-direction: column; gap: 8px; }
.ref-row { border: 1px solid #eef1f5; border-radius: 9px; padding: 13px 15px; border-left-width: 3px; }
.ref-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ref-row-title { font: 600 14px system-ui, sans-serif; color: #10151c; }
.ref-row-val { font: 600 14px ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #2a5db0; white-space: nowrap; }
.ref-row-prag { font: 500 12px ui-monospace, 'Cascadia Code', 'Consolas', monospace; color: #8a96a6; margin-top: 4px; }
.ref-row-nota { font: 400 12.5px/1.45 system-ui, sans-serif; color: #5b6675; margin-top: 7px; }

.footer-note { font: 400 12px/1.5 system-ui, sans-serif; color: #a3adba; margin: 22px 0 0; text-align: center; }

@media (max-width: 768px) {
  .input-grid { grid-template-columns: 1fr; }
  .op-sign { display: none; }
  .two-col { grid-template-columns: 1fr; }
  .ref-grid { grid-template-columns: 1fr; }
  .header { flex-direction: column; }
  .big-value { font-size: 36px; }
}