/* 登录页 */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: linear-gradient(165deg, #eaf0ff 0%, #f7f9ff 48%, #ffffff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}

.wrap { width: 100%; max-width: 420px; }

.card {
  background: #fff;
  border-radius: 22px;
  padding: 34px 26px 26px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, .10), 0 2px 8px rgba(16, 24, 40, .04);
}

.logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1a56f0, #5b93ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(26, 86, 240, .30);
}

.logo svg { width: 32px; height: 32px; fill: #fff; }

h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  color: #101828;
  text-align: center;
  letter-spacing: -.2px;
}

.sub {
  margin: 0 0 26px;
  font-size: 13px;
  color: #667085;
  text-align: center;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  margin: 0 0 7px;
}

input {
  width: 100%;
  height: 50px;
  border: 1.5px solid #e4e9f2;
  border-radius: 13px;
  padding: 0 15px;
  font-size: 16px;
  color: #101828;
  background: #fff;
  margin-bottom: 16px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}

input::placeholder { color: #b6bfcc; }
input:focus { border-color: #1a56f0; box-shadow: 0 0 0 3px rgba(26, 86, 240, .12); }

button {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #1a56f0, #3d7bff);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 12px 26px rgba(26, 86, 240, .30);
  transition: transform .12s, box-shadow .18s, opacity .18s;
  margin-top: 4px;
}

button:active { transform: scale(.98); box-shadow: 0 6px 14px rgba(26, 86, 240, .24); }
button[disabled] { opacity: .62; cursor: default; }

.err {
  display: none;
  font-size: 13px;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.err.show { display: block; }

.foot {
  margin: 20px 0 0;
  font-size: 12px;
  color: #98a2b3;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  body { background: linear-gradient(165deg, #0b1220 0%, #101828 58%, #0b1220 100%); }
  .card { background: #131c2e; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
  h1 { color: #f2f4f7; }
  .sub { color: #98a2b3; }
  label { color: #cdd5e0; }
  input { background: #0d1524; border-color: #24304a; color: #f2f4f7; }
  .err { background: #2b1216; border-color: #5c1f26; color: #fda29b; }
}