/* ============================================================
   登录页 — 安徽裕创科技
   ============================================================ */

:root {
  --bg: #060a14;
  --panel: #0c1730;
  --panel-2: #12203f;
  --line: rgba(120, 180, 255, .14);
  --ink: #eaf2ff;
  --ink-dim: #8fa4c8;
  --teal: #38e0b8;
  --teal-gl: #7dffdd;
  --amber: #ffb347;
  --amber-gl: #ffd98a;
  --cyan: #4fd4ff;
  --danger: #ff6b6b;
  --radius: 16px;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  min-height:100vh; display:grid; place-items:center;
  background:var(--bg); color:var(--ink);
  font-family:"Rajdhani","PingFang SC","Microsoft YaHei",sans-serif;
  overflow:hidden; padding:24px;
}
h1,h2,h3,.brand { font-family:"Orbitron","PingFang SC",sans-serif; }

/* backdrop */
#bgGrid { position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(56,224,184,.12), transparent 60%),
    radial-gradient(800px 520px at 5% 100%, rgba(79,212,255,.10), transparent 55%),
    linear-gradient(180deg,#060a14,#071023); }
#bgGrid::before { content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px; mask-image:radial-gradient(circle at 50% 30%,black,transparent 80%); opacity:.5; }
.grain::after { content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px); background-size:3px 3px; opacity:.5; }

.shell {
  position:relative; width:100%; max-width:1000px;
  border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:linear-gradient(150deg,#0d1a35,#080f22);
  box-shadow:var(--shadow); display:grid; grid-template-columns:1.05fr 1fr;
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

/* ── Left brand panel ── */
.side { position:relative; padding:44px 40px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.side::before { content:""; position:absolute; inset:0;
  background:radial-gradient(500px 340px at 80% 0%, rgba(56,224,184,.16), transparent 60%),
    radial-gradient(420px 300px at 0% 90%, rgba(255,179,71,.10), transparent 55%),
    linear-gradient(160deg,rgba(56,224,184,.05),transparent 60%);
  pointer-events:none; }
.side::after { content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(circle at 50% 40%,black,transparent 70%); opacity:.35; pointer-events:none; }

.logo { display:flex; align-items:center; gap:12px; position:relative; z-index:2; }
.logo-mark { width:42px;height:42px;border-radius:10px;padding:2px;
  background:conic-gradient(from 200deg,var(--teal),var(--cyan),var(--amber),var(--teal)); }
.logo-mark > div { width:100%;height:100%;border-radius:8px;background:#070c18;display:grid;place-items:center;
  font-family:"Orbitron";font-weight:900;color:#fff;font-size:18px; }
.logo-name { font-family:"Orbitron";font-weight:700;font-size:18px;letter-spacing:1px; }
.logo-name small { display:block;font-family:"Rajdhani";font-weight:500;color:var(--ink-dim);font-size:10px;letter-spacing:3px; }

.side-main { position:relative; z-index:2; margin-top:40px; }
.kicker { font-family:"Orbitron";font-size:12px;letter-spacing:4px;color:var(--teal);font-weight:700;display:flex;align-items:center;gap:10px; }
.kicker::before { content:"";width:30px;height:2px;background:linear-gradient(90deg,var(--teal),transparent); }
.side-main h1 { font-size:clamp(26px,3vw,34px);font-weight:900;line-height:1.15;margin:16px 0 12px;text-transform:uppercase; }
.side-main h1 .grad { background:linear-gradient(90deg,var(--teal),var(--cyan),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent; }
.side-main p { color:var(--ink-dim);font-size:15px;max-width:420px; }

.side-stats { position:relative; z-index:2; display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.s-chip { border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:rgba(255,255,255,.02);min-width:118px; }
.s-chip small { display:block;font-size:11px;letter-spacing:1.5px;color:var(--ink-dim);text-transform:uppercase; }
.s-chip b { font-family:"Orbitron";font-size:20px;font-weight:700;margin-top:4px;display:block; }
.s-chip b em { font-style:normal;font-size:12px;color:var(--ink-dim); }
.s-chip.teal b{color:var(--teal-gl)} .s-chip.amber b{color:var(--amber-gl)} .s-chip.cyan b{color:var(--cyan)}
.s-chip b .pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:6px;animation:pulse 1.6s infinite;vertical-align:1px;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}

.side-foot { position:relative; z-index:2; color:var(--ink-dim); font-size:12.5px; letter-spacing:1px; margin-top:26px; }

/* ── Right form panel ── */
.form-side { position:relative; padding:44px 40px; background:rgba(255,255,255,.012); border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.form-side h2 { font-size:22px;font-weight:700;text-transform:uppercase;margin-bottom:6px;}
.form-side .sub { color:var(--ink-dim);font-size:13px;margin-bottom:26px; }

.field { margin-bottom:18px; }
.field label { display:block;font-size:12px;letter-spacing:1.5px;color:var(--ink-dim);text-transform:uppercase;margin-bottom:8px;font-family:"Orbitron";font-weight:600; }
.input-wrap { position:relative; }
.input-wrap .ico { position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.6; }
.input-wrap input {
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
  padding:15px 16px 15px 44px;color:var(--ink);font-family:"Rajdhani",sans-serif;font-size:16px;
  outline:none;transition:border-color .3s,box-shadow .3s;
}
.input-wrap input:focus { border-color:var(--teal);box-shadow:0 0 0 3px rgba(56,224,184,.15); }
.input-wrap input::placeholder { color:#51668b; }
.input-wrap .toggle { position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-dim);font-size:15px;cursor:pointer;padding:6px; }
.input-wrap .toggle:hover { color:var(--ink); }

.row { display:flex;justify-content:space-between;align-items:center;margin:2px 0 22px;font-size:14px; }
.remember { display:flex;align-items:center;gap:8px;color:var(--ink-dim);cursor:pointer; }
.remember input { accent-color:var(--teal);width:15px;height:15px;cursor:pointer; }
.forgot { color:var(--teal);text-decoration:none;font-weight:600; }
.forgot:hover { color:var(--teal-gl); }

.btn {
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px;
  border:none;border-radius:12px;cursor:pointer;font-family:"Orbitron";font-weight:700;letter-spacing:1.5px;font-size:15px;
  background:linear-gradient(90deg,var(--teal),var(--cyan));color:#04241c;
  box-shadow:0 12px 34px rgba(56,224,184,.35);transition:transform .3s,box-shadow .3s,filter .3s;
}
.btn:hover { transform:translateY(-2px);box-shadow:0 16px 42px rgba(56,224,184,.5); }
.btn:active { transform:translateY(0); }
.btn[disabled]{ opacity:.6;cursor:not-allowed;transform:none!important;filter:grayscale(.2); }

.btn-reg {
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px;
  border-radius:12px;cursor:pointer;font-family:"Orbitron";font-weight:700;letter-spacing:1.5px;font-size:14px;text-decoration:none;
  border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.02);
  transition:border-color .3s,background .3s,transform .3s;
}
.btn-reg:hover { border-color:var(--teal);background:rgba(56,224,184,.08);transform:translateY(-2px); }

.err { margin-top:14px;font-size:14px;color:var(--danger);min-height:20px;text-align:center; }

.divider { display:flex;align-items:center;gap:14px;color:var(--ink-dim);font-size:12px;letter-spacing:1px;margin:22px 0; }
.divider::before,.divider::after { content:"";flex:1;height:1px;background:var(--line); }

.back { display:block;text-align:center;margin-top:20px;color:var(--ink-dim);text-decoration:none;font-size:14px;transition:color .3s; }
.back:hover { color:var(--teal-gl); }

/* responsive */
@media (max-width:820px){
  .shell { grid-template-columns:1fr; max-width:460px; }
  .side { padding:34px 28px 20px; }
  .side-stats{display:none;} .side-foot{margin-top:6px;}
  .form-side { border-left:none;border-top:1px solid var(--line);padding:34px 28px; }
  body{overflow:auto;}
  /* 标题一行显示：隐藏 <br> 断行，flex 排布去除文字间空格 */
  .side-main h1 { display:flex; align-items:center; white-space:nowrap; }
  .side-main h1 br { display:none; }
  /* 移动端隐藏描述性小字 */
  .side-main p { display:none; }
  .form-side h2, .form-side .sub { display:none; }
}
@media (max-width:420px){
  .shell { border-radius:18px; }
  .side { padding:26px 22px 16px; }
  .side-main{ margin-top:24px; }
  .side-main h1{ font-size:24px; }
  .side-main p{ font-size:14px; }
  .form-side { padding:28px 22px; }
  .form-side h2{ font-size:20px; }
  input{ font-size:16px; }
}