:root{color-scheme:light dark;font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:#f6f7fb;color:#1d1f24;font-size:.95rem}.app{min-height:100vh;padding:32px 20px 48px;transition:background .2s ease,color .2s ease}.app--dark{background:#111216;color:#f6f7fb}.app__header{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:24px}.app__eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.9rem;font-weight:700;margin:0 0 4px;opacity:.7}.app__title{margin:0;font-size:1.7rem}.app__subtitle{margin:4px 0 0;opacity:.7}.calculator{display:flex;justify-content:center}.card{background:#fff;border-radius:16px;padding:14px;box-shadow:0 20px 50px #0d0f1414;max-width:320px;width:100%;justify-self:center}.app--dark .card{background:#1c1e24;box-shadow:0 20px 40px #00000073}.step-flow{width:100%;max-width:320px;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 20px 50px #0d0f1414}.app--dark .step-flow{background:#1c1e24;box-shadow:0 20px 40px #00000073}.step-flow__track{display:grid;grid-template-columns:1fr 1fr;width:200%;transition:transform .35s cubic-bezier(.4,0,.2,1)}.step-flow__track--controls{transform:translate(0)}.step-flow__track--results{transform:translate(-50%)}.step-flow__panel{width:100%}.step-flow__track--controls .step-flow__panel:last-child{visibility:hidden;height:0;overflow:hidden}.step-flow__track--results .step-flow__panel:first-child{visibility:hidden;height:0;overflow:hidden}.step-flow__panel .card{max-width:none;width:100%;box-shadow:none;border-radius:0;background:transparent}.card__header-left{display:flex;align-items:center;gap:8px}.button--back{padding:6px 10px;font-size:1.1rem;line-height:1;border-radius:8px}.button--calculate{width:100%;margin-top:6px;padding:10px;font-size:.95rem}@media (prefers-reduced-motion: reduce){.step-flow__track{transition:none}}.card__header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.form-grid{display:grid;gap:10px}.field{display:grid;gap:5px}.field span{font-weight:600}.field__inline{display:flex;align-items:center;gap:8px;font-weight:500}input,select{padding:8px 10px;font-size:.9rem;border-radius:10px;border:1px solid #d7dbe6;background:#fff;color:inherit}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.app--dark input,.app--dark select{background:#111216;border-color:#2f3342}.button{padding:7px 12px;border-radius:10px;border:1px solid #d7dbe6;background:transparent;color:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .1s ease,border .1s ease,background .1s ease}.button:hover:not(:disabled){transform:translateY(-1px);border-color:#9ea6bc}.button:disabled{opacity:.4;cursor:not-allowed}.button--active,.button--primary{background:#3b6cf4;color:#fff;border-color:transparent}.button--ghost{border-color:transparent;background:#3b6cf414}.button-group{display:flex;gap:6px;flex-wrap:wrap}.results__hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:10px}.results__label{margin:0;font-size:.85rem;opacity:.7}.results__value{margin:2px 0 0;font-size:1.15rem;font-weight:700}.results__rounding{margin:0 0 10px;font-size:.85rem;opacity:.7}.results__list{display:grid;gap:8px}.person-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border-radius:12px;background:#3b6cf414}.app--dark .person-row{background:#3b6cf429}.person-row__name{width:100%}.person-row__amount{font-weight:700;font-size:1rem;justify-self:end}.person-row__actions{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap}.person-row__adjustment{grid-column:1 / -1;font-size:.85rem;opacity:.7}@media (max-width: 640px){.app{padding:20px 16px 32px}.card{padding:16px}.step-flow{max-width:100%;border-radius:12px}.card__header{flex-direction:column;align-items:flex-start}.button-group{width:100%;gap:4px}.button-group .button{flex:1 1 auto;padding:6px 8px;font-size:.8rem;min-width:0}.person-row{grid-template-columns:1fr;align-items:start}.person-row__amount{justify-self:start}.results__value{font-size:1.2rem}}
