/* ================================================
   AI Agent 策略广场 · 共享样式
   深色科技风 + 鼠标视差光球 + CSS 3D 机器人
   ================================================ */

/* === 设计令牌 === */
:root{
  --bg:#0a0e1f;
  --bg-soft:#0e1530;
  --bg-card:rgba(255,255,255,0.03);
  --bg-card-hover:rgba(255,255,255,0.06);
  --fg:#e8ecf5;
  --fg-soft:#a8b1c5;
  --muted:#6b7689;
  --accent:#6b8cff;
  --accent-2:#3dd9eb;
  --accent-3:#a78bfa;
  --border:rgba(255,255,255,0.08);
  --border-hover:rgba(255,255,255,0.16);
  --danger:#f87171;
  --ok:#34d399;
  --warn:#fbbf24;
  --r-md:16px;
  --r-lg:24px;
  --r-sm:10px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.2);
  --shadow-md:0 8px 24px rgba(0,0,0,0.3);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.4);
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
ul,ol{list-style:none}

/* === 环境光球（鼠标视差）=== */
.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.ambient .orb{
  position:absolute;border-radius:50%;
  filter:blur(60px);mix-blend-mode:screen;will-change:transform;
  --mx:0px;--my:0px;
}
.ambient .orb1{
  width:680px;height:680px;top:-180px;left:-160px;
  background:radial-gradient(circle,rgba(107,140,255,0.5) 0%,rgba(107,140,255,0.18) 40%,transparent 70%);
  animation:drift1 28s ease-in-out infinite;
}
.ambient .orb2{
  width:600px;height:600px;bottom:-200px;right:-180px;
  background:radial-gradient(circle,rgba(61,217,235,0.42) 0%,rgba(61,217,235,0.15) 40%,transparent 70%);
  animation:drift2 34s ease-in-out infinite;
}
.ambient .orb3{
  width:520px;height:520px;top:40%;left:55%;
  background:radial-gradient(circle,rgba(167,139,250,0.36) 0%,rgba(167,139,250,0.12) 40%,transparent 70%);
  animation:drift3 32s ease-in-out infinite;
}
.ambient .orb4{
  width:440px;height:440px;bottom:10%;left:8%;
  background:radial-gradient(circle,rgba(244,114,182,0.3) 0%,rgba(244,114,182,0.1) 40%,transparent 70%);
  animation:drift1 40s ease-in-out infinite reverse;
}
@keyframes drift1{0%,100%{transform:translate(var(--mx),var(--my)) translate(0,0)}50%{transform:translate(var(--mx),var(--my)) translate(30px,20px)}}
@keyframes drift2{0%,100%{transform:translate(var(--mx),var(--my)) translate(0,0)}50%{transform:translate(var(--mx),var(--my)) translate(-25px,-15px)}}
@keyframes drift3{0%,100%{transform:translate(var(--mx),var(--my)) translate(0,0)}50%{transform:translate(var(--mx),var(--my)) translate(20px,-25px)}}

/* === 3D 机器人（封面大）=== */
.robot-3d{position:relative;width:360px;height:360px;perspective:1000px;margin:0 auto}
.robot-head{
  position:absolute;top:50%;left:50%;width:240px;height:240px;
  transform:translate(-50%,-50%) rotateX(-15deg) rotateY(0deg);
  transform-style:preserve-3d;
  animation:robotFloat 5s ease-in-out infinite;
}
@keyframes robotFloat{
  0%,100%{transform:translate(-50%,-50%) rotateX(-15deg) rotateY(-8deg) translateY(0)}
  50%{transform:translate(-50%,-50%) rotateX(-15deg) rotateY(8deg) translateY(-12px)}
}
.robot-face{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#1a2240 0%,#0e1530 100%);
  border:2px solid rgba(107,140,255,0.4);border-radius:32px;
  box-shadow:0 30px 60px rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.15),inset 0 -2px 0 rgba(0,0,0,0.3);
  overflow:hidden;
}
.robot-face::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(107,140,255,0.08) 0%,transparent 50%,rgba(61,217,235,0.06) 100%);pointer-events:none}
.robot-eye{
  position:absolute;top:75px;width:48px;height:48px;
  background:radial-gradient(circle,#3dd9eb 0%,#6b8cff 60%,transparent 100%);
  border-radius:50%;
  box-shadow:0 0 30px rgba(61,217,235,0.7),0 0 60px rgba(107,140,255,0.4),inset 0 0 12px rgba(255,255,255,0.6);
  animation:eyeBlink 4s ease-in-out infinite;
}
.robot-eye.left{left:48px}
.robot-eye.right{right:48px}
@keyframes eyeBlink{0%,90%,100%{transform:scaleY(1)}93%,97%{transform:scaleY(0.1)}}
.robot-mouth{
  position:absolute;bottom:60px;left:50%;width:80px;height:6px;
  background:linear-gradient(90deg,transparent,#3dd9eb 20%,#6b8cff 80%,transparent);
  border-radius:3px;transform:translateX(-50%);box-shadow:0 0 12px rgba(61,217,235,0.5);
}
.robot-line.top{position:absolute;top:35px;left:30px;right:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(107,140,255,0.4),transparent)}
.robot-line.bottom{position:absolute;bottom:35px;left:30px;right:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(107,140,255,0.4),transparent)}
.robot-ear{
  position:absolute;top:50%;width:24px;height:60px;
  background:linear-gradient(180deg,#1a2240 0%,#0e1530 100%);
  border:2px solid rgba(107,140,255,0.4);border-radius:12px;transform:translateY(-50%);
  box-shadow:inset 0 0 8px rgba(0,0,0,0.3);
}
.robot-ear.left{left:-20px}.robot-ear.right{right:-20px}
.robot-antenna{position:absolute;top:-32px;left:50%;width:4px;height:32px;background:linear-gradient(180deg,#6b8cff,rgba(107,140,255,0.3));transform:translateX(-50%)}
.robot-antenna::after{
  content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;
  background:radial-gradient(circle,#3dd9eb,transparent 70%);border-radius:50%;
  transform:translateX(-50%);box-shadow:0 0 20px rgba(61,217,235,0.8);
  animation:antennaPulse 2s ease-in-out infinite;
}
@keyframes antennaPulse{0%,100%{opacity:0.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.3)}}
.robot-shadow{
  position:absolute;bottom:30px;left:50%;width:180px;height:20px;
  background:radial-gradient(ellipse,rgba(107,140,255,0.3) 0%,transparent 70%);
  transform:translateX(-50%);filter:blur(8px);
  animation:shadowPulse 5s ease-in-out infinite;
}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:0.6}50%{transform:translateX(-50%) scale(0.85);opacity:0.4}}

/* 小机器人（导航栏）=== */
.mini-robot{position:relative;width:36px;height:36px;perspective:200px;display:inline-block}
.mini-head{width:36px;height:36px;transform-style:preserve-3d;animation:miniFloat 4s ease-in-out infinite}
@keyframes miniFloat{0%,100%{transform:rotateX(-10deg) rotateY(-6deg) translateY(0)}50%{transform:rotateX(-10deg) rotateY(6deg) translateY(-4px)}}
.mini-face{
  width:100%;height:100%;background:linear-gradient(135deg,#1a2240,#0e1530);
  border:1.5px solid rgba(107,140,255,0.5);border-radius:11px;position:relative;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.12);
}
.mini-eye{
  position:absolute;top:11px;width:8px;height:8px;
  background:radial-gradient(circle,#3dd9eb,#6b8cff 60%,transparent);
  border-radius:50%;box-shadow:0 0 8px rgba(61,217,235,0.8);
  animation:eyeBlink 4s ease-in-out infinite;
}
.mini-eye.left{left:7px}.mini-eye.right{right:7px}
.mini-mouth{
  position:absolute;bottom:8px;left:50%;width:12px;height:2px;
  background:linear-gradient(90deg,transparent,#3dd9eb,#6b8cff,transparent);
  border-radius:2px;transform:translateX(-50%);
}
.mini-antenna{position:absolute;top:-7px;left:50%;width:2px;height:7px;background:linear-gradient(180deg,#6b8cff,rgba(107,140,255,0.2));transform:translateX(-50%)}
.mini-antenna::after{
  content:"";position:absolute;top:-4px;left:50%;width:5px;height:5px;
  background:radial-gradient(circle,#3dd9eb,transparent 70%);border-radius:50%;
  transform:translateX(-50%);box-shadow:0 0 8px rgba(61,217,235,0.9);
  animation:antennaPulse 2s ease-in-out infinite;
}

/* === 导航栏 === */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;
  background:rgba(10,14,31,0.7);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
}
.nav-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-0.01em}
.nav-brand .logo-text{background:linear-gradient(135deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{
  padding:8px 14px;font-size:14px;color:var(--fg-soft);border-radius:999px;
  transition:all .2s var(--ease);font-weight:500;
}
.nav-link:hover{color:var(--fg);background:rgba(255,255,255,0.05)}
.nav-link.active{color:var(--fg);background:rgba(107,140,255,0.15)}
.nav-cta{display:flex;align-items:center;gap:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;font-size:14px;font-weight:500;border-radius:999px;
  transition:all .25s var(--ease);white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-3) 100%);
  color:#fff;box-shadow:0 4px 16px rgba(107,140,255,0.3);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(107,140,255,0.5)}
.btn-ghost{color:var(--fg-soft);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--fg);background:rgba(255,255,255,0.05);border-color:var(--border-hover)}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-lg{padding:14px 28px;font-size:15px}

/* === 容器 === */
.container{max-width:1200px;margin:0 auto;padding:0 40px}
.section{padding:100px 0;position:relative;z-index:1}
.section-sm{padding:60px 0;position:relative;z-index:1}

/* === 标题 === */
.kicker{
  display:inline-block;padding:6px 12px;font-size:12px;font-weight:500;
  color:var(--accent);background:rgba(107,140,255,0.1);border:1px solid rgba(107,140,255,0.2);
  border-radius:999px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px;
}
h1{font-size:clamp(36px,5vw,56px);font-weight:700;letter-spacing:-0.03em;line-height:1.1;margin-bottom:16px}
h2{font-size:clamp(28px,3.5vw,40px);font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin-bottom:16px}
h3{font-size:20px;font-weight:600;letter-spacing:-0.01em;margin-bottom:10px}
h4{font-size:16px;font-weight:600;margin-bottom:8px}
p{color:var(--fg-soft);line-height:1.7}
.lead{font-size:18px;color:var(--fg-soft);line-height:1.6;max-width:680px}
.gradient-text{background:linear-gradient(135deg,#fff 0%,var(--accent) 60%,var(--accent-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* === 卡片 === */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px;
  transition:all .3s var(--ease);
  position:relative;overflow:hidden;
}
.card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:600;margin-bottom:10px}
.card-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:24px;border-radius:12px;background:rgba(107,140,255,0.1);border:1px solid rgba(107,140,255,0.2);margin-bottom:16px}

/* 网格 */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* === Badge === */
.badge{
  display:inline-block;padding:4px 10px;font-size:12px;font-weight:500;
  border-radius:999px;background:rgba(107,140,255,0.1);color:var(--accent);
  border:1px solid rgba(107,140,255,0.2);
}
.badge.ok{background:rgba(52,211,153,0.1);color:var(--ok);border-color:rgba(52,211,153,0.2)}
.badge.warn{background:rgba(251,191,36,0.1);color:var(--warn);border-color:rgba(251,191,36,0.2)}
.badge.danger{background:rgba(248,113,113,0.1);color:var(--danger);border-color:rgba(248,113,113,0.2)}

/* === Section header === */
.section-header{text-align:center;max-width:760px;margin:0 auto 48px}
.section-header h2{margin-bottom:16px}
.section-header p{font-size:17px}

/* === Code block === */
.code-block{
  background:rgba(0,0,0,0.3);border:1px solid var(--border);
  border-radius:var(--r-md);padding:20px;
  font-family:"SF Mono","Monaco","Menlo","Consolas",monospace;
  font-size:13px;line-height:1.6;color:var(--fg-soft);
  overflow-x:auto;position:relative;
}
.code-block .k{color:#c792ea}
.code-block .s{color:#c3e88d}
.code-block .n{color:#f78c6c}
.code-block .c{color:#546e7a;font-style:italic}
.code-block .key{color:#82aaff}

/* === 流程图 === */
.flow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.flow-step{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:16px 20px;min-width:140px;text-align:center;
}
.flow-step-icon{font-size:24px;margin-bottom:8px}
.flow-step-title{font-size:14px;font-weight:600;margin-bottom:4px}
.flow-step-desc{font-size:12px;color:var(--muted)}
.flow-arrow{color:var(--accent);font-size:20px}
@media (max-width:768px){.flow{flex-direction:column}.flow-arrow{transform:rotate(90deg)}}

/* === Footer === */
.footer{
  border-top:1px solid var(--border);
  padding:60px 0 40px;position:relative;z-index:1;
  background:rgba(10,14,31,0.5);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:24px}}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:16px;font-weight:600}
.footer-brand .logo-text{background:linear-gradient(135deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-desc{color:var(--muted);font-size:14px;line-height:1.6;max-width:320px}
.footer-col h4{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{color:var(--fg-soft);font-size:14px;transition:color .2s}
.footer-col ul li a:hover{color:var(--accent)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid var(--border);
  font-size:13px;color:var(--muted);
}
@media (max-width:768px){.footer-bottom{flex-direction:column;gap:12px;text-align:center}}

/* === 工具类 === */
.text-center{text-align:center}
.text-accent{color:var(--accent)}
.text-ok{color:var(--ok)}
.text-danger{color:var(--danger)}
.text-warn{color:var(--warn)}
.text-muted{color:var(--muted)}
.text-soft{color:var(--fg-soft)}
.mt-sm{margin-top:12px}.mt-md{margin-top:24px}.mt-lg{margin-top:48px}
.mb-sm{margin-bottom:12px}.mb-md{margin-bottom:24px}.mb-lg{margin-bottom:48px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}
.relative{position:relative}.z-1{z-index:1}

/* === 响应式 === */
@media (max-width:900px){
  .nav{padding:14px 20px}
  .nav-links{display:none}
  .container{padding:0 20px}
  .section{padding:60px 0}
  .robot-3d{width:280px;height:280px}
  .robot-head{width:200px;height:200px}
  .robot-eye{width:40px;height:40px;top:60px}
  .robot-eye.left{left:38px}.robot-eye.right{right:38px}
}
@media (max-width:600px){
  h1{font-size:32px}
  h2{font-size:24px}
  .lead{font-size:15px}
  .section{padding:48px 0}
}

/* ================================================
   认证表单（登录/注册/绑定/测评/忘记密码 共享）
   ================================================ */

/* === 认证页面布局 === */
.auth-layout{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:100px 20px 60px;
  position:relative;
  z-index:1;
}
.auth-card{
  width:100%;
  max-width:480px;
  background:rgba(14,21,48,0.6);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:40px;
  box-shadow:var(--shadow-lg);
}
.auth-card.wide{max-width:640px}
.auth-card.narrow{max-width:400px}
.auth-header{text-align:center;margin-bottom:32px}
.auth-header .auth-icon{
  width:64px;height:64px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  background:linear-gradient(135deg,rgba(107,140,255,0.15),rgba(167,139,250,0.1));
  border:1px solid rgba(107,140,255,0.3);
  border-radius:var(--r-md);
}
.auth-header h1{font-size:28px;margin-bottom:8px}
.auth-header p{font-size:14px;color:var(--fg-soft)}

/* === 表单字段 === */
.form-group{margin-bottom:20px}
.form-label{
  display:block;font-size:13px;font-weight:500;color:var(--fg);
  margin-bottom:8px;letter-spacing:0.01em;
}
.form-label .required{color:var(--accent);margin-left:4px}
.form-hint{font-size:12px;color:var(--muted);margin-top:6px}
.form-input{
  width:100%;
  padding:12px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--fg);
  font-size:14px;
  font-family:inherit;
  transition:all .2s var(--ease);
  outline:none;
}
.form-input::placeholder{color:var(--muted)}
.form-input:hover{border-color:var(--border-hover)}
.form-input:focus{
  border-color:var(--accent);
  background:rgba(107,140,255,0.04);
  box-shadow:0 0 0 3px rgba(107,140,255,0.1);
}
textarea.form-input{resize:vertical;min-height:80px;line-height:1.6}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%236b7689' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}

/* input 带 icon */
.input-group{position:relative}
.input-group .input-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:16px;pointer-events:none;
}
.input-group .form-input{padding-left:42px}
.input-group .input-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:13px;cursor:pointer;padding:4px 8px;
  border-radius:6px;transition:color .2s;
}
.input-group .input-toggle:hover{color:var(--fg)}

/* === 表单行（checkbox/radio）=== */
.form-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.form-check{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13px;color:var(--fg-soft);user-select:none;
}
.form-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.form-check a{color:var(--accent);text-decoration:underline}
.form-link{font-size:13px;color:var(--accent);text-decoration:none;transition:color .2s}
.form-link:hover{color:var(--accent-2);text-decoration:underline}

/* === 错误提示 === */
.form-error{
  display:flex;align-items:center;gap:6px;
  padding:10px 12px;margin-bottom:16px;
  background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.2);
  border-radius:var(--r-sm);
  font-size:13px;color:var(--danger);
}
.form-success{
  display:flex;align-items:center;gap:6px;
  padding:10px 12px;margin-bottom:16px;
  background:rgba(52,211,153,0.08);
  border:1px solid rgba(52,211,153,0.2);
  border-radius:var(--r-sm);
  font-size:13px;color:var(--ok);
}
.field-error{
  font-size:12px;color:var(--danger);margin-top:4px;
  display:flex;align-items:center;gap:4px;
}

/* === 按钮（form 全宽）=== */
.btn-block{display:flex;width:100%;padding:13px 20px;font-size:14px;font-weight:600;justify-content:center}
.btn-block + .btn-block{margin-top:12px}

/* === 分隔线 === */
.form-divider{
  display:flex;align-items:center;gap:12px;
  margin:24px 0;color:var(--muted);font-size:12px;
}
.form-divider::before,.form-divider::after{
  content:"";flex:1;height:1px;background:var(--border);
}

/* === 社交登录 === */
.social-buttons{display:flex;flex-direction:column;gap:10px}
.btn-social{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 20px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--fg);font-size:14px;font-weight:500;
  transition:all .2s var(--ease);
}
.btn-social:hover{background:rgba(255,255,255,0.06);border-color:var(--border-hover)}
.btn-social .social-icon{font-size:18px}

/* === 角色选择卡片 === */
.role-select{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.role-card{
  padding:16px;
  background:rgba(255,255,255,0.03);
  border:2px solid var(--border);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:all .25s var(--ease);
  position:relative;
}
.role-card:hover{background:rgba(255,255,255,0.06);border-color:var(--border-hover)}
.role-card.selected{
  background:rgba(107,140,255,0.08);
  border-color:var(--accent);
}
.role-card.selected::after{
  content:"✓";position:absolute;top:10px;right:10px;
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.role-card-icon{font-size:24px;margin-bottom:8px}
.role-card-title{font-size:14px;font-weight:600;margin-bottom:4px;color:var(--fg)}
.role-card-desc{font-size:12px;color:var(--muted);line-height:1.5}

/* === 步骤进度条 === */
.auth-steps{
  display:flex;align-items:center;justify-content:center;
  gap:8px;margin-bottom:32px;
}
.auth-step{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);
}
.auth-step-num{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.05);border:1px solid var(--border);
  font-size:12px;font-weight:600;color:var(--muted);
}
.auth-step.active .auth-step-num{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.auth-step.active{color:var(--fg)}
.auth-step.done .auth-step-num{
  background:rgba(52,211,153,0.15);border-color:rgba(52,211,153,0.4);color:var(--ok);
}
.auth-step-line{width:32px;height:1px;background:var(--border)}
.auth-step-line.done{background:var(--ok)}

/* === 风险测评题 === */
.quiz-question{
  padding:24px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  margin-bottom:20px;
}
.quiz-question h4{
  font-size:15px;margin-bottom:16px;color:var(--fg);
  display:flex;align-items:center;gap:8px;
}
.quiz-question h4 .q-num{
  width:24px;height:24px;border-radius:50%;
  background:rgba(107,140,255,0.15);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
}
.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-option{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  cursor:pointer;transition:all .2s var(--ease);
  font-size:13px;color:var(--fg-soft);
}
.quiz-option:hover{background:rgba(255,255,255,0.05);border-color:var(--border-hover)}
.quiz-option.selected{
  background:rgba(107,140,255,0.08);
  border-color:var(--accent);
  color:var(--fg);
}
.quiz-option .option-radio{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--muted);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.quiz-option.selected .option-radio{
  border-color:var(--accent);
}
.quiz-option.selected .option-radio::after{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);
}
.quiz-option .option-label{flex:1}
.quiz-option .option-score{font-size:11px;color:var(--muted)}

/* === 风险等级结果 === */
.risk-result{
  text-align:center;padding:32px;
  background:linear-gradient(135deg,rgba(107,140,255,0.08),rgba(167,139,250,0.05));
  border:1px solid rgba(107,140,255,0.3);
  border-radius:var(--r-lg);
}
.risk-result-icon{font-size:48px;margin-bottom:12px}
.risk-result-level{font-size:24px;font-weight:700;margin-bottom:8px}
.risk-result-desc{font-size:13px;color:var(--fg-soft);max-width:380px;margin:0 auto 20px}

/* === Binance 绑定 - 权限说明 === */
.permission-grid{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.permission-item{
  display:flex;align-items:center;gap:12px;
  padding:12px;
  background:rgba(52,211,153,0.04);
  border:1px solid rgba(52,211,153,0.15);
  border-radius:var(--r-sm);
  font-size:13px;
}
.permission-item.danger{
  background:rgba(248,113,113,0.04);
  border-color:rgba(248,113,113,0.15);
}
.permission-item .perm-icon{font-size:16px;flex-shrink:0}
.permission-item .perm-text{flex:1;color:var(--fg-soft)}
.permission-item .perm-status{font-size:12px;font-weight:600}

/* === 安全提示框 === */
.security-notice{
  padding:14px 16px;
  background:rgba(251,191,36,0.06);
  border:1px solid rgba(251,191,36,0.2);
  border-radius:var(--r-sm);
  display:flex;gap:10px;
  font-size:13px;color:var(--fg-soft);
  margin:16px 0;
}
.security-notice .notice-icon{font-size:16px;flex-shrink:0;color:var(--warn)}
.security-notice a{color:var(--accent);text-decoration:underline}

/* === 切换链接 === */
.auth-switch{
  text-align:center;margin-top:24px;
  font-size:13px;color:var(--muted);
}
.auth-switch a{color:var(--accent);font-weight:500;margin-left:6px}
.auth-switch a:hover{text-decoration:underline}

/* === 响应式 === */
@media (max-width:600px){
  .auth-card{padding:28px 24px}
  .role-select{grid-template-columns:1fr}
  .auth-step{font-size:11px}
  .auth-step-line{width:20px}
}