:root { --ink:#17231f; --muted:#708078; --line:#e4e9e6; --paper:#ffffff; --ground:#f5f7f5; --green:#207c58; --green-dark:#126343; --mint:#e5f3eb; --coral:#c95039; --coral-bg:#fbeceb; --blue:#3377aa; --orange:#d38830; --sidebar:#173d35; --sidebar-soft:#245145; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--ground); font-family:"Noto Sans SC",Arial,sans-serif; font-size:14px; }
.login-screen[hidden],.app-shell[hidden] { display:none !important; }
.login-screen { display:grid; min-height:100vh; place-items:center; padding:24px; background:linear-gradient(135deg,#eef6f1 0%,#f7f8f6 55%,#e6f1eb 100%); }.login-card { width:min(410px,100%); padding:32px; border:1px solid #dce7e0; border-radius:8px; background:#fff; box-shadow:0 20px 50px rgba(32,74,56,.12); }.login-brand { display:flex; align-items:center; gap:10px; }.login-brand div { display:grid; gap:2px; }.login-brand strong { font-size:16px; }.login-brand span:not(.brand-mark) { color:var(--muted); font-size:12px; }.login-card h1 { margin:28px 0 7px; font-size:25px; }.login-card > p { margin:0 0 22px; color:var(--muted); }.login-card label { display:grid; gap:6px; margin:14px 0; color:#506057; font-size:12px; font-weight:600; }.login-card input { height:42px; padding:0 11px; border:1px solid #dce4df; border-radius:5px; }.login-submit { width:100%; margin-top:7px; }.login-card small { display:block; margin-top:17px; color:#849289; font-size:11px; line-height:1.6; }.form-error { min-height:18px; margin:3px 0; color:#bb4232; font-size:12px; }
button,input,select { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #8dd1b2; outline-offset:2px; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:254px; min-height:100vh; display:flex; flex-direction:column; flex:0 0 254px; color:#e6f0eb; padding:26px 16px 18px; background:var(--sidebar); }
.brand { height:38px; display:flex; align-items:center; gap:10px; padding:0 10px; font-size:19px; font-weight:700; letter-spacing:0; }.brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:7px; color:var(--sidebar); background:#b7e7cf; font-size:10px; font-weight:700; }
.workspace-switch { display:flex; align-items:center; gap:9px; margin:35px 4px 24px; padding:10px; border:1px solid #386056; border-radius:7px; background:#20483e; }.workspace-name { flex:1; font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.avatar { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; font-size:12px; font-weight:700; }.avatar-purple { background:#7860c9; }.avatar-green { background:#2f9269; }.main-nav { display:grid; gap:4px; }.nav-item { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; color:#b6cbc2; border:0; border-radius:6px; background:transparent; text-align:left; }.nav-item:hover,.nav-item.active { color:#fff; background:var(--sidebar-soft); }.nav-item.active { box-shadow:inset 3px 0 0 #8ed3b3; }.nav-icon { width:16px; text-align:center; font-size:17px; }
.sidebar-bottom { margin-top:auto; }.month-chip { margin:0 4px 17px; padding:12px; border-top:1px solid #31594f; border-bottom:1px solid #31594f; color:#a9c0b6; }.month-chip span,.account-row small { display:block; font-size:11px; }.month-chip strong { display:block; margin-top:4px; color:#f0f7f2; font-size:13px; }.sidebar-help { width:100%; padding:10px; border:0; color:#aac6ba; background:transparent; text-align:left; }.account-row { display:flex; align-items:center; gap:9px; padding:15px 6px 0; border-top:1px solid #31594f; }.account-row div { flex:1; }.account-row strong { font-size:13px; }.account-row small { color:#9db5aa; }
.main-content { width:calc(100% - 254px); min-width:0; padding:34px 48px 52px; }.topbar,.section-header { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:28px; }.topbar h1,.section-header h2 { margin:3px 0 0; font-size:26px; line-height:1.25; letter-spacing:0; }.eyebrow { margin:0; color:var(--green); font-size:12px; font-weight:700; }.topbar-actions { display:flex; align-items:center; gap:10px; }.date-picker,.icon-button,.text-button,.icon-text-button,.secondary-button { border:1px solid var(--line); background:var(--paper); color:#405047; border-radius:6px; }.date-picker { height:38px; padding:0 12px; }.icon-button { display:grid; place-items:center; width:38px; height:38px; font-size:19px; }.icon-button.muted { width:22px; height:22px; border:0; color:#a9c7ba; background:transparent; }.primary-button { height:38px; padding:0 14px; color:#fff; border:1px solid var(--green); border-radius:6px; background:var(--green); font-weight:600; }.primary-button:hover { background:var(--green-dark); }.primary-button span { font-size:17px; vertical-align:-1px; }.balance-banner { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:26px 28px; color:#eff8f3; border-radius:7px; background:#1f5d4a; }.balance-banner p { margin:0 0 7px; color:#bddece; }.balance-banner strong { display:block; font-family:"DM Mono",monospace; font-size:32px; letter-spacing:0; }.balance-banner small { display:block; margin-top:9px; color:#b8d7c8; }.balance-accounts { display:flex; gap:26px; }.balance-accounts span { display:grid; gap:5px; color:#b9d6c8; font-size:12px; }.balance-accounts b { color:#f4faf6; font-family:"DM Mono",monospace; font-size:15px; font-weight:500; }.dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; }.dot-blue { background:#86bae3; }.dot-orange { background:#e7b46a; }.dot-green { background:#8bd0ae; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:18px 0; }.metric-card,.panel { border:1px solid var(--line); border-radius:7px; background:var(--paper); }.metric-card { min-height:135px; padding:18px; }.metric-heading { display:flex; justify-content:space-between; color:#66766e; }.metric-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:5px; color:#63736b; background:#f2f5f3; font-size:16px; }.income .metric-icon { color:var(--green); background:var(--mint); }.expense .metric-icon { color:var(--coral); background:var(--coral-bg); }.metric-card strong { display:block; margin:13px 0 6px; font-family:"DM Mono",monospace; font-size:22px; font-weight:500; }.metric-card small { color:var(--muted); }.progress { height:5px; margin-top:12px; overflow:hidden; border-radius:5px; background:#e8eeea; }.progress i { display:block; height:100%; border-radius:5px; background:#d99136; }
.content-grid { display:grid; grid-template-columns:1.16fr .84fr; gap:18px; }.panel { overflow:hidden; }.panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:20px 22px 14px; }.panel-header h2 { margin:0; font-size:16px; }.panel-header p,.section-header p { margin:4px 0 0; color:var(--muted); font-size:12px; }.text-button,.icon-text-button { border:0; color:var(--green); background:transparent; font-weight:600; }.transaction-list { padding:0 22px 8px; }.transaction-row { display:grid; grid-template-columns:32px 1fr auto; gap:11px; align-items:center; padding:13px 0; border-top:1px solid #edf0ee; }.transaction-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; font-size:15px; }.transaction-icon.income { color:var(--green); background:var(--mint); }.transaction-icon.expense { color:var(--coral); background:var(--coral-bg); }.transaction-name { display:block; font-weight:600; }.transaction-meta { display:block; margin-top:3px; color:var(--muted); font-size:12px; }.transaction-amount { font-family:"DM Mono",monospace; font-weight:500; }.transaction-amount.income { color:var(--green); }.transaction-amount.expense { color:var(--coral); }.legend { display:flex; gap:14px; color:var(--muted); font-size:11px; }.legend i { display:inline-block; width:7px; height:7px; margin-right:4px; border-radius:50%; }.legend-income { background:var(--green); }.legend-expense { background:#e08a72; }.chart { display:flex; align-items:end; justify-content:space-around; height:147px; padding:10px 22px 0; border-bottom:1px solid #edf0ee; background:repeating-linear-gradient(to bottom,transparent 0,transparent 37px,#edf0ee 38px); }.chart-group { display:flex; align-items:end; gap:5px; height:100%; }.chart-bar { width:11px; min-height:5px; border-radius:3px 3px 0 0; }.chart-bar.income { background:#4a9d78; }.chart-bar.expense { background:#eba28d; }.chart-labels { display:flex; justify-content:space-around; padding:10px 18px 16px; color:var(--muted); font-size:11px; }
.view { display:none; }.view.active { display:block; }.section-header { margin-bottom:18px; }.section-header h2 { font-size:21px; }.filter-bar { display:flex; gap:10px; margin-bottom:15px; }.search-field { display:flex; align-items:center; flex:1; max-width:390px; gap:8px; padding:0 11px; border:1px solid var(--line); border-radius:6px; background:#fff; color:#829187; }.search-field input { width:100%; height:38px; border:0; outline:0; }.filter-bar select { height:40px; padding:0 31px 0 11px; border:1px solid var(--line); border-radius:6px; color:#405047; background:#fff; }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th { padding:13px 20px; color:#78867f; border-bottom:1px solid var(--line); background:#fafbfa; font-size:12px; font-weight:500; } td { padding:15px 20px; border-bottom:1px solid #edf0ee; color:#54645c; } tbody tr:last-child td { border-bottom:0; } .table-title { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600; }.tag { display:inline-block; padding:3px 8px; border-radius:20px; color:#50625a; background:#eef2ef; font-size:11px; }.amount-cell { text-align:right; }.table-panel td.amount-cell { font-family:"DM Mono",monospace; font-weight:500; }.report-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }.category-list { padding:0 22px 16px; }.category-row { display:grid; grid-template-columns:112px 1fr 76px; align-items:center; gap:11px; padding:12px 0; border-top:1px solid #edf0ee; }.category-row span { color:#56665e; }.category-row strong { text-align:right; font-family:"DM Mono",monospace; font-size:12px; font-weight:500; }.category-progress { height:7px; overflow:hidden; border-radius:7px; background:#edf1ee; }.category-progress i { display:block; height:100%; border-radius:7px; background:#d99a51; }.compare-list { padding:10px 22px 23px; }.compare-item { display:grid; grid-template-columns:1fr auto; gap:9px; padding:12px 0; border-bottom:1px solid #edf0ee; }.compare-item:last-child { border-bottom:0; }.compare-item small { color:var(--muted); }.compare-item strong { font-family:"DM Mono",monospace; font-weight:500; }.member-list { padding:0 22px; }.member-row { display:grid; grid-template-columns:38px 1fr auto auto; align-items:center; gap:12px; padding:17px 0; border-bottom:1px solid #edf0ee; }.member-row:last-child { border-bottom:0; }.member-row p { margin:3px 0 0; color:var(--muted); font-size:12px; }.role { padding:4px 9px; border-radius:15px; color:#39755a; background:#e8f4ec; font-size:11px; }.role.member { color:#6a756f; background:#eef1ef; }
dialog { width:min(510px,calc(100% - 28px)); padding:0; border:0; border-radius:8px; box-shadow:0 18px 50px rgba(24,48,39,.24); }dialog::backdrop { background:rgba(15,36,29,.44); }dialog form { padding:25px; }.dialog-header { display:flex; justify-content:space-between; align-items:start; }.dialog-header h2 { margin:4px 0 18px; font-size:21px; }.close-button { width:30px; height:30px; border:0; background:transparent; }.type-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; margin-bottom:17px; border-radius:7px; background:#f0f3f1; }.type-option { height:35px; color:#64736b; border:0; border-radius:5px; background:transparent; font-weight:600; }.type-option.selected { color:var(--green-dark); background:#fff; box-shadow:0 1px 3px rgba(23,49,39,.12); } form label { display:grid; gap:6px; margin-bottom:14px; color:#506057; font-size:12px; font-weight:600; } form input,form select { height:40px; padding:0 10px; color:var(--ink); border:1px solid #dce4df; border-radius:5px; background:#fff; font-weight:400; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:6px; }.secondary-button { height:38px; padding:0 14px; }.secondary-button:hover,.icon-button:hover,.date-picker:hover { background:#f2f5f3; }#toast { position:fixed; right:22px; bottom:22px; z-index:5; padding:11px 14px; color:#fff; border-radius:6px; background:#263f35; opacity:0; transform:translateY(12px); transition:.2s ease; pointer-events:none; }#toast.show { opacity:1; transform:translateY(0); }
@media (max-width:1060px) { .main-content { padding:28px; }.metric-grid { grid-template-columns:repeat(2,1fr); }.content-grid,.report-grid { grid-template-columns:1fr; }.balance-accounts { gap:15px; }.sidebar { width:226px; flex-basis:226px; }.main-content { width:calc(100% - 226px); } }
@media (max-width:720px) { .app-shell { display:block; }.sidebar { width:100%; min-height:0; padding:14px; }.brand { display:inline-flex; }.workspace-switch,.sidebar-bottom { display:none; }.main-nav { display:flex; overflow-x:auto; margin-top:10px; }.nav-item { flex:0 0 auto; width:auto; }.main-content { width:100%; padding:22px 16px 34px; }.topbar,.section-header { align-items:flex-start; }.topbar-actions { flex-wrap:wrap; justify-content:flex-end; }.date-picker { display:none; }.balance-banner { display:block; }.balance-accounts { flex-wrap:wrap; margin-top:20px; }.metric-grid { grid-template-columns:1fr 1fr; gap:10px; }.metric-card { min-height:120px; padding:14px; }.metric-card strong { font-size:18px; }.filter-bar { overflow:auto; }.search-field { flex:0 0 240px; }.member-row { grid-template-columns:38px 1fr auto; }.member-row .icon-button { display:none; } }