body.page-pay-splits .wrap { max-width:760px; }

.page-head { padding:2.5rem 0 1.2rem; }
.hl { background:var(--c-green); }

.win { margin-bottom:1.6rem; }
.win-body { padding:1.3rem 1.4rem 1.4rem; }

.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.6rem; }
.stat { background:var(--win); border:2.5px solid var(--ink); border-radius:var(--radius); box-shadow:4px 4px 0 var(--shadow); padding:0.9rem 1rem; }
.stat .k { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); }
.stat .v { font-size:1.4rem; font-weight:800; letter-spacing:-0.02em; margin-top:2px; }
.stat .v.bad { color:var(--c-red); }

.pay-wrap { display:flex; align-items:center; gap:10px; border:2.5px solid var(--ink); border-radius:9px; background:var(--win-2); padding:0.6rem 0.9rem; }
.pay-wrap .prefix { font-size:1.5rem; font-weight:700; color:var(--text-mid); }
.pay-input { flex:1; border:none; background:transparent; color:var(--text-hi); font-size:1.6rem; font-weight:800; letter-spacing:-0.02em; outline:none; width:100%; }
.pay-input::-webkit-outer-spin-button, .pay-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.pay-input { -moz-appearance:textfield; }
.pay-cadence { font-family:var(--mono); font-size:0.7rem; color:var(--text-dim); white-space:nowrap; }

.chart { display:flex; height:26px; border:2.5px solid var(--ink); border-radius:7px; overflow:hidden; margin-bottom:1.2rem; background:var(--bg-accent); }
.chart-seg { height:100%; transition:width .25s ease; min-width:0; }

.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.card-header h2 { font-size:0.95rem; font-weight:700; }
.cat { display:grid; grid-template-columns:18px 1fr 76px 96px 30px; gap:0.7rem; align-items:center; padding:0.6rem 0; border-bottom:2px solid var(--ink); }
.cat:last-of-type { border-bottom:none; }
.cat .sw { width:14px; height:14px; border-radius:4px; border:2px solid var(--ink); }
.cat .nm { border:2px solid transparent; background:transparent; color:var(--text-hi); font-size:0.95rem; font-weight:600; padding:3px 5px; border-radius:6px; width:100%; outline:none; }
.cat .nm:hover { border-color:var(--ink); }
.cat .nm:focus { border-color:var(--c-green); background:var(--win-2); }
.pct-wrap { display:flex; align-items:center; gap:2px; border:2px solid var(--ink); border-radius:6px; background:var(--win-2); padding:2px 6px; }
.pct-wrap:focus-within { border-color:var(--c-green); }
.pct-input { width:100%; border:none; background:transparent; color:var(--text-hi); font-family:var(--mono); font-size:0.85rem; text-align:right; outline:none; }
.pct-input::-webkit-outer-spin-button, .pct-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.pct-input { -moz-appearance:textfield; }
.pct-wrap .ps { font-family:var(--mono); font-size:0.78rem; color:var(--text-dim); }
.cat .amt { font-family:var(--mono); font-size:0.9rem; font-weight:500; text-align:right; color:var(--text-hi); }
.cat .rm { border:2px solid var(--ink); background:var(--win-2); color:var(--text-mid); width:26px; height:26px; border-radius:6px; cursor:pointer; font-size:0.9rem; line-height:1; display:grid; place-items:center; transition:color .12s, border-color .12s; }
.cat .rm:hover { color:var(--c-red); border-color:var(--c-red); }

.btn { font-size:0.82rem; color:var(--text-hi); border-radius:8px; padding:0.4rem 0.85rem; box-shadow:3px 3px 0 var(--ink); background:var(--win-2); }
.btn:hover { transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.btn:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }

.total-bar { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; padding:0.7rem 0.9rem; border:2.5px solid var(--ink); border-radius:8px; font-weight:700; }
.total-bar .total-value { font-family:var(--mono); }
.total-bar.valid { background:color-mix(in srgb, var(--c-green) 18%, var(--win-2)); }
.total-bar.invalid { background:color-mix(in srgb, var(--c-red) 16%, var(--win-2)); }
.total-note { font-family:var(--mono); font-size:0.7rem; font-weight:500; color:var(--text-dim); margin-left:0.6rem; }

.legend { display:flex; flex-direction:column; }
.legend-row { display:grid; grid-template-columns:18px 1fr auto auto; gap:0.8rem; align-items:center; padding:0.6rem 0; border-bottom:2px solid var(--ink); }
.legend-row:last-child { border-bottom:none; }
.legend-row .sw { width:14px; height:14px; border-radius:4px; border:2px solid var(--ink); }
.legend-row .ln { font-weight:600; font-size:0.92rem; }
.legend-row .mo { font-family:var(--mono); font-size:0.9rem; text-align:right; }
.legend-row .yr { font-family:var(--mono); font-size:0.72rem; color:var(--text-dim); text-align:right; min-width:96px; }
.legend-head { color:var(--text-dim); font-family:var(--mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; }
.legend-head .ln { font-weight:500; }

body.page-pay-splits .footbar { margin-top:1.4rem; }

@media (max-width:560px){
  .summary-grid{grid-template-columns:1fr;}
  .cat{grid-template-columns:14px 1fr 64px 30px;}
  .cat .amt{display:none;}
  .legend-row .yr{display:none;}
  .legend-row{grid-template-columns:14px 1fr auto;}
}