/**
 * [INPUT]: 依赖 lore-ui.css 的交互令牌、login.ts 输出的 App 返回栏与邮箱验证码表单
 * [OUTPUT]: 提供 A7 淡蓝认证工作区、动态视口稳定、紧凑表单状态、触控反馈、响应式与无障碍降级
 * [POS]: public 模块的认证视觉层，让邮箱验证在所有视口中成为唯一主任务
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

html,
body {
  background: #f0f2ff;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: #20222b;
}

.login-shell {
  width: min(100%, 680px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 22px 48px;
  display: grid;
  align-content: start;
}

.login-app-header {
  width: 100%;
  min-height: 96px;
  padding: 20px 4px 15px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(106, 116, 155, 0.13);
}

.login-app-back {
  width: 34px;
  height: 34px;
  padding: 3px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background-color 140ms var(--ease-out), transform 120ms var(--ease-out);
}

.login-app-back img {
  width: 30px;
  height: 30px;
  display: block;
}

.login-app-back:active {
  transform: scale(0.92);
}

.login-app-heading {
  min-width: 0;
  display: grid;
  justify-items: center;
  line-height: 1.15;
}

.login-app-heading > span {
  color: #6f7891;
  font-size: 11px;
  font-weight: 650;
}

.login-app-heading h1 {
  margin: 2px 0 0;
  color: #1e2028;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0;
}

.login-header-spacer {
  width: 34px;
  height: 34px;
}

.login-layout {
  width: min(100%, 520px);
  margin: 18px auto 0;
}

.login-card {
  padding: 24px;
  border: 1px solid #b7d4ed;
  border-radius: 9px;
  background: rgba(248, 250, 255, 0.96);
  box-shadow: 0 1px 2px rgba(70, 92, 130, 0.04);
}

.login-card-head {
  margin-bottom: 20px;
}

.login-card h2 {
  margin: 0;
  color: #20222b;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.login-card-head p {
  margin: 6px 0 0;
  color: #6f7484;
  font-size: 12px;
  line-height: 1.55;
}

#loginForm {
  display: grid;
  gap: 14px;
}

.field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.field label {
  color: #3f4350;
  font-size: 12px;
  font-weight: 680;
}

.field label span {
  margin-left: 4px;
  color: #858b9c;
  font-weight: 520;
}

.field input {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  color: #20222b;
  border: 1px solid #c5cee0;
  border-radius: 7px;
  background: #f8f9fd;
  font-size: 13px;
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}

.field input::placeholder {
  color: #858b9c;
}

.field input:focus {
  border-color: #7397c4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(85, 118, 164, 0.1);
}

.field input[aria-invalid="true"] {
  border-color: rgba(179, 59, 51, 0.62);
  box-shadow: 0 0 0 3px rgba(179, 59, 51, 0.08);
}

.code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.send-btn,
.submit-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out), transform 100ms var(--ease-out), opacity 150ms var(--ease-out);
}

.send-btn {
  min-width: 104px;
  padding: 0 14px;
  color: #355f94;
  border: 1px solid #a8c6ed;
  background: #edf5ff;
}

.submit-btn {
  width: 100%;
  margin-top: 2px;
  color: #fff;
  border: 1px solid #355f94;
  background: #355f94;
}

.send-btn:active:not(:disabled),
.submit-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.send-btn:disabled,
.submit-btn:disabled {
  color: #858b9c;
  border-color: #d2d8e5;
  background: #eef0f5;
  cursor: not-allowed;
}

.msg {
  min-height: 18px;
  color: #6f7484;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.msg.ok { color: var(--success); }
.msg.err { color: var(--danger); }

.privacy-note {
  margin: 15px 0 0;
  padding-top: 13px;
  color: #727888;
  border-top: 1px solid rgba(106, 116, 155, 0.16);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .login-app-back:hover {
    background: rgba(85, 118, 164, 0.08);
  }

  .send-btn:hover:not(:disabled) {
    border-color: #7397c4;
    background: #e5f0ff;
  }

  .submit-btn:hover:not(:disabled) {
    background: #2c5485;
  }
}

@media (max-width: 620px) {
  .login-shell {
    padding: 0 12px 32px;
  }

  .login-app-header {
    min-height: 82px;
    padding: 14px 2px 11px;
  }

  .login-layout {
    margin-top: 12px;
  }

  .login-card {
    padding: 20px 16px;
  }
}

@media (max-width: 340px) {
  .code-row {
    grid-template-columns: 1fr;
  }

  .send-btn {
    width: 100%;
  }
}

@media (prefers-contrast: more) {
  .login-card,
  .field input,
  .send-btn {
    border-color: #6b7690;
  }
}