/* ============================================================================
   Viewer — the platform's chrome around a shared deck.
   The FRAME is platform-owned (neutral). The SLIDE content is the creator's,
   styled under .brand-atlas — the platform never restyles it. The theme slot
   lets the chrome's accents pick up the creator's brand color (--brand).
   ============================================================================ */

.viewer-body {
  margin: 0; height: 100vh; overflow: hidden;
  background: #0e1116;               /* neutral stage — lets the deck float */
  display: flex; flex-direction: column;
  /* theme slot: creator's brand color feeds the chrome accents */
  --brand: #C2612F;
  --brand-soft: rgba(194,97,47,.16);
}

/* --- viewer top bar (platform chrome) --- */
.vbar {
  height: 54px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: rgba(20,24,31,.82); backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.07); color: #e9edf4; z-index: 20;
}
/* creator brand slot */
.vbar .brand-slot { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vbar .brand-slot .logo {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--brand); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.vbar .brand-slot .logo svg { width: 17px; height: 17px; }
.vbar .brand-slot .nm { min-width: 0; }
.vbar .brand-slot .nm b { font-size: 13.5px; font-weight: 600; display: block; letter-spacing: -.01em; white-space: nowrap; }
.vbar .brand-slot .nm span { font-size: 11.5px; color: #9aa3b2; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbar .vdivider { width: 1px; height: 22px; background: rgba(255,255,255,.12); }
.vbar .spacer { flex: 1; }

.vcount { font-size: 12.5px; font-variant-numeric: tabular-nums; color: #b6bece; font-weight: 500; }
.vcount b { color: #fff; font-weight: 600; }

.vchip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #cdd4df;
  padding: 5px 11px 5px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
}
.vchip .av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; background: #4f7fd0; }
.vbtn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04);
  color: #cdd4df; display: grid; place-items: center; cursor: pointer; transition: .14s;
}
.vbtn:hover { background: rgba(255,255,255,.1); color: #fff; }
.vbtn svg { width: 16px; height: 16px; }
.vbtn.disabled { opacity: .4; cursor: not-allowed; }

/* --- stage --- */
.stage { flex: 1; position: relative; display: grid; place-items: center; padding: 30px 76px; min-height: 0; }
.slide-frame {
  position: relative; width: 100%; max-width: min(1120px, calc((100vh - 190px) * 1.6));
  aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  background: #000;
}
.slide-frame .slide-mount { position: absolute; inset: 0; }

/* nav arrows */
.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 15;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1);
  background: rgba(20,24,31,.6); backdrop-filter: blur(8px); color: #e9edf4;
  display: grid; place-items: center; cursor: pointer; transition: .16s; opacity: .0;
}
.stage:hover .nav-arrow { opacity: .9; }
.nav-arrow:hover { background: rgba(30,36,46,.9); transform: translateY(-50%) scale(1.06); }
.nav-arrow[disabled] { opacity: 0 !important; pointer-events: none; }
.nav-arrow.prev { left: 16px; }
.nav-arrow.next { right: 16px; }
.nav-arrow svg { width: 20px; height: 20px; }

/* --- bottom bar: progress rail + thumbs toggle --- */
.vfoot { flex: none; padding: 12px 18px 14px; background: rgba(20,24,31,.82); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.07); }
.rail { display: flex; gap: 4px; align-items: center; }
.rail .seg-r { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; cursor: pointer; transition: height .12s; }
.rail .seg-r:hover { height: 8px; }
.rail .seg-r .f { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width .3s ease; }
.rail .seg-r.seen .f { width: 100%; }
.rail .seg-r.current .f { width: var(--p, 40%); }
.vfoot .frow { display: flex; align-items: center; gap: 14px; margin-top: 11px; }
.vfoot .ftitle { font-size: 12.5px; color: #b6bece; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfoot .ftitle b { color: #fff; font-weight: 600; }
.vfoot .powered { font-size: 11px; color: #6b7484; display: inline-flex; align-items: center; gap: 6px; }
.vfoot .powered .g { width: 15px; height: 15px; border-radius: 4px; background: linear-gradient(145deg,#3a86e0,#1f62b4); display: grid; place-items: center; }
.vfoot .powered .g svg { width: 9px; height: 9px; color: #fff; }

/* thumbnail strip */
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: thin; }
.thumbs.hidden { display: none; }
.thumbs .th { flex: none; width: 132px; aspect-ratio: 16/10; border-radius: 7px; overflow: hidden; position: relative; cursor: pointer; border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: .14s; }
.thumbs .th .thumb-scale { position: absolute; inset: 0; }
.thumbs .th .n { position: absolute; left: 5px; bottom: 4px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,.5); padding: 1px 6px; border-radius: 5px; z-index: 2; font-variant-numeric: tabular-nums; }
.thumbs .th:hover { transform: translateY(-2px); }
.thumbs .th.active { border-color: var(--brand); }