:root {
  /* 主题色 (默认值) */
  --bg-base: #07111f;
  --bg-gradient-end: #0b1728;
  --surface-hero: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  --surface-hero-border: rgba(255, 255, 255, .1);
  --surface-card: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .03));
  --surface-card-hover: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .04));
  --surface-panel: rgba(13, 25, 43, .72);
  --surface-panel-strong: rgba(15, 29, 48, .9);
  --surface-elevated: rgba(255, 255, 255, .05);
  --surface-elevated-border: rgba(255, 255, 255, .08);
  /* 文字颜色 */
  --text-primary: #ecf3ff;
  --text-secondary: #8ea3bf;
  --text-title: #ffffff;
  --text-inverse: #0f172a;
  /* 卡片 & 交互 */
  --card-bg: rgba(255, 255, 255, .04);
  --card-hover-bg: rgba(255, 255, 255, .07);
  --border-light: rgba(148, 163, 184, .12);
  --border-strong: rgba(148, 163, 184, .2);
  /* 品牌色 / 功能色 */
  --blue-primary: #5aa2ff;
  --blue-deep: #3b82f6;
  --green-accent: #22c55e;
  --orange-accent: #f59e0b;
  --purple-accent: #8b5cf6;
  --red-accent: #ef4444;
  --cyan-accent: #22d3ee;
  /* 标签颜色 (品牌扩展) */
  --tag-green-color: #34d399;
  --tag-green-bg: rgba(16, 185, 129, .12);
  --tag-green-border: rgba(16, 185, 129, .22);
  --tag-orange-color: #fbbf24;
  --tag-orange-bg: rgba(245, 158, 11, .12);
  --tag-orange-border: rgba(245, 158, 11, .22);
  --tag-purple-color: #a78bfa;
  --tag-purple-bg: rgba(139, 92, 246, .12);
  --tag-purple-border: rgba(139, 92, 246, .22);
  --tag-red-color: #f87171;
  --tag-red-bg: rgba(239, 68, 68, .12);
  --tag-red-border: rgba(239, 68, 68, .22);
  --tag-blue-color: #60a5fa;
  --tag-blue-bg: rgba(59, 130, 246, .12);
  --tag-blue-border: rgba(59, 130, 246, .22);
  /* 渐变光晕 (背景特效) */
  --glow-blue: rgba(59, 130, 246, .16);
  --glow-purple: rgba(139, 92, 246, .14);
  --glow-cyan: rgba(34, 211, 238, .08);
  --hero-glow-blue: radial-gradient(circle, rgba(90, 162, 255, .22), transparent 65%);
  --hero-glow-cyan: radial-gradient(circle, rgba(34, 211, 238, .12), transparent 65%);
  /* 阴影 */
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, .28);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .18);
  --shadow-hover: 0 14px 28px rgba(0, 0, 0, .18);
  --shadow-button: 0 14px 34px rgba(37, 99, 235, .34), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  --shadow-button-hover: 0 18px 38px rgba(37, 99, 235, .42), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  --shadow-button-purple: 0 18px 38px rgba(139, 92, 246, .42), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  --shadow-button-green: 0 18px 38px rgba(34, 197, 94, .42), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  /* 圆角 */
  --radius-2xl: 28px;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 16px;
  --radius-sm: 14px;
  --radius-full: 999px;
  /* 间距/尺寸 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  /* 模糊 */
  --blur-sm: 8px;
  --blur-md: 10px;
  /* 按钮 */
  --btn-primary-grad: linear-gradient(135deg, #2563eb, #60a5fa);
  --btn-theme-grad: linear-gradient(135deg, #8b5cf6, #a78bfa);
  --btn-backtop-grad: linear-gradient(135deg, #22c55e, #4ade80);
  /* 其他UI */
  --pill-bg: rgba(255, 255, 255, .06);
  --pill-border: rgba(255, 255, 255, .09);
  --pill-color: #dbeafe;
  --info-box-bg: rgba(255, 255, 255, .05);
  --info-box-border: rgba(255, 255, 255, .08);
  --notice-bg: rgba(255, 255, 255, .045);
  --notice-border: rgba(255, 255, 255, .08);
  --notice-text: #d6e2f3;
  --notice-link: #8cc4ff;
}
/* 日间模式 */ 
:root.light {
  --bg-base: #f8fafc;
  --bg-gradient-end: #eff6ff;
  --surface-hero: rgba(0, 0, 0, 0);
  --surface-hero-border: rgba(0, 0, 0, .08);
  --surface-card: linear-gradient(180deg, rgba(0, 0, 0, .045), rgba(0, 0, 0, .03));
  --surface-card-hover: linear-gradient(180deg, rgba(0, 0, 0, .07), rgba(0, 0, 0, .04));
  --surface-panel: rgba(255, 255, 255, .72);
  --surface-panel-strong: rgba(255, 255, 255, .9);
  --surface-elevated: rgba(0, 0, 0, 0);
  --surface-elevated-border: rgba(0, 0, 0, .08);
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-title: #0f172a;
  --text-inverse: #ffffff;
  --card-bg: rgba(0, 0, 0, .04);
  --card-hover-bg: rgba(0, 0, 0, .07);
  --border-light: rgba(100, 116, 139, .12);
  --border-strong: rgba(100, 116, 139, .2);
  --glow-blue: rgba(37, 99, 235, .12);
  --glow-purple: rgba(124, 58, 237, .1);
  --glow-cyan: rgba(6, 182, 212, .08);
  --hero-glow-blue: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 65%);
  --hero-glow-cyan: radial-gradient(circle, rgba(6, 182, 212, .08), transparent 65%);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, .12);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .08);
  --shadow-hover: 0 14px 28px rgba(0, 0, 0, .08);
  --pill-bg: rgba(0, 0, 0, .06);
  --pill-border: rgba(0, 0, 0, .09);
  --pill-color: #1e40af;
  --info-box-bg: rgba(0, 0, 0, .05);
  --info-box-border: rgba(0, 0, 0, .08);
  --notice-bg: rgba(0, 0, 0, .03);
  --notice-border: rgba(0, 0, 0, .08);
  --notice-text: #334155;
  --notice-link: #1d4ed8;
  --tag-green-color: #0a6e4a;
  --tag-green-bg: rgba(16, 185, 129, 0.18);
  --tag-green-border: rgba(16, 185, 129, 0.35);
  --tag-orange-color: #c2410c;
  --tag-orange-bg: rgba(249, 115, 22, 0.16);
  --tag-orange-border: rgba(249, 115, 22, 0.32);
  --tag-purple-color: #6b21a5;
  --tag-purple-bg: rgba(139, 92, 246, 0.16);
  --tag-purple-border: rgba(139, 92, 246, 0.32);
  --tag-red-color: #b91c1c;
  --tag-red-bg: rgba(220, 38, 38, 0.16);
  --tag-red-border: rgba(220, 38, 38, 0.32);
  --tag-blue-color: #1e40af;
  --tag-blue-bg: rgba(37, 99, 235, 0.16);
  --tag-blue-border: rgba(37, 99, 235, 0.32);
}
/* ---------- 全局 ---------- */
* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(900px 500px at 0% 0%, var(--glow-blue), transparent 55%), radial-gradient(700px 420px at 100% 10%, var(--glow-purple), transparent 52%), radial-gradient(800px 500px at 50% 100%, var(--glow-cyan), transparent 50%), linear-gradient(180deg, var(--bg-base), var(--bg-gradient-end));
  background-attachment: fixed;
  line-height: 1.6;
  transition: background .3s ease, color .3s ease;
}
a {
  color: inherit;
  text-decoration: none;
}
/* ---------- 容器 ---------- */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 18px 90px;
}
/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 34px 30px 30px;
  border-radius: var(--radius-2xl);
  background: var(--surface-hero);
  border: 1px solid var(--surface-hero-border);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--spacing-2xl);
  transition: background .3s ease, border .3s ease;
}
.hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--hero-glow-blue);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--hero-glow-cyan);
  pointer-events: none;
}
.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.hero-left {
  flex: 2;
  min-width: 200px;
}
.logo-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #8b5cf6);
  border-radius: 20px;
  box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand-logo img {
  width: 40px;
  height: 40px;
}
.logoimg {
  height: 58px;
  border-radius: 20px;
  box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand-logo:hover, .logoimg:hover {
  transform: scale(1.02);
}
.hero-left h1 {
  margin: 0;
  font-size: clamp(28px, 4.8vw, 48px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--text-title);
  background: linear-gradient(135deg, var(--text-title), var(--blue-primary));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.light .hero-left h1 {
  background: linear-gradient(135deg, #0f172a, #2563eb);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.hero-left p {
  margin: 8px 0 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
}
.hero-badge-row {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.top-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-color);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(var(--blur-sm));
  transition: background .3s ease, border .3s ease;
}
.top-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-accent);
  box-shadow: 0 0 10px rgba(34, 197, 94, .8);
}
.hero-side {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.info-box {
  min-width: 140px;
  padding: 14px var(--spacing-lg);
  border-radius: var(--radius-lg);
  background: var(--info-box-bg);
  border: 1px solid var(--info-box-border);
  backdrop-filter: blur(var(--blur-sm));
  transition: background .3s ease, border .3s ease;
}
.info-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.info-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-title);
  transition: color .3s ease;
}
/* ---------- 区块卡片 ---------- */
.section {
  margin-bottom: 22px;
  padding: 22px;
  border-radius: var(--radius-xl);
  background: var(--surface-elevated);
  border: 1px solid var(--surface-elevated-border);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--blur-md));
  transition: background .3s ease, border .3s ease;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.section-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--text-title);
  background: linear-gradient(135deg, rgba(90, 162, 255, .28), rgba(59, 130, 246, .12));
  border: 1px solid rgba(90, 162, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: background .3s ease, border .3s ease;
}
.light .section-icon {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .08);
}
.section h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: var(--text-title);
  transition: color .3s ease;
}
.section-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}
/* 网格布局 */
.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 720px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* 链接卡片 */
.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 94px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  transition: .22s ease;
  overflow: hidden;
}
.link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(90, 162, 255, .08), transparent 45%);
  opacity: 0;
  transition: .22s ease;
}
.link:hover {
  transform: translateY(-4px);
  background: var(--surface-card-hover);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}
.link:hover::before {
  opacity: 1;
}
.link img {
  border-radius: var(--radius-lg);
  height: 50px;
  width: 50px;
  object-fit: cover;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .08))
}
.link-left {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1;
}
.name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: var(--spacing-xs);
  word-break: break-word;
  transition: color .3s ease;
}
.sub {
  font-size: 13px;
  color: var(--text-secondary);
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 标签 */
.tag {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
  backdrop-filter: blur(var(--blur-md));
}
.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.tag.green {
  color: var(--tag-green-color);
  background: var(--tag-green-bg);
  border-color: var(--tag-green-border);
}
.tag.orange {
  color: var(--tag-orange-color);
  background: var(--tag-orange-bg);
  border-color: var(--tag-orange-border);
}
.tag.purple {
  color: var(--tag-purple-color);
  background: var(--tag-purple-bg);
  border-color: var(--tag-purple-border);
}
.tag.red {
  color: var(--tag-red-color);
  background: var(--tag-red-bg);
  border-color: var(--tag-red-border);
}
.tag.blue {
  color: var(--tag-blue-color);
  background: var(--tag-blue-bg);
  border-color: var(--tag-blue-border);
}
/* 底部 & 通知 */
.footer {
  margin-top: 34px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.notice {
  margin: var(--spacing-lg) auto 0;
  max-width: 760px;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--notice-text);
  transition: background .3s ease, border .3s ease, color .3s ease;
}
.notice a {
  color: var(--notice-link);
  font-weight: 800;
  transition: color .3s ease;
}
/* 悬浮按钮 */
.float-btns {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.feedback-btn, .theme-toggle-btn, .back-to-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  height: 52px;
  width: 52px;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--shadow-button);
  transition: .22s ease;
  border: none;
  cursor: pointer;
}
.back-to-top-btn svg {
  height: 26px;
  width: 26px;
}
.feedback-btn {
  background: var(--btn-primary-grad);
}
.theme-toggle-btn {
  background: var(--btn-theme-grad);
}
.back-to-top-btn {
  background: var(--btn-backtop-grad);
}
.feedback-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-button-hover);
}
.theme-toggle-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-button-purple);
}
.back-to-top-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-button-green);
}
.back-to-top-btn {
  opacity: 0;
  pointer-events: none;
}
.back-to-top-btn.show {
  opacity: 1;
  pointer-events: auto;
}
/* 响应式 */
@media (max-width: 768px) {
  .wrap {
    padding: 16px 12px 84px;
  }
  .hero {
    padding: 24px 18px;
    margin-bottom: 16px;
  }
  .section {
    padding: var(--spacing-lg);
    margin-bottom: 16px;
  }
  .section h2 {
    font-size: 20px;
  }
  .section-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    font-size: 17px;
  }
  .name {
    font-size: 16px;
  }
  .float-btns {
    right: 14px;
    bottom: 14px;
    gap: 10px;
  }
  .feedback-btn, .theme-toggle-btn, .back-to-top-btn {
    height: 46px;
    width: 46px;
    font-size: 13px;
  }
  .brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  .brand-logo img {
    width: 30px;
    height: 30px;
  }
  .logoimg {
    height: 48px;
  }
  .logo-title-row {
    gap: 12px;
  }
  .hero-left h1 {
    font-size: clamp(24px, 6vw, 36px);
  }
}
@media (max-width: 520px) {
  .hero-top {
    flex-direction: column;
  }
  .hero-side {
    width: 100%;
    justify-content: flex-start;
  }
  .brand-logo {
    width: 44px;
    height: 44px;
  }
  .brand-logo svg {
    width: 24px;
    height: 24px;
  }
}