.zf { color: #111111; }
.zf-stage {
position: relative;
width: 100%;
max-width: 760px;
margin: 0 auto;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #fff;
outline: none;
}
.zf-stage:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }
.zf-svg { display: block; width: 100%; height: 100%; }
.zf-svg image { -webkit-user-drag: none; user-select: none; }
.zf-expand {
position: absolute; top: 8px; right: 8px; z-index: 6;
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 11px; border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.16);
background: rgba(255, 255, 255, 0.94); color: #111111;
font-size: 12.5px; font-weight: 700; cursor: pointer;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16);
}
@media (hover: hover) and (pointer: fine) {
.zf-expand:hover { background: #fff; border-color: rgba(15, 23, 42, 0.32); }
}
.zf-expand:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }
.zf--big .zf-expand { display: none; }
.zf-caption {
box-sizing: border-box;
margin: 10px auto 0;
max-width: 760px;
min-height: 64px;
padding: 10px 13px;
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(15, 23, 42, 0.02);
font-size: 13.5px; line-height: 1.5; color: #111111;
}
.zf-caption[hidden] { display: none; }
.zf-caption strong { font-weight: 800; }
.zf-controls { margin: 12px auto 0; max-width: 760px; }
.zf-controls:empty { display: none; }
.zf-lightbox {
position: fixed; inset: 0; z-index: 4000;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.zf-lightbox__backdrop {
position: absolute; inset: 0;
background: rgba(8, 12, 24, 0.72);
backdrop-filter: blur(2px);
}
.zf-lightbox__panel {
position: relative; z-index: 1;
max-width: min(1400px, 96vw); max-height: 94vh;
overflow: auto;
background: #fff; border-radius: 18px;
padding: 44px 26px 24px;
box-shadow: 0 24px 70px rgba(8, 12, 24, 0.5);
}
.zf-lightbox__x {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 34px; height: 34px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(15, 23, 42, 0.16);
background: #fff; color: #111111; font-size: 17px; cursor: pointer;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16);
}
@media (hover: hover) and (pointer: fine) {
.zf-lightbox__x:hover { border-color: rgba(15, 23, 42, 0.34); }
}
body.zf-lightbox-open { overflow: hidden; }
.zf--big { width: min(1320px, 94vw); margin: 0 auto; }
.zf--big .zf-stage { width: 100%; max-width: min(1320px, 94vw); }
.zf--big .zf-caption,
.zf--big .zf-controls { max-width: min(1320px, 94vw); }
@media (max-width: 640px) {
.zf-lightbox { padding: 10px; }
.zf-lightbox__panel { padding: 40px 12px 14px; border-radius: 14px; }
}