/* ================================================================
   考试报名系统 · 主样式表 V1.2.0
   主题系统：炫酷版 / 简约版 × 亮色 / 暗色
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Rajdhani:wght@500;600;700&display=swap');

/* ================================================================
   一、CSS 变量层（亮色 · 简约版 — 全局默认）
   ================================================================ */
:root {
  /* ── 后台可覆盖的"品牌主色" ── */
  --c-primary:        #2563eb;
  --c-primary-dark:   #1d4ed8;
  --c-primary-light:  #3b82f6;
  --c-primary-rgb:    37, 99, 235;

  /* ── 辅色 ── */
  --c-secondary: #0ea5e9;
  --c-accent:    #6366f1;
  --c-success:   #10b981;
  --c-danger:    #ef4444;
  --c-warning:   #f59e0b;
  --c-info:      #06b6d4;

  /* ── 背景（后台可覆盖） ── */
  --c-bg:         #f8fafc;
  --c-bg-card:    #ffffff;
  --c-bg-subtle:  #f1f5f9;
  --c-bg-input:   #ffffff;
  --c-bg-overlay: rgba(248,250,252,.9);

  /* ── 文字 ── */
  --c-text:        #0f172a;
  --c-text-2:      #475569;
  --c-text-3:      #94a3b8;
  --c-text-inv:    #ffffff;
  --c-on-primary:  #ffffff;

  /* ── 边框 ── */
  --c-border:   #e2e8f0;
  --c-border-2: #cbd5e1;

  /* ── 阴影 ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow:    0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.14);
  --shadow-primary:    0 4px 20px rgba(var(--c-primary-rgb),.28);
  --shadow-primary-lg: 0 8px 32px rgba(var(--c-primary-rgb),.38);

  /* ── 渐变 ── */
  --grad-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --grad-blue:    linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1e40af 100%);
  --grad-sky:     linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  --grad-hero:    linear-gradient(135deg, #dbeafe 0%, #ede9fe 55%, #e0f2fe 100%);
  --grad-text:    linear-gradient(135deg, #2563eb, #6366f1);
  --grad-mesh:
    radial-gradient(at 20% 10%, rgba(59,130,246,.1) 0, transparent 50%),
    radial-gradient(at 80%  0%, rgba(99,102,241,.07) 0, transparent 50%),
    radial-gradient(at  0% 60%, rgba(14,165,233,.06) 0, transparent 50%);

  /* ── 形状半径 ── */
  --r-xs: 6px;  --r-sm: 10px;  --r: 16px;  --r-lg: 22px;  --r-full: 9999px;

  /* ── 动画 ── */
  --ease: cubic-bezier(.4,0,.2,1);
  --t:      all .22s var(--ease);
  --t-slow: all .38s var(--ease);
  --t-bounce: all .28s cubic-bezier(.34,1.56,.64,1);

  /* ── 布局 ── */
  --header-h:  66px;
  --container: 1240px;

  /* ── 字体 ── */
  --font:      'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono: 'JetBrains Mono','Fira Code',Consolas,monospace;
  --font-hero: 'Rajdhani','Plus Jakarta Sans',sans-serif;

  /* ── 炫酷特效变量（炫酷版覆盖） ── */
  --glow-primary: 0 0 20px rgba(var(--c-primary-rgb),.4);
  --glow-strong:  0 0 40px rgba(var(--c-primary-rgb),.6);
  --neon-border:  rgba(var(--c-primary-rgb),.5);

  /* ── 主题类型标记 ── */
  --theme-style: 0;   /* 0=简约 1=炫酷 */
}

/* ================================================================
   二、暗色模式变量（[data-theme=dark]）
   ================================================================ */
[data-theme="dark"] {
  --c-primary:        #3b82f6;
  --c-primary-dark:   #2563eb;
  --c-primary-light:  #60a5fa;
  --c-primary-rgb:    59, 130, 246;

  --c-secondary: #22d3ee;
  --c-accent:    #818cf8;

  --c-bg:         #0f172a;
  --c-bg-card:    #1e293b;
  --c-bg-subtle:  #162032;
  --c-bg-input:   #1e293b;
  --c-bg-overlay: rgba(15,23,42,.92);

  --c-text:    #f1f5f9;
  --c-text-2:  #94a3b8;
  --c-text-3:  #475569;
  --c-text-inv:#0f172a;

  --c-border:   #1e293b;
  --c-border-2: #334155;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow:    0 4px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.65);

  --grad-hero: linear-gradient(135deg, #172034 0%, #1a1848 55%, #172038 100%);
  --grad-mesh:
    radial-gradient(at 20% 10%, rgba(59,130,246,.15) 0, transparent 50%),
    radial-gradient(at 80%  0%, rgba(99,102,241,.1)  0, transparent 50%),
    radial-gradient(at  0% 60%, rgba(14,165,233,.08) 0, transparent 50%);
}

/* ================================================================
   三、炫酷主题变量（[data-style=cool]）
   ================================================================ */
[data-style="cool"] {
  --c-primary:        #7c3aed;
  --c-primary-dark:   #6d28d9;
  --c-primary-light:  #8b5cf6;
  --c-primary-rgb:    124, 58, 237;
  --c-secondary:      #06b6d4;
  --c-accent:         #f43f5e;

  --grad-primary: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #06b6d4 100%);
  --grad-blue:    linear-gradient(135deg, #a78bfa 0%, #7c3aed 50%, #4f46e5 100%);
  --grad-hero:    linear-gradient(135deg, #1e1b4b 0%, #2d1b69 40%, #0c1445 100%);
  --grad-text:    linear-gradient(135deg, #a78bfa, #38bdf8);

  --glow-primary: 0 0 30px rgba(124,58,237,.5);
  --glow-strong:  0 0 60px rgba(124,58,237,.7);
  --neon-border:  rgba(124,58,237,.6);

  --c-bg:         #0d0d1a;
  --c-bg-card:    #13132a;
  --c-bg-subtle:  #1a1a35;
  --c-bg-input:   #1a1a35;
  --c-bg-overlay: rgba(13,13,26,.92);

  --c-text:    #e2e8f0;
  --c-text-2:  #94a3b8;
  --c-text-3:  #475569;
  --c-text-inv:#0d0d1a;

  --c-border:   rgba(124,58,237,.2);
  --c-border-2: rgba(124,58,237,.35);

  --shadow-primary:    0 4px 20px rgba(124,58,237,.4);
  --shadow-primary-lg: 0 8px 40px rgba(124,58,237,.6);
  --theme-style: 1;
}

/* 炫酷版·亮色 */
[data-style="cool"][data-theme="light"] {
  --c-bg:         #f5f3ff;
  --c-bg-card:    #ffffff;
  --c-bg-subtle:  #ede9fe;
  --c-bg-input:   #ffffff;
  --c-bg-overlay: rgba(245,243,255,.9);
  --c-text:    #1e1b4b;
  --c-text-2:  #4c1d95;
  --c-text-3:  #7c3aed;
  --c-border:   #ddd6fe;
  --c-border-2: #c4b5fd;
  --grad-hero: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 45%, #e0f2fe 100%);
}

/* ================================================================
   四、全局重置
   ================================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .35s var(--ease), color .35s var(--ease);
}
img { max-width:100%; height:auto }
a { color:var(--c-primary); text-decoration:none; transition:var(--t) }
a:hover { color:var(--c-primary-dark) }
button { font-family:var(--font); cursor:pointer }
input, textarea, select { font-family:var(--font) }

/* ================================================================
   五、背景装饰层
   ================================================================ */

/* 自定义背景图 */
.custom-bg {
  position:fixed; inset:0; z-index:-2;
  background-size:cover; background-position:center; background-attachment:fixed;
}
.custom-bg::after {
  content:''; position:absolute; inset:0;
  background: var(--c-bg-overlay);
}

/* 背景粒子（简约版细小，炫酷版更大更亮） */
.bg-particles { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.bp {
  position:absolute; border-radius:50%; opacity:0;
  animation: bpFloat linear infinite;
}
.bp-1  { width:4px;  height:4px;  background:rgba(var(--c-primary-rgb),.45); left:8%;   animation-duration:14s; animation-delay:0s }
.bp-2  { width:3px;  height:3px;  background:rgba(99,102,241,.5);            left:22%;  animation-duration:18s; animation-delay:2.5s }
.bp-3  { width:6px;  height:6px;  background:rgba(14,165,233,.3);             left:38%;  animation-duration:12s; animation-delay:5s }
.bp-4  { width:4px;  height:4px;  background:rgba(var(--c-primary-rgb),.4);  left:55%;  animation-duration:20s; animation-delay:1s }
.bp-5  { width:5px;  height:5px;  background:rgba(99,102,241,.35);            left:70%;  animation-duration:16s; animation-delay:3.5s }
.bp-6  { width:3px;  height:3px;  background:rgba(14,165,233,.4);             left:85%;  animation-duration:11s; animation-delay:7s }
.bp-7  { width:4px;  height:4px;  background:rgba(var(--c-primary-rgb),.3);  left:48%;  animation-duration:22s; animation-delay:9s }
.bp-8  { width:3px;  height:3px;  background:rgba(99,102,241,.5);             left:16%;  animation-duration:15s; animation-delay:11s }

/* 炫酷版：更多更亮粒子 */
[data-style="cool"] .bp-1 { width:6px;  height:6px;  background:rgba(124,58,237,.7) }
[data-style="cool"] .bp-3 { width:10px; height:10px; background:rgba(6,182,212,.5) }
[data-style="cool"] .bp-5 { width:8px;  height:8px;  background:rgba(244,63,94,.4) }
[data-style="cool"] .bp-7 { width:6px;  height:6px;  background:rgba(124,58,237,.5) }

@keyframes bpFloat {
  0%   { bottom:-20px; opacity:0; transform:translateX(0) rotate(0deg) }
  10%  { opacity:1 }
  90%  { opacity:.6 }
  100% { bottom:110vh; opacity:0; transform:translateX(60px) rotate(720deg) }
}

/* 背景网格 */
.bg-grid {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(var(--c-primary-rgb),.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--c-primary-rgb),.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  transition: opacity .35s;
}
[data-style="cool"] .bg-grid {
  background-image:
    linear-gradient(rgba(124,58,237,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.07) 1px, transparent 1px);
  opacity: .7;
}

/* 顶部进度条 */
.page-progress {
  position:fixed; top:0; left:0; height:3px; z-index:9999;
  background: var(--grad-primary);
  box-shadow: var(--glow-primary);
  transition: width .18s ease;
}

/* 移动端遮罩 */
.nav-overlay {
  display:none; position:fixed; inset:0;
  background: rgba(15,23,42,.5); z-index:997;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.nav-overlay.show { display:block; animation:fadeIn .25s ease }

/* ================================================================
   六、导航栏
   ================================================================ */
.site-header {
  position:fixed; top:0; left:0; width:100%; z-index:999;
  transition: var(--t-slow);
}

/* 顶部信息条 */
.header-top-bar {
  background: var(--grad-primary);
  padding: 5px 0;
  font-size: .73rem;
  color: rgba(255,255,255,.85);
  overflow:hidden; position:relative;
}
.header-top-bar::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
.header-top-inner {
  max-width: var(--container); margin:0 auto; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:1;
}
.header-top-inner a { color:rgba(255,255,255,.9); font-weight:500 }
.header-top-inner a:hover { color:#fff }

/* 主导航条 */
.header-main {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-border);
  transition: var(--t-slow);
}
[data-theme="dark"] .header-main,
[data-style="cool"] .header-main {
  background: rgba(13,13,26,.85);
}
[data-theme="dark"]:not([data-style="cool"]) .header-main {
  background: rgba(15,23,42,.88);
}
.site-header.scrolled .header-main {
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow);
  border-color: transparent;
}
[data-theme="dark"] .site-header.scrolled .header-main,
[data-style="cool"] .site-header.scrolled .header-main {
  background: rgba(13,13,26,.98);
  box-shadow: 0 4px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--c-primary-rgb),.1);
}
.header-main-inner {
  max-width: var(--container); margin:0 auto; padding:0 1.5rem;
  height: var(--header-h);
  display:flex; align-items:center; gap:1.5rem;
}

/* Logo */
.logo-area { display:flex; align-items:center; gap:.65rem; flex-shrink:0; text-decoration:none }
.logo-img {
  width:38px; height:38px; border-radius:10px; object-fit:cover;
  box-shadow: var(--shadow-primary); transition:var(--t);
}
.logo-area:hover .logo-img { transform:rotate(-6deg) scale(1.1); box-shadow:var(--shadow-primary-lg) }
.logo-text { display:flex; flex-direction:column; line-height:1.2 }
.logo-name {
  color:var(--c-text); font-size:1.02rem; font-weight:800;
  letter-spacing:-.01em; transition:var(--t);
}
.logo-area:hover .logo-name { color:var(--c-primary) }
.logo-sub {
  color:var(--c-primary); font-size:.64rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; opacity:.8;
}

/* 炫酷版 Logo 特效 */
[data-style="cool"] .logo-name {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 导航链接 */
.main-nav { display:flex; align-items:center; gap:.15rem; margin-left:auto }
.nav-link {
  display:flex; align-items:center; gap:.4rem;
  padding:.46rem .9rem; border-radius:var(--r-sm);
  color:var(--c-text-2); font-size:.875rem; font-weight:500;
  text-decoration:none; transition:var(--t);
  position:relative; white-space:nowrap;
}
.nav-link::after {
  content:''; position:absolute; bottom:5px; left:50%; right:50%;
  height:2px; background:var(--c-primary); border-radius:var(--r-full);
  transition: var(--t);
}
.nav-link:hover { color:var(--c-text); background:rgba(var(--c-primary-rgb),.07) }
.nav-link:hover::after, .nav-link.active::after { left:10px; right:10px }
.nav-link.active {
  color:var(--c-primary);
  background:rgba(var(--c-primary-rgb),.09);
  font-weight:600;
}
/* 炫酷版导航激活 */
[data-style="cool"] .nav-link.active {
  background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.25);
  box-shadow: 0 0 12px rgba(124,58,237,.15);
}
[data-style="cool"] .nav-link:hover {
  background: rgba(124,58,237,.1);
  box-shadow: 0 0 10px rgba(124,58,237,.12);
}

.nav-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; border:2px solid var(--c-primary) }

/* 右侧工具栏（夜间模式切换 + 菜单按钮） */
.nav-tools { display:flex; align-items:center; gap:.5rem; margin-left:.5rem }

/* 夜间模式切换按钮 */
.btn-theme-toggle {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--r-sm);
  background: rgba(var(--c-primary-rgb),.08);
  border: 1px solid rgba(var(--c-primary-rgb),.15);
  color: var(--c-text-2); font-size:.95rem;
  transition: var(--t-bounce);
  flex-shrink:0;
}
.btn-theme-toggle:hover {
  background: var(--c-primary);
  color: #fff;
  transform: scale(1.08) rotate(15deg);
  box-shadow: var(--shadow-primary);
}
[data-style="cool"] .btn-theme-toggle:hover {
  box-shadow: var(--glow-primary);
}

/* 移动端菜单按钮 */
.nav-toggle {
  display:none; background:var(--c-primary); border:none; color:#fff;
  font-size:1.1rem; cursor:pointer;
  padding:.44rem .65rem; border-radius:var(--r-xs);
  transition:var(--t);
}
.nav-toggle:hover { background:var(--c-primary-dark); transform:scale(1.06) }

/* ================================================================
   七、主内容区
   ================================================================ */
.main-content {
  flex:1; max-width:var(--container); width:100%; margin:0 auto;
  padding: calc(var(--header-h) + 28px + 1.5rem) 1.5rem 3rem;
  position:relative; z-index:1;
}

/* ================================================================
   八、Hero 区
   ================================================================ */
.hero-section {
  background: var(--grad-hero);
  border-radius: var(--r-lg);
  padding: 4rem 3.5rem;
  margin-bottom: 2.5rem;
  position:relative; overflow:hidden;
  border: 1px solid rgba(var(--c-primary-rgb),.1);
  transition: background .4s;
}
.hero-section::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 75% 35%, rgba(var(--c-primary-rgb),.1) 0, transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(14,165,233,.08) 0, transparent 50%);
  pointer-events:none;
}

/* 炫酷版 Hero */
[data-style="cool"] .hero-section {
  border-color: rgba(124,58,237,.3);
  box-shadow: 0 0 60px rgba(124,58,237,.15), inset 0 0 60px rgba(124,58,237,.05);
}
[data-style="cool"] .hero-section::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 60% 30%, rgba(6,182,212,.1) 0, transparent 60%);
  pointer-events:none;
}

/* 装饰环 */
.hero-ring {
  position:absolute; border-radius:50%;
  border: 1px solid rgba(var(--c-primary-rgb),.1);
  pointer-events:none; animation: ringPulse 4s ease-in-out infinite;
}
.hero-ring-1 { width:220px; height:220px; top:-50px; right:6% }
.hero-ring-2 { width:380px; height:380px; top:-110px; right:0%;  animation-delay:1.2s }
.hero-ring-3 { width:150px; height:150px; bottom:-20px; right:20%; animation-delay:2.4s }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.06);opacity:1} }

/* 炫酷版装饰环更亮 */
[data-style="cool"] .hero-ring { border-color:rgba(124,58,237,.3); box-shadow:0 0 20px rgba(124,58,237,.15) }

/* Hero 扫光线（炫酷版专有） */
.hero-scan-line {
  display:none;
  position:absolute; top:0; left:-100%;
  width:50%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.08), transparent);
  animation: scanLine 4s ease-in-out infinite;
  pointer-events:none;
}
[data-style="cool"] .hero-scan-line { display:block }
@keyframes scanLine { 0%{left:-60%} 100%{left:160%} }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(var(--c-primary-rgb),.1);
  border: 1px solid rgba(var(--c-primary-rgb),.22);
  color: var(--c-primary);
  padding:5px 16px; border-radius:var(--r-full);
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:1.2rem; animation:fadeUp .6s ease both;
}
.hero-eyebrow i { animation:rotateLoop 4s linear infinite }
@keyframes rotateLoop { to{transform:rotate(360deg)} }

[data-style="cool"] .hero-eyebrow {
  background: rgba(124,58,237,.15);
  border-color: rgba(124,58,237,.4);
  box-shadow: 0 0 15px rgba(124,58,237,.2);
  animation: fadeUp .6s ease both, neonPulse 3s ease-in-out infinite;
}
@keyframes neonPulse {
  0%,100%{ box-shadow:0 0 10px rgba(124,58,237,.2) }
  50%{ box-shadow:0 0 25px rgba(124,58,237,.45) }
}

.hero-title {
  font-size: clamp(2rem,4.5vw,3.4rem);
  font-weight:800; line-height:1.15;
  color:var(--c-text); letter-spacing:-.03em;
  margin-bottom:1rem; animation:fadeUp .6s .1s ease both;
}
[data-style="cool"] .hero-title {
  font-family: var(--font-hero);
  font-size: clamp(2.2rem, 5vw, 4rem);
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing:.02em;
}

.hero-title .grad-text {
  background: var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-style="cool"] .hero-title .grad-text { background:var(--grad-text) }

.hero-desc {
  font-size:1.05rem; color:var(--c-text-2); max-width:520px;
  line-height:1.7; margin-bottom:2rem; animation:fadeUp .6s .2s ease both;
}
.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; animation:fadeUp .6s .3s ease both }

/* ================================================================
   九、按钮系统
   ================================================================ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.62rem 1.4rem; border-radius:var(--r-full);
  font-size:.875rem; font-weight:600; border:none;
  cursor:pointer; transition:var(--t-bounce); white-space:nowrap;
  text-decoration:none; position:relative; overflow:hidden;
  -webkit-user-select:none; user-select:none;
  letter-spacing:.01em;
}
.btn:focus-visible { outline:3px solid rgba(var(--c-primary-rgb),.5); outline-offset:2px }

/* 主按钮 */
.btn-primary {
  background: var(--grad-primary);
  color: var(--c-on-primary);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  color: var(--c-on-primary);
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-primary-lg);
  filter: brightness(1.05);
}
.btn-primary:active { transform:translateY(0) scale(.98) }

/* 按钮扫光（简约版 hover） */
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  transform:translateX(-100%); transition:transform .5s ease;
  border-radius:inherit;
}
.btn-primary:hover::before { transform:translateX(100%) }

/* 炫酷版主按钮 */
[data-style="cool"] .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #4f46e5, #06b6d4);
  box-shadow: 0 4px 20px rgba(124,58,237,.4);
}
[data-style="cool"] .btn-primary:hover {
  box-shadow: 0 0 30px rgba(124,58,237,.7), 0 8px 32px rgba(124,58,237,.4);
}

/* 轮廓按钮 */
.btn-outline {
  background: transparent;
  color: var(--c-primary);
  border: 2px solid var(--c-primary);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--c-primary);
  color: var(--c-on-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}
[data-style="cool"] .btn-outline {
  border-color: rgba(124,58,237,.5);
  box-shadow: 0 0 0 0 rgba(124,58,237,.3);
}
[data-style="cool"] .btn-outline:hover {
  box-shadow: 0 0 20px rgba(124,58,237,.4);
}

/* 次要按钮 */
.btn-secondary {
  background: var(--c-bg-subtle);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
}
.btn-secondary:hover {
  background: var(--c-border);
  color: var(--c-text);
  transform: translateY(-1px);
}

/* 幽灵按钮 */
.btn-ghost {
  background: transparent;
  color: var(--c-text-2);
  border: 1px solid transparent;
}
.btn-ghost:hover {
  background: var(--c-bg-subtle);
  color: var(--c-text);
  border-color: var(--c-border);
}

/* 危险按钮 */
.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color:#fff;
  box-shadow: 0 4px 12px rgba(239,68,68,.3);
}
.btn-danger:hover {
  transform:translateY(-2px);
  box-shadow: 0 6px 20px rgba(239,68,68,.45);
  filter:brightness(1.05);
}

/* 成功按钮 */
.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color:#fff;
  box-shadow: 0 4px 12px rgba(16,185,129,.3);
}
.btn-success:hover {
  transform:translateY(-2px);
  box-shadow: 0 6px 20px rgba(16,185,129,.4);
}

/* 尺寸 */
.btn-sm { padding:.38rem .9rem; font-size:.8rem }
.btn-lg { padding:.85rem 2rem; font-size:1rem }
.btn-xs { padding:.25rem .7rem; font-size:.74rem }

/* 涟漪效果 */
.btn .ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0); animation:ripple .55s ease;
  pointer-events:none;
}
@keyframes ripple { to{transform:scale(4);opacity:0} }

/* ================================================================
   十、卡片
   ================================================================ */
.card {
  background: var(--c-bg-card);
  border-radius: var(--r);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  transition: var(--t);
  overflow:hidden;
}
.card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--c-border-2);
}
[data-style="cool"] .card {
  border-color: rgba(124,58,237,.18);
  background: linear-gradient(135deg, var(--c-bg-card) 0%, rgba(124,58,237,.03) 100%);
}
[data-style="cool"] .card:hover {
  box-shadow: 0 8px 32px rgba(124,58,237,.2), 0 0 0 1px rgba(124,58,237,.25);
  border-color: rgba(124,58,237,.4);
}

.card-header {
  padding:1.2rem 1.5rem;
  border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; gap:.75rem;
}
.card-body { padding:1.5rem }
.card-footer {
  padding:.9rem 1.5rem;
  border-top:1px solid var(--c-border);
  background:var(--c-bg-subtle);
}

/* 统计卡片 */
.stat-card {
  background:var(--c-bg-card);
  border:1px solid var(--c-border);
  border-radius:var(--r);
  padding:1.5rem;
  position:relative; overflow:hidden;
  transition:var(--t);
  box-shadow:var(--shadow-sm);
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--grad-primary);
  transform:scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease);
}
.stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow) }
.stat-card:hover::before { transform:scaleX(1) }
[data-style="cool"] .stat-card {
  border-color: rgba(124,58,237,.15);
  background: linear-gradient(145deg, var(--c-bg-card), rgba(124,58,237,.04));
}
[data-style="cool"] .stat-card:hover {
  box-shadow: 0 8px 32px rgba(124,58,237,.2), var(--glow-primary);
  border-color: rgba(124,58,237,.35);
}
[data-style="cool"] .stat-card::before {
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
}

.stat-icon {
  width:48px; height:48px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:1rem;
  background: rgba(var(--c-primary-rgb),.1);
  color: var(--c-primary); transition:var(--t);
}
.stat-card:hover .stat-icon { transform:scale(1.1) rotate(5deg) }
[data-style="cool"] .stat-icon {
  background: rgba(124,58,237,.15);
  box-shadow: 0 0 15px rgba(124,58,237,.2);
}
[data-style="cool"] .stat-card:hover .stat-icon {
  box-shadow: 0 0 25px rgba(124,58,237,.4);
}

.stat-num {
  font-size:2.2rem; font-weight:800; line-height:1;
  background: var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:.25rem;
}
/* 统计数字颜色变体 */
.stat-num-purple {
  background: linear-gradient(135deg, #7c3aed, #c165dd);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-num-green {
  background: linear-gradient(135deg, #38d167, #05c3de);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-num-gray {
  background: linear-gradient(135deg, #6c757d, #495057);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
[data-style="cool"] .stat-num-purple {
  background: linear-gradient(135deg, #a78bfa, #c084fc);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-shadow: none; filter: drop-shadow(0 0 8px rgba(124,58,237,.3));
}
[data-style="cool"] .stat-num-green {
  background: linear-gradient(135deg, #34d399, #22d3ee);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-shadow: none; filter: drop-shadow(0 0 8px rgba(6,182,212,.3));
}
[data-style="cool"] .stat-num-gray {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-shadow: none; filter: drop-shadow(0 0 8px rgba(148,163,184,.3));
}
.stat-label { font-size:.8rem; color:var(--c-text-3); text-transform:uppercase; letter-spacing:.06em; font-weight:600 }
.stat-desc { font-size:.82rem; color:var(--c-text-2); margin-top:.4rem }

/* 炫酷版统计卡片发光数字 */
[data-style="cool"] .stat-num {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-hero);
  font-size:2.5rem;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(124,58,237,.3));
}

/* ================================================================
   十一、表单
   ================================================================ */
.form-group { margin-bottom:1.25rem }
.form-label {
  display:block; font-size:.875rem; font-weight:600;
  color:var(--c-text); margin-bottom:.45rem;
}
.form-label .req { color:var(--c-danger); margin-left:2px }
.form-control {
  width:100%; padding:.68rem 1rem;
  background:var(--c-bg-input); color:var(--c-text);
  border:1.5px solid var(--c-border); border-radius:var(--r-sm);
  font-size:.9rem; outline:none; transition:var(--t);
  -webkit-appearance:none;
}
.form-control::placeholder { color:var(--c-text-3) }
.form-control:hover { border-color:var(--c-border-2) }
.form-control:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb),.12);
}
[data-style="cool"] .form-control:focus {
  box-shadow: 0 0 0 3px rgba(124,58,237,.2), 0 0 15px rgba(124,58,237,.1);
}
textarea.form-control { resize:vertical; min-height:110px }
select.form-control { cursor:pointer }
.form-hint { font-size:.775rem; color:var(--c-text-3); margin-top:.35rem }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media (max-width:640px) { .form-row { grid-template-columns:1fr } }

/* ================================================================
   十二、Alert / Toast 系统
   ================================================================ */
.alert {
  padding:.85rem 1.1rem; border-radius:var(--r-sm);
  font-size:.88rem; display:flex; align-items:flex-start; gap:.65rem;
  margin-bottom:1rem; border:1px solid transparent;
  animation: alertIn .3s var(--ease);
  position:relative;
}
@keyframes alertIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.alert-success { background:#ecfdf5; border-color:#a7f3d0; color:#065f46 }
.alert-danger   { background:#fef2f2; border-color:#fecaca; color:#991b1b }
.alert-warning  { background:#fffbeb; border-color:#fde68a; color:#92400e }
.alert-info     { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8 }
[data-theme="dark"] .alert-success { background:#064e3b; border-color:#065f46; color:#6ee7b7 }
[data-theme="dark"] .alert-danger  { background:#7f1d1d; border-color:#991b1b; color:#fca5a5 }
[data-theme="dark"] .alert-warning { background:#78350f; border-color:#92400e; color:#fcd34d }
[data-theme="dark"] .alert-info    { background:#1e3a8a; border-color:#1d4ed8; color:#93c5fd }

/* Toast */
#toastContainer {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  display:flex; flex-direction:column; gap:.6rem; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1.1rem; border-radius:var(--r-sm);
  background:var(--c-bg-card); color:var(--c-text);
  box-shadow:var(--shadow-lg); border:1px solid var(--c-border);
  font-size:.85rem; pointer-events:all; min-width:240px; max-width:360px;
  animation:toastIn .3s var(--ease);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
.toast.out { animation:toastOut .3s var(--ease) forwards }
@keyframes toastOut { to{opacity:0;transform:translateX(20px)} }
.toast-icon { font-size:1.1rem; flex-shrink:0 }
.toast-msg { flex:1 }
.toast-close { background:none; border:none; color:var(--c-text-3); font-size:.8rem; cursor:pointer; padding:.1rem; transition:var(--t) }
.toast-close:hover { color:var(--c-text) }
.toast.success .toast-icon { color:var(--c-success) }
.toast.error   .toast-icon { color:var(--c-danger) }
.toast.warning .toast-icon { color:var(--c-warning) }
.toast.info    .toast-icon { color:var(--c-info) }
[data-style="cool"] .toast {
  background: rgba(19,19,42,.95);
  border-color: rgba(124,58,237,.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 20px rgba(124,58,237,.15);
}

/* ================================================================
   十三、徽章 / 标签
   ================================================================ */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.22rem .65rem; border-radius:var(--r-full);
  font-size:.73rem; font-weight:700; letter-spacing:.03em;
  white-space:nowrap;
}
.badge-primary { background:rgba(var(--c-primary-rgb),.12); color:var(--c-primary) }
.badge-success { background:#ecfdf5; color:#059669 }
.badge-warning { background:#fffbeb; color:#d97706 }
.badge-danger  { background:#fef2f2; color:#dc2626 }
.badge-info    { background:#eff6ff; color:#2563eb }
.badge-gray    { background:var(--c-bg-subtle); color:var(--c-text-2) }
[data-theme="dark"] .badge-success { background:rgba(16,185,129,.15); color:#34d399 }
[data-theme="dark"] .badge-warning { background:rgba(245,158,11,.15); color:#fbbf24 }
[data-theme="dark"] .badge-danger  { background:rgba(239,68,68,.15);  color:#f87171 }
[data-theme="dark"] .badge-info    { background:rgba(59,130,246,.15); color:#93c5fd }
[data-style="cool"] .badge-primary { background:rgba(124,58,237,.15); color:#a78bfa; box-shadow:0 0 8px rgba(124,58,237,.2) }

/* ================================================================
   十四、表格
   ================================================================ */
.table-wrap { overflow-x:auto; border-radius:var(--r); border:1px solid var(--c-border) }
.table { width:100%; border-collapse:collapse; font-size:.875rem }
.table th {
  background:var(--c-bg-subtle); color:var(--c-text-2);
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:.85rem 1rem; text-align:left; white-space:nowrap;
  border-bottom:2px solid var(--c-border);
}
.table td {
  padding:.9rem 1rem; border-bottom:1px solid var(--c-border);
  color:var(--c-text); vertical-align:middle;
  transition:background .15s;
}
.table tr:last-child td { border-bottom:0 }
.table tr:hover td { background:rgba(var(--c-primary-rgb),.03) }
[data-theme="dark"] .table tr:hover td { background:rgba(255,255,255,.03) }
[data-style="cool"] .table th { background:rgba(124,58,237,.08) }
[data-style="cool"] .table tr:hover td { background:rgba(124,58,237,.05) }

/* ================================================================
   十五、页面标题
   ================================================================ */
.page-header {
  margin-bottom:2rem;
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.page-title {
  font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800;
  color:var(--c-text); letter-spacing:-.02em; line-height:1.2;
}
[data-style="cool"] .page-title {
  background: var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-family: var(--font-hero); font-size:clamp(1.8rem,3.5vw,2.6rem);
}
.page-subtitle { color:var(--c-text-3); font-size:.9rem; margin-top:.3rem }

/* 面包屑 */
.breadcrumb {
  display:flex; align-items:center; gap:.4rem;
  font-size:.8rem; color:var(--c-text-3); margin-bottom:1rem;
  flex-wrap:wrap;
}
.breadcrumb a { color:var(--c-text-2) }
.breadcrumb a:hover { color:var(--c-primary) }
.breadcrumb-sep { opacity:.4 }

/* ================================================================
   十六、考试列表卡片
   ================================================================ */
.exam-card {
  background:var(--c-bg-card); border:1px solid var(--c-border);
  border-radius:var(--r); padding:1.5rem;
  transition:var(--t); position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.exam-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad-primary); transform:scaleY(0); transform-origin:top;
  transition:transform .35s var(--ease);
}
.exam-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--c-border-2) }
.exam-card:hover::before { transform:scaleY(1) }
[data-style="cool"] .exam-card { border-color:rgba(124,58,237,.15) }
[data-style="cool"] .exam-card::before { background:linear-gradient(180deg,#7c3aed,#06b6d4) }
[data-style="cool"] .exam-card:hover {
  box-shadow: 0 8px 32px rgba(124,58,237,.2), 0 0 0 1px rgba(124,58,237,.3);
  border-color:rgba(124,58,237,.3);
}

.exam-card-title { font-size:1.05rem; font-weight:700; color:var(--c-text); margin-bottom:.5rem }
.exam-card-meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.82rem; color:var(--c-text-2) }
.exam-card-meta i { width:14px; color:var(--c-primary); opacity:.8 }
[data-style="cool"] .exam-card-meta i { color:rgba(124,58,237,.8) }

/* 状态 banner */
.status-banner {
  position:absolute; top:12px; right:-28px;
  background:var(--c-primary); color:#fff;
  font-size:.65rem; font-weight:700; letter-spacing:.08em;
  padding:3px 32px; transform:rotate(45deg);
  text-transform:uppercase;
}
.status-banner.ongoing { background:#10b981 }
.status-banner.completed { background:var(--c-text-3) }

/* ================================================================
   十七、时间线
   ================================================================ */
.timeline { position:relative; padding-left:2rem }
.timeline::before {
  content:''; position:absolute; left:.7rem; top:.5rem; bottom:.5rem; width:2px;
  background: linear-gradient(180deg, var(--c-primary), rgba(var(--c-primary-rgb),.1));
}
.timeline-item { position:relative; margin-bottom:1.5rem; padding-left:.75rem }
.timeline-dot {
  position:absolute; left:-1.5rem; top:.35rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--c-primary);
  border:3px solid var(--c-bg-card);
  box-shadow: 0 0 0 2px var(--c-primary);
  transition:var(--t);
}
[data-style="cool"] .timeline-dot {
  box-shadow: 0 0 0 2px rgba(124,58,237,.5), 0 0 15px rgba(124,58,237,.5);
}
.timeline-item:hover .timeline-dot { transform:scale(1.3) }

/* ================================================================
   十八、登录卡片 / Modal
   ================================================================ */
.login-card {
  background:var(--c-bg-card); border-radius:var(--r-lg);
  border:1px solid var(--c-border);
  box-shadow:var(--shadow-xl);
  padding:2.5rem; max-width:420px; width:100%; margin:0 auto;
  animation:fadeUp .4s ease both;
}
[data-style="cool"] .login-card {
  border-color:rgba(124,58,237,.25);
  box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 40px rgba(124,58,237,.2);
}

/* 社交登录按钮 */
.login-btn {
  width:100%; padding:.85rem 1.2rem;
  border-radius:var(--r-sm); border:1.5px solid var(--c-border);
  background:var(--c-bg-card); color:var(--c-text);
  font-size:.9rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  cursor:pointer; transition:var(--t-bounce); text-decoration:none;
  margin-bottom:.7rem;
}
.login-btn:hover {
  border-color:var(--c-primary); background:rgba(var(--c-primary-rgb),.05);
  color:var(--c-primary); transform:translateY(-2px);
  box-shadow:var(--shadow-primary);
}
[data-style="cool"] .login-btn:hover {
  border-color:rgba(124,58,237,.5);
  box-shadow:0 0 20px rgba(124,58,237,.25);
}
.login-btn-icon { width:24px; height:24px; flex-shrink:0 }

/* 分割线 */
.divider {
  display:flex; align-items:center; gap:.75rem;
  font-size:.78rem; color:var(--c-text-3);
  margin:1rem 0;
}
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--c-border) }

/* ================================================================
   十九、公告横幅
   ================================================================ */
.ann-banner-wrap { margin-bottom:1.25rem }
.ann-banner {
  border-radius:var(--r-sm); padding:.85rem 1.1rem;
  display:flex; align-items:flex-start; gap:.75rem;
  font-size:.88rem; margin-bottom:.5rem; position:relative;
  animation:alertIn .3s ease;
}
.ann-banner-close {
  position:absolute; right:.75rem; top:.75rem;
  background:none; border:none; font-size:.8rem;
  color:currentColor; opacity:.5; cursor:pointer; transition:var(--t);
  line-height:1;
}
.ann-banner-close:hover { opacity:1 }
.ann-banner-title { font-weight:700 }
.ann-banner-content { margin-top:.2rem; opacity:.85 }

/* 弹窗公告 */
.ann-popup-overlay {
  position:fixed; inset:0; z-index:8888;
  background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem; animation:fadeIn .3s ease;
}
.ann-popup-box {
  background:var(--c-bg-card); border-radius:var(--r-lg);
  border:1px solid var(--c-border);
  box-shadow:var(--shadow-xl);
  max-width:480px; width:100%; overflow:hidden;
  animation:scaleIn .35s var(--ease);
}
@keyframes scaleIn { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
.ann-popup-header {
  background:var(--grad-primary); color:#fff;
  padding:1.1rem 1.5rem; display:flex; align-items:center; justify-content:space-between;
}
.ann-popup-body { padding:1.5rem; font-size:.9rem; color:var(--c-text-2); line-height:1.7 }
.ann-popup-footer { padding:.9rem 1.5rem; border-top:1px solid var(--c-border); text-align:right }

/* ================================================================
   二十、Footer
   ================================================================ */
.site-footer {
  background:var(--c-bg-card);
  border-top:1px solid var(--c-border);
  padding:1.5rem 1.5rem;
  text-align:center;
  color:var(--c-text-3);
  font-size:.82rem;
  position:relative; z-index:1;
}
.footer-inner { max-width:var(--container); margin:0 auto }
.footer-inner a { color:var(--c-text-2); font-weight:600 }
.footer-inner a:hover { color:var(--c-primary) }
[data-style="cool"] .site-footer {
  background:rgba(13,13,26,.9);
  border-color:rgba(124,58,237,.15);
}

/* ================================================================
   二十一、分页
   ================================================================ */
.pagination {
  display:flex; justify-content:center; align-items:center;
  gap:.35rem; margin-top:2rem; flex-wrap:wrap;
}
.page-item {
  display:flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 .5rem;
  border-radius:var(--r-sm); border:1px solid var(--c-border);
  font-size:.85rem; font-weight:500; color:var(--c-text-2);
  background:var(--c-bg-card); text-decoration:none;
  transition:var(--t);
}
.page-item:hover, .page-item.active {
  background:var(--c-primary); color:#fff;
  border-color:var(--c-primary);
  box-shadow:var(--shadow-primary);
}
.page-item.disabled { opacity:.4; pointer-events:none }

/* ================================================================
   二十二、滚动入场动画
   ================================================================ */
.anim {
  opacity:0; transform:translateY(24px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.anim.visible { opacity:1; transform:translateY(0) }
.anim-delay-1 { transition-delay:.1s }
.anim-delay-2 { transition-delay:.18s }
.anim-delay-3 { transition-delay:.26s }
.anim-delay-4 { transition-delay:.34s }
.anim-delay-5 { transition-delay:.42s }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ================================================================
   二十三、炫酷版专属特效
   ================================================================ */

/* 扫光动画容器 */
[data-style="cool"] .card::after,
[data-style="cool"] .stat-card::after {
  content:''; position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  transition:left .6s ease;
  pointer-events:none;
}
[data-style="cool"] .card:hover::after,
[data-style="cool"] .stat-card:hover::after { left:120% }

/* 霓虹边框（炫酷版激活元素） */
[data-style="cool"] .active-glow {
  box-shadow: 0 0 0 1px var(--neon-border), 0 0 20px rgba(var(--c-primary-rgb),.3);
}

/* 炫酷标题旋转字（英文标识） */
[data-style="cool"] .cool-badge {
  display:inline-block; padding:2px 10px;
  background:linear-gradient(90deg,#7c3aed,#06b6d4);
  border-radius:4px; color:#fff; font-size:.75rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 0 15px rgba(124,58,237,.5);
  animation:neonPulse 2.5s ease-in-out infinite;
}

/* ================================================================
   二十四、响应式
   ================================================================ */
@media (max-width:900px) {
  .main-content { padding: calc(var(--header-h) + 28px + 1rem) 1rem 2rem }
  .hero-section { padding:2.5rem 1.5rem }
  .hero-ring { display:none }
}

@media (max-width:768px) {
  .nav-toggle { display:flex }
  .btn-theme-toggle { display:flex }
  .main-nav {
    display:flex; flex-direction:column;
    position:fixed; top:0; right:-100%; width:260px; height:100vh;
    background:var(--c-bg-card);
    box-shadow:var(--shadow-xl);
    padding:calc(var(--header-h) + 1rem) 1rem 2rem;
    overflow-y:auto; z-index:998; transition:right .3s var(--ease);
    gap:.2rem;
  }
  .main-nav.open { right:0 }
  [data-style="cool"] .main-nav { background:rgba(13,13,26,.98) }
  .nav-link { padding:.7rem 1rem; border-radius:var(--r-sm) }
  .main-content { padding:calc(var(--header-h) + 28px + .5rem) 1rem 1.5rem }
  .hero-section { padding:2rem 1.25rem }
  .hero-title { font-size:clamp(1.6rem,6vw,2.4rem) }
  .form-row { grid-template-columns:1fr }
  .page-header { flex-direction:column }
}

@media (max-width:480px) {
  .hero-section { padding:1.5rem 1rem }
  .hero-actions { flex-direction:column }
  .hero-actions .btn { width:100%; justify-content:center }
  .login-card { padding:1.5rem }
  #toastContainer { bottom:.75rem; right:.75rem; left:.75rem }
  .toast { max-width:100% }
}

/* ================================================================
   二十五、辅助工具类
   ================================================================ */
.container { max-width:var(--container); margin:0 auto; padding:0 1.5rem }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
.text-center { text-align:center }
.text-right  { text-align:right }
.mt-1 { margin-top:.5rem }   .mt-2 { margin-top:1rem }   .mt-3 { margin-top:1.5rem }
.mb-1 { margin-bottom:.5rem } .mb-2 { margin-bottom:1rem } .mb-3 { margin-bottom:1.5rem }
.gap-1 { gap:.5rem } .gap-2 { gap:1rem } .gap-3 { gap:1.5rem }
.flex { display:flex } .flex-col { flex-direction:column }
.items-center { align-items:center } .justify-between { justify-content:space-between }
.flex-wrap { flex-wrap:wrap } .flex-1 { flex:1 }
.w-full { width:100% }
.hidden { display:none !important }
.opacity-50 { opacity:.5 }
.rounded { border-radius:var(--r) }
.rounded-full { border-radius:var(--r-full) }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem }
@media(max-width:768px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr) } }
@media(max-width:480px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr } }

/* 段位颜色班（额外兼容） */
.rank-s  { color:#f59e0b; font-weight:700 }
.rank-a  { color:#3b82f6; font-weight:700 }
.rank-b  { color:#10b981; font-weight:700 }
.rank-c  { color:#6366f1; font-weight:700 }
.rank-d  { color:#94a3b8; font-weight:700 }