/* --- GLOBAL --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #f9fafc;
  color: #1e293b;
  padding: 15px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Poppins';
  
}


/* --- HEADER --- */
/* ── HOME HEADER ── */
header.home-header {
  background: #fff;
  padding: 52px 20px 16px;
}
body.dark-mode header.home-header { background: #0f172a; }

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

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

.home-brand-logo {
  width: 42px; height: 42px; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.home-brand-name {
  font-size: 1.05rem; font-weight: 800;
  color: #0f172a; margin: 0; letter-spacing: -0.3px;
}
body.dark-mode .home-brand-name { color: #f1f5f9; }

.home-brand-sub {
  font-size: 0.75rem; color: #94a3b8; margin: 0;
}

.home-search-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: #f1f5f9; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
body.dark-mode .home-search-btn { background: #1e293b; }
.home-search-btn svg { width: 18px; height: 18px; stroke: #64748b; }

/* Banner */
.home-banner {
  background: linear-gradient(135deg, #0f62fe 0%, #1e40af 100%);
  border-radius: 18px; padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: default;
}

.home-banner-label {
  font-size: 0.72rem; color: rgba(255,255,255,0.7);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600; margin: 0 0 4px;
}

.home-banner-topic {
  font-size: 1rem; font-weight: 700; color: white;
  margin: 0 0 3px;
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.home-banner-hint {
  font-size: 0.75rem; color: rgba(255,255,255,0.65); margin: 0;
}

.home-banner-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.home-banner-icon svg { width: 24px; height: 24px; stroke: white; }

/* Stats row */
.home-stats-row {
  display: flex; gap: 8px;
  padding: 14px 20px 0;
  overflow-x: auto; scrollbar-width: none;
}
.home-stats-row::-webkit-scrollbar { display: none; }

.home-stat-pill {
  display: flex; align-items: center; gap: 6px;
  background: #f1f5f9; border-radius: 20px;
  padding: 7px 12px; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; color: #334155;
  white-space: nowrap; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
body.dark-mode .home-stat-pill { background: #1e293b; color: #cbd5e1; }
.home-stat-pill:active { background: #e0e7ff; }
.home-stat-pill svg { width: 14px; height: 14px; stroke: #0f62fe; flex-shrink: 0; }
body.dark-mode .home-stat-pill svg { stroke: #60a5fa; }

/* Section title */
.section-title {
  font-size: 0.8rem; font-weight: 700;
  color: #94a3b8; letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 16px 20px 8px; margin: 0;
  text-align: left;
}

/* Course cards */
.topics {
  display: flex; flex-direction: column;
  gap: 10px; padding: 0 16px;
}

.card {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1.5px solid #f1f5f9;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
body.dark-mode .card { background: #1e293b; border-color: #334155; }
.card:active { transform: scale(0.98); }

.home-card-inner {
  display: flex; align-items: center; gap: 14px; flex: 1;
}

.home-card-text h3 {
  font-size: 0.95rem; font-weight: 700;
  color: #0f172a; margin: 0 0 2px;
}
body.dark-mode .home-card-text h3 { color: #f1f5f9; }

.home-card-text p {
  font-size: 0.75rem; color: #94a3b8; margin: 0;
}

.home-card-arrow { flex-shrink: 0; }
.home-card-arrow svg { width: 16px; height: 16px; stroke: #cbd5e1; }

/* Colour accent per course */
.home-card-gross { border-left: 4px solid #0f62fe; }
.home-card-neuro  { border-left: 4px solid #8b5cf6; }
.home-card-histo  { border-left: 4px solid #10b981; }
.home-card-embryo { border-left: 4px solid #f59e0b; }
.home-card-quiz   { border-left: 4px solid #ef4444; }

.home-card-gross .icon { background: #eff6ff; }
.home-card-gross .icon svg { stroke: #0f62fe; }
.home-card-neuro  .icon { background: #f5f3ff; }
.home-card-neuro  .icon svg { stroke: #8b5cf6; }
.home-card-histo  .icon { background: #ecfdf5; }
.home-card-histo  .icon svg { stroke: #10b981; }
.home-card-embryo .icon { background: #fffbeb; }
.home-card-embryo .icon svg { stroke: #f59e0b; }
.home-card-quiz   .icon { background: #fff1f2; }
.home-card-quiz   .icon svg { stroke: #ef4444; }

.icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon svg { width: 22px; height: 22px; }

/* Dark mode card accents */
body.dark-mode .home-card-gross { border-left-color: #3b82f6; }
body.dark-mode .home-card-neuro  { border-left-color: #a78bfa; }
body.dark-mode .home-card-histo  { border-left-color: #34d399; }
body.dark-mode .home-card-embryo { border-left-color: #fbbf24; }
body.dark-mode .home-card-quiz   { border-left-color: #f87171; }
body.dark-mode .home-card-gross .icon { background: #1e1b4b; }
body.dark-mode .home-card-neuro  .icon { background: #2e1065; }
body.dark-mode .home-card-histo  .icon { background: #052e16; }
body.dark-mode .home-card-embryo .icon { background: #1c1a0f; }
body.dark-mode .home-card-quiz   .icon { background: #2d0a0a; }

/* Search overlay */
.home-search-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.5);
}

.home-search-box {
  background: #fff; padding: 16px;
  border-radius: 0 0 20px 20px;
}
body.dark-mode .home-search-box { background: #1e293b; }

.home-search-input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: #f1f5f9; border-radius: 14px; padding: 0 14px;
}
body.dark-mode .home-search-input-wrap { background: #0f172a; }

.home-search-icon { width: 16px; height: 16px; stroke: #94a3b8; flex-shrink: 0; }

.home-search-input {
  flex: 1; padding: 12px 0; border: none; background: transparent;
  font-family: 'Poppins', sans-serif; font-size: 0.95rem; color: #0f172a; outline: none;
}
body.dark-mode .home-search-input { color: #f1f5f9; }

.home-search-cancel {
  background: none; border: none; color: #0f62fe;
  font-family: 'Poppins', sans-serif; font-size: 0.85rem;
  font-weight: 600; cursor: pointer; padding: 4px;
}

.home-search-results {
  margin-top: 10px; max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}

.home-search-item {
  padding: 12px 14px; border-radius: 12px;
  background: #f8fafc; cursor: pointer;
  font-size: 0.88rem; color: #1e293b;
  display: flex; flex-direction: column; gap: 2px;
  transition: background 0.15s;
}
body.dark-mode .home-search-item { background: #0f172a; color: #f1f5f9; }
.home-search-item:active { background: #eef2ff; }
.home-search-item-course { font-size: 0.7rem; color: #94a3b8; }
.home-search-empty { text-align: center; color: #94a3b8; font-size: 0.85rem; padding: 20px; }
/* For the top bar of each course page */
#gross h2, #neuro h2, #histology h2, #embryology h2, #histochemistry h2, #quiz h2{
  text-align: center;
  margin: 0;
  font-weight: 600;
  padding: 3rem 0rem 1rem 0;
}

.back-btn {
  position: absolute;
  top: 20px;
  left: 15px;
  font-size: 1.2em;
  cursor: pointer;
  z-index: 1000;
}

.page{
  position: absolute;
  top: 0px;
  left: 100%;
  width: 100%;
  min-height: 100vh;
  background: #f8fafc;
  padding: 40px;
  transition: all 0.4s ease;
  opacity: 0;
  overflow-y: auto;
  z-index: 2;
}

/* When active, slide into view */
.page.active {
  left: 0;
  opacity: 1;
}

/* Hide home content when subpage is active */
body.subpage main,
body.subpage header,
body.subpage .intro,
body.subpage footer {
  display: none;
}

/* Subtopic list styling */
.topics-list {
  display: none;
  margin-left: 25px;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.sub-card {
  background: #f1f5f9;
  margin: 5px 0;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 0.95em;
  color: #334155;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.sub-card:hover {
  transform: scale(1.02);
  border-color: #0f62fe;
  background-color: #f0f7ff;
}

/* Rotate the chevron when open */
.card.open .dropdown-icon {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}


/* === SUMMARY PAGE STYLES === */
#summaryPage {
  background: #ffffff;
  padding: 20px;
  min-height: 100vh;
  overflow-y: auto;
}

.summary-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.summary-header h2 {
  flex: 1;
  text-align: center;
  font-size: 1.3em;
  color: #1e293b;
  margin: 0;
}

.back-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: #1e293b;
}

.summary-body {
  font-size: 1em;
  line-height: 1.6;
  color: #334155;
}

.summary-footer {
  margin-top: 30px;
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
  padding-bottom: 80px;
  color: #475569;
  font-size: 0.9em;
}

/* === JOIN POPUP STYLES === */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.4s ease;
}

.popup-content {
  background: #fff;
  border-radius: 16px;
  padding: 25px;
  text-align: center;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
}

.popup-content h2 {
  color: #0f62fe;
  font-size: 1.3em;
  margin-bottom: 10px;
}

.popup-content p {
  font-size: 0.95em;
  color: #475569;
  margin-bottom: 15px;
}

.popup-buttons {
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

.popup-buttons button {
  border: none;
  border-radius: 10px;
  padding: 10px 15px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

#joinNowBtn {
  background-color: #0f62fe;
  color: white;
}

#joinNowBtn:hover {
  background-color: #1e40af;
}

#laterBtn {
  background-color: #e2e8f0;
  color: #1e293b;
}

#laterBtn:hover {
  background-color: #cbd5e1;
}

/* Simple fade & slide animations */
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

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

.reminder-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.reminder-box {
  background: #fff;
  padding: 20px 25px;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  text-align: center;
  width: 80%;
  max-width: 320px;
  animation: fadeIn 0.4s ease;
}

.reminder-buttons {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.reminder-buttons button {
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 0.9em;
}

.reminder-buttons button:hover {
  background: #1d4ed8;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.table-container{
  overflow-x: auto;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 15px;
}

.summary-table th, .summary-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  overflow-x: auto;

}

.summary-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* === DARK MODE GENERAL STYLES === */
body.dark-mode {
  background-color: #0f172a; /* Deep navy */
  color: #f1f5f9; /* Soft light text */
}

/* For all pages and content sections */
body.dark-mode .page,
body.dark-mode main,
body.dark-mode header,
body.dark-mode footer,
body.dark-mode #summaryPage {
  background-color: #0f172a;
  color: #f1f5f9;
}

/* Fix card, sub-card, and list styles */
body.dark-mode .card,
body.dark-mode .sub-card {
  background-color: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

body.dark-mode .card:hover,
body.dark-mode .sub-card:hover {
  background-color: #334155;
}

/* Adjust popup and buttons */
body.dark-mode .reminder-popup,
body.dark-mode .join-popup {
  background-color: rgba(30, 41, 59, 0.95);
  color: #f8fafc;
}

/* Links, icons, etc. */
body.dark-mode a,
body.dark-mode .feedback-btn {
  color: #f1f5f9;
  background-color: #1e40af;
}

body.dark-mode .card h3{
  color:#0f62fe;
}
body.dark-mode .back-btn{
  color: #fff;
}

body.dark-mode .notes-box{
  background-color: #0f172a;
}
body.dark-mode #notesInput{
  background-color: #334155;
  color: #fff;
}


/* ==== SLIDING SWITCH ==== */
.switch {
  position: fixed;
  top: 15px;
  right: 15px;
  display: inline-block;
  width: 60px;
  height: 28px;
  z-index: 2000;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider track */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #e2e8f0;
  border-radius: 34px;
  transition: 0.4s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 5px;
}

/* The circle */
.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

/* Sun + Moon icons */
.slider .sun,
.slider .moon {
  font-size: 15px;
  transition: opacity 0.3s ease;
}

/* When checked = dark mode */
input:checked + .slider {
  background-color: #1e293b;
}

input:checked + .slider:before {
  transform: translateX(32px);
}

/* Light mode = show sun */
input:not(:checked) + .slider .moon {
  opacity: 0.2;
}

/* Dark mode = show moon */
input:checked + .slider .sun {
  opacity: 0.2;
}

/* ===== DARK MODE FIX FOR SUMMARY PAGE ===== */
body.dark-mode #summaryPage {
  background-color: #0f172a;
  color: #e8e6e3;
}

body.dark-mode #summaryPage h2 {
  color: #e2e8f0;
}

body.dark-mode #summaryContent {
  color: #e8e6e3;
}

body.dark-mode #summaryReferences {
  color: #cbd5e1;
}

body.dark-mode #summaryReferences li {
  color: #cbd5e1;
}


/* ===== DARK MODE FIX FOR REMINDER POPUP ===== */
body.dark-mode .reminder-popup {
  background: rgba(15, 23, 42, 0.8); /* darker blur */
}

body.dark-mode .reminder-box {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid #334155;
}

body.dark-mode .reminder-box button {
  background: #334155;
  color: #f1f5f9;
}

body.dark-mode .reminder-box button:hover {
  background: #475569;
}


/* ===== Flashcard / Quiz styles ===== */

.reveal{
  text-align: center;
}

.pre-quiz {
  background: #fff;
  padding: 18px;
  border-radius: 12px;
  margin: 12px 0;
  text-align: center;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
.pre-quiz-controls button { margin: 8px; padding: 10px 16px; border-radius: 10px; cursor:pointer; }

/* container */
.flashcard-container {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top: 12px;
  line-height: 1.2;   /* Adds clean spacing between lines */
  padding: 1rem;      /* More breathing room */
  text-align: center;
}


/* progress */
.progress-row { width: 100%; max-width:600px; display:flex; gap:12px; align-items:center; }
#progressText { font-size:0.95rem; color:#334155; min-width:70px; text-align:left; }
#progressBar { flex:1; height:8px; background:#e6edf9; border-radius:6px; overflow:hidden; }
#progressFill { height:100%; width:0%; background:#0f62fe; transition: width 300ms ease; }

/* card */
.flashcard {
  width: 100%;
  max-width: 650px;
  height: 320px;
  perspective: 1200px;
  cursor: pointer;
  border-radius: 5px; 

}
.card-face {
  position:absolute;
  width:100%;
  height:100%;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 1.05rem;
  line-height: 1.6;
  color:#0f172a;
}
.front { background: #fff; transform: rotateY(0deg); }
.back { background:#f7fafc; transform: rotateY(180deg); }

/* 3D flip wrapper */
.flashcard .card-face { transition: transform 400ms ease, opacity 300ms ease; }
.flashcard.flipped .front { transform: rotateY(-180deg); opacity:0; }
.flashcard.flipped .back  { transform: rotateY(0deg); opacity:1; }

/* button row */
.flashcard-buttons {
  display:flex;
  gap:70px; 
  padding:1rem;
}
  
.flashcard-buttons button {
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  border: none;
  background: #fff;
  box-shadow: 0 6px 16px rgba(2,6,23,0.06);
}
.flashcard-buttons #rightBtn { background:#10b981; color:#fff; }
.flashcard-buttons #wrongBtn { background:#ef4444; color:#fff; }

/* score screen */
.score-screen { text-align:center; padding:18px; margin-top:12px; background:#fff; border-radius:12px; }
.score-controls button { margin:8px; padding:10px 12px; border-radius:10px; cursor:pointer; }

body.dark-mode .pre-quiz{
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid #334155;
}

body.dark-mode .flashcard {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid #334155;
}
body.dark-mode .score-screen {
  color: black;
}

/* ===== LOADER STYLES ===== */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background, #0a0f23);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.loader-content {
  text-align: center;
  animation: fadeIn 1.2s ease forwards;
}

#loader img {
  width: 110px;
  height: 110px;
  margin-bottom: 20px;
 border-radius: 30px;
  animation: float 2.2s infinite ease-in-out;
}

/* Pulse animation under the logo */
.loader-pulse {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 50%;
  animation: pulse 0.9s infinite ease-in-out;
}

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

@keyframes pulse {
  0% { transform: scale(0.7); opacity: 0.6; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0.6; }
}

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

/* Hide loader smoothly */
#loader.hidden {
  opacity: 0;
  pointer-events: none;
}

 /*USER FLASHCARDS*/
 .muted{color:#6b7280;font-size:14px;margin-bottom:12px}

  .panel{background:#fff;padding:12px;border-radius:12px;box-shadow:0 8px 20px rgba(12,15,30,0.06);margin-bottom:12px}
  .topic-row{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;border:1px solid #eef2f8;margin-bottom:8px}
  .topic-left{display:flex;flex-direction:column}
  .topic-title{font-weight:700}
  .topic-sub{font-size:13px;color:#6b7280}
  .small-btn{padding:8px 10px;border-radius:10px;border:none;background:#2563eb;color:#fff;cursor:pointer;font-weight:600}

  .card-list{margin-top:8px}
  .mini-card{background:#fbfcff;padding:8px;border-radius:8px;border:1px solid #eef2f8;margin-bottom:6px;font-size:14px}
  .actions{display:flex;gap:8px}

  .floating {
    position:fixed; right:18px; bottom:82px;
    width:56px;height:56px;border-radius:50%;background:#10b981;color:#fff;font-size:28px;border:none;cursor:pointer;
    box-shadow:0 14px 30px rgba(16,185,129,0.18);
  }

  .empty{padding:18px;border-radius:10px;border:2px dashed #e6e9ef;background:transparent;color:#6b7280;text-align:center}

  a.link{color:#2563eb;text-decoration:none;font-weight:600}
  .danger{background:#ef4444}
  
  /*CREATE FLASHCARD*/
  .card{background:#fff;padding:14px;border-radius:12px;box-shadow:0 8px 20px rgba(12,15,30,0.06);}
  label{display:block;margin-top:8px;color:#374151;font-size:13px;}
  input, textarea{width:100%;padding:10px;margin-top:6px;border-radius:8px;border:1px solid #e6e9ef;box-sizing:border-box;font-size:15px}
  .row{display:flex;gap:8px;margin-top:12px}
  .btn{flex:1;padding:11px;border-radius:10px;border:none;cursor:pointer;font-weight:600;background:#2563eb;color:#fff}
  .btn.ghost{background:#eef2ff;color:#2563eb}
  .note{color:#6b7280;font-size:13px;margin-top:10px}
  a.back{display:inline-block;margin-top:12px;color:#2563eb;text-decoration:none;font-weight:600}
  
/* --- modal animation (put near your modal styles) --- */
/* hidden by default (keeps layout clean) */
.modal {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0,0,0,0.45);
  overflow-y: auto;
  transition: opacity 220ms ease;
  opacity: 0;
animation: slideUp 0.6s ease-out forwards;
}

/* content initial transform (slide up from bottom) */
.modal-content {
  background-color: #fff;
  color: #000;
  padding: 20px;
  width: 92%;
  max-width: 440px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.2);
  transform: translateY(28px) scale(0.995);
  transition: transform 280ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  opacity: 0;
animation: slideUp 0.6s ease-out forwards;
}

/* visible state */
.modal.show {
  display: flex;     /* make it visible */
  opacity: 1;
}

/* modal content visible (final position) */
.modal.show .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* smooth hide using a class (prevents jump when removing show) */
.modal.hiding {
  opacity: 0;
}

/* smaller screen tweak: keep modal content comfortable */
@media (max-width: 420px) {
  .modal-content { width: 94%; padding: 18px; }
}

/* close button style (if you want) */
.modal-content .close {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 1.4rem;
  cursor: pointer;
  background: none;
  border: none;
}


@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Regular.ttf') format('truetype');
 font-weight: 400;
  font-style: normal;
 font-display: swap;
}

 @font-face {
 font-family: 'Poppins';
 src: url('./fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
 font-style: normal;
 font-display: swap;
}
  


iframe {
  width: 100%;
  max-width: 100%;
  height: 60vh; /* good default for 3D model viewers (Sketchfab, caskanatomy) */
  border: none;
  display: block;
  margin: 1rem 0;
  border-radius: 8px; 
}

/* YouTube embeds are fixed 16:9 — a flat 60vh height looks like a tiny
   video floating in an oversized box. Use aspect-ratio instead so the
   frame always matches the video's actual shape at any screen width. */
iframe.yt-embed,
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Animated GIFs/images shouldn't be iframes at all — see .topic-gif below
   for the correct <img> based approach. This is a safety net in case an
   old <iframe src="...gif"> slips through before content is fixed. */
iframe[src$=".gif"],
iframe[src$=".png"],
iframe[src$=".jpg"],
iframe[src$=".jpeg"] {
  display: none;
}

.topic-gif,
.topic-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 1rem 0;
}






.snow span {
  position: fixed;
  top: -10px;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: fall linear infinite;
}

.snow span:nth-child(odd) { animation-duration: 2s; }
.snow span:nth-child(even) { animation-duration: 2s; }

@keyframes fall {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(110vh);
  }
}

.notes-box {
  margin-top: 24px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.note-btn {
  background: #2563eb;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  right: 0px;
}

#noteArea {
  margin-top: 12px;
}

#notesInput {
  width: 100%;
  min-height: px;
  padding: 12px;
 border-radius: 10px;
  border: 1px solid #cbd5f5;
  font-size: 14px;
  resize: vertical;
}

.save-note-btn {
  margin-top: 10px;
  background: #16a34a;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

 input :focus {
  border-color: #2563eb;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}


/* ===== BOTTOM NAV ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: stretch;
  z-index: 5000;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 11px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  transition: color 0.2s ease;
  padding: 8px 0;
  -webkit-tap-highlight-color: transparent;
}

.nav-icon-wrap {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.nav-icon-wrap svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  transition: stroke 0.2s;
}

.nav-btn.active {
  color: #0f62fe;
}

.nav-btn.active .nav-icon-wrap {
  background: #0f62fe14;
  transform: translateY(-2px);
}

.nav-btn.active svg {
  stroke: #0f62fe;
}

.nav-btn:active .nav-icon-wrap {
  transform: scale(0.88) translateY(-2px);
}

body.dark-mode .bottom-nav {
  background: #1e293b;
  border-top-color: #334155;
}

body.dark-mode .nav-btn {
  color: #64748b;
}

body.dark-mode .nav-btn.active {
  color: #60a5fa;
}

body.dark-mode .nav-btn.active .nav-icon-wrap {
  background: #1e40af33;
}

body.dark-mode .nav-btn.active svg {
  stroke: #60a5fa;
}


/* ===== PROFILE PAGE ===== */
#profile-page {
  padding: 0;
  background: #f1f5f9;
}

body.dark-mode #profile-page {
  background: #0f172a;
}

.profile-page-inner {
  max-width: 100%;
}

/* Hero Banner */
.profile-hero {
  position: relative;
  background: linear-gradient(135deg, #0f62fe 0%, #1e40af 60%, #0ea5e9 100%);
  padding: 50px 20px 30px;
  text-align: center;
  overflow: hidden;
}

.profile-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}

.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #ffffff22;
  border: 3px solid rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  overflow: hidden;
}

.avatar-edit-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.avatar-edit-btn svg {
  width: 14px;
  height: 14px;
  stroke: #0f62fe;
}

.profile-hero-info h2 {
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.profile-school {
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Stats Row */
.profile-stats-row {
  display: flex;
  background: white;
  border-bottom: 1px solid #e2e8f0;
}

body.dark-mode .profile-stats-row {
  background: #1e293b;
  border-color: #334155;
}

.stat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  border-right: 1px solid #e2e8f0;
}

body.dark-mode .stat-box {
  border-right-color: #334155;
}

.stat-box:last-child { border-right: none; }

.stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f62fe;
}

body.dark-mode .stat-num { color: #60a5fa; }

.stat-label {
  font-size: 0.72rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Section Cards */
.profile-section-card {
  background: white;
  border-radius: 16px;
  margin: 12px 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

body.dark-mode .profile-section-card {
  background: #1e293b;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.psc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  cursor: pointer;
}

.psc-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.dark-mode .psc-title { color: #f1f5f9; }

.psc-title svg {
  width: 18px;
  height: 18px;
  stroke: #0f62fe;
}

body.dark-mode .psc-title svg { stroke: #60a5fa; }

.psc-chevron {
  width: 18px;
  height: 18px;
  stroke: #94a3b8;
  transition: transform 0.3s ease;
}

.psc-body {
  padding: 0 16px 16px;
}

/* Profile form */
.profile-label {
  display: block;
  font-size: 0.78rem;
  color: #64748b;
  margin: 10px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.profile-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: #1e293b;
  background: #f8fafc;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.profile-input:focus {
  outline: none;
  border-color: #0f62fe;
  background: white;
}

body.dark-mode .profile-input {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

.profile-save-btn {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  background: #0f62fe;
  color: white;
  border: none;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s;
}

.profile-save-btn svg { width: 16px; height: 16px; }

.profile-save-btn:active { background: #1e40af; }

/* Streak */
.streak-body {
  text-align: center;
  padding: 8px 16px 16px;
}

.streak-number {
  font-size: 3rem;
  font-weight: 800;
  color: #f97316;
  line-height: 1;
}

.streak-label {
  color: #94a3b8;
  font-size: 0.82rem;
  margin: 4px 0 16px;
}

.streak-calendar {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

.cal-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: #94a3b8;
}

.cal-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
}

body.dark-mode .cal-circle {
  background: #0f172a;
  border-color: #334155;
}

.cal-dot.cal-active .cal-circle {
  background: #f97316;
  border-color: #f97316;
}

.cal-dot.cal-today .cal-circle {
  border-color: #0f62fe;
  border-width: 2.5px;
}

.streak-tip {
  font-size: 0.82rem;
  color: #64748b;
}

body.dark-mode .streak-tip { color: #94a3b8; }

/* Activity */
.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
}

body.dark-mode .activity-row {
  border-bottom-color: #1e293b;
}

.activity-row:last-child { border-bottom: none; }

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon svg {
  width: 15px;
  height: 15px;
}

.activity-icon.quiz {
  background: #fef3c7;
}
.activity-icon.quiz svg { stroke: #d97706; }

.activity-icon.note {
  background: #dcfce7;
}
.activity-icon.note svg { stroke: #16a34a; }

.activity-icon.study {
  background: #dbeafe;
}
.activity-icon.study svg { stroke: #2563eb; }

.activity-label {
  font-size: 0.85rem;
  color: #334155;
}

body.dark-mode .activity-label { color: #cbd5e1; }

.profile-empty {
  color: #94a3b8;
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 0;
}

/* Settings */
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.9rem;
  color: #334155;
}

body.dark-mode .settings-row {
  border-bottom-color: #334155;
  color: #cbd5e1;
}

.settings-row:last-child { border-bottom: none; }

.danger-row {
  color: #ef4444;
  cursor: pointer;
}

/* Toggle pill switch */
.toggle-pill {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-pill input { display: none; }

.pill-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 34px;
  cursor: pointer;
  transition: background 0.25s;
}

.pill-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.toggle-pill input:checked + .pill-slider {
  background: #0f62fe;
}

.toggle-pill input:checked + .pill-slider::before {
  transform: translateX(20px);
}

/* About card */
.about-card {
  text-align: center;
  padding: 20px 16px;
}

.about-logo img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.about-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

body.dark-mode .about-card h3 { color: #f1f5f9; }

.about-card p {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 4px 0 14px;
}

.about-links {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.about-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #334155;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.2s;
}

.about-link svg {
  width: 14px;
  height: 14px;
}

body.dark-mode .about-link {
  background: #0f172a;
  color: #cbd5e1;
}

.about-link:hover {
  background: #e0e7ff;
}


/* ===================================================
   PATHWAY CONTENT SYSTEM
   ===================================================
   Convention:
   - Add class "pathway-block" to ALL pathway divs (base hide rule)
   - Add "pathway-radiography" for Radiography-only content
   - Add "pathway-medicine" for Medicine/Nursing-only content
   - Add "pathway-clinical" for content shown to BOTH medicine AND radiography
   - Basic Medical Sciences users see NONE of these divs (clean default)

   Example in summaries.json content:
   <div class="pathway-block pathway-radiography">
     <div class="pathway-tag">🩻 Radiography View</div>
     <img src="images/ct-heart.jpg" alt="CT of heart">
     <p>In CT imaging, the heart appears as...</p>
   </div>
   =================================================== */

/* --- Base: all pathway blocks are hidden --- */
.pathway-block {
  display: none;
}

/* --- Radiography pathway: show radiography + clinical blocks --- */
body[data-pathway="radiography"] .pathway-radiography,
body[data-pathway="radiography"] .pathway-clinical {
  display: block;
}

/* --- Medicine/Nursing pathway: show medicine + clinical blocks --- */
body[data-pathway="medicine"] .pathway-medicine,
body[data-pathway="medicine"] .pathway-clinical {
  display: block;
}

/* --- Styling for pathway content blocks (the visual card) --- */
.pathway-block {
  margin-top: 24px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid transparent;
}

body[data-pathway="radiography"] .pathway-radiography,
body[data-pathway="radiography"] .pathway-clinical {
  background: #f0f4ff;
  border-color: #a5b4fc;
}

body.dark-mode[data-pathway="radiography"] .pathway-radiography,
body.dark-mode[data-pathway="radiography"] .pathway-clinical {
  background: #1e1a3a;
  border-color: #4c3f9e;
}

body[data-pathway="medicine"] .pathway-medicine,
body[data-pathway="medicine"] .pathway-clinical {
  background: #f0fdf4;
  border-color: #86efac;
}

body.dark-mode[data-pathway="medicine"] .pathway-medicine,
body.dark-mode[data-pathway="medicine"] .pathway-clinical {
  background: #052e16;
  border-color: #166534;
}

/* The colored label tag inside a pathway block */
.pathway-tag {
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

body[data-pathway="radiography"] .pathway-tag {
  background: #818cf8;
  color: white;
}

body[data-pathway="medicine"] .pathway-tag {
  background: #22c55e;
  color: white;
}

/* Body of the pathway block */
.pathway-body {
  padding: 14px;
}

.pathway-body p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #334155;
  margin-bottom: 10px;
}

body.dark-mode .pathway-body p { color: #cbd5e1; }

.pathway-body img {
  width: 100%;
  border-radius: 8px;
  margin: 10px 0;
  display: block;
}

.pathway-body h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1e293b;
}

body.dark-mode .pathway-body h4 { color: #f1f5f9; }

/* Image caption style */
.pathway-caption {
  font-size: 0.78rem;
  color: #94a3b8;
  text-align: center;
  margin-top: -6px;
  margin-bottom: 10px;
  font-style: italic;
}


/* ===== PATHWAY BADGE (appears at top of summary for clinical users) ===== */
.pathway-badge {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 16px;
  margin-top: 4px;
}

.pathway-badge-radio {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.pathway-badge-medicine {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

body.dark-mode .pathway-badge-radio {
  background: #1e1a3a;
  color: #a5b4fc;
  border-color: #4c3f9e;
}

body.dark-mode .pathway-badge-medicine {
  background: #052e16;
  color: #86efac;
  border-color: #166534;
}


/* ===== PATHWAY ONBOARDING MODAL ===== */
.pathway-onboard {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, 0.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.pathway-onboard-content {
  background: #fff;
  border-radius: 20px;
  padding: 28px 20px 40px;
  width: 100%;
  max-width: 480px;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

body.dark-mode .pathway-onboard-content {
  background: #1e293b;
}

.pathway-onboard-header {
  text-align: center;
  margin-bottom: 24px;
}

.onboard-logo {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.pathway-onboard-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

body.dark-mode .pathway-onboard-header h2 { color: #f1f5f9; }

.pathway-onboard-header p {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
}

.pathway-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pathway-choice-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

body.dark-mode .pathway-choice-card {
  background: #0f172a;
  border-color: #334155;
}

.pathway-choice-card:active {
  transform: scale(0.97);
  border-color: #0f62fe;
  background: #f0f7ff;
}

.pathway-choice-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
}

.pathway-choice-body {
  flex: 1;
}

.pathway-choice-body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

body.dark-mode .pathway-choice-body h3 { color: #f1f5f9; }

.pathway-choice-body p {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.pathway-choice-arrow {
  width: 18px;
  height: 18px;
  stroke: #94a3b8;
  flex-shrink: 0;
}

/* Horizontal swipeable slides inside a pathway block */
.pathway-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding: 14px;
  scrollbar-width: none;
}

.pathway-slides::-webkit-scrollbar { display: none; }

.pathway-slide {
  flex: 0 0 85%;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

body.dark-mode .pathway-slide {
  background: #0f172a;
}

/* ===== IMAGE LIGHTBOX ===== */
.pathway-body img,
.pathway-slide img,
.summary-body img {
  cursor: zoom-in;
  transition: opacity 0.2s;
}

.pathway-body img:active,
.pathway-slide img:active,
.summary-body img:active {
  opacity: 0.75;
}

#imgLightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#imgLightbox.open {
  display: flex;
}

#imgLightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 10px;
  object-fit: contain;
  cursor: zoom-out;
}


/* ================================================
   LANDING SCREEN
   ================================================ */
#landingScreen {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.landing-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #0f172a 0%, #0f62fe 55%, #38bdf8 100%);
}

.landing-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.landing-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 0;
  text-align: center;
}

.landing-logo {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
}

.landing-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

.landing-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}

.landing-wave {
  width: 100%;
  line-height: 0;
  margin-top: auto;
}

.landing-wave svg {
  width: 100%;
  display: block;
}

body.dark-mode .landing-wave svg path { fill: #0f172a; }

.landing-actions {
  background: #f9fafc;
  padding: 12px 24px 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.dark-mode .landing-actions { background: #0f172a; }

.landing-pathway-hint {
  text-align: center;
  font-size: 0.75rem;
  color: #94a3b8;
  letter-spacing: 0.3px;
}

.landing-btn-primary {
  width: 100%;
  padding: 15px;
  background: #0f62fe;
  color: white;
  border: none;
  border-radius: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15,98,254,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.landing-btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 3px 10px rgba(15,98,254,0.25);
}

.landing-btn-secondary {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: #475569;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

body.dark-mode .landing-btn-secondary {
  color: #94a3b8;
  border-color: #334155;
}

.landing-btn-secondary:active { background: #f1f5f9; }


/* ================================================
   AUTH SHEET (slides up from bottom)
   ================================================ */
#authScreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#circleSheetOverlay,
#goalSheetOverlay,
#circleLegendOverlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.auth-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.auth-sheet {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 20px;
  padding: 12px 22px 48px;
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.auth-sheet.open { transform: translateY(0); }

body.dark-mode .auth-sheet { background: #1e293b; }

.auth-handle {
  width: 40px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  margin: 0 auto 20px;
}

body.dark-mode .auth-handle { background: #334155; }

.auth-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}

body.dark-mode .auth-tabs { background: #0f172a; }

.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-tab.active {
  background: #ffffff;
  color: #0f62fe;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

body.dark-mode .auth-tab.active {
  background: #1e293b;
  color: #60a5fa;
}

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

.auth-input-wrap {
  position: relative;
  margin-bottom: 12px;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  stroke: #94a3b8;
  pointer-events: none;
}

.auth-input {
  width: 100%;
  padding: 13px 14px 13px 42px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  color: #1e293b;
  background: #f8fafc;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.auth-input:focus {
  outline: none;
  border-color: #0f62fe;
  background: #ffffff;
}

body.dark-mode .auth-input {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

body.dark-mode .auth-input:focus {
  border-color: #3b82f6;
  background: #0f172a;
}

.auth-btn-main {
  width: 100%;
  padding: 14px;
  background: #0f62fe;
  color: white;
  border: none;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 4px 14px rgba(15,98,254,0.3);
  transition: transform 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.auth-btn-main:active  { transform: scale(0.97); }
.auth-btn-main:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-forgot {
  text-align: center;
  font-size: 0.82rem;
  color: #0f62fe;
  margin-top: 10px;
  cursor: pointer;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: #94a3b8;
  font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

body.dark-mode .auth-divider::before,
body.dark-mode .auth-divider::after { background: #334155; }

.auth-google-btn {
  width: 100%;
  padding: 13px;
  background: #ffffff;
  color: #1e293b;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

body.dark-mode .auth-google-btn {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

.auth-google-btn:active { background: #f1f5f9; }

.auth-terms {
  text-align: center;
  font-size: 0.74rem;
  color: #94a3b8;
  margin-top: 16px;
}




/* ================================================
   EMAIL VERIFICATION SCREEN
   ================================================ */
#verifyScreen {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: #f9fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

body.dark-mode #verifyScreen { background: #0f172a; }

.verify-body {
  max-width: 340px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.verify-icon {
  font-size: 3.5rem;
  margin-bottom: 4px;
  animation: float 3s ease-in-out infinite;
}

.verify-body h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

body.dark-mode .verify-body h2 { color: #f1f5f9; }

.verify-body > p {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
}

.verify-email-address {
  font-weight: 700;
  color: #0f62fe !important;
  font-size: 0.95rem !important;
  word-break: break-all;
}

.verify-sub {
  font-size: 0.84rem !important;
  color: #94a3b8 !important;
  line-height: 1.5;
  max-width: 280px;
}

.verify-btn-main {
  width: 100%;
  padding: 14px;
  background: #0f62fe;
  color: white;
  border: none;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(15,98,254,0.3);
  transition: transform 0.15s;
}

.verify-btn-main:active { transform: scale(0.97); }

.verify-btn-ghost {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: #0f62fe;
  border: 1.5px solid #c7d2fe;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.verify-btn-ghost:active { background: #eef2ff; }

.verify-msg {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.83rem;
  line-height: 1.4;
  margin: 0;
}

.verify-btn-signout {
  background: none;
  border: none;
  color: #94a3b8;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  margin-top: 8px;
  padding: 4px;
}


/* ================================================
   PAGE — fullbleed (viewer + histology + flash-home)
   Strips the default .page padding so content
   fills edge-to-edge without the 40px box gap
   ================================================ */
.page-fullbleed {
  padding: 0 !important;
  overflow-y: auto;
}

/* ================================================
   VERIFY SCREEN — lucide icon version
   ================================================ */
.verify-icon-wrap {
  width: 72px; height: 72px; border-radius: 50%;
  background: #eef2ff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.verify-icon-wrap svg { width: 34px; height: 34px; stroke: #0f62fe; }
body.dark-mode .verify-icon-wrap { background: #1e293b; }

/* ================================================
   PATHWAY ONBOARDING — lucide icon version
   ================================================ */
.pathway-choice-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #eef2ff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pathway-choice-icon svg { width: 22px; height: 22px; stroke: #0f62fe; }
body.dark-mode .pathway-choice-icon { background: #0f172a; border: 1px solid #334155; }
body.dark-mode .pathway-choice-icon svg { stroke: #60a5fa; }

/* ================================================
   QUIZ PAGE — updated UI
   ================================================ */
#quiz h2 {
  text-align: center;
  padding: 3rem 1rem 0.5rem;
  font-weight: 700;
}

.quiz-intro {
  text-align: center;
  font-size: 0.85rem;
  color: #64748b;
  padding: 0 20px 16px;
}

.quiz-section-label {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px 6px;
  font-size: 0.78rem; font-weight: 700;
  color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;
}
.quiz-section-label svg { width: 14px; height: 14px; stroke: #94a3b8; }

.quiz-coming-soon {
  margin-left: auto;
  background: #fef3c7; color: #92400e;
  font-size: 0.68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.3px;
}

.quiz-grid {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 16px 8px;
}

.quiz-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border: 1.5px solid #f1f5f9; border-radius: 14px;
  padding: 14px 16px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
body.dark-mode .quiz-card { background: #1e293b; border-color: #334155; }
.quiz-card:active { transform: scale(0.98); box-shadow: 0 1px 6px rgba(0,0,0,0.08); }

.quiz-card-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #eef2ff, #dbeafe);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.quiz-card-icon svg { width: 20px; height: 20px; stroke: #0f62fe; }
body.dark-mode .quiz-card-icon { background: linear-gradient(135deg, #1e293b, #0f172a); border: 1px solid #334155; }
body.dark-mode .quiz-card-icon svg { stroke: #60a5fa; }

.quiz-card-body { flex: 1; min-width: 0; }
.quiz-card-body h4 { font-size: 0.92rem; font-weight: 700; color: #0f172a; margin: 0 0 2px; }
.quiz-card-body p  { font-size: 0.75rem; color: #94a3b8; margin: 0; }
body.dark-mode .quiz-card-body h4 { color: #f1f5f9; }

.quiz-card-arrow { width: 16px; height: 16px; stroke: #cbd5e1; flex-shrink: 0; }

.quiz-coming-card {
  display: flex; align-items: center; gap: 12px;
  margin: 0 16px 16px;
  padding: 14px 16px; border-radius: 14px;
  background: #f8fafc; border: 1.5px dashed #e2e8f0;
  font-size: 0.84rem; color: #94a3b8;
}
.quiz-coming-card svg { width: 18px; height: 18px; stroke: #cbd5e1; flex-shrink: 0; }
body.dark-mode .quiz-coming-card { background: #0f172a; border-color: #334155; }

/* Pre-quiz screen */
.pre-quiz {
  margin: 16px;
  background: #fff; border-radius: 18px;
  padding: 24px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  text-align: center;
}
body.dark-mode .pre-quiz { background: #1e293b; }

.pre-quiz-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.pre-quiz-icon svg { width: 24px; height: 24px; stroke: white; }

.pre-quiz h3 {
  font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 6px;
}
body.dark-mode .pre-quiz h3 { color: #f1f5f9; }

.pre-quiz p { font-size: 0.84rem; color: #64748b; margin: 0 0 18px; }

.pre-quiz-controls { display: flex; flex-direction: column; gap: 10px; }

.pre-quiz-start {
  width: 100%; padding: 13px;
  background: #0f62fe; color: white; border: none;
  border-radius: 12px; font-family: 'Poppins', sans-serif;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,98,254,0.3);
}
.pre-quiz-cancel {
  width: 100%; padding: 12px;
  background: #f1f5f9; color: #64748b; border: none;
  border-radius: 12px; font-family: 'Poppins', sans-serif;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
body.dark-mode .pre-quiz-cancel { background: #0f172a; color: #94a3b8; }

/* ================================================
   CREATE FLASHCARD MODAL — new fc-modal design
   ================================================ */
.fc-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.55);
  align-items: flex-end; justify-content: center;
  transition: opacity 0.32s ease;
  opacity: 0;
}
.fc-modal-overlay.fc-open { opacity: 1; }

.fc-modal-sheet {
  background: #fff; width: 100%; max-width: 600px;
  border-radius: 28px 28px 0 0;
  padding: 8px 0 0;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
}
.fc-modal-overlay.fc-open .fc-modal-sheet { transform: translateY(0); }
body.dark-mode .fc-modal-sheet { background: #1e293b; }

.fc-modal-handle {
  width: 40px; height: 4px; background: #e2e8f0;
  border-radius: 2px; margin: 10px auto 0;
}
body.dark-mode .fc-modal-handle { background: #334155; }

.fc-modal-inner { padding: 16px 20px 48px; }

.fc-modal-header {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px;
}
.fc-modal-header-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: #eef2ff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fc-modal-header-icon svg { width: 20px; height: 20px; stroke: #0f62fe; }
body.dark-mode .fc-modal-header-icon { background: #0f172a; }

.fc-modal-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0 0 2px; }
body.dark-mode .fc-modal-title { color: #f1f5f9; }

.fc-modal-sub { font-size: 0.78rem; color: #94a3b8; margin: 0; }

.fc-modal-close {
  margin-left: auto; background: #f1f5f9; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.fc-modal-close svg { width: 16px; height: 16px; stroke: #64748b; }
body.dark-mode .fc-modal-close { background: #0f172a; }
body.dark-mode .fc-modal-close svg { stroke: #94a3b8; }

.fc-field { margin-bottom: 14px; }

.fc-label {
  display: block; font-size: 0.75rem; font-weight: 700;
  color: #64748b; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.fc-label-hint { font-size: 0.72rem; color: #94a3b8; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }

.fc-input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #e2e8f0; border-radius: 11px;
  font-family: 'Poppins', sans-serif; font-size: 0.9rem;
  color: #1e293b; background: #f8fafc;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
}
.fc-input:focus { outline: none; border-color: #0f62fe; background: #fff; }
body.dark-mode .fc-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }
body.dark-mode .fc-input:focus { border-color: #3b82f6; }

.fc-textarea { resize: none; }

.fc-modal-actions { display: flex; gap: 10px; margin-top: 18px; }

.fc-save-btn {
  flex: 1; padding: 13px;
  background: #0f62fe; color: white; border: none;
  border-radius: 11px; font-family: 'Poppins', sans-serif;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,98,254,0.3);
  transition: transform 0.15s;
}
.fc-save-btn:active { transform: scale(0.97); }

.fc-clear-btn {
  padding: 13px 18px;
  background: #f1f5f9; color: #64748b; border: none;
  border-radius: 11px; font-family: 'Poppins', sans-serif;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
body.dark-mode .fc-clear-btn { background: #0f172a; color: #94a3b8; }

/* ================================================
   FLASH VIEWER
   ================================================ */
.fv-header {
  display: flex; align-items: center; gap: 14px;
  padding: 52px 20px 16px;
  background: #fff; border-bottom: 1px solid #f1f5f9;
  position: sticky; top: 0; z-index: 10;
}
body.dark-mode .fv-header { background: #1e293b; border-color: #334155; }

.fv-back-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
body.dark-mode .fv-back-btn { background: #0f172a; }
.fv-back-btn svg { width: 18px; height: 18px; stroke: #0f62fe; }

.fv-title-wrap { flex: 1; min-width: 0; }
.fv-title-wrap h2 {
  font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dark-mode .fv-title-wrap h2 { color: #f1f5f9; }
.fv-sub { font-size: 0.75rem; color: #94a3b8; margin: 2px 0 0; }

.fv-progress-wrap {
  padding: 14px 20px 0; display: flex; align-items: center; gap: 12px;
}
.fv-progress-bar { flex: 1; height: 6px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
body.dark-mode .fv-progress-bar { background: #334155; }
.fv-progress-bar > div {
  height: 100%; width: 0%; background: #0f62fe; border-radius: 6px; transition: width 0.3s ease;
}
.fv-progress-text { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; }

.fv-stack {
  padding: 24px 20px 130px;
  display: flex; align-items: flex-start; justify-content: center;
}
.fv-card { width: 100%; transition: transform 0.26s ease, opacity 0.26s ease; }

.fv-card-inner {
  width: 100%; height: clamp(220px, 42vw, 320px);
  border-radius: 20px; position: relative;
  transform-style: preserve-3d; transition: transform 0.45s ease;
  cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.fv-card-inner.flipped { transform: rotateY(180deg); }

.fv-face {
  position: absolute; inset: 0; border-radius: 20px;
  backface-visibility: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 28px; text-align: center; overflow: hidden;
}
.fv-front { background: #fff; border: 1.5px solid #e2e8f0; }
body.dark-mode .fv-front { background: #1e293b; border-color: #334155; }

.fv-face.fv-back {
  background: linear-gradient(135deg, #0f62fe 0%, #1e40af 100%);
  transform: rotateY(180deg); color: white;
}

.fv-topic-chip {
  position: absolute; top: 14px; right: 14px;
  background: #eef2ff; color: #0f62fe;
  font-size: 0.68rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dark-mode .fv-topic-chip { background: #0f172a; color: #60a5fa; }

.fv-card-text {
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  font-weight: 600; color: #0f172a; line-height: 1.5;
  overflow-y: auto; max-height: 100%;
}
.fv-face.fv-back .fv-card-text { color: white; font-weight: 400; font-size: clamp(0.85rem, 2.2vw, 1rem); }
body.dark-mode .fv-front .fv-card-text { color: #f1f5f9; }

.fv-flip-hint { position: absolute; bottom: 14px; font-size: 0.7rem; color: #94a3b8; }

.fv-card-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }

.fv-edit-btn, .fv-del-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 22px; border: none;
  font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: transform 0.15s;
}
.fv-edit-btn:active, .fv-del-btn:active { transform: scale(0.95); }
.fv-edit-btn { background: #e0f2fe; color: #0369a1; }
.fv-del-btn  { background: #fee2e2; color: #dc2626; }
.fv-edit-btn svg, .fv-del-btn svg { width: 13px; height: 13px; }

.fv-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 60px 20px; color: #94a3b8; font-size: 0.9rem; text-align: center;
}
.fv-empty svg { width: 48px; height: 48px; stroke: #cbd5e1; }

.fv-controls {
  position: fixed; bottom: 74px; left: 0; right: 0;
  display: flex; gap: 12px; padding: 0 20px 12px;
  background: linear-gradient(to top, #f9fafc 70%, transparent);
  pointer-events: none;
}
body.dark-mode .fv-controls { background: linear-gradient(to top, #0f172a 70%, transparent); }

.fv-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px; border-radius: 14px; border: 1.5px solid #e2e8f0;
  background: #fff; color: #334155;
  font-family: 'Poppins', sans-serif; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; pointer-events: all;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: transform 0.15s;
}
.fv-btn:active { transform: scale(0.96); }
body.dark-mode .fv-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
.fv-btn svg { width: 16px; height: 16px; }

.fv-btn-primary {
  background: #0f62fe; color: white; border-color: #0f62fe;
  box-shadow: 0 4px 14px rgba(15,98,254,0.3);
}
body.dark-mode .fv-btn-primary { background: #1d4ed8; border-color: #1d4ed8; }

/* Edit modal — centered card */
.fv-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fv-modal-content {
  background: #fff; border-radius: 20px;
  padding: 0; width: 100%; max-width: 480px;
  animation: slideUp 0.3s ease;
}
body.dark-mode .fv-modal-content { background: #1e293b; }

.fv-modal-handle { width: 40px; height: 4px; background: #e2e8f0; border-radius: 2px; margin: 14px auto 0; }
body.dark-mode .fv-modal-handle { background: #334155; }
.fv-modal-inner { padding: 16px 20px 28px; }

.fv-modal-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.fv-modal-title-icon {
  width: 36px; height: 36px; border-radius: 10px; background: #eef2ff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fv-modal-title-icon svg { width: 18px; height: 18px; stroke: #0f62fe; }
body.dark-mode .fv-modal-title-icon { background: #0f172a; }
.fv-modal-title h3 { font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0 0 2px; }
.fv-modal-title p  { font-size: 0.75rem; color: #94a3b8; margin: 0; }
body.dark-mode .fv-modal-title h3 { color: #f1f5f9; }

.fv-modal-field { margin-bottom: 12px; }
.fv-modal-field label {
  display: block; font-size: 0.72rem; font-weight: 700; color: #64748b;
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px;
}
.fv-modal-field textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid #e2e8f0;
  border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 0.9rem;
  resize: none; color: #1e293b; background: #f8fafc; box-sizing: border-box;
  transition: border-color 0.2s;
}
.fv-modal-field textarea:focus { outline: none; border-color: #0f62fe; background: #fff; }
body.dark-mode .fv-modal-field textarea { background: #0f172a; border-color: #334155; color: #f1f5f9; }

.fv-modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.fv-modal-save {
  flex: 1; padding: 12px; background: #0f62fe; color: white; border: none;
  border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.fv-modal-cancel {
  padding: 12px 18px; background: #f1f5f9; color: #64748b; border: none;
  border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
body.dark-mode .fv-modal-cancel { background: #0f172a; color: #94a3b8; }

/* ================================================
   HISTOLOGY VIEWER
   ================================================ */
.histo-slide-wrap { padding: 16px 20px 120px; }

.histo-topic-badge {
  display: inline-block; background: #eef2ff; color: #0f62fe;
  font-size: 0.72rem; font-weight: 700; padding: 5px 14px; border-radius: 20px;
  margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px;
}
body.dark-mode .histo-topic-badge { background: #1e293b; color: #60a5fa; }

.histo-img-container {
  position: relative; border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15); background: #0f172a;
  cursor: pointer; width: 100%;
}
.histo-img-container img {
  width: 100%; display: block;
  transition: transform 0.22s ease, opacity 0.22s ease; cursor: pointer;
}
.histo-tap-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.7); color: white;
  padding: 7px 16px; border-radius: 22px; font-size: 0.78rem; white-space: nowrap;
  pointer-events: none; backdrop-filter: blur(4px);
}
.histo-swipe-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(0,0,0,0.65); color: white; padding: 8px 16px; border-radius: 22px;
  font-size: 0.8rem; pointer-events: none; animation: pulse 1.8s infinite; backdrop-filter: blur(4px);
}
.histo-qa-card {
  margin-top: 16px; background: #fff; border-radius: 18px;
  padding: 4px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.07); overflow: hidden;
  animation: slideUp 0.3s ease;
}
body.dark-mode .histo-qa-card { background: #1e293b; }
.histo-qa-item { padding: 14px 18px; border-bottom: 1px solid #f1f5f9; }
body.dark-mode .histo-qa-item { border-color: #334155; }
.histo-qa-item:last-child { border-bottom: none; }
.histo-q { font-size: 0.88rem; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
body.dark-mode .histo-q { color: #f1f5f9; }
.histo-a { font-size: 0.85rem; color: #0f62fe; line-height: 1.6; }
body.dark-mode .histo-a { color: #60a5fa; }

/* ================================================
   FLASH HOME — My Flashcards
   ================================================ */
.fh-header {
  background: #fff; padding: 0 20px 16px;
  border-bottom: 1px solid #f1f5f9; position: sticky; top: 0; z-index: 10;
}
body.dark-mode .fh-header { background: #1e293b; border-color: #334155; }
.fh-header-top { display: flex; align-items: center; gap: 14px; padding-top: 52px; }

.fh-back-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
body.dark-mode .fh-back-btn { background: #0f172a; }
.fh-back-btn svg { width: 18px; height: 18px; stroke: #0f62fe; }
.fh-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin: 0; }
body.dark-mode .fh-title { color: #f1f5f9; }
.fh-sub { font-size: 0.75rem; color: #94a3b8; margin: 2px 0 0; }

.fh-stats-bar {
  display: flex; align-items: center;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  padding: 14px 20px;
}
.fh-stat { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.fh-stat-num { font-size: 1.4rem; font-weight: 800; color: white; line-height: 1; }
.fh-stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.75); font-weight: 500; }
.fh-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.2); }

.fh-topics-area { padding: 16px 16px 100px; display: flex; flex-direction: column; gap: 10px; }

.fh-topic-row {
  background: #fff; border-radius: 16px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1.5px solid #f1f5f9;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
body.dark-mode .fh-topic-row { background: #1e293b; border-color: #334155; }
.fh-topic-row:active { transform: scale(0.98); box-shadow: 0 1px 5px rgba(0,0,0,0.08); }

.fh-topic-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.1rem; font-weight: 800;
  color: white; text-transform: uppercase;
}
.fh-topic-info { flex: 1; min-width: 0; }
.fh-topic-name {
  font-size: 0.92rem; font-weight: 700; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dark-mode .fh-topic-name { color: #f1f5f9; }
.fh-topic-count { font-size: 0.72rem; color: #94a3b8; margin-top: 2px; }
.fh-topic-arrow { width: 18px; height: 18px; stroke: #cbd5e1; flex-shrink: 0; }

.fh-panel {
  position: fixed; inset: 0; z-index: 500; background: #f9fafc;
  display: flex; flex-direction: column; animation: slideUp 0.3s ease;
  padding-bottom: 70px; overflow-y: auto;
}
body.dark-mode .fh-panel { background: #0f172a; }
.fh-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 52px 20px 14px; background: #fff; border-bottom: 1px solid #f1f5f9;
  position: sticky; top: 0; z-index: 10;
}
body.dark-mode .fh-panel-header { background: #1e293b; border-color: #334155; }
.fh-panel-title { font-size: 1rem; font-weight: 700; color: #0f172a; }
body.dark-mode .fh-panel-title { color: #f1f5f9; }
.fh-panel-count { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }
.fh-panel-actions { display: flex; gap: 8px; }
.fh-action-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 20px; border: none;
  font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.fh-action-btn svg { width: 13px; height: 13px; }
.fh-learn-btn  { background: #0f62fe; color: white; }
.fh-delete-btn { background: #fee2e2; color: #dc2626; }

.mini-card {
  background: #fff; margin: 8px 16px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid #f1f5f9; font-size: 0.85rem;
}
body.dark-mode .mini-card { background: #1e293b; border-color: #334155; }

.fh-close-btn {
  display: block; margin: 16px 20px; padding: 12px; border-radius: 12px;
  background: #f1f5f9; color: #64748b; border: none; width: calc(100% - 40px);
  font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
body.dark-mode .fh-close-btn { background: #1e293b; color: #94a3b8; }

.fh-empty {
  text-align: center; padding: 60px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fh-empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: #eef2ff; display: flex; align-items: center; justify-content: center;
}
.fh-empty-icon svg { width: 32px; height: 32px; stroke: #0f62fe; }
body.dark-mode .fh-empty-icon { background: #1e293b; }
.fh-empty-title { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 0; }
body.dark-mode .fh-empty-title { color: #f1f5f9; }
.fh-empty-sub { font-size: 0.85rem; color: #94a3b8; margin: 0; }

.fh-fab {
  position: fixed; right: 18px; bottom: 82px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #0f62fe; color: white; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(15,98,254,0.4); z-index: 100;
  transition: transform 0.2s;
}
.fh-fab:active { transform: scale(0.92); }
.fh-fab svg { width: 24px; height: 24px; }

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


/* ================================================
   QUIZ PAGE — dropdown style
   ================================================ */

.quiz-subject-card {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: 14px; padding: 16px 18px;
  margin-bottom: 8px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1.5px solid #f1f5f9;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
body.dark-mode .quiz-subject-card { background: #1e293b; border-color: #334155; }
.quiz-subject-card.open { border-color: #0f62fe; background: #f0f7ff; }
body.dark-mode .quiz-subject-card.open { background: #1e1a3a; border-color: #3b82f6; }

.quiz-subject-left { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #1e293b; font-size: 0.95rem; }
body.dark-mode .quiz-subject-left { color: #f1f5f9; }

.quiz-subject-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #eef2ff, #dbeafe);
  display: flex; align-items: center; justify-content: center;
}
.quiz-subject-icon svg { width: 18px; height: 18px; stroke: #0f62fe; }
body.dark-mode .quiz-subject-icon { background: linear-gradient(135deg, #1e293b, #0f172a); border: 1px solid #334155; }
body.dark-mode .quiz-subject-icon svg { stroke: #60a5fa; }

.quiz-subject-soon { cursor: default; opacity: 0.75; }

.quiz-soon-badge {
  background: #fef3c7; color: #92400e;
  font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
body.dark-mode .quiz-soon-badge { background: #1c1a0f; color: #d97706; }

/* Topic rows inside dropdown */
.quiz-topic-row {
  display: flex; align-items: center; gap: 12px;
  background: #f8fafc; border-radius: 12px; padding: 12px 14px;
  margin: 4px 0; cursor: pointer;
  border: 1px solid #f1f5f9;
  transition: background 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
body.dark-mode .quiz-topic-row { background: #0f172a; border-color: #334155; }
.quiz-topic-row:active { transform: scale(0.98); background: #eef2ff; }
body.dark-mode .quiz-topic-row:active { background: #1e1a3a; }

.quiz-topic-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: #eef2ff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.quiz-topic-icon svg { width: 16px; height: 16px; stroke: #0f62fe; }
body.dark-mode .quiz-topic-icon { background: #1e293b; }
body.dark-mode .quiz-topic-icon svg { stroke: #60a5fa; }

.quiz-topic-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.quiz-topic-name { font-size: 0.88rem; font-weight: 600; color: #1e293b; }
body.dark-mode .quiz-topic-name { color: #f1f5f9; }
.quiz-topic-sub { font-size: 0.72rem; color: #94a3b8; }
.quiz-topic-arrow { width: 15px; height: 15px; stroke: #cbd5e1; flex-shrink: 0; }

/* Topics list inside dropdown */
#GrossQuiz.topics-list { margin-left: 0; margin-top: 0; padding: 4px 0 8px; }

/* Pre-quiz screen */
.pre-quiz {
  margin: 12px 0 16px;
  background: #fff; border-radius: 18px; padding: 24px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08); text-align: center;
  border: 1.5px solid #e2e8f0;
}
body.dark-mode .pre-quiz { background: #1e293b; border-color: #334155; }

.pre-quiz-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.pre-quiz-icon svg { width: 24px; height: 24px; stroke: white; }

.pre-quiz h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 6px; }
body.dark-mode .pre-quiz h3 { color: #f1f5f9; }
.pre-quiz p  { font-size: 0.84rem; color: #64748b; margin: 0 0 18px; line-height: 1.5; }

.pre-quiz-controls { display: flex; flex-direction: column; gap: 10px; }

.pre-quiz-start {
  width: 100%; padding: 13px;
  background: #0f62fe; color: white; border: none;
  border-radius: 12px; font-family: 'Poppins', sans-serif;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,98,254,0.3);
  transition: transform 0.15s;
}
.pre-quiz-start:active { transform: scale(0.97); }

.pre-quiz-cancel {
  width: 100%; padding: 12px;
  background: #f1f5f9; color: #64748b; border: none;
  border-radius: 12px; font-family: 'Poppins', sans-serif;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
body.dark-mode .pre-quiz-cancel { background: #0f172a; color: #94a3b8; }


/* ================================================
   FLASHCARD QUIZ ENGINE — updated UI
   ================================================ */
.flashcard-container {
  position: fixed; inset: 0;
  background: #f1f5f9; z-index: 200;
  display: flex; flex-direction: column;
  padding: 0;
}

body.dark-mode .flashcard-container { background: #0f172a; }

/* Top header bar */
.qz-header {
  display: flex; align-items: center; gap: 12px;
  padding: 52px 20px 14px;
  background: #fff; border-bottom: 1px solid #f1f5f9;
}
body.dark-mode .qz-header { background: #1e293b; border-color: #334155; }

.qz-close-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: #f1f5f9; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
body.dark-mode .qz-close-btn { background: #0f172a; }
.qz-close-btn svg { width: 18px; height: 18px; stroke: #64748b; }

.qz-progress-wrap {
  flex: 1; height: 8px; background: #e2e8f0; border-radius: 8px; overflow: hidden;
}
body.dark-mode .qz-progress-wrap { background: #334155; }

.qz-progress-wrap > div {
  height: 100%; background: #0f62fe; border-radius: 8px; transition: width 0.35s ease; width: 0%;
}
/* progressFill is inside qz-progress-wrap */
#progressFill { height: 100%; background: #0f62fe; border-radius: 8px; transition: width 0.35s ease; width: 0%; }

.qz-progress-text { font-size: 0.78rem; color: #94a3b8; white-space: nowrap; font-weight: 600; }

/* Reveal hint */
.reveal {
  text-align: center; font-size: 0.8rem; color: #94a3b8;
  padding: 14px 20px 0; margin: 0;
}

/* Flashcard */
.flashcard {
  margin: 16px 20px;
  height: clamp(200px, 45vw, 300px);
  border-radius: 22px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.flashcard.flipped { transform: rotateY(180deg); }

.card-face {
  position: absolute; inset: 0; border-radius: 22px;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem); line-height: 1.55;
  overflow-y: auto;
}

.front.card-face {
  background: #fff; color: #0f172a; font-weight: 600;
  border: 1.5px solid #e2e8f0;
}
body.dark-mode .front.card-face { background: #1e293b; color: #f1f5f9; border-color: #334155; }

.back.card-face {
  background: linear-gradient(135deg, #0f62fe 0%, #1e40af 100%);
  color: white; font-weight: 400;
  transform: rotateY(180deg);
}

/* Wrong / Right buttons */
.flashcard-buttons {
  display: flex; gap: 12px; padding: 0 20px;
  margin-top: auto; padding-bottom: 20px;
}

.qz-btn {
  flex: 1; padding: 14px;
  border: none; border-radius: 14px;
  font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.qz-btn:active { transform: scale(0.96); }
.qz-btn svg { width: 18px; height: 18px; }

.qz-wrong { background: #fee2e2; color: #dc2626; }
.qz-right { background: #dcfce7; color: #16a34a; }
body.dark-mode .qz-wrong { background: #2d0a0a; color: #f87171; }
body.dark-mode .qz-right { background: #052e16; color: #4ade80; }

/* Score screen */
.score-screen {
  position: fixed; inset: 0; z-index: 200;
  background: #f1f5f9;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 24px; text-align: center;
}
body.dark-mode .score-screen { background: #0f172a; }

.score-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(15,98,254,0.3);
}
.score-icon svg { width: 38px; height: 38px; stroke: white; }

.score-screen h3 { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
body.dark-mode .score-screen h3 { color: #f1f5f9; }

.score-screen p { font-size: 1rem; color: #64748b; margin: 0 0 28px; }

.score-controls { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }

.score-retry-btn {
  width: 100%; padding: 14px;
  background: #0f62fe; color: white; border: none;
  border-radius: 13px; font-family: 'Poppins', sans-serif;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,98,254,0.3);
}

.score-home-btn {
  width: 100%; padding: 13px;
  background: #f1f5f9; color: #475569; border: none;
  border-radius: 13px; font-family: 'Poppins', sans-serif;
  font-size: 0.92rem; font-weight: 600; cursor: pointer;
}
body.dark-mode .score-home-btn { background: #1e293b; color: #94a3b8; }


/* ================================================
   QUIZ FLASHCARD FLIP — DEFINITIVE FIX
   Uses flashcard-inner wrapper for clean 3D flip.
   Overrides all earlier conflicting rules.
   ================================================ */

/* Outer card: perspective container only, no transform */
#card.flashcard {
  perspective: 1200px;
  transform: none !important;
  transform-style: flat !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  width: calc(100% - 40px) !important;
  max-width: 600px !important;
  margin: 12px auto !important;
  height: clamp(200px, 42vw, 290px) !important;
  position: relative !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

/* Inner wrapper: this rotates */
#card .flashcard-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  border-radius: 20px;
}

#card.flipped .flashcard-inner {
  transform: rotateY(180deg);
}

/* Completely disable the old opacity-based flip rules */
#card .card-face {
  transition: none !important;
}
#card.flipped .front {
  transform: rotateY(0deg) !important;
  opacity: 1 !important;
}
#card.flipped .back {
  transform: rotateY(180deg) !important;
  opacity: 1 !important;
}

/* Card faces inside the inner wrapper */
#card .card-face {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  text-align: center !important;
  font-size: clamp(0.88rem, 2.5vw, 1.05rem) !important;
  line-height: 1.55 !important;
  overflow-y: auto !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important;
}

#card .front.card-face {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border: 1.5px solid #e2e8f0 !important;
  transform: rotateY(0deg) !important;
}
body.dark-mode #card .front.card-face {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

#card .back.card-face {
  background: linear-gradient(135deg, #0f62fe 0%, #1e40af 100%) !important;
  color: white !important;
  font-weight: 400 !important;
  transform: rotateY(180deg) !important;
  border: none !important;
}


/* ================================================
   AI ANATOMY TUTOR
   ================================================ */

/* Floating button */
.ai-chat-btn {
  position: fixed;
  bottom: 82px; right: 18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(15,98,254,0.4);
  z-index: 400;
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ai-chat-btn:active {
  transform: scale(0.9);
  box-shadow: 0 3px 10px rgba(15,98,254,0.3);
}
.ai-chat-btn svg { width: 22px; height: 22px; stroke: white; }

/* Chat panel — slides up from bottom */
.ai-chat-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 80vh;
  max-height: 700px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  z-index: 9999;
  display: flex; flex-direction: column;
  transform : translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
}
body.dark-mode .ai-chat-panel { background: #1e293b; }

.ai-chat-panel.open { transform: translateY(0); }

/* Header */
.ai-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
body.dark-mode .ai-chat-header { border-color: #334155; }

.ai-chat-header-left { display: flex; align-items: center; gap: 12px; }

.ai-chat-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-chat-avatar svg { width: 20px; height: 20px; stroke: white; }

.ai-chat-title {
  font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0;
}
body.dark-mode .ai-chat-title { color: #f1f5f9; }

.ai-chat-status {
  font-size: 0.72rem; color: #22c55e; margin: 0; font-weight: 500;
}

.ai-chat-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: #f1f5f9; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
body.dark-mode .ai-chat-close { background: #0f172a; }
.ai-chat-close svg { width: 16px; height: 16px; stroke: #64748b; }

/* Messages area */
.ai-chat-messages {
  flex: 1; overflow-y: auto;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}

/* Message bubbles */
.ai-msg {
  display: flex; flex-direction: column; max-width: 85%;
}

.ai-msg-ai   { align-self: flex-start; align-items: flex-start; }
.ai-msg-user { align-self: flex-end;   align-items: flex-end; }

.ai-msg-bubble {
  padding: 11px 14px;
  border-radius: 18px;
  font-size: 0.88rem;
  line-height: 1.55;
  word-break: break-word;
}

.ai-msg-ai .ai-msg-bubble {
  background: #f1f5f9; color: #1e293b;
  border-bottom-left-radius: 4px;
}
body.dark-mode .ai-msg-ai .ai-msg-bubble {
  background: #0f172a; color: #e2e8f0;
}

.ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  color: white;
  border-bottom-right-radius: 4px;
}

.ai-msg-time {
  font-size: 0.65rem; color: #94a3b8; margin-top: 3px; padding: 0 4px;
}

/* Typing indicator */
.ai-typing-bubble {
  display: flex; align-items: center; gap: 5px;
  padding: 12px 16px !important;
}
.ai-typing-bubble span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #94a3b8;
  animation: aiTypingBounce 1.2s infinite ease-in-out;
}
.ai-typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-bubble span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%            { transform: translateY(-6px); opacity: 1; }
}

/* Input area */
.ai-chat-input-wrap {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
body.dark-mode .ai-chat-input-wrap { border-color: #334155; }

.ai-chat-input {
  flex: 1;
  padding: 11px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  color: #1e293b; background: #f8fafc;
  resize: none; outline: none;
  max-height: 120px; overflow-y: auto;
  transition: border-color 0.2s;
  line-height: 1.4;
}
.ai-chat-input:focus { border-color: #0f62fe; background: #fff; }
body.dark-mode .ai-chat-input {
  background: #0f172a; border-color: #334155; color: #f1f5f9;
}
body.dark-mode .ai-chat-input:focus { border-color: #3b82f6; }

.ai-chat-send {
  width: 42px; height: 42px; border-radius: 50%;
  background: #0f62fe; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s, background 0.2s;
  box-shadow: 0 3px 10px rgba(15,98,254,0.3);
}
.ai-chat-send:active   { transform: scale(0.9); }
.ai-chat-send:disabled { background: #94a3b8; box-shadow: none; }
.ai-chat-send svg { width: 18px; height: 18px; stroke: white; }

/* AI chat — mobile only, no desktop override */


/* ── DOCUMENT UPLOAD UI ── */
.ai-attach-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: #f1f5f9; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ai-attach-btn:active { background: #e2e8f0; }
.ai-attach-btn svg { width: 17px; height: 17px; stroke: #64748b; }
body.dark-mode .ai-attach-btn { background: #0f172a; }
body.dark-mode .ai-attach-btn svg { stroke: #94a3b8; }

/* File chip — shows filename after upload */
.ai-file-chip {
  display: flex; align-items: center; gap: 5px;
  background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 20px; padding: 4px 10px 4px 8px;
  font-size: 0.75rem; color: #3730a3; font-weight: 600;
  white-space: nowrap; max-width: 140px;
  flex-shrink: 0;
}
body.dark-mode .ai-file-chip {
  background: #1e1a3a; border-color: #4c3f9e; color: #a5b4fc;
}
.ai-file-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.ai-file-chip button {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; color: inherit; flex-shrink: 0;
}
.ai-file-chip button svg { width: 12px; height: 12px; }

/* Rearrange input wrap when chip is showing */
/* Message file indicator */
.ai-msg-user .ai-msg-bubble {
  white-space: pre-wrap;
}


/* ── AI BUTTON — draggable + auto-hide ── */
.ai-chat-btn {
  position: fixed;
  bottom: auto;
  right: auto;
  top: calc(100vh - 150px);  /* default position above nav */
  right: 18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(15,98,254,0.4);
  z-index: 400;
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.2s ease, box-shadow 0.2s ease;
  touch-action: none; /* needed for drag */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ai-chat-btn svg { width: 22px; height: 22px; stroke: white; pointer-events: none; }
.ai-chat-btn:active { transform: scale(0.9); }

/* File chip — above the input row */
.ai-file-chip {
  display: flex; align-items: center; gap: 6px;
  background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 10px; padding: 6px 10px 6px 10px;
  font-size: 0.75rem; color: #3730a3; font-weight: 600;
  margin: 0 14px 0;
  flex-shrink: 0;
}
body.dark-mode .ai-file-chip { background: #1e1a3a; border-color: #4c3f9e; color: #a5b4fc; }
.ai-file-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.ai-file-chip button { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; color: inherit; }
.ai-file-chip button svg { width: 12px; height: 12px; }

/* Clean input wrap — simple row, no wrapping */
.ai-chat-input-wrap {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  padding: 10px 14px !important;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}
body.dark-mode .ai-chat-input-wrap { border-color: #334155; }

.ai-chat-input {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 10px 13px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.88rem !important;
  color: #1e293b !important;
  background: #f8fafc !important;
  resize: none !important;
  outline: none !important;
  max-height: 120px !important;
  overflow-y: auto !important;
  line-height: 1.4 !important;
  display: block !important;
  width: auto !important;
}
.ai-chat-input:focus { border-color: #0f62fe !important; background: #fff !important; }
body.dark-mode .ai-chat-input { background: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }
body.dark-mode .ai-chat-input:focus { border-color: #3b82f6 !important; }

/* ================================================
   STEEPLECHASE MODE
   ================================================ */

/* Entry card on quiz page */
.steeplechase-entry-card {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  border-radius: 16px; padding: 18px 18px;
  margin-top: 12px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 20px rgba(49,46,129,0.3);
  -webkit-tap-highlight-color: transparent;
}
.steeplechase-entry-card:active { transform: scale(0.98); }

.sc-entry-left { display: flex; align-items: center; gap: 14px; }

.sc-entry-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
}
.sc-entry-icon svg { width: 22px; height: 22px; stroke: white; }

.sc-entry-info h3 { font-size: 0.95rem; font-weight: 700; color: white; margin: 0 0 2px; }
.sc-entry-info p  { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin: 0; }

.sc-entry-badge {
  background: #fbbf24; color: #1c1917;
  font-size: 0.68rem; font-weight: 800;
  padding: 4px 10px; border-radius: 20px;
  letter-spacing: 0.5px;
}

/* ── SETUP SCREEN ── */
.sc-setup { display: flex; flex-direction: column; height: 100%; }

.sc-setup-header {
  display: flex; align-items: center; gap: 14px;
  padding: 52px 20px 16px;
  background: #fff; border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
body.dark-mode .sc-setup-header { background: #1e293b; border-color: #334155; }
.sc-setup-header h2 { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0; }
body.dark-mode .sc-setup-header h2 { color: #f1f5f9; }

.sc-setup-body { flex: 1; overflow-y: auto; padding: 20px 16px 100px; }

.sc-setup-hero {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  border-radius: 16px; padding: 20px;
  text-align: center; margin-bottom: 24px;
}
.sc-setup-hero-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.sc-setup-hero-icon svg { width: 26px; height: 26px; stroke: white; }
.sc-setup-hero p { color: rgba(255,255,255,0.85); font-size: 0.85rem; margin: 0; line-height: 1.5; }

.sc-section-label {
  font-size: 0.72rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* Difficulty cards */
.sc-difficulty-row { display: flex; gap: 10px; margin-bottom: 24px; }

.sc-diff-card {
  flex: 1; padding: 14px 8px; border-radius: 14px;
  background: #fff; border: 2px solid #e2e8f0;
  text-align: center; cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
body.dark-mode .sc-diff-card { background: #1e293b; border-color: #334155; }
.sc-diff-card:active { transform: scale(0.97); }

.sc-diff-active {
  border-color: #312e81;
  background: #eef2ff;
}
body.dark-mode .sc-diff-active { background: #1e1b4b; border-color: #6366f1; }

.sc-diff-time {
  font-size: 1.4rem; font-weight: 800; color: #312e81; line-height: 1;
}
body.dark-mode .sc-diff-time { color: #a5b4fc; }
.sc-diff-name { font-size: 0.8rem; font-weight: 700; color: #1e293b; margin-top: 4px; }
body.dark-mode .sc-diff-name { color: #f1f5f9; }
.sc-diff-sub  { font-size: 0.68rem; color: #94a3b8; margin-top: 2px; }

/* Section list */
.sc-section-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.sc-section-loading { color: #94a3b8; font-size: 0.85rem; padding: 12px; text-align: center; }

.sc-section-item {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
  padding: 13px 16px; cursor: pointer; transition: all 0.15s;
}
body.dark-mode .sc-section-item { background: #1e293b; border-color: #334155; }
.sc-section-item:active { transform: scale(0.98); }
.sc-section-selected { border-color: #312e81; background: #eef2ff; }
body.dark-mode .sc-section-selected { background: #1e1b4b; border-color: #6366f1; }

.sc-section-item-name  { font-size: 0.9rem; font-weight: 600; color: #1e293b; }
body.dark-mode .sc-section-item-name { color: #f1f5f9; }
.sc-section-item-count { font-size: 0.75rem; color: #94a3b8; display: block; margin-top: 2px; }

.sc-section-item-check svg { width: 18px; height: 18px; stroke: #94a3b8; }
.sc-section-selected .sc-section-item-check svg { stroke: #312e81; }

.sc-start-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  color: white; border: none; border-radius: 14px;
  font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(49,46,129,0.35);
  transition: transform 0.15s;
}
.sc-start-btn:active { transform: scale(0.97); }
.sc-start-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sc-start-btn svg { width: 18px; height: 18px; }

/* ── ACTIVE STATION ── */
.sc-station {
  display: flex; flex-direction: column; height: 100vh;
  background: #0f172a; position: relative;
}

.sc-station-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 52px 20px 12px; background: #0f172a; flex-shrink: 0;
}

.sc-station-meta { display: flex; flex-direction: column; gap: 2px; }
.sc-station-num  { font-size: 0.8rem; color: #94a3b8; font-weight: 600; }
.sc-timer-label  { font-size: 0.7rem; color: #64748b; }

/* Circular timer */
.sc-timer-wrap {
  position: relative; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.sc-timer-svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sc-timer-track {
  fill: none; stroke: #1e293b; stroke-width: 5;
}
.sc-timer-ring {
  fill: none; stroke: #0f62fe; stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s linear, stroke 0.3s;
}
.sc-timer-count {
  font-size: 1.2rem; font-weight: 800; color: #f1f5f9;
  z-index: 1; transition: color 0.3s;
}

/* Specimen image */
.sc-image-wrap {
  position: relative; flex-shrink: 0;
  background: #1e293b;
  max-height: 38vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.sc-specimen-img {
  width: 100%; max-height: 38vh;
  object-fit: contain; display: block;
  cursor: zoom-in;
}

.sc-labels-overlay {
  position: absolute; inset: 0; pointer-events: none;
}

.sc-label-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  background: rgba(255, 220, 0, 0.9);
  border: 2px solid #0f172a;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; color: #0f172a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Question card */
.sc-question-card {
  padding: 14px 20px 10px; flex-shrink: 0;
}

.sc-question-tag {
  display: inline-block;
  background: #312e81; color: white;
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.sc-question-text {
  font-size: 0.95rem; font-weight: 600; color: #f1f5f9;
  line-height: 1.4; margin: 0;
}

/* Answer input */
.sc-answer-wrap {
  display: flex; gap: 10px; padding: 10px 20px;
  flex-shrink: 0;
}

.sc-answer-input {
  flex: 1; padding: 12px 16px;
  background: #1e293b; border: 1.5px solid #334155;
  border-radius: 12px; color: #f1f5f9;
  font-family: 'Poppins', sans-serif; font-size: 0.92rem;
  outline: none; transition: border-color 0.2s;
}
.sc-answer-input:focus { border-color: #6366f1; }

.sc-submit-btn {
  width: 48px; height: 48px; border-radius: 12px;
  background: #312e81; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.15s;
}
.sc-submit-btn:active { transform: scale(0.92); }
.sc-submit-btn svg { width: 20px; height: 20px; stroke: white; }

/* MOVE overlay */
.sc-move-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; animation: scFadeIn 0.15s ease;
}

.sc-move-content { text-align: center; }

.sc-move-result {
  font-size: 1.2rem; font-weight: 700; margin-bottom: 8px;
}

.sc-move-word {
  font-size: 3.5rem; font-weight: 900;
  color: white; letter-spacing: 4px;
  animation: scPulse 0.4s ease;
}

.sc-move-answer {
  font-size: 0.9rem; color: #94a3b8; margin-top: 8px;
}

@keyframes scFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scPulse {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ── RESULTS ── */
.sc-results {
  padding: 40px 20px 100px;
  display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; height: 100vh;
}

.sc-results-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.sc-results-icon svg { width: 30px; height: 30px; stroke: white; }
.sc-results h2 { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin: 0 0 16px; }
body.dark-mode .sc-results h2 { color: #f1f5f9; }

.sc-score-circle {
  width: 110px; height: 110px; border-radius: 50%;
  border: 6px solid #22c55e;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; transition: border-color 0.3s;
}
#scScorePercent { font-size: 1.8rem; font-weight: 800; transition: color 0.3s; }

.sc-score-text { font-size: 0.88rem; color: #64748b; margin-bottom: 24px; }

.sc-results-list {
  width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px;
}

.sc-result-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid transparent;
}
.sc-result-correct { background: #f0fdf4; border-color: #bbf7d0; }
.sc-result-wrong   { background: #fff1f2; border-color: #fecdd3; }
body.dark-mode .sc-result-correct { background: #052e16; border-color: #166534; }
body.dark-mode .sc-result-wrong   { background: #2d0a0a; border-color: #7f1d1d; }

.sc-result-num {
  font-size: 0.72rem; font-weight: 700; color: #94a3b8;
  flex-shrink: 0; padding-top: 2px;
}
.sc-result-body { flex: 1; min-width: 0; }
.sc-result-q    { font-size: 0.82rem; font-weight: 600; color: #1e293b; margin: 0 0 3px; }
body.dark-mode .sc-result-q { color: #f1f5f9; }
.sc-result-your { font-size: 0.78rem; color: #64748b; margin: 0 0 2px; }
.sc-result-right { font-size: 0.78rem; color: #dc2626; margin: 0 0 2px; }
.sc-result-hint  { font-size: 0.72rem; color: #94a3b8; margin: 0; font-style: italic; }
.sc-result-icon  { font-size: 1rem; flex-shrink: 0; }
.sc-result-correct .sc-result-icon { color: #22c55e; }
.sc-result-wrong   .sc-result-icon { color: #ef4444; }

.sc-results-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.sc-retry-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  color: white; border: none; border-radius: 13px;
  font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sc-retry-btn svg { width: 16px; height: 16px; }

.sc-home-btn {
  width: 100%; padding: 13px;
  background: #f1f5f9; color: #475569; border: none;
  border-radius: 13px; font-family: 'Poppins', sans-serif;
  font-size: 0.92rem; font-weight: 600; cursor: pointer;
}
body.dark-mode .sc-home-btn { background: #1e293b; color: #94a3b8; }


/* ── PAGE TRANSITION — app-like ── */
.page {
  position: fixed !important;
  inset: 0 !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
  opacity: 1 !important;
  left: auto !important;
}
.page.active {
  transform: translateX(0) !important;
}

/* ── BOOKMARK BUTTON (summary page) ── */
.bm-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; margin-left: auto; flex-shrink: 0;
  transition: background 0.2s;
}
body.dark-mode .bm-btn { background: #1e293b; }
.bm-btn svg { width: 18px; height: 18px; }

/* ── BOOKMARKS PAGE ── */
.bm-list {
  padding: 14px 16px 100px;
  display: flex; flex-direction: column; gap: 10px;
}

.bm-item {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1.5px solid #f1f5f9;
}
body.dark-mode .bm-item { background: #1e293b; border-color: #334155; }

.bm-item-left {
  display: flex; align-items: center; gap: 12px;
  flex: 1; cursor: pointer; min-width: 0;
}

.bm-item-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: #eef2ff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bm-item-icon svg { width: 18px; height: 18px; stroke: #0f62fe; }
body.dark-mode .bm-item-icon { background: #1e1b4b; }

.bm-item-name {
  font-size: 0.9rem; font-weight: 600; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dark-mode .bm-item-name { color: #f1f5f9; }

.bm-item-remove {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fee2e2; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bm-item-remove svg { width: 14px; height: 14px; stroke: #dc2626; }

.bm-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 60px 20px; text-align: center;
}
.bm-empty-icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: #eef2ff;
  display: flex; align-items: center; justify-content: center;
}
.bm-empty-icon svg { width: 30px; height: 30px; stroke: #0f62fe; }
body.dark-mode .bm-empty-icon { background: #1e1b4b; }
.bm-empty-title { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; }
body.dark-mode .bm-empty-title { color: #f1f5f9; }
.bm-empty-sub { font-size: 0.84rem; color: #94a3b8; margin: 0; }

/* ── SUMMARY HEADER with bookmark btn ── */
.summary-header {
  display: flex; align-items: center; gap: 10px;
}

/* ── 4-item bottom nav ── */
.bottom-nav { grid-template-columns: repeat(4, 1fr); }


/* ================================================
   NOTES INDICATOR + PROGRESS TRACKING + REVISION
   ================================================ */

/* Sub-card dots */
.sub-card { position: relative; }

.sc-note-dot, .sc-studied-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
}
.sc-note-dot    { background: #f59e0b; }
.sc-studied-dot { background: #22c55e; right: 20px; }

/* Topic action buttons on summary page */
.topic-actions-row {
  display: flex; gap: 10px;
  padding: 14px 20px 0;
}

.mark-studied-btn, .revision-add-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border-radius: 12px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; color: #334155;
  font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
body.dark-mode .mark-studied-btn,
body.dark-mode .revision-add-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
.mark-studied-btn svg, .revision-add-btn svg { width: 15px; height: 15px; }
.mark-studied-btn:active, .revision-add-btn:active { transform: scale(0.97); }

/* Home card progress bars */
.home-card-progress {
  height: 4px; background: #e2e8f0; border-radius: 4px;
  margin-top: 8px; overflow: hidden;
}
body.dark-mode .home-card-progress { background: #334155; }

.home-card-progress-fill {
  height: 100%; width: 0%; border-radius: 4px;
  background: #0f62fe; transition: width 0.5s ease;
}
.home-card-gross .home-card-progress-fill  { background: #0f62fe; }
.home-card-neuro  .home-card-progress-fill { background: #8b5cf6; }
.home-card-histo  .home-card-progress-fill { background: #10b981; }
.home-card-embryo .home-card-progress-fill { background: #f59e0b; }

.home-card-progress-label {
  font-size: 0.68rem; color: #94a3b8; margin-top: 3px; display: block;
}

/* Revision pill */
.home-stat-revision { background: linear-gradient(135deg, #312e81, #1e1b4b) !important; color: white !important; }
.home-stat-revision svg { stroke: white !important; }

/* ── REVISION MODE PAGE ── */
.revision-setup { padding: 20px 16px 100px; }

.revision-setup-hero {
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  border-radius: 16px; padding: 20px;
  text-align: center; margin-bottom: 20px;
}
.revision-hero-icon {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.revision-hero-icon svg { width: 24px; height: 24px; stroke: white; }
.revision-setup-hero p { color: rgba(255,255,255,0.85); font-size: 0.85rem; margin: 0; line-height: 1.5; }

.revision-queue { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.rev-queue-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 12px; padding: 12px 14px;
  border: 1.5px solid #f1f5f9;
}
body.dark-mode .rev-queue-item { background: #1e293b; border-color: #334155; }

.rev-queue-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: #eef2ff; color: #0f62fe;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}
body.dark-mode .rev-queue-num { background: #1e1b4b; color: #a5b4fc; }

.rev-queue-topic  { font-size: 0.88rem; font-weight: 600; color: #1e293b; display: block; }
body.dark-mode .rev-queue-topic { color: #f1f5f9; }
.rev-queue-reason { font-size: 0.72rem; color: #94a3b8; }

.revision-start-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  color: white; border: none; border-radius: 14px;
  font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(49,46,129,0.35);
}
.revision-start-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.revision-start-btn svg { width: 18px; height: 18px; }

/* Revision session */
.revision-session { display: flex; flex-direction: column; height: 100vh; }

.revision-session-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; flex-shrink: 0;
}
.rev-session-num { font-size: 0.8rem; color: #94a3b8; font-weight: 600; white-space: nowrap; }
.rev-session-bar {
  flex: 1; height: 6px; background: #e2e8f0; border-radius: 6px; overflow: hidden;
}
body.dark-mode .rev-session-bar { background: #334155; }
.rev-session-bar > div {
  height: 100%; background: #312e81; border-radius: 6px; transition: width 0.3s ease;
}

.rev-session-content {
  flex: 1; overflow-y: auto; padding: 0 20px 20px;
}

.rev-topic-header { margin-bottom: 12px; }
.rev-topic-reason {
  font-size: 0.72rem; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
.rev-topic-name { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin: 4px 0 0; }
body.dark-mode .rev-topic-name { color: #f1f5f9; }

.rev-topic-body {
  font-size: 0.88rem; line-height: 1.6; color: #334155;
}
body.dark-mode .rev-topic-body { color: #cbd5e1; }

.rev-session-btns {
  display: flex; gap: 12px; padding: 12px 20px 28px; flex-shrink: 0;
  background: linear-gradient(to top, #fff 80%, transparent);
}
body.dark-mode .rev-session-btns { background: linear-gradient(to top, #0f172a 80%, transparent); }

.rev-btn-confident {
  flex: 1; padding: 14px; border-radius: 13px; border: none;
  background: #dcfce7; color: #16a34a;
  font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.rev-btn-review {
  flex: 1; padding: 14px; border-radius: 13px; border: none;
  background: #fef3c7; color: #92400e;
  font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
}
body.dark-mode .rev-btn-confident { background: #052e16; color: #4ade80; }
body.dark-mode .rev-btn-review    { background: #1c1a0f; color: #fbbf24; }
.rev-btn-confident svg, .rev-btn-review svg { width: 16px; height: 16px; }

/* Done screen */
.revision-done {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100vh; padding: 32px 24px; text-align: center;
}
.rev-done-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.rev-done-icon svg { width: 32px; height: 32px; stroke: white; }
.revision-done h2 { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
body.dark-mode .revision-done h2 { color: #f1f5f9; }
.revision-done p  { font-size: 0.9rem; color: #64748b; margin: 0 0 28px; }
.rev-done-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.rev-done-retry {
  width: 100%; padding: 14px; border: none; border-radius: 13px;
  background: linear-gradient(135deg, #312e81, #1e1b4b); color: white;
  font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rev-done-retry svg { width: 16px; height: 16px; }
.rev-done-home {
  width: 100%; padding: 13px; border: none; border-radius: 13px;
  background: #f1f5f9; color: #475569;
  font-family: 'Poppins', sans-serif; font-size: 0.92rem; font-weight: 600; cursor: pointer;
}
body.dark-mode .rev-done-home { background: #1e293b; color: #94a3b8; }

.rev-loading { text-align: center; color: #94a3b8; padding: 40px; }
.rev-loading svg { width: 28px; height: 28px; stroke: #94a3b8; }
.rev-empty { color: #94a3b8; font-size: 0.88rem; padding: 20px; text-align: center; }


/* ================================================
   ONBOARDING WALKTHROUGH
   ================================================ */
.onboard-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}

/* Spotlight ring */
.onboard-spotlight {
  position: fixed; border-radius: 14px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(15,98,254,0.5);
  pointer-events: none; z-index: 100000;
  transition: all 0.35s cubic-bezier(0.32,0.72,0,1);
  animation: spotPulse 2s infinite;
}

@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(15,98,254,0.4); }
  50%       { box-shadow: 0 0 0 4px #fff, 0 0 0 14px rgba(15,98,254,0.15); }
}

/* Card */
.onboard-card {
  position: fixed; left: 16px; right: 16px;
  background: #fff; border-radius: 20px;
  padding: 22px 20px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  z-index: 100005;
  animation: onboardSlideUp 0.35s cubic-bezier(0.32,0.72,0,1);
  max-width: 440px; margin: 0 auto;
}
body.dark-mode .onboard-card { background: #1e293b; }

/* Centered card (welcome + final steps) */
.onboard-card-center {
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%);
}

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

.onboard-card-icon {
  font-size: 2.2rem; margin-bottom: 10px; text-align: center;
}

.onboard-card h3 {
  font-size: 1rem; font-weight: 800; color: #0f172a;
  margin: 0 0 8px; text-align: center;
}
body.dark-mode .onboard-card h3 { color: #f1f5f9; }

.onboard-card p {
  font-size: 0.86rem; color: #64748b; line-height: 1.55;
  margin: 0; text-align: center;
}
body.dark-mode .onboard-card p { color: #94a3b8; }

.onboard-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px;
}

/* Step dots */
.onboard-dots { display: flex; gap: 5px; }
.onboard-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #e2e8f0;
  transition: all 0.2s;
}
.onboard-dot-active {
  width: 18px; border-radius: 3px; background: #0f62fe;
}
body.dark-mode .onboard-dot { background: #334155; }
body.dark-mode .onboard-dot-active { background: #3b82f6; }

/* Buttons */
.onboard-btns { display: flex; gap: 10px; align-items: center; }

.onboard-skip {
  background: none; border: none; color: #94a3b8;
  font-family: 'Poppins', sans-serif; font-size: 0.84rem;
  cursor: pointer; padding: 4px 8px;
}

.onboard-next {
  background: #0f62fe; color: white; border: none;
  border-radius: 20px; padding: 9px 20px;
  font-family: 'Poppins', sans-serif; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: transform 0.15s;
  box-shadow: 0 4px 12px rgba(15,98,254,0.3);
}
.onboard-next:active { transform: scale(0.96); }


/* ================================================
   STUDY REMINDER SYSTEM
   ================================================ */

/* Sheet overlay */
.reminder-sheet-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.55);
  align-items: flex-end; justify-content: center;
  transition: opacity 0.32s ease;
  opacity: 0;
}
.reminder-sheet-overlay.reminder-open { opacity: 1; }

.reminder-sheet {
  background: #fff; width: 100%;
  border-radius: 28px 28px 0 0;
  padding: 8px 0 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  max-width: 520px; margin: 0 auto;
}
.reminder-sheet-overlay.reminder-open .reminder-sheet { transform: translateY(0); }
body.dark-mode .reminder-sheet { background: #1e293b; }

.reminder-sheet-handle {
  width: 40px; height: 4px; background: #e2e8f0;
  border-radius: 2px; margin: 10px auto 0;
}
body.dark-mode .reminder-sheet-handle { background: #334155; }

.reminder-sheet-inner { padding: 20px 20px 48px; }

.reminder-sheet-header {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px;
}
.reminder-header-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.reminder-header-icon svg { width: 22px; height: 22px; stroke: white; }
.reminder-sheet-header h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 3px; }
body.dark-mode .reminder-sheet-header h3 { color: #f1f5f9; }
.reminder-sheet-header p  { font-size: 0.78rem; color: #94a3b8; margin: 0; line-height: 1.4; }

/* Time label */
.reminder-time-label {
  display: block; font-size: 0.72rem; font-weight: 700;
  color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Native time input — opens Android clock UI */
.reminder-time-wrap { margin-bottom: 16px; }
.reminder-time-input {
  width: 100%; padding: 16px;
  font-size: 1.8rem; font-weight: 800; text-align: center;
  color: #0f62fe; background: #eef2ff;
  border: none; border-radius: 14px;
  font-family: 'Poppins', sans-serif; cursor: pointer;
  -webkit-appearance: none;
}
body.dark-mode .reminder-time-input { background: #1e1b4b; color: #a5b4fc; }

/* Message select */
.reminder-msg-wrap { margin-bottom: 24px; }
.reminder-msg-select {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid #e2e8f0; border-radius: 12px;
  font-family: 'Poppins', sans-serif; font-size: 0.88rem;
  color: #1e293b; background: #f8fafc; cursor: pointer;
  -webkit-appearance: none; outline: none;
}
body.dark-mode .reminder-msg-select { background: #0f172a; border-color: #334155; color: #f1f5f9; }

/* Action buttons */
.reminder-actions { display: flex; flex-direction: column; gap: 10px; }

.reminder-set-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  color: white; border: none; border-radius: 14px;
  font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(15,98,254,0.35);
  transition: transform 0.15s;
}
.reminder-set-btn:active { transform: scale(0.97); }
.reminder-set-btn svg { width: 18px; height: 18px; }

.reminder-clock-btn {
  width: 100%; padding: 13px;
  background: #f1f5f9; color: #334155; border: none; border-radius: 14px;
  font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.15s;
}
body.dark-mode .reminder-clock-btn { background: #0f172a; color: #cbd5e1; }
.reminder-clock-btn svg { width: 16px; height: 16px; }

.reminder-cancel-btn {
  width: 100%; padding: 11px; background: none; border: none;
  color: #94a3b8; font-family: 'Poppins', sans-serif; font-size: 0.88rem;
  cursor: pointer;
}

/* Active time shown below toggle in settings */
.reminder-set-time {
  font-size: 0.72rem; color: #0f62fe; font-weight: 600; margin-top: 2px;
}
body.dark-mode .reminder-set-time { color: #60a5fa; }

/* Toast notification */
.reminder-toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e293b; color: white;
  padding: 12px 20px; border-radius: 22px;
  font-size: 0.84rem; font-weight: 600;
  z-index: 99999; opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  pointer-events: none;
}
.reminder-toast-show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ============================================================
   STUDY CIRCLES
   ============================================================ */

/* Home banner card */
.circles-home-card {
  background: #fff; border-radius: 16px; padding: 14px 16px;
  margin: 10px 16px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1.5px solid #f1f5f9;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  transition: transform 0.15s; -webkit-tap-highlight-color: transparent;
}
.circles-home-card:active { transform: scale(0.98); }
body.dark-mode .circles-home-card { background: #1e293b; border-color: #334155; }

.circles-home-card-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: #ecfdf5; display: flex; align-items: center; justify-content: center;
}
.circles-home-card-icon svg { width: 22px; height: 22px; stroke: #10b981; }
body.dark-mode .circles-home-card-icon { background: #052e16; }

.circles-home-card-text { flex: 1; min-width: 0; }
.circles-home-card-text h3 { font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0 0 2px; }
body.dark-mode .circles-home-card-text h3 { color: #f1f5f9; }
.circles-home-card-text p {
  font-size: 0.75rem; color: #94a3b8; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.circles-home-card-arrow svg { width: 16px; height: 16px; stroke: #cbd5e1; }

/* Add button in page header */
.circles-add-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #f1f5f9; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.circles-add-btn svg { width: 18px; height: 18px; stroke: #0f62fe; }
body.dark-mode .circles-add-btn { background: #1e293b; }
body.dark-mode .circles-add-btn svg { stroke: #60a5fa; }

/* Circles list */
.circles-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }

.circles-card {
  background: #fff; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1.5px solid #f1f5f9;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  transition: transform 0.15s; -webkit-tap-highlight-color: transparent;
}
.circles-card:active { transform: scale(0.98); }
body.dark-mode .circles-card { background: #1e293b; border-color: #334155; }

.circles-card-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: #eff6ff; display: flex; align-items: center; justify-content: center;
}
.circles-card-icon svg { width: 22px; height: 22px; stroke: #0f62fe; }
body.dark-mode .circles-card-icon { background: #1e1b4b; }

.circles-card-text { flex: 1; min-width: 0; }
.circles-card-text h3 { font-size: 0.92rem; font-weight: 700; color: #0f172a; margin: 0 0 2px; }
body.dark-mode .circles-card-text h3 { color: #f1f5f9; }
.circles-card-text p {
  font-size: 0.78rem; color: #94a3b8; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.circles-card-arrow svg { width: 16px; height: 16px; stroke: #cbd5e1; }

.circles-loading {
  text-align: center; padding: 30px 10px; color: #94a3b8; font-size: 0.85rem;
}

.circles-empty-cta {
  margin-top: 14px; padding: 11px 18px; border: none; border-radius: 12px;
  background: #0f62fe; color: white; font-family: 'Poppins', sans-serif;
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 14px rgba(15,98,254,0.3);
}
.circles-empty-cta svg { width: 16px; height: 16px; }

.circles-hint { font-size: 0.76rem; color: #94a3b8; margin: 2px 2px 14px; line-height: 1.4; }
.circles-sheet-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0 0 16px; }
body.dark-mode .circles-sheet-title { color: #f1f5f9; }
.circles-section-label {
  font-size: 0.78rem; font-weight: 700; color: #94a3b8; letter-spacing: 0.4px;
  text-transform: uppercase; margin: 18px 2px 10px;
}

/* Circle options menu (dropdown under header) */
.circle-menu {
  position: absolute; top: 64px; right: 16px; z-index: 20;
  background: #fff; border-radius: 14px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 170px;
}
body.dark-mode .circle-menu { background: #1e293b; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

.circle-menu-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 10px; font-size: 0.86rem; font-weight: 600; color: #334155;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.circle-menu-row:active { background: #f1f5f9; }
.circle-menu-row svg { width: 16px; height: 16px; stroke: #64748b; flex-shrink: 0; }
body.dark-mode .circle-menu-row { color: #cbd5e1; }
body.dark-mode .circle-menu-row:active { background: #0f172a; }
body.dark-mode .circle-menu-row svg { stroke: #94a3b8; }

.circle-menu-danger { color: #ef4444; }
.circle-menu-danger svg { stroke: #ef4444; }

/* Invite code card */
.circle-invite-card {
  display: flex; align-items: center; gap: 10px;
  background: #eff6ff; border-radius: 14px; padding: 12px 14px; margin: 4px 0 12px;
}
body.dark-mode .circle-invite-card { background: #1e1b4b; }

.circle-invite-label { font-size: 0.76rem; color: #64748b; font-weight: 600; }
body.dark-mode .circle-invite-label { color: #94a3b8; }

.circle-invite-code {
  flex: 1; font-size: 1.05rem; font-weight: 800; letter-spacing: 2px;
  color: #0f62fe; font-family: 'Poppins', sans-serif;
}
body.dark-mode .circle-invite-code { color: #60a5fa; }

.circle-invite-copy {
  width: 34px; height: 34px; border-radius: 10px; border: none;
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.circle-invite-copy svg { width: 16px; height: 16px; stroke: #0f62fe; }
body.dark-mode .circle-invite-copy { background: #0f172a; }
body.dark-mode .circle-invite-copy svg { stroke: #60a5fa; }

/* Group goal card */
.circle-goal-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff7ed; border-radius: 14px; padding: 14px; margin-bottom: 12px;
}
body.dark-mode .circle-goal-card { background: #1c1a0f; }

.circle-goal-card-top { display: flex; align-items: center; gap: 12px; }

.circle-goal-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.circle-goal-icon svg { width: 18px; height: 18px; stroke: #f59e0b; }
body.dark-mode .circle-goal-icon { background: #0f172a; }

.circle-goal-text { flex: 1; min-width: 0; }
.circle-goal-label {
  font-size: 0.7rem; color: #b45309; text-transform: uppercase;
  letter-spacing: 0.4px; font-weight: 700;
}
body.dark-mode .circle-goal-label { color: #fbbf24; }
.circle-goal-text p { font-size: 0.88rem; color: #1e293b; margin: 2px 0 0; font-weight: 600; }
body.dark-mode .circle-goal-text p { color: #f1f5f9; }

/* Combined goal progress bar */
/* Goal complete celebration */
.circle-goal-complete-banner {
  display: flex; align-items: center; gap: 12px;
  background: #ecfdf5; border-radius: 12px; padding: 12px 14px;
}
body.dark-mode .circle-goal-complete-banner { background: #052e16; }

.circle-goal-complete-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.circle-goal-complete-icon svg { width: 18px; height: 18px; stroke: #10b981; }
body.dark-mode .circle-goal-complete-icon { background: #0f172a; }

.circle-goal-complete-text strong { font-size: 0.86rem; color: #047857; display: block; }
body.dark-mode .circle-goal-complete-text strong { color: #34d399; }
.circle-goal-complete-text p { font-size: 0.76rem; color: #059669; margin: 2px 0 0; }
body.dark-mode .circle-goal-complete-text p { color: #6ee7b7; }

/* Goal deadline missed */
.circle-goal-missed-banner {
  display: flex; align-items: center; gap: 12px;
  background: #fef2f2; border-radius: 12px; padding: 12px 14px;
}
body.dark-mode .circle-goal-missed-banner { background: #2d0a0a; }

.circle-goal-missed-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.circle-goal-missed-icon svg { width: 18px; height: 18px; stroke: #ef4444; }
body.dark-mode .circle-goal-missed-icon { background: #0f172a; }

.circle-goal-missed-text strong { font-size: 0.86rem; color: #b91c1c; display: block; }
body.dark-mode .circle-goal-missed-text strong { color: #f87171; }
.circle-goal-missed-text p { font-size: 0.76rem; color: #dc2626; margin: 2px 0 0; }
body.dark-mode .circle-goal-missed-text p { color: #fca5a5; }

.circle-goal-newgoal-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px; border: none; border-radius: 12px;
  background: #0f62fe; color: #fff; font-family: 'Poppins', sans-serif;
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.circle-goal-newgoal-btn svg { width: 15px; height: 15px; }
body.dark-mode .circle-goal-newgoal-btn { background: #3b82f6; }

.circle-goal-progress-wrap { display: flex; flex-direction: column; gap: 6px; }

.circle-goal-progress-row { display: flex; justify-content: space-between; align-items: baseline; }
.circle-goal-progress-label { font-size: 0.76rem; color: #92400e; font-weight: 600; }
body.dark-mode .circle-goal-progress-label { color: #fbbf24; }
.circle-goal-progress-pct { font-size: 0.8rem; color: #b45309; font-weight: 800; }
body.dark-mode .circle-goal-progress-pct { color: #fcd34d; }

.circle-goal-progress-track {
  height: 9px; border-radius: 6px; background: rgba(245,158,11,0.18); overflow: hidden;
}
.circle-goal-progress-fill {
  height: 100%; border-radius: 6px; background: #f59e0b;
  transition: width 0.4s ease;
}

.circle-goal-deadline-note {
  font-size: 0.72rem; color: #b45309; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.circle-goal-deadline-note svg { width: 12px; height: 12px; stroke: #b45309; }
body.dark-mode .circle-goal-deadline-note svg { stroke: #fbbf24; }
body.dark-mode .circle-goal-deadline-note { color: #fbbf24; }

/* Goal sheet field labels + metric tabs */
.circles-goal-field-label {
  font-size: 0.76rem; font-weight: 700; color: #64748b; margin: 14px 2px 8px;
}
body.dark-mode .circles-goal-field-label { color: #94a3b8; }

/* Members list */
.circle-members-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; }

.circle-legend {
  display: flex; gap: 14px; margin: 6px 2px 12px; flex-wrap: wrap;
}
.circle-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: #94a3b8; font-weight: 600;
}
.circle-legend-item svg { width: 13px; height: 13px; stroke: #94a3b8; }
body.dark-mode .circle-legend-item { color: #64748b; }

.circle-legend-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.circle-legend-row:last-of-type { border-bottom: none; }
body.dark-mode .circle-legend-row { border-bottom-color: #334155; }

.circle-legend-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; margin-top: 2px;
  background: #eff6ff; display: flex; align-items: center; justify-content: center;
}
.circle-legend-icon svg { width: 16px; height: 16px; stroke: #0f62fe; }
body.dark-mode .circle-legend-icon { background: #1e1b4b; }
body.dark-mode .circle-legend-icon svg { stroke: #60a5fa; }

.circle-legend-text strong { font-size: 0.86rem; color: #0f172a; display: block; margin-bottom: 2px; }
body.dark-mode .circle-legend-text strong { color: #f1f5f9; }
.circle-legend-text p { font-size: 0.78rem; color: #94a3b8; margin: 0; line-height: 1.4; }

.circle-member-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1.5px solid #f1f5f9;
}
body.dark-mode .circle-member-row { background: #1e293b; border-color: #334155; }

.circle-member-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: #0f62fe; color: #fff; font-weight: 700; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center;
}
body.dark-mode .circle-member-avatar { background: #3b82f6; }

.circle-member-info { flex: 1; min-width: 0; }

.circle-member-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.circle-member-name { font-size: 0.88rem; font-weight: 700; color: #0f172a; }
body.dark-mode .circle-member-name { color: #f1f5f9; }

.circle-creator-badge {
  font-size: 0.62rem; font-weight: 700; color: #0f62fe; background: #eff6ff;
  padding: 2px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.3px;
}
body.dark-mode .circle-creator-badge { color: #60a5fa; background: #1e1b4b; }

.circle-member-stats {
  display: flex; gap: 10px; margin-top: 3px;
  font-size: 0.74rem; color: #94a3b8; font-weight: 600;
}
.circle-member-stats span { display: inline-flex; align-items: center; gap: 3px; }
.circle-member-stats svg { width: 12px; height: 12px; stroke: #94a3b8; }

.circle-member-progress {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.circle-member-progress-track {
  flex: 1; height: 6px; border-radius: 5px; background: #f1f5f9; overflow: hidden;
}
body.dark-mode .circle-member-progress-track { background: #0f172a; }
.circle-member-progress-fill {
  height: 100%; border-radius: 5px; background: #0f62fe; transition: width 0.4s ease;
}
.circle-member-progress-fill-done { background: #10b981; }
body.dark-mode .circle-member-progress-fill { background: #60a5fa; }
.circle-member-progress-text {
  font-size: 0.68rem; font-weight: 700; color: #64748b; flex-shrink: 0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
}
body.dark-mode .circle-member-progress-text { color: #94a3b8; }
.circle-member-progress-text svg { width: 12px; height: 12px; stroke: #10b981; }

.circle-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; padding: 5px 10px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.circle-status-active   { background: #ecfdf5; color: #047857; }
.circle-status-inactive { background: #fef2f2; color: #b91c1c; }
.circle-status-active svg   { width: 12px; height: 12px; stroke: #047857; }
.circle-status-inactive svg { width: 12px; height: 12px; stroke: #b91c1c; }
body.dark-mode .circle-status-active   { background: #052e16; color: #34d399; }
body.dark-mode .circle-status-inactive { background: #2d0a0a; color: #f87171; }
body.dark-mode .circle-status-active svg   { stroke: #34d399; }
body.dark-mode .circle-status-inactive svg { stroke: #f87171; }

.circle-member-remove {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: #f1f5f9; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; margin-left: 2px;
}
.circle-member-remove svg { width: 13px; height: 13px; stroke: #94a3b8; }
body.dark-mode .circle-member-remove { background: #0f172a; }