/* 登录页：版式取自淮安场景平台登录页（一行标题、一块登录框、框内一行小字报状态），配色换成主界面：
   深空底 + 深海军蓝玻璃面板 + 冰蓝强调；暖色只留给 DTGO 的红 O。底部一道地球边缘的大气辉光呼应主界面。 */
:root {
    --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --accent: #9fe8ff;
    --accent-rgb: 159, 232, 255;
    --accent-light-rgb: 200, 242, 255;
    --text: #e8f4f8;
    --text-muted: rgba(200, 220, 230, 0.72);
    --text-dim: rgba(190, 212, 224, 0.5);
    --line: rgba(159, 232, 255, 0.14);
    --field: rgba(6, 12, 22, 0.72);
    --field-line: rgba(159, 232, 255, 0.18);
    --err: #ff7a6b;
    --quake-red: #ff2d2d;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* 随屏幕缩放：基准字号按视口宽、高中较紧的一边取（1600×900 时 14 px），上下限 13–30 px；整页尺寸都用 rem，框和字一起缩放 */
html { font-size: clamp(13px, min(0.875vw, 1.5556vh), 30px); }
html, body { margin: 0; height: 100%; }
body {
    background: radial-gradient(ellipse at 50% 38%, #0d1730 0%, #070b16 55%, #05070d 100%) #05070d;
    color: var(--text); font: 400 1rem/1.5 var(--font-ui);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    display: grid; place-items: center; padding: 16px; overflow: hidden;
}
button, input { font-family: inherit; }

/* 地球边缘：屏幕下方露出一段弧，冰蓝大气辉光 */
.limb {
    position: fixed; left: 50%; top: 82vh; width: 220vmax; height: 220vmax; transform: translateX(-50%);
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, #0a1426 0%, #0a1426 69.6%, #06101e 70%);
    box-shadow: 0 0 2.5rem 0.3rem rgba(var(--accent-rgb), 0.28), 0 0 10rem 2rem rgba(var(--accent-rgb), 0.12), inset 0 0.6rem 2.4rem rgba(var(--accent-rgb), 0.22);
    animation: fade 1.4s .1s both;
}

.wrap { position: relative; width: 100%; max-width: 26.2857rem; display: flex; flex-direction: column; align-items: center; margin-top: -6vh; }
.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: 55%; width: 30rem; height: 9rem; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(var(--accent-rgb), .13), transparent); pointer-events: none; z-index: -1; }
.mark { font-size: 0.9286rem; font-weight: 700; letter-spacing: .5em; text-indent: .5em; color: rgba(var(--accent-light-rgb), .62); margin-bottom: 0.7143rem; }
.mark .o { color: var(--quake-red); animation: signal 3s ease-in-out infinite; }
h1 { margin: 0; font-size: 2.2857rem; font-weight: 600; letter-spacing: .3em; text-indent: .3em; text-align: center; line-height: 1.2;
    background: linear-gradient(180deg, #ffffff 0%, #dff6ff 50%, #8fd3ef 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { display: flex; align-items: center; gap: 0.8571rem; margin-top: 0.8571rem; color: rgba(var(--accent-light-rgb), .5);
    font-size: max(12px, 0.8571rem); letter-spacing: .24em; text-indent: .24em; white-space: nowrap; }
.tag::before, .tag::after { content: ""; width: 2.5714rem; height: 1px; }
.tag::before { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .7)); }
.tag::after { background: linear-gradient(90deg, rgba(var(--accent-rgb), .7), transparent); }

.card { width: 100%; padding: 2.1429rem 2rem 1.8571rem; border-radius: 0.7143rem;
    background: linear-gradient(180deg, rgba(17, 27, 44, .82), rgba(9, 16, 29, .88));
    border: 1px solid var(--line);
    box-shadow: 0 1.4286rem 3.5714rem rgba(0, 0, 0, .45), inset 0 1px 0 rgba(var(--accent-rgb), .08);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    animation: rise .7s .12s cubic-bezier(.2, .7, .2, 1) both; }
.f { display: block; margin-bottom: 1.2857rem; }
.f > span { display: block; font-size: max(12px, 0.8571rem); color: var(--text-muted); margin-bottom: 0.5rem; letter-spacing: .04em; }
.in { display: flex; align-items: center; height: 3rem; border-radius: 0.5rem; background: var(--field); border: 1px solid var(--field-line); transition: border-color .12s, box-shadow .12s; }
.in input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text); font-size: 1rem; padding: 0 0.8571rem; }
.in input::placeholder { color: var(--text-dim); }
/* 浏览器自动填充别把框染成白/黄 */
.in input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 100px #08101d inset; caret-color: var(--text); }
.in:focus-within { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 0.2143rem rgba(var(--accent-rgb), .16); }
.in.err { border-color: var(--err); }
.in .eye { height: 2rem; margin-right: 0.4286rem; padding: 0 0.5714rem; border: 0; background: none; color: var(--text-dim); border-radius: 0.3571rem; font-size: max(12px, 0.8571rem); cursor: pointer; }
.in .eye:hover { color: var(--text); background: rgba(var(--accent-rgb), .08); }
.note { margin: -0.7143rem 0 1rem; font-size: max(12px, 0.8571rem); }
.note.err { color: var(--err); }
.note.warn { color: var(--text-muted); }
.row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 1.5714rem; font-size: 0.9286rem; color: var(--text-muted); }
.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(--field-line); background: var(--field); display: grid; place-items: center; }
.ck.on i { background: var(--accent); border-color: var(--accent); }
.ck.on i::after { content: ""; width: 0.5rem; height: 0.25rem; border: 1.8px solid #06121f; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.row .aside { color: var(--text-dim); font-size: max(12px, 0.8571rem); }
/* 主按钮：冰蓝实底、深字，全页唯一的实色块 */
.go { width: 100%; height: 3rem; border: 0; border-radius: 0.5rem; cursor: pointer;
    background: linear-gradient(180deg, #b4eeff, #7fd3f2); color: #06121f;
    font-size: 1.0714rem; font-weight: 600; letter-spacing: .4em; text-indent: .4em;
    display: flex; align-items: center; justify-content: center; gap: 0.7143rem;
    box-shadow: 0 0.4rem 1.4rem rgba(var(--accent-rgb), .18); transition: filter .12s, box-shadow .12s; }
.go:hover { filter: brightness(1.06); box-shadow: 0 0.4rem 1.8rem rgba(var(--accent-rgb), .3); }
.go:disabled { cursor: default; filter: none; background: rgba(var(--accent-rgb), .16); color: var(--text-muted); box-shadow: none; letter-spacing: .08em; text-indent: 0; }
.spin { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb), .25); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.foot { margin-top: 1.7143rem; color: var(--text-dim); font-size: max(12px, 0.8571rem); letter-spacing: .04em; 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; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes signal { 0%, 100% { text-shadow: 0 0 0 rgba(255, 45, 45, 0); } 50% { text-shadow: 0 0 8px rgba(255, 45, 45, .75); } }
@media (max-width: 420px) { .tag { letter-spacing: .14em; text-indent: .14em; font-size: 12px; } .card { padding: 1.7rem 1.4rem 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .head, .card, .foot, .limb, .mark .o { animation: none; } }