.site-login-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 184px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 4px 12px 4px 5px;
  font: 600 14px/1.3 'Athiti', 'Inter', sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.site-login-avatar { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #2563eb; color: #fff; font-weight: 700; }
.site-login-avatar[hidden] { display: none; }
.site-login-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-login-button:hover { border-color: var(--blue); color: var(--blue-soft); }
.site-login-button:focus-visible, .site-login-dialog button:focus-visible, .site-login-dialog input:focus-visible, .site-login-dialog a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.site-login-overlay[hidden] { display: none; }
.site-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 16, 32, .72);
}
.site-login-dialog {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  padding: 34px;
  font: 400 16px/1.5 'Athiti', 'Inter', sans-serif;
}
.site-login-dialog h2 { margin: 0 0 5px; font-size: 29px; }
.site-login-dialog p { margin: 0 0 22px; color: var(--muted); }
.site-login-dialog label { display: block; margin: 14px 0 5px; font-weight: 600; }
.site-login-dialog input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; }
.site-login-dialog .site-login-submit, .site-login-dialog .site-logout-submit { width: 100%; margin-top: 22px; padding: 12px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font: 700 16px/1.4 'Athiti','Inter',sans-serif; cursor: pointer; }
.site-login-dialog .site-login-submit:disabled { opacity: .65; cursor: wait; }
.site-login-dialog .site-logout-submit { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.site-login-dialog .site-login-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 26px; line-height: 1; }
.site-login-dialog .site-login-error { min-height: 20px; margin: 8px 0 0; color: #f87171; font-size: 14px; }
.site-login-dialog .site-login-help { margin: 18px 0 0; font-size: 14px; }
.site-login-dialog .site-login-help a { color: var(--blue-soft); }
@media (max-width: 480px) { .site-login-dialog { padding: 26px 20px; } }