@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";.cards{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px;display:grid}.kpi-card{background:#1b2235;border:1px solid #2a3555;border-radius:18px;align-items:center;gap:18px;padding:22px;transition:all .3s;display:flex}.kpi-card:hover{transform:translateY(-6px)}.kpi-icon{color:#fff;background:#7c5cff;border-radius:16px;justify-content:center;align-items:center;width:60px;height:60px;font-size:24px;display:flex}.kpi-content h4{color:#8b98b8;margin:0}.kpi-content h2{color:#fff;margin:8px 0}.kpi-content span{color:#4ade80}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Inter,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}ul{list-style:none}button{cursor:pointer;border:none;outline:none;font-family:inherit}input{font-family:inherit}img{max-width:100%;display:block}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:20px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}::selection{background:var(--primary);color:#fff}:root{--primary:#6366f1;--primary-hover:#4f46e5;--secondary:#8b5cf6;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;--bg:#0f172a;--surface:#111827;--card:#1e293b;--text:#f8fafc;--text-muted:#94a3b8;--border:#334155;--shadow-sm:0 2px 8px #00000026;--shadow-md:0 8px 20px #00000040;--shadow-lg:0 15px 40px #00000059;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--sidebar-width:270px;--navbar-height:72px;--transition:all .25s ease}.app{width:100vw;height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--surface);border-right:1px solid var(--border)}.content{flex-direction:column;flex:1;display:flex}.page{flex:1;padding:40px}.navbar{height:var(--navbar-height);border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;padding:0 30px;display:flex}.navbar h1{font-size:24px;font-weight:700}.user-menu{align-items:center;gap:16px;display:flex}.user-menu i{background:var(--card);width:42px;height:42px;transition:var(--transition);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;display:flex}.user-menu i:hover{background:var(--primary);color:#fff}.sidebar{width:var(--sidebar-width);background:var(--surface);border-right:1px solid var(--border);flex-direction:column;justify-content:space-between;padding:24px;display:flex}.logo{align-items:center;gap:14px;margin-bottom:40px;display:flex}.logo-icon{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;width:48px;height:48px;box-shadow:var(--shadow-md);border-radius:14px;justify-content:center;align-items:center;font-size:20px;display:flex}.logo h2{font-size:18px}.logo small{color:var(--text-muted)}.menu{flex-direction:column;gap:10px;display:flex}.menu a{color:var(--text-muted);transition:var(--transition);cursor:pointer;border-radius:12px;align-items:center;gap:14px;padding:14px 16px;display:flex}.menu a:hover{color:#fff;background:#ffffff0d}.menu a.active{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}.menu i{font-size:18px}