@charset "UTF-8";
/*!
 * ui.css · classic-22 视觉基础层
 *
 * 设计目标：把整站（主题通用页 + RssUnion 三个独立页）收进同一套视觉语言：
 *   - 浅灰底 + 白色卡片 + 1px 细边 + 小圆角，靠层次而不是靠重颜色区分区域
 *   - 字号阶：22 / 17 / 15 / 13.5 / 12.5 / 11.5，行高 1.6~1.75，密度偏高
 *   - 一个强调色（跟随主题 --pico-primary），只用在选中态、当前项、悬停上
 *   - 深浅色各自成对定义，控件一律走 --ui-* 变量，不再散落硬编码颜色
 *
 * 加载顺序：style.css（Pico）之后、页面内联 <style> 之前，
 * 所以这里的规则可以被各页面自己的样式覆盖。
 */

/* ==========================================================================
   1. 设计 token
   ========================================================================== */

:root {
    /* 层次：页面底 → 卡片面 → 卡片内的浅槽 → 悬停/选中 */
    --ui-bg: #f4f6f9;
    --ui-surface: #ffffff;
    --ui-surface-2: #f7f8fa;
    --ui-surface-3: #eef1f5;

    --ui-border: #e5e8ee;
    --ui-border-2: #d3d9e2;

    /* 文字：正文 / 次要 / 弱化（时间、计数、说明） */
    --ui-text: #14171c;
    --ui-text-2: #4a515c;
    --ui-text-3: #858d99;

    /* 强调色直接跟随主题主色：后台切浅色/深色/自定义，这里自动变 */
    --ui-accent: var(--pico-primary, #0172ad);
    --ui-accent-soft: rgba(1, 114, 173, .09);
    --ui-accent-line: rgba(1, 114, 173, .28);

    /* 语义色：置顶/精华/成功/提醒，深浅两套都在下面覆写 */
    --ui-gold: #b45309;
    --ui-gold-soft: rgba(180, 83, 9, .10);
    --ui-rose: #be123c;
    --ui-rose-soft: rgba(190, 18, 60, .09);
    --ui-green: #0f766e;
    --ui-green-soft: rgba(15, 118, 110, .10);

    /* 健康状态点：正常（绿）/ 异常（红），网站名旁那个小圆点和它的弹窗 */
    --ui-ok: #17a34a;
    --ui-ok-soft: rgba(23, 163, 74, .16);
    --ui-bad: #e0453a;
    --ui-bad-soft: rgba(224, 69, 58, .16);

    --ui-shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
    --ui-shadow-2: 0 14px 30px -16px rgba(16, 24, 40, .26);

    --ui-r-sm: 6px;
    --ui-r: 10px;
    --ui-r-lg: 14px;
    --ui-r-pill: 999px;

    /* 站点主容器宽度：比 Pico 的 .container 窄一点，长行更好读 */
    --ui-wrap: 1320px;
    --ui-nav-h: 60px;

    --ui-font: var(--pico-font-family, system-ui, -apple-system, "Segoe UI", Roboto,
            "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
    --ui-mono: var(--pico-font-family-monospace, ui-monospace, SFMono-Regular, "SF Mono",
            Menlo, Consolas, monospace);
}

/* 深色：优先认主题的 data-theme（Pico 的约定），再认脚本打的 .is-dark 兜底 */
[data-theme="dark"],
.is-dark,
.ui-dark {
    --ui-bg: #0d1015;
    --ui-surface: #14181f;
    --ui-surface-2: #1a1f27;
    --ui-surface-3: #212831;

    --ui-border: #222932;
    --ui-border-2: #2f3846;

    --ui-text: #e7eaf0;
    --ui-text-2: #a6aeba;
    --ui-text-3: #6d7683;

    --ui-accent: var(--pico-primary, #01aaff);
    --ui-accent-soft: rgba(1, 170, 255, .14);
    --ui-accent-line: rgba(1, 170, 255, .34);

    --ui-gold: #f0b429;
    --ui-gold-soft: rgba(240, 180, 41, .13);
    --ui-rose: #fb7185;
    --ui-rose-soft: rgba(251, 113, 133, .13);
    --ui-green: #2dd4bf;
    --ui-green-soft: rgba(45, 212, 191, .12);

    --ui-ok: #3ecf72;
    --ui-ok-soft: rgba(62, 207, 114, .20);
    --ui-bad: #ff6b5e;
    --ui-bad-soft: rgba(255, 107, 94, .20);

    --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --ui-shadow-2: 0 16px 34px -18px rgba(0, 0, 0, .7);

    color-scheme: dark;
}

/* 「自动」：跟随系统。Pico 用 data-theme=auto 或干脆不写，两种都覆盖 */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"],
    html:not([data-theme]) {
        --ui-bg: #0d1015;
        --ui-surface: #14181f;
        --ui-surface-2: #1a1f27;
        --ui-surface-3: #212831;

        --ui-border: #222932;
        --ui-border-2: #2f3846;

        --ui-text: #e7eaf0;
        --ui-text-2: #a6aeba;
        --ui-text-3: #6d7683;

        --ui-accent: var(--pico-primary, #01aaff);
        --ui-accent-soft: rgba(1, 170, 255, .14);
        --ui-accent-line: rgba(1, 170, 255, .34);

        --ui-gold: #f0b429;
        --ui-gold-soft: rgba(240, 180, 41, .13);
        --ui-rose: #fb7185;
        --ui-rose-soft: rgba(251, 113, 133, .13);
        --ui-green: #2dd4bf;
        --ui-green-soft: rgba(45, 212, 191, .12);

        --ui-ok: #3ecf72;
        --ui-ok-soft: rgba(62, 207, 114, .20);
        --ui-bad: #ff6b5e;
        --ui-bad-soft: rgba(255, 107, 94, .20);

        --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
        --ui-shadow-2: 0 16px 34px -18px rgba(0, 0, 0, .7);

        color-scheme: dark;
    }
}

/* ==========================================================================
   2. 页面底与容器
   ========================================================================== */

html {
    background: var(--ui-bg);
}

body {
    margin: 0;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* 内容短时页脚也贴底，不会在页脚下面留一条白 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 主题通用页的 main.container：收到和自定义页一致的宽度节奏。
   三个自定义页有自己的 .un-shell / .sq-shell / .st-shell（宽度、内边距各自定），
   这里必须排除掉，否则 main.container 的特异性更高，会把它们的宽度改掉。 */
main.container {
    flex: 1 0 auto;
    width: 100%;
}

main.container:not(.un-shell):not(.sq-shell):not(.st-shell) {
    max-width: var(--ui-wrap);
    margin: 0 auto;
    padding: 30px clamp(16px, 3.4vw, 34px) 64px;
}

.site-navbar,
.site-footer {
    flex: none;
}

.container-thin {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   3. 顶部导航
   ========================================================================== */

.site-navbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--ui-nav-h);
    margin: 0;
    padding: 0 clamp(16px, 3.4vw, 34px);
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
}

/* 半透明毛玻璃：滚动时内容从导航天穿过，比纯色条更轻 */
@supports (backdrop-filter: blur(1px)) {
    .site-navbar {
        background: color-mix(in srgb, var(--ui-surface) 84%, transparent);
        backdrop-filter: saturate(180%) blur(14px);
    }
}

.site-navbar nav {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.site-navbar .site-name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    margin: 0;
    padding: 0;
}

.site-navbar .site-name li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.site-navbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ui-text);
    text-decoration: none;
}

.site-navbar .brand:hover {
    color: var(--ui-text);
}

.site-navbar .brand img {
    max-height: 26px;
    width: auto;
    border-radius: var(--ui-r-sm);
}

/* 站名后面那行说明：用竖线隔开，弱化成副标 */
.site-navbar .desc {
    display: none;
    padding-left: 10px;
    border-left: 1px solid var(--ui-border);
    color: var(--ui-text-3);
    font-size: 12.5px;
    white-space: nowrap;
}

@media (min-width: 700px) {
    .site-navbar .desc {
        display: inline-block;
    }
}

.site-nav {
    display: block;
}

#nav-toggler {
    display: none;
}

.nav-toggler-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-sm);
    color: var(--ui-text-2);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.nav-toggler-btn:hover {
    background: var(--ui-surface-3);
    color: var(--ui-text);
}

.nav-toggler-btn svg {
    width: 17px;
    height: 17px;
}

.nav-menu {
    display: none;
    margin: 0;
    padding: 0;
}

/* Pico 给 `nav ul:first-of-type` / `nav ul:last-of-type` 加了 ±10px 的负左右外边距，
   特异性 (0,1,2) 高于上面那条 `.nav-menu`，会把整条菜单往右推出容器 10px，
   表现就是「右上角最后一个按钮几乎贴到屏幕边」。这里用 .site-navbar 前缀提到 (0,2,0) 压住它。 */
.site-navbar .nav-menu {
    margin: 0;
}

/* ---- 三模块布局：左（页面链接）/ 中（搜索）/ 右（提交·审核·会员中心 + 用户菜单） ---- */
.nav-collapse {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-zone {
    display: flex;
    align-items: center;
    min-width: 0;
}

.nav-zone--main {
    flex: 0 1 auto;
}

/* 中间那格负责把搜索框放到导航的正中：左右留白、内容居中 */
.nav-zone--search {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 10px;
}

.nav-zone--side {
    flex: 0 0 auto;
    margin-left: auto;
}

/* 搜索框：常驻显示（不再收成一个放大镜），圆角胶囊，聚焦时描边变主题色 */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 340px;
}

/* 原先左侧还有一个装饰放大镜，和右边这个提交按钮凑成两个，看着重复，已去掉 */
.nav-search__icon {
    display: none;
}

/* 选中器带上 .nav-search 前缀：Pico 的 `input:not([type=checkbox],…)`（0,1,1）
   会给输入框塞 40px 左右的内边距和下外边距，这里必须压住 */
.nav-search input[type="text"] {
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0 36px 0 14px; /* 右边留出搜索按钮的位置 */
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 34px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* 右侧的搜索按钮：贴在输入框圆角里，只画一个放大镜。
   选择器带 .nav-search 前缀：Pico 的 `input:not(…), select, textarea, button`（0,1,1）
   会给按钮 width:100%，只用单类（0,1,0）压不住，按钮会撑满整个框、图标跑到中间 */
.nav-search .nav-search__go {
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-text-3);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.nav-search .nav-search__go:hover {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

.nav-search input[type="text"]::placeholder {
    color: var(--ui-text-3);
}

.nav-search input[type="text"]:hover {
    border-color: var(--ui-border-2);
}

.nav-search input[type="text"]:focus {
    outline: none;
    background: var(--ui-surface);
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

/* 右侧那两个「动作链接」：做成胶囊按钮，和普通页面链接区分开 */
.nav-menu li > a.nav-act {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text-2);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.nav-menu li > a.nav-act:hover {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

/* 窄屏：整块收成汉堡面板（左 / 中 / 右三格在面板里竖着排） */
@media (max-width: 1023px) {
    .nav-collapse {
        display: none;
    }

    #nav-toggler:checked ~ .nav-collapse {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        position: absolute;
        left: 0;
        right: 0;
        top: var(--ui-nav-h);
        padding: 10px 12px 14px;
        background: var(--ui-surface);
        border-bottom: 1px solid var(--ui-border);
        box-shadow: var(--ui-shadow-2);
        max-height: calc(100vh - var(--ui-nav-h));
        overflow-y: auto;
    }

    /* .nav-menu 的默认态是 display:none（桌面端靠断点里的 !important 打开），
       面板里要显式打开 */
    #nav-toggler:checked ~ .nav-collapse .nav-menu {
        display: block;
    }

    .nav-zone--search {
        padding: 4px 0;
    }

    .nav-zone--side {
        margin-left: 0;
    }

    .nav-search {
        max-width: none;
    }

    #nav-toggler:checked ~ .nav-collapse .nav-menu li > a.nav-act {
        height: 34px;
    }
}

.nav-menu li {
    display: block;
    margin: 0;
    padding: 0;
}

.nav-menu li > a {
    display: flex;
    align-items: center;
    height: 38px;
    /* Pico 的 `nav li :where(a)` 给链接加了 -10px 的四边负外边距，
       链接盒子会横向外扩 20px、压到相邻项身上（hover 背景互相重叠、文字看着挤在一起）。
       清零后间距完全交给 li 的 gap，热区也不再越界。 */
    margin: 0;
    padding: 0 12px;
    border-radius: var(--ui-r-sm);
    color: var(--ui-text-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.nav-menu li > a:hover {
    background: var(--ui-surface-3);
    color: var(--ui-text);
}

.nav-menu form {
    margin: 6px 0 0;
}

.nav-menu form input[type=search] {
    height: 36px;
    width: 100%;
    margin: 0;
    padding: 0 12px;
    background: var(--ui-surface-2);
    background-image: none;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-sm);
    color: var(--ui-text);
    font-size: 13.5px;
}

@media (min-width: 1024px) {
    .site-navbar {
        display: flex;
    }

    .site-navbar nav:first-child {
        flex-grow: 1;
    }

    .nav-toggler-btn {
        display: none;
    }

    .site-nav {
        display: flex;
        align-items: center;
    }

    .nav-menu {
        display: flex !important;
        align-items: center;
        gap: 2px;
    }

    .nav-menu li:not(:last-child) {
        margin-right: 0;
    }

    .nav-menu li > a {
        height: 32px;
        padding: 0 11px;
        font-size: 13.5px;
        border-radius: var(--ui-r-sm);
    }

    .nav-menu li > a.active {
        background: var(--ui-accent-soft);
        color: var(--ui-accent);
        font-weight: 600;
    }

    .nav-menu form {
        margin: 0 0 0 6px;
    }

    /* 搜索框平时收成一个图标，聚焦时展开 —— 保留主题原来的交互，只换皮。
       主题里那条 `.nav-menu form input[type=search]:not(:focus)` 特异性更高，
       这里必须同样带上 :not(:focus)，否则压不住它留下的灰底和边框。 */
    .nav-menu form input[type=search],
    .nav-menu form input[type=search]:not(:focus) {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: var(--ui-r-sm);
        background-color: transparent;
        background-image: var(--pico-icon-search);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 17px;
        color: transparent;
        cursor: pointer;
        transition: width .18s ease, background-color .18s ease, border-color .18s ease;
    }

    .nav-menu form input[type=search]:hover {
        background-color: var(--ui-surface-3);
    }

    /* 收起时把占位文字也藏起来，否则「搜索」两个字会和放大镜图标叠在一起 */
    .nav-menu form input[type=search]::placeholder {
        color: transparent;
    }

    .nav-menu form input[type=search]:focus::placeholder {
        color: var(--ui-text-3);
    }

    .nav-menu form input[type=search]:focus,
    .nav-menu form input[type=search]:not(:placeholder-shown) {
        width: 190px;
        padding: 0 10px 0 32px;
        border-color: var(--ui-border-2);
        background-color: var(--ui-surface-2);
        background-position: 9px center;
        color: var(--ui-text);
        cursor: text;
    }
}

/* ==========================================================================
   4. 通用组件
   ========================================================================== */

/* ---- 4.1 分区标题：小号英文副标 + 中文标题，参考站那种「标题块」 ---- */
.ui-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.ui-head__main {
    min-width: 0;
}

.ui-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-text-3);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ui-title {
    margin: 0;
    font-size: 21px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--ui-text);
}

.ui-desc {
    margin: 7px 0 0;
    max-width: 68ch;
    color: var(--ui-text-3);
    font-size: 13px;
    line-height: 1.7;
}

.ui-desc a {
    color: var(--ui-accent);
}

/* ---- 4.2 按钮 ---- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ui-btn:hover {
    background: var(--ui-surface-2);
    border-color: var(--ui-border-2);
    color: var(--ui-text);
}

.ui-btn svg {
    flex: 0 0 auto;
    opacity: .8;
}

.ui-btn--primary {
    border-color: transparent;
    background: var(--ui-accent);
    color: #fff;
}

.ui-btn--primary:hover {
    border-color: transparent;
    background: var(--ui-accent);
    color: #fff;
    filter: brightness(1.06);
}

.ui-btn--ghost {
    border-color: transparent;
    background: transparent;
}

.ui-btn--ghost:hover {
    background: var(--ui-surface-3);
}

/* ---- 4.3 胶囊筛选 ---- */
.ui-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 29px;
    padding: 0 11px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ui-chip:hover {
    border-color: var(--ui-border-2);
    background: var(--ui-surface-2);
    color: var(--ui-text);
}

.ui-chip.is-active {
    border-color: transparent;
    background: var(--ui-accent);
    color: #fff;
}

.ui-chip__n {
    color: var(--ui-text-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.ui-chip.is-active .ui-chip__n {
    color: rgba(255, 255, 255, .78);
}

/* ---- 4.4 徽章 ---- */
.ui-badge {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--ui-surface-3);
    color: var(--ui-text-2);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ui-badge--pin {
    background: var(--ui-rose-soft);
    color: var(--ui-rose);
}

.ui-badge--featured {
    background: var(--ui-gold-soft);
    color: var(--ui-gold);
}

.ui-badge--accent {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

/* ---- 4.5 卡片 ---- */
.ui-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-lg);
    background: var(--ui-surface);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ui-card:hover {
    border-color: var(--ui-border-2);
    box-shadow: var(--ui-shadow-2);
    /* 去掉 translateY(-1px)：网格里只有被悬停的一张会动，邻卡不动就会有 1px 错位感；
       系统缩放 125%/150% 时 1px 还会落到非整数像素上，卡片文字跟着发虚。
       悬停反馈只靠「边框加深 + 阴影」两档，够了。 */
}

/* ---- 4.6 输入框 ---- */
.ui-input {
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 34px;
    box-shadow: none;
}

.ui-input::placeholder {
    color: var(--ui-text-3);
}

.ui-input:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px var(--ui-accent-soft);
    outline: none;
}

/* ---- 4.7 分页 ---- */
.ui-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 30px 0 4px;
}

.ui-pager a,
.ui-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.ui-pager a:hover {
    border-color: var(--ui-border-2);
    background: var(--ui-surface-2);
    color: var(--ui-text);
}

.ui-pager .is-current,
.ui-pager [aria-current] {
    border-color: transparent;
    background: var(--ui-accent);
    color: #fff;
    font-weight: 600;
}

.ui-pager .is-disabled {
    opacity: .4;
    pointer-events: none;
}

.ui-pager .ui-pager__gap {
    border-color: transparent;
    background: transparent;
    color: var(--ui-text-3);
}

/* ---- 4.8 空状态 ---- */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    border: 1px dashed var(--ui-border-2);
    border-radius: var(--ui-r-lg);
    background: var(--ui-surface);
    text-align: center;
}

.ui-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--ui-text-3);
}

.ui-empty__title {
    color: var(--ui-text);
    font-size: 15px;
    font-weight: 600;
}

.ui-empty__desc {
    max-width: 46ch;
    color: var(--ui-text-3);
    font-size: 13px;
    line-height: 1.75;
}

.ui-empty__desc a {
    color: var(--ui-accent);
}

/* ==========================================================================
   5. 主题通用页（首页 / 文章 / 独立页 / 搜索）
   ========================================================================== */

/* 列表页：每条文章一张卡，卡与卡之间用间距而不是 <hr> */
.post {
    padding: 22px 24px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-1);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.post:hover {
    border-color: var(--ui-border-2);
    box-shadow: var(--ui-shadow-2);
}

.post + .post-separator {
    display: none;
}

.post-separator {
    display: none;
}

.post {
    margin-bottom: 14px;
}

/* 标题与元信息：左对齐，比居中更像「内容站」 */
.entry-header {
    margin-bottom: 12px;
    text-align: left;
}

.entry-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.entry-title a {
    color: var(--ui-text);
    text-decoration: none;
}

.entry-title a:hover {
    color: var(--ui-accent);
}

.entry-header .entry-title {
    margin-bottom: 10px;
}

.entry-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    color: var(--ui-text-3);
    font-size: 12.5px;
    text-align: left;
}

.entry-meta.list-inline li {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.entry-meta.list-inline li:not(:last-child) {
    margin-right: 0;
}

/* 元信息前的小图标：改成中性灰的点阵（原来那三个绿色小图标太跳） */
.entry-meta .feather-calendar:before,
.entry-meta .feather-folder:before,
.entry-meta .feather-message:before {
    width: 13px;
    height: 13px;
    margin-right: 5px;
    opacity: .5;
    filter: grayscale(1);
    vertical-align: -2px;
}

.entry-meta a {
    color: var(--ui-text-3);
    text-decoration: none;
}

.entry-meta a:hover {
    color: var(--ui-accent);
}

/* 正文排版 */
.entry-content,
.fmt {
    color: var(--ui-text-2);
    font-size: 15px;
    line-height: 1.82;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin: 1.7em 0 .6em;
    color: var(--ui-text);
    font-weight: 650;
    letter-spacing: -.01em;
}

.entry-content h2 {
    font-size: 18px;
}

.entry-content h3 {
    font-size: 16px;
}

.entry-content p {
    margin: 0 0 1.05em;
}

.entry-content a {
    color: var(--ui-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--ui-accent-line);
}

.entry-content a:hover {
    border-bottom-color: var(--ui-accent);
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ui-r);
}

.entry-content blockquote {
    margin: 1.3em 0;
    padding: 12px 16px;
    border-left: 2px solid var(--ui-accent);
    border-radius: 0 var(--ui-r-sm) var(--ui-r-sm) 0;
    background: var(--ui-surface-2);
    color: var(--ui-text-2);
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ui-surface-3);
    color: var(--ui-text);
    font-family: var(--ui-mono);
    font-size: .88em;
}

.entry-content pre {
    padding: 14px 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r);
    background: var(--ui-surface-2);
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.65;
}

.entry-content pre code {
    padding: 0;
    background: none;
}

.entry-content hr {
    margin: 2em 0;
    border: none;
    border-top: 1px solid var(--ui-border);
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.entry-content th,
.entry-content td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ui-border);
    text-align: left;
}

.entry-content th {
    color: var(--ui-text);
    font-weight: 600;
    background: var(--ui-surface-2);
}

/* 「阅读全文」按钮 */
.entry-content .more {
    margin-top: 14px;
    text-align: left;
}

.entry-content .more a {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 12.5px;
    text-decoration: none;
}

.entry-content .more a:hover {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}

/* 归档标题 / 搜索页标题 */
main.container > .container-thin > h1.text-center,
main.container > .container-thin > h6.text-center,
main.container > h6.text-center {
    margin: 0 0 18px;
    color: var(--ui-text-3);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
}

main.container > .container-thin > h1.text-center {
    color: var(--ui-text);
    font-size: 21px;
    font-weight: 650;
}

/* 主题自带分页（Pico nav ul） */
main.container > nav,
main.container nav[role="navigation"] {
    margin-top: 26px;
}

main.container > nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

main.container > nav ul li {
    margin: 0;
    padding: 0;
}

main.container > nav ul li a,
main.container > nav ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 13px;
    text-decoration: none;
}

main.container > nav ul li a:hover {
    border-color: var(--ui-border-2);
    color: var(--ui-text);
}

main.container > nav ul li.is-active a,
main.container > nav ul li[class*="current"] a {
    border-color: transparent;
    background: var(--ui-accent);
    color: #fff;
}

/* ==========================================================================
   6. 页脚与评论
   ========================================================================== */

.site-footer {
    padding: 18px clamp(16px, 3.4vw, 34px) 26px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text-3);
    font-size: 12.5px;
}

.site-footer .d-flex {
    flex-wrap: wrap;
    gap: 4px 14px;
}

.site-footer a {
    color: var(--ui-text-3);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--ui-accent);
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment-body {
    margin: 12px 0;
    padding: 16px 18px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r);
    background: var(--ui-surface);
}

.comment-author .avatar {
    border-radius: 50%;
}

.comment-author cite {
    color: var(--ui-text);
    font-style: normal;
    font-weight: 600;
}

.comment-meta {
    color: var(--ui-text-3);
    font-size: 12px;
}

/* 表单控件统一（评论框、搜索框） */
textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
    border-radius: var(--ui-r-sm);
}

/* ==========================================================================
   7. 深浅色下 Pico 的补充修正
   ========================================================================== */

/* Pico 给 body 的是纯白/纯黑，这里已经换成 --ui-bg；
   同时把它的卡片类底色也对齐，避免页面里出现两种白 */
[data-theme="dark"] body {
    background: var(--ui-bg);
    color: var(--ui-text);
}

/* 滚动条：细一点，颜色随主题 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-border-2) transparent;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--ui-r-pill);
    background: var(--ui-border-2);
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ==========================================================================
   8. 健康状态点 / 记录弹窗（RssUnion 三个前台页共用）
   ==========================================================================
   网站名旁一个小圆点：绿 = 最近一次正常，红 = 最近一次异常；点开弹窗列出
   最近 10 条记录（RSS 刷新 / 网站检查）。

   放在 ui.css 而不是各页内联 <style> 里，是因为弹窗一律挂在 </main> 之外
   （跟 .ru-claim 认领弹窗一样），拿不到各页自己的 --un-* / --sq-* / --st-*
   变量，只能吃全站的 --ui-*。 */

/* ---------- 状态圆点 ----------
   外层 button 是 16px 的点击热区，里面的 span 才是看得见的 7px 圆点：
   7px 直接做成按钮的话根本点不中。Pico 给 button 挂了 20px 下边距和配色，
   这里全部清掉 —— 不清的话圆点会浮在文字上方，看着像没对齐。 */
.ru-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0 0 0 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    /* Pico 给 button 定了 1rem 的字号和自己的字体，不继承的话下面的 em
       会按 20px 算（而不是旁边文字的字号），中线就对不上 —— 必须继承过来 */
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    /* 旁边是文字时按中线对齐（写法同 .ru-v，只是热区 16px、对齐点差 3.5px）。
       在 flex 行里（左栏 .un-site）vertical-align 失效，靠 align-self 兜底 */
    vertical-align: calc(.38em - 3.5px);
    align-self: center;
}

.ru-dot__i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ui-ok);
    box-shadow: 0 0 0 2px var(--ui-ok-soft);
    transition: box-shadow .15s ease;
}

.ru-dot.is-bad .ru-dot__i {
    background: var(--ui-bad);
    box-shadow: 0 0 0 2px var(--ui-bad-soft);
}

.ru-dot:hover .ru-dot__i,
.ru-dot:focus-visible .ru-dot__i {
    box-shadow: 0 0 0 3.5px var(--ui-ok-soft);
}

.ru-dot.is-bad:hover .ru-dot__i,
.ru-dot.is-bad:focus-visible .ru-dot__i {
    box-shadow: 0 0 0 3.5px var(--ui-bad-soft);
}

/* ---------- 记录弹窗 ---------- */
.ru-health {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    font-family: var(--ui-font);
}

.ru-health[hidden] {
    display: none;
}

.ru-health__mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 19, 26, .46);
}

.ru-health__box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: min(78vh, 620px);
    border: 1px solid var(--ui-border-2);
    border-radius: var(--ui-r-lg);
    background: var(--ui-surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.ru-health__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--ui-border);
}

.ru-health__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ui-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 关闭按钮：padding 和 flex 居中都要写 —— Pico 的默认 padding 会把 × 顶出圆圈 */
.ru-health__x {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    color: var(--ui-text-3);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.ru-health__x:hover {
    background: var(--ui-surface-3);
    color: var(--ui-text);
}

.ru-health__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text-3);
    font-size: 12px;
}

.ru-health__sub .ru-dot {
    margin-left: 0;
    cursor: default;
}

.ru-health__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 8px 8px;
}

.ru-health__foot {
    display: flex;
    justify-content: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--ui-border);
}

.ru-health__btn {
    height: 30px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--ui-border-2);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-2);
    box-shadow: none;
    color: var(--ui-text-2);
    font-size: 12.5px;
    cursor: pointer;
}

.ru-health__btn:hover {
    border-color: var(--ui-accent-line);
    color: var(--ui-accent);
}

.ru-health__hint {
    padding: 20px 12px;
    color: var(--ui-text-3);
    font-size: 12.5px;
    text-align: center;
}

/* ---------- 单条记录 ---------- */
.ru-log {
    display: flex;
    gap: 9px;
    padding: 9px 8px 9px 10px;
    border-radius: var(--ui-r-sm);
}

.ru-log + .ru-log {
    border-top: 1px solid var(--ui-border);
}

.ru-log__dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--ui-ok);
}

.ru-log__dot.is-bad {
    background: var(--ui-bad);
}

.ru-log__main {
    min-width: 0;
    flex: 1;
}

.ru-log__text {
    color: var(--ui-text);
    font-size: 12.5px;
    line-height: 1.55;
    word-break: break-word;
}

.ru-log__meta {
    margin-top: 2px;
    color: var(--ui-text-3);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   深浅色切换胶囊按钮（顶栏右上角）
   ========================================================================== */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 52px;
    height: 28px;
    /* 压住 Pico 给 button 默认加的 20px 下外边距、内边距、字号、背景 */
    margin: 0;
    padding: 0;
    border: 1px solid var(--ui-border-2);
    border-radius: 999px;
    background: var(--ui-surface-2);
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    color: var(--ui-text-2);
    cursor: pointer;
    overflow: hidden;
    transition: background .2s ease, border-color .2s ease;
}

.theme-toggle:hover {
    border-color: var(--ui-accent);
    color: var(--ui-text);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

.theme-toggle__opt {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.theme-toggle__opt svg {
    width: 13px;
    height: 13px;
    display: block;
}

.theme-toggle__opt--sun {
    color: var(--ui-gold);
}

.theme-toggle__opt--moon {
    color: var(--ui-text-3);
}

.theme-toggle.is-dark .theme-toggle__opt--sun {
    color: var(--ui-text-3);
}

.theme-toggle.is-dark .theme-toggle__opt--moon {
    color: #cdd6e4;
}

.theme-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-2);
    box-shadow: var(--ui-shadow-1);
    z-index: 0;
    transition: transform .2s ease;
}

.theme-toggle.is-dark .theme-toggle__knob {
    transform: translateX(24px);
}


/* ============================================================
   9. whois 浮窗（鼠标放到域名上显示这个域名的注册信息）
   挂在 </main> 之外，所以同样只能用全站的 --ui-* 变量。
   定位由 JS 算好写进 .ru-whois__box 的 left / top（position: fixed，跟视口走）。
   ============================================================ */
.ru-whois {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1200;
}

.ru-whois[hidden] {
    display: none;
}

.ru-whois__box {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 250px;
    max-width: min(92vw, 360px);
    padding: 11px 13px;
    border: 1px solid var(--ui-border-2);
    border-radius: 12px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-1);
    color: var(--ui-text);
    font-size: 12.5px;
    line-height: 1.5;
}

.ru-whois__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--ui-border-2);
}

.ru-whois__domain {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text);
}

.ru-whois__state {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ui-ok-soft);
    color: var(--ui-ok);
    font-size: 11px;
    white-space: nowrap;
}

.ru-whois__state.is-warn,
.ru-whois__state.is-bad {
    background: var(--ui-bad-soft);
    color: var(--ui-bad);
}

.ru-whois__row {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.ru-whois__k {
    flex: none;
    width: 58px;
    color: var(--ui-text-3);
    white-space: nowrap;
}

.ru-whois__v {
    min-width: 0;
    color: var(--ui-text-2);
    word-break: break-all;
}

.ru-whois__dim {
    color: var(--ui-text-3);
}

.ru-whois__on {
    color: var(--ui-ok);
}

.ru-whois__hint {
    padding: 3px 0;
    color: var(--ui-text-3);
}

.ru-whois__foot {
    margin-top: 9px;
    padding-top: 7px;
    border-top: 1px solid var(--ui-border-2);
    color: var(--ui-text-3);
    font-size: 11px;
}