:root{--primary: #000000;--primary-hover: #1e293b;--secondary: #64748b;--background: #ffffff;--surface: #f8fafc;--border: #e2e8f0;--text-main: #000000;--text-muted: #64748b;--success: #000000;--warning: #475569;--danger: #94a3b8;--sidebar-bg: #ffffff;--topbar-bg: rgba(255, 255, 255, .8);--radius: 12px}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;overflow-x:hidden;font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--background);color:var(--primary);-webkit-font-smoothing:antialiased}.app-container{display:flex;min-height:100vh;width:100%}.sidebar{width:280px;background-color:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;z-index:1100;transition:transform .3s cubic-bezier(.4,0,.2,1)}@media (max-width: 1024px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0);box-shadow:20px 0 50px #0000001a}}.sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1099;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar-header{padding:32px 24px}.logo-container{display:flex;align-items:center;justify-content:space-between;width:100%}.mobile-close-btn{display:none!important}@media (max-width: 1024px){.mobile-close-btn{display:flex!important}}.logo{font-size:24px;font-weight:800;background:linear-gradient(135deg,#000,#475569);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:12px}.sidebar-content{flex:1;padding:0 16px;overflow-y:auto}.nav-section{margin-bottom:24px}.nav-section-title{padding:0 16px;margin-bottom:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary)}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius);color:var(--secondary);font-weight:500;font-size:14px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;background:none;width:100%;text-align:left;margin-bottom:2px}.nav-item:hover{background-color:var(--primary-light);color:var(--primary)}.nav-item.active{background-color:var(--primary);color:#fff;box-shadow:0 4px 12px #0003}.sidebar-footer{padding:24px;border-top:1px solid var(--border)}.main-layout{flex:1;width:100%;max-width:100vw;margin-left:280px;padding-top:72px;transition:margin-left .3s ease;display:flex;flex-direction:column}@media (max-width: 1024px){.main-layout{margin-left:0}}.topbar{height:72px;width:calc(100% - 280px);background-color:#fff;border-bottom:1px solid var(--border);position:fixed;top:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:1000}@media (max-width: 1024px){.topbar{width:100%;left:0;padding:0 20px}}.menu-toggle{display:none!important}@media (max-width: 1024px){.menu-toggle{display:flex!important;margin-right:8px}}.topbar-left,.topbar-right{display:flex;align-items:center;gap:16px}.icon-button{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent}.icon-button:hover{background-color:var(--primary-light)}.profile-container{position:relative}.user-profile-button{display:flex;align-items:center;gap:12px;padding:6px 12px;border-radius:32px;cursor:pointer;border:1px solid transparent;background:transparent;transition:all .2s ease}.user-profile-button:hover{background-color:var(--surface);border-color:var(--border)}.user-name{font-size:14px;font-weight:700}@media (max-width: 640px){.user-info{display:none}}.user-avatar{width:36px;height:36px;background-color:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}.profile-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:240px;background-color:#fff;border-radius:16px;border:1px solid var(--border);box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;padding:8px;z-index:1000;transform-origin:top right}.dropdown-header{padding:12px 16px}.user-name-bold{font-size:14px;font-weight:800;color:var(--text-main);line-height:1.2}.user-email-muted{font-size:12px;color:var(--text-muted);margin-top:2px}.dropdown-divider{height:1px;background-color:var(--border);margin:8px 0}.dropdown-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:none;background:transparent;color:var(--secondary);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;text-align:left}.dropdown-item:hover{background-color:var(--surface);color:var(--primary)}.dropdown-item svg{color:var(--secondary)}.logout-item{color:#ef4444}.logout-item:hover{background-color:#fef2f2;color:#ef4444}.logout-item svg{color:#ef4444}.content-wrapper{flex:1;padding:0;width:100%;margin:0}@media (max-width: 1024px){.content-wrapper{padding:24px}}@media (max-width: 640px){.content-wrapper{padding:16px}}.page-header{margin-bottom:24px}.page-title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}.page-subtitle{color:var(--secondary);font-size:14px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}@media (max-width: 480px){.stats-grid{grid-template-columns:1fr}}.stat-card{background-color:#fff;padding:20px;border-radius:var(--radius);border:1px solid var(--border)}.stat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.stat-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center}.stat-value{font-size:22px;font-weight:800;margin-bottom:2px}.stat-label{font-size:11px;font-weight:700;color:var(--secondary);text-transform:uppercase}.stat-trend{font-size:11px;font-weight:700;color:#10b981}.status-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase}.status-badge.status-approved{background-color:#f1f5f9;color:#000;border:1px solid #e2e8f0}.status-badge.status-pending{background-color:#fff;color:#64748b;border:1px solid #e2e8f0}.status-badge.status-rejected{background-color:#f1f5f9;color:#94a3b8;border:1px dashed #cbd5e1}.dashboard-layout{display:grid;grid-template-columns:2fr 1fr;gap:24px;width:100%}@media (max-width: 1024px){.dashboard-layout{grid-template-columns:1fr}}.main-col,.side-col{display:flex;flex-direction:column;gap:24px;width:100%}.section-card{background-color:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;width:100%}.section-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.section-title{font-size:15px;font-weight:800}.chart-container{height:200px;display:flex;align-items:flex-end;justify-content:space-between;padding:20px 20px 32px;gap:8px}.chart-bar{flex:1;background:linear-gradient(to top,#000,#475569);border-radius:4px 4px 0 0;position:relative}.chart-bar:after{content:attr(data-label);position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:10px;font-weight:600;color:var(--secondary)}.btn{padding:10px 20px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;border:none}.btn-primary{background-color:#000;color:#fff}.btn-outline{background-color:transparent;border:1px solid var(--border)}.btn-sm{padding:6px 12px}table{width:100%;border-collapse:collapse}th{text-align:left;padding:12px 16px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--secondary);background-color:#f8fafc}td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px}.highlight-text{background:linear-gradient(90deg,#000,#475569,#94a3b8,#475569,#000);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:smooth-shine 6s ease-in-out infinite;font-weight:900}@keyframes smooth-shine{0%{background-position:0% center}50%{background-position:100% center}to{background-position:0% center}}.boost-card{background-color:#000;color:#fff;padding:32px;border-radius:var(--radius);position:relative;overflow:hidden}.boost-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at top right,rgba(255,255,255,.1),transparent)}.boost-title{font-size:20px;font-weight:800;margin-bottom:12px;position:relative}.boost-text{font-size:14px;color:#94a3b8;margin-bottom:24px;line-height:1.6;position:relative}.boost-button{background-color:#fff;color:#000;padding:12px 20px;border-radius:8px;font-weight:700;border:none;cursor:pointer;transition:transform .2s;position:relative}.boost-button:hover{transform:translateY(-2px)}@keyframes slideIn{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.fade-in{animation:slideIn .4s ease forwards}
