@import url('/static/vendor/css/fonts.css');
:root { color-scheme:light; font-family:Inter,"Microsoft YaHei","PingFang SC",sans-serif; color:#e4edfc; background:#0b0f1a; letter-spacing:0; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { min-height:100vh; background:#0b0f1a; }
button,input,select { font:inherit; letter-spacing:0; }
select { -webkit-appearance:none; appearance:none; cursor:pointer; background:transparent; color:inherit; }
.auth-layout { min-height:100vh; display:grid; grid-template-columns:minmax(480px,56%) minmax(430px,44%); }

/* ===== brand panel (左侧) ===== */
.brand-panel { min-height:100vh; position:relative; overflow:hidden; display:flex; flex-direction:column; padding:48px clamp(44px,6vw,92px); color:#e4edfc; background:#080c14; isolation:isolate; }
.brand-photo,.brand-shade { position:absolute; inset:0; width:100%; height:100%; }
.brand-photo { z-index:-3; object-fit:cover; object-position:center center; transform:scale(1.01); }

/* 科技感网格渐变遮罩，配合图2风格的暗色科技背景 */
.brand-shade { z-index:-2;
  background:
    linear-gradient(135deg,rgba(8,16,40,.82) 0%,rgba(8,16,40,.38) 48%,rgba(8,12,28,.1) 100%),
    linear-gradient(0deg,rgba(6,12,34,.72) 0%,transparent 50%),
    repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(64,128,255,.04) 28px,rgba(64,128,255,.04) 29px),
    repeating-linear-gradient(90deg,transparent,transparent 28px,rgba(64,128,255,.04) 28px,rgba(64,128,255,.04) 29px);
}

.brand-topline { display:flex; align-items:center; gap:12px; font-size:11px; font-weight:700; }
.brand-mark { width:40px; height:40px; border:1px solid rgba(64,160,255,.35); border-radius:6px; display:grid; place-items:center; background:rgba(15,30,60,.8); }
.brand-mark img { width:25px; height:25px; object-fit:contain; }
.brand-copy { width:min(590px,90%); margin:auto 0; padding-top:60px; }
.brand-kicker { margin:0 0 16px; font-size:13px; font-weight:700; color:#5bc0ff; text-shadow:0 0 12px rgba(91,192,255,.4); }
.brand-copy h1 { margin:0; font-family:"Microsoft YaHei","PingFang SC",sans-serif; font-size:64px; line-height:1.08; font-weight:680; letter-spacing:2px; text-shadow:0 0 30px rgba(64,160,255,.3),0 2px 18px rgba(0,0,0,.14); }
.brand-description { max-width:470px; margin:22px 0 0; font-size:18px; line-height:1.8; color:rgba(200,220,255,.85); text-shadow:0 0 10px rgba(64,128,255,.15); }
.brand-foot { font-size:12px; color:rgba(180,200,240,.55); text-shadow:0 0 8px rgba(64,128,255,.08); }

/* ===== form panel (右侧登录) ===== */
.form-panel { min-height:100vh; position:relative; padding:52px clamp(38px,5vw,80px); display:grid; place-items:center;
  background:linear-gradient(160deg,#0c1322 0%,#0f1a30 30%,#0a1120 60%,#0d162e 100%);
  box-shadow:inset 0 0 80px rgba(32,64,128,.08);
}
.auth-card { width:min(100%,410px); }
.form-brand { margin-bottom:54px; display:flex; align-items:center; gap:10px; color:#7a9cc4; font-size:12px; font-weight:700; }
.form-brand span { width:19px; height:19px; border-radius:50% 50% 50% 4px; background:linear-gradient(135deg,#5bc0ff,#3060d0); transform:rotate(-18deg); box-shadow:0 0 12px rgba(64,160,255,.3); }

.auth-heading p { margin:0 0 13px; color:#5bc0ff; font-size:10px; font-weight:800; letter-spacing:2px; text-shadow:0 0 8px rgba(91,192,255,.3); }
.auth-heading h2 { margin:0; color:#e4edfc; font-size:34px; line-height:1.2; font-weight:720; text-shadow:0 0 20px rgba(64,128,255,.15); }
.auth-heading>div { min-height:47px; margin:12px 0 26px; color:#8899bb; font-size:14px; line-height:1.7; }

.notice { padding:12px 14px; margin-bottom:18px; border:1px solid rgba(255,120,80,.3); border-radius:6px; background:rgba(255,60,40,.08); color:#ff8a70; font-size:13px; line-height:1.55; }
.field { margin-bottom:17px; }
.field label { display:block; margin-bottom:8px; color:#8aa8d4; font-size:12px; font-weight:700; letter-spacing:1px; }
.field input,.field select { width:100%; height:49px; padding:0 14px; border:1px solid rgba(64,128,255,.2); border-radius:6px; outline:none;
  color:#e4edfc; background:rgba(10,20,45,.6); transition:border-color .2s,box-shadow .2s,background .2s;
  box-shadow:inset 0 0 12px rgba(0,0,0,.15);
}
.field input::placeholder { color:#556688; }
.field input:focus,.field select:focus {
  border-color:rgba(64,160,255,.5); background:rgba(12,25,55,.8);
  box-shadow:0 0 0 3px rgba(64,160,255,.08), inset 0 0 20px rgba(32,80,160,.05);
}

/* select dropdown 特殊处理 */
.field select {
  padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%236688bb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
.field select option { background:#0f1a30; color:#e4edfc; }

.password-wrap { position:relative; }
.password-wrap input { padding-right:50px; }
.icon-button { position:absolute; top:6px; right:6px; width:37px; height:37px; padding:0; border:0; border-radius:5px; display:grid; place-items:center; background:transparent; color:#6a8bb0; cursor:pointer; }
.icon-button:hover { background:rgba(32,80,160,.15); color:#7ab8f0; }
.icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.eye-closed { display:none; }
.password-visible .eye-open { display:none; }
.password-visible .eye-closed { display:block; }

.primary-button { width:100%; height:50px; margin-top:5px; padding:0 16px; border:0; border-radius:6px; display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(135deg,#1b4a8b 0%,#2058b0 40%,#2a6ad0 100%); color:#fff; font-weight:730; cursor:pointer;
  transition:background .2s,transform .12s,box-shadow .2s;
  box-shadow:0 2px 12px rgba(32,80,160,.3);
}
.primary-button:hover { background:linear-gradient(135deg,#2058b0 0%,#2a6ad0 40%,#3a7ae0 100%); box-shadow:0 4px 20px rgba(32,80,160,.4); }
.primary-button:active { transform:translateY(1px); }
.primary-button:disabled { opacity:.55; cursor:wait; }
.primary-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.form-message { min-height:22px; margin-top:13px; color:#ff7a60; font-size:13px; line-height:1.6; }
.form-message.success { color:#5bc0ff; text-shadow:0 0 8px rgba(91,192,255,.3); }

.footer-hint { margin:19px 0 0; padding-top:19px; border-top:1px solid rgba(64,128,255,.12); color:#5a7a9a; font-size:12px; line-height:1.65; }
.form-foot { position:absolute; right:clamp(38px,5vw,80px); bottom:30px; color:#4a6a8a; font-size:9px; font-weight:700; letter-spacing:1px; }
[hidden] { display:none!important; }

@media(max-width:900px){
    .auth-layout{grid-template-columns:1fr}.brand-panel{min-height:250px;height:31vh;padding:26px 28px}.brand-photo{object-position:center 56%}.brand-shade{background:linear-gradient(135deg,rgba(8,16,40,.82),rgba(8,16,40,.2)),linear-gradient(0deg,rgba(6,12,34,.6),transparent),repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(64,128,255,.04) 28px,rgba(64,128,255,.04) 29px),repeating-linear-gradient(90deg,transparent,transparent 28px,rgba(64,128,255,.04) 28px,rgba(64,128,255,.04) 29px)}.brand-mark{width:34px;height:34px}.brand-mark img{width:21px;height:21px}.brand-copy{width:100%;margin:auto 0 8px;padding-top:18px}.brand-kicker{display:none}.brand-copy h1{font-size:38px;text-shadow:0 0 20px rgba(64,160,255,.25)}.brand-description{margin-top:8px;font-size:14px;line-height:1.5}.brand-foot{display:none}.form-panel{min-height:69vh;padding:40px 25px 56px;place-items:start center}.form-brand{display:none}.form-foot{display:none}
}
@media(max-width:430px){
    .brand-panel{min-height:230px;height:29vh;padding:22px}.brand-topline{font-size:9px}.brand-copy h1{font-size:34px}.brand-description{font-size:13px}.auth-heading h2{font-size:30px}.form-panel{min-height:71vh;padding-top:35px}.auth-heading>div{margin-bottom:21px}
}