:root { color-scheme: dark; --bg:#0b0f17; --surface:#121925; --surface-2:#171f2d; --line:#26354a; --text:#f5f7ff; --muted:#8da1bf; --accent:#7474f7; --positive:#22d3a5; --negative:#ff5b87; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font:14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .shell { width:min(1230px, calc(100% - 32px)); margin:0 auto; padding:28px 0 56px; } .topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--line); } .brand,.header-actions { display:flex; align-items:center; gap:12px; } .brand-mark { display:grid; place-items:center; width:36px; height:36px; border:1px solid #4b4aba; border-radius:9px; color:#a9a6ff; font-size:24px; } h1,h2,p { margin:0; } h1 { font-size:20px; letter-spacing:-.03em; } h2 { font-size:16px; letter-spacing:-.03em; } .brand p,.panel p,.kpi small { color:var(--muted); } .button { min-height:40px; border:1px solid #33445d; border-radius:8px; padding:0 14px; color:var(--text); background:#151e2b; cursor:pointer; font-weight:700; } .button:hover { border-color:#6565ed; } .button:disabled { opacity:.5; cursor:wait; } .secondary { color:var(--muted); } .filters { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; padding:24px 0; } label { display:grid; gap:6px; color:#aab7ff; font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:.06em; } select { min-height:42px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--surface-2); padding:0 12px; font:inherit; text-transform:none; } .kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; } .kpi,.panel,.setup-card,.notice { background:var(--surface); border:1px solid var(--line); border-radius:12px; } .kpi { min-height:122px; padding:20px; display:grid; align-content:start; gap:8px; } .kpi.primary { border-color:#4b4aba; } .kpi span { color:#a9b8d4; text-transform:uppercase; letter-spacing:.06em; font-size:11px; font-weight:800; } .kpi strong { font-size:26px; letter-spacing:-.045em; } .kpi strong.positive { color:var(--positive); } .kpi strong.negative { color:var(--negative); } .grid { display:grid; grid-template-columns:1.35fr .95fr; gap:20px; margin-top:22px; } .side-column { display:grid; gap:20px; align-content:start; } .panel { padding:20px; } .panel-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); } .panel-heading span { color:var(--muted); font:700 11px ui-monospace, SFMono-Regular, Menlo, monospace; } .category-list,.nature-list { display:grid; } .category-row { padding:16px 0; border-bottom:1px solid #213047; } .category-row:last-child { border:0; } .category-title { display:flex; justify-content:space-between; gap:14px; align-items:baseline; } .category-title b { font-size:15px; } .category-title em,.nature-row small { color:var(--muted); font:11px ui-monospace, SFMono-Regular, Menlo, monospace; font-style:normal; } .progress { margin-top:9px; height:7px; overflow:hidden; border-radius:999px; background:#293850; } .progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5955da,#8586ff); } .week-chart { display:flex; min-height:196px; align-items:end; gap:10px; padding:18px 0 0; } .week { flex:1; min-width:0; display:grid; gap:7px; justify-items:center; align-items:end; } .week i { display:block; width:min(44px, 100%); border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#8a8bff,#5c5ceb); } .week strong,.week span { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; color:#c5d2e7; font:11px ui-monospace, SFMono-Regular, Menlo, monospace; } .week span { color:var(--muted); } .nature-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:13px 0; border-bottom:1px solid #213047; align-items:baseline; } .nature-row:last-child { border:0; } .empty { color:var(--muted); padding:22px 0; } .setup-card,.notice { margin:24px 0; padding:18px; } .setup-card h2 { margin-bottom:6px; } code { color:#bfc7ff; } .notice.error { border-color:#7c3851; color:#ffc5d5; } [hidden] { display:none !important; }
@media (max-width:900px) { .kpis { grid-template-columns:repeat(2,1fr); } .grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .shell { width:min(100% - 24px, 1230px); padding-top:18px; } .topbar { align-items:flex-start; flex-direction:column; } .header-actions { width:100%; justify-content:space-between; flex-wrap:wrap; } .filters,.kpis { grid-template-columns:1fr; } .kpi { min-height:104px; } .category-title { align-items:flex-start; flex-direction:column; gap:4px; } }
.detail-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgb(3 7 13 / .76);backdrop-filter:blur(9px)}.detail-modal{width:min(1060px,100%);max-height:min(88vh,900px);overflow:auto;background:var(--surface);border:1px solid #3b4e6a;border-radius:18px;padding:24px;box-shadow:0 24px 80px rgb(0 0 0 / .48)}.detail-modal__header{display:flex;justify-content:space-between;gap:18px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:18px}.detail-modal h2{margin:4px 0;font-size:24px}.detail-modal p{margin:0;color:var(--muted)}.detail-kind{color:#aab8ff;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.08em}.detail-close{flex:none}.detail-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px 0}.detail-metric{border:1px solid var(--line);border-radius:11px;padding:14px;background:#111925}.detail-metric span,.detail-metric small{display:block;color:var(--muted);font-size:12px}.detail-metric strong{display:block;font-size:20px;margin:8px 0}.detail-section{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.detail-section h3,.detail-week-summary h3{margin:0 0 12px;font-size:16px}.detail-insights__list{margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none}.detail-insights__list li{border-left:3px solid var(--accent);background:#111925;padding:12px}.detail-insights__list p{margin-top:6px;font-size:13px;line-height:1.4}.detail-week-summary{border-bottom:1px solid var(--line);padding:2px 0 18px}.detail-week-summary__bars{height:180px;display:flex;align-items:end;gap:12px}.detail-week-summary__bar{flex:1;display:grid;gap:7px;justify-items:center;align-items:end;color:var(--muted);font-size:12px}.detail-week-summary__bar strong{font-size:12px;color:#d7e1ff}.detail-week-summary__bar i{display:block;width:100%;max-width:72px;background:var(--accent);border-radius:7px 7px 2px 2px}.detail-records{overflow-x:auto}.detail-records__table{width:100%;border-collapse:collapse;font-size:13px}.detail-records__table th,.detail-records__table td{padding:11px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}.detail-records__table th{color:#aab8ff;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.detail-records__table td:last-child{text-align:right;font-weight:800}.panel-heading__action,.category-row,.week,.nature-row{font:inherit;color:inherit;border:0;background:transparent;text-align:inherit}.panel-heading__action{padding:0;cursor:pointer}.panel-heading__action:hover h2,.panel-heading__action:focus-visible h2{color:#aab8ff}.category-row,.nature-row,.week{width:100%;cursor:pointer}.category-row:hover b,.nature-row:hover span,.week:hover strong,.category-row:focus-visible b,.nature-row:focus-visible span,.week:focus-visible strong{color:#aab8ff}.panel-heading__action:focus-visible,.category-row:focus-visible,.nature-row:focus-visible,.week:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}@media(max-width:850px){.detail-overlay{padding:12px}.detail-modal{max-height:94vh;padding:18px}.detail-modal__header{align-items:center}.detail-metrics,.detail-insights__list{grid-template-columns:1fr 1fr}.detail-records__table{font-size:12px}}@media(max-width:520px){.detail-metrics,.detail-insights__list{grid-template-columns:1fr}.detail-modal h2{font-size:20px}.detail-close{padding:8px 10px}}
.detail-records{overflow:visible}.detail-records__table{table-layout:fixed}.detail-records__table th:nth-child(1){width:84px}.detail-records__table th:nth-child(2){width:34%}.detail-records__table th:nth-child(3){width:14%}.detail-records__table th:nth-child(4){width:28%}.detail-records__table th:nth-child(5){width:108px}.detail-records__table td{overflow:hidden;text-overflow:ellipsis}.detail-description-cell{overflow:visible!important}.detail-description{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-description:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}.detail-description.is-expanded{white-space:normal;overflow:visible;overflow-wrap:anywhere}@media(hover:hover){.detail-description:hover::after{content:attr(title);position:absolute;z-index:3;left:0;top:calc(100% + 8px);width:max-content;max-width:min(560px,70vw);padding:9px 11px;border:1px solid #425776;border-radius:7px;background:#0e1622;color:var(--text);box-shadow:0 12px 28px rgb(0 0 0 / .35);white-space:normal;overflow-wrap:anywhere}}@media(max-width:650px){.detail-records__table th:nth-child(3),.detail-records__table td:nth-child(3),.detail-records__table th:nth-child(4),.detail-records__table td:nth-child(4){display:none}.detail-records__table th:nth-child(1){width:76px}.detail-records__table th:nth-child(2){width:auto}.detail-records__table th:nth-child(5){width:92px}}
.view-nav{display:flex;gap:8px;padding:18px 0 0}.view-tab{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:transparent;color:var(--muted);font:700 13px inherit;cursor:pointer}.view-tab.is-active{border-color:#6665ec;background:#25256a;color:var(--text)}.import-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:24px 0}.import-card{display:grid;gap:9px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.import-card p,.raw-heading p{color:var(--muted)}.import-card__help,.import-card__last{font-size:12px}.import-card__status{min-height:1.4rem;font-weight:700}.import-card[data-import-state="processing"] .import-card__status{color:var(--accent)}.import-card[data-import-state="success"] .import-card__status{color:#68d391}.import-card[data-import-state="error"] .import-card__status{color:#fc8181}.import-card .button{justify-self:start;margin-top:8px}.raw-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:18px 0 12px;border-top:1px solid var(--line)}.raw-filters{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:12px 0 20px}.raw-transaction-list{display:grid;gap:10px}.raw-transaction-list.is-updating .raw-transaction{animation:raw-row-enter 180ms ease-out both}.raw-transaction-list.is-updating .raw-transaction:nth-child(2){animation-delay:25ms}.raw-transaction-list.is-updating .raw-transaction:nth-child(3){animation-delay:50ms}@keyframes raw-row-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.raw-transaction{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.raw-transaction__header{display:grid;grid-template-columns:1fr auto;gap:3px 16px;align-items:baseline}.raw-transaction__meta{color:var(--muted);font-size:12px}.raw-transaction__amount{grid-column:2;grid-row:1 / span 2}.raw-edit{display:grid;grid-template-columns:minmax(150px,1fr) minmax(180px,1fr) auto auto auto;gap:9px;align-items:center;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}.raw-edit__select{width:100%;min-height:38px}.raw-edit__toggle{display:flex;gap:5px;align-items:center;color:var(--muted);font-size:12px;text-transform:none;letter-spacing:0;font-weight:600}@media(prefers-reduced-motion:reduce){.raw-transaction-list.is-updating .raw-transaction{animation:none}}@media(max-width:900px){.import-grid{grid-template-columns:1fr}.raw-filters{grid-template-columns:1fr 1fr}.raw-edit{grid-template-columns:1fr 1fr}.raw-edit .button{grid-column:span 2}}@media(max-width:560px){.raw-heading{align-items:start;flex-direction:column}.raw-filters,.raw-edit{grid-template-columns:1fr}.raw-edit .button{grid-column:auto}.raw-transaction__amount{grid-column:auto;grid-row:auto}}
.recurring-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:24px 0 14px}.recurring-heading p{margin-top:3px;color:var(--muted)}.recurring-heading label{min-width:180px}.recurring-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.recurring-summary__card,.recurring-panel{border:1px solid var(--line);border-radius:12px;background:var(--surface)}.recurring-summary__card{min-height:116px;padding:16px;display:grid;align-content:start;gap:6px}.recurring-summary__card span{color:#a9b8d4;text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:800}.recurring-summary__card strong{font-size:22px;letter-spacing:-.04em}.recurring-summary__card small{color:var(--muted)}.recurring-panel{padding:20px;margin-top:18px}.recurring-list{display:grid;gap:18px;margin-top:14px}.recurring-group{display:grid;gap:10px}.recurring-group__title{padding:0 2px;color:#aab8ff;font-size:12px;letter-spacing:.06em;text-transform:uppercase}.recurring-entry{display:grid;grid-template-columns:minmax(180px,1fr) 150px 145px auto;gap:10px;align-items:end;border:1px solid #273950;border-radius:10px;padding:13px;background:#101925}.recurring-entry.is-confirmed{border-color:#317d6c}.recurring-entry__info{display:grid;gap:3px}.recurring-entry__info small{color:var(--muted)}.recurring-entry__actions{display:grid;gap:8px}.recurring-entry label,.recurring-entry__edit label,.recurring-rule-form label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}.recurring-entry input,.recurring-entry__edit input,.recurring-entry__edit select,.recurring-rule-form input,.recurring-rule-form select{width:100%;min-height:39px;margin-top:5px;border:1px solid var(--line);border-radius:7px;padding:0 10px;color:var(--text);background:#182333;font:inherit;text-transform:none;letter-spacing:normal}.recurring-entry__edit{grid-column:1 / -1;display:grid;grid-template-columns:1.3fr 1fr 1fr .7fr 1fr 1fr 1fr auto auto;gap:10px;align-items:end;padding-top:13px;border-top:1px solid var(--line)}.recurring-rule-form{display:grid;grid-template-columns:1.3fr 1fr 1fr .7fr 1fr 1fr auto;gap:10px;align-items:end}.recurring-rule-form .button,.recurring-entry__edit .button{min-height:39px}@media(max-width:1000px){.recurring-summary{grid-template-columns:1fr 1fr}.recurring-rule-form,.recurring-entry__edit{grid-template-columns:1fr 1fr 1fr}.recurring-rule-form .button,.recurring-entry__edit .button{grid-column:span 3}}@media(max-width:650px){.recurring-heading{align-items:start;flex-direction:column}.recurring-heading label{width:100%}.recurring-summary{grid-template-columns:1fr}.recurring-entry,.recurring-rule-form,.recurring-entry__edit{grid-template-columns:1fr}.recurring-rule-form .button,.recurring-entry__edit .button{grid-column:auto}.recurring-entry .button{width:100%}}
.monthly-flow-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:24px 0 14px}.monthly-flow-heading p,.monthly-flow-summary__card small,.monthly-flow-category small,.monthly-flow-import small,.monthly-flow-unbudgeted p{color:var(--muted)}.monthly-flow-heading label{min-width:180px}.monthly-flow-context{display:flex;flex-wrap:wrap;gap:8px 20px;padding:12px 0 16px;color:var(--muted);font-size:12px}.monthly-flow-context b{color:var(--text)}.monthly-flow-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.monthly-flow-summary__card,.monthly-flow-panel,.monthly-flow-unbudgeted{border:1px solid var(--line);border-radius:12px;background:var(--surface)}.monthly-flow-summary__card{min-height:116px;padding:16px;display:grid;align-content:start;gap:6px}.monthly-flow-summary__card span{color:#a9b8d4;text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:800}.monthly-flow-summary__card strong{font-size:22px;letter-spacing:-.04em}.monthly-flow-summary__card.is-warning{border-color:#a76373}.monthly-flow-panel{padding:20px;margin-top:18px}.monthly-flow-category-list{display:grid}.monthly-flow-category{padding:15px 0;border-bottom:1px solid #213047}.monthly-flow-category:last-child{border:0}.monthly-flow-category__heading{display:flex;justify-content:space-between;gap:14px;align-items:baseline}.monthly-flow-category__heading b{font-size:14px}.monthly-flow-category small{display:block;margin-top:7px}.monthly-flow-category.is-over-limit small{color:#ffc5d5}.monthly-flow-progress{height:7px;overflow:hidden;border-radius:999px;background:#293850;margin-top:10px}.monthly-flow-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5955da,#8586ff)}.monthly-flow-category.is-over-limit .monthly-flow-progress i{background:linear-gradient(90deg,#c04c73,#ff789f)}.monthly-flow-unbudgeted{margin-top:18px;padding:16px;border-color:#98644e}.monthly-flow-unbudgeted strong{color:#ffd6b5}.monthly-flow-unbudgeted p{margin-top:5px}.monthly-flow-import-status{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:14px}.monthly-flow-import{padding:13px;border:1px solid #273950;border-radius:10px;background:#101925;display:grid;gap:4px}.monthly-flow-budget-form{display:grid;gap:14px;padding-top:16px}.monthly-flow-budget-form>label{max-width:200px}.monthly-flow-budget-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.monthly-flow-budget-fields label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}.monthly-flow-budget-fields .currency-input{margin-top:5px}.monthly-flow-budget-fields input{width:100%;min-height:37px;margin:0;border:0;border-radius:0;padding:0 10px;background:transparent;color:var(--text);font:inherit}.monthly-flow-budget-actions{display:flex;gap:10px;justify-content:flex-end}@media(max-width:900px){.monthly-flow-summary{grid-template-columns:1fr 1fr}.monthly-flow-import-status{grid-template-columns:1fr}.monthly-flow-budget-fields{grid-template-columns:1fr 1fr}}@media(max-width:620px){.monthly-flow-heading{align-items:start;flex-direction:column}.monthly-flow-heading label{width:100%}.monthly-flow-summary,.monthly-flow-budget-fields{grid-template-columns:1fr}.monthly-flow-category__heading{align-items:flex-start;flex-direction:column;gap:4px}.monthly-flow-budget-actions{justify-content:stretch;flex-direction:column}.monthly-flow-budget-actions .button{width:100%}}