/* ==========================================================================
   pansou 主题中心共享样式
   首页 / 搜索页 / 详情页三页共用：模式、色调、背景、玻璃质感、特效、面板 UI
   配套脚本：/views/index/pansou/common/static/js/theme-panel.js
   ========================================================================== */

/* ---------- 设计变量（亮色基准） ---------- */
:root {
    --c-primary: #4f6ef7;
    --c-primary-hover: #3b5de7;
    --c-primary-light: #eef1ff;
    --c-primary-ring: rgba(79, 110, 247, .14);
    --c-bg: #f5f6f8;
    --c-card: #ffffff;
    --c-card-rgb: 255, 255, 255;
    --c-text: #1a1a2e;
    --c-text2: #4a4a6a;
    --c-text3: #8888a0;
    --c-border: #e8e8f0;
    --c-nav-bg: rgba(255, 255, 255, 0.92);
    --c-focus-bg: #ffffff;
    --c-hover-bg: #f5f6f7;
    --c-folder-a: #a8c0ff;
    --c-folder-b: #7b9ff5;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
    --max-w: 900px;
    /* 主题中心运行时变量 */
    --glass-solid: 0.78;
    --tp-bg-dim: 0.3;
}

html[data-theme="dark"] {
    --c-primary: #6d87ff;
    --c-primary-hover: #8aa0ff;
    --c-primary-light: rgba(109, 135, 255, 0.16);
    --c-primary-ring: rgba(109, 135, 255, .3);
    --c-bg: #14151a;
    --c-card: #1e2027;
    --c-card-rgb: 30, 32, 39;
    --c-text: #e8e8f0;
    --c-text2: #b4b4c6;
    --c-text3: #7c7c92;
    --c-border: #2c2e38;
    --c-nav-bg: rgba(30, 32, 39, 0.92);
    --c-focus-bg: #262832;
    --c-hover-bg: #262832;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ---------- 预设色调（浅） ---------- */
html[data-accent="sky"]  { --c-primary:#0ea5e9; --c-primary-hover:#0284c7; --c-primary-light:#e0f2fe; --c-primary-ring:rgba(14,165,233,.14); --c-folder-a:#a3d9f5; --c-folder-b:#6fc0ee; }
html[data-accent="teal"] { --c-primary:#14b8a6; --c-primary-hover:#0d9488; --c-primary-light:#ccfbf1; --c-primary-ring:rgba(20,184,166,.14); --c-folder-a:#a3e0d6; --c-folder-b:#6fcbbd; }
html[data-accent="pink"] { --c-primary:#ec4899; --c-primary-hover:#db2777; --c-primary-light:#fce7f3; --c-primary-ring:rgba(236,72,153,.14); --c-folder-a:#f5b8d0; --c-folder-b:#ee8fbf; }
html[data-accent="amber"]{ --c-primary:#f59e0b; --c-primary-hover:#d97706; --c-primary-light:#fef3c7; --c-primary-ring:rgba(245,158,11,.16); --c-folder-a:#f8d9a0; --c-folder-b:#f3c168; }
/* ---------- 预设色调（深） ---------- */
html[data-theme="dark"][data-accent="sky"]  { --c-primary:#38bdf8; --c-primary-hover:#7dd3fc; --c-primary-light:rgba(56,189,248,.16); --c-primary-ring:rgba(56,189,248,.3); }
html[data-theme="dark"][data-accent="teal"] { --c-primary:#2dd4bf; --c-primary-hover:#5eead4; --c-primary-light:rgba(45,212,191,.16); --c-primary-ring:rgba(45,212,191,.3); }
html[data-theme="dark"][data-accent="pink"] { --c-primary:#f472b6; --c-primary-hover:#f9a8d4; --c-primary-light:rgba(244,114,182,.16); --c-primary-ring:rgba(244,114,182,.3); }
html[data-theme="dark"][data-accent="amber"]{ --c-primary:#fbbf24; --c-primary-hover:#fcd34d; --c-primary-light:rgba(251,191,36,.16); --c-primary-ring:rgba(251,191,36,.3); }

/* ---------- 动态渐变背景 ---------- */
/* 动态渐变同样放独立 fixed 层，规避 backdrop-filter 采样画布背景的接缝伪影 */
html[data-bg="on"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(45% 55% at 15% 20%, var(--c-primary-light) 0%, transparent 60%),
        radial-gradient(40% 50% at 85% 25%, var(--c-primary-light) 0%, transparent 60%),
        radial-gradient(50% 60% at 50% 95%, var(--c-primary-light) 0%, transparent 60%);
    background-size: 180% 180%;
    animation: bgflow 22s ease-in-out infinite alternate;
}
@keyframes bgflow {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

/* ---------- 自定义图片背景（本地压缩图或外链 URL） ---------- */
/* 背景图用独立 fixed 层（同视频模式），不写在 body 上：
   body 背景会传播到画布且 attachment:fixed，Chrome 的 backdrop-filter
   采样它时会在 GPU 瓦片边界产生矩形接缝与白线伪影（弹窗玻璃上的白条/白块）。 */
html[data-bg="image"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 0, 0, var(--tp-bg-dim)), rgba(0, 0, 0, var(--tp-bg-dim))),
        var(--tp-bg-img, none);
    background-size: cover, cover;
    background-position: center, center;
}

/* ---------- 自定义视频背景层（JS 注入） ---------- */
#tp-bg-wrap {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
#tp-bg-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#tp-bg-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--tp-bg-dim));
}

/* ---------- 玻璃透明感 ---------- */
/* 玻璃开启且背景为"关闭"时：铺一层柔和主题光斑，让模糊/饱和有内容可"透"，
   否则纯色底上 backdrop-filter 等于无效果 */
html[data-glass="on"][data-bg="off"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(42% 52% at 18% 16%, var(--c-primary-light) 0%, transparent 62%),
        radial-gradient(38% 48% at 84% 22%, var(--c-primary-light) 0%, transparent 62%),
        radial-gradient(46% 56% at 50% 96%, var(--c-primary-light) 0%, transparent 62%);
}
html[data-glass="on"] .top-nav,
html[data-glass="on"] .filter-inner,
html[data-glass="on"] .result-item,
html[data-glass="on"] .empty-box,
html[data-glass="on"] .page-btn,
html[data-glass="on"] .back-top,
html[data-glass="on"] .res-card,
html[data-glass="on"] .related-card,
html[data-glass="on"] .notice-card,
html[data-glass="on"] .side-card,
html[data-glass="on"] .search-box,
html[data-glass="on"] .suggestions,
html[data-glass="on"] .theme-panel {
    background: rgba(var(--c-card-rgb), var(--glass-solid));
    /* 模糊随不透明度联动：越透越清澈（低档≈无模糊），越高越磨砂 */
    -webkit-backdrop-filter: blur(calc(34px * var(--glass-solid))) saturate(1.7);
    backdrop-filter: blur(calc(34px * var(--glass-solid))) saturate(1.7);
}
/* 玻璃材质：半透明高光描边，替代生硬的实色边框（不加内高光，避免顶部白线） */
html[data-glass="on"] .result-item,
html[data-glass="on"] .res-card,
html[data-glass="on"] .related-card,
html[data-glass="on"] .notice-card,
html[data-glass="on"] .side-card,
html[data-glass="on"] .search-box,
html[data-glass="on"] .empty-box,
html[data-glass="on"] .suggestions {
    border-color: rgba(255, 255, 255, .55);
}
/* 声明正文框：玻璃模式下同步半透，灰底实心块不再盖住卡片磨砂；
   发丝描边透明化，同搜索凹槽的半透黑"下陷"观感 */
html[data-glass="on"] .notice-box {
    background: rgba(0, 0, 0, .05);
    border-color: transparent;
}
html[data-theme="dark"][data-glass="on"] .notice-box {
    background: rgba(255, 255, 255, .06);
}
/* 玻璃模式：按钮组件同步半透（立即访问/复制分享/确定访问/更多搜索），
   hover 态加浓回实色保证反馈；需带 hover 规则是因为上方 (0,2,1) 选择器
   会压过模板内 (0,2,0) 的默认 hover 态 */
html[data-glass="on"] .btn-primary {
    background: color-mix(in srgb, var(--c-primary) 72%, transparent);
}
html[data-glass="on"] .btn-primary:hover {
    background: color-mix(in srgb, var(--c-primary) 92%, transparent);
}
html[data-glass="on"] .btn-outline {
    background: rgba(var(--c-card-rgb), .45);
    border-color: transparent;
}
html[data-glass="on"] .btn-outline:hover {
    background: var(--c-primary-light);
    border-color: var(--c-primary);
}
html[data-theme="dark"][data-glass="on"] .result-item,
html[data-theme="dark"][data-glass="on"] .res-card,
html[data-theme="dark"][data-glass="on"] .related-card,
html[data-theme="dark"][data-glass="on"] .notice-card,
html[data-theme="dark"][data-glass="on"] .side-card,
html[data-theme="dark"][data-glass="on"] .search-box,
html[data-theme="dark"][data-glass="on"] .empty-box,
html[data-theme="dark"][data-glass="on"] .suggestions {
    border-color: rgba(255, 255, 255, .12);
}
html[data-glass="on"] .dialogUrlBox > .dialogUrl {
    background: rgba(var(--c-card-rgb), var(--glass-solid));
    -webkit-backdrop-filter: blur(calc(34px * var(--glass-solid))) saturate(1.5);
    backdrop-filter: blur(calc(34px * var(--glass-solid))) saturate(1.5);
}
/* 移动端底部抽屉的弹窗外壳同样跟随玻璃质感（覆盖模板内 !important 底色） */
html[data-glass="on"] .dialogUrlBox .dialogUrl {
    background: rgba(var(--c-card-rgb), var(--glass-solid)) !important;
}

/* ---------- 特效：列表入场动画 ---------- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes tp-rise {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: none; }
    }
    html[data-effect-enter="on"] .result-item,
    html[data-effect-enter="on"] .res-card,
    html[data-effect-enter="on"] .related-card,
    html[data-effect-enter="on"] .notice-card,
    html[data-effect-enter="on"] .side-card {
        animation: tp-rise .5s ease both;
    }
    html[data-effect-enter="on"] .result-item:nth-child(2) { animation-delay: .04s; }
    html[data-effect-enter="on"] .result-item:nth-child(3) { animation-delay: .08s; }
    html[data-effect-enter="on"] .result-item:nth-child(4) { animation-delay: .12s; }
    html[data-effect-enter="on"] .result-item:nth-child(5) { animation-delay: .16s; }
    html[data-effect-enter="on"] .result-item:nth-child(6) { animation-delay: .2s; }
    html[data-effect-enter="on"] .result-item:nth-child(7) { animation-delay: .24s; }
    html[data-effect-enter="on"] .result-item:nth-child(8) { animation-delay: .28s; }
    html[data-effect-enter="on"] .result-item:nth-child(9) { animation-delay: .32s; }
    html[data-effect-enter="on"] .result-item:nth-child(10) { animation-delay: .36s; }

    /* 特效：卡片 3D 悬浮 */
    html[data-effect-tilt="on"] .result-item { transition: transform .18s ease, box-shadow .18s ease, border-color .2s; }
    html[data-effect-tilt="on"] .result-item:hover {
        transform: translateY(-3px) perspective(700px) rotateX(3deg);
        box-shadow: var(--shadow-lg);
    }
    html[data-effect-tilt="on"] .res-card { transition: transform .18s ease, box-shadow .18s ease; }
    html[data-effect-tilt="on"] .res-card:hover {
        transform: translateY(-2px) perspective(900px) rotateX(1.5deg);
        box-shadow: var(--shadow-lg);
    }

    /* 特效：真 3D 跟随倾斜（JS 写 --tp-rx/--tp-ry/--tp-gx/--tp-gy，悬停期间生效） */
    html[data-effect-tilt3d="on"] .result-item,
    html[data-effect-tilt3d="on"] .res-card,
    html[data-effect-tilt3d="on"] .related-card,
    html[data-effect-tilt3d="on"] .notice-card,
    html[data-effect-tilt3d="on"] .side-card,
    html[data-effect-tilt3d="on"] .dialogUrlBox > .dialogUrl {
        position: relative;
        transition: transform .25s ease, box-shadow .25s ease;
    }
    html[data-effect-tilt3d="on"] .result-item.tp-tilt3d,
    html[data-effect-tilt3d="on"] .res-card.tp-tilt3d,
    html[data-effect-tilt3d="on"] .related-card.tp-tilt3d,
    html[data-effect-tilt3d="on"] .notice-card.tp-tilt3d,
    html[data-effect-tilt3d="on"] .side-card.tp-tilt3d,
    html[data-effect-tilt3d="on"] .dialogUrlBox > .dialogUrl.tp-tilt3d {
        transform: perspective(800px) rotateX(var(--tp-rx, 0deg)) rotateY(var(--tp-ry, 0deg));
        transition: transform .1s ease-out, box-shadow .25s ease;
        box-shadow: var(--shadow-lg);
        will-change: transform;
    }
    /* 高光随光标位置移动：白色光核 + 主题色晕 */
    html[data-effect-tilt3d="on"] .tp-tilt3d::before {
        content: '';
        position: absolute; inset: 0;
        border-radius: inherit;
        background:
            radial-gradient(160px circle at var(--tp-gx, 50%) var(--tp-gy, 50%), rgba(255, 255, 255, .35), transparent 70%),
            radial-gradient(320px circle at var(--tp-gx, 50%) var(--tp-gy, 50%), var(--c-primary-ring), transparent 65%);
        opacity: .6;
        pointer-events: none;
        z-index: 1;
    }
}

/* 特效：鼠标拖尾粒子 / 环境粒子共用画布（JS 注入） */
#tp-cursor-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483000;
    pointer-events: none;
}

/* 特效：卡片探照灯（JS 写 --tp-mx/--tp-my，光斑画在背景层不遮文字） */
html[data-effect-spot="on"] .result-item:hover,
html[data-effect-spot="on"] .res-card:hover,
html[data-effect-spot="on"] .related-card:hover,
html[data-effect-spot="on"] .notice-card:hover,
html[data-effect-spot="on"] .side-card:hover {
    background-image: radial-gradient(240px circle at var(--tp-mx, 50%) var(--tp-my, 50%), var(--c-primary-ring), transparent 70%);
}

/* 特效：点击波纹（JS 注入 .tp-ripple，宿主需裁剪溢出） */
html[data-effect-ripple="on"] .tp-pill,
html[data-effect-ripple="on"] .tp-card,
html[data-effect-ripple="on"] .tp-mini-btn,
html[data-effect-ripple="on"] .tp-reset,
html[data-effect-ripple="on"] .theme-btn,
html[data-effect-ripple="on"] .page-btn,
html[data-effect-ripple="on"] .hot-search-tag,
html[data-effect-ripple="on"] .result-item,
html[data-effect-ripple="on"] .res-card,
html[data-effect-ripple="on"] .related-card,
html[data-effect-ripple="on"] .notice-card,
html[data-effect-ripple="on"] .side-card,
html[data-effect-ripple="on"] .code-chip,
html[data-effect-ripple="on"] .link-cp,
html[data-effect-ripple="on"] .btn,
html[data-effect-ripple="on"] .nav-search-box button,
html[data-effect-ripple="on"] .search-box button,
html[data-effect-ripple="on"] .suggestion-item,
html[data-effect-ripple="on"] .resource-dialog-btn {
    position: relative;
    overflow: hidden;
}
/* back-top 是 fixed 定位（本身即可作为波纹包含块），
   不可进上组被 position:relative 覆盖，否则脱离视口锚点位移 */
html[data-effect-ripple="on"] .back-top { overflow: hidden; }
.tp-ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--c-primary-ring);
    transform: scale(0);
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    animation: tp-ripple-anim .6s ease-out forwards;
}
@keyframes tp-ripple-anim { to { transform: scale(2.6); opacity: 0; } }

/* 特效：卡片光泽扫过（纯 CSS，hover 时斜向光带扫过卡面） */
html[data-effect-sheen="on"] .result-item,
html[data-effect-sheen="on"] .res-card,
html[data-effect-sheen="on"] .related-card,
html[data-effect-sheen="on"] .notice-card,
html[data-effect-sheen="on"] .side-card {
    position: relative;
    overflow: hidden;
}
html[data-effect-sheen="on"] .result-item::after,
html[data-effect-sheen="on"] .res-card::after,
html[data-effect-sheen="on"] .related-card::after,
html[data-effect-sheen="on"] .notice-card::after,
html[data-effect-sheen="on"] .side-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -80%;
    width: 55%;
    height: 200%;
    background: linear-gradient(105deg, transparent 30%, var(--c-primary-ring) 50%, transparent 70%);
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--c-primary) 20%, transparent) 50%, transparent 70%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
    html[data-effect-sheen="on"] .result-item:hover::after,
    html[data-effect-sheen="on"] .res-card:hover::after,
    html[data-effect-sheen="on"] .related-card:hover::after,
    html[data-effect-sheen="on"] .notice-card:hover::after,
    html[data-effect-sheen="on"] .side-card:hover::after {
        opacity: 1;
        animation: tp-sheen .9s ease;
    }
    @keyframes tp-sheen {
        from { left: -80%; }
        to { left: 140%; }
    }
}

/* ==========================================================================
   主题设置面板 UI
   ========================================================================== */
.theme-wrap { position: relative; flex-shrink: 0; margin-left: auto; }
/* 首页无导航容器时，齿轮固定右上角 */
.tp-float-wrap { position: fixed; top: 16px; right: 16px; z-index: 1200; }

.theme-btn {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--c-border); background: var(--c-card);
    color: var(--c-text2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    box-shadow: var(--shadow);
}
.theme-btn:hover, .theme-btn.active {
    border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-light);
}
.theme-btn svg { width: 18px; height: 18px; }

.theme-panel {
    position: absolute; top: calc(100% + 12px); right: 0;
    width: 320px; max-width: calc(100vw - 24px);
    max-height: calc(100vh - 84px); overflow-y: auto;
    background: var(--c-card); border: 1px solid var(--c-border);
    border-radius: 16px; box-shadow: var(--shadow-lg);
    padding: 18px; display: none; z-index: 1300; text-align: left;
    color: var(--c-text);
}
.theme-panel.show { display: block; }
.tp-mask { display: none; } /* 仅移动端抽屉态显示 */
.tp-float-wrap .theme-panel { background: rgba(var(--c-card-rgb), .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

.tp-group + .tp-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.tp-title { font-size: 13px; font-weight: 700; color: var(--c-text); margin-bottom: 10px; }
.tp-cards { display: flex; gap: 8px; }
.tp-card {
    flex: 1; min-width: 0; border: 1.5px solid var(--c-border); background: var(--c-bg);
    border-radius: 12px; padding: 10px 4px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--c-text2); font-size: 12px; font-weight: 500; transition: all .15s;
}
.tp-card small { font-size: 10px; color: var(--c-text3); font-weight: 400; }
.tp-card svg { width: 18px; height: 18px; }
.tp-card:hover { border-color: var(--c-primary); }

.tp-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.sw {
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; position: relative; transition: transform .12s;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
    padding: 0; overflow: hidden;
}
.sw:hover { transform: scale(1.08); }
.sw-blue { background: #4f6ef7; } .sw-sky { background: #0ea5e9; }
.sw-teal { background: #14b8a6; } .sw-pink { background: #ec4899; }
.sw-amber { background: #f59e0b; }
/* 自定义色：未选色时显示彩虹环，选中后 JS 填充所选色 */
.sw-custom {
    background: conic-gradient(#f87171, #fbbf24, #34d399, #38bdf8, #a78bfa, #f472b6, #f87171);
}
.sw-custom input[type="color"] {
    position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px);
    opacity: 0; cursor: pointer; border: none; padding: 0;
}

/* 面板选项高亮（属性选择器，抗重建） */
html[data-mode="auto"] #themePanel [data-mode="auto"],
html[data-mode="light"] #themePanel [data-mode="light"],
html[data-mode="dark"] #themePanel [data-mode="dark"],
html[data-bg="off"] #themePanel [data-bg="off"],
html[data-bg="on"] #themePanel [data-bg="on"],
html[data-bg="image"] #themePanel [data-bg="image"],
html[data-bg="video"] #themePanel [data-bg="video"],
html[data-glass="on"] #themePanel [data-glass="on"],
html[data-glass="off"] #themePanel [data-glass="off"] {
    border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary); font-weight: 600;
}
html[data-mode="auto"] #themePanel [data-mode="auto"] small,
html[data-mode="light"] #themePanel [data-mode="light"] small,
html[data-mode="dark"] #themePanel [data-mode="dark"] small,
html[data-bg="off"] #themePanel [data-bg="off"] small,
html[data-bg="on"] #themePanel [data-bg="on"] small,
html[data-bg="image"] #themePanel [data-bg="image"] small,
html[data-bg="video"] #themePanel [data-bg="video"] small,
html[data-glass="on"] #themePanel [data-glass="on"] small,
html[data-glass="off"] #themePanel [data-glass="off"] small { color: var(--c-primary); }

html[data-accent="blue"] #themePanel .sw-blue,
html[data-accent="sky"] #themePanel .sw-sky,
html[data-accent="teal"] #themePanel .sw-teal,
html[data-accent="pink"] #themePanel .sw-pink,
html[data-accent="amber"] #themePanel .sw-amber,
html[data-accent="custom"] #themePanel .sw-custom {
    border-color: var(--c-text);
}
html[data-accent="blue"] #themePanel .sw-blue::after,
html[data-accent="sky"] #themePanel .sw-sky::after,
html[data-accent="teal"] #themePanel .sw-teal::after,
html[data-accent="pink"] #themePanel .sw-pink::after,
html[data-accent="amber"] #themePanel .sw-amber::after,
html[data-accent="custom"] #themePanel .sw-custom::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

html[data-effect-cursor="on"] #themePanel [data-effect="cursor"],
html[data-effect-tilt="on"] #themePanel [data-effect="tilt"],
html[data-effect-tilt3d="on"] #themePanel [data-effect="tilt3d"],
html[data-effect-enter="on"] #themePanel [data-effect="enter"],
html[data-effect-spot="on"] #themePanel [data-effect="spot"],
html[data-effect-sheen="on"] #themePanel [data-effect="sheen"],
html[data-effect-ripple="on"] #themePanel [data-effect="ripple"],
html[data-effect-ambient="on"] #themePanel [data-effect="ambient"] {
    border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary); font-weight: 600;
}

/* 背景子控件区：仅对应模式显示 */
.tp-sub { display: none; margin-top: 10px; }
html[data-bg="image"] #themePanel .tp-sub[data-for="image"],
html[data-bg="video"] #themePanel .tp-sub[data-for="video"] { display: block; }
#themePanel .tp-dim-row, #themePanel .tp-glass-row { display: none; }
html[data-bg="image"] #themePanel .tp-dim-row,
html[data-bg="video"] #themePanel .tp-dim-row { display: flex; }
html[data-glass="on"] #themePanel .tp-glass-row { display: flex; }

.tp-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 10px; font-size: 12px; color: var(--c-text2);
}
.tp-row input[type="range"] { flex: 1; accent-color: var(--c-primary); cursor: pointer; }

.tp-file-row { display: flex; gap: 6px; align-items: center; }
.tp-mini-btn {
    border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text2);
    border-radius: 8px; padding: 7px 12px; font-size: 12px; cursor: pointer;
    transition: all .15s; white-space: nowrap;
}
.tp-mini-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-light); }
.tp-url-row { display: flex; gap: 6px; margin-top: 8px; }
.tp-url-row input[type="text"] {
    flex: 1; min-width: 0; border: 1px solid var(--c-border); border-radius: 8px;
    background: var(--c-bg); color: var(--c-text); padding: 7px 10px; font-size: 12px; outline: none;
}
.tp-url-row input[type="text"]:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-ring); }
.tp-note { font-size: 11px; color: var(--c-text3); margin-top: 6px; line-height: 1.5; }

.tp-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-pill {
    border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text2);
    border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer; transition: all .15s;
}
.tp-pill:hover { border-color: var(--c-primary); color: var(--c-primary); }

.tp-reset {
    width: 100%; margin-top: 14px; border: 1px dashed var(--c-border);
    background: transparent; color: var(--c-text3); border-radius: 10px;
    padding: 8px 0; font-size: 12px; cursor: pointer; transition: all .15s;
}
.tp-reset:hover { border-color: var(--c-danger, #ef4444); color: #ef4444; }

/* 轻提示 */
#tp-toast {
    position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(8px);
    background: rgba(20, 21, 26, .92); color: #fff; font-size: 13px;
    padding: 10px 18px; border-radius: 10px; z-index: 2147483001;
    opacity: 0; pointer-events: none; transition: all .25s; max-width: 86vw; text-align: center;
}
#tp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   暗色模式对页面内硬编码颜色的修正（列表页 / 详情页）
   ========================================================================== */
html[data-theme="dark"] .dialogUrlBox > .dialogUrl { background: var(--c-card); }
html[data-theme="dark"] .dialogUrlBox .el-dialog__headerbtn {
    background: rgba(30, 32, 39, .92); border-color: var(--c-border); color: var(--c-text2);
}
html[data-theme="dark"] .dialogUrlBox .el-dialog__headerbtn:hover { background: var(--c-hover-bg); }

html[data-theme="dark"] .top-nav { background: rgba(var(--c-card-rgb), .92); }
html[data-theme="dark"] .nav-search-box:focus-within { background: var(--c-focus-bg); }
html[data-theme="dark"] .res-poster .ph { background: linear-gradient(135deg, #262832, #1e2027); }
html[data-theme="dark"] .link-cp { background: var(--c-card); }
html[data-theme="dark"] .tag-type { background: rgba(234, 88, 12, .16); color: #fb923c; border-color: rgba(234, 88, 12, .4); }
html[data-theme="dark"] .tag-time { background: rgba(22, 163, 74, .16); color: #4ade80; border-color: rgba(22, 163, 74, .4); }
html[data-theme="dark"] .tag-cat { border-color: rgba(129, 140, 248, .45); }
html[data-theme="dark"] .code-chip { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .35); }
html[data-theme="dark"] .code-chip:hover { background: rgba(239, 68, 68, .24); }

/* ==========================================================================
   首页（pansou index）硬编码颜色映射到变量体系
   ========================================================================== */
html[data-tp-page="home"] body { background: var(--c-bg); color: var(--c-text); }
html[data-tp-page="home"] .search-box { background: var(--c-card); border-color: var(--c-border); }
html[data-tp-page="home"] .search-box:focus-within { border-color: var(--c-primary); box-shadow: 0 2px 8px var(--c-primary-ring); }
html[data-tp-page="home"] .search-type { color: var(--c-text); border-right-color: var(--c-border); }
html[data-tp-page="home"] .search-input { color: var(--c-text); }
html[data-tp-page="home"] .search-input::placeholder { color: var(--c-text3); }
html[data-tp-page="home"] .search-icon svg { color: var(--c-primary); }
html[data-tp-page="home"] .site-title,
html[data-tp-page="home"] .site-title a { color: var(--c-text); }
html[data-tp-page="home"] .logo-icon {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-hover));
    box-shadow: 0 2px 8px var(--c-primary-ring);
}
html[data-tp-page="home"] .suggestions { background: var(--c-card); border-color: var(--c-border); }
html[data-tp-page="home"] .suggestion-item { color: var(--c-text2); border-bottom-color: var(--c-bg); }
html[data-tp-page="home"] .suggestion-item:hover { background: var(--c-primary-light); }
html[data-tp-page="home"] .hot-search-label { color: var(--c-text3); }
html[data-tp-page="home"] .hot-search-tag { background: var(--c-card); border-color: var(--c-border); color: var(--c-text2); }
html[data-tp-page="home"] .hot-search-tag:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ==========================================================================
   移动端适配：齿轮瘦身 + 面板底部抽屉（JS 在 ≤768px 时把面板挂到 body 下，
   避开 .top-nav 的 backdrop-filter 包含块问题）
   ========================================================================== */
@media (max-width: 768px) {
    /* 齿轮瘦身，去掉悬浮阴影，避免顶栏里"挂边"观感 */
    .theme-btn { width: 34px; height: 34px; box-shadow: none; }
    .theme-btn svg { width: 16px; height: 16px; }
    .tp-float-wrap { top: 10px; right: 10px; }

    /* 抽屉遮罩（桌面端该元素默认不可见） */
    .tp-mask { display: none; }
    .tp-mask.show {
        display: block; position: fixed; inset: 0;
        background: rgba(0, 0, 0, .45); z-index: 1250;
        animation: tp-fade .2s ease;
    }

    /* 底部抽屉：仅当面板被挂到 body 下时生效 */
    body > .theme-panel {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; max-width: none;
        max-height: 78vh; max-height: min(78vh, calc(100dvh - 20px));
        border: none; border-radius: 18px 18px 0 0;
        padding: 6px 16px calc(16px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);
        animation: tp-sheet-up .26s cubic-bezier(.32, .72, .35, 1);
        -webkit-overflow-scrolling: touch;
    }
    /* 把手条 */
    body > .theme-panel::before {
        content: ''; display: block; width: 36px; height: 4px;
        border-radius: 2px; background: var(--c-border);
        margin: 4px auto 12px;
    }
    /* 触控放大：卡片/开关更易点按 */
    body > .theme-panel .tp-card { padding: 12px 4px; }
    body > .theme-panel .tp-mini-btn { padding: 8px 14px; }
}
@keyframes tp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tp-sheet-up {
    from { transform: translateY(40px); opacity: .5; }
    to { transform: none; opacity: 1; }
}

@media (max-width: 480px) {
    .theme-panel { padding: 14px; }
    body > .theme-panel { padding: 6px 14px calc(14px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   图片/视频背景：去掉发丝边框白线
   --c-border(#e8e8f0) 叠在深色背景图上会显成白色细线，此模式下统一透明；
   悬停高亮边框（primary）与卡片阴影不受影响。置于文件末尾以稳定覆盖
   上方各页内联样式与首页颜色映射规则。
   ========================================================================== */
html[data-bg="image"] .top-nav,
html[data-bg="video"] .top-nav { border-bottom-color: transparent; }
html[data-bg="image"] .filter-inner,
html[data-bg="video"] .filter-inner,
html[data-bg="image"] .empty-box,
html[data-bg="video"] .empty-box,
html[data-bg="image"] .search-box,
html[data-bg="video"] .search-box,
html[data-bg="image"] .suggestions,
html[data-bg="video"] .suggestions,
html[data-bg="image"] .result-item:not(:hover),
html[data-bg="video"] .result-item:not(:hover),
html[data-bg="image"] .page-btn:not(:hover),
html[data-bg="video"] .page-btn:not(:hover),
html[data-bg="image"] .back-top:not(:hover),
html[data-bg="video"] .back-top:not(:hover),
html[data-bg="image"] .theme-btn:not(:hover):not(.active),
html[data-bg="video"] .theme-btn:not(:hover):not(.active) { border-color: transparent; }

/* ==========================================================================
   顶部导航 · 一摞纸（Paper Stack）
   头部不是一张卡，是几页纸随手摞在页顶：主页是白卡（logo | 搜索 | 齿轮
   单行排布），背面两页错角露边（±1.5° 旋转的伪元素纸页）。滚动时整摞
   纸"压实"——背页回正收边、主卡阴影加深；悬停时纸页又松散开来。
   搜索是嵌在纸面里的凹槽托盘（--c-bg 下陷），聚焦才"抬"成白纸。
   主卡与结果卡同宽（.main 内容盒 860），边线逐像素重合。
   置于文件末尾：稳定覆盖上方玻璃 / 暗色 / 图片背景对 .top-nav 的规则
   ========================================================================== */

.top-nav,
html[data-theme="dark"] .top-nav,
html[data-glass="on"] .top-nav,
html[data-bg="image"] .top-nav,
html[data-bg="video"] .top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16px 20px 14px; /* 横向留白镜像 .main 三档，窄屏时纸卡仍与内容卡同宽 */
    background: transparent;
    border-bottom: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: padding .3s cubic-bezier(.22, .61, .36, 1);
}
.top-nav.scrolled { padding-top: 10px; padding-bottom: 8px; }

/* 主纸页：与结果卡同宽（.main 内容盒 = 900 - 40 = 860） */
.top-nav-inner {
    position: relative; /* z-index:auto，不建层叠上下文，负 z 背页可沉到卡底 */
    max-width: calc(var(--max-w) - 40px);
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    transition: padding .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
/* 背面两页纸：错角露边 */
.top-nav-inner::before,
.top-nav-inner::after {
    content: '';
    position: absolute;
    z-index: -1;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    transition: inset .35s cubic-bezier(.22, .61, .36, 1), transform .35s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.top-nav-inner::before {
    inset: -6px 16px 8px 22px;
    transform: rotate(1.5deg);
    opacity: .85;
}
.top-nav-inner::after {
    inset: -3px 24px 5px 12px;
    transform: rotate(-1.2deg);
    opacity: .7;
}
/* 悬停：纸页松散 */
.top-nav:hover .top-nav-inner::before { inset: -9px 13px 10px 25px; transform: rotate(2.3deg); }
.top-nav:hover .top-nav-inner::after  { inset: -4px 27px 7px 9px;  transform: rotate(-2deg); }
/* 滚动：整摞压实 */
.top-nav.scrolled .top-nav-inner { box-shadow: 0 14px 32px rgba(0, 0, 0, .12); }
.top-nav.scrolled .top-nav-inner::before { inset: 0 6px 0 6px; transform: rotate(.2deg); opacity: .5; }
.top-nav.scrolled .top-nav-inner::after  { inset: 0 10px 0 10px; transform: rotate(-.15deg); opacity: .35; }

/* 品牌：主色文件夹 + 站名 */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.nav-logo img {
    width: 34px; height: 34px;
    border-radius: 10px;
    border: 1px solid var(--c-border);
}
.nav-logo-mark {
    position: relative;
    width: 38px; height: 31px;
    margin-top: 7px; /* 拎耳补偿 */
    border-radius: 4px 9px 9px 9px;
    background: linear-gradient(150deg, var(--c-primary), var(--c-primary-hover));
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 3px 10px var(--c-primary-ring);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.nav-logo-mark::before {
    content: '';
    position: absolute; top: -6px; left: 0; /* 左缘与包体对齐：底边恰落在包体左上 4px 圆角弧终点，轮廓连续无台阶 */
    width: 17px; height: 10px; /* 下探包体 4px，重叠带被同色渐变盖没，任何缩放不留缝 */
    border-radius: 5px 5px 0 0;
    /* 与包体共用同一渐变场：尺寸/起点对齐包体 38×31 的渐变盒，拎耳即包体左上角的延伸。
       注意不可用负 z-index：.top-nav-inner 不建层叠上下文，负 z 会沉到卡片底被玻璃盖淡 */
    background: linear-gradient(150deg, var(--c-primary), var(--c-primary-hover));
    background-size: 38px 31px;
    background-position: 0 6px;
}
.nav-logo-mark svg { width: 16px; height: 16px; }
.nav-logo:hover .nav-logo-mark { transform: rotate(-7deg) translateY(-2px); }
.nav-logo-text {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--c-text);
    white-space: nowrap;
}
.nav-logo-text::after {
    content: '';
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--c-text3);
}

/* 搜索：嵌在纸面里的凹槽，聚焦抬起成白纸 */
.nav-search {
    flex: 1;
    display: flex;
    min-width: 0;
}
.nav-search-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    background: var(--c-bg);
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 0 6px 0 15px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .05);
    transition: background .22s ease, border-color .22s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}
.nav-search-box:focus-within {
    background: var(--c-card);
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-ring), 0 6px 18px rgba(0, 0, 0, .10);
    transform: translateY(-1px);
}
.nav-search-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-right: 10px;
    color: var(--c-text3);
    transition: color .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.nav-search-icon svg { width: 18px; height: 18px; display: block; }
.nav-search-box:focus-within .nav-search-icon { color: var(--c-primary); transform: scale(1.12); }
.nav-search-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--c-text);
    min-width: 0;
    height: 100%;
    transition: opacity .18s ease; /* 占位词轮播淡切 */
}
.nav-search-box input::placeholder { color: var(--c-text3); }
.nav-kbd {
    display: none;
    flex-shrink: 0; margin-right: 9px;
    align-items: center;
    font-family: 'SF Mono', Consolas, monospace; font-size: 11px; color: var(--c-text3);
    border: 1px solid var(--c-border); border-bottom-width: 2px; border-radius: 7px;
    padding: 2px 8px; background: var(--c-card);
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease;
}
.top-nav-inner:hover .nav-kbd {
    color: var(--c-primary);
    border-color: var(--c-primary);
}
.nav-search-box:focus-within .nav-kbd { display: none !important; }

/* 按钮：空查询待机灰 → 输入即点亮 */
.nav-search-box button {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    flex-shrink: 0;
    height: 36px;
    padding: 0 18px;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-indent: 2px;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--c-primary-ring);
    transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
    white-space: nowrap;
}
.nav-search-box button:hover {
    background: var(--c-primary-hover);
    box-shadow: 0 5px 14px var(--c-primary-ring);
}
.nav-search-box button:active { transform: scale(.97); }
.nav-search-box button svg { width: 15px; height: 15px; display: none; }
.nav-search-box input:placeholder-shown ~ button {
    background: var(--c-text3);
    box-shadow: none;
}

/* 齿轮：纸卡右端的幽灵钮（单行内，永远在右上） */
.theme-wrap {
    position: relative;
    display: flex;
    flex-shrink: 0;
}
.theme-wrap .theme-btn {
    width: 38px; height: 38px; border-radius: 11px;
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text2);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.theme-wrap .theme-btn:hover, .theme-wrap .theme-btn.active {
    background: var(--c-primary-light);
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.theme-btn svg { transition: transform .35s ease; }
.theme-btn:hover svg { transform: rotate(60deg); }
/* 夺回描边：上方 (0,4,1) 的 image/video 透明化规则不得侵蚀纸卡上的齿轮 */
html[data-bg="image"] .theme-wrap .theme-btn:not(:hover):not(.active),
html[data-bg="video"] .theme-wrap .theme-btn:not(:hover):not(.active) {
    border-color: var(--c-border);
}

/* 响应式 */
@media (min-width: 769px) {
    .nav-kbd { display: flex; }
}
@media (max-width: 768px) {
    .top-nav { padding: 12px 16px 10px; } /* 镜像 .main 平板档 */
    .top-nav-inner { padding: 10px 12px; gap: 10px; border-radius: 16px; }
    .nav-logo-text::after { display: none; }
    .nav-search-box { height: 44px; }
    .nav-search-box input { font-size: 16px; } /* ≥16px：阻止 iOS 聚焦时页面自动缩放 */
}
@media (max-width: 480px) {
    .top-nav { padding: 10px 12px 10px; } /* 浏览器地址栏已挡住状态栏/刘海，不再叠加 safe-area，避免顶部大片空白 */
    @media (display-mode: standalone) {
        /* 全屏桌面模式（无地址栏）才需要避刘海 */
        .top-nav { padding-top: calc(10px + env(safe-area-inset-top)); }
    }
    .top-nav-inner { padding: 8px 10px; gap: 8px; }
    .nav-logo-text { display: none; } /* 只留徽标，把宽度全给输入 */
    .nav-search-box { height: 42px; padding: 0 5px 0 12px; }
    .nav-search-box button { height: 32px; padding: 0 14px; letter-spacing: 1px; text-indent: 1px; font-size: 13px; }
    .top-nav-inner::before { inset: -4px 10px 6px 14px; }
    .top-nav-inner::after { inset: -2px 14px 4px 8px; }
}

/* 减弱动态：纸页松散/压实改瞬时 */
@media (prefers-reduced-motion: reduce) {
    .top-nav, .top-nav *, .top-nav-inner::before, .top-nav-inner::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ==========================================================================
   玻璃模式：顶部纸卡跟随卡片透明度
   上方 Paper Stack 段把 .top-nav 重置为透明，真正的卡体是 .top-nav-inner
   ========================================================================== */
html[data-glass="on"] .top-nav-inner {
    background: rgba(var(--c-card-rgb), var(--glass-solid));
    -webkit-backdrop-filter: blur(calc(34px * var(--glass-solid))) saturate(1.7);
    backdrop-filter: blur(calc(34px * var(--glass-solid))) saturate(1.7);
    border-color: rgba(255, 255, 255, .55);
}
html[data-theme="dark"][data-glass="on"] .top-nav-inner { border-color: rgba(255, 255, 255, .12); }
/* 背面两页纸同步半透，否则实心白纸会从玻璃下透出来 */
html[data-glass="on"] .top-nav-inner::before,
html[data-glass="on"] .top-nav-inner::after {
    background: rgba(var(--c-card-rgb), var(--glass-solid));
}
/* 搜索凹槽：半透黑保持"下陷"观感，聚焦时仍抬成实心白纸 */
html[data-glass="on"] .nav-search-box:not(:focus-within) { background: rgba(0, 0, 0, .05); }
html[data-theme="dark"][data-glass="on"] .nav-search-box:not(:focus-within) { background: rgba(255, 255, 255, .06); }

/* ==========================================================================
   玻璃模式：弹窗内嵌区块与按钮去发丝白线
   --c-border(#e8e8f0) 叠在半透弹窗外壳的模糊暗底上会显成白色细线，
   与"图片/视频背景"段同一处理：边框透明，保留底色罩与文字色区分层级；
   "打开链接"按钮的主色描边属于强调色，不受影响。
   ========================================================================== */
html[data-glass="on"] .dialogUrlBox .resource-dialog-qr,
html[data-glass="on"] .dialogUrlBox .resource-dialog-tree-content,
html[data-glass="on"] .dialogUrlBox .resource-dialog-btn.btn-copy,
html[data-glass="on"] .dialogUrlBox .resource-dialog-tree-toggle,
html[data-glass="on"] .dialogUrlBox .el-dialog__headerbtn,
html[data-glass="on"] .dialogUrlBox .dialogUrl .statement {
    border-color: transparent;
}
/* 链接卡片改半透明主题色罩（覆盖模板内实心的 --c-primary-light），让模糊透出来 */
html[data-glass="on"] .dialogUrlBox .resource-dialog-link-card {
    background: color-mix(in srgb, var(--c-primary) 10%, transparent) !important;
}