/* =============================================================================
   Apple Liquid Glass 5-Layer Material System — glass.css
   (iOS 26 / macOS Tahoe 26 Design Language for the Web)
   =============================================================================
   Layer Breakdown:
     L1 基底: backdrop-filter: blur(2px) saturate(175%) brightness(1.0) 提纯底色
     L2 折射: SVG feDisplacementMap 贴图折射 (通过 liquid-glass.js 动态生成)
     L3 高光: 四道方向不同的 inset box-shadow (顶 1.5px 最亮 -> 底最弱) + 0.5px 物理亮环
     L4 镜面: ::before 上 mix-blend-mode: screen 径向光斑，跟随 --mx / --my 指针移动
     L5 分层: 只用于功能层（导航/控制/卡片/按钮/弹层），内容文字严格绝不被扭曲
   ============================================================================= */

:root {
  /* ---------- 1. 基础磨砂基材（JS 未启用/非 Chromium 浏览器的优雅降级） ---------- */
  --glass-blur: blur(12px) saturate(175%) brightness(1.0);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-hover: rgba(255, 255, 255, 0.82);
  --glass-bg-solid: #ffffff;
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-border-hover: #ffffff;
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-radius: 18px;

  /* 基础投影 */
  --glass-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.75),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.35),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.25),
    inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.15),
    0 0 0 0.5px rgba(255, 255, 255, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.08);

  --glass-shadow-hover:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.90),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.45),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.35),
    inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.20),
    0 0 0 0.5px rgba(255, 255, 255, 0.65),
    0 14px 36px rgba(0, 0, 0, 0.12);

  /* ---------- 2. Liquid Glass 分层配方变量（浅色亮色模式） ---------- */
  --lg-fill-top: rgba(255, 255, 255, 0.58);
  --lg-fill-bot: rgba(255, 255, 255, 0.32);
  --lg-fill-top-hover: rgba(255, 255, 255, 0.72);
  --lg-fill-bot-hover: rgba(255, 255, 255, 0.46);

  /* L3 四道高光与物理外环 */
  --lg-hl-top: rgba(255, 255, 255, 0.78);
  --lg-hl-left: rgba(255, 255, 255, 0.40);
  --lg-hl-right: rgba(255, 255, 255, 0.28);
  --lg-hl-bottom: rgba(255, 255, 255, 0.16);
  --lg-hl-rim: rgba(255, 255, 255, 0.50);

  /* Hover 高光加强 */
  --lg-hl-top-hover: rgba(255, 255, 255, 0.92);
  --lg-hl-left-hover: rgba(255, 255, 255, 0.48);
  --lg-hl-right-hover: rgba(255, 255, 255, 0.36);
  --lg-hl-bottom-hover: rgba(255, 255, 255, 0.20);
  --lg-hl-rim-hover: rgba(255, 255, 255, 0.65);

  /* L4 镜面高光反射光斑 */
  --lg-spec-core: rgba(255, 255, 255, 0.36);
  --lg-spec-mid: rgba(255, 255, 255, 0.12);
  --lg-spec-opacity: 0.65;
  --lg-spec-opacity-hover: 0.95;

  /* 嵌套玻璃小控件（例如在玻璃卡片内部的小胶囊按钮，防止白叠白变实） */
  --lg-nest-top: rgba(236, 240, 246, 0.48);
  --lg-nest-bot: rgba(222, 228, 238, 0.24);
  --lg-nest-top-hover: rgba(240, 244, 250, 0.65);
  --lg-nest-bot-hover: rgba(226, 232, 242, 0.38);

  /* 外围软投影 */
  --lg-drop: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --lg-drop-hover: 0 14px 34px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  --lg-drop-active: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"],
[data-theme="dark"] {
  /* ---------- 暗色模式基材（深邃黑曜晶石透光，告别死白糊面） ---------- */
  --glass-blur: blur(14px) saturate(180%) brightness(1.0);
  --glass-bg: rgba(20, 21, 26, 0.72);
  --glass-bg-hover: rgba(30, 32, 38, 0.82);
  --glass-bg-solid: #121316;
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --glass-rim: rgba(255, 255, 255, 0.12);

  --glass-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.22),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.08),
    inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.04),
    0 0 0 0.5px rgba(255, 255, 255, 0.12),
    0 10px 32px rgba(0, 0, 0, 0.60);

  --glass-shadow-hover:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.32),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.16),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.11),
    inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.06),
    0 0 0 0.5px rgba(255, 255, 255, 0.18),
    0 16px 42px rgba(0, 0, 0, 0.75);

  /* 暗色 Liquid Glass 配方：黑曜石半透微光，不泛白不发虚 */
  --lg-fill-top: rgba(38, 40, 48, 0.55);
  --lg-fill-bot: rgba(18, 19, 24, 0.48);
  --lg-fill-top-hover: rgba(48, 52, 64, 0.65);
  --lg-fill-bot-hover: rgba(24, 26, 33, 0.58);

  /* L3 微米级倒角光刃，温润克制 */
  --lg-hl-top: rgba(255, 255, 255, 0.22);
  --lg-hl-left: rgba(255, 255, 255, 0.10);
  --lg-hl-right: rgba(255, 255, 255, 0.07);
  --lg-hl-bottom: rgba(255, 255, 255, 0.03);
  --lg-hl-rim: rgba(255, 255, 255, 0.12);

  --lg-hl-top-hover: rgba(255, 255, 255, 0.34);
  --lg-hl-left-hover: rgba(255, 255, 255, 0.16);
  --lg-hl-right-hover: rgba(255, 255, 255, 0.11);
  --lg-hl-bottom-hover: rgba(255, 255, 255, 0.05);
  --lg-hl-rim-hover: rgba(255, 255, 255, 0.18);

  /* L4 镜面微反光：带微冷色光泽，极具通透质感 */
  --lg-spec-core: rgba(180, 210, 255, 0.15);
  --lg-spec-mid: rgba(160, 190, 240, 0.04);
  --lg-spec-opacity: 0.30;
  --lg-spec-opacity-hover: 0.50;

  --lg-nest-top: rgba(255, 255, 255, 0.08);
  --lg-nest-bot: rgba(255, 255, 255, 0.03);
  --lg-nest-top-hover: rgba(255, 255, 255, 0.14);
  --lg-nest-bot-hover: rgba(255, 255, 255, 0.06);

  --lg-drop: 0 10px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --lg-drop-hover: 0 16px 42px rgba(0, 0, 0, 0.68), 0 3px 8px rgba(0, 0, 0, 0.40);
  --lg-drop-active: 0 3px 8px rgba(0, 0, 0, 0.45);
}

/* =============================================================================
   环境光层：为全站提供细腻通透的物理环境光晕（支持 Liquid Glass 提纯与折射）
   非刺眼纯色/非单调橙色，采用 Apple 经典的冷暖光晕交融，背景深度感跃然纸上
   ============================================================================= */
html[data-liquid-glass="on"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(75% 55% at 10% 8%, rgba(0, 113, 227, 0.09), transparent 70%),
    radial-gradient(65% 50% at 90% 12%, rgba(139, 92, 246, 0.07), transparent 70%),
    radial-gradient(70% 60% at 85% 90%, rgba(0, 113, 227, 0.08), transparent 75%),
    radial-gradient(55% 45% at 15% 92%, rgba(16, 185, 129, 0.06), transparent 70%);
}

html[data-liquid-glass="on"][data-theme="dark"] body::before,
:root[data-theme="dark"] body::before,
[data-theme="dark"] body::before {
  background:
    radial-gradient(75% 55% at 10% 8%, rgba(20, 80, 160, 0.10), transparent 70%),
    radial-gradient(65% 50% at 90% 12%, rgba(120, 80, 200, 0.07), transparent 70%),
    radial-gradient(70% 60% at 85% 90%, rgba(20, 80, 160, 0.08), transparent 75%),
    radial-gradient(55% 45% at 15% 92%, rgba(20, 140, 90, 0.05), transparent 70%);
}

/* =============================================================================
   第一层：基础磨砂基底 (L1 静态兜底，全站各页默认有效)
   ============================================================================= */
/* 卡片类 */
.skill-card, .now-card, .p-card,
.n-card, .n-proj, .n-media,
.link-card, .card, .panel, .ov-card, .demo-box,
.chip, .gallery-card, .code-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius);
  transition: transform 240ms cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 240ms cubic-bezier(0.25, 1, 0.5, 1),
              background-color 300ms ease,
              border-color 300ms ease;
}

.skill-card:hover, .now-card:hover, .p-card:hover,
.n-card:hover, .n-proj:hover, .n-media:hover,
.link-card:hover, .ov-card:hover, .card:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
}

/* 按钮与交互控件类 */
.icon-btn, .arrow-btn, .card-copy-btn, .btn-ghost, .p-btn-ghost,
.nav-all, .tag, .p-hint, .p-preview-sm, .mini-btn, .pick-btn,
.add-code-btn, .rep-add, .lang-all-btn, .panel-head,
.ed-icon-btn, .ed-lang button, .ed-tab {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 180ms ease,
              background-color 200ms ease;
}

.icon-btn:hover, .arrow-btn:hover, .card-copy-btn:hover,
.btn-ghost:hover, .p-btn-ghost:hover, .nav-all:hover,
.ed-icon-btn:hover, .ed-lang button:hover, .ed-tab:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
}

/* 主行动按钮 (Apple 蓝高光胶囊) */
.btn {
  background: rgba(0, 113, 227, 0.92);
  color: #FFFFFF !important;
  -webkit-backdrop-filter: blur(8px) saturate(175%);
  backdrop-filter: blur(8px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.15),
    0 0 0 0.5px rgba(255, 255, 255, 0.30),
    0 8px 24px rgba(0, 113, 227, 0.35);
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 180ms ease,
              filter 180ms ease;
}

.btn:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.18),
    0 0 0 0.5px rgba(255, 255, 255, 0.45),
    0 12px 32px rgba(0, 113, 227, 0.45);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 113, 227, 0.20);
}

/* =============================================================================
   第二层：Liquid Glass 完整五层光学材质 (html[data-liquid-glass="on"])
   ============================================================================= */

/* 2.1 卡片全集：L3 四道高光 + L4 镜面指针追踪 */
html[data-liquid-glass="on"] :is(
  .skill-card, .now-card, .p-card,
  .n-card, .n-proj, .n-media,
  .link-card, .card, .panel, .ov-card, .demo-box,
  .chip, .gallery-card, .code-card
) {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(180deg, var(--lg-fill-top) 0%, var(--lg-fill-bot) 100%);
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid transparent;

  /* L3: 四道方向不同的 inset box-shadow + 0.5px 物理亮环边界 */
  box-shadow:
    /* 顶边最亮 1.5px */
    inset 0 1.5px 0 0 var(--lg-hl-top),
    /* 左边稍亮 */
    inset 1px 0 0 0 var(--lg-hl-left),
    /* 右边稍弱 */
    inset -1px 0 0 0 var(--lg-hl-right),
    /* 底边最弱收尾 */
    inset 0 -0.5px 0 0 var(--lg-hl-bottom),
    /* 0.5px 物理亮环边界 (厚度来源) */
    0 0 0 0.5px var(--lg-hl-rim),
    /* 底部柔和沉降投影 */
    var(--lg-drop);
}

/* L4: 镜面动态高光光斑 (::before) 跟随指针 */
html[data-liquid-glass="on"] :is(
  .skill-card, .now-card, .p-card,
  .n-card, .n-proj, .n-media,
  .link-card, .card, .panel, .ov-card, .demo-box,
  .chip, .gallery-card, .code-card
)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* 浮在折射层背景之上、内容文字之下 */
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle at calc(var(--lg-mx, var(--mx, 0.5)) * 100%) calc(var(--lg-my, var(--my, 0.35)) * 100%),
    var(--lg-spec-core) 0%,
    var(--lg-spec-mid) 35%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: var(--lg-spec-opacity, 0.65);
  transition: opacity 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* 卡片 Hover 状态：光晕强化，高光微提 */
html[data-liquid-glass="on"] :is(
  .skill-card, .now-card, .p-card,
  .n-card, .n-proj, .n-media,
  .link-card, .card, .panel, .ov-card, .demo-box,
  .chip, .gallery-card, .code-card
):hover {
  background-image: linear-gradient(180deg, var(--lg-fill-top-hover) 0%, var(--lg-fill-bot-hover) 100%);
  box-shadow:
    inset 0 1.5px 0 0 var(--lg-hl-top-hover, rgba(255, 255, 255, 0.92)),
    inset 1px 0 0 0 var(--lg-hl-left-hover, rgba(255, 255, 255, 0.48)),
    inset -1px 0 0 0 var(--lg-hl-right-hover, rgba(255, 255, 255, 0.36)),
    inset 0 -0.5px 0 0 var(--lg-hl-bottom-hover, rgba(255, 255, 255, 0.20)),
    0 0 0 0.5px var(--lg-hl-rim-hover, rgba(255, 255, 255, 0.65)),
    var(--lg-drop-hover);
}

html[data-liquid-glass="on"] :is(
  .skill-card, .now-card, .p-card,
  .n-card, .n-proj, .n-media,
  .link-card, .card, .panel, .ov-card, .demo-box,
  .chip, .gallery-card, .code-card
):hover::before {
  opacity: var(--lg-spec-opacity-hover, 0.95);
}

/* 确保卡片内部所有文字内容严格处于 ::before 高光之上，绝不受折射与光斑干扰 */
html[data-liquid-glass="on"] :is(
  .skill-card, .now-card, .p-card,
  .n-card, .n-proj, .n-media,
  .link-card, .card, .panel, .ov-card, .demo-box,
  .chip, .gallery-card, .code-card
) > * {
  position: relative;
  z-index: 2;
}

/* =============================================================================
   2.2 按键全集：高光胶囊 (L3 锐利厚度 + L4 灵动光斑 + L5 按压沉降反馈)
   ============================================================================= */
html[data-liquid-glass="on"] :is(
  .icon-btn, .arrow-btn, .menu-toggle, .card-copy-btn, .p-hint,
  .tag, .chip, .p-btn-ghost, .btn-ghost,
  .demo-link-btn, .demo-blocked-btn, .nav-all, .mini-btn, .pick-btn,
  .add-code-btn, .rep-add, .lang-all-btn, .panel-head,
  .ed-icon-btn, .ed-lang button, .ed-tab, .p-preview-sm
) {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(180deg, var(--lg-fill-top) 0%, var(--lg-fill-bot) 100%);
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid transparent;

  box-shadow:
    inset 0 1.5px 0 0 var(--lg-hl-top),
    inset 1px 0 0 0 var(--lg-hl-left),
    inset -1px 0 0 0 var(--lg-hl-right),
    inset 0 -0.5px 0 0 var(--lg-hl-bottom),
    0 0 0 0.5px var(--lg-hl-rim),
    var(--lg-drop);

  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.25),
              box-shadow 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
              background-image 200ms ease;
}

/* 按钮的 L4 镜面高光 */
html[data-liquid-glass="on"] :is(
  .icon-btn, .arrow-btn, .menu-toggle, .card-copy-btn, .p-hint,
  .tag, .chip, .p-btn-ghost, .btn-ghost,
  .demo-link-btn, .demo-blocked-btn, .nav-all, .mini-btn, .pick-btn,
  .add-code-btn, .rep-add, .lang-all-btn, .panel-head,
  .ed-icon-btn, .ed-lang button, .ed-tab, .p-preview-sm
)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle at calc(var(--lg-mx, var(--mx, 0.5)) * 100%) calc(var(--lg-my, var(--my, 0.35)) * 100%),
    var(--lg-spec-core) 0%,
    var(--lg-spec-mid) 40%,
    rgba(255, 255, 255, 0) 75%
  );
  opacity: var(--lg-spec-opacity, 0.70);
  transition: opacity 180ms ease;
}

html[data-liquid-glass="on"] :is(
  .icon-btn, .arrow-btn, .menu-toggle, .card-copy-btn, .p-hint,
  .tag, .chip, .p-btn-ghost, .btn-ghost,
  .demo-link-btn, .demo-blocked-btn, .nav-all, .mini-btn, .pick-btn,
  .add-code-btn, .rep-add, .lang-all-btn, .panel-head,
  .ed-icon-btn, .ed-lang button, .ed-tab, .p-preview-sm
):hover {
  background-image: linear-gradient(180deg, var(--lg-fill-top-hover) 0%, var(--lg-fill-bot-hover) 100%);
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 1.5px 0 0 var(--lg-hl-top-hover, rgba(255, 255, 255, 0.92)),
    inset 1px 0 0 0 var(--lg-hl-left-hover, rgba(255, 255, 255, 0.48)),
    inset -1px 0 0 0 var(--lg-hl-right-hover, rgba(255, 255, 255, 0.36)),
    inset 0 -0.5px 0 0 var(--lg-hl-bottom-hover, rgba(255, 255, 255, 0.20)),
    0 0 0 0.5px var(--lg-hl-rim-hover, rgba(255, 255, 255, 0.65)),
    var(--lg-drop-hover);
}

html[data-liquid-glass="on"] :is(
  .icon-btn, .arrow-btn, .menu-toggle, .card-copy-btn, .p-hint,
  .tag, .chip, .p-btn-ghost, .btn-ghost,
  .demo-link-btn, .demo-blocked-btn, .nav-all, .mini-btn, .pick-btn,
  .add-code-btn, .rep-add, .lang-all-btn, .panel-head,
  .ed-icon-btn, .ed-lang button, .ed-tab, .p-preview-sm
):hover::before {
  opacity: var(--lg-spec-opacity-hover, 0.95);
}

/* 按压触觉反馈 (Physical active micro-spring sink) */
html[data-liquid-glass="on"] :is(
  .icon-btn, .arrow-btn, .menu-toggle, .card-copy-btn, .p-hint,
  .tag, .chip, .p-btn-ghost, .btn-ghost,
  .demo-link-btn, .demo-blocked-btn, .nav-all, .mini-btn, .pick-btn,
  .add-code-btn, .rep-add, .lang-all-btn, .panel-head,
  .ed-icon-btn, .ed-lang button, .ed-tab, .p-preview-sm
):active {
  transform: translateY(1px) scale(0.962);
  background-image: linear-gradient(180deg, var(--lg-fill-bot) 0%, var(--lg-fill-top) 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.22),
    0 0 0 0.5px var(--lg-hl-rim),
    var(--lg-drop-active);
  transition-duration: 70ms;
}

html[data-liquid-glass="on"] :is(
  .icon-btn, .arrow-btn, .menu-toggle, .card-copy-btn, .p-hint,
  .tag, .chip, .p-btn-ghost, .btn-ghost,
  .demo-link-btn, .demo-blocked-btn, .nav-all, .mini-btn, .pick-btn,
  .add-code-btn, .rep-add, .lang-all-btn, .panel-head,
  .ed-icon-btn, .ed-lang button, .ed-tab, .p-preview-sm
):active::before {
  opacity: 0.25;
}

/* 按钮内部文本/图标浮于 L4 镜面层之上 */
html[data-liquid-glass="on"] :is(
  .icon-btn, .arrow-btn, .menu-toggle, .card-copy-btn, .p-hint,
  .tag, .chip, .p-btn-ghost, .btn-ghost,
  .demo-link-btn, .demo-blocked-btn, .nav-all, .mini-btn, .pick-btn,
  .add-code-btn, .rep-add, .lang-all-btn, .panel-head,
  .ed-icon-btn, .ed-lang button, .ed-tab, .p-preview-sm
) > * {
  position: relative;
  z-index: 2;
}

/* =============================================================================
   2.3 嵌套小玻璃 (Nested Glass)
   ============================================================================= */
html[data-liquid-glass="on"] .p-hint {
  background-image: linear-gradient(180deg, var(--lg-nest-top) 0%, var(--lg-nest-bot) 100%);
  background-color: transparent !important;
}

html[data-liquid-glass="on"] .p-hint:hover,
html[data-liquid-glass="on"] .p-card:hover .p-hint,
html[data-liquid-glass="on"] .p-card.open .p-hint {
  background-image: linear-gradient(180deg, var(--lg-nest-top-hover) 0%, var(--lg-nest-bot-hover) 100%);
  background-color: transparent !important;
}

/* =============================================================================
   2.4 彩色实色主按钮 (Primary Action Buttons)
   ============================================================================= */
html[data-liquid-glass="on"] :is(.btn:not(.secondary), .save-btn, .add-btn, .lang-go, .diag-btn, .login button) {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.20),
    0 0 0 0.5px rgba(255, 255, 255, 0.35),
    var(--lg-drop);
}

html[data-liquid-glass="on"] :is(.btn:not(.secondary), .save-btn, .add-btn, .lang-go, .diag-btn, .login button)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle at calc(var(--lg-mx, var(--mx, 0.5)) * 100%) calc(var(--lg-my, var(--my, 0.35)) * 100%),
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.8;
  transition: opacity 180ms ease;
}

html[data-liquid-glass="on"] :is(.btn:not(.secondary), .save-btn, .add-btn, .lang-go, .diag-btn, .login button):hover {
  transform: translateY(-1.5px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.25),
    0 0 0 0.5px rgba(255, 255, 255, 0.55),
    var(--lg-drop-hover);
}

html[data-liquid-glass="on"] :is(.btn:not(.secondary), .save-btn, .add-btn, .lang-go, .diag-btn, .login button):active {
  transform: translateY(1px) scale(0.962);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.35),
    0 0 0 0.5px rgba(255, 255, 255, 0.20),
    var(--lg-drop-active);
  transition-duration: 70ms;
}

/* =============================================================================
   3. 两个变体规范 (HIG Variants)
   ============================================================================= */

/* 3.1 regular 变体（默认）：适度模糊 + 提纯饱和度与微调明度，保证文字最高可读性 */
[data-glass="regular"] {
  -webkit-backdrop-filter: blur(2px) saturate(175%) brightness(1.0);
  backdrop-filter: blur(2px) saturate(175%) brightness(1.0);
}

/* 3.2 clear 变体：高透明，专用于悬浮在图片/视频舞台上方 */
[data-glass="clear"],
.glass-clear {
  --lg-fill-top: rgba(255, 255, 255, 0.28);
  --lg-fill-bot: rgba(255, 255, 255, 0.10);
  --lg-fill-top-hover: rgba(255, 255, 255, 0.38);
  --lg-fill-bot-hover: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(4px) saturate(190%) brightness(1.0);
  backdrop-filter: blur(4px) saturate(190%) brightness(1.0);
}

:root[data-theme="dark"] [data-glass="clear"],
:root[data-theme="dark"] .glass-clear {
  --lg-fill-top: rgba(255, 255, 255, 0.08);
  --lg-fill-bot: rgba(255, 255, 255, 0.02);
}

/* 当 clear 变体处于亮色背景上时，HIG 规定追加 35% 暗色 scrim 遮罩层保证对比度 */
:root:not([data-theme="dark"]) [data-glass="clear"].scrim-dark,
:root:not([data-theme="dark"]) .glass-clear.scrim-dark {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: #FFFFFF !important;
}

/* =============================================================================
   4. 无障碍与体验增强 (Accessibility)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html[data-liquid-glass="on"] * {
    transition-duration: 1ms !important;
  }
  html[data-liquid-glass="on"] *::before {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .skill-card, .now-card, .p-card,
  .n-card, .n-proj, .n-media,
  .link-card, .card, .panel, .ov-card, .demo-box,
  .chip, .gallery-card, .code-card,
  .icon-btn, .arrow-btn, .card-copy-btn, .btn-ghost, .nav-all, .tag, .p-hint,
  .btn {
    background: var(--glass-bg-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =============================================================================
   5. 性能守卫：滚动面板优化 (Scroll Container Guard)
   ============================================================================= */
/* 管理后台的大面积 .panel 内部滚动繁重，移除其自身 backdrop-filter 防止重绘掉帧 */
html[data-liquid-glass="on"] .panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* =============================================================================
   6. 关键降级守护 (@supports Gating)
   ============================================================================= */
/* 仅 Chromium 支持 url() 进 backdrop-filter；Safari/Firefox 等降级使用高斯模糊加饱和度提纯 */
@supports not (backdrop-filter: url(#x) blur(1px)) {
  html[data-liquid-glass="on"] :is(
    .skill-card, .now-card, .p-card,
    .n-card, .n-proj, .n-media,
    .link-card, .card, .panel, .ov-card, .demo-box,
    .chip, .gallery-card, .code-card,
    .icon-btn, .arrow-btn, .card-copy-btn, .btn-ghost, .nav-all, .tag, .p-hint, .btn
  ) {
    -webkit-backdrop-filter: blur(14px) saturate(175%) brightness(1.0);
    backdrop-filter: blur(14px) saturate(175%) brightness(1.0);
  }
}

/* 浏览器完全不支持 backdrop-filter 时的实体颜色兜底 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .skill-card, .now-card, .p-card,
  .n-card, .n-proj, .n-media,
  .link-card, .card, .panel, .ov-card, .demo-box,
  .chip, .gallery-card, .code-card,
  .icon-btn, .arrow-btn, .card-copy-btn, .btn-ghost, .nav-all, .tag, .p-hint {
    background: var(--glass-bg-solid) !important;
  }
  .btn {
    background: #0071E3 !important;
  }
}

/* =============================================================================
   7. 结构化富媒体组件规范 (Media, Sandbox & Unfold Animations)
   ============================================================================= */

/* 7.1 B站/视频无跳转内嵌播放器 (Liquid Glass 框体) */
.blk-video {
  margin: 14px 0 16px;
  border-radius: var(--glass-radius, 14px);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 220ms ease;
}
.blk-video:hover {
  box-shadow: var(--glass-shadow-hover);
}
.blk-video-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(128, 128, 128, 0.08);
  border-bottom: 1px solid var(--glass-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #666);
}
.blk-video-bar .blk-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fb7299; /* B站标志粉 */
  box-shadow: 0 0 6px rgba(251, 114, 153, 0.4);
}
.blk-video-bar .blk-video-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blk-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 黄金宽屏比例 */
  background: #000000;
}
.blk-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.blk-video-caption {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-tip, #888);
  text-align: center;
  background: rgba(128, 128, 128, 0.04);
}

/* 7.2 网页沙盒实时运行卡片 (支持直接在页面运行交互展示) */
.blk-sandbox-card {
  margin: 14px 0 16px;
  border-radius: var(--glass-radius, 14px);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 220ms ease;
}
.blk-sandbox-card:hover {
  box-shadow: var(--glass-shadow-hover);
}
.blk-sandbox-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(128, 128, 128, 0.09);
  border-bottom: 1px solid var(--glass-border);
}
.blk-sandbox-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.blk-sandbox-dots .blk-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.blk-dot.red { background: #ff5f56; }
.blk-dot.yellow { background: #ffbd2e; }
.blk-dot.green { background: #27c93f; }
.blk-sandbox-url {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-muted, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 10px;
  background: rgba(128, 128, 128, 0.08);
  border-radius: 6px;
  margin: 0 4px;
}
.blk-sandbox-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.blk-sandbox-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-main, #333);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 150ms ease;
}
.blk-sandbox-btn:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-1px);
}
.blk-sandbox-btn:active {
  transform: scale(0.95);
}
.blk-sandbox-body {
  width: 100%;
  height: 340px;
  position: relative;
  background: #ffffff;
}
.blk-sandbox-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.blk-sandbox-desc {
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--text-muted, #666);
  border-top: 1px solid var(--glass-border);
  background: rgba(128, 128, 128, 0.04);
}

/* 7.3 精致站外链接预览卡片 */
.blk-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: var(--glass-radius, 12px);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: var(--glass-shadow);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.25), box-shadow 220ms ease;
}
.blk-link-card:hover {
  transform: translateY(-2px);
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
}
.blk-link-card:active {
  transform: translateY(1px) scale(0.975);
}
.blk-link-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.blk-link-info {
  flex: 1;
  min-width: 0;
}
.blk-link-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main, #111);
  margin-bottom: 2px;
}
.blk-link-url {
  font-size: 12px;
  color: var(--accent, #0071e3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blk-link-arrow {
  color: var(--text-tip, #888);
  font-size: 16px;
  font-weight: 700;
}

/* 7.4 折叠与展开动效增强 (Smooth Accordion Physics) */
.foldable-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 360ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 240ms ease;
  will-change: grid-template-rows, opacity;
}
.foldable-body > .foldable-content {
  overflow: hidden;
  min-height: 0;
}
.open > .foldable-body,
[data-open="1"] > .foldable-body {
  grid-template-rows: 1fr;
  opacity: 1;
}