:root{
 --primary:#6366f1;
 --secondary:#06b6d4;
 --bg:#f8fafc;
 --card:#ffffff;
 --radius:12px;
 --shadow:0 10px 30px rgba(0,0,0,0.08);
 --font:Inter,system-ui,Arial;
}

body{
 font-family:var(--font);
 background:var(--bg);
 margin:0;
}

.container{
 max-width:1200px;
 margin:auto;
 padding:40px;
}

.card{
 background:var(--card);
 border-radius:var(--radius);
 box-shadow:var(--shadow);
 padding:20px;
 margin-bottom:20px;
 transition:box-shadow 0.2s ease;
}

.card:hover{
 box-shadow:0 12px 40px rgba(0,0,0,0.1);
}

button{
 background:var(--primary);
 border:none;
 color:white;
 padding:10px 16px;
 border-radius:8px;
 cursor:pointer;
 transition:background 0.2s ease, transform 0.1s ease;
}

button:hover{
 background:#4f46e5;
}

button:focus-visible{
 outline:2px solid var(--secondary);
 outline-offset:2px;
}

button:active{
 transform:scale(0.98);
}

input{
 padding:8px 12px;
 border:1px solid #e2e8f0;
 border-radius:8px;
 font-family:var(--font);
 transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus{
 outline:none;
 border-color:var(--primary);
 box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}

table{
 width:100%;
 border-collapse:collapse;
}

th,td{
 padding:10px;
 border-bottom:1px solid #eee;
}

th{
 text-align:left;
 font-weight:600;
 color:#475569;
}

.sidebar{
 width:220px;
 position:fixed;
 left:0;
 top:0;
 height:100%;
 background:#111827;
 color:white;
 padding:20px;
}

.sidebar h2{
 margin-top:0;
 font-size:1.25rem;
}

.sidebar p{
 margin:8px 0;
 opacity:0.9;
 cursor:pointer;
}

.sidebar p:hover{
 opacity:1;
}

.main{
 margin-left:240px;
 padding:40px;
}

.stat{
 font-size:28px;
 font-weight:bold;
}