/*
 * Liquid Glass Studio shader 移植版页面层
 * 目标：单背景视频 + 单 WebGL shader + 干净 superellipse 玻璃卡片
 * 不复制视频、不搬素材库、不在旧 CSS 上继续叠补丁。
 */
:root,
html[data-theme="dark"] {
  --page-tint: rgba(2, 6, 18, .26);
  --glass-fill: rgba(255, 255, 255, .055);
  --glass-fill-hover: rgba(255, 255, 255, .085);
  --glass-border: rgba(255, 255, 255, .34);
  --glass-border-hover: rgba(255, 255, 255, .54);
  --text-primary: rgba(255, 255, 255, .96);
  --text-secondary: rgba(255, 255, 255, .78);
  --text-muted: rgba(255, 255, 255, .58);
  --shadow-color: rgba(0, 0, 0, .30);
  --bg-primary: #050816;
  --bg-secondary: rgba(255, 255, 255, .08);
  --border-color: rgba(255,255,255,.28);
}
html[data-theme="light"] {
  --page-tint: rgba(255, 255, 255, .10);
  --glass-fill: rgba(255, 255, 255, .11);
  --glass-fill-hover: rgba(255, 255, 255, .16);
  --glass-border: rgba(255, 255, 255, .50);
  --glass-border-hover: rgba(255, 255, 255, .70);
  --text-primary: rgba(255, 255, 255, .98);
  --text-secondary: rgba(255, 255, 255, .84);
  --text-muted: rgba(255, 255, 255, .66);
  --shadow-color: rgba(0, 0, 0, .22);
  --bg-primary: #eef6ff;
  --bg-secondary: rgba(255, 255, 255, .18);
  --border-color: rgba(255,255,255,.42);
}

html, body {
  min-height: 100%;
  background: #050816 !important;
  color: var(--text-primary) !important;
}
body {
  position: relative !important;
  overflow-x: hidden !important;
  background: transparent !important;
}
.bg-video, video.bg-video {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  z-index: 0 !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: none !important;
}
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(90, 150, 255, .18), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.10), transparent 26%),
    var(--page-tint) !important;
}
.container, .wrap, .page, main, header, footer, .hero, .top-nav, .info-grid, .actions, .stats-grid, .player {
  position: relative !important;
  z-index: 2 !important;
}

.bg-video-mask,
.liquid-card-video,
.xt-liquid-refract-video,
.liquid-card-distortion { display: none !important; }

#xt-liquid-shader-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 3 !important;
  opacity: .92 !important;
  mix-blend-mode: normal !important;
}

/* 统一玻璃组件 */
header,
.hero,
.card,
.info-card,
.action-card,
.stat-item,
.player,
.aplayer,
.vercel-notice,
.api-section,
.endpoint-card,
.param-card,
.example-card,
.doc-card,
.panel,
.box,
.container-card,
.top-nav a,
.hero-pill,
.badge,
.tag,
.chip,
.btn:not(.theme-toggle) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--glass-fill) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  box-shadow:
    0 18px 54px var(--shadow-color),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -16px 30px rgba(255,255,255,.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0) !important;
  transition: transform .20s ease, background .20s ease, border-color .20s ease, box-shadow .20s ease !important;
}
.info-card,
.action-card,
.card,
.player,
.aplayer,
.hero,
.api-section,
.endpoint-card,
.param-card,
.example-card,
.doc-card,
.panel,
.box,
.container-card {
  border-radius: 30px !important;
}
header { border-radius: 32px !important; }
.stat-item, .hero-pill, .badge, .tag, .chip, .top-nav a, .btn:not(.theme-toggle) { border-radius: 999px !important; }

/* CSS 只留很轻的表面反光，主要液态由 WebGL 画 */
header::before,
.hero::before,
.card::before,
.info-card::before,
.action-card::before,
.stat-item::before,
.player::before,
.aplayer::before,
.vercel-notice::before,
.api-section::before,
.endpoint-card::before,
.param-card::before,
.example-card::before,
.doc-card::before,
.panel::before,
.box::before,
.container-card::before,
.top-nav a::before,
.hero-pill::before,
.badge::before,
.tag::before,
.chip::before,
.btn:not(.theme-toggle)::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: .20 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.75), transparent 24% 76%, rgba(255,255,255,.20)) !important;
  mix-blend-mode: screen !important;
}
header::after,
.hero::after,
.card::after,
.info-card::after,
.action-card::after,
.stat-item::after,
.player::after,
.aplayer::after,
.vercel-notice::after,
.api-section::after,
.endpoint-card::after,
.param-card::after,
.example-card::after,
.doc-card::after,
.panel::after,
.box::after,
.container-card::after { content: none !important; }

header > *,
.hero > *,
.card > *,
.info-card > *,
.action-card > *,
.stat-item > *,
.player > *,
.aplayer > *,
.vercel-notice > *,
.api-section > *,
.endpoint-card > *,
.param-card > *,
.example-card > *,
.doc-card > *,
.panel > *,
.box > *,
.container-card > * {
  position: relative !important;
  z-index: 4 !important;
}
.info-card:hover,
.action-card:hover,
.card:hover,
.btn:hover {
  transform: translateY(-3px) translateZ(0) !important;
  background: var(--glass-fill-hover) !important;
  border-color: var(--glass-border-hover) !important;
  box-shadow:
    0 24px 68px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -16px 30px rgba(255,255,255,.06) !important;
}

/* 布局微调：不要笨重 */
.info-grid, .actions { gap: 1.25rem !important; }
.info-card, .action-card { padding: 1.35rem !important; }
.action-icon { margin-bottom: .85rem !important; }
.info-card h3, .action-card h3 { margin-bottom: .75rem !important; }

/* 文字 */
h1,h2,h3,h4,h5,h6 {
  color: var(--text-primary) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.34) !important;
}
p,li,td,th,label,span,div { color: inherit; }
.subtitle,.note,.meta,.hero-sub,small,.info-card p,.action-card p { color: var(--text-secondary) !important; }
a { color: #9fe2ff !important; }
code,pre,input,select,textarea {
  background: rgba(0,0,0,.18) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255,255,255,.22) !important;
}
table,th,td { border-color: rgba(255,255,255,.22) !important; }

/* APlayer */
.aplayer,.aplayer-body,.aplayer-info,.aplayer-list,.aplayer-list ol,.aplayer-list ol li {
  background: var(--glass-fill) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255,255,255,.22) !important;
}
.aplayer .aplayer-info .aplayer-music .aplayer-title,
.aplayer .aplayer-info .aplayer-music .aplayer-author,
.aplayer .aplayer-list ol li,
.aplayer .aplayer-list ol li .aplayer-list-title,
.aplayer .aplayer-list ol li .aplayer-list-author { color: var(--text-primary) !important; }
.aplayer .aplayer-list ol li.aplayer-list-light,.aplayer .aplayer-list ol li:hover { background: rgba(255,255,255,.14) !important; }
.aplayer .aplayer-lrc:before,.aplayer .aplayer-lrc:after { display: none !important; }

/* 页脚/按钮 */
footer {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  text-align: center !important;
}
footer::before,footer::after,.theme-toggle::before,.theme-toggle::after { content: none !important; display: none !important; }
.theme-toggle {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  color: var(--text-primary) !important;
}
@media (max-width: 768px) {
  .info-card,.action-card { padding: 1.1rem !important; border-radius: 24px !important; }
  #xt-liquid-shader-canvas { opacity: .80 !important; }
}

/* 重构修复：统计卡片不是胶囊 */
.stat-item { border-radius: 22px !important; min-height: auto !important; }
.stats-container { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; gap: 12px !important; }


/* 2026-05-31 修复：非主页卡片重叠/不圆角
   不再让外层大 section 叠玻璃；只保留内部卡片、按钮、导航。 */
.api-section,
.hero,
main,
.container,
.wrap,
.page,
.content,
.docs-container,
.test-container {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.api-section::before,
.api-section::after,
.hero::before,
.hero::after,
main::before,
main::after,
.container::before,
.container::after,
.wrap::before,
.wrap::after,
.page::before,
.page::after {
  content: none !important;
  display: none !important;
}
.card,
.info-card,
.action-card,
.endpoint-card,
.param-card,
.example-card,
.doc-card,
.panel,
.box,
.container-card,
.vercel-notice,
.player,
.aplayer {
  border-radius: 24px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.075) !important;
}
header {
  border-radius: 28px !important;
  overflow: hidden !important;
}
.stat-item {
  border-radius: 20px !important;
  overflow: hidden !important;
}
.top-nav a,
.hero-pill,
.badge,
.tag,
.chip,
.btn:not(.theme-toggle) {
  border-radius: 999px !important;
  overflow: hidden !important;
}
#xt-liquid-shader-canvas {
  opacity: .72 !important;
}
@media (max-width: 768px) {
  .card,
  .info-card,
  .action-card,
  .endpoint-card,
  .param-card,
  .example-card,
  .doc-card,
  .panel,
  .box,
  .container-card,
  .vercel-notice,
  .player,
  .aplayer {
    border-radius: 20px !important;
  }
  #xt-liquid-shader-canvas { opacity: .62 !important; }
}