/**
 * 蓝湾 · 液态玻璃外观层（Apple Liquid Glass）
 *
 * 只在「界面风格」选「液态玻璃」时加载（见 header.php 的 x_lanwan_ui_liquid()）。
 *
 * 【分工：这里为什么不写 backdrop-filter 和底色】
 * 折射靠 backdrop-filter: url(#某滤镜)，而那个滤镜是一条逐像素算出的位移贴图，
 * 尺寸取决于元素有多大 —— 只有 JS 算得出来（js/z-liquid-glass.js）。那边会把
 * backdrop-filter 与「底色 + 指针柔光」两层背景图写进元素的内联样式。
 *
 * 底色之所以写成背景图、而不是内联 background-color：页头的底色在主题里是
 * `!important`（x_lanwan.css 的 .navbar.bg-dark），内联背景色压不过它；而背景图
 * 不参与优先级比较。本文件负责把背景色压成透明，给那两层图让出位置。
 *
 * 本文件负责 JS 管不到、也不依赖元素尺寸的部分：
 *   · 玻璃的「体积感」：内亮边 + 外描边 + 投影；
 *   · 悬停 / 按下时的回馈（纯 CSS，不进入 JS）；
 *   · 页头玻璃层的层叠与分类条的静态玻璃。
 *
 * 【为什么描边用 inset box-shadow，不用 border】
 * border 会占掉布局尺寸，元素宽高因此变化，贴图就得重算（JS 靠
 * data-zlg-size 判断要不要重算）；而且 border 在圆角处会把折射圈切掉一圈。
 * inset box-shadow 不占尺寸、跟着圆角走，正好做成「玻璃切面」的高光。
 *
 * 【为什么只给浮层定圆角，不给控件定】
 * 控件各有自己的圆角语言，而且是被设计过的：.side-btn 与 .znav-mobile-btn 是
 * 正圆、.znav-icon-btn 是 8px 小圆角。统一改成大圆角会把圆按钮变成圆角方块，
 * 是实打实的观感倒退。玻璃的「曲率」感在本文件里交给 box-shadow 表达即可。
 * 注意：不要给 .zl-liquid 写 border-radius: inherit。它会继承父元素的 0 圆角，
 * 把 side-toolbar 的圆形按钮压成方形。
 *
 * 【一个必须绕开的 CSS 陷阱：backdrop root】
 * 元素一旦带上 backdrop-filter / filter / opacity<1 / mask / mix-blend-mode /
 * isolation，就会成为「backdrop root」—— 它内部所有带 backdrop-filter 的后代，
 * 采样范围被限制在这个 root 里，看不到页面本身。所以：
 *   · 不给 #header 加 backdrop-filter（它内部有下拉、搜索弹层、二级菜单）；
 *   · 不给 #header 加 isolation（同样会造 backdrop root，玻璃层会采不到背景）；
 *   · 不给 #nav_pc_2 加 backdrop-filter（二级菜单就挂在它内部）。
 * 页头因此改用插入的 .zlg-bar-layer 子元素承担滤镜，见 JS 文件头。
 */

/* ---------- 让出底色：JS 的两层背景图才看得见 ---------- */
/* 页头 / 卡片式下拉的底色带 !important 或高特异性，必须同档 !important 才能压掉。
   JS 的背景图是内联的，一定盖在这之上。

   暗色那几条（html[data-zl-theme="dark"] #header 是 1,1,1；.card 是 0,2,1）
   特异性高于对应的亮色选择器，所以每个都要再写一份暗色版本 —— 只靠亮色那条
   压不住，暗色下会退回实底，玻璃层被完全遮住。 */
.zl-liquid,
#header.zl-liquid-host,
.navbar.zl-liquid,
.card.zl-liquid,
html[data-zl-theme="dark"] .zl-liquid,
html[data-zl-theme="dark"] #header.zl-liquid-host,
html[data-zl-theme="dark"] .navbar.zl-liquid,
html[data-zl-theme="dark"] .card.zl-liquid {
    background-color: transparent !important;
}

/* ---------- 页头：玻璃层垫在内容之下 ---------- */
/* z-index:-1 而不是 0：负值画在「父背景之后、行内内容之前」，不必给页头里的
   每个子元素抬 z-index，也就不会打乱原有的层叠关系。

   但负 z-index 要稳定待在页头内部，页头自己必须先成为层叠上下文，否则玻璃层
   会一路跑到最近的祖先层叠上下文里，可能被 body::before（z-index:-1 的背景图
   图层）盖住。用 z-index 建立它，而不是 isolation:isolate —— 后者会同时
   造出 backdrop root，玻璃层就采不到页面背景了（见文件头）。
   .zheader-single 自带 z-index:1040（吸顶用），这里用 :not() 排除，
   免得把那条覆盖掉、让吸顶失效。

   ★ 这里原来写的是 z-index:0，会让头像下拉被正文盖住：页头一旦成为层叠
   上下文，下拉自己的 z-index:1500 就只在这个上下文内部比较，而页头整体只有
   0 级；正文里任何带正 z-index 的定位块（文章页很常见）都会盖到下拉上面，
   看着像下拉「错位 / 被切掉」。所以页头必须抬到正文之上。
   1030 是刻意选的：低于右侧浮动工具栏（1080）与 Bootstrap 模态框
   （1050/1055），高于正文内容，并与吸顶头部（1040）同一量级。 */
#header.zl-liquid-host:not(.zheader-single) {
    z-index: 1030;
}

/* 吸顶页头本身带 z-index:1040，但不能靠 isolation 隔离——
   那会截断玻璃层对页面背景的采样。让玻璃层留在页头内，
   同时保证页头里的浮层有自己的层叠上下文。 */
#header.zl-liquid-host.zheader-single {
    isolation: auto;
}

.zlg-bar-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}

#header.zl-liquid-host {
    border-bottom: 0 !important;
}

/* ---------- 分类条：静态玻璃 ---------- */
/* 这条横条横向可滚动，玻璃层会跟着内容滚走，所以不做折射；
   只给半透明底 + 上下亮边，与页头连成一整块玻璃。
   注意这里刻意不用 backdrop-filter —— 二级菜单就在它内部（见文件头）。
   类名是 .zl-liquid-static，不是 .zl-liquid：JS 只加类、不建滤镜。 */
#nav_pc_2.zl-liquid-static {
    background-color: rgba(255, 255, 255, .74) !important;
    border-bottom: 0 !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .5),
        inset 0 -1px 0 0 rgba(255, 255, 255, .2),
        0 6px 18px -14px rgba(15, 23, 42, .28) !important;
}

html[data-zl-theme="dark"] #nav_pc_2.zl-liquid-static {
    background-color: rgba(26, 30, 36, .76) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .12),
        inset 0 -1px 0 0 rgba(255, 255, 255, .07),
        0 6px 18px -14px rgba(0, 0, 0, .55) !important;
}

/* ---------- 页脚：整块横玻璃 ---------- */
/* 页脚原来是一条不透明的实底（emlog-bridge.css 的 footer{background:var(--zl-surface)}），
   在液态玻璃下与页头的玻璃感完全脱节。这里给它与页头同源的半透明底 + 亮边，
   但不做折射：页脚没有悬浮内容，逐像素位移贴图只会白烧性能。
   只在内容真正铺到页脚时才有意义，所以用 zlg-surface 作为开关。 */
footer.zlg-surface {
    background-color: var(--zlg-card-fill-strong) !important;
    border-top: 1px solid var(--zlg-card-ring) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 -8px 24px -18px rgba(25, 49, 82, .3) !important;
}

html[data-zl-theme="dark"] footer.zlg-surface {
    background-color: var(--zlg-card-fill-strong) !important;
    border-top-color: var(--zlg-card-ring) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 -8px 24px -18px rgba(0, 0, 0, .5) !important;
}

/* 首页页脚上方的友情链接条：与页脚连成一整块玻璃，不再各切一条实底。 */
.zfooter-friend-links.zlg-surface {
    background-color: var(--zlg-card-fill) !important;
    border-top: 1px solid var(--zlg-card-ring) !important;
}

/* 友情链接的每个入口是独立的小玻璃片，悬停时只提亮外缘。 */
.zfooter-friend-item.zlg-surface {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.zfooter-friend-item.zlg-surface:hover,
.zfooter-friend-item.zlg-surface:focus-visible {
    border-color: var(--zlg-card-ring) !important;
    background-color: rgba(255, 255, 255, .26) !important;
}

html[data-zl-theme="dark"] .zfooter-friend-item.zlg-surface:hover,
html[data-zl-theme="dark"] .zfooter-friend-item.zlg-surface:focus-visible {
    background-color: rgba(255, 255, 255, .06) !important;
}

/* 页脚里那条分隔线（.zfooter-links 的上边线）跟玻璃同色，
   不然会在半透明底上留一条灰硬的直线。 */
footer.zlg-surface .zfooter-links {
    border-top-color: var(--zlg-card-ring) !important;
}

/* ---------- 浮层：玻璃块本体 ---------- */
/* 下拉 / 弹窗 / 二级菜单 / 用户下拉卡 / 搜索弹层：圆角偏大以暗示一块玻璃，
   描边与投影成套给足「厚度」。 */
.dropdown-menu.zl-liquid,
.modal-content.zl-liquid,
.header-dropdown.zl-liquid,
.znav-submenu.zl-liquid,
.zshare-dropdown.zl-liquid,
.ztag-suggest.zl-liquid,
.znav-search-form.zl-liquid {
    border-radius: 18px !important;
    border-color: transparent !important;
}

/* 统一「玻璃切面」：顶部一条亮边 + 底部一条弱反光 + 一圈外描边 + 落地投影。
   用 !important 是因为这几类元素在主题与 Bootstrap 里都各自写过 box-shadow，
   权重不一；被压掉就只剩半透明底，看着像块塑料片。 */
.zl-liquid {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .72),
        inset 0 -1px 0 0 rgba(255, 255, 255, .2),
        inset 0 0 0 1px rgba(255, 255, 255, .3),
        inset 0 0 24px -6px rgba(255, 255, 255, .5),
        0 8px 24px -10px rgba(15, 23, 42, .22),
        0 1px 2px rgba(15, 23, 42, .1) !important;
    /* 只过渡 box-shadow。刻意不声明 transform ——
       控件自带按下反馈（.side-btn:active 是 scale(.94)），本文件加载更晚、
       同权重，一旦在这里写 transform 就会把它们压掉。 */
    transition: box-shadow .22s ease;
}

/* 侧栏工具栏的按钮是正圆，玻璃层不能改变它的外形。
   用 .side-toolbar 限定范围，避免把文章页的其它 .side-btn 也误改成圆形。 */
.side-toolbar .side-btn.zl-liquid,
.znav-mobile-btn.zl-liquid {
    border-radius: 50% !important;
}

/* 悬停：描边与投影略微加重，像玻璃被抬高了一点 */
.zl-liquid:hover {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .78),
        inset 0 -1px 0 0 rgba(255, 255, 255, .24),
        inset 0 0 0 1px rgba(255, 255, 255, .36),
        inset 0 0 28px -4px rgba(255, 255, 255, .55),
        0 10px 28px rgba(15, 23, 42, .22),
        0 1px 2px rgba(15, 23, 42, .12) !important;
}

/* 按下：把下陷感压在底部，顶部留着增亮 —— 与素材里 PRESS_SHADOW 的思路一致。
   同样不写 transform，理由见上面。 */
.zl-liquid:active {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .5),
        inset 0 -6px 14px rgba(0, 0, 0, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .3),
        0 2px 8px rgba(15, 23, 42, .14) !important;
}

/* 键盘可达性：玻璃上的焦点环要看得清 */
.zl-liquid:focus-visible {
    outline: 2px solid rgba(0, 132, 255, .85);
    outline-offset: 2px;
}

/* ---------- 页头玻璃层：整条横玻璃的收边 ---------- */
/* 比上面 .zl-liquid 更特异，才压得过那套「浮起 / 按下」的阴影。 */
#header > .zlg-bar-layer {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .5),
        inset 0 -1px 0 0 rgba(255, 255, 255, .24),
        0 1px 0 rgba(15, 23, 42, .06),
        0 10px 28px -14px rgba(15, 23, 42, .3) !important;
}

/* 页头里的控件（搜索弹层、图标按钮）与页头是两层玻璃叠着，
   控件那圈外描边压在横玻璃上会显得脏 —— 只留顶部亮边与极淡的轮廓。 */
#header .zl-liquid:not(.zlg-bar-layer) {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .5),
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        0 1px 3px rgba(15, 23, 42, .12) !important;
}

/* ============================================================
 * 内容表面：卡片 / 侧栏 / 导航与快捷入口
 *
 * 这些元素数量多、面积大，全部逐像素折射会让滚动变重，所以统一
 * 使用轻量玻璃表面：半透明底 + 内高光 + 细描边 + 柔和投影。
 * 不叠加 backdrop-filter，不参与 JS 贴图计算。
 * ============================================================ */
:root {
    --zlg-card-fill: rgba(255, 255, 255, .3);
    --zlg-card-fill-strong: rgba(255, 255, 255, .44);
    --zlg-card-ring: rgba(255, 255, 255, .9);
    --zlg-card-edge: rgba(255, 255, 255, .98);
    --zlg-card-shadow: 0 16px 36px -16px rgba(25, 49, 82, .34),
                       0 2px 8px rgba(25, 49, 82, .06);
    --zlg-card-shadow-hover: 0 20px 44px -16px rgba(25, 49, 82, .4),
                             0 3px 10px rgba(25, 49, 82, .08);
}

html[data-zl-theme="dark"] {
    --zlg-card-fill: rgba(30, 35, 43, .62);
    --zlg-card-fill-strong: rgba(34, 40, 49, .78);
    --zlg-card-ring: rgba(255, 255, 255, .09);
    --zlg-card-edge: rgba(255, 255, 255, .16);
    --zlg-card-shadow: 0 12px 32px -16px rgba(0, 0, 0, .58),
                       0 2px 8px rgba(0, 0, 0, .18);
    --zlg-card-shadow-hover: 0 16px 40px -16px rgba(0, 0, 0, .64),
                             0 3px 10px rgba(0, 0, 0, .22);
}

/* 主内容卡片、列表、提示条、分类卡与快捷入口 */
/* 这些类由 JS 在运行时添加，标记为轻量玻璃表面。 */
.card.zlg-surface,
.card-quicknav.zlg-surface,
.card-listhint.zlg-surface,
.zhome-category-card.zlg-surface,
.zwrite-media.zlg-surface,
.zwrite-types.zlg-surface,
.zpan-group.zlg-surface,
.zpan-group .zpan-card.zlg-surface,
.zbq-hero.zlg-surface,
.zbq-hero-stat-card.zlg-surface,
.zbq-item.zlg-surface,
.thread_pl.zlg-surface,
.breadcrumb.zlg-surface,
.pagination-wrap.zlg-surface {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 14px !important;
    background-color: var(--zlg-card-fill) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        inset 0 0 24px -12px rgba(255, 255, 255, .75),
        var(--zlg-card-shadow) !important;
}

/* 卡片头 / 脚也跟着半透明，避免实色块把玻璃切碎。 */
.card.zlg-surface > .card-header,
.card.zlg-surface > .card-footer,
.card-quicknav.zlg-surface .card-header,
.card-quicknav.zlg-surface .card-footer {
    border-color: var(--zlg-card-ring) !important;
    background-color: rgba(255, 255, 255, .2) !important;
}

html[data-zl-theme="dark"] .card.zlg-surface > .card-header,
html[data-zl-theme="dark"] .card.zlg-surface > .card-footer,
html[data-zl-theme="dark"] .card-quicknav.zlg-surface .card-header,
html[data-zl-theme="dark"] .card-quicknav.zlg-surface .card-footer {
    background-color: rgba(255, 255, 255, .035) !important;
}

/* 堆叠卡片保持拼接关系，只在整体外缘使用圆角。 */
.card.zlg-surface.card-postlist {
    border-top-width: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.card.zlg-surface.card-thread {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 侧栏所有顶层卡片、表单和列表统一成同一块玻璃。 */
#body > .container > .row > .aside > .card.zlg-surface,
#body > .container > .row > .aside > .zlg-surface {
    background-color: var(--zlg-card-fill-strong) !important;
}

/* 侧栏里的输入框、按钮、标签与列表行：控件级轻量玻璃。 */
#body > .container > .row > .aside .form-control.zlg-surface,
#body > .container > .row > .aside .custom-select.zlg-surface,
#body > .container > .row > .aside .btn.zlg-surface,
#body > .container > .row > .aside .zbtn-pill.zlg-surface,
#body > .container > .row > .aside .ztag-ball .tags-side.zlg-surface,
#body > .container > .row > .aside .list-group-item.zlg-surface {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 10px !important;
    background-color: var(--zlg-card-fill) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 4px 14px -10px rgba(25, 49, 82, .34) !important;
}

/* 搜索框、侧栏和页脚里的普通输入框。品牌蓝按钮不动。 */
.form-control.zlg-surface,
.custom-select.zlg-surface,
.custom-file-label.zlg-surface,
.input-group > .form-control.zlg-surface,
.search-box.zlg-surface,
.zsidebar-search-box.zlg-surface,
.zsidebar-search-box.zl-liquid {
    border: 1px solid var(--zlg-card-ring) !important;
    background-color: var(--zlg-card-fill) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 4px 14px -10px rgba(25, 49, 82, .3) !important;
}

/* 搜索按钮是品牌蓝 CTA，保留实色，只让它与玻璃搜索框拼成一体。 */
.zsidebar-search-btn {
    border-radius: 0 8px 8px 0 !important;
}

/* 输入框与旁边按钮组成一体。玻璃脚本会把输入框的 box-sizing 改成
   content-box，主题原本的 100% 宽度因此多出一个内边距，接缝处会露出
   一块白色。这里让两者都按 border-box 计算，宽度正好拼满。 */
.zlg-field-group > .form-control.zl-liquid,
.zlg-field-group > .btn.zl-liquid {
    box-sizing: border-box;
}

.zlg-field-group > .form-control.zl-liquid {
    border-radius: 10px 0 0 10px !important;
}

.zlg-field-group > .btn.zl-liquid {
    border-radius: 0 10px 10px 0 !important;
}

/* 输入框进入玻璃层后必须继续跟随主题文字色。
   .form-control 的默认色在亮色下是深灰，暗色变量不会自动带过去。 */
.form-control.zl-liquid,
.custom-select.zl-liquid,
.search-box.zl-liquid input {
    color: var(--zl-text) !important;
}

.form-control.zl-liquid::placeholder,
.search-box.zl-liquid input::placeholder {
    color: var(--zl-text-muted) !important;
    opacity: 1;
}

/* 品牌色按钮仍保留实色：脚本会接管 .btn，但这里用更高优先级
   把主色 / 危险 / 成功 / 警告 / 信息按钮的底色与文字恢复回来，
   避免 JS 写进去的玻璃背景把它们洗白。 */
.btn.btn-primary.zl-liquid,
.btn.btn-danger.zl-liquid,
.btn.btn-success.zl-liquid,
.btn.btn-warning.zl-liquid,
.btn.btn-info.zl-liquid,
.zbtn-pill.btn-primary.zl-liquid,
.zbtn-pill.btn-danger.zl-liquid {
    background-color: var(--zlg-btn-brand-bg, #0084ff) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* 搜索按钮在主题里是品牌蓝 CTA，不是普通玻璃按钮。 */
.zsidebar-search-btn {
    background-color: #0084ff !important;
    background-image: none !important;
    color: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 普通按钮不能把主题原有文字颜色洗掉。 */
.btn.zl-liquid:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info),
.zbtn-pill.zl-liquid:not(.btn-primary):not(.btn-danger) {
    color: var(--zl-text) !important;
}

.btn.zl-liquid:hover:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info),
.zbtn-pill.zl-liquid:hover:not(.btn-primary):not(.btn-danger) {
    color: #0084ff !important;
}

.btn.btn-danger.zl-liquid {
    --zlg-btn-brand-bg: #dc3545;
}

.btn.btn-success.zl-liquid {
    --zlg-btn-brand-bg: #28a745;
}

.btn.btn-warning.zl-liquid {
    --zlg-btn-brand-bg: #ffc107;
    color: #212529 !important;
}

.btn.btn-info.zl-liquid {
    --zlg-btn-brand-bg: #17a2b8;
}

/* 普通按钮与分页项使用轻量玻璃；.btn-primary / .btn-danger 等强调色保留原样。 */
.btn.zlg-surface:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info),
.zbtn-pill.zlg-surface:not(.btn-primary):not(.btn-danger),
.pagination-wrap.zlg-surface a,
.pagination-wrap.zlg-surface span,
.zpage.zlg-surface a,
.zpage.zlg-surface span {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 10px !important;
    background-color: var(--zlg-card-fill) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 4px 14px -10px rgba(25, 49, 82, .34) !important;
}

/* 悬停时只提亮外缘，不重算贴图。 */
.card.zlg-surface:hover,
.card-quicknav.zlg-surface:hover,
.zhome-category-card.zlg-surface:hover {
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        inset 0 0 26px -10px rgba(255, 255, 255, .8),
        var(--zlg-card-shadow-hover) !important;
}


/* 文章工具、点赞收藏、用户中心导航与支付快捷按钮：轻量玻璃控件。
   不改变各自尺寸和形状，只统一底色、描边与高光。 */
.zarticle-font-btn.zlg-surface,
.zvote-btn.zlg-surface,
.zhide-btn.zlg-surface,
.zuc-topnav.zlg-surface,
.zuc-topnav-link.zlg-surface,
.zuc-nav.zlg-surface,
.zuc-nav-list.zlg-surface,
.zuc-nav-link.zlg-surface,
.zuc-hero.zlg-surface,
.zuc-stat.zlg-surface,
.zuc-panel.zlg-surface,
.zuc-profile-head.zlg-surface,
.zuc-profile-stat.zlg-surface,
.zuc-pager.zlg-surface,
.zuc-pager .zuc-page.zlg-surface,
.zuc-guest.zlg-surface,
.zuc-guest-body.zlg-surface,
.zuc-tip.zlg-surface,
.zuc-msg.zlg-surface,
.zpay-panel.zlg-surface,
.zpay-quick.zlg-surface,
.zauthor-hero.zlg-surface,
.blogger-hero.zlg-surface,
.zside-profile.zlg-surface {
    border: 1px solid var(--zlg-card-ring) !important;
    background-color: var(--zlg-card-fill) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 4px 14px -10px rgba(25, 49, 82, .32) !important;
}

/* 这些控件保留自己的圆角语言：字号 / 投票按钮是小圆角，用户中心导航
   顶部胶囊跟随原样式，不统一改成大圆角。 */
.zarticle-font-btn.zlg-surface,
.zvote-btn.zlg-surface,
.zhide-btn.zlg-surface {
    border-radius: 10px !important;
}

/* 投票按钮的选中态（已赞 / 已踩 / 已收藏）保留品牌实色。
   上面的玻璃底是 !important 的浅色底，会把 .active 的白字洗成白底白字，
   点完按钮就“消失”了。这里和品牌按钮一样把实底与白字恢复回来。 */
.zvote-btn.zlg-surface.active {
    background-color: #0084ff !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #0084ff !important;
}

.zvote-btn.zlg-surface.active:hover {
    background-color: #0072e0 !important;
    border-color: #0072e0 !important;
}

/* 点踩选中用中性灰，与 emlog-bridge.css 的规则保持一致。 */
.zvote-btn.zlg-surface.zvote-down.active,
.zvote-btn.zlg-surface.zvote-down.active:hover {
    background-color: #7a8797 !important;
    border-color: #7a8797 !important;
}

.zuc-topnav-link.zlg-surface,
.zuc-nav-link.zlg-surface,
.zuc-pager .zuc-page.zlg-surface,
.zpay-quick-btn.zlg-surface {
    border-radius: 8px !important;
}

/* 用户中心选中项：保留品牌蓝胶囊，不做满宽实条。
   导航列表本身是透明容器；每个链接改成内缩的胶囊，选中项只占
   自己那一行宽度，不再从卡片左边一直铺到右边。 */
.zuc-nav-list.zlg-surface {
    padding: 8px 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.zuc-nav-link.zlg-surface {
    width: fit-content !important;
    max-width: calc(100% - 8px);
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: auto !important;
    /* 用户中心原本就是 8px 小圆角，不能统一改成胶囊。 */
    border-radius: 8px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.zuc-nav-link.zlg-surface:hover {
    background-color: rgba(255, 255, 255, .35) !important;
    border-color: var(--zlg-card-ring) !important;
}

html[data-zl-theme="dark"] .zuc-nav-link.zlg-surface:hover {
    background-color: rgba(255, 255, 255, .06) !important;
}

.zuc-nav-link.zlg-surface.active {
    border-radius: 8px !important;
    background-color: #0084ff !important;
    color: #fff !important;
}

.zuc-nav-link.active::before {
    display: none;
}

/* 当前页 / 当前导航项保持品牌蓝，不被半透明底洗掉。
   分页项要写成 .zuc-pager .zuc-page.is-current：(0,3,0) 才能压过
   .zuc-pager .zuc-page.zlg-surface 那组同特异性的玻璃底，否则当前页
   只剩白字、底却还是浅色，数字就看不见了。 */
.zuc-topnav-link.active,
.zuc-nav-link.active,
.zuc-pager .zuc-page.is-current {
    background-color: #0084ff !important;
    border-color: #0084ff !important;
    color: #fff !important;
    box-shadow: none !important;
}

.zuc-topnav-link.active i,
.zuc-nav-link.active i {
    color: #fff !important;
}

/* 顶部导航整条与左侧导航卡需要更实一点，文字才不会透过背景。 */
.zuc-topnav.zlg-surface,
.zuc-nav.zlg-surface,
.zuc-panel.zlg-surface,
.zuc-hero.zlg-surface,
.zuc-stat.zlg-surface,
.zuc-guest-body.zlg-surface,
.zpay-panel.zlg-surface,
.zpay-quick.zlg-surface {
    background-color: var(--zlg-card-fill-strong) !important;
}

/* 用户中心只做轻量玻璃，不再让每个小控件都有独立折射圈。
   多层 backdrop-filter 叠在一起是页面“乱”和闪烁的主要来源。 */
.zuc-topnav-link.zlg-surface,
.zuc-nav-link.zlg-surface,
.zuc-pager .zuc-page.zlg-surface,
.zuc-hero .btn.zlg-surface,
.zuc-panel .btn.zlg-surface,
.zuc-nav .btn.zlg-surface {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.zuc-topnav-link.zlg-surface:not(.active),
.zuc-nav-link.zlg-surface:not(.active),
.zuc-pager .zuc-page.zlg-surface:not(.is-current),
.zuc-hero .btn.zlg-surface,
.zuc-panel .btn.zlg-surface {
    background-color: var(--zlg-card-fill) !important;
    background-image: none !important;
    border: 1px solid var(--zlg-card-ring) !important;
    color: var(--zl-text) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 4px 12px -9px rgba(25, 49, 82, .24) !important;
}

/* 轻量按钮没有折射贴图，悬停只改颜色和边缘，不触发玻璃重绘。 */
.zuc-hero .btn.zlg-surface:hover,
.zuc-panel .btn.zlg-surface:hover,
.zuc-item .btn.zlg-surface:hover,
.zuc-topnav-link.zlg-surface:hover:not(.active),
.zuc-nav-link.zlg-surface:hover:not(.active),
.zuc-pager .zuc-page.zlg-surface:hover:not(.is-current) {
    color: #0084ff !important;
    /* 这里原本写成 --zl-card-ring（少一个 g），变量不存在时 border-color
       会退回 currentColor，也就是本行的品牌蓝 —— 悬停就多出一圈蓝边。
       统一用玻璃描边变量，边缘不随悬停变色。 */
    border-color: var(--zlg-card-ring) !important;
    background-color: rgba(255, 255, 255, .3) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 4px 12px -9px rgba(0, 132, 255, .2) !important;
}

html[data-zl-theme="dark"] .zuc-topnav-link.zlg-surface:not(.active),
html[data-zl-theme="dark"] .zuc-nav-link.zlg-surface:not(.active),
html[data-zl-theme="dark"] .zuc-pager .zuc-page.zlg-surface:not(.is-current),
html[data-zl-theme="dark"] .zuc-hero .btn.zlg-surface,
html[data-zl-theme="dark"] .zuc-panel .btn.zlg-surface,
html[data-zl-theme="dark"] .zuc-item .btn.zlg-surface {
    background-color: rgba(255, 255, 255, .055) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: var(--zl-text) !important;
}

html[data-zl-theme="dark"] .zuc-hero .btn.zlg-surface:hover,
html[data-zl-theme="dark"] .zuc-panel .btn.zlg-surface:hover,
html[data-zl-theme="dark"] .zuc-topnav-link.zlg-surface:hover:not(.active),
html[data-zl-theme="dark"] .zuc-nav-link.zlg-surface:hover:not(.active),
html[data-zl-theme="dark"] .zuc-pager .zuc-page.zlg-surface:hover:not(.is-current) {
    background-color: rgba(255, 255, 255, .055) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

/* 用户中心的卡片悬停不再提亮外缘：这一页全是大面积卡片，鼠标扫过时
   原来那圈内高光（inset 0 0 26px 白色）+ 抬升投影看起来就像卡片被框了
   一圈亮边，而卡片本身不可点，容易让人误以为有操作。
   下面两条把悬停值分别钉回各自「静止态」的阴影，边缘与投影全程不变。 */
.zuc-body .card.zuc-hero.zlg-surface:hover,
.zuc-body .card.zuc-panel.zlg-surface:hover,
.zuc-body .card.zuc-guest.zlg-surface:hover {
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 4px 14px -10px rgba(25, 49, 82, .32) !important;
}

/* 万一用户中心里出现不带 .zuc-* 的普通 .card，也要保持它自己的静止态。 */
.zuc-body .card.zlg-surface:not(.zuc-hero):not(.zuc-panel):not(.zuc-guest):hover {
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        inset 0 0 24px -12px rgba(255, 255, 255, .75),
        var(--zlg-card-shadow) !important;
}

/* 玻璃卡内部不要再用一条不透明白色分隔层。 */
.zuc-nav-user {
    background: transparent !important;
}

/* 顶部导航是整页第一层玻璃，实度再高一档；内部未选项保持轻量，
   避免整条导航变成一块发灰的实底。overflow 保留主题的横向滚动。 */
.zuc-topnav.zlg-surface {
    background-color: rgba(255, 255, 255, .58) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

html[data-zl-theme="dark"] .zuc-topnav.zlg-surface {
    background-color: rgba(30, 35, 43, .76) !important;
}



/* 用户中心面板头 / 脚与卡片一致，去掉实色白条。 */
.zuc-panel.zlg-surface > .zuc-panel-head {
    border-color: var(--zlg-card-ring) !important;
    background-color: rgba(255, 255, 255, .08) !important;
}

html[data-zl-theme="dark"] .zuc-panel.zlg-surface > .zuc-panel-head {
    background-color: rgba(255, 255, 255, .02) !important;
}

/* 列表缩略图、快捷入口图标与分类图标：不加描边，避免图片被
   “框起来”后显得比正文更重。 */
.zthread-thumb.zlg-surface,
.zlist-thumb.zlg-surface,
.zquick-img.zlg-surface,
.zlink-icon.zlg-surface {
    border-radius: 10px !important;
    box-shadow:
        0 6px 18px -12px rgba(25, 49, 82, .36),
        inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
}

/* 用户中心背景：玻璃需要一点明暗差才有体积感。
   这里直接用 ::before 固定在视口，不依赖 #body 的层级或容器宽度；
   淡蓝 / 暖光 + 斜向底色让半透明卡片有可观察的折射差。 */
.zuc-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 132, 255, .12), transparent 36%),
        radial-gradient(circle at 88% 12%, rgba(238, 174, 97, .11), transparent 30%),
        linear-gradient(160deg, #f3f8ff 0%, #eef3f9 48%, #f5f7fa 100%);
}

html[data-zl-theme="dark"] .zuc-body::before {
    background:
        radial-gradient(circle at 12% 0%, rgba(37, 126, 216, .2), transparent 36%),
        radial-gradient(circle at 88% 12%, rgba(216, 134, 65, .13), transparent 30%),
        linear-gradient(160deg, #171d26 0%, #11151b 54%, #151a20 100%);
}

/* 侧栏卡片的表头原来用“浅蓝 → 白”渐变，叠在玻璃上会像一条实白。
   这里统一改成与卡片同源的半透明层，只保留底部细线。 */
.card.zlg-surface > .card-header,
.card-site-info.zlg-surface > .card-header,
.card-search.zlg-surface > .card-header,
.card-calendar.zlg-surface > .card-header,
.card-links.zlg-surface > .card-header,
.card-tags.zlg-surface > .card-header,
.card-blogger.zlg-surface > .card-header {
    border-bottom-color: var(--zlg-card-ring) !important;
    background-image: none !important;
    background-color: rgba(255, 255, 255, .14) !important;
}

html[data-zl-theme="dark"] .card.zlg-surface > .card-header,
html[data-zl-theme="dark"] .card-site-info.zlg-surface > .card-header,
html[data-zl-theme="dark"] .card-search.zlg-surface > .card-header,
html[data-zl-theme="dark"] .card-calendar.zlg-surface > .card-header,
html[data-zl-theme="dark"] .card-links.zlg-surface > .card-header,
html[data-zl-theme="dark"] .card-tags.zlg-surface > .card-header,
html[data-zl-theme="dark"] .card-blogger.zlg-surface > .card-header {
    background-color: rgba(255, 255, 255, .035) !important;
}

/* 侧栏日历：星期行和已发文日期也使用玻璃色，而不是白 / 浅灰实块。 */
.zsidebar-calendar .calendar td.week.zlg-surface,
.zsidebar-calendar .calendar td.sun.zlg-surface {
    background-color: rgba(255, 255, 255, .18) !important;
    border: 1px solid var(--zlg-card-ring) !important;
    box-shadow: inset 0 1px 0 var(--zlg-card-edge) !important;
}

.zsidebar-calendar .calendar td.day2.zlg-surface {
    background-color: var(--zl-primary-soft) !important;
    border: 1px solid var(--zl-primary-soft-4) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

/* 侧栏链接行：不再使用白底卡片，改为轻量透明行。 */
.zlink-row.zlg-surface {
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.zlink-row.zlg-surface:hover {
    border-color: var(--zlg-card-ring) !important;
    background-color: rgba(255, 255, 255, .26) !important;
}

html[data-zl-theme="dark"] .zlink-row.zlg-surface:hover {
    background-color: rgba(255, 255, 255, .05) !important;
}

/* 侧栏个人资料头图：原来是一整块白色渐变，改为透明层，
   保留头像光晕但不再盖住底层玻璃。 */
.blogger-hero.zlg-surface {
    background-image:
        radial-gradient(circle at 86% 4%, rgba(0, 132, 255, .12), transparent 34%),
        linear-gradient(165deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)) !important;
}

.blogger-hero.zlg-surface .blogger-avatar img {
    border-color: var(--zlg-card-edge) !important;
}

/* 侧栏分类 / 标签 / 链接卡等表头已统一透明，这里补上卡片体本身的
   半透明层次，避免内容区还是白色实底。 */
.card-site-info.zlg-surface > .card-body,
.card-site-info.zlg-surface > .m-3,
.card-site-info.zlg-surface > .zstats,
.card-site-info.zlg-surface > .zlink-body,
.card-site-info.zlg-surface > .ztag-ball {
    background-color: transparent !important;
}

/* 侧栏内部容器由 JS 标记为 zlg-surface 后，不能再用“卡片级”描边
   和投影套一层；它们只负责透明，不制造第二层玻璃边界。 */
#body > .container > .row > .aside .blogger-hero.zlg-surface,
#body > .container > .row > .aside .zstats.zlg-surface,
#body > .container > .row > .aside .zlink-body.zlg-surface,
#body > .container > .row > .aside .card-site-info > .card-body.zlg-surface,
#body > .container > .row > .aside .card-site-info > .m-3.zlg-surface {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 用户中心所有卡片 / 统计块 / 面板的表头、页脚、列表行：
   保持透明，不让内部默认白底再切出一层。 */
.zuc-panel.zlg-surface .zuc-panel-body,
.zuc-panel.zlg-surface .zuc-item,
.zuc-stat.zlg-surface,
.zuc-nav.zlg-surface .zuc-nav-user,
.zuc-nav.zlg-surface .zuc-nav-list {
    background-color: transparent !important;
}

.zuc-panel.zlg-surface .zuc-item {
    border-color: var(--zlg-card-ring) !important;
}

/* 通用侧栏 widget：有些后台组件不带 .card，只有自己的白底。 */
.widget.zlg-surface,
.sidebar-widget.zlg-surface,
.widget-box.zlg-surface,
.sidebar-box.zlg-surface,
.zsidebar-box.zlg-surface,
.card-widget.zlg-surface {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 14px !important;
    background-color: var(--zlg-card-fill) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        inset 0 0 24px -12px rgba(255, 255, 255, .75),
        var(--zlg-card-shadow) !important;
}

.widget.zlg-surface > .widget-title,
.sidebar-widget.zlg-surface > .widget-title,
.widget-box.zlg-surface > .widget-title,
.sidebar-box.zlg-surface > .widget-title,
.zsidebar-box.zlg-surface > .widget-title {
    background-image: none !important;
    background-color: rgba(255, 255, 255, .12) !important;
    border-bottom: 1px solid var(--zlg-card-ring) !important;
}

html[data-zl-theme="dark"] .widget.zlg-surface > .widget-title,
html[data-zl-theme="dark"] .sidebar-widget.zlg-surface > .widget-title,
html[data-zl-theme="dark"] .widget-box.zlg-surface > .widget-title,
html[data-zl-theme="dark"] .sidebar-box.zlg-surface > .widget-title,
html[data-zl-theme="dark"] .zsidebar-box.zlg-surface > .widget-title {
    background-color: rgba(255, 255, 255, .03) !important;
}

/* 侧栏日历表格不套卡片边框，只保持透明和日期胶囊。 */
.zsidebar-calendar .calendar.zlg-surface,
.zsidebar-calendar .calendartop.zlg-surface {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 阅读全文按钮：玻璃底色 + 清晰文字，展开箭头跟随状态旋转。 */
.zpost-collapse-btn.zl-liquid {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 999px !important;
    color: var(--zl-text-sub) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 6px 18px -10px rgba(25, 49, 82, .34) !important;
}

.zpost-collapse-btn.zl-liquid:hover {
    color: #0084ff !important;
    border-color: var(--zl-primary-soft-4) !important;
}

.zpost-collapse-actions.zlg-surface {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 版权说明：不再用整块实白底，改成与正文同一层玻璃。 */
.zcopyright.zlg-surface {
    border: 1px solid var(--zlg-card-ring) !important;
    border-left: 3px solid #0084ff !important;
    border-radius: 12px !important;
    background-color: var(--zlg-card-fill) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 8px 22px -14px rgba(25, 49, 82, .28) !important;
}

.zcopyright.zlg-surface .zcopyright-meta {
    border-top-color: var(--zlg-card-ring) !important;
}

/* 上下篇：容器透明，左右两张卡片各自是一块玻璃。 */
.neighbor-log.zlg-surface,
.neighbor-log.zlg-surface > .prev-log,
.neighbor-log.zlg-surface > .next-log {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.neighbor-log.zlg-surface > .prev-log,
.neighbor-log.zlg-surface > .next-log {
    flex: 1 1 260px;
    min-width: 0;
}

.neighbor-link.zlg-surface {
    height: auto !important;
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 12px !important;
    background-color: var(--zlg-card-fill) !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 8px 22px -14px rgba(25, 49, 82, .28) !important;
}

@media (max-width: 700px) {
    .neighbor-log,
    .neighbor-log.zlg-surface {
        height: auto !important;
        min-height: 0 !important;
        align-items: flex-start;
    }

    .neighbor-log > .prev-log,
    .neighbor-log > .next-log {
        flex: 0 0 auto !important;
        width: 100%;
    }

    .neighbor-link.zlg-surface {
        height: auto !important;
        min-height: 0 !important;
    }
}

.neighbor-link.zlg-surface:hover {
    border-color: var(--zl-primary-soft-4) !important;
    color: #0084ff !important;
    box-shadow:
        inset 0 1px 0 0 var(--zlg-card-edge),
        0 10px 26px -12px rgba(0, 132, 255, .26) !important;
}

.neighbor-thumb.zlg-surface {
    background: var(--zlg-card-fill) !important;
}

/* 正文折叠遮罩跟随玻璃卡片底色，不再用纯白渐变。 */
.zpost-collapse-fade.zlg-surface {
    background: linear-gradient(to bottom, transparent, var(--zlg-card-fill-strong) 92%) !important;
}

/* ============================================================
 * 写文章：标题、参数栏与模态框
 *
 * 标题框和模态框里的输入必须“看得清”，不能只追求透明。
 * 因此输入控件使用较实的玻璃底 + 明确描边 + 聚焦品牌蓝，
 * 外层面板才使用折射玻璃。
 * ============================================================ */
.zwrite-title.zl-liquid,
.zwrite-title.zlg-surface {
    height: auto !important;
    padding: 12px 15px !important;
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 10px !important;
    color: var(--zl-text) !important;
    background-color: rgba(255, 255, 255, .68) !important;
    background-image: none !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .95),
        0 4px 14px -10px rgba(25, 49, 82, .28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.zwrite-title.zl-liquid:focus,
.zwrite-title.zlg-surface:focus {
    border-color: #0084ff !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .95),
        0 0 0 3px rgba(0, 132, 255, .13) !important;
}

html[data-zl-theme="dark"] .zwrite-title.zl-liquid,
html[data-zl-theme="dark"] .zwrite-title.zlg-surface {
    background-color: rgba(36, 43, 53, .92) !important;
    border-color: rgba(255, 255, 255, .15) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .12),
        0 4px 14px -10px rgba(0, 0, 0, .5) !important;
}

/* 标题以外的写文章表单：使用不透明输入底，避免模态框文字透进输入框。 */
.zwrite .form-control.zl-liquid,
.zwrite .form-control.zlg-surface,
.zwrite .custom-select.zl-liquid,
.zwrite .custom-select.zlg-surface,
.zwrite select.zlg-surface,
.zwrite textarea.form-control.zl-liquid,
.zwrite textarea.form-control.zlg-surface,
.zwrite .input-group-text.zlg-surface {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 8px !important;
    color: var(--zl-text) !important;
    background-color: rgba(255, 255, 255, .78) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-zl-theme="dark"] .zwrite .form-control.zl-liquid,
html[data-zl-theme="dark"] .zwrite .form-control.zlg-surface,
html[data-zl-theme="dark"] .zwrite .custom-select.zl-liquid,
html[data-zl-theme="dark"] .zwrite .custom-select.zlg-surface,
html[data-zl-theme="dark"] .zwrite select.zlg-surface,
html[data-zl-theme="dark"] .zwrite textarea.form-control.zl-liquid,
html[data-zl-theme="dark"] .zwrite textarea.form-control.zlg-surface,
html[data-zl-theme="dark"] .zwrite .input-group-text.zlg-surface {
    background-color: rgba(36, 43, 53, .94) !important;
    border-color: rgba(255, 255, 255, .15) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.zwrite .form-control.zl-liquid:focus,
.zwrite .form-control.zlg-surface:focus,
.zwrite .custom-select.zl-liquid:focus,
.zwrite .custom-select.zlg-surface:focus,
.zwrite textarea.form-control.zl-liquid:focus,
.zwrite textarea.form-control.zlg-surface:focus {
    border-color: #0084ff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 0 0 3px rgba(0, 132, 255, .13) !important;
}

/* 模态框：一层清楚的玻璃面板，内部标题、正文、页脚不再各自加白底。 */
.modal-content.zl-liquid {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 14px !important;
    background-color: rgba(255, 255, 255, .82) !important;
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .02)) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .95),
        0 18px 48px -14px rgba(15, 23, 42, .3) !important;
}

html[data-zl-theme="dark"] .modal-content.zl-liquid {
    background-color: rgba(32, 38, 47, .92) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .1),
        0 18px 48px -14px rgba(0, 0, 0, .7) !important;
}

.modal-content.zl-liquid > .modal-header,
.modal-content.zl-liquid > .modal-body,
.modal-content.zl-liquid > .modal-footer {
    background: transparent !important;
}

.modal-content.zl-liquid > .modal-header {
    border-bottom: 1px solid var(--zlg-card-ring) !important;
}

.modal-content.zl-liquid > .modal-footer {
    border-top: 1px solid var(--zlg-card-ring) !important;
}

.modal-content.zl-liquid .modal-title {
    color: var(--zl-text) !important;
}

.modal-content.zl-liquid .modal-body {
    color: var(--zl-text-sub) !important;
}

/* 标题前缀、悬赏、分享、隐藏内容等弹窗里的输入和提示块。 */
.modal-content.zl-liquid .form-control.zlg-surface,
.modal-content.zl-liquid .form-control.zlg-surface:not(.zwrite-title),
.modal-content.zl-liquid .form-control.zl-liquid,
.modal-content.zl-liquid .custom-select.zlg-surface,
.modal-content.zl-liquid .custom-select.zl-liquid,
.modal-content.zl-liquid textarea {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 8px !important;
    color: var(--zl-text) !important;
    background: rgba(255, 255, 255, .9) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-zl-theme="dark"] .modal-content.zl-liquid .form-control.zlg-surface,
html[data-zl-theme="dark"] .modal-content.zl-liquid .form-control.zl-liquid,
html[data-zl-theme="dark"] .modal-content.zl-liquid .custom-select.zlg-surface,
html[data-zl-theme="dark"] .modal-content.zl-liquid .custom-select.zl-liquid,
html[data-zl-theme="dark"] .modal-content.zl-liquid textarea {
    background: rgba(24, 30, 38, .96) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

.modal-content.zl-liquid .zprefix-preview,
.modal-content.zl-liquid .zbounty-note,
.modal-content.zl-liquid .alert {
    border-color: var(--zlg-card-ring) !important;
    background-color: rgba(255, 255, 255, .42) !important;
}

/* 写文章侧栏的选择框、输入框统一成高对比实底；
   即使脚本给了 zl-liquid，也不使用半透明背景图。 */
.zwrite aside .form-control,
.zwrite aside .form-control.zl-liquid,
.zwrite aside .form-control.zlg-surface,
.zwrite aside .custom-select,
.zwrite aside .custom-select.zl-liquid,
.zwrite aside .custom-select.zlg-surface,
.zwrite aside textarea,
.zwrite aside textarea.zl-liquid,
.zwrite .zwrite-side-body .form-control,
.zwrite .zwrite-side-body .form-control.zl-liquid,
.zwrite .zwrite-side-body .form-control.zlg-surface {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 8px !important;
    color: var(--zl-text) !important;
    background: rgba(255, 255, 255, .92) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-zl-theme="dark"] .zwrite aside .form-control,
html[data-zl-theme="dark"] .zwrite aside .form-control.zl-liquid,
html[data-zl-theme="dark"] .zwrite aside .form-control.zlg-surface,
html[data-zl-theme="dark"] .zwrite aside .custom-select,
html[data-zl-theme="dark"] .zwrite aside .custom-select.zl-liquid,
html[data-zl-theme="dark"] .zwrite aside .custom-select.zlg-surface,
html[data-zl-theme="dark"] .zwrite aside textarea,
html[data-zl-theme="dark"] .zwrite aside textarea.zl-liquid,
html[data-zl-theme="dark"] .zwrite .zwrite-side-body .form-control,
html[data-zl-theme="dark"] .zwrite .zwrite-side-body .form-control.zl-liquid,
html[data-zl-theme="dark"] .zwrite .zwrite-side-body .form-control.zlg-surface {
    background: rgba(30, 37, 46, .96) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: var(--zl-text) !important;
}

.zwrite aside .form-control:focus,
.zwrite aside .custom-select:focus,
.zwrite aside textarea:focus {
    border-color: #0084ff !important;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, .13) !important;
}

/* 二级菜单：轻量玻璃，不使用 backdrop-filter。
   它在导航项悬停时显示，透明度和可见性必须完全由主题控制。 */
.znav-submenu.zlg-surface {
    border: 1px solid var(--zlg-card-ring) !important;
    border-radius: 10px !important;
    background-color: rgba(255, 255, 255, .88) !important;
    background-image: none !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .9),
        0 12px 30px -14px rgba(18, 35, 62, .28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-zl-theme="dark"] .znav-submenu.zlg-surface {
    background-color: rgba(32, 39, 48, .94) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .1),
        0 12px 30px -14px rgba(0, 0, 0, .6) !important;
}

/* 文章 / 单页主标题 h1：只继承主题文字色，不套用正文 h1 的装饰。 */
h1.zarticle-title,
h1.zpost-page-title {
    color: var(--zl-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 有封面头图时标题仍为白色；与 emlog-bridge.css 的头图层规则保持一致。 */
.media-body.zarticle-hero h1.zarticle-title {
    color: #fff !important;
}

h1.zarticle-title::before,
h1.zpost-page-title::before {
    content: none !important;
    display: none !important;
}

/* ---------- 分享面板的小三角：跟着玻璃同色 ---------- */
/* .zshare-dropdown::after 原本写死 var(--zl-surface)，玻璃接管后底已半透明，
   那个实色小三角会像一块补丁。JS 把当前玻璃底色写进 --zlg-tint。 */
.zshare-dropdown.zl-liquid::after {
    background: var(--zlg-tint, var(--zl-surface)) !important;
    border-color: transparent !important;
}

/* ---------- 暗色：白色高光必须收敛 ---------- */
/* 亮暗切换只换底色与描边强度，不重算贴图（JS 那边用 MutationObserver 同步底色）。 */
html[data-zl-theme="dark"] .zl-liquid {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .2),
        inset 0 -1px 0 0 rgba(255, 255, 255, .07),
        inset 0 0 0 1px rgba(255, 255, 255, .1),
        inset 0 0 24px -8px rgba(255, 255, 255, .14),
        0 6px 20px rgba(0, 0, 0, .36) !important;
}

html[data-zl-theme="dark"] .zl-liquid:hover {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .26),
        inset 0 -1px 0 0 rgba(255, 255, 255, .09),
        inset 0 0 0 1px rgba(255, 255, 255, .15),
        inset 0 0 28px -6px rgba(255, 255, 255, .18),
        0 10px 28px rgba(0, 0, 0, .44) !important;
}

html[data-zl-theme="dark"] .zl-liquid:active {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .15),
        inset 0 -6px 14px rgba(0, 0, 0, .36),
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 2px 8px rgba(0, 0, 0, .32) !important;
}

html[data-zl-theme="dark"] #header > .zlg-bar-layer {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .14),
        inset 0 -1px 0 0 rgba(255, 255, 255, .08),
        0 1px 0 rgba(0, 0, 0, .5),
        0 10px 28px -14px rgba(0, 0, 0, .6) !important;
}

html[data-zl-theme="dark"] #header .zl-liquid:not(.zlg-bar-layer) {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, .14),
        inset 0 0 0 1px rgba(255, 255, 255, .07),
        0 1px 3px rgba(0, 0, 0, .3) !important;
}

/* ---------- 裁切：让内容跟着玻璃的圆角走 ---------- */
/* .header-dropdown 是 .card，里面是 card-header + 列表；不裁的话卡头的
   浅色背景会溢出玻璃圆角，四个角上露出方形。 */
.dropdown-menu.zl-liquid,
.modal-content.zl-liquid,
.header-dropdown.zl-liquid,
.zshare-dropdown.zl-liquid,
.ztag-suggest.zl-liquid,
.znav-search-form.zl-liquid {
    overflow: hidden;
}

/* 主题旧样式把下拉菜单的 li 设成 50% 宽并左浮动；玻璃面板内部
   需要恢复纵向列表，否则每个菜单项会缩成半格并露出白色底块。 */
.header-dropdown.zl-liquid li {
    float: none;
    width: 100%;
    padding: 0;
}

.header-dropdown.zl-liquid li > a {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--zl-text-sub);
}

.header-dropdown.zl-liquid li > a:hover {
    color: var(--zl-text);
    background: var(--zl-primary-soft);
}

/* ---------- 不支持 backdrop-filter: url() 的浏览器 ---------- */
/* JS 在那类浏览器上整段不启动，.zl-liquid 也就不会被加上去。
   这里再兜一道：万一元素已被标记，去掉带方向的立体感，退成中性的玻璃体。 */
html:not([data-zl-liquid="on"]) .zl-liquid {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .24),
        0 6px 20px rgba(15, 23, 42, .16) !important;
}