/* ============================================================
   Flashcards / SRS — scoped styling.
   Light theme  → Direction C "Cove"     (mint + lavender, soft)
   Dark  theme  → Direction A "Nocturne" (purple + cyan, focus)
   Everything is namespaced under .fc-root so the rest of Stride
   is untouched; palette flips with the app's [data-theme].
   ============================================================ */

.fc-root {
  /* Cove (light) */
  --fc-bg:        #f2f8f5;
  --fc-surface:   #ffffff;
  --fc-surface2:  #eaf2ec;
  --fc-ink:       #0e2a24;
  --fc-dim:       #5b7068;
  --fc-mute:      #8da098;
  --fc-rule:      rgba(14,42,36,.10);
  --fc-primary:   #00b894;   /* mint  */
  --fc-primaryD:  #009975;
  --fc-soft:      #d6f2e5;
  --fc-accent:    #7c6dff;   /* lavender */
  --fc-accentS:   #e9e5ff;
  --fc-green:     #00b894;
  --fc-greenS:    #d6f2e5;
  --fc-amber:     #b07a0e;
  --fc-amberS:    #ffefcc;
  --fc-rose:      #ff7e6b;   /* coral */
  --fc-roseS:     #ffe3dc;
  --fc-shadow:    0 1px 0 rgba(14,42,36,.03), 0 10px 30px -18px rgba(14,42,36,.22);
  --fc-radius:    20px;

  color: var(--fc-ink);
  font-family: inherit;
  width: 100%;
}

[data-theme="dark"] .fc-root {
  /* Nocturne (dark) */
  --fc-bg:        #0a0b10;
  --fc-surface:   #13151e;
  --fc-surface2:  #1a1d29;
  --fc-ink:       #eef0f8;
  --fc-dim:       #9298ae;
  --fc-mute:      #5c6379;
  --fc-rule:      rgba(255,255,255,.08);
  --fc-primary:   #7c5cff;   /* purple */
  --fc-primaryD:  #9d85ff;
  --fc-soft:      rgba(124,92,255,.12);
  --fc-accent:    #22d3ee;   /* cyan */
  --fc-accentS:   rgba(34,211,238,.12);
  --fc-green:     #34d399;
  --fc-greenS:    rgba(52,211,153,.12);
  --fc-amber:     #f5c447;
  --fc-amberS:    rgba(245,196,71,.12);
  --fc-rose:      #fb7185;
  --fc-roseS:     rgba(251,113,133,.12);
  --fc-shadow:    0 1px 0 rgba(0,0,0,.25), 0 18px 50px -24px rgba(0,0,0,.7);
}

.fc-root * { box-sizing: border-box; }

/* ── shell ─────────────────────────────────────────────── */
.fc-shell {
  background: var(--fc-bg);
  border-radius: 24px;
  padding: 22px clamp(14px, 3vw, 30px) 30px;
  min-height: 70vh;
  /* A long unbreakable token (URL / long English word in a card) used to push
     the card wider than a phone screen → horizontal page scroll, card glued to
     the right edge with no margin. Clip any residual overflow here. */
  overflow-x: hidden; overflow-x: clip;
}
.fc-root { overflow-wrap: break-word; }
.fc-sentence, .fc-panel .body, .fc-rte { overflow-wrap: anywhere; }

/* ── hero / smart-review banner ────────────────────────── */
.fc-hero-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-bottom: 20px; }
@media (max-width: 760px) { .fc-hero-row { grid-template-columns: 1fr; } }

.fc-hero {
  position: relative; overflow: hidden;
  border-radius: var(--fc-radius);
  padding: 24px 26px;
  background: var(--fc-surface);
  box-shadow: var(--fc-shadow);
}
.fc-hero::after {
  content: ""; position: absolute; right: -40px; top: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: var(--fc-soft); filter: blur(8px); opacity: .8;
}
.fc-hero h2 { position: relative; margin: 12px 0 6px; font-size: clamp(20px, 3vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.fc-hero h2 em { font-style: normal; color: var(--fc-primary); }
.fc-hero p  { position: relative; margin: 0; color: var(--fc-dim); font-size: 14px; max-width: 420px; }
.fc-hero-actions { position: relative; display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.fc-stats { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.fc-stat {
  border-radius: 16px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between;
  background: var(--fc-surface); box-shadow: var(--fc-shadow);
}
.fc-stat .l { font-size: 12px; font-weight: 700; color: var(--fc-dim); }
.fc-stat .v { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.fc-stat .v small { font-size: 13px; font-weight: 500; color: var(--fc-mute); }

/* ── buttons / chips ───────────────────────────────────── */
.fc-btn {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  padding: 11px 18px; border-radius: 13px; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px; transition: transform .08s, filter .15s;
}
.fc-btn:active { transform: translateY(1px); }
.fc-btn--primary { background: var(--fc-ink); color: var(--fc-bg); }
[data-theme="dark"] .fc-btn--primary { background: var(--fc-ink); color: #0a0b10; }
.fc-btn--ghost   { background: var(--fc-surface2); color: var(--fc-ink); }
.fc-btn--mint    { background: var(--fc-primary); color: #fff; }
.fc-btn:hover { filter: brightness(1.04); }
.fc-btn[disabled] { opacity: .5; cursor: default; }

.fc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em;
  background: var(--fc-surface2); color: var(--fc-dim);
}
.fc-chip.mint  { background: var(--fc-greenS);  color: var(--fc-primaryD); }
.fc-chip.lav   { background: var(--fc-accentS);  color: var(--fc-accent); }
.fc-chip.amber { background: var(--fc-amberS);   color: var(--fc-amber); }
.fc-chip.rose  { background: var(--fc-roseS);    color: var(--fc-rose); }

/* ── section heading + filters ─────────────────────────── */
.fc-section-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 14px; }
.fc-section-head:first-child { margin-top: 4px; }
.fc-section-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.fc-level-label { font-size: 13px; font-weight: 700; color: var(--fc-dim); margin: 12px 0 10px; display: flex; align-items: center; gap: 8px; }
.fc-level-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fc-accent); }
#fc-decks-host .fc-grid { margin-bottom: 6px; }

/* ── deck grid ─────────────────────────────────────────── */
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.fc-deck {
  position: relative; overflow: hidden; cursor: pointer;
  border-radius: var(--fc-radius); padding: 20px 20px 18px;
  background: var(--fc-surface); box-shadow: var(--fc-shadow);
  min-height: 184px; display: flex; flex-direction: column;
  border: 1px solid transparent; transition: transform .12s, box-shadow .15s, border-color .15s;
}
.fc-deck:hover { transform: translateY(-3px); border-color: var(--fc-rule); }
.fc-deck-top { display: flex; align-items: center; justify-content: space-between; }
.fc-deck-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--fc-greenS); color: var(--fc-primaryD); font-size: 18px; }
.fc-deck.personal .fc-deck-ico { background: var(--fc-accentS); color: var(--fc-accent); }
.fc-deck h4 { margin: 16px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.fc-deck .desc { margin: 7px 0 0; color: var(--fc-dim); font-size: 13px; line-height: 1.45; }
.fc-deck-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; }
.fc-deck-foot .count { font-size: 12px; color: var(--fc-mute); font-variant-numeric: tabular-nums; }
.fc-deck.locked { cursor: pointer; }
.fc-deck-lockbadge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 9px; font-size: 11px; font-weight: 700; background: var(--fc-amberS); color: var(--fc-amber); }
.fc-deck-open { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--fc-ink); color: var(--fc-bg); font-size: 13px; font-weight: 700; }
[data-theme="dark"] .fc-deck-open { color: #0a0b10; }

/* progress ring */
.fc-ring { --p: 0; width: 42px; height: 42px; border-radius: 50%;
  background: conic-gradient(var(--fc-primary) calc(var(--p) * 1%), var(--fc-surface2) 0);
  display: grid; place-items: center; }
.fc-deck.personal .fc-ring { background: conic-gradient(var(--fc-accent) calc(var(--p) * 1%), var(--fc-surface2) 0); }
.fc-ring span { width: 32px; height: 32px; border-radius: 50%; background: var(--fc-surface); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--fc-dim); }
.fc-lock { width: 34px; height: 34px; border-radius: 11px; background: var(--fc-surface2); display: grid; place-items: center; color: var(--fc-dim); }

/* ── review session ────────────────────────────────────── */
/* Review screens are NOT wrapped in .fc-shell, so they need their own
   horizontal containment: on phones a single wide child (long option text,
   the letters-hint skeleton, a long token in a sentence) could push the
   layout past the viewport → horizontal page scroll → the card sits flush
   against the right screen edge with no margin. Guard at every level and
   at every viewport width. */
.module-flashcard-active .app-content { overflow-x: hidden; }
/* Clip INSIDE the page's side padding: .app-content's own overflow-x clips at
   its padding edge, so overflowing content could still paint OVER the 20px
   right margin. .fc-root sits inside the padding, so clipping here keeps the
   margin visible no matter what overflows. `clip` (not `hidden`) so no scroll
   container is created and the sticky grade dock keeps working. */
.fc-root { overflow-x: clip; }
#module-flashcard, .fc-root, .fc-session,
.fc-card, .fc-panel, .fc-hint-box, .fc-grade-dock, .fc-options, .fc-opt { min-width: 0; max-width: 100%; }
.fc-opt span:last-child, .fc-hint-line, .fc-prompt, .fc-chip { overflow-wrap: anywhere; }
.fc-hint-skel { overflow-wrap: anywhere; word-break: break-all; white-space: normal; }
/* width:100% is load-bearing: .fc-session is a flex ITEM of the .fc-root
   column on mobile, and its `margin:0 auto` disables cross-axis stretch —
   with width:auto the item falls back to shrink-to-fit, which FLOORS at the
   content's min-content width. On Android-Firefox font metrics that floor
   exceeded the viewport, laying the whole session out wider than the screen.
   An explicit width bypasses the shrink-to-fit path on every engine. */
.fc-session { width: 100%; max-width: 860px; margin: 0 auto; }
.fc-sess-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.fc-sess-top .meta { font-size: 12px; color: var(--fc-dim); font-weight: 600; }
.fc-sess-top .title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.fc-iconbtn { width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer; background: var(--fc-surface); color: var(--fc-dim); box-shadow: var(--fc-shadow); font-size: 18px; line-height: 1; }

.fc-progressbar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: var(--fc-surface); box-shadow: var(--fc-shadow); margin-bottom: 16px; }
.fc-progressbar .pos { font-size: 12px; font-weight: 700; color: var(--fc-dim); white-space: nowrap; }
.fc-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--fc-surface2); overflow: hidden; }
.fc-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--fc-primary), var(--fc-accent)); transition: width .3s; }

.fc-card {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: clamp(22px, 4vw, 38px);
  background: var(--fc-surface); box-shadow: var(--fc-shadow);
}
.fc-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--fc-accentS); opacity: .55; filter: blur(10px); pointer-events: none; }
.fc-card-tags { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.fc-prompt { position: relative; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--fc-dim); }
.fc-sentence { position: relative; margin-top: 12px; font-size: clamp(20px, 3.2vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }

.fc-blank {
  display: inline-block; min-width: 130px; max-width: 100%;
  font: inherit; font-size: inherit; font-weight: 700; text-align: center;
  color: var(--fc-ink); background: var(--fc-surface2);
  border: none; border-bottom: 3px dashed var(--fc-mute); border-radius: 8px 8px 0 0;
  padding: 0 10px 2px; outline: none;
}
.fc-blank:focus { border-bottom-color: var(--fc-primary); background: var(--fc-greenS); }
.fc-blank.correct { color: var(--fc-primaryD); border-bottom-color: var(--fc-primary); background: var(--fc-greenS); }
.fc-blank.wrong   { color: var(--fc-rose);     border-bottom-color: var(--fc-rose);    background: var(--fc-roseS); }

/* highlighted answer in reveal */
.fc-hl { background: var(--fc-greenS); color: var(--fc-primaryD); padding: 1px 8px; border-radius: 8px; font-weight: 800; }
.fc-hl.wrong { background: var(--fc-roseS); color: var(--fc-rose); text-decoration: line-through; }
.fc-root mark { background: var(--fc-amberS); color: inherit; border-radius: 4px; padding: 0 3px; }

/* reveal block */
.fc-reveal { position: relative; margin-top: 24px; display: grid; gap: 12px; }
.fc-verdict { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.fc-verdict.ok  { background: var(--fc-greenS); color: var(--fc-primaryD); }
.fc-verdict.no  { background: var(--fc-roseS);  color: var(--fc-rose); }
.fc-panel { background: var(--fc-surface2); border-radius: 16px; padding: 16px 18px; }
.fc-panel .k { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fc-mute); display: flex; align-items: center; gap: 6px; }
.fc-panel .body { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--fc-ink); }
.fc-panel .body .ex { color: var(--fc-dim); font-style: italic; }

/* grade buttons */
.fc-grades-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fc-mute); margin-top: 4px; }
.fc-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
@media (max-width: 520px) { .fc-grades { grid-template-columns: repeat(2, 1fr); } }
.fc-grade {
  appearance: none; border: 1px solid transparent; cursor: pointer; font: inherit;
  padding: 12px 10px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform .08s, filter .12s;
}
.fc-grade:hover { filter: brightness(1.05); transform: translateY(-1px); }
.fc-grade .g { font-size: 14px; font-weight: 800; }
.fc-grade .i { font-size: 11px; font-weight: 600; opacity: .85; }
.fc-grade.vhard { background: var(--fc-roseS);  color: var(--fc-rose); }
.fc-grade.hard  { background: var(--fc-amberS);  color: var(--fc-amber); }
.fc-grade.easy  { background: var(--fc-greenS);  color: var(--fc-primaryD); }
.fc-grade.veasy { background: var(--fc-accentS); color: var(--fc-accent); }

/* answer-input action row */
.fc-actions { position: relative; margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fc-actions .left { display: flex; gap: 10px; }

/* preview banner */
.fc-preview-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--fc-amberS); color: var(--fc-amber); font-size: 13px; font-weight: 700; margin-bottom: 14px; }

/* session summary */
.fc-summary { width: 100%; max-width: 520px; margin: 30px auto; text-align: center; background: var(--fc-surface); border-radius: 24px; padding: 40px 28px; box-shadow: var(--fc-shadow); }
.fc-summary .big { font-size: 44px; font-weight: 800; letter-spacing: -.03em; }
.fc-summary .sub { color: var(--fc-dim); margin-top: 6px; }
.fc-summary-stats { display: flex; justify-content: center; gap: 28px; margin: 22px 0; }
.fc-summary-stats .s .v { font-size: 26px; font-weight: 800; }
.fc-summary-stats .s .l { font-size: 12px; color: var(--fc-mute); font-weight: 600; }

/* ── Phase 2: MCQ / identify / timer ───────────────────── */

/* static blank shown inside an MCQ stem */
.fc-blank-static { display: inline-block; min-width: 96px; border-bottom: 3px solid var(--fc-mute); vertical-align: middle; margin: 0 4px; }

/* MCQ options */
.fc-options { position: relative; margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .fc-options { grid-template-columns: 1fr; } }
.fc-opt {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  display: flex; align-items: center; gap: 14px; padding: 15px 16px;
  border-radius: 16px; border: 2px solid transparent; background: var(--fc-surface2); color: var(--fc-ink);
  font-size: 15px; font-weight: 500; transition: transform .08s, border-color .12s, filter .12s;
}
.fc-opt:hover:not([disabled]) { filter: brightness(1.03); transform: translateY(-1px); }
.fc-opt[disabled] { cursor: default; }
.fc-opt-k { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fc-surface); color: var(--fc-dim); font-weight: 800; font-size: 14px; }
.fc-opt.sel { border-color: var(--fc-accent); }
.fc-opt.right { background: var(--fc-greenS); border-color: var(--fc-primary); color: var(--fc-primaryD); }
.fc-opt.right .fc-opt-k { background: var(--fc-primary); color: #fff; }
.fc-opt.chosen-wrong { background: var(--fc-roseS); border-color: var(--fc-rose); color: var(--fc-rose); }
.fc-opt.chosen-wrong .fc-opt-k { background: var(--fc-rose); color: #fff; }

/* identify input row */
.fc-identify { position: relative; margin-top: 22px; }
.fc-identify .fc-blank { display: block; width: 100%; min-width: 0; text-align: left; border-radius: 12px; border: 2px solid var(--fc-rule); border-bottom-width: 2px; background: var(--fc-surface2); padding: 12px 14px; font-weight: 600; }
.fc-identify .fc-blank:focus { border-color: var(--fc-primary); }

/* circular countdown timer */
.fc-timer {
  --p: 100; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(var(--fc-primary) calc(var(--p) * 1%), var(--fc-surface2) 0);
  display: grid; place-items: center; transition: background .9s linear;
}
.fc-timer > span { width: 36px; height: 36px; border-radius: 50%; background: var(--fc-surface); display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--fc-ink); font-variant-numeric: tabular-nums; }
.fc-timer.warn { background: conic-gradient(var(--fc-rose) calc(var(--p) * 1%), var(--fc-roseS) 0); animation: fc-pulse .8s infinite; }
.fc-timer.warn > span { color: var(--fc-rose); animation: fc-flash .8s infinite; }
@keyframes fc-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,126,107,.35); } 50% { box-shadow: 0 0 0 7px rgba(255,126,107,0); } }
@keyframes fc-flash { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
[data-theme="dark"] .fc-timer.warn { animation-name: fc-pulse-d; }
@keyframes fc-pulse-d { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); } 50% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } }

/* time-expired banner */
.fc-timeup-banner { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: var(--fc-roseS); color: var(--fc-rose); font-size: 13px; font-weight: 700; margin-top: 4px; }

/* auto-graded multiple-choice note (recognition step — no self-rating) */
.fc-auto-note { padding: 12px 16px; border-radius: 14px; font-size: 13px; font-weight: 700; margin-top: 4px; margin-bottom: 10px; background: var(--fc-greenS); color: var(--fc-primaryD); }
.fc-auto-note b { font-weight: 800; }
.fc-grade-dock .fc-auto-note { margin-bottom: 10px; }

/* ── Phase 4: personal banks — editor / manage / modal ───── */

/* "New deck" tile */
.fc-deck-new { display: grid; place-items: center; border: 2px dashed var(--fc-rule); background: transparent; box-shadow: none; color: var(--fc-dim); }
.fc-deck-new:hover { border-color: var(--fc-primary); color: var(--fc-primary); }
.fc-new-inner { text-align: center; }
.fc-new-plus { font-size: 32px; line-height: 1; margin-bottom: 6px; }
.fc-new-sub { font-size: 12px; color: var(--fc-mute); margin-top: 2px; }

/* manage button on personal deck cards */
.fc-manage-btn { appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--fc-rule); background: var(--fc-surface2); color: var(--fc-dim); }
.fc-manage-btn:hover { color: var(--fc-primary); border-color: var(--fc-primary); }

/* manage card list */
.fc-manage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--fc-surface); box-shadow: var(--fc-shadow); }
.fc-manage-prev { font-size: 14px; color: var(--fc-ink); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.fc-iconbtn.sm { width: 32px; height: 32px; font-size: 14px; }

/* editor */
.fc-editor { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; background: var(--fc-surface); border-radius: 22px; padding: 22px clamp(16px, 3vw, 26px); box-shadow: var(--fc-shadow); }
.fc-field { display: flex; flex-direction: column; gap: 7px; }
.fc-field > label { font-size: 12px; font-weight: 700; color: var(--fc-dim); }
.fc-field code { background: var(--fc-surface2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.fc-input { width: 100%; font: inherit; font-size: 15px; color: var(--fc-ink); background: var(--fc-surface2); border: 1.5px solid var(--fc-rule); border-radius: 12px; padding: 11px 14px; outline: none; }
.fc-input:focus { border-color: var(--fc-primary); }

.fc-type-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--fc-surface2); border-radius: 12px; }
.fc-type-toggle button { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 9px; background: transparent; color: var(--fc-dim); }
.fc-type-toggle button.on { background: var(--fc-surface); color: var(--fc-ink); box-shadow: var(--fc-shadow); }

/* rich-text editor */
.fc-rte-toolbar { display: flex; gap: 4px; flex-wrap: wrap; }
.fc-rte-toolbar button { appearance: none; cursor: pointer; width: 32px; height: 30px; border: 1.5px solid var(--fc-rule); background: var(--fc-surface2); color: var(--fc-ink); border-radius: 8px; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.fc-rte-toolbar button:hover { border-color: var(--fc-primary); }
.fc-rte { min-height: 90px; max-height: 240px; overflow-y: auto; font: inherit; font-size: 15px; line-height: 1.6; color: var(--fc-ink); background: var(--fc-surface2); border: 1.5px solid var(--fc-rule); border-radius: 12px; padding: 12px 14px; outline: none; }
.fc-rte:focus { border-color: var(--fc-primary); }
.fc-rte mark { background: #fff3b0; color: #0e2a24; border-radius: 3px; padding: 0 2px; }

/* image preview / card image */
.fc-img-prev { display: flex; align-items: flex-start; gap: 12px; }
.fc-img-prev img { max-width: 200px; max-height: 140px; border-radius: 12px; border: 1px solid var(--fc-rule); }
.fc-card-img { display: block; max-width: 100%; max-height: 280px; border-radius: 14px; margin-top: 14px; }

/* modal overlay */
.fc-overlay { position: fixed; inset: 0; background: rgba(8,12,16,.55); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 9000; padding: 20px; }
.fc-modal { width: 100%; max-width: 440px; background: var(--fc-surface); color: var(--fc-ink); border-radius: 20px; padding: 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }

/* misc */
.fc-empty { text-align: center; padding: 60px 20px; color: var(--fc-dim); }
.fc-empty .ico { font-size: 38px; margin-bottom: 12px; }
.fc-loading { text-align: center; padding: 60px; color: var(--fc-mute); }

/* lessons — collapsible (level → lesson → topics) */
.fc-lesson { background: var(--fc-surface); border: 1px solid var(--fc-rule); border-radius: 14px; margin: 0 0 10px; overflow: hidden; box-shadow: var(--fc-shadow); }
.fc-lesson-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: none; border: 0; cursor: pointer; color: var(--fc-ink); text-align: left; font: inherit; }
.fc-lesson-head:hover { background: var(--fc-surface2); }
.fc-lesson-chevron { display: inline-block; transition: transform .18s ease; color: var(--fc-mute); font-size: 12px; }
.fc-lesson-head.open .fc-lesson-chevron { transform: rotate(90deg); }
.fc-lesson-title { font-weight: 800; font-size: 15px; }
.fc-lesson-sub { margin-left: auto; font-size: 12px; color: var(--fc-dim); font-weight: 600; }
.fc-lesson-body { padding: 4px 16px 16px; border-top: 1px solid var(--fc-rule); }
.fc-lesson-body[hidden] { display: none; }
.fc-lesson-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.fc-lesson-upto { font-size: 13px; color: var(--fc-dim); display: inline-flex; align-items: center; gap: 8px; }
.fc-upto-sel { font: inherit; font-size: 13px; padding: 6px 8px; border: 1.5px solid var(--fc-rule); border-radius: 9px; background: var(--fc-surface); color: var(--fc-ink); max-width: 220px; }

/* on-demand clue / hint (before answering) */
.fc-hint-box { position: relative; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--fc-amberS); border: 1px solid var(--fc-rule); }
.fc-hint-box[hidden] { display: none; }
.fc-hint-line { font-size: 14px; color: var(--fc-ink); line-height: 1.5; }
.fc-hint-line + .fc-hint-line { margin-top: 6px; }
.fc-hint-skel { font-family: ui-monospace, "Cascadia Code", monospace; letter-spacing: 3px; font-size: 17px; font-weight: 800; color: var(--fc-amber); }
.fc-hint-tag { font-family: inherit; letter-spacing: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--fc-mute); background: var(--fc-rule); padding: 2px 6px; border-radius: 6px; margin-right: 6px; vertical-align: middle; }

/* the user's own (wrong) typed answer, shown in the verdict */
.fc-your-ans { text-decoration: line-through; text-decoration-thickness: 2px; font-weight: 800; }

/* grade buttons docked to the bottom of the viewport (no scrolling to reach them) —
   styled as a rounded floating panel that matches the card */
.fc-grade-dock { position: sticky; bottom: 0; z-index: 5; margin-top: 18px; padding: 16px clamp(16px, 3vw, 22px) 18px;
  background: var(--fc-surface); border: 1px solid var(--fc-rule); border-bottom: 0;
  border-radius: 20px 20px 0 0; box-shadow: 0 -16px 36px -24px rgba(0,0,0,.5); }
.fc-grade-dock .fc-grades { margin-top: 10px; }
.fc-grade-dock .fc-grades-label { margin-top: 0; }
.fc-grade-dock .fc-timeup-banner { margin-bottom: 10px; }

/* Mobile: pin the grade panel flush to the bottom edge (right on top of the site
   footer) and slim it down so the question + answer box keep more of the screen.
   The app shell scrolls inside .app-content, so on a short card the sticky dock
   has nothing to stick to and used to rest mid-screen; stretching the session to
   the full scrollport and pushing the dock down with margin-top:auto pins it. */
@media (max-width: 520px) {
  /* min-width:0 on every flex item in this chain: a flex item defaults to
     min-width:auto and refuses to shrink below its content, which let a wide
     child (a long word, the progress row) push the column past the viewport and
     produce a horizontal scrollbar. */
  .module-flashcard-active .app-content { padding-bottom: 0; overflow-x: hidden; }
  .module-flashcard-active .app-content-inner { min-height: 100%; display: flex; flex-direction: column; min-width: 0; }
  .module-flashcard-active #module-flashcard.active { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
  .module-flashcard-active #module-flashcard .fc-root { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .module-flashcard-active #module-flashcard .fc-session { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .fc-session .fc-grade-dock { margin-top: auto; }

  .fc-grade-dock { padding: 10px clamp(12px, 3vw, 16px) 12px; }
  .fc-grade-dock .fc-grades { margin-top: 7px; gap: 6px; }
  .fc-grade-dock .fc-grades-label { font-size: 10px; }
  .fc-grade { padding: 8px 8px; gap: 1px; }
  .fc-grade .g { font-size: 13px; }
  .fc-grade .i { font-size: 10px; }
}

/* ── "ideas" cards (IELTS Speaking Part 2 / Part 3) ───────── */
.fc-card--ideas { text-align: left; }
.fc-ideas-parent {
  font-size: 12.5px; color: var(--fc-dim); margin-bottom: 12px;
  padding: 8px 12px; border-radius: 12px; background: var(--fc-surface2);
  border-left: 3px solid var(--fc-accent); line-height: 1.5;
}
.fc-ideas-parent .lbl {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--fc-accent); margin-right: 6px;
}
.fc-ideas-q { font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; color: var(--fc-ink); margin: 2px 0 6px; }
.fc-ideas-task { font-size: 12.5px; color: var(--fc-mute); margin-bottom: 12px; }
.fc-ideas-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 112px;
  padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--fc-rule);
  background: var(--fc-bg); color: var(--fc-ink); font: inherit; font-size: 15px; line-height: 1.6;
  transition: border-color .15s;
}
.fc-ideas-input:focus { outline: none; border-color: var(--fc-primary); }
.fc-ideas-input:disabled { opacity: .75; }
.fc-ideas-prevhint { font-size: 11.5px; color: var(--fc-mute); margin-top: 6px; }

.fc-ideas-panel {
  border-radius: 14px; padding: 12px 14px 6px; margin-top: 12px;
  background: var(--fc-surface2); border: 1px solid var(--fc-rule);
}
.fc-ideas-panel.en { background: var(--fc-accentS); border-color: transparent; }
.fc-ideas-panel .k {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fc-dim); margin-bottom: 4px;
}
.fc-ideas-panel.en .k { color: var(--fc-accent); }
.fc-ideas-list { margin: 4px 0 8px; padding-left: 20px; }
.fc-ideas-list li { margin: 4px 0; line-height: 1.6; font-size: 14.5px; color: var(--fc-ink); }
.fc-ideas-list.fc-fa {
  font-family: var(--font-fa, 'Vazirmatn', 'Vazir', sans-serif);
  padding-left: 0; padding-right: 20px; text-align: right;
}
.fc-ideas-list.fc-fa li { font-size: 15.5px; line-height: 1.9; }
.fc-ideas-src { font-size: 11px; color: var(--fc-mute); margin-top: 10px; font-style: italic; }
.fc-grade-dock #fc-ideas-en { width: 100%; margin-bottom: 10px; }