:root{--navy:#0F1E35;--navy-mid:#162844;--navy-light:#1E3655;--teal:#1D9E75;--teal-light:#E1F5EE;--teal-mid:#5DCAA5;--amber:#F59E0B;--amber-light:#FEF3C7;--red:#EF4444;--text-primary:#0F1E35;--text-secondary:#64748B;--text-muted:#94A3B8;--border:#E2E8F0;--surface:#F8FAFC;--white:#FFFFFF;--sidebar-w:220px;--font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);background:var(--surface);color:var(--text-primary);font-size:14px;line-height:1.5;}
button,input,textarea,select{font-family:var(--font);}
button{cursor:pointer;}

/* Visually-hidden but accessible (used for native checkbox inputs/labels paired with custom visuals) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Auth */
.auth-screen{min-height:100vh;display:flex;}
.auth-left{width:420px;flex-shrink:0;background:var(--navy);display:flex;flex-direction:column;padding:48px 40px;}
.auth-left-brand{display:flex;align-items:center;gap:10px;margin-bottom:auto;}
.auth-brand-dot{width:36px;height:36px;background:var(--teal);border-radius:10px;display:flex;align-items:center;justify-content:center;}
.auth-brand-name{font-size:22px;font-weight:700;color:white;}
.auth-left-body{margin-bottom:auto;padding:40px 0 0;}
.auth-headline{font-size:32px;font-weight:700;color:white;line-height:1.2;margin-bottom:16px;}
.auth-sub{font-size:15px;color:#94A3B8;line-height:1.6;margin-bottom:32px;}
.auth-feature{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.auth-feature-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;}
.auth-feature-text{font-size:13px;color:#CBD5E1;}
.auth-right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;}
.auth-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:40px;width:100%;max-width:400px;}
.auth-card-title{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:6px;}
.auth-card-sub{font-size:14px;color:var(--text-muted);margin-bottom:28px;}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-muted);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-demo-btn{width:100%;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-secondary);font-size:13px;font-weight:500;transition:all 0.15s;}
.auth-demo-btn:hover{border-color:var(--teal);color:var(--teal);}
.auth-setup-box{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:10px;padding:14px;margin-top:16px;}
.auth-setup-title{font-size:12px;font-weight:600;color:#1E40AF;margin-bottom:6px;}
.auth-setup-steps{font-size:11px;color:#3B82F6;line-height:1.9;}
.auth-setup-steps a{color:#2563EB;}
.client-id-input{width:100%;padding:8px 10px;border:1px solid #BFDBFE;border-radius:6px;font-size:11px;color:#1E40AF;background:white;margin-top:8px;outline:none;}
.auth-footer{font-size:11px;color:var(--text-muted);margin-top:20px;text-align:center;line-height:1.6;}

/* App */
.app{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;overflow:hidden;}
.sidebar{width:var(--sidebar-w);background:var(--navy);display:flex;flex-direction:column;flex-shrink:0;}
.content{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px;}
.dash-cols{display:flex;gap:20px;width:100%;}
.main-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;}
.main-right{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;}
.dash-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}

/* Sidebar */
.sidebar-brand{padding:20px 16px 16px;border-bottom:1px solid var(--navy-light);display:flex;align-items:center;justify-content:space-between;}
.brand-logo{display:flex;align-items:center;gap:10px;}
.brand-dot{width:28px;height:28px;background:var(--teal);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.brand-name{font-size:18px;font-weight:700;color:white;}
.sidebar-close{display:none;background:none;border:none;padding:4px;}
.menu-toggle{display:none;background:none;border:none;padding:4px;color:var(--text-primary);align-items:center;}
.sidebar-backdrop{display:none;}
.sidebar-nav{padding:12px 8px;flex:1;}
.nav-label{font-size:10px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:0.08em;padding:0 8px;margin:12px 0 4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#94A3B8;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;margin-bottom:2px;border:none;background:none;width:100%;text-align:left;}
.nav-item:hover{background:var(--navy-light);color:white;}
.nav-item.active{background:var(--teal);color:white;}
.sidebar-bottom{padding:12px 8px;border-top:1px solid var(--navy-light);}
.user-pill{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;}
.user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;flex-shrink:0;object-fit:cover;background:var(--teal);}
.user-name{font-size:13px;font-weight:500;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.user-plan{font-size:11px;color:#64748B;}
.sign-out-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px;border:none;background:none;color:#64748B;font-size:12px;cursor:pointer;margin-top:4px;}
.sign-out-btn:hover{background:var(--navy-light);color:#94A3B8;}

/* Topbar */
.topbar-title{font-size:16px;font-weight:600;color:var(--text-primary);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.topbar-period{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.month-select{padding:6px 10px;border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:500;background:var(--white);color:var(--text-secondary);outline:none;cursor:pointer;font-family:var(--font);}
.month-select:focus{border-color:var(--teal);}
.period-btn{padding:6px 12px;font-size:12px;font-weight:500;color:var(--text-secondary);background:var(--white);border:none;cursor:pointer;}
.period-btn.active{background:var(--navy);color:white;}
.import-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--teal);color:white;border:none;border-radius:8px;font-size:13px;font-weight:600;}
.import-btn:hover{background:#15805E;}

/* Cards */
.card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.card-title{font-size:13px;font-weight:600;color:var(--text-primary);}
.card-link{font-size:12px;color:var(--teal);cursor:pointer;font-weight:500;}

/* Metrics */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;}
.metric-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.metric-label{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;}
.metric-value{font-size:22px;font-weight:700;color:var(--text-primary);letter-spacing:-0.5px;}
.metric-sub{font-size:11px;margin-top:4px;}
.metric-sub.up{color:var(--teal);}
.metric-sub.down{color:var(--red);}
.metric-sub.neutral{color:var(--text-muted);}

/* Chart */
.chart-wrap{position:relative;width:100%;height:160px;}

/* Category rows */
.cat-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #F1F5F9;}
.cat-row:last-child{border-bottom:none;}
.cat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;}
.cat-info{flex:1;min-width:0;}
.cat-name{font-size:12px;font-weight:500;color:var(--text-primary);}
.cat-count{font-size:11px;color:var(--text-muted);}
.cat-bar-wrap{width:80px;height:4px;background:#F1F5F9;border-radius:2px;overflow:hidden;}
.cat-bar{height:100%;border-radius:2px;}
.cat-amt{font-size:13px;font-weight:600;color:var(--text-primary);min-width:56px;text-align:right;}

/* Transactions */
.txn-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #F1F5F9;}
.txn-row:last-child{border-bottom:none;}
.txn-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.txn-info{flex:1;min-width:0;}
.txn-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.txn-meta{font-size:11px;color:var(--text-muted);}
.txn-cat-pill{display:inline-block;font-size:10px;font-weight:500;padding:2px 7px;border-radius:20px;background:#F1F5F9;color:var(--text-secondary);}
.txn-cat-select{font-size:10px;font-weight:500;padding:2px 7px;border-radius:20px;background:#F1F5F9;color:var(--text-secondary);border:1px solid transparent;cursor:pointer;appearance:none;-webkit-appearance:none;font-family:var(--font);outline:none;max-width:150px;}
.txn-cat-select:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light);}
.txn-cat-select:focus{border-color:var(--teal);}
.txn-amt{font-size:13px;font-weight:600;}
.neg{color:var(--text-primary);}
.pos{color:var(--teal);}

/* Budget bars */
.budget-row{margin-bottom:12px;}
.budget-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.budget-name{font-size:12px;font-weight:500;color:var(--text-primary);}
.budget-nums{font-size:11px;color:var(--text-muted);}
.budget-track{height:6px;background:#F1F5F9;border-radius:3px;overflow:hidden;}
.budget-fill{height:100%;border-radius:3px;transition:width 0.6s ease;}

/* Paycheck */
.paycheck-card{background:var(--teal);border-radius:12px;padding:16px;color:white;}
.paycheck-label{font-size:11px;font-weight:500;opacity:0.8;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.05em;}
.paycheck-amount{font-size:26px;font-weight:700;letter-spacing:-0.5px;}
.paycheck-sub{font-size:11px;opacity:0.75;margin-top:2px;}
.paycheck-divider{border:none;border-top:1px solid rgba(255,255,255,0.2);margin:12px 0;}
.paycheck-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px;}
.paycheck-row .pl{opacity:0.8;}
.paycheck-row .pv{font-weight:600;}
.paycheck-free{background:rgba(255,255,255,0.15);border-radius:8px;padding:10px;margin-top:10px;text-align:center;}
.paycheck-free .pf-label{font-size:10px;opacity:0.8;text-transform:uppercase;letter-spacing:0.05em;}
.paycheck-free .pf-val{font-size:20px;font-weight:700;}

/* Alert */
.alert{display:flex;gap:10px;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.5;margin-bottom:8px;}
.alert-warn{background:var(--amber-light);color:#92400E;border:1px solid #FCD34D;}
.alert-info{background:var(--teal-light);color:#065F46;border:1px solid var(--teal-mid);}

/* AI Chat */
.chat-panel{background:var(--white);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;height:600px;}
.chat-messages .msg{font-size:13px;}
.chat-header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0;}
.chat-header-dot{width:8px;height:8px;background:var(--teal);border-radius:50%;}
.chat-header-title{font-size:13px;font-weight:600;color:var(--text-primary);}
.chat-header-sub{font-size:11px;color:var(--text-muted);margin-left:auto;}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;}
.msg{max-width:88%;padding:9px 11px;border-radius:10px;font-size:12px;line-height:1.55;}
.msg-ai{background:#F8FAFC;border:1px solid var(--border);color:var(--text-primary);align-self:flex-start;border-radius:4px 10px 10px 10px;}
.msg-user{background:var(--navy);color:white;align-self:flex-end;border-radius:10px 10px 4px 10px;}
.msg-loading{display:flex;gap:4px;align-items:center;padding:11px;}
.dot-pulse{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:pulse 1.2s infinite;}
.dot-pulse:nth-child(2){animation-delay:0.2s;}
.dot-pulse:nth-child(3){animation-delay:0.4s;}
@keyframes pulse{0%,80%,100%{opacity:0.3;transform:scale(0.8);}40%{opacity:1;transform:scale(1);}}
.chat-input-area{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0;}
.chat-input{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:12px;color:var(--text-primary);background:var(--surface);outline:none;}
.chat-input:focus{border-color:var(--teal);}
.chat-send{width:32px;height:32px;border-radius:8px;background:var(--teal);border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chat-send:hover{background:#15805E;}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:5px;padding:8px 12px;border-top:1px solid var(--border);}
.chat-chip{font-size:11px;padding:4px 9px;border:1px solid var(--border);border-radius:20px;background:var(--white);color:var(--text-secondary);cursor:pointer;}
.chat-chip:hover{border-color:var(--teal);color:var(--teal);}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:1000;}
.modal{background:var(--white);border-radius:16px;padding:28px;width:480px;max-width:95vw;}
.modal-title{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:6px;}
.modal-sub{font-size:13px;color:var(--text-secondary);margin-bottom:20px;line-height:1.5;}
.drop-zone{border:2px dashed var(--border);border-radius:12px;padding:32px;text-align:center;cursor:pointer;transition:all 0.15s;background:var(--surface);}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--teal);background:var(--teal-light);}
.drop-zone .dz-title{font-size:14px;font-weight:600;color:var(--text-primary);margin:10px 0 4px;}
.drop-zone .dz-sub{font-size:12px;color:var(--text-muted);}
.bank-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.bank-pill{padding:8px;border:1px solid var(--border);border-radius:8px;text-align:center;font-size:11px;font-weight:500;color:var(--text-secondary);background:var(--surface);cursor:pointer;transition:all 0.15s;}
.bank-pill:hover{border-color:var(--teal);color:var(--teal);}
.bank-pill.active{border-color:var(--teal);background:var(--teal-light);color:#0F6B50;font-weight:600;}
.bank-instructions{margin-top:10px;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:8px;padding:12px 14px;}
.bank-instructions-title{font-size:12px;font-weight:700;color:#15803D;margin-bottom:8px;}
.bank-steps{padding-left:16px;list-style:decimal;}
.bank-steps li{font-size:12px;color:#166534;line-height:1.6;margin-bottom:2px;}
.modal-close{float:right;background:none;border:none;font-size:20px;color:var(--text-muted);cursor:pointer;margin-top:-4px;}
.plaid-banner{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;color:#1E40AF;}

/* Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;}
.empty-state h3{font-size:15px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;margin-top:16px;}
.empty-state p{font-size:13px;color:var(--text-muted);max-width:260px;line-height:1.5;}
.empty-cta{margin-top:16px;display:flex;align-items:center;gap:6px;padding:9px 16px;background:var(--teal);color:white;border:none;border-radius:8px;font-size:13px;font-weight:600;}

/* Goals */
.goal-track{height:8px;background:#F1F5F9;border-radius:4px;overflow:hidden;}
.goal-fill{height:100%;border-radius:4px;background:var(--teal);}

/* Paycheck input */
.paycheck-input-section{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px;}
.input-label{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:5px;display:block;}
.dollar-input{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.dollar-prefix{padding:8px 10px;background:var(--surface);border-right:1px solid var(--border);font-size:13px;color:var(--text-muted);font-weight:500;}
.dollar-input input{flex:1;padding:8px 10px;border:none;outline:none;font-size:14px;font-weight:600;color:var(--text-primary);background:white;}
.save-btn{padding:9px 16px;background:var(--navy);color:white;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;width:100%;margin-top:8px;}

/* Settings */
.settings-section{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px;}
.settings-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:14px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #F1F5F9;}
.settings-row:last-child{border-bottom:none;}
.settings-key{font-size:13px;color:var(--text-primary);}
.danger-btn{padding:7px 14px;background:none;border:1px solid var(--red);border-radius:8px;color:var(--red);font-size:12px;font-weight:500;cursor:pointer;}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--navy);color:white;padding:12px 18px;border-radius:10px;font-size:13px;font-weight:500;z-index:2000;animation:slideIn 0.2s ease;}
@keyframes slideIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Search/filter labels (Transactions page) */
.field-label{font-size:11px;font-weight:500;color:var(--text-muted);margin-bottom:5px;display:block;}

@media(max-width:900px){
  .metrics-grid{grid-template-columns:repeat(2,1fr);}
  .dash-cols{flex-direction:column;}
  .main-left{width:100%;flex:none;}
  .main-right{width:100%;flex:none;}
}
@media(max-width:768px){
  .auth-screen{flex-direction:column;min-height:auto;}
  .auth-left{width:100%;flex-shrink:1;padding:32px 24px;}
  .auth-left-brand{margin-bottom:24px;}
  .auth-left-body{margin-bottom:0;padding:0;}
  .auth-right{padding:24px;}
  .menu-toggle{display:flex;}
  .sidebar{position:fixed;top:0;left:0;height:100%;z-index:1500;transform:translateX(-100%);transition:transform 0.2s ease;}
  .sidebar.open{transform:translateX(0);}
  .sidebar-close{display:flex;}
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1400;}
  .topbar{padding:0 16px;}
  .main{padding:16px;}
}
@media(max-width:480px){
  .metrics-grid{grid-template-columns:1fr;}
  .topbar-period{display:none;}
  .import-btn-text{display:none;}
  .import-btn{padding:8px 10px;}
  .auth-card{padding:28px 20px;}
  .auth-left{padding:24px 20px;}
}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:3px;}