/* =========================================================
   yvfng 第二皮肤层：科技霓虹 · 毛玻璃（大胆版 v2）
   启用方式：html[data-style="glass"]
   用法：放在 theme.css / css/style.css 之后加载。
   本文件只"覆盖"CSS 变量 + 玻璃拟态特效，不改动任何布局/交互逻辑。
   同时覆盖两套变量体系：
     - 工具页/集合页（theme.css）：--bg/--surface/--fg/--accent/...
     - 首页（css/style.css）：--paper/--ink/--red/...
   参考视觉：深空黑底 + 高饱和霓虹（青 #22d3ee / 紫 #a855f7 / 粉 #f472b6）
             + 科幻网格 + 星空 + 动态极光光斑 + 渐变发光标题 + 霓虹卡片
   ========================================================= */

html[data-style="glass"] {
  /* ---------- 工具页体系 ---------- */
  --bg: #05070f;
  --surface: rgba(255, 255, 255, .07);
  --fg: #eef6ff;
  --muted: #9fb2d6;
  --border: rgba(34, 211, 238, .18);
  --accent: #22d3ee;
  --accent-ink: #031018;
  --accent-2: #a855f7;
  --accent-3: #f472b6;
  --success: #34d399;
  --wip: #fbbf24;
  --danger: #fb7185;
  --glow-1: rgba(34, 211, 238, .30);
  --glow-2: rgba(168, 85, 247, .24);
  --shadow: 0 18px 48px rgba(2, 6, 18, .55);
  --radius: 8px;
  --radius-lg: 12px;
  --font-display: "Inter", "SF Pro Text", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "SF Pro Text", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  color-scheme: dark;

  /* ---------- 首页体系 ---------- */
  --paper: #05070f;
  --paper-2: rgba(255, 255, 255, .07);
  --paper-3: rgba(255, 255, 255, .12);
  --ink: #eef6ff;
  --ink-2: #b7c8ec;
  --rule: rgba(34, 211, 238, .16);
  --rule-strong: rgba(34, 211, 238, .34);
  --red: #22d3ee;
  --red-ink: #031018;
  --serif: "Inter", "SF Pro Text", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", "SF Pro Text", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  --focus-ring: 0 0 0 3px rgba(34, 211, 238, .35);
}

/* ---------- 背景：科幻网格 + 星空 + 动态极光 ---------- */
html[data-style="glass"] body {
  background:
    repeating-linear-gradient(0deg, rgba(34, 211, 238, .07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(34, 211, 238, .07) 0 1px, transparent 1px 44px),
    radial-gradient(1400px 900px at 82% -10%, rgba(34, 211, 238, .18), transparent 60%),
    radial-gradient(1100px 760px at -10% 40%, rgba(168, 85, 247, .16), transparent 58%),
    #04060f;
  background-attachment: fixed;
}
/* 星空层（静态） */
html[data-style="glass"] body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(1.6px 1.6px at 14% 22%, rgba(255, 255, 255, .7), transparent 100%),
    radial-gradient(1.2px 1.2px at 33% 12%, rgba(255, 255, 255, .5), transparent 100%),
    radial-gradient(1.4px 1.4px at 62% 8%, rgba(255, 255, 255, .55), transparent 100%),
    radial-gradient(1px 1px at 78% 19%, rgba(255, 255, 255, .45), transparent 100%),
    radial-gradient(1.7px 1.7px at 91% 33%, rgba(255, 255, 255, .6), transparent 100%),
    radial-gradient(1.1px 1.1px at 46% 47%, rgba(255, 255, 255, .4), transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 61%, rgba(255, 255, 255, .5), transparent 100%),
    radial-gradient(1.3px 1.3px at 27% 74%, rgba(255, 255, 255, .45), transparent 100%),
    radial-gradient(1px 1px at 55% 83%, rgba(255, 255, 255, .35), transparent 100%),
    radial-gradient(1.6px 1.6px at 72% 66%, rgba(255, 255, 255, .55), transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 58%, rgba(255, 255, 255, .45), transparent 100%),
    radial-gradient(1.1px 1.1px at 96% 82%, rgba(255, 255, 255, .4), transparent 100%),
    radial-gradient(1300px 820px at 50% 118%, rgba(34, 211, 238, .12), transparent 62%);
}
/* 动态极光光斑层（替代原纸感噪点纹理，星云流动感） */
html[data-style="glass"] body::after {
  content: "" !important;
  position: fixed !important;
  inset: -20% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(620px 460px at 28% 24%, rgba(34, 211, 238, .30), transparent 60%),
    radial-gradient(580px 440px at 72% 60%, rgba(168, 85, 247, .28), transparent 60%),
    radial-gradient(420px 330px at 50% 90%, rgba(244, 114, 182, .16), transparent 62%);
  animation: yvfng-glass-drift 20s ease-in-out infinite alternate;
  opacity: .92;
}
@keyframes yvfng-glass-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.03); }
}

/* ---------- 导航：霓虹毛玻璃 + 底部发光条 ---------- */
html[data-style="glass"] .nav,
html[data-style="glass"] .topnav {
  background: rgba(6, 9, 18, .55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid rgba(34, 211, 238, .28) !important;
  box-shadow: 0 1px 0 rgba(34, 211, 238, .45), 0 0 22px rgba(34, 211, 238, .22), 0 10px 30px rgba(2, 6, 18, .45), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
/* 窄屏下导航链接展开条（.nav-links 下拉工具栏）与卷帘菜单项同步玻璃适配：
   .nav 作用域令牌 --paper 为纸感色，玻璃风格需覆盖背景/文字，避免弹出纸色块 */
html[data-style="glass"] .nav-links::before { background: rgba(6, 9, 18, .55) !important; -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
html[data-style="glass"] .nav-links a { color: #c9d8e8 !important; }
html[data-style="glass"] .nav-menu a:hover { background: rgba(34, 211, 238, .10) !important; }

/* ---------- 通用容器：霓虹玻璃卡片（发光边框 + 顶部高光 + hover 点亮） ---------- */
html[data-style="glass"] .card,
html[data-style="glass"] .panel,
html[data-style="glass"] .note-card,
html[data-style="glass"] .tool-card,
html[data-style="glass"] .work-card,
html[data-style="glass"] .opt-card,
html[data-style="glass"] .relate-card,
html[data-style="glass"] .cta-box,
html[data-style="glass"] .about-item,
html[data-style="glass"] .search-box,
html[data-style="glass"] .file-row,
html[data-style="glass"] .result-box,
html[data-style="glass"] .box {
  background: linear-gradient(165deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045)) !important;
  border: 1px solid rgba(34, 211, 238, .20) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    0 18px 44px rgba(2, 6, 18, .50),
    0 0 0 1px rgba(34, 211, 238, .06),
    0 0 30px rgba(34, 211, 238, .10),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}
/* 页面级板块（.section/.hero）：背景与页面融合（透明），去掉边框/投影/高光，避免板块间出现色块分界 */
html[data-style="glass"] .hero,
html[data-style="glass"] .section {
  background: transparent !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-style="glass"] .card:hover,
html[data-style="glass"] .panel:hover,
html[data-style="glass"] .tool-card:hover,
html[data-style="glass"] .work-card:hover,
html[data-style="glass"] .opt-card:hover,
html[data-style="glass"] .relate-card:hover {
  border-color: rgba(34, 211, 238, .36) !important;
  box-shadow:
    0 22px 52px rgba(2, 6, 18, .55),
    0 0 0 1px rgba(34, 211, 238, .14),
    0 0 46px rgba(34, 211, 238, .22),
    0 0 26px rgba(168, 85, 247, .14),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

/* ---------- 大标题 / 品牌章：青→紫→粉渐变霓虹文字 ---------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-style="glass"] .hero h1,
  html[data-style="glass"] .section h1,
  html[data-style="glass"] .section h2,
  html[data-style="glass"] .log-head h1,
  html[data-style="glass"] .panel h1,
  html[data-style="glass"] .converter h1,
  html[data-style="glass"] .sec-head h2,
  html[data-style="glass"] .eyebrow,
  html[data-style="glass"] .brand,
  html[data-style="glass"] .brand-text,
  html[data-style="glass"] .site-name,
  html[data-style="glass"] .logo-text,
  html[data-style="glass"] .about h2,
  html[data-style="glass"] .foot h2,
  html[data-style="glass"] .work h3,
  html[data-style="glass"] .log-row h2,
  html[data-style="glass"] .tool-card .tc-name {
    background: linear-gradient(115deg, #22d3ee 0%, #a855f7 52%, #f472b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(34, 211, 238, .35)) drop-shadow(0 0 44px rgba(168, 85, 247, .28));
  }
  /* 卡片内中/小标题：轻量渐变霓虹（避免小字过糊） */
  html[data-style="glass"] .card h2,
  html[data-style="glass"] .card h3,
  html[data-style="glass"] .panel h2,
  html[data-style="glass"] .panel h3,
  html[data-style="glass"] .opt-card h2,
  html[data-style="glass"] .opt-card h3,
  html[data-style="glass"] .work-card h2,
  html[data-style="glass"] .work-card h3,
  html[data-style="glass"] .relate-card h2,
  html[data-style="glass"] .relate-card h3,
  html[data-style="glass"] .note-card h2,
  html[data-style="glass"] .note-card h3,
  html[data-style="glass"] .tab[aria-selected="true"] {
    background: linear-gradient(115deg, #22d3ee 0%, #a855f7 52%, #f472b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, .32));
  }
}

/* ---------- 链接悬停：霓虹点亮 ---------- */
html[data-style="glass"] a:hover {
  text-shadow: 0 0 12px rgba(34, 211, 238, .55);
}
html[data-style="glass"] .ribbon a:hover,
html[data-style="glass"] .more-link:hover {
  color: #22d3ee !important;
  text-shadow: 0 0 12px rgba(34, 211, 238, .6);
}

/* ---------- 主按钮：青→紫→粉霓虹渐变 + 辉光 ---------- */
html[data-style="glass"] .btn-primary {
  background: linear-gradient(135deg, #22d3ee, #a855f7 55%, #f472b6) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(34, 211, 238, .45), 0 0 24px rgba(168, 85, 247, .28), inset 0 1px 0 rgba(255, 255, 255, .30) !important;
  border-radius: 10px !important;
}
html[data-style="glass"] .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 38px rgba(34, 211, 238, .55), 0 0 34px rgba(168, 85, 247, .40), 0 0 18px rgba(244, 114, 182, .25), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}
html[data-style="glass"] .btn-secondary {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(34, 211, 238, .28) !important;
  color: var(--fg) !important;
  border-radius: 10px !important;
}
html[data-style="glass"] .btn-secondary:hover {
  border-color: rgba(34, 211, 238, .55) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, .25), inset 0 0 12px rgba(34, 211, 238, .08) !important;
}

/* ---------- 输入控件：霓虹青边 ---------- */
html[data-style="glass"] input[type="text"],
html[data-style="glass"] input[type="number"],
html[data-style="glass"] input[type="search"],
html[data-style="glass"] input[type="email"],
html[data-style="glass"] input[type="url"],
html[data-style="glass"] input[type="date"],
html[data-style="glass"] input[type="time"],
html[data-style="glass"] input[type="file"],
html[data-style="glass"] textarea,
html[data-style="glass"] select {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(34, 211, 238, .26) !important;
  color: var(--fg) !important;
  border-radius: 8px !important;
}
html[data-style="glass"] input:focus,
html[data-style="glass"] textarea:focus,
html[data-style="glass"] select:focus {
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .28), 0 0 22px rgba(34, 211, 238, .35) !important;
  outline: none !important;
}

/* ---------- 文字选择与焦点 ---------- */
html[data-style="glass"] ::selection { background: rgba(34, 211, 238, .45); color: #fff; }
html[data-style="glass"] :focus-visible { outline-color: #22d3ee; }

/* ---------- 首页细节 ---------- */
html[data-style="glass"] .work .plate {
  background: rgba(255, 255, 255, .05) !important;
  color: var(--muted) !important;
  border: 1px solid rgba(34, 211, 238, .12);
}
html[data-style="glass"] .ribbon {
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  border-bottom: 1px solid rgba(34, 211, 238, .14);
}
html[data-style="glass"] .ribbon b { color: #fff; text-shadow: 0 0 12px rgba(34, 211, 238, .5); }
html[data-style="glass"] .ribbon a { color: var(--muted); border-color: rgba(34, 211, 238, .30); }

/* ---------- 移动菜单 ---------- */
html[data-style="glass"] .nav-menu { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-right: none !important; box-shadow: none !important; }
html[data-style="glass"] .nm-in { background: rgba(6, 9, 18, .88) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 1px solid rgba(34, 211, 238, .24) !important; box-shadow: 0 0 40px rgba(34, 211, 238, .18) !important; }

/* ---------- 滚动条（霓虹渐变） ---------- */
html[data-style="glass"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-style="glass"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #22d3ee, #a855f7, #f472b6);
  border-radius: 8px;
  border: 2px solid rgba(4, 6, 15, .85);
}
html[data-style="glass"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
html[data-style="glass"] ::-webkit-scrollbar-thumb:hover { filter: brightness(1.25); }

/* ---------- 主题切换按钮（毛玻璃风） ---------- */
html[data-style="glass"] #themeToggle { border-radius: 12px; box-shadow: 0 10px 26px rgba(2, 6, 18, .5), 0 0 14px rgba(34, 211, 238, .22); }

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-style="glass"] body { background-attachment: scroll; }
  html[data-style="glass"] body::after { animation: none !important; }
}