*{box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#f4f6f9;color:#17253a;margin:0;padding:20px}main{max-width:800px;margin:auto}
h1{font-size:24px}.panel{background:#fff;padding:22px;border-radius:14px;box-shadow:0 3px 18px #15243b13;margin:18px 0}
label{display:block;font-weight:600;margin:10px 0 5px}input[type=text]{width:100%;font-size:19px;padding:10px;border:1px solid #bbc5d3;border-radius:8px}
button{background:#173c70;color:white;border:0;border-radius:8px;padding:10px 16px;font-size:15px;cursor:pointer}
.secondary{background:#65758b}.period{display:flex;gap:8px}.period button{flex:1;background:#e5ebf2;color:#173c70}.period button.active{background:#173c70;color:white}
.cost{border-top:1px solid #dde4ec;margin-top:22px;padding-top:10px}.cost h2{font-size:20px;margin-bottom:8px}
.mode{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0}.mode label{font-weight:500;margin:0;cursor:pointer}
.detail-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,170px) auto;gap:8px;align-items:center;margin:8px 0}
.detail-row input{min-width:0}.detail-row .name{font-size:16px}.detail-row .amount{font-size:16px;text-align:right}
.detail-row button{background:#a33a3a}.add{margin:10px 0}.total{background:#f0f4f9;border-radius:8px;padding:12px;margin:10px 0;font-weight:650}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metric{background:#f0f4f9;padding:15px;border-radius:10px}.metric small{display:block;color:#52637a}.metric strong{font-size:22px;overflow-wrap:anywhere}
.note{color:#5b6675;font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}#error{color:#b42318}
@media(max-width:540px){.grid{grid-template-columns:1fr}.detail-row{grid-template-columns:minmax(0,1fr) minmax(90px,125px) auto}.detail-row button{padding:10px 8px}}

input:focus-visible,button:focus-visible{outline:3px solid #a97619;outline-offset:3px}button{min-height:44px}