/* 配套最早那版 liquid-glass.js（每面独立 WebGL 折射：波光 + 鼠标透镜 + 色散 + 镜面高光 + 边缘光） */
:root{
  --lg-bg:#04060f;
  --lg-fg:#f4f7fb;
  --lg-muted:rgba(226,233,244,.72);
  --lg-line:rgba(255,255,255,.20);
  --lg-surface:rgba(12,18,34,.30);
  --lg-radius:24px;
  --lg-shadow:0 22px 60px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.18);
  --lg-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
html[data-theme="light"]{
  --lg-bg:#e9f1fb;
  --lg-fg:#0c1626;
  --lg-muted:rgba(20,34,56,.66);
  --lg-line:rgba(255,255,255,.80);
  --lg-surface:rgba(255,255,255,.34);
  --lg-shadow:0 24px 60px rgba(31,58,92,.16),inset 0 1px 0 rgba(255,255,255,.90);
}
html.lg-ready{background:transparent!important;color:var(--lg-fg)}
html.lg-ready body{background:transparent!important;color:var(--lg-fg);font-family:var(--lg-font)!important;min-height:100vh;isolation:isolate}
html.lg-ready .bg-wall,html.lg-ready .bg-veil,html.lg-ready .grain{display:none!important}

/* 背景层：环境底色 + WebGL 世界（玻璃折射的就是它） */
.lg-ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(120% 120% at 50% 0%,rgba(40,80,160,.28),transparent 60%),var(--lg-bg)}
#lg-world{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%;display:block}
/* 玻璃面：每面内嵌 WebGL canvas 直接绘制折射+高光；HTML 内容浮于其上 */
.lg-surface{position:relative!important;isolation:isolate;overflow:hidden;border:1px solid var(--lg-line)!important;border-radius:var(--lg-radius)!important;background:var(--lg-surface)!important;box-shadow:var(--lg-shadow)!important}
.lg-surface>*{position:relative;z-index:2}
.lg-glass-canvas{position:absolute!important;inset:0!important;z-index:1!important;width:100%!important;height:100%!important;pointer-events:none;display:block}
.lg-surface.nav,.lg-surface.topbar{border-radius:0 0 22px 22px!important;border-width:0 0 1px!important;box-shadow:0 16px 50px rgba(0,0,0,.24),inset 0 -1px 0 rgba(255,255,255,.16)!important}
.lg-surface.tile{border-radius:22px!important;transition:transform .35s cubic-bezier(.2,.85,.2,1),box-shadow .35s ease!important}
.lg-surface.tile:hover{transform:translateY(-5px) scale(1.012)!important;box-shadow:0 30px 76px rgba(0,0,0,.36),0 0 0 1px rgba(104,181,255,.24),inset 0 1px 0 rgba(255,255,255,.22)!important}
.lg-surface.card,.lg-surface.panel,.lg-surface.article,.lg-surface.sidebar,.lg-surface.content,.lg-surface.dialog,.lg-surface.modal-box,.lg-surface.term-wrap{border-radius:var(--lg-radius)!important}
/* ---------- Apple 风格液态玻璃组件框：顶部柔光 + 边缘亮环(rim) + 鼠标镜面光斑 ---------- */
/* 排除导航/顶栏（它们由 nav.css 单独处理），只作用于主页面一个个组件框 */
.lg-surface:not(.nav):not(.topbar){
  /* 顶部细白高光 + 底部暗边 + 左右明暗（玻璃边缘折射产生的 rim light）+ 投影 */
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.55),
    inset 0 -1px 1.5px rgba(0,0,0,.20),
    inset 1px 0 1px rgba(255,255,255,.15),
    inset -1px 0 1px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 18px 48px rgba(0,0,0,.30)!important;
  transition:box-shadow .35s ease,transform .35s cubic-bezier(.2,.85,.2,1)!important;
}
/* 顶部柔和白色高光带（玻璃顶面反光） */
.lg-surface:not(.nav):not(.topbar)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 26%,transparent 55%);
}
/* 跟随鼠标的镜面光斑（specular spot）：位置由 JS 写入的 --mx/--my 驱动 */
.lg-surface:not(.nav):not(.topbar)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(140px 140px at var(--mx,50%) var(--my,6%),
    rgba(255,255,255,.42),rgba(255,255,255,.12) 38%,transparent 62%);
  mix-blend-mode:screen;opacity:.9;
  transition:opacity .3s ease;
}
/* 浅色主题下光斑更亮、更贴近白玻璃质感 */
html[data-theme="light"] .lg-surface:not(.nav):not(.topbar)::after{
  background:radial-gradient(150px 150px at var(--mx,50%) var(--my,6%),
    rgba(255,255,255,.70),rgba(255,255,255,.20) 40%,transparent 64%);
}
html.lg-ready .pill,html.lg-ready .btn{border:1px solid var(--lg-line)!important;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04))!important;color:var(--lg-fg)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 22px rgba(0,0,0,.12)!important;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important}
html.lg-ready .pill:hover,html.lg-ready .btn:hover{transform:translateY(-2px);border-color:rgba(104,181,255,.66)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 12px 28px rgba(34,112,210,.18)!important}
html.lg-ready .pill.primary,html.lg-ready .btn.primary{border-color:rgba(157,205,255,.52)!important;background:linear-gradient(135deg,rgba(39,139,255,.88),rgba(130,91,246,.80))!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 28px rgba(62,121,238,.26)!important}
html.lg-ready input:not([type="color"]):not([type="range"]),html.lg-ready textarea,html.lg-ready select{border:1px solid var(--lg-line-soft,var(--lg-line))!important;background:rgba(6,10,22,.34)!important;color:var(--lg-fg)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important}
html[data-theme="light"].lg-ready input:not([type="color"]):not([type="range"]),html[data-theme="light"].lg-ready textarea,html[data-theme="light"].lg-ready select{background:rgba(255,255,255,.42)!important}
html.lg-ready input:focus,html.lg-ready textarea:focus,html.lg-ready select:focus{outline:none!important;border-color:rgba(74,160,255,.78)!important;box-shadow:0 0 0 4px rgba(50,143,255,.15),inset 0 1px 0 rgba(255,255,255,.12)!important}
html.lg-ready h1,html.lg-ready h2,html.lg-ready h3{letter-spacing:-.025em;text-wrap:balance}
html.lg-ready a{transition:color .2s ease,opacity .2s ease}
html.lg-ready ::selection{background:rgba(83,159,255,.36);color:var(--lg-fg)}
html.lg-ready ::-webkit-scrollbar{width:10px;height:10px}html.lg-ready ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:99px;background:rgba(141,169,205,.38);background-clip:padding-box}
/* WebGL 不可用时的降级：保留常见磨砂玻璃观感 */
html.lg-ready.lg-no-webgl .lg-glass-canvas,html.lg-ready.lg-no-webgl #lg-world,html.lg-ready.lg-no-webgl .lg-ambient{display:none!important}
html.lg-ready.lg-no-webgl .lg-surface{backdrop-filter:blur(20px) saturate(170%)!important;-webkit-backdrop-filter:blur(20px) saturate(170%)!important}
@media(max-width:760px){:root{--lg-radius:20px}.lg-surface.nav,.lg-surface.topbar{border-radius:0 0 18px 18px!important}.lg-surface.tile:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){.lg-surface,.lg-surface.tile,.pill,.btn{transition:none!important}.lg-surface.tile:hover{transform:none!important}}