*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f7f6f4;--surface: #ffffff;--surface2: #f0efec;--border: #e5e3df;--text: #1a1917;--text2: #6b6762;--text3: #9e9b96;--accent: oklch(52% .14 240);--accent2: oklch(52% .14 165);--red: oklch(50% .18 25);--green: oklch(48% .14 165);--sidebar: 240px;--radius: 10px;--font: "Helvetica Neue", Helvetica, Arial, sans-serif}html,body{height:100%;background:var(--bg);font-family:var(--font);color:var(--text);font-size:16px}#root{height:100%}.app{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:24px 0;gap:4px}.sidebar-logo{padding:0 20px 20px;font-size:22px;font-weight:700;letter-spacing:-.5px;border-bottom:1px solid var(--border);margin-bottom:8px;color:var(--text)}.sidebar-logo span{color:var(--accent)}.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;cursor:pointer;font-size:16px;font-weight:500;color:var(--text2);border-radius:0;transition:all .12s;border-left:3px solid transparent;-webkit-user-select:none;user-select:none}.nav-item:hover{background:var(--bg);color:var(--text)}.nav-item.active{background:color-mix(in oklch,var(--accent) 10%,transparent);color:var(--accent);border-left-color:var(--accent);font-weight:600}.nav-icon{font-size:16px;width:20px;text-align:center}.sidebar-section{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text3);padding:14px 20px 4px;text-transform:uppercase}.main{flex:1;overflow-y:auto;display:flex;flex-direction:column}.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:10}.topbar-title{font-size:20px;font-weight:700;letter-spacing:-.3px}.topbar-sub{font-size:14px;color:var(--text3);margin-top:1px}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:7px;border:none;cursor:pointer;font-size:15px;font-weight:600;font-family:var(--font);transition:all .12s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{filter:brightness(1.1)}.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg);color:var(--text)}.btn-danger{background:var(--red);color:#fff}.btn-sm{padding:5px 10px;font-size:12px}.page{padding:24px 28px;flex:1}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.card-header{padding:16px 20px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.card-title{font-size:15px;font-weight:700;letter-spacing:-.2px}.card-sub{font-size:13px;color:var(--text3);margin-top:2px}.card-body{padding:16px 20px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}.stat-label{font-size:13px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}.stat-value{font-size:26px;font-weight:700;letter-spacing:-.8px;line-height:1}.stat-change{font-size:14px;margin-top:5px;font-weight:500;display:flex;align-items:center;gap:3px}.up{color:var(--green)}.down{color:var(--red)}.neutral{color:var(--text3)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.table{width:100%;border-collapse:collapse;font-size:15px}.table th{padding:8px 12px;text-align:left;font-size:13px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border)}.table td{padding:10px 12px;border-bottom:1px solid var(--border)}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:var(--bg)}.table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.table .muted{color:var(--text3);font-size:12px}.cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.cat-row{display:flex;align-items:center;gap:8px}.chart-wrap{width:100%;position:relative}svg text{font-family:var(--font)}.timeline{display:flex;flex-direction:column;gap:0}.timeline-month{border-bottom:1px solid var(--border)}.timeline-header{padding:12px 20px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .1s}.timeline-header:hover{background:var(--bg)}.timeline-body{padding:16px 20px;background:var(--bg);border-top:1px solid var(--border)}.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}.tag-positive{background:oklch(48% .14 165 / .12);color:var(--green)}.tag-negative{background:oklch(50% .18 25 / .12);color:var(--red)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-group{display:flex;flex-direction:column;gap:5px}.form-label{font-size:12px;font-weight:600;color:var(--text2)}.form-input{padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:var(--font);background:var(--surface);color:var(--text);outline:none;transition:border-color .12s}.form-input:focus{border-color:var(--accent)}.form-section{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text3);text-transform:uppercase;margin:16px 0 8px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{background:var(--surface);border-radius:14px;width:min(540px,94vw);max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px #0003;display:flex;flex-direction:column}.modal-header{padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;letter-spacing:-.3px;position:sticky;top:0;background:var(--surface);z-index:1}.modal-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text3);padding:2px 6px;border-radius:4px}.modal-close:hover{background:var(--bg);color:var(--text)}.modal-body{padding:18px 22px;flex:1}.modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}.progress-track{height:8px;background:var(--border);border-radius:4px;overflow:hidden}.progress-fill{height:100%;border-radius:4px;transition:width .5s ease}.sparkline{width:80px;height:28px}.goal-year{font-size:13px;font-weight:700}.goal-row{display:grid;grid-template-columns:80px 1fr 1fr 1fr 1fr;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}.goal-row:last-child{border-bottom:none}.goal-header{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.pie-legend{display:flex;flex-direction:column;gap:8px}.pie-legend-item{display:flex;align-items:center;gap:8px;font-size:12px}.pie-legend-bar{flex:1;height:4px;border-radius:2px;background:var(--border)}.pie-legend-fill{height:100%;border-radius:2px}.settings-panel{position:fixed;bottom:16px;right:16px;z-index:200;width:260px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px #0003;overflow:hidden}.settings-panel-header{padding:12px 16px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--text2);text-transform:uppercase;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.settings-panel-body{padding:12px 16px;display:flex;flex-direction:column;gap:12px}.settings-row{display:flex;align-items:center;justify-content:space-between}.settings-label{font-size:12px;font-weight:500;color:var(--text)}.toggle-btn{position:relative;width:32px;height:18px;border:none;border-radius:999px;background:rgba(0,0,0,.15);transition:background .15s;cursor:pointer;padding:0}.toggle-btn[data-on=true]{background:#34c759}.toggle-btn i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000040;transition:transform .15s;display:block}.toggle-btn[data-on=true] i{transform:translate(14px)}.accent-options{display:flex;gap:6px}.accent-swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s}.accent-swatch:hover{transform:scale(1.1)}.accent-swatch.selected{border-color:var(--text)}