/* ============================================================
           ① 皮肤区：整页的样子都在这一块，换皮肤只改这里的变量
           ============================================================ */
        :root {
            --皮肤-页面底色: #1B3226;      /* 整页最底层的颜色（960 之外两侧） */
            --皮肤-手机底色: #1B3226;      /* 手机端页面的底色（和电脑版页面底色一致） */
            --皮肤-卡片底色: #2A4035;      /* 每条网址卡片的底色（比页面底色亮一档的暗绿） */
            --皮肤-深色块底色: #2A4035;    /* 顶部标题条、左栏分类块的底色（和卡片同档） */
            --皮肤-深色块文字: #dce3d6;    /* 顶部标题条、左栏分类块的文字颜色 */
            --皮肤-卡片边框: #364A40;      /* 网址卡片的描边颜色 */
            --皮肤-分隔线: #364A40;        /* 顶部标题条底部的分隔线 */
            --皮肤-链接文字: #DCE3D6;      /* 网址卡片里链接的文字颜色 */
            --皮肤-备注文字: #A3B0A0;      /* 卡片里备注行（原 <p>）的文字颜色 */
            --皮肤-分类悬停: #3A5244;      /* 左栏分类鼠标悬停的底色 */
            --皮肤-分类选中: #4e6f58;      /* 左栏分类当前选中的底色 */

            --皮肤-内容宽: 960px;          /* 中间内容区的宽度 */
            --皮肤-左栏宽: 25%;            /* 左栏占内容宽的比例（也可写 240px） */
            --皮肤-左栏圆角: 18px;         /* 左栏分类块的圆角 */
            --皮肤-卡片圆角: 5px;          /* 网址卡片的圆角 */
            --皮肤-顶部条上下内边距: 10px; /* 顶部标题条上下留白，条子高矮看这个 */
            --皮肤-顶部与内容缝: 6px;      /* 顶部标题条和中间大块之间的缝隙 */
            --皮肤-卡片上下内边距: 10px;   /* 网址卡片内部上下留白（文字到上下边框的距离） */
            --皮肤-卡片左右内边距: 15px;   /* 网址卡片内部左右留白 */
            --皮肤-卡片间距: 15px;         /* 网址卡片之间的间距 */
        }

        /* ============================================================
           浅色主题：点右下角按钮切换时给 html 加 .浅色 类，变量在这里整体换一套
           （数值就是你最早用的那套米色；想调浅色就改这里，深色改上面的 :root）
           ============================================================ */
        html.浅色 {
            --皮肤-页面底色: #cfc6b0;
            --皮肤-手机底色: #e8e0cc;
            --皮肤-卡片底色: #e8e0cc;
            --皮肤-深色块底色: #293730;    /* 顶部标题条两种主题下都保持深绿 */
            --皮肤-深色块文字: #dce3d6;
            --皮肤-卡片边框: #d6cbb1;
            --皮肤-分隔线: #cfc6af;
            --皮肤-链接文字: #313b34;
            --皮肤-备注文字: #837b67;
            --皮肤-分类悬停: #d8ceb4;      /* 浅色下悬停用米色深一档，配深色文字才看得清 */
        }

        /* ============================================================
           ③ 壳：下面的样式和脚本基本不用动
           ============================================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

       .header-title {
            width: 100%;
            background-color: var(--皮肤-深色块底色);
            color: var(--皮肤-深色块文字);
            text-align: center;
            padding: var(--皮肤-顶部条上下内边距) 0;
            font-size: 24px;
            border-bottom: 2px solid var(--皮肤-分隔线);
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: var(--皮肤-手机底色);
        }

       .main-content {
            display: flex;
            flex: 1;
        }

       .sidebar {
            width: var(--皮肤-左栏宽);
            color: var(--皮肤-链接文字);   /* 左栏是透明底坐在页面底色上，文字跟页面底色的对比色走（深底浅字/浅底深字） */
            padding: 20px 0;
            overflow-y: auto;
            border-right: 5px solid var(--皮肤-分类选中);   /* 左栏只留右边框，颜色跟选中分类的底色一致 */
            transition: all 0.3s;
        }

       .category {
            padding: 12px 20px;
            text-align: right;
            cursor: pointer;
            transition: all 0.3s;
        }

       .category:hover {
            background-color: var(--皮肤-分类悬停);
        }

       .category.active {
            background-color: var(--皮肤-分类选中);
            color: #dce3d6;   /* 选中底色两种主题下都是深绿，文字固定浅色才清楚 */
        }

       .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

       .website-list {
            display: none;
        }

       .website-list.active {
            display: block;
        }

       .website-card {
            background-color: var(--皮肤-卡片底色);
            border: 1px solid var(--皮肤-卡片边框);
            border-bottom: 2px solid var(--皮肤-卡片边框);   /* 平时和卡片边框同色看不见，悬停时变成文字色；先占位才不会跳动 */
            border-radius: var(--皮肤-卡片圆角);
            padding: var(--皮肤-卡片上下内边距) var(--皮肤-卡片左右内边距);
            margin-bottom: var(--皮肤-卡片间距);
            box-shadow: 0 2px 5px rgba(90, 80, 60, 0.08);
            transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
        }

       .website-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(90, 80, 60, 0.14);
            border-bottom-color: var(--皮肤-链接文字);   /* 悬停：下边框亮起，颜色和链接文字一致 */
        }

       .website-card a {
            text-decoration: none;
            color: var(--皮肤-链接文字);
            font-size: 18px;
            display: block;
            letter-spacing: 2px;
        }

       /* 链接前面的编号：每个分类里的网址从 1 开始自动编号，数字样式想改就改这两块 */
       .website-list {
            counter-reset: 卡片编号;
        }

       .website-card a::before {
            counter-increment: 卡片编号;
            content: counter(卡片编号) ". ";
        }

       .website-card .card-desc {
            color: var(--皮肤-备注文字);
            font-size: 14px;
            margin-top: 8px;
        }

       .site-icon {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            border-radius: 3px;
            vertical-align: -2px;
        }

       /* 右下角：深色/浅色主题切换按钮 */
       .主题切换 {
            position: fixed;
            right: 18px;
            bottom: 18px;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 1px solid var(--皮肤-卡片边框);
            background-color: var(--皮肤-卡片底色);
            font-size: 16px;
            color: var(--皮肤-链接文字);
            font-family: inherit;
            line-height: 1;
            cursor: pointer;
            z-index: 1003;   /* 盖过顶部标题条和手机端顶栏 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }

        /* 手机端专属元素：顶部固定按钮、分类弹出面板 —— 电脑端一律不显示 */
       .mobile-topbar,
       .mobile-cat-panel {
            display: none;
        }

        /* 移动端适配 */
        @media screen and (max-width: 768px) {
           .header-title {
                display: none;
            }

            body {
                flex-direction: column;
                padding-top: 52px; /* 给顶部固定按钮让出高度 */
            }

           .main-content {
                flex-direction: column;
            }

            /* 手机端隐藏电脑版的左侧分类栏（分类改从顶部按钮里弹出） */
           .sidebar {
                display: none;
            }

            /* ===== 手机端：顶部固定「全部网址分类」按钮 ===== */
           .mobile-topbar {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 52px;
                background-color: var(--皮肤-深色块底色);
                border-bottom: 2px solid var(--皮肤-分隔线);
                z-index: 1001;
            }

           .mobile-cat-btn {
                display: block;
                width: 100%;
                height: 100%;
                background: none;
                border: none;
                color: var(--皮肤-深色块文字);
                font-size: 17px;
                letter-spacing: 2px;
                font-family: inherit;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }

           .mobile-cat-btn .arrow {
                display: inline-block;
                margin-left: 6px;
                font-size: 12px;
                transition: transform 0.25s;
            }

           .mobile-topbar.open .arrow {
                transform: rotate(180deg);
            }

            /* ===== 手机端：分类弹出面板（从按钮下面一直铺满整屏） ===== */
           .mobile-cat-panel {
                display: block;
                position: fixed;
                top: 52px;
                left: 0;
                right: 0;
                bottom: 0;
                overflow-y: auto;
                background-color: var(--皮肤-深色块底色);
                color: var(--皮肤-深色块文字);
                z-index: 1000;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px);
                transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
            }

           .mobile-cat-panel.open {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

           .mobile-cat-panel .category {
                padding: 14px 15px;
                font-size: 15px;
                text-align: center;
                border-bottom: 1px solid var(--皮肤-分类悬停);
            }

           .mobile-cat-panel .category:last-child {
                border-bottom: none;
            }

           .content {
                padding: 15px;
                flex: 1;
            }

           .website-card {
                padding: 8px;
                margin-bottom: 12px;
            }

           .website-card a {
                font-size: 16px;
                letter-spacing: 1px;
            }

           .card-desc {
                font-size: 13px;
            }
        }

        /* 桌面版：顶部大标题通栏占满屏宽，中间内容区固定宽度居中，左栏滚动时不动 */
        @media screen and (min-width: 769px) {
            body {
                background-color: var(--皮肤-页面底色);
                --daohang-gap: var(--皮肤-顶部与内容缝);
            }

           .main-content {
                width: var(--皮肤-内容宽);
                max-width: 100%;
                margin: 0 auto;
            }

            /* 顶部标题钉在浏览器顶部，滚动时不动 */
           .header-title {
                position: sticky;
                top: 0;
                z-index: 1002;
                margin-bottom: var(--daohang-gap);
            }

           .sidebar {
                /* 吸顶位置跟着顶部标题的实际高度走（由脚本量出来写进 --daohang-top-h），并留出 --daohang-gap 空白 */
                position: sticky;
                top: calc(var(--daohang-top-h, 0px) + var(--daohang-gap, 0px));
                align-self: flex-start;
                height: auto;
            }
        }

        /* 手机竖屏进一步优化 */
        @media screen and (max-width: 576px) {
           .website-card a {
                font-size: 14px;
            }
           .card-desc {
                font-size: 12px;
            }
           .mobile-cat-panel .category {
                font-size: 14px;
            }
        }

/* 分组小标题：导入书签后，文件夹里的子文件夹显示成这样的分组标题（编号不受影响，仍连续） */
.group-title {
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--皮肤-备注文字);
    margin: 22px 0 10px;
    padding-left: 10px;
    border-left: 3px solid var(--皮肤-分隔线);
}

.group-title:first-child {
    margin-top: 0;
}