/* =====================================================================
   OUTPUT IMAGE VIEWER (legacy/external)  —  view.css
   -----------------------------------------------------------------
   NOTE: project.php no longer uses any class from this file — its
   output viewer is now fully self-contained with pv-* prefixed
   styles inline in the page, so there is no collision risk anymore.
 
   Keep this file ONLY if some other page on the site still links to
   it and uses the .out-overlay / .out-card gallery below. If nothing
   else uses it, you can safely delete the <link> to this file (and
   this file itself) — it is not required for project.php anymore.
   ===================================================================== */
 
/* ============ FULL-SCREEN GALLERY OVERLAY ============ */
.out-overlay{
  position:fixed; inset:0; z-index:6000;
  display:none; flex-direction:column;
  background:#000;
  -webkit-user-select:none; user-select:none;
  animation:outFade .22s ease both;
}
.out-overlay.show{display:flex}
@keyframes outFade{from{opacity:0}to{opacity:1}}
 
/* ---- Top bar ---- */
.out-bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  padding-left:calc(14px + env(safe-area-inset-left,0px));
  padding-right:calc(14px + env(safe-area-inset-right,0px));
  background:rgba(0,0,0,.92);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  position:relative; z-index:5;
}
 
.out-back{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:8px;
  height:44px; padding:0 18px 0 14px;
  border-radius:999px; cursor:pointer;
  font-weight:700; font-size:.95rem; color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#3b82f6);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 22px rgba(29,78,216,.42);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.out-back:hover{filter:brightness(1.08); box-shadow:0 10px 26px rgba(29,78,216,.6)}
.out-back:active{transform:scale(.96)}
 
.out-titles{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.out-title{
  color:#fff; font-weight:800; font-size:1rem; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.out-sub{
  display:inline-flex; align-items:center; gap:6px;
  color:#7cc4ff; font-size:.76rem; font-weight:600;
}
 
.out-right{flex:0 0 auto; display:flex; align-items:center; gap:10px}
.out-count{
  min-width:52px; text-align:center;
  font-size:.82rem; font-weight:700; color:#cfe0ff;
  background:rgba(124,196,255,.12);
  border:1px solid rgba(124,196,255,.26);
  padding:7px 12px; border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.out-close{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:12px; cursor:pointer;
  display:grid; place-items:center; font-size:1.05rem; color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  transition:.16s;
}
.out-close:hover{background:rgba(248,113,113,.18); border-color:rgba(248,113,113,.5)}
.out-close:active{transform:scale(.92)}
 
/* ---- Scrollable image stage ---- */
.out-stage{
  flex:1 1 auto; min-height:0; height:0;
  overflow-y:auto; overflow-x:hidden; overflow-anchor:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  padding:20px 16px calc(48px + env(safe-area-inset-bottom,0px));
}
 
.out-card{
  position:relative;
  width:min(940px,100%);
  border-radius:16px; overflow:hidden;
  background:#0a0f1f;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  cursor:zoom-in;
  opacity:0; transform:translateY(16px);
  animation:outCardIn .55s cubic-bezier(.22,1,.36,1) forwards;
}
.out-card img{
  display:block; width:100%; height:auto;
  background:#0a0f1f;
}
.out-card.loading{min-height:200px}
.out-card.loading::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,#0a0f1f 30%,#13203c 50%,#0a0f1f 70%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes outCardIn{to{opacity:1; transform:translateY(0)}}
 
.out-page{
  position:absolute; bottom:10px; right:12px;
  background:rgba(0,0,0,.62); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.4px;
  padding:4px 10px; border-radius:999px;
  font-variant-numeric:tabular-nums; pointer-events:none;
  backdrop-filter:blur(4px);
}
.out-zoomtip{
  position:absolute; top:10px; left:12px;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.55); color:#cfe0ff;
  font-size:.72rem; font-weight:600; padding:5px 10px; border-radius:999px;
  opacity:0; transform:translateY(-4px); transition:.2s; pointer-events:none;
  backdrop-filter:blur(4px);
}
.out-card:hover .out-zoomtip{opacity:1; transform:translateY(0)}
 
.out-end{
  display:inline-flex; align-items:center; gap:8px;
  color:#6b7aa3; font-size:.82rem; font-weight:600; padding:8px 4px 0;
}
.out-end i{color:#4ade80}
 
.out-stage::-webkit-scrollbar{width:7px}
.out-stage::-webkit-scrollbar-track{background:transparent}
.out-stage::-webkit-scrollbar-thumb{background:rgba(124,196,255,.22); border-radius:4px}
.out-stage::-webkit-scrollbar-thumb:hover{background:rgba(124,196,255,.4)}
 
/* ============ SINGLE-IMAGE ZOOM LIGHTBOX ============ */
.lb-overlay{
  position:fixed; inset:0; z-index:7000;
  display:none; flex-direction:column; background:#000;
  -webkit-user-select:none; user-select:none;
  animation:outFade .2s ease both;
}
.lb-overlay.show{display:flex}
 
.lb-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  padding-left:calc(14px + env(safe-area-inset-left,0px));
  padding-right:calc(14px + env(safe-area-inset-right,0px));
  background:rgba(0,0,0,.6); position:relative; z-index:6;
}
.lb-bar .out-titles{align-items:flex-start}
.lb-stage{
  flex:1 1 auto; min-height:0; height:0; position:relative;
  display:grid; place-items:center; overflow:hidden;
  touch-action:none;
}
.lb-img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  transform-origin:center center;
  transition:transform .22s cubic-bezier(.22,1,.36,1);
  cursor:zoom-in; will-change:transform;
}
.lb-stage.zoomed .lb-img{cursor:grab; transition:none}
.lb-stage.zoomed.dragging .lb-img{cursor:grabbing}
 
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; z-index:7;
  color:#fff; font-size:1.1rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px); transition:.16s;
}
.lb-nav:hover{background:rgba(59,130,246,.32); border-color:rgba(124,196,255,.5)}
.lb-nav:active{transform:translateY(-50%) scale(.9)}
.lb-prev{left:calc(14px + env(safe-area-inset-left,0px))}
.lb-next{right:calc(14px + env(safe-area-inset-right,0px))}
.lb-nav.hidden{display:none}
.lb-stage.zoomed ~ .lb-prev,
.lb-stage.zoomed ~ .lb-next{opacity:0; pointer-events:none}
 
.lb-hint{
  position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:7px;
  color:#cfe0ff; font-size:.78rem; font-weight:600;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.14);
  padding:7px 14px; border-radius:999px; backdrop-filter:blur(6px);
  pointer-events:none; opacity:.92; transition:opacity .3s;
}
.lb-overlay.zoomed-on .lb-hint{opacity:0}
 
@media (prefers-reduced-motion:reduce){
  .out-card{animation:none; opacity:1; transform:none}
  .out-overlay,.lb-overlay{animation:none}
}
 
/* ============ SMALL SCREENS ============ */
@media (max-width:600px){
  .out-bar,.lb-bar{gap:9px}
  .out-back{height:42px; padding:0 15px 0 13px; font-size:.9rem}
  .out-title{font-size:.92rem}
  .out-sub{font-size:.72rem}
  .out-count{min-width:46px; padding:6px 9px; font-size:.78rem}
  .out-close{width:42px; height:42px}
  .out-stage{padding:14px 10px calc(36px + env(safe-area-inset-bottom,0px)); gap:14px}
  .out-card{border-radius:13px}
  .lb-nav{width:42px; height:42px; font-size:1rem}
}