:root { --ink:#172c29; --green:#276453; --lime:#d8ef68; --paper:#f5f7f2; --line:#e5e9e2; --muted:#8d9893; --red:#a63d44; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:#edf0ec; }
* { box-sizing:border-box; } body { margin:0; } button,input,textarea,select { font:inherit; } button { cursor:pointer; } main { padding:28px; } .shell { max-width:1180px; min-height:calc(100vh - 56px); margin:auto; padding:0 48px; background:#fff; border:1px solid #e9ece6; border-radius:26px; box-shadow:0 18px 60px #263b2b0a; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { color:inherit; display:flex; align-items:center; gap:10px; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--ink); color:var(--lime); font-size:10px; font-weight:850; letter-spacing:-.08em; } .brand strong,.brand small { display:block; } .brand strong { font-size:12px; letter-spacing:-.03em; } .brand small { color:var(--muted); margin-top:2px; font-size:9px; } .private-badge { display:flex; align-items:center; gap:7px; padding:9px 11px; border-radius:999px; background:#f1f4ee; color:#68736d; font-size:10px; font-weight:650; } .private-badge i,.status-pill i,.assistant-head>span i { width:6px; height:6px; border-radius:50%; background:#90aa31; display:inline-block; }
.intro { display:flex; justify-content:space-between; align-items:center; padding:58px 0 32px; } .eyebrow { margin:0 0 9px; color:#819072; font-size:9px; font-weight:800; letter-spacing:.13em; } h1,h2 { margin:0; letter-spacing:-.055em; font-weight:650; } h1 { font-size:48px; } h2 { font-size:25px; } .intro p:not(.eyebrow) { max-width:420px; color:#78847e; margin:12px 0 0; font-size:13px; } .status-pill { display:flex; gap:8px; align-items:center; padding:10px 13px; border:1px solid #dfe8c0; border-radius:999px; background:#f6fbdc; color:#6d7b48; font-size:10px; font-weight:700; }
.assistant-studio { padding:21px; border:1px solid #dbe6b8; border-radius:24px; background:linear-gradient(135deg,#fbffea,#e3f49f); } .assistant-head { display:grid; grid-template-columns:38px 1fr auto; gap:11px; align-items:center; } .assistant-head>b { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#55691f; background:var(--lime); } .assistant-head strong,.assistant-head small { display:block; } .assistant-head strong { font-size:13px; } .assistant-head small { color:#748169; margin-top:4px; font-size:10px; } .assistant-head>span { color:#71815c; font-size:9px; font-weight:750; }.assistant-head>span i { margin-right:5px; }
.chat-thread { display:grid; gap:7px; margin:15px 0 10px; } .chat-bubble { width:max-content; max-width:78%; padding:9px 11px; border-radius:11px; font-size:10px; line-height:1.45; } .chat-bubble.user { justify-self:end; color:#fff; background:var(--ink); border-bottom-right-radius:3px; } .chat-bubble.assistant { background:#fff; color:#607064; border-bottom-left-radius:3px; box-shadow:0 4px 15px #4051160b; } .composer { overflow:hidden; border:1px solid #e1e7d2; border-radius:17px; background:#fff; box-shadow:0 10px 25px #4b5d1a0a; } .composer textarea { width:100%; min-height:75px; padding:15px 16px 7px; border:0; outline:0; resize:vertical; color:var(--ink); font-size:12px; } .composer>div { display:flex; justify-content:space-between; align-items:center; padding:7px 9px 9px; } .recurring-toggle { display:flex; align-items:center; gap:5px; color:#657064; padding:7px; border-radius:8px; font-size:10px; font-weight:700; } .recurring-toggle input { accent-color:#728823; } .send-button { display:flex; align-items:center; gap:9px; padding:6px 7px 6px 12px; border:0; border-radius:10px; color:#fff; background:var(--ink); font-size:10px; font-weight:800; } .send-button b { display:grid; place-items:center; width:22px; height:22px; color:var(--ink); border-radius:7px; background:var(--lime); font-size:13px; }.quick-prompts { display:flex; gap:7px; overflow-x:auto; padding-top:11px; } .quick-prompts button { flex:0 0 auto; padding:7px 10px; border:1px solid #cbdca5; border-radius:999px; color:#64764a; background:#fff9; font-size:9px; font-weight:750; }
.manual-entry { margin:18px 0 -3px; padding:22px; border-radius:20px; color:#fff; background:var(--ink); box-shadow:0 16px 35px #1329232a; } .manual-entry[hidden] { display:none; } .manual-head { display:flex; justify-content:space-between; align-items:start; margin-bottom:15px; }.manual-head .eyebrow { color:#a6b5ae; }.manual-head h2 { font-size:22px; }.manual-head button { width:30px; height:30px; color:#fff; border:1px solid #455854; border-radius:9px; background:transparent; font-size:18px; }.kind-switch { display:flex; gap:4px; width:max-content; padding:4px; margin:0 0 15px; border:1px solid #3c504b; border-radius:12px; background:#223b35; }.kind-switch button { min-width:78px; height:31px; color:#b1beb9; border:0; border-radius:8px; background:transparent; font-size:10px; font-weight:800; }.kind-switch .active { color:var(--ink); background:var(--lime); }.manual-entry form { display:grid; grid-template-columns:.7fr 1fr 1fr .85fr; gap:11px; align-items:end; }.manual-entry label>span { display:block; margin-bottom:6px; color:#b6c1bd; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.manual-entry input,.manual-entry select { width:100%; height:42px; padding:0 10px; color:#fff; border:1px solid #425650; border-radius:10px; outline:0; background:#223b35; font-size:11px; }.manual-entry select option { color:#172c29; }.manual-entry .wide { grid-column:span 3; }.manual-check { display:flex; align-items:center; gap:6px; height:42px; color:#c2cbc7; font-size:10px; }.manual-check input { width:auto; height:auto; accent-color:var(--lime); }.manual-save { height:42px; padding:0 14px; border:0; border-radius:10px; color:var(--ink); background:var(--lime); font-size:10px; font-weight:850; }
.subgroup-dialog { width:min(420px,calc(100vw - 32px)); padding:22px; color:var(--ink); border:0; border-radius:20px; box-shadow:0 24px 70px #172c2940; }.subgroup-dialog::backdrop { background:#172c2966; }.dialog-head { display:flex; justify-content:space-between; align-items:start; margin-bottom:19px; }.dialog-head .eyebrow { margin-bottom:5px; }.dialog-head h2 { font-size:23px; }.dialog-head button { width:30px; height:30px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-size:18px; }.subgroup-dialog label { display:block; margin-top:12px; }.subgroup-dialog label>span { display:block; margin:0 0 6px; color:#71807a; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.subgroup-dialog input,.subgroup-dialog select { width:100%; height:42px; padding:0 10px; border:1px solid var(--line); border-radius:10px; outline-color:#91aa35; background:#fff; color:var(--ink); font-size:12px; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:19px; }.dialog-actions button { height:37px; padding:0 13px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#67736e; font-size:10px; font-weight:800; }.dialog-actions button[type="submit"] { border-color:var(--ink); background:var(--ink); color:#fff; }
.months { display:grid; grid-template-columns:repeat(12,1fr); overflow:hidden; margin-top:22px; border:1px solid var(--line); border-radius:15px; }.months button { min-width:0; padding:13px 4px; border:0; border-right:1px solid var(--line); color:#8b9591; background:#fff; font-size:10px; font-weight:800; }.months button:last-child { border:0; }.months .active { color:#fff; background:var(--ink); }.summary { display:grid; grid-template-columns:1.35fr 1fr .7fr .7fr; gap:12px; margin-top:16px; }.summary-card { display:flex; flex-direction:column; justify-content:space-between; min-height:137px; padding:19px; border:1px solid var(--line); border-radius:18px; background:#fff; }.summary-card.primary { color:#fff; background:var(--green); border-color:var(--green); }.summary-card.negative { background:#8f3f49; border-color:#8f3f49; }.summary-card.expense { background:#fff7f2; border-color:#f1dfd5; }.summary-card.income { background:#f0f7e7; border-color:#dce9ca; }.summary-card p,.summary-card span { margin:0; color:var(--muted); font-size:10px; }.summary-card.primary p,.summary-card.primary span { color:#cfe1da; }.summary-card strong { letter-spacing:-.045em; font-size:26px; font-weight:650; }
.section-heading { display:flex; justify-content:space-between; align-items:end; padding:48px 0 16px; }.section-heading>span { color:#929c98; font-size:10px; }.group-list { display:grid; gap:9px; }.group-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; }.group-card summary { display:grid; grid-template-columns:42px 1fr auto 20px; gap:13px; align-items:center; min-height:69px; padding:12px 16px; cursor:pointer; list-style:none; }.group-card summary::-webkit-details-marker { display:none; }.group-card summary:hover { background:#fafbf9; }.group-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; font-size:9px; font-weight:850; }.orange .group-icon { color:#b36b25; background:#fff0df; }.green .group-icon { color:#367448; background:#e6f3e8; }.blue .group-icon { color:#377297; background:#e5f1fa; }.pink .group-icon { color:#aa526b; background:#f9e9ee; }.violet .group-icon { color:#7657a5; background:#eee8fa; }.yellow .group-icon { color:#9a7517; background:#fff3c8; }.income .group-icon { color:#536416; background:var(--lime); }.group-name strong,.group-name small { display:block; }.group-name strong { font-size:13px; letter-spacing:-.02em; }.group-name small { margin-top:3px; color:#96a09c; font-size:9px; }.money { white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; font-weight:600; }.chevron { color:#98a09d; font-size:17px; transition:transform .2s; }.group-card[open] .chevron { transform:rotate(180deg); }.subgroup-list { margin:0 16px 14px 70px; border-top:1px solid var(--line); }.subgroup-block { border-bottom:1px solid #edf0ed; }.subgroup-row,.group-total,.empty-row { display:flex; justify-content:space-between; align-items:center; min-height:42px; gap:12px; color:#60706a; font-size:11px; }.subgroup-row { font-weight:750; }.subgroup-row>span:first-child::before { content:""; display:inline-block; width:5px; height:5px; margin-right:9px; vertical-align:2px; border-radius:50%; background:#c7ceca; }.entry-list { padding:0 0 7px 14px; }.entry-row { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:33px; color:#76817c; font-size:10px; }.entry-row>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.entry-kind { display:inline-block; min-width:42px; margin-right:7px; padding:3px 5px; border-radius:999px; font-size:8px; text-align:center; }.entry-kind.entered { color:#377248; background:#e6f3e8; }.entry-kind.exited { color:#a64a50; background:#fdebec; }.group-total { border:0; color:var(--ink); font-weight:800; }.empty-row { color:#909a96; }.income-sheet { padding:11px; border:1px solid #dbe6b6; border-radius:20px; background:#f4f8e8; }.sheet-ribbon { display:flex; justify-content:space-between; padding:4px 6px 13px; color:#6d7b56; font-size:9px; font-weight:850; letter-spacing:.1em; }.sheet-ribbon strong { color:var(--ink); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; letter-spacing:-.04em; }
.result-sheet { overflow:hidden; margin-bottom:44px; border:1px solid var(--line); border-radius:20px; background:#fff; }.result-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr 1.1fr; align-items:center; min-height:45px; padding:0 20px; border-bottom:1px solid #edf0ed; color:#65716c; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; }.result-grid strong { color:var(--ink); font-family:inherit; font-size:11px; }.result-head { min-height:38px; color:#929c98; border:0; background:#f5f7f4; font-family:inherit; font-size:8px; font-weight:850; letter-spacing:.1em; }.result-total { min-height:65px; color:#b7c1bd; border:0; background:var(--ink); }.result-total strong { color:#fff; }.result-total b { font-size:14px; }.green-text { color:#46945a; }.red { color:#e36a73; } footer { display:flex; justify-content:space-between; min-height:72px; align-items:center; border-top:1px solid var(--line); color:#9aa29f; font-size:10px; }
@media (max-width:800px) { main { padding:0; }.shell { min-height:100vh; padding:0 20px; border:0; border-radius:0; }.topbar { height:77px; }.intro { align-items:start; padding:41px 0 25px; }h1 { font-size:42px; }.status-pill,.assistant-head>span,.section-heading>span { display:none; }.assistant-studio { margin:0 -8px; padding:14px; border-radius:21px; }.assistant-head { grid-template-columns:36px 1fr; }.assistant-head small { font-size:9px; }.manual-entry { margin-left:-8px; margin-right:-8px; }.manual-entry form { grid-template-columns:1fr 1fr; }.manual-entry .wide,.manual-save { grid-column:1/-1; }.months { display:flex; overflow-x:auto; }.months button { flex:0 0 54px; }.summary { grid-template-columns:1fr 1fr; gap:9px; }.summary-card { min-height:116px; padding:16px; }.summary-card.primary,.summary-card.expense { grid-column:1/-1; }.summary-card strong { font-size:24px; }.section-heading { padding-top:39px; }.group-card summary { grid-template-columns:38px 1fr auto 15px; gap:9px; padding:11px; }.group-icon { width:36px; height:36px; border-radius:10px; }.group-name strong { font-size:12px; }.money { font-size:10px; }.subgroup-list { margin-left:58px; margin-right:11px; }.income-sheet { margin:0 -8px; padding:8px; }.result-sheet { overflow-x:auto; margin-left:-8px; margin-right:-8px; }.result-grid { min-width:580px; padding:0 16px; } footer { display:block; padding:20px 0; line-height:1.9; } footer span { display:block; } }