#previewLoginDialog,#previewManageDialog,#previewRecoveryCodeDialog {
  position:fixed; inset:0; margin:auto; width:min(92vw,440px); max-height:90dvh;
  box-sizing:border-box; border:1px solid #d7d0c3; border-radius:10px; padding:clamp(20px,5vw,32px);
  background:#fffdf8; color:#292722; box-shadow:0 16px 44px #39312619;
}
#previewLoginDialog::backdrop { background:#f4f1ea; }
#previewManageDialog::backdrop { background:#302e2766; }
#previewRecoveryCodeDialog::backdrop { background:#302e2766; }
#previewRecoveryCodeDialog textarea { width:100%; box-sizing:border-box; margin:12px 0; }
#previewLoginDialog h1,#previewManageDialog h1 { font-size:1.5rem; margin:0 0 16px; }
#previewLoginDialog form:not([hidden]),#previewManageDialog form { display:grid; gap:12px; }
#previewLoginDialog label,#previewManageDialog label { display:grid; gap:5px; font-weight:700; }
#previewLoginDialog .account-check { display:flex; align-items:center; gap:8px; font-size:.9rem; }
#previewLoginDialog .account-check input { width:20px; height:20px; accent-color:#77551e; }
#previewLoginForm label { justify-content:stretch; }
#previewLoginForm .account-check {
  justify-content:flex-start; justify-self:start; gap:0; cursor:pointer;
  border:1px solid #d7d0c3; border-radius:5px; background:#fffdf8;
}
#previewLoginForm .account-check input { flex:none; width:16px; height:16px; margin:0 8px; cursor:pointer; }
#previewLoginForm .account-check span {
  border-inline-start:1px solid #d7d0c3; border-radius:0 4px 4px 0;
  padding:6px 9px; background:#eeeae2; color:#403b32;
}
#previewLoginForm .account-message:empty { display:none; }
@media (orientation:landscape) and (max-height:450px) {
  #previewLoginDialog:has(#previewLoginForm:not([hidden])) { padding-block:16px; }
  #previewLoginDialog #previewLoginForm:not([hidden]) { gap:8px; }
  #previewLoginForm h1 { margin-bottom:0; }
}
#previewLoginDialog label small { color:#675f51; font-weight:500; }
#previewLoginDialog input:not([type=checkbox]),#previewManageDialog input,#previewManageDialog select {
  box-sizing:border-box; width:100%; max-width:none; min-height:44px; border:1px solid #d7d0c3; border-radius:6px; padding:8px 10px; color:#292722; background:#fffdf8; font-size:16px;
}
#previewLoginDialog :focus-visible,#previewManageDialog :focus-visible,#previewManageAccounts:focus-visible {
  outline:2px solid #926722; outline-offset:2px;
}
#previewLoginDialog button,#previewManageDialog button,#previewManageAccounts {
  min-height:44px; border:0; border-radius:8px; padding:8px 12px;
  background:#35332e; color:#fffdf8; font-weight:700; cursor:pointer; box-shadow:none;
}
#previewLoginDialog .account-link,#previewManageDialog .account-link { background:#f4ead3; color:#40331c; border:1px solid #dbcbab; }
#previewLoginDialog .account-brand { color:#78561f; font-size:1.7rem; font-weight:800; }
.account-message { color:#992038; }
#previewManageAccounts:not([hidden]) { position:fixed; right:16px; bottom:84px; z-index:1001; }
#previewLoginDialog [hidden],#previewManageAccounts[hidden] { display:none!important; }
#previewManageDialog [hidden] { display:none!important; }
.preview-account-toolbar { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin:12px 0 6px; }
.preview-account-toolbar #previewAccountSearch {
  width:min(100%,210px); min-height:32px; margin:0; padding:5px 8px;
  border:1px solid #d9d9d9; border-radius:3px; background:#fff;
}
.preview-account-table { overflow-x:auto; background:#fff; }
.preview-account-table table { width:100%; min-width:650px; border-collapse:collapse; font-size:.84rem; color:#272727; }
.preview-account-table th,.preview-account-table td { padding:7px 9px; text-align:center; border:1px solid #e2e2e2; vertical-align:middle; }
.preview-account-table th { background:#f7f7f7; font-weight:700; }
.preview-account-table td:first-child,.preview-account-table td:nth-child(2) { overflow-wrap:anywhere; }
.preview-account-table td:nth-child(3) { white-space:nowrap; }
.preview-login-history { margin-top:4px; color:#555; font-size:.78rem; }
.preview-login-history summary { width:max-content; margin:auto; padding:3px 5px; color:#365573; cursor:pointer; }
.preview-login-history[open] > div { padding:3px 0; border-top:1px solid #eee; }
.preview-account-table tr[hidden] { display:none!important; }
.preview-account-table button {
  min-height:28px; margin:2px; padding:4px 8px; border:1px solid #d5d5d5;
  border-radius:3px; background:#fff; color:#262626; font-size:.78rem; box-shadow:none;
}
.preview-account-table button:hover { background:#f1f4f7; }
.preview-account-count { margin-top:8px; font-size:.78rem; color:#575757; }