/* ── 设计令牌（台账皮肤）────────────────────────────────────────────
           浅色为基准，深色只重定义令牌本身，组件规则一律走 var()。
           --*-rgb 供需要透明度的地方拼 rgba()，--on-accent 是填充 --accent
           时的文字色（浅色下是白、深色下是近黑），保证两套主题都够对比。 */
        :root {
            color-scheme: light dark;

            --bg: #F3F5F7;
            --surface: #FFFFFF;
            --ink: #14202B;
            --ink-2: #4A5866;
            --ink-3: #8593A0;
            --line: #D9DFE5;
            --accent: #1F4E9C;
            --accent-rgb: 31, 78, 156;
            --bg-rgb: 243, 245, 247;
            --ink-rgb: 20, 32, 43;
            --on-accent: #FFFFFF;
            /* 签条底色是 --lost / --backup，浅色下是深底配白字，深色下是亮底配暗字 */
            --ribbon-ink: #FFFFFF;
            --ok: #0B7A58;
            --backup: #7A4EB5;
            --hidden: #6B7785;
            --lost: #C2362B;
            --stripe: rgba(20, 32, 43, 0.028);
            --row-hover: rgba(31, 78, 156, 0.06);
            --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

            /* 兼容旧变量名 */
            --accent-color: var(--accent);
            --accent-color-soft: rgba(31, 78, 156, 0.12);
            --text-color: var(--ink);
            --muted-color: var(--ink-2);
            --border-color: var(--line);
            --surface-color: var(--surface);
            --surface-muted: var(--bg);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg: #0F151B;
                --surface: #161E26;
                --ink: #E6EBF0;
                --ink-2: #A7B3BE;
                --ink-3: #6F7C88;
                --line: #26313C;
                --accent: #7FA6E8;
                --accent-rgb: 127, 166, 232;
                --bg-rgb: 15, 21, 27;
                --ink-rgb: 230, 235, 240;
                --on-accent: #0F151B;
                --ribbon-ink: #0F151B;
                --ok: #20A392;
                --backup: #977DDE;
                --hidden: #8A96A3;
                --lost: #E0665A;
                --stripe: rgba(230, 235, 240, 0.035);
                --row-hover: rgba(127, 166, 232, 0.10);
                --accent-color-soft: rgba(127, 166, 232, 0.16);
            }
        }

        * {
            box-sizing: border-box;
        }

        body {
            position: relative;

            font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg);
            background-image: radial-gradient(circle, rgba(var(--ink-rgb), .07) 1px, transparent 1.3px);
            background-size: 22px 22px;
            color: var(--ink);
            min-height: 100vh;
            margin: 0;
            padding: 32px 0;
            overflow-x: hidden;
        }

        /* 台账的数字一律等宽 + 定宽数位，纵向能对齐 */
        .num,
        .stat-number,
        .date-cell,
        .number-cell {
            font-family: var(--mono);
            font-variant-numeric: tabular-nums;
        }

        .container-fluid {
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 24px;
            overflow-x: hidden;
        }

        .header {
            position: relative;
            z-index: 0;
            text-align: center;
            margin-bottom: 32px;
        }

        /* flex 让图标与标题之间只留一个受控的 gap，
           不再受标签间空白文本节点的影响 */
        .header h1 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 0 0 8px;
            font-size: 2rem;
            font-weight: 700;
        }

        .header h1 .icon,
        .chart-header h3 .icon {
            flex: none;
            color: var(--accent);
        }

        .header p {
            margin: 0;
            color: var(--muted-color);
            font-size: 1rem;
        }

        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 16px;
            margin-bottom: 32px;
        }

        /* 卡片只有一条发丝边，不投影 */
        .stat-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 16px 18px;
            box-shadow: none;
        }

        .stat-number {
            display: block;
            font-size: 1.8rem;
            font-weight: 600;
            line-height: 1.2;
            color: var(--accent);
        }

        .stat-note {
            font-size: 0.7rem;
            color: var(--ink-2);
            margin-top: 4px;
        }

        /* 统计卡兼任状态筛选器：可点的五张加边框悬停 + 选中态描边；
           已删除卡里的备注是个可点小按钮，字号/颜色继承 .stat-note，只把颜色改成 accent
           （放在 .stat-note 规则之后，靠源码顺序覆盖它的 color） */
        .stat-card[data-status] { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
        .stat-card[data-status]:hover { border-color: var(--ink-3); }
        .stat-card.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
        .stat-note--link { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: inherit; text-decoration: underline dotted;
            white-space: nowrap;   /* 1440 下卡片只有约 90px 内容宽，别让「其中仅自见 5」折成两行 */
            font-size: 11px;
        }
        .stat-note--link.is-active { font-weight: 600; }

        .stat-label {
            color: var(--ink-2);
            font-size: 0.85rem;
            margin-top: 6px;
        }

        .stat-number.is-date {
            font-size: 1.2rem;
            line-height: 1.8;
        }

        .survival {
            display: flex;
            gap: 2px;
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
            background: var(--border-color);
            margin: -16px 0 32px;
        }

        .survival > span {
            display: block;
        }

        .survival__ok { background: var(--ok); }
        .survival__backup { background: var(--backup); }
        .survival__hidden { background: var(--hidden); }
        .survival__lost { background: var(--lost); }

        .survival-legend {
            display: flex;
            justify-content: center;
            gap: 14px;
            font-size: 0.78rem;
            color: var(--muted-color);
            margin: -24px 0 32px;
        }

        .survival-legend__item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .survival-legend__dot {
            width: 8px;
            height: 8px;
            border-radius: 2px;
            display: inline-block;
        }

        .table-container,
        .chart-container {
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 32px;
        }

        /* 表格自身滚动：DataTables 渲染后表格宽度由列宽撑开，
           容器负责横向滚动，避免页面整体横向溢出 */
        .table-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* ── 表格 / 卡片：工具条与视图切换 ────────────────────────────────
           .table-toolbar 一行：左边空（宽屏时被居中翻页器占据），右边视图切换组；
           空间不够时整组换行，靠 margin-left:auto 继续贴右。 */
        .table-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 16px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .toolbar-tools {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .duration-filter {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 0;
            font-size: .8rem;
            color: var(--ink-2);
        }

        .card-sort select,
        .duration-filter select {
            width: auto;
            font-size: .8rem;
        }

        .view-toggle {
            display: inline-flex;
            border: 1px solid var(--line);
            border-radius: 999px;
            overflow: hidden;
            flex: none;
        }

        .view-btn {
            border: 0;
            background: var(--surface);
            color: var(--ink-2);
            padding: 4px 12px;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }

        .view-btn.active {
            background: var(--accent);
            color: var(--on-accent);
        }

        /* ── 翻页辅助：顶部迷你翻页条 + 两侧悬浮按钮 ──────────────────────
           两者都只是 table.page() 的快捷方式，disabled/隐藏状态统一由
           syncPagers() 刷新；hidden 属性走仓库既有的 [hidden]!important 语义。 */
        .mini-pager {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: .8rem;
            color: var(--ink-2);
        }

        /* 长度(排序)/搜索那一行：翻页器绝对居中，行内三样同高 */
        .table-controls-row {
            position: relative;
            align-items: center;
        }

        .table-controls-row .mini-pager {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            /* 栅格列自带 position:relative 且排在后面，同为 auto 层级时会把
               翻页器的右半边透明地盖住（下页点不到）——抬一层 */
            z-index: 5;
        }

        @media (max-width: 991px) {
            .table-controls-row .mini-pager {
                position: static;
                transform: none;
                margin: 0 auto 8px;
            }
        }

        .mini-pager__btn {
            border: 1px solid var(--line);
            background: var(--surface);
            color: var(--ink-2);
            border-radius: 999px;
            padding: 2px 10px;
            font-size: .8rem;
            cursor: pointer;
        }

        .mini-pager__btn:disabled {
            opacity: .4;
            cursor: default;
        }

        .mini-pager__btn:not(:disabled):hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .mini-pager__info {
            white-space: nowrap;
        }

        /* 桌面宽屏下贴在列表两侧的翻页按钮：默认不占布局（display: none），
           ≥1280px 且列表滚入视野时才出现（.side-pager--on 控制淡入） */
        .side-pager {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--line);
            background: var(--surface);
            color: var(--ink-2);
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            z-index: 900;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s;
            display: none;
        }

        /* 536px = 内容列宽 1072px（.container-fluid max-width 1120px 减去左右 padding 各 24px）的一半；
           已在 1440px 宽度下用 .table-container 实测边界核对过，按钮与内容边缘留 16px 间隙、不重叠、不引起横向溢出 */
        .side-pager--prev {
            left: calc(50% - 536px - 60px);
        }

        .side-pager--next {
            right: calc(50% - 536px - 60px);
        }

        .side-pager--on:not(:disabled) {
            opacity: 1;
            pointer-events: auto;
        }

        .side-pager:not(:disabled):hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .side-pager:disabled {
            opacity: .25;
            pointer-events: none;
        }

        @media (min-width: 1280px) {
            .side-pager {
                display: block;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .side-pager {
                transition: none;
            }
            .today-item__cover img {
                transition: none;
            }
        }

        /* ── 卡片视图 ──────────────────────────────────────────────────
           卡片模式下只把表格本体收起来，DataTables 的搜索/信息/分页照常。 */
        body.view-cards .table-scroll {
            display: none;
        }

        /* 每页 24 张不在 lengthMenu 里，长度下拉在卡片模式下会显示成空白，
           索性收起来；卡片模式的排序由 .card-sort 负责 */
        body.view-cards #videosTable_wrapper .dataTables_length {
            display: none;
        }

        .card-sort {
            display: flex;
            align-items: center;
            gap: 8px;
            /* 与搜索框同行（长度控件的列里），行距交给 DataTables 的栅格 */
            margin: 0;
            min-height: 35px;
            font-size: 0.85rem;
            color: var(--ink-2);
        }

        @media (max-width: 767px) {
            /* 窄屏时栅格上下堆叠，给排序和搜索之间留口气 */
            .card-sort {
                margin-bottom: 8px;
            }
        }

        .card-sort label {
            margin: 0;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
        }

        .card-grid__empty {
            grid-column: 1 / -1;
            padding: 32px 0;
            text-align: center;
            color: var(--ink-3);
            margin: 0;
        }

        /* 作者样式里的 display 会盖掉 UA 的 [hidden]，这里把它拿回来 */
        .card-grid[hidden],
        .card-sort[hidden] {
            display: none;
        }

        .vcard {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: border-color .15s;
        }

        .vcard:hover { border-color: var(--ink-3); }

        .vcard__cover { position: relative; }

        /* 已删除/仅自见的封面先褪色，hover 时还原 */
        .vcard--lost .vcard__cover img,
        .vcard--hidden .vcard__cover img { filter: grayscale(.6); transition: filter .2s; }

        .vcard--lost:hover .vcard__cover img,
        .vcard--hidden:hover .vcard__cover img { filter: none; }

        .vcard__ribbon {
            position: absolute;
            top: 0;
            left: 0;
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--ribbon-ink);
            padding: 2px 8px;
            border-bottom-right-radius: 6px;
        }

        .vcard__ribbon--lost { background: var(--lost); }
        .vcard__ribbon--backup { background: var(--backup); }

        .vcard__body {
            padding: 12px 14px 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .vcard__title {
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1.4;
            color: var(--ink);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .vcard--lost .vcard__title,
        .vcard--hidden .vcard__title,
        .vcard--backup .vcard__title { color: var(--ink-2); }

        .vcard__title:hover { color: var(--accent); text-decoration: none; }

        .vcard__meta { font-size: 0.75rem; color: var(--ink-3); }

        .vcard .stamp { margin: 0; }

        /* 表格里封面是 80×60 缩略图，卡片里改成整幅 16:10 顶图 */
        .vcard .cover-container {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 10;
            border: 0;
            border-radius: 8px 8px 0 0;
        }

        .vcard .video-cover { width: 100%; height: 100%; object-fit: cover; }

        /* 表格里那 1.75 倍的放大预览在整幅封面上没必要 */
        .vcard .video-cover:hover { transform: none; }

        /* 描述与标签在表格里限宽 220px，卡片里跟着卡片走 */
        .vcard .video-desc,
        .vcard .tags-container { max-width: none; }

        @media (max-width: 480px) {
            .card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .vcard__body { padding: 10px; }
        }

        .chart-container.collapsible .chart-header {
            margin-bottom: 16px;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .chart-header:hover {
            color: var(--accent-color);
        }

        .chart-header h3 {
            margin: 0;
            font-size: 1.3rem;
        }

        .chart-header p {
            margin: 4px 0 0;
            font-size: 0.9rem;
            color: var(--muted-color);
        }

        .collapse-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: none;
            color: var(--muted-color);
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .collapse-btn:hover {
            background-color: var(--accent-color-soft);
            color: var(--accent-color);
        }

        .collapsible .chart-content,
        .collapsible .tag-cloud {
            transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
        }

        .collapsible.collapsed .chart-content,
        .collapsible.collapsed .tag-cloud {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
            pointer-events: none;
            visibility: hidden; /* 折叠后的可聚焦元素退出 Tab 序列 */
            overflow: hidden;
        }

        .collapsible.collapsed .collapse-btn .icon {
            transform: rotate(180deg);
        }

        .today-list { display: flex; flex-direction: column; gap: 10px; }
        .today-list:not(.is-expanded) .today-item--extra { display: none; }
        .today-more {
            align-self: center;
            margin-top: 2px;
            padding: 3px 10px;
            border-radius: 999px;
            border: 1px dashed var(--line);
            background: transparent;
            color: var(--ink-2);
            font-size: 11px;
            cursor: pointer;
        }
        .today-more:hover { border-color: var(--accent); color: var(--accent); }
        .today-item { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; color: inherit; text-decoration: none; border-radius: 8px; }
        .today-item:hover .today-item__title { color: var(--accent); }
        .today-item__cover { display: block; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: rgba(var(--accent-rgb), .12); }
        .today-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); transition: filter .2s; }
        .today-item--deleted .today-item__cover img { filter: grayscale(.6) saturate(.9); }
        .today-item--deleted:hover .today-item__cover img { filter: none; }
        .today-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; line-height: 1.4; }
        .today-item__meta { display: block; font-size: .75rem; color: var(--ink-3); margin-top: 4px; }
        .today-date { font-size: .85rem; color: var(--ink-3); font-weight: 400; margin-left: 6px; }

        .video-title {
            max-width: 320px;
        }

        .video-title a {
            color: inherit;
            text-decoration: none;
        }

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

        .video-title.unavailable > a {
            color: var(--ink-2) !important;
        }

        /* 状态章只出现在标题列，单独占一行，避免跟着标题末尾折行 */
        .stamp {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 4px 0 0;
            font-size: 0.72rem;
            color: var(--ink-2);
            white-space: nowrap;
        }

        .stamp i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
            flex: none;
        }

        .stamp a,
        .stamp a:hover {
            color: inherit;
            text-decoration: underline dotted;
        }

        .stamp--available { color: var(--ok); }
        .stamp--backup { color: var(--backup); }
        .stamp--hidden { color: var(--hidden); }
        .stamp--lost { color: var(--lost); }

        .cover-container {
            width: 80px;
            height: 60px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            background: var(--surface-muted);
        }

        .video-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.2s ease;
            cursor: pointer;
        }

        .video-cover:hover {
            transform: scale(1.75);
            z-index: 10;
        }

        .cover-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--muted-color);
            font-size: 1.4rem;
            background: var(--surface-muted);
        }

        .video-desc {
            max-width: 220px;
            max-height: 60px;
            overflow: hidden;
            font-size: 0.85rem;
            color: var(--muted-color);
            cursor: pointer;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .video-desc:hover {
            background: var(--surface-muted);
            border-radius: 6px;
        }

        .video-desc.expanded {
            max-height: none;
            overflow: visible;
            -webkit-line-clamp: unset;
            color: var(--text-color);
            background: var(--surface-muted);
            border-radius: 6px;
        }

        .tags-container {
            max-width: 220px;
        }

        .tag {
            display: inline-block;
            background: var(--accent-color-soft);
            color: var(--accent-color);
            padding: 4px 10px;
            border-radius: 999px;
            margin: 2px;
            font-size: 0.75rem;
        }

        .tag-more {
            cursor: pointer;
        }

        .copy-btn {
            display: inline-block;
            margin-top: 6px;
            padding: 2px 8px;
            font-size: 0.72rem;
            line-height: 1.4;
            color: var(--muted-color);
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
        }

        .copy-btn:hover {
            color: var(--accent-color);
            border-color: var(--accent-color);
        }

        .copy-btn.copied {
            color: var(--ok);
            border-color: var(--ok);
        }

        .copy-btn.failed {
            color: var(--lost);
            border-color: var(--lost);
        }

        /* ── 表格与第三方组件（Bootstrap / DataTables）改吃设计令牌 ──
           这些组件的颜色都写死在 vendor CSS 里，深色模式下不覆盖就会
           出现黑字黑底 / 白底刺眼条纹，所以在这里统一接回 var()。 */
        .table {
            color: var(--ink);
            border-color: var(--line);
        }

        .table th,
        .table td {
            border-top: 1px solid var(--line);
        }

        /* 表头不用 Bootstrap 自带的深色块，改成台账式浅表头，两套主题一致 */
        #videosTable thead th {
            background: var(--surface);
            color: var(--ink-2);
            font-weight: 500;
            font-size: 0.8rem;
            letter-spacing: 0.02em;
            border-top: 0;
            border-bottom: 1px solid var(--line);
        }

        .table-striped tbody tr:nth-of-type(odd) {
            background-color: var(--stripe);
        }

        .table-hover tbody tr:hover {
            color: var(--ink);
            background-color: var(--row-hover);
        }

        .date-cell,
        .number-cell {
            font-size: 0.85rem;
            color: var(--ink-2);
        }

        .number-cell {
            text-align: right;
        }

        .text-muted {
            color: var(--ink-2) !important;
        }

        .form-control,
        .custom-select {
            color: var(--ink);
            background-color: var(--surface);
            border-color: var(--line);
        }

        .form-control:focus,
        .custom-select:focus {
            color: var(--ink);
            background-color: var(--surface);
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-color-soft);
        }

        .form-control::placeholder {
            color: var(--ink-3);
        }

        #videosTable_wrapper .dataTables_filter input,
        #videosTable_wrapper .dataTables_length select {
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 6px 12px;
            background-color: var(--surface);
            color: var(--ink);
        }

        /* select 右侧要给下拉箭头留位置 */
        #videosTable_wrapper .dataTables_length select {
            padding-right: 28px;
        }

        #videosTable_wrapper .dataTables_info,
        #videosTable_wrapper .dataTables_length,
        #videosTable_wrapper .dataTables_filter,
        #videosTable_wrapper .dataTables_processing {
            color: var(--ink-2);
            font-size: 0.85rem;
        }

        .page-link {
            color: var(--accent);
            background-color: var(--surface);
            border-color: var(--line);
        }

        .page-link:hover {
            color: var(--accent);
            background-color: var(--bg);
            border-color: var(--line);
        }

        .page-item.active .page-link {
            color: var(--on-accent);
            background-color: var(--accent);
            border-color: var(--accent);
        }

        .page-item.disabled .page-link {
            color: var(--ink-3);
            background-color: var(--surface);
            border-color: var(--line);
        }

        /* ── 封面灯箱：对话框按图片宽度收窄，图下一条信息栏；舞台在两套主题里恒为深色，故用字面色 ── */
        .lightbox.modal .modal-dialog { max-width: min(92vw, 1120px); margin: 1rem auto; transition: transform 0.3s ease-out, max-width 0.15s ease; }
        .lightbox .modal-content { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
        .lightbox-stage { position: relative; background: #0b0f14; display: flex; align-items: center; justify-content: center; min-height: 160px; }
        .lightbox-stage img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; }
        .lightbox-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }
        .lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(0, 0, 0, 0.85); }
        .lightbox-error { display: none; padding: 48px 24px; text-align: center; color: #cbd5e1; }
        .lightbox-error .icon { font-size: 2.4rem; margin-bottom: 10px; }
        .lightbox-error p { margin: 0 0 4px; }
        .lightbox-error small { color: #94a3b8; }
        .lightbox-caption { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 18px 16px; }
        .lightbox-caption__main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
        .lightbox-title { font-weight: 600; font-size: 1.02rem; line-height: 1.4; color: var(--ink); text-decoration: none; }
        .lightbox-title:hover { color: var(--accent); text-decoration: none; }
        .lightbox-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--ink-3); }
        .lightbox-meta span:empty { display: none; }
        .lightbox-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; justify-content: flex-end; max-width: 46%; }
        .lightbox-actions .copy-btn { margin-top: 0; }
        .lightbox-actions a.copy-btn { text-decoration: none; }
        @media (max-width: 768px) {
            .lightbox .modal-dialog { margin: 0.5rem; max-width: none; }
            .lightbox-stage img { max-height: 60vh; }
            .lightbox-caption { flex-direction: column; }
            .lightbox-actions { max-width: none; justify-content: flex-start; }
        }

        /* 键盘焦点：新加的可聚焦元素统一用主色描边 */
        .cloud-tag:focus-visible, .cloud-more:focus-visible, .today-more:focus-visible, .heatmap-day[tabindex]:focus-visible, .tag-more:focus-visible,
        .copy-btn:focus-visible, .collapse-btn:focus-visible, .cover-container:focus-visible, .lightbox-close:focus-visible,
        .btn-link-like:focus-visible, .view-btn:focus-visible, #cardSortSelect:focus-visible,
        #durationSelect:focus-visible, .mini-pager__btn:focus-visible, .side-pager:focus-visible,
        .today-item:focus-visible, .section-bar__btn:focus-visible,
        .stat-card[data-status]:focus-visible, .stat-note--link:focus-visible, .site-nav a:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .loading {
            text-align: center;
            padding: 48px 0;
            color: var(--muted-color);
        }

        .loading .icon {
            font-size: 2.5rem;
            margin-bottom: 12px;
        }

        .error {
            border-radius: 12px;
            padding: 16px;
            background: var(--surface);
            border: 1px solid var(--lost);
            color: var(--lost);
        }

        .tag-cloud {
            min-height: 220px;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            justify-content: center;
            padding: 16px;
        }

        .tag-cloud-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            color: var(--muted-color);
        }

        .tag-cloud-loading .icon {
            font-size: 1.6rem;
        }

        .cloud-tag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid transparent;
            background: var(--bg);
            color: var(--ink);
            font-size: 11px;   /* 站内说明文字的最小字号，再小影响可读 */
            line-height: 1.5;
            cursor: pointer;
            transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
        }

        /* 悬停只动描边：热度高的标签是实心 accent 底，
           再改文字色就会糊成一片 */
        .cloud-tag:hover {
            border-color: var(--accent);
        }

        .cloud-tag.filtered {
            opacity: 0.35;
        }

        /* 热度靠 accent 底色的浓淡表达；淡底配 --ink，浓底配 --on-accent，
           两套主题下都是高对比 */
        .cloud-tag.heat-2 { background: rgba(var(--accent-rgb), 0.10); }
        .cloud-tag.heat-3 { background: rgba(var(--accent-rgb), 0.16); }
        .cloud-tag.heat-4 { background: rgba(var(--accent-rgb), 0.24); }
        .cloud-tag.heat-5 { background: rgba(var(--accent-rgb), 0.34); }
        .cloud-tag.heat-6 { background: rgba(var(--accent-rgb), 0.78); color: var(--on-accent); }
        .cloud-tag.heat-7 { background: rgba(var(--accent-rgb), 0.90); color: var(--on-accent); }
        .cloud-tag.heat-8 { background: var(--accent); color: var(--on-accent); }

        /* 默认只露出前 TAG_CLOUD_VISIBLE 个，其余等「更多」 */
        .tag-cloud:not(.is-expanded) .cloud-tag--extra { display: none; }

        .cloud-more {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 999px;
            border: 1px dashed var(--line);
            background: transparent;
            color: var(--ink-2);
            font-size: 11px;
            cursor: pointer;
        }

        .cloud-more:hover { border-color: var(--accent); color: var(--accent); }

        /* 必须排在 heat-* 之后：同权重下靠源序取胜，否则选中态会被热度底色盖掉 */
        .cloud-tag.active {
            background: var(--accent);
            color: var(--on-accent);
            border-color: var(--accent);
        }

        .tag-stats {
            width: 100%;
            text-align: center;
            color: var(--ink-3);
            font-size: 11px;
            margin-top: 16px;
        }

        .tag-stats a {
            color: var(--accent-color);
            text-decoration: none;
        }

        .tag-stats a:hover {
            text-decoration: underline;
        }

        .heatmap-container {
            overflow-x: auto;
        }

        .heatmap-calendar {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .heatmap-legend {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: var(--muted-color);
        }

        .heatmap-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .heatmap-year {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .heatmap-year-title {
            font-weight: 600;
            color: var(--muted-color);
            font-size: 0.95rem;
        }

        .heatmap-months {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2px;
            font-size: 0.7rem;
            color: var(--muted-color);
        }

        .heatmap-days {
            display: grid;
            grid-template-columns: repeat(53, 1fr);
            gap: 2px;
        }

        .heatmap-day {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 2px;
            background: var(--line);
            transition: transform 0.1s ease, border 0.1s ease;
        }

        .heatmap-day:hover {
            transform: scale(1.2);
            border: 1px solid var(--accent-color);
        }

        .heatmap-day.has-videos {
            cursor: pointer;
        }

        /* 日格状态色。day-none 用 --line 而不是 --bg：
           日历卡片本身是 --surface，用 --bg 在卡片上几乎看不见 */
        .heatmap-day.day-none { background: var(--line); }
        .heatmap-day.day-ok { background: var(--ok); }
        .heatmap-day.day-backup { background: var(--backup); }
        .heatmap-day.day-lost { background: var(--lost); }
        .heatmap-day.day-hidden { background: var(--hidden); }
        .heatmap-day.day-mixed { background: linear-gradient(135deg, var(--ok) 50%, var(--lost) 50%); }

        .heatmap-day.selected {
            outline: 2px solid var(--accent);
        }

        /* 宽屏（≥1440px）按月一行渲染；日格颜色沿用上面的 .day-* 规则 */
        .month-rows { display: grid; grid-template-columns: 34px 1fr; row-gap: 4px; align-items: center; }
        .month-row { display: contents; }
        .month-row__label { font-size: 11px; color: var(--ink-3); }
        .month-row__days { display: flex; gap: 2px; }
        .heatmap-year--rows .heatmap-day { width: 7px; height: 10px; border-radius: 1px; }
        .heatmap-year--rows .heatmap-year-label { margin: 8px 0 4px; }

        .heatmap-tooltip {
            position: absolute;
            background: var(--surface-color);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 0.85rem;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s ease;
            z-index: 1000;
        }

        .heatmap-tooltip.show {
            opacity: 1;
        }

        .heatmap-stats {
            border-top: 1px solid var(--border-color);
            padding-top: 16px;
            color: var(--ink-3);
            font-size: 11px;
        }

        .heatmap-stats-filter {
            margin-top: 8px;
        }

        .heatmap-stats strong {
            color: var(--text-color);
        }

        .heatmap-stats a {
            color: var(--accent-color);
            text-decoration: none;
        }

        .heatmap-stats a:hover {
            text-decoration: underline;
        }

        .heatmap-stats-hint {
            font-size: 0.8rem;
            margin-top: 4px;
        }

        .heatmap-years-toggle {
            font-size: 0.85rem;
        }

        .btn-link-like {
            padding: 0;
            border: 0;
            background: none;
            color: var(--accent-color);
            font: inherit;
            font-size: inherit;
            cursor: pointer;
        }

        .btn-link-like:hover {
            text-decoration: underline;
        }

        .lazy-loading {
            animation: pulse 1.6s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.9; }
        }

        @media (max-width: 768px) {
            body {
                padding: 24px 0;
            }

            .container-fluid {
                padding: 0 16px;
            }

            .chart-container,
            .table-container {
                padding: 20px;
            }

            .header h1 {
                font-size: 1.4rem;
            }

            .cover-container {
                width: 64px;
                height: 40px;
            }

            .video-title {
                max-width: 200px;
            }

            .video-desc,
            .tags-container {
                max-width: 180px;
            }
        }

        /* 手机：统计卡缩小成 3 列两行；标题图标搬到标题上方居中 */
        @media (max-width: 768px) {
            .stats-cards {
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }

            .stat-card {
                padding: 10px 8px;
            }

            .stat-number {
                font-size: 18px;
            }

            .stat-number.is-date {
                font-size: 13px;
                white-space: nowrap;
            }

            .stat-label {
                font-size: 11px;
            }

            .stat-note {
                font-size: 10px;
            }

            .header h1 {
                flex-direction: column;
                gap: 4px;
            }
        }

        /* ≥1440px：三栏布局，左右为 sticky 侧栏（筛选 + 标签云 / 日历 + 历年今日），
           中间是表格/卡片列表。窄屏下 .page-grid / .side* 均无样式，aside 只是普通块容器。 */
        /* 卡片视图：视频卡片直接落在页面底色上，与侧栏卡同一层级（不再白卡套白底）；
           表格视图仍保留白底面板承托表格 */
        body.view-cards .table-container {
            background: transparent;
            border: 0;
            padding: 0;
            box-shadow: none;
        }

        @media (min-width: 1440px) {
            .container-fluid {
                max-width: 1560px;
                /* 基础 overflow-x:hidden 会把这层变成一个（因 overflow-y 隐式转 auto 的）
                   滚动容器，导致内部 .side 的 position:sticky 找错滚动祖先、直接失效；
                   宽屏改回 visible，横向溢出交给内部各自的横向滚动容器兜底 */
                overflow-x: visible;
            }

            .page-grid {
                display: grid;
                grid-template-columns: 300px minmax(0, 1fr) 300px;
                grid-template-areas:
                    "header header  header"
                    "left   stats    right"
                    "left   survival right"
                    "left   legend   right"
                    "left   main     right"
                    "footer footer footer";
                column-gap: 28px;   /* 侧栏与中栏留 28px，1440 下中栏 736px 仍放得下三列卡片 */
                align-items: start;
            }

            .header { grid-area: header; }
            /* 统计卡/存续条/图例挪进中栏，跟 .table-container 同宽；两侧栏区域名
               跨 2-5 行、同名合并成一个矩形，栏顶因此贴着页眉正下方，不再空等这三块 */
            .stats-cards { grid-area: stats; width: 100%; }
            .survival { grid-area: survival; width: 100%; }
            .survival-legend { grid-area: legend; width: 100%; }
            .side--left { grid-area: left; }
            /* DOM 顺序仍是 日历→历年今日（窄屏堆叠顺序不变），这里只用 flex order
               把历年今日挪到视觉上方——它比日历矮很多，放最上面才不会被 900px 高的
               视口挤到 aside 底部滚不到 */
            .side--right { grid-area: right; display: flex; flex-direction: column; }
            #todayCard { order: -1; }
            .table-container { grid-area: main; min-width: 0; padding: 20px; }
            .site-footer { grid-area: footer; }

            /* 统计卡进中栏后只有 752px（≥1600 时 872px）宽，6 张卡挤单行要收紧
               内边距、数字字号用 clamp 跟着栏宽缩放；1440 实测未溢出/换行，两档
               都保持单行——原先按 (auto-fit, minmax(160px,1fr)) 换行是旧的 3 栏宽度算的 */
            .stats-cards {
                grid-template-columns: repeat(6, 1fr);
            }

            .stat-card {
                padding: 10px 12px;
            }

            .stat-number {
                font-size: clamp(16px, 2.2vw, 22px);
            }

            .stat-number.is-date {
                font-size: 15px;
                white-space: nowrap;
            }

            .side {
                position: sticky;
                top: 16px;
                max-height: calc(100vh - 32px);
                overflow-y: auto;
                /* 侧栏滚动条：平时透明、鼠标悬在侧栏上才显出细条。
                   Chromium 121+/Firefox 走标准属性（设了标准属性后 ::-webkit-scrollbar 会被忽略），
                   老 Chromium/Safari 走下面的 ::-webkit-scrollbar；gutter 固定住，悬停时内容不抖 */
                scrollbar-width: thin;
                scrollbar-color: transparent transparent;
                scrollbar-gutter: stable;
            }

            .side:hover,
            .side:focus-within {
                scrollbar-color: rgba(var(--ink-rgb), .28) transparent;
            }

            .side::-webkit-scrollbar { width: 6px; }
            .side::-webkit-scrollbar-track { background: transparent; }
            .side::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
            .side:hover::-webkit-scrollbar-thumb,
            .side:focus-within::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb), .28); }
            .side::-webkit-scrollbar-thumb:hover { background: rgba(var(--ink-rgb), .45); }

            .side .chart-container {
                padding: 20px;
                margin-bottom: 16px;
            }

            /* 宽屏侧栏卡片永远展开，折叠按钮隐藏；不动折叠态存储，窄屏切回时按原样恢复。
               .collapsible.collapsed 从没设过 display，这里不用管；它压的是
               max-height/opacity/pointer-events/visibility/overflow，逐条盖掉，
               否则折叠态的卡片视觉展开了但摸不到、点不到。display 不能强改成 block——
               .tag-cloud 自己是 flex（横排+居中），block!important 会把它压成竖排贴左 */
            .side .collapsible .chart-content,
            .side .collapsible .tag-cloud {
                visibility: visible;
                overflow: visible;
                max-height: none;
                opacity: 1;
                pointer-events: auto;
            }

            .side .collapse-btn {
                display: none;
            }

            .side .chart-header {
                cursor: default;
                color: inherit;
            }

            .filter-card__title {
                margin: 0 0 12px;
                font-size: 1rem;
                font-weight: 600;
            }

            /* 筛选卡里的时长搬进来后占满整行 */
            #filterDurationHost .duration-filter {
                margin-top: 12px;
                width: 100%;
            }

            #filterDurationHost select {
                flex: 1;
            }

            /* 时长搬进左侧栏了，工具条左边空出一整行——Task 1 把 #miniPager
               塞进来居中填空；justify-content 保持基础的 space-between 不用改，
               .toolbar-tools 本来就靠自己的 margin-left:auto 贴右，不受它影响 */
            .table-toolbar {
                position: relative;
                min-height: 36px;
            }

            .table-toolbar .mini-pager {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 5;
            }

            /* 右侧栏日历收进 300px：卡片内容区实测 268px，原 7×10 日格 + 34px 标签列
               31 天会撑到 277px，横向溢出卡片；缩到 30px 标签列 + 6×9 日格 + 1px 间隙，
               31 天最长一行 = 30 + 31×6 + 30×1 = 250 ≤ 268，统计行/年份切换按钮字号调小 */
            .side .heatmap-year--rows .heatmap-day {
                width: 6px;
                height: 9px;
            }

            .side .month-row__days {
                gap: 1px;
            }

            .side .month-rows {
                grid-template-columns: 30px 1fr;
            }

            .side--right .heatmap-stats,
            .side--right .heatmap-years-toggle {
                font-size: 11px;
            }

            /* ≥1280 的 @media 把 .side-pager 打开成 display:block；宽屏三栏后它们的
               固定坐标正好落在侧栏上面，这里覆盖回 none（写在那条规则之后，源码顺序
               赢）。宽屏翻页交给 #miniPager——它被 setupCardView 挪进了 DataTables
               的 .table-controls-row（居中那一行），JS 切 hidden/--on 不影响
               display:none 的优先级 */
            .side-pager {
                display: none;
            }
        }

        /* <1440：三张侧栏卡的卡头换成一行紧凑按钮，点哪块展开哪块（可多开），
           折叠的卡不占位；卡头本身隐藏，展开/收起交给按钮同步的 aria-expanded */
        @media (max-width: 1439.98px) {
            .section-bar { display: flex; gap: 8px; margin: 0 0 16px; }
            .section-bar__btn { flex: 1; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 10px; font-size: .85rem; cursor: pointer; }
            .section-bar__btn.is-open { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
            .section-bar__btn[hidden] { display: none; }
            #sideLeft .chart-container .chart-header, #sideRight .chart-container .chart-header { display: none; }   /* 卡头由按钮行代替 */
            #sideLeft .collapsible.collapsed, #sideRight .collapsible.collapsed { display: none; }                /* 折叠的卡不占位 */
            #sideLeft .chart-container, #sideRight .chart-container { padding: 16px; margin-bottom: 16px; }
        }

        @media (min-width: 1440px) {
            .section-bar { display: none; }
        }

        @media (prefers-color-scheme: dark) {
            /* Bootstrap 把 select 的下拉箭头写死成深灰 data URI，深色下换浅色 */
            .custom-select {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23A7B3BE' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
            }

            /* 深色下点纹更淡，避免在暗背景上过于显眼 */
            body {
                background-image: radial-gradient(circle, rgba(var(--ink-rgb), .035) 1px, transparent 1.3px);
            }
        }

        .icon { width: 1em; height: 1em; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .icon.spin { animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

            @media (min-width: 1600px) {
            .page-grid { column-gap: 32px; }
        }

.site-nav { display: flex; justify-content: center; gap: 18px; margin-top: 8px; font-size: 13px; line-height: 20px; }
.site-nav a { color: var(--ink-2); }
.site-nav a[aria-current] { color: var(--accent); font-weight: 600; }

.site-footer { margin: 40px 0 24px; text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.7; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--ink-2); }

/* ── live.html ──────────────────────────────────────────────────────── */
/* ≥1440 一般规则把 .container-fluid 撑到 1560px（给三栏主页用）；直播页只有单栏
   列表，宽屏下会拉出一条巨大的空隙，这里用类选择器的特异性覆盖回去 */
body.live-page .container-fluid { max-width: 1000px; }

.live-summary { text-align: center; color: var(--ink-2); font-size: .9rem; margin: 0 0 20px; }

.live-search { margin: 0 0 28px; }
.live-search input {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--ink); font-size: .95rem;
}
.live-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.live-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.live-year { margin-bottom: 28px; }
.live-year[hidden] { display: none; }
.live-year h2 {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 1.1rem; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.live-year__count { font-size: .8rem; font-weight: 400; color: var(--ink-3); }

.live-row {
    display: grid;
    grid-template-columns: 96px 150px 1fr 64px 80px 64px auto;
    gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.live-row[hidden] { display: none; }
.live-break { display: none; }

.live-cover img { display: block; width: 96px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

.live-date { font-size: .85rem; color: var(--ink-2); white-space: nowrap; }
.live-date__part { display: block; font-size: .75rem; color: var(--ink-3); }

.live-topic { font-size: .95rem; }

.live-duration, .live-views { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .85rem; }

.live-source a { color: var(--ink-2); }
.live-source a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.live-action a { color: var(--accent); font-weight: 600; }
.live-action a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.live--dead .live-action { color: var(--lost); font-size: .85rem; }

.live-empty { text-align: center; color: var(--ink-3); padding: 40px 0; }

@media (max-width: 768px) {
    .live-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; padding: 10px 0; }
    .live-cover { flex: none; min-width: 56px; }
    .live-cover img { width: 56px; height: 38px; }
    .live-date { flex: none; }
    .live-topic { flex: 1 1 auto; min-width: 0; }
    .live-break { display: block; flex-basis: 100%; height: 0; }
    .live-duration, .live-source, .live-views, .live-action { font-size: 11px; }
}