.flashcards-page {
  --fc-accent:#88c8ff;
  --fc-blue:#155bb4;
  --fc-hero:#102747;
  display:grid;
  gap:14px;
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
}
:root[data-theme="light"] .flashcards-page {
  --fc-accent:#195492;
  --fc-hero:#e9f2ff;
}
.fc-panel,.fc-hero {
  min-width:0;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  background:var(--s1);
}
.fc-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(115deg,var(--fc-hero),var(--s1));
}
.fc-hero-copy {
  display:flex;
  align-items:center;
  gap:14px;
  min-height:80px;
  padding-right:100px;
  margin-bottom:12px;
}
.fc-title-icon,.fc-subjects .subject-symbol,.fc-chapter .subject-symbol {
  display:grid;
  flex:none;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:10px;
  color:var(--fc-accent);
  background:color-mix(in srgb,var(--fc-accent) 13%,var(--s1));
}
.fc-title-icon .ico,.fc-subjects .subject-symbol svg,.fc-chapter .subject-symbol svg { width:22px; height:22px; }
:root .fc-hero h2 { margin:0; font-size:clamp(25px,2.3vw,34px); line-height:1.12; }
.fc-hero p { margin:6px 0 0; color:var(--mute); }
.fc-art {
  position:absolute;
  top:12px;
  right:24px;
  z-index:-1;
  width:83px;
  height:72px;
  transform:rotate(-12deg);
}
.fc-art span {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--fc-accent) 60%,var(--line));
  border-radius:12px;
  color:var(--fc-accent);
  background:linear-gradient(140deg,var(--s2),var(--fc-hero));
}
.fc-art span:first-child { transform:translate(10px,14px); opacity:.45; }
.fc-art span:nth-child(2) { transform:translate(5px,7px); opacity:.8; }
.fc-art .ico { width:30px; height:30px; }
.fc-metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:9px 0;
  background:var(--s1);
  border:1px solid var(--line);
  border-radius:10px;
}
.fc-metrics > div {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:4px 8px;
  border-inline-start:1px solid var(--line);
}
.fc-metrics > div:first-child { border:0; }
.fc-metrics .ico,.fc-tabs .ico,.fc-search .ico,.fc-revision-head .ico { flex:none; width:18px; height:18px; color:var(--fc-accent); }
.fc-metrics b { display:block; font-size:17px; line-height:1.25; font-variant-numeric:tabular-nums; }
.fc-metrics small,.fc-subjects small,.fc-chapter small,.fc-study-top small { display:block; font-size:12px; color:var(--mute); }
.fc-library { display:grid; gap:14px; }
.fc-tabs,.fc-review-actions { display:flex; flex-wrap:wrap; gap:7px; }
:root .flashcards-page button {
  font-size:13px;
  min-height:42px;
  padding:8px 11px;
}
:root .fc-tabs button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--s2);
  color:var(--ink);
}
:root .fc-tabs button[aria-pressed="true"],:root .flashcards-page button.pri {
  background:var(--fc-blue);
  border-color:var(--fc-blue);
  color:#fff;
  box-shadow:none;
}
.fc-tabs button[aria-pressed="true"] .ico { color:inherit; }
.fc-filters { display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2fr); gap:10px; }
.fc-filters label { display:grid; min-width:0; gap:5px; font-size:12px; font-weight:600; }
:root .fc-filters select,:root .fc-filters input {
  width:100%;
  min-height:42px;
  margin:0;
  border-radius:8px;
  color:var(--ink);
  background:var(--s2);
  border:1px solid var(--line);
  font:inherit;
  font-size:13px;
}
.fc-search { position:relative; }
.fc-search .ico { position:absolute; left:10px; top:12px; pointer-events:none; }
:root .fc-search input { padding-inline-start:36px; }
.fc-subjects { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
:root .fc-subjects button {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  justify-items:start;
  text-align:left;
  gap:3px 4px;
  min-height:104px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,color-mix(in srgb,var(--fc-tone,var(--fc-accent)) 11%,var(--s1)),var(--s1));
  color:var(--ink);
}
.fc-subjects [data-tone="chemistry"] { --fc-tone:#9d78e2; }
.fc-subjects [data-tone="biology"] { --fc-tone:#329c7d; }
.fc-subjects [data-tone="mathematics"] { --fc-tone:#5597e9; }
.fc-subjects .subject-symbol { grid-column:1/-1; width:32px; height:32px; margin-bottom:3px; }
.fc-subjects strong { grid-column:1; font-size:14px; line-height:1.25; }
.fc-subjects small { grid-column:1; }
.fc-subjects .fc-arrow { grid-column:2; grid-row:2/4; color:var(--fc-accent); }
:root .fc-subjects button[aria-pressed="true"] { border-color:var(--fc-accent); }
.fc-revision-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
:root .fc-revision-head h3 { margin:0; font-size:17px; }
.fc-chapter {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(72px,120px) auto;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.fc-chapter b { display:block; line-height:1.3; }
.fc-progress { display:flex; align-items:center; gap:7px; color:var(--mute); font-size:12px; }
.fc-progress progress { width:100%; height:7px; accent-color:var(--fc-blue); }
.fc-empty { margin:0; padding:12px; background:var(--s2); border-radius:9px; color:var(--mute); }
#mxStudyCard { padding:13px; border:1px solid var(--line); border-radius:10px; background:var(--s2); }
.fc-study-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
:root #mxStudyCard h4 { margin:10px 0; color:var(--ink); font-size:17px; white-space:pre-wrap; }
#mxStudyCard details { margin:10px 0; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--s1); }
#mxStudyCard details p { margin:8px 0 0; white-space:pre-wrap; }
#mxStudyCard summary { cursor:pointer; }
.fc-review-actions { margin-top:10px; }
#fcStatus { margin:8px 0 0; color:var(--mute); }
#fcStatus:empty { margin:0; }
.flashcards-page :focus-visible { outline:2px solid var(--fc-accent); outline-offset:2px; }
@media(max-width:620px) {
  .fc-subjects,.fc-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fc-metrics { row-gap:6px; }
  .fc-metrics > div { justify-content:flex-start; padding-inline:10px; }
  .fc-metrics > div:nth-child(odd) { border-inline-start:0; }
}
@media(max-width:460px) {
  .fc-panel,.fc-hero { padding:12px; }
  .fc-hero-copy { padding-right:48px; min-height:0; gap:8px; }
  .fc-art { right:13px; width:37px; height:43px; }
  .fc-art .ico { width:16px; height:16px; }
  .fc-filters { grid-template-columns:minmax(0,1fr); }
  .fc-chapter { grid-template-columns:auto minmax(0,1fr) auto; gap:7px; }
  .fc-chapter .subject-symbol { width:30px; height:30px; }
  .fc-progress { grid-column:2; grid-row:2; }
  .fc-chapter button { grid-column:3; grid-row:1/3; }
  :root .fc-chapter button { padding-inline:7px; }
}
.fc-revision-head { flex-wrap:wrap; }
#fcNotebook { margin-inline-start:auto; }