/* ==========================================================================
   KURO FANGS — COMPONENTS (ACADEMIA DESIGN SYSTEM)
   Academia Subject Cards with Progress Bars, Doctor Badges & Content Metrics
   Shimmer Skeleton Loaders & Multi-Option Filter Tabs Bar
   ========================================================================== */

/* ==========================================================================
   FACULTY NEWS & ANNOUNCEMENTS + NEXT EXAM COUNTDOWN WIDGET
   ========================================================================== */
.faculty-overview-section {
  margin-bottom: 36px;
}

.faculty-overview-grid {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 1040px) {
  .faculty-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* Faculty Section Header */
.faculty-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-burgundy);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.section-icon-badge i,
.section-icon-badge svg {
  width: 20px;
  height: 20px;
}

.section-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.section-subheading {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 2px 0 0;
}

/* Faculty News List & Cards */
.faculty-news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faculty-news-card {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.faculty-news-card:hover {
  border-color: #CBD5E1;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.news-card-media {
  width: 120px;
  min-height: 95px;
  position: relative;
  overflow: hidden;
  background: #1E1E2D;
  flex-shrink: 0;
}

.news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.faculty-news-card:hover .news-card-img {
  transform: scale(1.06);
}

.news-card-content {
  padding: 12px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.news-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.725rem;
}

.news-badge {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #E2E8F0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.news-badge.official {
  background: #FFF1F2;
  color: #BE123C;
  border-color: #FECDD3;
}

.news-badge.alert {
  background: #FEF3C7;
  color: #B45309;
  border-color: #FDE68A;
}

.news-badge.exam {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.news-dept {
  color: var(--text-secondary);
  font-weight: 600;
}

.news-date {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.news-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-summary {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .faculty-news-card {
    flex-direction: column;
  }
  .news-card-media {
    width: 100%;
    height: 110px;
  }
  .news-title {
    white-space: normal;
  }
}

/* ==========================================================================
   NEXT EXAM COUNTDOWN WIDGET
   ========================================================================== */
.next-exam-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--brand-burgundy);
}

.next-exam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.next-exam-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.next-exam-title-wrap h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.next-exam-badge {
  background: #FFF1F2;
  color: #BE123C;
  border: 1px solid #FECDD3;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.next-exam-body {
  margin-bottom: 14px;
}

.next-exam-subject-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.next-exam-subject-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-burgundy);
  margin: 0;
  line-height: 1.3;
}

.next-exam-code {
  background: rgba(15, 23, 42, 0.75);
  color: #FFFFFF;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.next-exam-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.next-exam-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.next-exam-meta-item i,
.next-exam-meta-item svg {
  width: 14px;
  height: 14px;
  color: var(--brand-burgundy);
  flex-shrink: 0;
}

/* Countdown Grid */
.countdown-wrap {
  margin-top: 14px;
}

.countdown-label-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.countdown-box {
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 4px 8px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.countdown-num {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: block;
}

.countdown-unit {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: block;
  margin-top: 2px;
}

/* View Full Schedule Button */
.btn-exam-schedule {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 8px;
  background: var(--brand-burgundy);
  color: #FFFFFF;
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 16px;
  box-shadow: 0 4px 14px rgba(136, 19, 55, 0.22);
}

.btn-exam-schedule:hover {
  background: var(--brand-burgundy-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(136, 19, 55, 0.32);
}

/* Modal Popup for Full News Notice */
.news-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.news-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.news-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  max-width: 580px;
  width: 100%;
  padding: 28px;
  box-shadow: var(--shadow-modal);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s ease;
}

.news-modal-overlay.open .news-modal-box {
  transform: scale(1);
}

.news-modal-close {
  position: absolute;
  top: 16px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
}

html[dir="ltr"] .news-modal-close { right: 16px; }
html[dir="rtl"] .news-modal-close { left: 16px; }

/* Dark mode adjustments */
[data-theme="dark"] .section-icon-badge {
  background: #252538;
  border-color: #35354E;
}

[data-theme="dark"] .news-badge {
  background: #252538;
  color: #CBD5E1;
  border-color: #35354E;
}

[data-theme="dark"] .news-badge.official {
  background: #3B121E;
  color: #FDA4AF;
  border-color: #881337;
}

[data-theme="dark"] .news-badge.alert {
  background: #3A2E12;
  color: #FDE047;
  border-color: #854D0E;
}

[data-theme="dark"] .news-badge.exam {
  background: #172554;
  color: #93C5FD;
  border-color: #1E40AF;
}

[data-theme="dark"] .next-exam-widget {
  background: #1E1E2D;
  border-color: #2F2F45;
}

[data-theme="dark"] .next-exam-meta {
  background: #252538;
  border-color: #35354E;
}

[data-theme="dark"] .countdown-box {
  background: #1B1B28;
  border-color: #2D2D3F;
}

[data-theme="dark"] .news-modal-box {
  background: #1E1E2D;
  border-color: #2F2F45;
}

/* Hero Banner Bar */
.subjects-hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.hero-text-wrap h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0;
  letter-spacing: -0.02em;
}

.hero-text-wrap p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   HERO MASCOT COMPACT WIDGET (Strict In-Flow, max-width: 180px, No Absolute/Fixed)
   ========================================================================== */
.hero-mascot-compact-card,
.hero-mascot-widget,
.hero-mascot,
.mascot-widget {
  position: static !important;
  max-width: 180px !important;
  width: auto !important;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  flex-shrink: 0;
  margin: 0;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

.hero-mascot-compact-card:hover,
.hero-mascot-widget:hover {
  transform: translateY(-2px);
  border-color: #BE123C;
  box-shadow: 0 4px 12px rgba(190, 18, 60, 0.15);
}

.hero-mascot-avatar-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #BE123C;
  flex-shrink: 0;
  background: var(--bg-surface);
}

.hero-mascot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-mascot-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.hero-mascot-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--brand-burgundy, #BE123C);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.hero-mascot-name {
  font-size: 0.775rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Academia Quick Tabs Bar */
.hero-filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 4px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.filter-tab-btn {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filter-tab-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-surface-subtle);
}

.filter-tab-btn.active {
  background: var(--brand-burgundy);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(136, 19, 55, 0.25);
}

/* ==========================================================================
   1. ACADEMIA 12-SUBJECT SHOWCASE GRID
   ========================================================================== */
.subjects-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 1200px) {
  .subjects-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .subjects-showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* Academia Subject Card */
.subject-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.subject-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-burgundy);
  box-shadow: var(--shadow-card-hover);
}

/* 130px Subject Cover Header & Banner with Shimmer Skeleton Loader */
.subject-cover-wrap,
.card-banner {
  position: relative;
  width: 100%;
  height: 130px;
  overflow: hidden;
  background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);
  background-size: 200% 100%;
  animation: coverShimmer 1.5s infinite linear;
  border-top-left-radius: calc(var(--radius-card) - 1px);
  border-top-right-radius: calc(var(--radius-card) - 1px);
}

[data-theme="dark"] .subject-cover-wrap,
[data-theme="dark"] .card-banner {
  background: linear-gradient(90deg, #1E1E2D 0%, #2B2B40 50%, #1E1E2D 100%);
  background-size: 200% 100%;
}

@keyframes coverShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.subject-card-cover,
.subject-cover-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 300ms ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1), filter 350ms ease;
}

/* Smooth Fade-in once loaded */
.subject-card-cover.loaded,
.subject-cover-img.loaded {
  opacity: 1 !important;
  visibility: visible !important;
}

/* تأثير التكبير الناعم للصورة عند وضع الماوس دون اختفائها */
.subject-card:hover .subject-card-cover,
.subject-card:hover .subject-cover-img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

.subject-card:hover .subject-card-cover.loaded,
.subject-card:hover .subject-cover-img.loaded {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Dark vignette overlay - no white overlay covering the photo */
.subject-cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Academia Glassmorphism Code Badge */
.subject-code-badge {
  position: absolute;
  top: 12px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.03em;
  line-height: 1.2;
}

html[dir="ltr"] .subject-code-badge {
  left: 14px;
}
html[dir="rtl"] .subject-code-badge {
  right: 14px;
}

/* Popular Tag — Hidden */
.subject-popular-tag {
  display: none !important;
}

/* Card Body — Hover background or gradients apply ONLY to the lower body */
.subject-card-body,
.card-body {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  background: var(--bg-card);
  transition: background-color var(--transition-base);
}

.subject-card:hover .subject-card-body,
.subject-card:hover .card-body {
  background: var(--bg-card);
}

.subject-title-primary {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.35;
}

.subject-title-sub {
  font-size: 0.775rem;
  color: var(--brand-burgundy);
  font-weight: 600;
  margin-bottom: 10px;
}

/* Doctor Badge with Icon */
.card-doctor-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  width: fit-content;
}

.card-doctor-badge i,
.card-doctor-badge svg {
  width: 14px;
  height: 14px;
  color: var(--brand-burgundy);
}

/* Academia Progress Bar */
.card-progress-wrap {
  margin-bottom: 12px;
}

.card-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.card-progress-percent {
  color: #10B981;
  font-weight: 700;
  font-size: 0.775rem;
}

.card-progress-track {
  width: 100%;
  height: 6px;
  background: var(--progress-track);
  border-radius: 6px;
  overflow: hidden;
}

.card-progress-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #10B981 0%, #059669 100%);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Content Breakdown Badges — Calming Light Gray Zero Counters */
.card-stats-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.card-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.725rem;
  font-weight: 500;
  color: #64748B;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 3px 9px;
  border-radius: 6px;
  transition: all var(--transition-fast);
}

.card-stat-pill i,
.card-stat-pill svg {
  width: 12px;
  height: 12px;
  color: #94A3B8;
  flex-shrink: 0;
}

[data-theme="dark"] .card-stat-pill {
  background-color: #212134;
  border-color: #2F2F45;
  color: #9899AC;
}

[data-theme="dark"] .card-stat-pill i,
[data-theme="dark"] .card-stat-pill svg {
  color: #6B6C80;
}

/* Quick Action Button ("تصفح المحتوى ⬅️") — Unified Royal Academic Style */
.btn-explore-subject {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  background-color: #F8FAFC;
  color: #881337;
  border: 1px solid #E2E8F0;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.btn-explore-subject:hover {
  background-color: #881337;
  color: #FFFFFF;
  border-color: #881337;
  box-shadow: 0 4px 14px rgba(136, 19, 55, 0.22);
  transform: translateY(-1px);
}

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

[data-theme="dark"] .btn-explore-subject {
  background-color: #252538;
  color: #FDA4AF;
  border-color: #35354E;
}

[data-theme="dark"] .btn-explore-subject:hover {
  background-color: #BE123C;
  color: #FFFFFF;
  border-color: #BE123C;
  box-shadow: 0 4px 14px rgba(190, 18, 60, 0.35);
}

/* ==========================================================================
   ACADEMIA SKELETON LOADERS (Zero Layout Shift)
   ========================================================================== */
.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  pointer-events: none;
}

.skeleton-banner {
  height: 135px;
  width: 100%;
}

.skeleton-body {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-line {
  height: 14px;
  border-radius: 6px;
}

.skeleton-line.title {
  height: 20px;
  width: 70%;
}

.skeleton-line.sub {
  width: 45%;
  height: 12px;
}

.skeleton-line.badge {
  width: 40%;
  height: 24px;
  border-radius: var(--radius-pill);
}

.skeleton-line.progress {
  height: 6px;
  width: 100%;
  margin-top: 4px;
}

.skeleton-line.stats {
  height: 22px;
  width: 80%;
  border-radius: 6px;
}

.skeleton-line.btn {
  height: 38px;
  width: 100%;
  border-radius: 8px;
  margin-top: 4px;
}

.skeleton-shimmer {
  background: linear-gradient(90deg, rgba(228, 230, 239, 0.7) 25%, rgba(245, 248, 250, 0.95) 50%, rgba(228, 230, 239, 0.7) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}

[data-theme="dark"] .skeleton-shimmer {
  background: linear-gradient(90deg, rgba(43, 43, 64, 0.7) 25%, rgba(30, 30, 45, 0.95) 50%, rgba(43, 43, 64, 0.7) 75%);
  background-size: 200% 100%;
}

@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ==========================================================================
   2. THE FLOATING INTERACTIVE SUBJECT MODAL (Modal-First UX)
   ========================================================================== */
.subject-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.subject-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.subject-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.94) translateY(10px);
  transition: transform var(--transition-smooth);
}

.subject-modal-backdrop.active .subject-modal-box {
  transform: scale(1) translateY(0);
}

/* Modal Header */
.modal-header {
  padding: 22px 28px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-surface);
}

.modal-header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.modal-subject-banner-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--brand-burgundy-border);
  flex-shrink: 0;
  background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);
  background-size: 200% 100%;
  animation: coverShimmer 1.5s infinite linear;
}

[data-theme="dark"] .modal-subject-banner-thumb {
  background: linear-gradient(90deg, #1E1E2D 0%, #2A2A3E 50%, #1E1E2D 100%);
  background-size: 200% 100%;
}

.modal-subject-banner-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 300ms ease;
}

.modal-subject-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--brand-burgundy-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border: 1px solid var(--brand-burgundy-border);
  flex-shrink: 0;
}

.modal-title-wrap h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.modal-title-wrap p {
  font-size: 0.8rem;
  color: var(--brand-burgundy);
  font-family: var(--font-mono);
  font-weight: 700;
}

.modal-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 1.1rem;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  background: var(--brand-burgundy-light);
  color: var(--brand-burgundy);
  transform: rotate(90deg);
}

/* Modal Scrollable Body */
.modal-body {
  padding: 26px 28px;
  overflow-y: auto;
  flex: 1;
}

.modal-prompt-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 8 Categories Grid */
.modal-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.modal-category-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.modal-category-card:hover {
  border-color: var(--brand-burgundy-border);
  background: var(--brand-burgundy-surface);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.category-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.category-icon-pill {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  background: var(--brand-burgundy-light);
}

.category-text-wrap h3 {
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.category-text-wrap p {
  font-size: 0.775rem;
  color: var(--text-secondary);
}

.category-arrow-icon {
  color: var(--text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

html[dir="rtl"] .modal-category-card:hover .category-arrow-icon {
  color: var(--brand-burgundy);
  transform: translateX(-4px);
}
html[dir="ltr"] .modal-category-card:hover .category-arrow-icon {
  color: var(--brand-burgundy);
  transform: translateX(4px);
}

/* ==========================================================================
   3. IN-MODAL EXPLORER (Sub-View for selected Category)
   ========================================================================== */
.modal-explorer-view {
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.explorer-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.btn-back-categories {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-burgundy);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--brand-burgundy-light);
}

.btn-back-categories:hover {
  background: rgba(136, 19, 55, 0.22);
}

.explorer-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.explorer-item-row {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

.explorer-item-row:hover {
  border-color: var(--brand-burgundy-border);
  background: var(--brand-burgundy-surface);
}

.explorer-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.explorer-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--brand-burgundy-light);
  color: var(--brand-burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.explorer-item-icon svg {
  width: 18px;
  height: 18px;
}

.explorer-item-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.explorer-item-meta {
  font-size: 0.775rem;
  color: var(--text-muted);
}

.explorer-item-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .subjects-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .subjects-showcase-grid {
    grid-template-columns: 1fr;
  }
  .modal-categories-grid {
    grid-template-columns: 1fr;
  }
  .modal-header {
    padding: 16px;
  }
  .modal-body {
    padding: 16px;
  }
}

/* ==========================================================================
   4. TOAST NOTIFICATIONS SYSTEM
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 90vw;
}

html[dir="rtl"] .toast-container {
  right: auto;
  left: 24px;
}

.toast {
  pointer-events: auto;
  background: #FFFFFF;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid #10B981;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 0.875rem;
  animation: toastIn 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
  min-width: 260px;
  max-width: 420px;
}

html[dir="rtl"] .toast {
  border-left: 1px solid var(--border-subtle);
  border-right: 4px solid #10B981;
}

[data-theme="dark"] .toast {
  background: #161B22;
  color: #F0F6FC;
  border-color: #30363D;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
}

.toast.toast-info {
  border-left-color: var(--brand-burgundy);
}
html[dir="rtl"] .toast.toast-info {
  border-right-color: var(--brand-burgundy);
}

.toast.toast-warning {
  border-left-color: #F59E0B;
}
html[dir="rtl"] .toast.toast-warning {
  border-right-color: #F59E0B;
}

.toast.toast-error {
  border-left-color: #EF4444;
}
html[dir="rtl"] .toast.toast-error {
  border-right-color: #EF4444;
}

.toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.14);
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.toast.toast-info .toast-icon {
  background: rgba(136, 19, 55, 0.14);
  color: var(--brand-burgundy);
}

.toast.toast-warning .toast-icon {
  background: rgba(245, 158, 11, 0.16);
  color: #F59E0B;
}

.toast.toast-error .toast-icon {
  background: rgba(239, 68, 68, 0.16);
  color: #EF4444;
}

.toast-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}

.toast-message {
  line-height: 1.4;
}

.toast-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(136, 19, 55, 0.12);
  color: var(--brand-burgundy);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
  margin-top: 3px;
}

[data-theme="dark"] .toast-points-badge {
  background: rgba(251, 113, 133, 0.18);
  color: #FB7185;
}

.toast-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  margin-left: auto;
  transition: color 0.15s ease;
}

html[dir="rtl"] .toast-close-btn {
  margin-left: 0;
  margin-right: auto;
}

.toast-close-btn:hover {
  color: var(--text-primary);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast.toast-out {
  opacity: 0;
  transform: translateY(12px) scale(0.95);
}

/* ==========================================================================
   5. OFFICIAL EXAM SCHEDULE SYSTEM (ACADEMIA STYLE)
   ========================================================================== */
.exams-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.exams-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exams-view-toggle {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 3px;
  border-radius: var(--radius-pill);
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-toggle-btn svg {
  width: 14px;
  height: 14px;
}

.view-toggle-btn.active {
  background: var(--brand-burgundy);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(136, 19, 55, 0.2);
}

.btn-print-schedule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.825rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.btn-print-schedule svg {
  width: 16px;
  height: 16px;
}

/* Schedule Tabs Bar */
.schedule-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.schedule-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.schedule-tab-btn svg {
  width: 16px;
  height: 16px;
}

.schedule-tab-btn:hover {
  border-color: var(--brand-burgundy-border);
  color: var(--text-primary);
  background: var(--bg-surface-subtle);
}

.schedule-tab-btn.active {
  background: var(--brand-burgundy);
  color: #FFFFFF;
  border-color: var(--brand-burgundy);
  box-shadow: 0 4px 12px rgba(136, 19, 55, 0.25);
}

.tab-count-pill {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.08);
  font-weight: 800;
}

.schedule-tab-btn.active .tab-count-pill {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.badge-coming-soon {
  font-size: 0.675rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: #FEF3C7;
  color: #92400E;
  font-weight: 800;
  border: 1px solid #FCD34D;
}

/* Exams Table Card */
.exams-table-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-card);
}

.table-card-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #072B27 0%, #0B3B36 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.final-header {
  background: linear-gradient(135deg, #3B0818 0%, #540B22 100%);
}

.table-card-header h2 {
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 3px;
}

.table-card-header p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
}

.print-watermark {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

/* Academia Exam Table */
.academia-exam-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 0.875rem;
}

html[dir="ltr"] .academia-exam-table {
  text-align: left;
}

.academia-exam-table thead tr {
  background: #0B3B36;
  color: #FFFFFF;
}

.academia-exam-table.final-table thead tr {
  background: #540B22;
}

.academia-exam-table th {
  padding: 13px 18px;
  font-weight: 800;
  font-size: 0.825rem;
  letter-spacing: 0.01em;
  border: none;
}

.academia-exam-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--transition-fast);
}

.academia-exam-table tbody tr:last-child {
  border-bottom: none;
}

.academia-exam-table tbody tr:hover {
  background-color: rgba(11, 59, 54, 0.03);
}

.academia-exam-table tbody td {
  padding: 14px 18px;
  vertical-align: middle;
}

/* Badges inside Exam Table */
.exam-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.825rem;
  color: #065F46;
  background: #ECFDF5;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #A7F3D0;
}

.exam-date-badge.final-badge {
  color: #881337;
  background: #FFF1F2;
  border-color: #FECDD3;
}

.exam-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-subtle);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}

.course-code-pill {
  display: inline-block;
  font-weight: 800;
  font-size: 0.775rem;
  color: #1E293B;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  padding: 3px 8px;
  border-radius: 6px;
}

[data-theme="dark"] .course-code-pill {
  background: #202030;
  color: #E2E8F0;
  border-color: #33334D;
}

.final-code {
  color: #9F1239;
  background: #FFE4E6;
  border-color: #FDA4AF;
}

.subject-name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subject-primary-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.subject-sub-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Countdown Pill */
.countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.countdown-pill.urgent {
  background: #FEF3C7;
  color: #B45309;
  border-color: #FDE68A;
  animation: pulseUrgent 2s infinite;
}

.countdown-pill.today {
  background: #FEE2E2;
  color: #B91C1C;
  border-color: #FCA5A5;
}

@keyframes pulseUrgent {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* Timeline Cards View */
.exams-schedule-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #072B27 0%, #0B3B36 100%);
  color: #FFFFFF;
  padding: 18px 24px;
  border-radius: var(--radius-card);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.exams-schedule-banner.final-banner {
  background: linear-gradient(135deg, #3B0818 0%, #540B22 100%);
}

.banner-meta h2 {
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 3px;
}

.banner-meta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
}

.exams-timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.exam-timeline-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  transition: all var(--transition-fast);
}

.exam-timeline-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-burgundy);
  box-shadow: var(--shadow-card-hover);
}

.card-timeline-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.timeline-day-date {
  display: flex;
  flex-direction: column;
}

.timeline-day {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.timeline-date {
  font-size: 0.775rem;
  font-family: var(--font-mono, monospace);
  color: var(--brand-burgundy);
  font-weight: 700;
}

.card-timeline-body {
  margin-bottom: 14px;
}

.timeline-subject-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 6px 0 3px;
  line-height: 1.35;
}

.timeline-subject-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.card-timeline-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem;
}

.timeline-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-weight: 600;
}

.timeline-hall {
  color: var(--text-muted);
}

/* Practical Coming Soon Card */
.practical-coming-soon-card {
  padding: 50px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: 20px auto;
}

.coming-soon-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--brand-burgundy-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.practical-coming-soon-card h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.coming-soon-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 16px;
}

.coming-soon-badges {
  display: flex;
  gap: 8px;
}

/* ==========================================================================
   PRINT MEDIA RULES (One-Click Clean Print & PDF Export)
   ========================================================================== */
@media print {
  /* إخفاء الإشعارات العائمة نهائياً في الطباعة والـ PDF */
  .toast,
  .toast-container,
  #toast-container,
  .notification-toast,
  .alert,
  .sidebar,
  .app-sidebar,
  .topbar,
  .site-header,
  .app-header,
  .bottom-nav,
  .btn-print,
  .btn-print-schedule,
  .exams-header-actions,
  .schedule-tabs-bar,
  .no-print,
  button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* التأكد من عرض الجدول كاملاً بنقاء وبدون عوائق */
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .app-main-wrapper,
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .exams-table-card {
    box-shadow: none !important;
    border: 1px solid #CCCCCC !important;
    background: #FFFFFF !important;
  }

  .table-card-header {
    background: #0B3B36 !important;
    color: #FFFFFF !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .academia-exam-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .academia-exam-table thead tr {
    background: #0B3B36 !important;
    color: #FFFFFF !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .academia-exam-table td,
  .academia-exam-table th {
    border: 1px solid #CCCCCC !important;
    padding: 10px !important;
    color: #000000 !important;
    background: #FFFFFF !important;
  }

  .academia-exam-table th {
    background: #0B3B36 !important;
    color: #FFFFFF !important;
  }
}


/* ==========================================================================
   MODERN 16PX SHEET CARDS & DUAL ACTION BUTTONS
   ========================================================================== */
.sheet-modern-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 22px 26px;
  margin-bottom: 16px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

.sheet-modern-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-burgundy);
  box-shadow: var(--shadow-card-hover);
}

.sheet-card-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.sheet-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sheet-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFF1F2;
  color: #BE123C;
  border: 1px solid #FECDD3;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

[data-theme="dark"] .sheet-type-pill {
  background: rgba(190, 18, 60, 0.15);
  color: #FDA4AF;
  border-color: rgba(190, 18, 60, 0.35);
}

.sheet-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  font-size: 0.725rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

[data-theme="dark"] .sheet-verified-pill {
  background: rgba(16, 185, 129, 0.15);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.3);
}

.sheet-main-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 2px 0 0;
}

.sheet-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 12px 16px;
  background: var(--bg-surface-subtle);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 18px;
}

.sheet-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.825rem;
  color: var(--text-secondary);
}

.sheet-meta-item i,
.sheet-meta-item svg {
  width: 15px;
  height: 15px;
  color: var(--brand-burgundy);
  flex-shrink: 0;
}

.sheet-card-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.dual-buttons-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Button 1: View / Read In-App */
.btn-action-view {
  background: linear-gradient(135deg, #BE123C 0%, #9F1239 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition-fast);
}

.btn-action-view:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(190, 18, 60, 0.35);
  background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
}

/* Button 2: Download */
.btn-action-download {
  background: #FFF1F2;
  color: #9F1239;
  border: 1px solid #FECDD3;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition-fast);
}

[data-theme="dark"] .btn-action-download {
  background: #252538;
  color: #FDA4AF;
  border-color: #3B3B54;
}

.btn-action-download:hover {
  background: #FFE4E6;
  color: #881337;
  border-color: #FDA4AF;
}

[data-theme="dark"] .btn-action-download:hover {
  background: #2D2D42;
  color: #FFFFFF;
  border-color: var(--brand-burgundy);
}

.btn-fav-action.active {
  background: var(--brand-burgundy-light);
  color: var(--brand-burgundy);
  border-color: var(--brand-burgundy-border);
}

/* ==========================================================================
   IN-MODAL FILES CARDS LIST (Subject Modal Explorer)
   ========================================================================== */
.modal-files-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-file-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.modal-file-card:hover {
  border-color: var(--brand-burgundy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.modal-file-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.modal-file-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
}

.modal-file-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.775rem;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--bg-surface-subtle);
  border-radius: 8px;
}

.modal-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.modal-meta-item i,
.modal-meta-item svg {
  width: 13px;
  height: 13px;
  color: var(--brand-burgundy);
}

.modal-file-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   SHEET DETAIL PAGE & IN-APP EMBEDDED READER
   ========================================================================== */
.sheet-detail-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sheet-detail-back-bar {
  display: flex;
  align-items: center;
}

.sheet-inapp-viewer-container {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.inapp-viewer-toolbar {
  padding: 12px 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.viewer-toolbar-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer-toolbar-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.viewer-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inapp-viewer-frame-wrap {
  position: relative;
  width: 100%;
  height: 750px;
  background: #F1F5F9;
}

.sheet-detail-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ==========================================================================
   JNOTES INTERACTIVE READER STUDIO TOOLBAR & CONTROLS
   ========================================================================== */
.jnotes-studio-toolbar {
  background: #1B1D2C;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  user-select: none;
}

.jnotes-tools-group,
.jnotes-swatches-group,
.jnotes-width-group,
.jnotes-actions-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jnotes-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 4px;
}

.jnotes-group-label {
  font-size: 0.725rem;
  color: #94A3B8;
  font-weight: 700;
  margin-inline-end: 2px;
}

.jnotes-tool-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 0.775rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.jnotes-tool-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #F8FAFC;
  transform: translateY(-1px);
}

.jnotes-tool-btn.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #38BDF8 !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.5);
}

.jnotes-swatch-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  outline: none;
}

.jnotes-swatch-dot:hover {
  transform: scale(1.2);
  border-color: #FFFFFF;
}

.jnotes-swatch-dot.active {
  transform: scale(1.25);
  border-color: #FFFFFF !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.jnotes-width-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.725rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.jnotes-width-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #F8FAFC;
}

.jnotes-width-btn.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #38BDF8 !important;
}

.width-indicator {
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.jnotes-action-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.775rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.jnotes-action-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.jnotes-action-btn.save-btn {
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.35);
}
.jnotes-action-btn.save-btn:hover {
  background: #10B981;
  color: #FFFFFF;
}

.jnotes-action-btn.clear-btn {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.3);
}
.jnotes-action-btn.clear-btn:hover {
  background: #EF4444;
  color: #FFFFFF;
}

.jnotes-action-btn.icon-only {
  padding: 6px 8px;
}

/* ==========================================================================
   AUDIO LECTURE SUMMARY PLAYER BAR
   ========================================================================== */
.audio-lecture-player-wrap {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(30, 27, 75, 0.4) 100%);
  border: 1px solid rgba(2, 132, 199, 0.3);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeInDown 0.25s ease;
}

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

.audio-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.audio-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audio-equalizer-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.audio-eq-bar {
  width: 3px;
  height: 6px;
  background: #0284C7;
  border-radius: 2px;
}

.audio-equalizer-bars.playing .audio-eq-bar:nth-child(1) { animation: eqBounce 0.7s infinite ease alternate; }
.audio-equalizer-bars.playing .audio-eq-bar:nth-child(2) { animation: eqBounce 0.5s infinite ease alternate 0.1s; }
.audio-equalizer-bars.playing .audio-eq-bar:nth-child(3) { animation: eqBounce 0.8s infinite ease alternate 0.2s; }
.audio-equalizer-bars.playing .audio-eq-bar:nth-child(4) { animation: eqBounce 0.6s infinite ease alternate 0.15s; }
.audio-equalizer-bars.playing .audio-eq-bar:nth-child(5) { animation: eqBounce 0.75s infinite ease alternate 0.25s; }

@keyframes eqBounce {
  0% { height: 4px; }
  100% { height: 18px; }
}

.audio-controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.btn-audio-play-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0284C7;
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
  flex-shrink: 0;
}

.btn-audio-play-circle:hover {
  transform: scale(1.08);
  background: #0369A1;
}

.audio-scrubber-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.audio-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  cursor: pointer;
}

.audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0284C7;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(2, 132, 199, 0.8);
}

.audio-speed-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.725rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

/* ==========================================================================
   STUDENT DISCUSSION & Q&A BOARD
   ========================================================================== */
.qa-comment-card {
  background: var(--bg-surface-subtle, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease;
}

.qa-comment-card:hover {
  border-color: rgba(2, 132, 199, 0.35);
}

.qa-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qa-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qa-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
}

.qa-author-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}

.qa-tag-badge {
  background: rgba(2, 132, 199, 0.12);
  color: #0284C7;
  border: 1px solid rgba(2, 132, 199, 0.25);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}

.qa-body-text {
  font-size: 0.885rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.qa-doctor-reply-box {
  background: rgba(2, 132, 199, 0.08);
  border-right: 3px solid #0284C7;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 4px;
}

.qa-doctor-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0284C7;
}

.qa-doctor-text {
  font-size: 0.835rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.qa-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px dashed var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.btn-helpful-like {
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  color: var(--text-secondary);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-helpful-like:hover, .btn-helpful-like.voted {
  background: rgba(2, 132, 199, 0.15);
  color: #0284C7;
  border-color: #0284C7;
}

/* ==========================================================================
   GLASSMORPHIС IN-APP DOCUMENT VIEWER MODAL (<iframe />)
   ========================================================================== */
/* ==========================================================================
   JNOTES / GOODNOTES STYLE DOCUMENT VIEWER & NOTE STUDIO
   ========================================================================== */
.doc-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 11, 18, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.doc-viewer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.doc-viewer-window {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: #12131F;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: docZoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes docZoomIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.doc-viewer-window.fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
}

.doc-viewer-header {
  height: 62px;
  padding: 0 18px;
  background: #1B1D2C;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  z-index: 10;
}

.doc-viewer-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
}

.doc-badge-type {
  background: #0284C7;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.doc-viewer-meta-text h3 {
  font-size: 0.9rem;
  font-weight: 800;
  color: #F8FAFC;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-viewer-meta-text p {
  font-size: 0.725rem;
  color: #94A3B8;
}

/* JNotes Studio Floating Center Palette */
.doc-viewer-annotation-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.7);
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn-annotation-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #94A3B8;
  padding: 5px 12px;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-annotation-tool:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
}

.btn-annotation-tool.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.4);
}

.jnotes-color-swatches {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 6px;
  padding: 0 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.swatch-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.swatch-dot:hover {
  transform: scale(1.2);
}

.swatch-dot.active {
  border-color: #FFFFFF;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  transform: scale(1.15);
}

.jnotes-stroke-selector {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stroke-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #94A3B8;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.725rem;
  font-weight: 700;
  cursor: pointer;
}

.stroke-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.btn-annotation-tool.save-tool {
  background: rgba(16, 185, 129, 0.18);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.3);
}

.btn-annotation-tool.save-tool:hover {
  background: #10B981;
  color: #FFFFFF;
}

.btn-annotation-tool.clear-tool {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.25);
}

.btn-annotation-tool.clear-tool:hover {
  background: #EF4444;
  color: #FFFFFF;
}

.doc-viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-pages-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.775rem;
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
}

.doc-viewer-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F8FAFC;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.doc-viewer-close-btn:hover {
  background: #EF4444;
  color: #FFFFFF;
  border-color: #EF4444;
}

.doc-viewer-body {
  flex: 1;
  width: 100%;
  height: calc(100vh - 62px);
  background: #12131F;
  overflow: hidden;
  display: flex;
}

.doc-viewer-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ==========================================================================
   MODERN EMPTY STATE COMPONENT (ACADEMIA SYSTEM)
   ========================================================================== */
.empty-state-card {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-subtle, #E4E6EF);
  border-radius: var(--radius-lg, 16px);
  padding: 56px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  width: 100%;
  max-width: 680px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: all var(--transition-normal, 250ms ease);
}

.empty-state-card:hover {
  border-color: rgba(139, 21, 56, 0.25);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
}

.empty-state-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(139, 21, 56, 0.06);
  border: 1px solid rgba(139, 21, 56, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--brand-burgundy, #8B1538);
  transition: transform var(--transition-normal, 250ms ease), background var(--transition-normal, 250ms ease);
}

.empty-state-card:hover .empty-state-icon-wrap {
  transform: scale(1.08);
  background: rgba(139, 21, 56, 0.1);
}

.empty-state-icon-wrap i,
.empty-state-icon-wrap svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.75px;
}

.empty-state-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #181C32);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.empty-state-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted, #7E8299);
  max-width: 440px;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   FOX MASCOT SKINS HUB (6 MASCOT CHARACTERS & REWARDS)
   ========================================================================== */
.fox-skins-header-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.fox-skins-header-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #BE123C 0%, #0B3B36 50%, #BE123C 100%);
}

.fox-skins-header-info {
  display: flex;
  align-items: center;
  gap: 18px;
}

.fox-current-equipped-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #BE123C;
  box-shadow: 0 4px 14px rgba(190, 18, 60, 0.25);
  flex-shrink: 0;
  animation: pulseGlow 3s infinite alternate;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 4px 14px rgba(190, 18, 60, 0.25); }
  100% { box-shadow: 0 4px 22px rgba(190, 18, 60, 0.55); }
}

.fox-current-equipped-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fox-balance-pill {
  background: rgba(11, 59, 54, 0.08);
  border: 1.5px solid rgba(11, 59, 54, 0.2);
  border-radius: 14px;
  padding: 12px 20px;
  text-align: center;
  flex-shrink: 0;
}

[data-theme="dark"] .fox-balance-pill {
  background: rgba(190, 18, 60, 0.12);
  border-color: rgba(190, 18, 60, 0.3);
}

.fox-balance-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-primary, #0B3B36);
  line-height: 1.1;
}

[data-theme="dark"] .fox-balance-val {
  color: #FDA4AF;
}

.fox-balance-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Grid of 6 Skins */
.fox-skins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
  margin-bottom: 36px;
}

.fox-skin-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  position: relative;
}

.fox-skin-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(190, 18, 60, 0.4);
}

.fox-skin-card.is-equipped {
  border: 2px solid #10B981;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);
}

.fox-skin-card.is-equipped::after {
  content: '✓ EQUIPPED';
  position: absolute;
  top: 12px;
  right: 12px;
  background: #10B981;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  z-index: 2;
}

html[dir="rtl"] .fox-skin-card.is-equipped::after {
  right: auto;
  left: 12px;
  content: '✓ مُرتدى حالياً';
}

.fox-skin-visual {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #0B1727;
}

.fox-skin-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.fox-skin-card:hover .fox-skin-visual img {
  transform: scale(1.05);
}

.fox-skin-tag-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.725rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
}

html[dir="rtl"] .fox-skin-tag-badge {
  left: auto;
  right: 12px;
}

.fox-skin-cost-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(190, 18, 60, 0.9);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

html[dir="rtl"] .fox-skin-cost-badge {
  left: auto;
  right: 12px;
}

.fox-skin-content {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.fox-skin-theme-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 4px 10px;
  margin-bottom: 12px;
  width: fit-content;
}

.fox-skin-theme-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fox-skin-theme-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.fox-skin-theme-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.fox-skin-title-wrap {
  margin-bottom: 12px;
}

.fox-skin-name-ar {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.fox-skin-name-en {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fox-skin-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
  min-height: 48px;
}

.fox-skin-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.btn-skin-action {
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
  border: none;
}

.btn-skin-equip {
  background: var(--brand-primary, #0B3B36);
  color: #FFFFFF;
}

.btn-skin-equip:hover {
  background: #082825;
  box-shadow: 0 4px 12px rgba(11, 59, 54, 0.3);
}

.btn-skin-unlock {
  background: linear-gradient(135deg, #BE123C 0%, #881337 100%);
  color: #FFFFFF;
  box-shadow: 0 3px 12px rgba(190, 18, 60, 0.3);
}

.btn-skin-unlock:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-skin-locked {
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: not-allowed;
  border: 1px dashed var(--border-subtle);
}

.btn-skin-current {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  cursor: default;
}

[data-theme="dark"] .btn-skin-current {
  background: rgba(16, 185, 129, 0.15);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.3);
}

/* ==========================================================================
   CLINICAL & PRACTICAL SCHEDULE (10 GROUPS: A1 - E2)
   ========================================================================== */
.clinical-group-selector-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}

.group-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.group-selector-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.active-group-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.775rem;
  font-weight: 800;
}

[data-theme="dark"] .active-group-tag {
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.4);
}

.clinical-group-chips-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-group-chip {
  flex: 1 1 calc(10% - 8px);
  min-width: 58px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-card);
  background: var(--bg-surface-subtle);
  color: var(--text-primary);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.btn-group-chip:hover {
  border-color: var(--brand-primary);
  background: var(--bg-hover);
  transform: translateY(-2px);
}

.btn-group-chip.active {
  background: var(--brand-primary);
  color: #FFFFFF;
  border-color: var(--brand-primary);
  box-shadow: 0 4px 14px rgba(136, 19, 55, 0.35);
  transform: translateY(-2px);
}

.clinical-table-card .table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.official-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.official-source-pill:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.clinical-grid-table td {
  vertical-align: top;
  padding: 8px 10px;
}

.clinical-day-header-cell {
  background: var(--bg-surface-subtle) !important;
  font-weight: 800;
  text-align: center;
  vertical-align: middle !important;
  width: 130px;
}

.day-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.day-name-main {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.day-name-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.clinical-slot-card {
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.clinical-slot-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.clinical-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.clinical-code-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.clinical-time-tag {
  font-size: 0.725rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 10px;
}

[data-theme="dark"] .clinical-time-tag {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.clinical-course-title {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
  color: #0F172A;
}

[data-theme="dark"] .clinical-course-title {
  color: #F8FAFC;
}

.clinical-course-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.clinical-place-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: auto;
  padding-top: 4px;
}

/* Day by Day Cards View */
.clinical-days-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.clinical-day-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}

.clinical-day-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

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

.day-theory-hint {
  font-size: 0.775rem;
  color: var(--text-muted);
  background: var(--bg-surface-subtle);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

.day-sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

/* ==========================================================================
   ARCADE & DENTAL GAMES HUB (Memory Games, Visual Match, Funny Trivia Quiz)
   ========================================================================== */
.arcade-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0 60px;
}

/* Arcade Hero Card */
.arcade-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.08) 0%, rgba(190, 18, 60, 0.04) 50%, rgba(2, 132, 199, 0.05) 100%), var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.arcade-hero-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(190, 18, 60, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.arcade-hero-content {
  flex: 1;
}

.arcade-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-burgundy-light);
  color: var(--brand-burgundy);
  border: 1px solid var(--brand-burgundy-border);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.badge-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-burgundy);
  box-shadow: 0 0 0 0 rgba(190, 18, 60, 0.6);
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(190, 18, 60, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(190, 18, 60, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(190, 18, 60, 0); }
}

.arcade-hero-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.arcade-hero-sub {
  font-size: 0.925rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

.arcade-hero-mascot-box {
  flex-shrink: 0;
}

.arcade-mascot-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 14px;
  padding: 10px 18px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.arcade-mascot-chip:hover {
  transform: translateY(-2px);
  border-color: var(--brand-burgundy);
  box-shadow: var(--shadow-card-hover);
}

.arcade-mascot-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-burgundy);
  box-shadow: 0 2px 8px rgba(136, 19, 55, 0.2);
}

.arcade-mascot-meta {
  display: flex;
  flex-direction: column;
}

.arcade-mascot-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.arcade-points-balance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.825rem;
  font-weight: 800;
  color: var(--brand-burgundy);
}

.arcade-points-balance i,
.arcade-points-balance svg {
  width: 13px;
  height: 13px;
}

/* Arcade 3 Tabs Navigation Bar */
.arcade-tabs-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 860px) {
  .arcade-tabs-bar {
    grid-template-columns: 1fr;
  }
  .arcade-hero-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.arcade-tab-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-card);
  border-radius: 14px;
  padding: 16px 20px;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

[dir="rtl"] .arcade-tab-btn {
  text-align: right;
}

.arcade-tab-btn:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
  box-shadow: var(--shadow-card-hover);
}

.arcade-tab-btn.active {
  background: var(--brand-burgundy-light);
  border-color: var(--brand-burgundy);
  box-shadow: var(--brand-burgundy-glow);
}

.arcade-tab-btn .tab-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.tab-label-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tab-main-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.arcade-tab-btn.active .tab-main-label {
  color: var(--brand-burgundy);
}

.tab-sub-label {
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--text-muted);
}

.arcade-tab-btn.active .tab-sub-label {
  color: var(--brand-accent);
}

/* Game Stage & Panel Card */
.arcade-stage-wrapper {
  margin-bottom: 30px;
}

.game-panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}

/* Game Controls & Header */
.game-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle);
}

.game-level-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.level-select-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.level-buttons-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-level {
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-level:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: #CBD5E1;
}

.btn-level.active {
  background: var(--brand-burgundy);
  color: #FFFFFF;
  border-color: var(--brand-burgundy);
  box-shadow: 0 2px 8px rgba(136, 19, 55, 0.28);
}

/* Game Stats Dock */
.game-stats-dock {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 8px 14px;
}

.stat-dock-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-dock-item i,
.stat-dock-item svg {
  width: 15px;
  height: 15px;
  color: var(--brand-burgundy);
}

.btn-stat-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.775rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-stat-action:hover {
  background: var(--brand-burgundy-light);
  color: var(--brand-burgundy);
  border-color: var(--brand-burgundy-border);
}

.btn-stat-action i,
.btn-stat-action svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   MEMORY CARDS 3D ENGINE & GRIDS
   ========================================================================== */
.memory-cards-grid {
  display: grid;
  gap: 14px;
  perspective: 1200px;
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 1024px) {
  .grid-cols-8 { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-8 { grid-template-columns: repeat(2, 1fr); }
}

.memory-card-wrap {
  min-height: 145px;
  perspective: 1000px;
  cursor: pointer;
  user-select: none;
}

.memory-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 145px;
  text-align: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  border-radius: 14px;
}

.memory-card-wrap.flipped .memory-card-inner,
.memory-card-wrap.matched .memory-card-inner {
  transform: rotateY(180deg);
}

.memory-card-front,
.memory-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  box-sizing: border-box;
}

/* Card Front (Hidden / Face Down) */
.memory-card-front {
  background: linear-gradient(145deg, #1E1E2D 0%, #2A2A3E 60%, #151522 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: all var(--transition-base);
}

.memory-card-wrap:hover .memory-card-front {
  border-color: var(--brand-burgundy);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(190, 18, 60, 0.25);
}

.memory-card-pattern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.memory-card-kuro-emblem {
  font-size: 2rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease;
}

.memory-card-wrap:hover .memory-card-kuro-emblem {
  transform: scale(1.15) rotate(-5deg);
}

.memory-card-kuro-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #9899AC;
  text-transform: uppercase;
}

/* Card Back (Revealed / Face Up) */
.memory-card-back {
  background: var(--bg-card);
  border: 2px solid var(--border-card);
  transform: rotateY(180deg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.memory-card-wrap.matched .memory-card-back {
  border-color: #10B981 !important;
  background: rgba(16, 185, 129, 0.06);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.28);
}

.memory-card-badge-pill {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.card-type-en .memory-card-badge-pill {
  background: rgba(2, 132, 199, 0.12);
  color: #0284C7;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.card-type-ar .memory-card-badge-pill {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.memory-card-icon-halo {
  font-size: 2.1rem;
  margin: 2px 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.memory-card-text {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 2px 0;
  word-break: break-word;
}

.memory-card-sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ==========================================================================
   GAME 2: VISUAL INSTRUMENT CARDS
   ========================================================================== */
.visual-card-wrap {
  min-height: 165px;
}

.visual-card-wrap .memory-card-inner {
  min-height: 165px;
}

.visual-front-theme {
  background: linear-gradient(145deg, #1E293B 0%, #0F172A 60%, #0284C7 180%);
}

.visual-card-back {
  padding: 12px 10px;
}

.visual-card-dept-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid;
  margin-bottom: 6px;
}

.visual-instrument-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}

.visual-instrument-symbol {
  font-size: 2rem;
}

.visual-card-name {
  font-size: 0.825rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 3px;
}

.visual-card-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.2;
}

/* ==========================================================================
   GAME 3: FUNNY DENTAL TRIVIA QUIZ
   ========================================================================== */
.quiz-container-box {
  max-width: 820px;
  margin: 0 auto;
}

.quiz-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.quiz-meta-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quiz-counter-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.quiz-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--brand-burgundy);
  background: var(--brand-burgundy-light);
  border: 1px solid var(--brand-burgundy-border);
  padding: 4px 12px;
  border-radius: 12px;
}

.quiz-score-pill i,
.quiz-score-pill svg {
  width: 15px;
  height: 15px;
}

.quiz-progress-track {
  width: 100%;
  height: 8px;
  background: var(--bg-surface-subtle);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}

.quiz-progress-fill {
  height: 100%;
  background: var(--brand-burgundy-gradient);
  border-radius: 10px;
  transition: width 0.4s ease;
}

.quiz-question-box {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 20px;
  position: relative;
}

.quiz-question-num {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--brand-burgundy);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(136, 19, 55, 0.3);
}

[dir="rtl"] .quiz-question-num {
  right: auto;
  left: 20px;
}

.quiz-question-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.55;
}

.quiz-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.quiz-option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-card);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-base);
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
}

[dir="rtl"] .quiz-option-btn {
  text-align: right;
}

.quiz-option-btn:hover:not(:disabled) {
  background: var(--bg-surface-subtle);
  border-color: #CBD5E1;
  transform: translateX(4px);
}

[dir="rtl"] .quiz-option-btn:hover:not(:disabled) {
  transform: translateX(-4px);
}

.opt-letter {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.opt-text {
  flex: 1;
  font-weight: 600;
}

.quiz-option-btn.opt-correct {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: #10B981 !important;
  color: #065F46 !important;
}

.quiz-option-btn.opt-correct .opt-letter {
  background: #10B981;
  color: #FFFFFF;
  border-color: #10B981;
}

.quiz-option-btn.opt-wrong {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: #EF4444 !important;
  color: #991B1B !important;
  animation: shake-opt 0.35s ease;
}

@keyframes shake-opt {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.quiz-option-btn.opt-wrong .opt-letter {
  background: #EF4444;
  color: #FFFFFF;
  border-color: #EF4444;
}

.quiz-option-btn.opt-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.opt-check {
  font-weight: 900;
  color: #10B981;
  font-size: 1.1rem;
}

.opt-cross {
  font-weight: 900;
  color: #EF4444;
  font-size: 1.1rem;
}

/* Quiz Explanation Banner */
.quiz-explanation-card {
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.feedback-correct {
  background: rgba(16, 185, 129, 0.1);
  border: 1.5px solid rgba(16, 185, 129, 0.3);
}

.feedback-wrong {
  background: rgba(245, 158, 11, 0.1);
  border: 1.5px solid rgba(245, 158, 11, 0.3);
}

.feedback-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.feedback-icon {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

.feedback-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.quiz-next-btn {
  padding: 10px 22px;
  font-size: 0.875rem;
  font-weight: 700;
}

/* Quiz Results Screen */
.quiz-results-card {
  text-align: center;
  padding: 36px 24px;
  max-width: 600px;
  margin: 0 auto;
}

.results-mascot-avatar {
  width: 90px;
  height: 90px;
  margin: 0 auto 16px;
  position: relative;
}

.results-mascot-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--brand-burgundy);
  box-shadow: 0 4px 18px rgba(136, 19, 55, 0.25);
}

.results-badge {
  font-size: 2.2rem;
  margin-bottom: 8px;
}

.results-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.results-score-badge {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--brand-burgundy);
  background: var(--brand-burgundy-light);
  border: 2px solid var(--brand-burgundy-border);
  padding: 6px 24px;
  border-radius: 16px;
  margin-bottom: 12px;
}

.results-rank-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.results-sub {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 24px;
}

.results-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* ==========================================================================
   WIN CELEBRATION MODAL
   ========================================================================== */
.arcade-win-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop-color);
  backdrop-filter: var(--backdrop-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.arcade-win-modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 22px;
  padding: 36px 30px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-modal);
  position: relative;
}

.win-mascot-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
}

.win-mascot-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--brand-burgundy);
  box-shadow: 0 4px 16px rgba(136, 19, 55, 0.25);
}

.win-confetti-stars {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.win-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.win-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
}

.win-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.win-stat-cell {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.win-stat-cell.win-stat-highlight {
  background: var(--brand-burgundy-light);
  border-color: var(--brand-burgundy-border);
}

.win-stat-label {
  font-size: 0.725rem;
  font-weight: 700;
  color: var(--text-muted);
}

.win-stat-num {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.win-stat-highlight .win-stat-num {
  color: var(--brand-burgundy);
}

.win-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ==========================================================================
   SUPABASE AUTH & CLOUD SYNC (Optional Guest-First System)
   ========================================================================== */
/* Header Auth Pill / User Badge */
.header-auth-action-box {
  display: flex;
  align-items: center;
}

.header-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-burgundy-light);
  color: var(--brand-burgundy);
  border: 1px solid var(--brand-burgundy-border);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.header-auth-btn:hover {
  background: var(--brand-burgundy);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(136, 19, 55, 0.3);
}

.header-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px 4px 12px;
  border-radius: 20px;
  transition: all var(--transition-base);
}

.header-user-badge:hover {
  border-color: var(--brand-burgundy-border);
}

.user-cloud-icon {
  font-size: 0.95rem;
}

.user-display-name {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-auth-signout {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  transition: color 0.2s;
}

.btn-auth-signout:hover {
  color: #EF4444;
}

/* Optional Guest Encouragement Banner */
.guest-encourage-banner {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(136, 19, 55, 0.05) 100%), var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 12px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  animation: slide-down 0.3s ease;
}

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

.guest-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.guest-banner-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.guest-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.guest-banner-text strong {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-primary);
}

.guest-banner-text span {
  font-size: 0.775rem;
  color: var(--text-secondary);
}

.guest-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.guest-banner-btn {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  white-space: nowrap;
}

.guest-banner-dismiss {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.2s;
}

.guest-banner-dismiss:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .guest-encourage-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .guest-banner-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   AUTHENTICATION MODAL
   ========================================================================== */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop-color);
  backdrop-filter: var(--backdrop-blur);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 20px;
}

.auth-modal-backdrop.active {
  display: flex;
}

.auth-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 28px 30px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-modal);
  position: relative;
  animation: modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.auth-brand-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-brand-icon {
  font-size: 1.8rem;
}

.auth-modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}

.auth-modal-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.auth-close-btn {
  border: none;
  background: var(--bg-surface-subtle);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition-base);
}

.auth-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.auth-optional-note {
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.775rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  line-height: 1.45;
}

.auth-tabs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--bg-surface-subtle);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 18px;
}

.auth-tab-btn {
  border: none;
  background: transparent;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.825rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.auth-tab-btn.active {
  background: var(--bg-card);
  color: var(--brand-burgundy);
  box-shadow: var(--shadow-sm);
}

.auth-input-group {
  margin-bottom: 14px;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.auth-input-label {
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: block;
}

.auth-forgot-link {
  border: none;
  background: transparent;
  color: var(--brand-burgundy);
  font-size: 0.725rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}

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

.auth-input-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

[dir="rtl"] .auth-input-icon {
  left: auto;
  right: 12px;
}

.auth-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color 0.2s;
}

[dir="rtl"] .auth-input {
  padding: 10px 38px 10px 14px;
}

.auth-input:focus {
  outline: none;
  border-color: var(--brand-burgundy);
  box-shadow: 0 0 0 3px rgba(136, 19, 55, 0.1);
}

.auth-submit-btn {
  width: 100%;
  padding: 11px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0 14px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-subtle);
}

.auth-divider span {
  padding: 0 10px;
}

.btn-google-oauth {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: inherit;
}

.btn-google-oauth:hover {
  background: var(--bg-surface-subtle);
  border-color: #CBD5E1;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-continue-guest {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.785rem;
  font-weight: 700;
  cursor: pointer;
  padding: 12px 4px 0;
  margin-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.2s;
}

.btn-continue-guest:hover {
  color: var(--text-primary);
}

.auth-alert-box {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.8rem;
  margin-bottom: 14px;
  line-height: 1.4;
}

.auth-alert-error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

.auth-alert-success {
  background: #F0FDF4;
  color: #166534;
  border: 1px solid #86EFAC;
}

.auth-forgot-header {
  margin-bottom: 16px;
}

.btn-back-link {
  border: none;
  background: transparent;
  color: var(--brand-burgundy);
  font-size: 0.775rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-bottom: 8px;
}

.btn-back-link:hover {
  text-decoration: underline;
}

.auth-forgot-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.auth-forgot-sub {
  font-size: 0.775rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

[dir="rtl"] .rtl-flip-icon {
  transform: rotate(180deg);
}