:root{--primary:#6d28d9;--primary-dark:#4c1d95;--soft-violet:#8b5cf6;--light-violet:#ede9fe;--very-light-violet:#f5f3ff;--white:#fff;--surface:#fff;--text-primary:#171717;--text-secondary:#525252;--text-muted:#737373;--border:#e5e7eb;--background:#fafafa;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--font-family:"Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--background);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.5}.app-container{min-height:100vh;display:flex}.sidebar{background-color:var(--primary-dark);width:260px;color:var(--white);flex-direction:column;flex-shrink:0;display:flex}.sidebar-header{border-bottom:1px solid #ffffff1a;align-items:center;gap:12px;padding:24px 20px;display:flex}.sidebar-logo{background:var(--soft-violet);width:40px;height:40px;color:var(--white);border-radius:10px;justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex}.sidebar-title{letter-spacing:-.3px;font-size:18px;font-weight:700}.sidebar-subtitle{color:#ffffffb3;font-size:12px}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:16px 12px;display:flex}.nav-item{color:#fffc;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{color:var(--white);background-color:#ffffff1a}.nav-item.active{background-color:var(--primary);color:var(--white);font-weight:600}.main-content{flex-direction:column;flex:1;min-width:0;display:flex}.top-header{background-color:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:64px;padding:0 28px;display:flex}.page-title{color:var(--text-primary);font-size:20px;font-weight:700}.header-user{align-items:center;gap:16px;display:flex}.content-body{flex:1;padding:28px;overflow-y:auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:20px;padding:20px}.card-title{color:var(--text-primary);margin-bottom:16px;font-size:16px;font-weight:600}.grid-metrics{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;display:grid}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:8px;padding:20px;display:flex}.metric-value{color:var(--primary);font-size:28px;font-weight:700}.metric-label{color:var(--text-muted);font-size:13px;font-weight:500}.table-container{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}table{border-collapse:collapse;text-align:left;width:100%}th{background-color:var(--very-light-violet);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);padding:14px 16px;font-size:12px;font-weight:600}td{border-bottom:1px solid var(--border);color:var(--text-primary);padding:14px 16px;font-size:14px}tr:last-child td{border-bottom:none}tr:hover td{background-color:var(--very-light-violet)}.badge{letter-spacing:.5px;text-transform:uppercase;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-block}.badge-success{color:var(--success);background-color:#16a34a1a;border:1px solid #16a34a4d}.badge-warning{color:var(--warning);background-color:#d977061a;border:1px solid #d977064d}.badge-danger{color:var(--danger);background-color:#dc26261a;border:1px solid #dc26264d}.badge-primary{background-color:var(--light-violet);color:var(--primary);border:1px solid #6d28d94d}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--primary);color:var(--white)}.btn-primary:hover{background-color:var(--primary-dark)}.btn-danger{background-color:var(--danger);color:var(--white)}.btn-outline{border:1px solid var(--border);color:var(--text-primary);background:0 0}.btn-outline:hover{background-color:var(--very-light-violet)}.input-control{border:1px solid var(--border);border-radius:8px;outline:none;width:100%;padding:10px 14px;font-family:inherit;font-size:14px}.input-control:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--light-violet)}.modal-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--surface);border-radius:16px;width:100%;max-width:500px;padding:24px;box-shadow:0 20px 25px -5px #0000001a}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-title{font-size:18px;font-weight:700}.close-btn{cursor:pointer;color:var(--text-muted);background:0 0;border:none;font-size:20px}