/* ============================================================
   注册页 — 安徽裕创科技
   ============================================================ */

: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; }

.steps { position:relative; z-index:2; margin-top:34px; display:grid; gap:14px; }
.step { display:flex; align-items:flex-start; gap:14px; border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.02); }
.step .n { flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:"Orbitron";font-weight:700;
  background:rgba(56,224,184,.12);color:var(--teal);font-size:14px; }
.step b { display:block;font-size:15px; }
.step small { color:var(--ink-dim);font-size:12.5px; }

.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:24px; }

.field { margin-bottom:16px; position:relative; }
.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); }
.field-tip { margin-top:6px;font-size:12px;color:var(--ink-dim); }
.field-tip.ok { color:var(--teal); }
.field-tip.bad { color:var(--danger); }

/* 验证码输入框 + 发送按钮 */
.code-wrap input { padding-right:118px; }
.code-btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:linear-gradient(90deg,var(--teal),var(--cyan)); color:#04241c;
  border:none; border-radius:9px; padding:9px 14px;
  font-family:"Orbitron",sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.5px;
  cursor:pointer; white-space:nowrap; transition:opacity .3s,transform .3s;
}
.code-btn:hover:not(:disabled) { opacity:.9; transform:translateY(-50%) scale(1.03); }
.code-btn:disabled { opacity:.45; cursor:not-allowed; }

.agree { display:flex;align-items:flex-start;gap:9px;color:var(--ink-dim);font-size:13px;margin:2px 0 20px;cursor:pointer;line-height:1.5; }
.agree input { accent-color:var(--teal);width:15px;height:15px;margin-top:3px;flex:none;cursor:pointer; }
.agree a { color:var(--teal);text-decoration:none; }
.agree a: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;
}
.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); }

.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); }

.btn-link {
  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-link:hover { border-color:var(--teal);background:rgba(56,224,184,.08);transform:translateY(-2px); }

.back { display:block;text-align:center;margin-top:18px;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; }
  .steps{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; }
  .form-side .sub{ margin-bottom:18px; }
  .agree{ margin-bottom:16px; }
}