.kb-media-figure { margin: 1.75rem 0; }
.kb-media-link { display: block; border: 1px solid #cbd5e1; border-radius: .75rem; overflow: hidden; background: #f8fafc; cursor: zoom-in; }
.kb-media-link:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.kb-media-link img { display: block; width: 100%; height: auto; margin: 0 !important; }
.kb-media-caption { margin-top: .65rem; font-size: .875rem; line-height: 1.6; color: inherit; }
.kb-media-hint { display: block; margin-top: .2rem; font-size: .8rem; }
.kb-media-viewer { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(2 6 23 / .85); }
.kb-media-viewer.hidden { display: none; }
.kb-media-panel { width: min(96rem, 100%); max-height: 94vh; overflow: auto; border-radius: .75rem; background: #fff; color: #0f172a; box-shadow: 0 24px 80px rgb(0 0 0 / .3); }
.kb-media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid #e2e8f0; }
.kb-media-toolbar h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.kb-media-toolbar button { flex-shrink: 0; padding: .5rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #f1f5f9; color: #0f172a; font: inherit; cursor: pointer; }
.kb-media-toolbar button:focus-visible, .kb-media-original:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.kb-media-preview { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; margin: 1rem auto; }
.kb-media-description { padding: 0 1rem; margin: .75rem 0; font-size: .9rem; line-height: 1.5; }
.kb-media-original { display: inline-block; margin: 0 1rem 1rem; color: #1d4ed8; text-decoration: underline; }
body:has(.kb-media-viewer[aria-hidden="false"]) { overflow: hidden; }
@media (max-width: 640px) { .kb-media-viewer { padding: .5rem; } .kb-media-panel { max-height: 96vh; } }