:root{--bg-app:#f4f7fa;--bg-sidebar:#fff;--bg-card:#fff;--primary-blue:#1883f2;--primary-blue-hover:#1573d6;--text-primary:#1e293b;--text-secondary:#64748b;--border-color:#e2e8f0;--sidebar-active-bg:#eef5ff;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}.app-container{min-height:100vh;display:flex}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.page-content{flex:1;padding:24px;overflow-y:auto}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-secondary{color:var(--text-secondary)}.sidebar{background-color:var(--bg-sidebar);border-right:1px solid var(--border-color);flex-direction:column;width:260px;height:100vh;display:flex}.sidebar-header{border-bottom:1px solid var(--border-color);padding:24px}.logo-container{align-items:center;gap:12px;display:flex}.logo-icon{color:#e53e3e;background-color:#fce8e8;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-weight:700;display:flex}.company-name{color:var(--text-primary);font-size:14px;font-weight:700;line-height:1.2}.company-sub{color:var(--primary-blue);letter-spacing:.5px;font-size:10px;font-weight:600}.sidebar-scrollable{flex:1;padding:24px 0;overflow-y:auto}.sidebar-section{margin-bottom:24px}.section-title{color:var(--text-secondary);letter-spacing:.5px;margin-bottom:8px;padding:0 24px;font-size:11px;font-weight:600}.nav-menu{flex-direction:column;display:flex}.nav-item{color:var(--text-primary);border-left:3px solid #0000;align-items:center;gap:12px;padding:10px 24px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{background-color:#f8fafc}.nav-item.active{background-color:var(--sidebar-active-bg);color:var(--primary-blue);border-left-color:var(--primary-blue)}.nav-item.active svg{color:var(--primary-blue)}.sidebar-footer{border-top:1px solid var(--border-color);padding:16px 24px}.user-profile{align-items:center;gap:12px;display:flex}.user-avatar{background-color:var(--sidebar-active-bg);color:var(--primary-blue);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:600;display:flex}.user-info{flex-direction:column;flex:1;display:flex}.user-name{color:var(--text-primary);font-size:14px;font-weight:600}.user-role{color:var(--primary-blue);font-size:11px;font-weight:600}.logout-btn{color:var(--text-secondary);background:0 0;border:none;padding:4px}.logout-btn:hover{color:var(--text-primary)}.header{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;height:72px;padding:0 24px;display:flex}.header-left{flex:1}.search-container{border:1px solid var(--border-color);background-color:#f8fafc;border-radius:6px;align-items:center;max-width:400px;padding:8px 12px;display:flex}.search-icon{color:var(--text-secondary);margin-right:8px}.search-input{width:100%;color:var(--text-primary);background:0 0;border:none;outline:none;font-family:inherit;font-size:14px}.search-input::placeholder{color:var(--text-secondary)}.header-right{align-items:center;gap:20px;display:flex}.icon-btn{color:var(--text-secondary);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:relative}.icon-btn:hover{color:var(--text-primary)}.badge{color:#fff;background-color:#ef4444;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px}.header-avatar{background-color:var(--sidebar-active-bg);color:var(--primary-blue);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:600;display:flex}.metric-card{background-color:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:12px;flex-direction:column;gap:16px;padding:20px;transition:transform .2s,box-shadow .2s;display:flex}.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-header{justify-content:space-between;align-items:center;display:flex}.card-title{color:var(--text-secondary);font-size:13px;font-weight:600}.card-icon{color:var(--text-secondary);opacity:.7}.card-value{color:var(--text-primary);font-size:28px;font-weight:700;line-height:1}.card-trend{align-items:center;gap:4px;font-size:12px;font-weight:600;display:flex}.trend-green{color:#10b981}.trend-red{color:#ef4444}.trend-blue{color:var(--primary-blue)}.metric-card.primary{background-color:var(--primary-blue);color:#fff;border:none}.metric-card.primary .card-title,.metric-card.primary .card-icon,.metric-card.primary .card-value,.metric-card.primary .card-trend{color:#fff}.metric-card.primary .card-icon{opacity:.9}.chart-card{background-color:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:12px;flex-direction:column;padding:24px;display:flex}.chart-header{margin-bottom:20px}.chart-title{color:var(--text-primary);margin-bottom:4px;font-size:16px;font-weight:600}.chart-subtitle{color:var(--text-secondary);font-size:13px}.chart-body{width:100%}.dashboard-container{flex-direction:column;gap:24px;display:flex}.dashboard-header-row{justify-content:space-between;align-items:flex-end;margin-bottom:8px;display:flex}.breadcrumbs{color:var(--text-secondary);margin-bottom:8px;font-size:12px}.page-title{color:var(--text-primary);font-size:24px;font-weight:700;line-height:1.2}.header-actions{gap:12px;display:flex}.btn-outline{border:1px solid var(--border-color);color:var(--text-primary);background-color:#0000;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-outline:hover{background-color:#f8fafc;border-color:#cbd5e1}.btn-primary{background-color:var(--primary-blue);border:1px solid var(--primary-blue);color:#fff;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:background-color .2s}.btn-primary:hover{background-color:var(--primary-blue-hover)}.metrics-grid{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.charts-grid{grid-template-columns:2fr 1fr;gap:20px;display:grid}.chart-wrapper-main,.chart-wrapper-side{flex-direction:column;display:flex}.chart-wrapper-main>.chart-card,.chart-wrapper-side>.chart-card{height:100%}@media (width<=1200px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}}@media (width<=768px){.metrics-grid{grid-template-columns:1fr}.dashboard-header-row{flex-direction:column;align-items:flex-start;gap:16px}}.section-header-flex{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.section-header-flex .form-section-title{margin-bottom:0}.btn-sm{align-items:center;gap:6px;padding:6px 12px;font-size:13px;display:flex}.expense-table-container{overflow-x:auto}.expense-table{border-collapse:collapse;width:100%}.expense-table th{text-align:left;border-bottom:1px solid var(--border-color);color:var(--text-secondary);background-color:#f8fafc;padding:12px;font-size:13px;font-weight:600}.expense-table td{border-bottom:1px solid var(--border-color);padding:12px}.empty-state{text-align:center;border:1px dashed var(--border-color);color:var(--text-secondary);background-color:#f8fafc;border-radius:8px;padding:32px;font-size:14px}.btn-icon{cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.btn-icon:hover{background-color:#f1f5f9}.btn-icon.danger{color:#ef4444}.btn-icon.danger:hover{background-color:#fef2f2}.upload-zone{border:2px dashed var(--border-color);text-align:center;cursor:pointer;background-color:#f8fafc;border-radius:12px;padding:48px;transition:all .2s}.upload-zone:hover{border-color:var(--primary-blue);background-color:var(--sidebar-active-bg)}.upload-icon{color:var(--primary-blue);margin-bottom:16px}.upload-text{color:var(--text-primary);margin-bottom:8px;font-size:16px;font-weight:500}.upload-sub{color:var(--text-secondary);font-size:13px}.review-summary{flex-direction:column;gap:24px;display:flex}.summary-card{border:1px solid var(--border-color);background-color:#f8fafc;border-radius:8px;padding:20px}.summary-card h3{color:var(--text-primary);border-bottom:1px solid var(--border-color);margin-bottom:16px;padding-bottom:8px;font-size:15px}.summary-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.summary-item{flex-direction:column;gap:4px;display:flex}.summary-label{color:var(--text-secondary);font-size:12px}.summary-value{color:var(--text-primary);font-size:14px;font-weight:500}.page-container{flex-direction:column;gap:24px;display:flex}.page-header-row{margin-bottom:8px}.stepper-container{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:24px 48px;display:flex}.step-item{z-index:2;flex-direction:column;align-items:center;gap:8px;display:flex;position:relative}.step-circle{width:32px;height:32px;color:var(--text-secondary);background-color:#f1f5f9;border:2px solid #e2e8f0;border-radius:50%;justify-content:center;align-items:center;font-size:14px;font-weight:600;transition:all .3s;display:flex}.step-title{color:var(--text-secondary);font-size:12px;font-weight:500}.step-item.active .step-circle{background-color:var(--primary-blue);color:#fff;border-color:var(--primary-blue)}.step-item.active .step-title{color:var(--primary-blue);font-weight:600}.step-line{background-color:#e2e8f0;flex:1;height:2px;margin:0 16px;transition:all .3s;position:relative;top:-12px}.step-line.active{background-color:var(--primary-blue)}.form-card{background-color:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:12px;padding:32px}.form-actions{border-top:1px solid var(--border-color);justify-content:space-between;margin-top:32px;padding-top:24px;display:flex}.form-section-title{color:var(--text-primary);margin-bottom:24px;font-size:18px;font-weight:600}.form-grid{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;display:grid}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:var(--text-secondary);font-size:13px;font-weight:500}.form-control{border:1px solid var(--border-color);color:var(--text-primary);border-radius:6px;padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .2s}.form-control:focus{border-color:var(--primary-blue);outline:none;box-shadow:0 0 0 3px #1883f21a}select.form-control{background-color:#fff}.table-card{background-color:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:12px;overflow:hidden}.data-table{border-collapse:collapse;width:100%}.data-table th{text-align:left;color:var(--text-secondary);border-bottom:1px solid var(--border-color);text-transform:uppercase;letter-spacing:.5px;background-color:#f8fafc;padding:16px;font-size:12px;font-weight:600}.data-table td{border-bottom:1px solid var(--border-color);color:var(--text-primary);vertical-align:middle;padding:16px;font-size:14px}.data-table tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background-color:#f8fafc}.btn-icon.success{color:#10b981}.btn-icon.success:hover{background-color:#d1fae5}.config-layout{align-items:flex-start;gap:24px;display:flex}.config-sidebar{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;flex-shrink:0;gap:4px;width:280px;padding:12px;display:flex}.config-tab{text-align:left;width:100%;color:var(--text-secondary);background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.config-tab:hover{color:var(--text-primary);background-color:#f8fafc}.config-tab.active{background-color:var(--sidebar-active-bg);color:var(--primary-blue);font-weight:600}.config-content{flex:1}.config-card{background-color:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:12px;min-height:400px;padding:32px}.config-section-title{color:var(--text-primary);margin-bottom:8px;font-size:18px;font-weight:600}.config-section-desc{color:var(--text-secondary);margin-bottom:24px;font-size:14px}.policy-grid{grid-template-columns:1fr 1fr;gap:32px;margin-top:24px;display:grid}.policy-group{border:1px solid var(--border-color);background-color:#f8fafc;border-radius:8px;padding:24px}.policy-group h3{color:var(--primary-blue);border-bottom:1px solid var(--border-color);margin-bottom:16px;padding-bottom:8px;font-size:15px}.login-container{background-color:var(--bg-app);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{box-shadow:var(--shadow-md);text-align:center;background-color:#fff;border-radius:16px;width:100%;max-width:400px;padding:48px}.login-header{margin-bottom:32px}.logo-icon-large{color:#e53e3e;background-color:#fce8e8;border-radius:12px;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;font-size:28px;font-weight:700;display:flex}.login-header h2{color:var(--text-primary);margin-bottom:8px;font-size:24px}.login-header p{color:var(--text-secondary);font-size:14px}.login-roles{flex-direction:column;gap:16px;display:flex}.role-btn{border:1px solid var(--border-color);width:100%;color:var(--text-primary);background-color:#fff;border-radius:8px;justify-content:center;align-items:center;gap:12px;padding:16px;font-size:16px;font-weight:500;transition:all .2s;display:flex}.role-btn:hover{background-color:var(--sidebar-active-bg);border-color:var(--primary-blue);color:var(--primary-blue)}.role-icon{color:var(--text-secondary)}.role-btn:hover .role-icon{color:var(--primary-blue)}