/* MRCS Flashcards — light theme matching the qbank/dashboard design system.
   Variables mirror the MRCS dashboard for visual coherence. */

.mrcs-fc-app {
  /* Colour system — same as dashboard */
  --fc-blue: #0078D7;
  --fc-blue-2: #2196f3;
  --fc-blue-3: #00b4ff;
  --fc-dark: #003a7a;
  --fc-light: #eaf3fc;
  --fc-text: #0f172a;
  --fc-body: #475569;
  --fc-muted: #64748b;
  --fc-border: #e6ebf2;
  --fc-soft: #f6f8fb;
  --fc-white: #ffffff;
  --fc-green: #16a34a;
  --fc-green-soft: #e7f7ed;
  --fc-amber: #f59e0b;
  --fc-amber-soft: #fff5dc;
  --fc-red: #ef4444;
  --fc-red-soft: #fdecec;

  --fc-radius: 18px;
  --fc-radius-sm: 12px;
  --fc-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --fc-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
  --fc-shadow-hover: 0 14px 40px rgba(15, 23, 42, 0.12);
  --fc-shadow-blue: 0 14px 40px rgba(0, 120, 215, 0.25);
  --fc-ease: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
  color: var(--fc-text);
  background: #f5f7fa;
  border-radius: var(--fc-radius);
  padding: 24px;
  min-height: 600px;
}

.mrcs-fc-app *,
.mrcs-fc-app *::before,
.mrcs-fc-app *::after { box-sizing: border-box; }

/* Banner — guest mode notice ---------------------------------------------- */
.mrcs-fc-banner {
  background: var(--fc-light);
  border: 1px solid #d0e3fc;
  border-radius: var(--fc-radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--fc-text);
  line-height: 1.5;
  display: flex; align-items: center; gap: 12px;
}
.mrcs-fc-banner strong { color: var(--fc-dark); }
.mrcs-fc-banner-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  color: var(--fc-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mrcs-fc-banner-text { flex: 1; }

/* Member upgrade nudge — soft amber so it stands out from the blue guest banner */
.mrcs-fc-banner-member {
  background: linear-gradient(135deg, #fff5dc 0%, #ffe6b3 100%);
  border-color: #f3d99b;
  color: #78350f;
}
.mrcs-fc-banner-member strong { color: #78350f; }
.mrcs-fc-banner-member .mrcs-fc-banner-icon {
  background: #fff;
  color: #d97706;
}
.mrcs-fc-banner-member .mrcs-fc-link {
  color: #b45309;
  font-weight: 700;
}
.mrcs-fc-banner-member .mrcs-fc-link:hover { color: #92400e; }

/* Lock badge — small inline lock for limited/locked decks */
.mrcs-fc-lock-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 6px;
  background: var(--fc-amber-soft);
  color: #b45309;
  margin-left: 4px;
  vertical-align: middle;
}

/* Inline upgrade link below the deck meta */
.mrcs-fc-deck-upgrade-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fc-blue);
  text-decoration: none;
}
.mrcs-fc-deck-upgrade-link:hover { color: var(--fc-dark); }

/* Locked deck card — slight desaturation, grey stripe, prominent upgrade button */
.mrcs-fc-deck-card.is-locked {
  opacity: 0.85;
}
.mrcs-fc-deck-card.is-locked .mrcs-fc-deck-stripe {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8) !important;
}
.mrcs-fc-deck-card.is-locked .mrcs-fc-deck-icon-paper {
  filter: grayscale(0.6);
  opacity: 0.7;
}

/* Upgrade button used when locked */
.mrcs-fc-btn-upgrade {
  background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);
  font-weight: 700;
}
.mrcs-fc-btn-upgrade:hover {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(217, 119, 6, 0.45);
  border-color: transparent;
}


/* Header ------------------------------------------------------------------ */
.mrcs-fc-header { margin-bottom: 24px; }
.mrcs-fc-header h1 {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 28px; font-weight: 800;
  margin: 0 0 6px;
  color: var(--fc-text);
}
.mrcs-fc-subtitle {
  color: var(--fc-muted);
  margin: 0;
  font-size: 14px;
}

/* Loading / errors -------------------------------------------------------- */
.mrcs-fc-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 20px; color: var(--fc-muted); gap: 16px;
}
.mrcs-fc-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--fc-border);
  border-top-color: var(--fc-blue);
  border-radius: 50%;
  animation: mrcs-fc-spin 0.8s linear infinite;
}
@keyframes mrcs-fc-spin { to { transform: rotate(360deg); } }

.mrcs-fc-error {
  background: var(--fc-red-soft);
  border: 1px solid #fbcaca;
  color: #991b1b;
  padding: 16px;
  border-radius: var(--fc-radius-sm);
}
.mrcs-fc-muted { color: var(--fc-muted); font-style: italic; }

/* Deck tree --------------------------------------------------------------- */
.mrcs-fc-deck-tree { margin-top: 16px; }
.mrcs-fc-tree { list-style: none; padding: 0; margin: 0; }
.mrcs-fc-tree-d1 { padding-left: 24px; margin-top: 8px;
  border-left: 2px solid var(--fc-border); margin-left: 12px; }
.mrcs-fc-tree-d2 { padding-left: 24px; margin-top: 8px;
  border-left: 2px solid var(--fc-border); margin-left: 12px; }
.mrcs-fc-tree-node { margin-bottom: 12px; }

.mrcs-fc-deck-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 16px 20px;
  box-shadow: var(--fc-shadow-sm);
  transition: transform 0.2s var(--fc-ease), border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.mrcs-fc-deck-card:hover {
  transform: translateY(-2px);
  border-color: var(--fc-blue);
  box-shadow: var(--fc-shadow-hover);
}
/* Per-accent hover border so each paper feels distinct */
.mrcs-fc-deck-accent-blue:hover   { border-color: #0078D7; }
.mrcs-fc-deck-accent-teal:hover   { border-color: #0d9488; }
.mrcs-fc-deck-accent-purple:hover { border-color: #7c3aed; }
.mrcs-fc-deck-accent-amber:hover  { border-color: #d97706; }

/* Root paper card — bigger, with vertical accent stripe */
.mrcs-fc-deck-card-d0 {
  padding: 22px 26px 22px 30px;
  gap: 18px;
}
.mrcs-fc-deck-card-d0:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}
.mrcs-fc-deck-stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

/* Paper icon — bigger and gradient on root */
.mrcs-fc-deck-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fc-light) 0%, #d8ecff 100%);
  color: var(--fc-blue);
  display: flex; align-items: center; justify-content: center;
}
.mrcs-fc-deck-icon-paper {
  width: 56px; height: 56px;
  border-radius: 14px;
}

/* Stack title + meta + progress in main column */
.mrcs-fc-deck-card-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.mrcs-fc-deck-card-title {
  font-family: 'Poppins', 'Inter', sans-serif;
  margin: 0;
  font-size: 16px; font-weight: 700;
  color: var(--fc-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.25;
}
.mrcs-fc-deck-card-d0 .mrcs-fc-deck-card-title {
  font-size: 19px;
  letter-spacing: -0.2px;
}
.mrcs-fc-deck-card-meta {
  margin: 0;
  font-size: 12px; font-weight: 500;
  color: var(--fc-muted);
  font-variant-numeric: tabular-nums;
  display: flex; gap: 6px; align-items: baseline;
}
.mrcs-fc-deck-card-d0 .mrcs-fc-deck-card-meta { font-size: 13px; }
.mrcs-fc-deck-card-meta-strong {
  color: var(--fc-text); font-weight: 700;
}
.mrcs-fc-deck-card-meta-sep { opacity: 0.5; }

.mrcs-fc-deck-card-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Smaller action pills inside the deck cards */
.mrcs-fc-deck-card-actions .mrcs-fc-btn {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 50px;
}

/* Slight visual demotion for nested levels */
.mrcs-fc-deck-card-d1 .mrcs-fc-deck-card-title,
.mrcs-fc-deck-card-d2 .mrcs-fc-deck-card-title { font-size: 15px; }
.mrcs-fc-deck-card-d1, .mrcs-fc-deck-card-d2 {
  padding: 12px 16px;
}

/* Progress ring on root paper cards */
.mrcs-fc-deck-ring {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ring-from, var(--fc-blue)) 0 var(--ring-deg, 0deg),
    var(--fc-soft) var(--ring-deg, 0deg) 360deg
  );
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 0.6s var(--fc-ease);
}
.mrcs-fc-deck-ring::after {
  /* Soft inner ring to mask conic-gradient seam at 0deg */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
  pointer-events: none;
}
.mrcs-fc-deck-ring-inner {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--fc-white);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.mrcs-fc-deck-ring-pct {
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 800;
  color: var(--fc-text);
  font-variant-numeric: tabular-nums;
}
.mrcs-fc-deck-ring-pct small {
  font-size: 9px;
  font-weight: 700;
  margin-left: 1px;
  opacity: 0.7;
}

/* Caret toggle for collapsible nodes */
.mrcs-fc-caret {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fc-soft);
  border: 1px solid var(--fc-border);
  border-radius: 8px;
  color: var(--fc-muted);
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s var(--fc-ease), background 0.2s, color 0.2s, border-color 0.2s;
}
.mrcs-fc-caret svg {
  display: block;
  transition: transform 0.25s var(--fc-ease);
}
.mrcs-fc-caret:hover {
  background: var(--fc-light);
  color: var(--fc-blue);
  border-color: #d0e3fc;
}
.mrcs-fc-caret.is-open {
  background: var(--fc-light);
  color: var(--fc-blue);
  border-color: #d0e3fc;
}
.mrcs-fc-caret.is-open svg {
  transform: rotate(90deg);
}
.mrcs-fc-caret-spacer {
  flex-shrink: 0;
  display: inline-block;
  width: 32px; height: 32px;
}

/* Progress bar inside deck card (logged-in users only) — full width, thinner */
.mrcs-fc-deck-progress {
  margin-top: 6px;
}
.mrcs-fc-deck-progress-bar {
  height: 4px;
  background: var(--fc-soft);
  border-radius: 50px; overflow: hidden;
}
.mrcs-fc-deck-progress-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--fc-blue), var(--fc-blue-3));
  border-radius: 50px;
  transition: width 0.4s var(--fc-ease);
}

.mrcs-fc-pill {
  display: inline-block; padding: 3px 12px;
  background: var(--fc-light); color: var(--fc-blue);
  border-radius: 50px;
  font-size: 12px; font-weight: 600;
}

/* Buttons ----------------------------------------------------------------- */
.mrcs-fc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  color: var(--fc-text);
  border-radius: var(--fc-radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s var(--fc-ease);
}
.mrcs-fc-btn:hover {
  background: var(--fc-light);
  border-color: var(--fc-blue);
  color: var(--fc-blue);
  transform: translateY(-1px);
  box-shadow: var(--fc-shadow-sm);
}
.mrcs-fc-btn-primary {
  background: linear-gradient(135deg, var(--fc-blue) 0%, var(--fc-blue-2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--fc-shadow-blue);
}
.mrcs-fc-btn-primary:hover {
  background: linear-gradient(135deg, var(--fc-dark) 0%, var(--fc-blue) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 18px 50px rgba(0, 120, 215, 0.35);
}
.mrcs-fc-btn-secondary {
  background: var(--fc-amber-soft);
  border-color: #f3d99b;
  color: #92400e;
}
.mrcs-fc-btn-secondary:hover {
  background: #fceec5;
  border-color: var(--fc-amber);
  color: #78350f;
}
.mrcs-fc-link {
  background: none; border: 0; color: var(--fc-blue);
  cursor: pointer; font: inherit; text-decoration: underline;
  padding: 0; font-weight: 600;
}
.mrcs-fc-link:hover { color: var(--fc-dark); }
.mrcs-fc-link-danger { color: var(--fc-red); }
.mrcs-fc-link-danger:hover { color: #b91c1c; }

/* Review session --------------------------------------------------------- */
.mrcs-fc-session { display: flex; flex-direction: column; gap: 16px; }

.mrcs-fc-progress {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--fc-muted);
  font-weight: 500;
}
.mrcs-fc-progress-bar {
  flex: 1; height: 6px;
  background: var(--fc-soft);
  border-radius: 50px; overflow: hidden;
}
.mrcs-fc-progress-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--fc-blue), var(--fc-blue-3));
  transition: width 0.3s var(--fc-ease);
}

/* Cram-mode banner — amber to signal "off the schedule" without being scary */
.mrcs-fc-cram-banner {
  background: var(--fc-amber-soft);
  border: 1px solid #f3d99b;
  color: #92400e;
  padding: 12px 16px;
  border-radius: var(--fc-radius-sm);
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}
.mrcs-fc-cram-banner strong { color: #78350f; }

/* Toolbar with Back / breadcrumb / Skip */
.mrcs-fc-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0;
}
.mrcs-fc-toolbar .mrcs-fc-breadcrumb { flex: 1; text-align: center; }
.mrcs-fc-toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-sm);
  color: var(--fc-body);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--fc-ease);
}
.mrcs-fc-toolbar-btn:hover:not(:disabled) {
  background: var(--fc-light);
  border-color: var(--fc-blue);
  color: var(--fc-blue);
  transform: translateY(-1px);
}
.mrcs-fc-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mrcs-fc-breadcrumb {
  font-size: 11px;
  color: var(--fc-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
}
.mrcs-fc-badge {
  display: inline-block; padding: 2px 8px;
  background: var(--fc-light); color: var(--fc-blue);
  border-radius: 50px;
  font-size: 10px; font-weight: 700;
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}

/* Card with flip animation ----------------------------------------------- */
.mrcs-fc-card {
  perspective: 1500px;
  min-height: 320px;
}
.mrcs-fc-card-inner {
  position: relative;
  width: 100%; min-height: 320px;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--fc-ease);
}
.mrcs-fc-card.is-flipped .mrcs-fc-card-inner {
  transform: rotateY(180deg);
}
.mrcs-fc-card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 32px;
  display: flex; flex-direction: column;
  gap: 20px;
  box-shadow: var(--fc-shadow);
}
.mrcs-fc-card-back { transform: rotateY(180deg); }
.mrcs-fc-card-content {
  flex: 1;
  font-size: 17px; line-height: 1.65;
  color: var(--fc-text);
}
.mrcs-fc-card-content p:first-child { margin-top: 0; }
.mrcs-fc-card-content p:last-child  { margin-bottom: 0; }
.mrcs-fc-card-content strong { color: var(--fc-text); font-weight: 700; }
.mrcs-fc-card-content a { color: var(--fc-blue); }

/* Cloze rendering --------------------------------------------------------- */
.mrcs-fc-cloze {
  display: inline-block;
  padding: 1px 10px;
  background: var(--fc-light);
  border: 1px dashed #b6d6f5;
  border-radius: 6px;
  color: var(--fc-blue);
  font-weight: 600;
}
.mrcs-fc-cloze-revealed {
  background: var(--fc-green-soft);
  border-color: #a7e1bb;
  border-style: solid;
  color: var(--fc-green);
}
.mrcs-fc-cloze-context {
  color: var(--fc-body);
  font-size: 15px;
  background: var(--fc-soft);
  padding: 12px 14px;
  border-radius: var(--fc-radius-sm);
}
.mrcs-fc-cloze-context + hr {
  border: 0; border-top: 1px solid var(--fc-border); margin: 16px 0;
}

.mrcs-fc-source-btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--fc-light);
  border: 1px solid #d0e3fc;
  border-radius: 50px;
  color: var(--fc-blue); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: all 0.2s var(--fc-ease);
}
.mrcs-fc-source-btn:hover {
  background: var(--fc-blue);
  color: #fff;
  border-color: var(--fc-blue);
  transform: translateY(-1px);
  box-shadow: var(--fc-shadow-blue);
}

/* Rating row ------------------------------------------------------------- */
.mrcs-fc-ratings {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.mrcs-fc-rating {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 16px 8px;
  background: var(--fc-white);
  border: 1.5px solid var(--fc-border);
  border-radius: var(--fc-radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--fc-text);
  transition: all 0.2s var(--fc-ease);
  box-shadow: var(--fc-shadow-sm);
}
.mrcs-fc-rating:hover {
  transform: translateY(-2px);
  box-shadow: var(--fc-shadow-hover);
}
.mrcs-fc-rating-label { font-size: 14px; font-weight: 700; }
.mrcs-fc-rating-when  { font-size: 11px; color: var(--fc-muted); font-weight: 500; }

/* Each rating gets its own subtle tint that fills on hover */
.mrcs-fc-rating-again { border-color: #fbcaca; }
.mrcs-fc-rating-again:hover {
  background: var(--fc-red-soft);
  border-color: var(--fc-red);
  color: #991b1b;
}
.mrcs-fc-rating-again:hover .mrcs-fc-rating-when { color: #b91c1c; }

.mrcs-fc-rating-hard { border-color: #f3d99b; }
.mrcs-fc-rating-hard:hover {
  background: var(--fc-amber-soft);
  border-color: var(--fc-amber);
  color: #92400e;
}
.mrcs-fc-rating-hard:hover .mrcs-fc-rating-when { color: #78350f; }

.mrcs-fc-rating-good { border-color: #a7e1bb; }
.mrcs-fc-rating-good:hover {
  background: var(--fc-green-soft);
  border-color: var(--fc-green);
  color: #166534;
}
.mrcs-fc-rating-good:hover .mrcs-fc-rating-when { color: #14532d; }

.mrcs-fc-rating-easy { border-color: #b6d6f5; }
.mrcs-fc-rating-easy:hover {
  background: var(--fc-light);
  border-color: var(--fc-blue);
  color: var(--fc-dark);
}
.mrcs-fc-rating-easy:hover .mrcs-fc-rating-when { color: var(--fc-blue); }

/* Done screen ------------------------------------------------------------ */
.mrcs-fc-done {
  text-align: center;
  padding: 60px 24px;
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
}
.mrcs-fc-done h2 {
  font-family: 'Poppins', sans-serif;
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 800;
  color: var(--fc-text);
}
.mrcs-fc-done p { color: var(--fc-body); margin: 0 0 8px; }
.mrcs-fc-done-actions {
  display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap;
}


/* Forms ------------------------------------------------------------------ */
.mrcs-fc-form {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 28px;
  margin-top: 16px;
  box-shadow: var(--fc-shadow);
}
.mrcs-fc-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--fc-body);
}
.mrcs-fc-form textarea,
.mrcs-fc-form input,
.mrcs-fc-form select {
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-sm);
  padding: 10px 14px;
  color: var(--fc-text);
  font-family: inherit; font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mrcs-fc-form textarea:focus,
.mrcs-fc-form input:focus,
.mrcs-fc-form select:focus {
  outline: none;
  border-color: var(--fc-blue);
  box-shadow: 0 0 0 3px rgba(0, 120, 215, 0.12);
}
.mrcs-fc-form-actions {
  display: flex; gap: 12px; justify-content: flex-end;
}
.mrcs-fc-form code {
  background: var(--fc-soft);
  border: 1px solid var(--fc-border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* =========================================================
   DASHBOARD STRIP
   ========================================================= */

.mrcs-fc-dash {
  margin-bottom: 24px;
  animation: mrcs-fc-fadeup 0.5s var(--fc-ease) both;
}
@keyframes mrcs-fc-fadeup {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mrcs-fc-dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

/* Locked / signed-out state ---------------------------------------------- */
.mrcs-fc-dash-locked {
  background: linear-gradient(135deg, #0078D7 0%, #2196f3 50%, #00b4ff 100%);
  border-radius: var(--fc-radius);
  padding: 24px;
  color: #fff;
  box-shadow: var(--fc-shadow-blue);
  position: relative;
  overflow: hidden;
}
.mrcs-fc-dash-locked::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.10), transparent 40%);
  pointer-events: none;
}
.mrcs-fc-dash-locked-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.mrcs-fc-dash-locked-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mrcs-fc-dash-locked-text { flex: 1; min-width: 220px; }
.mrcs-fc-dash-locked-text h2 {
  font-family: 'Poppins', sans-serif;
  margin: 0 0 4px; font-size: 20px; font-weight: 800;
}
.mrcs-fc-dash-locked-text p { margin: 0; font-size: 14px; opacity: 0.92; }
.mrcs-fc-dash-locked-actions { display: flex; gap: 10px; flex-shrink: 0; }
.mrcs-fc-dash-locked-actions .mrcs-fc-btn {
  background: #fff; color: var(--fc-dark); border-color: transparent;
}
.mrcs-fc-dash-locked-actions .mrcs-fc-btn:hover {
  background: var(--fc-light); color: var(--fc-dark);
}
.mrcs-fc-dash-locked-actions .mrcs-fc-btn-primary {
  background: var(--fc-dark); color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.mrcs-fc-dash-locked-actions .mrcs-fc-btn-primary:hover {
  background: #002553; color: #fff;
}

/* Hero — gradient blue card spanning 5 cols ----------------------------- */
.mrcs-fc-dash-hero {
  grid-column: span 5;
  position: relative;
  background: linear-gradient(135deg, #0078D7 0%, #2196f3 50%, #00b4ff 100%);
  border-radius: var(--fc-radius);
  padding: 22px 22px 16px;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--fc-shadow-blue);
  display: flex; flex-direction: column;
}
.mrcs-fc-dash-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.10), transparent 45%);
  pointer-events: none;
}
.mrcs-fc-dash-hero-content {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.mrcs-fc-dash-hero-main {
  flex: 1; min-width: 0;
}
.mrcs-fc-dash-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.22);
  padding: 4px 10px; border-radius: 50px;
  margin-bottom: 8px;
}
.mrcs-fc-dash-greeting {
  display: block;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.mrcs-fc-dash-bignum {
  font-family: 'Poppins', sans-serif;
  font-size: 56px; font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.mrcs-fc-dash-bignum-label {
  font-size: 13px; opacity: 0.92; margin-top: 4px;
  font-weight: 500;
}

/* Today's breakdown — small horizontal trio */
.mrcs-fc-dash-today-split {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.mrcs-fc-dash-split-stat {
  display: flex; flex-direction: column;
  gap: 2px;
}
.mrcs-fc-dash-split-num {
  font-family: 'Poppins', sans-serif;
  font-size: 18px; font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mrcs-fc-dash-split-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.78;
}

/* Bottom strip — translucent bar with secondary stats */
.mrcs-fc-dash-hero-strip {
  position: relative; z-index: 1;
  display: flex;
  gap: 18px;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--fc-radius-sm);
  font-size: 12px;
  flex-wrap: wrap;
}
.mrcs-fc-dash-hero-strip-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.mrcs-fc-dash-hero-strip-stat strong {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 14px;
}
.mrcs-fc-dash-hero-strip-meta {
  opacity: 0.75;
  font-size: 11px;
}

/* Goal ring (in hero) — conic-gradient circle */
.mrcs-fc-dash-goal-ring {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: conic-gradient(#fff 0 var(--goal-deg, 0deg), rgba(255,255,255,0.22) var(--goal-deg, 0deg) 360deg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.6s var(--fc-ease);
}
.mrcs-fc-dash-goal-ring-inner {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0078D7 0%, #2196f3 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
}
.mrcs-fc-dash-goal-pct {
  font-family: 'Poppins', sans-serif;
  font-size: 20px; font-weight: 800;
}
.mrcs-fc-dash-goal-target {
  font-size: 11px; opacity: 0.85; margin-top: -2px;
}

/* Floating pencil icon on the goal ring corner */
.mrcs-fc-dash-goal-ring {
  position: relative;
}
.mrcs-fc-dash-goal-edit-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--fc-blue);
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.2s var(--fc-ease), background 0.2s, color 0.2s;
}
.mrcs-fc-dash-goal-edit-icon:hover {
  transform: scale(1.1);
  background: var(--fc-light);
  color: var(--fc-dark);
}

.mrcs-fc-dash-hero-foot {
  position: relative; z-index: 1;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Primary call-to-action sitting in the hero — white pill on the blue card */
.mrcs-fc-dash-cta {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  background: #fff;
  color: var(--fc-dark);
  border-radius: 50px;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: transform 0.2s var(--fc-ease), box-shadow 0.2s, background 0.2s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.mrcs-fc-dash-cta:hover {
  transform: translateY(-1px);
  background: var(--fc-light);
  color: var(--fc-dark);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.mrcs-fc-dash-cta.is-disabled {
  background: rgba(255,255,255,0.18);
  color: #fff;
  cursor: default;
  box-shadow: none;
  font-weight: 600;
}
.mrcs-fc-dash-cta.is-disabled:hover {
  transform: none;
}

.mrcs-fc-dash-goal-edit {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  padding: 8px 14px;
  border-radius: 50px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.mrcs-fc-dash-goal-edit:hover {
  background: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

/* Stat cards (streak, due, mastery) — span 7/3 = 2.33 each */
.mrcs-fc-dash-card {
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 18px;
  box-shadow: var(--fc-shadow-sm);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.2s var(--fc-ease), box-shadow 0.2s, border-color 0.2s;
}
.mrcs-fc-dash-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--fc-shadow-hover);
  border-color: #d0e3fc;
}

/* Layout:
     Row 1:  [   HERO 2-row   ][ STREAK ][ DUE ]
     Row 2:  [   ↑↑           ][   LAST 7 DAYS   ]
     Row 3:  [ MASTERY ][ STRONGEST ][ NEEDS WORK ] */
.mrcs-fc-dash-hero {
  grid-column: 1 / span 5;
  grid-row: 1 / span 2;
}
.mrcs-fc-dash-streak      { grid-column: 6  / span 4; grid-row: 1; }
.mrcs-fc-dash-due         { grid-column: 10 / span 3; grid-row: 1; }
.mrcs-fc-dash-chart       { grid-column: 6  / span 7; grid-row: 2; }

.mrcs-fc-dash-mastery     { grid-column: 1 / span 3; grid-row: 3; }
.mrcs-fc-dash-topics-good { grid-column: 4 / span 5; grid-row: 3; }
.mrcs-fc-dash-topics-poor { grid-column: 9 / span 4; grid-row: 3; }

.mrcs-fc-dash-card-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--fc-light);
  color: var(--fc-blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.mrcs-fc-dash-streak .mrcs-fc-dash-card-icon {
  background: var(--fc-amber-soft); color: #b45309;
}
.mrcs-fc-dash-due .mrcs-fc-dash-card-icon {
  background: var(--fc-green-soft); color: var(--fc-green);
}

.mrcs-fc-dash-card-num {
  font-family: 'Poppins', sans-serif;
  font-size: 32px; font-weight: 800;
  color: var(--fc-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.mrcs-fc-dash-card-label {
  font-size: 13px; font-weight: 600;
  color: var(--fc-body);
  margin-top: 2px;
}
.mrcs-fc-dash-card-sub {
  font-size: 12px; color: var(--fc-muted); font-weight: 500;
  margin-top: 4px;
}
.mrcs-fc-dash-card-action {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--fc-blue); text-decoration: none;
}
.mrcs-fc-dash-card-action:hover { color: var(--fc-dark); }

.mrcs-fc-dash-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.mrcs-fc-dash-card-head h3 {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--fc-text);
}
.mrcs-fc-dash-card-sub-inline {
  font-size: 11px; color: var(--fc-muted); font-weight: 600;
}

/* Mastery ring */
.mrcs-fc-dash-mastery {
  align-items: center;
  text-align: center;
  justify-content: center;
}
.mrcs-fc-dash-mastery-ring {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: conic-gradient(var(--fc-blue) 0 var(--mastery-deg, 0deg), var(--fc-soft) var(--mastery-deg, 0deg) 360deg);
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0 10px;
  /* Hide the conic-gradient hard edge that pokes out at the start angle. */
  position: relative;
  transition: background 0.6s var(--fc-ease);
}
.mrcs-fc-dash-mastery-ring::after {
  /* Soft inner shadow ring to mask the conic-gradient seam. */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
  pointer-events: none;
}
.mrcs-fc-dash-mastery-inner {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--fc-white);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.mrcs-fc-dash-mastery-pct {
  font-family: 'Poppins', sans-serif;
  font-size: 22px; font-weight: 800;
  color: var(--fc-text);
}

/* Bar chart */
.mrcs-fc-bar-chart {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 120px;
  align-items: end;
}
.mrcs-fc-bar-col {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  height: 100%;
}
.mrcs-fc-bar-track {
  flex: 1;
  width: 100%;
  display: flex; align-items: flex-end;
  background: var(--fc-soft);
  border-radius: 6px;
  overflow: hidden;
}
.mrcs-fc-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--fc-blue-2), var(--fc-blue));
  border-radius: 6px 6px 0 0;
  min-height: 2px;
  position: relative;
  transition: height 0.7s var(--fc-ease);
  display: flex; justify-content: center;
}
.mrcs-fc-bar.is-today {
  background: linear-gradient(180deg, var(--fc-blue-3), var(--fc-blue));
  box-shadow: 0 -2px 8px rgba(0, 120, 215, 0.4);
}
.mrcs-fc-bar-count {
  position: absolute;
  top: -16px;
  font-size: 10px; font-weight: 700;
  color: var(--fc-muted);
}
.mrcs-fc-bar.is-today .mrcs-fc-bar-count { color: var(--fc-blue); }
.mrcs-fc-bar-label {
  font-size: 10px; font-weight: 600;
  color: var(--fc-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Topic lists */
.mrcs-fc-topic-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.mrcs-fc-topic-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-radius: var(--fc-radius-sm);
  text-decoration: none;
  background: var(--fc-soft);
  transition: background 0.2s, transform 0.2s;
}
.mrcs-fc-topic-link:hover {
  background: var(--fc-light);
  transform: translateX(2px);
}
.mrcs-fc-topic-name {
  font-size: 13px; font-weight: 600;
  color: var(--fc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-right: 8px;
}
.mrcs-fc-topic-acc {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 800;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.mrcs-fc-acc-good { color: var(--fc-green); }
.mrcs-fc-acc-poor { color: var(--fc-red); }

.mrcs-fc-topic-list .mrcs-fc-muted {
  padding: 12px 0; font-size: 12px;
  text-align: center;
}

/* Empty-state for Strongest topics / Needs work cards */
.mrcs-fc-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 12px 16px 8px;
  gap: 4px;
  list-style: none;
}
.mrcs-fc-empty-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.mrcs-fc-empty-icon-blue {
  background: linear-gradient(135deg, var(--fc-light) 0%, #d8ecff 100%);
  color: var(--fc-blue);
}
.mrcs-fc-empty-icon-green {
  background: linear-gradient(135deg, var(--fc-green-soft) 0%, #d3f0e0 100%);
  color: var(--fc-green);
}
.mrcs-fc-empty-title {
  margin: 0;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fc-text);
}
.mrcs-fc-empty-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--fc-muted);
  line-height: 1.45;
  max-width: 240px;
}

/* =========================================================
   TOPICS SECTION — centred, with eyebrow + heading + subtitle
   ========================================================= */
.mrcs-fc-topics-section {
  max-width: 900px;
  margin: 32px auto 0;
  padding: 0 4px;
}

.mrcs-fc-topics-header {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}
.mrcs-fc-topics-header::before,
.mrcs-fc-topics-header::after {
  /* Decorative side rules left and right of the heading */
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fc-border), transparent);
  width: 80px;
  margin: 0 auto 14px;
}
.mrcs-fc-topics-header::after {
  margin: 14px auto 0;
}
.mrcs-fc-topics-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--fc-blue);
  margin-bottom: 6px;
}
.mrcs-fc-topics-title {
  font-family: 'Poppins', 'Inter', sans-serif;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--fc-text);
}
.mrcs-fc-topics-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--fc-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Empty-state refinement: topic cards shouldn't stretch when content is just
   the "no data yet" line. Cap the row height to the mastery card. */
.mrcs-fc-dash-topics-good,
.mrcs-fc-dash-topics-poor {
  min-height: 0;
}
.mrcs-fc-dash-topics-good .mrcs-fc-topic-list:has(.mrcs-fc-muted),
.mrcs-fc-dash-topics-poor .mrcs-fc-topic-list:has(.mrcs-fc-muted),
.mrcs-fc-dash-topics-good .mrcs-fc-topic-list:has(.mrcs-fc-empty-state),
.mrcs-fc-dash-topics-poor .mrcs-fc-topic-list:has(.mrcs-fc-empty-state) {
  min-height: 60px;
  display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   Mobile breakpoints
   ========================================================= */

@media (max-width: 1024px) {
  /* Collapse the 12-col grid to a simpler stack */
  .mrcs-fc-dash-hero        { grid-column: 1 / -1; }
  .mrcs-fc-dash-streak      { grid-column: 1 / span 6; }
  .mrcs-fc-dash-due         { grid-column: 7 / span 6; }
  .mrcs-fc-dash-mastery     { grid-column: 1 / span 6; }
  .mrcs-fc-dash-chart       { grid-column: 7 / span 6; }
  .mrcs-fc-dash-topics-good,
  .mrcs-fc-dash-topics-poor { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .mrcs-fc-app { padding: 16px; border-radius: 14px; }
  .mrcs-fc-header h1 { font-size: 22px; }
  .mrcs-fc-card-content { font-size: 16px; }
  .mrcs-fc-card-face { padding: 24px; }

  /* Topics: shrink everything but keep horizontal layout */
  .mrcs-fc-topics-section { padding: 0; }
  .mrcs-fc-topics-title { font-size: 24px; }
  .mrcs-fc-topics-header::before,
  .mrcs-fc-topics-header::after { width: 56px; margin-bottom: 10px; }
  .mrcs-fc-topics-header::after { margin: 10px auto 0; }

  .mrcs-fc-deck-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .mrcs-fc-deck-card-d0 {
    padding: 14px 16px 14px 18px;
    gap: 12px;
  }
  .mrcs-fc-deck-card-d0 .mrcs-fc-deck-card-title { font-size: 16px; }
  .mrcs-fc-deck-card-title { font-size: 14px; }
  .mrcs-fc-deck-card-meta  { font-size: 11px; }
  /* Hide paper icon AND ring on mobile — saves precious horizontal space */
  .mrcs-fc-deck-icon,
  .mrcs-fc-deck-ring { display: none; }
  /* Keep stripe but make it thinner */
  .mrcs-fc-deck-stripe { width: 3px; }
  /* Compact caret */
  .mrcs-fc-caret, .mrcs-fc-caret-spacer { width: 28px; height: 28px; }
  /* Compact action buttons — reduce padding so both fit on one row */
  .mrcs-fc-deck-card-actions { gap: 6px; }
  .mrcs-fc-deck-card-actions .mrcs-fc-btn {
    padding: 7px 12px;
    font-size: 12px;
  }

  .mrcs-fc-tree-d1, .mrcs-fc-tree-d2 { padding-left: 14px; margin-left: 6px; }
  .mrcs-fc-toolbar { flex-wrap: wrap; }
  .mrcs-fc-toolbar .mrcs-fc-breadcrumb { order: -1; flex: 1 0 100%; text-align: left; }

  /* Dashboard: stack everything */
  .mrcs-fc-dash-grid { grid-template-columns: 1fr 1fr; }
  .mrcs-fc-dash-hero,
  .mrcs-fc-dash-chart,
  .mrcs-fc-dash-topics-good,
  .mrcs-fc-dash-topics-poor { grid-column: 1 / -1; }
  .mrcs-fc-dash-streak  { grid-column: 1 / span 1; }
  .mrcs-fc-dash-due     { grid-column: 2 / span 1; }
  .mrcs-fc-dash-mastery { grid-column: 1 / -1; flex-direction: row; gap: 14px; text-align: left; }
  .mrcs-fc-dash-mastery .mrcs-fc-dash-mastery-ring { margin: 0; }
  .mrcs-fc-dash-bignum { font-size: 44px; }
  .mrcs-fc-dash-locked-inner { flex-direction: column; align-items: flex-start; }
  .mrcs-fc-dash-locked-actions { width: 100%; }
  .mrcs-fc-dash-locked-actions .mrcs-fc-btn { flex: 1; }
}

/* Very narrow phones — stack actions below the title row */
@media (max-width: 480px) {
  .mrcs-fc-ratings { grid-template-columns: repeat(2, 1fr); }
  .mrcs-fc-deck-card { flex-wrap: wrap; }
  .mrcs-fc-deck-card-actions {
    flex: 1 0 100%;
    margin-top: 6px;
  }
  .mrcs-fc-deck-card-actions .mrcs-fc-btn { flex: 1; }
}
@media (max-width: 360px) {
  .mrcs-fc-app { padding: 12px; }
  .mrcs-fc-card-face { padding: 18px; }
  .mrcs-fc-card-content { font-size: 15px; }
  .mrcs-fc-rating-label { font-size: 13px; }
  .mrcs-fc-rating-when  { font-size: 10px; }
}