/* ════════════════════════════════════════════════════════════════════════════
   SCHOOL MARKS SMS — Modern Design System v2.0 (Merged Complete)
   ════════════════════════════════════════════════════════════════════════════

   Modern Teal/Indigo Palette + All Component Styles
   Mobile-First • Smooth Animations • Production-Ready

════════════════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. GOOGLE FONTS & IMPORTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. DESIGN TOKENS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* ── Primary Gradient (Teal) ── */
  --primary: #0891b2;
  --primary-dark: #0e7490;
  --primary-darker: #164e63;
  --primary-light: #ecf8fa;
  --primary-gradient: linear-gradient(135deg, #0891b2 0%, #0369a1 100%);
  --primary-ring: rgba(8, 145, 178, 0.2);

  /* ── Sidebar ── */
  --sidebar-bg: #f0fdfa;
  --sidebar-bg-deep: #e6fffe;
  --sidebar-hover-bg: #ccfbf1;
  --sidebar-active-bg: #a7f3d0;
  --sidebar-text: #475569;
  --sidebar-text-active: #164e63;
  --sidebar-icon: #64748b;
  --sidebar-group: #94a3b8;
  --sidebar-border: #e2e8f0;

  /* ── Accent (Purple) ── */
  --accent: #a855f7;
  --accent-dark: #9333ea;
  --accent-light: #faf5ff;
  --accent-gradient: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);

  /* ── Semantic ── */
  --success: #10b981;
  --success-light: #f0fdf4;
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);

  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  --danger: #ef4444;
  --danger-light: #fef2f2;
  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  --info: #3b82f6;
  --info-light: #eff6ff;

  /* ── Grays ── */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ── Typography ── */
  --font-sans: 'Plus Jakarta Sans', 'Noto Sans Bengali', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;

  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  28px;
  --font-size-4xl:  36px;

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

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 16px 40px rgba(0, 0, 0, 0.16);
  --shadow-2xl:  0 24px 48px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(8, 145, 178, 0.2);
  --shadow-primary: 0 4px 14px rgba(8, 145, 178, 0.35);
  --shadow-sidebar: 4px 0 24px rgba(22, 78, 99, 0.3);

  /* ── Transitions ── */
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --topbar-h: 64px;
  --sidebar-w: 260px;

  /* ── Content bg ── */
  --content-bg: #f0fdfa;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. GLOBAL RESET & BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html, body { width: 100%; min-height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--gray-800);
  background: var(--content-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* .app-shell (dashboard layout) and .login-page (auth screens) are the
   only two direct children body ever gets — both are plain block boxes
   now, so they always fill the full viewport width instead of
   shrink-wrapping their content. */
.app-shell,
.login-page { width: 100%; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

img { max-width: 100%; display: block; }

/* ── Icons ── */
.icon    { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 30px; height: 30px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. TYPOGRAPHY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

h1 { font-size: 24px; font-weight: 800; color: var(--gray-900); line-height: 1.25; letter-spacing: -0.5px; margin: 0 0 6px; }
h2 { font-size: var(--font-size-lg); font-weight: 700; color: var(--gray-800); letter-spacing: -0.2px; margin: 0 0 14px; }
h3 { font-size: var(--font-size-md); font-weight: 600; color: var(--gray-800); margin: 0 0 8px; }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); }

p { color: var(--gray-600); margin-bottom: var(--space-4); }

a { color: var(--primary); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--primary-dark); text-decoration: none; }

code {
  background: var(--primary-light);
  border: 1px solid #ccfbf1;
  padding: 2px 7px; border-radius: 4px;
  font-size: 12px; font-family: 'Consolas', monospace;
  color: var(--primary-dark);
}
pre {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  padding: 14px; border-radius: var(--radius-md);
  font-size: 13px; overflow-x: auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. APP SHELL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

.container {
  max-width: 100%;
  padding: 28px 30px 80px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. SIDEBAR (Modern Dark)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  position: fixed;
  top: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  z-index: 300;
  box-shadow: var(--shadow-xl);
  transition: transform 0.25s ease;
}

.sidebar-brand-row {
  min-height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 14px 10px 18px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  letter-spacing: -0.2px;
  min-width: 0;
  flex: 1;
}
.sidebar-brand:hover { color: #fff; }
.sidebar-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
  word-break: break-word;
  opacity: 0.92;
}

/* Animated logo ring */
.logo-ring {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  background: rgba(8, 145, 178, 0.15);
  border: 1.5px solid rgba(8, 145, 178, 0.3);
}
.logo-ring::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 13px;
  background: conic-gradient(#06b6d4, #22d3ee, #0891b2, #0369a1, #06b6d4);
  animation: spinRing 4s linear infinite;
  z-index: 0;
}
.logo-ring::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #164e63, #0891b2);
  z-index: 1;
}
.logo-ring img { position: relative; z-index: 2; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.logo-text {
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1;
}
@keyframes spinRing { to { transform: rotate(360deg); } }

.sidebar-close {
  display: none;
  margin-left: auto;
  width: 30px; height: 30px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  border: none; border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.sidebar-group-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 10px 5px;
}
.sidebar-group-label:first-child { padding-top: 4px; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2px;
  transition: var(--transition-fast);
}
.sidebar-nav a .icon {
  width: 18px; height: 18px;
  color: rgba(255, 255, 255, 0.5);
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.sidebar-nav a:hover {
  background: rgba(8, 145, 178, 0.15);
  color: #fff;
  text-decoration: none;
}
.sidebar-nav a:hover .icon { color: #22d3ee; }

.sidebar-nav a.active {
  background: var(--primary-gradient);
  color: #fff;
  font-weight: 600;
}
.sidebar-nav a.active .icon { color: #fff; }
.sidebar-nav a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, #06b6d4, transparent);
}

/* Footer */
.sidebar-footer {
  flex-shrink: 0;
  padding: 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-footer a {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600;
  color: rgba(255,255,255,0.7);
  padding: 9px 10px;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}
.sidebar-footer a:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  text-decoration: none;
}
.sidebar-footer a .icon { width: 17px; height: 17px; color: inherit; }

.sidebar-footer .dev-credit {
  position: static;
  border-top: none;
  text-align: left;
  padding: 10px 14px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-footer .dev-credit strong {
  color: #22d3ee;
  font-weight: 600;
}

/* Backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 290;
  backdrop-filter: blur(2px);
}
.sidebar-backdrop.open { display: block; }

/* ── Sidebar Accordion ── */
.nav-accordion { margin-bottom: 2px; }
.nav-accordion-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer; transition: var(--transition-fast);
  user-select: none;
}
.nav-accordion-toggle:hover { background: rgba(8, 145, 178, 0.15); color: #fff; text-decoration: none; }
.nav-accordion-toggle .icon { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.5); transition: var(--transition-fast); flex-shrink: 0; }
.nav-accordion-toggle:hover .icon { color: #22d3ee; }
.nav-accordion-toggle .accordion-arrow {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
}
.nav-accordion.open > .nav-accordion-toggle .accordion-arrow { transform: rotate(90deg); }
.nav-accordion.open > .nav-accordion-toggle { color: #fff; }
.nav-accordion.open > .nav-accordion-toggle .icon { color: #22d3ee; }
.nav-accordion-content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 0;
}
.nav-accordion.open > .nav-accordion-content { max-height: 300px; opacity: 1; }
.nav-accordion-content .sub-link {
  padding: 7px 10px 7px 38px;
  font-size: 13px; font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm);
  display: block; margin-bottom: 1px;
  transition: var(--transition-fast);
}
.nav-accordion-content .sub-link:hover {
  background: rgba(8, 145, 178, 0.15);
  color: #fff;
  text-decoration: none;
}
.nav-accordion-content .sub-link.active {
  background: var(--primary-gradient);
  color: #fff;
  font-weight: 600;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. MAIN CONTENT + TOPBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  background: var(--content-bg);
  min-height: 100vh;
}

.topbar {
  height: var(--topbar-h);
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 1px 8px rgba(22, 78, 99, 0.07);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
}

.topbar-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--primary-light);
  border: none; border-radius: var(--radius-md);
  color: var(--primary);
  cursor: pointer; flex-shrink: 0;
  transition: var(--transition-fast);
}
.topbar-toggle:hover { background: var(--primary); color: #fff; box-shadow: none; transform: none; }
.topbar-toggle .icon { width: 18px; height: 18px; }

.topbar-title { min-width: 0; flex: 1; }
.topbar-title h1 {
  font-size: 16px; font-weight: 700; margin: 0;
  letter-spacing: -0.1px; line-height: 1.3;
  color: var(--gray-900);
}
.topbar-crumb { font-size: 11.5px; color: var(--gray-400); }
.topbar-crumb a { color: var(--gray-400); }
.topbar-crumb a:hover { color: var(--primary); }

/* Topbar right */
.topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.notif-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: transparent;
  border: none; border-radius: var(--radius-md);
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition-fast);
}
.notif-btn:hover { background: var(--primary-light); color: var(--primary); box-shadow: none; transform: none; }
.notif-btn .icon { width: 19px; height: 19px; }
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 20px; height: 20px;
  background: var(--danger);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.notif-dot {
  position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px;
  background: var(--danger);
  border: 2px solid #fff;
  border-radius: 50%;
}

/* User dropdown */
.user-dropdown-wrap { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 5px;
  margin-left: 4px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  background: transparent;
  cursor: pointer;
  color: var(--gray-800);
  transition: var(--transition-fast);
}
.user-chip:hover { background: var(--primary-light); border-color: #99f6e4; }
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.user-chip-info { text-align: left; line-height: 1.25; }
.user-chip-name { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.user-chip-role { font-size: 11px; color: var(--gray-400); }
.user-chip .chevron { color: var(--gray-400); width: 14px; height: 14px; transition: transform 0.2s ease; }
.user-chip.open .chevron { transform: rotate(180deg); }

.user-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 195px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 250;
  animation: dropDown 0.15s ease;
}
@keyframes dropDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-dropdown.open { display: block; }
.user-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  color: var(--gray-700);
}
.user-dropdown a:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }
.user-dropdown a .icon { width: 16px; height: 16px; color: var(--gray-400); }
.user-dropdown a:hover .icon { color: var(--primary); }
.user-dropdown a.logout-link { color: var(--danger); }
.user-dropdown a.logout-link .icon { color: var(--danger); }
.user-dropdown a.logout-link:hover { background: var(--danger-light); color: var(--danger); }
.user-dropdown-divider { height: 1px; background: var(--gray-100); margin: 4px 2px; }

/* Dev credit (login page standalone) */
.dev-credit {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--gray-400);
  background: #fff;
  border-top: 1px solid var(--gray-200);
  padding: 8px 12px;
  z-index: 150;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. PAGE HEADERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.dash-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; flex-wrap: wrap;
  gap: 12px; margin-bottom: 26px;
}
.dash-header h1 { margin: 0; }

.page-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
}
.page-header .icon { font-size: 36px; }
.page-header h1 { margin: 0; }
.page-header p { margin: 4px 0 0; font-size: 13px; color: var(--gray-500); }
.page-header-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-primary);
}
.page-header-icon .icon { width: 26px; height: 26px; }

.page-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
}
.page-head-icon {
  width: 50px; height: 50px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: var(--shadow-primary);
}
.page-head-icon .icon { width: 25px; height: 25px; }
.page-head h2 { margin: 0 0 2px; font-size: 22px; }
.page-head p  { margin: 0; font-size: 13px; color: var(--gray-500); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  margin-bottom: 20px;
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--gray-300); }

.card-sm {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.card-header h2 { margin: 0 0 4px; }
.card-header .text-sm { color: var(--gray-500); margin: 0; }

.card-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card-body { padding: 0; }
.card-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--gray-200);
  display: flex; gap: var(--space-4); justify-content: flex-end;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. STAT CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primary);
  border-radius: 4px 0 0 4px;
}
.stat-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
  font-size: var(--font-size-xl);
}
.stat-icon .icon { width: 22px; height: 22px; }

.stat-card.success::before { background: var(--success); }
.stat-card.success .stat-icon { background: var(--success-light); color: var(--success); }

.stat-card.error::before   { background: var(--danger); }
.stat-card.error   .stat-icon { background: var(--danger-light);  color: var(--danger); }

.stat-card.indigo::before  { background: var(--accent); }
.stat-card.indigo  .stat-icon { background: var(--accent-light);  color: var(--accent); }

.stat-card.warning::before { background: var(--warning); }
.stat-card.warning .stat-icon { background: var(--warning-light); color: var(--warning); }

.stat-body { min-width: 0; }
.stat-num  { font-size: 26px; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.stat-label { font-size: 12px; color: var(--gray-500); margin-top: 3px; font-weight: 600; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. LOGIN PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0891b2 0%, #0369a1 50%, #a855f7 100%);
  padding: 20px;
  position: relative; overflow: hidden;
}
.login-page::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 65% 20%, rgba(8, 145, 178, 0.4) 0%, transparent 55%),
              radial-gradient(ellipse at 15% 80%, rgba(168, 85, 247, 0.25) 0%, transparent 50%);
  pointer-events: none;
}
.login-page::after {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

.login-card {
  background: rgba(255,255,255,0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl);
  width: 100%; max-width: 400px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; z-index: 1;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes logoZoomOut {
  0% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

.login-card-top {
  background: linear-gradient(135deg, #164e63 0%, #0891b2 60%, #0369a1 100%);
  padding: 36px 28px 30px;
  text-align: center; color: #fff;
  position: relative; overflow: hidden;
}
.login-card-top::before {
  content: ''; position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,0.06); border-radius: 50%;
}
.login-icon {
  width: 66px; height: 66px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  color: #fff;
  font-size: var(--font-size-3xl);
}
.login-icon .icon { width: 30px; height: 30px; }
.login-logo {
  width: 90px; height: 90px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.5);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 6px rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.15);
  animation: logoZoomOut 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.login-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-card-top h1  { font-size: 20px; margin: 0 0 6px; color: #fff; }
.login-subtitle     { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); margin: 0; animation: fadeIn 0.5s ease 0.3s both; }
.login-card-body    { padding: 28px 28px 20px; }

.login-card-footer {
  text-align: center; padding: 14px 28px 20px;
  font-size: 12px; color: var(--gray-400);
  border-top: 1px solid var(--gray-100);
}

.login-btn {
  width: 100%; padding: 13px; border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-size: 15px; font-weight: 700;
  font-family: var(--font-sans); cursor: pointer;
  transition: var(--transition); margin-top: 4px;
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.4);
}
.login-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. FORMS & INPUTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="file"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
  color: var(--gray-800);
  background: #fff;
  transition: var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23899bb4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
  cursor: pointer;
}
select:hover {
  border-color: var(--primary);
  background-color: #f0fdfa;
}
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
  background-color: #f0fdfa;
}

textarea { resize: vertical; min-height: 90px; }
input::placeholder, textarea::placeholder { color: var(--gray-400); font-size: 13px; }

.input-group { margin-bottom: 18px; }
.input-group label { font-size: 12px; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; letter-spacing: 0.4px; }
.input-group input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 14px; font-family: var(--font-sans);
  transition: var(--transition-fast); outline: none;
  box-sizing: border-box; color: var(--gray-800);
}
.input-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.input-group input::placeholder { color: var(--gray-400); font-size: 13px; }

.field      { margin-bottom: 16px; }
.row        { display: flex; gap: 14px; }
.flex-1     { flex: 1; }
.flex-2     { flex: 2; }
.form-row   { display: flex; gap: 16px; }
.form-row > div { flex: 1; }

.checkbox-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500;
  color: var(--gray-700); cursor: pointer;
}
.checkbox-label input { width: auto; transform: scale(1.15); accent-color: var(--primary); }

.inline-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.inline-form label {
  margin: 0;
  display: inline-block;
  white-space: nowrap;
}
.inline-form input[type="text"] {
  width: auto;
  flex: 1;
  min-width: 180px;
}
.inline-form input[type="number"] {
  width: 80px;
}
.inline-form select {
  width: auto;
  min-width: 150px;
}
.inline-form button {
  margin: 0;
}

.filter-row {
  display: flex; gap: 14px; align-items: flex-end;
  flex-wrap: wrap; margin-bottom: 18px;
}
.filter-row .field { margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  margin-top: 0;
  box-shadow: var(--shadow-primary);
}
button:hover, .btn:hover {
  background: var(--primary-dark);
  text-decoration: none;
  transform: translateY(-1px);
}
button:active, .btn:active { transform: scale(0.98); box-shadow: none; }
button .icon, .btn .icon { width: 15px; height: 15px; }

.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.btn-primary:hover { filter: brightness(1.1); }

.btn-secondary {
  background: #fff;
  color: var(--gray-700);
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
  color: var(--gray-800);
  transform: translateY(-1px);
}

.btn-success { background: var(--success); color: #fff; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.btn-success:hover { background: #059669; }

.btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid #fecaca; box-shadow: none; }
.btn-danger:hover { background: var(--danger); color: #fff; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }

.btn-sm  { font-size: 12px; padding: 6px 12px; border-radius: var(--radius-sm); }
.btn-xs  { font-size: 11px; padding: 4px 9px;  border-radius: 5px; }
.btn-lg  { padding: var(--space-4) var(--space-6); font-size: var(--font-size-lg); }
.btn-block { width: 100%; }

.btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}

/* Legacy small buttons */
.btn-small {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: none; cursor: pointer;
  transition: var(--transition-fast);
  background: var(--gray-100);
  color: var(--gray-700);
  text-decoration: none; margin: 1px;
}
.btn-small:hover { background: var(--gray-200); text-decoration: none; }
.btn-small.btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid #fecaca; }
.btn-small.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-small.btn-edit  { background: var(--primary-light); color: var(--primary); border: 1px solid #99f6e4; }
.btn-small.btn-edit:hover { background: var(--primary); color: #fff; }
.btn-small.btn-sms   { background: #f0f9ff; color: var(--accent); border: 1px solid #e9d5ff; }
.btn-small.btn-sms:hover { background: var(--accent); color: #fff; }
.btn-small.btn-ok    { background: var(--success-light); color: var(--success); border: 1px solid #a7f3d0; }
.btn-small.btn-ok:hover { background: var(--success); color: #fff; }
.btn-small.btn-warn  { background: var(--warning-light); color: var(--warning); border: 1px solid #fde68a; }
.btn-small.btn-warn:hover { background: var(--warning); color: #fff; }

.btn-submit {
  width: 100%; padding: 13px;
  background: var(--primary);
  color: #fff; border: none;
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-primary);
  margin: 0;
}
.btn-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-create {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; padding: 10px 22px;
  border-radius: var(--radius-md);
  font-weight: 700; font-size: 13.5px;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-primary);
  transition: var(--transition-fast);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-create:hover {
  filter: brightness(1.1); transform: translateY(-1px);
  text-decoration: none; color: #fff;
}

.btn-save {
  background: var(--primary); color: #fff; border: none;
  padding: 5px 12px; border-radius: var(--radius-sm);
  font-size: 12px; cursor: pointer; font-weight: 600;
  transition: var(--transition-fast); box-shadow: var(--shadow-primary);
}
.btn-save:hover { background: var(--primary-dark); }

.btn-send { background: var(--primary); color: #fff; border: none; border-radius: 5px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-send:hover { background: var(--primary-dark); }

.btn-cancel  { background: var(--gray-100); color: var(--gray-700); box-shadow: none; }
.btn-cancel:hover  { background: var(--gray-200); box-shadow: none; transform: none; }

.btn-tiny {
  font-size: 12px; padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  background: #fff;
  cursor: pointer; color: var(--gray-700);
  font-weight: 600; transition: var(--transition-fast);
}
.btn-tiny:hover { background: var(--gray-100); border-color: var(--gray-300); }
.btn-warn { color: #92400e; background: var(--warning-light); border-color: #fde68a; }
.btn-warn:hover { background: #fef3c7; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. ALERTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.alert {
  padding: 13px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
}
.alert-success {
  background: var(--success-light);
  color: #14532d;
  border-color: #a7f3d0;
}
.alert-error {
  background: var(--danger-light);
  color: #991b1b;
  border-color: #fecaca;
}
.alert-warning {
  background: var(--warning-light);
  color: #78350f;
  border-color: #fde68a;
}
.alert-info {
  background: var(--info-light);
  color: #1e3a8a;
  border-color: #bfdbfe;
}
.alert::before {
  content: '\2022';
  font-weight: 700;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
  line-height: 1;
}
.alert ul { margin: 6px 0 0; padding-left: 18px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. TABLES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.table-wrapper,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13.5px;
}

.data-table thead th,
.data-table tr:first-child th,
table thead th {
  background: var(--primary-light);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-darker);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 2px solid #99f6e4;
  white-space: nowrap;
}

.data-table th, .data-table td,
table th, table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

table { width: 100%; border-collapse: collapse; }

.data-table tbody tr,
table tbody tr { transition: background 0.1s; }
.data-table tbody tr:hover,
table tbody tr:hover { background: #f0fdfa; }
.data-table tbody tr:last-child td,
table tbody tr:last-child td { border-bottom: none; }

.data-table .status-active   { color: var(--success); font-weight: 600; }
.data-table .status-inactive { color: var(--danger);  font-weight: 600; }

.action-cell { white-space: nowrap; }
.action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  background: var(--primary-light); color: var(--primary);
  text-decoration: none; border-radius: var(--radius-sm);
  border: 1px solid #99f6e4; transition: var(--transition-fast);
}
.action-btn:hover { background: var(--primary); color: #fff; text-decoration: none; border-color: var(--primary); }
.action-btn .icon { width: 13px; height: 13px; }
.action-btn.btn-danger { background: var(--danger-light); color: var(--danger); border-color: #fecaca; }
.action-btn.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.row-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), #ccfbf1);
  color: var(--primary-dark);
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  vertical-align: middle;
}
.row-with-avatar { display: inline-flex; align-items: center; gap: 9px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. BADGES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2px;
  width: fit-content;
}
.badge-primary { background: var(--primary-light); color: var(--primary-dark); }
.badge-success { background: var(--success-light); color: #14532d; }
.badge-error, .badge-danger { background: var(--danger-light); color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-muted, .badge-gray { background: var(--gray-100); color: var(--gray-500); }
.badge-blue    { background: var(--primary-light); color: var(--primary); }
.badge-yellow  { background: #fef3c7; color: #92400e; }

.type-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; }
.type-ct    { background: var(--primary-light); color: var(--primary); }
.type-model { background: #fef3c7; color: #92400e; }
.type-mt    { background: #ede9fe; color: #5b21b6; }
.type-term  { background: #d1fae5; color: #065f46; }
.tb         { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; }
.tb-green   { background: var(--success-light); color: #14532d; }
.tb-gray    { background: var(--gray-100); color: var(--gray-500); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. ACTIVITY FEED
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.activity-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
  transition: var(--transition-fast);
}
.activity-item:hover { background: var(--gray-50); }
.activity-item:last-child { border-bottom: none; }

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}
.activity-content p {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}
.activity-time {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. QUICK LINKS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.quick-links { display: flex; flex-wrap: wrap; gap: 10px; }

.quick-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.quick-link-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 16px; text-decoration: none;
  color: var(--gray-800);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 13.5px;
  transition: var(--transition-fast);
}
.quick-link-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  text-decoration: none; color: var(--primary-dark);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.quick-link-card .ql-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-fast);
}
.quick-link-card:hover .ql-icon { background: var(--primary); color: #fff; }
.quick-link-card .ql-icon .icon { width: 20px; height: 20px; }

/* Quick link LIST rows */
.quick-link-list { display: flex; flex-direction: column; gap: 2px; }
.quick-link-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius-md);
  color: var(--gray-700);
  transition: var(--transition-fast);
  text-decoration: none;
}
.quick-link-row:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
  text-decoration: none;
}
.quick-link-row .ql-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: var(--transition-fast);
}
.quick-link-row:hover .ql-icon { background: var(--primary); color: #fff; }
.quick-link-row .ql-icon .icon { width: 18px; height: 18px; }
.quick-link-row .ql-label { font-size: 13.5px; font-weight: 600; flex: 1; }
.quick-link-row .ql-chevron { width: 16px; height: 16px; color: var(--gray-300); flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. DASHBOARD PANELS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.dash-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; margin-top: 4px;
}
.panel-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px 16px;
  border-top: 3px solid var(--primary);
}
.panel-card h2 { font-size: 15px; margin-bottom: 12px; }

.notice-table { width: 100%; border-collapse: collapse; }
.notice-table td { padding: 9px 4px; font-size: 13px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.notice-table tr:last-child td { border-bottom: none; }
.notice-table .notice-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notice-table .notice-icon .icon { width: 15px; height: 15px; }
.notice-table .notice-icon.success { background: var(--success-light); color: var(--success); }
.notice-table .notice-icon.indigo  { background: var(--accent-light);  color: var(--accent);  }
.notice-table .notice-icon.primary { background: var(--primary-light); color: var(--primary); }
.notice-table .notice-title { font-weight: 600; color: var(--gray-800); }
.notice-table .notice-time  { color: var(--gray-400); font-size: 11.5px; white-space: nowrap; text-align: right; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. WELCOME CARD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.welcome-card {
  text-align: center; padding: 50px 20px;
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200);
  margin-bottom: 28px;
}
.welcome-icon { margin-bottom: 14px; }
.welcome-card h2 { color: var(--gray-900); margin-bottom: 6px; }
.welcome-card p  { color: var(--gray-500); margin-bottom: 20px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. EXAM CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.exam-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--gray-200);
  cursor: pointer; transition: var(--transition);
  position: relative;
}
.exam-card:hover     { box-shadow: var(--shadow-md); border-color: #99f6e4; }
.exam-card.closed    { opacity: 0.55; }
.exam-card.selected-exam {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring), var(--shadow-md);
  transform: translateY(-2px); opacity: 1;
}
.exam-card.faded-exam { opacity: 0.4; }
.exam-card-top    { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.exam-card-name   { font-weight: 700; font-size: 15px; color: var(--gray-900); }
.exam-card-badges { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.exam-card-meta   { font-size: 12px; color: var(--gray-500); display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.exam-meta        { font-size: 12px; color: var(--gray-500); display: flex; gap: 12px; flex-wrap: wrap; }
.exam-card-actions { display: flex; gap: 8px; }
.exam-btn { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius-sm); text-decoration: none; transition: var(--transition-fast); cursor: pointer; border: none; font-family: var(--font-sans); }
.exam-btn-primary  { background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.exam-btn-primary:hover { filter: brightness(1.1); text-decoration: none; }
.exam-btn-outline  { border: 1.5px solid var(--gray-200); color: var(--gray-700); background: #fff; }
.exam-btn-outline:hover { background: var(--gray-50); border-color: var(--gray-300); text-decoration: none; }

.exam-card-actions-row {
  display: flex; gap: 10px;
  justify-content: center;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--gray-100);
}
.ecard-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; flex: 1;
  padding: 9px 14px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600;
  font-family: var(--font-sans); text-decoration: none;
  cursor: pointer; border: none; transition: var(--transition-fast);
  letter-spacing: 0.1px;
}
.ecard-edit   { background: var(--primary-light); color: var(--primary); border: 1.5px solid #99f6e4; }
.ecard-edit:hover  { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-primary); text-decoration: none; transform: translateY(-1px); }
.ecard-delete { background: var(--danger-light); color: var(--danger); border: 1.5px solid #fecaca; }
.ecard-delete:hover { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); text-decoration: none; transform: translateY(-1px); }

.exam-meta-line { margin: -6px 0 18px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22. ASSIGN / CLASSES GRID
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.assign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin-bottom: 30px;
}
.assign-card {
  background: #fff; border-radius: var(--radius-md);
  padding: 14px 16px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200); transition: var(--transition-fast);
}
.assign-card:hover { box-shadow: var(--shadow-md); border-color: #99f6e4; }
.assign-top     { font-size: 13.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.assign-class   { color: var(--gray-500); font-weight: 500; }
.assign-sep     { color: var(--gray-300); }
.assign-section { color: var(--gray-700); font-weight: 500; }
.assign-subject { color: var(--primary); font-weight: 700; }
.assign-students { font-size: 12px; color: var(--gray-500); margin-bottom: 12px; }
.assign-btn {
  display: block; text-align: center;
  font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-md);
  background: var(--primary); color: #fff; text-decoration: none;
  box-shadow: var(--shadow-primary); transition: var(--transition-fast);
}
.assign-btn:hover { filter: brightness(1.1); text-decoration: none; }
.assign-btn-outline { background: var(--gray-50); color: var(--gray-700); border: 1.5px solid var(--gray-200); box-shadow: none; }
.assign-btn-outline:hover { background: var(--gray-100); }
.empty-card { text-align: center; padding: 30px 20px; color: var(--gray-400); font-size: 13.5px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); margin-bottom: 30px; }

/* ── Teacher Dashboard Assign Cards ── */
.assign-detail { padding: 0; }
.assign-meta {
  display: flex;
  gap: 15px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--gray-500);
}
.assign-meta .icon { width: 14px; height: 14px; }
.assign-action { margin-top: 12px; }

/* ── Create Exam Page ── */
.create-container { max-width: 800px; margin: 0 auto; padding-top: 20px; }
.master-card {
  background: #fff; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border: 1px solid var(--gray-200); padding: 24px; margin-bottom: 100px;
}
.form-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-100); }
.form-section:last-child { border-bottom: none; margin-bottom: 0; }
.section-label {
  display: flex; align-items: center; gap: 8px; font-size: 14px;
  font-weight: 700; color: var(--primary); margin-bottom: 16px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.input-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* Type selection cards */
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.type-card {
  position: relative; padding: 12px; border: 2px solid var(--gray-200);
  border-radius: 12px; cursor: pointer; text-align: center;
  transition: all 0.2s; background: #fff;
}
.type-card.active {
  border-color: var(--primary); background: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary);
}
.type-card input { position: absolute; opacity: 0; }
.type-card .title { display: block; font-weight: 700; font-size: 14px; color: var(--gray-900); }
.type-card .desc { display: block; font-size: 11px; color: var(--gray-500); }

/* Sticky footer submit */
.sticky-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border-top: 1px solid var(--gray-200); padding: 16px 20px;
  z-index: 1000; display: flex; justify-content: center;
  box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
}
.btn-submit-modern {
  width: 100%; max-width: 400px; background: var(--primary); color: #fff;
  padding: 14px; border-radius: 12px; font-size: 16px; font-weight: 700;
  border: none; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-submit-modern:hover { background: var(--primary-dark, #362f9e); transform: translateY(-1px); }

/* Subject field states */
.subject-empty {
  padding: 10px; background: #fff1f2; color: #be123c; border-radius: 10px;
  font-size: 13px; text-align: center; border: 1px solid #fecdd3;
}

/* ── Student Edit Form ── */
.form-row { display: grid; gap: 16px; margin-bottom: 16px; }
.form-row.cols-4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row .field input,
.form-row .field select,
.form-row .field textarea { width: 100%; padding: 10px 12px; font-size: 13px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.form-row .field input:focus,
.form-row .field select:focus,
.form-row .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }
.subject-section { margin-bottom: 16px; }
.subject-section h3 { font-size: 14px; font-weight: 600; color: var(--gray-700); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--gray-200); }
.subject-label { font-size: 13px; font-weight: 500; color: var(--gray-500); margin-bottom: 6px; }
.subject-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.subject-chip {
  display: flex; align-items: center; gap: 6px; background: var(--gray-100);
  border: 1px solid var(--gray-200); border-radius: 8px; padding: 6px 12px;
  font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.subject-chip:hover { border-color: var(--primary); background: var(--primary-light); }
.subject-chip input:checked + span { color: var(--primary); font-weight: 600; }
.subject-chip:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.subject-chip input[type="checkbox"] { accent-color: var(--primary); margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23. MARKS ENTRY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.marks-card   { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); overflow: hidden; margin-bottom: 16px; }
.mark-row     { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--gray-100); }
.mark-row:last-child { border-bottom: none; }
.mark-row:nth-child(even) { background: #f0fdfa; }
.mr-roll      { min-width: 44px; font-size: 12.5px; color: var(--gray-400); font-weight: 600; }
.mr-name      { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--gray-800); }
.mr-input-wrap { flex-shrink: 0; }
.sms-status { margin-left: 10px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 10px; white-space: nowrap; }
.sms-sent   { color: #15803d; background: #dcfce7; }
.sms-failed { color: #dc2626; background: #fee2e2; }
.mr-input {
  width: 90px; padding: 7px 10px;
  font-size: 14px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); outline: none; text-align: center;
  transition: var(--transition-fast);
}
.mr-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }

.sms-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); margin-bottom: 14px; cursor: pointer; }
.sms-opt input { width: 16px; height: 16px; accent-color: var(--primary); }

/* Mark grid */
.mark-grid {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg); border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.mark-grid table { border-collapse: collapse; width: 100%; background: #fff; }
.mark-grid th {
  background: var(--primary-light);
  padding: 11px 12px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--primary-darker); text-align: center;
  white-space: nowrap; border-bottom: 2px solid #99f6e4;
}
.mark-grid td { padding: 9px 10px; border-bottom: 1px solid var(--gray-100); font-size: 13px; text-align: center; }
.mark-grid td.roll { font-weight: 600; color: var(--gray-500); text-align: center; width: 50px; }
.mark-grid td.name { text-align: left; white-space: nowrap; font-weight: 500; color: var(--gray-800); }
.mark-grid tbody tr:hover { background: #f0fdfa; }
.mark-grid th:nth-child(1), .mark-grid td:nth-child(1),
.mark-grid th:nth-child(2), .mark-grid td:nth-child(2) {
  position: sticky; background: #fff; z-index: 1;
}
.mark-grid th:nth-child(1), .mark-grid td:nth-child(1) { left: 0; }
.mark-grid th:nth-child(2), .mark-grid td:nth-child(2) { left: 50px; box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04); }
.mark-grid thead th:nth-child(1), .mark-grid thead th:nth-child(2) { background: var(--primary-light); z-index: 2; }
.mark-grid input[type="number"], .mark-grid input[type="text"] {
  width: 68px; padding: 6px 8px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 13px; text-align: center;
}
.mark-grid input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-ring); }
.exam-header { font-weight: 600; }
.exam-header small { font-weight: 400; color: var(--gray-400); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   24. TEACHERS PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.create-card { background: #fff; border-radius: var(--radius-lg); padding: 14px 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); border-top: 3px solid var(--primary); }
.create-card .card-header h2 { font-size: 13px; margin: 0 0 6px; color: var(--primary); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; }
.form-grid .btn-field { grid-column: auto; }
.form-grid .field label { font-size: 10px; font-weight: 700; color: var(--gray-500); letter-spacing: 0.4px; margin-bottom: 2px; }
.form-grid .field input { padding: 6px 9px; font-size: 12px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); }
.form-grid .field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.form-grid .btn-field button { width: 100%; padding: 6px 10px; font-size: 12px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-md); cursor: pointer; font-weight: 700; margin: 0; box-shadow: var(--shadow-primary); min-height: 32px; }
.form-grid .btn-field button:hover { background: var(--primary-dark); }

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; margin-bottom: 30px;
}
.teacher-card {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200);
  overflow: hidden; transition: var(--transition);
}
.teacher-card:hover {
  box-shadow: var(--shadow-md); border-color: #99f6e4;
  transform: translateY(-2px);
}
.teacher-card.inactive { opacity: 0.65; }
.tc-top    { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; }
.tc-avatar {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}
.teacher-card.inactive .tc-avatar { background: var(--gray-400); box-shadow: none; }
.tc-info   { flex: 1; min-width: 0; }
.tc-name   { font-weight: 700; font-size: 14.5px; color: var(--gray-900); }
.tc-meta   { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.tc-body   { padding: 0 18px 10px; }
.tc-row    { font-size: 12.5px; color: var(--gray-500); margin: 4px 0; display: flex; align-items: center; gap: 8px; }
.tc-row span { color: var(--gray-700); font-weight: 600; min-width: 80px; }
.tc-actions {
  padding: 10px 18px 14px;
  border-top: 1px solid var(--gray-100);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: #f0fdfa;
}

.rp-form { display: none; width: 100%; margin-top: 4px; gap: 6px; }
.rp-form.show { display: flex; }
.rp-form input { flex: 1; padding: 6px 10px; font-size: 12px; border: 1.5px solid var(--gray-200); border-radius: 5px; outline: none; }
.rp-form input:focus { border-color: var(--primary); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   25. SUBJECTS PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sub-page { max-width: 860px; margin: 0 auto; padding: 28px 20px 80px; }
.add-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 22px 24px; margin-bottom: 28px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200);
  border-top: 3px solid var(--primary);
}
.add-card h2 { font-size: 15px; margin: 0 0 16px; color: var(--primary); }
.add-row { display: flex; gap: 10px; align-items: flex-end; }
.add-row .field { flex: 1; margin-bottom: 0; }
.add-row .field label { font-size: 11px; font-weight: 700; color: var(--gray-500); letter-spacing: 0.5px; margin-bottom: 4px; }
.add-row .field input, .add-row .field select { padding: 8px 10px; font-size: 13px; }
.add-row button { padding: 9px 22px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-md); font-size: 13px; font-weight: 700; cursor: pointer; height: 38px; white-space: nowrap; margin: 0; box-shadow: var(--shadow-primary); }
.add-row button:hover { background: var(--primary-dark); }
.class-block { margin-bottom: 28px; }
.class-block h3 { font-size: 15px; color: var(--primary); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #99f6e4; }
.group-block { margin: 0 0 14px 16px; }
.group-block h4 { font-size: 11px; color: var(--primary-dark); margin: 0 0 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.sub-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-light); border: 1px solid #99f6e4;
  padding: 5px 10px; border-radius: var(--radius-full);
  font-size: 12.5px; color: var(--primary); font-weight: 600;
}
.sub-tag .del { background: none; border: none; color: var(--danger); font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1; }
.sub-tag .del:hover { color: #991b1b; }
.no-group { color: var(--gray-400); font-style: italic; font-size: 13px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   26. TEACHER ASSIGN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.assign-page { max-width: 760px; }
.section-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.section-grid label {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md); font-size: 13.5px; font-weight: 500;
  margin: 0; cursor: pointer; transition: var(--transition-fast);
  background: var(--gray-50); user-select: none;
}
.section-grid label:hover { border-color: #5eead4; background: var(--primary-light); }
.section-grid label.checked { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.section-grid label input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.section-grid .no-items { color: var(--gray-400); font-size: 13px; font-weight: 400; padding: 8px 0; }
.current-list { margin-top: 10px; }
.current-list .item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: var(--radius-sm); font-size: 13px; margin: 4px 6px 4px 0;
}
.current-list .item .remove { background: none; border: none; color: var(--danger); font-size: 16px; cursor: pointer; padding: 0; line-height: 1; }
.tag-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; margin-bottom: 6px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; }
.tag-item span { flex: 1; }
.tag-remove { background: none; border: none; color: var(--danger); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
.tag-remove:hover { color: #991b1b; }
.tag { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-light); color: var(--primary); padding: 4px 10px; border-radius: var(--radius-full); font-size: 13px; margin: 0 4px 4px 0; }
.tag-remove-btn { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 14px; padding: 0 2px; margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   27. IMPORT STUDENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.import-container { max-width: 860px; margin: 0 auto; padding: 28px 20px 80px; }
.breadcrumb { font-size: 13px; color: var(--gray-500); margin-bottom: 6px; }
.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--primary); }

.guide-card { background: #fff; border-radius: var(--radius-lg); margin-bottom: 20px; box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid var(--gray-200); }
.guide-header { background: var(--primary-light); padding: 14px 20px; border-bottom: 1px solid #99f6e4; font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; color: var(--primary-darker); }
.guide-body { padding: 18px 20px; }
.guide-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.guide-table th { text-align: left; padding: 8px 10px; background: var(--primary-light); border-bottom: 2px solid #99f6e4; font-weight: 700; color: var(--primary-darker); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.guide-table td { padding: 8px 10px; border-bottom: 1px solid var(--gray-100); }
.guide-table tr:last-child td { border-bottom: none; }
.sample-box { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 12px; }
.sample-box pre { margin: 0; font-size: 12.5px; line-height: 1.7; }

.method-tabs { display: inline-flex; margin-bottom: 18px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.method-tab { padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; background: #fff; color: var(--gray-500); transition: var(--transition-fast); border: none; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.method-tab.active { background: var(--primary); color: #fff; }
.method-tab:not(.active):hover { background: var(--primary-light); color: var(--primary); }
.method-tab:first-child { border-right: 1px solid var(--gray-200); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   28. PAGE TABS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page-tabs {
  display: inline-flex; gap: 4px;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 4px;
  margin-bottom: 22px;
  border: 1px solid var(--gray-200);
}
.page-tab {
  padding: 8px 18px;
  font-size: 13px; font-weight: 600;
  color: var(--gray-500);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.page-tab.active {
  background: #fff; color: var(--primary);
  box-shadow: 0 1px 4px rgba(8, 145, 178, 0.12), 0 1px 2px rgba(8, 145, 178, 0.08);
}
.page-tab:hover:not(.active) { color: var(--gray-700); background: rgba(255,255,255,0.5); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   29. MT ACCORDION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mt-action-bar {
  display: flex; gap: 10px; margin-bottom: 16px;
}
.mt-toggle-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; font-size: 13px; font-weight: 600;
  color: var(--gray-600); background: #fff;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-md);
  cursor: pointer; transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.mt-toggle-btn svg { flex-shrink: 0; }
.mt-toggle-btn:hover {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-light);
}
.mt-toggle-btn.active {
  background: var(--primary); color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);
}
.mt-toggle-btn.active svg { stroke: #fff; }

.mt-accordion-panel {
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
  margin-bottom: 0;
}
.mt-accordion-panel.open {
  max-height: 300px; opacity: 1;
  margin-bottom: 16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   30. FILTER CARD & FILTER BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.filter-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--primary);
}
.filter-card-label {
  font-size: 11px; font-weight: 700;
  color: var(--primary); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.filter-card .filter-row { margin-bottom: 0; }

.filter-bar {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: flex-end; margin-bottom: 20px;
  background: #fff; padding: 16px 18px;
  border-radius: var(--radius-lg); border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--primary);
}
.filter-bar .field { margin: 0; }
.filter-bar label { font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; margin-bottom: 4px; }
.filter-bar select, .filter-bar input[type="number"] { padding: 7px 10px; font-size: 13px; min-width: 120px; border-radius: var(--radius-sm); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   31. DROP ZONE & PASTE ZONE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.drop-zone {
  border: 2px dashed var(--gray-300); border-radius: var(--radius-lg);
  padding: 36px 20px; text-align: center; cursor: pointer;
  transition: var(--transition); background: var(--gray-50);
}
.drop-zone:hover { border-color: var(--primary); background: var(--primary-light); }
.drop-zone.dragover { border-color: var(--primary); background: #99f6e4; }
.drop-zone .icon { width: 40px; height: 40px; display: block; margin: 0 auto 10px; color: var(--gray-400); }
.drop-zone .title { font-size: 15px; font-weight: 700; color: var(--gray-800); }
.drop-zone .sub   { font-size: 12px; color: var(--gray-400); margin-top: 4px; }
.drop-zone .file-name { display: none; margin-top: 12px; padding: 8px 16px; background: var(--primary-light); border-radius: var(--radius-md); font-size: 13px; color: var(--primary); font-weight: 600; }
.drop-zone.has-file .file-name { display: inline-block; }
.drop-zone.has-file .icon, .drop-zone.has-file .title, .drop-zone.has-file .sub { display: none; }
.paste-zone { display: none; }
.paste-zone.active { display: block; }
.paste-zone textarea { width: 100%; min-height: 200px; padding: 14px; border: 2px solid var(--gray-200); border-radius: var(--radius-md); font-family: 'Consolas', monospace; font-size: 13px; line-height: 1.6; resize: vertical; transition: var(--transition-fast); }
.paste-zone textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }
.paste-zone textarea::placeholder { color: var(--gray-400); }
.paste-hint { font-size: 12px; color: var(--gray-400); margin-top: 6px; }
.class-select { margin-bottom: 20px; }
.class-select label { font-size: 12px; font-weight: 700; color: var(--gray-600); margin-bottom: 6px; }
.class-select select { width: 100%; padding: 10px 12px; border: 2px solid var(--gray-200); border-radius: var(--radius-md); font-size: 14px; }
.class-select select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }
.submit-area { margin-top: 22px; }
.submit-area button { width: 100%; padding: 13px; border: none; border-radius: var(--radius-md); font-size: 15px; font-weight: 700; cursor: pointer; background: var(--primary); color: #fff; transition: var(--transition); box-shadow: var(--shadow-primary); display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.submit-area button:hover { filter: brightness(1.1); }
.submit-area button:disabled { background: var(--gray-300); cursor: not-allowed; box-shadow: none; }

.result-section { margin-bottom: 20px; }
.result-cards { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.result-card { flex: 1; min-width: 110px; background: #fff; border-radius: var(--radius-md); padding: 18px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); }
.result-card .num { font-size: 28px; font-weight: 800; }
.result-card .label { font-size: 11px; color: var(--gray-500); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.result-card.success .num { color: var(--success); }
.result-card.warning .num { color: var(--warning); }
.result-card.error   .num { color: var(--danger);  }
.result-card.info    .num { color: var(--primary);  }
.result-errors { margin-top: 14px; background: var(--danger-light); border: 1px solid #fecaca; border-radius: var(--radius-md); padding: 12px 16px; }
.result-errors strong { font-size: 13px; color: #991b1b; }
.result-errors ul { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: #b91c1c; }
.result-errors ul li { margin-bottom: 3px; }
.file-input-hidden { display: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   32. SETTINGS PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.settings-section {
  margin-bottom: 8px;
}
.settings-section h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-darker);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--primary-light);
  display: flex; align-items: center; gap: 8px;
}
.settings-section h2::before {
  content: '';
  display: inline-block;
  width: 4px; height: 18px;
  background: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   33. SECTION TABLE (Classes Page)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.section-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.section-table th {
  background: var(--primary-light);
  color: var(--primary-darker); padding: 10px 14px;
  font-size: 11px; text-align: left;
  border-bottom: 2px solid #99f6e4;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.section-table td { padding: 8px 14px; border-bottom: 1px solid var(--gray-100); font-size: 13px; vertical-align: middle; }
.section-table tr:last-child td { border-bottom: none; }
.section-table tbody tr:hover { background: #f0fdfa; }
.section-table input.section-input {
  width: 150px; padding: 5px 9px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 13px; transition: var(--transition-fast);
}
.section-table input.section-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-ring); }
.section-table select.group-select {
  padding: 5px 28px 5px 8px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); font-size: 13px;
  background: #fff; cursor: pointer; transition: var(--transition-fast);
}
.section-table select.group-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-ring); }

/* ── Class Accordion ── */
.class-accordion .accordion-toggle { cursor: pointer; user-select: none; }
.class-accordion .accordion-toggle:hover { background: var(--gray-50); }
.class-accordion .accordion-arrow {
  display: inline-block; font-size: 11px; margin-right: 6px;
  transition: transform 0.2s ease; color: var(--gray-400);
}
.class-accordion.open .accordion-arrow { transform: rotate(90deg); }
.class-accordion > .accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  opacity: 0; margin: 0; padding: 0; border: none;
}
.class-accordion.open > .accordion-body {
  max-height: 2000px; opacity: 1;
}
.class-accordion > .accordion-body .section-table { margin-top: 0; }
.class-accordion .card-header { min-height: 42px; }
.class-accordion.card { padding: 14px; }
.container > .inline-form.card { min-height: 42px; align-items: center; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   34. TAB BAR (Student Page)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.tab-bar {
  display: flex; gap: 8px; margin-bottom: 20px; padding: 4px;
}
.tab-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  color: var(--gray-500); background: #fff;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg);
  cursor: pointer; transition: var(--transition); text-decoration: none;
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.tab-btn svg { flex-shrink: 0; opacity: 0.6; transition: var(--transition); }
.tab-btn:hover {
  color: var(--primary); border-color: var(--primary-light);
  background: var(--primary-light); box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.tab-btn:hover svg { opacity: 1; }
.tab-btn.active {
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(8, 145, 178, 0.35), 0 2px 6px rgba(139, 92, 246, 0.2);
  transform: translateY(-1px);
}
.tab-btn.active svg { stroke: #fff; opacity: 1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   35. MODAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1000; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 30px 28px 24px;
  width: 100%; max-width: 480px;
  box-shadow: var(--shadow-xl);
  position: relative;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--gray-200);
  border-top: 4px solid var(--primary);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal h3  { margin: 0 0 20px; font-size: 16px; color: var(--gray-900); }
.close-btn {
  position: absolute; top: 16px; right: 16px;
  background: var(--gray-100); border: none; border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; color: var(--gray-500);
  line-height: 1; transition: var(--transition-fast);
}
.close-btn:hover { background: var(--danger-light); color: var(--danger); }
.close-btn .icon { width: 14px; height: 14px; }
.modal .field { margin-bottom: 14px; }
.modal label { font-size: 11px; font-weight: 700; color: var(--gray-500); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.modal input, .modal select { padding: 9px 12px; font-size: 13.5px; }
.modal .row { display: flex; gap: 12px; }
.modal .row .field { flex: 1; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--gray-100); }
.modal-footer button { margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   36. EXAM TYPE GROUP
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.type-group { display: flex; gap: 12px; margin-top: 4px; }
.type-opt {
  flex: 1; padding: 16px 14px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  text-align: center; cursor: pointer;
  transition: var(--transition); background: #fff;
}
.type-opt:hover  { border-color: var(--primary); background: var(--primary-light); }
.type-opt.selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 3px var(--primary-ring); }
.type-opt input { display: none; }
.to-title { display: block; font-weight: 700; font-size: 14px; color: var(--gray-900); }
.to-desc  { display: block; font-size: 11px; color: var(--gray-500); margin-top: 3px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   37. EMPTY STATES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.no-data, .no-items {
  text-align: center; padding: 48px 20px;
  color: var(--gray-400); font-size: 13.5px;
  background: #fff; border-radius: var(--radius-lg);
  border: 2px dashed var(--gray-200); margin: 8px 0;
}
.empty-state { text-align: center; padding: 50px 20px; color: var(--gray-400); font-size: 14px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   38. SMS SUBJECT LIST
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sms-subject-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.sms-subject-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); font-size: 13px; }
.sms-subject-item .sub-info { font-weight: 600; color: var(--gray-900); }
.sms-subject-item .sub-meta { font-size: 11px; color: var(--gray-400); margin-top: 2px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   39. SECTION LIST, MISC
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.section-list { margin-top: 10px; }
.component-row { display: flex; gap: 10px; margin-bottom: 8px; }
.assignment-matrix th, .assignment-matrix td { text-align: center; }
.assignment-matrix td:first-child, .assignment-matrix th:first-child { text-align: left; }
.checkbox-cell input { width: 18px; height: 18px; }
.marks-table input.mark-input { width: 80px; padding: 6px; }
.row-total { font-weight: 600; text-align: center; }
.mini-table { width: auto; border-collapse: collapse; margin: 10px 0; }
.mini-table th, .mini-table td { padding: 6px 12px; border-bottom: 1px solid var(--gray-100); font-size: 13px; }

.required    { color: var(--danger); }
.hint        { font-size: 13px; color: var(--gray-500); margin: 0; }
.w-80        { width: 80px; }
.w-140       { width: 140px; }
.mt-16       { margin-top: 16px; }
.inline-form-small { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.group-label { padding: 6px 16px; background: var(--primary-light); font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.8px; border-top: 1px solid #99f6e4; border-bottom: 1px solid #99f6e4; }
.field-row    { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field-row .field { margin-bottom: 0; }
.subject-readonly { display: block; padding: 9px 12px; background: var(--gray-100); border-radius: var(--radius-sm); font-weight: 600; color: var(--gray-700); }
.ta-center   { text-align: center; }
.card-center  { text-align: center; padding: 34px 20px; }
.sms-error-text { display: block; font-size: 9px; opacity: 0.8; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-gap  { display: inline-flex; align-items: center; gap: 6px; }
.hint-inline { font-size: 12px; color: var(--gray-400); }
.clear-filter { font-size: 12px; color: var(--gray-500); align-self: flex-end; padding-bottom: 9px; display: inline-flex; align-items: center; gap: 4px; }
.clear-filter:hover { color: var(--danger); }
.loading-text { color: var(--gray-400); font-size: 13px; }

.status-active { color: var(--success); font-weight: 700; font-size: 12px; }
.status-closed { color: var(--gray-400); font-weight: 700; font-size: 12px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   40. UTILITY CLASSES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-lg { font-size: var(--font-size-lg); }

.text-muted { color: var(--gray-500); font-size: 12px; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-primary { color: var(--primary); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.p-6 { padding: var(--space-6); }

.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-gap-4 { display: flex; gap: var(--space-4); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

.rounded { border-radius: var(--radius-lg); }

.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline-flex; }
.inline-block { display: inline-block; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   41. RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 960px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: flex; }
  .main { margin-left: 0; }
  .topbar-toggle { display: flex; }
}

@media (max-width: 768px) {
  :root {
    --font-size-3xl: 24px;
    --font-size-2xl: 20px;
  }
  .container { padding: 16px 14px 70px; }
  h1 { font-size: 19px; }
  h2 { font-size: 16px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .dash-panels { grid-template-columns: 1fr; }
  .topbar { padding: 0 var(--space-4); }
  .card { padding: var(--space-4); }
  table { font-size: var(--font-size-sm); }
  thead th, tbody td { padding: var(--space-2) var(--space-3); }
  .login-card { max-width: 95%; padding: var(--space-6); }
}

@media (max-width: 640px) {
  .topbar { padding: 0 14px; }
  .topbar-title h1 { font-size: 15px; }
  .container { padding: 12px 12px 60px; }
  .form-row { flex-direction: column; }
  .row { flex-wrap: wrap; gap: 10px; }
  .row .field { min-width: calc(50% - 10px); }
  .form-grid { grid-template-columns: 1fr; }
  .teacher-grid { grid-template-columns: 1fr; }
  .exam-grid { grid-template-columns: 1fr; }
  .assign-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-num { font-size: 20px; }
  .quick-link-grid { grid-template-columns: repeat(2, 1fr); }
  .data-table th, .data-table td { padding: 9px 10px; font-size: 12.5px; }
  .btn-small { font-size: 11.5px; padding: 4px 9px; }
  .user-chip-info { display: none; }
  .user-chip { padding: 5px; margin-left: 0; }
  .user-chip .chevron { display: none; }
  .topbar-right { gap: 2px; }
  .mark-row { flex-wrap: wrap; gap: 6px; }
  .mr-name { flex-basis: 100%; order: -1; }
  .mr-input { width: 100%; }
  .type-group { flex-direction: column; }
  .add-row { flex-wrap: wrap; }
  .add-row .field { min-width: calc(50% - 8px); }
  .add-row button { width: 100%; }
  .dash-header { flex-direction: column; align-items: stretch; }
  .modal { margin: 8px; padding: 22px 16px 18px; max-width: calc(100vw - 16px); }
  .filter-bar { padding: 12px 14px; gap: 8px; }
  .tab-btn { padding: 8px 14px; font-size: 12px; gap: 5px; }
  .tab-btn svg { width: 14px; height: 14px; }
  .page-header { gap: 12px; }
  .page-header-icon { width: 44px; height: 44px; }
  .page-header-icon .icon { width: 22px; height: 22px; }
}

@media (max-width: 480px) {
  :root {
    --space-8: 16px;
    --space-6: 16px;
    --font-size-2xl: 18px;
    --font-size-xl: 16px;
    --font-size-lg: 14px;
  }
  .topbar { padding: 0 var(--space-4); gap: var(--space-2); }
  .container { padding: var(--space-4); }
  .page-header { margin-bottom: var(--space-4); }
  .page-header h1 { font-size: var(--font-size-2xl); }
  .stat-grid { grid-template-columns: 1fr; }
  .stat-card { flex-direction: column; text-align: center; }
  .card { padding: var(--space-4); border-radius: var(--radius-md); }
  .input-group { margin-bottom: var(--space-4); }
  button, .btn { width: 100%; padding: var(--space-3) var(--space-4); }
  .card-footer { flex-direction: column; }
  .card-footer button { width: 100%; }
  .login-card { padding: var(--space-4); border-radius: var(--radius-lg); }
  .topbar-right { gap: var(--space-3); }
  .notif-btn, .profile-btn { width: 36px; height: 36px; }
  .quick-link-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .input-row { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: span 1; }
  .create-container { padding: 0 16px; }
  .master-card { padding: 20px; }
  .type-grid { grid-template-columns: 1fr; }
  .form-row.cols-4 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr; }
  .form-row.cols-2 { grid-template-columns: 1fr; }
}

/* ── Exam Checklist (Report page) ── */
.exam-checklist { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.exam-checklist label {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  padding: 6px 12px; border: 1.5px solid var(--gray-200); border-radius: 6px;
  cursor: pointer; background: var(--gray-50); transition: all 0.15s;
}
.exam-checklist label:hover { border-color: var(--primary); background: var(--primary-light); }
.exam-checklist input:checked + span { font-weight: 600; color: var(--primary); }

/* ── Report Header ── */
.report-header { text-align: center; margin-bottom: 20px; }
.report-header h2 { margin: 0; font-size: 18px; }
.report-header h3 { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--gray-500); }
.report-header p { margin: 6px 0 0; font-size: 13px; color: var(--gray-400); }

/* ── Table Cell Helpers ── */
td.name { text-align: left; }
td.total { font-weight: 700; color: var(--primary); }

/* ── Print Styles ── */
@media print {
  .filter-bar, .sidebar, .topbar, .btn, .exam-checklist, .page-header-actions { display: none !important; }
  .main { margin-left: 0 !important; }
  body { background: #fff; }
  .container { max-width: 100%; padding: 10px; }
  .data-table { font-size: 11px; }
}

/* ── Extra Exam Cards (HSC Mark Entry) ── */
.section-divider { height: 1px; background: var(--gray-200); margin: 28px 0 20px; }
.dash-section-header { margin-bottom: 16px; }
.dash-section-header h2 { font-size: 17px; font-weight: 700; color: var(--gray-900); margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.dash-section-header .hint { margin: 0; font-size: 12.5px; }

.extra-exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.extra-exam-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  padding: 0;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
  overflow: hidden;
}
.extra-exam-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(67, 56, 202, 0.1);
  transform: translateY(-2px);
}
.extra-exam-card-top {
  display: flex;
  gap: 6px;
  padding: 12px 14px 0;
  flex-wrap: wrap;
}
.extra-exam-class-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.extra-exam-section-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: 20px;
}
.extra-exam-card-body {
  padding: 10px 14px;
  flex: 1;
}
.extra-exam-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 4px;
}
.extra-exam-subject {
  font-size: 12.5px;
  color: var(--gray-500);
  margin: 0;
}
.extra-exam-subjects { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.subject-tag {
  display: inline-block; padding: 2px 8px; font-size: 11px;
  font-weight: 500; color: var(--primary); background: var(--primary-light);
  border-radius: 10px; line-height: 1.4;
}
.extra-exam-desc {
  font-size: 12px;
  color: var(--gray-400);
  margin: 4px 0 0;
}
.extra-exam-card-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--gray-100);
}
.extra-exam-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  transition: color 0.15s;
}
.extra-exam-card:hover .extra-exam-open-btn { color: var(--primary-dark, #362f9e); }

@media (max-width: 640px) {
  .extra-exam-grid { grid-template-columns: 1fr; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   43. REPORT PAGE REDESIGN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Stepper filter bar */
.report-stepper {
  display: flex; gap: 0; align-items: stretch;
  margin-bottom: 24px; overflow-x: auto;
  background: #fff; border-radius: 16px;
  border: 1.5px solid var(--gray-200); padding: 0;
}
.report-step {
  flex: 1; min-width: 150px; padding: 16px 20px;
  border-right: 1px solid var(--gray-100); position: relative;
}
.report-step:last-child { border-right: none; }
.report-step-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--gray-400); margin-bottom: 8px;
}
.report-step-label .step-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  background: var(--gray-300); transition: background 0.2s;
}
.report-step.active .step-num { background: var(--primary); }
.report-step.done .step-num { background: var(--success); }
.report-step select {
  width: 100%; padding: 8px 10px; border: 1.5px solid var(--gray-200);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--gray-700); background: var(--gray-50);
  cursor: pointer; transition: border-color 0.2s;
}
.report-step select:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.report-step select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Exam pill tags */
.exam-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.exam-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--gray-200); background: #fff;
  color: var(--gray-600); cursor: pointer; transition: all 0.2s;
  user-select: none;
}
.exam-pill:hover { border-color: var(--primary); color: var(--primary); }
.exam-pill input { display: none; }
.exam-pill input:checked + .pill-text {
  color: var(--primary); font-weight: 700;
}
.exam-pill:has(input:checked) {
  border-color: var(--primary); background: var(--primary-light);
  color: var(--primary); box-shadow: 0 0 0 1px var(--primary);
}
.exam-pill .pill-check {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--gray-300); display: flex;
  align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.exam-pill:has(input:checked) .pill-check {
  border-color: var(--primary); background: var(--primary);
}
.exam-pill:has(input:checked) .pill-check::after {
  content: ''; width: 5px; height: 3px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* Report branded header */
.report-brand {
  text-align: center; padding: 28px 20px;
  background: linear-gradient(135deg, #ecfeff 0%, #f0fdf4 50%, #faf5ff 100%);
  border-radius: 16px; border: 1.5px solid var(--gray-200);
  margin-bottom: 20px;
}
.report-brand-logo {
  width: 56px; height: 56px; border-radius: 14px;
  object-fit: cover; margin: 0 auto 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.report-brand h2 {
  margin: 0; font-size: 18px; font-weight: 800;
  color: var(--gray-900); letter-spacing: -0.3px;
}
.report-brand h3 {
  margin: 3px 0 0; font-size: 14px; font-weight: 600;
  color: var(--primary); letter-spacing: -0.1px;
}
.report-badges {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; margin-top: 12px;
}
.report-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px; font-size: 12px;
  font-weight: 600; background: rgba(255,255,255,0.8);
  border: 1px solid var(--gray-200); color: var(--gray-600);
}

/* Modern report table */
.report-table-wrap {
  background: #fff; border-radius: 14px;
  border: 1.5px solid var(--gray-200);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.report-table {
  width: 100%; border-collapse: collapse;
}
.report-table thead th {
  padding: 12px 14px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--gray-500); background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
  position: sticky; top: 0; z-index: 2;
}
.report-table tbody td {
  padding: 10px 14px; font-size: 13px; text-align: center;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.report-table tbody tr:last-child td { border-bottom: none; }
.report-table tbody tr:nth-child(even) { background: var(--gray-50); }
.report-table tbody tr:hover { background: #f0fdfa; }
.report-table .col-roll {
  font-weight: 700; color: var(--gray-400); font-size: 12px;
  width: 50px;
}
.report-table .col-name {
  text-align: left; font-weight: 600; color: var(--gray-800);
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.report-table .col-total {
  font-weight: 800; color: var(--primary); font-size: 14px;
  background: var(--primary-light);
}
.report-table .col-mark-high { color: var(--success); font-weight: 700; }
.report-table .col-mark-mid { color: var(--warning); font-weight: 600; }
.report-table .col-mark-low { color: var(--danger); font-weight: 600; }
.report-table .col-mark-empty { color: var(--gray-300); }

/* Download action bar */
.report-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-bottom: 20px; flex-wrap: wrap;
}

@media (max-width: 768px) {
  .report-stepper { flex-direction: column; gap: 0; }
  .report-step { border-right: none; border-bottom: 1px solid var(--gray-100); min-width: auto; }
  .report-step:last-child { border-bottom: none; }
  .report-table-wrap { overflow-x: auto; }
  .report-table { min-width: 500px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   44. STUDENT PROMOTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.promo-step-card { padding: 20px 24px; }
.promo-step-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--gray-800); margin-bottom: 16px;
}
.promo-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.promo-step-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 4px;
}
.promo-target-info {
  font-size: 12px; color: var(--gray-400); background: var(--gray-50);
  padding: 4px 12px; border-radius: 20px; border: 1px solid var(--gray-200);
}
.promo-class-select {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.promo-class-select .field { flex: 1; min-width: 180px; }
.promo-arrow {
  font-size: 24px; font-weight: 700; color: var(--primary);
  padding-bottom: 8px; flex-shrink: 0;
}

/* Student list */
.promo-student-list {
  max-height: 400px; overflow-y: auto; border: 1.5px solid var(--gray-200);
  border-radius: 12px; margin-bottom: 16px;
}
.promo-select-all {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  font-size: 13px; font-weight: 700; color: var(--gray-600);
  border-bottom: 1px solid var(--gray-100); cursor: pointer;
  background: var(--gray-50); position: sticky; top: 0; z-index: 1;
}
.promo-select-all input { width: 16px; height: 16px; accent-color: var(--primary); }
.promo-student-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100); cursor: pointer;
  transition: background 0.15s;
}
.promo-student-item:last-child { border-bottom: none; }
.promo-student-item:hover { background: #f0fdfa; }
.promo-student-item.checked { background: var(--primary-light); }
.promo-student-item input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.promo-student-info { display: flex; flex-direction: column; gap: 2px; }
.promo-student-name { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.promo-student-meta { font-size: 12px; color: var(--gray-400); }

/* Submit area */
.promo-submit-area { display: flex; justify-content: flex-end; }
.promo-btn { min-width: 200px; }

/* Conflict card */
.promo-conflict-card { border: 2px solid var(--warning); }
.promo-conflict-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.promo-conflict-header h2 { margin: 0; font-size: 16px; color: var(--warning); }
.promo-conflict-header p { margin: 4px 0 0; font-size: 13px; color: var(--gray-500); }
.promo-conflict-header .icon-xl { color: var(--warning); }
.promo-conflict-list {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.promo-conflict-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  font-size: 13px;
}
.promo-conflict-name { font-weight: 600; color: var(--gray-800); }
.promo-conflict-roll { color: var(--gray-500); font-size: 12px; }
.promo-conflict-actions { display: flex; gap: 10px; }

/* Animation overlay */
.promo-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
}
.promo-overlay.active { display: flex; }
.promo-anim-box {
  background: #fff; border-radius: 20px; padding: 40px 48px;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: scaleIn 0.3s ease;
}
.promo-anim-box h2 { margin: 16px 0 20px; font-size: 18px; color: var(--gray-800); }
.promo-anim-icon { color: var(--primary); animation: pulse 1s ease infinite; }
.promo-anim-bar {
  width: 200px; height: 6px; background: var(--gray-200);
  border-radius: 3px; overflow: hidden; margin: 0 auto;
}
.promo-anim-fill {
  width: 0; height: 100%; background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: 3px; animation: promoFill 2s ease forwards;
}
@keyframes promoFill {
  0% { width: 0; }
  50% { width: 70%; }
  100% { width: 100%; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ════════════════════════════════════════════════════════════════════════════
   END OF MODERN DESIGN SYSTEM v2.0
   ════════════════════════════════════════════════════════════════════════════ */