/* ===== CSS Variables (Light & Dark) ===== */
        :root {
            --bg: #f0f2f8;
            --bg-card: #ffffff;
            --bg-input: #f0f2f5;
            --bg-hover: #e8ecf1;
            --text: #1a1a2e;
            --text-secondary: #4a4a6a;
            --text-muted: #8888aa;
            --border: #dce0e8;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
            --accent: #6c5ce7;
            --accent-light: #a29bfe;
            --accent-dark: #5a4bd1;
            --accent-bg: rgba(108, 92, 231, 0.1);
            --tag-bg: #eef0ff;
            --tag-text: #5b4bd5;
            --scrollbar: #d0d4dc;
            --radius: 16px;
            --radius-sm: 10px;
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --header-bg: rgba(255, 255, 255, 0.88);
            --badge: #6c5ce7;
            --badge-text: #fff;
            --highlight: #ffd93d;
            --item-border: #eef0f5;
            --install-btn-bg: #e74c3c;
            --install-btn-hover: #c0392b;
            --nav-bg: rgba(255, 255, 255, 0.92);
            --nav-active: #6c5ce7;
            --nav-text: #4a4a6a;
            --nav-text-active: #fff;
            --glow: rgba(108, 92, 231, 0.15);
            --tutorial-bg: #f8f9fc;
            --tutorial-border: #e8ecf1;
            --search-btn-bg: #6c5ce7;
            --search-btn-hover: #5a4bd1;
            --accent-soft: rgba(108, 92, 231, 0.06);
        }

        [data-theme="dark"] {
            --bg: #0d0d1a;
            --bg-card: #18182b;
            --bg-input: #252542;
            --bg-hover: #2d2d50;
            --text: #e8e8f0;
            --text-secondary: #b0b0cc;
            --text-muted: #6a6a8a;
            --border: #2d2d50;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
            --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.6);
            --accent: #8c7cf0;
            --accent-light: #b0a4f5;
            --accent-dark: #7a6ae0;
            --accent-bg: rgba(140, 124, 240, 0.1);
            --tag-bg: #2a2a4a;
            --tag-text: #b0a4f5;
            --scrollbar: #2d2d50;
            --header-bg: rgba(13, 13, 26, 0.92);
            --badge: #8c7cf0;
            --badge-text: #fff;
            --highlight: #f7c948;
            --item-border: #2a2a48;
            --install-btn-bg: #c0392b;
            --install-btn-hover: #e74c3c;
            --nav-bg: rgba(13, 13, 26, 0.92);
            --nav-active: #8c7cf0;
            --nav-text: #b0b0cc;
            --nav-text-active: #fff;
            --glow: rgba(140, 124, 240, 0.2);
            --tutorial-bg: #1a1a30;
            --tutorial-border: #2a2a48;
            --search-btn-bg: #8c7cf0;
            --search-btn-hover: #7a6ae0;
            --accent-soft: rgba(140, 124, 240, 0.12);
        }

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

        html {
            scroll-behavior: auto; /* 由 JS 精确控制 smooth，避免与 IntersectionObserver/scrollTo 冲突导致抽搐 */
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            transition: background var(--transition), color var(--transition);
            padding: 0 0 40px 0;
            min-height: 100vh;
            padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--scrollbar);
            border-radius: 8px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }
        /* Firefox 滚动条支持 */
        html {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar) transparent;
        }
        ::selection { background: var(--glow); }

        /* ===== Header ===== */
        .header {
            position: sticky;
            top: 0;
            z-index: 200;
            background: var(--header-bg);
            backdrop-filter: blur(16px) saturate(1.2);
            -webkit-backdrop-filter: blur(16px) saturate(1.2);
            border-bottom: 1px solid var(--border);
            padding: 10px 14px 6px;
            padding-top: max(10px, calc(env(safe-area-inset-top) + 6px));
            transition: background var(--transition), border var(--transition);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
        }

        .header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .disclaimer-badge {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 2px 8px;
            font-size: 10px;
            font-weight: 600;
            color: var(--accent);
            background: var(--accent-bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.2s;
            line-height: 16px;
            vertical-align: middle;
            margin-left: 2px;
        }
        .disclaimer-badge:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        .logo-icon {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: 0 2px 6px rgba(108, 92, 231, 0.2);
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }

        .theme-toggle {
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            border: none;
            border-radius: 50%;
            background: var(--bg-input);
            color: var(--text-secondary);
            font-size: 18px;
            cursor: pointer;
            transition: background var(--transition), transform 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        .theme-toggle:active {
            transform: scale(0.92);
        }
        .theme-toggle:hover {
            background: var(--bg-hover);
            transform: rotate(15deg);
        }

        /* ===== 搜索区域 ===== */
        .search-wrap {
            position: relative;
            margin-top: 6px;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .search-wrap .search-icon {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 15px;
            pointer-events: none;
            opacity: 0.5;
        }
        .search-wrap input {
            flex: 1;
            padding: 10px 14px 10px 38px;
            border: 1.5px solid var(--border);
            border-radius: 10px;
            background: var(--bg-input);
            color: var(--text);
            font-size: 16px;
            outline: none;
            transition: border var(--transition), box-shadow var(--transition), background var(--transition);
            -webkit-appearance: none;
            min-width: 0;
            height: 44px;
        }
        .search-info {
            position: absolute;
            right: 60px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 20px;
            font-size: 12px;
            color: var(--text-muted);
            pointer-events: none;
            white-space: nowrap;
        }
        .search-wrap input:focus ~ .search-info,
        .search-wrap input:not(:placeholder-shown) ~ .search-info {
            display: none;
        }
        .search-wrap input::placeholder {
            color: var(--text-muted);
            opacity: 0.55;
        }
        .search-wrap input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px var(--glow), 0 2px 8px var(--glow);
            background: var(--bg-card);
        }
        .search-clear {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 16px;
            cursor: pointer;
            padding: 4px 6px;
            display: none;
            border-radius: 4px;
            transition: background var(--transition);
            z-index: 2;
        }
        .search-clear:hover {
            background: var(--bg-hover);
        }
        .search-clear.visible {
            display: block;
        }

        .search-btn {
            flex-shrink: 0;
            padding: 8px 16px;
            border: none;
            border-radius: 10px;
            background: var(--search-btn-bg);
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background var(--transition), transform 0.15s;
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
            height: 44px;
            min-height: 44px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        .search-btn:hover {
            background: var(--search-btn-hover);
        }
        .search-btn:active {
            transform: scale(0.95);
        }
        .search-btn .btn-icon {
            font-size: 14px;
        }

        .result-stats {
            font-size: 13px;
            color: var(--text-muted);
            padding: 4px 4px 0;
            text-align: center;
            transition: opacity var(--transition);
            min-height: 22px;
            font-weight: 500;
        }

        /* ===== 快速跳转导航 ===== */
        .quick-nav {
            margin-top: 8px;
            padding: 2px 0 0;
            border-top: 1px solid var(--border);
            position: relative;
            transition: border var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
            /* 防止 .quick-nav 内部的任何子元素（.quick-nav-scroll / 前后按钮）
               因为 overflow:hidden 或遮挡导致横向滚轮/拖拽失效 */
            isolation: isolate;
        }
        .quick-nav-scroll {
            display: flex;
            gap: 4px;
            overflow-x: auto;
            overflow-y: hidden;   /* 防止误触垂直滚动条，破坏 2~3px 高度细线滚动条 */
            padding: 4px 2px 8px;
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: auto; /* 内部导航水平滚动不需 smooth，避免错位抽搐 */
            flex: 1;
            /* ============= 修复：横向导航滑动失效 =============
               用户反馈：「这地方不能滑动了」。
               实测量：scrollWidth=1806 >> clientWidth=813（差值993px足够滑动），
               但派发 WheelEvent(deltaX=500) 后 scrollLeft 保持 0 → 滑动被 scroll chaining 机制吞了。

               根因：body { overflow-x: hidden }（全局防止横向漏出）在 Chromium 中有个经典行为：
               当用户在子横向滚动容器（.quick-nav-scroll）上使用：
                 · Shift + 鼠标滚轮（Shift+Wheel=发送 deltaX）
                 · 或 Windows 高精度触摸板 / 触屏原生横向手势
               wheel 事件先在子容器尝试处理 → 子容器传递给父链（scroll chaining）→ 父 body
               overflow-x:hidden → Chromium 认为「没有可滚动的祖先」→ 有时甚至会回滚子容器自己的 scrollLeft，
               或干脆因为事件合成策略丢弃 delta → 用户就会感觉"不能滑动了"。

               三件套修：
               1) overscroll-behavior-x: contain → 子容器横向滚到头/尾/任何时候都**不**把 wheel 事件传给父，
                  事件牢牢锁在 .quick-nav-scroll，body.overflow-x:hidden 再也碰不到它。
               2) touch-action: pan-x → 明确告诉浏览器此区域允许自由横向手势(pan)，
                  覆盖外层 body.touch-action:manipulation 的保守策略（manipulation 会限制浏览器判断"看起来像拖动点击"的手势）。
               3) -ms-scroll-chaining: none → IE11/旧 Edge 兜底。
            ==================================================== */
            overscroll-behavior-x: contain;
            touch-action: pan-x;
            -ms-scroll-chaining: none;
        }
        .quick-nav-scroll::-webkit-scrollbar {
            height: 2px;
        }
        .quick-nav-scroll::-webkit-scrollbar-thumb {
            background: var(--accent-light);
            border-radius: 4px;
        }
        .quick-nav-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        /* 拖拽反馈：让用户一眼看到"这个区域能拖动 + 我真的按中了"。
           这是用户反馈"还是不能左右拖动"的核心 UX 修复 —— 很多时候其实能拖，
           但用户没看到任何反馈，就误以为"点到了但没反应"。 */
        #navScroll.quick-nav-scroll {
            cursor: grab;
        }
        #navScroll.quick-nav-scroll.qns-pressing {
            cursor: grabbing;
            outline: 2px dashed var(--accent);
            outline-offset: 2px;
            border-radius: 10px;
        }
        #navScroll.quick-nav-scroll.qns-dragging {
            cursor: grabbing;
            outline-color: var(--accent-dark);
            background: linear-gradient(180deg, var(--bg-hover), transparent);
        }
        /* 真正拖动中时，取消子元素的 pointer-events 也不会加速，但我们要防止用户选中文本（因为有横向拖） */
        #navScroll.quick-nav-scroll.qns-dragging * {
            user-select: none !important;
            -webkit-user-select: none !important;
            pointer-events: none;
        }

        .nav-tag {
            flex: 0 0 auto;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 600;
            color: var(--nav-text);
            background: var(--bg-input);
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1.5px solid transparent;
            white-space: nowrap;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            letter-spacing: 0.2px;
        }
        .nav-tag:hover {
            background: var(--bg-hover);
            transform: translateY(-1px);
        }
        .nav-tag:active {
            transform: scale(0.95);
        }
        .nav-tag.active {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: var(--nav-text-active);
            border-color: transparent;
            box-shadow: 0 2px 12px rgba(108, 92, 231, 0.25);
        }
        .nav-tag .nav-icon {
            margin-right: 2px;
            font-size: 11px;
        }

        .nav-controls {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 3px;
            padding-left: 4px;
            border-left: 1px solid var(--border);
        }
        .nav-control-btn {
            padding: 3px 10px;
            border: none;
            border-radius: 12px;
            background: var(--bg-input);
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .nav-control-btn:hover {
            background: var(--bg-hover);
            color: var(--text-secondary);
        }
        .nav-control-btn:active {
            transform: scale(0.95);
        }

        /* ===== 安装入口 ===== */
        .install-bar {
            margin-top: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            padding: 2px 0 4px;
        }
        .install-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(90deg, #8e2de2, #a855f7, #4a00e0, #8e2de2);
            background-size: 300% 100%;
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 6px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 10px rgba(142, 45, 226, 0.25);
            text-decoration: none;
            letter-spacing: 0.2px;
            font-family: inherit;
            animation: flowGradient 4s linear infinite;
        }
        .install-btn:active {
            transform: scale(0.95);
        }
        .install-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(142, 45, 226, 0.35);
        }
        /* 下拉菜单 */
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-toggle {
            padding-right: 14px;
        }
        .dropdown-arrow {
            font-size: 11px;
            margin-left: 2px;
            transition: transform 0.2s;
        }
        .dropdown.open .dropdown-arrow {
            transform: rotate(180deg);
        }
        .dropdown-menu {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            min-width: 320px;
            background: rgba(30, 41, 59, 0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            padding: 6px;
            z-index: 1000;
            display: none;
            flex-direction: column;
            gap: 2px;
        }
        .dropdown.open .dropdown-menu {
            display: flex;
            animation: dropdownFadeIn 0.2s ease;
        }
        @keyframes dropdownFadeIn {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .dropdown-menu a {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            color: var(--text-color);
            text-decoration: none;
            border-radius: 8px;
            font-size: 13px;
            transition: background 0.15s;
            white-space: normal;
            line-height: 1.4;
        }
        .dropdown-menu a:hover {
            background: linear-gradient(135deg, #8e2de2, #4a00e0);
            color: #fff;
        }
        .anim-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 6px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
            text-decoration: none;
            letter-spacing: 0.2px;
            font-family: inherit;
        }
        .anim-btn:active {
            transform: scale(0.95);
        }
        .anim-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
        }
        .getplugin-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #00b894, #00cec9);
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 6px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 10px rgba(0, 184, 148, 0.2);
            text-decoration: none;
            letter-spacing: 0.2px;
            font-family: inherit;
            position: relative;
            overflow: hidden;
        }
        .getplugin-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.4s ease, height 0.4s ease;
        }
        .getplugin-btn:active::after {
            width: 300px;
            height: 300px;
        }
        .getplugin-btn:active {
            transform: scale(0.95);
        }
        .getplugin-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(0, 184, 148, 0.3);
        }
        /* 腾讯文档按钮 */
        .doc-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #3b82f6, #6366f1);
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 6px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 10px rgba(59, 130, 246, 0.2);
            text-decoration: none;
            letter-spacing: 0.2px;
            font-family: inherit;
            position: relative;
            overflow: hidden;
        }
        .doc-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.4s ease, height 0.4s ease;
        }
        .doc-btn:active::after {
            width: 300px;
            height: 300px;
        }
        .doc-btn:active {
            transform: scale(0.95);
        }
        .doc-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
        }
        /* 赞助按钮 */
        .sponsor-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(90deg, #ff6b9d, #ff8fab, #c44569, #ff6b9d);
            background-size: 300% 100%;
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 6px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 10px rgba(255, 107, 157, 0.25);
            text-decoration: none;
            letter-spacing: 0.2px;
            font-family: inherit;
            position: relative;
            overflow: hidden;
            animation: flowGradient 4s linear infinite;
        }
        .sponsor-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.4s ease, height 0.4s ease;
        }
        .sponsor-btn:active::after {
            width: 300px;
            height: 300px;
        }
        .sponsor-btn:active {
            transform: scale(0.95);
        }
        .sponsor-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(255, 107, 157, 0.35);
        }
        /* QQ群按钮 */
        .qq-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(90deg, #12b7f5, #36c5ff, #0d9ad6, #12b7f5);
            background-size: 300% 100%;
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 6px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 10px rgba(18, 183, 245, 0.25);
            text-decoration: none;
            letter-spacing: 0.2px;
            font-family: inherit;
            animation: flowGradient 4s linear infinite;
        }
        .qq-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(18, 183, 245, 0.35);
        }
        /* 双版本入口按钮 */
        .dual-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 6px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 10px rgba(108, 92, 231, 0.25);
            text-decoration: none;
            letter-spacing: 0.2px;
            font-family: inherit;
        }
        .dual-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(108, 92, 231, 0.35);
        }
        /* 多平台导航站按钮 */
        .nav-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(90deg, #f093fb, #f5576c, #c44569, #f093fb);
            background-size: 300% 100%;
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 6px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 10px rgba(245, 87, 108, 0.25);
            text-decoration: none;
            letter-spacing: 0.2px;
            font-family: inherit;
            position: relative;
            overflow: hidden;
            min-height: 36px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            animation: flowGradient 4s linear infinite;
        }
        .nav-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.4s ease, height 0.4s ease;
        }
        .nav-btn:active::after {
            width: 300px;
            height: 300px;
        }
        .nav-btn:active {
            transform: scale(0.95);
        }
        .nav-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(245, 87, 108, 0.4);
        }
        /* PS学习工具 - 青色流动 */
        .nav-btn-ps {
            background: linear-gradient(90deg, #00c6ff, #22d3ee, #0072ff, #00c6ff);
            background-size: 300% 100%;
            box-shadow: 0 2px 10px rgba(0, 114, 255, 0.25);
            animation: flowGradient 4s linear infinite;
        }
        .nav-btn-ps:hover {
            box-shadow: 0 4px 16px rgba(0, 114, 255, 0.4);
        }
        /* DW学习工具 - 绿色流动 */
        .nav-btn-dw {
            background: linear-gradient(90deg, #11998e, #38ef7d, #059669, #11998e);
            background-size: 300% 100%;
            box-shadow: 0 2px 10px rgba(17, 153, 142, 0.25);
            animation: flowGradient 4s linear infinite;
        }
        .nav-btn-dw:hover {
            box-shadow: 0 4px 16px rgba(17, 153, 142, 0.4);
        }
        /* 颜色矫正器 - 五颜六色（彩虹流动） */
        .nav-btn-rainbow {
            background: linear-gradient(90deg, #ff0000, #ff7f00, #ffee00, #00ff00, #0088ff, #8b00ff, #ff0000);
            background-size: 300% 100%;
            box-shadow: 0 2px 10px rgba(139, 0, 255, 0.3);
            animation: flowGradient 4s linear infinite;
        }
        .nav-btn-rainbow:hover {
            box-shadow: 0 4px 16px rgba(255, 0, 128, 0.45);
        }
        @keyframes flowGradient {
            0% { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }
        /* 图片来源徽章 */
        .img-source-badge {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 2px 8px;
            font-size: 10px;
            font-weight: 600;
            color: #e67e22;
            background: rgba(230, 126, 34, 0.1);
            border: 1px solid rgba(230, 126, 34, 0.3);
            border-radius: 6px;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.2s;
            line-height: 16px;
            vertical-align: middle;
            margin-left: 4px;
        }
        .img-source-badge:hover {
            background: #e67e22;
            color: #fff;
            border-color: #e67e22;
            transform: translateY(-1px);
        }
        /* 快手入口徽章 */
        .ks-entry-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 10px;
            font-size: 10px;
            font-weight: 600;
            color: #ff4d2e;
            background: rgba(255, 77, 46, 0.1);
            border: 1px solid rgba(255, 77, 46, 0.3);
            border-radius: 10px;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.2s;
            margin-left: 6px;
            cursor: pointer;
            line-height: 1.4;
            min-height: 20px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        .ks-entry-badge:hover {
            background: linear-gradient(135deg, #ff4d2e, #ff7b00);
            color: #fff;
            border-color: #ff4d2e;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 77, 46, 0.3);
        }
        .ks-entry-badge .ks-icon {
            font-size: 11px;
            line-height: 1;
        }

        /* ===== 快手二维码照片选择弹窗 ===== */
        .ks-qr-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.78);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 16px;
        }
        .ks-qr-overlay.show {
            display: flex;
        }
        .ks-qr-modal {
            position: relative;
            background: var(--bg-card, #fff);
            color: var(--text-main, #1a1a1a);
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
            padding: 28px 24px 20px;
            max-width: 720px;
            width: 100%;
            max-height: 92vh;
            overflow-y: auto;
            animation: ksQrPop 0.22s ease-out;
        }
        @keyframes ksQrPop {
            from { transform: translateY(12px) scale(0.98); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }
        .ks-qr-close {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 32px;
            height: 32px;
            border: none;
            background: rgba(0,0,0,0.06);
            color: inherit;
            font-size: 22px;
            line-height: 1;
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.15s;
        }
        .ks-qr-close:hover {
            background: rgba(255, 77, 46, 0.15);
        }
        .ks-qr-title {
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            margin: 0 0 18px;
            padding-right: 28px;
        }
        .ks-qr-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        @media (max-width: 520px) {
            .ks-qr-grid { grid-template-columns: 1fr; }
        }
        .ks-qr-item {
            margin: 0;
            text-align: center;
            cursor: pointer;
        }
        .ks-qr-item img {
            width: 100%;
            max-width: 300px;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
            transition: transform 0.15s;
            display: block;
            margin: 0 auto;
        }
        .ks-qr-item img:hover {
            transform: scale(1.02);
        }
        .ks-qr-item figcaption {
            margin-top: 8px;
            font-size: 12px;
            color: var(--text-muted, #666);
        }
        .ks-qr-tip {
            margin-top: 16px;
            text-align: center;
            font-size: 12px;
            color: var(--text-muted, #666);
            line-height: 1.5;
        }

        /* ===== 快手二维码放大全屏查看 ===== */
        .ks-qr-fullscreen {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            cursor: zoom-out;
            padding: 20px;
        }
        .ks-qr-fullscreen.show {
            display: flex;
        }
        .ks-qr-fullscreen img {
            max-width: 92vw;
            max-height: 92vh;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            animation: ksQrFadeIn 0.2s ease-out;
        }
        @keyframes ksQrFadeIn {
            from { opacity: 0; transform: scale(0.96); }
            to { opacity: 1; transform: scale(1); }
        }

        .install-btn .icon {
            font-size: 16px;
            width: auto;
            height: auto;
        }
        .anim-btn .icon,
        .getplugin-btn .icon,
        .sponsor-btn .icon,
        .qq-btn .icon,
        .nav-btn .icon,
        .doc-btn .icon {
            font-size: 16px;
            width: auto;
            height: auto;
        }

        /* ===== 教程资源折叠 ===== */
        .tutorial-bar {
            margin-top: 6px;
            border: 1px solid var(--tutorial-border);
            border-radius: var(--radius-sm);
            background: var(--tutorial-bg);
            transition: border var(--transition), background var(--transition);
            overflow: hidden;
        }
        .tutorial-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            font-weight: 600;
            font-size: 14px;
            color: var(--text-secondary);
            transition: background var(--transition);
        }
        .tutorial-header:hover {
            background: var(--bg-hover);
        }
        .tutorial-header .tutorial-arrow {
            font-size: 14px;
            transition: transform 0.3s ease;
            color: var(--text-muted);
        }
        .tutorial-header .tutorial-arrow.open {
            transform: rotate(180deg);
        }
        .tutorial-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.2s ease;
            padding: 0 10px;
        }
        .tutorial-body.open {
            /* 原来 9999px → 批量展开缩略图时内容高度容易超过，导致高度被硬截断，
               父 tutorial 盒子高度不够，内容溢出盖到下面的卡片/分类。
               放大到 999999px（≈ 100 万像素），内容再多也不会碰到天花板。 */
            max-height: 999999px;
            padding: 4px 10px 10px 10px;
        }
        .tutorial-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
        }
        .tutorial-link {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 6px;
            background: var(--bg-card);
            border: 1px solid var(--item-border);
            color: var(--text);
            text-decoration: none;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
            word-break: keep-all;
        }
        .tutorial-link:hover {
            background: var(--bg-hover);
            border-color: var(--accent-light);
            transform: translateX(2px);
        }
        .tutorial-link .link-icon {
            font-size: 12px;
            flex-shrink: 0;
        }
        .tutorial-link .link-name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tutorial-link .link-arrow {
            font-size: 10px;
            color: var(--text-muted);
            opacity: 0.4;
        }

        /* ===== Main ===== */
        .container {
            max-width: 720px;
            margin: 0 auto;
            padding: 0 12px;
        }

        /* ===== Category ===== */
        .category {
            margin-top: 14px;
            border-radius: var(--radius);
            background: var(--bg-card);
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            /* 分类盒子本身不裁切内部 item（缩略图严格在 item 内部） */
            overflow: visible;
            /* 【Z轴叠层修复】每个分类独立 stacking context：
               显式 position: relative + z-index: 1（所有分类平级）。
               根据 CSS 规范：同级 stacking context 按 HTML DOM 出现顺序绘制，
               写在后面的分类（蓝宝石 > BCC > CC > AE自带）整体压在前面的分类之上，
               于是分类内部的 sticky 标题、高 z-index 元素不会跨界压到"后一个分类的卡片上"，
               向下滚动时分类标题栏会被后一个分类自然推走，不会出现「Z轴一个比一个高、叠在一起导致下面看不见」。
               （之前的 position: static 是早期方案「允许缩略图 z-index 跨分类竞争」留下的，已废弃。） */
            position: relative;
            z-index: 1;
            transition: background var(--transition), border var(--transition), box-shadow var(--transition);
            scroll-margin-top: 130px;
        }
        .category:last-child {
            margin-bottom: 0;
        }
        .category:hover {
            box-shadow: var(--shadow-hover);
        }

        .category-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            gap: 8px;
            transition: background var(--transition);
            background: var(--bg-card);
            /* category 本身 overflow: visible 后，由 header 负责顶部的圆角裁剪 */
            border-top-left-radius: var(--radius);
            border-top-right-radius: var(--radius);
            overflow: hidden;
        }
        .category-header:active {
            background: var(--bg-hover);
        }
        .category-header .cat-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .category-header .cat-title .badge {
            font-size: 9px;
            font-weight: 600;
            background: var(--badge);
            color: var(--badge-text);
            padding: 1px 10px;
            border-radius: 14px;
            letter-spacing: 0.2px;
        }
        .category-header .cat-toggle {
            font-size: 16px;
            color: var(--text-muted);
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            flex-shrink: 0;
            width: 24px;
            text-align: center;
        }
        .category-header .cat-toggle.open {
            transform: rotate(180deg);
        }

        .category-body {
            max-height: 0;
            padding: 0 8px;
            opacity: 0;
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.25s ease,
                opacity 0.25s ease;
            overflow: hidden;
            will-change: max-height, opacity;
        }
        .category-body.open {
            /* 【关键修复：分类盒子高度被 9999px 天花板硬截断 → 内容溢出盖到下一个分类】
               用户反馈原话：「每个分类的盒子它里面的卡片内容已经超过它的盒子大小了。所以造成的重叠」
               浏览器实测量（AE自带分类，批量展开缩略图后）：
               cat.offsetHeight = 10056 > 9999（category-body.open.max-height 天花板）
               → category-body 实际内容超过 9999px 的部分被 CSS 当「超出」处理，
                 盒子高度停在 9999，真实卡片内容继续往下画 → 叠在 CC插件分类盒子的顶部。
               修复：把 max-height 天花板从 9999px 放大到 999999px（≈ 100 万像素），
               即使 1026 个插件全部批量展开缩略图（≈ 每个 330px × 16 列 ≈ 55000px）
               也远远碰不到天花板。max-height 只是用于折叠-展开过渡动画的 trick，
               展开后只要远大于真实高度就等于"不限高"，不影响布局。 */
            max-height: 999999px;
            padding: 0 8px 14px 8px;
            opacity: 1;
            /* 展开后不再裁剪，防止内部缩略图（超出预期高度或动画中）被裁导致被下卡片遮挡 */
            overflow: visible;
            /* category 本身 overflow: visible 后，由 body 负责底部的圆角视觉 */
            border-bottom-left-radius: var(--radius);
            border-bottom-right-radius: var(--radius);
        }

        /* ===== Section ===== */
        .section {
            padding: 6px 4px 0 4px;
            border-radius: var(--radius-sm);
            margin-top: 6px;
            background: var(--bg);
            border: 1px solid transparent;
            transition: background var(--transition), border var(--transition);
        }
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 6px 2px 6px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            border-radius: 6px;
            transition: background var(--transition);
        }
        .section-header:active {
            background: var(--bg-hover);
        }
        .section-header .section-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .section-header .section-title .sec-icon {
            font-size: 13px;
            opacity: 0.5;
        }
        .section-header .section-toggle {
            font-size: 13px;
            color: var(--text-muted);
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            width: 20px;
            text-align: center;
        }
        .section-header .section-toggle.open {
            transform: rotate(180deg);
        }

        .section-body {
            max-height: 0;
            padding: 0 2px;
            opacity: 0;
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.2s ease,
                opacity 0.2s ease;
            overflow: hidden;
            will-change: max-height, opacity;
        }
        .section-body.open {
            /* 与 category-body 同修复：分组盒子 max-height 原 9999px 也会在分组内插件特别多时
               （如 BCC 特效、蓝宝石等大分类里单个"模糊/颜色"分组有几百条）批量展开缩略图后超出，
               导致 section 盒子高度不够 → 内部 .item-grid 超出 → 叠在后面分组内容上。 */
            max-height: 999999px;
            padding: 2px 2px 6px 2px;
            opacity: 1;
            /* 展开后不再裁剪，防止内部缩略图被裁 */
            overflow: visible;
        }

        /* ===== 网格布局 ===== */
        .item-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px;
            margin-top: 2px;
            /* 不要用 dense：dense 会让短卡片"钻"到上方空白处，
               虽然 grid 严格按轨道不会真重叠，但用户视觉会以为"两个卡片位置对调/错位/重叠"。
               强制 row：严格按 DOM 顺序一行一行往下铺，跟"拼长图一样拼起来"的用户预期一致。 */
            grid-auto-flow: row;
            grid-auto-rows: auto;
        }

        .item {
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            background: var(--bg-card);
            border: 1px solid var(--item-border);
            /* 只过渡真正需要动画的属性。
               禁止使用 transition: all——它会过渡 scroll/offset/position 等非动画属性，
               与选中/高亮/布局刷新叠加时产生跳动抽搐。
               注意：绝对不要加入 transform！
               Chromium 里只要 transition 声明里包含 transform，即使从未触发过，
               浏览器也会为元素提升 GPU 合成层，叠加 border-radius + overflow:hidden
               会出现左侧裁切失效、右侧正常的经典渲染bug（扫光条从卡片左边漏出）。 */
            transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 64px;
            cursor: default;
            /* 【统一单图层】不设 z-index → z-index: auto → 不创建独立 stacking context，
               所有卡片、分类、缩略图都在同一个堆叠图层上按 DOM 顺序绘制。
               只要盒子不互相侵入（overflow hidden + clip-path 保证），就永远不会出现"谁盖住谁"的分层错乱。 */
            /* 裁切 ::before 扫光条，防止从卡片左右边缘"漏"出来；
               + 强制裁切缩略图 carousel 的任何边缘溢出（箭头、阴影、dots、img max-height 超范围等）。
               这是解决用户反馈"CC 插件盒子底下挡了很多东西（缩略图盖旁边 cell 卡片）"的根因。 */
            overflow: hidden;
            /* clip-path 强制按圆角裁切，比 overflow:hidden 更可靠，
               即使浏览器把 ::before 提升到独立 GPU 合成层也不会漏掉左边。 */
            clip-path: inset(0 0 0 0 round var(--radius-sm));
        }
        .item:hover {
            box-shadow: var(--shadow-hover), 0 0 0 1px var(--accent-light);
            /* 移除 transform: translateY(-2px)！
               经验802695：hover 时本体位移会导致元素把自己"躲开"鼠标 → 鼠标悬停在边界时反复进入/离开 → 典型抽搐抖动。
               尤其当 item 内有缩略图展开时，图片跟随位移把鼠标甩出悬停区，形成无限循环抖动。
               改用视觉稳定的阴影/边框/背景反馈即可。 */
            border-color: var(--accent-light);
            /* 【统一单图层】hover 不再抬 z-index：盒子都在同一层，且 overflow hidden + clip-path
               会把 var(--shadow-hover) 的外发光裁切掉吗？—— 不会：box-shadow 是绘制在元素外框
               之外的，不会触发 overflow/clip-path 的裁切规则（W3C 标准：overflow 只裁 content-box 外的
               overflowing content，box-shadow / outline 属于装饰，不影响 overflow 判定）。
               实测 Chromium 也符合标准：相邻卡片 hover 时阴影只出现在自己卡片周围一圈，不会侵入旁边 cell。 */
        }
        /* 缩略图展开后，item 绝对不能产生任何位移/尺寸变化，否则跟随鼠标的缩略图会无限抽搐 */
        .item.thumbs-open:hover {
            transform: none !important;
        }
        .item.highlight {
            background: rgba(108, 92, 231, 0.06);
            border-color: var(--accent-light);
        }
        .item .item-name {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            line-height: 1.3;
            display: flex;
            align-items: flex-start;
            gap: 4px;
            flex-wrap: wrap;
        }
        .item .item-name .tag {
            font-size: 8px;
            font-weight: 600;
            background: var(--tag-bg);
            color: var(--tag-text);
            padding: 0 6px;
            border-radius: 6px;
            letter-spacing: 0.1px;
            white-space: nowrap;
            line-height: 16px;
        }
        .item .item-name .tag-fuzzy {
            background: linear-gradient(135deg, #f59e0b, #f97316);
            color: #fff;
            animation: fuzzyPulse 2s ease-in-out infinite;
        }
        .item-fuzzy {
            border-left: 3px solid #f59e0b;
            opacity: 0.92;
        }
        @keyframes fuzzyPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .item .item-func {
            font-size: 12.5px;
            color: var(--text-secondary);
            margin-top: 2px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .item .item-scene {
            font-size: 11.5px;
            color: var(--text-muted);
            margin-top: 2px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .item .item-scene::before {
            content: "▸";
            opacity: 0.4;
            margin-right: 2px;
        }

        /* ===== 快捷键 ===== */
        .shortcut-list {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 2px 0;
        }
        .shortcut-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            border-radius: var(--radius-sm);
            background: var(--bg-card);
            border: 1px solid var(--item-border);
            gap: 10px;
            transition: all 0.2s ease;
        }
        .shortcut-item:hover {
            border-color: var(--accent-light);
            background: var(--bg-hover);
            /* 移除 translateX(2px)：所有卡片/条目的 hover 都禁止位移/缩放。
               否则若条目在窄容器里，位移会让右侧内容叠到滚动条或相邻列。 */
        }
        .shortcut-item .sc-action {
            font-size: 13px;
            color: var(--text-secondary);
            flex: 1;
        }
        .shortcut-item .sc-key {
            font-size: 12px;
            font-weight: 600;
            color: var(--accent);
            background: var(--tag-bg);
            padding: 1px 10px;
            border-radius: 5px;
            white-space: nowrap;
            font-family: "SF Mono", "Menlo", monospace;
            letter-spacing: 0.2px;
        }
        .shortcut-item.highlight {
            background: rgba(108, 92, 231, 0.06);
            border-color: var(--accent-light);
        }

        /* ===== Search Highlight ===== */
        .search-match {
            background: var(--highlight);
            color: #1a1a2e;
            font-weight: 700;
            padding: 0 2px;
            border-radius: 2px;
        }
        [data-theme="dark"] .search-match {
            color: #1a1a2e;
        }

        /* ===== Empty State ===== */
        .empty-state {
            text-align: center;
            padding: 40px 20px 30px;
            color: var(--text-muted);
            animation: fadeInUp 0.3s ease;
        }
        .empty-state .empty-icon {
            font-size: 40px;
            margin-bottom: 10px;
            opacity: 0.5;
        }
        .empty-state .empty-text {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-secondary);
        }
        .empty-state .empty-sub {
            font-size: 13px;
            margin-top: 4px;
            color: var(--text-muted);
        }

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

        /* ===== Footer ===== */
        .footer {
            text-align: center;
            padding: 28px 16px 10px;
            font-size: 12px;
            color: var(--text-muted);
            border-top: 1px solid var(--border);
            margin-top: 24px;
            background: var(--bg-card);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            transition: background var(--transition), border var(--transition);
            position: relative;
        }
        .footer::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 80px; height: 2px;
            background: linear-gradient(135deg, var(--accent), var(--accent-light));
            border-radius: 1px;
            opacity: 0.5;
        }
        .footer span {
            opacity: 0.4;
        }
        .footer-info {
            margin-top: 8px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 11.5px;
        }
        .footer-info span {
            opacity: 0.5;
        }

        /* ===== Scroll Top ===== */
        .scroll-top {
            position: fixed;
            bottom: 18px;
            right: 14px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: #fff;
            font-size: 20px;
            box-shadow: 0 3px 12px rgba(108, 92, 231, 0.3);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0;
            pointer-events: none;
            transform: scale(0.8);
            z-index: 50;
            display: flex;
            align-items: center;
            justify-content: center;
            will-change: transform, opacity;
        }
        .scroll-top.visible {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1);
        }
        .scroll-top:active {
            transform: scale(0.88);
        }
        .scroll-top:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 4px 18px rgba(108, 92, 231, 0.4);
        }

        /* ===== Responsive ===== */
        @media (max-width: 768px) {
            .container {
                padding: 0 12px;
            }
            .item-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }
            .item {
                padding: 8px 12px;
                min-height: 64px;
            }
            .item .item-name {
                font-size: 13.5px;
            }
            .item .item-func {
                font-size: 12px;
            }
            .item .item-scene {
                font-size: 11px;
            }
            .nav-tag {
                font-size: 12px;
                padding: 4px 12px;
            }
            .logo span {
                font-size: 17px;
            }
            .search-info {
                font-size: 11px;
                gap: 12px;
                right: 56px;
            }
            .install-btn, .anim-btn, .getplugin-btn {
                font-size: 13px;
                padding: 6px 16px;
            }
            .category-header .cat-title {
                font-size: 16px;
            }
            .section-header .section-title {
                font-size: 13.5px;
            }
            /* 移动端：允许logo换行，确保徽章可见 */
            .logo {
                flex-wrap: wrap;
                white-space: normal;
                flex-shrink: 1;
                gap: 4px;
            }
            .logo > span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: calc(100% - 42px);
            }
        }

        @media (max-width: 600px) {
            .search-info {
                display: none !important;
            }
            .item-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .logo span {
                font-size: 15px;
            }
            .install-bar {
                flex-wrap: wrap;
            }
            .install-btn, .anim-btn, .getplugin-btn, .sponsor-btn, .qq-btn, .dual-btn {
                flex: 1;
                min-width: 120px;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .item-grid {
                grid-template-columns: 1fr 1fr;
                gap: 4px;
            }
            .search-info {
                display: none !important;
            }
            .nav-scroll {
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .nav-scroll::-webkit-scrollbar {
                display: none;
            }
            .header-top {
                gap: 8px;
            }
            .item {
                padding: 6px 10px;
                min-height: 56px;
            }
            .item .item-name {
                font-size: 13px;
            }
            .item .item-func {
                font-size: 11.5px;
            }
            .item .item-scene {
                font-size: 10.5px;
            }
            .install-btn {
                font-size: 13px;
                padding: 5px 16px;
            }
            .anim-btn, .getplugin-btn {
                font-size: 13px;
                padding: 5px 16px;
            }
            .sponsor-btn, .qq-btn, .dual-btn {
                font-size: 13px;
                padding: 5px 16px;
            }
            .install-bar {
                gap: 8px;
            }
            .nav-tag {
                font-size: 11px;
                padding: 3px 10px;
            }
            .category-header .cat-title {
                font-size: 15px;
            }
            .section-header .section-title {
                font-size: 13px;
            }
            .header {
                padding: 8px 12px 4px;
                padding-top: max(8px, calc(env(safe-area-inset-top) + 4px));
            }
            .search-wrap input {
                font-size: 16px !important;
                padding: 8px 12px 8px 36px;
                height: 44px;
                min-height: 44px;
            }
            .search-btn {
                font-size: 13px;
                padding: 6px 14px;
                height: 44px;
                min-height: 44px;
            }
            .search-clear {
                right: 50px;
            }
            .logo {
                font-size: 16px;
            }
            .logo > span {
                font-size: 13px;
            }
            .disclaimer-badge, .img-source-badge, .ks-entry-badge {
                font-size: 9px;
                padding: 1px 6px;
                margin-left: 0;
            }
            .ks-entry-badge { margin-left: 4px; }
            .logo-icon {
                width: 30px;
                height: 30px;
                border-radius: 8px;
                object-fit: cover;
                flex-shrink: 0;
                box-shadow: 0 2px 6px rgba(108, 92, 231, 0.2);
            }
            .scroll-top {
                width: 40px;
                height: 40px;
                font-size: 17px;
                bottom: 14px;
                right: 10px;
            }
            .tutorial-grid {
                grid-template-columns: 1fr;
            }
            .tutorial-link {
                font-size: 11px;
                padding: 3px 6px;
            }
            .nav-controls {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                border-left: none;
                padding-left: 0;
                width: 100%;
                padding-top: 4px;
                border-top: 1px solid var(--border);
                margin-top: 2px;
            }
            .nav-control-btn {
                flex: 1 1 calc(50% - 4px);
                text-align: center;
                min-height: 32px;
                font-size: 11px;
                padding: 4px 6px;
            }
            .result-stats {
                font-size: 12px;
            }
            .category {
                contain-intrinsic-size: auto 220px;
            }
            .category-body.open {
                padding: 0 6px 12px 6px;
            }
        }
        @media (max-width: 400px) {
            .item-grid {
                grid-template-columns: 1fr;
            }
            .container {
                padding: 0 8px;
            }
            .category {
                margin-top: 10px;
            }
            .category-header {
                padding: 10px 12px;
            }
            .install-btn, .anim-btn, .getplugin-btn {
                font-size: 12px;
                padding: 5px 12px;
                flex: 1;
                justify-content: center;
                min-width: 0;
            }
            .install-bar {
                gap: 6px;
            }
        }

        @media (min-width: 600px) {
            .container {
                max-width: 760px;
            }
            .item-grid {
                gap: 6px;
            }
            .item {
                padding: 10px 14px;
                min-height: 72px;
            }
            .tutorial-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media print {
            .header,
            .scroll-top,
            .theme-toggle,
            .search-wrap,
            .result-stats,
            .install-bar,
            .quick-nav,
            .tutorial-bar {
                display: none !important;
            }
            .category-body,
            .section-body {
                max-height: none !important;
                padding: 0 8px 14px 8px !important;
                display: block !important;
                transform: scaleY(1) !important;
                opacity: 1 !important;
            }
            .category-header .cat-toggle,
            .section-header .section-toggle {
                display: none !important;
            }
            .category,
            .section {
                break-inside: avoid;
                box-shadow: none !important;
                border: 1px solid #ddd !important;
                content-visibility: visible !important;
            }
            body {
                background: #fff !important;
                color: #000 !important;
                padding: 20px !important;
            }
            .item {
                background: #f8f8f8 !important;
                border-color: #eee !important;
            }
            .shortcut-item {
                background: #f8f8f8 !important;
            }
        }

        /* ===== 动画优化 ===== */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.4); }
            50% { box-shadow: 0 0 0 8px rgba(108, 92, 231, 0); }
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        /* 页面入场 */
        body {
            animation: fadeIn 0.5s ease-out;
        }
        .header {
            animation: slideDown 0.4s ease-out;
        }
        .container {
            animation: fadeInUp 0.6s ease-out;
        }

        /* 分类卡片交错入场 */
        .category {
            animation: fadeInUp 0.5s ease-out both;
        }
        .category:nth-child(1) { animation-delay: 0.1s; }
        .category:nth-child(2) { animation-delay: 0.15s; }
        .category:nth-child(3) { animation-delay: 0.2s; }
        .category:nth-child(4) { animation-delay: 0.25s; }
        .category:nth-child(5) { animation-delay: 0.3s; }
        .category:nth-child(6) { animation-delay: 0.35s; }
        .category:nth-child(7) { animation-delay: 0.4s; }
        .category:nth-child(8) { animation-delay: 0.45s; }

        /* 按钮优化 */
        .install-btn, .anim-btn, .search-btn, .theme-toggle, .nav-control-btn {
            position: relative;
            overflow: hidden;
        }
        .install-btn::after, .anim-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.4s ease, height 0.4s ease;
        }
        .install-btn:active::after, .anim-btn:active::after {
            width: 300px;
            height: 300px;
        }

        /* 导航标签优化 */
        .nav-tag {
            position: relative;
            transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .nav-tag:active {
            transform: scale(0.95);
        }
        .nav-tag.active {
            animation: pulseGlow 2s infinite;
        }

        /* 插件卡片 hover 优化 —— 注意：禁止 transform 位移 / transition: all
           经验802695：hover 时位移会把卡片从鼠标下方"甩开"，鼠标在边缘反复进出
           形成"呼吸抖动"；展开缩略图后图片跟随位移会无限抽搐。仅用视觉反馈。

           扫光条实现机制：不移动伪元素本身（left: -100% → 100% 会与 Chromium 的
           border-radius + GPU 合成层裁切 bug 叠加，出现左边漏光）。
           改为：::before 用 inset:0 牢牢锚定在卡片内部，只移动 background-position，
           让渐变图案在元素内部"滑动穿越"。子元素本身永不越界 → 任何浏览器都不会溢出。 */
        .item::before {
            content: '';
            position: absolute;
            inset: 0;              /* 四向贴齐卡片，不超界 */
            pointer-events: none;
            background-image: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.03) 50%,
                transparent 100%);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            /* 初始：渐变整体在卡片左边界之外（不可见） */
            background-position: -100% 0;
            transition: background-position 0.5s ease;
        }
        .item:hover::before {
            /* hover：渐变整体滑动到卡片右边界之外（刚好完整穿越一次） */
            background-position: 100% 0;
        }

        /* 搜索高亮脉冲 */
        .highlight {
            background: linear-gradient(120deg, var(--highlight) 0%, #ffe066 50%, var(--highlight) 100%);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
            border-radius: 3px;
            padding: 0 2px;
        }

        /* 教程链接优化 */
        .tutorial-link {
            position: relative;
            overflow: hidden;
        }
        .tutorial-link::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
        .tutorial-link:hover::after {
            width: 100%;
        }
        .tutorial-link:hover .link-arrow {
            opacity: 1;
            transform: translateX(3px);
        }
        .tutorial-link .link-arrow {
            transition: all 0.25s ease;
        }

        /* 折叠展开优化 */
        .category-body, .section-body, .tutorial-body {
            transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        opacity 0.25s ease,
                        padding 0.25s ease;
        }

        /* 回到顶部按钮 */
        .scroll-top {
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .scroll-top:hover {
            transform: translateY(-3px) scale(1.05);
            animation: float 1.5s ease-in-out infinite;
        }

        /* 减少动画偏好 */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ===== 字体大小优化 ===== */
        .category-header .cat-title {
            font-size: 18px;
        }
        .section-header .section-title {
            font-size: 15px;
        }
        .item .item-name {
            font-size: 15px;
        }
        .item .item-func {
            font-size: 13px;
        }
        .item .item-scene {
            font-size: 12px;
        }
        .tutorial-link {
            font-size: 13px;
        }
        .nav-tag {
            font-size: 13px;
        }
        .result-stats {
            font-size: 14px;
        }
        .search-wrap input {
            font-size: 16px;
        }
        .logo span {
            font-size: 19px;
        }

        /* ============================================
           ===== v2 优化：移动端深度适配 =====
           ============================================ */
        @media (max-width: 768px) {
            /* 安全区域适配（刘海屏/底部横条） */
            .header {
                padding-top: max(12px, env(safe-area-inset-top));
            }
            .footer {
                padding-bottom: max(24px, env(safe-area-inset-bottom));
            }
            .scroll-top {
                bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
            }

            /* 触摸优化：增大点击区域 */
            .nav-tag {
                min-height: 36px;
                display: inline-flex;
                align-items: center;
                -webkit-tap-highlight-color: transparent;
            }
            .category-header, .section-header {
                min-height: 48px;
                -webkit-tap-highlight-color: transparent;
            }
            .install-btn, .anim-btn, .getplugin-btn, .search-btn, .theme-toggle, .nav-btn, .sponsor-btn, .qq-btn, .dual-btn {
                min-height: 40px;
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
            }

            /* 免责声明徽章：移动端触摸优化 */
            .disclaimer-badge {
                flex-shrink: 0;
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
            }

            /* 防止iOS输入框自动缩放 */
            .search-wrap input {
                font-size: 16px !important;
            }

            /* 优化滚动性能 */
            .container {
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-y: contain;
            }
        }

        @media (max-width: 600px) {
            /* 按钮栏优化：两行布局，更易点击 */
            .install-bar {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }
            .install-btn, .anim-btn, .getplugin-btn, .sponsor-btn, .qq-btn, .dual-btn, .nav-btn {
                width: 100%;
                justify-content: center;
                font-size: 12.5px;
                padding: 8px 10px;
                min-height: 42px;
                display: inline-flex;
                align-items: center;
            }
            .install-btn {
                grid-column: span 2;
            }
            /* 多平台导航站按钮：600px 以下通栏（主入口） */
            .nav-btn {
                grid-column: span 2;
                order: -1;
            }

            /* 搜索区域紧凑化 */
            .search-wrap {
                margin: 8px 0;
            }

            /* 快速导航：标签横向滚动 + 按钮换行 */
            .quick-nav {
                flex-wrap: wrap;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 4px;
            }
            .quick-nav-scroll {
                width: 100%;
                overflow-x: auto;
                scrollbar-width: none;
            }
            .quick-nav-scroll::-webkit-scrollbar {
                display: none;
            }

            /* 卡片网格优化 */
            .item-grid {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            .item {
                padding: 12px 14px;
                min-height: auto;
            }

            /* 分类标题优化 */
            .category-header .cat-title {
                font-size: 15px;
            }
            .section-header .section-title {
                font-size: 13px;
            }
        }

        @media (max-width: 400px) {
            .install-bar {
                grid-template-columns: 1fr;
            }
            .install-btn {
                grid-column: span 1;
            }
            .header-top {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            .header-actions {
                width: 100%;
                justify-content: flex-end;
            }
            .logo {
                flex-wrap: wrap;
                gap: 4px;
            }
            .logo > span {
                width: 100%;
                font-size: 12px;
                max-width: 100%;
            }
            .disclaimer-badge, .img-source-badge, .ks-entry-badge {
                font-size: 9px;
                padding: 1px 6px;
            }
            .ks-entry-badge { margin-left: 4px; }
        }

        /* ============================================
           ===== v2 优化：动画效果增强 =====
           ============================================ */
        /* 注意：此处原有的 .item transform 位移（translateY(-3px) / scale(1.01) / :active scale(0.98)）
           已永久移除。原因有三：
           1) hover 位移 + 展开缩略图 → 卡片把鼠标下方画面甩开 → 鼠标在边缘反复进出 → 呼吸抽搐抖动
           2) transition: transform 会迫使 Chromium 为 .item 创建独立 GPU 合成层 →
              叠加 border-radius + overflow:hidden/clip-path → 左侧裁切失效的经典渲染 bug
              （扫光条 ::before 从左边溢出，右边正常）
           3) 位移产生的"轻微抬起"视觉可以用 box-shadow 层级变化替代，画面稳定不抽搐 */
        .item {
            transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                        border-color 0.25s ease;
        }
        @media (hover: hover) {
            .item:hover {
                box-shadow: 0 8px 24px rgba(108, 92, 231, 0.15), 0 0 0 1px var(--accent-light);
                border-color: var(--accent);
            }
        }

        /* 按钮波纹效果 */
        .install-btn, .anim-btn, .getplugin-btn, .search-btn {
            transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }
        @media (hover: hover) {
            .install-btn:hover, .anim-btn:hover, .getplugin-btn:hover, .search-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(108, 92, 231, 0.3);
                filter: brightness(1.1);
            }
        }
        .install-btn:active, .anim-btn:active, .getplugin-btn:active, .search-btn:active {
            transform: translateY(0) scale(0.97);
        }

        /* 分类展开动画优化 */
        .category-body, .section-body {
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.25s ease,
                        padding 0.3s ease;
            overflow: hidden;
        }
        .category-body:not(.open), .section-body:not(.open) {
            max-height: 0 !important;
            opacity: 0;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
        .category-body.open, .section-body.open {
            animation: expandIn 0.35s ease-out;
            /* 展开后解除 overflow:hidden，避免内部缩略图被裁而出现被下一分类卡片遮挡的观感 */
            overflow: visible;
        }
        @keyframes expandIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 搜索结果淡入 */
        .item {
            animation: itemFadeIn 0.4s ease-out both;
        }
        @keyframes itemFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 导航标签滑动指示器 */
        .nav-tag {
            position: relative;
            transition: color 0.2s ease, background 0.2s ease;
        }
        .nav-tag::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s ease, left 0.3s ease;
            border-radius: 2px;
        }
        .nav-tag.active::after {
            width: 70%;
            left: 15%;
        }

        /* 回到顶部按钮呼吸动画 */
        .scroll-top {
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        .scroll-top:hover {
            transform: translateY(-4px) scale(1.1);
        }

        /* 减少动画偏好（无障碍） */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ============================================
           ===== v2 优化：整体UI精修 =====
           ============================================ */
        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }

        /* ================================================================
           CC 分类向下安全偏移：
           用户明确要求「把 CC 插件整个分类盒子向下调整」，避免 AE 自带分类最后一组
           展开缩略图后底部与 CC 分类标题栏紧贴/视觉重叠。
           现在缩略图不再溢出（item overflow:hidden + clip-path），留 54px 足够。
           - 觉得宽了就减小，觉得紧了就增大。
           ================================================================ */
        #cat-cc.category,
        .category[data-cat="cc"] {
            margin-top: 54px;   /* 14px 默认分类间距 + 40px 额外安全缓冲 */
        }

        /* ================================================================
           Masonry 跨行空槽回填策略调整（修复"卡片看起来错位/重叠"的视觉错觉）：

           之前：grid-auto-flow: row dense
                 优点：展开缩略图后，后续矮卡片会"回填"到同一行的空 cell，布局紧凑
                 缺点：卡片 DOM 顺序被打乱（后面的跑到前面去）+ 与展开/收缩的
                       grid-row span 叠加时，用户会产生"A卡片明明在B前面，
                       怎么现在B在A的右上方？是不是重叠了？"的强烈错觉。
                       这正好匹配用户的主诉：「卡片还是有重叠现象」。

           现在：grid-auto-flow: row（不回填）
                 严格按 DOM 顺序一行一行铺，与用户说"就像拼长图一样拼起来"的
                 预期一致 —— 即使展开缩略图的卡片高度高，它也只占据自己这一列
                 的空间，旁边的矮卡片会推到下一行开头，绝不会"钻空子"跑到
                 高卡片的上方/侧上方，视觉上 100% 没有交叉重叠的错觉。

           紧凑度的牺牲：部分空 cell，页面更长；但清晰无重叠是用户最新硬需求。
        =================================================================== */
        .item-grid {
            grid-auto-flow: row;
        }

        .category::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), transparent);
            opacity: 0.6;
        }

        /* 搜索框聚焦发光 */
        .search-wrap input:focus {
            box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15),
                        0 2px 12px rgba(108, 92, 231, 0.12);
        }

        /* 空状态优化 */
        .empty-state {
            animation: emptyBounce 0.6s ease-out;
        }
        @keyframes emptyBounce {
            0% { opacity: 0; transform: scale(0.8); }
            60% { transform: scale(1.05); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* 快捷键列表优化 */
        .shortcut-item {
            transition: background 0.2s ease, transform 0.15s ease;
        }
        @media (hover: hover) {
            .shortcut-item:hover {
                background: var(--bg-hover);
                transform: translateX(4px);
            }
        }

        /* 主题切换按钮旋转动画 */
        .theme-toggle {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .theme-toggle:active {
            transform: rotate(180deg) scale(0.9);
        }

        /* 选中文字颜色 */
        ::selection {
            background: rgba(108, 92, 231, 0.3);
            color: inherit;
        }

        /* ============================================
           ===== v3：搜索结果独立面板 =====
           ============================================ */
        .search-results-panel {
            padding: 16px 0;
        }

        .search-group {
            margin-bottom: 24px;
        }

        .search-group-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            background: var(--bg-card);
            border-radius: 10px 10px 0 0;
            border: 1px solid var(--border);
            border-bottom: none;
            font-weight: 600;
        }

        .search-group-icon {
            font-size: 16px;
        }

        .search-group-title {
            font-size: 14px;
            flex: 1;
        }

        .search-group-count {
            font-size: 12px;
            background: var(--accent);
            color: #fff;
            padding: 2px 10px;
            border-radius: 10px;
            font-weight: 500;
        }

        .search-group-fuzzy .search-group-header {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), var(--bg-card));
            border-color: rgba(245, 158, 11, 0.3);
        }

        .search-group-fuzzy .search-group-count {
            background: linear-gradient(135deg, #f59e0b, #f97316);
        }

        .search-result-list {
            border: 1px solid var(--border);
            border-radius: 0 0 10px 10px;
            overflow: visible; /* 允许内部缩略图展开时不被裁剪 */
        }

        .search-result-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-card);
            transition: background 0.2s ease, padding-left 0.2s ease;
            animation: searchItemIn 0.4s ease-out both;
        }

        .search-result-item:last-child {
            border-bottom: none;
        }

        @media (hover: hover) {
            .search-result-item:hover {
                background: var(--bg-hover);
                padding-left: 20px;
            }
        }

        .search-result-item:active {
            transform: scale(0.99);
        }

        @keyframes searchItemIn {
            from { opacity: 0; transform: translateX(-12px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .sri-main {
            flex: 1;
            min-width: 0;
        }

        .sri-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .sri-func {
            font-size: 12.5px;
            color: var(--text-secondary);
            margin-top: 3px;
            line-height: 1.4;
        }

        .sri-scene {
            font-size: 11.5px;
            color: var(--text-muted);
            margin-top: 2px;
            line-height: 1.3;
        }

        .sri-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
            flex-shrink: 0;
            text-align: right;
        }

        .sri-cat {
            font-size: 11px;
            color: var(--accent);
            background: rgba(108, 92, 231, 0.1);
            padding: 2px 8px;
            border-radius: 6px;
            white-space: nowrap;
        }

        .sri-sec {
            font-size: 10.5px;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .sri-fuzzy {
            border-left: 3px solid #f59e0b;
            opacity: 0.92;
        }

        /* 移动端搜索结果优化 */
        @media (max-width: 600px) {
            .search-result-item {
                flex-direction: column;
                gap: 8px;
            }
            .sri-meta {
                flex-direction: row;
                align-items: center;
                gap: 8px;
            }
            .sri-name {
                font-size: 13.5px;
            }
            .sri-func {
                font-size: 12px;
            }
            .search-group-header {
                padding: 8px 12px;
            }
            .search-result-item {
                padding: 10px 12px;
            }
        }

        /* ============================================
           ===== v4：全端响应式适配重构 =====
           电脑端充分利用宽屏，手机端自适应缩放
           ============================================ */

        /* --- 基础重置：确保移动端不溢出 --- */
        * {
            max-width: 100%;
        }
        html, body {
            overflow-x: hidden;
            width: 100%;
        }

        /* --- 手机端（默认，<768px）--- */
        .container {
            max-width: 100% !important;
            padding: 0 12px !important;
        }
        .item-grid {
            grid-template-columns: 1fr !important;
            gap: 8px !important;
        }
        .item {
            padding: 12px 14px !important;
            min-height: auto !important;
        }

        /* --- 平板竖屏（≥768px）--- */
        @media (min-width: 768px) {
            .container {
                max-width: 900px !important;
                padding: 0 20px !important;
            }
            .item-grid {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 8px !important;
            }
            .item {
                padding: 10px 12px !important;
                min-height: 72px !important;
            }
            .header {
                padding: 14px 24px 8px !important;
            }
        }

        /* --- 电脑端（≥1024px）--- */
        @media (min-width: 1024px) {
            .container {
                max-width: 1100px !important;
                padding: 0 24px !important;
            }
            .item-grid {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 10px !important;
            }
            .item {
                padding: 12px 14px !important;
                min-height: 78px !important;
            }
            .category-header .cat-title {
                font-size: 17px !important;
            }
            .section-header .section-title {
                font-size: 14.5px !important;
            }
        }

        /* --- 大屏（≥1440px）--- */
        @media (min-width: 1440px) {
            .container {
                max-width: 1320px !important;
                padding: 0 32px !important;
            }
            .item-grid {
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 12px !important;
            }
            .item {
                padding: 14px 16px !important;
                min-height: 82px !important;
            }
            .item .item-name {
                font-size: 14.5px !important;
            }
            .item .item-func {
                font-size: 13px !important;
            }
        }

        /* --- 超宽屏（≥1920px）--- */
        @media (min-width: 1920px) {
            .container {
                max-width: 1500px !important;
            }
            .item-grid {
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 14px !important;
            }
        }

        /* --- 搜索结果面板响应式 --- */
        @media (min-width: 768px) {
            .search-results-panel {
                max-width: 900px;
                margin: 0 auto;
            }
        }
        @media (min-width: 1024px) {
            .search-results-panel {
                max-width: 1100px;
            }
            .search-result-item {
                padding: 14px 18px;
            }
            .sri-name {
                font-size: 15px;
            }
            .sri-func {
                font-size: 13px;
            }
        }
        @media (min-width: 1440px) {
            .search-results-panel {
                max-width: 1320px;
            }
        }

        /* --- 按钮栏响应式 --- */
        @media (min-width: 768px) {
            .install-bar {
                flex-wrap: wrap !important;
                display: flex !important;
                grid-template-columns: none !important;
                gap: 8px !important;
            }
            .install-btn, .anim-btn, .getplugin-btn, .doc-btn, .sponsor-btn, .qq-btn, .nav-btn {
                flex: 1 1 auto !important;
                grid-column: auto !important;
                min-width: 140px !important;
                justify-content: center !important;
            }
        }

        /* 手机端按钮栏：网格布局 */
        @media (max-width: 767px) {
            .install-bar {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }
            .install-btn, .anim-btn, .getplugin-btn, .doc-btn, .sponsor-btn, .qq-btn, .nav-btn {
                width: 100% !important;
                justify-content: center !important;
                font-size: 12.5px !important;
                padding: 8px 10px !important;
                min-width: 0 !important;
            }
            .install-btn {
                grid-column: span 2 !important;
            }
        }

        @media (max-width: 400px) {
            .install-bar {
                grid-template-columns: 1fr !important;
            }
            .install-btn, .sponsor-btn, .qq-btn, .nav-btn {
                grid-column: span 1 !important;
            }
        }

        /* --- 字体大小随屏幕缩放 --- */
        @media (min-width: 1024px) {
            body {
                font-size: 15px;
            }
        }
        @media (min-width: 1440px) {
            body {
                font-size: 15.5px;
            }
        }

        /* --- 防止图片/元素溢出 --- */
        img, video, iframe {
            max-width: 100%;
            height: auto;
        }

        /* --- 移动端横屏优化 --- */
        @media (max-width: 900px) and (orientation: landscape) {
            .container {
                padding: 0 16px !important;
            }
            .item-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
            .header {
                padding: 8px 16px 4px !important;
            }
        }

        /* --- 新按钮统一交互动效 --- */
        .doc-btn {
            position: relative;
            overflow: hidden;
            transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
            min-height: 40px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        @media (hover: hover) {
            .doc-btn:hover {
                transform: translateY(-2px);
                filter: brightness(1.1);
            }
        }
        .doc-btn:active {
            transform: translateY(0) scale(0.97);
        }
        .doc-btn .icon {
            font-size: 16px;
        }


        /* ============================================================
           Thumbnail + Multi-Image Carousel System (2026 rewrite)
           ============================================================ */
        .thumb-controls-sep {
            width: 1px;
            height: 22px;
            background: var(--border);
            margin: 0 2px 0 6px;
            flex-shrink: 0;
        }

        .item .thumb-toggle {
            margin-top: 6px;
            font-size: 11.5px;
            color: var(--accent);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border: 1px dashed var(--border);
            border-radius: 10px;
            background: var(--accent-soft);
            cursor: pointer;
            align-self: flex-start;
            user-select: none;
            transition: all 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .item .thumb-toggle:hover {
            border-color: var(--accent);
            background: rgba(108,92,231,0.1);
        }
        .item .thumb-toggle .tc-count {
            opacity: 0.8;
        }
        .item .thumb-toggle.collapsed::after {
            content: "▸";
            margin-left: 2px;
        }
        .item .thumb-toggle:not(.collapsed)::after {
            content: "▾";
            margin-left: 2px;
        }

        .item .thumb-area {
            margin-top: 6px;
            border-radius: 10px;
            overflow: hidden;
            background: var(--bg);
            border: 1px solid var(--border);
            max-height: 0;
            opacity: 0;
            transform: translateY(-4px);
            transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease, margin 0.25s ease;
            pointer-events: none;
        }
        .item.thumbs-open .thumb-area {
            max-height: 800px;
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            overflow: visible;
        }
        .item.thumbs-open {
            /* keep card reasonable */
            min-height: auto;
            /* 【统一单图层 + 强制零溢出】
               用户最新反馈：
               1)「把所有盒子都弄在一个图层上，他这个好像是分层的」→ 删除所有显式 z-index（这里也去掉 z-index:3）
               2)「CC插件这个盒子底下挡了很多东西」→ 缩略图溢出 .item 盒子，横向盖到了
                  同一 grid 相邻 cell 的矮卡片（VR锐化、VR旋转球面等）。
               根治：用 !important 保证 overflow:hidden，再配合 .item 的 clip-path 双保险，
               任何 thumb-carousel / img / 箭头 / dots / 阴影 只要超出 .item 边框一律裁切。
               几何安全：thumb-area 在 item 内缩进 padding 12px + thumb-area 自身 border 1px
               → thumb-carousel 距卡片最外边缘 ≥ 13px；而卡片圆角 radius-sm 仅 4px；
               箭头圆心距左右 22px；完全在 clip-path 圆角矩形内部，不会误裁任何视觉元素。 */
            overflow: hidden !important;
            /* 打开缩略图时也保留 clip-path，不让 Chromium 因为合成层问题绕过 overflow:hidden 裁切。
               （之前的 clip-path:none !important 是早期"允许缩略图溢出盒子"方案留下的，已废弃。） */
            /* z-index: auto → 全图层统一：同 .item 默认值。盒子分离 + 内容不溢出，就不需要层级竞争。 */
        }

        /* ---- Carousel (inside thumb area) ---- */
        .thumb-carousel {
            position: relative;
            width: 100%;
            background: #000;
        }
        .thumb-carousel .tc-frame {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 10;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: #111 center/cover no-repeat;
        }
        .thumb-carousel .tc-frame img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #0d0d15;
            display: block;
            cursor: zoom-in;
        }
        .thumb-carousel .tc-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: none;
            background: rgba(0,0,0,0.5);
            color: #fff;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            /* 核心修复：箭头默认半透明常驻显示，不再出现/消失。
               之前用 opacity:0 + hover显示 → 箭头出现时 pointer-events/visibility 切换
               导致鼠标在边缘反复触发/取消 hover → 无限闪烁。
               改为始终可见（半透明 0.4），hover 时增强到 1.0，完全没有出现/消失的闪烁可能。 */
            opacity: 0.4;
            pointer-events: auto;
            transition: opacity 0.15s linear, background-color 0.15s linear;
            z-index: 2;
            padding: 0;
            box-sizing: border-box;
        }
        /* hover（JS mouseenter 添加 .nav-show 类）和 CSS :hover 双重触发 */
        .thumb-carousel.nav-show .tc-nav,
        .thumb-carousel:hover .tc-nav,
        .thumb-carousel:focus-within .tc-nav {
            opacity: 1;
        }
        .thumb-carousel .tc-nav.prev { left: 6px; }
        .thumb-carousel .tc-nav.next { right: 6px; }
        .thumb-carousel .tc-nav:hover { background: rgba(0,0,0,0.7); }
        .thumb-carousel .tc-nav:active { transform: translateY(-50%) scale(0.92); }
        .thumb-carousel .tc-nav[disabled] { opacity: 0.2; cursor: not-allowed; pointer-events: none; }

        .thumb-carousel .tc-dots {
            position: absolute;
            left: 0; right: 0; bottom: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            z-index: 3;
            pointer-events: none;
        }
        .thumb-carousel .tc-dots button {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.35);
            cursor: pointer;
            padding: 0;
            pointer-events: auto;
            transition: all 0.2s;
        }
        .thumb-carousel .tc-dots button.active {
            background: var(--accent);
            transform: scale(1.3);
            box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
        }
        .thumb-carousel .tc-counter {
            position: absolute;
            top: 6px;
            right: 8px;
            background: rgba(0,0,0,0.55);
            color: #fff;
            padding: 1px 8px;
            border-radius: 10px;
            font-size: 10.5px;
            z-index: 3;
            font-variant-numeric: tabular-nums;
        }

        /* ---- Lightbox ---- */
        .lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.88);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            padding: 24px;
        }
        .lightbox.open { display: flex; }
        .lightbox .lb-inner {
            position: relative;
            max-width: min(1400px, 100%);
            max-height: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .lightbox img {
            max-width: 100%;
            max-height: calc(100vh - 120px);
            object-fit: contain;
            background: #000;
            border-radius: 8px;
            display: block;
            user-select: none;
            -webkit-user-drag: none;
        }
        .lightbox .lb-close,
        .lightbox .lb-prev,
        .lightbox .lb-next {
            position: absolute;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.2);
            color: #fff;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s;
            backdrop-filter: blur(8px);
        }
        .lightbox .lb-close:hover,
        .lightbox .lb-prev:hover,
        .lightbox .lb-next:hover {
            background: rgba(255,255,255,0.22);
        }
        .lightbox .lb-close { top: -16px; right: -16px; }
        .lightbox .lb-prev { top: 50%; left: -60px; transform: translateY(-50%); }
        .lightbox .lb-next { top: 50%; right: -60px; transform: translateY(-50%); }
        .lightbox .lb-counter {
            align-self: center;
            color: rgba(255,255,255,0.75);
            font-size: 13px;
            font-variant-numeric: tabular-nums;
        }
        @media (max-width: 700px) {
            .lightbox { padding: 12px; }
            .lightbox .lb-prev { left: 6px; }
            .lightbox .lb-next { right: 6px; }
            .lightbox .lb-close { top: 6px; right: 6px; }
            .thumb-carousel .tc-nav { opacity: 1; }
        }

        /* item grid with thumbnails looks fine at 2 columns; no change needed */
        /* Make sure flex-column items wrap nicely with added thumb area */


        /* ===== Emoji icons restored per user request (2026-08) ===== */
        /* Theme toggle: show emoji text (☀️/🌙) instead of pure-CSS painted shapes */
        .icon-theme {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            line-height: 1;
            width: 22px;
            height: 22px;
            vertical-align: middle;
            filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08));
        }

        /* nav-tag / category-title emoji icon span: restore display */
        .nav-tag > span:first-child,
        .cat-title > span:first-child {
            display: inline;
            width: auto;
            overflow: visible;
            margin-right: 4px;
            font-size: 1em;
            vertical-align: -1px;
        }

        .icon, .search-group-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            margin-right: 4px;
            vertical-align: middle;
            position: relative;
        }
        .icon-target::after {
            content: '';
            width: 14px; height: 14px;
            border: 2px solid var(--accent, #6c5ce7);
            border-radius: 50%;
            position: absolute;
        }
        .icon-target::before {
            content: '';
            width: 4px; height: 4px;
            background: var(--accent, #6c5ce7);
            border-radius: 50%;
            position: absolute;
            z-index: 2;
            box-shadow: -7px 0 0 -1px var(--accent, #6c5ce7),
                         7px 0 0 -1px var(--accent, #6c5ce7),
                         0 -7px 0 -1px var(--accent, #6c5ce7),
                         0  7px 0 -1px var(--accent, #6c5ce7);
        }
        .icon-sparkle {
            color: var(--accent, #6c5ce7);
        }
        .icon-sparkle::before {
            content: '';
            width: 14px; height: 14px;
            background:
                linear-gradient(transparent 42%, var(--accent, #6c5ce7) 42% 58%, transparent 58%),
                linear-gradient(90deg, transparent 42%, var(--accent, #6c5ce7) 42% 58%, transparent 58%),
                linear-gradient(45deg, transparent 44%, var(--accent, #6c5ce7) 44% 56%, transparent 56%),
                linear-gradient(135deg, transparent 44%, var(--accent, #6c5ce7) 44% 56%, transparent 56%);
            position: absolute;
            border-radius: 50%;
        }
        .icon-search::before {
            content: '';
            width: 10px; height: 10px;
            border: 2.5px solid currentColor;
            border-radius: 50%;
            position: absolute;
            top: 2px; left: 2px;
        }
        .icon-search::after {
            content: '';
            width: 3px; height: 9px;
            background: currentColor;
            transform: rotate(45deg);
            position: absolute;
            top: 10px; left: 11px;
            border-radius: 2px;
        }
        .empty-icon {
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .icon-star {
            color: #ffb400;
            background:
                conic-gradient(from 18deg at 50% 50%,
                    transparent 0 32deg, currentColor 32deg 72deg,
                    transparent 72deg 108deg, currentColor 108deg 148deg,
                    transparent 148deg 180deg);
            -webkit-background-clip: text;
            background-clip: text;
        }
        .icon-star::before {
            content: '';
            position: absolute;
            inset: 2px;
            background: currentColor;
            clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            opacity: 0.9;
        }
        .tag .icon-star, .tag-fuzzy {
            /* inline icon sizing inside tag */
            width: 12px; height: 12px; margin-right: 2px;
        }
        /* search-group-icon (span blocks in search results) */
        .search-group-icon {
            color: var(--accent);
            width: 20px; height: 20px; margin-right: 6px;
        }

        /* ================================================================
           2026-08 — 效果图尺寸（恢复到以前大小：分类 380/240，搜索结果 340/210）
           ================================================================ */
        .thumb-toggle {
            padding: 3px 9px !important;
            font-size: 11.5px !important;
            margin-top: 5px !important;
        }
        .thumb-area {
            max-width: 380px;
            margin: 5px auto 0 auto !important;
        }
        .thumb-carousel {
            width: 100% !important;
            max-width: 380px !important;
            margin: 0 auto;
            aspect-ratio: 16 / 10;
            max-height: 240px;
            background: #000;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
        }
        .thumb-carousel .tc-frame {
            aspect-ratio: 16 / 10;
        }
        .thumb-carousel img {
            max-width: 100%;
            max-height: 240px;
            height: 100%;
            width: 100%;
            object-fit: contain;
            display: block;
            margin: 0 auto;
            background: #000;
        }
        /* 搜索结果容器：340 / 210 */
        .search-result-item .thumb-area { max-width: 340px; }
        .search-result-item .thumb-carousel { max-height: 210px; aspect-ratio: 16 / 10; max-width: 340px !important; }
        .search-result-item .thumb-carousel .tc-frame { aspect-ratio: 16 / 10; }
        .search-result-item .thumb-carousel img { max-height: 210px; }
        /* 分类展开状态 - 调大高度限制以防裁剪，overflow 设为 visible 确保投影/角标显示 */
        .item.thumbs-open .thumb-area { max-height: 800px; overflow: visible; }
        .item.thumbs-open .thumb-carousel { max-height: 500px; overflow: visible; }
        .item.thumbs-open .thumb-carousel img { max-height: 500px; }

        /* ================================================================
           2026-08 — 全站移动端适配（手机端预览）
           经验基准：移动端正文 13px / 标题 14px / 次要信息 12px；
           统一在 768px 断点内「覆盖既有 class」，不改动主逻辑。
           ================================================================ */
        @media (max-width: 768px) {
            html, body {
                font-size: 14px;
                overflow-x: hidden;
                -webkit-text-size-adjust: 100%;
            }
            /* Banner 压缩高度，logo 缩小 */
            .site-header, .banner {
                padding: 8px 10px !important;
                min-height: 64px !important;
            }
            .logo-icon, .banner img, img[src*=logo], img[src*=logo-icon] {
                width: 32px !important;
                height: 32px !important;
                margin-right: 6px !important;
            }
            .banner-links, .top-nav-links {
                flex-wrap: wrap !important;
                gap: 4px 10px !important;
                font-size: 12px !important;
                justify-content: center !important;
            }
            /* 搜索栏：全宽紧凑 */
            .search-wrap, .search-bar-wrap {
                width: 100% !important;
                padding: 0 6px !important;
                gap: 4px !important;
            }
            .search-wrap input, .search-bar-wrap input {
                height: 38px !important;
                font-size: 14px !important;
                padding: 0 10px !important;
            }
            .search-btn, .clear-search-btn {
                height: 38px !important;
                padding: 0 10px !important;
                font-size: 13px !important;
            }
            /* 分类 chip 横向滚动 + 允许换行 */
            #navScroll, .nav-scroll, .tags-row {
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                overflow-y: hidden;
                scrollbar-width: thin;
                -webkit-overflow-scrolling: touch;
                padding: 4px 6px !important;
                gap: 4px 6px !important;
            }
            .nav-tag, .chip-tag, .cat-chip {
                padding: 4px 8px !important;
                font-size: 12px !important;
                white-space: nowrap;
                border-radius: 999px !important;
            }
            /* 快捷入口按钮（文档/赞助/QQ群/LOOKAE）换行 */
            .quick-entry-row, .doc-links, .ks-row {
                flex-wrap: wrap !important;
                padding: 0 6px !important;
                gap: 6px !important;
            }
            .quick-entry-row button, .quick-entry-row a,
            .doc-links button, .doc-links a,
            .install-btn, .ks-entry-badge {
                padding: 6px 8px !important;
                font-size: 12px !important;
                flex: 1 1 calc(50% - 6px) !important;
                min-width: 0;
            }
            /* 分类头部高度压缩 */
            .category-header {
                padding: 8px 10px !important;
            }
            .cat-title {
                font-size: 15px !important;
            }
            .section-header {
                padding: 6px 8px !important;
            }
            .section-title {
                font-size: 14px !important;
            }
            .sec-icon { font-size: 12px !important; }
            /* item 网格：手机端 2 列；很窄(≤480px)时 1 列 */
            .item-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 8px !important;
                padding: 6px !important;
            }
            @media (max-width: 480px) {
                .item-grid {
                    grid-template-columns: 1fr !important;
                }
            }
            .item {
                padding: 8px 8px 10px 8px !important;
            }
            .item-name { font-size: 13px !important; line-height: 1.3 !important; }
            .item-func { font-size: 12px !important; line-height: 1.35 !important; }
            .item-scene { font-size: 11px !important; }
            .tag, .tag-fuzzy {
                font-size: 10px !important;
                padding: 1px 5px !important;
            }
            /* 搜索结果条目缩小 */
            .search-results-panel { padding: 8px 6px !important; }
            .search-group { margin-bottom: 10px !important; border-radius: 8px !important; }
            .search-group-header { padding: 6px 8px !important; }
            .search-group-title { font-size: 14px !important; }
            .search-group-count { font-size: 11px !important; padding: 1px 6px !important; }
            .search-result-list { padding: 4px 6px 6px 6px !important; gap: 6px !important; }
            .search-result-item { padding: 8px !important; gap: 4px !important; }
            .sri-name { font-size: 13px !important; }
            .sri-func { font-size: 12px !important; }
            .sri-scene { font-size: 11px !important; }
            .sri-meta { font-size: 11px !important; gap: 6px !important; flex-wrap: wrap; }
            /* 缩略图在移动端：分类 220px / 搜索结果 190px
               ✔ 修复 aspect-ratio 与 min/max-height 冲突（部分手机浏览器会出现高度为0）
               方案：优先 aspect-ratio，同时用 max-height 作为上限；
                     min-height 作为极端情况兜底，但不强制 height 100% 以免冲突。 */
            .thumb-area { max-width: 100% !important; padding: 0 !important; margin: 4px auto 0 auto !important; }
            .thumb-carousel {
                width: 100% !important;
                max-width: 100% !important;
                max-height: 220px !important;
                /* 用 min-height 作为"无图片时也保留占位高度"，避免图加载失败时整排塌陷消失 */
                min-height: 150px;
                /* aspect-ratio 仅作为参考，不强制；移动端不同宽度下自动根据 max-height 收缩 */
                aspect-ratio: auto 16 / 10;
            }
            .thumb-carousel .tc-frame {
                min-height: 150px;
                aspect-ratio: auto 16 / 10;
            }
            .thumb-carousel img {
                max-height: 220px !important;
                /* 注意：不再强制 height:100%，因为当容器高度被 aspect-ratio/min-height 共同约束时，
                   强制 height:100% 会让某些浏览器的 img 高度变成 0（见修复报告"被裁剪"根因） */
                height: auto;
                min-height: 150px;
                width: 100%;
                object-fit: contain;
                display: block;
            }
            .search-result-item .thumb-carousel { max-height: 190px !important; min-height: 135px; }
            .search-result-item .thumb-carousel .tc-frame { min-height: 135px; }
            .search-result-item .thumb-carousel img { max-height: 190px !important; min-height: 135px; }
            .thumb-toggle { padding: 2px 8px !important; font-size: 11px !important; }
            /* 教程面板缩小 */
            .tutorial-box { padding: 8px !important; margin: 8px 6px !important; }
            .tutorial-header { font-size: 13px !important; }
            .tutorial-body { font-size: 12px !important; }
            .tutorial-body li { margin: 2px 0 !important; }
            /* 回到顶部按钮缩小到易点按 */
            .scroll-top {
                width: 38px !important;
                height: 38px !important;
                right: 10px !important;
                bottom: 16px !important;
                font-size: 16px !important;
                border-radius: 50% !important;
            }
            /* footer 字号 */
            .footer, .site-footer, .copy-info {
                font-size: 11px !important;
                padding: 8px !important;
                line-height: 1.6;
            }
            /* 免责声明/赞助/QQ群 等独立页面的正文列数 */
            .standalone-page, .disclaimer-page, .sponsor-page, .qq-page {
                padding: 14px 12px !important;
                font-size: 13px !important;
                line-height: 1.65 !important;
                max-width: 100% !important;
            }
            img.qq-qr, img.alipay, img.wechat, .qr-card img {
                max-width: 240px !important;
                height: auto !important;
                display: block;
                margin: 0 auto;
            }
        }

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 【关键修复：卡片重叠 - 移除此处重复的 hover transform】
   原代码在 L1156 已经把 .item:hover 改为"只改阴影/边框，不改几何位移"，
   但 L3272 这里又补了一份 `.item:hover { transform: translateY(-3px) scale(1.01) }`
   —— CSS 源码位置越靠后优先级越高 → 正确版本被覆盖，卡片 hover 时又回到了：
   · translateY(-3px) 向上移位 3px
   · scale(1.01) 放大 1%
   · 再叠加 8px gap / 5px gap 的小空隙 → 卡片上缘与右缘直接**侵入相邻卡片 cell**，
     视觉呈现为"叠在一起"。

   为什么不保留这份动画？因为：
   1) Experience 263257 明确指出：当用户反复说"还是重叠"时，要立刻停用任何
      会改变几何尺寸/位置的 hover 效果，改用亮度/边框/阴影等纯视觉反馈。
   2) will-change: transform 本身会额外提升 GPU 合成层，与 clip-path / overflow:hidden
      叠加时在 Chromium 里偶发裁切边界偏移（缩略图漏出卡片）。 */
.item, .search-result-item {
    /* 仍然保留入场渐入动画（它只在初次渲染时跑一次，之后永远不会与 hover 叠加） */
    animation: slideUpFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
    /* 删掉 will-change：动画跑完后不需要保留，反而会占显存 + 产生合成层裁切偏移隐患。
       需要动画时 Chromium 会自动按需临时提升层。 */
}
/* hover 只改视觉：阴影 + 边框，绝不碰 transform/translate/scale（避免几何重叠） */
.item:hover, .search-result-item:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-light);
}

/* ===== AI 识别助手 ===== */
.ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.2);
    text-decoration: none;
    font-family: inherit;
}
.ai-btn:active { transform: scale(0.95); }
.ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.4);
}

/* 弹窗遮罩 */
.ai-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ai-modal-overlay.active { display: flex; }

/* 弹窗主体 */
.ai-modal {
    background: var(--bg-card);
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: aiModalIn 0.3s ease;
}
@keyframes aiModalIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 弹窗头部 */
.ai-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ai-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.ai-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s;
    line-height: 1;
}
.ai-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* 弹窗内容区 */
.ai-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* API 设置区 */
.ai-api-settings {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.ai-api-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.ai-api-row:last-child { margin-bottom: 0; }
.ai-provider-select {
    flex-shrink: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input, #1a1a2e);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    min-width: 110px;
}
.ai-api-key-input, .ai-api-url-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input, #1a1a2e);
    color: var(--text);
    font-size: 13px;
    outline: none;
}
.ai-api-key-input:focus, .ai-api-url-input:focus, .ai-provider-select:focus {
    border-color: var(--accent, #7c3aed);
}
.ai-api-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}

/* 模式选择 + 自定义命令区 */
.ai-mode-row {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-mode-group, .ai-cmd-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-mode-label, .ai-cmd-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}
.ai-mode-tabs {
    display: flex;
    gap: 6px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.ai-mode-tab {
    flex: 1;
    padding: 8px 10px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.ai-mode-tab:hover {
    background: var(--bg-tertiary);
}
.ai-mode-tab.active {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}
.ai-cmd-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 40px;
}
.ai-cmd-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* 上传区域 */
.ai-upload-area {
    border: 2px dashed var(--border);
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ai-upload-area:hover, .ai-upload-area.dragover {
    border-color: var(--accent);
    background: var(--accent-bg);
}
.ai-upload-icon {
    font-size: 40px;
    line-height: 1;
}
.ai-upload-area p {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.ai-upload-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* 图片预览 */
.ai-preview {
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}
.ai-preview img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 12px;
    object-fit: contain;
}

/* OCR 进度条 */
.ai-ocr-progress {
    margin-bottom: 16px;
}
.ai-ocr-progress .ai-progress-bar {
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
    margin-bottom: 8px;
}
.ai-progress-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* OCR 提取文字 */
.ai-ocr-text {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.ai-ocr-label, .ai-result-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.ai-ocr-content {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.5;
}

/* AI 结果 */
.ai-result {
    margin-bottom: 16px;
    padding: 16px;
    background: var(--accent-bg);
    border-radius: 12px;
    border: 1px solid var(--accent);
}
.ai-result-content {
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-result-content .ai-error {
    color: #e74c3c;
    font-weight: 500;
}

/* 加载动画 */
.ai-loading {
    text-align: center;
    padding: 20px;
}
.ai-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: aiSpin 0.8s linear infinite;
    margin: 0 auto 12px;
}
@keyframes aiSpin {
    to { transform: rotate(360deg); }
}
.ai-loading p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* 操作按钮 */
.ai-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.ai-analyze-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.ai-analyze-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.4);
}
.ai-analyze-btn:active:not(:disabled) { transform: scale(0.95); }
.ai-analyze-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ai-reset-btn {
    display: inline-flex;
    align-items: center;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.ai-reset-btn:hover {
    background: var(--bg-hover);
}

/* 移动端适配 */
@media (max-width: 600px) {
    .ai-modal {
        max-height: 90vh;
        border-radius: 16px;
    }
    .ai-modal-body { padding: 16px; }
    .ai-upload-area { padding: 30px 16px; }
    .ai-upload-icon { font-size: 32px; }
    .ai-upload-area p { font-size: 14px; }
    .ai-modal-actions { flex-direction: column; }
    .ai-analyze-btn, .ai-reset-btn { width: 100%; justify-content: center; }
}

/* ===== 主页背景自定义 ===== */
.bg-upload-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 600;
    color: #6c5ce7;
    background: rgba(108, 92, 231, 0.12);
    border: 1px solid rgba(108, 92, 231, 0.35);
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    margin-left: 6px;
    cursor: pointer;
    line-height: 1.4;
    min-height: 20px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.bg-upload-badge:hover {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    border-color: #6c5ce7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.35);
}
.bg-upload-badge .bg-icon {
    font-size: 11px;
    line-height: 1;
}
.bg-reset-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    margin-left: 5px;
    cursor: pointer;
    line-height: 1.4;
    min-height: 20px;
}
.bg-reset-badge:hover {
    background: linear-gradient(135deg, #e74c3c, #ff6b6b);
    color: #fff;
    border-color: #e74c3c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* 背景覆盖层 */
.custom-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.custom-bg-overlay img,
.custom-bg-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.custom-bg-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}

/* 有自定义背景时，body 内容需保证可读性 */
body.has-custom-bg {
    background: #1a1a2e !important;
}
body.has-custom-bg .header {
    background: transparent !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
body.is-dark.has-custom-bg {
    background: #0c0c12 !important;
}
body.is-dark.has-custom-bg .header {
    background: transparent !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* 顶部搜索框、快速导航、教程栏同样透明模糊 */
body.has-custom-bg .search-wrap input {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #000 !important;
}
body.has-custom-bg .search-wrap input::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}
body.has-custom-bg .result-stats {
    color: rgba(0, 0, 0, 0.7) !important;
}
body.has-custom-bg .quick-nav {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}
body.has-custom-bg .quick-nav .nav-tag {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #000 !important;
}
body.has-custom-bg .quick-nav .nav-tag.active {
    background: rgba(108, 92, 231, 0.7) !important;
    color: #fff !important;
}
body.has-custom-bg .tutorial-bar {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(0, 0, 0, 0.1) !important;
}
body.has-custom-bg .tutorial-header {
    color: #000 !important;
}

/* 有自定义背景时，卡片完全透明 + 毛玻璃模糊，字体保持黑色 */
body.has-custom-bg .category,
body.has-custom-bg .category-header,
body.has-custom-bg .section,
body.has-custom-bg .item {
    background: transparent !important;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #000 !important;
}
body.has-custom-bg .category-header .cat-title,
body.has-custom-bg .section-header .section-title,
body.has-custom-bg .item .item-name,
body.has-custom-bg .item .item-func,
body.has-custom-bg .item .item-scene {
    color: #000 !important;
}
body.has-custom-bg .category-header .cat-toggle,
body.has-custom-bg .section-header .section-toggle,
body.has-custom-bg .section-header .section-title .sec-icon {
    color: rgba(0, 0, 0, 0.6) !important;
}