:root { --ink:#15251f; --muted:#73807b; --paper:#f4f1e9; --card:#fffefa; --green:#1f755f; --line:#deddd5; --coral:#ef6a4c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
button,input,select { font:inherit; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:230px 1fr; }
.sidebar { background:#183c32; color:white; padding:32px 22px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:12px; font:700 22px Georgia,serif; margin:0 8px 44px; }
.brand-mark { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#f0bc64; color:#183c32; font:700 22px Georgia,serif; }
nav { display:grid; gap:7px; }
nav a { color:#c2d2cd; text-decoration:none; padding:12px 13px; display:flex; align-items:center; gap:12px; border-radius:8px; font-size:14px; }
nav a span { width:20px; text-align:center; font-size:18px; }
nav a:hover,nav a.active { background:#285246; color:#fff; }
.sidebar-foot { margin-top:auto; }
.workspace { border-top:1px solid #426158; padding-top:22px; display:flex; gap:10px; align-items:center; }
.workspace>span { width:34px; height:34px; border-radius:50%; background:#e87053; display:grid; place-items:center; font-weight:700; font-size:12px; }
.workspace div { display:grid; gap:2px; }
.workspace strong { font-size:13px; }.workspace small,.sidebar-foot>p { font-size:11px; color:#a8bcb6; }
.sidebar-foot>p { line-height:1.5; margin-top:18px; }
main { padding:44px 48px 22px; min-width:0; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.eyebrow { margin:0 0 8px; letter-spacing:1.7px; font-size:10px; font-weight:800; color:#6a7a74; }
h1,h2 { margin:0; font-family:Georgia,serif; font-weight:500; }
h1 { font-size:34px; } h2 { font-size:24px; }
.export,.primary { border:0; border-radius:8px; background:var(--green); color:#fff; text-decoration:none; font-weight:700; font-size:13px; padding:13px 18px; cursor:pointer; box-shadow:0 5px 12px #1f755f22; }
.menu { display:none; border:0; background:none; font-size:24px; }
.hero-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; margin-bottom:18px; }
.summary-card,.stat-card,.capture-card,.movements { background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 3px 14px #43534c0b; }
.summary-card { padding:22px; }
.summary-top { display:flex; align-items:flex-start; justify-content:space-between; }
.summary-top p,.stat-card p { font-size:10px; letter-spacing:1.3px; font-weight:800; color:#7a8580; margin:0 0 8px; }
.summary-top strong { font:500 32px Georgia,serif; }
.trend { color:#28856d; background:#e5f2ed; padding:5px 8px; border-radius:12px; font-size:10px; font-weight:700; }
.bar { height:7px; margin:19px 0 16px; border-radius:6px; overflow:hidden; display:flex; background:#eee; }
.bar i { display:block; }
.legend { display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; }
.legend div { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:7px; font-size:11px; color:#65716c; }
.legend i { width:7px; height:7px; border-radius:50%; }.legend b { color:var(--ink); }
.stat-card { padding:22px; display:flex; flex-direction:column; justify-content:center; }
.stat-card>span { color:var(--green); font-size:20px; margin-bottom:16px; }
.stat-card strong { font:500 30px Georgia,serif; margin-bottom:4px; }.stat-card small { color:#7c8782; font-size:11px; }
.work-grid { display:grid; grid-template-columns:minmax(350px,1.05fr) minmax(360px,1fr); gap:18px; }
.capture-card,.movements { padding:24px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:19px; }
.section-heading a { color:var(--green); font-size:12px; font-weight:700; text-decoration:none; margin-top:12px; }
.step { border:1px solid var(--line); border-radius:20px; padding:5px 9px; color:#7c8782; font-size:10px; }
.drop-zone { border:1.5px dashed #b9beb8; border-radius:10px; background:#f8f7f1; width:100%; min-height:138px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); overflow:hidden; }
.drop-zone:hover { border-color:var(--green); background:#f3f8f5; }
.drop-zone .camera { font-size:26px; color:var(--green); margin-bottom:9px; }.drop-zone strong { font-size:13px; }.drop-zone small { color:#8a928e; font-size:10px; margin-top:6px; }
.drop-zone.has-image { padding:0; }.drop-zone img { width:100%; height:138px; object-fit:cover; }
.scan-status { display:flex; align-items:center; gap:11px; margin-top:12px; padding:11px 13px; border-radius:8px; background:#edf4f0; color:#236c59; }
.scan-status>span { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; }
.scan-status p { display:grid; gap:3px; margin:0; }.scan-status strong { font-size:11px; }.scan-status small { font-size:9px; color:#668078; }
.scan-status.scan-error { background:#fff0eb; color:#b34f37; }.scan-status.scan-success { background:#e7f4ee; color:#24755f; }
.scan-spinner { border:2px solid #bfd3cc; border-top-color:#24755f; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:18px 0; }
label { display:grid; gap:6px; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#5d6a65; }
input,select { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font-size:12px; outline:none; }
input:focus,select:focus { border-color:var(--green); box-shadow:0 0 0 3px #1f755f15; }
.wide { grid-column:1/-1; }.primary { width:100%; }.primary:disabled { background:#8aa69e; cursor:not-allowed; box-shadow:none; }
.success { text-align:center; color:#24755f; font-size:11px; margin:12px 0 0; }
.expense-list { display:grid; }
.expense-list article { display:grid; grid-template-columns:38px 1fr auto 24px; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid #e6e4dc; }
.category-icon { width:36px; height:36px; border-radius:8px; display:grid; place-items:center; background:#fae6df; color:#d9583d; }
.c-1 { background:#e3f1ed; color:#207760; }.c-2 { background:#f5ecd7; color:#a07425; }.c-3 { background:#ece7f3; color:#705690; }
.expense-list article div { display:grid; gap:4px; }.expense-list article strong { font-size:12px; }.expense-list article small { font-size:10px; color:#84908b; text-transform:capitalize; }
.expense-list article>b { font-size:12px; }.checked { color:#2a8e78; font-size:12px; }
.month-note { display:flex; gap:10px; align-items:center; background:#edf4f0; border-radius:8px; margin-top:16px; padding:12px 14px; color:#236c59; }
.month-note p { display:grid; gap:2px; margin:0; }.month-note strong { font-size:11px; }.month-note small { font-size:9px; text-transform:capitalize; }
footer { display:flex; justify-content:space-between; color:#7b8581; font-size:10px; padding:22px 2px 0; }
@media (max-width:950px) { .hero-grid { grid-template-columns:1fr 1fr; }.summary-card { grid-column:1/-1; }.work-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { .app-shell { display:block; }.sidebar { position:fixed; z-index:20; width:230px; transform:translateX(-100%); transition:.2s; }.sidebar.open { transform:none; }.menu { display:block; } main { padding:24px 18px; } header { gap:12px; } h1 { font-size:26px; }.export span { display:none; }.hero-grid { grid-template-columns:1fr 1fr; }.stat-card { padding:17px; }.work-grid { grid-template-columns:1fr; }.capture-card,.movements { padding:19px; }.form-grid { grid-template-columns:1fr; }.wide { grid-column:auto; } footer { display:grid; gap:7px; } }