:root { --ui-navy:#0d1b2a; --ui-royal:#1565c0; --ui-bright:#0b5cff; --ui-white:#fff; --ui-ice:#c7ddf4; }

.ui-preview { position:relative; display:block; width:100%; max-width:100%; overflow:hidden; border-radius:inherit; cursor:zoom-in; isolation:isolate; outline:none; }
.ui-preview::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(13,27,42,.05),rgba(13,27,42,.86)); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.ui-preview img { transition:transform .35s ease,filter .35s ease; }
.ui-preview-overlay { position:absolute; inset:auto 12px 12px; z-index:2; display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:10px 14px; border:1px solid rgba(199,221,244,.55); border-radius:12px; background:rgba(13,27,42,.72); color:var(--ui-white); font:700 13px/1.25 Inter,system-ui,sans-serif; text-align:center; opacity:0; transform:translateY(8px); transition:opacity .25s ease,transform .25s ease; pointer-events:none; backdrop-filter:blur(8px); }
.ui-preview-icon { font-size:20px; line-height:1; }
.ui-preview:hover,.ui-preview:focus-visible { box-shadow:0 0 0 3px var(--ui-ice),0 0 28px rgba(11,92,255,.5); }
.ui-preview:hover::after,.ui-preview:focus-visible::after,.ui-preview:hover .ui-preview-overlay,.ui-preview:focus-visible .ui-preview-overlay { opacity:1; }
.ui-preview:hover .ui-preview-overlay,.ui-preview:focus-visible .ui-preview-overlay { transform:translateY(0); }
.ui-preview:hover img,.ui-preview:focus-visible img { transform:scale(1.025); }

.ui-lightbox[hidden] { display:none; }
.ui-lightbox { position:fixed; inset:0; z-index:2147483000; display:grid; color:var(--ui-white); font-family:Inter,system-ui,sans-serif; }
.ui-lightbox-backdrop { position:absolute; inset:0; background:rgba(2,9,20,.92); backdrop-filter:blur(8px); animation:ui-fade-in .22s ease both; }
.ui-lightbox-dialog { position:relative; z-index:1; display:grid; grid-template-rows:auto minmax(0,1fr); width:100%; height:100%; overflow:hidden; animation:ui-dialog-in .25s ease both; }
.ui-lightbox-header { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; min-height:72px; padding:10px 18px; border-bottom:1px solid rgba(199,221,244,.2); background:rgba(13,27,42,.94); }
.ui-lightbox-heading { min-width:0; flex:1 1 auto; }
.ui-lightbox-heading h2 { margin:0 0 3px; overflow:hidden; color:var(--ui-white); font-size:clamp(16px,2vw,23px); line-height:1.2; letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; }
.ui-lightbox-heading span { color:var(--ui-ice); font-size:13px; font-weight:700; }
/* Close lives outside the scrollable toolbar (markup order: heading,
   toolbar, close) so it's never scrolled off-screen behind the
   zoom/fit/download controls, and stays at the far right like before. */
.ui-lightbox-close { flex:0 0 auto; }
.ui-lightbox-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:thin; }
.ui-lightbox button,.ui-lightbox a { display:inline-grid; flex:0 0 auto; place-items:center; min-width:44px; min-height:44px; padding:8px 12px; border:1px solid rgba(199,221,244,.35); border-radius:10px; background:rgba(255,255,255,.08); color:var(--ui-white); font:800 14px/1 Inter,system-ui,sans-serif; text-decoration:none; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.ui-lightbox button:hover,.ui-lightbox a:hover { border-color:var(--ui-ice); background:var(--ui-royal); }
.ui-lightbox button:focus-visible,.ui-lightbox a:focus-visible { outline:3px solid var(--ui-ice); outline-offset:2px; }
.ui-lightbox-viewport { position:relative; min-height:0; overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y; scrollbar-color:var(--ui-royal) var(--ui-navy); }
.ui-lightbox-stage { position:relative; display:flex; align-items:flex-start; justify-content:center; min-width:100%; min-height:100%; padding:24px 76px; }
.ui-lightbox-stage img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 120px); margin:auto; object-fit:contain; transform:translate(var(--pan-x,0px),var(--pan-y,0px)) scale(var(--zoom,1)); transform-origin:center center; transition:transform .18s ease,opacity .18s ease; user-select:none; -webkit-user-drag:none; }
.ui-lightbox.is-natural .ui-lightbox-stage img { max-height:none; }
.ui-lightbox.is-zoomed .ui-lightbox-stage img { cursor:grab; }
.ui-lightbox.is-dragging .ui-lightbox-stage img { cursor:grabbing; transition:none; }
.ui-lightbox-nav { position:fixed; z-index:3; top:50%; width:50px; height:64px; border-radius:16px!important; background:rgba(13,27,42,.78)!important; font-size:36px!important; transform:translateY(-50%); }
.ui-lightbox-prev { left:14px; }
.ui-lightbox-next { right:14px; }
.ui-lightbox-status { position:absolute; inset:50% auto auto 50%; z-index:2; max-width:min(90vw,520px); margin:0; padding:14px 18px; border-radius:12px; background:rgba(13,27,42,.9); color:var(--ui-white); text-align:center; transform:translate(-50%,-50%); }
.ui-lightbox-status:empty { display:none; }
.ui-lightbox.is-closing { pointer-events:none; }
.ui-lightbox.is-closing .ui-lightbox-backdrop,.ui-lightbox.is-closing .ui-lightbox-dialog { animation:ui-fade-out .18s ease both; }
body.ui-lightbox-open { overflow:hidden!important; }

@keyframes ui-fade-in { from{opacity:0} to{opacity:1} }
@keyframes ui-fade-out { from{opacity:1} to{opacity:0} }
@keyframes ui-dialog-in { from{opacity:0;transform:scale(.985)} to{opacity:1;transform:scale(1)} }

@media (max-width:700px) {
  .ui-preview-overlay { inset:auto 7px 7px; padding:8px; font-size:12px; }
  .ui-lightbox-dialog { height:100dvh; }
  .ui-lightbox-header {
    position:relative;
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding:9px max(10px,env(safe-area-inset-right)) 9px max(10px,env(safe-area-inset-left));
  }
  .ui-lightbox-heading { width:100%; padding-right:58px; }
  .ui-lightbox-toolbar {
    width:100%;
    max-width:calc(100vw - max(20px,env(safe-area-inset-left) + env(safe-area-inset-right)));
    justify-content:flex-start;
    padding:0 0 2px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  .ui-lightbox-toolbar::-webkit-scrollbar { display:none; }
  .ui-lightbox-close {
    position:absolute;
    z-index:6;
    top:9px;
    right:max(10px,env(safe-area-inset-right));
    width:44px;
    min-width:44px;
    background:var(--ui-royal);
    font-size:24px;
  }
  .ui-lightbox-toolbar a { font-size:0; }
  .ui-lightbox-toolbar a::before { content:"↓"; font-size:20px; }
  .ui-lightbox-stage { padding:18px 48px; }
  .ui-lightbox-nav { top:auto; bottom:max(14px,env(safe-area-inset-bottom)); width:46px; height:52px; transform:none; }
  .ui-lightbox-prev { left:max(10px,env(safe-area-inset-left)); }
  .ui-lightbox-next { right:max(10px,env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion:reduce) {
  .ui-preview::after,.ui-preview img,.ui-preview-overlay,.ui-lightbox-backdrop,.ui-lightbox-dialog,.ui-lightbox-stage img,.ui-lightbox button,.ui-lightbox a { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

@media print { .ui-lightbox { display:none!important; } }