/* styles.css */





/* ========= FMGE QUIZ THEME TOKENS (QUIZ PAGE ONLY) ========= */

/* Dark quiz theme (current look) */
.krok-quiz-container.fmge-quiz-dark {
  --fmge-quiz-bg-page: #020617;
  --fmge-quiz-bg-card: #020617;
  --fmge-quiz-bg-elevated: #0b1120;
  --fmge-quiz-surface-highlight: #111827;

  --fmge-quiz-text-main: #e5e7eb;
  --fmge-quiz-text-muted: #9ca3af;

  --fmge-quiz-border-subtle: rgba(148, 163, 184, 0.55);
  --fmge-quiz-border-strong: rgba(148, 163, 184, 0.9);

  --fmge-quiz-accent-blue: #3b82f6;
  --fmge-quiz-accent-blue-soft: #60a5fa;
  --fmge-quiz-accent-green: #22c55e;
  --fmge-quiz-accent-red: #ef4444;
  --fmge-quiz-accent-amber: #facc15;

  --fmge-quiz-nav-pill-bg: #0b1120;
  --fmge-quiz-nav-pill-border: rgba(148, 163, 184, 0.7);
}

/* Light quiz theme (white page) */
.krok-quiz-container.fmge-quiz-light {
  --fmge-quiz-bg-page: #f9fafb;
  --fmge-quiz-bg-card: #ffffff;
  --fmge-quiz-bg-elevated: #f3f4f6;
  --fmge-quiz-surface-highlight: #e5e7eb;

  --fmge-quiz-text-main: #111827;
  --fmge-quiz-text-muted: #6b7280;

  --fmge-quiz-border-subtle: #e5e7eb;
  --fmge-quiz-border-strong: #d1d5db;

  --fmge-quiz-accent-blue: #2563eb;
  --fmge-quiz-accent-blue-soft: #60a5fa;
  --fmge-quiz-accent-green: #16a34a;
  --fmge-quiz-accent-red: #dc2626;
  --fmge-quiz-accent-amber: #f59e0b;

  --fmge-quiz-nav-pill-bg: #f9fafb;
  --fmge-quiz-nav-pill-border: #d1d5db;
}

/* Quiz container background uses the theme var */
.krok-quiz-container.fmge-quiz-dark,
.krok-quiz-container.fmge-quiz-light {
  background: var(--fmge-quiz-bg-page);
  color: var(--fmge-quiz-text-main);
}









/* Root container (keep as is if you like the font) */
.krok-quiz-container {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: relative;
}

/* QUIZ WRAPPER – theme aware */
.krok-quiz-container .quiz-wrapper {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 28px;
  border-radius: 22px;

  background:
    radial-gradient(circle at top left, var(--fmge-quiz-surface-highlight) 0, var(--fmge-quiz-bg-card) 55%, var(--fmge-quiz-bg-card) 100%);
  border: 1px solid var(--fmge-quiz-border-subtle);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.18);

  color: var(--fmge-quiz-text-main);
  position: relative;
  overflow: hidden;
}

/* soft glow */
.krok-quiz-container .quiz-wrapper::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 10% 0, rgba(56, 189, 248, 0.22) 0, transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(244, 114, 182, 0.24) 0, transparent 55%),
    radial-gradient(circle at 50% 40%, rgba(52, 211, 153, 0.20) 0, transparent 55%);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}

.krok-quiz-container .quiz-wrapper > * {
  position: relative;
  z-index: 1;
}

/* QUESTION CARD */
.krok-quiz-container .question-card {
  flex: 1 1 auto;
  padding: 16px 18px 14px;
  border-radius: 18px;
  border: 1px solid var(--fmge-quiz-border-subtle);
  margin-bottom: 18px;
  background:
    radial-gradient(circle at left, rgba(56, 189, 248, 0.18) 0, transparent 60%),
    radial-gradient(circle at right, rgba(129, 140, 248, 0.18) 0, transparent 65%),
    linear-gradient(135deg, var(--fmge-quiz-bg-card), var(--fmge-quiz-bg-card));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.06);
}

.krok-quiz-container .question-text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 14px;
  color: var(--fmge-quiz-text-main);
}


/* Header (title + timer + icons) */
.krok-quiz-container .quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.krok-quiz-container .quiz-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f9fafb;
}

.krok-quiz-container .quiz-timer {
  font-weight: 600;
  color: #facc15;
  font-size: 16px;
  min-width: 60px;
  text-align: right;
}

/* Layout: left nav + right question card */
.krok-quiz-container .quiz-main {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* LEFT: nav box – dark glass instead of white */
.krok-quiz-container .quiz-nav-box {
  flex: 0 0 140px; /* was 90px */
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98) 0, #020617 70%);
  padding: 8px;
  display: flex;
  flex-direction: column;
  max-height: 410px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}


.krok-quiz-container .quiz-nav-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(209, 213, 219, 0.9);
  margin-bottom: 6px;
}

.krok-quiz-container .quiz-nav-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;

  /* Hide scrollbar but keep scroll functionality */
  scrollbar-width: none;       /* Firefox */
}

.krok-quiz-container .quiz-nav-scroll::-webkit-scrollbar {
  display: none;               /* Chrome, Edge, Safari */
}


/* (keep your existing #question-nav button styles – they already match the dark theme) */


/* RIGHT: Question card – dark shard instead of pale panel */
.krok-quiz-container .question-card {
  flex: 1 1 auto;
  padding: 16px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  margin-bottom: 18px;
  background:
    radial-gradient(circle at left, rgba(56, 189, 248, 0.18) 0, transparent 60%),
    radial-gradient(circle at right, rgba(129, 140, 248, 0.18) 0, transparent 65%),
    linear-gradient(135deg, #020617, #020617);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}


/* Question text */
.krok-quiz-container .question-text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 14px;
  color: #f9fafb;
}

/* Question image wrapper unchanged, just ensure it sits on dark bg */
.krok-quiz-container .question-image-wrapper {
  margin-bottom: 12px;
}
.krok-quiz-container .question-image {
  max-width: 100%;
  border-radius: 8px;
  display: block;
}

/* Options: switch to dark glass buttons */
.krok-quiz-container .options-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.krok-quiz-container .option-item {
  margin-bottom: 10px;
}

.krok-quiz-container .option-button {
  width: 100%;
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: rgba(15, 23, 42, 0.98);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  transition: all 0.15s ease;
  font-size: 14px;
  color: #e5e7eb;
}

.krok-quiz-container .option-label {
  font-weight: 600;
  min-width: 18px;
  color: #cbd5f5;
}

.krok-quiz-container .option-button:hover {
  border-color: #3b82f6;
  background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.25) 0, rgba(15, 23, 42, 0.98) 55%);
}

.krok-quiz-container .option-button.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(15, 23, 42, 1));
}

/* Correct / incorrect on dark */
.krok-quiz-container .option-button.correct {
  border-color: #22c55e;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(15, 23, 42, 1));
}

.krok-quiz-container .option-button.incorrect {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(15, 23, 42, 1));
}

/* Quiz actions buttons – theme aware */
.krok-quiz-container .quiz-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 10px;
}

.krok-quiz-container .btn {
  border-radius: 999px;
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

/* Outline */
.krok-quiz-container .btn-outline {
  background: var(--fmge-quiz-bg-card);
  color: var(--fmge-quiz-text-main);
  border: 1px solid var(--fmge-quiz-border-strong);
}
.krok-quiz-container .btn-outline:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: var(--fmge-quiz-accent-blue);
}

/* Secondary */
.krok-quiz-container .btn-secondary {
  background: var(--fmge-quiz-bg-elevated);
  color: var(--fmge-quiz-text-main);
  border: 1px solid var(--fmge-quiz-border-subtle);
}
.krok-quiz-container .btn-secondary:hover {
  background: rgba(148, 163, 184, 0.16);
}

/* Primary */
.krok-quiz-container .btn-primary {
  background: linear-gradient(135deg, var(--fmge-quiz-accent-blue), var(--fmge-quiz-accent-blue-soft));
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}
.krok-quiz-container .btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.45);
}

}

/* Status + footer row on dark */
.krok-quiz-container .quiz-footer-row {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.krok-quiz-container .status-text {
  font-size: 13px;
  color: #9ca3af;
}

.krok-quiz-container .status-text.correct {
  color: #4ade80;
  font-weight: 500;
}

.krok-quiz-container .status-text.incorrect {
  color: #f97373;
  font-weight: 500;
}

/* Explanation block on dark – softer yellow panel */
.krok-quiz-container .results-summary {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(55, 65, 81, 0.9);
  font-size: 14px;
  color: #e5e7eb;
}

.krok-quiz-container .explanation-block {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(250, 250, 210, 0.04);
  border: 1px solid rgba(250, 204, 21, 0.85);
}

.krok-quiz-container .explanation-title {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: #facc15;
}

.krok-quiz-container .explanation-text {
  font-size: 14px;
  color: #fefce8;
  margin-bottom: 6px;
}

.krok-quiz-container .keywords-row {
  font-size: 13px;
}

.krok-quiz-container .keywords-label {
  font-weight: 600;
  color: #f472b6;
  margin-right: 4px;
}

.krok-quiz-container .keywords-text {
  color: #e5e7eb;
}





/* Bookmark icon */
.favorite-link {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.favorite-link .favorite-icon {
  width: 22px;
  height: 22px;
}

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

.quiz-header-right {
  display: flex;
  align-items: center;
  gap: 8px; /* space between timer, bookmark, folder */
}

/* Timer already styled; just ensure it's inline */
.quiz-timer {
  font-weight: 600;
  min-width: 60px;
  text-align: right;
}

/* Bookmark button */
.favorite-link {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.favorite-link .favorite-icon {
  width: 22px;
  height: 22px;
}

/* Folder button */
.folder-link {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.folder-link .folder-icon {
  width: 22px;
  height: 22px;
}

/* Optional hover */
.favorite-link:hover .favorite-icon,
.folder-link:hover .folder-icon {
  transform: translateY(-1px);
}




/* Question nav buttons – theme aware */
.krok-quiz-container #question-nav button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: 34px;
  height: 34px;
  margin: 0 4px 6px 0;
  border-radius: 999px;

  background: var(--fmge-quiz-nav-pill-bg);
  border: 1px solid var(--fmge-quiz-nav-pill-border);
  color: var(--fmge-quiz-text-main);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.krok-quiz-container #question-nav button:hover {
  background: radial-gradient(
    circle at top,
    rgba(59, 130, 246, 0.3) 0,
    var(--fmge-quiz-bg-card) 60%
  );
  border-color: var(--fmge-quiz-accent-blue-soft);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2);
  transform: translateY(-1px);
}

/* current question */
.krok-quiz-container #question-nav button.active {
  background: linear-gradient(135deg, var(--fmge-quiz-accent-blue), var(--fmge-quiz-accent-blue-soft));
  color: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.37);
}

/* Correct / wrong keep strong colors */
.krok-quiz-container #question-nav button.nav-correct {
  background: var(--fmge-quiz-accent-green);
  color: #ffffff;
  border-color: #4ade80;
}

.krok-quiz-container #question-nav button.nav-wrong {
  background: var(--fmge-quiz-accent-red);
  color: #ffffff;
  border-color: #fca5a5;
}




/* Quiz selector box */
/* Each group (Subject / Year / Exam / Questions) as its own box */

/* Outer container holding all four boxes, with a big title */
.krok-quiz-container .quiz-selector {
  position: relative;
  max-width: 1100px;
  margin: 35px auto 24px auto;
  padding: 52px 18px 16px;  /* extra top padding to make room for the title */
  border-radius: 10px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}






/* Row: put each field card horizontally with wrapping on small screens */
.krok-quiz-container .quiz-selector-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Each group (Subject / Year / Exam / Questions) as its own box/card */
.krok-quiz-container .quiz-selector-field {
  flex: 1 1 0;                      /* let them share width equally in a row */
  min-width: 200px;                 /* don’t get too narrow */
  max-width: 260px;                 /* avoid becoming too wide on big screens */

  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);

  display: flex;
  flex-direction: column;
}

/* The “Questions” box: narrower but same visual style */
.krok-quiz-container .quiz-selector-field.quiz-selector-field--narrow {
  max-width: 160px;
}


.krok-quiz-container .quiz-selector-field select,
.krok-quiz-container .quiz-selector-field input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 13px;
  background: #ffffff;
}

/* Preset question count checkbox-style pills */
.fmge-count-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  margin-top: 24px;
}

.fmge-count-pill {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #111827;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  line-height: 1.2;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease;
}

.fmge-count-pill:hover {
  background: #eef2ff;
  border-color: #3b82f6;
}

/* Active (selected) pill – looks like a chosen checkbox */
.fmge-count-pill.fmge-count-pill--active {
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}

/* Slightly narrow input to fit below pills nicely */
.quiz-selector-field--narrow #fmge-count-input {
  margin-top: 20px;
}


/* Center the Start Test button under the boxes */
.krok-quiz-container .quiz-selector-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center; /* center horizontally */
}

/* Bigger green Start Test button on selector */
.krok-quiz-container #fmge-start-test-btn {
  padding: 12px 32px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;

  background: #16a34a;    /* green */
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(22, 163, 74, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.krok-quiz-container #fmge-start-test-btn:hover {
  background: #15803d;    /* darker green on hover */
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.4);
  transform: translateY(-1px);
}

.krok-quiz-container #fmge-start-test-btn:disabled {
  background: #9ca3af;
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* STUDY hover – bright indigo aura */
.fmge-mode-card--study:hover .fmge-mode-card-inner {
  transform: translateY(-4px) scale(1.02);
  background:

    linear-gradient(170deg, #6042FF, #000000);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.95);
}

.fmge-mode-card--study:hover .fmge-mode-card-inner::after {
  opacity: 0.7;
  filter: blur(30px);
  transform: scale(1.03);
}

/* EXAM hover – bright green aura */
.fmge-mode-card--exam:hover .fmge-mode-card-inner {
  transform: translateY(-4px) scale(1.02);
  background:
  
    linear-gradient(170deg, #84BA2E, #000000);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.95);
}

.fmge-mode-card--exam:hover .fmge-mode-card-inner::after {
  opacity: 0.75;
  filter: blur(30px);
  transform: scale(1.03);
}

/* INSANE hover – bright red/orange aura */
.fmge-mode-card--insane:hover .fmge-mode-card-inner {
  transform: translateY(-4px) scale(1.02);
  background:
    
    linear-gradient(170deg, #FF3E3E, #000000);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.95);
}

.fmge-mode-card--insane:hover .fmge-mode-card-inner::after {
  opacity: 0.8;
  filter: blur(32px);
  transform: scale(1.03);
}



/* Modal backdrop: full-page black sky */
.modal-backdrop {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100vw;
  height: 100vh;

  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;

  /* Deep space background */
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.25) 0, transparent 40%),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,0.18) 0, transparent 40%),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,0.12) 0, transparent 40%),
    #020617; /* slate-950 / near black */

  display: none;              /* shown via .show class in JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-sizing: border-box;
}



/* Slightly dimmer/neutral backdrop for non-mode modals */
#report-modal.modal-backdrop,
#favorite-modal.modal-backdrop,
#bookmark-folder-edit-modal.modal-backdrop,
#quiz-complete-modal.modal-backdrop {
  background: rgba(15, 23, 42, 0.55);  /* dark, but not full starfield */
}







/* When shown, center the modal */
.modal-backdrop.show {
  display: flex;
}

/* Modal box */
.modal {
  background: #ffffff;
  border-radius: 12px;
  padding: 18px 20px 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
  font-family: inherit;
  color: #111827;
  position: relative; /* NEW: anchor absolutely positioned children */
}



/* Modal header */
.krok-quiz-container .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.krok-quiz-container .modal-title {
  font-weight: 600;
  font-size: 16px;
  color: #111827;
}

.krok-quiz-container .modal-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  color: #4b5563;
}

/* Modal body */
.krok-quiz-container .modal-body label {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
  color: #4b5563;
}

.krok-quiz-container .modal-body input[type="text"],
.krok-quiz-container .modal-body textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 8px 9px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  box-shadow: none;
}

.krok-quiz-container .modal-body textarea {
  resize: vertical;
}

.krok-quiz-container .modal-body input[type="file"] {
  font-size: 13px;
}

/* Modal footer */
.krok-quiz-container .modal-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.krok-quiz-container .modal-footer .btn {
  border-radius: 8px;
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.krok-quiz-container .modal-footer .btn-secondary {
  background: #e5e7eb;
  color: #111827;
}

.krok-quiz-container .modal-footer .btn-primary {
  background: #facc15;
  color: #111827;
}

/* Quiz Mode Modal overrides */
.krok-quiz-container #quiz-mode-modal .modal-footer .btn-primary {
  background: #3b82f6;
  color: #ffffff;
}

.krok-quiz-container #quiz-mode-modal .modal-footer .btn-secondary {
  background: #e5e7eb;
  color: #111827;
}




/* ==================== QUIZ MODE 3-CARD MODAL LAYOUT FIX (FINAL) ==================== */

.fmge-mode-container {
  position: relative;
  text-align: center;
  padding: 24px 24px 32px;
}

/* Cards row */
.fmge-mode-cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: nowrap;
}

/* Card = button */
.fmge-mode-card {
  position: relative;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible;  /* important */
}


/* Outer glow, like .card-container::before */
.fmge-mode-card::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 32px;
  background: radial-gradient(circle at center, currentColor, transparent);
  opacity: 0.05;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Inner card frame */
.fmge-mode-card-inner {
  width: 260px;
  height: 340px;
  border-radius: 30px;
  padding: 0;
  position: relative;
  overflow: visible;

  background:
    radial-gradient(circle at top, rgba(15, 23, 42, 0.9), #020617);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.9);   /* subtle base shadow only */
  outline: 2px solid rgba(148, 163, 184, 0.2);
  outline-offset: 4px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

}

/* Decorative lines */
.fmge-mode-card-inner::before,
/* Shared halo layer – off by default, colored via currentColor */
.fmge-mode-card-inner::after {
  content: "";
  position: absolute;
  inset: -40px;                      /* makes it larger than the card */
  border-radius: 999px;
  background: radial-gradient(circle, currentColor 0, transparent 65%);
  opacity: 0.0;                      /* OFF by default */
  filter: blur(22px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}


.fmge-mode-card-inner::before {
  top: 22%;
}

.fmge-mode-card-inner::after {
  bottom: 22%;
}

/* Icon + background shape */
.fmge-mode-icon-wrap {
  position: relative;
  margin-bottom: 24px;
  filter: drop-shadow(0 0 16px currentColor);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fmge-mode-icon-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

/* IMPORTANT: not fixed – keeps icon inside the card */
.fmge-mode-icon {
  position: fixed;
  z-index: 1;
  font-size: 40px;
  transition: all 0.4s ease;
  filter: drop-shadow(0 0 10px currentColor);
}

/* Text block */
.fmge-mode-text {
  text-align: center;
}

.fmge-mode-title {
  font-size: 22px;
  font-weight: 600;
  color: #f9fafb;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
  transition: transform 0.3s ease;
}

.fmge-mode-subtitle {
  font-size: 14px;
  color: rgba(148, 163, 184, 0.85);
}

/* Main heading under cards */
.fmge-mode-main-title {
  font-size: 35px;
  font-weight: 600;
  color: #f9fafb;
  letter-spacing: 0.01em;
  margin-top: 40px;
}

/* Variants – this is where the color comes from */
.fmge-mode-card--study {
  color: #6366f1;
}

.fmge-mode-card--study .fmge-mode-card-inner {
  background:
    radial-gradient(circle at top, rgba(99, 102, 241, 0.22), transparent 65%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.9));
}

.fmge-mode-card--exam {
  color: #22c55e;
}

.fmge-mode-card--exam .fmge-mode-card-inner {
  background:
    radial-gradient(circle at top, rgba(34, 197, 94, 0.22), transparent 65%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.9));
}

.fmge-mode-card--insane {
  color: #ef4444;
}

.fmge-mode-card--insane .fmge-mode-card-inner {
  background:
    radial-gradient(circle at top, rgba(239, 68, 68, 0.22), transparent 65%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.9));
}








/* Shapes */
.fmge-mode-icon-bg--hexagon {
  width: 130px;
  height: 130px;
  background: linear-gradient(135deg, currentColor, transparent);
  opacity: 0.18;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
  position: relative;
}
.fmge-mode-icon-bg--hexagon::before,
.fmge-mode-icon-bg--hexagon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: inherit;
}
.fmge-mode-icon-bg--hexagon::before {
  width: 110px;
  height: 110px;
  background: currentColor;
  opacity: 0.3;
  filter: blur(2px);
}
.fmge-mode-icon-bg--hexagon::after {
  width: 90px;
  height: 90px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid currentColor;
  border-radius: 14px;
  opacity: 0.9;
}

.fmge-mode-icon-bg--circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, currentColor, transparent);
  opacity: 0.18;
  position: relative;
}
.fmge-mode-icon-bg--circle::before,
.fmge-mode-icon-bg--circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.fmge-mode-icon-bg--circle::before {
  width: 120px;
  height: 120px;
  background: currentColor;
  opacity: 0.3;
  filter: blur(2px);
}
.fmge-mode-icon-bg--circle::after {
  width: 95px;
  height: 95px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid currentColor;
  opacity: 0.9;
}

.fmge-mode-icon-bg--diamond {
  width: 130px;
  height: 130px;
  background: linear-gradient(135deg, currentColor, transparent);
  opacity: 0.18;
  position: relative;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 20px;
}
.fmge-mode-icon-bg--diamond::before,
.fmge-mode-icon-bg--diamond::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fmge-mode-icon-bg--diamond::before {
  width: 110px;
  height: 110px;
  background: currentColor;
  opacity: 0.3;
  filter: blur(2px);
  border-radius: 18px;
}
.fmge-mode-icon-bg--diamond::after {
  width: 90px;
  height: 90px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid currentColor;
  border-radius: 16px;
  opacity: 0.9;
}

/* Hover – IMPORTANT: do NOT change background, only add glow */
.fmge-mode-card:hover::before {
  opacity: 0.12;
}

.fmge-mode-card:hover .fmge-mode-card-inner {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(0, 0, 0, 0.7);
}


.fmge-mode-card:hover::after {
  opacity: 0.1;
}


.fmge-mode-card:hover .fmge-mode-icon-bg {
  transform: translate(-50%, -50%) scale(1.15);
}

.fmge-mode-card:hover .fmge-mode-icon-bg--hexagon::before,
.fmge-mode-card:hover .fmge-mode-icon-bg--circle::before,
.fmge-mode-card:hover .fmge-mode-icon-bg--diamond::before {
  opacity: 0.4;
}

.fmge-mode-card:hover .fmge-mode-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 20px currentColor);
}

.fmge-mode-card:hover .fmge-mode-title {
  transform: scale(1.03);
}

/* Click animation (used by JS via .fmge-mode-card--clicked) */
.fmge-mode-card.fmge-mode-card--clicked .fmge-mode-card-inner {
  animation: fmge-cardClick 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fmge-mode-card.fmge-mode-card--clicked .fmge-mode-icon-bg {
  animation: fmge-iconBgPulse 0.6s ease;
}

.fmge-mode-card.fmge-mode-card--clicked .fmge-mode-icon {
  animation: fmge-iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fmge-mode-card.fmge-mode-card--clicked .fmge-mode-title {
  animation: fmge-textPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ripple element (JS creates inside .fmge-mode-card-inner) */
.fmge-mode-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  pointer-events: none;
  animation: fmge-rippleEffect 0.8s ease-out;
}

/* Keyframes */
@keyframes fmge-cardClick {
  0% { transform: scale(1); }
  30% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes fmge-iconBgPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.25;
  }
}

@keyframes fmge-iconBounce {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(0.8); }
  50%      { transform: scale(1.2) rotate(5deg); }
  70%      { transform: scale(1.1) rotate(-5deg); }
}

@keyframes fmge-textPop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

@keyframes fmge-rippleEffect {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

/* Responsive – shrink and stack for smaller screens */
@media (max-width: 900px) {
  .fmge-mode-cards {
    flex-wrap: wrap;       /* allow wrapping */
    gap: 16px;
  }

  .fmge-mode-card-inner {
    width: 220px;
    height: 310px;
  }

  .fmge-mode-icon {
    font-size: 34px;
  }

  .fmge-mode-title {
    font-size: 20px;
  }

  .fmge-mode-main-title {
    font-size: 18px;
  }
}

/* Very small screens – one card per row, full width */
@media (max-width: 600px) {
  .fmge-mode-cards {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .fmge-mode-card-inner {
    width: 100%;
    max-width: 260px;    /* don’t get too huge on slightly larger mobiles */
    height: auto;        /* allow height to shrink naturally */
    padding: 18px 12px;
  }
}


/* Starfield layer only for the mode modal */
#quiz-mode-modal .fmge-mode-container::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.9) 0, transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,0.8) 0, transparent 35%),
    radial-gradient(circle at 75% 30%, rgba(255,255,255,0.7) 0, transparent 35%),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,0.6) 0, transparent 35%),
    radial-gradient(circle at 20% 55%, rgba(255,255,255,0.5) 0, transparent 35%);
  opacity: 0.18;
  animation: fmge-stars-drift 30s linear infinite;
}

/* Optional subtle star drift */
@keyframes fmge-stars-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-15px, -10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}





/* Favorite / Bookmark Modal extra styling */
.favorite-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.favorite-section {
  padding: 8px 0;
  border-top: 1px solid #e5e7eb;
}

.favorite-section:first-child {
  border-top: none;
}

.favorite-help-text {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

/* Header for the checkbox section */
.favorite-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #111827;
}

.favorite-section-note {
  font-size: 11px;
  font-weight: 400;
  color: #6b7280;
}

/* Checkbox list for folders */
.favorite-folders-list {
  max-height: 140px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  background: #f9fafb;
}

.favorite-folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 2px;
  cursor: pointer;
}

.favorite-folder-item input[type="checkbox"] {
  accent-color: #16a34a; /* green */
}

.favorite-folder-item span {
  color: #111827;
}




/* "My tests" table */
.krok-quiz-container .fmge-my-tests-table,
.fmge-my-tests .fmge-my-tests-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}


/* Confetti canvas overlay */
.krok-quiz-container {
  position: relative; /* ensure we can absolutely-position the canvas inside */
}

#fmge-confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;   /* don't block clicks */
  z-index: 9998;          /* just under modal backdrop (9999) */
}









.fmge-my-tests-table th,
.fmge-my-tests-table td {
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  text-align: left;
}

.fmge-my-tests-table th {
  background: #f3f4f6;
  font-weight: 600;
}

.fmge-my-tests-table th:nth-child(5),
.fmge-my-tests-table td:nth-child(5),
.fmge-my-tests-table th:nth-child(6),
.fmge-my-tests-table td:nth-child(6) {
  white-space: nowrap;
}

/* Progress bar in table */
.fmge-progress-text {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

.fmge-progress-bar {
  position: relative;
  width: 100%;
  max-width: 160px;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.fmge-progress-bar-segment {
  height: 100%;
  float: left;
}

.fmge-progress-bar-segment--correct {
  background-color: #22c55e;
}

.fmge-progress-bar-segment--wrong {
  background-color: #ef4444;
}

.fmge-progress-bar-segment--unanswered {
  background-color: #9ca3af;
}




.fmge-progress-bar::after {
  content: "";
  display: block;
  clear: both;
}

.fmge-my-tests-table th:nth-child(6),
.fmge-my-tests-table td:nth-child(6) {
  text-align: center;
}

/* Score column wider */
.fmge-my-tests-table th:nth-child(3),
.fmge-my-tests-table td:nth-child(3) {
  min-width: 160px;
  width: 160px;
  text-align: center;
}





/* ===== MY TESTS – GLOSSY CARD BANNER ===== */

.fmge-my-tests-banner {
  margin-bottom: 18px;
  border-radius: 18px;
  padding: 12px 16px;
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.22) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.18) 0, transparent 55%),
    rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(18px);
}

.fmge-my-tests-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;     /* center horizontally */
  text-align: center;      /* center text */
}

.fmge-my-tests-banner-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f9fafb;
}

.fmge-my-tests-banner-subtitle {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(209, 213, 219, 0.85);
}


/* Slightly tighter on small screens */
@media (max-width: 640px) {
  .fmge-my-tests-banner {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .fmge-my-tests-banner-title {
    font-size: 16px;
    letter-spacing: 0.12em;
  }

  .fmge-my-tests-banner-subtitle {
    font-size: 11px;
    letter-spacing: 0.07em;
  }
}





/* Pill buttons in table */
.fmge-my-tests-resume-link {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #3b82f6;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.fmge-my-tests-resume-link:hover {
  background: #2563eb;
}

.fmge-my-tests-completed-label {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #22c55e;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
}

.fmge-my-tests-review-link {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #3b82f6;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.fmge-my-tests-review-link:hover {
  background: #2563eb;
}

.fmge-restart-test-btn {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;

  color: #111827;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.fmge-restart-test-btn:hover {

  background: linear-gradient(135deg, #16a34a, #90EE90);

}

.fmge-delete-test-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  color: #fecaca; /* soft red */
  border: 1px solid rgba(255, 0, 0, 0.75);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.fmge-delete-test-btn:hover {
  background: rgba(248, 113, 113, 0.25);
  border-color: rgba(255, 0, 0, 0.95);
  color: #fee2e2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}


.fmge-my-tests-table td:nth-last-child(-n+3) {
  text-align: center;
  white-space: nowrap;
}



/* Wrapper so we can position the details card */
.fmge-test-details-wrapper {
  position: relative;
  display: inline-block;
}

/* Compact details icon button */
.fmge-test-details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #4b5563;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}

.fmge-test-details-btn:hover {
  background: #eef2ff;
  border-color: #3b82f6;
  color: #1f2937;
}

/* The floating details card */
.fmge-test-details-card {
  position: absolute;
  right: 0;
  top: 115%;
  min-width: 220px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #111827;
  color: #e5e7eb;
  font-size: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(75, 85, 99, 0.8);
  z-index: 20;

  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

/* Small arrow pointing up to the button */
.fmge-test-details-card::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: #111827;
  border-left: 1px solid rgba(75, 85, 99, 0.8);
  border-top: 1px solid rgba(75, 85, 99, 0.8);
  transform: rotate(45deg);
}

/* Rows inside card */
.fmge-test-details-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.fmge-test-details-row:last-child {
  margin-bottom: 0;
}

.fmge-test-details-label {
  font-weight: 600;
  color: #e5e7eb;
  white-space: nowrap;
}

.fmge-test-details-value {
  color: #cbd5f5;
  text-align: right;
}

/* Show card on hover or keyboard focus */
.fmge-test-details-wrapper:hover .fmge-test-details-card,
.fmge-test-details-wrapper:focus-within .fmge-test-details-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}





/* ===== MY TESTS LAYOUT: TABLE + ANALYTICS SIDE CARD ===== */

.fmge-my-tests-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Left: quiz progress table shell with rounded shard card */
/* Shell becomes the horizontal scroll container */
.fmge-my-tests-table-shell {
  flex: 1 1 auto;
  min-width: 0;

  padding: 10px 12px 12px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(79, 70, 229, 0.18) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.18) 0, transparent 55%),
    rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);

  /* key: enable horizontal scrolling if table is wider than viewport */
  overflow-x: auto;
  overflow-y: visible;
}

/* Let the table be wider than the viewport when needed */
.fmge-my-tests-table-shell .fmge-my-tests-table {
  width: 100%;
  min-width: 720px;
}

/* On mobile/tablet, slightly reduce min-width so scroll feels natural */
@media (max-width: 768px) {
  .fmge-my-tests-table-shell {
    padding: 8px 8px 10px;
  }

  .fmge-my-tests-table-shell .fmge-my-tests-table {
    min-width: 600px;
  }
}




/* Inner table should conform to rounded corners */
.fmge-my-tests-table-shell .fmge-my-tests-table {
  border-radius: 12px;
  overflow: hidden; /* clip table borders to the rounded card */
}

/* Optional: soften the table header to match the card */
.fmge-my-tests-table-shell .fmge-my-tests-table th {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(55, 65, 81, 0.9);
}


/* Right: glossy analytics panel */
.fmge-my-tests-analytics-panel {
  flex: 0 0 300px;
  max-width: 100%;
}

.fmge-my-tests-analytics-inner {
  border-radius: 18px;
  padding: 12px 14px 14px;
  background:
    radial-gradient(circle at top left, rgba(79, 70, 229, 0.25) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.25) 0, transparent 55%),
    rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(18px);
  color: #e5e7eb;
}

.fmge-my-tests-analytics-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #f9fafb;
}

.fmge-my-tests-analytics-subtitle {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(209, 213, 219, 0.9);
}

/* Pie chart container */
.fmge-my-tests-pie {
  margin: 10px auto 6px;
  display: flex;
  justify-content: center;
}

/* Legend below the donut */
.fmge-my-tests-pie-legend {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(229, 231, 235, 0.95);
}

.fmge-my-tests-pie-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.fmge-my-tests-pie-row:last-child {
  margin-bottom: 0;
}

.fmge-my-tests-pie-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}

.fmge-my-tests-pie-dot--correct {
  background: #22c55e;
}

.fmge-my-tests-pie-dot--wrong {
  background: #ef4444;
}

.fmge-my-tests-pie-dot--unanswered {
  background: #9ca3af;
}

.fmge-my-tests-pie-label {
  flex: 1 1 auto;
  color: rgba(209, 213, 219, 0.9);
}

.fmge-my-tests-pie-value {
  flex: 0 0 auto;
  font-weight: 600;
  color: #e5e7eb;
}

/* Footer stats inside analytics card */
.fmge-my-tests-analytics-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(55, 65, 81, 0.9);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fmge-my-tests-analytics-stat {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.fmge-my-tests-analytics-stat-label {
  color: rgba(156, 163, 175, 0.98);
}

.fmge-my-tests-analytics-stat-value {
  font-weight: 600;
  color: #e5e7eb;
}

/* Responsive: stack analytics under table on small screens */
@media (max-width: 900px) {
  .fmge-my-tests-layout {
    flex-direction: column;
  }

  .fmge-my-tests-analytics-panel {
    flex: 1 1 auto;
  }
}







/* Module complete modal styles (add to styles.css) */
.fmge-complete-modal {
  position: relative;
  padding: 28px 28px 22px;
  max-width: 360px;
  border-radius: 18px;
  text-align: center;
  background: #f5f6f5; /* subtle off-white like your mock */
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
  overflow: visible;
}

/* circular close button (top-right) */
.modal-close-circle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 0;          /* IMPORTANT: no padding, keeps it perfectly round */
  box-sizing: border-box;
}


.modal .modal-close-circle {
  position: absolute;
  top: 10px;
  right: 10px;
}



.modal-close-circle:hover {
  background: #f3f4f6;
}

.close-x {
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  color: #111827;
}


/* Title and score */
.complete-title {
  margin: 6px 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

.complete-score {
  font-size: 16px;
  margin-bottom: 12px;
  color: #111827;
}
#quiz-complete-percent-value { font-weight:700; }

/* Arc wrapper */
.complete-arc-wrapper {
  position: relative;
  display: block;
  margin: 6px auto 14px;
  width: 240px;
  max-width: 100%;
  height: 140px;
}

.complete-arc-svg {
  display: block;
  margin: 0 auto;
}

/* center text inside arc area (placed over SVG) */
.arc-center-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  display: flex;
  justify-content: center;
  gap: 22px;
  align-items: center;
  pointer-events: none;
}

.arc-count {
  text-align: center;
  font-weight: 600;
}

.arc-count .num {
  font-size: 20px;
  display: block;
}

.arc-count .label {
  font-size: 13px;
  margin-top: 2px;
  font-weight: 500;
}

/* Correct */
#arc-correct-count .num,
#arc-correct-count .label {
  color: #16a34a; /* green */
}

/* Wrong */
#arc-wrong-count .num,
#arc-wrong-count .label {
  color: #dc2626; /* red */
}

/* Arc glow effect */
#arc-correct {
  filter: drop-shadow(0 0 6px rgba(22, 163, 74, 0.35));
}

#arc-wrong {
  filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.25));
}

/* Optional soft glow on background */
#arc-bg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05));
}


/* dynamic message */
.complete-message {
  margin-top: 14px;
  font-size: 16px;
  color: #111827;
  min-height: 32px;
}

/* footer button (big green) */
.complete-footer {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

.complete-footer .btn {
  padding: 12px 36px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  background: #16a34a; /* green */
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(22,163,74,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.complete-footer .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(22,163,74,0.35);
}

@media (max-width: 480px) {
  .fmge-complete-modal {
    max-width: 92%;
    padding: 22px 18px;
  }

  .complete-arc-wrapper {
    width: 200px;
    height: 120px;
  }

  .complete-arc-svg {
    width: 200px;
    height: 120px;
  }

  .arc-center-text {
    top: 28px;
    gap: 18px;
  }

  .arc-count .num {
    font-size: 18px;
  }
}






/* Quiz complete modal footer buttons */
.complete-footer {
  display: flex;
  justify-content: flex-end;
  justify-content: center;
  gap: 12px; /* space between Review and Finish */
}

/* REVIEW = green (re-use your existing green visual language) */
#quiz-complete-review-btn {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ffffff;
  border: none;
}

#quiz-complete-review-btn:hover {
  background: linear-gradient(135deg, #15803d, #22c55e);
}

/* FINISH = different accent (indigo/purple) */
#quiz-complete-finish-btn {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #ffffff;
  border: none;
}

#quiz-complete-finish-btn:hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5);
}






.quiz-selector select[multiple] {
  min-height: 120px;
}

.checkbox-group {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px;
  max-height: 160px;
  overflow-y: auto;
  background: #fff;
}

/* Quiz selector checkbox lists: visible thin scrollbars */
.checkbox-group {
  scrollbar-width: thin;  /* Firefox */
  scrollbar-color: rgba(148, 163, 184, 0.8) transparent;
}

/* WebKit (Chrome/Edge/Safari) */
.checkbox-group::-webkit-scrollbar {
  width: 6px;
}

.checkbox-group::-webkit-scrollbar-track {
  background: transparent;
}

.checkbox-group::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.8);
  border-radius: 999px;
}


/* On hover, show a subtle thumb */
.checkbox-group:hover::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.6);
}

/* Dark FMGE selector: slightly brighter thumb */
body.fmge-dark-page .checkbox-group:hover::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.9);
}



.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 6px;
  cursor: pointer;
}

.checkbox-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.checkbox-actions button {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  cursor: pointer;
}

.checkbox-actions button:hover {
  background: #eef2ff;
}

.checkbox-search {
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 11px;
}

.checkbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: 6px;
}

.checkbox-count {
  background: #e5e7eb;
  color: #111827;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}

/* ===== BOOKMARKS DASHBOARD: SHARD LOOK (FOLDERS + SUBJECTS) ===== */

/* Outer bookmarks page container */
.fmge-bookmarks-page {
  background: radial-gradient(circle at top, #020617 0, #020617 45%, #000000 100%);
  padding: 32px 12px 40px;
  color: #e5e7eb;
}

/* Inner “content” wrapper matches prebuilt/custom selector width */
.fmge-bookmarks-page .container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Section titles: Folders / Subjects */
.bookmarks-page-section {
  margin-top: 24px;
  margin-bottom: 18px;
}

.bookmarks-page-section-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e5e7eb;
  margin-bottom: 18px;
}

/* GRID for folder shards */
.bookmark-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

/* GRID for subject shards */
.subject-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

/* Shared shard card for folder + subject */
.bookmark-box-card,
.subject-box-card {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;

  background:
    radial-gradient(circle at top left, #111827 0, #020617 55%, #020617 100%);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  color: #e5e7eb;

  transition:
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out,
    border-color 0.2s ease-out,
    background 0.2s ease-out;


}

/* Soft glow layer, like module shards */
.bookmark-box-card::before,
.subject-box-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.14;
  mix-blend-mode: screen;
  pointer-events: none;
}



/* Base neutral bookmark shard (kept as default) */
.bookmark-box-card {
  /* neutral background from the shared rule above */
}

/* Variant 1 – crimson (matches shard-card--crimson) */
.bookmark-box-card--crimson {
  background:
    radial-gradient(circle at top left, #1f1024 0, #05030a 55%, #010105 100%);
  border-color: rgba(255, 109, 199, 0.32);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(255, 93, 214, 0.45),
    0 0 0 1px rgba(24, 24, 36, 0.85);
}
.bookmark-box-card--crimson::before {
  background:
    conic-gradient(
      from 210deg,
      rgba(255, 93, 214, 0.55),
      rgba(255, 140, 170, 0.55),
      rgba(255, 216, 107, 0.55),
      rgba(255, 93, 214, 0.55)
    );
}

/* Variant 2 – emerald (matches shard-card--emerald) */
.bookmark-box-card--emerald {
  background:
    radial-gradient(circle at top left, #041c14 0, #020a07 55%, #000403 100%);
  border-color: rgba(56, 242, 173, 0.32);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(56, 242, 173, 0.4),
    0 0 0 1px rgba(15, 23, 42, 0.85);
}
.bookmark-box-card--emerald::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(124, 255, 196, 0.55),
      rgba(65, 255, 124, 0.55),
      rgba(201, 255, 107, 0.55),
      rgba(124, 255, 196, 0.55)
    );
}

/* Variant 3 – sapphire (matches shard-card--sapphire) */
.bookmark-box-card--sapphire {
  background:
    radial-gradient(circle at top left, #081226 0, #040712 55%, #020308 100%);
  border-color: rgba(134, 160, 255, 0.34);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(79, 195, 255, 0.45),
    0 0 0 1px rgba(15, 23, 42, 0.85);
}
.bookmark-box-card--sapphire::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(127, 124, 255, 0.55),
      rgba(79, 195, 255, 0.55),
      rgba(160, 124, 255, 0.55),
      rgba(127, 124, 255, 0.55)
    );
}

/* Variant 4 – amber (matches shard-card--amber) */
.bookmark-box-card--amber {
  background:
    radial-gradient(circle at top left, #261409 0, #0f0602 50%, #050103 100%);
  border-color: rgba(255, 216, 107, 0.34);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(255, 184, 99, 0.45),
    0 0 0 1px rgba(24, 20, 0, 0.88);
}
.bookmark-box-card--amber::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(255, 216, 107, 0.55),
      rgba(255, 179, 71, 0.55),
      rgba(255, 156, 85, 0.55),
      rgba(255, 216, 107, 0.55)
    );
}

/* Variant 5 – amethyst (matches shard-card--amethyst) */
.bookmark-box-card--amethyst {
  background:
    radial-gradient(circle at top left, #1b1024 0, #060313 55%, #04010b 100%);
  border-color: rgba(212, 139, 255, 0.38);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(212, 139, 255, 0.45),
    0 0 0 1px rgba(24, 16, 48, 0.9);
}
.bookmark-box-card--amethyst::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(212, 139, 255, 0.55),
      rgba(159, 123, 255, 0.55),
      rgba(255, 127, 213, 0.55),
      rgba(212, 139, 255, 0.55)
    );
}





/* SUBJECT folders use same 5 shard colors as bookmark folders */

.subject-box-card--crimson {
  background:
    radial-gradient(circle at top left, #1f1024 0, #05030a 55%, #010105 100%);
  border-color: rgba(255, 109, 199, 0.32);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(255, 93, 214, 0.45),
    0 0 0 1px rgba(24, 24, 36, 0.85);
}
.subject-box-card--crimson::before {
  background:
    conic-gradient(
      from 210deg,
      rgba(255, 93, 214, 0.55),
      rgba(255, 140, 170, 0.55),
      rgba(255, 216, 107, 0.55),
      rgba(255, 93, 214, 0.55)
    );
}

.subject-box-card--emerald {
  background:
    radial-gradient(circle at top left, #041c14 0, #020a07 55%, #000403 100%);
  border-color: rgba(56, 242, 173, 0.32);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(56, 242, 173, 0.4),
    0 0 0 1px rgba(15, 23, 42, 0.85);
}
.subject-box-card--emerald::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(124, 255, 196, 0.55),
      rgba(65, 255, 124, 0.55),
      rgba(201, 255, 107, 0.55),
      rgba(124, 255, 196, 0.55)
    );
}

.subject-box-card--sapphire {
  background:
    radial-gradient(circle at top left, #081226 0, #040712 55%, #020308 100%);
  border-color: rgba(134, 160, 255, 0.34);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(79, 195, 255, 0.45),
    0 0 0 1px rgba(15, 23, 42, 0.85);
}
.subject-box-card--sapphire::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(127, 124, 255, 0.55),
      rgba(79, 195, 255, 0.55),
      rgba(160, 124, 255, 0.55),
      rgba(127, 124, 255, 0.55)
    );
}

.subject-box-card--amber {
  background:
    radial-gradient(circle at top left, #261409 0, #0f0602 50%, #050103 100%);
  border-color: rgba(255, 216, 107, 0.34);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(255, 184, 99, 0.45),
    0 0 0 1px rgba(24, 20, 0, 0.88);
}
.subject-box-card--amber::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(255, 216, 107, 0.55),
      rgba(255, 179, 71, 0.55),
      rgba(255, 156, 85, 0.55),
      rgba(255, 216, 107, 0.55)
    );
}

.subject-box-card--amethyst {
  background:
    radial-gradient(circle at top left, #1b1024 0, #060313 55%, #04010b 100%);
  border-color: rgba(212, 139, 255, 0.38);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(212, 139, 255, 0.45),
    0 0 0 1px rgba(24, 16, 48, 0.9);
}
.subject-box-card--amethyst::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(212, 139, 255, 0.55),
      rgba(159, 123, 255, 0.55),
      rgba(255, 127, 213, 0.55),
      rgba(212, 139, 255, 0.55)
    );
}



/* Inner content stays above glow */
.bookmark-box-card > * ,
.subject-box-card > * {
  position: relative;
  z-index: 1;
}

/* Title + optional edit pill for folders */
.bookmark-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.bookmark-box-title,
.subject-box-title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f9fafb;
}

/* Folder small edit button */
.bookmark-box-edit-btn {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  background: rgba(15, 23, 42, 0.9);
  cursor: pointer;
  color: #e5e7eb;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.bookmark-box-edit-btn:hover {
  background: rgba(30, 64, 175, 0.9);
  border-color: rgba(129, 140, 248, 0.95);
  transform: translateY(-1px);
}

/* Counts / meta text */
.bookmark-box-count,
.subject-box-count {
  font-size: 12px;
  color: rgba(209, 213, 219, 0.9);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hover: lift + stronger glow */
.bookmark-box-card:hover,
.subject-box-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.16);
}


/* ===== BOOKMARK FOLDER PAGE: SHARD-STYLE QUESTIONS LIST ===== */

/* Folder page outer wrapper */
.fmge-bookmarks-folder-page {
  background: radial-gradient(circle at top, #020617 0, #020617 45%, #000000 100%);
  padding: 32px 12px 40px;
  color: #e5e7eb;
}

.fmge-bookmarks-folder-page .container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Top “Back to bookmarks” button already styled; keep it as is */

/* Folder title on this page */
#fmge-bookmarks-folder-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f9fafb;
}

/* Wrapper that JS uses (data-box / data-subject) */
#fmge-bookmark-folder-view {
  margin-top: 6px;
}

/* ===== Batch actions bar ===== */
.bookmark-batch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  margin-bottom: 12px;
  border-radius: 14px;
  background:
    radial-gradient(circle at top left, rgba(15,23,42,0.96) 0, rgba(15,23,42,0.92) 55%, rgba(15,23,42,0.9) 100%);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  font-size: 13px;
}

.bookmark-batch-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bookmark-batch-label {
  font-weight: 600;
  color: #e5e7eb;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bookmark-batch-count {
  min-width: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.96);
  color: #f9fafb;
  text-align: center;
  font-weight: 600;
  border: 1px solid rgba(148, 163, 184, 0.85);
}

.bookmark-batch-right {
  display: flex;
  gap: 8px;
}

.bookmark-batch-right button {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease,
    border-color 0.15s ease;
}

.bookmark-batch-right button:hover:not(:disabled) {
  background: rgba(30, 64, 175, 0.8);
  border-color: rgba(129, 140, 248, 0.95);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.7);
  transform: translateY(-1px);
}

.bookmark-batch-right button:disabled {
  cursor: default;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}

/* ===== Question list shard cards ===== */

.bookmark-question-card {
  border-radius: 18px;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at left, rgba(56, 189, 248, 0.16) 0, transparent 55%),
    radial-gradient(circle at right, rgba(129, 140, 248, 0.16) 0, transparent 60%),
    linear-gradient(135deg, #020617, #020617);
  border: 1px solid rgba(55, 65, 81, 0.9);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  cursor: pointer;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out;
}

.bookmark-question-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(255, 255, 255, 0.15);
  border-color: rgba(148, 163, 184, 0.9);
}

/* Layout: checkbox + content */
.bookmark-question-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bookmark-batch-select {
  margin-top: 4px;
}

.bookmark-batch-select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Text content */
.bookmark-question-main {
  flex: 1 1 auto;
}

.bookmark-question-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
}

.bookmark-question-card-header > div:first-child {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbd5f5;
}

/* Single-question remove icon button */
.bookmark-question-edit {
  border: none;
  background: transparent;
  padding: 2px 4px;
  cursor: pointer;
  color: #9ca3af;
  transition:
    color 0.15s ease,
    transform 0.1s ease;
}

.bookmark-question-edit:hover {
  color: #f97373;
  transform: translateY(-1px);
}

/* Question text snippet */
.bookmark-question-main > div:last-child {
  font-size: 14px;
  color: #e5e7eb;
}

/* ===== FULL QUESTION VIEW (inside folder page) ===== */

.bookmark-full-question {
  margin-top: 16px;
  padding: 20px 18px 18px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.18) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(248, 250, 252, 0.16) 0, transparent 50%),
    linear-gradient(135deg, #020617, #020617);
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
}

.bookmark-question-text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* Options list in full view */
.bookmark-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.bookmark-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: rgba(15, 23, 42, 0.95);
  font-size: 14px;
  color: #e5e7eb;
}

.bookmark-option.correct {
  border-color: rgba(34, 197, 94, 0.95);
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.16), rgba(15, 23, 42, 1));
}

.bookmark-option-label {
  font-weight: 700;
  min-width: 20px;
}

/* Correct answer line */
.bookmark-correct-answer {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #4ade80;
}

/* Explanation block */
.bookmark-explanation {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(250, 250, 210, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.85);
  font-size: 14px;
  color: #fef9c3;
}

/* Back to bookmarks: shard-style pill, not theme default */
.fmge-bookmarks-folder-page .bookmark-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 14px;

  border: 1px solid rgba(148, 163, 184, 0.9);
  border-radius: 999px;
  padding: 8px 18px;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;
  font-family: inherit;

  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.22) 0, transparent 55%),
    linear-gradient(135deg, #020617, #020617);
  color: #e5e7eb;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

/* Hover state: slight lift + brighter border */
.fmge-bookmarks-folder-page .bookmark-back-btn:hover {
  border-color: rgba(248, 250, 252, 0.9);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(248, 250, 252, 0.14);
  transform: translateY(-1px);
}


/* Prev / Next navigation in full view */
.bookmark-full-nav {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.bookmark-nav-prev,
.bookmark-nav-next {
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  background: #facc15;
  color: #111827;
  box-shadow: 0 4px 10px rgba(250, 204, 21, 0.35);
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.bookmark-nav-prev:hover,
.bookmark-nav-next:hover {
  background: #eab308;
  box-shadow: 0 6px 14px rgba(250, 204, 21, 0.45);
  transform: translateY(-1px);
}

/* Disabled prev/next */
.bookmark-nav-prev[disabled],
.bookmark-nav-next[disabled] {
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* Responsive: stack nicely on mobile */
@media (max-width: 640px) {
  .bookmark-question-card {
    padding: 12px 10px;
  }

  .bookmark-question-card-inner {
    align-items: flex-start;
  }

  .bookmark-full-question {
    padding: 16px 12px 14px;
  }

  .bookmark-full-nav {
    flex-direction: row;
    justify-content: space-between;
  }
}






/* ===== Bookmark Folder Edit Modal (new design) ===== */

.fmge-folder-edit-modal {
  position: relative;
  max-width: 360px;
  border-radius: 18px;
  background: #f9fafb;
  padding: 24px 20px 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

/* reuse the circular close button style */
.fmge-folder-edit-modal .modal-close-circle {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* description text */
.fmge-folder-edit-description {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 14px;
}

/* rename block */
.fmge-folder-edit-rename-block {
  margin-bottom: 14px;
}

.fmge-folder-edit-rename-block label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
  display: block;
}

.fmge-folder-edit-rename-block input#bookmark-folder-new-name {
  width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 13px;
  background: #ffffff;
}

/* delete note */
.fmge-folder-edit-delete-note strong {
  font-size: 13px;
  font-weight: 600;
  color: #b91c1c;
}

.fmge-folder-edit-delete-note p {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* footer layout */
.fmge-folder-edit-footer {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* base button style: prevent template inheritance */
.fmge-folder-edit-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #facc15;
  color: #111827;
  box-shadow: 0 3px 8px rgba(250, 204, 21, 0.4);
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.1s ease;
  font-family: inherit;
}

/* Save / rename: yellow */
.fmge-folder-edit-btn--rename {
  background: #facc15;
  color: #111827;
}

.fmge-folder-edit-btn--rename:hover {
  background: #eab308;
  box-shadow: 0 5px 12px rgba(250, 204, 21, 0.5);
  transform: translateY(-1px);
}

/* Delete: red */
.fmge-folder-edit-btn--delete {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.4);
}

.fmge-folder-edit-btn--delete:hover {
  background: #b91c1c;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.5);
  transform: translateY(-1px);
}

/* Cancel: light neutral */
.fmge-folder-edit-btn--cancel {
  background: #e5e7eb;
  color: #111827;
  box-shadow: none;
}

.fmge-folder-edit-btn--cancel:hover {
  background: #d1d5db;
}

/* ===== PREBUILT MODULE SHARD CARDS ===== */

/* Container still uses existing .bookmark-box-grid from styles.css */
.fmge-prebuilt-modules .bookmark-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* Shard-style card (copied from index.html, adapted) */
.fmge-prebuilt-modules .shard-card {
  position: relative;
  padding: 20px 18px 18px;
  border-radius: 20px;
  background: radial-gradient(circle at top left, #2b2b3f 0, #131321 60%, #050509 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

/* Glow layer */
.fmge-prebuilt-modules .shard-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.08;
  background: conic-gradient(
    from 220deg,
    #ff5ed5,
    #ff7c7c,
    #ffd86b,
    #7bffcb,
    #86a0ff,
    #ff5ed5
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Variant – crimson */
.fmge-prebuilt-modules .shard-card--crimson::before {
  background: conic-gradient(
    from 200deg,
    #ff4dd8,
    #ff6b9a,
    #ffb86b,
    #ff4dd8
  );
}

/* Variant – emerald */
.fmge-prebuilt-modules .shard-card--emerald::before {
  background: conic-gradient(
    from 200deg,
    #7cffc4,
    #41ff7c,
    #c9ff6b,
    #7cffc4
  );
}

/* Variant – sapphire */
.fmge-prebuilt-modules .shard-card--sapphire::before {
  background: conic-gradient(
    from 200deg,
    #7f7cff,
    #4fc3ff,
    #a07cff,
    #7f7cff
  );
}

/* Variant – amber */
.fmge-prebuilt-modules .shard-card--amber::before {
  background: conic-gradient(
    from 200deg,
    #ffd86b,
    #ffb347,
    #ff7f50,
    #ffd86b
  );
}

/* Variant – amethyst */
.fmge-prebuilt-modules .shard-card--amethyst::before {
  background: conic-gradient(
    from 200deg,
    #d48bff,
    #9f7bff,
    #ff7fd5,
    #d48bff
  );
}

.fmge-prebuilt-modules .shard-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fmge-prebuilt-modules .shard-tag {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.82);
}

.fmge-prebuilt-modules .shard-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fmge-prebuilt-modules .shard-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fmge-prebuilt-modules .shard-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fmge-prebuilt-modules .shard-subtitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
}

/* Gem block on the right */
.fmge-prebuilt-modules .shard-gem {
  width: 60px;
  height: 60px;
  border-radius: 24px;
  position: relative;
  background: radial-gradient(circle at 20% 0, #fff 0, transparent 30%),
              radial-gradient(circle at 70% 110%, rgba(255, 255, 255, 0.4) 0 20%, transparent 30%),
              linear-gradient(135deg, #ff55c9, #ff7f6a);
  box-shadow:
    0 0 25px rgba(255, 113, 201, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

/* Gem color variants matching the shards */
.fmge-prebuilt-modules .shard-card--emerald .shard-gem {
  background: radial-gradient(circle at 20% 0, #fff 0, transparent 30%),
              radial-gradient(circle at 80% 100%, rgba(255, 255, 255, 0.35) 0 22%, transparent 32%),
              linear-gradient(135deg, #36ff9a, #1cffd3);
  box-shadow:
    0 0 25px rgba(100, 255, 182, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}

.fmge-prebuilt-modules .shard-card--sapphire .shard-gem {
  background: radial-gradient(circle at 20% 0, #fff 0, transparent 30%),
              radial-gradient(circle at 80% 100%, rgba(255, 255, 255, 0.35) 0 22%, transparent 32%),
              linear-gradient(135deg, #4f8bff, #40c3ff);
  box-shadow:
    0 0 25px rgba(116, 179, 255, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}

.fmge-prebuilt-modules .shard-card--amber .shard-gem {
  background: radial-gradient(circle at 20% 0, #fff 0, transparent 30%),
              radial-gradient(circle at 80% 100%, rgba(255, 255, 255, 0.35) 0 22%, transparent 32%),
              linear-gradient(135deg, #ffb347, #ffd86b);
  box-shadow:
    0 0 25px rgba(255, 209, 120, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}

.fmge-prebuilt-modules .shard-card--amethyst .shard-gem {
  background: radial-gradient(circle at 20% 0, #fff 0, transparent 30%),
              radial-gradient(circle at 80% 100%, rgba(255, 255, 255, 0.35) 0 22%, transparent 32%),
              linear-gradient(135deg, #d48bff, #9f7bff);
  box-shadow:
    0 0 25px rgba(212, 139, 255, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}

.fmge-prebuilt-modules .shard-gem::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: conic-gradient(
    from 180deg,
    rgba(255, 255, 255, 0.8),
    transparent 20%,
    rgba(255, 255, 255, 0.4) 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.7) 80%
  );
  mix-blend-mode: soft-light;
  opacity: 0.5;
}

.fmge-prebuilt-modules .shard-desc {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(245, 245, 247, 0.86);
  max-width: 32em;
}

.fmge-prebuilt-modules .shard-footer {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.55;
}

/* Hover + selected state */
.fmge-prebuilt-modules .shard-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 26px 55px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at top, #303048 0, #121222 55%, #050509 100%);
}

.fmge-prebuilt-modules .shard-card--selected {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.3);
}

.fmge-prebuilt-modules .shard-card--selected .shard-tag {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.6);
}

/* Button row inside each shard card */
.fmge-prebuilt-modules .shard-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* Reuse your existing .btn styles (no changes needed) */


/* ===== PREBUILT MODULES / SELECTOR HEADER BANNER ===== */

.fmge-prebuilt-modules .prebuilt-header-wrapper,
.fmge-custom-module-page .prebuilt-header-wrapper {
  margin-bottom: 22px;
}

.fmge-prebuilt-modules .prebuilt-header-card,
.fmge-custom-module-page .prebuilt-header-card {
  position: relative;
  border-radius: 22px;
  padding: 18px 22px;
  background:
    radial-gradient(circle at top left, rgba(38, 38, 63, 0.38) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(15, 23, 42, 0.35) 0, transparent 60%),
    rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(14px);
  overflow: hidden;
}




/* soft mystical glow behind the title */
.fmge-prebuilt-modules .prebuilt-header-card::before,
.fmge-custom-module-page .prebuilt-header-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 20% 0, rgba(255, 120, 220, 0.4) 0, transparent 45%),
    radial-gradient(circle at 80% 100%, rgba(80, 220, 255, 0.4) 0, transparent 50%),
    radial-gradient(circle at 50% 40%, rgba(180, 255, 140, 0.35) 0, transparent 55%);
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* faint arc-like highlights (echoing the shard gem facets) */
.fmge-prebuilt-modules .prebuilt-header-card::after,
.fmge-custom-module-page .prebuilt-header-card::after {
  content: "";
  position: absolute;
  width: 180%;
  height: 180%;
  top: -60%;
  left: -40%;
  background:
    conic-gradient(
      from 210deg,
      rgba(255, 255, 255, 0.25),
      transparent 15%,
      rgba(255, 255, 255, 0.12),
      transparent 40%,
      rgba(255, 255, 255, 0.08),
      transparent 70%
    );
  opacity: 0.14;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.fmge-prebuilt-modules .prebuilt-header-content,
.fmge-custom-module-page .prebuilt-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* big title */
.fmge-prebuilt-modules .prebuilt-header-title,
.fmge-custom-module-page .prebuilt-header-title {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f9fafb;
}

/* subtle secondary line under the title */
.fmge-prebuilt-modules .prebuilt-header-subtitle,
.fmge-custom-module-page .prebuilt-header-subtitle {
  margin-top: 3px;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(209, 213, 219, 0.92);
}

/* optional: faint glow line below */
.fmge-prebuilt-modules .prebuilt-header-glow,
.fmge-custom-module-page .prebuilt-header-glow {
  margin-top: 10px;
  width: 160px;
  max-width: 60%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(244, 244, 245, 0.9),
    transparent
  );
  opacity: 0.9;
}

/* responsive tweaks */
@media (max-width: 720px) {
  .fmge-prebuilt-modules .prebuilt-header-card,
  .fmge-custom-module-page .prebuilt-header-card {
    padding: 16px 16px;
    border-radius: 18px;
  }

  .fmge-prebuilt-modules .prebuilt-header-title,
  .fmge-custom-module-page .prebuilt-header-title {
    font-size: 22px;
    letter-spacing: 0.16em;
  }

  .fmge-prebuilt-modules .prebuilt-header-subtitle,
  .fmge-custom-module-page .prebuilt-header-subtitle {
    font-size: 11px;
    letter-spacing: 0.2em;
  }
}


/* Make the prebuilt modules grid sit on pure dark background */

/* Remove light panel behind the shard cards */
.fmge-prebuilt-modules .quiz-selector {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 0;
  padding: 24px 0 24px;
}

/* Ensure the outer quiz container is also transparent on that page */
.fmge-prebuilt-modules.krok-quiz-container,
.krok-quiz-container.fmge-prebuilt-modules {
  background: transparent !important;
  box-shadow: none !important;
}

/* Optional: remove any default theme “content box” just on FMGE dark pages */
body.fmge-dark-page .site,
body.fmge-dark-page .content-area,
body.fmge-dark-page .site-content,
body.fmge-dark-page .entry-content {
  background: transparent !important;
  box-shadow: none !important;
}



















/* ===== PREBUILT MODULE DETAIL PAGE (DARK SHARD THEME) ===== */

/* Dark background for the whole page when viewing a module */
.fmge-prebuilt-module-view {
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #000000 100%);
  padding: 32px 12px 40px;
}

.fmge-prebuilt-module-view .quiz-selector.fmge-prebuilt-module-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 22px 28px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background:
    radial-gradient(circle at top left, #111827 0, #020617 45%, #020617 100%);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.7);
  color: #e5e7eb;
}

/* Top header: module label left, start button right */
.fmge-prebuilt-module-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.fmge-prebuilt-module-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fmge-prebuilt-module-label {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f9fafb;
}

.fmge-prebuilt-module-tags {
  font-size: 13px;
  color: rgba(209, 213, 219, 0.9);
}

.fmge-prebuilt-module-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(248, 250, 252, 0.06);
  border: 1px solid rgba(248, 250, 252, 0.24);
  color: #f97316;
}

/* Right side start button */
.fmge-prebuilt-start-wrap {
  display: flex;
  align-items: flex-start;
}

/* === START TEST BUTTON: red mystic gradient pill === */
.fmge-prebuilt-start-btn--shard {
  position: relative;
  padding: 26px 42px;                    /* keep the taller pill you liked */
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.9); /* red edge */
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* red mystic gradient instead of teal/black */
  background:
    radial-gradient(circle at 0% 0%, rgba(252, 165, 165, 0.35), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(248, 113, 113, 0.45), transparent 55%),
    linear-gradient(135deg, #7f1d1d, #b91c1c, #7f1d1d);

  color: #fef2f2;
  text-align: center;
  min-width: 180px;
  min-height: 40px;

  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 26px rgba(248, 113, 113, 0.75); /* red glow */
  overflow: hidden;
}





/* inner neon ring just inside the border */
.fmge-prebuilt-start-btn--shard::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(56, 189, 248, 0.7);
  opacity: 0.45;
  pointer-events: none;
}

/* soft halo behind the button */
.fmge-prebuilt-start-btn--shard::after {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 15% 0%, rgba(59, 130, 246, 0.35), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(16, 185, 129, 0.4), transparent 55%);
  opacity: 0.25;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

/* MAIN LABEL – plain white for maximum legibility */
.fmge-prebuilt-start-label {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f9fafb;
}

/* SUB LABEL – subtle grey */
.fmge-prebuilt-start-sub {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(209, 213, 219, 0.9);
}

/* HOVER: stronger glow, but keep the pill black */
.fmge-prebuilt-start-btn--shard:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.9),
    0 20px 45px rgba(0, 0, 0, 1),
    0 0 24px rgba(56, 189, 248, 0.9);
  border-color: rgba(56, 189, 248, 0.95);
}

.fmge-prebuilt-start-btn--shard:hover::after {
  opacity: 0.5;
  transform: scale(1.05);
  filter: blur(2px);
}

/* Active press: slight push in, still black */
.fmge-prebuilt-start-btn--shard:active {
  transform: translateY(0);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.9),
    0 0 18px rgba(45, 212, 191, 0.7);
}




/* Info shard (module snapshot) */
.fmge-prebuilt-module-info-row {
  margin-top: 6px;
  margin-bottom: 22px;
}

.fmge-prebuilt-info-card {
  position: relative;
  padding: 18px 18px 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, #1e293b 0, #020617 60%, #020617 100%);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  overflow: hidden;
}

.fmge-prebuilt-info-inner {
  position: relative;
  z-index: 1;
}

.fmge-prebuilt-info-tag {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.9);
  margin-bottom: 10px;
}

.fmge-prebuilt-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.fmge-prebuilt-info-item {
  min-width: 90px;
}

.fmge-prebuilt-info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 4px;
}

.fmge-prebuilt-info-value {
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
}

.fmge-prebuilt-info-note {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(156, 163, 175, 0.95);
}

/* Gem on info card, echoing module shards */
.fmge-prebuilt-info-gem {
  position: absolute;
  right: -10px;
  top: -12px;
  width: 90px;
  height: 90px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 0, #fff 0, transparent 30%),
    radial-gradient(circle at 90% 120%, rgba(255, 255, 255, 0.4) 0 22%, transparent 34%),
    linear-gradient(135deg, #22c55e, #4ade80);
  box-shadow:
    0 0 30px rgba(34, 197, 94, 0.75),
    0 0 0 1px rgba(248, 250, 252, 0.18);
  opacity: 0.85;
}

/* Attempts section */
.fmge-prebuilt-attempts-section {
  margin-top: 10px;
}

.fmge-prebuilt-attempts-title {
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 10px;
}



/* ===== PREBUILT MODULE ATTEMPTS + TREND LAYOUT ===== */

.fmge-prebuilt-attempts-layout {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin-top: 8px;
}

/* Left: table wrapper keeps existing style */
.fmge-prebuilt-attempts-table-wrap {
  background: radial-gradient(circle at top, #020617 0, #020617 100%);
  border-radius: 16px;
  padding: 10px 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  flex: 1 1 0;
  min-width: 0;
}

/* Right: trend panel */
.fmge-prebuilt-trend-panel {
  flex: 0 0 320px;
  max-width: 100%;
  border-radius: 16px;
  padding: 12px 14px 14px;
  background:
    radial-gradient(circle at top left, #111827 0, #020617 55%, #020617 100%);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
  position: relative;
  overflow: hidden;
}

/* faint glow behind chart */
.fmge-prebuilt-trend-panel::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 10% 0, rgba(56, 189, 248, 0.35) 0, transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(34, 197, 94, 0.35) 0, transparent 50%);
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* inner content stays readable */
.fmge-prebuilt-trend-inner {
  position: relative;
  z-index: 1;
}

/* panel title + small meta line */
.fmge-prebuilt-trend-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e5e7eb;
  margin-bottom: 2px;
}

.fmge-prebuilt-trend-subtitle {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(156, 163, 175, 0.9);
  margin-bottom: 8px;
}

/* chart wrapper */
.fmge-prebuilt-trend-chart {
  width: 100%;
  max-width: 100%;
}

/* subtle grid lines */
.fmge-prebuilt-trend-grid-line {
  stroke: rgba(55, 65, 81, 0.75);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* baseline axis */
.fmge-prebuilt-trend-axis {
  stroke: rgba(148, 163, 184, 0.9);
  stroke-width: 1.2;
}

/* main line (gradient stroke via <defs>, class used for fallback) */
.fmge-prebuilt-trend-line {
  stroke-width: 2.2;
  fill: none;
}

/* markers on each attempt */
.fmge-prebuilt-trend-dot {
  stroke-width: 1.6;
}

/* labels below chart */
.fmge-prebuilt-trend-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(156, 163, 175, 0.95);
}

/* small pill for best score */
.fmge-prebuilt-trend-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(34, 197, 94, 0.8);
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.15);
}

/* mobile: stack table above chart */
@media (max-width: 900px) {
  .fmge-prebuilt-attempts-layout {
    flex-direction: column;
  }

  .fmge-prebuilt-trend-panel {
    flex: 1 1 auto;
  }
}





/* Table wrapper uses existing my-tests styles, but on dark bg */
.fmge-prebuilt-attempts-table-wrap {
  background: radial-gradient(circle at top, #020617 0, #020617 100%);
  border-radius: 16px;
  padding: 10px 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* Header row */
.fmge-prebuilt-attempts-table thead th {
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  border-color: rgba(55, 65, 81, 0.9);
}

/* Shard-style rows */
.fmge-prebuilt-attempts-table tbody tr.fmge-prebuilt-attempt-row {
  background:
    radial-gradient(circle at left, rgba(56, 189, 248, 0.16) 0, transparent 60%),
    radial-gradient(circle at right, rgba(45, 212, 191, 0.12) 0, transparent 60%),
    linear-gradient(135deg, #020617, #020617);
  color: #e5e7eb;
}

.fmge-prebuilt-attempts-table tbody tr.fmge-prebuilt-attempt-row td {
  border-color: rgba(55, 65, 81, 0.8);
}

/* small pill for "Run X" */
.fmge-prebuilt-attempt-pill {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.85);
  color: #e5e7eb;
}

/* date / score text */
.fmge-prebuilt-attempt-date {
  font-size: 13px;
  color: rgba(209, 213, 219, 0.9);
}

.fmge-prebuilt-attempt-score {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.96);
}

/* Transparent buttons for prebuilt attempts table (Resume + Review) */
.fmge-prebuilt-resume-pill,
.fmge-prebuilt-review-pill {
  background: transparent;
  color: #e5e7eb;
  border: 1px solid rgba(0, 150, 255, 0.75);
  box-shadow: none;
}

.fmge-prebuilt-resume-pill:hover,
.fmge-prebuilt-review-pill:hover {
  background: rgba(240, 255, 255, 0.45);
  border-color: rgba(148, 163, 184, 0.95);
  color: #f9fafb;
}

/* Completed label pill in prebuilt attempts table */
.fmge-prebuilt-status-completed {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.75);
  color: #bbf7d0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}







/* No attempts text */
.fmge-prebuilt-no-attempts {
  font-size: 13px;
  color: rgba(156, 163, 175, 0.95);
  margin-top: 6px;
}



/* Prebuilt attempts table column widths */


.fmge-prebuilt-attempts-table th:nth-child(2),
.fmge-prebuilt-attempts-table td:nth-child(2) {
  max-width: 70px;
}

.fmge-prebuilt-attempts-table th:nth-child(3),
.fmge-prebuilt-attempts-table td:nth-child(3) {
  min-width: 160px;  /* Score */
}

.fmge-prebuilt-attempts-table th:nth-child(4),
.fmge-prebuilt-attempts-table td:nth-child(4),
.fmge-prebuilt-attempts-table th:nth-child(5),
.fmge-prebuilt-attempts-table td:nth-child(5) {

  text-align: center;
  white-space: nowrap;
  max-width: 70px;
}



/* FMGE QUIZ PROGRESS TABLE COLUMN WIDTH */
.fmge-my-tests-table.fmge-prebuilt-attempts-table th:nth-child(1),
.fmge-my-tests-table.fmge-prebuilt-attempts-table td:nth-child(1) {
  min-width: 60px;
  width: 80px;
  text-align: left;
}


.fmge-my-tests-table.fmge-prebuilt-attempts-table th:nth-child(2),
.fmge-my-tests-table.fmge-prebuilt-attempts-table td:nth-child(2) {
  min-width: 100px;
  width: 100px;
  text-align: center;
}


.fmge-my-tests-table.fmge-prebuilt-attempts-table th:nth-child(3),
.fmge-my-tests-table.fmge-prebuilt-attempts-table td:nth-child(3) {
  min-width: 50px;
  width: 100px;
  text-align: center;
}

.fmge-my-tests-table.fmge-prebuilt-attempts-table th:nth-child(4),
.fmge-my-tests-table.fmge-prebuilt-attempts-table td:nth-child(4) {
  min-width: 110px;
  width: 180px;
  text-align: center;
}

.fmge-my-tests-table.fmge-prebuilt-attempts-table th:nth-child(5),
.fmge-my-tests-table.fmge-prebuilt-attempts-table td:nth-child(5) {
  min-width: 90px;
  width: 100px;
  text-align: center;
}

.fmge-my-tests-table.fmge-prebuilt-attempts-table th:nth-child(6),
.fmge-my-tests-table.fmge-prebuilt-attempts-table td:nth-child(6) {
  min-width: 50px;
  width: 50px;
  text-align: center;
}


.fmge-my-tests-table.fmge-prebuilt-attempts-table th:nth-child(7),
.fmge-my-tests-table.fmge-prebuilt-attempts-table td:nth-child(7) {
  min-width: 50px;
  width: 50px;
  text-align: center;
}


.fmge-my-tests-table.fmge-prebuilt-attempts-table th:nth-child(8),
.fmge-my-tests-table.fmge-prebuilt-attempts-table td:nth-child(8) {
  min-width: 50px;
  width: 50px;
  text-align: center;
}





/* Responsive */
@media (max-width: 768px) {
  .fmge-prebuilt-module-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .fmge-prebuilt-start-wrap {
    align-self: stretch;
    justify-content: flex-start;
  }

  .fmge-prebuilt-start-btn--shard {
    width: 100%;
    justify-content: center;
    align-items: center;
  }

}



/* Global dark layout for all FMGE pages (quiz, selector, prebuilt, bookmarks, etc.) */
body.fmge-dark-page {
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #000000 100%) !important;
  color: #e5e7eb;
}

body.fmge-dark-page .site,
body.fmge-dark-page .content-area,
body.fmge-dark-page .site-content,
body.fmge-dark-page .entry-content {
  background: transparent !important;
  box-shadow: none !important;
}



/* ==================== FUTURISTIC CUSTOM MODULE SELECTOR ==================== */
/* Scope everything to the page that has [fmge_quiz_selector],
   which already adds .fmge-custom-module-page on the outer container. */

.fmge-custom-module-page {
  /* Dark cosmic background similar to prebuilt views, but a bit softer */
  background:
    radial-gradient(circle at top, #020617 0, #020617 45%, #000000 100%);
  padding: 32px 12px 40px;
}

/* Turn the selector panel into a dark shard-like shell */
.fmge-custom-module-page .quiz-selector {
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 32px 22px 26px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background:
    radial-gradient(circle at top left, #111827 0, #020617 55%, #020617 100%);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  position: relative;
  overflow: hidden;
}

/* Soft nebula glow behind the whole selector */
.fmge-custom-module-page .quiz-selector::after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 10% 0, rgba(56, 189, 248, 0.3) 0, transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(244, 114, 182, 0.35) 0, transparent 50%),
    radial-gradient(circle at 50% 40%, rgba(52, 211, 153, 0.28) 0, transparent 55%);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Keep content above the glow */
.fmge-custom-module-page .quiz-selector-row,
.fmge-custom-module-page .quiz-selector-actions {
  position: relative;
  z-index: 1;
}



/* Reduce top padding in this variant, since we are replacing the earlier rule */
.fmge-custom-module-page .quiz-selector {
  padding-top: 70px;
}


/* Card content above glow */
.fmge-custom-module-page .quiz-selector-field > * {
  position: relative;
  z-index: 1;
}

/* Field header label text (Subject / Year / Exam / Questions) */
.fmge-custom-module-page .checkbox-header span:first-child,
.fmge-custom-module-page .checkbox-header span {
  color: #e5e7eb;
}

/* Counter pill: brighter on dark */
.fmge-custom-module-page .checkbox-count {
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.9);
}

/* Search input inside cards */
.fmge-custom-module-page .checkbox-search {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
}

.fmge-custom-module-page .checkbox-search::placeholder {
  color: #6b7280;
}





/* Checkbox group background */
.fmge-custom-module-page .checkbox-group {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(55, 65, 81, 0.9);
}

/* Checkbox label text */
.fmge-custom-module-page .checkbox-item {
  color: #e5e7eb;
}

/* Checkbox actions (“Select all / Clear”) */
.fmge-custom-module-page .checkbox-actions button {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.75);
  color: #e5e7eb;
}

.fmge-custom-module-page .checkbox-actions button:hover {
  background: rgba(30, 64, 175, 0.65);
  border-color: rgba(129, 140, 248, 0.9);
}

/* Question count input + pills in dark theme */
.fmge-custom-module-page .quiz-selector-field.quiz-selector-field--narrow #fmge-count-input {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.8);
  color: #f9fafb;
}

.fmge-custom-module-page .fmge-count-presets {
  margin-top: 16px;
}

.fmge-custom-module-page .fmge-count-pill {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.8);
  color: #e5e7eb;
}

.fmge-custom-module-page .fmge-count-pill:hover {
  background: rgba(30, 64, 175, 0.8);
  border-color: rgba(129, 140, 248, 0.95);
}

/* Active count pill = glowing emerald */
.fmge-custom-module-page .fmge-count-pill.fmge-count-pill--active {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: rgba(34, 197, 94, 0.95);
  color: #f9fafb;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.6);
}

/* Center section spacing */
.fmge-custom-module-page .quiz-selector-row {
  gap: 16px;
}

/* ========== START TEST BUTTON: match shard-style pill ========== */
.fmge-custom-module-page .quiz-selector-actions {
  margin-top: 24px;
}

/* override default green button on this page */
.fmge-custom-module-page #fmge-start-test-btn {
  position: relative;
  padding: 22px 40px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  border: 1px solid rgba(248, 113, 113, 0.95); /* red edge */
  cursor: pointer;

  background:
    radial-gradient(circle at 0% 0%, rgba(252, 165, 165, 0.32), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(248, 113, 113, 0.42), transparent 55%),
    linear-gradient(135deg, #7f1d1d, #b91c1c, #7f1d1d);

  color: #fef2f2;
  text-transform: uppercase;
  letter-spacing: 0.18em;

  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.95),
    0 20px 45px rgba(0, 0, 0, 1),
    0 0 26px rgba(248, 113, 113, 0.75);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

/* inner neon ring */
.fmge-custom-module-page #fmge-start-test-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(252, 165, 165, 0.8);
  opacity: 0.55;
  pointer-events: none;
}

/* soft halo */
.fmge-custom-module-page #fmge-start-test-btn::after {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 15% 0%, rgba(248, 113, 113, 0.4) 0, transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(248, 113, 113, 0.35) 0, transparent 55%);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.fmge-custom-module-page #fmge-start-test-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(248, 250, 252, 0.85),
    0 24px 55px rgba(0, 0, 0, 1),
    0 0 28px rgba(248, 113, 113, 0.95);
  border-color: rgba(248, 250, 252, 0.95);
}

.fmge-custom-module-page #fmge-start-test-btn:hover::after {
  opacity: 0.6;
  transform: scale(1.05);
  filter: blur(2px);
}

.fmge-custom-module-page #fmge-start-test-btn:disabled {
  background: #6b7280;
  border-color: #6b7280;
  color: #e5e7eb;
  box-shadow: none;
  transform: none;
}

/* Responsive tweaks so cards don’t feel cramped on mobile */
@media (max-width: 900px) {
  .fmge-custom-module-page .quiz-selector {
    padding: 26px 16px 22px;
  }

  .fmge-custom-module-page .quiz-selector-field {
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  .fmge-custom-module-page .quiz-selector-row {
    flex-direction: column;
  }

  .fmge-custom-module-page #fmge-start-test-btn {
    width: 100%;
    text-align: center;
  }
}

/* ==================== QUIZ SELECTOR MOBILE LAYOUT FIXES ==================== */

/* Base breakpoint for phones */
@media (max-width: 640px) {
  /* Let the selector panel breathe a bit on small screens */
  .krok-quiz-container.fmge-custom-module-page {
    padding: 16px 8px 24px;
  }

  .fmge-custom-module-page .quiz-selector {
    padding: 60px 14px 18px;
    margin: 0 4px 18px;
    border-radius: 18px;
  }

  /* Stack the four selector fields vertically, full‑width */
  .fmge-custom-module-page .quiz-selector-row {
    flex-direction: column;
    align-items: stretch;
  }

  .fmge-custom-module-page .quiz-selector-field,
  .fmge-custom-module-page .quiz-selector-field.quiz-selector-field--narrow {
    min-width: 0;
    max-width: 100%;
  }

  /* Make internal lists scrollable instead of growing too tall */
  .fmge-custom-module-page .checkbox-group {
    max-height: 220px;
    overflow-y: auto;
  }

  /* Slightly smaller spacing inside each field for small screens */
  .fmge-custom-module-page .quiz-selector-field {
    padding: 10px 10px 10px;
  }

  .fmge-custom-module-page .checkbox-actions {
    margin-bottom: 4px;
  }

  .fmge-custom-module-page .checkbox-search {
    margin-bottom: 6px;
    font-size: 12px;
  }

  /* Question count input + pills: keep vertical rhythm and avoid wrapping weirdly */
  .fmge-custom-module-page .quiz-selector-field.quiz-selector-field--narrow #fmge-count-input {
    margin-top: 10px;
  }

  .fmge-custom-module-page .fmge-count-presets {
    margin-top: 10px;
    gap: 4px;
  }

  .fmge-custom-module-page .fmge-count-pill {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Make Start Test button full‑width and thumb friendly */
  .fmge-custom-module-page .quiz-selector-actions {
    margin-top: 18px;
    padding: 0 2px;
  }

  .fmge-custom-module-page #fmge-start-test-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 15px;
    letter-spacing: 0.16em;
  }
}

/* Slightly relax layout for small tablets */
@media (min-width: 641px) and (max-width: 900px) {
  .fmge-custom-module-page .quiz-selector-row {
    flex-wrap: wrap;
  }

  .fmge-custom-module-page .quiz-selector-field,
  .fmge-custom-module-page .quiz-selector-field.quiz-selector-field--narrow {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }

  .fmge-custom-module-page .checkbox-group {
    max-height: 260px;
    overflow-y: auto;
  }
}



/* ==================== FORCE DARK ASTRA FOOTER ON FMGE PAGES ==================== */

/* 1) Dark background strip for the very bottom area */
body.fmge-dark-page .site-footer,
body.fmge-dark-page .ast-footer-overlay,
body.fmge-dark-page .ast-small-footer,
body.fmge-dark-page .ast-footer-copyright,
body.fmge-dark-page .footer-adv,
body.fmge-dark-page .site-footer .ast-footer-inner-wrap {
  background-color: #020617 !important;   /* same as page background */
  background-image: none !important;
  color: #e5e7eb !important;
  border-top: 1px solid rgba(15, 23, 42, 0.9);
}

/* 2) Text inside footer, including the copyright line */
body.fmge-dark-page .site-footer,
body.fmge-dark-page .site-footer * {
  color: #9ca3af !important;             /* soft grey text */
}

/* 3) Links in footer (Powered by Astra etc.) */
body.fmge-dark-page .site-footer a,
body.fmge-dark-page .site-footer a * {
  color: #e5e7eb !important;
}

body.fmge-dark-page .site-footer a:hover,
body.fmge-dark-page .site-footer a:hover * {
  color: #f97316 !important;             /* subtle orange accent */
}

/* 4) Layout tweaks: center the copyright text, reduce font a bit */
body.fmge-dark-page .ast-small-footer,
body.fmge-dark-page .ast-footer-copyright,
body.fmge-dark-page .site-footer .ast-small-footer-section {
  text-align: center !important;
  font-size: 12px !important;
  padding-top: 10px;
  padding-bottom: 10px;
}



/* ==================== FULL-PAGE DARK WRAP FOR FMGE PAGES (STRONG) ==================== */

html,
body.fmge-dark-page {
  background: radial-gradient(circle at top, #020617 0, #020617 45%, #000000 100%) !important;
  color: #e5e7eb !important;
}

/* Kill any white from Astra outer wrappers on dark pages */
body.fmge-dark-page .site,
body.fmge-dark-page .ast-container,
body.fmge-dark-page .site-content,
body.fmge-dark-page .content-area,
body.fmge-dark-page .entry-content,
body.fmge-dark-page .ast-plain-container,
body.fmge-dark-page .ast-page-builder-template {
  background: transparent !important;
  box-shadow: none !important;
}


/* Central content wrapper if Astra adds padding blocks */
body.fmge-dark-page .ast-container > .site-content > .ast-row,
body.fmge-dark-page .ast-container > .site-content,
body.fmge-dark-page .ast-container > .site-content > .content-area > .site-main {
  background: transparent !important;
}

/* Header strip under the blue ASTRA nav bar: remove any residual white */
body.fmge-dark-page header,
body.fmge-dark-page .ast-header-break-point .main-header-bar,
body.fmge-dark-page .main-header-bar {
  background-color: #020617 !important;
  box-shadow: none !important;
}

/* Footer: remove any white “outer space” on FMGE dark pages */
body.fmge-dark-page .site-footer,
body.fmge-dark-page .ast-footer-overlay,
body.fmge-dark-page .ast-small-footer,
body.fmge-dark-page .ast-footer-copyright,
body.fmge-dark-page .footer-adv,
body.fmge-dark-page .site-footer .ast-footer-inner-wrap,
body.fmge-dark-page #colophon {
  background: #020617 !important;
  background-image: none !important;
  color: #e5e7eb !important;
  border-top: 1px solid rgba(15, 23, 42, 0.9) !important;
}

/* Footer text + links */
body.fmge-dark-page .site-footer,
body.fmge-dark-page .site-footer * {
  color: #9ca3af !important;
}

body.fmge-dark-page .site-footer a,
body.fmge-dark-page .site-footer a * {
  color: #e5e7eb !important;
}

body.fmge-dark-page .site-footer a:hover,
body.fmge-dark-page .site-footer a:hover * {
  color: #f97316 !important;
}

/* Optional: keep the core content centered and not edge-to-edge on big screens */
body.fmge-dark-page .krok-quiz-container {
  max-width: 1200px;
  margin: 0 auto;
}


/* === CUSTOM MODULE SELECTOR – VISUAL REFRESH (SHARD STYLE, NO BIG BOX) === */

/* Kill the heavy panel look on the selector: no grey box, just spacing */
.fmge-custom-module-page .quiz-selector {
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 0 0 24px;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* We now rely on the shard header above for framing, so remove the old nebula card */
.fmge-custom-module-page .quiz-selector::after {
  content: none;
}

.fmge-custom-module-page .quiz-selector-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;              /* slightly smaller gap */
  justify-content: flex-start;  /* aligns from left instead of center */
}

/* Allow 3 cards to fit more easily on medium/large screens */
.fmge-custom-module-page .quiz-selector-field,
.fmge-custom-module-page .quiz-selector-field.quiz-selector-field--narrow {
  position: relative;
  flex: 1 1 calc(33.333% - 18px);  /* roughly 3 per row */
  min-width: 200px;                /* small enough to allow 3 on common widths */
  max-width: 260px;

  border-radius: 20px;
  padding: 16px 14px 14px;
  /* keep your shard background / border / shadow here */
}


/* Remove the strong inner glow layer we previously added */
.fmge-custom-module-page .quiz-selector-field::before {
  content: none;
}

/* Titles / counters stay bright on dark */
.fmge-custom-module-page .checkbox-header span:first-child,
.fmge-custom-module-page .checkbox-header span {
  color: #e5e7eb;
}

/* Counter pill: subtle dark chip */
.fmge-custom-module-page .checkbox-count {
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.9);
}

/* Dark search input */
.fmge-custom-module-page .checkbox-search {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
}

/* Dark scroll area for checkbox lists */
.fmge-custom-module-page .checkbox-group {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(55, 65, 81, 0.9);
}

/* Checkbox label text */
.fmge-custom-module-page .checkbox-item {
  color: #e5e7eb;
}

/* Select / clear buttons as small glassy chips */
.fmge-custom-module-page .checkbox-actions button {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.75);
  color: #e5e7eb;
}

.fmge-custom-module-page .checkbox-actions button:hover {
  background: rgba(30, 64, 175, 0.7);
  border-color: rgba(129, 140, 248, 0.95);
}

/* Count input + pills – thin glass instead of big grey box */
.fmge-custom-module-page .quiz-selector-field.quiz-selector-field--narrow #fmge-count-input {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.85);
  color: #f9fafb;
}

.fmge-custom-module-page .fmge-count-presets {
  margin-top: 12px;
  gap: 6px;
}

.fmge-custom-module-page .fmge-count-pill {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.85);
  color: #e5e7eb;
}

.fmge-custom-module-page .fmge-count-pill:hover {
  background: rgba(30, 64, 175, 0.85);
  border-color: rgba(129, 140, 248, 0.95);
}

/* Active pill – neon emerald glow, same as before */
.fmge-custom-module-page .fmge-count-pill.fmge-count-pill--active {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: rgba(34, 197, 94, 0.95);
  color: #f9fafb;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.6);
}

/* Start button already uses shard-style red pill: just give it a bit more top space */
.fmge-custom-module-page .quiz-selector-actions {
  margin-top: 24px;
}




/* === CUSTOM MODULE SELECTOR: SHARD CARDS FOR SUBJECT / YEAR / EXAM / QUESTIONS === */

/* Layout row: aim for 3 cards per row on desktop */
.fmge-custom-module-page .quiz-selector-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
}

/* Each selector card (Subject / Year / Exam / Questions) */
.fmge-custom-module-page .quiz-selector-field,
.fmge-custom-module-page .quiz-selector-field.quiz-selector-field--narrow {
  position: relative;
  flex: 1 1 calc(33.333% - 18px);  /* target 3 columns */
  min-width: 200px;                /* small enough so 3 fit inside Astra’s content width */
  max-width: 260px;

  border-radius: 20px;
  padding: 16px 14px 14px;

  /* neutral base; real color comes from nth-child rules below */
  background: radial-gradient(circle at top left, #1f2937 0, #020617 60%, #020617 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.8);

  color: #e5e7eb;
  overflow: hidden;
}



/* Shared shimmer/glow layer – colored per box with nth-child */
.fmge-custom-module-page .quiz-selector-field::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* SUBJECT (1st box) – crimson / magenta, softened like shard-card--crimson */
.fmge-custom-module-page .quiz-selector-field:nth-child(1) {
  background:
    radial-gradient(circle at top left, #1f1024 0, #05030a 55%, #010105 100%);
  border-color: rgba(255, 109, 199, 0.32);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(255, 93, 214, 0.45),
    0 0 0 1px rgba(24, 24, 36, 0.85);
}
.fmge-custom-module-page .quiz-selector-field:nth-child(1)::before {
  background:
    conic-gradient(
      from 210deg,
      rgba(255, 93, 214, 0.55),
      rgba(255, 140, 170, 0.55),
      rgba(255, 216, 107, 0.55),
      rgba(255, 93, 214, 0.55)
    );
}

/* YEAR (2nd box) – emerald, softened like shard-card--emerald */
.fmge-custom-module-page .quiz-selector-field:nth-child(2) {
  background:
    radial-gradient(circle at top left, #041c14 0, #020a07 55%, #000403 100%);
  border-color: rgba(56, 242, 173, 0.32);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(56, 242, 173, 0.4),
    0 0 0 1px rgba(15, 23, 42, 0.85);
}
.fmge-custom-module-page .quiz-selector-field:nth-child(2)::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(124, 255, 196, 0.55),
      rgba(65, 255, 124, 0.55),
      rgba(201, 255, 107, 0.55),
      rgba(124, 255, 196, 0.55)
    );
}

/* EXAM (3rd box) – sapphire / cyan, softened like shard-card--sapphire */
.fmge-custom-module-page .quiz-selector-field:nth-child(3) {
  background:
    radial-gradient(circle at top left, #081226 0, #040712 55%, #020308 100%);
  border-color: rgba(134, 160, 255, 0.34);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(79, 195, 255, 0.45),
    0 0 0 1px rgba(15, 23, 42, 0.85);
}
.fmge-custom-module-page .quiz-selector-field:nth-child(3)::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(127, 124, 255, 0.55),
      rgba(79, 195, 255, 0.55),
      rgba(160, 124, 255, 0.55),
      rgba(127, 124, 255, 0.55)
    );
}

/* QUESTIONS (4th box) – amber / amethyst, softened like shard-card--amber/amethyst */
.fmge-custom-module-page .quiz-selector-field:nth-child(4) {
  background:
    radial-gradient(circle at top left, #261409 0, #0f0602 50%, #050103 100%);
  border-color: rgba(255, 216, 107, 0.34);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(255, 184, 99, 0.45),
    0 0 0 1px rgba(24, 20, 0, 0.88);
}
.fmge-custom-module-page .quiz-selector-field:nth-child(4)::before {
  background:
    conic-gradient(
      from 200deg,
      rgba(255, 216, 107, 0.55),
      rgba(255, 179, 71, 0.55),
      rgba(212, 139, 255, 0.55),
      rgba(255, 216, 107, 0.55)
    );
}



/* Inner content stays readable, sits above glow */
.fmge-custom-module-page .quiz-selector-field > * {
  position: relative;
  z-index: 1;
}

/* Hover: lift the card and intensify glow, like prebuilt shard cards */
.fmge-custom-module-page .quiz-selector-field:hover {
  transform: translateY(-4px);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.16);
}

.fmge-custom-module-page .quiz-selector-field:hover::before {
  opacity: 0.3;
  transform: scale(1.04);
}

/* Header + counters – keep consistent typography */
.fmge-custom-module-page .checkbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.fmge-custom-module-page .checkbox-header span:first-child {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e5e7eb;
}

.fmge-custom-module-page .checkbox-count {
  background: rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.9);
}

/* Search input + checkbox list on dark glass */
.fmge-custom-module-page .checkbox-search {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
}

.fmge-custom-module-page .checkbox-search::placeholder {
  color: #6b7280;
}




.fmge-custom-module-page .checkbox-group {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(55, 65, 81, 0.9);
}

.fmge-custom-module-page .checkbox-item {
  color: #e5e7eb;
}

/* “Select all / Clear” chips */
.fmge-custom-module-page .checkbox-actions button {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(148, 163, 184, 0.8);
  color: #e5e7eb;
}

.fmge-custom-module-page .checkbox-actions button:hover {
  background: rgba(30, 64, 175, 0.8);
  border-color: rgba(129, 140, 248, 0.95);
}

/* Questions field – input + pills on glass */
.fmge-custom-module-page .quiz-selector-field.quiz-selector-field--narrow #fmge-count-input {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.85);
  color: #f9fafb;
}

.fmge-custom-module-page .fmge-count-presets {
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 6px;
}

.fmge-custom-module-page .fmge-count-pill {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.85);
  color: #e5e7eb;
}

.fmge-custom-module-page .fmge-count-pill:hover {
  background: rgba(30, 64, 175, 0.85);
  border-color: rgba(129, 140, 248, 0.95);
}

/* Active pill – emerald glow */
.fmge-custom-module-page .fmge-count-pill.fmge-count-pill--active {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: rgba(34, 197, 94, 0.95);
  color: #f9fafb;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.6);
}

/* ===== FMGE CUSTOM MODULE SELECTOR – MOBILE LAYOUT (STACK + SCROLL) ===== */
@media (max-width: 640px) {
  /* Give the selector some breathing room on small screens */
  .fmge-custom-module-page {
    padding: 16px 8px 24px;
  }

  .fmge-custom-module-page .quiz-selector {
    margin: 0 4px 18px;
    padding: 40px 10px 18px;
    border-radius: 18px;
  }

  /* Stack cards vertically, full width */
  .fmge-custom-module-page .quiz-selector-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .fmge-custom-module-page .quiz-selector-field,
  .fmge-custom-module-page .quiz-selector-field.quiz-selector-field--narrow {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  /* Let the page scroll rather than squashing cards */
  html,
  body.fmge-dark-page {
    overflow-y: auto;
  }

  /* Inputs/lists scroll inside each card if long */
  .fmge-custom-module-page .checkbox-group {
    max-height: 220px;
    overflow-y: auto;
  }

  /* Start Test button full-width and thumb‑friendly */
  .fmge-custom-module-page .quiz-selector-actions {
    margin-top: 18px;
  }

  .fmge-custom-module-page #fmge-start-test-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 15px;
    letter-spacing: 0.16em;
    text-align: center;
  }
}


/* Mobile: stack nav above question */
@media (max-width: 640px) {
  .krok-quiz-container .quiz-main {
    flex-direction: column;      /* nav on top, question below */
    align-items: stretch;
  }

  .krok-quiz-container .quiz-nav-box {
    flex: 0 0 auto;              /* let it size naturally */
    max-height: none;            /* remove fixed height on mobile */
    margin-bottom: 10px;
  }

  .krok-quiz-container .question-card {
    flex: 0 0 auto;
  }
}


/* ===== GLOBAL SCROLLBAR STYLE: TRANSPARENT BACKGROUND ===== */

/* Firefox: thin scrollbars, transparent track and thumb by default */
* {
  scrollbar-width: thin;                 /* overlay-style, not big bars */
  scrollbar-color: transparent transparent;
}

/* WebKit (Chrome / Edge / Safari): transparent track/thumb by default */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;               /* invisible track */
}

*::-webkit-scrollbar-thumb {
  background-color: transparent;         /* invisible thumb by default */
  border-radius: 999px;
}

/* When hovering specific scrollable areas, show a subtle thumb */
.checkbox-group:hover::-webkit-scrollbar-thumb,
.favorite-folders-list:hover::-webkit-scrollbar-thumb,
.fmge-prebuilt-attempts-table-wrap:hover::-webkit-scrollbar-thumb,
.fmge-my-tests:hover::-webkit-scrollbar-thumb,
#bookmark-boxes:hover::-webkit-scrollbar-thumb,
#bookmark-subjects:hover::-webkit-scrollbar-thumb,
#bookmark-question-list:hover::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.7);
}

/* Dark pages: slightly brighter thumb on hover */
body.fmge-dark-page .checkbox-group:hover::-webkit-scrollbar-thumb,
body.fmge-dark-page .favorite-folders-list:hover::-webkit-scrollbar-thumb,
body.fmge-dark-page .fmge-prebuilt-attempts-table-wrap:hover::-webkit-scrollbar-thumb,
body.fmge-dark-page .fmge-my-tests:hover::-webkit-scrollbar-thumb,
body.fmge-dark-page #bookmark-boxes:hover::-webkit-scrollbar-thumb,
body.fmge-dark-page #bookmark-subjects:hover::-webkit-scrollbar-thumb,
body.fmge-dark-page #bookmark-question-list:hover::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.9);
}

/* === BOOKMARKS FOLDER: BACK BUTTON & SEARCH INPUT – DARK GLOW THEME === */

/* Back to bookmarks main button (on /bookmarks-view/ etc.) */
.bookmark-back-main-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 14px;

  border: 1px solid rgba(148, 163, 184, 0.9);
  border-radius: 999px;
  padding: 8px 18px;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;
  font-family: inherit;

  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.22) 0, transparent 55%),
    linear-gradient(135deg, #020617, #020617);
  color: #e5e7eb;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

/* Strong override for hover so Astra can't turn it grey */
.fmge-bookmarks-folder-page .bookmark-back-main-btn:hover {
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.22) 0, transparent 55%),
    linear-gradient(135deg, #020617, #020617) !important;
  color: #e5e7eb !important;

  border-color: rgba(248, 250, 252, 0.9) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(248, 250, 252, 0.14);
  transform: translateY(-1px);
}

/* FINAL OVERRIDE: Bookmark folder search input – dark transparent shard style */
.fmge-bookmarks-folder-page .fmge-folder-search-input {
  min-width: 220px;
  width: 280px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.85);

  font-size: 13px;
  font-family: inherit;
  color: #e5e7eb;

  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.20) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.20) 0, transparent 55%),
    rgba(15, 23, 42, 0.96);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.95);

  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.fmge-bookmarks-folder-page .fmge-folder-search-input::placeholder {
  color: #6b7280;
}

.fmge-bookmarks-folder-page .fmge-folder-search-input:focus {
  border-color: rgba(96, 165, 250, 1);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(96, 165, 250, 0.95);
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.30) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.30) 0, transparent 55%),
    rgba(15, 23, 42, 0.98);
}

/* Mobile: let search take full width so it doesn’t feel cramped */
@media (max-width: 640px) {
  .fmge-bookmarks-folder-page .fmge-folder-search-input {
    width: 100%;
    max-width: 260px;
  }
}

/* FINAL OVERRIDE: folder search – force white text even on search */
.fmge-bookmarks-folder-page .fmge-folder-search-input {
  color: #ffffff !important;
}

/* When user is typing / the field is focused (searching) */
.fmge-bookmarks-folder-page .fmge-folder-search-input:focus,
.fmge-bookmarks-folder-page .fmge-folder-search-input:active {
  color: #ffffff !important;
}







/* ==================== FMGE DASHBOARD (HOME) ==================== */

.fmge-dashboard-page {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 24px 12px 0;
  color: #e5e7eb;
}

/* Use full dark emerald background from your existing theme */
body.fmge-dark-page .fmge-dashboard-page {
  background: transparent;
}

/* Generic dashboard card */
.fmge-db-card {
  position: relative;
  border-radius: 18px;
  padding: 14px 16px 14px;
  background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.20) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.18) 0, transparent 55%),
    rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  overflow: hidden;
}

.fmge-db-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 10% 0, rgba(16, 185, 129, 0.35) 0, transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(59, 130, 246, 0.35) 0, transparent 55%);
  opacity: 0.25;
  mix-blend-mode: screen;
  pointer-events: none;
}

.fmge-db-card > * {
  position: relative;
  z-index: 1;
}

/* Section header */
.fmge-db-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(209, 213, 219, 0.95);
}

.fmge-db-section-header span {
  font-weight: 600;
}

/* Tabs */
.fmge-db-section-header--with-tabs {
  align-items: flex-end;
}

.fmge-db-tabs {
  display: flex;
  gap: 6px;
}

.fmge-db-tab {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
}

.fmge-db-tab--active {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: rgba(34, 197, 94, 0.95);
  color: #f9fafb;
}

/* TOP ROW */
.fmge-dashboard-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

/* Greeting card */
.fmge-db-card--greeting {
  padding: 16px 18px 16px;
}

.fmge-db-greeting-title {
  font-size: 20px;
  font-weight: 600;
  color: #f9fafb;
  margin-bottom: 2px;
}

.fmge-db-greeting-sub {
  font-size: 13px;
  color: rgba(209, 213, 219, 0.9);
  margin-bottom: 10px;
}

.fmge-db-quote-block {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.8);
  margin-bottom: 0;
}

.fmge-db-quote-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(156, 163, 175, 0.95);
  margin-bottom: 4px;
}

.fmge-db-quote-text {
  font-size: 13px;
  color: #e5e7eb;
  margin-top: 10px;
}

.fmge-db-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.9);
  font-size: 12px;
}

.fmge-db-streak-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(209, 213, 219, 0.9);
}

.fmge-db-streak-value {
  font-weight: 600;
  color: #bbf7d0;
}

/* Today card */
.fmge-db-card--today {
  padding: 16px 16px 14px;
}

.fmge-db-today-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fmge-db-today-item {
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(55, 65, 81, 0.9);
  min-width: 150px;
  width: 150px;
}

.fmge-db-today-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(156, 163, 175, 0.9);
  margin-bottom: 2px;
}

.fmge-db-today-value {
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
}

.fmge-db-today-sub {
  font-size: 11px;
  color: rgba(156, 163, 175, 0.9);
}

.fmge-dashboard-middle-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  grid-template-areas: "streaks calendar timer";
  gap: 14px;
  margin-bottom: 14px;
}


/* Assign middle-row cards to positions:
   left = streaks, middle = calendar, right = timer */
.fmge-db-card--streaks {
  grid-area: streaks;
}

.fmge-db-card--calendar {
  grid-area: calendar;
}

.fmge-db-card--timer {
  grid-area: timer;
}



/* Streak card details */
.fmge-db-card--streaks {
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
}

/* Summary now sits BELOW the streak diamonds */
.fmge-db-streak-summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}


.fmge-db-streak-stat .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(156, 163, 175, 0.9);
}

.fmge-db-streak-stat .value {
  font-size: 14px;
  font-weight: 600;
  color: #f9fafb;
}


/* Streak stats inside streak card: same look as fmge-db-today-item */
.fmge-db-streak-summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.fmge-db-streak-item {
  flex: 1 1 0;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(55, 65, 81, 0.9);
  height: 100px;
  margin-top: 0;
  min-width: 170px;
  width: 170px;
}

.fmge-db-streak-item .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(156, 163, 175, 0.9);
  margin-bottom: 2px;
}

.fmge-db-streak-item .value {
  font-size: 14px;
  font-weight: 600;
  color: #f9fafb;
}




/* Timer card */
.fmge-db-card--timer {
  padding-bottom: 14px;
}

.fmge-db-timer-main {
  text-align: center;
}

.fmge-db-timer-display {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #f9fafb;
}

.fmge-db-timer-buttons {
  display: flex;
  justify-content: space-between;  /* spread them edge-to-edge */
  gap: 10px;
  margin-bottom: 10px;
}


.fmge-db-btn {
  border-radius: 999px;
  border: none;
  padding: 10px 18px;      /* bigger tap area (was 6px 14px) */
  font-size: 14px;         /* slightly larger text (was 13px) */
  cursor: pointer;
  font-weight: 600;        /* a bit bolder */
  font-family: inherit;
}


.fmge-db-btn--primary {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.4);
}

.fmge-db-btn--ghost {
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.8);
}

.fmge-db-btn--full {
  width: 100%;
  justify-content: center;
  display: inline-flex;
}

.fmge-db-timer-modes {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.fmge-db-chip {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}

.fmge-db-chip--active {
  border-color: rgba(34, 197, 94, 0.95);
  background: rgba(22, 163, 74, 0.16);
  color: #bbf7d0;
}

.fmge-db-chip--outline {
  border-color: rgba(148, 163, 184, 0.85);
  background: transparent;
}

.fmge-db-timer-meta {
  font-size: 11px;
  color: rgba(156, 163, 175, 0.9);
}


/* In the popup / timer panel, let each button share width evenly */
#fmge-study-panel .fmge-db-timer-buttons .fmge-db-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}



/* Calendar card */
.fmge-db-card--calendar {
  padding-bottom: 14px;
}

.fmge-db-calendar-shell {
  margin-bottom: 8px;
  min-width: 200px;
  width: 230px;
}

.fmge-db-calendar-month {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(209, 213, 219, 0.9);
  margin-bottom: 4px;

}

.fmge-db-calendar-grid {
  border-radius: 10px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: rgba(15, 23, 42, 0.96);
  padding: 4px 6px;
  font-size: 10px;

  /* NEW: center the whole grid block content */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Each row: auto-width 7 columns, centered */
.fmge-db-calendar-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;          /* width driven by cells/header content */
  column-gap: 4px;
  row-gap: 2px;
  margin-bottom: 0;
  justify-content: center;          /* center the row itself */
  margin-inline: 2px;   /* NEW: tiny left/right breathing room */
}

/* Header labels: same width as a day circle, centered */
.fmge-db-calendar-row--header span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;                      /* slightly wider than 20px circle */
  font-size: 9px;
  text-align: center;
  color: rgba(148, 163, 184, 0.95);
  margin: 2px;
}

/* Each calendar cell = centered circle */
.fmge-db-calendar-cell {
  position: relative;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.95); /* base, overridden by lvl classes */
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0 1px;                   /* keep pill centered in its column */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.6);
}


.fmge-db-calendar-plan {
  font-size: 11px;
  color: rgba(209, 213, 219, 0.92);
}

.fmge-db-calendar-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.fmge-db-calendar-line .label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(156, 163, 175, 0.95);
}

.fmge-db-calendar-line .value {
  color: #e5e7eb;
}

/* Calendar month row: label + 3 small icon buttons */
.fmge-db-calendar-month-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}

/* Keep existing month text styling */
.fmge-db-calendar-month {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(209, 213, 219, 0.9);
}

/* Small icon buttons (prev, today, next) */
.fmge-db-calendar-nav {
  border: none;
  border-radius: 999px;
  padding: 3px 7px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.8);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

/* Center dot button gets a slightly softer look */
.fmge-db-calendar-nav--today {
  font-size: 14px;
  padding: 0 6px;
}

/* Hover/focus */
.fmge-db-calendar-nav:hover,
.fmge-db-calendar-nav:focus-visible {
  background: radial-gradient(
    circle at 0% 0%,
    rgba(56, 189, 248, 0.4) 0,
    transparent 55%
  );
  border-color: rgba(129, 140, 248, 0.95);
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* Slight tap feedback */
.fmge-db-calendar-nav:active {
  transform: translateY(0);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}



/* Each calendar cell becomes a small circular chip with a tiny date */
.fmge-db-calendar-cell {
  position: relative;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.95); /* base, overridden by lvl classes */
  width: 20px;                /* fixed circle width */
  height: 20px;               /* fixed circle height */
  min-height: 20px;
  margin: 2px;             /* keep circle centered in its grid cell */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.6);
}

/* The small date text inside the circle */
.fmge-db-calendar-date {
  font-size: 9px;
  line-height: 1;
  color: rgba(209, 213, 219, 0.95);
  pointer-events: none;
}



/* No activity – very subtle, flat */
.fmge-db-calendar-cell--no-activity {
  background: rgba(15, 23, 42, 0.95);
}

/* Level 1 – bright magenta/pink (first win) */
.fmge-db-calendar-cell--lvl1 {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.26) 0, transparent 35%),
    linear-gradient(135deg, #ff4dd8, #ff7aa8);
}

/* Level 2 – neon emerald / cyan */
.fmge-db-calendar-cell--lvl2 {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.26) 0, transparent 35%),
    linear-gradient(135deg, #12c97d, #40ffd0);
}

/* Level 3 – intense lava / gold (very strong streak) */
.fmge-db-calendar-cell--lvl3 {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.3) 0, transparent 35%),
    linear-gradient(135deg, #ff3e3e, #ffb347);
}









/* Invisible container for calendar + streak summary */
.fmge-dashboard-middle {
  margin-bottom: 14px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Two columns: calendar on left, streak stack on right */
.fmge-dashboard-middle-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
}

/* Calendar keeps its existing width */
.fmge-db-calendar-shell {
  min-width: 200px;
  width: 220px; /* or your existing 200px */
}

/* Streak items: vertical stack, same card size */
.fmge-db-streak-summary {
  display: flex;
  flex-direction: column;  /* stack vertically */
  gap: 8px;
  margin-top: 0;
}

/* One-line layout inside each streak item */
.fmge-db-streak-item .line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;

}

/* Reuse existing label/value styling, but as inline spans */
.fmge-db-streak-item .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(156, 163, 175, 0.9);
}

.fmge-db-streak-item .value {
  font-size: 14px;
  font-weight: 600;
  color: #f9fafb;
}


/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .fmge-dashboard-middle-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-db-calendar-shell {
    width: 100%;
    max-width: 260px;
  }

  .fmge-db-streak-summary {
    margin-top: 10px;
  }
}










/* ==================== FMGE DASHBOARD (HOME) – PART 2 ==================== */

/* ANALYTICS ROW */
.fmge-dashboard-analytics-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

/* Subject analytics */
.fmge-db-card--subjects {
  padding-bottom: 12px;
}

.fmge-db-subject-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fmge-db-subject-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 2fr);
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.fmge-db-subject-row .name {
  color: #e5e7eb;
}

.fmge-db-subject-row .value {
  font-weight: 600;
  color: #f9fafb;
}

.fmge-db-subject-row .bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.95);
  overflow: hidden;
}

.fmge-db-subject-row .fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.fmge-db-subject-row .fill--good {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.fmge-db-subject-row .fill--mid {
  background: linear-gradient(90deg, #eab308, #fbbf24);
}

.fmge-db-subject-row .fill--weak {
  background: linear-gradient(90deg, #ef4444, #f97373);
}

.fmge-db-subject-footer {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(156, 163, 175, 0.95);
}

/* Weak topics */
.fmge-db-card--weak {
  padding-bottom: 12px;
}

.fmge-db-weak-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.fmge-db-weak-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.fmge-db-weak-row .topic .title {
  font-weight: 500;
  color: #f9fafb;
}

.fmge-db-weak-row .topic .meta {
  font-size: 11px;
  color: rgba(156, 163, 175, 0.95);
}

/* MODULES GRID */
.fmge-dashboard-modules-row {
  margin-bottom: 14px;
}

.fmge-db-card--modules {
  padding-bottom: 14px;
}

.fmge-db-modules-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fmge-db-module-tile {
  border-radius: 14px;
  padding: 10px 10px 10px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(55, 65, 81, 0.95);
  font-size: 13px;
}

.fmge-db-module-tile .title {
  font-weight: 600;
  margin-bottom: 2px;
  color: #f9fafb;
}

.fmge-db-module-tile .meta {
  font-size: 11px;
  color: rgba(156, 163, 175, 0.95);
  margin-bottom: 6px;
}

.fmge-db-module-tile .progress {
  margin-bottom: 6px;
}

.fmge-db-module-tile .progress-bar {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.95);
  overflow: hidden;
}

.fmge-db-module-tile .progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.fmge-db-module-tile .progress-text {
  font-size: 11px;
  color: rgba(156, 163, 175, 0.95);
  margin-top: 2px;
}

/* BOTTOM SNAPSHOTS */
.fmge-dashboard-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.fmge-db-card--snapshot {
  padding-bottom: 10px;
}

.fmge-db-snap-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(209, 213, 219, 0.95);
  margin-bottom: 6px;
}

.fmge-db-snap-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(229, 231, 235, 0.96);
}

/* BUTTON HOVERS (light global) */
.fmge-db-btn--primary:hover {
  filter: brightness(1.05);
}

.fmge-db-btn--ghost:hover {
  border-color: rgba(129, 140, 248, 0.95);
}

.fmge-db-chip:hover {
  border-color: rgba(129, 140, 248, 0.95);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .fmge-db-modules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .fmge-dashboard-top-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-dashboard-middle-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-dashboard-analytics-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-dashboard-bottom-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .fmge-db-today-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-db-modules-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}





/* ===== FMGE DASHBOARD – FLOAT GREETING + TODAY (NO CARDS) ===== */

/* Top row: treat it as a simple header band */
.fmge-dashboard-top-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

/* On larger screens, let them sit side‑by‑side but still look like loose content */
@media (min-width: 768px) {
  .fmge-dashboard-top-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* Kill the card chrome for greeting + today only */
.fmge-db-card--greeting,
.fmge-db-card--today {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Remove the glow overlay these cards inherit from .fmge-db-card */
.fmge-db-card--greeting::before,
.fmge-db-card--today::before {
  display: none !important;
}

/* Tighten greeting block so it feels like plain text on the page */
.fmge-db-card--greeting .fmge-db-greeting-title {
  font-size: 45px;
  font-weight: 600;
  margin-bottom: 2px;
}

.fmge-db-card--greeting .fmge-db-greeting-sub {
  margin-bottom: 8px;
}

/* Keep the quote and streak pill, but they now belong to the page, not a card */
.fmge-db-card--greeting .fmge-db-quote-block {
  background: rgba(15, 23, 42, 0.85);
  border-radius: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  margin-bottom: 0;
}

/* Today’s stats becomes a simple inline block to the right on desktop */
.fmge-db-card--today .fmge-db-today-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  min-width: 450px;
  width: 450px;
}

@media (max-width: 640px) {
  .fmge-db-card--today .fmge-db-today-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Bigger internal boxes + more vertical height */
.fmge-db-card--today .fmge-db-today-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 10px 2px;          /* spacing around the three boxes */
}

/* Each stat box larger so text never touches edges */
.fmge-db-card--today .fmge-db-today-item {
  min-height: 80px;
  padding: 10px 12px;
}

/* Tablet: 2 per row so they don’t squeeze */
@media (max-width: 1024px) and (min-width: 641px) {
  .fmge-db-card--today .fmge-db-today-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: single column, full width */
@media (max-width: 640px) {
  .fmge-db-card--today .fmge-db-today-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
  }

  .fmge-db-card--today .fmge-db-today-item {
    min-height: 90px;
  }
}


  .fmge-db-card--today .fmge-db-section-header {
     font-size: 20px;
     margin: 0px;
}

.fmge-dashboard-modules-row .fmge-db-section-header {
     font-size: 20px;
     margin-top: 20px;
     padding-top: 20px;
}


.fmge-dashboard-middle .fmge-db-section-header {
     font-size: 20px;
     margin-top: 10px;
     padding-top: 20px;
}





.fmge-db-module-tile .fmge-db-btn--full {
     margin-top: 10px;

}

.fmge-db-quote-label {
     font-size: 10px;
     margin-top: 20px;
     padding-top: 20px;
}

/* Center the quote block and text on the page */
.fmge-db-card--greeting .fmge-db-quote-block {
  max-width: 900px;        /* or whatever width you like */
  margin: 20px auto 10px;  /* auto centers horizontally */
  text-align: center;      /* center text inside */
}

/* Quote text: center + italic */
.fmge-db-quote-text {
  font-size: 20px;
  padding-bottom: 15px;
  text-align: center;
  font-style: italic;
  margin-top: 35px;
}


/* ==================== GLOBAL FLOATING STUDY TIMER ==================== */

/* Wrapper for bubble + panel */
.fmge-study-timer-floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9990;
  pointer-events: none; /* children will re-enable */
}

/* Bubble */
.fmge-study-bubble {
  pointer-events: auto;
  border: 1px solid rgba(148, 163, 184, 0.65); /* soft slate border */
  outline: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-width: 90px;
  padding: 9px 18px;
  border-radius: 999px;

  /* transparent glassy background */
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,0.32) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(16,185,129,0.32) 0, transparent 60%),
    rgba(15,23,42,0.45); /* semi‑transparent dark glass */

  color: #e5e7eb;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 0 18px rgba(56, 189, 248, 0.35); /* subtle cyan glow */

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    opacity 0.15s ease;
}

.fmge-study-bubble:hover {
  transform: translateY(-2px);
  border-color: rgba(248, 250, 252, 0.9);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(15, 23, 42, 1),
    0 0 24px rgba(56, 189, 248, 0.6);
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,0.42) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(16,185,129,0.42) 0, transparent 60%),
    rgba(15,23,42,0.55);
}


/* Time text inside bubble */
.fmge-study-bubble-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 24px;
}

/* Hover / active */
.fmge-study-bubble:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(0,0,0,1),
    0 0 0 1px rgba(148,163,184,0.95);
}

.fmge-study-bubble:active {
  transform: translateY(0);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.9),
    0 0 0 1px rgba(148,163,184,0.8);
}

/* Panel (hidden by default) */
/* Panel (hidden by default) */
.fmge-study-panel {
  pointer-events: none;               /* CLOSED: no pointer events */
  position: fixed;
  right: 20px;
  bottom: 70px;
  z-index: 9990;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

/* Inner card – only interactive when panel is open */
.fmge-study-panel-inner {
  pointer-events: none;              /* default: off, JS toggles via .fmge-study-panel--open */
  min-width: 320px;
  max-width: 380px;
  height: 250px;

  /* card container styling */
  border-radius: 18px;
  padding: 14px 16px 14px;
  background:
    radial-gradient(circle at top left, rgba(16,185,129,0.20) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(56,189,248,0.18) 0, transparent 55%),
    rgba(15,23,42,0.96);
  border: 1px solid rgba(148,163,184,0.6);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.95),
    0 0 0 1px rgba(15,23,42,0.9);
  border-radius: 18px;
}


/* When shown, re-enable pointer events */
.fmge-study-panel.fmge-study-panel--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;              /* panel itself can receive events */
}

.fmge-study-panel.fmge-study-panel--open .fmge-study-panel-inner {
  pointer-events: auto;              /* and now buttons inside are clickable */
}

 
/* Small close area if you want to click outside — we keep behavior simple for now */

/* Responsive: move inward on very small screens */
@media (max-width: 640px) {
  .fmge-study-timer-floating {
    right: 10px;
    bottom: 10px;
  }

  .fmge-study-panel {
    right: 10px;
    bottom: 64px;
  }

  .fmge-study-panel-inner {
    min-width: 230px;
    max-width: 260px;
  }
}


/* Whole middle section */
.fmge-dashboard-middle {
  margin-bottom: 14px;
}

/* Two invisible columns: left = streaks, right = today */
.fmge-dashboard-middle-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
}

/* Column wrappers are invisible containers */
.fmge-dashboard-middle-col {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Streak column: stack header, calendar, then items */
.fmge-dashboard-middle-col--streaks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Today column: header + existing today grid */
.fmge-dashboard-middle-col--today {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Keep your existing streak item styles */
.fmge-db-streak-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}

.fmge-db-streak-item {
  flex: 0 0 auto;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(55, 65, 81, 0.9);
  height: 100px;
}

.fmge-db-streak-item .line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.fmge-db-streak-item .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(156, 163, 175, 0.9);
}

.fmge-db-streak-item .value {
  font-size: 14px;
  font-weight: 600;
  color: #f9fafb;
}

/* Today items already styled; no changes needed there */

/* Responsive: stack columns on small screens */
@media (max-width: 1024px) {
  .fmge-dashboard-middle-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-dashboard-middle-col--today {
    margin-top: 8px;
  }
}

/* Middle row: left = streaks container, right = today container */
.fmge-dashboard-middle-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
}

/* Invisible containers */
.fmge-dashboard-middle-col {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Streaks column: header on top, below it a 2-column layout for calendar + streak items */
.fmge-dashboard-middle-col--streaks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* This wraps calendar + streak summary next to each other */
.fmge-db-streak-layout {
  display: grid;
  grid-template-columns: auto 1fr;  /* calendar left, cards right */
  gap: 12px;
  align-items: flex-start;
}

/* Calendar size stays how you had it */
.fmge-db-calendar-shell {
  min-width: 200px;
  width: 220px;
}

/* Streak summary: vertical stack of cards on the right */
.fmge-db-streak-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}

/* Existing item style */
.fmge-db-streak-item {
  flex: 0 0 auto;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(55, 65, 81, 0.9);
  height: 60px;
}

.fmge-db-streak-item .line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

/* Today column unchanged */
.fmge-dashboard-middle-col--today {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Responsive: stack columns on small screens */
@media (max-width: 1024px) {
  .fmge-dashboard-middle-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-db-streak-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-db-calendar-shell {
    width: 100%;
    max-width: 260px;
  }
}



/* Small donut chart in Today's stats column */
.fmge-db-today-progress {
  position: relative;
  width: 250ox;
  height: 250px;
  margin: 0 auto 0 auto; /* center above the three cards */
  margin-top: 45px;

}

.fmge-db-today-progress-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Text in the center of the donut */
.fmge-db-today-progress-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.fmge-db-today-progress-percent {
  font-size: 18px;
  font-weight: 700;
  color: #f9fafb;
}

.fmge-db-today-progress-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(156, 163, 175, 0.9);
}

/* On small screens, keep it tight */
@media (max-width: 640px) {
  .fmge-db-today-progress {
    width: 100px;
    height: 100px;
    margin-bottom: 8px;
  }

  .fmge-db-today-progress-percent {
    font-size: 16px;
  }
}

/* Responsive: collapse donut between rows on small screens */
@media (max-width: 1024px) {
  .fmge-dashboard-middle-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-dashboard-middle-col--donut {
    margin: 10px 0;
  }

  .fmge-db-streak-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-db-calendar-shell {
    width: 100%;
    max-width: 260px;
  }
}

/* Tablet & Mobile: stack streaks, today, then donut vertically */
@media (max-width: 1024px) {
  .fmge-dashboard-middle-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .fmge-dashboard-middle-col--streaks,
  .fmge-dashboard-middle-col--today,
  .fmge-dashboard-middle-col--donut {
    width: 100%;
  }

  /* explicit order: 1) streaks, 2) today's stats, 3) donut */
  .fmge-dashboard-middle-col--streaks { order: 1; }
  .fmge-dashboard-middle-col--today   { order: 2; }
  .fmge-dashboard-middle-col--donut   { order: 3; }

  /* prevent inner grids from forcing weird widths */
  .fmge-db-streak-layout {
    display: block;
  }

  .fmge-db-calendar-shell {
    width: 100%;
    max-width: 260px;
    margin: 0 auto 10px;
  }

  .fmge-db-streak-summary {
    margin-top: 8px;
  }

  .fmge-db-today-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-db-today-item {
    width: 100%;
    min-width: 0;
  }

  .fmge-db-today-progress {
    margin: 8px auto 10px;
  }
}

@media (max-width: 640px) {
  /* calm down heights so blocks don't collide */
  .fmge-db-streak-item {
    height: auto;
    min-height: 60px;
  }

  .fmge-db-card--today .fmge-db-today-grid {
    padding: 0;
  }

  .fmge-db-today-progress {
    width: 110px;
    height: 110px;
  }
}

/* Top row now: just two big buttons */
.fmge-dashboard-top-row.fmge-dashboard-top-row--buttons-only {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

@media (max-width: 700px) {
  .fmge-dashboard-top-row.fmge-dashboard-top-row--buttons-only {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Base style for big top buttons */
.fmge-db-top-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  border-radius: 999px;
  text-decoration: none;          /* no underline by default */
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.75),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(18px);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

/* Also ensure no underline on hover/focus/active */
.fmge-db-top-btn:hover,
.fmge-db-top-btn:focus,
.fmge-db-top-btn:active {
  text-decoration: none;
}

/* Subtle internal edge highlight */
.fmge-db-top-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(248, 250, 252, 0.04);
  pointer-events: none;
}

/* Filled primary: blue → green gradient, matches shard vibe */
.fmge-db-top-btn--primary {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.4), transparent 55%),
    radial-gradient(circle at bottom right, rgba(45, 212, 191, 0.32), transparent 60%),
    rgba(15, 23, 42, 0.98);
  color: #f9fafb;
}

/* Ghost: darker glassy button */
.fmge-db-top-btn--ghost {
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.26), transparent 55%),
    rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
}

/* Hover states + stronger glow */
.fmge-db-top-btn--primary:hover,
.fmge-db-top-btn--ghost:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 30px rgba(59, 130, 246, 0.45),    /* outer blue glow */
    0 0 60px rgba(56, 189, 248, 0.35),    /* soft cyan halo */
    0 24px 52px rgba(15, 23, 42, 0.95),   /* drop shadow */
    0 0 0 1px rgba(15, 23, 42, 1);
  border-color: rgba(209, 213, 219, 0.9);
}

/* Label + subtitle inside buttons */
.fmge-db-top-btn-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fmge-db-top-btn-sub {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(209, 213, 219, 0.92);
}

/* Slightly dim subtitle on ghost button */
.fmge-db-top-btn--ghost .fmge-db-top-btn-sub {
  color: rgba(156, 163, 175, 0.96);
}


/* Force top buttons text to stay on-brand (emerald on hover) */
.fmge-db-top-btn,
.fmge-db-top-btn:visited {
  color: #f9fafb;              /* default text color */
}

/* Hard override: no underline on top dashboard buttons, ever */
a.fmge-db-top-btn,
a.fmge-db-top-btn:link,
a.fmge-db-top-btn:visited,
a.fmge-db-top-btn:hover,
a.fmge-db-top-btn:focus,
a.fmge-db-top-btn:active {
  text-decoration: none !important;
}


/* Make subtitle slightly softer emerald on hover */
.fmge-db-top-btn:hover .fmge-db-top-btn-sub,
.fmge-db-top-btn:focus .fmge-db-top-btn-sub,
.fmge-db-top-btn:active .fmge-db-top-btn-sub {
  color: rgba(52, 211, 153, 0.86);  /* lighter emerald */
}


/* ==================== FMGE SETTINGS PAGE ==================== */

.fmge-settings-page {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 24px 12px 0;
  color: #e5e7eb;
}

body.fmge-dark-page .fmge-settings-page {
  background: transparent;
}

.fmge-settings-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header */
.fmge-settings-header {
  margin-bottom: 4px;
}

.fmge-settings-title {
  margin: 0 0 4px 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f9fafb;
}

.fmge-settings-subtitle {
  margin: 0;
  font-size: 13px;
  color: rgba(209, 213, 219, 0.9);
}

/* Layout: left (prefs) + right (resets) */
.fmge-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
}

/* Card base – reuse fmge-db-card but with minor tweaks */
.fmge-settings-card {
  position: relative;
  padding: 14px 16px 14px;
}

/* Preferences card: slightly calmer glow */
.fmge-settings-card--prefs::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 10% 0, rgba(56, 189, 248, 0.25) 0, transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(34, 197, 94, 0.25) 0, transparent 55%);
  opacity: 0.25;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Danger card: reddish glow */
.fmge-settings-card--danger::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.35) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(248, 113, 113, 0.3) 0, transparent 55%);
  opacity: 0.32;
  mix-blend-mode: screen;
  pointer-events: none;
}

.fmge-settings-card > * {
  position: relative;
  z-index: 1;
}

/* Blocks */
.fmge-settings-block {
  margin-top: 10px;
}

.fmge-settings-block-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f9fafb;
  margin-bottom: 4px;
}

.fmge-settings-block-desc {
  font-size: 12px;
  color: rgba(156, 163, 175, 0.96);
  margin: 0 0 8px 0;
}

.fmge-settings-small-note {
  margin: 6px 0 0 0;
  font-size: 11px;
  color: rgba(156, 163, 175, 0.92);
}

/* Theme toggle pills */
.fmge-settings-theme-toggle {
  display: inline-flex;
  gap: 8px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(55, 65, 81, 0.95);
}

.fmge-settings-theme-option {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.fmge-settings-theme-option input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.fmge-settings-theme-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: transparent;
  color: #e5e7eb;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.fmge-settings-theme-pill--dark {
  border-color: rgba(15, 23, 42, 0.9);
}

.fmge-settings-theme-pill--light {
  border-color: rgba(148, 163, 184, 0.8);
}

/* Checked state via :checked + sibling */
.fmge-settings-theme-option input[type="radio"]:checked + .fmge-settings-theme-pill {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: rgba(34, 197, 94, 0.95);
  color: #f9fafb;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.6);
  transform: translateY(-1px);
}

/* Hover effect on pills */
.fmge-settings-theme-option:hover .fmge-settings-theme-pill {
  border-color: rgba(129, 140, 248, 0.9);
}

/* Reset rows */
.fmge-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

/* Reset boxes */
.fmge-settings-reset-box {
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(55, 65, 81, 0.9);
  font-size: 12px;
}

.fmge-settings-reset-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f9fafb;
  margin-bottom: 4px;
}

.fmge-settings-reset-title--danger {
  color: #fecaca;
}

.fmge-settings-reset-desc {
  margin: 0 0 6px 0;
  font-size: 12px;
  color: rgba(156, 163, 175, 0.96);
}

/* Block for complete reset */
.fmge-settings-block--full {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(55, 65, 81, 0.9);
}

/* Buttons inside settings */
.fmge-settings-reset-btn {
  margin-top: 2px;
  width: 100%;
  justify-content: center;
}

/* "Danger" large button */
.fmge-settings-reset-btn--danger {
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.55);
}

.fmge-settings-reset-btn--danger:hover {
  filter: brightness(1.05);
}

/* For now all reset buttons are disabled visually */
.fmge-settings-reset-btn[disabled] {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
  transform: none;
}

/* Responsive */
@media (max-width: 900px) {
  .fmge-settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .fmge-settings-title {
    font-size: 24px;
  }

  .fmge-settings-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* === Settings: Goal Setter === */

.fmge-settings-block--goals {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(55, 65, 81, 0.9);
}

.fmge-settings-goals-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.fmge-settings-goal-card {
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(55, 65, 81, 0.95);
}

.fmge-settings-goal-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f9fafb;
  margin-bottom: 6px;
}

.fmge-settings-goal-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fmge-settings-goal-input {
  flex: 0 0 70px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: rgba(15, 23, 42, 0.98);
  color: #f9fafb;
  font-size: 13px;
  font-family: inherit;
  text-align: center;
}

.fmge-settings-goal-input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.7);
}

.fmge-settings-goal-unit {
  font-size: 12px;
  color: rgba(209, 213, 219, 0.9);
}

.fmge-settings-goal-hint {
  margin: 6px 0 0 0;
  font-size: 11px;
  color: rgba(156, 163, 175, 0.96);
}

.fmge-settings-goal-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Buttons reuse fmge-db-btn styles; just tweak sizes */
.fmge-settings-goal-actions .fmge-db-btn {
  padding: 7px 16px;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 640px) {
  .fmge-settings-goals-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== FIX: My Tests table horizontal scroll on mobile ===== */

/* Make sure the shell can scroll horizontally on all screens */
.fmge-my-tests-table-shell {
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;  /* smooth touch scroll on iOS */
}

/* Table must be wider than the viewport so scroll is possible */
.fmge-my-tests-table-shell .fmge-my-tests-table {
  min-width: 720px;
}

/* On very small screens, relax min-width a bit so scrolling feels natural */
@media (max-width: 640px) {
  .fmge-my-tests-table-shell .fmge-my-tests-table {
    min-width: 640px;
  }

  /* Make sure the shell itself is not clipped by any parent */
  .fmge-my-tests-layout {
    overflow-x: visible;
  }
}

/* FIX: ensure My Tests shell can scroll horizontally */
.fmge-my-tests-table-shell {
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}


/* Show scrollbar thumb for My Tests table shell */
.fmge-my-tests-table-shell::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.7);
}

.fmge-my-tests-table-shell:hover::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.9);
}

/* Firefox */
.fmge-my-tests-table-shell {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.9) transparent;
}

/* ===== HORIZONTAL SCROLL FOR FMGE TABLES (My Tests + Prebuilt Attempts) ===== */

/* My Tests shell: must be horizontally scrollable */
.fmge-my-tests-table-shell {
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Prebuilt attempts table wrapper: also scroll horizontally if too wide */
.fmge-prebuilt-attempts-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* The layout wrapper itself should NEVER clip horizontally */
.fmge-my-tests-layout {
  overflow: visible !important;
}




/* ==================== FMGE ANALYTICS PAGE ==================== */

.fmge-analytics-page {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 24px 12px 0;
  color: #e5e7eb;
}

.fmge-analytics-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header */
.fmge-analytics-header {
  margin-bottom: 4px;
}

.fmge-analytics-title {
  margin: 0 0 4px 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f9fafb;
}

.fmge-analytics-subtitle {
  margin: 0;
  font-size: 13px;
  color: rgba(209, 213, 219, 0.9);
}

/* Cards reuse fmge-db-card look */
.fmge-analytics-card {
  position: relative;
}

/* TOP ROW: donut + today/all-time */
.fmge-analytics-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 14px;
}

/* Overall card internals */
.fmge-analytics-card--overall {
  padding-bottom: 12px;
}

.fmge-analytics-overall-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.fmge-analytics-overall-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fmge-analytics-overall-legend {
  margin-top: 4px;
  font-size: 11px;
  width: 100%;
}

.fmge-analytics-overall-legend .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.fmge-analytics-overall-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.fmge-analytics-overall-legend .dot--correct {
  background: #22c55e;
}

.fmge-analytics-overall-legend .dot--wrong {
  background: #ef4444;
}

.fmge-analytics-overall-legend .dot--unanswered {
  background: #9ca3af;
}

.fmge-analytics-overall-legend .value {
  font-weight: 600;
  color: #e5e7eb;
}

.fmge-analytics-overall-meta {
  font-size: 12px;
  color: rgba(156, 163, 175, 0.96);
}

.fmge-analytics-overall-meta .line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.fmge-analytics-overall-meta .value {
  font-weight: 600;
  color: #e5e7eb;
}

/* Today vs all-time tile group */
.fmge-analytics-card--today-all {
  padding-bottom: 12px;
}

.fmge-analytics-today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fmge-analytics-today-grid .tile {
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(55, 65, 81, 0.9);
}

.fmge-analytics-today-grid .label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(156, 163, 175, 0.96);
  margin-bottom: 2px;
}

.fmge-analytics-today-grid .value {
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
}

.fmge-analytics-today-grid .sub {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(156, 163, 175, 0.96);
}

/* Analytics row: subjects + modes */
.fmge-analytics-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
}

.fmge-analytics-row--full {
  grid-template-columns: minmax(0, 1fr);
}

/* Generic table-like layout */
.fmge-analytics-table {
  margin-top: 6px;
  font-size: 13px;
}

.fmge-analytics-table-header,
.fmge-analytics-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.6fr)) minmax(0, 0.7fr);
  gap: 6px;
  align-items: center;
}

.fmge-analytics-table-header {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(156, 163, 175, 0.95);
  margin-bottom: 4px;
}

.fmge-analytics-table-row {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(55, 65, 81, 0.9);
  margin-bottom: 4px;
}

.fmge-analytics-table-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmge-analytics-table-row span.good {
  color: #4ade80;
  font-weight: 600;
}

.fmge-analytics-table-row span.mid {
  color: #facc15;
  font-weight: 600;
}

.fmge-analytics-table-row span.weak {
  color: #f97373;
  font-weight: 600;
}

/* Topic table uses an extra subject column */
.fmge-analytics-table--topics .fmge-analytics-table-header,
.fmge-analytics-table--topics .fmge-analytics-table-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) repeat(3, minmax(0, 0.6fr)) minmax(0, 0.7fr);
}

/* Empty state / notes */
.fmge-analytics-empty {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(156, 163, 175, 0.95);
}

.fmge-analytics-note {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(156, 163, 175, 0.95);
}

/* Mode usage card */
.fmge-analytics-card--modes {
  padding-bottom: 10px;
}

.fmge-analytics-mode-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.fmge-analytics-mode-list .mode-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto;
  gap: 6px;
  align-items: center;
}

.fmge-analytics-mode-list .mode-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fmge-analytics-mode-list .mode-label {
  font-weight: 600;
  color: #f9fafb;
}

.fmge-analytics-mode-list .mode-sub {
  font-size: 11px;
  color: rgba(156, 163, 175, 0.95);
}

.fmge-analytics-mode-list .mode-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}

.fmge-analytics-mode-list .mode-bar .bg {
  position: absolute;
  inset: 0;
  background: rgba(31, 41, 55, 0.95);
}

.fmge-analytics-mode-list .mode-bar .fill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #a3e635);
}

.fmge-analytics-mode-list .mode-rate {
  font-size: 12px;
  font-weight: 600;
  color: #e5e7eb;
}

/* Topics card */
.fmge-analytics-card--topics {
  padding-bottom: 10px;
}

/* Responsive */
@media (max-width: 1024px) {
  .fmge-analytics-top-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-analytics-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-analytics-overall-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fmge-analytics-today-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .fmge-analytics-title {
    font-size: 24px;
  }

  .fmge-analytics-overall-donut svg {
    width: 140px;
    height: 140px;
  }

  .fmge-analytics-table-header,
  .fmge-analytics-table-row {
    font-size: 12px;
    gap: 4px;
  }
}

.fmge-db-subject-footer-link {
  color: #e5e7eb;
  text-decoration: none;
  font-size: 12px;
}

.fmge-db-subject-footer-link:hover {
  text-decoration: underline;
  color: #a5b4fc;
}



/* FINAL override: current question button must be blue in all modes */
.krok-quiz-container #question-nav button.active {
  background: linear-gradient(135deg, #3b82f6, #0ea5e9) !important;
  color: #ffffff !important;
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.37) !important;
}


/* Exam / Insane: answered question button (blue pill) */
#question-nav button.nav-answered-exam {
  background: linear-gradient(135deg, #3b82f6, #0ea5e9);
  color: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.37);
}








/* === QUIZ PAGE THEME SWITCH – NEAR QUIZ, NOT FIXED TO VIEWPORT === */

.fmge-quiz-page-shell {
  position: relative;
  max-width: 1100px;        /* match your quiz wrapper width */
  margin: 0 auto;           /* center the whole quiz area */
}

/* Place switch just above and to the right of the quiz card area */
.fmge-quiz-theme-switch {
  position: absolute;
  top: -40px;               /* adjust vertical distance above the quiz wrapper */
  right: 50px;                 /* align with right edge of the quiz wrapper */
  z-index: 10;

  pointer-events: auto;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* Track (pill) – unchanged */
.fmge-quiz-theme-track {
  position: relative;
  width: 68px;
  height: 30px;
  border-radius: 999px;
  padding: 3px;

  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,0.32) 0, transparent 55%),
    rgba(15,23,42,0.96);
  border: 1px solid rgba(148, 163, 184, 0.8);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.85),
    0 0 0 1px rgba(15,23,42,0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Thumb + icons – same as before */
.fmge-quiz-theme-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #fb7185);
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.fmge-quiz-theme-icon {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

/* Dark vs light state */
.fmge-quiz-theme-switch[data-theme="dark"] .fmge-quiz-theme-thumb {
  transform: translateX(0);
}

.fmge-quiz-theme-switch[data-theme="light"] .fmge-quiz-theme-thumb {
  transform: translateX(34px);
}

.fmge-quiz-theme-switch[data-theme="dark"] .fmge-quiz-theme-icon--dark {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(56,189,248,0.8));
}

.fmge-quiz-theme-switch[data-theme="light"] .fmge-quiz-theme-icon--light {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(252,211,77,0.8));
}

/* Slight tweak for mobile: bring the switch closer, but still near quiz */
@media (max-width: 640px) {
  .fmge-quiz-theme-switch {
    top: -32px;
    right: 8px;
  }
}

/* === SWITCH APPEARANCE PER THEME === */

/* DARK: keep current look (already covered by base) */
.fmge-quiz-theme-switch[data-theme="dark"] .fmge-quiz-theme-track {
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,0.32) 0, transparent 55%),
    rgba(15,23,42,0.96);
  border-color: rgba(148, 163, 184, 0.8);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.85),
    0 0 0 1px rgba(15,23,42,0.9);
}

.fmge-quiz-theme-switch[data-theme="dark"] .fmge-quiz-theme-thumb {
  background: linear-gradient(135deg, #f97316, #fb7185);
}

/* LIGHT: softer, bright glass pill */
.fmge-quiz-theme-switch[data-theme="light"] .fmge-quiz-theme-track {
  background:
    radial-gradient(circle at 0% 0%, rgba(96,165,250,0.28) 0, transparent 55%),
    rgba(248, 250, 252, 0.92);
  border-color: rgba(148, 163, 184, 0.65);
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.25),
    0 0 0 1px rgba(209, 213, 219, 0.9);
}

.fmge-quiz-theme-switch[data-theme="light"] .fmge-quiz-theme-thumb {
  background: linear-gradient(135deg, #facc15, #f97316);
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.25);
}

/* Icon colors on light theme: slightly darker to match light UI */
.fmge-quiz-theme-switch[data-theme="light"] .fmge-quiz-theme-icon {
  color: #4b5563;
}

.fmge-quiz-theme-switch[data-theme="light"] .fmge-quiz-theme-icon--light {
  color: #f59e0b;
}

.fmge-quiz-theme-switch[data-theme="dark"] .fmge-quiz-theme-icon {
  color: #e5e7eb;
}









/* === FMGE QUIZ – GLASSY CARD WITH DARK TEXT (LIGHT THEME ONLY) === */

/* Main quiz wrapper – light theme glass */
.krok-quiz-container.fmge-quiz-light .quiz-wrapper {
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.26) 0, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(52, 211, 153, 0.24) 0, transparent 50%),
    rgba(248, 250, 252, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(148, 163, 184, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Question card – light theme */
.krok-quiz-container.fmge-quiz-light .question-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.08) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(52, 211, 153, 0.08) 0, transparent 55%),
    rgba(248, 250, 252, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(148, 163, 184, 0.65);
}

/* Question & explanation text – light theme darker */
.krok-quiz-container.fmge-quiz-light .question-text,
.krok-quiz-container.fmge-quiz-light .explanation-text,
.krok-quiz-container.fmge-quiz-light .results-summary,
.krok-quiz-container.fmge-quiz-light .keywords-text {
  color: #111827;
}

/* Muted labels */
.krok-quiz-container.fmge-quiz-light .status-text,
.krok-quiz-container.fmge-quiz-light .keywords-label {
  color: #4b5563;
}

/* Options – light theme */
.krok-quiz-container.fmge-quiz-light .option-button {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.7);
  color: #111827;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.krok-quiz-container.fmge-quiz-light .option-label {
  color: #111827;
}

.krok-quiz-container.fmge-quiz-light .option-button:hover {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.08) 0, transparent 55%),
    rgba(255, 255, 255, 0.96);
  border-color: #60a5fa;
}

.krok-quiz-container.fmge-quiz-light .option-button.selected {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.15) 0, transparent 55%),
    rgba(239, 246, 255, 0.98);
  border-color: #3b82f6;
  color: #0f172a;
}

.krok-quiz-container.fmge-quiz-light .option-button.correct {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.18) 0, transparent 55%),
    rgba(240, 253, 244, 0.98);
  border-color: #22c55e;
  color: #022c22;
}

.krok-quiz-container.fmge-quiz-light .option-button.incorrect {
  background:
    radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.18) 0, transparent 55%),
    rgba(254, 242, 242, 0.98);
  border-color: #ef4444;
  color: #450a0a;
}

/* Explanation block – light theme */
.krok-quiz-container.fmge-quiz-light .explanation-block {
  background: rgba(254, 249, 195, 0.6);
  border-color: rgba(250, 204, 21, 0.9);
}

/* Nav box – light theme */
.krok-quiz-container.fmge-quiz-light .quiz-nav-box {
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.16) 0, transparent 55%),
    rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.25),
    0 0 0 1px rgba(148, 163, 184, 0.5);
}

.krok-quiz-container.fmge-quiz-light .quiz-nav-title {
  color: #111827;
}

/* Nav buttons – light theme */
.krok-quiz-container.fmge-quiz-light #question-nav button {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(148, 163, 184, 0.7);
  color: #111827;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.krok-quiz-container.fmge-quiz-light #question-nav button:hover {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.12) 0, transparent 55%),
    rgba(255, 255, 255, 0.96);
}

/* Buttons – light theme */
.krok-quiz-container.fmge-quiz-light .btn-outline {
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  border: 1px solid rgba(148, 163, 184, 0.8);
}

.krok-quiz-container.fmge-quiz-light .btn-secondary {
  background: rgba(249, 250, 251, 0.96);
  color: #111827;
  border: 1px solid rgba(209, 213, 219, 0.9);
}

.krok-quiz-container.fmge-quiz-light .btn-primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(22, 163, 74, 0.45);
}

/* Quiz title color per theme */

.krok-quiz-container.fmge-quiz-dark .quiz-title {
  color: #f9fafb;    /* light text on dark */
}

.krok-quiz-container.fmge-quiz-light .quiz-title {
  color: #111827;    /* dark text on light */
}

/* Optional: timer color per theme too */
.krok-quiz-container.fmge-quiz-dark .quiz-timer {
  color: #facc15;
}

.krok-quiz-container.fmge-quiz-light .quiz-timer {
  color: #b45309;    /* slightly darker amber on light background */
}


/* === LIGHT THEME: ensure colored nav states still win === */

/* Normal mode: correct / wrong */
.krok-quiz-container.fmge-quiz-light #question-nav button.nav-correct {
  background: var(--fmge-quiz-accent-green);
  color: #ffffff;
  border-color: #4ade80;
  box-shadow: none;
}

.krok-quiz-container.fmge-quiz-light #question-nav button.nav-wrong {
  background: var(--fmge-quiz-accent-red);
  color: #ffffff;
  border-color: #fca5a5;
  box-shadow: none;
}

/* Exam + Insane: answered bubbles (blue) */
.krok-quiz-container.fmge-quiz-light #question-nav button.nav-answered-exam {
  background: linear-gradient(135deg, #3b82f6, #0ea5e9);
  color: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.37);
}


.fmge-explanation-image {
    margin-top: 8px;
    text-align: center;
}

.fmge-explanation-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.bookmark-explanation-image {
  margin-top: 8px;
  text-align: center;
}

.bookmark-explanation-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25),
              0 12px 30px rgba(15, 23, 42, 0.75);
}


.question-image-wrapper {
  margin-top: 10px;
  text-align: center;
}

.question-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
}

.fmge-question-image img {
  max-width: 100%;
  max-height: 350px;  /* or 300px if you want it shorter */
  height: auto;
  width: auto;
  object-fit: contain;
}



/* === Daily Quiz Page === */

.fmge-daily-quiz-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Today card */

.fmge-daily-today-card {
  background: radial-gradient(circle at top left, rgba(148, 163, 253, 0.25), transparent 45%),
              radial-gradient(circle at bottom right, rgba(45, 212, 191, 0.18), transparent 55%),
              rgba(15, 23, 42, 0.98);
  border-radius: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
}

.fmge-daily-today-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.fmge-daily-today-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.9);
}

.fmge-daily-today-date {
  font-size: 12px;
  color: rgba(156, 163, 175, 0.95);
}

.fmge-daily-today-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fmge-daily-today-topic {
  font-size: 18px;
  font-weight: 600;
  color: #e5e7eb;
}

.fmge-daily-today-meta {
  font-size: 13px;
  color: rgba(148, 163, 184, 0.95);
}

.fmge-daily-today-btn {
  margin-top: 6px;
  align-self: flex-start;
  padding-inline: 18px;
}

/* === Daily vertical list === */

.fmge-daily-calendar-card {
  padding: 14px 14px 16px;
}

.fmge-daily-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.fmge-daily-calendar-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fmge-daily-month-label {
  font-size: 13px;
  color: #e5e7eb;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* Container with vertical scroll */

.fmge-daily-vertical {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.fmge-daily-vertical::-webkit-scrollbar {
  width: 6px;
}

.fmge-daily-vertical::-webkit-scrollbar-track {
  background: transparent;
}

.fmge-daily-vertical::-webkit-scrollbar-thumb {
  background: rgba(31, 41, 55, 0.8);
  border-radius: 999px;
}

/* Day card: full-width button */

.fmge-daily-day-card-vert {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(30, 64, 175, 0.5);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.35), transparent 70%),
    rgba(15, 23, 42, 0.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.9);
  padding: 9px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.fmge-daily-day-card-vert:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.95);
  border-color: rgba(56, 189, 248, 0.95);
}

.fmge-daily-day-card-vert.is-today {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.6), 0 18px 40px rgba(15, 23, 42, 0.98);
}

/* Left: day + date */

.fmge-daily-day-left {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
}

.fmge-daily-day-dow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.95);
}

.fmge-daily-day-date {
  font-size: 13px;
  font-weight: 500;
  color: #e5e7eb;
}

/* Right: topic text + pill */

.fmge-daily-day-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fmge-daily-day-topic-text {
  font-size: 13px;
  color: rgba(191, 219, 254, 0.95);
  line-height: 1.35;
}

.fmge-daily-day-pill {
  align-self: flex-start;
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.8);
  color: #dbeafe;
}

.fmge-daily-day-pill--empty {
  background: rgba(55, 65, 81, 0.7);
  border-color: rgba(107, 114, 128, 0.9);
  color: rgba(156, 163, 175, 0.96);
}

/* Hint text */

.fmge-daily-strip-hint {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.9);
}

/* Mobile tweaks */

@media (max-width: 768px) {
  .fmge-daily-calendar-card {
    padding: 12px 10px 14px;
  }

  .fmge-daily-day-card-vert {
    padding: 8px 9px 9px;
    gap: 8px;
  }

  .fmge-daily-day-left {
    min-width: 76px;
  }

  .fmge-daily-vertical {
    max-height: 420px;
  }
}


.fmge-daily-day-card-vert.is-locked {
  opacity: 0.6;
  cursor: default;
}

.fmge-daily-day-pill--locked {
  background: rgba(55, 65, 81, 0.85);
  border-color: rgba(75, 85, 99, 0.95);
  color: rgba(209, 213, 219, 0.95);
}


/* FMGE dark pages – make entry headers white */
body.fmge-dark-page .entry-header .entry-title {
  color: #ffffff !important;
}

.fmge-settings-title {
   color: #000000;
}

.fmge-settings-subtitle {
   color: #000000;
}





/* Root layout: sidebar + content */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.md-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar shell */
.md-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;

  width: 200px;
  min-height: 100vh;
  padding: 16px 14px 14px;

  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,0.25) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(52,211,153,0.2) 0, transparent 55%),
    #020617;
  border-right: 1px solid rgba(15,23,42,0.9);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 20px 60px rgba(0,0,0,0.85);

  color: #e5e7eb;
  box-sizing: border-box;
}

/* Brand at top */
.md-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 12px;
  border-radius: 12px;
}

.md-sidebar__logo-circle {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #f9fafb;
  background: radial-gradient(circle at 0% 0%, #0ea5e9 0, #4f46e5 60%);
}

.md-sidebar__brand-title {
  font-size: 15px;
  font-weight: 600;
}

.md-sidebar__brand-sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9ca3af;
}

/* Nav sections */
.md-sidebar__nav {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(31,41,55,0.9);
}

.md-sidebar__secondary {
  margin-top: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(31,41,55,0.9);
}

/* Items */
.md-sidebar__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 7px 9px;
  margin-bottom: 4px;

  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-decoration: none;
  font-size: 18px;
  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}

.md-sidebar__item--ghost {
  opacity: 0.85;
}

/* Icon + label */
.md-sidebar__icon {
  width: 22px;
  text-align: center;
  font-size: 16px;
}

.md-sidebar__label {
  flex: 1;
}

/* Active item */
.md-sidebar__item--active {
  background:
    radial-gradient(circle at 0% 0%, rgba(59,130,246,0.4) 0, transparent 55%),
    rgba(15,23,42,0.98);
  border-color: rgba(96,165,250,0.9);
  box-shadow:
    0 8px 20px rgba(37,99,235,0.5),
    0 0 0 1px rgba(15,23,42,1);
}

/* Hover */
.md-sidebar__item:hover {
  background: rgba(15,23,42,0.96);
  border-color: rgba(148,163,184,0.7);
  transform: translateY(-1px);
}

/* Account pinned at bottom */
.md-sidebar__account {
  margin-top: 10px;
  margin-bottom: 4px;

  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.8);
  background: rgba(15,23,42,0.96);

  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;

  color: inherit;
  font: inherit;
  text-align: left;

  box-shadow:
    0 10px 26px rgba(0,0,0,0.9),
    0 0 0 1px rgba(15,23,42,0.9);

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.md-sidebar__account:hover {
  background:
    radial-gradient(circle at 0% 0%, rgba(59,130,246,0.35) 0, transparent 50%),
    rgba(15,23,42,0.98);
  border-color: rgba(248,250,252,0.95);
  transform: translateY(-1px);
  box-shadow:
    0 16px 40px rgba(0,0,0,1),
    0 0 0 1px rgba(248,250,252,0.1);
}

.md-sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(248,250,252,0.8);
}

.md-sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.md-sidebar__account-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-sidebar__account-name {
  font-size: 13px;
  font-weight: 600;
}

.md-sidebar__account-tag {
  font-size: 11px;
  color: #9ca3af;
}

/* Content area next to sidebar */
.md-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px;
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #000 100%);
  color: #e5e7eb;
}

/* Mobile: collapse sidebar into top bar or hide (simplest: hide for now) */
@media (max-width: 921px) {
  .md-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 50;
  }

  .md-sidebar--open {
    transform: translateX(0);
  }

  .md-content {
    padding: 16px;
  }
}

/* Desktop: hide Astra header bar when md-sidebar is visible */
@media (min-width: 922px) {

  .ast-main-header-wrap .main-header-bar-wrap{
    display: none !important;
  }
}




/* Netflix‑style sidebar logo */
.md-sidebar__brand {
  padding: 18px 6px 16px;
}

.md-sidebar__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make logo tall, like Netflix left sidebar */
.md-sidebar__logo-wrap .custom-logo {
  max-height: 72px;   /* tweak 64–80px depending on your taste */
  width: auto;
}

/* If your logo is very horizontal, let it breathe */
.md-sidebar {
  width: 200px;       /* you already have this; 260–280px works well */
}


/* Fallback text logo */
.md-sidebar__logo-text {
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
}





.md-sidebar .md-sidebar__logo-wrap .custom-logo {
  height: 62px !important;
  width: auto !important;
  max-height: 62px !important;
}


.md-sidebar .md-sidebar__item {
  font-size: 16px !important;
}




/* Container for the completed checkbox */
.pyt-completed-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.95);
  margin-left: 12px;
}

/* Make the checkbox itself larger */
.pyt-completed-flag input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: default; /* since it's disabled */
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #64748b;      /* grey border when unchecked */
  border-radius: 4px;
  background-color: #020617;      /* match your dark UI */
  display: inline-block;
  position: relative;
}

/* Green state when checked */
.pyt-completed-flag input[type="checkbox"]:checked {
  border-color: #22c55e;
  background-color: #22c55e;
}

.pyt-completed-flag input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: 2px solid #022c22;   /* color of the tick */
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);     /* this makes it look like a ✓ */
    border-radius: 0;
}


/* Container */
.pyt-completed-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin-left: 12px;
}

/* Default text (not completed) – muted grey */
.pyt-completed-flag .pyt-completed-text {
  color: #9ca3af; /* slate-400 style */
}

/* When completed: stronger green text */
.pyt-completed-flag.pyt-completed-flag--done .pyt-completed-text {
  color: #22c55e;/* green */
}

.pyt-completed-flag span {
    color: #ffffff;
}


.fmge-daily-today-card--responsive .fmge-daily-today-btn {
  margin-top: 10px;
  min-width: 180px;
}