:root { --bg:#0b0b0b; --surface:#121212; --surface-2:#171717; --line:#292929; --muted:#77736c; --text:#f3eee5; --gold:#c9933a; --gold-dark:#9f7229; --green:#47d689; --red:#ff6972; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); } button, input { font:inherit; } button { cursor:pointer; } .app-shell { min-height:100vh; display:flex; }.sidebar { flex:0 0 238px; min-height:100vh; display:flex; flex-direction:column; background:#111; border-right:1px solid var(--line); }.brand-wrap { padding:34px 22px 24px; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; letter-spacing:.02em; }.brand-mark { display:grid; place-items:center; width:28px; height:28px; background:var(--gold); color:#14100a; font-family:ui-monospace,monospace; font-size:10px; letter-spacing:1px; }.eyebrow { margin:8px 0 0; color:#938c80; text-transform:uppercase; letter-spacing:.15em; font:10px ui-monospace, SFMono-Regular, Menlo, monospace; }.navigation { padding:23px 10px; display:grid; gap:3px; }.nav-link { min-height:42px; display:flex; align-items:center; gap:13px; color:#85817b; border:0; border-left:2px solid transparent; background:transparent; padding:0 12px; text-align:left; font-size:14px; transition:.18s; }.nav-link span { width:15px; text-align:center; color:#999; }.nav-link b { margin-left:auto; font-size:20px; font-weight:400; }.nav-link:hover { background:#181715; color:#e6dfd3; }.nav-link.active { background:#242016; color:var(--gold); border-left-color:var(--gold); }.nav-link.active span { color:var(--gold); }.sidebar-user { border-top:1px solid var(--line); margin-top:auto; padding:19px 16px; display:flex; align-items:center; gap:11px; }.avatar { display:grid; place-items:center; height:30px; width:30px; flex:0 0 30px; background:rgba(201,147,58,.13); border:1px solid rgba(201,147,58,.32); color:var(--gold); font:10px ui-monospace,monospace; }.sidebar-user strong { display:block; font-size:12px; font-weight:600; }.sidebar-user small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }.content-shell { min-width:0; flex:1; }.topbar { height:71px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 26px; }.header-title { display:flex; align-items:center; gap:14px; }.header-title h1 { margin:0; font-size:14px; }.header-title .eyebrow { margin-top:4px; }.header-actions { display:flex; align-items:center; gap:12px; }.search-placeholder { width:208px; color:#696969; padding:9px 12px; border:1px solid var(--line); background:#191919; font-size:12px; }.icon-button, .menu-button, .avatar-button { position:relative; border:0; color:#aaa; background:transparent; }.icon-button { font-size:17px; }.icon-button i { position:absolute; width:6px; height:6px; background:var(--gold); border-radius:50%; right:1px; top:1px; }.avatar-button { cursor:pointer; }.menu-button { display:none; font-size:20px; }.main-content { max-width:1500px; padding:24px; margin:0 auto; }.loading, .error-state { min-height:360px; display:grid; place-content:center; text-align:center; color:var(--muted); }.error-state h2 { color:var(--text); }.error-state p { max-width:360px; }.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.panel { background:var(--surface); border:1px solid var(--line); }.kpi { min-height:124px; padding:19px 20px; }.kpi strong { display:block; margin:16px 0 8px; font:600 24px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:-1px; }.kpi p:last-child { display:flex; gap:7px; margin:0; font-size:10px; }.change { font:600 11px ui-monospace,monospace; }.positive { color:var(--green)!important; }.negative { color:var(--red)!important; }.muted { color:#777; }.chart-grid-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:12px; margin-top:24px; }.revenue-panel, .portfolio-panel { padding:20px; }.panel-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }.panel-head h2 { font-size:14px; margin:0; }.panel-head p { color:#8a8378; margin:5px 0 0; font:10px ui-monospace,monospace; letter-spacing:.04em; }.legend { display:flex; gap:15px; color:#85817b; font:10px ui-monospace,monospace; }.legend i { display:inline-block; width:8px; height:8px; margin-right:5px; }.legend-revenue { background:var(--gold); }.legend-costs { background:#555; }.chart-wrap { padding-top:19px; }.area-chart { display:block; width:100%; height:auto; overflow:visible; }.chart-grid line { stroke:#262626; stroke-dasharray:3 4; }.area-chart text { fill:#716d66; font:10px ui-monospace,monospace; }.revenue-line, .cost-line { fill:none; stroke-linejoin:round; stroke-linecap:round; }.revenue-line { stroke:var(--gold); stroke-width:2; }.cost-line { stroke:#5a5a5a; stroke-width:1.4; }.sectors { display:grid; gap:16px; margin:37px 0 27px; }.sector { display:grid; grid-template-columns:42px 1fr 28px; gap:10px; align-items:center; color:#89837a; font:10px ui-monospace,monospace; }.sector div { height:10px; background:#1c1c1c; }.sector i { display:block; height:100%; background:var(--gold); }.sector b { color:#b3aca1; font-weight:400; text-align:right; }.portfolio-metrics { border-top:1px solid var(--line); padding-top:17px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }.portfolio-metrics p, .bottom-metrics small { color:#847e75; font:10px ui-monospace,monospace; margin:0; }.portfolio-metrics strong { display:block; margin-top:5px; font:600 16px ui-monospace,monospace; }.portfolio-metrics div:last-child strong { color:var(--gold); }.transactions { margin-top:24px; }.transactions .panel-head { padding:17px 20px; border-bottom:1px solid var(--line); }.text-button { padding:0; border:0; background:none; color:var(--gold); font:10px ui-monospace,monospace; }.table-scroll { overflow:auto; } table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; } th { color:#827d74; font:10px ui-monospace,monospace; font-weight:400; text-transform:uppercase; letter-spacing:.11em; padding:12px 20px; } td { border-top:1px solid #282828; padding:13px 20px; color:#9a948b; font:11px ui-monospace,monospace; } tbody tr:nth-child(even) { background:rgba(255,255,255,.01); } tbody tr:hover { background:#181818; }.transaction-party { color:#eee8dd; font:600 12px Inter, sans-serif; }.tag { padding:3px 8px; font-size:10px; }.tag.income { color:var(--green); background:rgba(71,214,137,.11); }.tag.expense { color:var(--red); background:rgba(255,105,114,.11); }.amount { font-weight:600; }.status { font-size:10px; }.status:before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:100%; background:#777; }.status.pending { color:var(--gold); }.status.pending:before { background:var(--gold); }.bottom-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:24px 0 3px; }.bottom-metrics article { padding:17px 19px; display:flex; align-items:center; justify-content:space-between; gap:15px; }.bottom-metrics article strong { color:var(--gold); font:600 19px ui-monospace,monospace; }.bottom-metrics small { text-align:right; }.toast { opacity:0; pointer-events:none; position:fixed; right:20px; bottom:20px; max-width:320px; padding:12px 16px; background:#292216; color:#f0dfbd; border:1px solid rgba(201,147,58,.45); font-size:12px; transform:translateY(10px); transition:.2s; }.toast.show { opacity:1; transform:translateY(0); }.login-page { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 0, #211a0d 0%, var(--bg) 44%); }.login-card { width:min(420px,100%); padding:37px; border:1px solid var(--line); background:rgba(18,18,18,.96); box-shadow:0 18px 70px rgba(0,0,0,.35); }.brand-login { margin-bottom:0; }.login-card h1 { margin:30px 0 8px; font-size:27px; letter-spacing:-.7px; }.login-intro { margin:0 0 28px; color:#928b80; font-size:14px; line-height:1.55; }.login-card label { display:block; margin:17px 0 7px; color:#c5bfb5; font-size:12px; }.login-card input { width:100%; border:1px solid #343331; padding:11px 12px; color:var(--text); background:#0d0d0d; outline:none; }.login-card input:focus { border-color:var(--gold); }.primary-button { width:100%; margin-top:22px; padding:12px 16px; border:1px solid var(--gold); color:#171107; background:var(--gold); font-weight:700; font-size:13px; }.primary-button:hover { background:#d6a24a; }.primary-button:disabled { opacity:.65; cursor:wait; }.primary-button span { float:right; font-size:18px; line-height:12px; }.form-error { min-height:18px; margin:10px 0 -6px; color:var(--red); font-size:12px; }.login-note { margin:25px 0 0; color:#716b63; font-size:11px; text-align:center; }.overlay { display:none; }
.chart-empty, .empty-copy, .empty-table { color:var(--muted); font-size:12px; }.chart-empty { padding:70px 0; text-align:center; }.empty-copy { margin:38px 0; }.empty-table { padding:25px; text-align:center; }
@media (max-width:1050px) { .kpi-grid { grid-template-columns:repeat(2,1fr); }.chart-grid-layout { grid-template-columns:1fr; }.portfolio-panel { min-height:350px; }.sectors { max-width:600px; }.bottom-metrics { grid-template-columns:1fr; } }
@media (max-width:720px) { .sidebar { position:fixed; z-index:10; width:238px; transform:translateX(-100%); transition:transform .2s; }.menu-open .sidebar { transform:translateX(0); }.menu-open .overlay { display:block; position:fixed; z-index:9; inset:0; background:rgba(0,0,0,.6); }.menu-button { display:block; }.topbar { padding:0 18px; }.main-content { padding:16px; }.search-placeholder, .icon-button { display:none; }.kpi-grid { grid-template-columns:1fr; }.kpi { min-height:110px; }.legend { display:none; }.revenue-panel, .portfolio-panel { padding:16px; }.chart-wrap { margin-left:-8px; margin-right:-4px; }.bottom-metrics { padding-top:16px; }.login-card { padding:28px 23px; } }