/* ============================================
   Class Management System - Design System
   ============================================ */

/* --- CSS Variables / Design Tokens --- */
:root {
  /* Colors - Primary */
  --c-primary: #6366F1;
  --c-primary-light: #818CF8;
  --c-primary-dark: #4F46E5;
  --c-primary-bg: #EEF2FF;

  /* Colors - Status */
  --c-success: #10B981;
  --c-success-light: #34D399;
  --c-success-bg: #ECFDF5;
  --c-warning: #F59E0B;
  --c-warning-light: #FBBF24;
  --c-warning-bg: #FFFBEB;
  --c-danger: #EF4444;
  --c-danger-light: #F87171;
  --c-danger-bg: #FEF2F2;
  --c-info: #3B82F6;
  --c-info-light: #60A5FA;
  --c-info-bg: #EFF6FF;
  --c-neutral: #6B7280;
  --c-neutral-bg: #F3F4F6;

  /* Colors - Neutrals */
  --c-bg: #F8FAFC;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F1F5F9;
  --c-text: #1E293B;
  --c-text-secondary: #64748B;
  --c-text-light: #94A3B8;
  --c-border: #E2E8F0;
  --c-border-light: #F1F5F9;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Transitions */
  --t-fast: 150ms ease;
  --t: 250ms ease;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ============================================
   Layout: App Shell
   ============================================ */
#app { min-height: 100vh; }

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
  width: 240px;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform var(--t);
}
.sidebar-header {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--c-border-light);
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
}
.sidebar-logo .logo-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}
.sidebar-subtitle {
  font-size: 11px;
  color: var(--c-text-light);
  margin-top: var(--sp-1);
  padding-left: 44px;
}
.sidebar-nav {
  flex: 1;
  padding: var(--sp-3);
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  margin-bottom: 2px;
}
.nav-item:hover { background: var(--c-surface-alt); color: var(--c-text); }
.nav-item.active {
  background: var(--c-primary-bg);
  color: var(--c-primary-dark);
  font-weight: 600;
}
.nav-item .nav-icon { font-size: 18px; width: 24px; text-align: center; }
.sidebar-footer {
  padding: var(--sp-3);
  border-top: 1px solid var(--c-border-light);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
}
.sidebar-user .avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--c-text); }
.sidebar-user-role { font-size: 11px; color: var(--c-text-light); }
.logout-btn {
  color: var(--c-text-light);
  padding: var(--sp-1);
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.logout-btn:hover { background: var(--c-danger-bg); color: var(--c-danger); }

/* --- Main Content --- */
.main-content {
  flex: 1;
  margin-left: 240px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.top-bar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  gap: var(--sp-4);
}
.top-bar-left { display: flex; align-items: center; gap: var(--sp-4); }
.top-bar-date {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}
.top-bar-meta { display: flex; align-items: center; gap: var(--sp-4); }
.top-bar-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  background: var(--c-surface-alt);
  color: var(--c-text-secondary);
}
.top-bar-chip.weather { background: var(--c-info-bg); color: var(--c-info); }
.top-bar-chip.class-name { background: var(--c-primary-bg); color: var(--c-primary-dark); }

.menu-toggle { display: none; font-size: 22px; color: var(--c-text); padding: var(--sp-1); }

.content-area {
  flex: 1;
  padding: var(--sp-6) var(--sp-6) 76px;
  max-width: 1400px;
  width: 100%;
}

/* --- Sidebar Overlay (mobile) --- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}
.sidebar-overlay.show { display: block; }

/* ============================================
   Login Page
   ============================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A855F7 100%);
  padding: var(--sp-6);
}
.login-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  padding: var(--sp-10);
}
.login-logo {
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: var(--shadow-lg);
}
.login-title {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--c-text);
}
.login-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-8);
}
.login-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-6);
}
.role-select {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.role-card {
  flex: 1;
  padding: var(--sp-5);
  border: 2px solid var(--c-border);
  border-radius: var(--r-lg);
  text-align: center;
  cursor: pointer;
  transition: all var(--t);
  background: var(--c-surface);
}
.role-card:hover { border-color: var(--c-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.role-card.selected { border-color: var(--c-primary); background: var(--c-primary-bg); }
.role-card .role-icon { font-size: 32px; margin-bottom: var(--sp-2); }
.role-card .role-name { font-size: 15px; font-weight: 600; color: var(--c-text); }
.role-card .role-desc { font-size: 12px; color: var(--c-text-light); margin-top: var(--sp-1); }

.student-picker {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-2);
}
.student-picker-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
}
.student-picker-item:hover { background: var(--c-surface-alt); }
.student-picker-item .avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  flex-shrink: 0;
}
.student-picker-item .sp-name { font-size: 14px; font-weight: 500; }
.student-picker-item .sp-id { font-size: 12px; color: var(--c-text-light); }

/* ============================================
   Cards
   ============================================ */
.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border-light);
  overflow: hidden;
}
.card-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title { font-size: 15px; font-weight: 700; color: var(--c-text); }
.card-body { padding: var(--sp-5); }
.card-body.flush { padding: 0; }

/* --- Dashboard Stat Cards --- */
.stat-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border-light);
  padding: var(--sp-5);
  transition: all var(--t);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.stat-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.stat-card-icon.blue { background: var(--c-info-bg); }
.stat-card-icon.green { background: var(--c-success-bg); }
.stat-card-icon.amber { background: var(--c-warning-bg); }
.stat-card-icon.red { background: var(--c-danger-bg); }
.stat-card-icon.purple { background: var(--c-primary-bg); }
.stat-card-icon.gray { background: var(--c-neutral-bg); }

.stat-card-title { font-size: 13px; color: var(--c-text-secondary); font-weight: 500; }

/* --- Merged single-row stat strip (Report / Student detail) --- */
.stat-strip { display: flex; }
.stat-cell { flex: 1; min-width: 0; padding: 8px 10px; text-align: center; border-right: 1px solid var(--c-border-light); }
.stat-cell:last-child { border-right: none; }
.stat-cell-ic { font-size: 20px; line-height: 1; margin-bottom: 4px; }
.stat-cell-label { font-size: 11px; color: var(--c-text-secondary); font-weight: 500; line-height: 1.3; }
.stat-cell-val { font-size: 20px; font-weight: 800; margin-top: 2px; line-height: 1.2; }

/* --- Compact stat circle (dashboard cards) --- */
.stat-circle-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 16px;
}
.stat-circle {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  flex: none;
  box-shadow: 0 4px 12px rgba(99,102,241,0.18);
}
.stat-circle.valid { background: linear-gradient(135deg, #34D399 0%, #10B981 100%); }
.stat-circle.blue  { background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%); }
.stat-circle.green { background: linear-gradient(135deg, #34D399 0%, #10B981 100%); }
.stat-circle-label {
  font-size: 13px;
  color: var(--c-text-secondary);
  font-weight: 600;
  line-height: 1.3;
}
.t-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--c-text);
}

/* --- Mini Stats (inside dashboard cards) --- */
.mini-stat {
  text-align: center;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
}
.mini-stat-value { font-size: 24px; font-weight: 800; line-height: 1.2; }
.mini-stat-label { font-size: 11px; color: var(--c-text-light); margin-top: 2px; }
.mini-stat.valid .mini-stat-value { color: var(--c-success); }
.mini-stat.late .mini-stat-value { color: var(--c-warning); }
.mini-stat.absent .mini-stat-value { color: var(--c-danger); }
.mini-stat.point .mini-stat-value { color: var(--c-primary); }
.mini-stat.rain { background: var(--c-info-bg); }
.mini-stat.rain .mini-stat-value { color: var(--c-info); }

/* ============================================
   Badges
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-success { background: var(--c-success-bg); color: var(--c-success); }
.badge-warning { background: var(--c-warning-bg); color: #B45309; }
.badge-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge-info { background: var(--c-info-bg); color: var(--c-info); }
.badge-primary { background: var(--c-primary-bg); color: var(--c-primary-dark); }
.badge-neutral { background: var(--c-neutral-bg); color: var(--c-neutral); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }
.btn-success { background: var(--c-success); color: #fff; }
.btn-success:hover:not(:disabled) { background: #059669; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #DC2626; }
.btn-outline { border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); }
.btn-outline:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.btn-ghost { color: var(--c-text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--c-surface-alt); color: var(--c-text); }
.btn-soft { background: var(--c-primary-bg); color: var(--c-primary-dark); }
.btn-soft:hover:not(:disabled) { background: #E0E7FF; }
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: 13px; }
.btn-lg { padding: var(--sp-3) var(--sp-6); font-size: 15px; }
.btn-block { width: 100%; }

/* ============================================
   Tables
   ============================================ */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border-light);
  color: var(--c-text);
}
tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; transition: background var(--t-fast); }
tr.clickable:hover { background: var(--c-surface-alt); }

.table-avatar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.table-avatar .avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}

/* ============================================
   Forms
   ============================================ */
.form-group { margin-bottom: var(--sp-4); }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}
.form-label .req { color: var(--c-danger); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-surface);
  transition: border-color var(--t-fast);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-bg);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: 12px; color: var(--c-text-light); margin-top: var(--sp-1); }

/* File Upload */
.upload-area {
  border: 2px dashed var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast);
  background: var(--c-surface-alt);
}
.upload-area:hover { border-color: var(--c-primary); background: var(--c-primary-bg); }
.upload-area .upload-icon { font-size: 36px; margin-bottom: var(--sp-2); }
.upload-area .upload-text { font-size: 14px; color: var(--c-text-secondary); }
.upload-area .upload-hint { font-size: 12px; color: var(--c-text-light); margin-top: var(--sp-1); }

/* --- Toggle Switch --- */
.toggle {
  position: relative;
  display: inline-block;
  width: 48px; height: 26px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #CBD5E1;
  border-radius: var(--r-full);
  transition: var(--t);
}
.toggle-slider::before {
  content: "";
  position: absolute;
  height: 20px; width: 20px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: var(--t);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle-slider { background: var(--c-primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(22px); }

/* ============================================
   Tabs
   ============================================ */
.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 2px solid var(--c-border);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
}
.tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.tab:hover { color: var(--c-text); }
.tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }

/* ============================================
   Grid System
   ============================================ */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* --- Flex helpers --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/* --- Spacing helpers --- */
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.p-4 { padding: var(--sp-4); }
.p-5 { padding: var(--sp-5); }

/* --- Text helpers --- */
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-light { color: var(--c-text-light); }
.text-secondary { color: var(--c-text-secondary); }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================
   Page Header
   ============================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.page-title { font-size: 22px; font-weight: 800; color: var(--c-text); }
.page-subtitle { font-size: 14px; color: var(--c-text-secondary); margin-top: 2px; }

/* ============================================
   Action Required Box
   ============================================ */
.action-required {
  background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
  border: 1px solid #FDE68A;
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.action-required-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 15px;
  font-weight: 700;
  color: #92400E;
  margin-bottom: var(--sp-3);
}
.action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3);
  background: rgba(255,255,255,0.6);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.action-item:hover { background: rgba(255,255,255,0.9); box-shadow: var(--shadow-sm); }
.action-item-info { display: flex; align-items: center; gap: var(--sp-3); }
.action-item-icon { font-size: 20px; }
.action-item-text { font-size: 14px; font-weight: 500; color: var(--c-text); }
.action-item-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-danger);
  background: var(--c-danger-bg);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
}

/* ============================================
   Student Home (mobile-first)
   ============================================ */
.student-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
}
.student-topbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-2) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}
.student-greeting { font-size: 16px; font-weight: 700; color: var(--c-text); }
.student-greeting .teacher-chip { font-size: 12px; font-weight: 500; color: var(--c-text-light); }
.duty-roster-list { display: flex; flex-direction: column; gap: 6px; }

/* --- Custom task cards (phone box / classroom) --- */
.custom-task-card .custom-task-desc { font-size: 12px; color: var(--c-text-light); margin-top: 8px; line-height: 1.4; }
.photo-upload-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.back-btn { background: none; border: none; color: var(--c-primary); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.photo-upload-zone {
  border: 2px dashed var(--c-border); border-radius: 12px; padding: 36px 16px;
  text-align: center; cursor: pointer; transition: all .2s; background: var(--c-surface-alt);
}
.photo-upload-zone:active { border-color: var(--c-primary); background: var(--c-primary-bg); }
.upload-instruction { font-size: 14px; font-weight: 600; color: var(--c-text); margin-bottom: 14px; line-height: 1.5; }

/* --- Phone box two-slot status (student card) --- */
.photo-task-slots { display: flex; gap: 8px; margin: 10px 0 2px; }
.pts-slot {
  flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 6px;
  border-radius: 8px; background: var(--c-surface-alt); color: var(--c-text-light);
  border: 1px solid var(--c-border);
}
.pts-slot.done { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success); }

/* --- Two upload zones stacked (photo page, phone type) --- */
.photo-upload-zone + .photo-upload-zone { margin-top: 12px; }
.photo-upload-zone.done { border-style: solid; border-color: var(--c-success); background: var(--c-success-bg); }

/* --- Teacher dashboard photo gallery --- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.photo-tile { border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; background: var(--c-surface); }
.photo-tile img { width: 100%; height: 96px; object-fit: cover; display: block; background: var(--c-surface-alt); }
.pt-meta { padding: 8px 10px; }
.pt-name { font-size: 13px; font-weight: 700; color: var(--c-text); }
.pt-label { font-size: 11px; color: var(--c-text-secondary); margin-top: 2px; }
.pt-date { font-size: 11px; color: var(--c-text-light); margin-top: 2px; }

/* --- Teacher: special tasks card --- */
.special-task-row { padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.special-task-row:last-child { border-bottom: none; }
.str-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.str-icon { font-size: 18px; }
.str-prog { margin-bottom: 6px; }
.str-rule { font-size: 12px; color: var(--c-text-light); }
.student-points-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-primary-bg);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-primary-dark);
}
.student-content {
  flex: 1;
  padding: var(--sp-5);
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.student-bottomnav {
  display: none;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-2);
  position: sticky;
  bottom: 0;
  z-index: 50;
}
.student-bottomnav.show { display: flex; }
.bottomnav-item {
  flex: 1;
  text-align: center;
  padding: var(--sp-2);
  font-size: 11px;
  color: var(--c-text-light);
  cursor: pointer;
  transition: color var(--t-fast);
}
.bottomnav-item.active { color: var(--c-primary); }
.bottomnav-item .bn-icon { font-size: 22px; }
.bottomnav-item .bn-label { margin-top: 2px; }

/* --- Teacher bottom navigation (mirrors the student app) --- */
.teacher-bottomnav {
  display: flex;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-2);
  position: fixed;
  left: 240px;
  right: 0;
  bottom: 0;
  z-index: 60;
}

/* --- Dashboard: Morning Exercise rain-day toggle (top-right of card) --- */
.sce-rain-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sce-rain-ic { font-size: 18px; line-height: 1; }

/* --- Dashboard Duty: today's on-duty roster (classroom + names) --- */
.duty-today-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.dtl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.dtl-room { font-weight: 600; color: var(--c-text); }
.dtl-names { color: var(--c-text-secondary); font-weight: 500; }
.dtl-names .pair-plus { color: var(--c-text-light); margin: 0 2px; }

/* --- Task Card (student) --- */
.task-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border-light);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.task-card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 16px;
  font-weight: 700;
}
.task-status-box {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  text-align: center;
  margin-bottom: var(--sp-4);
}
.task-status-box.completed { background: var(--c-success-bg); }
.task-status-box.late { background: var(--c-warning-bg); }
.task-status-box.absent { background: var(--c-danger-bg); }
.task-status-box.rain { background: var(--c-info-bg); }
.task-status-box.point-used { background: var(--c-primary-bg); }
.task-status-box.pending { background: var(--c-neutral-bg); }
.task-status-box .ts-icon { font-size: 32px; margin-bottom: var(--sp-1); }
.task-status-box .ts-title { font-size: 14px; font-weight: 700; }
.task-status-box .ts-sub { font-size: 12px; color: var(--c-text-secondary); margin-top: 2px; }

/* --- Upload Preview --- */
.upload-preview {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  position: relative;
}
.upload-preview img { width: 100%; height: auto; display: block; }
.upload-placeholder {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--c-text-light);
}

/* --- Attachment Preview --- */
.attachment-preview {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
}
.attachment-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: var(--c-info-bg);
}
.attachment-info { flex: 1; }
.attachment-name { font-size: 13px; font-weight: 500; color: var(--c-text); }
.attachment-type { font-size: 11px; color: var(--c-text-light); }

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: var(--sp-10);
  color: var(--c-text-light);
}
.empty-state .es-icon { font-size: 48px; margin-bottom: var(--sp-3); }
.empty-state .es-text { font-size: 14px; }

/* --- Modal --- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--c-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-size: 17px; font-weight: 700; }
.modal-close { font-size: 22px; color: var(--c-text-light); padding: var(--sp-1); line-height: 1; }
.modal-body { padding: var(--sp-5); }
.modal-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-border-light);
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
}

/* --- Toast --- */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--c-text);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  transition: transform var(--t);
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--c-success); }
.toast.error { background: var(--c-danger); }

/* --- Divider --- */
.divider { height: 1px; background: var(--c-border-light); margin: var(--sp-4) 0; }

/* --- Chip --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: 12px;
  background: var(--c-surface-alt);
  color: var(--c-text-secondary);
}
.chip-warn { background: var(--c-warning-bg); color: var(--c-warning); }

/* --- Points display --- */
.points-display {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
}
.points-display .pd-value { font-size: 28px; font-weight: 800; color: var(--c-primary); }
.points-display .pd-label { font-size: 13px; color: var(--c-text-light); }

/* --- Timeline (point history) --- */
.timeline { position: relative; padding-left: var(--sp-6); }
.timeline::before {
  content: "";
  position: absolute;
  left: 11px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--c-border);
}
.timeline-item { position: relative; padding-bottom: var(--sp-5); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -25px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-border);
}
.timeline-item.positive::before { border-color: var(--c-success); background: var(--c-success); }
.timeline-item.negative::before { border-color: var(--c-danger); background: var(--c-danger); }
.timeline-date { font-size: 12px; color: var(--c-text-light); }
.timeline-desc { font-size: 14px; font-weight: 500; color: var(--c-text); }
.timeline-amount { font-size: 14px; font-weight: 700; }
.timeline-amount.positive { color: var(--c-success); }
.timeline-amount.negative { color: var(--c-danger); }

/* --- Rain Day Banner --- */
.rain-banner {
  background: linear-gradient(135deg, #DBEAFE, #EFF6FF);
  border: 1px solid #BFDBFE;
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.rain-banner .rb-icon { font-size: 40px; }
.rain-banner .rb-title { font-size: 16px; font-weight: 700; color: #1E40AF; }
.rain-banner .rb-desc { font-size: 13px; color: #3B82F6; margin-top: 2px; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: block; }
  .content-area { padding: var(--sp-4) var(--sp-4) 72px; }
  .teacher-bottomnav { left: 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }
  .page-title { font-size: 18px; }
  .top-bar { padding: var(--sp-3) var(--sp-4); }
  .top-bar-meta { gap: var(--sp-2); }
  .top-bar-chip { font-size: 12px; padding: 2px var(--sp-2); }
  .login-card { padding: var(--sp-6); }
  .login-title { font-size: 20px; }
  .role-select { flex-direction: column; }
  .student-content { padding: var(--sp-4); }
  .stat-card { padding: var(--sp-4); }
  .mini-stat-value { font-size: 20px; }
  .modal { max-width: 100%; }
  .sidebar-subtitle { display: none; }
}

@media (max-width: 480px) {
  .top-bar-date { font-size: 13px; }
  .content-area { padding: var(--sp-3) var(--sp-3) 72px; }
  .card-body { padding: var(--sp-4); }
  .task-card { padding: var(--sp-4); }
}

/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease; }
.slide-up { animation: slideUp 0.3s ease; }

/* --- Chart container --- */
.chart-container {
  position: relative;
  height: 260px;
  width: 100%;
}
.chart-container.sm { height: 200px; }
.chart-container.lg { height: 320px; }

/* --- Misc --- */
.text-success { color: var(--c-success); }
.text-warning { color: var(--c-warning); }
.text-danger { color: var(--c-danger); }
.text-info { color: var(--c-info); }
.text-primary { color: var(--c-primary); }
.bg-success { background: var(--c-success-bg); }
.bg-warning { background: var(--c-warning-bg); }
.bg-danger { background: var(--c-danger-bg); }
.bg-info { background: var(--c-info-bg); }
.bg-primary { background: var(--c-primary-bg); }
.rounded { border-radius: var(--r-md); }
.cursor-pointer { cursor: pointer; }
.hidden { display: none !important; }

/* ============================================
   Student Home - Greeting Hero (compact, magical)
   ============================================ */
.greeting-hero {
  position: relative;
  border-radius: var(--r-lg);
  padding: 16px 18px;
  color: #fff;
  margin-bottom: var(--sp-4);
  overflow: hidden;
  background: linear-gradient(120deg, #7C83FF 0%, #A78BFA 55%, #C084FC 100%);
  box-shadow: 0 8px 24px -10px rgba(124,131,255,0.55);
}
.g-morning  { background: linear-gradient(120deg, #FDB44B 0%, #FF9A6C 45%, #A78BFA 100%); box-shadow: 0 8px 24px -10px rgba(253,180,75,0.55); }
.g-afternoon{ background: linear-gradient(120deg, #5EA2FF 0%, #7C83FF 55%, #A78BFA 100%); box-shadow: 0 8px 24px -10px rgba(94,162,255,0.55); }
.g-evening  { background: linear-gradient(120deg, #6E5BFF 0%, #8B5CF6 50%, #C084FC 100%); box-shadow: 0 8px 24px -10px rgba(110,91,255,0.6); }

.greeting-hero::before {
  content: "";
  position: absolute;
  top: -50px; right: -40px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.greeting-hero::after {
  content: "";
  position: absolute;
  bottom: -60px; left: -30px;
  width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.gh-sparkle {
  position: absolute;
  color: #fff;
  opacity: 0.85;
  z-index: 1;
  animation: ghFloat 4s ease-in-out infinite;
  pointer-events: none;
}
.gh-sparkle.s1 { top: 10px; right: 28%; font-size: 13px; animation-delay: 0s; }
.gh-sparkle.s2 { bottom: 12px; right: 12%; font-size: 11px; animation-delay: 1.2s; }
.gh-sparkle.s3 { top: 50%; left: 14px; font-size: 10px; animation-delay: 2.1s; }
@keyframes ghFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
  50%      { transform: translateY(-5px) rotate(8deg); opacity: 0.95; }
}
.gh-greeting-line {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.gh-icon {
  font-size: 20px;
  line-height: 1;
  animation: ghBob 5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  flex: none;
}
@keyframes ghBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.gh-greeting {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.gh-quote {
  font-size: 12.5px;
  font-style: italic;
  opacity: 0.9;
  margin-top: 5px;
  line-height: 1.45;
  position: relative;
  z-index: 2;
  max-width: 92%;
}
.gh-quote-author {
  font-size: 11px;
  opacity: 0.78;
  font-style: normal;
}
.gh-meta {
  font-size: 12px;
  opacity: 0.92;
  margin-top: 5px;
  position: relative;
  z-index: 2;
  font-weight: 500;
}

/* --- Mood Selector (single row, 6 compact) --- */
.mood-section {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border-light);
  padding: 14px 14px 12px;
  margin-bottom: var(--sp-4);
}
.mood-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mood-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  user-select: none;
}
.mood-btn:hover { border-color: var(--c-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mood-btn:active { transform: scale(0.94); }
.mood-btn.selected {
  border-color: var(--c-primary);
  background: var(--c-primary-bg);
  box-shadow: 0 4px 12px -4px rgba(99,102,241,0.4);
  animation: moodPop 0.28s ease;
}
@keyframes moodPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.mood-btn .mood-emoji { font-size: 20px; line-height: 1; }
.mood-btn .mood-label { font-size: 10px; color: var(--c-text-secondary); font-weight: 500; }
.mood-btn.selected .mood-label { color: var(--c-primary-dark); font-weight: 700; }

/* --- Teacher point adjust button group (dashboard table) --- */
.teacher-point-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- Center-screen emoji burst (tap a mood) --- */
.emoji-burst {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.emoji-burst .eb-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.45) 0%, rgba(99,102,241,0.12) 45%, transparent 72%);
  animation: eb-glow 1.15s ease forwards;
}
.emoji-burst .eb-emoji {
  position: relative;
  font-size: 140px;
  line-height: 1;
  filter: drop-shadow(0 12px 28px rgba(15,23,42,0.35));
  animation: eb-pop 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.emoji-burst .eb-label {
  position: relative;
  margin-top: 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #1e293b;
  background: rgba(255,255,255,0.85);
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px -6px rgba(15,23,42,0.4);
  animation: eb-fade 1.15s ease forwards;
}
@keyframes eb-pop {
  0%   { transform: scale(0.25) rotate(-12deg); opacity: 0; }
  30%  { transform: scale(1.18) rotate(6deg);  opacity: 1; }
  55%  { transform: scale(1)    rotate(-2deg); opacity: 1; }
  75%  { transform: scale(1.04) rotate(0);     opacity: 1; }
  100% { transform: scale(1)    rotate(0);     opacity: 0; }
}
@keyframes eb-glow {
  0%   { transform: scale(0.4); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes eb-fade {
  0%   { transform: translateY(10px); opacity: 0; }
  30%  { transform: translateY(0);    opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Morning Exercise status row + progress --- */
.me-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
  margin-bottom: 12px;
}
.me-status .ms-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  flex: none;
}
.me-status .ms-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.me-status .ms-sub { font-size: 12px; color: var(--c-text-light); }
.me-status.completed .ms-icon { background: var(--c-success-bg); }
.me-status.completed { background: #F0FDF4; }
.me-status.late .ms-icon { background: #FEF3C7; }
.me-status.late { background: #FFFBEB; }
.me-status.absent .ms-icon { background: #FEE2E2; }
.me-status.absent { background: #FEF2F2; }
.me-status.pending .ms-icon { background: var(--c-primary-bg); }
.me-status.pending { background: var(--c-primary-bg); }
.me-status.point-used .ms-icon { background: #FCE7F3; }
.me-status.point-used { background: #FDF2F8; }

.me-progress {
  padding: 12px 14px;
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  background: var(--c-surface);
}
.me-progress-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--c-text);
  margin-bottom: 8px;
}
.me-progress-count { color: var(--c-primary-dark); font-weight: 800; }
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--c-neutral-bg);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #A78BFA, #7C83FF);
  transition: width 0.5s ease;
}
.me-progress-note { font-size: 11.5px; color: var(--c-text-light); margin-top: 6px; }

.me-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }

/* --- Morning Exercise: thin progress toward next point --- */
.me-point-progress {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin-bottom: 10px;
}
.mpp-head { margin-bottom: 6px; }
.mpp-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.mpp-track { display: flex; gap: 5px; }
.mpp-pip {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #E5E7EB;
  transition: background var(--t-fast);
}
.mpp-pip.on {
  background: linear-gradient(135deg, #A78BFA 0%, #6366F1 100%);
}

/* --- Late pill (top bar) --- */
.student-late-pill {
  font-size: 12px;
  font-weight: 700;
  background: #FEF3C7;
  color: #92400E;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- Clear Late (small secondary action) --- */
.me-clear-late {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 2px;
  padding: 7px 10px;
  background: #FFFBEB;
  border: 1px dashed #FCD34D;
  border-radius: var(--r-sm);
}
.mcl-text { font-size: 12px; font-weight: 600; color: #92400E; white-space: nowrap; }
.mcl-btn {
  border: none;
  background: none;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
  white-space: nowrap;
}
.mcl-btn:hover { color: var(--c-primary-dark); }
.mcl-disabled { font-size: 11.5px; color: var(--c-text-light); white-space: nowrap; }
.me-checkin-area {
  padding: 16px 14px;
  border-radius: var(--r-md);
  background: var(--c-primary-bg);
  text-align: center;
  margin-bottom: 8px;
}
.me-checkin-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.me-checkin-emoji { font-size: 26px; line-height: 1; animation: ghBob 4s ease-in-out infinite; }
.me-checkin-text { font-size: 15px; font-weight: 700; color: var(--c-primary-dark); }
.me-rule {
  font-size: 11px;
  color: var(--c-text-light);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.01em;
}

/* --- Rain Day inner --- */
.rain-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  text-align: center;
}
.rain-emoji { font-size: 34px; animation: ghBob 4s ease-in-out infinite; }
.rain-text { font-size: 13px; color: var(--c-text-secondary); line-height: 1.5; }

/* --- School Leave mini --- */
.sl-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
  margin-bottom: 12px;
}
.sl-mini-icon { font-size: 22px; flex: none; }
.sl-mini-title { font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.sl-mini-sub { font-size: 11.5px; color: var(--c-text-light); margin-top: 1px; }

/* --- Duty off --- */
.duty-off {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 14px;
  gap: 3px;
}
.duty-off-emoji { font-size: 30px; margin-bottom: 4px; animation: ghBob 5s ease-in-out infinite; }
.duty-off-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.duty-off-sub { font-size: 11.5px; color: var(--c-text-light); margin-top: 6px; }
.duty-off-list {
  font-size: 13px; font-weight: 600; color: var(--c-primary-dark);
  background: var(--c-primary-bg);
  padding: 4px 12px; border-radius: 999px; margin-top: 4px;
}
.makeup-note {
  padding: 10px 12px;
  background: #FEF2F2;
  color: #B91C1C;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  border: 1px solid #FECACA;
}

/* --- Section Label --- */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-6);
}
.section-label .sl-icon { font-size: 20px; }

/* ============================================
   Two-circle stat (dashboard cards: Valid/Invalid, Present/Absent)
   ============================================ */
.two-circles {
  display: flex;
  gap: var(--sp-4);
  margin: 4px 0 14px;
}
.tc-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-secondary);
  margin-top: 6px;
}
.stat-circle.invalid { background: linear-gradient(135deg, #F87171 0%, #EF4444 100%); }
.stat-circle.red { background: linear-gradient(135deg, #F87171 0%, #EF4444 100%); }

/* --- Late decision note (dashboard ME card) --- */
.late-note {
  font-size: 12px;
  font-weight: 600;
  color: #92400E;
  background: var(--c-warning-bg);
  border: 1px dashed #FCD34D;
  border-radius: var(--r-sm);
  padding: 6px 10px;
  text-align: center;
}

/* --- Teacher ME note (detail page) --- */
.me-teacher-note {
  font-size: 12.5px;
  color: var(--c-text-secondary);
  line-height: 1.8;
  background: var(--c-surface-alt);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.me-teacher-note em { color: var(--c-primary-dark); font-style: normal; font-weight: 700; }
.teacher-deduct:hover { color: var(--c-danger); }

/* --- Duty pair cards (teacher) --- */
.duty-pairs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.duty-pair-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.dpc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dpc-classroom { font-size: 15px; font-weight: 700; color: var(--c-text); }
.dpc-members {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pair-plus { color: var(--c-text-light); font-weight: 700; margin: 0 4px; }
.pair-photo-line { font-size: 12.5px; color: var(--c-text-secondary); margin-bottom: 6px; }
.dpc-comment { font-size: 12.5px; color: var(--c-text-secondary); font-style: italic; margin: 6px 0 0; }

/* --- Weekly rotation highlight --- */
.today-row { background: var(--c-primary-bg); }

/* --- Student duty pair info / list --- */
.duty-pair-info {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-surface-alt);
  border-radius: var(--r-md);
  padding: 8px 12px;
}
.duty-pair-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  margin-bottom: 6px;
}
.duty-pair-row.me { background: var(--c-primary-bg); border-color: var(--c-primary-light); }
.dp-classroom { font-size: 13px; font-weight: 700; white-space: nowrap; }
.dp-members { font-size: 13px; flex: 1; padding: 0 var(--sp-2); }
.dp-status { font-size: 11px; white-space: nowrap; }

@media (max-width: 600px) {
  .duty-pairs-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Morning Exercise: Manage action sheet (teacher)
   ============================================ */
.me-manage-btn {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}
.me-manage-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-bg); }

.me-action-sheet { display: flex; flex-direction: column; gap: 8px; }
.meas-student { font-size: 16px; font-weight: 800; color: var(--c-text); }
.meas-subtitle { font-size: 12px; color: var(--c-text-light); margin-bottom: 4px; }
.me-action-btn {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  font-size: 14px;
  font-weight: 600;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: all var(--t-fast);
}
.me-action-btn:hover { background: var(--c-surface-alt); }
.me-action-btn.ok { border-color: #A7F3D0; color: #047857; }
.me-action-btn.ok:hover { background: var(--c-success-bg); }
.me-action-btn.info { border-color: #BFDBFE; color: #1D4ED8; }
.me-action-btn.info:hover { background: var(--c-info-bg); }
.me-action-btn.danger { border-color: #FECACA; color: var(--c-danger); }
.me-action-btn.danger:hover { background: var(--c-danger-bg); }
.me-action-btn.cancel { color: var(--c-text-secondary); text-align: center; }

/* --- Dashboard ME card: warning (late) circle --- */
.stat-circle.warn { background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%); }

/* ============================================
   Teacher Modifications timeline (Late handling)
   ============================================ */
.tl-list { position: relative; }
.tl-item {
  position: relative;
  padding-left: 28px;
  padding-bottom: var(--sp-4);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--c-border);
}
.tl-item:last-child::before { display: none; }
.tl-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid var(--c-border);
  background: var(--c-surface);
}
.tl-dot.ok { border-color: var(--c-success); background: var(--c-success); }
.tl-dot.x { border-color: var(--c-danger); background: var(--c-danger); }
.tl-dot.info { border-color: var(--c-info); background: var(--c-info); }
.tl-body { position: relative; }
.tl-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.tl-meta { font-size: 12.5px; color: var(--c-text-secondary); margin-top: 2px; }
.tl-sub { font-size: 12px; color: var(--c-text-light); margin-top: 1px; }