:root {
  --primary: #005bb5;
  --primary-glow: rgba(0, 91, 181, 0.3);
  --secondary: #6b21a8;
  --bg-light: #f8fafc;
  --bg-light-glass: rgba(255, 255, 255, 0.85);
  --bg-card: rgba(255, 255, 255, 0.65);
  --border-glass: rgba(0, 0, 0, 0.08);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --input-bg: rgba(255, 255, 255, 0.8);
  --input-focus-bg: #ffffff;
  --input-text: #0f172a;
  --input-placeholder: #94a3b8;
  --overlay-subtle: rgba(0, 0, 0, 0.05);
  --overlay-medium: rgba(0, 0, 0, 0.1);
  --overlay-strong: rgba(0, 0, 0, 0.2);
  --surface-subtle: rgba(255, 255, 255, 0.5);
  --surface-hover: rgba(255, 255, 255, 0.8);
  --navbar-bg: #ffffff;
  --footer-bg: rgba(255, 255, 255, 0.5);
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --toast-bg: #ffffff;
  --dropdown-menu-bg: #ffffff;
  --dropdown-menu-border: rgba(0, 0, 0, 0.12);
  --dropdown-menu-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
  --dropdown-item-hover: #f1f5f9;
  --dropdown-item-active: #eff6ff;
  --icon-green: #16a34a;
  --icon-red: #dc2626;
  --icon-amber: #d97706;
  --icon-orange: #f39c12;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --success: #16a34a;
  --danger: #dc2626;
  --radius-md: 12px;
  --radius-lg: 24px;
}

/* ========== DARK THEME ========== */
[data-theme="dark"] {
  --primary: #5b9cf5;
  --primary-glow: rgba(91, 156, 245, 0.3);
  --secondary: #a855f7;
  --bg-light: #0f172a;
  --bg-light-glass: rgba(15, 23, 42, 0.85);
  --bg-card: rgba(30, 41, 59, 0.65);
  --border-glass: rgba(255, 255, 255, 0.08);
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --input-bg: rgba(30, 41, 59, 0.8);
  --input-focus-bg: #1e293b;
  --input-text: #e2e8f0;
  --input-placeholder: #64748b;
  --overlay-subtle: rgba(255, 255, 255, 0.03);
  --overlay-medium: rgba(255, 255, 255, 0.06);
  --overlay-strong: rgba(255, 255, 255, 0.12);
  --surface-subtle: rgba(30, 41, 59, 0.5);
  --surface-hover: rgba(30, 41, 59, 0.8);
  --navbar-bg: #1e293b;
  --footer-bg: rgba(15, 23, 42, 0.8);
  --modal-overlay: rgba(0, 0, 0, 0.7);
  --toast-bg: #1e293b;
  --dropdown-menu-bg: #1e293b;
  --dropdown-menu-border: rgba(255, 255, 255, 0.12);
  --dropdown-menu-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  --dropdown-item-hover: #334155;
  --dropdown-item-active: #1e3a8a;
  --success: #22c55e;
  --danger: #f87171;
}

/* Parent dashboard pulse animation */
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

[data-theme="dark"] .app-bg-texture {
  opacity: 0.15;
  filter: blur(12px) brightness(0.3);
}

[data-theme="dark"] .navbar {
  background: rgba(23, 32, 48, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav-logo img {
  filter: brightness(0) invert(1); /* make dark logo white */
}

[data-theme="dark"] .btn-outline {
  background: var(--surface-subtle);
  color: var(--text-primary);
  border-color: var(--border-glass);
}

[data-theme="dark"] .btn-outline:hover {
  background: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .glass-card {
  background: var(--bg-card);
  border-color: var(--border-glass);
}

[data-theme="dark"] .glass-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .content-item {
  background: var(--surface-subtle);
  border-color: var(--border-glass);
}

[data-theme="dark"] .content-item:hover {
  background: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .quiz-question-card {
  background: var(--surface-subtle);
}

/* Study Tools button design & dark theme integration */
.study-tool-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-glass);
  border-left: 3.5px solid var(--primary);
  border-radius: 12px;
  background: var(--surface-subtle);
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.study-tool-btn:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
  transform: translateY(-2px);
}

[data-theme="dark"] .study-tool-btn {
  background: rgba(30, 41, 59, 0.65);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .study-tool-btn:hover {
  background: rgba(45, 59, 85, 0.85);
  border-color: var(--primary);
}

[data-theme="dark"] .quiz-question-card:hover {
  background: var(--surface-hover);
}

[data-theme="dark"] .course-pill {
  background: var(--surface-subtle);
  border-color: var(--border-glass);
}

[data-theme="dark"] .course-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

[data-theme="dark"] .course-pill.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-color: transparent;
}

[data-theme="dark"] .footer {
  background: var(--footer-bg);
}

[data-theme="dark"] .toast {
  background: var(--toast-bg);
  border-color: var(--border-glass);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .toast.success { border-left-color: #22c55e; }
[data-theme="dark"] .toast.error { border-left-color: #ef4444; }

[data-theme="dark"] .search-bar-wrapper input {
  background: var(--input-bg);
  border-color: var(--border-glass);
  color: var(--input-text);
}

[data-theme="dark"] .search-bar-wrapper i {
  color: var(--text-secondary);
}

[data-theme="dark"] .portal-tabs {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--border-glass);
}

[data-theme="dark"] .portal-tab.active {
  background: var(--surface-hover);
  color: var(--primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .bug-footer-btn {
  background: var(--surface-subtle);
  border-color: var(--border-glass);
  color: var(--text-secondary);
}

[data-theme="dark"] .bug-footer-btn:hover {
  background: var(--primary);
  color: white;
  border-color: transparent;
}

[data-theme="dark"] .bug-upload-label {
  background: var(--surface-subtle);
  border-color: var(--border-glass);
  color: var(--text-secondary);
}

[data-theme="dark"] .bug-upload-label:hover {
  border-color: var(--primary);
  color: var(--primary);
}

[data-theme="dark"] .nav-mobile-panel {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav-mobile-panel a {
  border-bottom-color: var(--border-glass);
  color: var(--text-secondary);
}

[data-theme="dark"] .nav-hamburger {
  border-color: var(--border-glass);
  color: var(--text-primary);
}

/* Dark mode: override inline-style patterns via class selectors */
[data-theme="dark"] textarea,
[data-theme="dark"] input,
[data-theme="dark"] select {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border-glass) !important;
}

[data-theme="dark"] textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus {
  background: var(--input-focus-bg) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* Dark mode: inline style patterns with rgba(0,0,0,...) backgrounds → swap to dark */
[data-theme="dark"] [style*="rgba(0, 0, 0, 0.1)"],
[data-theme="dark"] [style*="rgba(0,0,0,0.1)"],
[data-theme="dark"] [style*="rgba(0,0,0,.1)"] {
  background-color: var(--surface-subtle) !important;
}

[data-theme="dark"] [style*="rgba(0, 0, 0, 0.05)"],
[data-theme="dark"] [style*="rgba(0,0,0,0.05)"],
[data-theme="dark"] [style*="rgba(0,0,0,.05)"] {
  background-color: var(--overlay-subtle) !important;
}

[data-theme="dark"] [style*="rgba(0, 0, 0, 0.06)"],
[data-theme="dark"] [style*="rgba(0,0,0,0.06)"],
[data-theme="dark"] [style*="rgba(0,0,0,.06)"] {
  background-color: var(--overlay-subtle) !important;
}

/* Dark mode: inline style patterns with rgba(255,255,255,...) overlays */
[data-theme="dark"] [style*="rgba(255, 255, 255, 0.05)"],
[data-theme="dark"] [style*="rgba(255,255,255,0.05)"] {
  background-color: var(--overlay-subtle) !important;
}

[data-theme="dark"] [style*="rgba(255, 255, 255, 0.1)"],
[data-theme="dark"] [style*="rgba(255,255,255,0.1)"] {
  background-color: var(--overlay-medium) !important;
  border-color: var(--overlay-medium) !important;
}

/* Dark mode: #e2e8f0 avatar circle */
[data-theme="dark"] [style*="#e2e8f0"] {
  background: #334155 !important;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1.5px solid var(--border-glass);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-secondary);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--overlay-medium);
  color: var(--text-primary);
  border-color: var(--primary);
}

/* ===== Logged-in user area + Settings dropdown ===== */
.nav-user {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-greeting {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.nav-role {
  color: var(--primary);
  text-transform: capitalize;
  font-weight: 700;
}
.settings-menu {
  position: relative;
}
.settings-btn {
  background: none;
  border: 1.5px solid var(--border-glass);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--text-secondary);
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.settings-btn:hover {
  background: var(--overlay-medium);
  color: var(--primary);
  border-color: var(--primary);
}
/* Only the gear rotates on hover, and only on real pointer devices. The bell is
   excluded entirely so it can NEVER stay tilted ("stuck") after a tap on any
   device — its only motion is the intentional ring animation below. */
@media (hover: hover) {
  .settings-btn:not(#notifBell):hover { transform: rotate(30deg); }
}
#notifBell:hover { transform: none !important; }
/* Bell rings once when the panel opens, then settles back — never stuck. */
#notifBell.open i { animation: bellRing 0.6s ease; transform-origin: 50% 4px; }
@keyframes bellRing {
  0% { transform: rotate(0); }
  15% { transform: rotate(18deg); }
  30% { transform: rotate(-14deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-7deg); }
  75% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}
.settings-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  max-width: calc(100vw - 32px);
  background: var(--navbar-bg);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
  animation: slideDown 0.2s ease;
}
.settings-dropdown.open {
  display: flex;
}
.settings-userbox {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border-glass);
  margin-bottom: 6px;
}
.settings-userbox .su-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.settings-userbox .su-email {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 2px 0 8px;
  word-break: break-all;
}
.settings-userbox .su-role {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--overlay-subtle);
  padding: 3px 10px;
  border-radius: 20px;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, color 0.18s ease;
}
.settings-item i {
  width: 18px;
  text-align: center;
  color: var(--text-secondary);
}
.settings-item:hover {
  background: var(--overlay-medium);
}
.settings-item:hover i {
  color: var(--primary);
}
.settings-item.danger {
  color: var(--icon-red);
}
.settings-item.danger i {
  color: var(--icon-red);
}
.settings-item.danger:hover {
  background: rgba(220, 38, 38, 0.1);
}
.settings-divider {
  height: 1px;
  background: var(--border-glass);
  margin: 6px 4px;
}
@media (max-width: 768px) {
  .nav-user .nav-greeting { display: none; }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-light);
  min-height: 100vh;
  overflow-x: hidden;
  touch-action: pan-x pan-y;
}

.app-bg-texture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* A negative stack level places this behind body's opaque page paint. */
  z-index: 0;
  background-image: url('/assets/light_bg-DWOxOpMa.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.85;
  pointer-events: none;
  filter: blur(8px);
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Common Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 max(24px, 4vw);
  width: 100%;
}

.student-portal-layout {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}
.student-portal-main {
  flex: 1;
  min-width: 0;
}
.student-portal-sidebar {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  height: fit-content;
}
@media (max-width: 900px) {
  .student-portal-layout {
    flex-direction: column;
  }
  .student-portal-sidebar {
    width: 100%;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-outline {
  background: var(--bg-light-glass);
  color: var(--text-primary);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(10px);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.15);
}

/* Navbar — a floating, rounded, frosted-glass pill. The blur is on THIS fixed
   element directly (the reliable pattern used by Apple/Stripe). It's centered
   with auto margins + a gap from the top and sides. */
.navbar {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 100;
  width: min(calc(100% - 32px), 1180px);
  margin-left: auto;
  margin-right: auto;
  padding: 10px 22px;
  border-radius: 22px;
  /* Translucent enough that the backdrop blur shows through prominently
     (Apple-style). Too much white here hides the blur. */
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* the .navbar itself is the frosted pill now — this is just the flex row inside it */
  max-width: none;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo img {
  height: 36px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
  font-size: 0.95rem;
}

.nav-links a:hover {
  color: var(--primary);
}

/* Mobile actions (theme toggle + hamburger) — hidden on desktop */
.nav-mobile-actions {
  display: none;
}

/* Hamburger button */
.nav-hamburger {
  background: none;
  border: 1.5px solid var(--border-glass);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.nav-hamburger:hover {
  background: var(--overlay-medium);
  border-color: var(--primary);
  color: var(--primary);
}

/* Mobile dropdown panel — hidden by default, shown when .open */
.nav-mobile-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
  /* The navbar is now the pill; the panel floats just below it as its own card. */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.82));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  animation: slideDown 0.25s ease;
}

.nav-mobile-panel.open {
  display: flex;
}

.nav-mobile-panel .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.nav-mobile-panel a {
  display: block;
  width: 100%;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-glass);
  transition: color 0.2s;
}

.nav-mobile-panel a:hover {
  color: var(--primary);
}

.nav-mobile-panel .btn {
  width: 100%;
  margin-top: 4px;
}

.nav-mobile-panel .nav-greeting {
  font-weight: 600;
  color: var(--primary);
  padding: 8px 0;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Glass Card */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Form Inputs */
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  background: var(--input-focus-bg);
}

input::placeholder, textarea::placeholder {
  color: var(--input-placeholder);
}

/* Checkboxes & radios must NOT inherit the full-width text-input styling. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  flex: none;
  accent-color: var(--primary);
  cursor: pointer;
  box-shadow: none;
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
  box-shadow: none;
}

/* --- Search Bar --- */
.search-bar-wrapper {
  position: relative;
  margin-bottom: 24px;
}

.search-bar-wrapper i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 0.9rem;
  pointer-events: none;
}

.search-bar-wrapper input {
  padding-left: 38px;
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  border: 1.5px solid var(--border-glass);
  font-size: 0.95rem;
}

/* --- Portal Tab Navigation --- */
.portal-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 6px;
  background: rgba(0,0,0,0.04);
  border-radius: 14px;
  border: 1px solid var(--border-glass);
}

.portal-tab {
  flex: 1;
  min-width: 120px;
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.portal-tab:hover {
  background: rgba(255,255,255,0.7);
  color: var(--text-primary);
}

.portal-tab.active {
  background: white;
  color: var(--primary);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,91,181,0.15);
}

/* --- Course Pill Switcher (Student) --- */
.course-switcher {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.course-pill {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--border-glass);
  background: rgba(255,255,255,0.7);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}

.course-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0,91,181,0.06);
}

.course-pill.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px var(--primary-glow);
}

/* Faculty grid */
.faculty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

/* --- Content Item Card --- */
.content-item {
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 16px;
  background: rgba(255,255,255,0.5);
  transition: all 0.2s ease;
}

.content-item:hover {
  background: rgba(255,255,255,0.8);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Collapsible content item — details visible only after clicking */
.content-collapse { padding: 0; }
.content-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.content-summary::-webkit-details-marker { display: none; }
.content-summary .c-title { font-weight: 600; font-size: 0.95rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.content-summary .c-badge { font-size: 0.72rem; color: var(--text-secondary); background: rgba(0,0,0,0.08); padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.content-summary .c-chevron { color: var(--text-secondary); transition: transform 0.2s ease; flex-shrink: 0; font-size: 0.85rem; }
.content-collapse[open] .c-chevron { transform: rotate(180deg); }
.content-detail { padding: 2px 16px 16px 48px; }
[data-theme="dark"] .content-summary .c-badge { background: rgba(255,255,255,0.1); }

@media (max-width: 600px) {
  .content-summary { gap: 8px; padding: 12px 12px; }
  .content-summary .c-title { font-size: 0.88rem; line-height: 1.35; white-space: normal; word-break: break-word; }
  .content-summary .c-badge { font-size: 0.68rem; padding: 2px 6px; max-width: 85px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Progress bar */
.progress-track { height: 10px; border-radius: 20px; background: rgba(0,0,0,0.1); overflow: hidden; }
[data-theme="dark"] .progress-track { background: rgba(255,255,255,0.12); }
.progress-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.6s ease; }

/* --- Quiz Builder Styles --- */
.quiz-question-card {
  padding: 14px 16px;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  background: rgba(255,255,255,0.5);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.2s ease;
}

.quiz-question-card:hover {
  background: rgba(255,255,255,0.8);
}

.quiz-q-badge {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Section Headers --- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Footer */
.footer {
  margin-top: auto;
  border-top: 1px solid var(--border-glass);
  padding: 32px 0;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

/* Bug button in footer */
.bug-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.bug-footer-btn:hover {
  background: var(--primary);
  color: white;
  border-color: transparent;
}

/* Inline video embed (16:9 responsive) for student course content */
.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-glass);
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Floating Report-a-Bug button (replaces the old footer button) */
.bug-fab {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 6px 20px var(--primary-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bug-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 26px var(--primary-glow);
}

/* Bug screenshot upload label */
.bug-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px dashed var(--border-glass);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}
.bug-upload-label:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0, 91, 181, 0.05);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
  flex-wrap: wrap;
  gap: 16px;
}

.social-links {
  display: flex;
  gap: 16px;
  font-size: 1.4rem;
}

.social-links a {
  color: var(--text-secondary);
  transition: color 0.3s;
}

.social-links a:hover {
  color: var(--primary);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  background: white;
  border: 1px solid var(--border-glass);
  border-left: 4px solid var(--primary);
  color: var(--text-primary);
  padding: 14px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  animation: slideIn 0.3s ease forwards;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
}

.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #ef4444; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* ===================== */
/* RESPONSIVE / MOBILE   */
/* ===================== */
@media (max-width: 768px) {
  /* Navbar pill — taller, slightly narrower gap from the edges on mobile */
  .navbar {
    top: max(10px, env(safe-area-inset-top));
    width: calc(100% - 24px);
    padding: 15px 16px;
    border-radius: 20px;
  }
  .nav-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px;
  }
  .nav-logo {
    font-size: 1.1rem;
    gap: 8px;
  }
  .nav-logo img {
    height: 28px;
  }

  /* Hide desktop links, show mobile actions on mobile */
  .nav-links-desktop {
    display: none !important;
  }
  .nav-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Portal pages push below fixed navbar */
  .portal-page,
  [style*="padding: 120px"] {
    padding-top: 80px !important;
  }

  /* Hero — override inline styles */
  .hero {
    padding: 100px 0 40px !important;
  }
  h1 {
    font-size: 2.2rem !important;
    line-height: 1.15 !important;
  }
  h2 {
    font-size: 1.6rem !important;
  }
  h3 {
    font-size: 1.2rem !important;
  }

  /* Hero buttons stack vertically */
  .hero-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .hero .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Hero paragraph */
  .hero p {
    font-size: 1rem !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  /* Containers */
  /* Global Mobile Viewport Fitting */
  html, body, #app {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Containers & Cards Fitting */
  .container,
  .portal-page,
  .glass-card,
  .student-portal-layout,
  .student-portal-main,
  .student-portal-sidebar,
  .content-item,
  .chapter-group,
  .registration-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .container {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  .glass-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Form Elements & Dropdown Truncation */
  input, select, textarea, button, form {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  select {
    width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Floating Navbar Fitting */
  .navbar {
    width: calc(100% - 20px) !important;
    padding: 8px 12px !important;
    left: 10px !important;
    right: 10px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .nav-container {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grids collapse */
  [style*="grid-column: 1 / -1"] {
    grid-column: auto !important;
  }

  /* Portal tabs */
  .portal-tabs {
    gap: 4px;
  }
  .portal-tab {
    min-width: 80px;
    font-size: 0.8rem;
    padding: 8px 10px;
  }
  .portal-tab span {
    display: none;
  }

  /* Course pills */
  .course-pill {
    font-size: 0.8rem;
    padding: 6px 14px;
  }

  /* Section headers stack */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Footer */
  .footer {
    padding: 32px 0;
  }
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }
  .social-links {
    margin-top: 8px;
    font-size: 1.7rem;
    gap: 20px;
  }
  .bug-footer-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  /* Toast position */
  .toast-container {
    right: max(16px, env(safe-area-inset-right));
    left: max(16px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
  }
  .toast {
    max-width: 100%;
    min-width: auto;
    border-radius: 14px;
  }

  /* Submission flex rows */
  [style*="display: flex; gap: 8px"] {
    flex-wrap: wrap;
  }

  /* Buttons full width on mobile forms */
  .btn-full-mobile {
    width: 100% !important;
  }

  /* Bug report button repositioned for mobile */
  [style*="position: fixed; bottom: 20px; right: 20px"] {
    bottom: 70px !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.8rem !important;
  }
  h2 {
    font-size: 1.4rem !important;
  }
  .glass-card {
    padding: 16px;
  }
  .hero {
    padding: 120px 0 30px !important;
  }
}

/* ============================================================ */
/* MOBILE APP POLISH                                            */
/* Native-app feel for the Capacitor APK and phone browsers:    */
/* real touch targets, no grey tap-flash, safe-area insets, and */
/* inputs that don't trigger iOS zoom-on-focus.                 */
/* ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
}
a, button, .btn, .portal-tab, .course-pill, .nav-hamburger,
.theme-toggle, .settings-btn, .settings-item, [onclick] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, .btn, .portal-tab, .nav-hamburger, .theme-toggle, .settings-btn {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }

@media (max-width: 768px) {
  /* >=16px inputs so mobile browsers don't auto-zoom the page on focus */
  input, select, textarea { font-size: 16px !important; }

  /* Comfortable >=44px touch targets */
  .btn { min-height: 46px; }
  .portal-tab { min-height: 44px; }
  /* Compact nav controls so they fit the floating pill (not oversized) */
  .nav-hamburger, .theme-toggle, .settings-btn { width: 25px; height: 25px; font-size: 0.75rem; border-width: 1px; }
  .nav-hamburger { border-radius: 6px; }
  .nav-mobile-actions { gap: 6px; }

  /* Respect notches / rounded corners (viewport-fit=cover is set in index.html) */
  .nav-container,
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  #app { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---- Quiz taker -------------------------------------------------------
   Card-based layout: each option is a tile with a letter badge, and the
   chosen one turns green with a tick. Colours come from the theme vars so
   this reads correctly in both light and dark mode. */
.quiz-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.quiz-badge {
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.35);
  color: #16a34a; border-radius: 14px; padding: 12px 20px;
  text-align: center; flex-shrink: 0;
}
.quiz-badge .qb-label { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.quiz-badge .qb-score { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }

.quiz-q {
  padding: 18px 20px; border: 1px solid var(--border-glass);
  border-radius: 14px; background: var(--bg-card);
}
.quiz-q .qq-title { font-size: 1.02rem; color: var(--text-primary); margin: 0; }
.quiz-q .qq-points { font-size: 0.76rem; color: var(--text-secondary); margin: 4px 0 0; }

/* Auto-fit: 3 short options sit in a row, long ones wrap to their own line. */
.quiz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.quiz-opt {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1.5px solid var(--border-glass); border-radius: 12px; cursor: pointer;
  background: var(--bg-light-glass); color: var(--text-primary);
  transition: border-color .15s, background .15s;
}
.quiz-opt:hover { border-color: var(--primary); }
.quiz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-opt .qo-letter {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--border-glass); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
}
.quiz-opt .qo-text { flex: 1; }
.quiz-opt .qo-tick { color: #16a34a; opacity: 0; flex-shrink: 0; }

/* :has() lets the whole tile react to its hidden radio being checked. */
.quiz-opt:has(input:checked) {
  border-color: #16a34a; background: rgba(22, 163, 74, 0.10);
}
.quiz-opt:has(input:checked) .qo-letter { border-color: #16a34a; color: #16a34a; }
.quiz-opt:has(input:checked) .qo-tick { opacity: 1; }

.quiz-text-answer {
  width: 100%; padding: 12px 14px; margin-top: 14px; border-radius: 10px;
  border: 1.5px solid var(--border-glass);
  background: var(--bg-light-glass); color: var(--text-primary);
}
.quiz-text-answer:focus { outline: none; border-color: var(--primary); }

/* Custom YouTube Player */
.custom-yt-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.custom-yt-player,
.custom-yt-container iframe {
  position: absolute;
  top: -80px;
  left: 0;
  width: 100% !important;
  height: calc(100% + 160px) !important;
  border: none;
  pointer-events: none;
}

/* 
  The shield covers the top portion of the video to block clicks.
  We leave the bottom space open so they can interact with the controls.
  However, the custom controls already have z-index: 20 and intercept clicks,
  so we can cover the entire video with the shield to fully block YT clicks.
*/
.custom-yt-shield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: transparent;
  cursor: pointer;
}

.custom-yt-container:focus,
.custom-yt-container:focus-visible {
  outline: none;
}

.custom-yt-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  background-size: cover;
  background-position: center;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.custom-yt-big-play {
  width: 72px;
  height: 72px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 28px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  border: 2px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}

.custom-yt-poster:hover .custom-yt-big-play {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.8);
}

.custom-yt-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  z-index: 20;
  background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0) 100%);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-yt-container.paused .custom-yt-controls,
.custom-yt-container:hover .custom-yt-controls {
  opacity: 1;
}

/* Force controls visible on mobile or when touched */
@media (max-width: 768px) {
  .custom-yt-controls {
    height: 64px;
    padding: 0 12px;
    gap: 10px;
    opacity: 1;
  }
}

.yt-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background 0.2s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.yt-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .yt-btn {
    font-size: 1.45rem;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  .yt-btn:last-child {
    font-size: 1.55rem;
    width: 52px;
    height: 52px;
    background: var(--primary, #0070f3);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    margin-left: auto;
  }
}

.yt-speed-btn {
  font-size: 0.95rem;
  font-weight: 600;
  width: auto;
  padding: 0 10px;
  border-radius: 6px;
  font-family: inherit;
}

.yt-progress-container {
  flex: 1;
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.yt-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  position: relative;
}

.yt-progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  position: relative;
  width: 0%;
}

.yt-progress-thumb {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.yt-progress-container:hover .yt-progress-thumb {
  transform: translateY(-50%) scale(1);
}

.yt-time {
  color: #fff;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  min-width: 85px;
  text-align: center;
}

/* ==========================================================================
   Modern & Premium Course Registration Form Styles
   ========================================================================== */

.registration-card {
  border-top: 4px solid var(--primary);
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  margin-top: 28px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

[data-theme="dark"] .registration-card {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.form-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.form-section-header {
  grid-column: span 2;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  margin: 12px 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-glass);
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .form-section-header {
    grid-column: span 1;
  }
}

.input-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrapper i {
  position: absolute;
  left: 14px;
  color: var(--text-secondary);
  opacity: 0.7;
  font-size: 0.95rem;
  pointer-events: none;
  transition: color 0.3s;
}

.input-icon-wrapper input {
  padding-left: 38px !important;
}

.input-icon-wrapper input:focus + i {
  color: var(--primary);
  opacity: 1;
}

/* Beautiful option cards for batch selection */
.batch-cards-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 250px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  scrollbar-width: thin;
}

.batch-option-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
}

.batch-option-label:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.direct-enrollment-batches {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.direct-enrollment-batch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.88rem;
}

.direct-enrollment-batch:hover {
  background: var(--surface-hover);
}

.direct-enrollment-batch:has(input:checked) {
  background: rgba(0, 91, 181, 0.1);
  color: var(--primary);
  font-weight: 600;
}

.direct-enrollment-batch input {
  width: auto;
  accent-color: var(--primary);
}

.direct-enrollment-batch span span {
  color: var(--text-secondary);
  font-weight: 400;
}

.batch-option-label:has(.batch-checkbox:checked) {
  border-color: var(--primary);
  background: rgba(0, 91, 181, 0.05);
  box-shadow: 0 0 0 1px var(--primary), 0 4px 15px var(--primary-glow);
}

[data-theme="dark"] .batch-option-label:has(.batch-checkbox:checked) {
  background: rgba(91, 156, 245, 0.08);
}

.batch-option-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.batch-option-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.batch-option-meta {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.batch-option-price-tag {
  margin-left: auto;
  font-size: 0.9rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.batch-option-checkbox-custom {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--text-secondary);
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.batch-option-checkbox-custom i {
  font-size: 0.75rem;
  color: #fff;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.batch-option-label:has(.batch-checkbox:checked) .batch-option-checkbox-custom {
  background: var(--primary);
  border-color: var(--primary);
  opacity: 1;
}

.batch-option-label:has(.batch-checkbox:checked) .batch-option-checkbox-custom i {
  transform: scale(1);
}

.batch-demo-btn {
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  background: var(--surface-subtle);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-glass);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.batch-demo-btn:hover {
  background: var(--primary);
  color: #fff !important;
  border-color: var(--primary);
}

.offline-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

.offline-status-banner > i {
  margin-top: 3px;
  font-size: 1.2rem;
}

.offline-status-banner strong,
.offline-status-banner span {
  display: block;
}

.offline-status-banner span {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 0.83rem;
  line-height: 1.45;
}

.offline-media-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 18px;
  border: 1px dashed rgba(217, 119, 6, 0.45);
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
}

.offline-media-notice > i {
  font-size: 1.35rem;
}

.offline-media-notice strong,
.offline-media-notice span {
  display: block;
}

.offline-media-notice span {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}