/* AcuPath QS1 — Viewer styles (target-like) */

:root{
  --v-bg: rgba(255,255,255,.04);
  --v-frame: rgba(255,255,255,.07);
  --v-glow: rgba(120,200,255,.08);
  --v-text: #cfe3f0;
  --v-text-dim: #95a7b6;
}

/* Narrower left column when viewer is present */
.page{ grid-template-columns: 200px 1fr !important; }

.card.ref{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px !important;
  border-radius:14px !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Viewer header */
.qs-viewer .v-head{
  font-weight:600;
  font-size:13px;
  color:var(--v-text);
  opacity:.95;
  margin:2px 2px 6px 2px;
}

/* Image frame */
.qs-viewer .v-frame{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4;
  border-radius:12px;
  background: var(--v-bg);
  box-shadow:
    inset 0 0 0 1px var(--v-frame),
    0 10px 24px rgba(0,0,0,.35);
  overflow:hidden;
}

/* Inner glow sits below the image */
.qs-viewer .v-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: radial-gradient(120% 80% at 50% 20%, var(--v-glow), transparent 60%);
  pointer-events:none;
}

/* The point image itself */
.qs-viewer .v-img{
  position:absolute;
  inset:10px;
  z-index:2;  /* above glow */
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  object-fit:contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Caption */
.qs-viewer .v-cap{
  font-size:12px;
  color:var(--v-text-dim);
  margin:2px;
}

/* Spacer beneath viewer (for future controls) */
.qs-viewer .v-spacer{
  height:110px;
  border-radius:10px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}