/* ============================================================
   CANDY 网址导航 · 极简主题系统
   - 5 套主题 × 明暗模式，切换即焕然一新
   ============================================================ */

/* ============================================================
   主题系统 · 7 大风格
   ============================================================ */
:root {
    --ws-radius: 16px;
    --ws-radius-sm: 12px;
    --ws-header-h: 64px;
    --ws-transition: .35s cubic-bezier(.4, 0, .2, 1);
    --c-on-accent: #ffffff;
    --c-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans SC", sans-serif;
    --c-font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

    /* ---------- 主题化背景 ----------
       做法：只写"配方"，颜色全部由主题变量推导（color-mix 取色 + 透明度），
       所以 8 套主题 × 明暗 = 16 种组合自动换色，不需要写 16 份背景值。
       自定义属性是惰性求值的：这里引用 --c-accent，实际在 html 上按当前主题解析。 */
    --c-bg-glow-strength: 13%;
    --c-bg-glow-a: color-mix(in srgb, var(--c-accent) var(--c-bg-glow-strength), transparent);
    --c-bg-glow-b: color-mix(in srgb, var(--c-accent-2, var(--c-accent)) var(--c-bg-glow-strength), transparent);
    /* C/D 用 --c-accent-3 / -4（由主色旋转色相得到，见文件末尾的 @supports 块）。
       不支持 relative color syntax 时这两个变量没定义，会退回主色/辅色，背景照样是主题化的。 */
    --c-bg-glow-c: color-mix(in srgb, var(--c-accent-3, var(--c-accent-2, var(--c-accent))) var(--c-bg-glow-strength), transparent);
    --c-bg-glow-d: color-mix(in srgb, var(--c-accent-4, var(--c-accent)) var(--c-bg-glow-strength), transparent);
    /* 图案用色：网格走主色（有色彩）、斜纹走辅色、点阵走文字色（中性纹理） */
    --c-bg-grid-size: 110px;
    --c-bg-grid-line: color-mix(in srgb, var(--c-accent) 6%, transparent);
    --c-bg-hatch-size: 22px;
    --c-bg-hatch: color-mix(in srgb, var(--c-accent-2, var(--c-accent)) 5%, transparent);
    --c-bg-dot: color-mix(in srgb, var(--c-text) 16%, transparent);
    --c-bg-dot-size: 24px 24px;

    /* 8 层叠出来的背景，从下到上：
       4 道多色光晕（左上偏中/右上/右下/左下）→ 蓝图网格 → 45° 斜纹 → 细点阵。
       网格和斜纹用 repeating-linear-gradient 自己平铺，不需要 background-size；
       只有点阵层要靠 background-size + repeat（见 body::before）。
       位置讲究：光晕A 放 46% 而非左上角 —— 左侧被 220px 侧栏挡住等于浪费，
       且 7 套主题自带的 --c-glow 都在 12% -8% 附近，峰值重叠会变双重曝光。 */
    --c-bg-decor:
        radial-gradient(1150px 700px at 46% -18%, var(--c-bg-glow-a), transparent 71%),
        radial-gradient(950px 620px at 104% -8%, var(--c-bg-glow-b), transparent 68%),
        radial-gradient(900px 760px at 98% 106%, var(--c-bg-glow-c), transparent 70%),
        radial-gradient(820px 700px at 22% 110%, var(--c-bg-glow-d), transparent 72%),
        repeating-linear-gradient(0deg, var(--c-bg-grid-line) 0 1px, transparent 1px var(--c-bg-grid-size)),
        repeating-linear-gradient(90deg, var(--c-bg-grid-line) 0 1px, transparent 1px var(--c-bg-grid-size)),
        repeating-linear-gradient(45deg, var(--c-bg-hatch) 0 1px, transparent 1px var(--c-bg-hatch-size)),
        radial-gradient(var(--c-bg-dot) .9px, transparent 1.4px);
}

/* 由主色旋转色相得到两个邻近色，让背景"多彩"但同源、不会串味。
   为什么是 ±130°：实测 candy 的主色(#ff6000)和辅色(#ff9f43)色相只差 7°，
   graphite 差 2°、sakura 差 5° —— 只转 ±45° 的话四个光晕仍然挤在同一片色相上，
   看着还是一块单色。±130° 相当于从主色拉出近似三分色，四道光的色相必然拉开。
   relative color syntax 需要 Chrome 119+ / Safari 16.4+ / Firefox 128+；
   不支持就整块跳过，--c-accent-3/-4 保持未定义，上层 var() 会退回主色与辅色。 */
@supports (color: rgb(from red r g b)) {
    :root {
        --c-accent-3: hsl(from var(--c-accent) calc(h + 130) s l);
        --c-accent-4: hsl(from var(--c-accent) calc(h - 130) s l);
    }
}

/* ---------- 风格 1：科技风 (Cyber) · 霓虹未来 ---------- */
html[data-theme="cyber"] {
    --c-accent: #00e5ff;
    --c-accent-2: #7c4dff;
    --c-accent-soft: rgba(0, 229, 255, .12);
    --ws-radius: 8px; --ws-radius-sm: 6px;
    --c-grad-title: linear-gradient(90deg, #00e5ff, #7c4dff 60%, #ff2d95);
    --c-grad-btn: linear-gradient(135deg, #00e5ff, #7c4dff);
    --c-glow: radial-gradient(800px 400px at 10% -10%, rgba(0,229,255,.18), transparent 55%),
              radial-gradient(700px 400px at 90% -10%, rgba(124,77,255,.18), transparent 55%);
    --c-glow-dark: radial-gradient(800px 400px at 10% -10%, rgba(0,229,255,.22), transparent 55%),
              radial-gradient(700px 400px at 90% -10%, rgba(124,77,255,.22), transparent 55%);
    --c-hover-glow: 0 0 0 1px var(--c-accent), 0 0 24px -4px rgba(0,229,255,.5), 0 12px 32px -8px rgba(124,77,255,.4);
    --c-border-glow: 1px solid rgba(0,229,255,.3);
    --c-card-bg: rgba(13, 18, 34, .72);
    --c-sidebar-bg: rgba(8, 12, 24, .9);
    --c-card-border: rgba(0, 229, 255, .14);
    /* 科技风只调网格参数，不再单独写一条 body::before：
       所有主题共用 :root 里那套 8 层层叠配方，避免出现"平行实现"两处不同步。
       34px 细网格 + 5% 主色，保持原来的电路板质感（默认主题是 110px 蓝图网格）。 */
    --c-bg-grid-size: 34px;
    --c-bg-grid-line: color-mix(in srgb, var(--c-accent) 5%, transparent);
    --c-bg-hatch: color-mix(in srgb, var(--c-accent-2) 7%, transparent);
    --c-header-bg: rgba(8, 12, 24, .85);
    --c-section-line: linear-gradient(90deg, transparent, rgba(0,229,255,.4), transparent);
}
html[data-theme="cyber"][data-mode="light"] {
    --c-bg: #eef4ff; --c-bg-soft: #e0ecff;
    --c-card: #ffffff; --c-text: #0a1128; --c-text-2: #4a5a8a;
    --c-border: rgba(10, 17, 40, .10);
    --c-header: rgba(240, 246, 255, .85);
    --c-sidebar: #f4f8ff; --c-hover: rgba(0, 110, 255, .07);
    --c-active-glow: var(--c-glow);
}
html[data-theme="cyber"][data-mode="dark"] {
    --c-bg: #080c18; --c-bg-soft: #0d1428;
    --c-card: rgba(13, 18, 34, .8); --c-text: #e8f6ff; --c-text-2: #7a8fc0;
    --c-border: rgba(0, 229, 255, .12);
    --c-header: rgba(8, 12, 24, .85);
    --c-sidebar: rgba(8, 12, 24, .92); --c-hover: rgba(0, 229, 255, .08);
    --c-active-glow: var(--c-glow-dark);
}
/* 科技风专属：霓虹卡片。
   （背景网格已经并进 :root 的 --c-bg-decor，这里只调参数，不再单独写一条 body::before —— 
   两处平行实现最容易出现"改了配方忘了改特例"的不同步。） */
html[data-theme="cyber"] .url-card .card {
    background: var(--c-card-bg) !important;
    border: var(--c-card-border) !important;
    backdrop-filter: blur(6px);
}
html[data-theme="cyber"] .ws-cat-title { font-family: var(--c-font-mono); letter-spacing: .04em; }
html[data-theme="cyber"] .ws-search .super-search-fm { border: var(--c-border-glow); }

/* ---------- 风格 2：简约风 (Minimal) · 极简留白 ---------- */
html[data-theme="minimal"] {
    --c-accent: #111827;
    --c-accent-2: #4b5563;
    --c-accent-soft: rgba(17, 24, 39, .06);
    --ws-radius: 4px; --ws-radius-sm: 3px;
    --c-grad-title: #111827;
    --c-grad-btn: #111827;
    --c-glow: none;
    --c-glow-dark: none;
    --c-hover-glow: 0 0 0 1px #111827;
    --c-shadow: none;
    --c-shadow-hover: 0 1px 0 rgba(0,0,0,.08);
    --c-border: rgba(17, 24, 39, .14);
}
html[data-theme="minimal"][data-mode="light"] {
    --c-bg: #ffffff; --c-bg-soft: #fafafa;
    --c-card: #ffffff; --c-text: #111827; --c-text-2: #6b7280;
    --c-border: rgba(17, 24, 39, .12);
    --c-header: rgba(255, 255, 255, .9);
    --c-sidebar: #ffffff; --c-hover: #f3f4f6;
    --c-active-glow: none;
}
html[data-theme="minimal"][data-mode="dark"] {
    --c-bg: #0a0a0a; --c-bg-soft: #111111;
    --c-card: #111111; --c-text: #fafafa; --c-text-2: #9ca3af;
    --c-border: rgba(255, 255, 255, .12);
    --c-header: rgba(10, 10, 10, .9);
    --c-sidebar: #0d0d0d; --c-hover: #1a1a1a;
    --c-active-glow: none;
    --c-accent: #fafafa; --c-accent-2: #d1d5db;
    --c-accent-soft: rgba(255, 255, 255, .08);
    --c-grad-title: #fafafa;
    --c-grad-btn: #fafafa;
}

/* =====================================================================
   雾灰（mist）：介于深色和浅色之间的一套中性色
   设计意图：不像 light 那么刺眼，也不像 dark 那么沉。整体降低对比度、
   去掉色彩偏向（低饱和蓝灰），适合长时间看或晚上开灯环境。
   注意：这不是「自动折中」，而是显式给定的一套灰阶 —— 明暗两个模式的
   底色都落在中间调（light 用 #e8eaee 而非纯白，dark 用 #2b2f36 而非近黑）。
   ===================================================================== */
html[data-theme="mist"] {
    --c-accent: #5b7ba6;
    --c-accent-2: #8aa0bd;
    --c-accent-soft: rgba(91, 123, 166, .14);
    --ws-radius: 12px; --ws-radius-sm: 8px;
    --c-grad-title: linear-gradient(90deg, #5b7ba6, #8aa0bd 60%, #a9b6c6);
    --c-grad-btn: linear-gradient(135deg, #5b7ba6, #8aa0bd);
    --c-glow: radial-gradient(800px 420px at 12% -10%, rgba(91,123,166,.12), transparent 58%),
              radial-gradient(720px 400px at 88% -8%, rgba(138,160,189,.12), transparent 58%);
    --c-glow-dark: radial-gradient(800px 420px at 12% -10%, rgba(91,123,166,.16), transparent 58%),
              radial-gradient(720px 400px at 88% -8%, rgba(138,160,189,.16), transparent 58%);
    --c-hover-glow: 0 0 0 1px var(--c-accent), 0 0 20px -6px rgba(91,123,166,.35), 0 10px 26px -10px rgba(91,123,166,.3);
    --c-border-glow: 1px solid rgba(91, 123, 166, .3);
    --c-card-bg: rgba(255, 255, 255, .55);
    --c-card-border: rgba(91, 123, 166, .16);
    --c-header-bg: rgba(232, 234, 238, .86);
    --c-sidebar-bg: rgba(236, 238, 241, .92);
    --c-section-line: linear-gradient(90deg, transparent, rgba(91,123,166,.35), transparent);
    /* 网格比默认稍密、更淡，维持"雾"的感觉 */
    --c-bg-grid-size: 96px;
    --c-bg-grid-line: color-mix(in srgb, var(--c-accent) 5%, transparent);
    --c-bg-hatch: color-mix(in srgb, var(--c-accent-2) 5%, transparent);
}
/* light：底不是纯白而是浅灰，降低刺眼感 */
html[data-theme="mist"][data-mode="light"] {
    --c-bg: #e8eaee; --c-bg-soft: #dfe2e7;
    --c-card: #f4f5f7; --c-text: #2f3742; --c-text-2: #6b7480;
    --c-border: rgba(47, 55, 66, .12);
    --c-header: rgba(232, 234, 238, .88);
    --c-sidebar: #eceef1; --c-hover: rgba(91, 123, 166, .08);
    --c-active-glow: var(--c-glow);
}
/* dark：底不是近黑而是中灰，抬高整体明度 */
html[data-theme="mist"][data-mode="dark"] {
    --c-bg: #2b2f36; --c-bg-soft: #32373f;
    --c-card: #353a43; --c-text: #e3e6ea; --c-text-2: #a2aab5;
    --c-border: rgba(226, 230, 234, .12);
    --c-header: rgba(43, 47, 54, .9);
    --c-sidebar: #2f333a; --c-hover: rgba(138, 160, 189, .12);
    --c-active-glow: var(--c-glow-dark);
}
/* 简约风专属：无圆角卡片 + 细线分隔 */
html[data-theme="minimal"] .url-card .card {
    border-radius: 0 !important;
    border-left: 2px solid transparent;
    box-shadow: none !important;
}
html[data-theme="minimal"] .url-card .url-body:hover .card {
    border-left-color: #111827;
    transform: translateX(2px);
    box-shadow: none !important;
}
html[data-theme="minimal"] .ws-cat-title { letter-spacing: .12em; font-weight: 400; text-transform: uppercase; }
html[data-theme="minimal"] .ws-hero-title { font-weight: 300; letter-spacing: .04em; }

/* ---------- 风格 3：极光紫 (Aurora) ---------- */
html[data-theme="aurora"] {
    --c-accent: #4f46e5; --c-accent-2: #06b6d4;
    --c-accent-soft: rgba(79, 70, 229, .10);
    --ws-radius: 16px; --ws-radius-sm: 12px;
    --c-grad-title: linear-gradient(120deg, #4f46e5, #7c6cff 50%, #06b6d4);
    --c-grad-btn: linear-gradient(135deg, #4f46e5, #7c6cff);
    --c-glow: radial-gradient(900px 420px at 12% -8%, rgba(99,102,241,.16), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(6,182,212,.12), transparent 55%);
    --c-glow-dark: radial-gradient(900px 420px at 12% -8%, rgba(99,102,241,.30), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(6,182,212,.22), transparent 55%);
    --c-hover-glow: 0 0 0 1px var(--c-accent), 0 12px 32px -8px rgba(79,70,229,.35);
}

/* ---------- 风格 4：薄荷绿 (Mint) ---------- */
html[data-theme="mint"] {
    --c-accent: #0d9488; --c-accent-2: #4ade80;
    --c-accent-soft: rgba(13, 148, 136, .10);
    --ws-radius: 20px; --ws-radius-sm: 14px;
    --c-grad-title: linear-gradient(120deg, #0d9488, #10b981 55%, #84cc16);
    --c-grad-btn: linear-gradient(135deg, #0d9488, #10b981);
    --c-glow: radial-gradient(900px 420px at 12% -8%, rgba(16,185,129,.14), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(132,204,22,.10), transparent 55%);
    --c-glow-dark: radial-gradient(900px 420px at 12% -8%, rgba(16,185,129,.26), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(132,204,22,.18), transparent 55%);
    --c-hover-glow: 0 0 0 1px var(--c-accent), 0 12px 32px -8px rgba(13,148,136,.35);
}

/* ---------- 风格 5：暖阳橙 (Amber) ---------- */
html[data-theme="amber"] {
    --c-accent: #ea580c; --c-accent-2: #f59e0b;
    --c-accent-soft: rgba(234, 88, 12, .10);
    --ws-radius: 14px; --ws-radius-sm: 10px;
    --c-grad-title: linear-gradient(120deg, #ea580c, #f59e0b 55%, #fbbf24);
    --c-grad-btn: linear-gradient(135deg, #ea580c, #f59e0b);
    --c-glow: radial-gradient(900px 420px at 12% -8%, rgba(245,158,11,.14), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(234,88,12,.10), transparent 55%);
    --c-glow-dark: radial-gradient(900px 420px at 12% -8%, rgba(245,158,11,.24), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(234,88,12,.18), transparent 55%);
    --c-hover-glow: 0 0 0 1px var(--c-accent), 0 12px 32px -8px rgba(234,88,12,.35);
}

/* ---------- 风格 6：樱花粉 (Sakura) ---------- */
html[data-theme="sakura"] {
    --c-accent: #db2777; --c-accent-2: #f472b6;
    --c-accent-soft: rgba(219, 39, 119, .10);
    --ws-radius: 22px; --ws-radius-sm: 16px;
    --c-grad-title: linear-gradient(120deg, #db2777, #f472b6 55%, #fda4af);
    --c-grad-btn: linear-gradient(135deg, #db2777, #f472b6);
    --c-glow: radial-gradient(900px 420px at 12% -8%, rgba(244,114,182,.14), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(219,39,119,.10), transparent 55%);
    --c-glow-dark: radial-gradient(900px 420px at 12% -8%, rgba(244,114,182,.24), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(219,39,119,.18), transparent 55%);
    --c-hover-glow: 0 0 0 1px var(--c-accent), 0 12px 32px -8px rgba(219,39,119,.35);
}

/* ---------- 风格 7：石墨蓝 (Graphite) ---------- */
html[data-theme="graphite"] {
    --c-accent: #3b82f6; --c-accent-2: #64748b;
    --c-accent-soft: rgba(59, 130, 246, .10);
    --ws-radius: 10px; --ws-radius-sm: 8px;
    --c-grad-title: linear-gradient(120deg, #1e293b, #3b82f6 60%, #60a5fa);
    --c-grad-btn: linear-gradient(135deg, #3b82f6, #64748b);
    --c-glow: radial-gradient(900px 420px at 12% -8%, rgba(59,130,246,.12), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(100,116,139,.10), transparent 55%);
    --c-glow-dark: radial-gradient(900px 420px at 12% -8%, rgba(59,130,246,.24), transparent 60%), radial-gradient(700px 380px at 88% -12%, rgba(100,116,139,.18), transparent 55%);
    --c-hover-glow: 0 0 0 1px var(--c-accent), 0 12px 32px -8px rgba(59,130,246,.35);
}

/* ---------- 风格 8：导航橙 (Candy) · 默认 ---------- */
/* 三处参考的真实取值：
   优设导航  主色 #ff6000、圆角 10px、多彩分类色（#4093fb / #28c687 / #c2a0ff / #ff980f / #00aae7）
   果核剥壳  页面底 #f5f5f5、元素底 #fff、细边框、极轻投影、hover 抬升
   godly     超大紧字距标题、小号等宽标签、大留白 */
html[data-theme="candy"] {
    --c-accent: #ff6000;
    --c-accent-2: #ff9f43;
    --c-accent-soft: rgba(255, 96, 0, .10);
    --ws-radius: 10px;
    --ws-radius-sm: 8px;
    --c-grad-btn: linear-gradient(135deg, #ff6000, #ff8c1a);
    --c-hover-glow: 0 6px 20px -8px rgba(255, 96, 0, .3);
}
html[data-theme="candy"][data-mode="light"] {
    --c-bg: #f5f5f5; --c-bg-soft: #ededed;
    --c-card: #ffffff; --c-text: #1f2328; --c-text-2: #6b7280;
    --c-border: rgba(31, 35, 40, .10);
    --c-header: rgba(255, 255, 255, .88);
    --c-sidebar: #ffffff; --c-hover: rgba(31, 35, 40, .045);
    --c-shadow: 0 0 1px 0 rgba(0, 0, 0, .18);
    --c-shadow-hover: 0 1px 2px rgba(0, 0, 0, .10), 0 8px 24px -10px rgba(0, 0, 0, .18);
}
html[data-theme="candy"][data-mode="dark"] {
    --c-bg: #101216; --c-bg-soft: #171a20;
    --c-card: #191d24; --c-text: #eef1f5; --c-text-2: #98a1af;
    --c-border: rgba(255, 255, 255, .09);
    --c-header: rgba(16, 18, 22, .88);
    --c-sidebar: #14171c; --c-hover: rgba(255, 255, 255, .05);
    --c-shadow: 0 0 1px 0 rgba(0, 0, 0, .5);
    --c-shadow-hover: 0 8px 26px -10px rgba(0, 0, 0, .6);
}
/* 果核剥壳式卡片：细边框 + 极轻投影，hover 抬升并把边框染成主色 */
html[data-theme="candy"] .url-card .card { box-shadow: var(--c-shadow); }
html[data-theme="candy"] .url-card .url-body:hover .card {
    transform: translateY(-2px);
    border-color: var(--c-accent);
    box-shadow: var(--c-shadow-hover);
}
/* godly 排版：标题再放大收紧，纯色不渐变，统计行收成左侧一小段等宽标签。
   注意必须显式给颜色：base 规则为了渐变文字设了 color:transparent，
   这里若写 currentColor 会解析成 transparent，标题直接看不见。 */
html[data-theme="candy"] .ws-hero-title {
    font-weight: 800; letter-spacing: -.055em; line-height: 1;
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    color: var(--c-text);
    -webkit-text-fill-color: var(--c-text);
}
html[data-theme="candy"] .ws-hero-meta {
    font-family: var(--c-font-mono);
    font-size: 11px; letter-spacing: .16em;
    padding-top: 16px; border-top: 1px solid var(--c-border);
}

/* ===================== 明暗模式（基础，被主题覆盖） ===================== */
html[data-mode="light"] {
    --c-bg: #f8fafc; --c-bg-soft: #f1f5f9;
    --c-card: #ffffff; --c-text: #0f172a; --c-text-2: #64748b;
    --c-border: rgba(15, 23, 42, .07);
    --c-header: rgba(248, 250, 252, .82);
    --c-sidebar: #ffffff; --c-hover: rgba(15, 23, 42, .04);
    --c-shadow: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.02);
    --c-shadow-hover: 0 10px 15px -3px rgba(15,23,42,.06), 0 4px 6px -2px rgba(15,23,42,.03);
    /* 主题化背景 = 推导出来的三层光晕 + 细点阵（--c-bg-decor），再叠一层主题自带的
       --c-glow（cyber/aurora/mint/amber/sakura/graphite 各自定义过一个角光晕，
       candy 没定义、minimal 显式 none）。
       background-image 里 none 是合法的层，所以没定义 --c-glow 的 candy 也走同一条规则。 */
    --c-active-glow: var(--c-bg-decor), var(--c-glow, none);
}
html[data-mode="dark"] {
    --c-bg: #0b0f19; --c-bg-soft: #131a29;
    --c-card: #161d2e; --c-text: #f1f5f9; --c-text-2: #94a3b8;
    --c-border: rgba(255, 255, 255, .07);
    --c-header: rgba(11, 15, 25, .85);
    --c-sidebar: #0f1421; --c-hover: rgba(255, 255, 255, .045);
    --c-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.1);
    --c-shadow-hover: 0 10px 15px -3px rgba(0,0,0,.35), 0 4px 6px -2px rgba(0,0,0,.2);
    /* 暗底吃色，光晕要更浓才看得出来；点阵反过来要更淡，否则像噪点。
       强度从 26% 降到 20%：光晕从 3 道变成 4 道后叠加更浓，实测 cyber 暗色最浓处
       RGB 色距冲到 67（偏重），降到 20% 后回到 50 上下，仍是清晰可见的多彩。 */
    --c-bg-glow-strength: 20%;
    --c-bg-dot: color-mix(in srgb, var(--c-text) 13%, transparent);
    --c-active-glow: var(--c-bg-decor), var(--c-glow-dark, none);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    html[data-mode="dark"] { --c-accent-soft: rgba(255,255,255,.08); }
}

/* ===================== 全局 ===================== */
/* html { scroll-behavior: smooth; } 已禁用：与 jQuery animate 冲突会导致滚动卡死 */
body {
    background: var(--c-bg) !important;
    color: var(--c-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans SC", sans-serif;
    transition: background-color var(--ws-transition), color var(--ws-transition);
    -webkit-font-smoothing: antialiased;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* 主题化背景。--c-active-glow 原先只有 cyber 主题填了值，另外 7 套全落到 none，
       所以背景一直是纯色 —— 这里让它在主题没给 --c-glow 时回退到 --c-bg-decor。
       各主题仍然只负责设 --c-accent，背景自动推导出来。 */
    background: var(--c-active-glow, none);
    /* 三张清单必须和图层数对上：--c-bg-decor 是 8 层（4 光晕 + 2 网格 + 1 斜纹 + 1 点阵），
       末尾再挂 1 层主题自带的 --c-glow（没定义时是 none，画不出来但照样占一位），共 9 层。
       逐一对应：1-7 层铺满不需平铺；第 8 层是点阵，靠 background-size 24px 平铺；
       第 9 层是主题光晕。清单长度不一致时 CSS 会循环复用错的值（网格的 repeat 会被顶掉），
       check.js 的 A17 会校验三张清单长度 = 图层数 + 1。 */
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
    background-size: auto, auto, auto, auto, auto, auto, auto, var(--c-bg-dot-size), auto;
    background-position: center, center, center, center, center, center, center, 0 0, center;
    transition: background var(--ws-transition);
}
/* 老浏览器没有 color-mix 时不加背景，而不是写死一组颜色 —— 写死会让主题化失效 */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    :root { --c-bg-decor: none; }
}
::selection { background: var(--c-accent); color: var(--c-on-accent); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }

.text-gray, .text-gray strong { color: var(--c-text); }
.text-muted { color: var(--c-text-2) !important; }
a { color: var(--c-accent); text-decoration: none; }

/* ===================== 顶部导航 ===================== */
html[data-mode] .big-header-banner .page-header {
    background: var(--c-header) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--c-border);
    box-shadow: none !important;
}
.page-header .navbar-nav > li > a,
html[data-mode] .big-header-banner .navbar-menu a {
    color: var(--c-text-2) !important;
    font-weight: 500;
    transition: color var(--ws-transition);
}
.page-header .navbar-nav > li > a:hover,
html[data-mode] .big-header-banner .navbar-menu a:hover { color: var(--c-accent) !important; }
.site-menu > li > a { display: flex; align-items: center; height: var(--ws-header-h); padding: 0 16px; }
.site-menu .sub-menu {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--ws-radius-sm);
    box-shadow: var(--c-shadow-hover);
    padding: 8px;
    min-width: 160px;
}
.site-menu .sub-menu a { color: var(--c-text-2); padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.site-menu .sub-menu a:hover { color: var(--c-text); background: var(--c-hover); }

/* 外观切换器 */
.ws-appearance { display: flex; align-items: center; gap: 10px; }
.ws-icon-btn {
    width: 36px; height: 36px;
    border: none; border-radius: 10px;
    background: transparent; color: var(--c-text-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: all var(--ws-transition);
    position: relative;
}
.ws-icon-btn:hover { color: var(--c-accent); background: var(--c-hover); }
.ws-icon-btn.active { color: var(--c-accent); background: var(--c-accent-soft); }

.ws-theme { position: relative; }
.ws-theme-panel {
    position: absolute;
    top: calc(100% + 10px); right: 0;
    z-index: 1200;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: var(--c-shadow-hover);
    padding: 8px;
    min-width: 170px;
    display: none;
}
.ws-theme-panel.open { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ws-theme-panel button {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: var(--c-text-2);
    font-size: 12.5px; cursor: pointer;
    transition: all var(--ws-transition);
    white-space: nowrap;
}
.ws-theme-panel button:hover { background: var(--c-hover); color: var(--c-text); }
.ws-theme-panel button.active {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
    color: var(--c-accent);
    font-weight: 600;
}
.ws-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dot, #888); flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* ===================== 侧边栏遮挡修复 ===================== */
/* 禁用 mini-sidebar 的 hover 弹出面板（会遮挡文字） */
.sidebar-popup, .sidebar-popup.second { display: none !important; }

/* 侧边栏项 hover 样式重写（实色背景 + 清晰文字） */
.sidebar-menu-inner a, .sidebar-nav .flex-bottom a {
    position: relative;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-item { position: relative; }
.sidebar-item ul {
    position: relative;
    z-index: 3;
    background: transparent !important;
}
.sidebar-item > a {
    display: flex !important;
    align-items: center;
    line-height: 1.4 !important;
    min-height: 42px;
}
.sidebar-item > a:hover,
.sidebar-menu-inner a:hover,
.sidebar-nav .flex-bottom a:hover {
    color: var(--c-accent) !important;
    background: var(--c-accent-soft) !important;
}
.sidebar-item > a:hover::after { display: none; }
.sidebar-item > a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-item > a:hover span { color: var(--c-accent) !important; }

/* ===================== 侧边栏 ===================== */
.sidebar-nav, #sidebar { width: 220px !important; max-width: 220px !important; }
html[data-mode] .sidebar-nav-inner,
html[data-mode] .sidebar-nav { background: var(--c-sidebar) !important; border-right: 1px solid var(--c-border); }
.sidebar-logo { border-bottom: 1px solid var(--c-border) !important; padding: 20px 0; }
.sidebar-menu-inner a {
    color: var(--c-text-2) !important;
    border-radius: 10px; margin: 2px 12px;
    padding: 10px 16px !important;
    font-weight: 500; font-size: 14px;
    transition: all var(--ws-transition);
}
.sidebar-menu-inner a:hover, .sidebar-menu-inner a.active {
    color: var(--c-accent) !important;
    background: var(--c-accent-soft) !important;
}
.sidebar-menu-inner a i { opacity: .8; margin-right: 12px !important; color: inherit; }
.sidebar-menu ul ul { background: transparent; padding-left: 24px; margin: 0 12px 4px; }
.sidebar-menu ul ul a { font-size: 13px; padding: 0 12px !important; }
.ws-smart-search-entry a { color: var(--c-accent) !important; font-weight: 600; }

/* 折叠按钮 */
.ws-sidebar-toggle {
    position: absolute; top: 50%; right: -14px;
    transform: translateY(-50%);
    width: 28px; height: 44px;
    border: 1px solid var(--c-border); border-left: none;
    border-radius: 0 10px 10px 0;
    background: var(--c-card); color: var(--c-text-2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: all var(--ws-transition);
    z-index: 10;
    box-shadow: var(--c-shadow);
    opacity: 0; visibility: hidden;
    padding: 0;
}
.sidebar-nav:hover .ws-sidebar-toggle, .ws-sidebar-toggle.visible { opacity: 1; visibility: visible; }
.ws-sidebar-toggle:hover { color: var(--c-accent); border-color: var(--c-accent); }

body:not(.ws-folded) .sidebar-nav,
body:not(.ws-folded) #sidebar { width: 220px !important; max-width: 220px !important; }
body:not(.ws-folded) .main-content { margin-left: 220px !important; }
body:not(.ws-folded) .main-content .page-header { left: 220px !important; }

body.ws-folded .sidebar-nav,
body.ws-folded #sidebar {
    width: 0 !important; max-width: 0 !important;
    transform: translateX(-100%);
    border-right: none !important;
    overflow: hidden;
}
body.ws-folded .main-content { margin-left: 0 !important; }
body.ws-folded .main-content .page-header { left: 0 !important; }

#ws-sidebar-reopen {
    display: none;
    position: fixed; left: 10px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 52px;
    border: 1px solid var(--c-border);
    border-radius: 0 12px 12px 0;
    background: var(--c-card); color: var(--c-text-2);
    align-items: center; justify-content: center;
    cursor: pointer; z-index: 1000;
    box-shadow: var(--c-shadow);
    font-size: 13px;
    transition: all var(--ws-transition);
}
body.ws-folded #ws-sidebar-reopen { display: flex; }
#ws-sidebar-reopen:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ===================== Hero 区 ===================== */
.main-content { padding-bottom: 140px; }
/* godly 式排版：超大标题 + 紧字距 + 左对齐，统计信息收成底部小标签 */
.ws-hero { padding: 46px 0 10px; }
.ws-hero-title {
    font-size: clamp(32px, 4.8vw, 54px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.05;
    margin: 0 0 14px;
    background: var(--c-grad-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ws-hero-sub { color: var(--c-text-2); font-size: 15px; line-height: 1.65; margin: 0 0 18px; max-width: 62ch; }
.ws-hero-meta { display: inline-block; margin: 0; font-size: 12px; color: var(--c-text-2); }
.ws-hero-meta strong { color: var(--c-accent); font-size: 15px; font-weight: 700; }

/* 搜索框 */
.super-search-fm {
    background: var(--c-card) !important;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: var(--c-shadow);
    overflow: hidden;
    display: flex; align-items: center;
    height: 56px;
    transition: all var(--ws-transition);
}
.super-search-fm:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-soft); }
#search-text {
    background: transparent !important;
    color: var(--c-text) !important;
    border: none; outline: none;
    height: 100%; padding: 0 24px;
    font-size: 15px; width: 100%;
}
#search-text::placeholder { color: var(--c-text-2); opacity: .6; }
.super-search-fm .submit {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    margin: 0 8px 0 0;
    background: var(--c-grad-btn);
    color: var(--c-on-accent) !important;
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform var(--ws-transition);
    box-shadow: 0 4px 14px -4px var(--c-accent);
}
.super-search-fm .submit:hover { transform: scale(1.05); }

.hide-type-list { margin-top: 16px; }
.search-type { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.search-type label {
    padding: 6px 16px !important;
    line-height: 20px !important;
    border-radius: 99px !important;
    font-size: 13px; font-weight: 500;
    color: var(--c-text-2);
    background: transparent !important;
    border: 1px solid transparent;
    transition: all var(--ws-transition);
    cursor: pointer; margin: 0 !important;
}
.search-type input:checked + label {
    background: var(--c-accent-soft) !important;
    color: var(--c-accent) !important;
    font-weight: 600;
}
.search-type label:hover { color: var(--c-text); background: var(--c-hover) !important; }

/* 搜索建议 */
.ws-site-tips {
    position: absolute; left: 0; right: 0;
    top: calc(56px + 8px);
    z-index: 1050;
    text-align: left;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--ws-radius-sm);
    box-shadow: var(--c-shadow-hover);
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}
.ws-site-tips ul { list-style: none; margin: 0; padding: 6px; }
.ws-site-tips li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}
.ws-site-tips li:hover, .ws-site-tips li.current { background: var(--c-hover); }
.ws-site-tips .ws-tip-logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--c-bg-soft);
    flex: none;
}
.ws-site-tips .ws-tip-info { overflow: hidden; min-width: 0; flex: 1; }
.ws-site-tips .ws-tip-title { font-size: 14px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ws-site-tips .ws-tip-title mark { background: none; color: var(--c-accent); font-weight: 700; }
.ws-site-tips .ws-tip-url {
    font-size: 11.5px;
    color: var(--c-accent);
    font-family: "SF Mono", "Fira Code", monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; margin-top: 2px; opacity: .8;
}
.ws-site-tips .ws-tip-url mark { background: none; color: var(--c-accent); font-weight: 700; }
.ws-site-tips .ws-tip-desc { font-size: 12px; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 1px; }
.ws-site-tips .ws-tip-cat {
    font-size: 10px; color: var(--c-text-2);
    background: var(--c-bg-soft);
    border-radius: 4px; padding: 2px 6px;
    flex: none; white-space: nowrap;
}
.ws-site-tips .ws-tip-go { margin-left: auto; color: var(--c-text-2); font-size: 12px; opacity: 0; transition: opacity .15s; flex: none; }
.ws-site-tips li:hover .ws-tip-go { opacity: 1; color: var(--c-accent); }
.ws-site-tips .ws-tip-empty { text-align: center; padding: 24px 16px; color: var(--c-text-2); font-size: 13px; }
.ws-site-tips .ws-tip-empty i { display: block; font-size: 24px; margin-bottom: 8px; opacity: .4; }

/* ===================== 分类与卡片 ===================== */
/* 优设式：每个分类一个专属色，--cat 由模板按调色板分配（见 content_main.html） */
.ws-cat-head {
    display: flex; align-items: center; gap: 12px;
    padding: 34px 4px 14px;
    margin-top: 6px;
    scroll-margin-top: 90px;
}
.ws-cat-title {
    font-size: 17px; font-weight: 700;
    margin: 0 !important;
    color: var(--c-text);
    display: flex; align-items: center; gap: 10px;
    letter-spacing: -.01em;
}
.ws-cat-title::before {
    content: '';
    width: 3px; height: 15px; border-radius: 2px;
    background: var(--cat, var(--c-accent));
    flex: none;
}
.ws-cat-title > i { color: var(--cat, var(--c-accent)); font-size: 15px; opacity: .9; }
/* 侧栏分类锚点的落点。
   原来是 display: none —— 浏览器对 display:none 元素执行 scrollIntoView()
   不做任何滚动，所以点侧栏分类「完全没反应」（真实 bug）。
   改成 0 尺寸但留在文档流里的锚点（在 h4 内部，不会影响 flex 行）：
   看不见，却是合法的滚动目标。
   注：不用 position:absolute —— 它的祖先都没有 position，
   absolute 会挂到初始包含块上，落点反而错乱。
   scroll-margin-top 让它停在固定页头下方。 */
.ws-cat-marker {
    display: block;
    width: 0; height: 0;
    overflow: hidden;
    scroll-margin-top: 90px;
}
.ws-cat-count {
    font-size: 11px; font-weight: 600;
    font-family: var(--c-font-mono);
    color: var(--cat, var(--c-accent));
    background: color-mix(in srgb, var(--cat, var(--c-accent)) 14%, transparent);
    border-radius: 999px;
    padding: 2px 9px;
    line-height: 1.6;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .ws-cat-count { background: var(--c-accent-soft); color: var(--c-accent); }
}

html[data-mode] .url-card .card {
    background: var(--c-card) !important;
    border: 1px solid var(--c-border);
    border-radius: var(--ws-radius) !important;
    box-shadow: none;
    height: 100%;
    transition: all var(--ws-transition);
}
.url-card .url-body:hover { transform: none; }
html[data-mode] .url-card .url-body:hover .card {
    border-color: var(--c-accent);
    box-shadow: var(--c-hover-glow);
    transform: translateY(-3px);
}
html[data-mode] .url-card .card-body { padding: 16px; }
html[data-mode] .url-card .url-img {
    width: 40px; height: 40px;
    background: var(--c-bg-soft);
    border-radius: calc(var(--ws-radius-sm) - 2px);
    flex: none; overflow: hidden;
}
.url-card .url-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.url-card .url-info strong { color: var(--c-text); font-size: 14px; font-weight: 600; transition: color var(--ws-transition); }
.url-card .url-body:hover .url-info strong { color: var(--c-accent); }
.url-card .url-info p { color: var(--c-text-2); margin-top: 4px; font-size: 12px; line-height: 1.5; }
.url-card a.togo {
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--c-bg-soft);
    color: var(--c-text-2);
    opacity: 0;
    transition: all var(--ws-transition);
    z-index: 2;
    text-align: center;
}
.url-card .url-body:hover a.togo { opacity: 1; }
.url-card a.togo:hover { color: var(--c-accent); background: var(--c-accent-soft); }

/* 悬浮网址条 */
.url-hover-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 28px;
    background: linear-gradient(to top, var(--c-card) 60%, transparent);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px;
    opacity: 0; transform: translateY(4px);
    transition: all var(--ws-transition);
    pointer-events: none; z-index: 3;
    border-radius: 0 0 var(--ws-radius) var(--ws-radius);
}
.url-card .url-body:hover .url-hover-bar { opacity: 1; transform: translateY(0); }
.url-hover-text {
    font-size: 11.5px; color: var(--c-accent); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
    font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
    letter-spacing: .02em;
}
.url-hover-icon { font-size: 11px; color: var(--c-accent); margin-left: 6px; flex: none; opacity: .7; }

/* 列宽 */
.col-xl-5a { flex: 0 0 20%; max-width: 20%; }
.col-xxl-6a { flex: 0 0 16.666667%; max-width: 16.666667%; }
@media (min-width: 1400px) {
    .col-xxl-6a { flex: 0 0 14.285714%; max-width: 14.285714%; }
}

/* ===================== 友情链接 ===================== */
html[data-mode] .friendlink.card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--ws-radius);
    box-shadow: none;
}
.friendlink a {
    display: inline-flex; align-items: center;
    margin: 6px 8px 6px 0;
    padding: 6px 14px;
    border: 1px solid var(--c-border);
    border-radius: 99px;
    color: var(--c-text-2) !important;
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: all var(--ws-transition);
    background: transparent;
}
.friendlink a:hover {
    color: var(--c-accent) !important;
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
}

/* ===================== 底部 ===================== */
footer.main-footer { background: transparent !important; border-top: 1px solid var(--c-border) !important; padding: 24px 0; }
footer.main-footer .footer-text a { color: var(--c-text-2); }
#footer-tools .btn {
    background: var(--c-card) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text-2);
    box-shadow: var(--c-shadow) !important;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--ws-transition);
}
#footer-tools .btn:hover { color: var(--c-accent); border-color: var(--c-accent); transform: translateY(-2px); }

/* ===================== 底部悬浮搜索框 Dock（搜索 + 滚动条） ===================== */
.ws-dock {
    position: fixed;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    width: min(720px, 92vw);
    z-index: 9998;
    display: flex; align-items: center; gap: 12px;
    padding: 8px;
    box-sizing: border-box;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 22px;
    box-shadow: var(--c-shadow-hover);
    transition: border-color var(--ws-transition), box-shadow var(--ws-transition);
}
.ws-dock:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 10px 30px -8px var(--c-accent-soft), var(--c-shadow-hover);
}

/* Dock 内搜索框：紧凑左栏 */
.ws-dock .s-search.ws-search {
    position: relative;
    flex: 0 0 300px;
    width: 300px;
    margin: 0;
}
.ws-dock .s-search.ws-search .super-search-fm { height: 46px; border-radius: 14px; }
.ws-dock .s-search.ws-search #search-text { padding: 0 14px; font-size: 14px; }
.ws-dock .s-search.ws-search .super-search-fm .submit {
    width: 38px; height: 38px;
    margin-right: 4px; border-radius: 11px;
}
/* 搜索引擎切换：输入聚焦时向上弹出 */
.ws-dock .s-search.ws-search .hide-type-list {
    position: absolute;
    left: 0; right: 0; bottom: calc(100% + 8px);
    margin: 0;
    display: none;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--ws-radius-sm);
    box-shadow: var(--c-shadow-hover);
    padding: 10px;
}
.ws-dock .s-search.ws-search:focus-within .hide-type-list { display: block; }
.ws-dock .s-search.ws-search .hide-type-list .search-group { padding-left: 0; }
.ws-dock .s-search.ws-search .hide-type-list .search-type { justify-content: flex-start; }
/* 站内建议：向上弹出，避免被底栏遮挡 */
.ws-dock .s-search.ws-search .ws-site-tips {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0; right: 0;
    max-height: 46vh;
}

/* Dock 内横向滚动条：弹性填充右侧 */
.ws-dock .ws-scroll-bar {
    position: static;
    transform: none;
    width: auto;
    flex: 1;
    margin: 0;
    height: 14px;
    opacity: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 2px;
}
.ws-dock .ws-scroll-bar:hover, .ws-dock .ws-scroll-bar.active {
    height: 16px;
    border: none;
    box-shadow: none;
}
.ws-dock .ws-scroll-track {
    background: var(--c-hover);
    border-radius: 99px;
}
.ws-scroll-track { width: 100%; height: 100%; position: relative; box-sizing: border-box; }
.ws-scroll-thumb {
    position: absolute; top: 2px; left: 4px;
    height: calc(100% - 4px);
    min-width: 72px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
    border-radius: 99px;
    cursor: grab;
    transition: box-shadow var(--ws-transition);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.ws-scroll-thumb::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 4px;
    background: rgba(255,255,255,.55);
    border-radius: 4px;
}
.ws-scroll-thumb:hover { box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.ws-scroll-thumb:active { cursor: grabbing; }

/* 独立使用的滚动条（无 Dock 兜底） */
.ws-scroll-bar {
    position: fixed; bottom: 12px; left: 50%;
    transform: translateX(-50%);
    width: min(640px, 90vw); height: 16px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 99px;
    z-index: 9999;
    cursor: pointer;
    box-shadow: var(--c-shadow-hover);
    opacity: .92;
    transition: all var(--ws-transition);
    display: flex; align-items: center;
    padding: 0 4px;
    box-sizing: border-box;
}
.ws-scroll-bar:hover, .ws-scroll-bar.active {
    opacity: 1; height: 20px;
    border-color: var(--c-accent);
    box-shadow: 0 4px 20px -4px var(--c-accent-soft);
}
.ws-scroll-pct {
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%);
    font-size: 12px; font-weight: 700;
    color: var(--c-text);
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 4px 10px;
    box-shadow: var(--c-shadow-hover);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    font-family: "SF Mono", "Fira Code", monospace;
}
.ws-scroll-bar:hover .ws-scroll-pct, .ws-scroll-bar.active .ws-scroll-pct { opacity: 1; }

/* ===================== 智能找站悬浮面板 ===================== */
.ws-search-modal {
    position: fixed;
    top: calc(var(--ws-header-h, 60px) + 14px);
    left: 240px;
    z-index: 9998;
    width: min(360px, calc(100vw - 32px));
    display: none;
}
body.ws-folded .ws-search-modal { left: 16px; }
@media (max-width: 767.98px) {
    .ws-search-modal { left: 12px; right: 12px; transform: none; top: 72px; width: auto; }
    body.ws-folded .ws-search-modal { left: 12px; right: 12px; }
}
.ws-search-modal.open { display: block; }
.ws-search-modal-backdrop {
    position: fixed; inset: 0;
    background: transparent;
    z-index: -1;
}
.ws-search-modal-box {
    position: relative;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--ws-radius);
    box-shadow: var(--c-shadow-hover);
    overflow: visible;
    animation: ws-pop-in .28s cubic-bezier(.2, .9, .3, 1.2);
}
.ws-search-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 6px;
}
.ws-search-modal-title {
    font-size: 16px; font-weight: 700; color: var(--c-text);
    display: inline-flex; align-items: center; gap: 8px;
}
.ws-search-modal-title i { color: var(--c-accent); }
.ws-search-modal-close {
    width: 32px; height: 32px;
    border: none; border-radius: 9px;
    background: var(--c-hover);
    color: var(--c-text-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: all var(--ws-transition);
}
.ws-search-modal-close:hover { color: var(--c-accent); background: var(--c-accent-soft); }
.ws-search-modal-body { padding: 6px 16px 16px; position: relative; }
.ws-modal-fm {
    background: var(--c-card) !important;
    border: 1px solid var(--c-border);
    border-radius: calc(var(--ws-radius-sm) - 2px);
    box-shadow: var(--c-shadow);
    overflow: hidden;
    display: flex; align-items: center;
    height: 46px;
}
.ws-modal-fm:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-soft); }
#ws-modal-search-input {
    background: transparent !important;
    color: var(--c-text) !important;
    border: none; outline: none;
    height: 100%; padding: 0 14px;
    font-size: 15px; width: 100%;
}
#ws-modal-search-input::placeholder { color: var(--c-text-2); opacity: .6; }
.ws-modal-fm .submit {
    flex: none; width: 40px; height: 40px;
    border-radius: calc(var(--ws-radius-sm) - 4px);
    margin: 0 6px 0 0;
    background: var(--c-grad-btn);
    color: var(--c-on-accent) !important;
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform var(--ws-transition);
}
.ws-modal-fm .submit:hover { transform: scale(1.05); }
#ws-modal-site-tips {
    position: relative; top: auto; left: auto; right: auto;
    margin-top: 8px;
    box-shadow: none;
    border: 1px solid var(--c-border);
    max-height: 46vh;
    z-index: 5;
}

@keyframes ws-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-pop-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===================== 响应式 ===================== */
@media (max-width: 767.98px) {
    .sidebar-nav { width: 260px; }
    .ws-sidebar-toggle { display: none; }
    #ws-sidebar-reopen { display: none !important; }
    section.ws-hero { padding: 30px 0 20px; }
    .ws-hero-title { font-size: 28px; }
    .ws-cat-title { font-size: 16px; }
    .col-xl-5a, .col-xxl-6a { flex: 0 0 50%; max-width: 50%; }
    /* 底部悬浮搜索框移动端堆叠 */
    .main-content { padding-bottom: 190px; }
    .ws-dock {
        width: 94vw; bottom: 8px;
        flex-wrap: wrap;
    }
    .ws-dock .s-search.ws-search { flex: 1 1 100%; width: 100%; }
    .ws-dock .ws-scroll-bar { flex: 1 1 100%; height: 12px; }
    .ws-dock .ws-scroll-bar:hover, .ws-dock .ws-scroll-bar.active { height: 14px; }
    .ws-scroll-thumb { min-width: 48px; }
    .ws-search-modal { top: 72px; }
}

/* ===================== 壁纸功能 ===================== */
/* 壁纸覆盖层（在 body 背景之上，内容之下） */
body.ws-has-wallpaper {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    transition: background-image 1s ease;
}
body.ws-has-wallpaper::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(8, 12, 20, var(--ws-wp-darken, .25));
    backdrop-filter: blur(var(--ws-wp-blur, 0px));
    -webkit-backdrop-filter: blur(var(--ws-wp-blur, 0px));
    transition: background-color .5s;
}

/* 壁纸按钮 */
.ws-wallpaper { position: relative; }

/* 壁纸面板 */
.ws-wallpaper-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1200;
    width: 300px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: var(--c-shadow-hover);
    padding: 16px;
    display: none;
}
.ws-wallpaper-panel.open { display: block; animation: ws-pop-in .25s cubic-bezier(.2, .9, .3, 1.1); }
.ws-wallpaper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ws-wallpaper-head span { font-size: 14px; font-weight: 700; color: var(--c-text); }
.ws-wallpaper-clear {
    border: none;
    background: var(--c-hover);
    color: var(--c-text-2);
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: all var(--ws-transition);
}
.ws-wallpaper-clear:hover { color: var(--c-accent); background: var(--c-accent-soft); }

.ws-wallpaper-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.ws-wp-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px dashed var(--c-border);
    border-radius: 12px;
    background: var(--c-bg-soft);
    color: var(--c-text-2);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--ws-transition);
}
.ws-wp-btn i { font-size: 18px; color: var(--c-accent); }
.ws-wp-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: var(--c-accent-soft);
}

.ws-wallpaper-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ws-wp-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--c-text-2);
}
.ws-wp-opt input[type="range"] {
    flex: 1;
    max-width: 120px;
    accent-color: var(--c-accent);
    height: 4px;
}
.ws-wp-opt select {
    flex: 1;
    max-width: 120px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    color: var(--c-text);
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
}

.ws-wallpaper-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
    max-height: 120px;
    overflow-y: auto;
}
.ws-wp-thumb {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--ws-transition);
}
.ws-wp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-wp-thumb.active { border-color: var(--c-accent); }
.ws-wp-thumb:hover { transform: scale(1.05); }
.ws-wp-thumb .ws-wp-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 9px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
}
.ws-wp-thumb:hover .ws-wp-del { opacity: 1; }

.ws-wallpaper-tip {
    font-size: 11px;
    color: var(--c-text-2);
    line-height: 1.5;
    opacity: .8;
}

/* 移动端壁纸面板 */
@media (max-width: 767.98px) {
    .ws-wallpaper-panel {
        position: fixed;
        top: 60px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* ===================== 单页正文（关于等，原 single.html 内联样式） ===================== */
.ws-single .content { font-size: 14px; }
.ws-single .content a { color: #007bff; }
.ws-single .content a:hover { color: #f1404b; }
.ws-single .content h1,
.ws-single .content h2,
.ws-single .content h3,
.ws-single .content h4 { margin: 15px 15px 15px 0; }
.ws-single .content p { line-height: 1.5; margin: 15px 0; }
.ws-single img { max-width: 100%; }

/* ===================== 常用推荐 · 悬浮站点缩略图海报 ===================== */
.ws-poster-pop {
    position: fixed;
    z-index: 99999;
    width: 344px;
    max-width: 88vw;
    background: var(--c-card, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .22);
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease, visibility .18s ease;
    transform: translateY(0);
}
.ws-poster-pop.hide {
    opacity: 0;
    visibility: hidden;
}
.ws-poster-pop .ws-poster-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--c-border, rgba(0, 0, 0, .06));
    background: var(--c-card-hover, #fff);
}
.ws-poster-pop .ws-poster-fav {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
    flex: 0 0 auto;
}
.ws-poster-pop .ws-poster-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text, #121212);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-poster-pop .ws-poster-shot {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #ececec;
}
.ws-poster-pop .ws-poster-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}
.ws-poster-load {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    aspect-ratio: 16 / 10;
    color: #999;
    font-size: 12px;
    background: #f4f5f7;
}
.ws-poster-load::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #c9ccd4;
    border-top-color: #4093fb;
    border-radius: 50%;
    animation: ws-spin .8s linear infinite;
}
@keyframes ws-spin {
    to { transform: rotate(360deg); }
}

/* ===================== 内置图案背景预设 ===================== */
body[class*="bg-preset-"] {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
/* ---- 极光意境 ---- */
body.bg-preset-aurora {
    background-color: #070b18;
    background-image:
        radial-gradient(55rem 30rem at 8% -6%, rgba(124, 93, 250, .34), transparent 62%),
        radial-gradient(48rem 28rem at 108% 2%, rgba(0, 190, 255, .30), transparent 62%),
        radial-gradient(60rem 42rem at 46% 120%, rgba(40, 198, 135, .22), transparent 62%),
        linear-gradient(180deg, #0a1020, #050815);
}
html[data-mode="light"] body.bg-preset-aurora {
    background-color: #f2f5ff;
    background-image:
        radial-gradient(55rem 30rem at 8% -6%, rgba(124, 93, 250, .16), transparent 62%),
        radial-gradient(48rem 28rem at 108% 2%, rgba(0, 150, 210, .15), transparent 62%),
        radial-gradient(60rem 42rem at 46% 120%, rgba(40, 180, 120, .14), transparent 62%),
        linear-gradient(180deg, #eef3ff, #fafbff);
}
/* ---- 霓虹矩阵 ---- */
body.bg-preset-mesh {
    background-color: #0a0a12;
    background-image:
        conic-gradient(from 140deg at 20% 12%, rgba(255, 45, 149, .25), transparent 40%, rgba(0, 229, 255, .28), transparent 70%, rgba(255,45,149,.22)),
        conic-gradient(from 320deg at 85% 88%, rgba(0, 229, 255, .22), transparent 45%, rgba(124, 80, 255, .26), transparent 75%, rgba(0,229,255,.2)),
        linear-gradient(180deg, #0a0a12, #06060c);
}
html[data-mode="light"] body.bg-preset-mesh {
    background-color: #f7f2fa;
    background-image:
        conic-gradient(from 140deg at 20% 12%, rgba(255, 45, 149, .14), transparent 40%, rgba(0, 180, 220, .16), transparent 70%, rgba(255,45,149,.12)),
        conic-gradient(from 320deg at 85% 88%, rgba(0, 180, 220, .14), transparent 45%, rgba(124, 80, 255, .15), transparent 75%, rgba(0,180,220,.12)),
        linear-gradient(180deg, #faf3fd, #ffffff);
}
/* ---- 科技网格 ---- */
body.bg-preset-grid {
    background-color: #09101d;
    background-image:
        linear-gradient(rgba(0, 229, 255, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, .10) 1px, transparent 1px),
        linear-gradient(rgba(0, 229, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, .05) 1px, transparent 1px),
        radial-gradient(70rem 40rem at 50% 0%, rgba(0, 80, 160, .35), transparent 70%),
        linear-gradient(180deg, #0a1424, #070d18);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover;
}
html[data-mode="light"] body.bg-preset-grid {
    background-color: #eef4fb;
    background-image:
        linear-gradient(rgba(0, 120, 200, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 120, 200, .10) 1px, transparent 1px),
        linear-gradient(rgba(0, 120, 200, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 120, 200, .06) 1px, transparent 1px),
        radial-gradient(70rem 40rem at 50% 0%, rgba(0, 120, 200, .10), transparent 70%),
        linear-gradient(180deg, #eef4fb, #fbfdff);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover;
}
/* ---- 波点气泡 ---- */
body.bg-preset-dots {
    background-color: #0e0a1e;
    background-image:
        radial-gradient(rgba(180, 140, 255, .35) 1.5px, transparent 2px),
        radial-gradient(rgba(180, 140, 255, .18) 1.2px, transparent 1.6px),
        radial-gradient(60rem 42rem at 20% 110%, rgba(120, 60, 220, .30), transparent 60%),
        linear-gradient(180deg, #171030, #0a0716);
    background-size: 22px 22px, 11px 11px, cover, cover;
}
html[data-mode="light"] body.bg-preset-dots {
    background-color: #faf6ff;
    background-image:
        radial-gradient(rgba(120, 80, 220, .30) 1.5px, transparent 2px),
        radial-gradient(rgba(120, 80, 220, .16) 1.2px, transparent 1.6px),
        radial-gradient(60rem 42rem at 20% 110%, rgba(120, 60, 220, .14), transparent 60%),
        linear-gradient(180deg, #f4edff, #ffffff);
    background-size: 22px 22px, 11px 11px, cover, cover;
}
/* ---- 璀璨星野 ---- */
body.bg-preset-stars {
    background-color: #05060c;
    background-image:
        radial-gradient(2px 2px at 18% 26%, rgba(255, 255, 255, .9), transparent 50%),
        radial-gradient(2px 2px at 34% 12%, rgba(160, 220, 255, .9), transparent 50%),
        radial-gradient(1.6px 1.6px at 52% 34%, rgba(255, 255, 255, .8), transparent 50%),
        radial-gradient(1.6px 1.6px at 70% 18%, rgba(255, 220, 200, .8), transparent 50%),
        radial-gradient(2px 2px at 84% 30%, rgba(190, 200, 255, .8), transparent 50%),
        radial-gradient(1.6px 1.6px at 28% 60%, rgba(255, 255, 255, .7), transparent 50%),
        radial-gradient(2px 2px at 62% 66%, rgba(255, 255, 255, .7), transparent 50%),
        radial-gradient(1.6px 1.6px at 88% 62%, rgba(160, 220, 255, .7), transparent 50%),
        radial-gradient(70rem 44rem at 50% 118%, rgba(90, 80, 200, .28), transparent 60%),
        linear-gradient(180deg, #070a18, #04060e);
    background-size: auto, auto, auto, auto, auto, auto, auto, auto, cover, cover;
}
html[data-mode="light"] body.bg-preset-stars {
    background-color: #f4f6ff;
    background-image:
        radial-gradient(2px 2px at 18% 26%, rgba(40, 70, 140, .6), transparent 50%),
        radial-gradient(2px 2px at 34% 12%, rgba(90, 130, 200, .6), transparent 50%),
        radial-gradient(1.6px 1.6px at 52% 34%, rgba(50, 70, 130, .5), transparent 50%),
        radial-gradient(70rem 44rem at 50% 118%, rgba(90, 110, 220, .14), transparent 60%),
        linear-gradient(180deg, #eef2ff, #fdfdff);
    background-size: auto, auto, auto, auto, cover, cover;
}
/* ---- 律动波纹 ---- */
body.bg-preset-waves {
    background-color: #04130f;
    background-image:
        repeating-radial-gradient(circle at 0% 100%, transparent -8%, rgba(0, 200, 170, .10) -2%, transparent 4%, transparent 10%, rgba(0, 180, 170, .12) 15%, transparent 22%),
        repeating-radial-gradient(circle at 100% 0%, transparent -14%, rgba(0, 220, 190, .10) 4%, transparent 12%, rgba(0, 200, 170, .12) 22%, transparent 32%),
        radial-gradient(70rem 42rem at 50% 120%, rgba(0, 160, 140, .22), transparent 62%),
        linear-gradient(180deg, #062019, #031009);
}
html[data-mode="light"] body.bg-preset-waves {
    background-color: #edfbf7;
    background-image:
        repeating-radial-gradient(circle at 0% 100%, transparent -8%, rgba(0, 140, 120, .10) -2%, transparent 4%, transparent 10%, rgba(0, 130, 120, .12) 15%, transparent 22%),
        repeating-radial-gradient(circle at 100% 0%, transparent -14%, rgba(0, 150, 130, .10) 4%, transparent 12%, rgba(0, 140, 120, .12) 22%, transparent 32%),
        radial-gradient(70rem 42rem at 50% 120%, rgba(0, 140, 120, .12), transparent 62%),
        linear-gradient(180deg, #e6f9f2, #fbfffd);
}
/* ---- 碳纹斜纹 ---- */
body.bg-preset-carbon {
    background-color: #101014;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 12px, transparent 12px 24px),
        radial-gradient(60rem 40rem at 50% -10%, rgba(80, 90, 140, .25), transparent 65%),
        linear-gradient(180deg, #16161c, #0b0b10);
}
html[data-mode="light"] body.bg-preset-carbon {
    background-color: #f2f2f4;
    background-image:
        repeating-linear-gradient(45deg, rgba(20, 20, 30, .035) 0 12px, transparent 12px 24px),
        repeating-linear-gradient(-45deg, rgba(20, 20, 30, .025) 0 12px, transparent 12px 24px),
        radial-gradient(60rem 40rem at 50% -10%, rgba(80, 90, 140, .10), transparent 65%),
        linear-gradient(180deg, #f7f7f9, #fefefe);
}
/* ---- 素纸微格 ---- */
body.bg-preset-paper {
    background-color: #f6f5f2;
    background-image:
        linear-gradient(rgba(20, 20, 20, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 20, 20, .05) 1px, transparent 1px),
        radial-gradient(50rem 30rem at 80% 0%, rgba(200, 170, 120, .10), transparent 60%),
        linear-gradient(180deg, #faf9f6, #f2f0ea);
    background-size: 28px 28px, 28px 28px, cover, cover;
}
html[data-mode="dark"] body.bg-preset-paper {
    background-color: #141218;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
        radial-gradient(50rem 30rem at 80% 0%, rgba(200, 170, 120, .08), transparent 60%),
        linear-gradient(180deg, #19161d, #0f0d12);
    background-size: 28px 28px, 28px 28px, cover, cover;
}

/* ---- 面板里的内置图案选择网格 ---- */
.ws-wallpaper-sec {
    padding: 2px 14px 4px;
    margin-top: 12px;
    border-top: 1px solid var(--c-border, rgba(0, 0, 0, .06));
}
.ws-wallpaper-sec-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-2, #666);
    margin: 10px 0 8px;
}
.ws-bg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ws-bg-swatch {
    position: relative;
    height: 46px;
    border-radius: 9px;
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    background-color: #333;
    background-size: cover;
    background-position: center;
    background-attachment: local;
    outline: none;
    transition: border-color .15s, transform .15s;
}
.ws-bg-swatch:hover { transform: scale(1.04); }
.ws-bg-swatch.active { border-color: #4093fb; }
.ws-bg-swatch .lbl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1px 0 3px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, .38);
    white-space: nowrap;
    overflow: hidden;
}
.ws-bg-swatch[data-bg="aurora"] {
    background-image: radial-gradient(120% 120% at 15% 0%, #7c5dff, transparent 60%), radial-gradient(120% 120% at 120% 20%, #00beff, transparent 60%), radial-gradient(120% 140% at 50% 120%, #28c687, transparent 60%), #0a1020;
}
.ws-bg-swatch[data-bg="mesh"] {
    background-image: conic-gradient(from 140deg at 20% 15%, #ff2d95, transparent 40%, #00e5ff, transparent 70%, #7c50ff), #0a0a12;
}
.ws-bg-swatch[data-bg="grid"] {
    background-image: linear-gradient(rgba(0, 229, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, .35) 1px, transparent 1px), radial-gradient(120% 120% at 50% 0%, rgba(0, 80, 160, .8), transparent 70%), #0a1424;
    background-size: 10px 10px, 10px 10px, cover, cover;
}
.ws-bg-swatch[data-bg="dots"] {
    background-image: radial-gradient(rgba(220, 190, 255, .8) 2px, transparent 2px), radial-gradient(rgba(220, 190, 255, .5) 2px, transparent 2px), #171030;
    background-size: 14px 14px, 7px 7px, cover, cover;
}
.ws-bg-swatch[data-bg="stars"] {
    background-image: radial-gradient(2px 2px at 20% 25%, #fff, transparent 60%), radial-gradient(2px 2px at 60% 40%, #cfe8ff, transparent), radial-gradient(2px 2px at 80% 20%, #fff, transparent), radial-gradient(2px 2px at 40% 70%, #fff, transparent), #05060c;
}
.ws-bg-swatch[data-bg="waves"] {
    background-image: repeating-radial-gradient(circle at 0% 100%, transparent -8%, rgba(0, 200, 170, .5) -2%, transparent 5%), #04130f;
}
.ws-bg-swatch[data-bg="carbon"] {
    background-image: repeating-linear-gradient(45deg, #2a2a31 0 6px, #18181d 6px 12px), #101014;
}
.ws-bg-swatch[data-bg="paper"] {
    background-image: linear-gradient(rgba(20, 20, 20, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 20, 20, .3) 1px, transparent 1px), #f6f5f2;
    background-size: 10px 10px, 10px 10px, cover, cover;
}

/* =====================================================================
   智能找站：悬浮按钮（.ws-fab）
   侧边栏的入口在折叠后点不到，这个按钮固定在右下角，任何时候都能开弹窗。
   z-index 比 .ws-dock（9998）低一点，避免挡住底部搜索框；
   但要比普通内容高。弹窗自己是 9998。
   ===================================================================== */
.ws-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9990;
    width: 52px;
    height: 52px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: var(--c-card);
    color: var(--c-accent);
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--c-shadow-hover);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
                border-color var(--ws-transition), background var(--ws-transition);
    /* 自己成一个层，避免拖动/滚动时反复重绘 */
    will-change: transform;
}
.ws-fab:hover,
.ws-fab:focus-visible {
    border-color: var(--c-accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -8px var(--c-accent-soft), var(--c-shadow-hover);
}
.ws-fab:active { transform: translateY(-1px) scale(.96); }
.ws-fab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* 折叠侧边栏 / 窄屏时不要盖住底部 Dock —— Dock 在窄屏是左右铺开的 */
@media (max-width: 767.98px) {
    .ws-fab { right: 14px; bottom: 88px; width: 46px; height: 46px; font-size: 16px; }
}
/* 弹窗打开时把按钮让出去，避免和遮罩抢视觉焦点。
   .ws-fab 是 .ws-search-modal 的紧邻后继兄弟（见 content_footer.html），所以 ~ 有效。 */
.ws-search-modal.open ~ .ws-fab { opacity: 0; pointer-events: none; }

/* =====================================================================
   背景光晕跟随鼠标
   做法：body::before 是 position:fixed; z-index:-1 的独立层，
   在上面再叠一层以鼠标位置为中心的径向光晕。
   由 footer.html 里一个 pointermove 监听写入 --c-mx / --c-my（单位 %），
   CSS 只负责画 —— 不在 JS 里改 style.background，避免每帧拼字符串。
   ===================================================================== */
:root {
    --c-mx: 50%;
    --c-my: 50%;
    /* 鼠标光晕强度：比静态光晕稍弱，避免喧宾夺主 */
    --c-bg-glow-mouse-strength: 10%;
    --c-bg-glow-mouse: radial-gradient(
        600px circle at var(--c-mx) var(--c-my),
        color-mix(in srgb, var(--c-accent) var(--c-bg-glow-mouse-strength), transparent),
        transparent 70%
    );
}
html[data-mode="dark"] {
    --c-bg-glow-mouse-strength: 16%;
}
/* 鼠标光晕作为最上面一层追加（图层数 +1，body::before 的清单也要跟着加） */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--c-bg-glow-mouse);
    opacity: 0;
    transition: opacity 600ms ease;
}
/* 只有鼠标真的动过才显示，避免页面一载入就在正中亮一块 */
body.ws-mouse-active::after { opacity: 1; }
/* minimal 主题是刻意纯平的，跟随也关掉，保持一致 */
html[data-theme="minimal"] body::after { display: none; }

/* 无障碍：用户要求减少动效时全部关掉 */
@media (prefers-reduced-motion: reduce) {
    .ws-fab,
    .ws-fab:hover,
    .ws-fab:focus-visible,
    .ws-fab:active { transition: none; transform: none; }
    body::after { display: none; }
}

/* =====================================================================
   Hero 天气卡片 + 日历卡片
   两块并排（天气在左、日历在右），窄屏堆叠。
   颜色全部走主题变量（--c-card / --c-border / --c-accent…），
   所以 9 套主题 × 明暗 2 模式自动适配，不需要为每套主题单独写。
   ===================================================================== */
.ws-hero-widgets {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 22px;
}
/* 实际布局由 partial 输出顺序决定：weather 先、calendar 后 */

/* ---------- 天气卡片 ---------- */
.ws-hero-weather-card,
.ws-hero-calendar-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    padding: 16px 18px;
    box-sizing: border-box;
    text-align: left;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    box-shadow: var(--c-shadow);
    transition: border-color var(--ws-transition), box-shadow var(--ws-transition),
                transform var(--ws-transition);
}
.ws-hero-weather-card:hover,
.ws-hero-calendar-card:hover {
    border-color: var(--c-border-glow, var(--c-accent));
    box-shadow: var(--c-shadow-hover);
    transform: translateY(-2px);
}

/* ---------- 天气：顶栏（城市 + 定位）---------- */
.ws-hwc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.ws-hwc-city { position: relative; display: flex; align-items: center; gap: 6px; }
.ws-hwc-city-wrap { position: relative; }
.ws-hwc-city-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color var(--ws-transition), color var(--ws-transition);
}
.ws-hwc-city-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.ws-hwc-city-btn .fa-map-marker-alt { color: var(--c-accent); }
.ws-hwc-locate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    color: var(--c-text-sub, var(--c-text));
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    cursor: pointer;
    transition: border-color var(--ws-transition), color var(--ws-transition);
}
.ws-hwc-locate-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.ws-hwc-update {
    font-size: 11px;
    color: var(--c-text-sub, var(--c-text));
    opacity: .75;
    white-space: nowrap;
}

/* ---------- 天气：城市下拉 ---------- */
.ws-hwc-city-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    width: 260px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: var(--c-shadow-hover);
    display: none;
}
.ws-hwc-city-dropdown.open { display: block; }
.ws-hwc-city-search {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 10px;
}
.ws-hwc-city-search .fa-search { color: var(--c-text-sub, var(--c-text)); font-size: 12px; }
.ws-hwc-city-search input {
    flex: 1; min-width: 0;
    font-size: 13px;
    color: var(--c-text);
    background: transparent;
    border: 0; outline: 0;
}
.ws-hwc-city-hot-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--c-text-sub, var(--c-text));
    opacity: .8;
}
.ws-hwc-city-hot-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-hwc-city-hot-list button {
    padding: 4px 10px;
    font-size: 12px;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--ws-transition), color var(--ws-transition), background var(--ws-transition);
}
.ws-hwc-city-hot-list button:hover,
.ws-hwc-city-hot-list button.active {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

/* ---------- 天气：主体 ---------- */
.ws-hwc-main {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.ws-hwc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    flex: 0 0 56px;
    font-size: 30px;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    border-radius: 16px;
    /* 特殊天气时换色，见下方 .ws-hwc-icon 的状态类 */
    transition: color var(--ws-transition), background var(--ws-transition);
}
.ws-hwc-temp-wrap { display: flex; align-items: flex-start; line-height: 1; }
.ws-hwc-temp { font-size: 34px; font-weight: 600; color: var(--c-text); }
.ws-hwc-unit { font-size: 14px; margin-top: 4px; color: var(--c-text-sub, var(--c-text)); }
.ws-hwc-meta { display: flex; flex-direction: column; gap: 2px; margin-left: auto; text-align: right; }
.ws-hwc-desc { font-size: 13px; font-weight: 500; color: var(--c-text); }
.ws-hwc-range { font-size: 12px; color: var(--c-text-sub, var(--c-text)); }

/* ---------- 天气：详情行 ---------- */
.ws-hwc-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding-top: 10px;
    margin-bottom: 12px;
    border-top: 1px solid var(--c-border);
}
.ws-hwc-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: var(--c-text-sub, var(--c-text));
    flex: 1;
}
.ws-hwc-detail-item i { font-size: 12px; color: var(--c-accent); }
.ws-hwc-value { font-size: 12px; font-weight: 500; color: var(--c-text); }

/* ---------- 天气：3 日预报 ---------- */
.ws-hwc-forecast {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
}
.ws-hwc-fc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    padding: 6px 4px;
    font-size: 11px;
    color: var(--c-text-sub, var(--c-text));
    background: var(--c-bg);
    border-radius: 10px;
}
.ws-hwc-fc-item i { font-size: 15px; color: var(--c-accent); }
.ws-hwc-fc-temp { color: var(--c-text); font-weight: 500; }

/* 特殊天气图案提示：按天气等级换背景渐变，让"特殊天气"一眼看出来 */
.ws-hwc-icon[data-wx="rain"],
.ws-hwc-icon[data-wx="drizzle"] {
    color: #4093fb;
    background: color-mix(in srgb, #4093fb 14%, transparent);
}
.ws-hwc-icon[data-wx="storm"] {
    color: #c2a0ff;
    background: color-mix(in srgb, #c2a0ff 16%, transparent);
}
.ws-hwc-icon[data-wx="snow"] {
    color: #7fd1f0;
    background: color-mix(in srgb, #7fd1f0 15%, transparent);
}
.ws-hwc-icon[data-wx="fog"] {
    color: #9aa4b2;
    background: color-mix(in srgb, #9aa4b2 14%, transparent);
}
.ws-hwc-icon[data-wx="sun"] {
    color: #ff980f;
    background: color-mix(in srgb, #ff980f 15%, transparent);
}
/* 极端天气（暴雨/雷暴/大雪/高温/严寒）：加脉冲呼吸，做视觉强调 */
.ws-hwc-icon[data-wx-severe="1"] { animation: ws-wx-pulse 2.4s ease-in-out infinite; }
@keyframes ws-wx-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .ws-hwc-icon[data-wx-severe="1"] { animation: none; }
}

/* 骨架脉冲（加载中） */
.skeleton-pulse { animation: ws-skeleton 1.4s ease-in-out infinite; }
@keyframes ws-skeleton { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skeleton-pulse { animation: none; } }

/* ---------- 日历卡片 ---------- */
.ws-cc-banner {
    padding: 6px 12px;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 500;
    text-align: center;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    border-radius: 10px;
}
.ws-cc-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.ws-cc-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    color: var(--c-text-sub, var(--c-text));
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    transition: border-color var(--ws-transition), color var(--ws-transition);
}
.ws-cc-nav:hover { border-color: var(--c-accent); color: var(--c-accent); }
.ws-cc-title-wrap { flex: 1; text-align: center; }
.ws-cc-title { font-size: 14px; font-weight: 600; color: var(--c-text); }
.ws-cc-sub { font-size: 11px; color: var(--c-text-sub, var(--c-text)); }
.ws-cc-today-btn {
    padding: 3px 9px;
    font-size: 12px;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.ws-cc-weekrow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}
.ws-cc-week {
    text-align: center;
    font-size: 11px;
    color: var(--c-text-sub, var(--c-text));
    padding: 2px 0;
}
.ws-cc-week.wk-weekend { color: var(--c-accent); }
.ws-cc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.ws-cc-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 2px 0;
    font-size: 12px;
    color: var(--c-text);
    border-radius: 8px;
    cursor: default;
    transition: background var(--ws-transition), color var(--ws-transition);
}
.ws-cc-day:hover { background: var(--c-bg); }
.ws-cc-day.is-other { opacity: .32; }
.ws-cc-day.is-weekend { color: var(--c-accent); }
.ws-cc-day.is-today {
    color: #fff;
    background: var(--c-accent);
    font-weight: 600;
}
.ws-cc-day .lunar {
    font-size: 9px;
    line-height: 1.1;
    opacity: .8;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-cc-day.is-today .lunar { opacity: .95; }
/* 节日 / 节气标记点 */
.ws-cc-day[data-fest]::after {
    content: '';
    position: absolute;
    bottom: 2px; left: 50%;
    width: 3px; height: 3px;
    margin-left: -1.5px;
    border-radius: 50%;
    background: var(--c-accent);
}
.ws-cc-day.is-today[data-fest]::after { background: #fff; }
/* 法定节假日（休）：红底角标 */
.ws-cc-day[data-holiday="off"] .lunar { color: #fa5555; font-weight: 600; }
.ws-cc-day[data-holiday="work"] .lunar { color: #9aa4b2; }
.ws-cc-day[data-fest="term"]::after { background: #28c687; }   /* 节气用绿点 */
.ws-cc-day[data-fest="festival"]::after { background: #fa5555; } /* 节日用红点 */
.ws-cc-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ws-cc-foot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.ws-cc-foot-row i { width: 13px; color: var(--c-accent); font-size: 11px; }
.ws-cc-foot-label { color: var(--c-text-sub, var(--c-text)); }
.ws-cc-foot-value { margin-left: auto; font-weight: 500; color: var(--c-text); }

/* ---------- 窄屏：两张卡堆叠 ---------- */
@media (max-width: 991.98px) {
    .ws-hero-weather-card,
    .ws-hero-calendar-card { max-width: 420px; }
}
@media (max-width: 575.98px) {
    .ws-hero-weather-card,
    .ws-hero-calendar-card { max-width: 100%; padding: 14px; }
    .ws-hwc-temp { font-size: 28px; }
    .ws-hwc-icon { width: 48px; height: 48px; flex-basis: 48px; font-size: 24px; }
    .ws-hwc-city-dropdown { width: min(260px, calc(100vw - 60px)); }
}