/* 登录页（登录设计 v0.4）：纯色底、一行标题、一块登录框。冷灰底配一种蓝作主色，不放标志与输入框图标 */
:root { --lg-bg: #0D1015; --lg-card: #151920; --lg-line: #252B34; --lg-line2: #343C47; --lg-in: #0F1217;
  --lg-t1: #E8ECF1; --lg-t2: #A9B2BE; --lg-t3: #6F7884; --lg-pri: #3D7EDB; --lg-pri-h: #4A8BE6; --lg-ring: rgba(61, 126, 219, .28); --lg-err: #E06A5E; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* 随屏幕缩放：基准字号按视口宽、高中较紧的一边取（1600×900 时 14 px），上下限 13–30 px（低分辨率时保证最小字 12 px，4K 屏按 1 倍缩放时也不显小）；整页尺寸都用 rem，框和字一起缩放 */
html { font-size: clamp(13px, min(0.875vw, 1.5556vh), 30px); }
html, body { margin: 0; height: 100%; }
body { background: var(--lg-bg); color: var(--lg-t1); font: 400 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased;
  display: grid; place-items: center; padding: 16px; }
.wrap { width: 100%; max-width: 26.2857rem; display: flex; flex-direction: column; align-items: center; margin-top: -4vh; }
.head { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 2.1429rem; animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.head::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30rem; height: 8.5714rem; transform: translate(-50%, -60%); background: radial-gradient(closest-side, rgba(61, 126, 219, .16), transparent); pointer-events: none; z-index: -1; }
h1 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: .12em; text-indent: .12em; text-align: center; line-height: 1.25;
  background: linear-gradient(180deg, #FFFFFF 0%, #DCE3EC 55%, #9FB3CC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { display: flex; align-items: center; gap: 0.8571rem; margin-top: 0.8571rem; color: #7F8B9A; font-size: max(12px, 0.8571rem); letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; white-space: nowrap; }
.tag::before, .tag::after { content: ""; width: 2.5714rem; height: 1px; }
.tag::before { background: linear-gradient(90deg, transparent, #3D7EDB); }
.tag::after { background: linear-gradient(90deg, #3D7EDB, transparent); }
.card { animation: rise .7s .12s cubic-bezier(.2, .7, .2, 1) both; }
.foot { animation: fade .8s .35s both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.7143rem); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 420px) { .tag { letter-spacing: .2em; text-indent: .2em; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .head, .card, .foot { animation: none; } }
.card { width: 100%; padding: 2.1429rem 2rem 1.8571rem; background: var(--lg-card); border: 1px solid var(--lg-line); border-radius: 0.7143rem; box-shadow: 0 1.4286rem 3.5714rem rgba(0, 0, 0, .35); }
.f { display: block; margin-bottom: 1.2857rem; }
.f > span { display: block; font-size: max(12px, 0.8571rem); color: var(--lg-t2); margin-bottom: 0.5rem; letter-spacing: .04em; }
.in { display: flex; align-items: center; height: 3rem; border-radius: 0.5rem; background: var(--lg-in); border: 1px solid var(--lg-line2); transition: border-color .12s, box-shadow .12s; }
.in input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--lg-t1); font: inherit; font-size: 1rem; padding: 0 0.8571rem; }
.in input::placeholder { color: #545C67; }
.in:focus-within { border-color: var(--lg-pri); box-shadow: 0 0 0 0.2143rem var(--lg-ring); }
.in.err { border-color: var(--lg-err); }
.in .eye { height: 2rem; margin-right: 0.4286rem; padding: 0 0.5714rem; border: 0; background: none; color: var(--lg-t3); border-radius: 0.3571rem; font: max(12px, 0.8571rem) var(--font); cursor: pointer; }
.in .eye:hover { color: var(--lg-t1); background: rgba(255, 255, 255, .05); }
.note { margin: -0.7143rem 0 1rem; font-size: max(12px, 0.8571rem); min-height: 0; }
.note.err { color: var(--lg-err); }
.note.warn { color: var(--lg-t2); }
.row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 1.5714rem; font-size: 0.9286rem; color: var(--lg-t2); }
.ck { background: none; border: 0; padding: 0; font: inherit; color: inherit; display: flex; align-items: center; gap: 0.5714rem; cursor: pointer; user-select: none; }
.ck i { width: 1.0714rem; height: 1.0714rem; border-radius: 0.2143rem; border: 1px solid var(--lg-line2); background: var(--lg-in); display: grid; place-items: center; }
.ck.on i { background: var(--lg-pri); border-color: var(--lg-pri); }
.ck.on i::after { content: ""; width: 0.5rem; height: 0.25rem; border: 1.8px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.row .aside { color: var(--lg-t3); font-size: max(12px, 0.8571rem); }
.go { width: 100%; height: 3rem; border: 0; border-radius: 0.5rem; background: var(--lg-pri); color: #fff; font: 500 1.0714rem/1 var(--font); letter-spacing: .4em; text-indent: .4em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.7143rem; transition: background .12s; }
.go:hover { background: var(--lg-pri-h); }
.go:disabled { cursor: default; background: #2A3B55; color: #9DB0C9; letter-spacing: .08em; text-indent: 0; }
.spin { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.foot { margin-top: 1.7143rem; color: var(--lg-t3); font-size: max(12px, 0.8571rem); letter-spacing: .04em; }