/* SevenFa - 青花瓷·可爱主题 */
:root{
  --bg:#f0f4f8!important;--bg2:#ffffff!important;--bg3:#e8eef6!important;--bg4:#dbe5f0!important;
  --fg:#1a2332!important;--fg2:rgba(26,35,50,.5)!important;--fg3:rgba(26,35,50,.7)!important;
  --p:#3b82f6!important;--p2:#3b82f6!important;--p3:#60a5fa!important;
  --g:#10b981!important;--r:#f43f5e!important;--y:#f59e0b!important;--b:#3b82f6!important;--v:#8b5cf6!important;
  --cyan:#06b6d4!important;
  --radius:20px!important;
  --shadow:0 4px 20px rgba(59,130,246,.1)!important;
  --shadow-lg:0 12px 40px rgba(59,130,246,.15)!important;
  --glass:rgba(59,130,246,.04)!important;--glass2:rgba(59,130,246,.08)!important;
  --card-bg:#ffffff!important;--card-border:rgba(59,130,246,.12)!important;
  --card:#ffffff!important;--card2:#f8fafc!important;
  --nav-bg:rgba(240,244,248,.92)!important;--nav-border:rgba(59,130,246,.1)!important;
}
/* Night mode */
[data-theme="dark"]{
  --bg:#0f1218!important;--bg2:#161b22!important;--bg3:#1c2333!important;--bg4:#242d3d!important;
  --fg:#e2e8f0!important;--fg2:rgba(226,232,240,.5)!important;--fg3:rgba(226,232,240,.7)!important;
  --card-bg:#161b22!important;--card-border:rgba(59,130,246,.15)!important;
  --card:#161b22!important;--card2:#1c2333!important;
  --nav-bg:rgba(15,18,24,.92)!important;--nav-border:rgba(59,130,246,.12)!important;
  --shadow:0 4px 20px rgba(0,0,0,.3)!important;
  --shadow-lg:0 12px 40px rgba(0,0,0,.4)!important;
  --glass:rgba(59,130,246,.06)!important;--glass2:rgba(59,130,246,.1)!important;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;
  background:var(--bg)!important;color:var(--fg)!important;
  font-size:19px!important;line-height:1.7!important;overflow-x:hidden
}
a{color:var(--p)!important;text-decoration:none}
a:hover{color:var(--p2)!important}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:var(--p3)!important;border-radius:3px}
::selection{background:var(--p);color:#fff}

/* ===== 字体放大130% ===== */
h1{font-size:42px!important}
h2{font-size:32px!important}
h3{font-size:24px!important}
h4{font-size:20px!important}
input,select,textarea,button{font-size:18px!important}
.top-nav-center a{font-size:15px!important}
.btn{font-size:16px!important;padding:10px 22px!important}
.btn-sm{font-size:14px!important;padding:8px 16px!important}
.btn-xs{font-size:12px!important;padding:5px 10px!important}
th{font-size:14px!important}
td{font-size:15px!important}

/* ===== 统一按钮配色 ===== */
.btn,.btn-p,.btn-g,.btn-r,.btn-o,.btn-primary,.btn-secondary{
  border-radius:14px!important;font-weight:600!important;transition:all .25s!important;border:none!important
}
.btn-p,.btn-primary,.btn-g,.btn-r{
  background:linear-gradient(135deg,#3b82f6,#3b82f6)!important;
  color:#ffffff!important;
  box-shadow:0 4px 16px rgba(59,130,246,.2)!important
}
.btn-p:hover,.btn-primary:hover,.btn-g:hover,.btn-r:hover{
  filter:brightness(1.1)!important;transform:translateY(-2px)!important;
  box-shadow:0 6px 24px rgba(59,130,246,.3)!important
}
.btn-o,.btn-secondary{
  background:var(--glass)!important;
  border:1.5px solid var(--card-border)!important;
  color:var(--fg)!important
}
.btn-o:hover,.btn-secondary:hover{border-color:var(--p)!important;background:var(--glass2)!important}

/* ===== 导航栏 ===== */
.top-nav,.nav{
  background:var(--nav-bg)!important;
  border-bottom:2px solid rgba(59,130,246,.1)!important;
  box-shadow:0 2px 16px rgba(59,130,246,.06)!important
}
.top-nav-logo .acc{
  background:linear-gradient(135deg,#3b82f6,#3b82f6)!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important
}
.top-nav-center a{
  color:var(--fg2)!important;border-radius:12px!important;font-weight:500!important;transition:all .25s!important
}
.top-nav-center a:hover{color:var(--p)!important;background:var(--glass2)!important;transform:scale(1.05)}
.top-nav-center a.act{color:var(--p)!important;background:rgba(59,130,246,.1)!important;font-weight:700!important}
.top-nav-center a.cta{
  background:linear-gradient(135deg,#3b82f6,#3b82f6)!important;
  color:#ffffff!important;font-weight:700!important;
  box-shadow:0 4px 16px rgba(59,130,246,.25)!important;border-radius:12px!important
}
.top-nav-center a.cta:hover{transform:scale(1.06)!important;box-shadow:0 6px 20px rgba(59,130,246,.35)!important}

/* ===== 卡片 ===== */
.card,.sb,.mc,.wf-card{
  background:var(--card-bg)!important;
  border:1.5px solid var(--card-border)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
  transition:all .35s cubic-bezier(.4,0,.2,1)!important
}
.card:hover,.mc:hover,.sb:hover{
  box-shadow:var(--shadow-lg)!important;
  transform:translateY(-4px) scale(1.01)!important;
  border-color:rgba(59,130,246,.25)!important
}

/* ===== 表格 ===== */
table{border-collapse:separate!important;border-spacing:0!important}
th{background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(59,130,246,.03))!important;color:var(--fg)!important;font-weight:700!important;border-bottom:2px solid rgba(59,130,246,.1)!important;padding:12px 16px!important}
td{border-bottom:1px solid rgba(59,130,246,.06)!important;padding:10px 16px!important}
tr:hover td{background:rgba(59,130,246,.03)!important}

/* ===== 标签 ===== */
.tg{border-radius:10px!important;font-weight:600!important}
.tg-ok{background:rgba(16,185,129,.1)!important;color:#059669!important;border:1px solid rgba(16,185,129,.2)!important}
.tg-yl{background:rgba(245,158,11,.1)!important;color:#d97706!important;border:1px solid rgba(245,158,11,.2)!important}
.tg-rd{background:rgba(244,63,94,.1)!important;color:#e11d48!important;border:1px solid rgba(244,63,94,.2)!important}
.tg-bl{background:rgba(59,130,246,.1)!important;color:#2563eb!important;border:1px solid rgba(59,130,246,.2)!important}
.tg-sp{background:rgba(139,92,246,.1)!important;color:#7c3aed!important;border:1px solid rgba(139,92,246,.2)!important}
.tg-ad{background:rgba(59,130,246,.1)!important;color:#2563eb!important;border:1px solid rgba(59,130,246,.2)!important}

/* ===== 侧边栏 ===== */
.sidebar{background:var(--bg2)!important;border-right:2px solid rgba(59,130,246,.08)!important}
.ni{border-radius:12px!important;transition:all .2s!important}
.ni:hover{background:var(--glass2)!important;transform:translateX(4px)}
.ni.act{background:rgba(59,130,246,.1)!important;color:var(--p)!important;font-weight:600!important}

/* ===== 输入框 ===== */
input,select,textarea{
  background:var(--bg2)!important;border:1.5px solid var(--card-border)!important;
  color:var(--fg)!important;border-radius:12px!important;padding:10px 14px!important;transition:all .25s!important
}
input:focus,select:focus,textarea:focus{
  border-color:var(--p)!important;box-shadow:0 0 0 4px rgba(59,130,246,.1)!important;outline:none!important
}

/* ===== 弹窗 ===== */
.modal{border-radius:20px!important;box-shadow:0 20px 60px rgba(0,0,0,.15)!important;border:1.5px solid var(--card-border)!important}

/* ===== Toast ===== */
.toast{border-radius:14px!important;font-size:14px!important;font-weight:600!important}
.toast.ok{background:#3b82f6!important}
.toast.err{background:#f43f5e!important}

/* ===== 主题切换按钮 ===== */
.nav-toggle-btn{border-radius:10px!important;font-size:13px!important;transition:all .2s!important}
.nav-toggle-btn:hover{border-color:var(--p)!important;color:var(--p)!important;transform:scale(1.05)}
.nav-toggle-btn.act{background:#3b82f6!important;color:#ffffff!important;border-color:transparent!important}

/* ===== 分类侧栏 ===== */
.sb-item{border-radius:12px!important;font-size:15px!important;padding:10px 14px!important;transition:all .2s!important}
.sb-item:hover{background:var(--glass2)!important;transform:translateX(4px)}
.sb-item.act{background:rgba(59,130,246,.1)!important;color:var(--p)!important;font-weight:600!important}

/* ===== 加载动画 ===== */
.loader .d{background:#3b82f6!important;border-radius:50%!important}

/* ===== 按钮文字高对比度 ===== */
.btn,.btn-p,.btn-primary,.btn-g,.btn-r{
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.2)!important;
  font-weight:700!important;
}

/* ===== 按钮强制白色文字+阴影 ===== */
a.btn,a.btn-p,a.btn-primary,a.btn-g,a.btn-r,
button.btn,button.btn-p,button.btn-primary,.reg-btn,.pricing-btn a.primary{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.25)!important;
}

/* ===== Hero按钮强制白色 ===== */
.hero-content .btns a.primary,.hero-content .btns a.primary span{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.2)!important;
}

/* ===== 动画效果 ===== */
/* 基础入场动画 */
.fade-in{animation:fadeIn .5s ease-out both}
.slide-up{animation:slideUp .5s ease-out both}
.slide-down{animation:slideDown .5s ease-out both}
.slide-left{animation:slideLeft .5s ease-out both}
.slide-right{animation:slideRight .5s ease-out both}
.scale-in{animation:scaleIn .4s ease-out both}
.rotate-in{animation:rotateIn .5s ease-out both}

/* 延迟动画 */
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s}
.delay-4{animation-delay:.4s}
.delay-5{animation-delay:.5s}

/* 滚动触发动画 */
.animate-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.animate-on-scroll.animated{opacity:1;transform:translateY(0)}

/* Hover 效果增强 */
.hover-lift{transition:transform .2s,box-shadow .2s}
.hover-lift:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.15)}

.hover-glow{transition:box-shadow .3s}
.hover-glow:hover{box-shadow:0 0 20px rgba(59,130,246,.3)}

.hover-scale{transition:transform .2s}
.hover-scale:hover{transform:scale(1.05)}

/* 按钮点击效果 */
.btn,.btn-p,.btn-primary,.btn-g,.btn-r{
  transition:all .2s;
  position:relative;
  overflow:hidden;
}
.btn:active,.btn-p:active,.btn-primary:active{
  transform:scale(0.97);
}

/* 卡片悬停效果 */
.card,.exp-row{
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover,.exp-row:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,.1);
  border-color:var(--p);
}

/* 链接下划线动画 */
.link-underline{
  position:relative;
  text-decoration:none;
}
.link-underline::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:var(--p);
  transition:width .3s;
}
.link-underline:hover::after{
  width:100%;
}

/* 加载动画 */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes rotateIn{from{opacity:0;transform:rotate(-10deg)}to{opacity:1;transform:rotate(0)}}

/* 脉冲效果 */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.pulse{animation:pulse 2s infinite}

/* 闪烁效果 */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.blink{animation:blink 1.5s infinite}

/* 进度条动画 */
@keyframes progress{from{width:0}to{width:100%}}
.progress-bar{animation:progress 1s ease-out}

/* 打字机效果 */
.typewriter{overflow:hidden;border-right:2px solid var(--p);white-space:nowrap;animation:typing 2s steps(30,end),blink .75s step-end infinite}
@keyframes typing{from{width:0}to{width:100%}}

/* 粒子效果容器 */
.particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.particle{position:absolute;background:var(--p);border-radius:50%;opacity:.6;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

/* 响应式动画 - 移动端减少动画 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}