:root {
            /* Claude / Anthropic 官网气质：暖奶油底 + 近黑主按钮 + 陶土橙点缀 */
            --primary-color: #141413;
            --primary-hover-color: #2a2926;
            --primary-active-color: #000000;
            --accent-color: #d97757;
            --accent-hover-color: #c96442;
            --accent-active-color: #b4532a;
            --background-color: #f4f1ea;
            --surface-color: #faf8f4;
            --surface-elevated-color: #fffcf7;
            --surface-hover-color: #efe9df;
            --card-bg-color: #fffcf7;
            --text-color: #141413;
            --light-text-color: #6b6560;
            --border-color: #e5dfd3;
            --input-bg-color: #fffcf7;
            --muted-bg-color: #ebe5da;
            --tag-bg-color: #efe8dc;
            --tag-hover-bg-color: #e7d8c8;
            --accent-soft-bg-color: rgba(217, 119, 87, 0.14);
            --accent-softer-bg-color: rgba(217, 119, 87, 0.09);
            --overlay-color: rgba(30, 26, 22, 0.48);
            --viewer-bg: rgba(18, 16, 14, 0.96);
            --success-color: #3d8b6e;
            --error-color: #c44b3f;
            --warning-color: #b8892a;
            --header-bg-color: rgba(244, 241, 234, 0.86);
            --header-text-color: #141413;
            --footer-button-hover-bg: rgba(20, 20, 19, 0.05);
            --shadow-sm: 0 1px 2px rgba(40, 32, 24, 0.05);
            --shadow-md: 0 8px 20px rgba(40, 32, 24, 0.08);
            --shadow-lg: 0 18px 40px rgba(40, 32, 24, 0.12);
            /* Claude 官网按钮：纯色 + 0→2px 描边环，无投影/渐变 */
            --btn-ink: #faf9f5;
            --btn-secondary-bg: #e8e6dc;
            --btn-secondary-fg: #4d4c48;
            --btn-secondary-fg-hover: #141413;
            --btn-secondary-border: #d1cfc5;
            --btn-ring: transparent;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-btn: 8px;
            --radius-pill: 999px;
            --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
            --ease-in-out: ease-in-out;
            --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
            --ease-press: cubic-bezier(0.2, 0.8, 0.2, 1);
            --press-scale: 1;
            --focus-color: #2c84db;
            --focus-ring: 0 0 0 2px var(--focus-color);

            /* --- Viewer Zoom Vars --- */
            --viewer-zoom: 1;
            --pivot-x: 50%;
            --pivot-y: 50%;

            /* 列表封面 / 详情缩略图：桌面约 1.3×（对齐浏览器 130% 观感） */
            --comic-card-min: 208px;
            --comic-cover-h: 390px;
            --detail-thumb-min: 195px;
            --random-card-w: var(--comic-card-min);
            --random-card-h: 286px;
            --detail-grid-cols: 6;
        }

        body.dark-theme {
            --primary-color: #f4f1ea;
            --primary-hover-color: #ffffff;
            --primary-active-color: #e8e2d6;
            --accent-color: #e08a6a;
            --accent-hover-color: #eba184;
            --accent-active-color: #d97757;
            --background-color: #141413;
            --surface-color: #1c1b19;
            --surface-elevated-color: #242320;
            --surface-hover-color: #2d2b27;
            --card-bg-color: #1c1b19;
            --text-color: #f4f1ea;
            --light-text-color: #a39e95;
            --border-color: #35322c;
            --input-bg-color: #242320;
            --muted-bg-color: #211f1c;
            --tag-bg-color: #2a241f;
            --tag-hover-bg-color: #3a2f27;
            --accent-soft-bg-color: rgba(224, 138, 106, 0.16);
            --accent-softer-bg-color: rgba(224, 138, 106, 0.1);
            --overlay-color: rgba(0, 0, 0, 0.62);
            --viewer-bg: rgba(8, 8, 7, 0.97);
            --success-color: #6db899;
            --error-color: #e07a70;
            --warning-color: #d4b06a;
            --header-bg-color: rgba(20, 20, 19, 0.88);
            --header-text-color: #f4f1ea;
            --footer-button-hover-bg: rgba(255, 255, 255, 0.06);
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
            --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.34);
            --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.42);
            --btn-ink: #141413;
            --btn-secondary-bg: #30302e;
            --btn-secondary-fg: #faf9f5;
            --btn-secondary-fg-hover: #ffffff;
            --btn-secondary-border: #3d3d3a;
            --btn-ring: transparent;
            --focus-color: #2c84db;
            --focus-ring: 0 0 0 2px var(--focus-color);
        }

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

        html {
            -webkit-text-size-adjust: 100%;
            text-rendering: optimizeLegibility;
        }

        body {
            font-family: "Söhne", "Sohne", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
            margin: 0;
            background-color: var(--background-color);
            background-image:
                radial-gradient(1200px 600px at 12% -10%, rgba(217, 119, 87, 0.08), transparent 55%),
                radial-gradient(900px 500px at 92% 0%, rgba(20, 20, 19, 0.04), transparent 50%);
            color: var(--text-color);
            line-height: 1.55;
            letter-spacing: -0.005em;
            min-height: 100vh;
            font-feature-settings: "ss01" on, "cv11" on;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body.dark-theme {
            background-image:
                radial-gradient(1000px 520px at 10% -12%, rgba(224, 138, 106, 0.08), transparent 55%),
                radial-gradient(800px 420px at 95% 0%, rgba(255, 255, 255, 0.03), transparent 48%);
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }

            button:hover,
            button:active,
            .comic-card:hover,
            .comic-card:active,
            .random-card:hover,
            .page-thumbnail:hover {
                transform: none !important;
            }
        }

        /* 头部跟随页面滚动（取消 sticky） */
        header {
            background-color: var(--header-bg-color);
            color: var(--header-text-color);
            padding: 0.95rem 1.75rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: none;
            border-bottom: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
            position: relative;
            z-index: 200;
            flex-wrap: nowrap;
            backdrop-filter: blur(18px) saturate(1.15);
            -webkit-backdrop-filter: blur(18px) saturate(1.15);
            gap: 0.75rem;
        }

        /* ===== 标题特效 ===== */
        header h1 a {
            color: var(--header-text-color);
            text-decoration: none;
            margin: 0;
            font-weight: 650;
            letter-spacing: -0.03em;
            font-size: 1.15rem;
            transition: color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
            display: inline-block;
        }

        header h1 a:hover {
            color: var(--accent-color);
            opacity: 1;
        }

        header h1 {
            line-height: 1;
            margin: 0;
        }

        #search-container {
            margin-left: auto;
            position: relative;
            display: flex;
            align-items: center;
        }

        #loading-indicator {
            font-weight: 600;
            margin-left: 0.75rem;
            color: var(--accent-color);
            font-size: 0.9rem;
            white-space: nowrap;
        }

        #toggle-random-btn {
            margin-left: .6rem;
            font-size: 0.9rem;
            flex: 0 0 auto;
        }

        #header-action-menu {
            display: flex;
            align-items: center;
            margin-left: 1rem;
            gap: .5rem;
        }

        #header-menu-toggle,
        #header-action-menu > button {
            background: transparent;
            background-image: none;
            color: var(--header-text-color);
            border: none;
            box-shadow:
                0 0 0 0 transparent,
                0 0 0 1px var(--border-color);
            border-radius: var(--radius-btn);
            padding: 0.48rem 0.85rem;
            min-height: 36px;
            font-weight: 500;
        }

        #header-menu-toggle:hover,
        #header-action-menu > button:hover {
            background: transparent;
            background-image: none;
            color: var(--header-text-color);
            box-shadow:
                0 0 0 1px transparent,
                0 0 0 2px var(--border-color);
            transform: none;
        }

        #header-menu-toggle:active,
        #header-action-menu > button:active {
            transform: none;
            box-shadow:
                0 0 0 1px transparent,
                0 0 0 2px var(--border-color);
        }

        #header-menu-toggle {
            display: none;
            flex: 0 0 auto;
            margin-left: 1rem;
            font-size: 1rem;
            padding: .45rem .8rem;
        }

        main {
            padding: 2rem 0; /* 取消水平方向的 padding */
            max-width: 100%; /* 取消 90vw 的最大宽度限制 */
            margin: 0;
            overflow-x: hidden; /* 防止负边距引发横向滚动条 */
        }

        /* 将原本 main 的留白转移到视图容器上，保证文字和按钮不贴边 */
        #comic-list-view, #comic-detail-view, #account-view, #upload-status-view {
            padding: 0 5vw;
        }

        .hidden {
            display: none !important;
        }

        /* ===== 按钮系统 — 对齐 Claude 官网：纯色 + 8px 圆角 + hover 2px 外环 ===== */
        button {
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            isolation: isolate;
            overflow: visible;
            background-color: var(--primary-color);
            background-image: none;
            color: var(--btn-ink);
            border: none;
            padding: 0.5rem 0.9rem;
            min-height: 36px;
            min-width: 44px;
            border-radius: var(--radius-btn);
            cursor: pointer;
            font: inherit;
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: -0.005em;
            line-height: 1;
            margin-right: 0.5rem;
            box-shadow: 0 0 0 0 var(--primary-color);
            transition:
                color 0.1s ease-in-out,
                background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out,
                opacity 0.2s ease-in-out;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            white-space: nowrap;
            text-decoration: none;
            text-align: center;
        }

        button:hover {
            background-color: var(--primary-color);
            background-image: none;
            color: var(--btn-ink);
            box-shadow: 0 0 0 2px var(--primary-color);
            transform: none;
            filter: none;
            text-decoration: none;
        }

        button:active {
            background-color: var(--primary-active-color);
            background-image: none;
            box-shadow: 0 0 0 2px var(--primary-active-color);
            transform: none;
            filter: none;
            transition-duration: 0.08s;
        }

        button:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 4px;
            box-shadow: 0 0 0 0 var(--primary-color);
        }

        button:disabled,
        button[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
            filter: none;
        }

        /* secondary / ghost：浅底 + 1px 边环，hover 扩到 2px 并加深文字 */
        .secondary-btn,
        .ghost-btn {
            background: var(--btn-secondary-bg);
            background-image: none;
            color: var(--btn-secondary-fg);
            border: none;
            box-shadow:
                0 0 0 0 var(--btn-secondary-bg),
                0 0 0 1px var(--btn-secondary-border);
            font-weight: 500;
        }

        .secondary-btn:hover,
        .ghost-btn:hover {
            background: var(--btn-secondary-bg);
            background-image: none;
            color: var(--btn-secondary-fg-hover);
            box-shadow:
                0 0 0 1px var(--btn-secondary-bg),
                0 0 0 2px var(--btn-secondary-border);
            filter: none;
            transform: none;
        }

        .secondary-btn:active,
        .ghost-btn:active {
            background: var(--btn-secondary-bg);
            background-image: none;
            color: var(--btn-secondary-fg-hover);
            box-shadow:
                0 0 0 1px var(--btn-secondary-bg),
                0 0 0 2px var(--btn-secondary-border);
        }

        .secondary-btn:focus-visible,
        .ghost-btn:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 4px;
        }

        /* tertiary 气质：透明底 + 1px 边 */
        .ghost-btn {
            background: transparent;
            background-image: none;
            color: var(--btn-secondary-fg);
            box-shadow:
                0 0 0 0 transparent,
                0 0 0 1px var(--btn-secondary-border);
        }

        .ghost-btn:hover {
            background: transparent;
            color: var(--btn-secondary-fg-hover);
            box-shadow:
                0 0 0 1px transparent,
                0 0 0 2px var(--btn-secondary-border);
        }

        /* brand CTA：陶土橙，hover 同色 2px 外环 */
        .accent-btn {
            background: var(--accent-hover-color);
            background-image: none;
            color: #fff;
            border: none;
            box-shadow: 0 0 0 0 var(--accent-hover-color);
            font-weight: 500;
        }

        .accent-btn:hover {
            background: var(--accent-hover-color);
            background-image: none;
            color: #fff;
            box-shadow: 0 0 0 2px var(--accent-hover-color);
            filter: none;
            transform: none;
        }

        .accent-btn:active {
            background: var(--accent-active-color);
            background-image: none;
            box-shadow: 0 0 0 2px var(--accent-active-color);
        }

        .accent-btn:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 4px;
            box-shadow: 0 0 0 0 var(--accent-hover-color);
        }

        .danger-btn {
            background: var(--error-color);
            background-image: none;
            color: #fff;
            border: none;
            box-shadow: 0 0 0 0 var(--error-color);
        }

        .danger-btn:hover {
            background: var(--error-color);
            background-image: none;
            color: #fff;
            box-shadow: 0 0 0 2px var(--error-color);
            filter: none;
            transform: none;
        }

        .danger-btn:active {
            background: color-mix(in srgb, var(--error-color) 88%, #000);
            background-image: none;
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--error-color) 88%, #000);
        }

        .danger-btn:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 4px;
        }

        .icon {
            display: inline-block;
            width: 1.1rem;
            height: 1.1rem;
            flex: 0 0 auto;
            background-color: currentColor;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;
            vertical-align: middle;
        }

        .icon-sm {
            width: 0.95rem;
            height: 0.95rem;
        }

        .icon-lg {
            width: 1.2rem;
            height: 1.2rem;
        }

        .icon-btn,
        .menu-item-label {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }

        .icon-btn .icon,
        .menu-item-label .icon {
            opacity: 0.95;
        }

        .icon-menu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
        .icon-dice { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='9' cy='9' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='9' cy='15' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='9' cy='9' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='9' cy='15' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E"); }
        .icon-refresh { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0 2 5'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0 2 5'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E"); }
        .icon-settings { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 1-2 0 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 1 0-2 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.36 0 .71-.13 1-.36a1.65 1.65 0 0 1 2 0c.29.23.64.36 1 .36a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .36.13.71.36 1a1.65 1.65 0 0 1 0 2c-.23.29-.36.64-.36 1Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 1-2 0 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 1 0-2 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.36 0 .71-.13 1-.36a1.65 1.65 0 0 1 2 0c.29.23.64.36 1 .36a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .36.13.71.36 1a1.65 1.65 0 0 1 0 2c-.23.29-.36.64-.36 1Z'/%3E%3C/svg%3E"); }
        .icon-arrow-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
        .icon-ruler { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 21 18-18'/%3E%3Cpath d='M14 4l6 6'/%3E%3Cpath d='M8 10l2 2'/%3E%3Cpath d='M6 12l2 2'/%3E%3Cpath d='M12 6l2 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 21 18-18'/%3E%3Cpath d='M14 4l6 6'/%3E%3Cpath d='M8 10l2 2'/%3E%3Cpath d='M6 12l2 2'/%3E%3Cpath d='M12 6l2 2'/%3E%3C/svg%3E"); }
        .icon-reset { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 3v6h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 3v6h6'/%3E%3C/svg%3E"); }
        .icon-external-link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M10 14 19 5'/%3E%3Cpath d='M19 14v5H5V5h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M10 14 19 5'/%3E%3Cpath d='M19 14v5H5V5h5'/%3E%3C/svg%3E"); }
        .icon-upload { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M20 16.5v2.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M20 16.5v2.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2.5'/%3E%3C/svg%3E"); }
        .icon-trash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
        .icon-edit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
        .icon-image { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"); }
        .icon-cover { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 9.5 8H4l4.5 3.5L7 17l5-3.2 5 3.2-1.5-5.5L20 8h-5.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 9.5 8H4l4.5 3.5L7 17l5-3.2 5 3.2-1.5-5.5L20 8h-5.5Z'/%3E%3C/svg%3E"); }
        .icon-chevron-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
        .icon-chevron-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
        .icon-chevron-up { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }
        .icon-select { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z'/%3E%3C/svg%3E"); }
        .icon-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
        .icon-close { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
        .icon-play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
        .icon-warning { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 20h18L12 4Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 20h18L12 4Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
        .icon-sun { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E"); }
        .icon-moon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 14.5A8.5 8.5 0 1 1 9.5 3 7 7 0 0 0 21 14.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 14.5A8.5 8.5 0 1 1 9.5 3 7 7 0 0 0 21 14.5Z'/%3E%3C/svg%3E"); }
        .icon-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
        .icon-logout { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M21 3v18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M21 3v18'/%3E%3C/svg%3E"); }
        .icon-login { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 7l-5 5 5 5'/%3E%3Cpath d='M9 12h12'/%3E%3Cpath d='M3 3v18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 7l-5 5 5 5'/%3E%3Cpath d='M9 12h12'/%3E%3Cpath d='M3 3v18'/%3E%3C/svg%3E"); }
        .icon-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M6 10.5V20h12v-9.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M6 10.5V20h12v-9.5'/%3E%3C/svg%3E"); }
        .icon-save { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l3 3v15H5z'/%3E%3Cpath d='M8 3v6h8V3'/%3E%3Cpath d='M8 17h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l3 3v15H5z'/%3E%3Cpath d='M8 3v6h8V3'/%3E%3Cpath d='M8 17h8'/%3E%3C/svg%3E"); }
        .icon-filter-off { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7v5l-4 2v-7z'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7v5l-4 2v-7z'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E"); }
        .icon-replace { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M8 21H3v-5'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M8 21H3v-5'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E"); }
        .icon-bookmark { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a1 1 0 0 1 1 1v16l-6-3.5L6 21V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a1 1 0 0 1 1 1v16l-6-3.5L6 21V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }

        /* ===== 输入框样式 ===== */
        input[type="text"], input[type="password"], input[type="number"], textarea, .chip-search-wrapper {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
            background: var(--input-bg-color);
            color: var(--text-color);
            font: inherit;
        }

        input:focus, textarea:focus, .chip-search-wrapper:focus-within {
            outline: none;
            border-color: color-mix(in srgb, var(--accent-color) 65%, var(--border-color)) !important;
            box-shadow: var(--focus-ring) !important;
        }

        input::placeholder,
        textarea::placeholder {
            color: var(--light-text-color);
            opacity: 0.85;
        }

        /* 漫画列表 */
        #view-title-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        #clear-filter-btn {
            margin-left: 1rem;
        }

        #comic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--comic-card-min), 1fr));
            gap: 1.5rem;
            grid-auto-flow: dense;
        }
        #comic-grid.media-search-grid {
            grid-template-columns: repeat(auto-fill, minmax(var(--detail-thumb-min), 1fr));
        }

        /* ===== 漫画卡片 ===== */
        .comic-card {
            background-color: var(--card-bg-color);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-color);
            overflow: hidden;
            text-decoration: none;
            color: var(--text-color);
            transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-out), border-color 0.22s var(--ease-out);
            cursor: pointer;
            display: flex;
            flex-direction: column;
        }

        .comic-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
        }

        .comic-card:active {
            transform: translateY(-1px) scale(0.985);
            transition-duration: 0.1s;
        }

        .comic-card img {
            width: 100%;
            height: var(--comic-cover-h);
            object-fit: cover;
            background-color: var(--muted-bg-color);
            transition: transform 0.55s var(--ease-out), filter 0.35s var(--ease-out);
            display: block;
        }

        .comic-card:hover img {
            transform: scale(1.045);
            filter: saturate(1.04) contrast(1.02);
        }

        .comic-card .title {
            padding: 0.9rem 0.95rem 1rem;
            font-weight: 560;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg-color) 92%, transparent), var(--card-bg-color));
            z-index: 1;
            position: relative;
            font-size: 0.92rem;
            line-height: 1.35;
            letter-spacing: -0.01em;
            border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
        }

        /* 分页控件 */
        .pagination-container {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
        }

        .pagination-btn,
        .pagination-info {
            padding: 0.5rem 0.85rem;
            border: none;
            background-color: var(--btn-secondary-bg);
            text-decoration: none;
            color: var(--btn-secondary-fg);
            border-radius: var(--radius-btn);
            transition: color 0.1s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            box-shadow:
                0 0 0 0 var(--btn-secondary-bg),
                0 0 0 1px var(--btn-secondary-border);
            font-weight: 500;
            letter-spacing: -0.005em;
            min-height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .pagination-btn:hover {
            background-color: var(--btn-secondary-bg);
            color: var(--btn-secondary-fg-hover);
            transform: none;
            box-shadow:
                0 0 0 1px var(--btn-secondary-bg),
                0 0 0 2px var(--btn-secondary-border);
        }

        .pagination-btn:active {
            transform: none;
        }

        .pagination-btn.disabled {
            color: var(--light-text-color);
            cursor: not-allowed;
            background-color: transparent;
            transform: none;
            box-shadow: none;
            opacity: 0.5;
        }

        .account-view {
            max-width: 1180px;
            margin: 0 auto;
        }

        .account-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.25rem;
            flex-wrap: wrap;
        }

        .account-header-actions {
            display: flex;
            gap: .75rem;
            flex-wrap: wrap;
        }

        .account-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1rem;
        }

        .account-card {
            background: var(--surface-elevated-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 1.05rem 1.15rem;
            box-shadow: var(--shadow-sm);
            transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
        }

        .account-card:hover {
            border-color: color-mix(in srgb, var(--primary-color) 18%, var(--border-color));
            box-shadow: var(--shadow-md);
        }

        .account-card h3,
        .account-card h4,
        .account-card h5 {
            margin-top: 0;
        }

        .account-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: .55rem;
        }
        .account-tab {
            margin: 0;
            padding: .45rem .9rem;
            border-radius: var(--radius-pill);
            border: 1px solid transparent;
            background: transparent;
            background-image: none;
            color: var(--light-text-color);
            box-shadow: none;
            font-size: .9rem;
        }
        .account-tab:hover { color: var(--text-color); background: var(--surface-hover-color); }
        .account-tab.active {
            color: var(--text-color);
            border-color: var(--border-color);
            background: var(--surface-elevated-color);
            font-weight: 560;
        }
        .account-panel.hidden { display: none !important; }
        .uc-history-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: .85rem;
        }
        /* 覆盖全局 button 的 inline-flex / nowrap / min-height，否则封面被挤没 */
        button.uc-history-card,
        .uc-history-card {
            appearance: none;
            -webkit-appearance: none;
            display: flex !important;
            flex-direction: column;
            align-items: stretch !important;
            justify-content: flex-start !important;
            gap: 0 !important;
            background: var(--surface-elevated-color) !important;
            background-image: none !important;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            overflow: hidden;
            cursor: pointer;
            transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
            position: relative;
            text-align: left;
            padding: 0 !important;
            margin: 0;
            width: 100%;
            min-width: 0;
            min-height: 0 !important;
            height: auto;
            color: inherit;
            box-shadow: none !important;
            white-space: normal !important;
            line-height: normal;
            font: inherit;
            letter-spacing: normal;
            isolation: auto;
        }
        button.uc-history-card:hover,
        .uc-history-card:hover {
            border-color: var(--accent-color);
            box-shadow: var(--shadow-sm) !important;
            background: var(--surface-elevated-color) !important;
            background-image: none !important;
            transform: none;
            filter: none;
            color: inherit;
        }
        button.uc-history-card:active,
        .uc-history-card:active {
            transform: none;
            box-shadow: var(--shadow-sm) !important;
            background: var(--surface-elevated-color) !important;
        }
        button.uc-history-card:focus-visible,
        .uc-history-card:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
            box-shadow: none !important;
        }
        .uc-history-card img {
            width: 100%;
            aspect-ratio: 0.72;
            object-fit: cover;
            display: block;
            flex-shrink: 0;
            background: var(--muted-bg-color);
            pointer-events: none;
        }
        .uc-history-card .uc-h-body {
            padding: .55rem .65rem .7rem;
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
        }
        .uc-history-card .uc-h-title {
            font-size: .88rem;
            font-weight: 560;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            word-break: break-word;
            text-align: left;
        }
        .uc-history-card .uc-h-meta {
            font-size: .78rem;
            opacity: .72;
            margin-top: .3rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }
        .uc-history-card .uc-h-del {
            position: absolute;
            top: .35rem;
            right: .35rem;
            z-index: 2;
            padding: .2rem .45rem !important;
            min-height: 0 !important;
            min-width: 0 !important;
            font-size: .75rem;
            border-radius: 6px;
            opacity: 0;
            transition: opacity .15s;
            margin: 0;
        }
        .uc-history-card:hover .uc-h-del,
        .uc-history-card:focus-within .uc-h-del { opacity: 1; }
        .uc-bm-list { display: flex; flex-direction: column; gap: .55rem; }
        .uc-bm-item {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .55rem .7rem .55rem .55rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--surface-elevated-color);
        }
        .uc-bm-item .uc-bm-thumb {
            width: 52px;
            height: 72px;
            object-fit: cover;
            border-radius: 8px;
            flex-shrink: 0;
            background: var(--muted-bg-color);
            display: block;
            pointer-events: none;
        }
        .uc-bm-item .uc-bm-main {
            flex: 1;
            min-width: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: .75rem;
            background: none;
            border: none;
            color: inherit;
            padding: 0;
            margin: 0;
            font: inherit;
            text-align: left;
        }
        .uc-bm-item .uc-bm-text { flex: 1; min-width: 0; }
        .uc-bm-item .uc-bm-title { font-weight: 560; font-size: .92rem; }
        .uc-bm-item .uc-bm-sub { font-size: .8rem; opacity: .7; margin-top: .2rem; word-break: break-word; }
        .uc-bm-item .uc-bm-actions { display: flex; gap: .35rem; flex-shrink: 0; }

        .bm-overlay {
            position: fixed;
            inset: 0;
            background: var(--overlay-color);
            /* 高于 #viewer(300) 与 .viewer-controls，阅读器内也能点开 */
            z-index: 320;
        }
        .bm-drawer {
            position: fixed;
            top: 0;
            right: 0;
            width: min(92vw, 320px);
            height: 100%;
            background: var(--surface-elevated-color);
            border-left: 1px solid var(--border-color);
            box-shadow: var(--shadow-lg);
            z-index: 330;
            display: flex;
            flex-direction: column;
            padding: 1rem;
            gap: .75rem;
        }
        .bm-drawer-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
        }
        .bm-drawer-list {
            flex: 1;
            overflow: auto;
            display: flex;
            flex-direction: column;
            gap: .45rem;
        }
        .bm-row {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .45rem .55rem;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--surface-color);
        }
        .bm-row-thumb {
            width: 44px;
            height: 60px;
            object-fit: cover;
            border-radius: 7px;
            flex-shrink: 0;
            background: var(--muted-bg-color);
            display: block;
            pointer-events: none;
        }
        .bm-row-main {
            flex: 1;
            min-width: 0;
            cursor: pointer;
            text-align: left;
            background: none;
            border: none;
            color: inherit;
            padding: 0;
            margin: 0;
            font: inherit;
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .bm-row-text { flex: 1; min-width: 0; }
        .bm-row-title { font-weight: 560; font-size: .9rem; }
        .bm-row-sub { font-size: .78rem; opacity: .7; margin-top: .15rem; }
        .bm-row-actions { display: flex; flex-direction: column; gap: .25rem; }
        .bm-row-actions button { margin: 0; padding: .2rem .4rem; font-size: .75rem; }

        .account-admin-layout {
            display: grid;
            grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
            gap: 1rem;
            align-items: start;
        }

        .account-user-list {
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        .account-user-list-item {
            width: 100%;
            margin: 0;
            text-align: left;
            background: var(--surface-color);
            background-image: none;
            color: var(--text-color);
            border: 1px solid var(--border-color);
            box-shadow: none;
            padding: .75rem .9rem;
            border-radius: var(--radius-sm);
            justify-content: flex-start;
        }

        .account-user-list-item:hover {
            background: var(--surface-hover-color);
            background-image: none;
            transform: none;
            box-shadow: none;
            filter: none;
        }

        .account-user-list-item.active {
            border-color: var(--accent-color);
            background: var(--accent-softer-bg-color);
            background-image: none;
            color: var(--text-color);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 22%, transparent);
        }

        .account-user-list-item:active {
            transform: scale(0.99);
        }

        .account-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .75rem;
        }

        .account-form-grid > label,
        .account-form-grid > div {
            display: flex;
            flex-direction: column;
            gap: .35rem;
        }

        .account-form-grid input,
        .account-form-grid textarea {
            width: 100%;
            box-sizing: border-box;
        }

        .account-inline-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .75rem;
            align-items: center;
        }

        .danger-btn {
            background: color-mix(in srgb, var(--error-color) 12%, var(--surface-color));
            background-image: none;
            color: var(--error-color);
            border: none;
            box-shadow:
                0 0 0 0 color-mix(in srgb, var(--error-color) 12%, var(--surface-color)),
                0 0 0 1px color-mix(in srgb, var(--error-color) 32%, transparent);
        }

        .danger-btn:hover {
            background: color-mix(in srgb, var(--error-color) 12%, var(--surface-color));
            background-image: none;
            color: var(--error-color);
            box-shadow:
                0 0 0 1px color-mix(in srgb, var(--error-color) 12%, var(--surface-color)),
                0 0 0 2px color-mix(in srgb, var(--error-color) 42%, transparent);
            filter: none;
            transform: none;
        }

        .danger-btn:active {
            background: color-mix(in srgb, var(--error-color) 18%, var(--surface-color));
            background-image: none;
            box-shadow:
                0 0 0 1px color-mix(in srgb, var(--error-color) 18%, var(--surface-color)),
                0 0 0 2px color-mix(in srgb, var(--error-color) 48%, transparent);
        }

        .secondary-btn {
            background: var(--btn-secondary-bg);
            background-image: none;
            color: var(--btn-secondary-fg);
            border: none;
            box-shadow:
                0 0 0 0 var(--btn-secondary-bg),
                0 0 0 1px var(--btn-secondary-border);
        }

        .secondary-btn:hover {
            background: var(--btn-secondary-bg);
            background-image: none;
            color: var(--btn-secondary-fg-hover);
            box-shadow:
                0 0 0 1px var(--btn-secondary-bg),
                0 0 0 2px var(--btn-secondary-border);
            filter: none;
            transform: none;
        }

        .upload-status-view {
            max-width: 1680px;
            margin: 0 auto;
        }

        .upload-status-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.1rem;
            flex-wrap: wrap;
        }

        .upload-status-header h2 {
            margin: 0 0 .25rem;
            font-size: 1.7rem;
        }

        .upload-status-meta {
            color: var(--light-text-color);
            font-size: .92rem;
        }

        .upload-status-actions {
            display: flex;
            gap: .65rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .upload-status-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: .85rem;
            margin-bottom: 1rem;
        }

        .upload-metric {
            background: var(--surface-elevated-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 1rem;
            min-width: 0;
            box-shadow: var(--shadow-sm);
            transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-out), border-color 0.18s var(--ease-out);
        }

        .upload-metric:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
            border-color: color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
        }

        .upload-metric-label {
            color: var(--light-text-color);
            font-size: .82rem;
            margin-bottom: .35rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .upload-metric-value {
            font-size: 1.55rem;
            line-height: 1.1;
            font-weight: 750;
            word-break: break-word;
        }

        .upload-status-main {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(360px, .9fr);
            gap: 1rem;
            align-items: start;
        }

        .upload-status-panel {
            background: var(--surface-elevated-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 1.05rem;
            min-width: 0;
            box-shadow: var(--shadow-sm);
        }

        .upload-status-panel h3 {
            margin: 0 0 .75rem;
            font-size: 1rem;
        }

        .upload-task-list {
            display: grid;
            gap: .75rem;
        }

        .upload-task {
            border: 1px solid var(--border-color);
            background: var(--surface-color);
            border-radius: 8px;
            padding: .85rem;
            min-width: 0;
        }

        .upload-task-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: .8rem;
            margin-bottom: .55rem;
        }

        .upload-task-title {
            font-weight: 700;
            line-height: 1.35;
            word-break: break-word;
        }

        .upload-task-status {
            color: var(--light-text-color);
            font-size: .86rem;
            margin-top: .25rem;
            word-break: break-word;
        }

        .upload-task-badge {
            flex: 0 0 auto;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            padding: .2rem .55rem;
            font-size: .78rem;
            color: var(--light-text-color);
            background: var(--muted-bg-color);
            white-space: nowrap;
        }

        .upload-progress-track {
            height: 8px;
            background: var(--muted-bg-color);
            border-radius: 999px;
            overflow: hidden;
            margin: .7rem 0 .65rem;
        }

        .upload-progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 55%, var(--success-color)));
            border-radius: inherit;
            transition: width .25s ease;
        }

        .upload-task-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .5rem;
            color: var(--light-text-color);
            font-size: .85rem;
        }

        .upload-task-stats strong {
            display: block;
            color: var(--text-color);
            font-size: .98rem;
            margin-bottom: .12rem;
        }

        .upload-empty {
            border: 1px dashed var(--border-color);
            border-radius: var(--radius-md);
            padding: 1.4rem;
            color: var(--light-text-color);
            text-align: center;
            background: var(--surface-color);
        }

        .pagination-btn.current-page {
            background-color: var(--primary-color);
            background-image: none;
            color: var(--btn-ink);
            cursor: default;
            border: none;
            box-shadow: 0 0 0 0 var(--primary-color);
            transform: none;
        }

        .pagination-btn.current-page:hover {
            transform: none;
            filter: none;
            color: var(--btn-ink);
            box-shadow: 0 0 0 0 var(--primary-color);
        }

        .detail-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.55rem;
            margin-bottom: 1.1rem;
        }

        .detail-toolbar button { margin-right: 0; }

        .detail-title-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.65rem 0.85rem;
            margin: 0.35rem 0 0.85rem;
        }

        .detail-title-row h2 {
            margin: 0;
            font-size: clamp(1.25rem, 2.2vw, 1.7rem);
            line-height: 1.3;
            letter-spacing: 0.01em;
            max-width: min(100%, 52rem);
            word-break: break-word;
        }

        .detail-meta-card {
            background: var(--surface-elevated-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            padding: 1rem 1.1rem;
            margin: 0.85rem 0;
        }

        .detail-meta-card strong {
            color: var(--light-text-color);
            font-weight: 600;
            font-size: 0.86rem;
            letter-spacing: 0.02em;
            display: block;
            margin-bottom: 0.45rem;
        }

        .detail-meta-card #tags-display {
            width: 100%;
        }

        .detail-meta-card #tags-edit-form {
            width: 100%;
            margin-top: 0.35rem;
        }

        .detail-meta-card #description-edit-form {
            width: 100%;
            margin-top: 0.35rem;
        }

        #comic-detail-view > hr {
            border: none;
            border-top: 1px solid var(--border-color);
            margin: 1.25rem 0;
            opacity: 0.85;
        }

        #back-to-list-btn { margin-bottom: 0; }

        #cancel-edit-tags-btn,
        #clear-filter-btn,
        #cancel-edit-title-btn,
        #cancel-edit-description-btn,
        #cancel-page-desc-btn,
        #cancel-random-settings-btn {
            background: var(--surface-color);
            background-image: none;
            color: var(--text-color);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }

        #cancel-edit-tags-btn:hover,
        #clear-filter-btn:hover,
        #cancel-edit-title-btn:hover,
        #cancel-edit-description-btn:hover,
        #cancel-page-desc-btn:hover,
        #cancel-random-settings-btn:hover {
            background: var(--surface-hover-color);
            background-image: none;
            color: var(--text-color);
            border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
            filter: none;
        }

        #comic-detail-view h2 { margin-top: 0; }

        #view-title-container {
            margin-bottom: 1.15rem;
            gap: 0.75rem;
        }

        #view-title {
            margin: 0;
            font-size: clamp(1.2rem, 2vw, 1.55rem);
            letter-spacing: 0.01em;
        }

        /* CSS 标签部分 */
        #tags-container {
            margin: 0.85rem 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.55rem 0.65rem;
        }

        #tags-container strong {
            margin-right: 0;
            width: 100%;
            margin-bottom: 0.15rem;
        }

        .tag {
            background-color: var(--tag-bg-color);
            color: var(--text-color);
            padding: 0.3rem 0.82rem;
            border-radius: var(--radius-pill);
            font-size: 0.86rem;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.18s var(--ease-out), transform 0.16s var(--ease-press), box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
            margin: 0;
            border: 1px solid color-mix(in srgb, var(--accent-color) 12%, transparent);
            box-shadow: none;
            font-weight: 520;
            letter-spacing: -0.01em;
        }

        .tag:hover {
            background-color: var(--tag-hover-bg-color);
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
            box-shadow: var(--shadow-sm);
            color: var(--accent-color);
        }

        .tag:active { transform: scale(0.97); }

        #tags-display {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 0.5rem 0.8rem;
        }

        #tags-edit-form {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            flex-wrap: wrap;
            width: min(100%, 860px);
            position: relative;
        }

        #comic-tags-chip-editor {
            position: relative;
            flex: 1 1 420px;
            min-width: min(100%, 320px);
        }

        #comic-tags-chip-container {
            min-width: 100%;
        }

        #comic-tags-chip-input {
            min-width: 140px;
        }

        #comic-tags-suggest-box {
            left: 0;
            right: 0;
        }

        /* === 描述 === */
        #description-container {
            margin: 0.85rem 0;
            line-height: 1.6;
        }

        #description-container textarea {
            width: min(100%, 42rem);
            min-width: 260px;
            padding: .75rem .85rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            font-size: .92rem;
            resize: vertical;
            margin-top: .55rem;
            line-height: 1.55;
        }

        #description-display {
            display: block;
            margin-top: .4rem;
            line-height: 1.65;
            color: var(--text-color);
            white-space: pre-wrap;
            word-break: break-word;
        }

        #edit-tags-btn,
        #edit-description-btn {
            margin-left: 0;
            margin-top: .55rem;
        }

        #comic-pages-grid {
            display: grid;
            /* 桌面约每行 6 张，格子随屏变大（比 minmax(195) 更贴目标） */
            grid-template-columns: repeat(var(--detail-grid-cols), minmax(0, 1fr));
            gap: 1.1rem;
            /* 左右负边距刚好抵消父级的 5vw padding，使其完全撑满屏幕 */
            margin-left: -5vw;
            margin-right: -5vw;
            /* 可选：给左右留 4px 的极小安全距离防误触。如果想绝对死贴边缘，可以改成 0 */
            padding: 0 4px;
            grid-auto-flow: dense; 
        }
        .page-thumbnail.span-2 {
            grid-column: span 2;
        }

        /* ================= 缩略图占位改进 + 性能优化 ================= */
        .page-thumbnail,
        .page-skeleton {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-out), border-color 0.22s var(--ease-out);
            contain: paint;
            aspect-ratio: 2 / 3;
            background: var(--muted-bg-color);
            cursor: pointer;
            box-shadow: var(--shadow-sm);
        }

        .page-thumbnail:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
        }

        .page-thumbnail:active { transform: scale(0.985); transition-duration: 0.1s; }


        /* === 新增：视频大小角标 (左下角) === */
        .page-thumbnail .video-size {
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.75);
            color: #fff;
            padding: 0.2rem 0.5rem;
            font-size: 0.75rem;
            border-top-right-radius: 4px;
            pointer-events: none;
            font-family: monospace;
        }

        /* 真缩略图淡入 */
        .page-thumbnail img,
        .page-skeleton img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity .25s, transform 0.4s ease;
        }
        
        .page-thumbnail:hover img {
            transform: scale(1.05);
        }

        .page-thumbnail.loaded img {
            opacity: 1;
        }

        /* ======= 选中高亮 ======= */
        .page-thumbnail.selected {
            border-color: color-mix(in srgb, var(--accent-color) 60%, var(--border-color));
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 28%, transparent), var(--shadow-md);
        }

        .page-thumbnail.selected::after {
            content: '';
            position: absolute;
            inset: 0;
            background: color-mix(in srgb, var(--accent-color) 22%, transparent);
            pointer-events: none;
            border-radius: inherit;
        }

        .page-thumbnail.selected::before {
            content: '';
            position: absolute;
            top: 0.45rem;
            right: 0.45rem;
            width: 1.35rem;
            height: 1.35rem;
            border-radius: 999px;
            background: var(--accent-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/0.85rem no-repeat;
            box-shadow: 0 2px 8px rgba(0,0,0,0.22);
            z-index: 2;
            pointer-events: none;
        }

        .page-thumbnail .page-number {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba(8, 10, 14, 0.72);
            color: white;
            padding: 0.22rem 0.55rem;
            font-size: 0.78rem;
            border-top-left-radius: 8px;
            backdrop-filter: blur(4px);
            font-weight: 560;
            letter-spacing: 0.02em;
        }

        .page-thumbnail .video-size {
            border-top-right-radius: 8px;
            backdrop-filter: blur(4px);
            font-weight: 560;
        }

        #global-toast {
            position: fixed;
            top: 1.25rem;
            left: 50%;
            transform: translateX(-50%) translateY(-8px);
            padding: 0.7rem 1.15rem;
            border-radius: var(--radius-pill);
            z-index: 10000;
            font-size: 0.92rem;
            color: #fff;
            text-align: center;
            line-height: 1.45;
            box-shadow: var(--shadow-lg);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
            max-width: min(88vw, 28rem);
            border: 1px solid rgba(255,255,255,0.12);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            font-weight: 540;
        }

        #global-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        #global-toast.toast-error {
            background: color-mix(in srgb, var(--error-color) 92%, #000);
        }

        #global-toast.toast-ok {
            background: rgba(18, 20, 24, 0.92);
        }

        /* === 多选模式工具条 ========================= */
        #multi-select-bar {
            position: sticky;
            top: 0.5rem;
            z-index: 50;
            background: color-mix(in srgb, var(--surface-elevated-color) 88%, #000 12%);
            color: var(--text-color);
            padding: .7rem 1rem;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .55rem;
            backdrop-filter: blur(14px) saturate(1.15);
            -webkit-backdrop-filter: blur(14px) saturate(1.15);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
            box-shadow: var(--shadow-md);
            font-weight: 560;
        }

        #multi-select-bar button {
            padding: .42rem .85rem;
            margin-right: 0;
            box-shadow: none;
            background: color-mix(in srgb, var(--surface-color) 80%, transparent);
            background-image: none;
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }

        #multi-select-bar button:hover {
            background: var(--surface-hover-color);
            background-image: none;
            transform: translateY(-1px);
            filter: none;
        }

        #multi-select-bar #batch-del-btn {
            background: color-mix(in srgb, var(--error-color) 16%, transparent);
            background-image: none;
            color: var(--error-color);
            border-color: color-mix(in srgb, var(--error-color) 35%, transparent);
        }

        #multi-select-bar #batch-del-btn:hover {
            background: color-mix(in srgb, var(--error-color) 24%, transparent);
            background-image: none;
        }

        footer {
            position: relative;
            text-align: center;
            padding: 2.2rem 1.25rem 2.6rem;
            color: var(--light-text-color);
            font-size: 0.9rem;
            border-top: 1px solid var(--border-color);
            margin-top: 1rem;
            background: color-mix(in srgb, var(--surface-color) 70%, transparent);
        }

        footer p {
            margin: 0;
            opacity: 0.55;
            letter-spacing: 0.08em;
        }

        #theme-toggle-btn {
            position: absolute;
            right: 1.25rem;
            bottom: 1.15rem;
            background: var(--btn-secondary-bg);
            background-image: none;
            color: var(--btn-secondary-fg);
            border: none;
            padding: 0.42rem 0.8rem;
            margin: 0;
            font-size: 0.88rem;
            box-shadow:
                0 0 0 0 var(--btn-secondary-bg),
                0 0 0 1px var(--btn-secondary-border);
            border-radius: var(--radius-btn);
            gap: 0.4rem;
            min-height: 36px;
        }

        #theme-toggle-btn:hover {
            background: var(--btn-secondary-bg);
            background-image: none;
            color: var(--btn-secondary-fg-hover);
            transform: none;
            box-shadow:
                0 0 0 1px var(--btn-secondary-bg),
                0 0 0 2px var(--btn-secondary-border);
            filter: none;
        }

        #theme-toggle-btn:active {
            transform: none;
            box-shadow:
                0 0 0 1px var(--btn-secondary-bg),
                0 0 0 2px var(--btn-secondary-border);
        }

        /* Autocomplete list for search */
        .autocomplete-list {
            position: absolute;
            top: calc(100% + 0.35rem);
            left: 0;
            right: 0;
            max-height: 280px;
            overflow-y: auto;
            background: var(--surface-elevated-color);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-lg);
            border-radius: var(--radius-md);
            z-index: 101;
            padding: 0.3rem;
        }

        .autocomplete-item {
            padding: 0.7rem 0.85rem;
            cursor: pointer;
            color: var(--text-color);
            transition: background-color 0.15s var(--ease-out);
            border-radius: 8px;
        }

        .autocomplete-item:hover,
        .autocomplete-item.active {
            background-color: var(--accent-softer-bg-color);
        }

        /* ===== 现代感毛玻璃右键菜单 ===== */
        @keyframes menuFadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        #context-menu {
            position: fixed;
            min-width: 160px;
            background: color-mix(in srgb, var(--surface-elevated-color) 88%, transparent);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--border-color);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255,255,255,0.03);
            padding: 6px;
            border-radius: 12px;
            z-index: 999;
            list-style: none;
            margin: 0;
            transform-origin: top left;
            animation: menuFadeIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        #context-menu li {
            padding: 0.6rem 1rem;
            cursor: pointer;
            white-space: nowrap;
            border-radius: 8px;
            transition: background-color 0.16s var(--ease-out), color 0.16s var(--ease-out), transform 0.12s var(--ease-press), box-shadow 0.16s var(--ease-out);
            font-size: 0.95rem;
            color: var(--text-color);
        }

        #context-menu li .menu-item-label {
            width: 100%;
            justify-content: space-between;
        }

        #context-menu li .menu-item-label .icon {
            opacity: 0.8;
        }

        #context-menu li:hover {
            background: var(--primary-color);
            background-image: none;
            color: var(--btn-ink);
            transform: none;
            box-shadow: none;
        }

        #context-menu li:active {
            transform: scale(0.98);
        }

        #context-menu li.disabled {
            color: #999;
            cursor: not-allowed;
            font-weight: bold;
            background: transparent !important;
            transform: none !important;
        }

        #context-menu-overlay {
            position: fixed;
            inset: 0;
            z-index: 998;
            background: transparent;
        }

        /* ===== 登录弹窗 ===== */
        #login-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: var(--overlay-color);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #login-box {
            background: var(--surface-elevated-color);
            padding: 2rem 1.75rem 1.75rem;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-lg);
            width: min(92vw, 360px);
        }

        #login-box h3 {
            margin: 0 0 1.1rem;
            text-align: center;
            color: var(--text-color);
            font-size: 1.35rem;
            letter-spacing: -0.03em;
            font-weight: 650;
        }

        #login-box input {
            width: 100%;
            padding: .85rem 1rem;
            margin: .35rem 0 0.95rem 0;
            box-sizing: border-box;
            border-radius: var(--radius-sm);
        }

        #login-box button {
            width: 100%;
            padding: 0.9rem;
            font-size: 1rem;
            margin-right: 0;
            border-radius: var(--radius-pill);
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        #login-error {
            color: var(--error-color);
            font-size: .9rem;
            margin-bottom: 1rem;
        }

        /* === Random bar =================================== */
        #random-bar-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 0.5rem;
        }

        /* 自定义滚动条样式增强现代感 */
        #random-bar-wrapper::-webkit-scrollbar {
            height: 6px;
        }
        #random-bar-wrapper::-webkit-scrollbar-track {
            background: transparent;
        }
        #random-bar-wrapper::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.15);
            border-radius: 10px;
        }
        #random-bar-wrapper::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.3);
        }

        .random-bar-inner {
            display: flex;
            gap: 1.2rem;
            padding-bottom: .5rem;
            padding-top: 0.5rem;
        }

        .random-card {
            flex: 0 0 var(--random-card-w);
            width: var(--random-card-w);
            cursor: pointer;
            border-radius: var(--radius-md);
            overflow: hidden;
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-out), border-color 0.22s var(--ease-out);
            display: flex;
            flex-direction: column;
        }

        .random-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
        }

        .random-card:active { transform: translateY(-2px) scale(0.985); transition-duration: 0.1s; }

        .random-card img {
            width: 100%;
            height: var(--random-card-h);
            object-fit: cover;
            background: var(--muted-bg-color);
            display: block;
            transition: transform 0.5s var(--ease-out), filter 0.35s var(--ease-out);
        }

        .random-card:hover img {
            transform: scale(1.08);
            filter: saturate(1.06);
        }

        .random-card .rc-title {
            font-size: .85rem;
            padding: .6rem .5rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: var(--surface-color);
            position: relative;
            z-index: 1;
        }

        .random-card img {
            pointer-events: none;
        }

        /* === 随机推荐栏 标题区 === */
        .random-bar-header {
            display: flex;
            align-items: center;
            gap: .4rem;
            margin-bottom: .8rem;
        }

        .random-bar-header h3 {
            margin: 0;
            flex: 1;
            font-size: 1.3rem;
            color: var(--text-color);
        }

        .random-bar-action-btn {
            background: var(--surface-color);
            background-image: none;
            color: var(--text-color);
            padding: .48rem;
            border: 1px solid var(--border-color);
            border-radius: 50%;
            line-height: 1;
            cursor: pointer;
            transition: background-color .16s var(--ease-out), transform .14s var(--ease-press), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
            box-shadow: var(--shadow-sm);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            min-width: 2.1rem;
            min-height: 2.1rem;
        }

        .random-bar-action-btn .icon {
            width: 1rem;
            height: 1rem;
        }

        .random-bar-action-btn:hover {
            background: var(--surface-hover-color);
            background-image: none;
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
            border-color: color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
            filter: none;
        }

        .random-bar-action-btn:active { transform: scale(0.93); }


        #random-settings-modal {
            position: fixed;
            inset: 0;
            z-index: 1001;
            background: var(--overlay-color);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #random-settings-box {
            background: var(--surface-elevated-color);
            padding: 1.5rem 1.4rem 1.25rem;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-lg);
            width: min(92vw, 360px);
        }

        #random-settings-box .actions button {
            margin-right: 0;
            margin-left: 0.45rem;
        }

        #random-settings-box h4 {
            margin-top: 0;
            color: var(--text-color);
        }

        #random-settings-box label {
            display: block;
            margin: .8rem 0 .4rem 0;
        }

        #random-settings-box input[type="number"] {
            width: 80px;
            padding: .4rem;
        }

        #random-settings-box .actions {
            margin-top: 1.8rem;
            text-align: right;
        }

        .random-bar-inner.two-rows {
            display: grid;
            grid-auto-flow: column;
            grid-template-rows: repeat(2, auto);
            grid-auto-columns: var(--random-card-w);
            column-gap: 1.2rem;
            row-gap: 1rem;
        }

        .chip-search-wrapper {
            display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
            background: var(--input-bg-color); border: 1px solid var(--border-color); border-radius: var(--radius-pill);
            padding: 0.35rem 0.75rem; flex: 1; min-width: 220px; cursor: text;
            transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
            box-shadow: var(--shadow-sm);
        }
        .chip {
            display: inline-flex; align-items: center; gap: 0.3rem;
            background: var(--accent-soft-bg-color); color: var(--accent-color); padding: 0.28rem 0.58rem;
            border-radius: var(--radius-pill); font-size: 0.84rem; white-space: nowrap;
            font-weight: 560; border: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
        }
        .chip.media-chip {
            background: color-mix(in srgb, var(--success-color) 16%, transparent); color: var(--success-color); border: 1px solid color-mix(in srgb, var(--success-color) 28%, transparent);
        }
        .chip .chip-remove {
            cursor: pointer; font-weight: 700; color: currentColor; opacity: 0.65;
            width: 1.05rem; height: 1.05rem; display: inline-flex; align-items: center; justify-content: center;
            border-radius: 999px; transition: background-color .15s var(--ease-out), opacity .15s var(--ease-out);
        }
        .chip .chip-remove:hover { background: color-mix(in srgb, var(--error-color) 18%, transparent); color: var(--error-color); opacity: 1; }

        /* 修复输入框白边/双边框问题：增加权重，强制透明背景和去除边框 */
        input[type="text"].chip-input-field { 
            border: none !important; outline: none; background: transparent !important; 
            flex: 1; min-width: 100px; font-size: 0.95rem; padding: 0.3rem; 
            box-shadow: none !important;
        }
        
        .warning-icon {
            width: 2rem;
            height: 2rem;
            color: var(--warning-color);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .warning-icon .icon {
            width: 100%;
            height: 100%;
        }

        /* 回顶部：主列表/详情滚动时出现；阅读器内隐藏 */
        #back-to-top {
            position: fixed;
            right: max(1rem, env(safe-area-inset-right, 0px));
            bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
            z-index: 90;
            width: 2.75rem;
            height: 2.75rem;
            border: none;
            border-radius: 999px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--btn-ink);
            background: color-mix(in srgb, var(--primary-color) 88%, transparent);
            box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--border-color) 50%, transparent);
            opacity: 0;
            pointer-events: none;
            transform: translateY(8px);
            transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), background-color 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        #back-to-top.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
        #back-to-top:hover {
            background: var(--primary-hover-color);
        }
        #back-to-top:active {
            transform: scale(0.94);
        }
        #back-to-top .icon {
            width: 1.25rem;
            height: 1.25rem;
        }
        body.viewer-open #back-to-top {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* ===== 统一整理并修复的移动端适配 ===== */
        /* 以 1080×2460 竖屏手机为基准：2 列封面 + 比例高度，避免继承桌面 390px */
        @media (max-width: 767px) {
            :root {
                --comic-card-min: calc((100vw - 2.5rem) / 2);
                --comic-cover-h: auto;
                --detail-thumb-min: calc((100vw - 1.5rem) / 3);
                --random-card-w: min(42vw, 160px);
                --random-card-h: auto;
                --detail-grid-cols: 2;
            }

            .random-card img {
                height: auto;
                aspect-ratio: 2 / 3;
            }

            .random-card .rc-title {
                font-size: .78rem;
                padding: .5rem .4rem;
            }

            main { padding: 1rem 0; }
            
            #comic-list-view, #comic-detail-view, #account-view, #upload-status-view {
                padding: 0 1rem; /* 移动端非网格内容左右留 1rem 安全距离 */
            }

            #comic-pages-grid {
                margin-left: -1rem; /* 抵消父级 1rem padding */
                margin-right: -1rem;
                gap: 0.45rem;
                padding: 0 2px;
                grid-template-columns: repeat(var(--detail-grid-cols), minmax(0, 1fr));
            }

            #comic-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.85rem;
            }
            #comic-grid.media-search-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.55rem;
            }

            .comic-card img {
                height: auto;
                aspect-ratio: 2 / 3;
            }

            .comic-card .title {
                padding: 0.65rem 0.7rem 0.75rem;
                font-size: 0.82rem;
            }

            #back-to-top {
                width: 3rem;
                height: 3rem;
                right: max(0.85rem, env(safe-area-inset-right, 0px));
                bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
            }

            header {
                position: relative;
                display: grid;
                grid-template-columns: auto minmax(0, 1fr) 52px;
                align-items: center;
                gap: .45rem;
                padding: .8rem .85rem;
            }

            header h1 {
                font-size: .96rem;
                margin: 0;
                white-space: nowrap;
                min-width: 0;
            }

            header h1 a {
                letter-spacing: .5px;
            }

            #search-container {
                flex: initial;
                min-width: 0; /* 允许容器收缩 */
                width: 100%;
                margin-left: 0 !important;
                max-width: none !important;
                overflow: visible;
            }

            #search-form {
                width: 100%; /* 确保表单占满可用空间 */
                min-width: 0;
            }

            /* --- 核心修复：覆盖 PC 端的 220px min-width --- */
            .chip-search-wrapper {
                min-width: 0;
                width: 100%;
                max-width: 100%;
                padding: 0.2rem 0.35rem;
            }

            input[type="text"].chip-input-field {
                min-width: 0;
                font-size: 0.85rem;
                padding: 0.2rem;
            }

            #header-action-menu {
                position: absolute;
                top: calc(100% + .5rem);
                right: .85rem;
                display: none;
                flex-direction: column;
                align-items: stretch;
                min-width: 160px;
                max-width: calc(100vw - 1.7rem);
                padding: .5rem;
                border-radius: 10px;
                background: var(--surface-elevated-color);
                border: 1px solid var(--border-color);
                box-shadow: 0 10px 24px rgba(0,0,0,.28);
                z-index: 220;
                gap: .4rem;
            }

            header.menu-open #header-action-menu {
                display: flex;
            }

            #header-menu-toggle {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 52px;
                min-width: 52px;
                height: 38px;
                margin-left: 0;
                margin-right: 0;
                padding: 0;
                z-index: 221;
                border-radius: 999px;
                font-size: 1rem;
                letter-spacing: 0;
                overflow: hidden;
            }

            #header-menu-toggle .menu-text {
                display: none;
            }

            #header-menu-toggle .menu-icon {
            display: inline-flex;
            line-height: 1;
            align-items: center;
            justify-content: center;
        }

            #header-action-menu button {
                width: 100%;
                margin: 0;
                justify-content: flex-start;
                border-radius: 8px;
            }

            #toggle-random-btn,
            #login-btn,
            #logout-btn,
            #user-center-btn {
                flex: 0 0 auto;
                font-size: .9rem;
                padding: .4rem .8rem;
                margin-left: 0;
                white-space: nowrap;
            }

            .account-header {
                align-items: flex-start;
            }

            .account-admin-layout,
            .account-form-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .account-card {
                padding: .95rem;
            }

            .upload-status-header {
                align-items: flex-start;
            }

            .upload-status-grid,
            .upload-status-main,
            .upload-task-stats {
                grid-template-columns: minmax(0, 1fr);
            }

            .upload-status-panel,
            .upload-metric {
                padding: .9rem;
            }

            .upload-task-top {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (min-width: 768px) and (max-width: 1279px) {
            :root {
                --comic-card-min: 180px;
                --comic-cover-h: 340px;
                --detail-thumb-min: 170px;
                --random-card-w: 180px;
                --random-card-h: 250px;
                --detail-grid-cols: 4;
            }
            .upload-status-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            .upload-status-main {
                grid-template-columns: minmax(0, 1fr);
            }
        }
    

        .upload-metric-clickable {
            cursor: pointer;
        }
        .upload-metric-clickable:focus-visible {
            outline: 2px solid var(--accent-color);
            outline-offset: 2px;
        }

        #failed-archives-modal {
            position: fixed;
            inset: 0;
            z-index: 1002;
            background: var(--overlay-color);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #failed-archives-box {
            background: var(--surface-elevated-color);
            padding: 1.25rem 1.2rem 1.1rem;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-lg);
            width: min(94vw, 640px);
            max-height: min(86vh, 720px);
            display: flex;
            flex-direction: column;
            gap: .75rem;
        }
        .failed-archives-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
        }
        .failed-archives-head h4 {
            margin: 0;
            color: var(--text-color);
            font-size: 1.1rem;
        }
        .failed-archives-toolbar {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
        }
        .failed-archives-list {
            overflow: auto;
            max-height: min(60vh, 520px);
            display: flex;
            flex-direction: column;
            gap: .65rem;
        }
        .failed-archive-row {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: .75rem .85rem;
            background: var(--surface-color, transparent);
        }
        .failed-archive-title {
            font-weight: 650;
            margin-bottom: .35rem;
            word-break: break-word;
        }
        .failed-archive-reason {
            color: var(--error-color);
            font-size: .88rem;
            white-space: pre-wrap;
            word-break: break-word;
            margin-bottom: .35rem;
        }
        .failed-archive-meta {
            color: var(--light-text-color);
            font-size: .8rem;
            margin-bottom: .55rem;
        }
        .failed-archive-actions {
            display: flex;
            gap: .45rem;
            flex-wrap: wrap;
        }