/* light 模式加强网格可见度 */
[data-theme="light"] body { --hairline: rgba(15,16,20,.10); }

:root {
    /* ─── surfaces（与 home.css 雷达首页对齐）─── */
    --tl-bg: #0b0c14;
    --tl-bg-soft: #0f1019;
    --tl-surface: #13141f;
    --tl-surface-2: #181a26;
    --tl-surface-3: #1c1e2b;
    --tl-card-bg: #13141f;
    --tl-card-overlay: transparent;
    --tl-card-dots: transparent;
    --tl-header-bg: rgba(11, 12, 20, 0.72);
    --tl-header-tint: transparent;

    /* ─── page 网格 + 光晕（仿 home.css 方格坐标纸） ─── */
    --tl-page-glow: rgba(0, 229, 176, 0.10);
    --tl-page-grid: rgba(255, 255, 255, 0.035);
    --tl-page-grid-size: 56px;

    /* ─── chip / border / divider ─── */
    --tl-chip: rgba(255, 255, 255, 0.05);
    --tl-chip-strong: rgba(255, 255, 255, 0.10);
    --tl-border: rgba(255, 255, 255, 0.10);
    --tl-border-strong: rgba(255, 255, 255, 0.18);
    --tl-rule: rgba(255, 255, 255, 0.10);

    /* ─── 文本 ─── */
    --tl-text: #f2efe7;
    --tl-text-2: #c1bdcf;
    --tl-text-3: #8a8798;
    --tl-text-on-amber: #06110d;

    /* ─── 信号色（radar 雷达绿，取代原来的蓝紫 amber）─── */
    --tl-amber: #00e5b0;                    /* variable name 保留 legacy，实际是 jade 信号色 */
    --tl-amber-soft: rgba(0, 229, 176, 0.14);
    --tl-amber-mid:  rgba(0, 229, 176, 0.28);
    --tl-amber-glow: rgba(0, 229, 176, 0.35);

    /* ─── 语义色（保留，但整体用 signal 主导）─── */
    --tl-green: #34d399;
    --tl-red: #f87171;
    --tl-cyan: #22d3ee;
    --tl-purple: #8b5cf6;

    /* ─── 阴影 + 半径 ─── */
    --tl-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03), 0 14px 32px rgba(0, 0, 0, 0.32);
    --tl-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 56px rgba(0, 0, 0, 0.46);
    --tl-radius-xl: 16px;
    --tl-radius-lg: 12px;
    --tl-radius-md: 10px;
    --tl-radius-sm: 8px;

    /* ─── 字体（与 home.css 完全对齐）─── */
    --tl-font-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
    --tl-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --tl-font-mono: "IBM Plex Mono", "JetBrains Mono", "SF Mono", Consolas, monospace;
}

/* ============== LIGHT THEME (override, 与 home.css [data-theme="light"] 对齐) ============== */
[data-theme="light"] {
    /* surfaces */
    --tl-bg: #f7f6f1;               /* warm off-white paper */
    --tl-bg-soft: #f0eee6;
    --tl-surface: #ffffff;
    --tl-surface-2: #f7f6f1;
    --tl-surface-3: #eceada;
    --tl-card-bg: #ffffff;
    --tl-card-overlay: transparent;
    --tl-card-dots: transparent;
    --tl-header-bg: rgba(247, 246, 241, 0.82);
    --tl-header-tint: transparent;

    /* page 网格 + 光晕（浅色版：信号绿更深，网格反转为黑向透明） */
    --tl-page-glow: rgba(0, 148, 116, 0.08);
    --tl-page-grid: rgba(15, 16, 20, 0.04);

    /* chip / border / divider（反转为黑向透明） */
    --tl-chip: rgba(15, 16, 20, 0.04);
    --tl-chip-strong: rgba(15, 16, 20, 0.08);
    --tl-border: rgba(15, 16, 20, 0.10);
    --tl-border-strong: rgba(15, 16, 20, 0.18);
    --tl-rule: rgba(15, 16, 20, 0.10);

    /* 文本 */
    --tl-text: #14151b;
    --tl-text-2: #3e3f49;
    --tl-text-3: #6d6d77;
    --tl-text-on-amber: #ffffff;

    /* 信号色（light：deeper jade for white contrast） */
    --tl-amber: #009474;
    --tl-amber-soft: rgba(0, 148, 116, 0.09);
    --tl-amber-mid: rgba(0, 148, 116, 0.22);
    --tl-amber-glow: rgba(0, 148, 116, 0.24);

    /* 语义色（light 降饱和） */
    --tl-green: #059669;
    --tl-red: #de3e3e;
    --tl-cyan: #0891b2;
    --tl-purple: #7a4bd9;

    /* 阴影（light：更浅、更短距） */
    --tl-shadow-card: 0 1px 0 rgba(15, 16, 20, 0.04), 0 10px 24px rgba(15, 16, 20, 0.08);
    --tl-shadow-hover: 0 1px 0 rgba(15, 16, 20, 0.06), 0 18px 40px rgba(15, 16, 20, 0.12);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.tl-page {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(1200px 420px at 50% -120px, var(--tl-page-glow), transparent 70%),
        var(--tl-bg);
    color: var(--tl-text);
    font-family: var(--tl-font-sans);
    font-size: 15px;
    line-height: 1.75;
}

.tl-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--tl-page-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--tl-page-grid) 1px, transparent 1px);
    background-size: var(--tl-page-grid-size) var(--tl-page-grid-size);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
    pointer-events: none;
}

.tl-page a,
.tl-page button,
.tl-page select,
.tl-page input {
    font-family: inherit;
}

.tl-page a {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tl-header {
    position: relative;
    z-index: 5;
    border-bottom: 1px solid var(--tl-border);
    background:
        linear-gradient(180deg, var(--tl-header-tint), transparent),
        var(--tl-header-bg);
    backdrop-filter: blur(10px);
}

.tl-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 22% -40%, var(--tl-amber-soft), transparent 48%);
    pointer-events: none;
}

.tl-header-inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 42px 24px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 28px;
    align-items: end;
}

.tl-header-text h1 {
    margin: 0;
    font-family: var(--tl-font-serif);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--tl-text);
}

.tl-header-text p {
    max-width: 620px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.85;
    color: var(--tl-text-2);
}

.tl-layout {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 24px 72px;
}

.tl-main {
    min-width: 0;
}

.tl-scene-box,
.tl-link-spotlight {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)), rgba(19, 20, 31, 0.96);
    box-shadow: var(--tl-shadow-card);
}

.tl-scene-box::before,
.tl-link-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 0.8px, transparent 0.8px);
    background-size: 18px 18px;
    opacity: 0.18;
    pointer-events: none;
}

.tl-scene-box {
    padding: 18px 18px 16px;
    margin-bottom: 16px;
}

.tl-scene-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
}

.tl-scene-title,
.tl-link-spotlight-title,
.tl-compare-title,
.tl-plans-title,
.tl-empty-title {
    margin: 0;
    font-family: var(--tl-font-serif);
    color: var(--tl-text);
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.tl-scene-title,
.tl-link-spotlight-title {
    font-size: 28px;
}

.tl-scene-sub,
.tl-link-spotlight-kicker,
.tl-link-spotlight-sub,
.tl-compare-sub,
.tl-plans-sub,
.tl-empty-sub {
    color: var(--tl-text-2);
}

.tl-scene-sub,
.tl-link-spotlight-kicker {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tl-link-spotlight {
    padding: 18px;
    margin-bottom: 18px;
}

.tl-link-spotlight-main {
    position: relative;
    z-index: 1;
}

.tl-link-spotlight-sub {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.8;
}

.tl-scene-tags,
.tl-link-spotlight-actions,
.tl-link-hot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tl-scene-chip,
.tl-link-hot-chip,
.tl-link-btn,
.tl-card-scene-chip {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.tl-scene-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--tl-border);
    border-radius: 999px;
    background: var(--tl-chip);
    color: var(--tl-text-2);
    padding: 6px 12px;
    font-size: 12.5px;
    line-height: 1.5;
}

.tl-scene-chip:hover,
.tl-scene-chip.active {
    color: var(--tl-amber);
    background: var(--tl-amber-soft);
    border-color: rgba(0, 229, 176, 0.24);
}

.tl-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tl-border);
    border-radius: 11px;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.02);
    color: var(--tl-text);
}

.tl-link-btn:hover {
    border-color: var(--tl-border-strong);
    transform: translateY(-1px);
}

.tl-link-btn-primary {
    background: var(--tl-amber);
    border-color: var(--tl-amber);
    color: var(--tl-text-on-amber);
}

.tl-link-btn-primary:hover {
    box-shadow: 0 12px 24px rgba(0, 229, 176, 0.24);
}

.tl-link-spotlight-metrics {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.tl-link-metric {
    border: 1px solid var(--tl-border);
    border-radius: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.tl-link-metric-label,
.tl-link-hot-label {
    display: inline-block;
    color: var(--tl-text-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tl-link-metric-value {
    display: block;
    margin-top: 4px;
    font-family: var(--tl-font-mono);
    font-size: 24px;
    font-weight: 600;
    color: var(--tl-text);
}

.tl-link-hot-list {
    margin-top: 8px;
}

.tl-link-hot-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--tl-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--tl-text-2);
    padding: 6px 11px;
    font-size: 12px;
}

.tl-link-hot-chip span {
    font-family: var(--tl-font-mono);
    color: var(--tl-text-3);
    font-size: 11px;
}

.tl-link-hot-chip:hover {
    color: var(--tl-text);
    border-color: rgba(0, 229, 176, 0.28);
}

.tl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* 列表视图：单列 + 卡片横向排布 */
.tl-grid.is-list {
    grid-template-columns: 1fr;
    gap: 12px;
}
.tl-grid.is-list .tl-card {
    flex-direction: row;
    align-items: stretch;
    min-height: auto;
    padding: 18px 20px;
    gap: 20px;
}
.tl-grid.is-list .tl-card-head {
    flex: 0 0 240px;
    min-width: 0;
}
.tl-grid.is-list .tl-card-desc {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    margin: 0;
    -webkit-line-clamp: 2;
}
.tl-grid.is-list .tl-card-dims,
.tl-grid.is-list .tl-card-scenes {
    display: none;
}
.tl-grid.is-list .tl-card-price-row {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
}
.tl-grid.is-list .tl-card-ctas {
    flex: 0 0 220px;
    align-self: center;
    margin: 0;
}
@media (max-width: 900px) {
    .tl-grid.is-list .tl-card {
        flex-wrap: wrap;
    }
    .tl-grid.is-list .tl-card-head {
        flex: 1 1 100%;
    }
    .tl-grid.is-list .tl-card-desc,
    .tl-grid.is-list .tl-card-price-row,
    .tl-grid.is-list .tl-card-ctas {
        flex: 1 1 100%;
    }
}

@keyframes tlCardEnter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tl-card {
    /* 统一 signal tone：所有 tl-tone-* 变体都收敛到雷达绿（radar 一致性 > 分类彩色识别） */
    --tl-tone: var(--tl-amber);
    --tl-tone-soft: var(--tl-amber-soft);
    --tl-tone-mid: var(--tl-amber-mid);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-xl);
    background: var(--tl-card-bg);
    padding: 18px;
    box-shadow: var(--tl-shadow-card);
    animation: tlCardEnter 0.45s ease both;
    animation-delay: var(--tl-enter-delay, 0ms);
}

/* 顶部一像素信号分隔线（默认隐身，hover 发光） */
.tl-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--tl-tone);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

/* 左侧细信号 tick（静态，低调） */
.tl-card::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 0;
    width: 28px;
    height: 1px;
    background: var(--tl-tone);
    opacity: 0.55;
    pointer-events: none;
}

.tl-card:hover {
    transform: translateY(-3px);
    border-color: var(--tl-amber-mid);
    box-shadow: var(--tl-shadow-hover), 0 0 0 1px var(--tl-amber-soft);
}

.tl-card:hover::before {
    opacity: 0.9;
    box-shadow: 0 0 18px var(--tl-amber-glow);
}

/* tone 变体：保留 class hook 以免 PHP 模板出错，但都收敛到同一 signal 色 */
.tl-card.tl-tone-content,
.tl-card.tl-tone-design,
.tl-card.tl-tone-code,
.tl-card.tl-tone-video,
.tl-card.tl-tone-income,
.tl-card.tl-tone-commerce,
.tl-card.tl-tone-study {
    --tl-tone: var(--tl-amber);
    --tl-tone-soft: var(--tl-amber-soft);
    --tl-tone-mid: var(--tl-amber-mid);
}

.tl-card.tl-tone-commerce {
    --tl-tone: #34d399;
    --tl-tone-soft: rgba(52, 211, 153, 0.1);
    --tl-tone-mid: rgba(52, 211, 153, 0.22);
}

.tl-card.tl-tone-study {
    --tl-tone: #60a5fa;
    --tl-tone-soft: rgba(96, 165, 250, 0.1);
    --tl-tone-mid: rgba(96, 165, 250, 0.22);
}

.tl-card-ad-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    border-radius: 4px;
    border: 1px solid var(--tl-amber-mid);
    background: var(--tl-amber-soft);
    color: var(--tl-amber);
    padding: 2px 7px;
    font-family: var(--tl-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    z-index: 2;
}

.tl-card-head,
.tl-card-dims,
.tl-card-scenes,
.tl-card-price-row,
.tl-card-ctas {
    position: relative;
    z-index: 1;
}

.tl-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tl-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tl-font-mono);
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    background: var(--tl-surface-2);
    border: 1px solid var(--tl-border);
    color: var(--tl-text);
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.tl-card:hover .tl-card-icon {
    transform: translateY(-1px);
    border-color: var(--tl-amber-mid);
}

.tl-card-meta {
    min-width: 0;
    flex: 1;
}

.tl-card-name {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--tl-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

.tl-card-badge {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
}

.tl-card-cat {
    margin-top: 3px;
    color: var(--tl-text-3);
    font-size: 12px;
    line-height: 1.6;
}

.tl-card-rel-count {
    margin-top: 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    background: var(--tl-tone-soft);
    color: var(--tl-text);
    padding: 3px 9px;
    font-size: 12px;
    line-height: 1.45;
}

.tl-card-score {
    width: 88px;
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}

.tl-card-score-num {
    display: inline-block;
    font-family: var(--tl-font-mono);
    color: var(--tl-text);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}

.tl-card-score-max {
    display: inline-block;
    margin-left: 3px;
    color: var(--tl-text-3);
    font-family: var(--tl-font-mono);
    font-size: 11px;
    line-height: 1;
}

.tl-card-score-track {
    margin-top: 8px;
    height: 3px;
    border-radius: 999px;
    background: var(--tl-chip);
    overflow: visible;
}

.tl-card-score-fill {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--tl-amber);
    box-shadow: 0 0 10px var(--tl-amber-glow);
}

.tl-card-score-fill::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tl-tone);
    box-shadow: 0 0 0 3px var(--tl-tone-soft), 0 0 14px var(--tl-tone-mid);
}

.tl-card-tagline {
    position: relative;
    z-index: 1;
    color: var(--tl-text-2);
    font-size: 14px;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tl-card-dims {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tl-dim-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--tl-chip);
    color: var(--tl-text-2);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}

/* 所有 dim 徽章统一用 signal 轻底 + signal 文字，保持 radar 一致性 */
.tl-dim-cn_available,
.tl-dim-beginner_friendly,
.tl-dim-access_hard,
.tl-dim-free,
.tl-dim-can_monetize,
.tl-dim-high_efficiency {
    background: var(--tl-amber-soft);
    color: var(--tl-amber);
    border: 1px solid var(--tl-amber-mid);
}

.tl-card-scenes {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.tl-card-scenes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.tl-card-scenes-title {
    margin: 0;
    color: var(--tl-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.tl-card-scenes-state {
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    line-height: 1.3;
}

.tl-card-scenes-state.active {
    background: rgba(52, 211, 153, 0.12);
    color: #8af1c5;
}

.tl-card-scenes-state.inactive {
    background: rgba(255, 255, 255, 0.07);
    color: var(--tl-text-3);
}

.tl-card-scenes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tl-card-scene-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--tl-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--tl-text-2);
    padding: 5px 9px;
    font-size: 12px;
    line-height: 1.5;
}

.tl-card-scene-chip:hover {
    border-color: rgba(0, 229, 176, 0.26);
    color: var(--tl-text);
}

.tl-card-scene-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tl-tone);
    flex-shrink: 0;
}

.tl-card-scene-level {
    border-radius: 999px;
    background: var(--tl-tone-soft);
    color: var(--tl-text);
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1.35;
}

.tl-card-scenes-more,
.tl-card-scenes-go {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
}

.tl-card-scenes-more {
    margin-top: 8px;
    color: var(--tl-amber);
}

.tl-card-scenes-empty {
    color: var(--tl-text-3);
    font-size: 12px;
    line-height: 1.8;
}

.tl-card-scenes-actions {
    margin-top: 10px;
}

.tl-card-scenes-go {
    min-height: 36px;
    border: 1px solid var(--tl-border);
    border-radius: 10px;
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--tl-text);
}

.tl-card-scenes-go:hover {
    border-color: rgba(0, 229, 176, 0.26);
    transform: translateY(-1px);
}

.tl-card-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tl-price-tag {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.tl-card-ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.tl-card-vote-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

.tl-card-vote {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 5px 8px 5px 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tl-cta-detail,
.tl-cta-try {
    min-height: 42px;
    border-radius: 11px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    padding: 10px 8px;
}

.tl-cta-detail {
    border: 1px solid var(--tl-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--tl-text);
}

.tl-cta-detail:hover {
    border-color: rgba(0, 229, 176, 0.3);
}

.tl-page a.tl-cta-try,
.tl-cta-try {
    border: 1px solid var(--tl-amber);
    background: var(--tl-amber);
    color: var(--tl-text-on-amber);
}

.tl-cta-try:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 229, 176, 0.24);
}

.tl-card-vote-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.tl-card-vote-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(248, 113, 113, 0.12);
    color: #ff6b6b;
}

.tl-card-vote-btn.active {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    box-shadow: 0 10px 18px rgba(239, 68, 68, 0.22);
}

/* Light 主题下心形按钮颜色独立处理：未点赞深灰可见，已点赞保持红色 */
[data-theme="light"] .tl-card-vote-btn {
    border-color: rgba(15, 16, 20, 0.14);
    background: rgba(15, 16, 20, 0.03);
    color: rgba(15, 16, 20, 0.62);
}
[data-theme="light"] .tl-card-vote-btn:hover {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}
[data-theme="light"] .tl-card-vote-btn.active {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.10);
    color: #ef4444;
    box-shadow: 0 8px 16px rgba(239, 68, 68, 0.14);
}

.tl-card-vote-btn.is-busy {
    opacity: 0.72;
    pointer-events: none;
}

.tl-card-vote-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tl-card-vote-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}

.tl-card-vote-count {
    min-width: 34px;
    text-align: center;
    font-family: var(--tl-font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--tl-text-3);
}

.tl-card-watermark {
    position: absolute;
    right: 8px;
    bottom: 4px;
    font-family: var(--tl-font-mono);
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.08em;
    color: rgba(255, 255, 255, 0.07);
    pointer-events: none;
    user-select: none;
}

.tl-card:hover .tl-card-watermark {
    color: rgba(255, 255, 255, 0.11);
}

.tl-empty {
    grid-column: 1 / -1;
    border: 1px dashed var(--tl-border-strong);
    border-radius: var(--tl-radius-xl);
    background: rgba(19, 20, 31, 0.9);
    padding: 54px 24px;
    text-align: center;
    box-shadow: var(--tl-shadow-card);
}

.tl-empty-icon {
    font-size: 38px;
    margin-bottom: 12px;
}

.tl-empty-title {
    font-size: 28px;
}

.tl-empty-sub {
    margin: 10px 0 18px;
    font-size: 14px;
}

.tl-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 11px;
    background: var(--tl-amber);
    color: var(--tl-text-on-amber);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
}

.tl-pagination-wrap {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.tl-pagination-wrap ul {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.tl-pagination-wrap a,
.tl-pagination-wrap span {
    min-width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: var(--tl-text);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
    text-decoration: none;
}

.tl-pagination-wrap a {
    cursor: pointer;
}

.tl-pagination-wrap a:hover {
    color: #fff;
    border-color: var(--tl-amber, #00e5b0);
    background: rgba(0, 229, 176, 0.14);
}

.tl-pagination-wrap span.current {
    color: var(--tl-text-on-amber, #0b0c14);
    border-color: var(--tl-amber);
    background: var(--tl-amber);
    font-weight: 700;
}

.tl-pagination-wrap .dots {
    border: 0;
    background: transparent;
    color: var(--tl-text-3);
}

/* Light 主题下切换浅色底 + 深色字 */
[data-theme="light"] .tl-pagination-wrap a,
[data-theme="light"] .tl-pagination-wrap span {
    border-color: rgba(15, 16, 20, 0.14);
    background: rgba(15, 16, 20, 0.03);
    color: rgba(15, 16, 20, 0.78);
}
[data-theme="light"] .tl-pagination-wrap a:hover {
    color: #0b0c14;
    border-color: var(--tl-amber, #00946e);
    background: rgba(0, 148, 110, 0.10);
}
[data-theme="light"] .tl-pagination-wrap span.current {
    color: #fff;
    border-color: var(--tl-amber, #00946e);
    background: var(--tl-amber, #00946e);
}

.tl-compare-box,
.tl-plans-box {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--tl-border);
}

.tl-compare-head,
.tl-plans-head {
    margin-bottom: 12px;
}

.tl-compare-title,
.tl-plans-title {
    font-size: 28px;
}

.tl-compare-sub,
.tl-plans-sub {
    margin: 7px 0 0;
    font-size: 13px;
}

.tl-compare-grid,
.tl-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tl-compare-card,
.tl-plan-card {
    border: 1px solid var(--tl-border-strong);
    border-radius: var(--tl-radius-lg);
    background: var(--tl-surface-2);
    box-shadow: var(--tl-shadow-card);
}

.tl-compare-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px;
}

.tl-compare-card:hover,
.tl-plan-card:hover {
    transform: translateY(-2px);
    border-color: var(--tl-amber-mid);
    background: var(--tl-surface-3);
}

.tl-compare-a,
.tl-compare-b,
.tl-plan-title {
    color: var(--tl-text) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.tl-compare-vs,
.tl-plan-tag {
    border-radius: 999px;
    padding: 2px 8px;
    background: var(--tl-amber-soft);
    color: var(--tl-amber);
    font-size: 11px;
    font-weight: 700;
}

.tl-compare-arrow {
    margin-left: auto;
    color: var(--tl-text-3);
}

.tl-plan-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
}

.tl-plan-icon {
    font-size: 20px;
}

.tl-plan-body {
    flex: 1;
    min-width: 0;
}

.tl-plan-desc {
    margin-top: 3px;
    color: var(--tl-text-2) !important;
    font-size: 12px;
}

@media (max-width: 1240px) {
    .tl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tl-header-inner {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}

@media (max-width: 1080px) {
    .tl-layout {
        grid-template-columns: 248px minmax(0, 1fr);
    }

    .tl-link-spotlight-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .tl-header-inner {
        grid-template-columns: 1fr;
    }

    .tl-grid,
    .tl-compare-grid,
    .tl-plans-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tl-layout {
        position: static;
        z-index: auto;
        display: block;
        padding: 18px 14px 70px;
    }

    .tl-header-inner {
        padding: 30px 14px 18px;
        gap: 16px;
    }

    .tl-header-text h1 {
        font-size: 34px;
    }

    .tl-main {
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .tl-card-head {
        flex-wrap: wrap;
    }

    .tl-card-score {
        width: 100%;
        text-align: left;
    }

    .tl-card-ctas,
    .tl-link-spotlight-metrics {
        grid-template-columns: 1fr;
    }

    .tl-card-vote-row {
        justify-content: flex-start;
    }

    .tl-card-watermark {
        font-size: 56px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Light theme overrides （2026-04-10，tools redesign 版）
   触发：<html data-theme="light">（由 header.php 的 navxdThemeBtn 切换）
   策略：
     1. 翻转 --tl-* 主令牌为浅色调（与 home.css 的 light 对齐：米白底 + 深字）
     2. 统一 signal 色为更深的 jade（#009474）以保证白底对比度
     3. 还在用 rgba(255,255,255,X) 内联高光的选择器单独覆写
     4. page::before 网格线在 light 下用深色 alpha
   ══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    /* surfaces（与 home.css light 完全对齐）*/
    --tl-bg: #f7f6f1;
    --tl-bg-soft: #f0eee6;
    --tl-surface: #ffffff;
    --tl-surface-2: #f7f6f1;
    --tl-surface-3: #eceada;
    --tl-card-bg: #ffffff;
    --tl-card-overlay: transparent;
    --tl-card-dots: transparent;
    --tl-header-bg: rgba(247, 246, 241, 0.82);
    --tl-header-tint: transparent;

    /* page 网格：浅底用深色 alpha */
    --tl-page-glow: rgba(0, 148, 116, 0.08);
    --tl-page-grid: rgba(15, 16, 20, 0.05);

    /* chip / border / rule */
    --tl-chip: rgba(15, 16, 20, 0.05);
    --tl-chip-strong: rgba(15, 16, 20, 0.09);
    --tl-border: rgba(15, 16, 20, 0.10);
    --tl-border-strong: rgba(15, 16, 20, 0.20);
    --tl-rule: rgba(15, 16, 20, 0.10);

    /* 文本 */
    --tl-text: #14151b;
    --tl-text-2: #3e3f49;
    --tl-text-3: #6d6d77;
    --tl-text-on-amber: #ffffff;

    /* signal：white-bg 需要更深的 jade，否则 #00e5b0 对比度不够 */
    --tl-amber: #009474;
    --tl-amber-soft: rgba(0, 148, 116, 0.10);
    --tl-amber-mid:  rgba(0, 148, 116, 0.28);
    --tl-amber-glow: rgba(0, 148, 116, 0.35);

    /* 阴影偏柔 */
    --tl-shadow-card: 0 1px 0 rgba(15, 16, 20, 0.04), 0 10px 28px rgba(15, 16, 20, 0.06);
    --tl-shadow-hover: 0 1px 0 rgba(15, 16, 20, 0.06), 0 22px 48px rgba(15, 16, 20, 0.12);
}

/* 还在用 rgba(255,255,255,X) 的内联高光：在 light 模式下让其消失或反向 */
[data-theme="light"] .tl-card-icon,
[data-theme="light"] .tl-card-scene-chip,
[data-theme="light"] .tl-scene-box,
[data-theme="light"] .tl-link-spotlight {
    background-color: var(--tl-surface);
    color: var(--tl-text);
}

/* card watermark 在 light 下若用 #fff 高光会消失，调暗 */
[data-theme="light"] .tl-card-watermark {
    color: rgba(11, 12, 20, 0.04);
}

/* score fill 进度条若是 rgba(255,255,255,X) track，浅化 */
[data-theme="light"] .tl-card-score-track {
    background: rgba(11, 12, 20, 0.08);
}

/* card hover border 在 light 下加点蓝紫色调 */
[data-theme="light"] .tl-card:hover {
    border-color: var(--tl-amber-mid);
}

/* score-fill 在 light 下用浅色绿 + 无光晕 */
[data-theme="light"] .tl-card-score-fill {
    background: var(--tl-amber);
    box-shadow: none;
}

/* 直接写 rgba(255,255,255,X) 的细节 chip / pill / btn 在 light 下用 chip 令牌兜底 */
[data-theme="light"] .tl-dim-high_efficiency,
[data-theme="light"] .tl-card-scenes-state.inactive,
[data-theme="light"] .tl-card-scenes,
[data-theme="light"] .tl-card-scene-chip,
[data-theme="light"] .tl-card-scenes-go,
[data-theme="light"] .tl-card-vote,
[data-theme="light"] .tl-cta-detail,
[data-theme="light"] .tl-link-metric,
[data-theme="light"] .tl-link-hot-chip,
[data-theme="light"] .tl-link-btn {
    background-color: var(--tl-chip);
    color: var(--tl-text);
}

[data-theme="light"] .tl-card-scenes,
[data-theme="light"] .tl-card-vote,
[data-theme="light"] .tl-card-ctas {
    border-color: var(--tl-border);
}

/* link-spotlight / scene-box 内嵌点阵在 light 下用深色 alpha */
[data-theme="light"] .tl-link-spotlight::before,
[data-theme="light"] .tl-scene-box::before {
    background-image: radial-gradient(rgba(15, 16, 20, 0.06) 0.8px, transparent 0.8px);
}

/* .tl-link-spotlight 也是 rgba(19,20,31,.96) 黑底，需独立覆写背景层 */
[data-theme="light"] .tl-link-spotlight {
    background: linear-gradient(180deg, rgba(11, 12, 20, 0.012), transparent), var(--tl-surface);
}

/* ════════════════════════════════════════════════════════════════
   新版顶部筛选栏 .tl-filterbar  ——  替代旧 .tl-search/.tl-cat-strip/.tl-sidebar
   ════════════════════════════════════════════════════════════════ */

.tl-filterbar {
    position: sticky;
    top: 64px;
    z-index: 30;
    max-width: 1320px;
    margin: 24px auto 0;
    padding: 18px 22px 14px;
    background: var(--tl-surface);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-xl);
    box-shadow: var(--tl-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── 1. 搜索 ── */
.tl-fb-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--tl-border-strong);
    border-radius: 12px;
    background: var(--tl-bg-soft);
    padding: 10px 10px 10px 15px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tl-fb-search:focus-within {
    border-color: var(--tl-amber-mid);
    box-shadow: 0 0 0 3px var(--tl-amber-soft);
}

.tl-fb-search .tl-fb-search-icon {
    color: var(--tl-text-3);
    flex-shrink: 0;
}

.tl-fb-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tl-text);
    font-size: 14px;
    line-height: 1.6;
}

.tl-fb-search input::placeholder {
    color: var(--tl-text-3);
}

.tl-fb-search button {
    border: 0;
    border-radius: 10px;
    background: var(--tl-amber);
    color: var(--tl-text-on-amber);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tl-fb-search button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0, 229, 176, 0.24);
}

/* ── 2. 快速筛选 chip ── */
.tl-fb-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tl-fb-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--tl-border);
    border-radius: 999px;
    background: var(--tl-chip);
    color: var(--tl-text-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tl-fb-chip:hover {
    color: var(--tl-text);
    border-color: var(--tl-border-strong);
    transform: translateY(-1px);
}

.tl-fb-chip.is-on {
    color: var(--tl-amber);
    border-color: var(--tl-amber-mid);
    background: var(--tl-amber-soft);
    box-shadow: 0 0 14px var(--tl-amber-glow);
}

/* ── 3. 主筛选下拉 + 排序 + 视图 ── */
.tl-fb-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.tl-fb-group,
.tl-fb-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tl-fb-dropdown {
    position: relative;
}

.tl-fb-dropdown > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    min-width: 116px;
    border: 1px solid var(--tl-border);
    border-radius: 10px;
    background: var(--tl-bg-soft);
    color: var(--tl-text);
    font-size: 13px;
    font-weight: 500;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tl-fb-dropdown > summary::-webkit-details-marker,
.tl-fb-dropdown > summary::marker {
    display: none;
    content: "";
}

.tl-fb-dropdown > summary:hover {
    border-color: var(--tl-border-strong);
}

.tl-fb-dropdown[open] > summary {
    border-color: var(--tl-amber-mid);
    box-shadow: 0 0 0 3px var(--tl-amber-soft);
}

.tl-fb-dropdown > summary svg {
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.tl-fb-dropdown[open] > summary svg {
    transform: rotate(180deg);
}

.tl-fb-dd-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.tl-fb-dd-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 220px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--tl-surface-2);
    border: 1px solid var(--tl-border-strong);
    border-radius: var(--tl-radius-md);
    box-shadow: var(--tl-shadow-hover);
    padding: 6px;
    display: grid;
    gap: 2px;
}

.tl-fb-dd-panel::-webkit-scrollbar {
    width: 6px;
}

.tl-fb-dd-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.tl-fb-dd-item {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--tl-text-2);
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.tl-fb-dd-item:hover {
    background: var(--tl-chip-strong);
    color: var(--tl-text);
}

.tl-fb-dd-item.is-on {
    background: var(--tl-amber-soft);
    color: var(--tl-amber);
}

/* 排序 dropdown 面板靠右对齐 */
.tl-fb-dd-sort .tl-fb-dd-panel {
    left: auto;
    right: 0;
}

/* 视图切换 */
.tl-fb-view {
    display: inline-flex;
    border: 1px solid var(--tl-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--tl-bg-soft);
}

.tl-fb-view-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--tl-text-3);
    cursor: pointer;
    transition: transform 0.12s ease;
}

.tl-fb-view-btn + .tl-fb-view-btn {
    border-left: 1px solid var(--tl-border);
}

.tl-fb-view-btn:hover {
    color: var(--tl-text);
}

.tl-fb-view-btn.is-on {
    background: var(--tl-amber-soft);
    color: var(--tl-amber);
}

/* ── 4. 状态条 ── */
.tl-fb-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--tl-border);
    font-size: 12px;
    color: var(--tl-text-3);
}

.tl-fb-status-count strong {
    color: var(--tl-text);
    font-family: var(--tl-font-mono);
    font-weight: 700;
    margin: 0 2px;
}

.tl-fb-status-sep {
    color: var(--tl-text-3);
    opacity: 0.5;
}

.tl-fb-status-pills {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.tl-fb-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--tl-amber-soft);
    color: var(--tl-amber);
    border: 1px solid var(--tl-amber-mid);
    font-size: 11px;
    font-weight: 500;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}

.tl-fb-pill::after {
    content: "×";
    opacity: 0.6;
    font-size: 13px;
    line-height: 1;
}

.tl-fb-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 12px var(--tl-amber-glow);
}

.tl-fb-pill:hover::after {
    opacity: 1;
}

.tl-fb-pill-x {
    color: var(--tl-text-3);
    margin: 0 2px;
    font-size: 11px;
}

.tl-fb-clear {
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid var(--tl-border);
    border-radius: 999px;
    color: var(--tl-amber);
    font-size: 12px;
    font-weight: 500;
    transition: border-color 0.18s ease;
}

.tl-fb-clear:hover {
    border-color: var(--tl-amber-mid);
}

/* ── 移动端触发按钮（桌面隐藏） ── */
.tl-fb-mobile-triggers {
    display: none;
}

/* ── 移动端筛选抽屉 / 排序 sheet ── */
.tl-fb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 6, 12, 0.62);
    opacity: 0;
    visibility: hidden;
    z-index: 420;
    transition: opacity 0.2s ease;
}

html.tl-layer-open .tl-fb-overlay {
    opacity: 1;
    visibility: visible;
}

html.tl-layer-open {
    overflow: hidden;
}

.tl-fb-drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 304px;
    max-width: 88vw;
    height: 100vh;
    background: var(--tl-surface);
    border-right: 1px solid var(--tl-border);
    box-shadow: 20px 0 40px rgba(0, 0, 0, 0.42);
    z-index: 430;
    display: flex;
    flex-direction: column;
    transition: left 0.24s ease;
    visibility: hidden;
}

.tl-fb-drawer.is-open {
    left: 0;
    visibility: visible;
}

.tl-fb-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--tl-border);
}

.tl-fb-drawer-head strong {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tl-text-3);
}

.tl-fb-drawer-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tl-border);
    border-radius: 8px;
    background: var(--tl-bg-soft);
    color: var(--tl-text-2);
    cursor: pointer;
    transition: border-color 0.18s ease;
}

.tl-fb-drawer-close:hover {
    border-color: var(--tl-amber-mid);
}

.tl-fb-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.tl-fb-drawer-section {
    margin-bottom: 18px;
}

.tl-fb-drawer-section-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tl-text-3);
}

.tl-fb-drawer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tl-fb-drawer-list a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--tl-border);
    border-radius: 999px;
    background: var(--tl-bg-soft);
    color: var(--tl-text-2);
    font-size: 12px;
    transition: border-color 0.18s ease;
}

.tl-fb-drawer-list a.is-on {
    color: var(--tl-amber);
    border-color: var(--tl-amber-mid);
    background: var(--tl-amber-soft);
}

.tl-fb-drawer-foot {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--tl-border);
}

.tl-fb-drawer-foot a {
    flex: 1;
    text-align: center;
    padding: 11px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.tl-fb-drawer-reset {
    border: 1px solid var(--tl-border);
    background: var(--tl-bg-soft);
    color: var(--tl-text-2);
}

.tl-fb-drawer-apply {
    border: 1px solid var(--tl-amber);
    background: var(--tl-amber);
    color: var(--tl-text-on-amber);
}

/* 排序 bottom sheet */
.tl-fb-sortsheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%;
    background: var(--tl-surface);
    border-top: 1px solid var(--tl-border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.42);
    z-index: 430;
    padding: 18px;
    transition: bottom 0.24s ease;
    visibility: hidden;
}

.tl-fb-sortsheet.is-open {
    bottom: 0;
    visibility: visible;
}

.tl-fb-sortsheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tl-fb-sortsheet-head strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--tl-text);
}

.tl-fb-sortsheet-list {
    display: grid;
    gap: 4px;
}

.tl-fb-sortsheet-list a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--tl-text-2);
    font-size: 14px;
}

.tl-fb-sortsheet-list a.is-on {
    background: var(--tl-amber-soft);
    color: var(--tl-amber);
}

/* ── 主区单列宽布局 ── */
.tl-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* ════════════════════════════════════════════════════════════════
   响应式：≤768px 切换为抽屉/sheet 模式
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .tl-filterbar {
        position: sticky;
        top: 0;
        margin: 0;
        padding: 12px 14px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        gap: 10px;
    }

    .tl-fb-search button {
        padding: 10px 14px;
    }

    .tl-fb-quick {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -14px;
        padding: 0 14px;
    }

    .tl-fb-quick::-webkit-scrollbar {
        display: none;
    }

    .tl-fb-chip {
        flex-shrink: 0;
    }

    /* 桌面 dropdown / 视图切换 隐藏；只显示 2 个移动按钮 */
    .tl-fb-main > .tl-fb-group,
    .tl-fb-main > .tl-fb-tools {
        display: none;
    }

    .tl-fb-mobile-triggers {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .tl-fb-mobile-triggers button {
        flex: 1;
        padding: 11px;
        border: 1px solid var(--tl-border);
        border-radius: 10px;
        background: var(--tl-bg-soft);
        color: var(--tl-text);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: border-color 0.18s ease;
    }

    .tl-fb-mobile-triggers button:hover {
        border-color: var(--tl-amber-mid);
    }

    .tl-fb-mobile-triggers .tl-fb-mb-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--tl-amber);
        color: var(--tl-text-on-amber);
        font-family: var(--tl-font-mono);
        font-size: 10px;
        font-weight: 700;
    }

    .tl-fb-status {
        font-size: 11px;
    }
}

/* ════════════════════════════════════════════════════════════════
   Light theme override —— 新筛选栏一族
   ════════════════════════════════════════════════════════════════ */
[data-theme="light"] .tl-filterbar {
    background: var(--tl-surface);
    border-color: var(--tl-border);
}

[data-theme="light"] .tl-fb-search,
[data-theme="light"] .tl-fb-dropdown > summary,
[data-theme="light"] .tl-fb-view,
[data-theme="light"] .tl-fb-mobile-triggers button,
[data-theme="light"] .tl-fb-drawer-list a,
[data-theme="light"] .tl-fb-drawer-close,
[data-theme="light"] .tl-fb-drawer-reset {
    background-color: var(--tl-bg-soft);
    border-color: var(--tl-border);
}

[data-theme="light"] .tl-fb-chip {
    background-color: var(--tl-chip);
    border-color: var(--tl-border);
}

[data-theme="light"] .tl-fb-chip.is-on,
[data-theme="light"] .tl-fb-dd-item.is-on,
[data-theme="light"] .tl-fb-view-btn.is-on,
[data-theme="light"] .tl-fb-drawer-list a.is-on,
[data-theme="light"] .tl-fb-sortsheet-list a.is-on {
    background-color: var(--tl-amber-soft);
    color: var(--tl-amber);
    border-color: var(--tl-amber-mid);
}

[data-theme="light"] .tl-fb-pill {
    background-color: var(--tl-amber-soft);
    color: var(--tl-amber);
    border-color: var(--tl-amber-mid);
}

[data-theme="light"] .tl-fb-dd-panel,
[data-theme="light"] .tl-fb-drawer,
[data-theme="light"] .tl-fb-sortsheet {
    background-color: var(--tl-surface);
    border-color: var(--tl-border-strong);
}

[data-theme="light"] .tl-fb-dd-panel::-webkit-scrollbar-thumb {
    background: rgba(15, 16, 20, 0.18);
}

[data-theme="light"] .tl-fb-overlay {
    background: rgba(15, 16, 20, 0.42);
}

[data-theme="light"] .tl-fb-search button,
[data-theme="light"] .tl-fb-drawer-apply {
    background-color: var(--tl-amber);
    color: var(--tl-text-on-amber);
    border-color: var(--tl-amber);
}