.viewer-header { min-height: 100px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--border-soft); }
.viewer-brand { display: block; margin-right: auto; }
.viewer-main { padding-block: 30px 32px; }
.viewer-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 26px; }
.viewer-heading h1 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); line-height: 1.12; }
.viewer-heading p { color: var(--muted); margin: 9px 0 0; }
.demo-tabs { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; }
.demo-tab { border: 1px solid var(--border-soft); color: var(--muted); border-radius: 4px; padding: 12px 18px; font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.demo-tab:hover { color: var(--text); border-color: var(--accent); }
.demo-tab[aria-current] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.demo-stage { position: relative; height: clamp(340px, 66vh, 820px); border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden; background: #171C19; }
.frame-host, .frame-host iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-stage:fullscreen { width: 100%; height: 100%; border: 0; border-radius: 0; }
.demo-loading { position: absolute; inset: 0; background: #171C19; color: #f4f7fa; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; pointer-events: none; }
.loading-mark { width: 46px; height: 46px; border: 2px solid #3a443d; border-top-color: #ff845d; border-radius: 50%; animation: loading-spin 1s linear infinite; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 18px; }
.viewer-toolbar button { padding: 0; border: 0; background: transparent; }
.viewer-help { font-size: .78rem; color: var(--muted); margin: 18px 0 0; }
.viewer-footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border-soft); padding-block: 24px; color: var(--muted); font-size: .78rem; }
#viewer-error { padding: 20px; background: var(--surface); border-radius: 4px; color: var(--text); }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .viewer-header { min-height: 80px; gap: 18px; }
  .viewer-brand .hero-logo { width: 62px; height: 62px; }
  .viewer-main { padding-top: 24px; }
  .viewer-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .viewer-heading .btn { min-height: 42px; font-size: .82rem; padding-inline: 16px; }
  .demo-stage { height: min(70svh, 740px); min-height: 360px; }
  .viewer-toolbar .text-link { font-size: .8rem; gap: 7px; }
  .viewer-footer { flex-wrap: wrap; }
}
@media (max-height: 500px) and (orientation: landscape) { .demo-stage { height: 85svh; min-height: 240px; } }
@media (prefers-reduced-motion: reduce) { .loading-mark { animation: none; } }