.histology-exam-new-shell {
    max-width: 1120px;
}

.histology-exam-new-shell .topic-controls {
    grid-column: 1 / -1;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="core-vessels"] {
    color: rgb(185 239 221);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="core-vessels"].is-active {
    background: rgb(149 219 194);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="immune-skin"] {
    color: rgb(213 238 181);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="immune-skin"].is-active {
    background: rgb(188 221 147);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="nervous-sense"] {
    color: rgb(197 225 251);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="nervous-sense"].is-active {
    background: rgb(155 195 235);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="endocrine"] {
    color: rgb(223 215 255);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="endocrine"].is-active {
    background: rgb(194 182 244);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="digestive"] {
    color: rgb(255 218 185);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="digestive"].is-active {
    background: rgb(244 188 136);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="resp-urinary"] {
    color: rgb(183 239 233);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="resp-urinary"].is-active {
    background: rgb(133 215 206);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="reproductive"] {
    color: rgb(255 197 223);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="reproductive"].is-active {
    background: rgb(235 157 190);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="layers"] {
    color: rgb(255 226 158);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="layers"].is-active {
    background: rgb(239 204 132);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="2026"] {
    color: rgb(255 218 170);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="2026"].is-active {
    background: rgb(245 194 132);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="pages-5-8"] {
    color: rgb(203 233 255);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="pages-5-8"].is-active {
    background: rgb(166 214 244);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="newpdf"] {
    color: rgb(201 236 216);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="newpdf"].is-active {
    background: rgb(169 214 190);
    color: #101820;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="pdf-id"] {
    color: rgb(202 226 255);
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="pdf-id"].is-active {
    background: rgb(166 207 244);
    color: #101820;
}

.histology-exam-new-shell .topic-chip {
    background: rgba(var(--topic-rgb, 155 195 235) / 0.16);
    border: 1px solid rgba(var(--topic-rgb, 155 195 235) / 0.44);
    border-radius: 999px;
    color: rgb(var(--topic-rgb, 155 195 235));
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.55rem 0.8rem;
}

.histology-exam-new-shell .anki-card-surface {
    min-height: 430px;
    overflow: visible;
}

.histology-exam-new-shell .card-frame {
    overflow: visible;
}

.histology-exam-new-shell .card-content {
    display: block;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
    scrollbar-color: rgba(154, 199, 238, 0.36) transparent;
    scrollbar-width: thin;
    width: 100%;
}

.histology-exam-new-shell .card-content::-webkit-scrollbar {
    width: 7px;
}

.histology-exam-new-shell .card-content::-webkit-scrollbar-track {
    background: transparent;
}

.histology-exam-new-shell .card-content::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(154, 199, 238, 0.38),
        rgba(149, 219, 194, 0.26)
    );
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

.histology-exam-new-shell .card-content:not(:hover)::-webkit-scrollbar-thumb {
    background: rgba(154, 199, 238, 0.18);
    background-clip: padding-box;
}

.histology-exam-new-shell #topic-label:empty {
    display: none;
}

.histology-exam-new-shell .anki-text {
    display: flex;
    flex-direction: column;
    font-size: clamp(1.45rem, 2.65vw, 2.65rem);
    justify-content: center;
    line-height: 1.13;
    min-height: 100%;
}

.histology-exam-new-shell .anki-text.is-medium {
    font-size: clamp(1.15rem, 2vw, 1.85rem);
    font-weight: 850;
    justify-content: flex-start;
    line-height: 1.22;
    text-align: left;
}

.histology-exam-new-shell .anki-text.is-long {
    font-size: clamp(1rem, 1.58vw, 1.42rem);
    font-weight: 800;
    justify-content: flex-start;
    line-height: 1.28;
    text-align: left;
}

.histology-exam-new-shell .anki-text.is-very-long {
    font-size: clamp(0.9rem, 1.2vw, 1.12rem);
    font-weight: 760;
    justify-content: flex-start;
    line-height: 1.34;
    text-align: left;
}

.histology-exam-new-shell .anki-text.is-ultra-long {
    font-size: clamp(0.82rem, 1.02vw, 0.98rem);
    font-weight: 720;
    justify-content: flex-start;
    line-height: 1.38;
    text-align: left;
}

.histology-exam-new-shell .anki-text p {
    margin: 0;
}

.histology-exam-new-shell .anki-text p + p {
    margin-top: 0.9rem;
}

.histology-exam-new-shell .anki-text .histo-answer-heading {
    color: #d7efe7;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-shadow: 0 0 18px rgba(149, 219, 194, 0.10);
}

.histology-exam-new-shell .card-surface.is-identify {
    cursor: default;
}

.histology-exam-new-shell .card-surface.is-identify .side-label {
    color: rgba(202, 226, 255, 0.86);
}

.histology-exam-new-shell .identify-card {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    justify-content: center;
    min-height: 100%;
    text-align: left;
    width: 100%;
}

.histology-exam-new-shell .identify-clue {
    background:
        linear-gradient(135deg, rgba(202, 226, 255, 0.09), rgba(149, 219, 194, 0.04)),
        rgba(33, 39, 46, 0.44);
    border: 1px solid rgba(202, 226, 255, 0.23);
    border-radius: 12px;
    color: #e7eef7;
    font-size: clamp(1rem, 1.42vw, 1.34rem);
    font-weight: 650;
    line-height: 1.34;
    padding: 1rem 1.1rem;
}

.histology-exam-new-shell .identify-clue p,
.histology-exam-new-shell .identify-answer-detail p {
    margin: 0;
}

.histology-exam-new-shell .identify-clue p + p,
.histology-exam-new-shell .identify-answer-detail p + p {
    margin-top: 0.72rem;
}

.histology-exam-new-shell .identify-options {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.histology-exam-new-shell .identify-option {
    background: rgba(48, 57, 66, 0.76);
    border: 1px solid rgba(202, 226, 255, 0.24);
    border-radius: 10px;
    color: #e4edf7;
    cursor: pointer;
    font: inherit;
    font-size: clamp(0.95rem, 1.1vw, 1.08rem);
    font-weight: 750;
    line-height: 1.16;
    min-height: 54px;
    padding: 0.72rem 0.88rem;
    text-align: left;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.histology-exam-new-shell .identify-option:hover,
.histology-exam-new-shell .identify-option:focus-visible {
    background: rgba(202, 226, 255, 0.13);
    border-color: rgba(202, 226, 255, 0.65);
    box-shadow: 0 0 0 4px rgba(202, 226, 255, 0.09);
    outline: none;
    transform: translateY(-1px);
}

.histology-exam-new-shell .identify-option:disabled {
    cursor: default;
}

.histology-exam-new-shell .identify-option.is-correct {
    background: rgba(141, 230, 170, 0.18);
    border-color: rgba(141, 230, 170, 0.78);
    box-shadow: 0 0 0 3px rgba(141, 230, 170, 0.08);
    color: #dff9e8;
}

.histology-exam-new-shell .identify-option.is-incorrect {
    background: rgba(243, 139, 139, 0.14);
    border-color: rgba(243, 139, 139, 0.70);
    color: #ffe0e0;
}

.histology-exam-new-shell .identify-feedback {
    border-radius: 12px;
    font-size: clamp(0.92rem, 1vw, 1.02rem);
    line-height: 1.35;
    padding: 0.95rem 1rem;
}

.histology-exam-new-shell .identify-feedback.is-correct {
    background: rgba(141, 230, 170, 0.12);
    border: 1px solid rgba(141, 230, 170, 0.34);
}

.histology-exam-new-shell .identify-feedback.is-incorrect {
    background: rgba(243, 139, 139, 0.10);
    border: 1px solid rgba(243, 139, 139, 0.30);
}

.histology-exam-new-shell .identify-feedback > strong {
    color: #eaf4ff;
    display: block;
    font-size: 1.02em;
    margin-bottom: 0.55rem;
}

.histology-exam-new-shell .identify-answer-detail {
    color: #cdd8e3;
}

.histology-exam-new-shell .histo-term {
    border-bottom: 1px dotted rgba(185, 239, 221, 0.75);
    color: #bcebdc;
    cursor: help;
    font-weight: inherit;
    position: relative;
    text-decoration: none;
    text-shadow: 0 0 14px rgba(149, 219, 194, 0.12);
}

.histology-exam-new-shell .anki-text.is-answer .histo-term {
    border-bottom-color: rgba(154, 199, 238, 0.72);
    color: #b9dcff;
}

.histology-exam-new-shell .histo-term::after {
    background: rgba(29, 35, 41, 0.97);
    border: 1px solid rgba(154, 199, 238, 0.42);
    border-radius: 8px;
    bottom: calc(100% + 10px);
    box-shadow: 0 16px 40px rgba(8, 12, 16, 0.38);
    color: #e7edf3;
    content: attr(data-hint);
    font-size: 0.78rem;
    font-weight: 750;
    left: 50%;
    line-height: 1.35;
    max-width: min(320px, 70vw);
    min-width: 210px;
    opacity: 0;
    padding: 10px 12px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    text-shadow: none;
    transform: translate(-50%, 6px) scale(0.98);
    transition: opacity 90ms ease, transform 90ms ease;
    white-space: normal;
    z-index: 40;
}

.histology-exam-new-shell .histo-term::before {
    border: 7px solid transparent;
    border-top-color: rgba(29, 35, 41, 0.97);
    bottom: calc(100% - 3px);
    content: "";
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity 90ms ease;
    z-index: 41;
}

.histology-exam-new-shell .histo-term:hover::after,
.histology-exam-new-shell .histo-term:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.histology-exam-new-shell .histo-term:hover::before,
.histology-exam-new-shell .histo-term:focus-visible::before {
    opacity: 1;
}

.histology-exam-new-shell .segmented button,
.histology-exam-new-shell .ghost-button,
.histology-exam-new-shell .progress-graph-toggle,
.histology-exam-new-shell .gaps-mode-toggle {
    font-weight: 650;
}

.histology-exam-new-shell .topic-controls button {
    --topic-rgb: 155 195 235;
    background: rgba(52, 60, 69, 0.78) !important;
    border: 1px solid rgba(var(--topic-rgb) / 0.34);
    border-radius: 8px;
    box-shadow: none;
    color: rgb(var(--topic-rgb));
    font-weight: 650;
    min-height: 44px;
    padding: 0 13px;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="all"] {
    --topic-rgb: 205 222 238;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="core-vessels"] {
    --topic-rgb: 185 239 221;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="immune-skin"] {
    --topic-rgb: 213 238 181;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="nervous-sense"] {
    --topic-rgb: 197 225 251;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="endocrine"] {
    --topic-rgb: 223 215 255;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="digestive"] {
    --topic-rgb: 255 218 185;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="resp-urinary"] {
    --topic-rgb: 183 239 233;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="reproductive"] {
    --topic-rgb: 255 197 223;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="layers"] {
    --topic-rgb: 255 226 158;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="2026"] {
    --topic-rgb: 245 194 132;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="pages-5-8"] {
    --topic-rgb: 203 233 255;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="newpdf"] {
    --topic-rgb: 201 236 216;
}

.histology-exam-new-shell .topic-controls button[data-topic-filter="pdf-id"] {
    --topic-rgb: 202 226 255;
}

.histology-exam-new-shell .topic-controls button:hover,
.histology-exam-new-shell .topic-controls button:focus-visible {
    background: rgba(var(--topic-rgb) / 0.14) !important;
    border-color: rgba(var(--topic-rgb) / 0.72);
    box-shadow: 0 0 0 4px rgba(var(--topic-rgb) / 0.10);
    color: #edf5fb;
    outline: none;
    transform: translateY(-1px);
}

.histology-exam-new-shell .topic-controls button.is-active {
    background: rgba(var(--topic-rgb) / 0.24) !important;
    border-color: rgba(var(--topic-rgb) / 0.82);
    color: #f2f7fb !important;
}

.histology-exam-new-shell .counter-row {
    gap: 12px;
}

.histology-exam-new-shell .counter-row span {
    white-space: nowrap;
}

.histology-exam-new-shell .actions {
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.histology-exam-new-shell .actions button,
.histology-exam-new-shell .actions button:first-child {
    background: #343c45;
    border: 1px solid #5d6c7c;
    border-radius: 8px;
    color: #d7e2ee;
    cursor: pointer;
    font-weight: 650;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.histology-exam-new-shell .actions button:hover,
.histology-exam-new-shell .actions button:focus-visible {
    background: rgba(110, 166, 217, 0.16);
    border-color: #8fb8e8;
    box-shadow: 0 0 0 4px rgba(110, 166, 217, 0.12);
    color: #eef6ff;
    outline: none;
    transform: translateY(-1px);
}

.histology-exam-new-shell .actions button:active {
    transform: translateY(0);
}

.histology-exam-new-shell #knew-card,
.histology-exam-new-shell #missed-card {
    font-weight: 900;
}

.histology-exam-new-shell #knew-card:hover,
.histology-exam-new-shell #knew-card:focus-visible {
    background: rgba(139, 218, 166, 0.20);
    border-color: #8bdaa6;
    box-shadow: 0 0 0 4px rgba(139, 218, 166, 0.12);
    color: #edfff3;
}

.histology-exam-new-shell #missed-card:hover,
.histology-exam-new-shell #missed-card:focus-visible {
    background: rgba(224, 141, 135, 0.18);
    border-color: #e08d87;
    box-shadow: 0 0 0 4px rgba(224, 141, 135, 0.10);
    color: #ffe7e5;
}

.histology-exam-new-shell .actions button[data-state="known"] {
    background: rgba(139, 218, 166, 0.88);
    border-color: #8bdaa6;
    color: #102018;
}

.histology-exam-new-shell .actions button[data-state="missed"] {
    background: rgba(224, 141, 135, 0.84);
    border-color: #e08d87;
    color: #251313;
}

.histology-exam-new-shell .actions button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.histology-exam-new-shell .grade-note {
    color: #92a19a;
    margin: 12px 0 0;
    min-height: 1.5rem;
}

.histology-correct-flash,
.histology-missed-flash,
.histology-batch-complete-flash {
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 9999;
}

.histology-correct-flash {
    animation: histologyCorrectFlash 620ms ease-out forwards;
    background:
        radial-gradient(circle at 50% 50%, rgba(150, 245, 178, 0.52), rgba(89, 202, 126, 0.20) 34%, transparent 68%),
        linear-gradient(120deg, transparent 0%, rgba(168, 255, 198, 0.22) 44%, rgba(168, 255, 198, 0.28) 50%, transparent 58%);
}

.histology-missed-flash {
    animation: histologyMissedFlash 760ms cubic-bezier(.2,.9,.25,1) forwards;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 96, 86, 0.38), rgba(168, 32, 35, 0.22) 38%, transparent 72%),
        repeating-linear-gradient(112deg, rgba(255, 148, 137, 0.13) 0 2px, transparent 2px 13px),
        linear-gradient(180deg, rgba(65, 10, 14, 0.22), rgba(12, 0, 2, 0.10));
}

.histology-batch-complete-flash {
    animation: histologyBatchWash 1450ms ease-out forwards;
    background:
        radial-gradient(circle at 50% 52%, rgba(145, 250, 176, 0.62), rgba(67, 195, 108, 0.26) 36%, rgba(67, 195, 108, 0.08) 62%, transparent 100%),
        linear-gradient(180deg, rgba(119, 232, 153, 0.18), transparent 72%);
    overflow: hidden;
}

.histology-batch-complete-flash::before,
.histology-batch-complete-flash::after {
    animation: histologyFireworkBurst 1450ms ease-out forwards;
    background:
        radial-gradient(circle at 16% 24%, rgba(205, 255, 214, 0.96) 0 3px, transparent 4px),
        radial-gradient(circle at 28% 70%, rgba(143, 244, 176, 0.86) 0 4px, transparent 5px),
        radial-gradient(circle at 43% 31%, rgba(230, 255, 220, 0.95) 0 3px, transparent 4px),
        radial-gradient(circle at 61% 66%, rgba(126, 235, 159, 0.88) 0 4px, transparent 5px),
        radial-gradient(circle at 73% 28%, rgba(221, 255, 226, 0.96) 0 3px, transparent 4px),
        radial-gradient(circle at 86% 61%, rgba(154, 247, 182, 0.90) 0 4px, transparent 5px);
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transform: scale(0.68);
}

.histology-batch-complete-flash::after {
    animation-delay: 140ms;
    filter: blur(0.5px);
    transform: scale(0.52) rotate(18deg);
}

@keyframes histologyCorrectFlash {
    0% {
        opacity: 0;
        transform: scale(0.985);
    }

    20% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.035);
    }
}

@keyframes histologyMissedFlash {
    0% {
        filter: saturate(1);
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(1);
    }

    14% {
        opacity: 0.98;
        transform: translate3d(-6px, 3px, 0) scale(1.006);
    }

    27% {
        transform: translate3d(5px, -3px, 0) scale(1.012);
    }

    44% {
        opacity: 0.78;
        transform: translate3d(-3px, 2px, 0) scale(1.018);
    }

    100% {
        filter: saturate(0.82);
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(1.035);
    }
}

@keyframes histologyBatchWash {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }

    18% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.06);
    }
}

@keyframes histologyFireworkBurst {
    0% {
        opacity: 0;
        transform: scale(0.52);
    }

    22% {
        opacity: 1;
    }

    82% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .histology-correct-flash,
    .histology-missed-flash,
    .histology-batch-complete-flash,
    .histology-batch-complete-flash::before,
    .histology-batch-complete-flash::after {
        animation-duration: 1ms;
    }
}