:root { --brand:#0d9488; --brand-d:#115e59; }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; }
body { background: linear-gradient(180deg,#f1f5f9 0%,#e2e8f0 100%); min-height:100vh; }

.sidebar-link { transition: all .2s; position:relative; }
.sidebar-link.active { background: rgba(255,255,255,.15); color:#fff; }
.sidebar-link.active::before { content:''; position:absolute; right:0; top:20%; height:60%; width:4px; background:#fbbf24; border-radius:4px; }
.sidebar-link:hover { background: rgba(255,255,255,.08); }

.card { background:#fff; border-radius:1rem; box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow:0 10px 25px -5px rgba(0,0,0,.1); }
.stat-card { position:relative; overflow:hidden; }
.stat-card::after { content:''; position:absolute; left:-20px; top:-20px; width:90px; height:90px; border-radius:50%; opacity:.08; }

.fade-in { animation: fadeIn .4s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.slide-in { animation: slideIn .3s ease; }
@keyframes slideIn { from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }

.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; font-size:.72rem; font-weight:700; }
.grade-input { width:70px; text-align:center; border:1px solid #e2e8f0; border-radius:.5rem; padding:6px; transition:.15s; }
.grade-input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(13,148,136,.15); }

.avatar { display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; border-radius:50%; flex-shrink:0; }

table.data-table { border-collapse:separate; border-spacing:0; }
table.data-table thead th { position:sticky; top:0; background:#f8fafc; z-index:5; }
table.data-table tbody tr { transition: background .15s; }
table.data-table tbody tr:hover { background:#f0fdfa; }

.progress-bar { height:8px; border-radius:8px; background:#e2e8f0; overflow:hidden; }
.progress-fill { height:100%; border-radius:8px; transition:width .6s ease; }

.toast { padding:12px 20px; border-radius:.75rem; color:#fff; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.2); animation: slideIn .3s ease; }

.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(4px); z-index:50; display:flex; align-items:center; justify-content:center; padding:1rem; animation: fadeIn .2s; }
.modal-box { background:#fff; border-radius:1.25rem; max-height:92vh; overflow-y:auto; animation: slideIn .25s ease; }

.tab-btn { padding:.6rem 1.1rem; border-radius:.75rem; font-weight:700; font-size:.9rem; transition:.2s; color:#64748b; }
.tab-btn.active { background:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(13,148,136,.35); }

.gradient-brand { background:linear-gradient(135deg,#0d9488 0%,#115e59 100%); }
.gradient-gold { background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%); }
.gradient-blue { background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%); }
.gradient-purple { background:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%); }
.gradient-rose { background:linear-gradient(135deg,#f43f5e 0%,#be123c 100%); }

.skeleton { background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:.5rem; }
@keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

@media (max-width:1024px){ #sidebar{ transform:translateX(100%); position:fixed; } #sidebar.open{ transform:translateX(0); } }