* { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        }

        body, html { 
            width: 100%; 
            height: 100%; 
            background-color: #0b0b12; 
            color: #fff; 
            font-family: sans-serif; 
            overflow: hidden; 
        }

        /* ==========================================================================
        ✨ 全局滚动条美化美化 (核心修改)
        ========================================================================== */

        /* 1. 主页 Coser 列表与侧边栏的滚动条：设计为精致细条 */
        #home-view::-webkit-scrollbar,
        .style-sidebar::-webkit-scrollbar {
            width: 6px; /* 纵向滚动条宽度 */
            height: 6px; /* 横向滚动条高度 */
        }

        #home-view::-webkit-scrollbar-track,
        .style-sidebar::-webkit-scrollbar-track {
            background: transparent; /* 轨道完全透明，保持毛玻璃纯净感 */
        }

        #home-view::-webkit-scrollbar-thumb,
        .style-sidebar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.15); /* 默认半透明滑块 */
            border-radius: 10px;
            transition: background 0.2s;
        }

        #home-view::-webkit-scrollbar-thumb:hover,
        .style-sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(236, 72, 153, 0.4); /* 悬浮时变为半透明粉色，呼应主题 */
        }

        /* 2. 右侧看图主舞台：全屏看图时，滚动条应极度隐蔽，避免刺眼 */
        #scroll-stage::-webkit-scrollbar {
            width: 4px; /* 极细设计 */
        }

        #scroll-stage::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2); 
        }

        #scroll-stage::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, #ec4899, #2563eb); /* 惊艳的粉蓝渐变滑块 */
            border-radius: 10px;
            opacity: 0.3;
        }

        #scroll-stage::-webkit-scrollbar-thumb:hover {
            background: #ec4899; /* 悬浮时高亮纯粉色 */
        }

        /* 3. 兼容 Firefox 浏览器的现代标准规范 */
        #home-view, .style-sidebar {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
        }
        #scroll-stage {
            scrollbar-width: thin;
            scrollbar-color: #ec4899 rgba(0, 0, 0, 0.2);
        }


        /* ==========================================================================
        🎨 传统样式保留与优化
        ========================================================================== */

        /* 1. 列表页样式 */
        #home-view { 
            width: 100%; 
            height: 100%; 
            overflow-y: auto; 
            padding: 30px 15px; 
        }
        .title { text-align: center; margin-bottom: 30px; color: #ec4899; font-size: 24px; letter-spacing: 1px; }
        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
        .card { background: #1f2937; padding: 22px 10px; border-radius: 12px; text-align: center; cursor: pointer; border: 1px solid #374151; font-weight: bold; font-size: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: all 0.2s; }
        .card:hover { border-color: #ec4899; background: #2563eb; transform: translateY(-2px); }

        /* 2. 看图页双栏总体布局 */
        #viewer-view { width: 100%; height: 100%; display: none; position: relative; background: #000; }
        .viewer-layout { display: flex; width: 100%; height: 100%; position: relative; }

        /* 侧边栏样式（半透明毛玻璃） */
        .style-sidebar { 
            width: 220px; 
            height: 100%; 
            background: rgba(17, 24, 39, 0.4); 
            backdrop-filter: blur(12px);       
            -webkit-backdrop-filter: blur(12px);
            border-right: 1px solid rgba(255, 255, 255, 0.1); 
            padding: 70px 12px 20px; 
            flex-shrink: 0; 
            overflow-y: auto; 
            z-index: 90; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        }
        .style-sidebar.collapsed { 
            width: 0px; 
            padding-left: 0px; 
            padding-right: 0px; 
            border-right: none;
            opacity: 0;
            pointer-events: none; 
        }

        .sidebar-title { font-size: 12px; color: #9ca3af; margin-bottom: 15px; font-weight: bold; padding-left: 8px; white-space: nowrap; }
        .style-link { display: block; padding: 12px 14px; color: #d1d5db; border-radius: 8px; font-size: 14px; margin-bottom: 6px; cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: 0.2s; background: rgba(255, 255, 255, 0.03); }
        .style-link:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
        .style-link.active { background: #ec4899; color: #fff; font-weight: bold; box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3); }

        /* 悬浮展开/缩回按钮 */
        .toggle-sidebar-btn { 
            position: fixed; 
            top: 15px; 
            left: 125px; 
            z-index: 100; 
            background: rgba(0, 0, 0, 0.5); 
            border: 1px solid #555; 
            color: #fff; 
            width: 36px;
            height: 36px;
            border-radius: 50%; 
            cursor: pointer; 
            font-size: 16px; 
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
            transition: all 0.2s;
        }
        .toggle-sidebar-btn:hover { background: #ec4899; border-color: #ec4899; }

        /* 右侧看图主舞台 */
        #scroll-stage { flex-grow: 1; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; background: #000; }
        .page-item { width: 100%; height: 100vh; scroll-snap-align: start; display: flex; justify-content: center; align-items: center; position: relative; background: #000; }
        .page-item img { max-width: 100%; max-height: 100vh; object-fit: contain; }

        /* 返回按钮 */
        .back-btn { position: fixed; top: 15px; left: 15px; z-index: 100; background: rgba(0,0,0,0.5); border: 1px solid #555; color: #fff; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; backdrop-filter: blur(5px); }
        /* 左下角图片信息描述 */
        .info { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.7); padding: 8px 14px; border-radius: 8px; font-size: 13px; border-left: 3px solid #ec4899; pointer-events: none; z-index: 2; }

        /* 全局状态提示 */
        .loading-tip { text-align: center; color: #6b7280; margin-top: 50px; font-size: 14px; }

        @media (max-width: 640px) {
            .style-sidebar { width: 140px; padding-top: 65px; }
            .style-link { padding: 8px 6px; font-size: 12px; }
            .toggle-sidebar-btn { left: 115px; }
        }