/* 登录页：左侧电站晨景，右侧登录卡片。字体全部用系统自带（内网 / 离线可用）：
   中文 苹方 / 微软雅黑；数字与英文用 DIN 风格（macOS: DIN Alternate，Windows: Bahnschrift） */
:root {
  --navy-900: #081a29;
  --navy-800: #0c2437;
  --navy-700: #12324a;
  --navy-500: #2b5878;
  --ink: #142433;
  --muted: #6b7682;
  --line: #dcd6cb;
  --paper: #f5f2ec;
  --card: #fffdf9;
  --amber: #f59e0b;
  --amber-600: #d98706;
  --amber-100: #fdf0d3;
  --red: #c2410c;
  --cn: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --num: "DIN Alternate", "Bahnschrift", "DIN Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.6 var(--cn); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
.shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, 1fr); min-height: 100vh; }

/* ---------- 左：晨景 ---------- */
.scene {
  position: relative; overflow: hidden; color: #dbe6ef; display: flex; flex-direction: column; padding: 40px 48px 36px;
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(245, 158, 11, .16), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-700) 100%);
}
/* 极淡的测绘网格 */
.scene::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
/* 胶片颗粒 */
.scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.mark { width: 34px; height: 34px; }
.mark circle { fill: var(--amber); }
.mark .rays path { stroke: var(--amber); stroke-width: 2; stroke-linecap: round; fill: none; }
.mark .rays { transform-origin: 16px 16px; animation: spin 40s linear infinite; }
.brand-cn { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: .08em; }
.brand-en { font: 600 11px/1 var(--num); letter-spacing: .32em; color: #8fa6b8; margin-top: 3px; }

.sky { position: relative; z-index: 1; width: 100%; max-width: 680px; margin: auto auto 0; display: block; overflow: visible; }
.arc { fill: none; stroke: rgba(219, 230, 239, .22); stroke-width: 1.2; stroke-dasharray: 2 6; }
.trail { fill: none; stroke: rgba(245, 158, 11, .55); stroke-width: 1.6; stroke-linecap: round; }
.ticks line { stroke: rgba(219, 230, 239, .35); stroke-width: 1.2; }
.ticks text { fill: #7f97aa; font: 600 12px var(--num); text-anchor: middle; letter-spacing: .06em; }
.horizon { stroke: rgba(219, 230, 239, .28); stroke-width: 1; }
.sun-core { fill: #ffc04d; filter: drop-shadow(0 0 10px rgba(255, 190, 80, .9)); }
.night { opacity: 0; transition: opacity 1.2s var(--ease); }
.night circle { fill: #cfe0ee; }
.night .moon { fill: #e8eef4; opacity: .85; }
.is-night .night { opacity: 1; }
.is-night .sun { opacity: 0; }
.is-night .trail { opacity: .25; }
.row { fill: url(#panel); stroke: rgba(150, 190, 220, .35); stroke-width: .8; }
.cells path { stroke: rgba(150, 190, 220, .22); stroke-width: .8; fill: none; }
.sheen { animation: sheen 7s var(--ease) 1.8s infinite; }
.is-night .sheen { display: none; }

.pitch { position: relative; z-index: 1; margin-top: 34px; }
.pitch h1 { margin: 0; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.22; font-weight: 600; color: #fff; letter-spacing: .04em; }
.pitch p { margin: 14px 0 0; color: #9fb4c4; font-size: 14px; line-height: 1.9; letter-spacing: .03em; }
.readout { position: relative; z-index: 1; display: flex; gap: 36px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(219, 230, 239, .12); }
.readout .k { display: block; font-size: 12px; color: #7f97aa; letter-spacing: .1em; }
.readout .v { display: block; font: 600 22px/1.2 var(--num); color: #f4f7fa; font-variant-numeric: tabular-nums; letter-spacing: .04em; margin-top: 2px; }
#phase { font-family: var(--cn); font-size: 18px; font-weight: 500; }

/* ---------- 右：登录 ---------- */
.panel {
  display: grid; place-items: center; padding: 48px 32px;
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(245, 158, 11, .08), transparent 70%),
    var(--paper);
}
.card { width: 100%; max-width: 388px; }
.card > * { animation: rise .7s var(--ease) both; }
.card > *:nth-child(1) { animation-delay: .08s; }
.card > *:nth-child(2) { animation-delay: .12s; }
.card > *:nth-child(3) { animation-delay: .16s; }
.card > *:nth-child(4) { animation-delay: .22s; }
.card > *:nth-child(5) { animation-delay: .28s; }
.card > *:nth-child(6) { animation-delay: .34s; }
.card > *:nth-child(7) { animation-delay: .4s; }
.card-h h2 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: .06em; }
.card-h h2::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 12px; background: var(--amber); border-radius: 2px; }
.card-h p { margin: 14px 0 30px; color: var(--muted); font-size: 14px; }

.field { display: block; margin-bottom: 20px; }
.lbl { display: block; font-size: 13px; font-weight: 500; color: #3b4652; margin-bottom: 8px; letter-spacing: .04em; }
.ctl {
  position: relative; display: flex; align-items: center; height: 50px; padding: 0 14px; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ctl:hover { border-color: #c9c1b3; }
.ctl:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245, 158, 11, .16); background: #fff; }
.ctl > svg { width: 19px; height: 19px; flex: none; fill: none; stroke: #98a1aa; stroke-width: 1.6; stroke-linecap: round; transition: stroke .2s; }
.ctl:focus-within > svg { stroke: var(--amber-600); }
.ctl input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 16px var(--cn); color: var(--ink); letter-spacing: .02em; }
.ctl input[type="password"] { font-family: var(--num); letter-spacing: .18em; }
.eye { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-right: -8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: #98a1aa; }
.eye:hover { background: #f1ece3; color: var(--ink); }
.eye:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.eye .slash { transition: stroke-dashoffset .25s var(--ease); stroke-dasharray: 23; stroke-dashoffset: 0; }
.eye[aria-pressed="true"] .slash { stroke-dashoffset: 23; }
.hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--amber-600); }
.hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.hint[hidden] { display: none; }

.remember { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 26px; font-size: 14px; color: #3b4652; cursor: pointer; user-select: none; }
.remember input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.remember .box { width: 18px; height: 18px; border: 1.5px solid #b9b1a3; border-radius: 5px; background: var(--card); display: grid; place-items: center; transition: all .18s; }
.remember .box::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .18s var(--ease); }
.remember input:checked + .box { background: var(--navy-700); border-color: var(--navy-700); }
.remember input:checked + .box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.remember input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(245, 158, 11, .25); }

.submit {
  position: relative; width: 100%; height: 52px; border: 0; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px var(--cn); letter-spacing: .3em; text-indent: .3em; color: var(--navy-900);
  background: linear-gradient(180deg, #fbb43a, var(--amber)); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 24px -12px rgba(217, 135, 6, .8);
  transition: transform .15s var(--ease), box-shadow .2s, filter .2s;
}
.submit:hover { filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 30px -12px rgba(217, 135, 6, .9); }
.submit:active { transform: translateY(1px); }
.submit:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 2px; }
.submit .arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.submit:hover .arrow { transform: translateX(3px); }
.submit .spin { display: none; width: 18px; height: 18px; border: 2px solid rgba(8, 26, 41, .25); border-top-color: var(--navy-900); border-radius: 50%; animation: spin .7s linear infinite; }
.submit.loading { pointer-events: none; filter: saturate(.85); }
.submit.loading .arrow { display: none; }
.submit.loading .spin { display: block; }

.err { display: flex; gap: 10px; align-items: flex-start; margin: -10px 0 22px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; color: var(--red); background: #fdeee6; border: 1px solid #f6d3c1; }
.err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--red); color: #fff; font: 700 12px var(--num); }
.err[hidden] { display: none; }
.shake { animation: shake .42s var(--ease); }
.foot { margin: 26px 0 0; font-size: 12.5px; color: #8b939b; text-align: center; letter-spacing: .02em; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sheen { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(900px); } }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* ---------- 窄屏：晨景压成顶部横幅 ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .scene { padding: 22px 20px 0; min-height: 0; }
  .sky { max-width: 520px; margin: 18px auto 0; }
  .pitch, .readout { display: none; }
  .panel { padding: 32px 20px 40px; place-items: start center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 注册 / 找回密码 */
.sms-btn { flex: none; border: 0; background: transparent; color: var(--accent, #f59e0b); font: inherit; font-size: 13px; cursor: pointer; padding: 0 4px; white-space: nowrap; }
.sms-btn:disabled { color: #94a3b8; cursor: default; }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
[hidden] { display: none !important; }
.legal-links { margin-top: 4px; font-size: 12px; }
.remember a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }