.reference-modal-overlay[hidden] { display: none; }
.reference-modal-overlay {
    position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
    padding: 16px; background: rgba(15, 23, 42, .58);
    animation: reference-overlay-in .2s ease-out both;
}
.reference-modal {
    width: min(50vw, 720px); max-height: 72vh; overflow: auto;
    border: 1px solid #cbd5e1; border-radius: 16px;
    background: #fff; color: #222;
    box-shadow: 0 24px 70px rgba(15,23,42,.34); direction: rtl;
    transform-origin: center;
    animation: reference-modal-in .24s cubic-bezier(.2,.8,.2,1) both;
}
.reference-modal-overlay.is-closing { animation: reference-overlay-out .18s ease-in both; }
.reference-modal-overlay.is-closing .reference-modal { animation: reference-modal-out .18s ease-in both; }
.reference-modal-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #ddd; }
.reference-modal-head h2 { margin: 0; font-size: 1.2rem; }
.reference-modal-head button { border: 0; background: transparent; font-size: 28px; cursor: pointer; }
.reference-modal-body { padding: 20px; line-height: 2; white-space: pre-wrap; }
.reference-modal-actions { display: flex; padding: 14px 20px; border-top: 1px solid #ddd; }
.reference-modal-actions a,
.reference-modal-actions a:link,
.reference-modal-actions a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid #1d4f8d;
    border-radius: 8px;
    background-color: #245c9f !important;
    background-image: none !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.reference-modal-actions a:hover,
.reference-modal-actions a:focus-visible {
    background-color: #1d4f8d !important;
    background-image: none !important;
    border-color: #173f71;
    color: #fff !important;
    transform: translateY(-1px);
}
.reference-modal-actions a::before,
.reference-modal-actions a::after { content: none !important; display: none !important; }
html.dark-mode .reference-modal,
body.dark-mode .reference-modal {
    background: #172033; color: #e5edf8; border-color: #526782;
    box-shadow: 0 26px 75px rgba(0,0,0,.62);
}
html.dark-mode .reference-modal-head,
html.dark-mode .reference-modal-actions,
body.dark-mode .reference-modal-head,
body.dark-mode .reference-modal-actions { border-color: #40516b; }
html.dark-mode .reference-modal-head button,
body.dark-mode .reference-modal-head button { color: #eef4ff; }
html.dark-mode .reference-modal-actions a,
html.dark-mode .reference-modal-actions a:link,
html.dark-mode .reference-modal-actions a:visited,
body.dark-mode .reference-modal-actions a,
body.dark-mode .reference-modal-actions a:link,
body.dark-mode .reference-modal-actions a:visited {
    background-color: #3b82f6 !important;
    background-image: none !important;
    border-color: #60a5fa;
    color: #fff !important;
}
html.dark-mode .reference-modal-actions a:hover,
html.dark-mode .reference-modal-actions a:focus-visible,
body.dark-mode .reference-modal-actions a:hover,
body.dark-mode .reference-modal-actions a:focus-visible {
    background-color: #2563eb !important;
    border-color: #60a5fa;
}
@keyframes reference-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes reference-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes reference-modal-in {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes reference-modal-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(12px) scale(.97); }
}
@media (max-width: 767px) {
    .reference-modal { width: min(94vw, 720px); max-height: 78vh; }
}
@media (prefers-reduced-motion: reduce) {
    .reference-modal-overlay, .reference-modal,
    .reference-modal-overlay.is-closing, .reference-modal-overlay.is-closing .reference-modal {
        animation-duration: .01ms;
    }
}