:root{color:#1f2937;background-color:#f9fafb;font-family:system-ui,Segoe UI,Hiragino Sans,Yu Gothic UI,sans-serif;line-height:1.5}*,:before,:after{box-sizing:border-box}body{margin:0}.container{max-width:960px;margin:0 auto;padding:16px}.card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px}.login{gap:12px;max-width:360px;display:grid}label{gap:4px;font-size:.9rem;display:grid}input,select,button{font:inherit;padding:6px 10px}button{cursor:pointer}.app-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.app-header div{align-items:center;gap:12px;display:flex}.muted{color:#6b7280}.error{color:#b91c1c;margin:0}.banner{background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:8px 12px}.banner.info{color:#1f2937;background:#eff6ff;border-color:#bfdbfe;margin:0 0 12px}h2{margin:0 0 12px;font-size:1.1rem}h3{margin:12px 0 4px;font-size:.95rem}.dashboard{gap:16px;display:grid}.month-picker{align-items:center;gap:8px;display:flex}.columns{grid-template:"main totals""main budget""main breakdown""main trend"1fr/minmax(0,2fr) minmax(0,1fr);align-items:start;gap:16px;display:grid}.main-column{grid-area:main;gap:16px;display:grid}.summary-totals{grid-area:totals}.summary-breakdown{grid-area:breakdown}.summary-trend{grid-area:trend}.budget-card{grid-area:budget}@media (width<=900px){.columns{grid-template:"totals""budget""main""breakdown""trend"/minmax(0,1fr)}}.form-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.form-grid .memo{grid-column:1/-1}.actions{gap:8px;margin-top:12px;display:flex}.transactions{border-collapse:collapse;width:100%;font-size:.9rem}.transactions th,.transactions td{text-align:left;border-bottom:1px solid #e5e7eb;padding:6px 8px}.transactions tr.editing{background:#eff6ff}.amount{text-align:right;white-space:nowrap}.transactions th.amount{text-align:right}.row-actions{white-space:nowrap}.row-actions button+button{margin-left:4px}.income{color:#047857}.expense{color:#b91c1c}.totals{gap:4px;margin:0;display:grid}.totals div,.by-category li{justify-content:space-between;display:flex}.totals dd{margin:0;font-weight:600}.by-category{margin:0;padding:0;font-size:.9rem;list-style:none}.summary-breakdown>div:first-child h3{margin-top:0}.budget-card{--state-ok:#0ca30c;--state-warning:#fab219;--state-over:#d03b3b}.budget-lines{gap:14px;margin:0;padding:0;list-style:none;display:grid}.budget-line.primary{border-bottom:1px solid #e5e7eb;padding-bottom:12px}.budget-head,.budget-amounts{justify-content:space-between;align-items:center;gap:8px;display:flex}.budget-name{overflow-wrap:anywhere;min-width:0;font-weight:600}.budget-line.primary .budget-name{font-size:1.05rem}.budget-state{white-space:nowrap;font-variant-numeric:tabular-nums;align-items:center;gap:4px;font-size:.85rem;font-weight:600;display:inline-flex}.state-icon{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.state-ok .state-icon{fill:var(--state-ok)}.state-warning .state-icon{fill:var(--state-warning);stroke:#1f2937}.state-over .state-icon{fill:var(--state-over)}.budget-bar{background:#e5e7eb;border-radius:5px;height:10px;margin:6px 0;overflow:hidden}.budget-line.primary .budget-bar{border-radius:7px;height:14px}.budget-bar-fill{border-radius:inherit;height:100%}.state-ok .budget-bar-fill{background:var(--state-ok)}.state-warning .budget-bar-fill{background:var(--state-warning)}.state-over .budget-bar-fill{background:var(--state-over)}.budget-amounts{color:#52514e;font-variant-numeric:tabular-nums;font-size:.85rem}.state-over .budget-remaining{color:var(--state-over);font-weight:600}.budget-chart-title{margin:18px 0 4px}.budget-settings-toggle{border-top:1px solid #e5e7eb;margin-top:14px;padding-top:8px}.budget-settings-toggle>summary{cursor:pointer;box-sizing:border-box;min-height:44px;padding:10px 0;font-weight:600}.budget-settings .hint{margin:0 0 8px;font-size:.85rem}.budget-inputs{gap:8px;display:grid}.budget-input{grid-template-columns:minmax(0,1fr) minmax(0,11em);align-items:center;gap:4px 8px;display:grid}.budget-input label{font-size:.95rem;display:block}.budget-input.total label{font-weight:600}.budget-input input{text-align:right;font-variant-numeric:tabular-nums;width:100%}.budget-input input[aria-invalid=true]{border-color:#d03b3b;outline-color:#d03b3b}.field-error{text-align:right;grid-column:1/-1;font-size:.85rem}.settings-message{margin:10px 0 0;font-size:.9rem}.chart{width:100%;margin:4px 0 12px;position:relative}.chart-compare{height:110px}.chart-trend{height:240px}.chart-table summary{cursor:pointer;color:#52514e;padding:8px 0;font-size:.9rem}.chart-table table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:.85rem}.chart-table th,.chart-table td{text-align:left;white-space:nowrap;border-bottom:1px solid #e5e7eb;padding:4px 6px}.chart-table th.amount,.chart-table td.amount{text-align:right}.transactions .memo{overflow-wrap:anywhere}.transactions th,.transactions .date,.transactions .kind,.transactions .category{white-space:nowrap}.app-header{min-width:0}.app-header .muted{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.app-header h1,.app-header button{white-space:nowrap;flex-shrink:0}.app-header div{min-width:0}@media (width<=600px){.container{padding:12px}.app-header{gap:8px}.app-header h1{margin:8px 0;font-size:1.15rem}.app-header div{flex:auto;justify-content:flex-end;gap:8px}.app-header .muted{flex:0 auto;font-size:.75rem}.app-header button{padding:6px 10px;font-size:14px}button,input,select{min-height:44px;font-size:16px}.card{padding:12px}.month-picker input{flex:1;min-width:0}.month-picker button{min-width:44px}.form-grid{grid-template-columns:1fr 1fr}.form-grid .field-category,.form-grid .field-amount,.form-grid .memo{grid-column:1/-1}.actions button{flex:1}.transactions thead,.transactions .kind{display:none}.transactions,.transactions tbody{display:block}.transactions tr{border-bottom:1px solid #e5e7eb;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date amount""category amount""memo memo""actions actions";gap:2px 8px;padding:10px 0;display:grid}.transactions td{border:none;padding:0;display:block}.transactions .date{color:#6b7280;grid-area:date;font-size:.85rem}.transactions .category{grid-area:category;font-weight:600}.transactions td.amount{grid-area:amount;align-self:center;font-size:1.05rem;font-weight:600}.transactions .memo{grid-area:memo;font-size:.85rem}.transactions .memo:empty{display:none}.transactions .row-actions{grid-area:actions;gap:8px;margin-top:6px;display:flex}.transactions .row-actions button{flex:1}.row-actions button+button{margin-left:0}}
