@charset "UTF-8";
/*══════════════════════════════════════════════════════════
  暗黑紫色科技风 — AI短视频SaaS平台
  大厂UI品质: 全宽布局 · 动态背景 · 玻璃态 · 发光效果
══════════════════════════════════════════════════════════*/
:root {
  --bg: #06060e; --bg2: #0b0b1a; --card: #0f0f28; --card2: #16163d;
  --bd: #1a1a45; --bd2: #282860; --input: #08081c;
  --t1: #F8F7FF; --t2: #C5C1DA; --t3: #8B86A8;
  --p: #7c3aed; --pl: #a78bfa; --pHover: #8b5cf6;
  --pg: linear-gradient(135deg, #7c3aed, #a78bfa, #6d28d9);
  --pg2: linear-gradient(135deg, #4c1d95, #7c3aed, #5b21b6);
  --pg3: linear-gradient(180deg, #7c3aed 0%, #a78bfa 50%, #c4b5fd 100%);
  --green: #10b981; --red: #ef4444; --orange: #f59e0b; --blue: #3b82f6; --cyan: #06b6d4;
  --r: 8px; --rl: 12px; --rx: 16px; --rFull: 9999px;
  --shadow: 0 4px 24px rgba(124,58,237,.12);
  --shadowLg: 0 8px 48px rgba(124,58,237,.18);
  --shadowGlow: 0 0 60px rgba(124,58,237,.25);
  --font: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono: "JetBrains Mono","Fira Code",Consolas,monospace;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--t1);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

a{ color:var(--pl); text-decoration:none; transition:color var(--transition); }
a:hover{ color:var(--p); }

::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--bd2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:var(--p); }

/*══════════════════════════════════════════════════════════
  动态科技背景层
══════════════════════════════════════════════════════════*/
body::before{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 100% 60% at 20% -20%, rgba(124,58,237,.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% 110%, rgba(167,139,250,.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 60% 40%, rgba(109,40,217,.03) 0%, transparent 50%);
  pointer-events:none;z-index:0;
}

/* 网格线背景 */
body::after{
  content:'';
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(124,58,237,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.03) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none;z-index:0;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 70%);
}

/* 浮动光晕粒子 */
.floating-orbs{
  position:fixed;inset:0;pointer-events:none;z-index:0;
}
.floating-orbs .orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.15;
  animation:floatOrb 20s ease-in-out infinite;
}
.floating-orbs .orb:nth-child(1){
  width:600px;height:600px;
  background:rgba(124,58,237,.6);
  top:-15%;left:-10%;
  animation-delay:0s;
}
.floating-orbs .orb:nth-child(2){
  width:400px;height:400px;
  background:rgba(16,185,129,.4);
  bottom:-10%;right:-8%;
  animation-delay:-7s;
}
.floating-orbs .orb:nth-child(3){
  width:350px;height:350px;
  background:rgba(59,130,246,.4);
  top:40%;left:60%;
  animation-delay:-14s;
}

@keyframes floatOrb{
  0%,100%{ transform:translate(0,0) scale(1); }
  25%{ transform:translate(40px,-30px) scale(1.08); }
  50%{ transform:translate(-20px,20px) scale(.94); }
  75%{ transform:translate(-35px,-15px) scale(1.04); }
}

/*══════════════════════════════════════════════════════════
  按钮
══════════════════════════════════════════════════════════*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 20px;border-radius:var(--r);
  font-size:13px;font-weight:500;cursor:pointer;
  border:none;transition:all var(--transition);
  font-family:var(--font);line-height:1.4;white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 100%);
  pointer-events:none;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:var(--pg);
  color:#fff;
  box-shadow:0 2px 12px rgba(124,58,237,.35), 0 0 0 1px rgba(124,58,237,.2);
}
.btn-primary:hover{
  box-shadow:0 4px 24px rgba(124,58,237,.5), 0 0 0 2px rgba(124,58,237,.25);
  transform:translateY(-1px);
}
.btn-secondary{
  background:var(--card);
  color:var(--t2);
  border:1px solid var(--bd);
}
.btn-secondary:hover{
  background:var(--card2);
  color:var(--t1);
  border-color:var(--bd2);
}
.btn-ghost{
  background:transparent;color:var(--t2);
}
.btn-ghost:hover{
  background:var(--card);color:var(--t1);
}
.btn-sm{ padding:5px 12px;font-size:12px; }
.btn-lg{ padding:11px 28px;font-size:15px; }
.btn-xl{ padding:14px 36px;font-size:17px;font-weight:600; }

/* 发光按钮特化 */
.btn-glow{
  background:var(--pg);
  color:#fff;
  box-shadow:0 0 30px rgba(124,58,237,.4), 0 0 0 1px rgba(124,58,237,.3);
  animation:btnPulse 3s ease-in-out infinite;
}
@keyframes btnPulse{
  0%,100%{ box-shadow:0 0 30px rgba(124,58,237,.4), 0 0 0 1px rgba(124,58,237,.3); }
  50%{ box-shadow:0 0 50px rgba(124,58,237,.6), 0 0 0 2px rgba(167,139,250,.4); }
}

/*══════════════════════════════════════════════════════════
  输入框
══════════════════════════════════════════════════════════*/
.input{
  background:var(--input);
  border:1px solid var(--bd);
  border-radius:var(--r);
  padding:10px 14px;
  color:var(--t1);
  font-size:13px;font-family:var(--font);
  outline:none;width:100%;
  transition:all var(--transition);
}
.input:focus{
  border-color:var(--p);
  box-shadow:0 0 0 3px rgba(124,58,237,.1), 0 0 20px rgba(124,58,237,.05);
}
.input::placeholder{ color:var(--t3); }
select,
select.input{
  -webkit-appearance:none;appearance:none;
  min-height:38px;
  border:1px solid rgba(167,139,250,.18);
  border-radius:var(--r);
  color:var(--t1);
  background-color:#0A0A24;
  background-image:
    linear-gradient(135deg,rgba(167,139,250,.085),rgba(9,9,31,.96) 52%,rgba(6,6,22,.98)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C4B5FD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:0 0,right 12px center;
  background-size:100% 100%,14px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.18);
  cursor:pointer;
  font:700 12.5px/1 var(--font);
  padding:0 36px 0 13px;
  outline:none;
  transition:all var(--transition);
}
select:hover,
select.input:hover{border-color:rgba(196,181,253,.34);background-color:#0D0D2A;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.22),0 0 0 1px rgba(139,92,246,.08)}
select:focus,
select.input:focus{border-color:var(--p);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px rgba(124,58,237,.18),0 0 28px rgba(124,58,237,.12)}
select option{background:#0A0A24;color:var(--t1)}

/*══════════════════════════════════════════════════════════
  卡片（玻璃态）
══════════════════════════════════════════════════════════*/
.card{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--rl);
  padding:20px;
  transition:all var(--transition);
  position:relative;
}
.card:hover{
  border-color:var(--bd2);
  box-shadow:var(--shadow);
}
.card-title{
  font-size:15px;font-weight:600;
  margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}

/* 玻璃态卡片 */
.card-glass{
  background:rgba(15,15,40,.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(124,58,237,.15);
  border-radius:var(--rx);
}
.card-glass:hover{
  border-color:rgba(124,58,237,.35);
  box-shadow:0 8px 40px rgba(124,58,237,.12);
}

/* 发光卡片 */
.card-glow{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--rx);
  position:relative;
  overflow:hidden;
}
.card-glow::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.5),transparent);
  opacity:0;
  transition:opacity .3s;
}
.card-glow:hover::before{
  opacity:1;
}
.card-glow:hover{
  border-color:rgba(124,58,237,.3);
  box-shadow:0 0 40px rgba(124,58,237,.1), 0 4px 20px rgba(0,0,0,.4);
}

/*══════════════════════════════════════════════════════════
  进度条
══════════════════════════════════════════════════════════*/
.bar{
  height:8px;background:var(--input);
  border-radius:4px;overflow:hidden;
}
.bar-fill{
  height:100%;border-radius:4px;
  background:var(--pg);
  transition:width .6s;
  position:relative;
}
.bar-fill::after{
  content:'';
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  animation:shimmer 2s infinite;
}

@keyframes shimmer{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/*══════════════════════════════════════════════════════════
  标签
══════════════════════════════════════════════════════════*/
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 10px;border-radius:20px;
  font-size:11px;font-weight:500;
}
.tag-success{ background:rgba(16,185,129,.12);color:var(--green); }
.tag-warning{ background:rgba(245,158,11,.12);color:var(--orange); }
.tag-danger{ background:rgba(239,68,68,.12);color:var(--red); }
.tag-info{ background:rgba(59,130,246,.12);color:var(--blue); }
.tag-purple{ background:rgba(124,58,237,.12);color:var(--pl); }
.dot{ width:6px;height:6px;border-radius:50%;display:inline-block; }
.dot-g{ background:var(--green); }.dot-r{ background:var(--red); }
.dot-o{ background:var(--orange); }

/*══════════════════════════════════════════════════════════
  动画
══════════════════════════════════════════════════════════*/
@keyframes in{
  from{ opacity:0;transform:translateY(16px); }
  to{ opacity:1;transform:translateY(0); }
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pulse{
  0%,100%{ opacity:1; } 50%{ opacity:.5; }
}
@keyframes scaleIn{
  from{ opacity:0;transform:scale(.95); }
  to{ opacity:1;transform:scale(1); }
}
@keyframes slideUp{
  from{ opacity:0;transform:translateY(30px); }
  to{ opacity:1;transform:translateY(0); }
}
@keyframes borderGlow{
  0%,100%{ border-color:rgba(124,58,237,.2); }
  50%{ border-color:rgba(124,58,237,.5); }
}

.in{ animation:in .4s ease-out; }
.fade{ animation:fade .3s ease; }
.pulse{ animation:pulse 2s ease-in-out infinite; }

/* 渐现延迟工具 */
.delay-1{ animation-delay:.1s; }
.delay-2{ animation-delay:.2s; }
.delay-3{ animation-delay:.3s; }
.delay-4{ animation-delay:.4s; }

/*══════════════════════════════════════════════════════════
  渐变文字
══════════════════════════════════════════════════════════*/
.text-gradient{
  background:var(--pg);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/*══════════════════════════════════════════════════════════
  Toast
══════════════════════════════════════════════════════════*/
.toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%);
  z-index:9999;
  padding:12px 28px;border-radius:24px;
  font-size:14px;font-weight:500;
  background:var(--green);color:#fff;
  box-shadow:0 4px 20px rgba(16,185,129,.3);
  animation:in .3s ease;
}

/*══════════════════════════════════════════════════════════
  响应式工具
══════════════════════════════════════════════════════════*/
@media(max-width:1024px){
  :root{ --sectionPad: 40px; }
}
@media(max-width:640px){
  :root{ --sectionPad: 24px; }
}