/* AnatomyProf – theme on top of Bootstrap 5.3. Palette: haematoxylin violet + eosin pink. */
:root {
  --ap-ink: #1f1733;
  --ap-violet: #4f3591;
  --ap-violet-rgb: 79, 53, 145;
  --ap-violet-dark: #3d2a63;
  --ap-eosin: #d6336c;
  --ap-soft: #f6f3fb;
  --ap-line: #e7e1f2;
  --ap-radius: .9rem;
  --bs-primary: var(--ap-violet);
  --bs-primary-rgb: var(--ap-violet-rgb);
  --bs-link-color: var(--ap-violet);
  --bs-link-color-rgb: var(--ap-violet-rgb);
  --bs-link-hover-color: var(--ap-violet-dark);
  --bs-body-color: #2a2438;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-border-color: var(--ap-line);
  --bs-border-radius: .6rem;
  --bs-focus-ring-color: rgba(var(--ap-violet-rgb), .3);
}
h1, h2, h3, .h1, .h2, .h3, .display-5 { color: var(--ap-ink); letter-spacing: -.015em; font-weight: 700; }
a { text-underline-offset: .2em; }
.btn-primary {
  --bs-btn-bg: var(--ap-violet); --bs-btn-border-color: var(--ap-violet);
  --bs-btn-hover-bg: var(--ap-violet-dark); --bs-btn-hover-border-color: var(--ap-violet-dark);
  --bs-btn-active-bg: var(--ap-violet-dark); --bs-btn-active-border-color: var(--ap-violet-dark);
  --bs-btn-disabled-bg: var(--ap-violet); --bs-btn-disabled-border-color: var(--ap-violet);
}
.btn-outline-primary {
  --bs-btn-color: var(--ap-violet); --bs-btn-border-color: var(--ap-violet);
  --bs-btn-hover-bg: var(--ap-violet); --bs-btn-hover-border-color: var(--ap-violet);
  --bs-btn-active-bg: var(--ap-violet-dark); --bs-btn-active-border-color: var(--ap-violet-dark);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--ap-violet); --bs-nav-link-color: var(--ap-violet); --bs-nav-link-hover-color: var(--ap-violet-dark); }
.form-check-input:checked { background-color: var(--ap-violet); border-color: var(--ap-violet); }
.skip-link { position: absolute; z-index: 2000; top: .5rem; left: .5rem; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }
.bg-soft { background: var(--ap-soft); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--ap-eosin); margin-bottom: .5rem; }

/* header */
.site-header { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ap-line); }
.site-header .navbar { --bs-navbar-padding-y: .55rem; }
.site-header .nav-link { font-weight: 600; color: var(--ap-ink); }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--ap-violet); }
.btn-icon { border: 0; color: var(--ap-ink); padding: .45rem .55rem; border-radius: .5rem; }
.btn-icon:hover { background: var(--ap-soft); color: var(--ap-violet); }
.dropdown-item:active { background: var(--ap-violet); }

/* hero */
.hero { background: radial-gradient(1200px 500px at 85% 10%, rgba(214, 51, 108, .09), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(79, 53, 145, .1), transparent 60%), var(--ap-soft); }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mosaic-item { position: relative; display: block; border-radius: var(--ap-radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 10px 30px rgba(31, 23, 51, .12); }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mosaic-item:hover img { transform: scale(1.05); }
.mosaic-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem .75rem .6rem; color: #fff; font-weight: 600; font-size: .85rem; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.search-fake { display: flex; align-items: center; gap: .6rem; width: 100%; max-width: 32rem; background: #fff; border: 1px solid var(--ap-line); border-radius: 999px; padding: .7rem 1.1rem; color: #6c6780; text-align: left; box-shadow: 0 2px 10px rgba(31, 23, 51, .05); }
.search-fake:hover { border-color: var(--ap-violet); }

/* sections & cards */
.section-head { margin-bottom: 1.5rem; }
.section-head h2 { margin-bottom: .25rem; }
.page-head h1 { margin-bottom: .5rem; }
.step, .info-card, .legend-box, .cta-box { background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.25rem; }
.bg-soft .step { box-shadow: 0 4px 18px rgba(31, 23, 51, .05); }
.cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: var(--ap-soft); }
.card { border-color: var(--ap-line); border-radius: var(--ap-radius); overflow: hidden; }
.cat-card, .topic-card { color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.cat-card:hover, .topic-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(31, 23, 51, .12); border-color: #cfc3e8; }
.cat-card img, .topic-card img { width: 100%; height: 100%; }
.cat-card .card-title, .topic-card .card-title { color: var(--ap-ink); }
.path-no { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ap-violet); color: #fff; font-weight: 700; font-size: .9rem; margin-bottom: .5rem; }
h2 .path-no { margin-bottom: 0; vertical-align: middle; }
.progress-badge { background: #e6f6ee; color: #146c43; }
.badge.text-bg-light { background: var(--ap-soft) !important; color: #4a4360 !important; font-weight: 600; }

/* topic */
.topic-head h1 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); margin-bottom: .2rem; }
.topic-sub { color: #6c6780; font-size: 1.1rem; margin-bottom: .75rem; }
.badge-no { background: var(--ap-ink); color: #fff; }
.badge-cat { background: rgba(214, 51, 108, .1); color: #a3204f; }
.path-nav { top: 5rem; font-size: .9rem; max-height: calc(100vh - 6rem); overflow: auto; padding-right: .25rem; }
.path-nav-h { font-weight: 700; color: var(--ap-ink); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.path-nav-h a { color: inherit; text-decoration: none; }
.path-nav ol a { display: block; padding: .45rem .7rem; border-radius: .5rem; color: #3b3450; text-decoration: none; border-left: 3px solid transparent; }
.path-nav ol a small { display: block; color: #8a849b; font-size: .75rem; }
.path-nav ol a:hover { background: var(--ap-soft); }
.path-nav ol a.active { background: var(--ap-soft); border-left-color: var(--ap-violet); font-weight: 600; color: var(--ap-ink); }
.path-nav ol a.done::after { content: " ✓"; color: #198754; font-weight: 700; }
.toc a { padding: .25rem .7rem !important; }

.stage { position: relative; border-radius: var(--ap-radius); overflow: hidden; background: #111; line-height: 0; }
.stage-img { width: 100%; height: auto; display: block; }
.stage-labels { position: absolute; inset: 0; transition: opacity .2s; }
.stage.no-labels .stage-labels { opacity: 0; pointer-events: none; }
.lbl { position: absolute; min-width: 16px; min-height: 16px; border: 2px solid rgba(255, 230, 0, .95); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35); transition: background .15s, border-color .15s; cursor: pointer; }
.lbl b { position: absolute; top: -.75rem; left: -.75rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: 999px; background: #ffe600; color: #111; font-size: .78rem; line-height: 1.5rem; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.lbl.active, .lbl:hover { background: rgba(255, 230, 0, .22); border-color: #fff; }
.lbl.active b { background: #fff; }
.stage-cap { font-size: .9rem; color: #4a4360; padding: .6rem .1rem 0; }
.credit { display: block; font-size: .75rem; color: #8a849b; margin-top: .2rem; }
.thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .6rem .1rem .3rem; scrollbar-width: thin; }
.thumb { flex: 0 0 auto; border: 2px solid transparent; border-radius: .5rem; padding: 0; overflow: hidden; background: #111; line-height: 0; opacity: .75; }
.thumb img { width: 96px; height: 72px; object-fit: cover; }
.thumb.active, .thumb:hover { border-color: var(--ap-violet); opacity: 1; }
.legend-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #8a849b; margin: .75rem 0 .5rem; }
.legend { list-style: none; padding: 0; margin: 0; }
.legend button { display: flex; gap: .6rem; width: 100%; text-align: left; align-items: flex-start; border: 0; background: none; padding: .35rem .4rem; border-radius: .45rem; color: inherit; font-size: .92rem; }
.legend button b { flex: 0 0 auto; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #ffe600; color: #111; font-size: .78rem; display: grid; place-items: center; }
.legend button:hover, .legend button.active { background: var(--ap-soft); }
.intro p:first-child { font-size: 1.08rem; }
.topic-section { margin-top: 2.5rem; }
.topic-section h2 { font-size: 1.45rem; margin-bottom: .9rem; }
.check-list, .find-list { padding-left: 0; list-style: none; }
.check-list li, .find-list li { position: relative; padding-left: 1.6rem; margin-bottom: .4rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ap-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/80% no-repeat; }
.find-list li::before { content: ""; position: absolute; left: .15rem; top: .4rem; width: .8rem; height: .8rem; border: 2px solid var(--ap-eosin); border-radius: 50%; }
.gallery-btn { border: 0; padding: 0; background: #111; border-radius: .6rem; overflow: hidden; display: block; width: 100%; line-height: 0; }
.gallery-btn img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform .3s; }
.gallery-btn:hover img { transform: scale(1.04); }
.faq details { border: 1px solid var(--ap-line); border-radius: .7rem; padding: .85rem 1.1rem; margin-bottom: .6rem; background: #fff; }
.faq summary { font-weight: 600; cursor: pointer; color: var(--ap-ink); }
.faq details[open] summary { margin-bottom: .5rem; }
.faq details p { margin: 0; }
.prev-next { display: flex; justify-content: space-between; gap: 1rem; }
.pn { display: block; max-width: 48%; padding: .9rem 1.1rem; border: 1px solid var(--ap-line); border-radius: .8rem; text-decoration: none; color: var(--ap-ink); font-weight: 600; }
.pn small { display: block; font-weight: 400; color: #8a849b; }
.pn.next { text-align: right; margin-left: auto; }
.pn:hover { border-color: var(--ap-violet); background: var(--ap-soft); }

/* macro */
.macro-stack { display: grid; background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); overflow: hidden; padding: .5rem; }
.macro-stack picture { grid-area: 1 / 1; display: flex; justify-content: center; }
.macro-stack img { display: block; max-width: 100%; width: auto; height: auto; max-height: 560px; }
.macro-stack .macro-marked { transition: opacity .25s; }
.macro-fig.plain .macro-marked { opacity: 0; }
.macro-stack picture:has(.macro-marked) { z-index: 1; }
.slide-text ul { padding-left: 1.2rem; }

/* quiz */
.quiz-box { background: var(--ap-soft); border-radius: var(--ap-radius); padding: 1.5rem; }
.quiz-stage { position: relative; line-height: 0; border-radius: .7rem; overflow: hidden; background: #111; cursor: crosshair; user-select: none; }
.quiz-stage img { width: 100%; height: auto; }
.quiz-stage .lbl { cursor: default; }
.quiz-stage .lbl.target { border-color: #ff3d7f; background: rgba(255, 61, 127, .18); }
.quiz-stage .lbl.ok { border-color: #2ecc71; background: rgba(46, 204, 113, .2); }
.click-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #000; }
.click-dot.ok { background: #2ecc71; } .click-dot.bad { background: #e74c3c; }
.match-table select { min-width: 5rem; }
.match-table .ok select { border-color: #198754; background-color: #e9f7ef; }
.match-table .bad select { border-color: #dc3545; background-color: #fdecee; }
.mc-opts { display: grid; gap: .5rem; }
.mc-opt { text-align: left; border: 1px solid var(--ap-line); background: #fff; border-radius: .6rem; padding: .7rem 1rem; font-weight: 500; }
.mc-opt:hover:not(:disabled) { border-color: var(--ap-violet); }
.mc-opt.ok { border-color: #198754; background: #e9f7ef; }
.mc-opt.bad { border-color: #dc3545; background: #fdecee; }
.mc-opt:disabled { opacity: 1; color: inherit; }
.quiz-feedback { margin-top: .9rem; font-weight: 600; }
.quiz-progress { height: .4rem; border-radius: 1rem; background: var(--ap-line); overflow: hidden; margin-bottom: 1rem; }
.quiz-progress span { display: block; height: 100%; background: var(--ap-violet); transition: width .3s; }
.hub-q img { border-radius: .7rem; }

/* zoom */
.zoom-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; background: #000; position: relative; z-index: 2; }
.zoom-area { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
.zoom-area.dragging { cursor: grabbing; }
.zoom-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; line-height: 0; }
.zoom-inner img { display: block; max-width: none; }
.zoom-labels { position: absolute; inset: 0; pointer-events: none; }
.zoom-labels .lbl { pointer-events: auto; border-width: 3px; }
.zoom-labels .lbl b { min-width: 1.75rem; height: 1.75rem; line-height: 1.75rem; font-size: .85rem; top: -.9rem; left: -.9rem; }
.zoom-legend { position: absolute; right: 1rem; top: 4rem; z-index: 3; list-style: none; margin: 0; padding: .5rem; width: min(20rem, calc(100% - 2rem)); max-height: calc(100% - 5rem); overflow: auto; background: rgba(15, 12, 25, .82); backdrop-filter: blur(6px); border-radius: .75rem; }
.zoom-legend button { display: flex; gap: .6rem; width: 100%; align-items: flex-start; text-align: left; border: 0; background: none; color: #fff; padding: .35rem .45rem; border-radius: .45rem; font-size: .9rem; }
.zoom-legend button b { flex: 0 0 auto; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #ffe600; color: #111; font-size: .78rem; display: grid; place-items: center; }
.zoom-legend button:hover, .zoom-legend button.active { background: rgba(255, 255, 255, .14); }
@media (max-width: 575.98px) { .zoom-legend { top: auto; bottom: .75rem; max-height: 35%; } }

/* footer */
.site-footer { background: #17112a; color: #fff; }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .55); margin-bottom: .8rem; font-weight: 700; }
.site-footer li { margin-bottom: .35rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.lang-switch .btn { min-width: 6rem; }
.site-footer .lang-switch .btn.active { color: #17112a; }
.prose h2 { font-size: 1.35rem; margin-top: 2rem; }

/* search */
#searchModal .list-group-item small { color: #8a849b; }
#searchModal mark { padding: 0; background: rgba(255, 230, 0, .5); }

@media (max-width: 575.98px) {
  .pn { max-width: 100%; }
  .prev-next { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .print-hide { display: none !important; }
  .info-card { break-inside: avoid; }
  .row > .col-md-6:only-child, .row > .col-md-6:not(.print-hide):has(+ .print-hide) { width: 100% !important; }
  .site-header, .site-footer, .path-nav, .thumbs, .topic-actions, .quiz-box, .legend-box .form-switch, .legend-box [data-zoom], .prev-next, #searchModal, #zoomModal { display: none !important; }
  .col-lg-9, .col-xl-8, .col-xl-4 { width: 100% !important; }
  .gallery-item { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}