:root{--radius: 14px;--ink: #2d2a45;--muted: #8b88a8;--line: #ece9f6;font-family:Segoe UI,system-ui,-apple-system,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:linear-gradient(160deg,#f6f3ff,#fef0f6,#eafcff);display:flex;justify-content:center;padding:32px 16px 64px}#app{width:100%;max-width:860px}header h1{margin:0 0 4px;font-size:clamp(1.6rem,4vw,2.4rem)}header p{margin:0 0 24px;color:var(--muted)}.card{background:#fff;border-radius:var(--radius);box-shadow:0 12px 40px -16px #503ca059;padding:22px;margin-bottom:24px}.currency-row{display:flex;align-items:center;gap:10px;margin-bottom:18px}.currency-row label{font-weight:600}.currency-row input{width:90px;text-align:center}.grid-head,.row{display:grid;grid-template-columns:minmax(120px,1.4fr) repeat(4,1fr);gap:8px;align-items:center}@media(max-width:640px){.grid-head,.row{grid-template-columns:minmax(110px,1.3fr) repeat(3,1fr)}.col-day{display:none}}@media(max-width:500px){.grid-head,.row{grid-template-columns:minmax(100px,1.3fr) repeat(2,1fr)}.col-week{display:none}}@media(max-width:400px){.grid-head,.row{grid-template-columns:minmax(90px,1.4fr) 1fr}.col-month{display:none}body{padding:20px 10px 48px}.card{padding:16px}}.grid-head{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:0 2px 6px}.grid-head .corner{text-align:left}.grid-head span{text-align:right;padding-right:8px}.row{padding:5px 0}.row.salary{border-bottom:2px solid var(--line);margin-bottom:6px;padding-bottom:12px}.row.salary .row-name{font-weight:700;font-size:1.05rem}.row-name{display:flex;align-items:center;gap:6px;font-weight:600}.row-name .emoji{font-size:1.25rem}.row-name input{border:none;border-bottom:1px dashed var(--line);border-radius:0;font-weight:600;padding:4px 2px}.row-name input:focus{border-bottom-color:#b9a6ff}input{font:inherit;width:100%;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;outline:none;background:#fbfaff;transition:border-color .12s,box-shadow .12s,background .12s}.num{text-align:right}input:focus{border-color:#b9a6ff;box-shadow:0 0 0 3px #aa8cff2e;background:#fff}input.derived{color:var(--muted)}.timeline{margin-top:6px}.months{display:grid;grid-template-columns:repeat(12,1fr);font-size:.72rem;color:var(--muted);margin-bottom:6px}.month{text-align:center;border-left:1px solid var(--line);padding-bottom:2px}.month:first-child{border-left:none}.bar{position:relative;height:88px;border-radius:12px;background:repeating-linear-gradient(90deg,#f4f1fb 0 1px,transparent 1px calc(100% / 12));overflow:visible}.seg{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font-weight:600;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.25);border-right:2px solid rgba(255,255,255,.6);cursor:default;transition:filter .12s,transform .12s}.seg:first-of-type{border-radius:12px 0 0 12px}.seg.free{border-radius:0 12px 12px 0;border-right:none}.seg:hover{filter:brightness(1.07);transform:translateY(-2px);z-index:5}.seg-label{padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ink);color:#fff;font-size:.78rem;font-weight:500;text-shadow:none;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:10}.tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--ink)}.seg:hover .tooltip{opacity:1}.dec-line{position:absolute;top:-4px;bottom:-4px;width:2px;background:#ee5253;z-index:6}.deficit-zone{position:absolute;top:0;height:100%;background:repeating-linear-gradient(45deg,#ee525340 0,#ee525340 8px,#ee525373 8px,#ee525373 16px);border-radius:0 12px 12px 0;z-index:4;pointer-events:none}