@charset "utf-8";
/* ==========================================================================
   liquid-glass.css · 原生级「液态玻璃」（对标 iOS 系统玻璃材质）
   照视频（iOS 实拍）逐项对齐的六个特征：
     1) 落光：玻璃顶部到中部有一条柔和白色纵向落光（不是均匀半透明）
     2) 亮边：顶部 1px 极亮高光 + 内侧暗边，勾出玻璃厚度
     3) 内阴影：inset 阴影由边缘向内过渡，玻璃因此有"料"
     4) 曲面反光：宽而柔的弧形光带，随指针轻微视差移动（--lg-x/--lg-y）
     5) 磨砂颗粒：极细噪点，模拟 frosted 材质（内联 SVG，零请求）
     6) 按压：极短促的轻微压扁 + 边缘高光闪一下（不做夸张弹跳）
   另外：玻璃只在视口内的控件上启用 SVG 位移折射（省 GPU）；触屏/低动效/不支持 backdrop-filter 全部有降级
   ========================================================================== */

/* ===== 1. 玻璃令牌 ===== */
:root {
  --lg-blur: 18px;
  --lg-sat: 200%;
  /* 玻璃本体：比之前更"实"，靠落光和亮边出效果 */
  --lg-fill-top: rgba(252, 253, 255, .66);
  --lg-fill-bottom: rgba(240, 244, 250, .48);
  --lg-fill-top-hover: rgba(255, 255, 255, .78);
  --lg-fill-bottom-hover: rgba(244, 248, 254, .60);
  --lg-fill-top-press: rgba(238, 242, 250, .58);
  --lg-fill-bottom-press: rgba(226, 233, 243, .48);
  /* 厚度：亮边 / 内侧暗边 */
  --lg-rim: rgba(255, 255, 255, .95);
  --lg-rim-soft: rgba(255, 255, 255, .55);
  --lg-rim-dark: rgba(18, 26, 44, .10);
  --lg-inner: rgba(255, 255, 255, .45);
  --lg-inner-dark: rgba(18, 26, 44, .14);
  /* 落光与反光 */
  --lg-sheen: rgba(255, 255, 255, .55);
  --lg-curve: rgba(255, 255, 255, .40);
  --lg-tint: var(--accent);
  --lg-grain: .055;
  --lg-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 10px 28px -18px rgba(16, 24, 40, .28);
  --lg-shadow-hover: 0 2px 4px rgba(16, 24, 40, .12), 0 18px 44px -20px rgba(16, 24, 40, .38);
  --lg-shadow-press: 0 1px 2px rgba(16, 24, 40, .12), 0 4px 14px -10px rgba(16, 24, 40, .3);
  --lg-ease: cubic-bezier(.22, 1, .36, 1);
  --lg-dur: .3s;
  --lg-press-dur: .2s;
}
html[data-theme="dark"] {
  --lg-blur: 20px;
  --lg-sat: 190%;
  --lg-fill-top: rgba(255, 255, 255, .11);
  --lg-fill-bottom: rgba(255, 255, 255, .065);
  --lg-fill-top-hover: rgba(255, 255, 255, .16);
  --lg-fill-bottom-hover: rgba(255, 255, 255, .10);
  --lg-fill-top-press: rgba(255, 255, 255, .09);
  --lg-fill-bottom-press: rgba(255, 255, 255, .06);
  --lg-rim: rgba(255, 255, 255, .42);
  --lg-rim-soft: rgba(255, 255, 255, .20);
  --lg-rim-dark: rgba(0, 0, 0, .45);
  --lg-inner: rgba(255, 255, 255, .16);
  --lg-inner-dark: rgba(0, 0, 0, .30);
  --lg-sheen: rgba(255, 255, 255, .20);
  --lg-curve: rgba(255, 255, 255, .14);
  --lg-grain: .07;
  --lg-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px -18px rgba(0, 0, 0, .7);
  --lg-shadow-hover: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 48px -20px rgba(0, 0, 0, .8);
  --lg-shadow-press: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px -12px rgba(0, 0, 0, .7);
}

/* ===== 2. 玻璃本体 ===== */
/* 磨砂颗粒源（极淡，模拟 frosted 材质；内联 SVG，零请求） */
:root {
  --lg-grain-src: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'%20opacity='0.13'/%3E%3C/svg%3E");
}
.lg {
  position: relative;
  isolation: isolate;
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: inherit;
  /* 磨砂颗粒（最上层，极淡） + 纵向落光 */
  background:
    var(--lg-grain-src),
    linear-gradient(180deg, var(--lg-fill-top) 0%, var(--lg-fill-bottom) 100%);
  background-blend-mode: soft-light, normal;
  background-size: 140px 140px, auto;
  box-shadow: var(--lg-shadow);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  transition:
    background-color var(--lg-dur) var(--lg-ease),
    box-shadow var(--lg-dur) var(--lg-ease),
    transform var(--lg-dur) var(--lg-ease),
    scale var(--lg-press-dur) var(--lg-ease),
    filter var(--lg-press-dur) var(--lg-ease);
  transform: translate3d(var(--lg-px, 0px), var(--lg-py, 0px), 0);
  will-change: transform, box-shadow, backdrop-filter;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* 落光层（顶部一条柔和亮带，模拟光从上方落下来） */
.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg,
    var(--lg-sheen) 0%,
    color-mix(in srgb, var(--lg-sheen) 40%, transparent) 22%,
    transparent 46%);
  opacity: .9;
  transition: opacity var(--lg-dur) var(--lg-ease);
}
/* 曲面对角反光（跟随指针做轻微视差） */
.lg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at calc(var(--lg-x, 50%) + var(--lg-ox, 0%)) calc(var(--lg-y, 0%) - 20%),
      var(--lg-curve) 0%,
      color-mix(in srgb, var(--lg-curve) 35%, transparent) 34%,
      transparent 62%),
    radial-gradient(90% 70% at calc(100% - var(--lg-x, 50%)) calc(100% - var(--lg-y, 100%)),
      color-mix(in srgb, var(--lg-tint) 22%, transparent) 0%,
      transparent 58%);
  opacity: 0;
  transition: opacity var(--lg-dur) var(--lg-ease);
  mix-blend-mode: soft-light;
}
html[data-theme="dark"] .lg::after { mix-blend-mode: screen; }

/* 亮边 + 内阴影：玻璃的厚度。用阴影而非 border，边缘更细腻 */
.lg {
  box-shadow:
    var(--lg-shadow),
    inset 0 1px 0 0 var(--lg-rim),
    inset 0 0 0 1px color-mix(in srgb, var(--lg-rim) 22%, transparent),
    inset 0 -1px 0 0 var(--lg-rim-dark),
    inset 0 -8px 14px -10px var(--lg-inner-dark),
    inset 0 10px 18px -14px var(--lg-inner);
}

/* ===== 3. 悬停 ===== */
.lg:hover,
.lg.is-hover {
  background:
    var(--lg-grain-src),
    linear-gradient(180deg, var(--lg-fill-top-hover) 0%, var(--lg-fill-bottom-hover) 100%);
  background-blend-mode: soft-light, normal;
  background-size: 140px 140px, auto;
  box-shadow:
    var(--lg-shadow-hover),
    inset 0 1px 0 0 #fff,
    inset 0 0 0 1px color-mix(in srgb, var(--lg-rim) 34%, transparent),
    inset 0 -1px 0 0 var(--lg-rim-dark),
    inset 0 -8px 16px -10px var(--lg-inner-dark),
    inset 0 12px 22px -16px var(--lg-inner);
  transform: translate3d(var(--lg-px, 0px), calc(var(--lg-py, 0px) - 1px), 0);
}
.lg:hover::after,
.lg.is-hover::after { opacity: 1; }
.lg:hover::before,
.lg.is-hover::before { opacity: 1; }

/* ===== 4. 按压：短促、轻微、边缘亮一下（原生手感） ===== */
.lg:active { transition-duration: .06s; }
.lg.is-press {
  background:
    linear-gradient(180deg, var(--lg-fill-top-press) 0%, var(--lg-fill-bottom-press) 100%);
  box-shadow:
    var(--lg-shadow-press),
    inset 0 1px 0 0 #fff,
    inset 0 0 0 1px color-mix(in srgb, var(--lg-rim) 40%, transparent),
    inset 0 -1px 0 0 var(--lg-rim-dark),
    inset 0 0 22px -6px var(--lg-inner-dark);
  animation: lg-press .34s var(--lg-ease);
  transform: translate3d(var(--lg-px, 0px), var(--lg-py, 0px), 0);
}
@keyframes lg-press {
  0%   { scale: 1 1; }
  28%  { scale: .975 .955; }
  66%  { scale: 1.012 1.016; }
  100% { scale: 1 1; }
}
/* 按下瞬间的白色内闪（iOS 的 tap 高光） */
.lg.is-press::before { opacity: 1; background: linear-gradient(180deg, rgba(255, 255, 255, .34), transparent 60%); }
html[data-theme="dark"] .lg.is-press::before { background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 60%); }

/* ===== 5. 指针水波（保留，但对齐原生：更快、更淡） ===== */
.lg-ripple {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .50) 0%,
    color-mix(in srgb, var(--lg-tint) 22%, transparent) 42%,
    transparent 70%);
  transform: translate(-50%, -50%) scale(.35);
  opacity: .8;
  animation: lg-ripple .5s var(--lg-ease) forwards;
  mix-blend-mode: soft-light;
}
html[data-theme="dark"] .lg-ripple { mix-blend-mode: screen; }
@keyframes lg-ripple {
  0%   { transform: translate(-50%, -50%) scale(.35); opacity: .85; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ===== 6. 真实折射（仅视口内的控件启用，省 GPU） ===== */
.lg.in-view.has-refraction {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) url(#lg-refract);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) url(#lg-refract);
}

/* ===== 7. 套到站点控件上 ===== */
.lg.btn,
.lg.iconbtn,
.lg.pager-btn,
.lg.tag,
.lg.chip,
.lg.navlink,
.lg.side-link,
.lg.seg,
.lg.socials a,
.lg.cmd,
.lg.tagcloud a { border-radius: var(--r-full); }

/* 主按钮：保留强调渐变，但叠一层玻璃落光 */
.lg.btn-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(120deg, var(--accent), var(--accent-2));
  background-blend-mode: normal;
  color: #06131b;
  --lg-sheen: rgba(255, 255, 255, .30);
  --lg-curve: rgba(255, 255, 255, .55);
}
.lg.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .04) 54%),
    linear-gradient(120deg, var(--accent), var(--accent-2));
  filter: saturate(1.05);
  box-shadow:
    0 2px 6px rgba(16, 24, 40, .12),
    0 20px 44px -18px color-mix(in srgb, var(--accent) 65%, transparent),
    inset 0 1px 0 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 -1px 0 0 rgba(0, 0, 0, .12);
}
.lg.btn-primary.is-press {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(0, 0, 0, .06) 100%),
    linear-gradient(120deg, var(--accent), var(--accent-2));
}

/* 小控件：更薄的玻璃、更小的模糊 */
.lg.iconbtn,
.lg.navlink,
.lg.side-link,
.lg.chip,
.lg.tag,
.lg.pager-btn,
.lg.socials a,
.lg.tagcloud a {
  --lg-blur: 13px;
  --lg-fill-top: rgba(252, 253, 255, .52);
  --lg-fill-bottom: rgba(240, 244, 250, .36);
  --lg-fill-top-hover: rgba(255, 255, 255, .66);
  --lg-fill-bottom-hover: rgba(244, 248, 254, .48);
}
html[data-theme="dark"] .lg.iconbtn,
html[data-theme="dark"] .lg.navlink,
html[data-theme="dark"] .lg.side-link,
html[data-theme="dark"] .lg.chip,
html[data-theme="dark"] .lg.tag,
html[data-theme="dark"] .lg.pager-btn,
html[data-theme="dark"] .lg.socials a,
html[data-theme="dark"] .lg.tagcloud a {
  --lg-fill-top: rgba(255, 255, 255, .085);
  --lg-fill-bottom: rgba(255, 255, 255, .05);
  --lg-fill-top-hover: rgba(255, 255, 255, .13);
  --lg-fill-bottom-hover: rgba(255, 255, 255, .08);
}
/* 列表类链接不做位移，只做光泽（原生列表行的行为） */
.lg.side-link:hover,
.lg.navlink:hover { transform: none; }
.lg.side-link.is-hover,
.lg.navlink.is-hover { transform: none; }
.lg.tag:hover,
.lg.chip:hover { transform: translate3d(var(--lg-px, 0px), calc(var(--lg-py, 0px) - 1px), 0); }

/* 输入框：只给玻璃料，不位移 */
.lg.field { --lg-blur: 14px; }
.lg.field:hover { transform: none; }
.lg.field:focus-within {
  box-shadow:
    var(--lg-shadow-hover),
    inset 0 1px 0 0 #fff,
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 0 3px var(--accent-soft);
}
/* 分段控件 */
.lg.seg { padding: 3px; }
.lg.seg button { border-radius: var(--r-full); }
.lg.seg button.on {
  background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, transparent 56%),
              linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #06131b;
  font-weight: 700;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .8), 0 1px 3px rgba(16, 24, 40, .18);
}
/* 卡片：更安静（原生卡片不抬升，只加深底色） */
.lg.acard:hover,
.lg.fcard:hover {
  transform: none;
  box-shadow:
    0 2px 6px rgba(16, 24, 40, .10),
    0 22px 50px -26px rgba(16, 24, 40, .34),
    inset 0 1px 0 0 #fff,
    inset 0 0 0 1px color-mix(in srgb, var(--lg-rim) 20%, transparent),
    inset 0 -1px 0 0 var(--lg-rim-dark);
}
.lg.acard.is-hover,
.lg.fcard.is-hover { transform: none; }

/* ===== 8. 降级 ===== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg {
    background: var(--paper-2);
    box-shadow: var(--sh-1), inset 0 1px 0 0 rgba(255, 255, 255, .6);
  }
  .lg::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg, .lg::before, .lg::after { transition: none !important; animation: none !important; }
  .lg:hover, .lg.is-hover, .lg.is-press { transform: none; }
  .lg-ripple { display: none; }
  .lg.in-view.has-refraction { -webkit-backdrop-filter: blur(var(--lg-blur)); backdrop-filter: blur(var(--lg-blur)); }
}
@media (hover: none) {
  .lg:hover { transform: none; }
  .lg:hover::after { opacity: 0; }
  .lg.is-hover::after { opacity: 1; }
}