/* Vault Demos — client viewer (also used for the admin preview) */
.vd-page { margin: 0; background: #0f0f11; height: 100vh; height: 100dvh; overflow: hidden;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; color: #ececee; }
.vd-page #viewer { height: 100%; }
.vd-boot { height: 100%; display: grid; place-items: center; }
.vd-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #37383e; border-top-color: #ed3057; animation: vdspin .8s linear infinite; }
@keyframes vdspin { to { transform: rotate(360deg); } }

.vd-viewer { display: flex; flex-direction: column; height: 100%; background: #0f0f11; color: #ececee; }
.vd-viewer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.vd-bar { position: relative; flex: none; height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 14px; background: #141416; border-bottom: 1px solid #26272c; z-index: 2; }
.vd-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vd-right { justify-content: flex-end; }
.vd-logo { height: 32px; max-width: 120px; display: grid; place-items: center; background: #fff; border-radius: 6px; padding: 3px 7px; flex: none; }
.vd-logo.dark { background: #26272c; }
.vd-logo img { max-height: 26px; max-width: 106px; object-fit: contain; display: block; }
.vd-client { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.vd-tz { height: 22px; width: auto; opacity: .75; }

.vd-nav { position: relative; display: flex; align-items: center; gap: 6px; }
.vd-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #33343a; background: #1c1d21; color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background .12s, border-color .12s, transform .12s; }
.vd-arrow:hover:not(:disabled) { background: #ed3057; border-color: #ed3057; }
.vd-arrow:active:not(:disabled) { transform: scale(.94); }
.vd-arrow:disabled { opacity: .35; cursor: default; }
.vd-arrow:focus-visible, .vd-title:focus-visible, .vd-icon:focus-visible, .vd-pick button:focus-visible { outline: 2px solid #ed3057; outline-offset: 2px; }
.vd-title { display: flex; align-items: center; gap: 8px; min-width: 190px; justify-content: center; height: 36px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; color: #fff; cursor: pointer; font: inherit; }
.vd-title:hover { background: #1f2024; }
.vd-title b { font-weight: 650; font-size: 14.5px; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.vd-count { color: #8a8b90; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vd-title svg { width: 14px; height: 14px; color: #8a8b90; }
.vd-empty-t { color: #8a8b90; }

.vd-pick { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 240px; max-height: 60vh; overflow: auto;
  background: #1c1d21; border: 1px solid #33343a; border-radius: 10px; padding: 4px; box-shadow: 0 16px 48px rgba(0,0,0,.55); }
.vd-pick button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; color: #ececee; font: inherit; text-align: left; cursor: pointer; }
.vd-pick button:hover { background: #26272c; }
.vd-pick button[aria-selected="true"] { background: #3a1720; color: #fff; }
.vd-pick .n { width: 22px; height: 22px; border-radius: 6px; background: #26272c; display: grid; place-items: center; font-size: 11.5px; font-weight: 650; color: #b4b5ba; flex: none; }
.vd-pick button[aria-selected="true"] .n { background: #ed3057; color: #fff; }

.vd-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #b4b5ba; background: none; border: 0; cursor: pointer; }
.vd-icon:hover { background: #1f2024; color: #fff; }

.vd-loading { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; transition: opacity .2s; }
.vd-loading::after { content: ""; position: absolute; inset: 0; width: 35%; background: #ed3057; animation: vdslide 1s ease-in-out infinite; }
.vd-viewer.loading .vd-loading { opacity: 1; }
@keyframes vdslide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

.vd-stage { position: relative; flex: 1; min-height: 0; background: #fff; }
.vd-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; transition: opacity .18s; }
.vd-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; background: #0f0f11; color: #ececee; }
.vd-empty.vd-full { position: fixed; }
.vd-empty h2 { margin: 0 0 6px; font-size: 18px; }
.vd-empty p { margin: 0; color: #8a8b90; }
.vd-tz-big { width: 180px; margin: 0 auto 22px; opacity: .85; }

@media (max-width: 720px) {
  .vd-bar { grid-template-columns: auto 1fr auto; padding: 0 8px; gap: 6px; }
  .vd-client, .vd-tz { display: none; }
  .vd-nav { justify-content: center; min-width: 0; }
  .vd-title { min-width: 0; flex: 1; padding: 0 6px; }
  .vd-title b { max-width: 40vw; }
  .vd-count { display: none; }
  .vd-logo { max-width: 72px; padding: 3px 5px; }
  .vd-logo img { max-width: 62px; }
}