@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:#f3f4f8; color:#1e293b; }
.app-container { display:flex; min-height:100vh; }
.sidebar {
    width:280px;
    background:linear-gradient(180deg,#0f172a 0%,#1e293b 100%);
    color:#fff;
    position:fixed;
    height:100vh;
    overflow-y:auto;
    z-index:100;
}
.sidebar-header { padding:24px 20px; border-bottom:1px solid rgba(255,255,255,0.1); text-align:center; }
.sidebar-header h2 { font-size:1.5rem; font-weight:700; background:linear-gradient(135deg,#38bdf8,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sidebar-header p { font-size:0.75rem; opacity:0.7; margin-top:6px; }
.sidebar-nav { padding:20px 0; }
.sidebar-nav a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 24px;
    color:#cbd5e1;
    text-decoration:none;
    transition:0.2s;
    font-size:0.95rem;
    font-weight:500;
}
.sidebar-nav a i { width:24px; font-size:1.2rem; }
.sidebar-nav a:hover, .sidebar-nav a.active { background:rgba(56,189,248,0.2); color:#38bdf8; border-left:3px solid #38bdf8; }
.main-content { flex:1; margin-left:280px; padding:24px 32px; }
.top-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:28px;
    background:white;
    padding:12px 24px;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.user-info { display:flex; align-items:center; gap:20px; }
.user-avatar { width:42px; height:42px; background:linear-gradient(135deg,#38bdf8,#a855f7); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:bold; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; margin-bottom:32px; }
.stat-card { background:white; border-radius:24px; padding:20px; box-shadow:0 4px 12px rgba(0,0,0,0.05); transition:0.2s; }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 10px 25px -5px rgba(0,0,0,0.1); }
.stat-title { font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; color:#64748b; margin-bottom:10px; }
.stat-value { font-size:2rem; font-weight:700; color:#0f172a; }
.stat-sub { font-size:0.75rem; color:#94a3b8; margin-top:8px; }
.card-form { background:white; border-radius:24px; padding:28px; margin-bottom:32px; box-shadow:0 4px 12px rgba(0,0,0,0.05); }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-weight:600; margin-bottom:8px; color:#1e293b; }
.form-group input, .form-group select { width:100%; padding:12px 16px; border:1px solid #e2e8f0; border-radius:16px; font-size:0.95rem; transition:0.2s; }
.form-group input:focus { outline:none; border-color:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,0.2); }
.btn { padding:12px 24px; border-radius:40px; border:none; font-weight:600; cursor:pointer; transition:0.2s; font-size:0.9rem; }
.btn-primary { background:linear-gradient(135deg,#38bdf8,#a855f7); color:white; }
.btn-primary:hover { opacity:0.9; transform:scale(1.02); }
.btn-outline { background:transparent; border:1px solid #cbd5e1; color:#1e293b; }
.table-wrapper { background:white; border-radius:24px; overflow-x:auto; box-shadow:0 4px 12px rgba(0,0,0,0.05); }
table { width:100%; border-collapse:collapse; }
th, td { padding:16px 20px; text-align:left; border-bottom:1px solid #f1f5f9; }
th { background:#f8fafc; font-weight:600; color:#475569; }
tr:hover { background:#fefce8; }
.alert { padding:14px 20px; border-radius:16px; margin-bottom:20px; }
.alert-success { background:#dcfce7; color:#15803d; border-left:4px solid #22c55e; }
.alert-error { background:#fee2e2; color:#b91c1c; border-left:4px solid #ef4444; }
@media (max-width:768px){
    .sidebar { width:0; transform:translateX(-100%); }
    .main-content { margin-left:0; padding:16px; }
}