.viewer-account-dialog [hidden] { display: none !important; }
.viewer-account-dialog { position: fixed; inset: 0; margin: auto; width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; border: 1px solid var(--dd-line); border-radius: 18px; background: var(--dd-surface); color: var(--dd-text); box-shadow: 0 20px 60px rgb(0 0 0 / 36%); }
.viewer-account-dialog::backdrop { background: rgb(0 0 0 / 56%); backdrop-filter: blur(4px); }
.viewer-account-dialog h2 { margin: 0 32px 16px 0; font-size: 20px; line-height: 1.3; }
.viewer-account-dialog p { margin: 12px 0; font-size: 14px; line-height: 1.7; }
#viewer-close-login { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--dd-muted); cursor: pointer; font-size: 22px; line-height: 1; }
#viewer-close-login:hover { background: var(--dd-soft); color: var(--dd-text); }
#viewer-account-notice { color: var(--dd-muted); font-size: 13px; }
#viewer-account-notice:empty { display: none; }
#viewer-start-login { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 20px; padding: 12px 18px; border-radius: 12px; background: var(--dd-accent); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; text-align: center; transition: background 0.15s ease; }
#viewer-start-login:hover { background: var(--dd-accent-hover); }