.site-header-tools,
.sim-header-tools,
.auth-account {
  display: flex;
  align-items: center;
}

.site-header-tools,
.sim-header-tools {
  justify-self: end;
  gap: 10px;
}

.auth-account {
  min-height: 38px;
  gap: 8px;
  white-space: nowrap;
}

.auth-login-link,
.auth-logout-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid #b9dac7;
  border-radius: 10px;
  color: #285f48;
  background: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.auth-login-link:hover,
.auth-logout-button:hover {
  border-color: #4b9f75;
  background: #f1faf4;
}

.auth-logout-button:disabled { cursor: wait; opacity: .68; }
.auth-user-name { max-width: 8em; overflow: hidden; color: #285f48; font-size: .8rem; font-weight: 800; text-overflow: ellipsis; }

.auth-login-page main { width: min(100% - 28px, 620px); padding-top: clamp(28px, 7vw, 72px); }
.auth-login-card { padding: clamp(22px, 5vw, 38px); border: 1px solid #cce2d4; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 18px 48px rgba(41,94,69,.09); text-align: center; }
.auth-login-card h1 { margin: 0; color: #194f3b; font-family: "KaiTi", "STKaiti", serif; }
.auth-login-intro { margin: 12px auto 24px; color: #60776d; line-height: 1.75; }
.auth-qr-wrap { width: min(280px, 78vw); margin: 0 auto 18px; padding: 14px; border: 1px solid #d2e6d9; border-radius: 18px; background: #fff; }
.auth-qr-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.auth-login-status { min-height: 62px; }
.auth-login-status strong { display: block; color: #285f48; font-size: 1.05rem; }
.auth-login-status p { margin: 8px 0 0; color: #71877e; line-height: 1.6; }
.auth-login-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.auth-login-actions button { min-height: 44px; padding: 9px 18px; border: 1px solid #b9dac7; border-radius: 11px; color: #285f48; background: #fff; font-weight: 800; }
.auth-login-actions .auth-primary { border-color: #2f7d58; color: #fff; background: #2f7d58; }
.auth-login-actions button:disabled { cursor: wait; opacity: .7; }
.auth-login-note { margin: 24px 0 0; color: #7a8e85; font-size: .78rem; line-height: 1.65; }
body[data-auth-state="error"] .auth-login-status strong,
body[data-auth-state="expired"] .auth-login-status strong { color: #963c3c; }
body[data-auth-state="success"] .auth-login-status strong { color: #246143; }

@media (max-width: 1000px) {
  .site-header .site-header-tools { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; }
}

@media (max-width: 720px) {
  .site-header .site-header-tools { margin: 7px 0 0; padding-bottom: 9px; justify-content: flex-start; }
  .site-header .auth-account { margin-left: auto; }
  .auth-user-name { max-width: 7em; }
}

@media (max-width: 620px) {
  .sim-header-tools { gap: 6px; }
  .sim-header .back-home,
  .sim-header .auth-login-link,
  .sim-header .auth-logout-button { min-height: 40px; padding-inline: 9px; font-size: .74rem; }
  .sim-header .auth-user-name { display: none; }
}

.site-header:has(> .primary-nav) .site-header-tools { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.site-header:has(> .primary-nav) .auth-login-link,.site-header:has(> .primary-nav) .auth-logout-button { white-space: nowrap; }
@media (min-width: 721px) and (max-width: 1279px) {
  .site-header:has(> .primary-nav) .site-header-tools { grid-column: 2; grid-row: 1; justify-self: end; }
}
@media (max-width: 720px) {
  .site-header:has(> .primary-nav) .site-header-tools { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; padding: 0; }
  .site-header:has(> .primary-nav) .auth-account { margin-left: 0; }
}
@media (max-width: 560px) {
  .site-header:has(> .primary-nav) .site-header-tools { grid-column: 1 / -1; grid-row: 2; }
}