.teacher-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.teacher-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card); transition: all 0.2s;
}
.teacher-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.teacher-card-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--accent-glow); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px; flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
}

.teacher-card-info { flex: 1; min-width: 0; }
.teacher-card-name { font-size: 15px; font-weight: 600; }
.teacher-card-code { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

@media (max-width: 768px) {
    .teacher-grid { grid-template-columns: 1fr; gap: 10px; }
    .teacher-card { padding: 12px; }
    .teacher-card-avatar { width: 40px; height: 40px; font-size: 15px; }
    .teacher-card-name { font-size: 14px; }
}