.teacher-area-shell { display: flex; flex-direction: column; min-height: 100vh; background: #f7f8fa; }
.teacher-area-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem; background: #fff; border-bottom: 1px solid #e5e7eb;
    position: sticky; top: 0; z-index: 10;
}
.teacher-area-header .brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; font-weight: 600; }
.teacher-area-header .brand img { height: 28px; }
.teacher-area-header .user-label { font-size: 0.9rem; color: #6b7280; margin-right: 0.75rem; }
.teacher-area-header .logout { color: #dc2626; text-decoration: none; font-size: 0.9rem; }
.teacher-area-main { flex: 1; padding: 1rem; max-width: 768px; margin: 0 auto; width: 100%; }

.tile { background: #fff; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.tile h2 { margin: 0 0 0.5rem 0; font-size: 1.05rem; }
.badge-count { display: inline-block; min-width: 1.5rem; padding: 0 0.4rem; background: #dc2626; color: #fff; border-radius: 999px; text-align: center; font-size: 0.85rem; }
.attendance-status-open { color: #6b7280; }
.attendance-status-complete { color: #16a34a; }
.attendance-status-overdue { color: #dc2626; }

.attendance-list { display: flex; flex-direction: column; gap: 0.5rem; }
.attendance-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: #fff; border-radius: 8px; }
.attendance-row .checkbox { width: 28px; height: 28px; }
.attendance-bottom-toolbar { position: sticky; bottom: 0; background: #fff; padding: 0.75rem; border-top: 1px solid #e5e7eb; display: flex; gap: 0.5rem; }

@media (min-width: 769px) {
    .teacher-area-main { max-width: 1024px; padding: 1.5rem; }
}