/* Device preview viewer */
html, body { height: 100%; }
body.viewer { display: flex; flex-direction: column; overflow: hidden; background: #DFE4EA; }
.vbar { flex: none; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px; background: var(--ink); color: #fff; }
.vbar a, .vbar button { color: #fff; }
.vbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #fff; font: 600 14px/1 var(--font); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s; }
.vbtn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); color: #fff; }
.vbtn .icon { width: 18px; height: 18px; }
.vbtn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.vtitle { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.vtitle b { font: 700 15px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtitle span { font-size: 13px; color: #B9C4CE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdevices { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.vdevices button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #C9D2DA; font: 600 13px/1 var(--font); cursor: pointer; }
.vdevices button:hover { color: #fff; }
.vdevices button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.vdevices .icon { width: 17px; height: 17px; }
.vnav { display: inline-flex; gap: 6px; }
.vbar .btn-primary { min-height: 40px; }
.vstage { flex: 1; min-height: 0; position: relative; display: grid; place-items: start center; overflow: auto; padding: 0; }
.vframe { position: relative; transform-origin: top center; background: #fff; }
.vframe iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.vframe[data-d="desktop"] { width: 100%; height: 100%; }
.vstage[data-d="desktop"] { place-items: stretch; }
.vframe[data-d="tablet"], .vframe[data-d="phone"] { border-radius: 26px; border: 10px solid #0E1A22; box-shadow: 0 30px 60px -24px rgba(0, 15, 8, .5); overflow: hidden; }
.vframe[data-d="phone"] { border-radius: 40px; border-width: 12px; }
.vhint { position: absolute; left: 16px; bottom: 12px; font-size: 12px; color: #4A5763; }
@media (max-width: 1100px) { .vdevices button span { display: none; } }
@media (max-width: 860px) {
  .vbar { gap: 8px; padding: 0 10px; }
  .vdevices, .vhint { display: none; }
  .vbar .btn-primary span { display: none; }
  .vbar .btn-primary { padding: 0 12px; }
  .vback span { display: none; }
}