* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(160deg, #e8f0fe 0%, #f6f8fc 45%, #eef2f7 100%);
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .box { background: #fff; border: 1px solid #e5eaf2; border-radius: 20px; padding: 40px 36px;
    width: 100%; max-width: 400px; box-shadow: 0 8px 30px rgba(16,24,40,.08); text-align: center; }
  .logo { width: 60px; height: 60px; margin: 0 auto 16px; background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px;
    box-shadow: 0 8px 20px rgba(37,99,235,.35); }
  h1 { font-size: 20px; margin-bottom: 6px; color: #1f2937; }
  .sub { color: #6b7280; font-size: 13px; margin-bottom: 22px; }
  input { width: 100%; padding: 12px 14px; border: 1px solid #e5eaf2; border-radius: 12px; font-size: 16px;
    margin-bottom: 12px; font-family: inherit; background: #fbfcfe; transition: border-color .15s, box-shadow .15s; }
  input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
  button { width: 100%; padding: 13px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; font-size: 16px; cursor: pointer;
    font-family: inherit; box-shadow: 0 4px 14px rgba(37,99,235,.3); transition: all .15s; }
  button:hover { filter: brightness(1.06); transform: translateY(-1px); }
  button:disabled { opacity: .6; cursor: wait; transform: none; }
  .msg { font-size: 13px; margin-top: 10px; min-height: 18px; color: #dc2626; word-break: break-all; }
  .msg.ok { color: #16a34a; }
  .links { margin-top: 16px; display: flex; justify-content: center; gap: 22px; font-size: 13px; }
  .links a { color: #2563eb; text-decoration: none; cursor: pointer; }
  .links a:hover { text-decoration: underline; }
  .back { display: inline-block; margin-top: 14px; font-size: 13px; color: #6b7280; cursor: pointer; }
  .back:hover { color: #2563eb; text-decoration: underline; }
  .remember { display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: -2px 0 14px; font-size: 13px; color: #6b7280; cursor: pointer; user-select: none; }
  .remember input { width: auto; margin: 0; accent-color: #2563eb; cursor: pointer; }
  .code-row { display: flex; gap: 10px; }
  .code-row input { flex: 1; margin-bottom: 12px; }
  .code-row button { flex: 0 0 118px; padding: 12px 0; font-size: 13px; box-shadow: none; margin-bottom: 12px; }
  @media (max-width:480px) { .box { padding:28px 22px; border-radius:16px; } }

/* 2026-09 视觉精修：登录页柔光层次 + 入场动效 */
body {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(760px 360px at -8% 108%, rgba(124,58,237,.10), transparent 60%),
    linear-gradient(160deg, #e8f0fe 0%, #f6f8fc 45%, #eef2f7 100%);
}
.box { animation: login-in .32s ease; backdrop-filter: blur(2px); }
.logo { animation: logo-pop .4s ease; }
.links a { transition: color .15s; }
input, button { transition: border-color .15s, box-shadow .15s, transform .15s, filter .15s; }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); }
@keyframes login-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes logo-pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .box, .logo, button { animation: none; transform: none !important; }
}

/* 添加到主屏幕（PWA）：全屏运行时的安全区与视口高度 */
body {
  min-height: 100dvh;                                  /* iOS 上 100vh 会偏高，底部留白 */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}