:root{--primary:#135bec;--primary-dark:#0d47c7;--sidebar:#1e293b;--sidebar-text:#94a3b8;--bg:#f1f5f9;--white:#fff;--border:#e2e8f0;--text:#0f172a;--text-sub:#64748b;--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--radius:.75rem;--font:"Inter",-apple-system,sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);display:flex;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input,select,textarea,button{font-family:inherit;font-size:inherit}
.sidebar{width:260px;background:var(--sidebar);min-height:100vh;position:fixed;top:0;left:0;display:flex;flex-direction:column;z-index:50}
.sidebar-brand{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand a{display:flex;align-items:center;gap:.75rem;color:#fff;font-weight:800;font-size:1.1rem}
.brand-icon{width:2.25rem;height:2.25rem;background:var(--primary);border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.sidebar-user{padding:1rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:.75rem}
.user-avatar{width:2.25rem;height:2.25rem;background:var(--primary);border-radius:9999px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem}
.user-info p{font-size:.875rem;font-weight:600;color:#fff}
.user-info span{font-size:.75rem;color:var(--sidebar-text)}
.sidebar-nav{flex:1;padding:1rem 0;overflow-y:auto}
.nav-section{padding:.5rem 1.5rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#475569;margin-top:.5rem}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 1.5rem;color:var(--sidebar-text);font-size:.875rem;font-weight:500;transition:all .2s;border-left:3px solid transparent}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-item.active{color:#fff;background:rgba(255,255,255,.1);border-left-color:var(--primary)}
.nav-item .icon{font-size:1.1rem;width:1.25rem;text-align:center}
.nav-badge{margin-left:auto;background:var(--primary);color:#fff;font-size:.65rem;font-weight:700;padding:.15rem .45rem;border-radius:9999px}
.sidebar-footer{padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,.08)}
.main-content{margin-left:260px;flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:.875rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40}
.topbar-title{font-size:1.1rem;font-weight:700}
.topbar-actions{display:flex;align-items:center;gap:.75rem}
.page-content{padding:2rem;flex:1}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem}
.stat-card{background:#fff;border-radius:var(--radius);border:1px solid var(--border);padding:1.5rem;display:flex;align-items:center;gap:1rem}
.stat-icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.stat-info p{font-size:.8rem;color:var(--text-sub);font-weight:500;margin-bottom:.25rem}
.stat-info h3{font-size:1.5rem;font-weight:800}
.admin-card{background:#fff;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;margin-bottom:1.5rem}
.admin-card-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.admin-card-header h3{font-size:.95rem;font-weight:700}
.admin-card-body{padding:1.5rem}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{text-align:left;padding:.75rem 1rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-sub);background:#f8fafc;border-bottom:2px solid var(--border)}
.admin-table td{padding:.875rem 1rem;border-bottom:1px solid var(--border);font-size:.875rem;vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tbody tr:hover td{background:#f8fafc}
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem}
.form-control{width:100%;padding:.65rem .875rem;border:1.5px solid var(--border);border-radius:.5rem;background:#fff;font-size:.875rem;outline:none;transition:border .2s}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(19,91,236,.1)}
.form-hint{font-size:.75rem;color:var(--text-sub);margin-top:.375rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-col-full{grid-column:1/-1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:.5rem;font-weight:600;font-size:.8rem;border:none;cursor:pointer;transition:all .2s}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}
.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#16a34a}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626}
.btn-secondary{background:#f1f5f9;color:var(--text)}.btn-secondary:hover{background:#e2e8f0}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text)}.btn-outline:hover{background:#f8fafc}
.btn-sm{padding:.4rem .8rem;font-size:.75rem}
.btn-lg{padding:.75rem 1.5rem;font-size:.9rem}
.btn-block{width:100%}
.badge{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:9999px;font-size:.72rem;font-weight:600}
.badge-green{background:#dcfce7;color:#166534}
.badge-red{background:#fee2e2;color:#991b1b}
.badge-blue{background:#dbeafe;color:#1e40af}
.badge-yellow{background:#fef3c7;color:#92400e}
.badge-gray{background:#f1f5f9;color:#475569}
.alert{padding:.875rem 1.1rem;border-radius:.5rem;font-size:.875rem;margin-bottom:1rem;display:flex;align-items:center;gap:.625rem}
.alert-success{background:#f0fdf4;border:1px solid #86efac;color:#166534}
.alert-error{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}
.text-center{text-align:center}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}
.font-bold{font-weight:700}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-gray{color:var(--text-sub)}
.empty-state{text-align:center;padding:3rem;color:var(--text-sub)}
.empty-state .icon{font-size:3rem;margin-bottom:.75rem}
.pagination{display:flex;gap:.375rem;margin-top:1.5rem}
.page-btn{width:2rem;height:2rem;border-radius:.375rem;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;border:1.5px solid var(--border);background:#fff;cursor:pointer}
.page-btn a{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:inherit}
.page-btn.active,.page-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}