.dh-login-viewer { box-sizing: border-box; width: min(1320px, 98vw); max-height: 96vh; padding: 12px; border: 1px solid #777; border-radius: 6px; background: #fff; color: #171717; overflow: auto; }
.dh-login-viewer::backdrop { background: rgba(0, 0, 0, .7); }
.dh-viewer-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dh-viewer-bar h2 { font-size: 18px; margin: 0; }
.dh-viewer-bar [role="status"] { flex: 1; min-width: 180px; font-size: 13px; overflow-wrap: anywhere; }
.dh-viewer-auth { max-width: 420px; padding: 20px 0; }
.dh-viewer-auth label { display: grid; gap: 8px; margin-bottom: 12px; }
.dh-viewer-auth input { box-sizing: border-box; width: 100%; }
.dh-viewer-screen { width: 100%; height: auto; aspect-ratio: 8 / 5; display: block; background: #202020; touch-action: none; outline-offset: 2px; }
.dh-viewer-screen[hidden], .dh-viewer-auth[hidden], .dh-viewer-mobile-controls[hidden] { display: none; }
.dh-viewer-mobile-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dh-viewer-mobile-input { flex: 1; min-width: 180px; }
@media (max-width: 600px) { .dh-viewer-bar button { min-height: 40px; } .dh-viewer-screen { min-width: 640px; } }