:root{
  --bg:#050507;
  --muted: rgba(255,255,255,0.65);
  --accent-green: #9efc8d;
  --accent-red: #ff6b6b;
  --max-width: 1200px;
}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;background:var(--bg);color:#fff;overflow-x:hidden;}
/* 背景渐变晕染 */
.bg-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(800px 600px at var(--x,40%) var(--y,40%), rgba(158,252,141,0.12), transparent 70%),
    radial-gradient(900px 700px at calc(100% - var(--x,60%)) calc(100% - var(--y,60%)), rgba(255,107,107,0.12), transparent 70%),
    radial-gradient(1200px 1000px at 50% 80%, rgba(80,120,255,0.08), transparent 70%),
    linear-gradient(160deg,#050507,#0a0a0f);
  transition:background-position .15s linear;
}
.container{max-width:var(--max-width);margin:0 auto;padding:48px 24px;}
header{display:flex;justify-content:space-between;align-items:center;}
.logo{width:42px;height:42px;display:flex;align-items:center;justify-content:center;}
nav{display:flex;gap:18px;align-items:center}
nav a{color:var(--muted);text-decoration:none;}
.btn{padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:600;transition:all .2s ease;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;display:inline-block;}
.btn.highlight{background:linear-gradient(90deg,var(--accent-green),#3af0c4);color:#021;}
.btn:hover{opacity:0.9;}
.hero{text-align:center;padding:60px 0}
.hero h2{font-size:52px;margin-bottom:20px}
.hero p{color:var(--muted);max-width:680px;margin:0 auto}
.demo-box{margin:30px auto;width:100%;max-width:900px;height:500px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;color:var(--muted);transform:scale(.9);transition:all 1s ease-out;opacity:0}
.demo-box.visible{transform:scale(1);opacity:1}
.feature-section{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:80px 0;}
.feature-text{flex:1;}
.feature-text h3{font-size:32px;margin-bottom:14px}
.feature-text p{color:var(--muted)}
.feature-demo{flex:1;height:380px;border-radius:16px;background:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;color:var(--muted);transform:translateY(40px) scale(.95);opacity:0;transition:all 1s ease-out;}
.feature-demo.visible{transform:translateY(0) scale(1);opacity:1}
video{max-width:100%;border-radius:12px}

/* Pricing 横向布局 */
.pricing{display:flex;gap:20px;justify-content:center;padding:80px 0;flex-wrap:wrap}
.plan{flex:1;min-width:280px;max-width:360px;border-radius:20px;padding:32px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.05);display:flex;flex-direction:column;justify-content:space-between}
.plan:hover{border-color:rgba(255,255,255,0.15);}
.plan-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.plan h4{font-size:24px;margin:0}
.plan .price{font-size:26px;color:var(--accent-green)}
.plan ul{list-style:none;padding:0;margin:0 0 20px 0;color:var(--muted);line-height:1.8;font-size:15px;text-align:left}
.plan-footer{text-align:center;margin-top:auto}

footer{border-top:1px solid rgba(255,255,255,0.05);padding:40px 0;text-align:center;color:var(--muted)}
footer a{color:var(--accent-green);margin:0 8px;text-decoration:none}
@media(max-width:900px){.feature-section{flex-direction:column;}.feature-demo{width:100%}.pricing{flex-direction:column;align-items:center}.plan{max-width:100%}}

/* 登录页面样式 */
.auth-container {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.auth-box {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.auth-tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.auth-tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.3s ease;
}

.auth-tab.active {
  color: var(--accent-green);
  border-bottom: 2px solid var(--accent-green);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 14px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 2px rgba(158,252,141,0.2);
}

.auth-footer {
  margin-top: 30px;
  text-align: center;
}

.auth-footer a {
  color: var(--accent-green);
  text-decoration: none;
}

.error-message {
  color: var(--accent-red);
  font-size: 14px;
  margin-top: 5px;
  display: none;
}

.success-message {
  color: var(--accent-green);
  font-size: 14px;
  margin-top: 5px;
  display: none;
}

/* 图标样式 */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo img {
  max-width: 100%;
  height: auto;
}