*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}html{font-size:16px}body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif}:root{--color-bg:#f5f5fb;--color-surface:#fff;--color-surface-soft:#f8f6ff;--color-surface-strong:#f1edff;--color-border-subtle:#e1ddf5;--color-border-strong:#c3b8ff;--color-accent:#7b6cf6;--color-accent-soft:#ece9ff;--color-accent-strong:#5f4ae6;--color-text:#24223a;--color-text-soft:#6b678a;--color-text-muted:#9692b3;--color-danger:#f46b88;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--shadow-soft:0 18px 45px #4e40a41f;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-2xl:1.9rem}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;background:0 0;border:none}ul,ol{margin:0;padding:0;list-style:none}.page{width:100%}
.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(120deg,#fbfaffeb,#f5f5fbf2);border-bottom:1px solid #cfcaedb3;position:sticky;top:0}.app-header-inner{max-width:1120px;padding:var(--space-4)var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-4);margin:0 auto;display:flex}.app-brand{align-items:center;gap:var(--space-3);display:flex}.app-logo{background:radial-gradient(circle at 20% 20%,#fff 0,#f1edff 45%,#d7cffb 100%);border-radius:999px;justify-content:center;align-items:center;width:38px;height:38px;display:flex;box-shadow:0 10px 25px #5145a940}.app-logo-dot{background:radial-gradient(circle at 20% 20%,#fff 0,#7b6cf6 80%);border-radius:999px;width:16px;height:16px}.app-brand-text{flex-direction:column;gap:2px;display:flex}.app-brand-title{font-size:var(--text-lg);letter-spacing:.01em;color:var(--color-text);font-weight:600}.app-nav{align-items:center;gap:var(--space-2);background:#f6f4ffe6;border-radius:999px;padding:2px;display:flex;box-shadow:0 12px 30px #685cc129}.app-nav-link{font-size:var(--text-sm);color:var(--color-text-soft);white-space:nowrap;border-radius:999px;padding:8px 16px;font-weight:500;transition:background-color .18s ease-out,color .18s ease-out,box-shadow .18s ease-out,transform .12s ease-out}.app-nav-link:hover{color:var(--color-text);background:#ece9ffe6;transform:translateY(-1px)}.app-nav-link--active{color:#fff;background:linear-gradient(135deg,#7b6cf6,#9c86ff);box-shadow:0 10px 26px #6658d673}.app-main{padding:var(--space-6)var(--space-4)var(--space-4);flex:1}.app-main-inner{max-width:1120px;margin:0 auto}.page-header{justify-content:space-between;align-items:flex-end;gap:var(--space-4);margin-bottom:var(--space-6);display:flex}.page-title{font-size:var(--text-2xl);letter-spacing:-.02em;color:var(--color-text);font-weight:600}.page-subtitle{font-size:var(--text-sm);color:var(--color-text-soft);margin-top:4px}.page-header-actions{align-items:center;gap:var(--space-3);display:flex}.btn-primary{color:#fff;font-size:var(--text-sm);background:linear-gradient(135deg,#7b6cf6,#a28aff);border:1px solid #fffc;border-radius:999px;padding:10px 18px;font-weight:500;transition:transform .12s ease-out,box-shadow .16s ease-out,filter .16s ease-out;box-shadow:0 14px 32px #6356d473}.btn-primary:hover{filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 18px 40px #5e50d28c}.btn-primary:active{transform:translateY(0);box-shadow:0 10px 20px #5347b880}.card{border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:var(--space-4);background:linear-gradient(145deg,#fff,#f9f7ff);border:1px solid #dedaf8f2}.card-header{justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.card-title{font-size:var(--text-lg);color:var(--color-text);font-weight:600}.card-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px}.card-body{font-size:var(--text-sm)}.empty-state{padding:var(--space-5);border-radius:var(--radius-md);text-align:left;background:radial-gradient(circle at 0 0,#fff 0,#f6f3ff 55%);border:1px dashed #ccc6efcc}.empty-state-pill{font-size:var(--text-xs);color:var(--color-text-soft);margin-bottom:var(--space-2);background:#ece9ffe6;border-radius:999px;padding:4px 10px;font-weight:500;display:inline-flex}.empty-state-text{font-size:var(--text-sm);color:var(--color-text-soft)}.empty-state-highlight{color:var(--color-accent-strong);font-weight:500}.app-footer{padding:var(--space-3)var(--space-4)var(--space-4);background:linear-gradient(120deg,#f8f7fff5,#f4f3fdfa);border-top:1px solid #d1ccf2d9}.app-footer-inner{justify-content:center;align-items:center;max-width:1120px;margin:0 auto;display:flex}.app-footer-text{font-size:var(--text-xs);color:var(--color-text-muted)}.app-footer-text strong{color:var(--color-text-soft);font-weight:600}@media (max-width:768px){.app-header-inner{flex-direction:column;align-items:flex-start}.app-nav{justify-content:space-between;width:100%;overflow-x:auto}.page-header{flex-direction:column;align-items:flex-start}.page-header-actions{justify-content:flex-start;width:100%}}
.page-dashboard{gap:var(--space-6);flex-direction:column;display:flex}.dashboard-grid{gap:var(--space-5);flex-direction:column;display:flex}.dashboard-summary{gap:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.summary-card{border-radius:var(--radius-lg);padding:var(--space-4);background:radial-gradient(circle at 0 0,#fff 0,#f7f4ff 55%);border:1px solid #dad6f7f2;box-shadow:0 16px 40px #5e50d21a}.summary-card-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.15em;color:var(--color-text-muted);margin-bottom:var(--space-2)}.summary-card-value{color:var(--color-text);letter-spacing:-.03em;font-size:1.7rem;font-weight:600}.summary-card-value--small{font-size:var(--text-lg)}.summary-card-meta{font-size:var(--text-sm);color:var(--color-text-soft);margin-top:4px}.dashboard-main{gap:var(--space-4);grid-template-columns:minmax(0,1.45fr) minmax(0,1.05fr);display:grid}.dashboard-column{gap:var(--space-4);flex-direction:column;display:flex}.card--chart-placeholder{background:radial-gradient(circle at 100% 0,#fefeff 0,#f4f2ff 56%)}.chart-placeholder{align-items:flex-end;gap:var(--space-2);height:140px;margin-bottom:var(--space-3);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.chart-placeholder-bar{opacity:.9;background:linear-gradient(#7b6cf6,#c6bbff);border-radius:999px;box-shadow:0 8px 18px #7767e280}.chart-placeholder-bar--1{height:45%}.chart-placeholder-bar--2{height:75%}.chart-placeholder-bar--3{height:55%}.chart-placeholder-bar--4{height:85%}.chart-placeholder-text{font-size:var(--text-xs);color:var(--color-text-muted)}@media (max-width:900px){.dashboard-main{grid-template-columns:minmax(0,1fr)}}@media (max-width:768px){.dashboard-summary{grid-template-columns:minmax(0,1fr)}}
.page-expenses{gap:var(--space-5);flex-direction:column;display:flex}.expenses-form-card{margin-bottom:var(--space-4)}.expenses-form{gap:var(--space-4);flex-direction:column;display:flex}.form-grid{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.form-field{flex-direction:column;gap:6px;display:flex}.form-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--color-text-muted)}.form-input,.form-textarea,.form-input-with-prefix{border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text);background:#fcfbffe6;border:1px solid #d6d1f6f2;outline:none;padding:9px 12px;transition:border-color .14s ease-out,box-shadow .14s ease-out,background-color .14s ease-out}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-muted)}.form-input:focus,.form-textarea:focus{border-color:var(--color-accent);background:#fff;box-shadow:0 0 0 1px #7b6cf659}.form-input-with-prefix{align-items:center;gap:6px;padding-left:10px;display:flex}.form-prefix{font-size:var(--text-sm);color:var(--color-text-soft)}.form-input-with-prefix .form-input{box-shadow:none;background:0 0;border:none;padding-left:0}.form-input-with-prefix .form-input:focus{box-shadow:none}.form-textarea{resize:vertical;min-height:70px}.btn-secondary{font-size:var(--text-sm);color:var(--color-text-soft);background:#ece9ffe6;border:1px solid #d0cbf3e6;border-radius:999px;padding:9px 16px;font-weight:500;transition:background-color .14s ease-out,box-shadow .14s ease-out,transform .1s ease-out;box-shadow:0 10px 26px #594cc41a}.btn-secondary:hover{background:#e4dffcfa;transform:translateY(-1px)}.btn-ghost{font-size:var(--text-sm);color:var(--color-accent-strong);background:0 0;border:1px dashed #a296fce6;border-radius:999px;padding:9px 14px;font-weight:500;transition:background-color .14s ease-out,border-color .14s ease-out,transform .1s ease-out}.btn-ghost:hover{background:#efecffcc;border-color:#7b6cf6f2;transform:translateY(-1px)}.form-error{color:var(--color-danger);font-size:var(--text-sm)}.form-actions{justify-content:flex-end;display:flex}.expenses-bottom{gap:var(--space-4);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);display:grid}.filters-grid{gap:var(--space-3);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.table-wrapper{width:100%;overflow-x:auto}.expenses-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--text-sm)}.expenses-table thead tr{background:#f4f1ffe6}.expenses-table th,.expenses-table td{border-bottom:1px solid #e4dffae6;padding:10px 12px}.expenses-table th:first-child,.expenses-table td:first-child{padding-left:16px}.expenses-table th:last-child,.expenses-table td:last-child{padding-right:16px}.expenses-table th{text-align:left;color:var(--color-text-soft);font-weight:500;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em}.th-right,.td-right,.th-actions,.td-actions{text-align:right}.td-note{max-width:300px}.note-muted{color:var(--color-text-muted)}.table-btn{font-size:var(--text-xs);color:var(--color-text-soft);background:#f3f0ffe6;border:1px solid #d2cdf5f2;border-radius:999px;margin-left:4px;padding:4px 10px;transition:background-color .14s ease-out,border-color .14s ease-out,transform .1s ease-out}.table-btn:first-child{margin-left:0}.table-btn:hover{background:#e7e2fff5;border-color:#c0b8f9f2;transform:translateY(-1px)}.table-btn-danger{color:var(--color-danger);background:#ffeff4f2;border-color:#f46b8859}.table-btn-danger:hover{background:#ffe7effa}.chip-link{font-size:var(--text-xs);color:var(--color-text-soft);background:#eeeaffe6;border:1px solid #d7d2f9f2;border-radius:999px;padding:6px 12px;font-weight:500;transition:background-color .14s ease-out,transform .1s ease-out,box-shadow .14s ease-out}.chip-link:hover{background:#e5dffff2;transform:translateY(-1px);box-shadow:0 10px 24px #7868e933}.recent-list{gap:var(--space-2);flex-direction:column;display:flex}.recent-item{border-radius:var(--radius-md);justify-content:space-between;gap:var(--space-3);background:#f9f7ffe6;border:1px solid #ded9f9f2;padding:10px 12px;display:flex}.recent-item-main{flex-direction:column;gap:3px;display:flex}.recent-item-title{font-size:var(--text-sm);font-weight:500}.recent-item-note{font-size:var(--text-xs);color:var(--color-text-muted)}.recent-item-meta{text-align:right;flex-direction:column;gap:2px;display:flex}.recent-item-amount{font-size:var(--text-sm);font-weight:600}.recent-item-date{font-size:var(--text-xs);color:var(--color-text-muted)}@media (max-width:900px){.expenses-bottom{grid-template-columns:minmax(0,1fr)}.filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{grid-template-columns:minmax(0,1fr)}}@media (max-width:640px){.filters-grid{grid-template-columns:minmax(0,1fr)}.page-header-actions{flex-wrap:wrap;justify-content:flex-start}}
.page-analytics{gap:var(--space-5);flex-direction:column;display:flex}.analytics-grid{gap:var(--space-4);grid-template-columns:minmax(0,1fr);display:grid}.analytics-card{padding-bottom:var(--space-5)}.analytics-body{gap:var(--space-4);flex-direction:column;display:flex}.analytics-chart-row{gap:var(--space-4);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;display:grid}.analytics-chart-main{min-height:220px}.analytics-chart-main--wide{min-height:260px}.analytics-legend{gap:var(--space-2);flex-direction:column;display:flex}.analytics-legend-item{align-items:center;gap:var(--space-2);display:flex}.analytics-legend-dot{border-radius:999px;width:12px;height:12px}.analytics-legend-text{justify-content:space-between;gap:var(--space-6);width:100%;display:flex}.analytics-legend-label{font-size:var(--text-sm)}.analytics-legend-value{font-size:var(--text-sm);color:var(--color-text-soft)}@media (max-width:900px){.analytics-chart-row{grid-template-columns:minmax(0,1fr)}}
.page-settings{gap:var(--space-5);flex-direction:column;display:flex}.settings-card{max-width:720px}.settings-row{gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.settings-pill{font-size:var(--text-sm);color:var(--color-text-soft);background:#f4f1ffe6;border:1px solid #d7d2f9f2;border-radius:999px;padding:8px 14px;font-weight:500;transition:background-color .14s ease-out,border-color .14s ease-out,box-shadow .14s ease-out,transform .1s ease-out}.settings-pill:hover{background:#ece8fff5;transform:translateY(-1px)}.settings-pill--active{color:#fff;background:linear-gradient(135deg,#7b6cf6,#9f88ff);border-color:#ffffffd9;box-shadow:0 14px 34px #6052d780}.settings-hint{font-size:var(--text-xs);color:var(--color-text-muted)}