/* =============================================================
   TeacherOnMode – Main Stylesheet
   Bootstrap 5 custom theme + animations
   ============================================================= */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --tom-primary:       #4f46e5;
  --tom-primary-dark:  #3730a3;
  --tom-secondary:     #7c3aed;
  --tom-admin-primary: #1e3a5f;
  --tom-success:       #16a34a;
  --tom-warning:       #d97706;
  --tom-gradient:      linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%);
  --tom-admin-grad:    linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%);
  --sidebar-width:     0;
  --navbar-height:     62px;
  --radius-sm:         8px;
  --radius-md:         12px;
  --radius-lg:         16px;
  --shadow-card:       0 2px 12px rgba(0,0,0,.08);
  --transition:        .2s ease;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
}

img, picture, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* ── Universal avatar fix ───────────────────────────────────
   The global height:auto above stretches circular avatar imgs
   when the natural image is portrait. This block overrides it
   for every rounded-circle img and known avatar classes across
   teacher, admin and student dashboards.                     */
img.rounded-circle,
img#photoPreview,
img#adminNavPhoto,
img#adminDropPhoto,
.hero-avatar,
.admin-nav-avatar {
  object-fit: cover !important;
  object-position: center top !important;
  aspect-ratio: 1 / 1 !important;   /* enforce square — height always = width */
  height: auto !important;           /* let aspect-ratio drive height from width */
  flex-shrink: 0;
}

/* ── Avatar Hover Preview Bubble ──────────────────────────── */
#avatarHoverPreview {
  position: fixed;
  z-index: 99999;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.9);
  opacity: 0;
  transform: scale(0.72);
  transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
  will-change: opacity, transform;
  background: #e2e8f0;
}
#avatarHoverPreview.visible {
  opacity: 1;
  transform: scale(1);
}
#avatarHoverPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 0;
  aspect-ratio: unset;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #f1f5f9;
  color: #1e293b;
  font-size: .9375rem;
}

.smart-question-input {
  font-family: "Times New Roman", "Segoe UI Symbol", "Arial Unicode MS", Times, serif !important;
  font-size: 14px !important;
  line-height: 1.6;
  white-space: pre-wrap !important;
  overflow-wrap: break-word;
  min-height: 108px;
}

.question-text-editor {
  min-height: 108px;
  min-width: 0;
}

.quill-editor {
  border: 1px solid #ced4da;
  border-radius: .5rem;
  background: #ffffff;
}

.ql-toolbar.ql-snow {
  border-radius: .5rem .5rem 0 0;
}

.ql-container.ql-snow {
  border-radius: 0 0 .5rem .5rem;
  min-height: 140px;
}

.question-text-editor:empty:before {
  content: attr(data-placeholder);
  color: #6c757d;
  pointer-events: none;
  display: block;
}

.input-group {
  align-items: flex-start;
}

.input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-image,
.btn-voice {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.screen-capture-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.capture-dialog {
  width: min(100%, 920px);
  max-height: 90vh;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 22px 68px rgba(15,23,42,.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.capture-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 700;
}

.capture-body {
  padding: 1rem;
  overflow: auto;
}

.capture-canvas-wrapper {
  position: relative;
  border: 1px solid #d1d5db;
  background: #111;
  display: inline-block;
  max-width: 100%;
  touch-action: none;
  user-select: none;
}

.capture-preview {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
}

.capture-selection {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 2px dashed #2563eb;
  background: rgba(37,99,235,.15);
  display: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.38);
  cursor: move;
}

.capture-selection::before {
  content: 'Crop area';
  position: absolute;
  left: 0;
  top: -30px;
  padding: .2rem .5rem;
  border-radius: .65rem;
  color: #fff;
  background: rgba(15,23,42,.85);
  font-size: .75rem;
}

.capture-selection .capture-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #2563eb;
  background: #fff;
}

.capture-selection .capture-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.capture-selection .capture-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.capture-selection .capture-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.capture-selection .capture-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }

.capture-preview-card {
  margin-top: .75rem;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: .6rem;
  background: #f8fafc;
}

.capture-preview-card img {
  display: block;
  max-width: 220px;
  max-height: 140px;
  border-radius: .45rem;
  border: 1px solid #d1d5db;
}

.capture-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid #e5e7eb;
}

.btn-image,
.btn-voice {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.question-text-editor {
  min-height: 108px;
  flex: 1 1 auto;
}

.smart-editor-help {
  font-size: .82rem;
  color: #6c757d;
  margin-top: .35rem;
}

.smart-input-feedback {
  color: #b91c1c;
  font-size: .85rem;
  margin-top: .35rem;
}

.preview-preserve-whitespace {
  white-space: pre-wrap;
  word-break: break-word;
}

.global-offline-notice {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1085;
  display: flex;
  align-items: center;
  gap: .8rem;
  width: min(360px, calc(100vw - 1.5rem));
  padding: .8rem .95rem;
  border-radius: 1rem;
  border: 1px solid rgba(239,68,68,.22);
  background: linear-gradient(135deg,rgba(255,241,242,.98) 0%,rgba(254,226,226,.98) 100%);
  box-shadow: 0 16px 34px rgba(239,68,68,.18);
  backdrop-filter: blur(10px);
  transition: opacity .25s ease, transform .25s ease;
}

.global-offline-notice.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.global-offline-notice-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 18px rgba(15,23,42,.18);
  background: linear-gradient(135deg,#fda4af,#fecdd3);
}

.global-offline-notice-text {
  min-width: 0;
}

.global-offline-notice-title {
  color: #b91c1c;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.2;
}

.global-offline-notice-subtitle {
  margin-top: .1rem;
  color: #7f1d1d;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 576px) {
  .global-offline-notice {
    right: .75rem;
    left: .75rem;
    width: auto;
    bottom: .75rem;
  }
}

/* ── Mobile Swipe-to-Login Container ───────────────────────── */
@media (max-width: 991px) {
  .mobile-swipe-container {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    gap: 1.5rem;
    padding-bottom: 2rem !important; /* Space for shadow & scrollbar */
    padding-top: 1rem !important;
  }
  .mobile-swipe-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for cleaner native look */
  }
  .mobile-swipe-container > div {
    flex: 0 0 90% !important; /* Cards take 90% width so next card peaks out */
    max-width: 90% !important;
    scroll-snap-align: center;
  }
  .mobile-swipe-container > div:first-child {
    margin-left: 5%;
  }
  .mobile-swipe-container > div:last-child {
    margin-right: 5%;
  }
}

/* Animations for swipe hint */
@keyframes swipeHintPulse {
  0%, 100% { opacity: 0.3; text-shadow: none; }
  50% { opacity: 1; text-shadow: 0 0 12px rgba(255,255,255,0.9); }
}
.swipe-hint-text {
  animation: swipeHintPulse 2s ease-in-out infinite;
  color: rgba(255,255,255,0.9);
  font-weight: bold;
  font-size: 1.1rem;
  gap: 0.5rem;
}

@keyframes swipeArrowAnim {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
.swipe-arrow-anim {
  animation: swipeArrowAnim 1.5s ease-in-out infinite;
}

/* ── Login Pages ───────────────────────────────────────────── */
.login-body {
  background: linear-gradient(135deg, #000033 0%, #000066 50%, #000033 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

.admin-login-body {
  background: var(--tom-admin-grad);
}

/* Brand panel */
.login-brand-panel {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
}

.brand-logo {
  background: rgba(255,255,255,.15);
  width: 90px; height: 90px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  animation: float 4s ease-in-out infinite, logoPulse 2.5s ease-out infinite;
}

.feature-list { font-size: .9rem; }
.feature-list li { 
  margin-bottom: .6rem; 
  display: flex;
  align-items: flex-start;
}
.feature-list li i {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

/* Login card */
.login-card {
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: box-shadow .35s ease;
}

/* Gradient top accent stripe */
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--tom-gradient);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 1;
}

/* Decorative glow orbs */
.login-card::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(79,70,229,.07) 0%, transparent 70%);
  border-radius: 50%;
  top: -80px; right: -80px;
  pointer-events: none;
}

.login-card:hover {
  box-shadow: 0 24px 60px rgba(79,70,229,.18) !important;
}

.brand-affiliation-badge,
.login-affiliation-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: rgba(255,255,255,.18);
  color: #ffffff;
  font-size: .76rem;
  font-weight: 700;
  padding: .45rem .75rem;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
  z-index: 2;
  letter-spacing: .02em;
  line-height: 1.2;
}

.brand-affiliation-badge {
  background: rgba(255,255,255,.12);
}

/* Admin login affiliation badge - dark text for light background */
.login-card .login-affiliation-badge {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1e40af;
  border: 1px solid rgba(30, 64, 175, 0.15);
}

.brand-contact-row {
  color: rgba(255,255,255,.9);
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  text-align: center;
}

.brand-contact-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  white-space: nowrap;
}

.brand-contact-line i {
  color: rgba(255,255,255,.7);
  font-size: 0.78rem;
}

.brand-contact-sep {
  color: rgba(255,255,255,.35);
  font-weight: 300;
  margin: 0 0.2rem;
}

.brand-contact-item {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255,255,255,.95);
}

.brand-contact-item i {
  color: rgba(255,255,255,.82);
  width: 1.05rem;
  text-align: center;
}

/* Bottom-left decorative orb */
.login-card-orb {
  position: absolute;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(124,58,237,.06) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -60px; left: -60px;
  pointer-events: none;
}

/* ── Stagger slide-in for card body children ─────────────────── */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-stagger > * {
  opacity: 0;
  animation: slideInUp .5s ease forwards;
}
.login-stagger > *:nth-child(1) { animation-delay: .1s; }
.login-stagger > *:nth-child(2) { animation-delay: .18s; }
.login-stagger > *:nth-child(3) { animation-delay: .26s; }
.login-stagger > *:nth-child(4) { animation-delay: .34s; }
.login-stagger > *:nth-child(5) { animation-delay: .42s; }
.login-stagger > *:nth-child(6) { animation-delay: .50s; }
.login-stagger > *:nth-child(7) { animation-delay: .58s; }
.login-stagger > *:nth-child(8) { animation-delay: .66s; }
.login-stagger > *:nth-child(9) { animation-delay: .74s; }

/* ── Animated Sign-In button ─────────────────────────────────── */
.btn-login {
  background: var(--tom-gradient);
  background-size: 200% 200%;
  border: none;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Sweep shine effect */
.btn-login::after {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}

.btn-login:hover::after { left: 130%; }

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(79,70,229,.45) !important;
}

.btn-login:active { transform: translateY(0); }

/* ── Input group glow on focus ───────────────────────────────── */
.input-group:focus-within .input-group-text {
  border-color: var(--tom-primary);
  background: #eef2ff;
  color: var(--tom-primary);
  transition: all .25s ease;
}

.input-group:focus-within .form-control {
  border-color: var(--tom-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.14);
}

/* ── Error alert shake ───────────────────────────────────────── */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(8px); }
  45%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
}

.alert-danger { animation: shakeX .55s ease; }

.india-clock-special-info {
  margin-top: .35rem;
  color: #64748b;
  font-size: .82rem;
  line-height: 1.4;
}

/* ── Secure badge pulse ────────────────────────────────────────*/
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.35); }
  50%       { box-shadow: 0 0 0 6px rgba(22,163,74,.0); }
}

.login-secure-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #dcfce7; color: #15803d;
  font-size: .72rem; font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 99px;
  animation: badgePulse 2s ease infinite;
  border: 1px solid #bbf7d0;
}

.school-marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.school-gradient-title {
  display: inline-block;
  opacity: 1;
  font-size: clamp(.8rem, 2.2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .2px;
  padding-left: 100%;
  color: #2563eb;
  animation: schoolMarquee 30s linear infinite, gradientShift 8s ease-in-out infinite;
}

.school-marquee:hover .school-gradient-title {
  animation-play-state: paused;
}

@keyframes schoolMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .school-gradient-title {
    background: linear-gradient(90deg, #f59e0b 0%, #f43f5e 35%, #6366f1 70%, #0ea5e9 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

@media (max-width: 576px) {
  .school-gradient-title {
    font-size: .78rem;
  }
}

.login-address-wrap {
  width: 100%;
}

.login-address-card {
  max-width: 700px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #0f172a;
  padding: .55rem .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
}

.login-address-text {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1px;
}

.login-map-link {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .75rem;
  padding: .2rem .55rem;
  font-weight: 700;
  white-space: nowrap;
}

.login-map-link:hover {
  background: #dbeafe;
  color: #1e40af;
}

@media (max-width: 768px) {
  .login-address-card {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}

/* ── Compact login layout so full content fits without scroll ─────── */
.login-body .container-fluid {
  padding-top: 1.46rem !important;
  padding-bottom: 1.46rem !important;
}

.login-brand-panel {
  padding: 2.55rem;
}

.login-brand-panel .text-center {
  padding: 1.66rem !important;
}

.brand-logo {
  width: 100px;
  height: 100px;
}

.feature-list {
  font-size: .94rem;
}

.feature-list li {
  margin-bottom: .35rem;
}

.login-card .card-body {
  padding: 1rem 2rem 2rem 2rem !important;
  box-sizing: border-box;
}

.login-card .form-text {
  text-align: center;
}

.login-card .text-center.mb-4 {
  margin-bottom: 1rem !important;
}

.login-card .mb-3 {
  margin-bottom: 0.85rem !important;
  padding: 0.45rem 0.5rem;
}

.login-card .form-label {
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  padding-left: 0.15rem;
}

.login-card .mb-4 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.login-card .form-control,
.login-card .form-select {
  padding: 0.8rem 1rem;
}

.login-card .input-group-text {
  padding: 0.8rem 1rem;
}

.login-card .form-control,
.login-card .form-select {
  border-radius: 0.75rem;
}

.login-card .input-group {
  gap: 0.35rem;
  align-items: stretch;
}

.login-card .input-group .form-control,
.login-card .input-group .form-select,
.login-card .input-group .input-group-text,
.login-card .input-group .btn {
  padding: 0.8rem 1rem;
  min-height: calc(1.5em + 1.6rem);
}

.login-card .input-group .btn {
  border-radius: 0 0.75rem 0.75rem 0;
}

.login-card button[type="submit"] {
  margin-bottom: 2rem !important;
}

.login-card .back-to-teacher-wrap {
  margin-bottom: 2rem !important;
}

.login-card .back-to-teacher-link {
  display: inline-block;
}

.login-welcome-title {
  font-size: 1.81rem;
}

.login-card .text-muted.mb-4 {
  margin-bottom: 0.9rem !important;
  margin-bottom: .75rem !important;
}

.btn-login {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.login-feature-pills {
  margin-bottom: .62rem;
  gap: .52rem;
}

.login-pill {
  min-height: 52px;
  padding: .57rem .78rem;
  font-size: .8rem;
}

.login-address-wrap {
  margin-top: .36rem !important;
}

.login-address-card {
  padding: .6rem .81rem;
}

.login-address-text {
  font-size: .9rem;
}

@media (max-height: 860px) {
  .login-body .container-fluid {
    padding-top: .42rem !important;
    padding-bottom: .42rem !important;
  }

  .login-card .card-body {
    padding: 1rem !important;
  }

  .school-marquee {
    margin-bottom: .36rem !important;
  }

  .login-feature-pills {
    margin-bottom: .31rem;
  }
}

@media (max-width: 576px) {
  #spaceMoon {
    display: none !important;
  }

  .login-card {
    position: relative;
  }

  .login-card .admin-login-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin: 0;
    width: auto;
    height: auto;
  }

  .login-card .admin-login-icon i {
    color: #16a34a !important;
    font-size: 1.8rem;
  }

  .login-card .text-center.mb-4 {
    margin-top: 3rem !important;
  }
}

/* ── Avatar Hover Preview ───────────────────────────────────── */
#avatarHoverPreview {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 250px;
  height: 250px;
  opacity: 0;
  transition: opacity .2s ease;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  border: 3px solid rgba(255,255,255,.5);
  transform: scale(0.8);
}
#avatarHoverPreview.visible {
  opacity: 1;
  transform: scale(1);
}
#avatarHoverPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Feature card row ───────────────────────────────────────── */
.login-feature-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: .55rem;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  padding-bottom: .25rem;
  margin-bottom: .85rem;
}

.login-feature-pills::-webkit-scrollbar {
  height: 6px;
}

.login-feature-pills::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.2);
  border-radius: 999px;
}

.login-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-height: 52px;
  padding: .65rem .8rem;
  border-radius: .95rem;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  border: 1px solid transparent;
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  opacity: 0;
  animation: pillPop .4s cubic-bezier(.34,1.56,.64,1) forwards;
}

.login-pill:nth-child(1) {
  animation-delay: .72s;
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 100%);
  color: #92400e;
}
.login-pill:nth-child(2) {
  animation-delay: .84s;
  background: linear-gradient(135deg, #bbf7d0 0%, #22c55e 100%);
  color: #14532d;
}
.login-pill:nth-child(3) {
  animation-delay: .96s;
  background: linear-gradient(135deg, #c7d2fe 0%, #6366f1 100%);
  color: #1e3a8a;
}
.login-pill:nth-child(4) {
  animation-delay: 1.08s;
  background: linear-gradient(135deg, #a5f3fc 0%, #06b6d4 100%);
  color: #0f172a;
}

.login-pill:hover {
  transform: translateY(-2px) scale(1.003);
  box-shadow: 0 16px 28px rgba(15,23,42,.14);
  filter: saturate(1.04);
}

/* ── Brand panel feature list stagger ───────────────────────── */
.login-brand-panel .feature-list li {
  opacity: 0;
  animation: slideInFade .5s ease forwards;
}
.login-brand-panel .feature-list li:nth-child(1) { animation-delay: .7s; }
.login-brand-panel .feature-list li:nth-child(2) { animation-delay: .85s; }
.login-brand-panel .feature-list li:nth-child(3) { animation-delay: 1.0s; }
.login-brand-panel .feature-list li:nth-child(4) { animation-delay: 1.15s; }
.login-brand-panel .feature-list li:nth-child(5) { animation-delay: 1.3s; }

@keyframes slideInFade {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pillPop {
  0%   { opacity: 0; transform: scale(.5) translateY(8px); }
  70%  { transform: scale(1.12) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Brand logo pulsing glow ────────────────────────────────── */
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  50%       { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
}

/* ── Login card 3D tilt (driven by JS) ──────────────────────── */
.login-card.tilt-idle {
  transition: transform .65s cubic-bezier(.23,1,.32,1), box-shadow .35s ease;
}
.login-card.tilt-active {
  transition: transform .08s linear, box-shadow .08s linear;
}

/* ── Ripple click on login button ───────────────────────────── */
@keyframes rippleOut {
  to { transform: scale(4.5); opacity: 0; }
}

.btn-login .btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  width: 50px; height: 50px;
  margin-top: -25px; margin-left: -25px;
  pointer-events: none;
  animation: rippleOut .65s ease-out forwards;
}

/* ── Welcome heading gradient ────────────────────────────────── */
.login-welcome-title {
  background: var(--tom-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.typed-text {
  display: inline-block;
  min-width: 8rem;
}

.login-welcome-title .emoji {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1em;
  line-height: 1;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  background: none;
  background-clip: border-box;
  display: inline-block;
  margin-left: 0.1rem;
}

.typed-text::after {
  content: '|';
  margin-left: .2rem;
  opacity: .8;
  animation: caretBlink 1s step-end infinite;
}

@keyframes caretBlink {
  0%, 40% { opacity: 1; }
  41%, 100% { opacity: 0; }
}

/* ── Space Components (Moon & Satellite) ───────────────────────── */
.moon {
  position: fixed;
  top: 7%;
  right: 4%;
  width: 90px;
  height: 90px;
  background-color: transparent;
  background-image: url('../img/realistic_moon.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-shadow: 
    0 0 35px 10px rgba(255, 255, 255, 0.25), 
    inset -18px -18px 26px rgba(0,0,0,0.45), 
    inset 8px 8px 12px rgba(255,255,255,0.7);
  z-index: 2;
  pointer-events: none;
  animation: moonFloat 12s ease-in-out infinite, rotateMoon 30s linear infinite;
  overflow: hidden;
}

.sun {
  position: fixed;
  top: 7%;
  right: 4%;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 50% 45%, #fef08a 0%, #fb923c 55%, #f97316 100%);
  border-radius: 50%;
  box-shadow:
    0 0 35px rgba(249, 115, 22, 0.3),
    inset 0 0 16px rgba(255,255,255,0.7);
  z-index: 2;
  pointer-events: none;
  animation: sunPulse 10s ease-in-out infinite;
}

.sun::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  box-shadow:
    0 -18px 0 -10px rgba(251, 191, 36, 0.35),
    0 18px 0 -10px rgba(251, 191, 36, 0.35),
    -18px 0 0 -10px rgba(251, 191, 36, 0.35),
    18px 0 0 -10px rgba(251, 191, 36, 0.35),
    -14px -14px 0 -10px rgba(251, 191, 36, 0.25),
    14px -14px 0 -10px rgba(251, 191, 36, 0.25),
    -14px 14px 0 -10px rgba(251, 191, 36, 0.25),
    14px 14px 0 -10px rgba(251, 191, 36, 0.25);
}

@keyframes sunPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.03); }
}

@keyframes rotateMoon {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes moonFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

.satellite {
  position: fixed;
  top: calc(7% + 35px);
  right: calc(4% + 35px);
  font-size: 1.6rem;
  color: #cbd5e1;
  z-index: 3;
  pointer-events: none;
  animation: satelliteOrbit 12s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

@keyframes satelliteOrbit {
  0% { transform: rotate(0deg) translateX(120px) rotate(45deg); z-index: 3; }
  25% { transform: rotate(90deg) translateX(120px) rotate(45deg); z-index: 3; }
  49.9% { z-index: 3; }
  50% { transform: rotate(180deg) translateX(120px) rotate(45deg); z-index: 1; }
  75% { transform: rotate(270deg) translateX(120px) rotate(45deg); z-index: 1; }
  99.9% { z-index: 1; }
  100% { transform: rotate(360deg) translateX(120px) rotate(45deg); z-index: 3; }
}


/* ── Study Icons Floating Layer ─────────────────────────────── */
.study-icons {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}

.study-icon {
  position: absolute;
  color: rgba(255,255,255,1);
  animation: studyFloat linear infinite;
  will-change: transform, opacity;
}

@keyframes studyFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: inherit;
  }
  20% {
    transform: translateY(-18vh) rotate(25deg) scale(1.08);
  }
  50% {
    transform: translateY(-52vh) rotate(-15deg) scale(.95);
    opacity: inherit;
  }
  80% {
    transform: translateY(-80vh) rotate(30deg) scale(1.05);
    opacity: calc(inherit * .5);
  }
  100% {
    transform: translateY(-115vh) rotate(45deg) scale(.9);
    opacity: 0;
  }
}

/* Subtle sway on the icon as it rises */
.study-icon:nth-child(odd)  { animation-name: studyFloatL; }
.study-icon:nth-child(even) { animation-name: studyFloatR; }

@keyframes studyFloatL {
  0%   { transform: translateY(0)      translateX(0)     rotate(0deg)   scale(1);    opacity: inherit; }
  25%  { transform: translateY(-28vh)  translateX(-18px) rotate(-18deg) scale(1.06); }
  50%  { transform: translateY(-55vh)  translateX(10px)  rotate(12deg)  scale(.97);  opacity: inherit; }
  75%  { transform: translateY(-82vh)  translateX(-12px) rotate(-8deg)  scale(1.04); }
  100% { transform: translateY(-115vh) translateX(6px)   rotate(20deg)  scale(.88);  opacity: 0; }
}

@keyframes studyFloatR {
  0%   { transform: translateY(0)      translateX(0)     rotate(0deg)  scale(1);    opacity: inherit; }
  25%  { transform: translateY(-30vh)  translateX(16px)  rotate(20deg) scale(1.07); }
  50%  { transform: translateY(-58vh)  translateX(-8px)  rotate(-10deg) scale(.96); opacity: inherit; }
  75%  { transform: translateY(-85vh)  translateX(14px)  rotate(15deg) scale(1.03); }
  100% { transform: translateY(-115vh) translateX(-5px)  rotate(-22deg) scale(.9);  opacity: 0; }
}

/* ── Particles Animation ────────────────────────────────────── */
.particles {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
  animation: particleFloat linear infinite;
}

@keyframes particleFloat {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ── App Navbar ─────────────────────────────────────────────── */
.app-navbar {
  background: var(--tom-gradient);
  height: var(--navbar-height);
  z-index: 1040;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.admin-navbar {
  background: var(--tom-admin-grad);
  height: var(--navbar-height);
  z-index: 1040;
}

/* ── Admin Navbar Avatar ─────────────────────────────────────── */
.admin-nav-avatar-wrap {
  display: inline-block;
  position: relative;
}
.admin-nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.6);
  transition: transform .22s ease, box-shadow .22s ease;
  cursor: zoom-in;
}
.admin-nav-avatar:hover {
  transform: scale(1.55);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 10;
  position: relative;
}

.app-navbar .nav-link:hover,
.admin-navbar .nav-link:hover {
  background: rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
}

.app-navbar .navbar-toggler-icon,
.admin-navbar .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

/* ── Main Content ────────────────────────────────────────────── */
.main-content {
  margin-top: var(--navbar-height);
  min-height: calc(100vh - var(--navbar-height));
  padding-top: 0;
}

/* ── Stat Cards ─────────────────────────────────────────────── */
.stat-card {
  border-radius: var(--radius-md);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: default;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

.stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.stat-label { font-size: .78rem; font-weight: 500; }
.stat-value { font-size: 1.6rem; line-height: 1.2; font-weight: 700; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-md);
}

.dashboard-card {
  position: relative;
  overflow: hidden;
  animation: cardEntrance .65s ease-out both;
  will-change: transform, opacity;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(244,247,255,.96) 100%);
  border: 1px solid rgba(99,102,241,.18);
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -24px;
  width: 128px;
  height: 128px;
  background: radial-gradient(circle, rgba(59,130,246,.22) 0%, transparent 65%);
  filter: blur(2px);
  opacity: .7;
  pointer-events: none;
}

.dashboard-card::after {
  content: '';
  position: absolute;
  bottom: -18px;
  right: -18px;
  width: 96px;
  height: 96px;
  background: radial-gradient(circle, rgba(59,130,246,.1) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dashboard-card:hover {
  transform: translateY(-10px) scale(1.006);
  box-shadow: 0 26px 65px rgba(15,23,42,.16) !important;
}

.stat-card {
  background: linear-gradient(160deg, rgba(255,255,255,.98) 0%, rgba(238,242,255,.92) 100%);
  border: 1px solid rgba(99,102,241,.18);
}

/* ── Dark vivid stat card variants ──────────────────────────── */

/* shared dark card rules */
.stat-card-blue,
.stat-card-green,
.stat-card-cyan,
.stat-card-orange,
.stat-card-red {
  border: none !important;
  color: #fff !important;
  overflow: hidden;
  position: relative;
}

.stat-card-blue .stat-label,
.stat-card-green .stat-label,
.stat-card-cyan .stat-label,
.stat-card-orange .stat-label,
.stat-card-red .stat-label {
  color: rgba(255,255,255,.82) !important;
}

.stat-card-blue .stat-value,
.stat-card-green .stat-value,
.stat-card-cyan .stat-value,
.stat-card-orange .stat-value,
.stat-card-red .stat-value {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22);
}

/* decorative glowing orb behind icon */
.stat-card-blue::after,
.stat-card-green::after,
.stat-card-cyan::after,
.stat-card-orange::after,
.stat-card-red::after {
  content: '';
  position: absolute;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  bottom: -28px; right: -22px;
  pointer-events: none;
}

/* icon circles on dark cards */
.stat-card-blue .stat-icon,
.stat-card-green .stat-icon,
.stat-card-cyan .stat-icon,
.stat-card-orange .stat-icon,
.stat-card-red .stat-icon {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  border-radius: var(--radius-sm);
}

/* ── Blue (Total Submissions) ── */
.stat-card-blue {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%);
  box-shadow: 0 14px 40px rgba(29,78,216,.38) !important;
}
.stat-card-blue:hover {
  box-shadow: 0 22px 55px rgba(29,78,216,.52) !important;
}

/* ── Green (Active Papers) ── */
.stat-card-green {
  background: linear-gradient(135deg, #065f46 0%, #059669 60%, #34d399 100%);
  box-shadow: 0 14px 40px rgba(5,150,105,.38) !important;
}
.stat-card-green:hover {
  box-shadow: 0 22px 55px rgba(5,150,105,.52) !important;
}

/* ── Cyan (Approved) ── */
.stat-card-cyan {
  background: linear-gradient(135deg, #164e63 0%, #0891b2 60%, #22d3ee 100%);
  box-shadow: 0 14px 40px rgba(8,145,178,.38) !important;
}
.stat-card-cyan:hover {
  box-shadow: 0 22px 55px rgba(8,145,178,.52) !important;
}

/* ── Orange (Correction Requests) ── */
.stat-card-orange {
  background: linear-gradient(135deg, #92400e 0%, #d97706 60%, #fbbf24 100%);
  box-shadow: 0 14px 40px rgba(217,119,6,.38) !important;
}
.stat-card-orange:hover {
  box-shadow: 0 22px 55px rgba(217,119,6,.52) !important;
}

/* ── Red (Deleted) ── */
.stat-card-red {
  background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%);
  box-shadow: 0 14px 40px rgba(220,38,38,.38) !important;
}
.stat-card-red:hover {
  box-shadow: 0 22px 55px rgba(220,38,38,.52) !important;
}

/* fallback for plain stat-card */
.stat-card .stat-icon {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(59,130,246,.24));
  color: #1d4ed8 !important;
  box-shadow: 0 18px 30px rgba(59,130,246,.12);
}

.stat-card .stat-value {
  text-shadow: 0 1px 1px rgba(15,23,42,.06);
}

.card-header.bg-white {
  background: rgba(255,255,255,.95);
}

/* ── Notification Badge ───────────────────────────────────────── */
.badge-notif {
  position: absolute;
  top: -4px; right: -4px;
  font-size: .65rem;
  padding: 2px 5px;
  min-width: 18px;
}

/* ── Notification Items ──────────────────────────────────────── */
.notif-dropdown { border-radius: var(--radius-md); }

.notif-item { transition: background var(--transition); cursor: pointer; }
.notif-item:hover { background: #f8fafc; }
.notif-unread { background: #eff6ff; }
.notif-unread:hover { background: #dbeafe; }

.notif-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .8rem; margin-top: .1rem;
}

.notif-success { background: #dcfce7; color: #16a34a; }
.notif-info    { background: #dbeafe; color: #2563eb; }
.notif-warning { background: #fef9c3; color: #d97706; }
.notif-error   { background: #fee2e2; color: #dc2626; }

/* ── File Icons ──────────────────────────────────────────────── */
.file-icon { font-size: 1.3rem; }
.file-pdf  { color: #dc2626; }
.file-docx, .file-doc { color: #2563eb; }

/* ── Badges: custom ─────────────────────────────────────────── */
.bg-purple-subtle { background-color: #ede9fe !important; }
.text-purple      { color: #6d28d9 !important; }

/* ── Upload Dropzone ────────────────────────────────────────── */
.upload-dropzone {
  border: 2.5px dashed #c7d2fe;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: #f8faff;
  position: relative;
}

.upload-dropzone:hover,
.upload-dropzone.drag-over {
  border-color: var(--tom-primary);
  background: #eef2ff;
}

.upload-dropzone.drag-over { transform: scale(1.01); }

.dropzone-selected {
  padding: 1rem;
  background: #f0fdf4;
  border-radius: var(--radius-sm);
}

/* ── Step Indicator ─────────────────────────────────────────── */
.upload-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1; position: relative;
}

.step-circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #e2e8f0; color: #64748b;
  font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  z-index: 1;
}

.step.active .step-circle {
  background: var(--tom-primary);
  color: white;
  box-shadow: 0 0 0 4px rgba(79,70,229,.2);
}

.step.completed .step-circle {
  background: #16a34a;
  color: white;
}

.step.completed .step-circle::after {
  content: '✓';
}

.step-label { font-size: .72rem; color: #64748b; font-weight: 500; text-align: center; }
.step.active .step-label { color: var(--tom-primary); font-weight: 600; }

.step-line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin-bottom: 22px;
  max-width: 80px;
}

/* ── Check Chips ────────────────────────────────────────────── */
.subject-grid {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .5rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  max-height: 210px; overflow-y: auto;
  background: #fafafa;
}

.check-chip input[type="checkbox"] { display: none; }

.check-chip span {
  display: inline-flex; align-items: center;
  padding: .3rem .75rem;
  border: 1.5px solid #c7d2fe;
  border-radius: 99px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 500;
  color: #4f46e5;
  background: white;
  transition: all var(--transition);
  user-select: none;
}

.check-chip input:checked + span {
  background: var(--tom-primary);
  color: white;
  border-color: var(--tom-primary);
  box-shadow: 0 2px 8px rgba(79,70,229,.3);
}

.check-chip:hover span { border-color: var(--tom-primary); transform: translateY(-1px); }

.check-chip-purple span { color: #7c3aed; border-color: #ddd6fe; }
.check-chip-purple input:checked + span { background: #7c3aed; border-color: #7c3aed; color: white; }

.check-chip-warn span { color: #d97706; border-color: #fde68a; }
.check-chip-warn input:checked + span { background: #d97706; border-color: #d97706; color: white; }

/* ── Review Card ────────────────────────────────────────────── */
.review-card { border: 1.5px solid #c7d2fe; }

/* ── Profile Photo ──────────────────────────────────────────── */
.photo-edit-btn {
  position: absolute; bottom: 4px; right: 4px;
  width: 30px; height: 30px;
  background: var(--tom-primary);
  color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .8rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform var(--transition);
}
.photo-edit-btn:hover { transform: scale(1.15); }

/* Enforce profile photo circle — overrides global img { height: auto } reset */
#photoPreview {
  width: 110px !important;
  height: 110px !important;
  object-fit: cover !important;
  object-position: center top !important;
  flex-shrink: 0;
}

/* ── Timeline Log ────────────────────────────────────────────── */
.timeline-log { position: relative; padding-left: 1.5rem; }

.timeline-item {
  position: relative;
  padding-bottom: 1.25rem;
  border-left: 2px solid #e2e8f0;
  padding-left: 1.25rem;
  margin-left: .5rem;
}

.timeline-item:last-child { border-left-color: transparent; }

.timeline-dot {
  position: absolute;
  left: -7px; top: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #e2e8f0;
}

.timeline-content {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
}

/* ── Submission Row Hover ─────────────────────────────────────── */
.submission-row { transition: background var(--transition); }
.submission-row:hover { background: #f8faff; }

/* ── App Body ────────────────────────────────────────────────── */
.app-body  { background: #f1f5f9; }
.admin-body { background: #f0f4f8; }

/* ── Btn improvements ────────────────────────────────────────── */
.btn-login { border-radius: var(--radius-sm); letter-spacing: .3px; }
.btn-login:disabled { opacity: .7; }

/* ── Tiny button ─────────────────────────────────────────────── */
.btn-xs {
  padding: .18rem .65rem;
  font-size: .72rem;
  border-radius: 6px;
  line-height: 1.5;
  font-weight: 600;
}
.btn-outline-purple {
  color: #7c3aed;
  border-color: #c4b5fd;
}
.btn-outline-purple:hover {
  background: #f5f3ff;
  border-color: #7c3aed;
  color: #7c3aed;
}

/* ── Exam Type Radio Cards ───────────────────────────────────── */
.exam-type-group {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.exam-type-card {
  cursor: pointer;
  flex: 1 1 120px;
  max-width: 160px;
}

.exam-type-card input[type="radio"] { display: none; }

.et-face {
  padding: 1rem .8rem;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, color .24s ease, background .24s ease;
  text-align: center;
  background:
    radial-gradient(circle at 90% 0%, rgba(148, 163, 184, .15), transparent 40%),
    linear-gradient(160deg, #ffffff 0%, #f8fafc 100%);
  color: #64748b;
  user-select: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.et-face::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease;
  background: radial-gradient(circle at 20% -10%, rgba(255,255,255,.92), rgba(255,255,255,0) 55%);
}

.et-face::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--radius-md) - 4px);
  border: 1.5px solid transparent;
  pointer-events: none;
  opacity: 0;
  transform: scale(.96);
}

.et-icon {
  font-size: 1.4rem;
  display: block;
  transition: transform .2s ease;
}

.et-label {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: .2rem;
}

.et-sub {
  font-size: .68rem;
  font-weight: 400;
  opacity: .7;
  line-height: 1.3;
}

/* Hover & checked states per color */
.exam-type-card:hover .et-face {
  border-color: #93c5fd;
  color: #1d4ed8;
  box-shadow: 0 12px 24px rgba(30, 64, 175, .14);
  transform: translateY(-4px);
}
.exam-type-card:hover .et-face::before { opacity: 1; }
.exam-type-card:hover .et-icon { transform: scale(1.16) rotate(-3deg); }

.exam-type-indigo input:checked + .et-face {
  border-color: #4338ca;
  color: #312e81;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 88% 100%, rgba(129, 140, 248, .36), rgba(129, 140, 248, 0) 48%),
    linear-gradient(155deg, #eef2ff 0%, #e0e7ff 100%);
  box-shadow: 0 12px 26px rgba(79,70,229,.28), inset 0 1px 0 rgba(255,255,255,.82);
  transform: translateY(-4px);
}
.exam-type-indigo input:checked + .et-face::after { border-color: rgba(79,70,229,.46); animation: examPulse 1.8s ease-out infinite; }
.exam-type-blue input:checked + .et-face {
  border-color: #1d4ed8;
  color: #1e3a8a;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 88% 100%, rgba(56, 189, 248, .34), rgba(56, 189, 248, 0) 48%),
    linear-gradient(155deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 12px 26px rgba(37,99,235,.26), inset 0 1px 0 rgba(255,255,255,.82);
  transform: translateY(-4px);
}
.exam-type-blue input:checked + .et-face::after { border-color: rgba(37,99,235,.46); animation: examPulse 1.8s ease-out infinite; }
.exam-type-teal input:checked + .et-face {
  border-color: #0f766e;
  color: #115e59;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 88% 100%, rgba(45, 212, 191, .3), rgba(45, 212, 191, 0) 48%),
    linear-gradient(155deg, #f0fdfa 0%, #ccfbf1 100%);
  box-shadow: 0 12px 26px rgba(13,148,136,.24), inset 0 1px 0 rgba(255,255,255,.82);
  transform: translateY(-4px);
}
.exam-type-teal input:checked + .et-face::after { border-color: rgba(13,148,136,.44); animation: examPulse 1.8s ease-out infinite; }
.exam-type-purple input:checked + .et-face {
  border-color: #6d28d9;
  color: #581c87;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 88% 100%, rgba(192, 132, 252, .34), rgba(192, 132, 252, 0) 48%),
    linear-gradient(155deg, #f5f3ff 0%, #ede9fe 100%);
  box-shadow: 0 12px 26px rgba(124,58,237,.24), inset 0 1px 0 rgba(255,255,255,.82);
  transform: translateY(-4px);
}
.exam-type-purple input:checked + .et-face::after { border-color: rgba(124,58,237,.44); animation: examPulse 1.8s ease-out infinite; }

.exam-type-orange input:checked + .et-face {
  border-color: #ea580c;
  color: #9a3412;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 88% 100%, rgba(251, 146, 60, .34), rgba(251, 146, 60, 0) 48%),
    linear-gradient(155deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow: 0 12px 26px rgba(234,88,12,.24), inset 0 1px 0 rgba(255,255,255,.82);
  transform: translateY(-4px);
}
.exam-type-orange input:checked + .et-face::after { border-color: rgba(234,88,12,.44); animation: examPulse 1.8s ease-out infinite; }

@keyframes examPulse {
  0% {
    opacity: .58;
    transform: scale(.96);
  }
  70% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .exam-type-indigo input:checked + .et-face::after,
  .exam-type-blue input:checked + .et-face::after,
  .exam-type-teal input:checked + .et-face::after,
  .exam-type-purple input:checked + .et-face::after,
  .exam-type-orange input:checked + .et-face::after {
    animation: none;
    opacity: .45;
    transform: scale(1);
  }
}

/* Checked icon gets bigger */
.exam-type-card input:checked ~ .et-face .et-icon,
.exam-type-card input:checked + .et-face .et-icon { transform: scale(1.22) rotate(-5deg); }

/* ── Class Chip Grid ─────────────────────────────────────────── */
.class-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  gap: .6rem;
}

.class-chip { cursor: pointer; }
.class-chip input[type="checkbox"] { display: none; }

.chip-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .75rem .35rem;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
  gap: .1rem;
}

.chip-roman {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  font-family: 'Segoe UI', Georgia, serif;
  letter-spacing: .5px;
}

.chip-num {
  font-size: .58rem;
  font-weight: 500;
  opacity: .65;
  white-space: nowrap;
}

.class-chip input:checked + .chip-face {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #7c3aed;
  box-shadow: 0 4px 14px rgba(124,58,237,.2);
  transform: scale(1.07);
}

.class-chip:hover .chip-face {
  border-color: #c4b5fd;
  color: #7c3aed;
  background: #faf5ff;
}

/* ── Set Chips ───────────────────────────────────────────────── */
.set-chip { cursor: pointer; flex: 1 1 140px; max-width: 200px; }
.set-chip input[type="checkbox"] { display: none; }

.set-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.5rem;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
  gap: .15rem;
  text-align: center;
}

.set-icon   { font-size: 1.3rem; transition: transform .2s ease; }
.set-label  { font-size: .95rem; font-weight: 800; line-height: 1.2; }
.set-sub    { font-size: .68rem; opacity: .65; }

.set-chip input:checked + .set-face {
  border-color: #d97706;
  background: #fffbeb;
  color: #b45309;
  box-shadow: 0 4px 14px rgba(217,119,6,.2);
  transform: translateY(-2px);
}

.set-chip input:checked + .set-face .set-icon { transform: scale(1.2); }
.set-chip:hover .set-face { border-color: #fde68a; color: #d97706; background: #fffbeb; }

/* ── Selection Counter ───────────────────────────────────────── */
.selection-counter {
  font-size: .78rem;
  color: #64748b;
}

/* ── Contact Admin icon ──────────────────────────────────────── */
.contact-admin-icon {
  width: 80px; height: 80px;
  background: #eff6ff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination .page-link { border-radius: var(--radius-sm) !important; margin: 0 2px; }
.pagination .page-item.active .page-link { background: var(--tom-primary); border-color: var(--tom-primary); }

/* ── Admin stats ─────────────────────────────────────────────── */
.admin-body .stat-card:hover { box-shadow: 0 8px 24px rgba(30,58,95,.15) !important; }

/* ── 3D Stat Cards ───────────────────────────────────────────── */
.stat-cards-wrap { perspective: 1400px; }

.stat-card-3d {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: default;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(.25,.8,.25,1), box-shadow 0.45s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1);
  animation: statCardIn 0.55s ease both;
}

.stat-card-3d:hover {
  transform: rotateY(10deg) rotateX(-5deg) translateY(-10px) scale(1.03);
  box-shadow: -12px 20px 50px rgba(0,0,0,.22), 0 4px 8px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Card colour themes */
.stat-card-papers   { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
.stat-card-active   { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.stat-card-approved { background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%); }
.stat-card-pending  { background: linear-gradient(135deg, #dc2626 0%, #f87171 100%); }
.stat-card-teachers { background: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%); }

/* Shine sweep on hover */
.stat-card-3d::before {
  content: '';
  position: absolute;
  top: -50%; left: -80%;
  width: 55%; height: 200%;
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,0) 70%
  );
  transform: skewX(-15deg);
  pointer-events: none;
  transition: left .6s ease;
  z-index: 2;
}
.stat-card-3d:hover::before { left: 130%; }

/* Background glow orb */
.stat-card-3d::after {
  content: '';
  position: absolute;
  bottom: -35px; right: -35px;
  width: 130px; height: 130px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  pointer-events: none;
}

.stat-3d-body {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
}

.stat-3d-info { flex: 1; }

.stat-3d-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.78);
  margin-bottom: .35rem;
}

.stat-3d-value {
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
  font-variant-numeric: tabular-nums;
}

.stat-3d-icon {
  width: 58px; height: 58px;
  background: rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  font-size: 1.45rem;
  color: #fff;
  transition: transform .4s ease, background .4s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25);
}
.stat-card-3d:hover .stat-3d-icon {
  transform: scale(1.2) rotate(-10deg);
  background: rgba(255,255,255,.3);
}

/* Accent bar at card bottom */
.stat-3d-bar {
  height: 5px;
  background: rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
}
.stat-3d-bar-fill {
  height: 100%;
  background: rgba(255,255,255,.6);
  border-radius: 3px;
  width: 0;
  animation: barGrow3d 1.4s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: .5s;
}
@keyframes barGrow3d {
  from { width: 0; }
  to   { width: var(--bar-w, 70%); }
}

@keyframes statCardIn {
  from { opacity: 0; transform: translateY(32px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animated floating particles on cards */
.stat-3d-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.stat-3d-particles span {
  position: absolute;
  display: block;
  width: 6px; height: 6px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  animation: floatParticle 4s ease-in-out infinite;
}
.stat-3d-particles span:nth-child(1) { left:15%; top:20%; animation-delay:0s;   animation-duration:4.2s; }
.stat-3d-particles span:nth-child(2) { left:75%; top:60%; animation-delay:.8s;  animation-duration:3.8s; width:4px; height:4px; }
.stat-3d-particles span:nth-child(3) { left:45%; top:75%; animation-delay:1.5s; animation-duration:5s;   width:5px; height:5px; }
@keyframes floatParticle {
  0%,100% { transform: translateY(0) scale(1);   opacity:.5; }
  50%      { transform: translateY(-14px) scale(1.2); opacity:1; }
}

/* ── Responsive: Mobile table → card ─────────────────────────── */
@media (max-width: 767.98px) {
  .main-content { padding-top: 0; }
  .upload-dropzone { padding: 1.5rem 1rem; }
  .subject-grid { max-height: 160px; }

  /* Hide optional / decorative content on mobile */
  .hide-on-mobile,
  .mobile-hidden,
  .mobile-only-hide {
    display: none !important;
    visibility: hidden !important;
  }

  /* Slim navbar on mobile */
  .app-navbar .navbar-brand,
  .admin-navbar .navbar-brand { font-size: .9rem; }
}

/* ── Scrollable subject grid ──────────────────────────────────── */
.subject-grid::-webkit-scrollbar { width: 5px; }
.subject-grid::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 10px; }

/* ── SweetAlert2 customisation ─────────────────────────────────── */

/* ── Teacher Dashboard Accents & Helpers ───────────────────────── */
.bg-primary-subtle { background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(59,130,246,0.08)); color: var(--tom-primary-dark) !important; }
.bg-success-subtle { background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(132,204,22,0.04)); color: var(--tom-success) !important; }
.bg-warning-subtle { background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(217,119,6,0.04)); color: var(--tom-warning) !important; }
.bg-danger-subtle  { background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.04)); color: #dc2626 !important; }
.bg-info-subtle   { background: linear-gradient(135deg, rgba(56,189,248,0.10), rgba(16,185,129,0.04)); color: #0ea5a4 !important; }
.bg-secondary-subtle { background: #f1f5f9; color: #6b7280 !important; }

.stat-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.btn-gradient {
  background: linear-gradient(90deg,#06b6d4,#7c3aed);
  color: #fff; border: 0; padding: .45rem .85rem;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(124,58,237,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-gradient:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(124,58,237,.18); opacity: .98; }

.teacher-hero {
  background: linear-gradient(90deg, rgba(6,182,212,0.06), rgba(124,58,237,0.04));
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  border: 1px solid rgba(0,0,0,0.03);
}

/* Keep mobile spacing tidy for hero block */
@media (max-width: 767.98px) {
  .teacher-hero { padding: .65rem; text-align: center; }
  .teacher-hero .btn { margin-top: .5rem; }
}

/* ── Image LQIP / Zoom Helpers ───────────────────────────── */
.lqip-container { display: inline-block; overflow: hidden; border-radius: 50%; }
.lqip-placeholder { filter: blur(.6px) saturate(.96); transition: filter .2s ease, opacity .3s ease; }
.lqip-loaded { filter: none; }
img.img-zoom, .img-zoom {
  display: inline-block;
  cursor: zoom-in;
  transition: transform .22s ease, box-shadow .22s ease;
  transform-origin: center center;
  will-change: transform;
}
img.img-zoom:hover, .img-zoom:hover {
  transform: scale(1.25) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
  z-index: 1;
}


.swal2-popup { border-radius: var(--radius-lg) !important; font-family: inherit !important; }
.swal2-confirm { border-radius: var(--radius-sm) !important; }

/* ── AOS overrides ────────────────────────────────────────────── */
[data-aos] { transition-duration: 500ms; }

/* ── Fade-in utility ─────────────────────────────────────────── */
.fade-in { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════════════════════════════
   ATTRACTIVE ADMIN TABLES
   ════════════════════════════════════════════════════════════════ */

/* ── Section Card wrapper ──────────────────────────────────────── */
.admin-section-card {
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15,23,42,.10), 0 1px 4px rgba(15,23,42,.06) !important;
  transition: box-shadow .3s ease;
}
.admin-section-card:hover {
  box-shadow: 0 8px 40px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.07) !important;
}

/* ── Gradient card headers ─────────────────────────────────────── */
.admin-card-header {
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}
.admin-card-header::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  pointer-events: none;
}

/* Green header – New Submissions */
.admin-ch-green  { background: linear-gradient(120deg, #059669 0%, #10b981 100%); }
/* Red/amber header – Pending Requests */
.admin-ch-red    { background: linear-gradient(120deg, #b91c1c 0%, #f87171 100%); }
/* Blue header – All Submissions */
.admin-ch-blue   { background: linear-gradient(120deg, #1d4ed8 0%, #60a5fa 100%); }

.admin-card-header .ch-title {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.admin-card-header .ch-title i { font-size: 1rem; opacity: .9; }

.admin-card-header .ch-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: #fff;
  letter-spacing: .03em;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.25);
}

/* ── Table base ────────────────────────────────────────────────── */
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .845rem;
}

/* ── Thead ─────────────────────────────────────────────────────── */
.admin-table thead tr {
  background: #f8fafc;
}
.admin-table thead th {
  padding: .75rem 1rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #64748b;
  border-bottom: 2px solid #e8edf2;
  white-space: nowrap;
  position: relative;
}
.admin-table thead th::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--tom-primary);
  transition: width .35s ease;
}
.admin-table thead th:hover::after { width: 100%; }

/* ── Tbody rows ────────────────────────────────────────────────── */
.admin-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  animation: rowSlideIn .4s ease both;
}
.admin-table tbody tr:last-child { border-bottom: 0; }

.admin-table tbody tr:hover {
  background: linear-gradient(90deg, #f0f7ff 0%, #f8f5ff 100%);
  transform: translateX(4px);
  box-shadow: inset 3px 0 0 var(--tom-primary);
}

/* Stagger each row slightly */
.admin-table tbody tr:nth-child(1)  { animation-delay: .03s; }
.admin-table tbody tr:nth-child(2)  { animation-delay: .06s; }
.admin-table tbody tr:nth-child(3)  { animation-delay: .09s; }
.admin-table tbody tr:nth-child(4)  { animation-delay: .12s; }
.admin-table tbody tr:nth-child(5)  { animation-delay: .15s; }
.admin-table tbody tr:nth-child(6)  { animation-delay: .18s; }
.admin-table tbody tr:nth-child(7)  { animation-delay: .21s; }
.admin-table tbody tr:nth-child(8)  { animation-delay: .24s; }
.admin-table tbody tr:nth-child(9)  { animation-delay: .27s; }
.admin-table tbody tr:nth-child(10) { animation-delay: .30s; }

@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.admin-table td {
  padding: .75rem 1rem;
  vertical-align: middle;
  color: #334155;
}

/* ── Teacher avatar cell ───────────────────────────────────────── */
.teacher-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tom-primary), var(--tom-secondary));
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(79,70,229,.3);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Row actions ───────────────────────────────────────────────── */
.admin-table .row-actions .btn {
  border-radius: var(--radius-sm);
  font-size: .78rem;
  padding: .3rem .65rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.admin-table .row-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* ── Status badges in tables ──────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.7); }
}

/* ── Empty state ───────────────────────────────────────────────── */
.admin-empty-state {
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: #94a3b8;
}
.admin-empty-state .empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.75rem;
}
.admin-empty-state p { font-size: .875rem; margin: 0; }

/* ── Filter bar ────────────────────────────────────────────────── */
.admin-filter-bar {
  background: #f8fafc;
  border-bottom: 1px solid #e8edf2 !important;
  padding: 1rem 1.25rem !important;
}

/* ── Pagination enhancements ───────────────────────────────────── */
.admin-pagination {
  padding: .85rem 1.25rem;
  background: #f8fafc;
  border-top: 1px solid #e8edf2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-pagination .page-link {
  border: 1px solid #e2e8f0 !important;
  color: #475569;
  font-weight: 600;
  font-size: .8rem;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.admin-pagination .page-link:hover {
  background: var(--tom-primary);
  color: #fff;
  border-color: var(--tom-primary) !important;
  transform: translateY(-2px);
}
.admin-pagination .page-item.active .page-link {
  background: var(--tom-primary) !important;
  border-color: var(--tom-primary) !important;
  box-shadow: 0 4px 12px rgba(79,70,229,.3);
}

/* ── Scrollable table wrapper ──────────────────────────────────── */
.admin-table-scroll::-webkit-scrollbar { height: 5px; }
.admin-table-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
.admin-table-scroll::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 10px; }

.row-removing {
  animation: rowFadeOut .25s ease forwards;
}
@keyframes rowFadeOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}

/* ── Input focus glow ─────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--tom-primary);
  box-shadow: 0 0 0 .2rem rgba(79,70,229,.15);
}

/* ── Default avatar fallback ──────────────────────────────────── */
img[src*="default-avatar"] {
  background: linear-gradient(135deg, #c7d2fe, #ede9fe);
  object-fit: cover;
}

/* ── File Type Cards (upload step 1) ─────────────────────────── */
.file-type-card {
  cursor: pointer;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
  padding: 1.75rem 2rem;
  text-align: center;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
  min-width: 170px;
  flex: 1;
  max-width: 240px;
  background: #ffffff;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.file-type-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 35%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.file-type-card::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  pointer-events: none;
  opacity: 0;
}
.file-type-card:hover {
  border-color: var(--tom-primary);
  box-shadow: 0 14px 32px rgba(79,70,229,.12);
  transform: translateY(-4px) scale(1.01);
}
.file-type-card:hover::before { opacity: 1; }
.file-type-card.ft-selected {
  border-color: var(--tom-primary);
  background: linear-gradient(145deg, #eef2ff 0%, #f8fbff 100%);
  box-shadow: 0 18px 36px rgba(79,70,229,.18);
}
.file-type-card.ft-selected .ft-label { color: var(--tom-primary); }
#card-word.ft-selected {
  border-color: #4f46e5;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.95), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 92% 96%, rgba(129,140,248,.32), rgba(129,140,248,0) 50%),
    linear-gradient(145deg, #eef2ff 0%, #f8fbff 100%);
  box-shadow: 0 18px 36px rgba(79,70,229,.18);
}
#card-word.ft-selected::after {
  border-color: rgba(79,70,229,.42);
  animation: fileTypePulse 1.9s ease-out infinite;
}
#card-pdf.ft-selected {
  border-color: #dc2626;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.96), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 92% 96%, rgba(248,113,113,.32), rgba(248,113,113,0) 52%),
    linear-gradient(145deg, #fef2f2 0%, #fff7ed 100%);
  box-shadow: 0 18px 36px rgba(220,38,38,.18);
}
#card-pdf.ft-selected .ft-label,
#card-pdf.ft-selected .ft-sub,
#card-pdf.ft-selected .ft-desc { color: #b91c1c; }
#card-pdf.ft-selected .ft-check-indicator {
  background: #dc2626;
  border-color: #dc2626;
}
#card-pdf.ft-selected::after {
  border-color: rgba(220,38,38,.42);
  animation: fileTypePulse 1.9s ease-out infinite;
}
.ft-face  { display: flex; flex-direction: column; align-items: center; }
.ft-label { font-size: 1.02rem; font-weight: 700; }
.ft-sub   { font-size: .84rem; font-weight: 600; }
.ft-desc  { font-size: .78rem; line-height: 1.5; color: #475569; margin-top: .5rem; }

/* Checkbox tick indicator inside card */
.ft-check-indicator {
  width: 26px; height: 26px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.file-type-card.ft-selected .ft-check-indicator {
  background: var(--tom-primary);
  border-color: var(--tom-primary);
  color: #fff;
  transform: scale(1.1);
  animation: cardPop .22s ease;
}
@keyframes cardPop {
  0%   { transform: scale(0.9); }
  70%  { transform: scale(1.14); }
  100% { transform: scale(1.1); }
}
@keyframes fileTypePulse {
  0%   { opacity: .6; transform: scale(.96); }
  70%  { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* ── Fullscreen Backup Loader ────────────────────────────────── */
#backup-fullscreen-loader {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  backdrop-filter: blur(8px);
}
#backup-fullscreen-loader.active {
  opacity: 1;
  visibility: visible;
}
.backup-spinner {
  width: 90px;
  height: 90px;
  border: 7px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--tom-primary);
  border-right-color: var(--tom-primary);
  border-radius: 50%;
  animation: backupSpin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  margin-bottom: 24px;
}
@keyframes backupSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.backup-loader-text {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  animation: pulseText 1.5s ease-in-out infinite;
  text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.backup-loader-subtext {
  font-size: 0.95rem;
  color: #94a3b8;
  margin-top: 8px;
  font-weight: 500;
}
@keyframes pulseText {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Premium CSS Sand Timer ──────────────────────────────────────── */
.css-sand-timer {
  position: relative;
  width: 90px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: timerFlip 4s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.5));
  transform: scale(1.5);
}
.glass-top, .glass-bottom {
  width: 90px;
  height: 80px;
  background: rgba(255, 255, 255, 0.05);
  border: 4px solid rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(2px);
}
.glass-top {
  border-radius: 10px 10px 50px 50px;
  border-bottom: none;
}
.glass-bottom {
  border-radius: 50px 50px 10px 10px;
  border-top: none;
}
/* A small joint in the middle */
.timer-joint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  z-index: 3;
}
.sand-top {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fb923c, #ea580c);
  animation: sandEmpty 4s linear infinite;
  transform-origin: bottom center;
}
.sand-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(135deg, #fb923c, #ea580c);
  animation: sandFill 4s linear infinite;
}
.sand-stream {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background: #fb923c;
  z-index: 2;
  animation: sandDrop 4s linear infinite;
}

@keyframes sandEmpty {
  0%   { transform: scaleY(1); }
  85%  { transform: scaleY(0); }
  100% { transform: scaleY(0); }
}
@keyframes sandFill {
  0%   { height: 0%; }
  10%  { height: 0%; }
  95%  { height: 100%; }
  100% { height: 100%; }
}
@keyframes sandDrop {
  0%   { top: 50%; height: 0; }
  10%  { top: 50%; height: 80px; }
  85%  { top: 50%; height: 80px; }
  95%  { top: calc(50% + 80px); height: 0; }
  100% { top: calc(50% + 80px); height: 0; }
}
@keyframes timerFlip {
  0%, 95% { transform: rotate(0deg); }
  100%    { transform: rotate(180deg); }
}