.brand { font-weight: 800; color: var(--text); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.btn { display: inline-block; border: 1px solid var(--border); background: #fff; color: var(--text); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.success { background: var(--primary-2); border-color: var(--primary-2); color: #fff; }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: #e7efff; color: var(--primary); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #eef2fb; }
.badge.member { background: #e7efff; color: #003d9f; }
.badge.student { background: #e7f9ee; color: #075d34; }
.badge.admin { background: #ffeceb; color: #8c1713; }
.hero { background: radial-gradient(circle at top right, #dce8ff, #fff); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 20px 0; }
.toolbar { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.toolbar input, .toolbar select { padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.breadcrumb { margin-top: 18px; }
.toast { position: fixed; right: 12px; bottom: 12px; background: #0f1727; color: #fff; padding: 10px 14px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.show { opacity: 1; }
.skeleton { background: linear-gradient(90deg, #edf2fb, #f8faff, #edf2fb); background-size: 200% 100%; animation: pulse 1.2s infinite; height: 80px; border-radius: 10px; }
@keyframes pulse { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.hidden { display: none; }