/* Viewer: de nextriq.nl-navbar (64px) boven een schermvullende demo */
html, body.viewer { height: 100%; }
body.viewer { overflow: hidden; display: flex; flex-direction: column; height: 100dvh; }

.vbar { position: relative; z-index: 20; flex: none; display: flex; align-items: center; gap: 12px; height: 4rem; padding: 0 1.25rem 0 1rem; background: hsl(var(--background) / .95); border-bottom: 1px solid hsl(var(--border) / .5); }
.vb-back { display: inline-flex; align-items: center; gap: 10px; height: 2.25rem; padding: 0 .6rem 0 .35rem; border-radius: .6rem; color: hsl(var(--muted-foreground)); transition: background .2s, color .2s; }
.vb-back:hover { background: hsl(var(--secondary) / .6); color: hsl(var(--foreground)); }
.vb-back svg { width: 16px; height: 16px; }
.vb-sep { width: 1px; height: 22px; background: hsl(var(--border)); }

.vb-menu, .vb-brand { position: relative; }
.vb-menu summary, .vb-brand summary { list-style: none; cursor: pointer; }
.vb-menu summary::-webkit-details-marker, .vb-brand summary::-webkit-details-marker { display: none; }
.vb-menu summary { display: inline-flex; align-items: center; gap: 10px; height: 2.4rem; padding: 0 .8rem; border-radius: .7rem; transition: background .2s; }
.vb-menu summary:hover, .vb-menu[open] summary { background: hsl(var(--secondary) / .6); }
.vb-menu-k { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--accent) / .8); }
.vb-menu-v { font-size: .95rem; font-weight: 700; letter-spacing: -0.015em; }
.vb-menu svg { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); transition: transform .2s; }
.vb-menu[open] svg { transform: rotate(180deg); }

.vb-pop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; min-width: 280px; padding: 8px; border-radius: 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: 0 30px 60px -20px #000, 0 0 40px -20px hsl(var(--accent) / .4); animation: pop .22s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.vb-list h2 { margin: 10px 10px 6px; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--accent) / .8); }
.vb-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: .6rem; font-weight: 600; font-size: .9rem; }
.vb-list a:hover { background: hsl(var(--secondary) / .6); }
.vb-list a[aria-current="page"] { background: hsl(var(--accent) / .12); }
.vb-list a[aria-current="page"]::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--accent)); }

.vb-live { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(16, 185, 129, .3); background: rgba(16, 185, 129, .08); padding: .3rem .8rem; font-size: 12px; font-weight: 500; color: hsl(var(--foreground) / .85); }
.vb-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.vb-brand summary { height: 2.25rem; padding: 0 1rem; font-size: 13px; font-weight: 500; gap: 9px; }
.vb-dot { width: 12px; height: 12px; border-radius: 50%; background: hsl(var(--accent)); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .2); }
.vb-brand-pop { left: auto; right: 0; width: 330px; padding: 18px; display: grid; gap: 18px; }
.vb-brand-pop .field input { height: 2.9rem; }
.vb-brand-pop .swatches { gap: 8px; flex-wrap: nowrap; }
.vb-brand-pop .sw { width: 32px; height: 32px; }

.vb-device { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid hsl(var(--border) / .8); }
.vb-device button { display: grid; place-items: center; width: 34px; height: 28px; border: 0; border-radius: 999px; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; transition: background .2s, color .2s; }
.vb-device button svg { width: 16px; height: 16px; }
.vb-device button[aria-pressed="true"] { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.vb-cta-s { display: none; }

.stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: hsl(var(--background)); transition: padding .5s var(--ease); }
.frame { position: relative; width: 100%; height: 100%; background: #fff; overflow: hidden; transition: width .5s var(--ease), height .5s var(--ease), border-radius .5s var(--ease), box-shadow .5s; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.stage.mobile { padding: 24px; background: radial-gradient(55% 60% at 50% 40%, hsl(263 80% 45% / .22), transparent 70%), hsl(var(--background)); }
.stage.mobile .frame { width: 390px; height: min(844px, 100%); border-radius: 34px; box-shadow: 0 0 0 8px #0b0b0d, 0 0 0 9px hsl(0 0% 100% / .12), 0 50px 100px -30px #000, 0 0 60px -20px hsl(var(--accent) / .5); }

.frame-load { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #f4f4f6; color: #555; font-family: var(--mono); font-size: 12px; transition: opacity .5s var(--ease); }
.frame-load > div { display: flex; align-items: center; gap: 12px; }
.frame-load.done { opacity: 0; pointer-events: none; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ddd; border-top-color: hsl(var(--accent)); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) { .vb-live { display: none; } }
@media (max-width: 860px) { .vb-device, .vb-brand { display: none; } }
@media (max-width: 560px) {
  .vbar { gap: 6px; padding: 0 .75rem 0 .4rem; }
  .vb-back .logo { font-size: 1rem; }
  .vb-sep { display: none; }
  .vb-menu summary { padding: 0 .5rem; gap: 6px; }
  .vb-menu-k { display: none; }
  .vb-cta-l { display: none; } .vb-cta-s { display: inline; }
  .vbar .btn-nav { padding: 0 .9rem; }
  .vbar .btn-nav svg { display: none; }
  .vb-pop { position: fixed; left: 8px; right: 8px; top: 68px; min-width: 0; }
}