body.blood-mode {
    --blood-line: rgba(170, 190, 211, 0.22);
    --blood-line-strong: rgba(181, 203, 225, 0.38);
    --blood-muted: #aeb9c5;
    color: #edf3f8;
    background: linear-gradient(150deg, #252b32 0%, #2d333a 58%, #252c31 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.blood-mode .exam-shell {
    width: min(1500px, calc(100% - 32px));
    max-width: none;
    margin: 0 auto;
    padding: 18px 0 42px;
}
body.blood-mode .exam-topbar { flex-direction: row; align-items: center; min-height: 46px; margin-bottom: 12px; padding: 0; }
body.blood-mode .blood-title { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: 0; }
body.blood-mode .exam-topbar-right { min-width: 0; }
body.blood-mode .exam-daily-counter { grid-template-columns: minmax(0, 1fr) 58px; width: 230px; min-width: 0; gap: 12px; padding: 8px 12px; border-radius: 7px; }
body.blood-mode .exam-daily-main,
body.blood-mode .exam-daily-side { min-height: 0; padding: 0; gap: 4px; border: 0; border-radius: 0; background: transparent; }
body.blood-mode .exam-daily-side { border-left: 1px solid var(--blood-line); padding-left: 12px; }
body.blood-mode .exam-daily-bar { height: 3px; border: 0; }
body.blood-mode .exam-daily-value { font-size: 20px; line-height: 1.2; }
body.blood-mode .exam-daily-label,
body.blood-mode .exam-daily-side > span { font-size: 10px; letter-spacing: 0; }

body.blood-mode .exam-controls {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 62px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--blood-line);
    border-radius: 8px;
    background: rgba(39, 46, 53, 0.9);
    box-shadow: 0 14px 34px rgba(7, 11, 16, 0.12);
}
body.blood-mode .exam-controls > .segmented {
    height: 46px;
    padding: 0;
    border: 1px solid var(--blood-line);
    border-radius: 7px;
    background: transparent;
    overflow: hidden;
}
body.blood-mode .exam-controls > .exam-mode-segment { display: grid; grid-template-columns: repeat(5, 62px); gap: 0; }
body.blood-mode .exam-controls > .segmented > button {
    width: 62px;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0;
    border-radius: 0;
    flex: 0 0 62px;
}
body.blood-mode .exam-controls svg { width: 23px; height: 23px; }
body.blood-mode .exam-controls > .progress-graph-toggle { margin-left: auto; }
body.blood-mode .exam-controls > .progress-graph-toggle,
body.blood-mode .exam-card-search-toggle {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    flex: 0 0 46px;
    border-radius: 7px;
}
body.blood-mode .exam-card-search { height: 46px; }
body.blood-mode .exam-card-search-panel,
body.blood-mode .exam-card-search.is-open .exam-card-search-panel {
    top: calc(100% + 12px);
    right: 0;
    left: auto;
    width: min(420px, calc(100vw - 52px));
    transform: translateY(-4px);
}
body.blood-mode .exam-card-search.is-open .exam-card-search-panel { transform: translateY(0); }
body.blood-mode .exam-card-search:not(.is-open) .exam-card-search-panel { visibility: hidden; }
body.blood-mode #exam-card-search-input { height: 46px; }

body.blood-mode .new-filter-panel {
    min-height: 124px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid var(--blood-line);
    background: rgba(39, 46, 53, 0.65);
}
body.blood-mode .topic-controls,
body.blood-mode .new-subtopic-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    height: auto;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
}
body.blood-mode .topic-controls button,
body.blood-mode .new-subtopic-controls button {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: normal;
}
body.blood-mode .new-subtopic-controls button { min-height: 38px; font-size: 13px; }
.blood-quiz-progress { display: flex; align-items: center; gap: 24px; min-height: 42px; }
body.blood-mode .blood-quiz-progress .progress-track { flex: 1; height: 3px; margin: 0; }
.blood-quiz-progress .progress-copy { flex: 0 0 auto; width: auto; margin: 0; color: var(--blood-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

body.blood-mode .exam-card { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
body.blood-mode .question-meta-spacer { min-height: 0; height: 0; padding: 0; margin: 0; }
/* The frame owns the visible card, including its reserved, non-shifting tag row. */
body.blood-mode .card-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    border: 1px solid var(--blood-line-strong);
    border-radius: 8px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.025), transparent 55%), rgba(49, 57, 66, 0.96);
    box-shadow: 0 24px 58px rgba(8, 12, 17, 0.22);
    transition: border-color 180ms ease, background 220ms ease, box-shadow 180ms ease;
}
body.blood-mode .card-frame:has(.is-answer-side) {
    background: linear-gradient(155deg, rgba(168, 217, 189, 0.025), transparent 55%), rgba(46, 55, 63, 0.98);
}
body.blood-mode .card-frame:hover,
body.blood-mode .card-frame:focus-within { border-color: rgba(181, 203, 225, 0.55); }
body.blood-mode .card-hover-meta {
    position: relative;
    inset: auto;
    align-self: stretch;
    margin: 16px 122px 0 18px;
    padding: 0;
    max-width: none;
    min-height: 30px;
    gap: 6px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
}
body.blood-mode .card-hover-meta > span,
body.blood-mode .card-hover-meta .subtopic-tag {
    max-width: 100%;
    height: auto;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
body.blood-mode .card-hover-tools {
    top: 14px;
    right: 16px;
    gap: 7px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
body.blood-mode .card-hover-tools > button { width: 42px; height: 42px; border-radius: 7px; }
body.blood-mode .card-hover-tools > button svg { width: 20px; height: 20px; }
body.blood-mode .card-surface {
    flex: 1;
    min-height: 410px;
    padding: 30px 72px 58px;
    border: 0;
    border-radius: 0 0 8px 8px;
    background: transparent;
    box-shadow: none;
}
body.blood-mode .card-surface:hover,
body.blood-mode .card-surface:focus-within { background: transparent; box-shadow: none; transform: none; }
body.blood-mode .card-surface:focus-visible { outline: 2px solid #9bc2ed; outline-offset: -4px; }
body.blood-mode .side-label { display: none; }
body.blood-mode .card-content { width: 100%; max-width: 1040px; min-width: 0; margin: auto; }
body.blood-mode .anki-imported-html { padding: 0; overflow: visible; font-size: 27px; font-weight: 470; line-height: 1.55; letter-spacing: 0; }
body.blood-mode .card-content.is-answer-side .anki-imported-html { font-size: 21px; font-weight: 400; line-height: 1.58; }
body.blood-mode .card-content.is-answer-side .anki-imported-html .biochem-term { font-weight: 450; }
.blood-mode .anki-imported-html ul { padding-left: 1.3em; }
.blood-mode .anki-imported-html li + li { margin-top: 0.65em; }
.blood-mode .blood-source-note { margin-top: 1.4rem; border-left: 2px solid #d8bd86; padding: 8px 16px; font-size: 15px; color: #bbc5ce; }
.blood-source-note b { color: #d8bd86; font-weight: 600; }
.blood-source-note p { margin: 4px 0 0; }
.blood-mode .blood-pathway-figure { margin: 24px 0 0; }
.blood-mode .blood-pathway-figure img { width: min(100%, 981px); height: auto; max-height: none; object-fit: contain; border-radius: 4px; }
body.blood-mode .exam-card .model2-actions { grid-template-columns: 58px minmax(0, 310px) 58px; justify-content: center; gap: 12px; margin-top: 14px; }
body.blood-mode .exam-grade-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.blood-mode .exam-grade-actions .exam-grade-button,
body.blood-mode .exam-card .model2-actions > .exam-cycle-button { width: 100%; height: 54px; border-radius: 7px; }
body.blood-mode .exam-card .model2-actions > .exam-cycle-button { border-color: var(--blood-line); background: rgba(39, 46, 53, 0.75); }
body.blood-mode .exam-grade-button svg { width: 26px; height: 26px; }

@media (max-width: 700px) {
    body.blood-mode .exam-shell { width: 100%; padding: 8px 8px 28px; }
    body.blood-mode .exam-topbar { gap: 12px; }
    body.blood-mode .blood-title { font-size: 20px; }
    body.blood-mode .exam-daily-counter { width: 218px; }
    body.blood-mode .exam-controls { gap: 8px; }
    body.blood-mode .exam-controls > .exam-mode-segment { flex: 1 1 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    body.blood-mode .exam-controls > .exam-mode-segment > button { width: 100%; }
    body.blood-mode .exam-controls > .exam-scope-segment { width: auto; flex: 0 0 auto; }
    body.blood-mode .exam-card-search { position: static; }
    body.blood-mode .exam-card-search-panel,
    body.blood-mode .exam-card-search.is-open .exam-card-search-panel { left: 8px; right: 8px; top: calc(100% + 8px); width: auto; }
    body.blood-mode .topic-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    body.blood-mode .topic-controls button { min-height: 43px; padding: 9px 6px; font-size: 12px; }
    body.blood-mode .new-subtopic-controls button { font-size: 12px; padding: 8px 10px; }
    body.blood-mode .card-frame { min-height: 430px; }
    body.blood-mode .card-hover-meta { margin: 58px 12px 0; gap: 4px; }
    body.blood-mode .card-hover-tools { top: 12px; right: 12px; }
    body.blood-mode .card-hover-tools > button { width: 38px; height: 38px; }
    body.blood-mode .card-surface { min-height: 300px; padding: 24px 18px 38px; }
    body.blood-mode .anki-imported-html { font-size: 20px; }
    body.blood-mode .card-content.is-answer-side .anki-imported-html { font-size: 17px; }
    body.blood-mode .exam-card .model2-actions { grid-template-columns: 44px minmax(0, 310px) 44px; gap: 8px; }
    body.blood-mode .exam-grade-actions .exam-grade-button,
    body.blood-mode .exam-card .model2-actions > .exam-cycle-button { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    body.blood-mode .card-frame { transition: none; }
}