.login-page { margin: 0; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: #fff; padding: 24px; box-sizing: border-box; }
.login-main { width: 100%; max-width: 360px; min-width: 0; }
.login-main > img { display: block; margin: 0 auto; border-radius: 8px; }
.login-main h1 { margin: 20px 0 32px; font-size: 24px; font-weight: 600; text-align: center; }
#loginForm { padding: 20px; border: 1px solid #dbeafe; border-radius: 8px; background: #eff6ff; }
#loginForm > label:first-child { margin-top: 0; }
.login-main label { display: block; margin: 18px 0 8px; color: #475569; }
.login-main input { height: 42px; width: 100%; padding: 0 12px; }
.login-code-row { display: flex; gap: 10px; }
.login-code-row input { flex: 1; width: 0; }
.login-main button { border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; color: #475569; font: inherit; padding: 0 14px; cursor: pointer; height: 42px; white-space: nowrap; }
.login-main button:disabled { opacity: .5; cursor: not-allowed; }
#loginButton { width: 100%; background: #3b82f6; color: #fff; border-color: #3b82f6; }
#loginMessage { min-height: 20px; line-height: 20px; font-size: 13px; color: #15803d; overflow-wrap: anywhere; }
#loginMessage.error { color: #dc2626; }
.login-link { display: block; margin-top: 12px; color: #2563eb; font-size: 13px; text-align: center; text-decoration: none; }
.login-link:hover { text-decoration: underline; }
.login-community { display: flex; align-items: center; gap: 16px; padding: 16px; margin-top: 20px; background: #f0fdf4; border: 1px solid #d1eadb; border-radius: 8px; }
.login-community-qr { display: block; flex: 0 0 112px; width: 112px; height: 112px; background: #fff; border-radius: 6px; overflow: hidden; }
.login-community-qr:focus-visible { outline: 3px solid #3b82f6; outline-offset: 4px; }
.login-community-qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.login-community-copy { min-width: 0; }
.login-community h2 { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: #253b32; }
.login-community p { margin: 4px 0; color: #536b5e; font-size: 12px; line-height: 1.6; }
.login-community-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 4px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 600; }
.login-community-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (max-width: 340px) {
  .login-community { flex-direction: column; text-align: center; }
}