@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:center;
}

.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;
    justify-content: center;
    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);
}

/* 左（版权）右（标语）两块按自身内容宽度占位，中间菜单吃掉剩下的空白再居中 ——
   这样菜单是「左右两块之间」居中，视觉上正好落在那片空白的中心。
   如果三列都 flex:1 等分，菜单会落在整页正中，因为左右两块长短不一
   （右边标语比左边版权短），反而显得偏左。 */
.site-footer .d-flex > .list-inline,
.site-footer .d-flex > .site-footer__nav {
    min-width: 0;
}

.site-footer .d-flex > .list-inline {
    flex: 0 0 auto;
}

.site-footer .d-flex > .site-footer__nav {
    flex: 1 1 auto;
}

.site-footer .d-flex > .list-inline:first-child {
    text-align: left;
}

.site-footer .d-flex > .list-inline:last-child {
    text-align: right;
}

/* Pico 会把 <nav> 和里面的 <ul> 都设成 flex，所以居中必须用 justify-content，
   光写 text-align 是不生效的（flex 项不理 text-align） */
.site-footer__nav {
    display: flex;
    justify-content: center;
    text-align: center;
}

.site-footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
}

.site-footer__nav-list li {
    margin: 0 7px;
    padding: 0;
}

.site-footer__nav-list li::before {
    content: none;
}

.site-footer__nav-list a {
    display: inline;
    margin: 0;
    padding: 0;
}

/* 窄屏：三列各占一行居中，避免和版权、标语挤在同一行 */
@media (max-width: 575px) {
    .site-footer .d-flex > .list-inline,
    .site-footer .d-flex > .site-footer__nav {
        flex: 0 0 100%;
        text-align: center;
    }
}

.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;
}

/* 不设 :hover 态：这是个状态开关（显示当前深浅色），不是可点的动作按钮，
   hover 变色会让人误以为里面两个图标可以单独点 */
.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;
}

/* ============================================================
   管理员前台管理行（RSS 信息卡片：置顶 / 编辑推荐 / 标签 / 删除）
   ------------------------------------------------------------
   只有后台管理员能在 page-rssunion.php 里看到这一行，游客页面连
   .un-art__admin 都不会输出。颜色一律走 --ui-*，深浅色自动跟随；
   弹窗放在页面末尾（<main> 外），所以这里不能用 --un-* 那套页面变量。
   ============================================================ */

.un-art__admin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    /* 上下留一样宽：按钮在虚线框下面居中，不再贴着左边 */
    padding: 10px 0 3px;
    border-top: 1px dashed var(--ui-border);
}

.un-adm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 23px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid var(--ui-border-2);
    border-radius: var(--ui-r-pill);
    background: transparent;
    box-shadow: none;
    color: var(--ui-text-3);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s, border-color .16s, background-color .16s;
    -webkit-appearance: none;
    appearance: none;
}

.un-adm:hover {
    border-color: var(--ui-accent-line);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

.un-adm:focus-visible {
    outline: 2px solid var(--ui-accent-line);
    outline-offset: 1px;
}

/* 请求进行中（1.9.230）：刷新 RSS 之类的异步按钮点了置灰，防重复点击 */
.un-adm:disabled {
    opacity: .55;
    pointer-events: none;
}

/* 置顶（玫瑰）/ 编辑推荐（金）：选中就填色，跟标题前那枚小旗同色系 */
.un-adm--pin.is-on {
    border-color: var(--ui-rose);
    background: var(--ui-rose-soft);
    color: var(--ui-rose);
    font-weight: 600;
}

.un-adm--feat.is-on {
    border-color: var(--ui-gold);
    background: var(--ui-gold-soft);
    color: var(--ui-gold);
    font-weight: 600;
}

/* 屏蔽（1.9.73）：选中转灰，表示「这篇文章被藏起来了」，区别于置顶/推荐的彩色 */
.un-adm--hide.is-on {
    border-color: var(--ui-text-3);
    background: var(--ui-surface-3);
    color: var(--ui-text-2);
    font-weight: 600;
}

/* 删除紧跟在「标签」右边（按需求：标签右侧就是删除），
   默认跟其它按钮同色，悬停才转红，免得在列表里满屏红点 */
.un-adm--del:hover {
    border-color: var(--ui-bad);
    background: var(--ui-bad-soft);
    color: var(--ui-bad);
}

/* ============================================================
   会员操作行（1.9.137：收藏 / 会员屏蔽）
   ------------------------------------------------------------
   紧跟在「网站名 + 日期」元信息行下面，独占一行居中。
   按钮复用 .un-adm 基类（与管理员管理行同款视觉），
   收藏选中转金色（收藏 = 划重点），屏蔽选中转灰（沿用管理员语义）。
   游客页面整行不输出。
   ============================================================ */

.un-art__urow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 撑满卡片宽再居中：个别主题的卡片是 flex 列布局且 align-items 不是 stretch，
       不写 width 这一行会缩成内容宽、整行偏左（1.9.138 用户实测踩过）；
       text-align 是无 JS / 老浏览器下 flex 失效时的兜底 */
    width: 100%;
    text-align: center;
    margin-top: 10px;
    padding: 2px 0 0;
}

/* 收藏：选中填金色，与编辑推荐的金同色系但语义是「我的书签」 */
.un-adm--fav.is-on {
    border-color: var(--ui-gold);
    background: var(--ui-gold-soft);
    color: var(--ui-gold);
    font-weight: 600;
}

/* ---------- 弹窗（置顶 / 编辑推荐 / 标签 共用一套壳） ---------- */
.un-amodal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    font-family: var(--ui-font);
}

.un-amodal[hidden] {
    display: none;
}

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

.un-amodal__box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: min(82vh, 640px);
    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;
}

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

.un-amodal__title {
    flex: 1;
    margin: 0;
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.un-amodal__x {
    flex: none;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--ui-r-sm);
    background: transparent;
    box-shadow: none;
    color: var(--ui-text-3);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

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

.un-amodal__desc {
    margin: 0;
    padding: 12px 16px 0;
    color: var(--ui-text-3);
    font-size: 12px;
    line-height: 1.7;
}

.un-amodal__input {
    box-sizing: border-box;
    width: calc(100% - 32px);
    min-height: 78px;
    margin: 12px 16px 0;
    padding: 9px 11px;
    border: 1px solid var(--ui-border-2);
    border-radius: var(--ui-r);
    background: var(--ui-surface-2);
    box-shadow: none;
    color: var(--ui-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.65;
    resize: vertical;
}

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

.un-amodal__count {
    padding: 6px 16px 0;
    color: var(--ui-text-3);
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.un-amodal__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-2);
}

.un-amodal__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);
    box-shadow: none;
    color: var(--ui-text-2);
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
}

.un-amodal__btn:hover {
    border-color: var(--ui-accent-line);
    color: var(--ui-accent);
}

.un-amodal__btn:disabled {
    opacity: .55;
    cursor: default;
}

/* 「取消标记」靠左，暂存 / 保存两个按钮靠右 */
.un-amodal__btn--danger {
    margin-right: auto;
    border-color: rgba(190, 18, 60, .35);
    color: var(--ui-rose);
}

.un-amodal__btn--danger:hover {
    border-color: var(--ui-rose);
    background: var(--ui-rose-soft);
    color: var(--ui-rose);
}

.un-amodal__btn--danger[hidden] {
    display: none;
}

.un-amodal__btn--primary {
    border-color: var(--ui-accent);
    background: var(--ui-accent);
    color: #fff;
    font-weight: 500;
}

.un-amodal__btn--primary:hover {
    filter: brightness(1.06);
    color: #fff;
}

/* ---------- 标签弹窗：芯片云 + 新增行 ---------- */
.un-amodal__cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 210px;
    margin: 12px 16px 0;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r);
    background: var(--ui-surface-2);
    overflow-y: auto;
}

.un-adm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid var(--ui-border-2);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface);
    box-shadow: none;
    color: var(--ui-text-2);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.un-adm-chip:hover {
    border-color: var(--ui-accent-line);
    color: var(--ui-accent);
}

.un-adm-chip.is-on {
    border-color: var(--ui-accent);
    background: var(--ui-accent);
    color: #fff;
    font-weight: 500;
}

.un-adm-chip.is-on:hover {
    filter: brightness(1.06);
    color: #fff;
}

.un-adm-chip:disabled {
    opacity: .55;
    cursor: default;
}

.un-adm-tag__none {
    padding: 4px 2px;
    color: var(--ui-text-3);
    font-size: 12px;
    line-height: 1.6;
}

.un-adm-tag__none.is-bad {
    color: var(--ui-bad);
}

.un-amodal__add {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 16px 0;
}

.un-amodal__add input {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    height: 30px;
    margin: 0;
    padding: 0 10px;
    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);
    font-family: inherit;
    font-size: 12.5px;
}

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

.un-amodal__add .un-amodal__btn {
    flex: none;
}

/* ---------- 轻提示 ---------- */
.un-adm-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 1300;
    max-width: min(90vw, 440px);
    padding: 9px 16px;
    border-radius: var(--ui-r-pill);
    background: rgba(20, 23, 28, .93);
    box-shadow: 0 10px 26px rgba(16, 24, 40, .28);
    color: #fff;
    font-family: var(--ui-font);
    font-size: 12.5px;
    line-height: 1.55;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.un-adm-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.un-adm-toast.is-bad {
    background: #b3261e;
}

/* 窄屏：按钮换行、弹窗贴边一点 */
@media (max-width: 520px) {
    .un-amodal {
        padding: 12px;
    }

    .un-amodal__box {
        max-height: min(86vh, 640px);
    }

    .un-amodal__foot {
        flex-wrap: wrap;
    }

    .un-amodal__btn {
        flex: 1;
        padding: 0 10px;
    }

    .un-amodal__btn--danger {
        flex-basis: 100%;
        margin-right: 0;
    }

    .un-adm {
        padding: 0 8px;
        font-size: 11px;
    }
}

/* ============================================================
   编辑网站弹窗（前台 RSS 卡片里那个「编辑」按钮）
   ------------------------------------------------------------
   字段与站主页 page-site.php 的 .ru-sedit 完全一致，只是这里用
   --ui-* 这套变量（弹窗在 <main> 外，页面级 --un-* 取不到）。
   外壳复用 .un-amodal，这里只补表单区。
   ============================================================ */

.un-sedit__box {
    max-width: 560px;
}

.un-sedit__loading {
    padding: 26px 16px;
    color: var(--ui-text-3);
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}

.un-sedit__form[hidden] {
    display: none;
}

/* 表单自己滚，头 / 说明 / 底部按钮固定 —— 否则小屏上一撑就把按钮顶出去了 */
.un-sedit__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 12px 16px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.un-sedit__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.un-sedit__field.is-wide {
    grid-column: 1 / -1;
}

.un-sedit__label {
    color: var(--ui-text-2);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* 必填项标一个红点：只标标题和地址两个，跟后台的 .required 一致 */
.un-sedit__label.is-req::after {
    content: " *";
    color: #d9534f;
}

.un-sedit__help {
    color: var(--ui-text-3);
    font-size: 11px;
    line-height: 1.5;
}

/* 地址 + 「获取网站信息」同一行：输入框撑满，按钮不缩不换行 */
.un-sedit__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.un-sedit__row input {
    flex: 1 1 auto;
    min-width: 0;
}

.un-sedit__fetch {
    flex: none;
    box-sizing: border-box;
    height: 33px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--ui-border-2);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface-3);
    box-shadow: none;
    color: var(--ui-text-2);
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.un-sedit__fetch:hover {
    border-color: var(--ui-accent-line);
    color: var(--ui-accent);
}

.un-sedit__fetch[disabled] {
    opacity: .6;
    cursor: default;
}

/* 候选 RSS 地址：一行一条，点一下填进上面的输入框 */
.un-sedit__rss {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.un-sedit__rss[hidden] {
    display: none;
}

.un-sedit__rssitem {
    display: block;
    width: 100%;
    margin: 0;
    padding: 6px 9px;
    border: 1px dashed var(--ui-border-2);
    border-radius: var(--ui-r-sm);
    background: none;
    box-shadow: none;
    color: var(--ui-text-2);
    font-family: var(--ui-mono);
    font-size: 11.5px;
    line-height: 1.5;
    text-align: left;
    word-break: break-all;
    cursor: pointer;
}

.un-sedit__rssitem:hover {
    border-color: var(--ui-accent-line);
    color: var(--ui-accent);
}

.un-sedit__rssitem.is-on {
    border-style: solid;
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    /* 左边一条实线：光靠浅色底在深色主题下几乎看不出来 */
    box-shadow: inset 3px 0 0 var(--ui-accent);
    font-weight: 600;
}

/* 控件要压掉几样 Pico 的默认：它会塞 margin-bottom、固定 height 和 inset 阴影，
   不覆盖的话两列网格里每个输入框下面都多出一截空白，行高也对不齐 */
.un-sedit__field input,
.un-sedit__field select,
.un-sedit__field textarea {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--ui-border-2);
    border-radius: var(--ui-r-sm);
    /* 比弹窗底色再暗一档：同色时输入框只剩一根描边，深色下看不出哪儿能填。
       这里用 background-color 而不是 background 简写 —— 简写会把 Pico 给
       select 的那个下拉箭头（background-image）一起清掉 */
    background-color: var(--ui-surface-2);
    box-shadow: none;
    color: var(--ui-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
}

/* 下拉箭头自己画一条：Pico 那个箭头是深色的，深色主题下压在深底上看不见，
   统一换成中灰描边（#858d99 在两套底色上都够清楚） */
.un-sedit__field select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23858d99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 11px auto;
    -webkit-appearance: none;
    appearance: none;
}

.un-sedit__field textarea {
    min-height: 62px;
    resize: vertical;
}

.un-sedit__field input:focus,
.un-sedit__field select:focus,
.un-sedit__field textarea:focus {
    border-color: var(--ui-accent-line);
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

.un-sedit__msg {
    margin: 0;
    min-height: 0;
    padding: 0 16px;
    color: var(--ui-text-3);
    font-size: 12px;
    line-height: 1.6;
}

.un-sedit__msg:not(:empty) {
    padding-top: 10px;
}

.un-sedit__msg.is-ok {
    color: var(--ui-green);
}

.un-sedit__msg.is-err {
    color: var(--ui-bad);
}

/* 单列：窄屏把两列网格退回一列，字段按顺序排下来 */
@media (max-width: 520px) {
    .un-sedit__form {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px 12px;
    }

    .un-sedit__msg {
        padding: 0 12px;
    }
}

/* ==========================================================================
   N. 游客弹窗：申请入驻 / 审核结果（全站通用）
   --------------------------------------------------------------------------
   这两个弹窗原来只长在 RSS 聚合页上（样式和脚本都内联在 page-rssunion.php），
   所以别的页面点导航里的「申请入驻 / 审核结果」只能先跳到聚合页再自动弹。
   搬到这里之后，样式进了插件托管的视觉基础层，任何页面都能就地打开。

   骨架复用上面的 .un-amodal（遮罩 / 盒 / 头 / 脚 / 按钮），这里只补三类东西：
     1. 表单控件（.un-gm__field / __input / __fetch / __picks）
     2. 状态页签与列表（.un-gm .un-gm__tab / __item）
     3. 分页（.un-gm__pager）

   命名统一 un-gm- 前缀而不是直接复用 RSS 页的 .un-input / .un-review：
   那两套的可变色板挂在 .un-page 作用域上（--un-* 是 --ui-* 的改名），
   弹窗是挂到 body 下的 fixed 层，拿不到那个作用域，复用会掉色。
   ========================================================================== */

/* 弹窗打开时锁住背景滚动（脚本在 <html> 上加这个类） */
html.un-gm-open,
html.un-gm-open body {
    overflow: hidden;
}

.un-gm__box {
    max-width: 480px;
}

/* 审核列表要宽一点，一行能放下站名 + 状态 + 两个时间 */
.un-gm__box--wide {
    max-width: 640px;
}

/* 可滚动的内容区：头部和底部按钮固定，只有中间这段滚 */
.un-gm__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 16px 12px;
    overflow-y: auto;
}

.un-gm__field {
    margin-top: 12px;
}

.un-gm__label {
    display: block;
    margin-bottom: 5px;
    color: var(--ui-text-2);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.un-gm__label em {
    margin-left: 2px;
    color: var(--ui-bad);
    font-style: normal;
}

.un-gm__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 控件要显式写 box-sizing / margin：Pico 对 input 有 40px 左右内边距和 1rem 外边距，
   规则是 (0,1,1)，比单类 (0,1,0) 高，不清掉高度会直接翻倍 */
.un-gm .un-gm__input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0 11px;
    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);
    font-family: inherit;
    font-size: 13px;
    line-height: 34px;
}

.un-gm .un-gm__input::placeholder {
    color: var(--ui-text-3);
}

.un-gm .un-gm__input:hover {
    border-color: var(--ui-border-2);
}

.un-gm .un-gm__input:focus {
    border-color: var(--ui-accent-line);
    outline: none;
    background: var(--ui-surface);
    box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

.un-gm textarea.un-gm__input {
    height: auto;
    min-height: 68px;
    padding: 8px 11px;
    line-height: 1.65;
    resize: vertical;
}

.un-gm .un-gm__fetch {
    flex: none;
    height: 36px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid var(--ui-border-2);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface);
    box-shadow: none;
    color: var(--ui-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 34px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.un-gm .un-gm__fetch:hover:not(:disabled) {
    border-color: var(--ui-accent-line);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

.un-gm .un-gm__fetch:disabled {
    color: var(--ui-text-3);
    cursor: default;
    opacity: .7;
}

.un-gm__hint {
    margin-top: 5px;
    color: var(--ui-text-3);
    font-size: 11.5px;
    line-height: 1.6;
}

/* 自动抓到的 RSS 候选：点一下填进输入框 */
.un-gm .un-gm__picks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.un-gm .un-gm__picks:empty {
    display: none;
}

.un-gm .un-gm__pick {
    max-width: 100%;
    margin: 0;
    padding: 3px 9px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface);
    box-shadow: none;
    color: var(--ui-text-3);
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.6;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.un-gm .un-gm__pick:hover {
    border-color: var(--ui-accent-line);
    color: var(--ui-accent);
}

.un-gm .un-gm__pick.is-picked {
    border-color: var(--ui-accent-line);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

/* 蜜罐：正常用户看不见也不会填，机器人会填 */
.un-gm__honey {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}

.un-gm__msg {
    display: none;
    margin-top: 10px;
    padding: 7px 10px;
    border-radius: var(--ui-r-sm);
    font-size: 12px;
    line-height: 1.6;
}

.un-gm__msg.is-show {
    display: block;
}

.un-gm__msg.is-ok {
    background: var(--ui-green-soft);
    color: var(--ui-green);
}

.un-gm__msg.is-err {
    background: var(--ui-bad-soft);
    color: var(--ui-bad);
}

.un-gm__msg.is-info {
    background: var(--ui-surface-3);
    color: var(--ui-text-2);
}

/* 直接挂在盒子里（不走 .un-gm__body 的内边距）时，自己留出左右边距 */
.un-gm__msg--inset {
    margin: 8px 16px 0;
}

/* ---------- 审核结果：状态页签 + 列表 ---------- */

.un-gm__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px 0;
}

.un-gm .un-gm__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.un-gm .un-gm__tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-pill);
    background: var(--ui-surface);
    box-shadow: none;
    color: var(--ui-text-2);
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.un-gm .un-gm__tab:hover {
    border-color: var(--ui-border-2);
    color: var(--ui-text);
}

.un-gm .un-gm__tab.is-active {
    border-color: var(--ui-accent-line);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

.un-gm .un-gm__tab i {
    color: var(--ui-text-3);
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.un-gm .un-gm__tab.is-active i {
    color: var(--ui-accent);
}

.un-gm__count {
    margin-left: auto;
    color: var(--ui-text-3);
    font-size: 11.5px;
    line-height: 1.5;
}

.un-gm__list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 10px 16px 0;
    overflow-y: auto;
}

.un-gm__item {
    padding: 9px 11px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r);
    background: var(--ui-surface-2);
}

.un-gm__item-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.un-gm__item-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ui-text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.un-gm__item-own {
    margin-left: 4px;
    padding: 0 5px;
    border-radius: var(--ui-r-sm);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
}

.un-gm__state {
    flex: none;
    padding: 1px 7px;
    border-radius: var(--ui-r-pill);
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
}

.un-gm__state--pending {
    background: var(--ui-gold-soft);
    color: var(--ui-gold);
}

.un-gm__state--approved {
    background: var(--ui-green-soft);
    color: var(--ui-green);
}

.un-gm__state--rejected {
    background: var(--ui-rose-soft);
    color: var(--ui-rose);
}

.un-gm__item-url {
    display: block;
    margin-top: 3px;
    color: var(--ui-text-3);
    font-size: 11.5px;
    line-height: 1.6;
    text-decoration: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.un-gm__item-url:hover {
    color: var(--ui-accent);
    text-decoration: underline;
}

.un-gm__item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    color: var(--ui-text-3);
    font-size: 11.5px;
    line-height: 1.6;
}

.un-gm__item-meta b {
    color: var(--ui-text-2);
    font-weight: 500;
}

.un-gm__reason {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: var(--ui-r-sm);
    background: var(--ui-rose-soft);
    color: var(--ui-rose);
    font-size: 11.5px;
    line-height: 1.6;
}

.un-gm__reason i {
    margin-right: 5px;
    font-style: normal;
    font-weight: 600;
}

.un-gm__empty {
    padding: 26px 8px;
    color: var(--ui-text-3);
    font-size: 12.5px;
    line-height: 1.7;
    text-align: center;
}

.un-gm__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 16px 12px;
}

.un-gm__pager a,
.un-gm__pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-r-sm);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
}

.un-gm__pager a:hover {
    border-color: var(--ui-accent-line);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

.un-gm__pager .is-current {
    border-color: var(--ui-accent-line);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-weight: 600;
}

.un-gm__pager .is-disabled {
    opacity: .42;
    pointer-events: none;
}

.un-gm__pager .is-gap {
    border-color: transparent;
    background: transparent;
}

/* 窄屏：弹窗铺满宽度，字段区留一点内边距 */
@media (max-width: 520px) {
    .un-amodal {
        padding: 10px;
    }

    .un-gm__box,
    .un-gm__box--wide {
        max-width: none;
        max-height: min(88vh, 720px);
    }

    .un-gm__body,
    .un-gm__bar,
    .un-gm__list {
        padding-left: 12px;
        padding-right: 12px;
    }

    .un-gm__count {
        margin-left: 0;
    }
}

/* ==========================================================================
   搜索联想下拉（1.9.244）
   顶部导航搜索 / 网站广场搜索共用的那份，DOM 由 assets/ru-suggest.js 建。
   面板挂在 <body> 上、position:fixed 定位（窄屏时搜索框在汉堡面板里，
   那个面板 overflow:auto，挂在表单里会被裁掉半截），坐标由 JS 现算。
   ========================================================================== */
.ru-suggest {
    position: fixed;
    z-index: 9000;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-2);
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.4;
    -webkit-overflow-scrolling: touch;
}

.ru-suggest[hidden] {
    display: none !important;
}

/* Pico 会给 ul/li 加项目符号，这里虽然不用列表，仍把链接的默认下划线压掉 */
.ru-suggest__item,
.ru-suggest__item:hover,
.ru-suggest__item:focus {
    text-decoration: none;
}

.ru-suggest__group + .ru-suggest__group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--ui-border);
}

.ru-suggest__head {
    padding: 4px 9px 3px;
    color: var(--ui-text-3);
    font-size: 11px;
    letter-spacing: .3px;
}

.ru-suggest__item {
    display: block;
    padding: 6px 9px;
    border-radius: 8px;
    color: var(--ui-text);
    cursor: pointer;
    transition: background-color .12s ease;
}

.ru-suggest__item:hover,
.ru-suggest__item.is-active {
    background: var(--ui-accent-soft);
    color: var(--ui-text);
}

.ru-suggest__t {
    display: block;
    overflow: hidden;
    color: var(--ui-text);
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ru-suggest__item.is-active .ru-suggest__t {
    color: var(--ui-accent);
}

.ru-suggest__m {
    display: block;
    overflow: hidden;
    margin-top: 1px;
    color: var(--ui-text-3);
    font-size: 11.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ru-suggest__empty {
    padding: 14px 9px;
    color: var(--ui-text-3);
    text-align: center;
}

.ru-suggest__foot {
    margin-top: 4px;
    padding: 7px 9px 4px;
    border-top: 1px dashed var(--ui-border);
    color: var(--ui-text-3);
    font-size: 11.5px;
}